@charset "utf-8";

/*-------------------------
base
-------------------------*/
.top-inner {max-width:1130px;margin:0 auto;margin-bottom: 120px;}
.top-inner span img {width: 20%;}
.brandLogo{margin: 80px 0 120px 0;}
.brandTitle h3 {
    font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    font-size: 35px;
    font-feature-settings: "palt";
    letter-spacing: .07em;
    line-height: 1.8;
    color: #000000;
    margin: 0 auto;
}
.brandTitle p {
    font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    font-size: 18px;
    font-feature-settings: "palt";
    letter-spacing: .07em;
    line-height: 2.5;
    color: #000000;
    margin: 0 auto;
    margin-top: 5%;
    margin-bottom: 10%;
}
.pc_view{display: block;}
.smp_view{display: none;}
img {
    height: auto;
    width: 100%;
    vertical-align: middle;
}

@media (max-width: 1025px) {
    .brandTitle p{
      font-size: 14px;
      letter-spacing: .05em;
      width: 750px;
      margin: 0 auto;
      margin-top: 5%;
      margin-bottom: 10%;
    }
}

@media (max-width: 768px) {
    .top-inner {max-width:1130px;margin:0 auto;margin-bottom: 80px;}
    .brandTitle p {
        font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
        font-feature-settings: "palt";
        letter-spacing: .07em;
        color: #000000;
        margin: 10% 0;
        width: 100%;
    }
    .brandTitle h3 {font-size: 14px;}
    .brandTitle p {font-size: 14px;}
    .brandLogo{margin: 40px 0 10px 0;}
    .brandTitle .brandLogo img{width: 100%;}
    .pc_view{display: none;}
    .smp_view{display: block;}
}

@media (max-width:600px){
    .brandTitle p {font-size: 14px;}
    .brandTitle h3 {font-size: 20px;}
}

@media (max-width:480px){
    .brandTitle p {font-size: 13px;}
}

@media (max-width:415px){
    .brandTitle p {font-size: 14px;}
    .brandTitle h3 { font-size: 16px;}
}

@media (max-width:380px){
    .brandTitle h3 {font-size: 14px;}
}

@media (max-width:320px){
    .brandTitle p{font-size: .68rem;}
}


/*-------------------------
slider
-------------------------*/
.js_2020ss{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.slider__wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  height: 750px;
  float: left;
  margin-bottom: 10%;
}
.ratio-1_1:before {
    content: "";
    display: block;
    padding-top: 150%; /* 1:1 */
}
.slider__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -760px;
  margin: auto;
  margin-bottom: 60px;
  width: 70%;
  max-width: 682px;
  z-index: 100;
}
.slider {
  backface-visibility: hidden;
}
.slider__slide {
  position: absolute;
  overflow: hidden;
  top: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.slider__slide-img {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/*右 下から上へのアニメーション*/
.slider__slide.active {
  top: 0;
  animation-duration: 1500ms;
  animation-name: slide-in;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  z-index: 50;
}
.slider__slide.active > .slider__slide-img {
  animation-duration: 1500ms;
  animation-name: img-in;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.slider__slide.inactive {
  top: 0;
  animation-duration: 1500ms;
  animation-name: slide-out;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  z-index: 0;
}
.slider__slide.inactive > .slider__slide-img {
  animation-duration: 1500ms;
  animation-name: img-out;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.slider__slide.active-default {
  top: 0;
}
@keyframes slide-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes img-in {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes img-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50%);
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slider__slide:nth-child(1) .slider__slide-img {
  background-image: url("../imgs/01.jpg");
}
.slider__slide:nth-child(2) .slider__slide-img {
  background-image: url("../imgs/03.jpg");
}
.slider__slide:nth-child(3) .slider__slide-img {
  background-image: url("../imgs/05.jpg");
}
.slider__slide:nth-child(4) .slider__slide-img {
  background-image: url("../imgs/07_2.jpg");
}
.slider__slide:nth-child(5) .slider__slide-img {
  background-image: url("../imgs/09.jpg");
}
.slider__slide:nth-child(6) .slider__slide-img {
  background-image: url("../imgs/11.jpg");
}
.slider__slide:nth-child(7) .slider__slide-img {
  background-image: url("../imgs/13.jpg");
}
.slider__slide:nth-child(8) .slider__slide-img {
  background-image: url("../imgs/15.jpg");
}
.slider__slide:nth-child(9) .slider__slide-img {
  background-image: url("../imgs/17.jpg");
}
.slider__slide:nth-child(10) .slider__slide-img {
  background-image: url("../imgs/19.jpg");
}
.slider__slide:nth-child(11) .slider__slide-img {
  background-image: url("../imgs/21.jpg");
}

/*左 上から下へのアニメーション*/
.slider__slide_2.active {
  top: 0;
  animation-duration: 1500ms;
  animation-name: slide-in_2;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  z-index: 50;
}
.slider__slide_2.active > .slider__slide-img {
  animation-duration: 1500ms;
  animation-name: img-in_2;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.slider__slide_2.inactive {
  top: 0;
  animation-duration: 1500ms;
  animation-name: slide-out_2;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  z-index: 0;
}
.slider__slide_2.inactive > .slider__slide-img {
  animation-duration: 1500ms;
  animation-name: img-out_2;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes slide-in_2 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes img-in_2 {
  0% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-out_2 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes img-out_2 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slider__slide_2:nth-child(1) .slider__slide-img {
  background-image: url("../imgs/02.jpg");
}
.slider__slide_2:nth-child(2) .slider__slide-img {
  background-image: url("../imgs/04.jpg");
}
.slider__slide_2:nth-child(3) .slider__slide-img {
  background-image: url("../imgs/06.jpg");
}
.slider__slide_2:nth-child(4) .slider__slide-img {
  background-image: url("../imgs/08_2.jpg");
}
.slider__slide_2:nth-child(5) .slider__slide-img {
  background-image: url("../imgs/10.jpg");
}
.slider__slide_2:nth-child(6) .slider__slide-img {
  background-image: url("../imgs/12.jpg");
}
.slider__slide_2:nth-child(7) .slider__slide-img {
  background-image: url("../imgs/14.jpg");
}
.slider__slide_2:nth-child(8) .slider__slide-img {
  background-image: url("../imgs/16.jpg");
}
.slider__slide_2:nth-child(9) .slider__slide-img {
  background-image: url("../imgs/18.jpg");
}
.slider__slide_2:nth-child(10) .slider__slide-img {
  background-image: url("../imgs/20.jpg");
}
.slider__slide_2:nth-child(11) .slider__slide-img {
  background-image: url("../imgs/22.jpg");
}

@media (max-width:1025px){
    .js_2020ss{
      max-width: 750px;
    }
    .slider__wrap {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 375px;
      height: 562px;
      float: left;
      margin-bottom: 10%;
    }
    .slider__text {
      bottom: -600px;
      width: 60%;
    }
}

@media screen and (max-width: 768px) {
    .js_2020ss{
      max-width: 500px;
      width: 100%;
      margin: 0 auto;
      margin-top: 5%;
    }
    .slider__wrap {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 500px;
      height: auto;
      float: none;
      margin-bottom: 10%;
    }
    .ratio-1_1:before {
      content: "";
      display: block;
      padding-top: 150%; /* 1:1 */
    }
    .slider__text {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      margin-bottom: 5%;
      width: 70%;
      max-width: 682px;
      z-index: 100;
    }
    .slider__slide:nth-child(1) .slider__slide-img {
      background-image: url("../imgs/01.jpg");
    }
    .slider__slide:nth-child(2) .slider__slide-img {
      background-image: url("../imgs/02.jpg");
    }
    .slider__slide:nth-child(3) .slider__slide-img {
      background-image: url("../imgs/03.jpg");
    }
    .slider__slide:nth-child(4) .slider__slide-img {
      background-image: url("../imgs/04.jpg");
    }
    .slider__slide:nth-child(5) .slider__slide-img {
      background-image: url("../imgs/05.jpg");
    }
    .slider__slide:nth-child(6) .slider__slide-img {
      background-image: url("../imgs/06.jpg");
    }
    .slider__slide:nth-child(7) .slider__slide-img {
      background-image: url("../imgs/07_2.jpg");
    }
    .slider__slide:nth-child(8) .slider__slide-img {
      background-image: url("../imgs/08_2.jpg");
    }
    .slider__slide:nth-child(9) .slider__slide-img {
      background-image: url("../imgs/09.jpg");
    }
    .slider__slide:nth-child(10) .slider__slide-img {
      background-image: url("../imgs/10.jpg");
    }
    .slider__slide:nth-child(11) .slider__slide-img {
      background-image: url("../imgs/11.jpg");
    }
    .slider__slide:nth-child(12) .slider__slide-img {
      background-image: url("../imgs/12.jpg");
    }
    .slider__slide:nth-child(13) .slider__slide-img {
      background-image: url("../imgs/13.jpg");
    }
    .slider__slide:nth-child(14) .slider__slide-img {
     background-image: url("../imgs/14.jpg");
    }
    .slider__slide:nth-child(15) .slider__slide-img {
      background-image: url("../imgs/15.jpg");
    }
    .slider__slide:nth-child(16) .slider__slide-img {
      background-image: url("../imgs/16.jpg");
    }
    .slider__slide:nth-child(17) .slider__slide-img {
      background-image: url("../imgs/17.jpg");
    }
    .slider__slide:nth-child(18) .slider__slide-img {
      background-image: url("../imgs/18.jpg");
    }
    .slider__slide:nth-child(19) .slider__slide-img {
      background-image: url("../imgs/19.jpg");
    }
    .slider__slide:nth-child(20) .slider__slide-img {
      background-image: url("../imgs/20.jpg");
    }
    .slider__slide:nth-child(21) .slider__slide-img {
      background-image: url("../imgs/21.jpg");
    }
    .slider__slide:nth-child(22) .slider__slide-img {
      background-image: url("../imgs/22.jpg");
    }
}


/*-------------------------
view btn
-------------------------*/
/*全体*/
.hidden_box {
  margin: 0 auto;/*前後の余白*/
  padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
  font-size: 15px;
  font-feature-settings: "palt";
  letter-spacing: .07em;
  max-width:420px;
  margin: 0 auto;
  margin-bottom: 7%;
  padding: 15px;
  text-align: center;
  background: #000000;
  color:#ffffff;
  font-weight: bold;
  cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
  background: #3f3f3f;
}

/*チェックは見えなくする*/
.hidden_box input {
  display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
  height: auto;
  opacity: 1;
}

@media (max-width: 425px){
    /*ボタン装飾*/
    .hidden_box label {
      font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
      font-size: 13px;
      font-feature-settings: "palt";
      letter-spacing: .07em;
      max-width:420px;
      margin: 0 auto;
      margin-bottom:10px;
      padding: 15px;
      text-align: center;
      background: #000000;
      color:#ffffff;
      font-weight: bold;
      cursor :pointer;
    }
}


/*-------------------------
view
-------------------------*/
.view {
  width: 100%;
  max-width: 1000px;
  margin: 80px auto;
  text-align: left;
  font-size: 13px;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 10%;
}
.view ul {
  width: 98%;
  margin: 0 1%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.view li {width: 31%;margin: 0 3.5% 5% 0;}
.view li:nth-child(3n){margin: 0 0 5% 0;}
.view li:last-child {margin: 0 0 0 0;}

.credit{margin:20px auto;}
.credit p{margin:5px auto;width: 100%;float:left;}
.credit a{text-decoration:underline;}
.credit .item{font-size: 15px;font-weight:bolder;display:inline-block;width: 5.5em;}
.credit .price{font-size: 15px;font-weight:bolder;}
.credit .release{font-size: 13px;font-weight:normal;}

.credit .smp_view{display: none;}

@media (max-width:1025px){
    .view {
      width: 100%;
      max-width: 750px;
      margin: 80px auto;
      font-size: 13px;
      letter-spacing: -0.01em;
    }

    .credit{margin:15px auto}
    .credit p{margin:3px auto;}
    .credit .item{font-size: 14px;;width:5em;}
    .credit .price{font-size: 14px;}
    .credit .release{font-size: 12px;}
    .credit .smp_view{display: none;}
}

@media (max-width: 768px){
    .view {
      width: 100%;
      max-width: 500px;
      margin:40px auto;
    }
    .view li,.view li:nth-child(5n),.view li:nth-last-child(-n+2) {width: 48%;margin: 0px 4% 5% 0;}
    .view li:nth-child(3n){margin: 0 4% 5% 0;}
    .view li:nth-child(2n){margin: 0 0 5% 0;}
    .view li:nth-last-child(-n+2){margin: 0 4% 0 0;}
    .view li:last-child {margin: 0 0 0 0;}

    .credit{margin:15px auto}
    .credit p{margin:3px auto;}
    .credit .item{font-size: 13px;width: 4.5em;}
    .credit .price{font-size: 13px;}
    .credit .release{font-size: 13px;}
    .credit .smp_view{display: none;}
}

@media (max-width:480px){
    .credit .smp_view{display: block;}
}



/*-------------------------
square
-------------------------*/
.square {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 7%;
}

.square-inner {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: #000000;
  margin:0 auto;
}

@media (max-width: 768px){
    .square-inner {
      display: inline-block;
      width: 20px;
      height: 1px;
      background: #000000;
      text-align: center;
      margin: 0 auto;
    }
}


/*-------------------------
top-btn
-------------------------*/
.js_btn{
  margin-bottom: 80px;
}

.top-btn{
  max-width:420px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 15px;
  text-align: center;
  background: #000000;
  color:#ffffff;
  font-weight: bold;
  cursor :pointer;
}
.top-btn a{
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
  font-size: 15px;
  font-feature-settings: "palt";
  letter-spacing: .07em;
  color:#ffffff;
  text-decoration:none;
}
.top-btn:hover{
  background: #3f3f3f;
}

@media (max-width: 425px){
    .hidden_box .top-btn{
      max-width:420px;
      margin: 0 auto;
      margin-bottom: 60px;
      padding: 15px;
      text-align: center;
      background: #000000;
      color:#ffffff;
      font-weight: bold;
      cursor :pointer;
    }
    .top-btn a{
      font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
      font-size: 13px;
      font-feature-settings: "palt";
      letter-spacing: .07em;
      color:#ffffff;
      text-decoration:none;
    }
}


/*-------------------------
ARCHIVE
-------------------------*/
.cnt_lookbook {
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
  font-feature-settings: "palt";
  letter-spacing: .07em;
  width: 100%;
  margin: 0 auto;
}

.cnt_lookbook ul{
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.cnt_lookbook li{
  float: left;
  width: 40%;
  text-align: left;
  margin-left: 7%;
}

.cnt_lookbook .lookbook_ttl{
  font-size: 15px;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 25px;
  color: #000;
  padding: 10px 0;
  border-bottom: solid 2px #000;
}

.cnt_lookbook img {
    width: 10px;
    margin-right: 5px;
    margin-top: -3px;
}

@media (max-width: 768px){
.cnt_lookbook li{
  float: left;
  width: 100%;
  text-align: left;
  margin-left: 5%;
}
}

@media (max-width: 320px){
.cnt_lookbook li{
  float: left;
  width: 100%;
  text-align: left;
  margin-left: 3%;
}
.cnt_lookbook .lookbook_ttl{
  font-size: 12px;
}
}