/**************************************
common
**************************************/
@font-face {
  font-family: 'Gordita-Regular';
  src: url("/page/collection/2021/ss_1st/font/Gordita-Regular.otf");
}

body{
  overflow-x: hidden;
  /* width: calc(1200*(100vw / 1400)); */
}
.sp_only {
  display: none !important;
}
html{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
.header-nav .nav-menu{
  display: none;
}
.main-area {
  margin-top: -112px !important;
} 
#newsticker{
  display: none !important;
}
.header .header-top .header-logo{display: none;}
.header .header-top .header-user{width: 100%;}
.header .header-top .header-user .header-user-list{
  color: #fff;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.header .header-top .header-user ul.header-user-list > li.login::before,
.header-user ul li .arrow::before, .header-user ul li .arrow::after{background: #fff;}
.header .header-top .header-user li.language{
  position: absolute;
  left: 0;
}
.header .header-top .header-user li.login{
  position: absolute;
  left: 112px;
}

#SS_2021 {
  font-family:  'Gordita-Regular' , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  display: block;
  width: 100%;
  margin: 0 auto calc(200*(100vw / 1400));
  color: #000000;
}
#SS_2021 img{
  width: 100%;
}
#SS_2021 video{
  width: 100%;
  display: block;
}
#SS_2021 a.nolink{opacity: 1}


/**************************************
#mv
**************************************/
#SS_2021 #mv{
  position: relative;
}
#SS_2021 .title{
  z-index: 100;
  position: absolute;
  top: 40%;
  left: 30%;
  width: calc(530*(100vw / 1400));
}
#SS_2021 #mv .btn--wrap {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}
#SS_2021 #mv .btn {
    display: block;
    border: 1px solid #ababab;
    border-radius: 0.5rem;
    background-color: transparent;
    width: 8rem;
    padding: 1rem;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    height: 100%;
    color: #ababab;
}
#SS_2021 #mv .btn.mute-audio::after {
    content: "ON";
}
#SS_2021 #mv .btn.mute-audio.active::after{
    content: "OFF";
}

/**************************************
2021 ss itemimg
**************************************/
#SS_2021 .lead{
  margin: calc(45*(100vw / 1400)) 0 calc(150*(100vw / 1400)) calc(120*(100vw / 1400));
  font-size: calc(20*(100vw / 1400));
  letter-spacing: 0.025em;
  line-height: calc(30*(100vw / 1400));
}
#SS_2021 .sec{
  width: calc(1270*(100vw / 1400));
  margin: 0 auto calc(60*(100vw / 1400));
}
#SS_2021 .sec .text{
  font-family: 'Gordita-Regular';
  font-size: calc(13*(100vw / 1400));
  letter-spacing: 0.025em;
  line-height: calc(18*(100vw / 1400));
  width: calc(246*(100vw / 1400));
  height: calc(468*(100vw / 1400));
  overflow: hidden;
  padding-left: calc(20*(100vw / 1400));
  box-sizing: border-box;
}
#SS_2021 .sec .text .case{
  margin-bottom: calc(28*(100vw / 1400));
}
#SS_2021 .sec .text img{
  width: calc(12.75*(100vw / 1400));
  margin-right: calc(6*(100vw / 1400));
  margin-top: calc(1*(100vw / 1400));
}
#SS_2021 .sec .img,#SS_2021 .sec .wideimg{
  position: relative;
}
#SS_2021 .sec .img a,
#SS_2021 .sec .noimg a{
  display: block;
  width: calc(362*(100vw / 1400));
  height: calc(468*(100vw / 1400));
  overflow: hidden;
  margin-bottom: calc(10*(100vw / 1400));
}
#SS_2021 .sec .w302 a{
  width: calc(302*(100vw / 1400));
}
#SS_2021 .sec .w302 a img{
  width: calc(302*(100vw / 1400));
  height: calc(468*(100vw / 1400));
  object-fit: cover;
}
#SS_2021 .sec .wideimg a{
  display: block;
  width: calc(545*(100vw / 1400));
  height: calc(764*(100vw / 1400));
}

/*------  flex  ------*/
#SS_2021 .sec .flex{
  display: flex;
  justify-content: space-between;
}
#SS_2021 .sec .fd_wrap{
  display: flex;
  justify-content: space-between;
}
#SS_2021 .sec4 .flex,
#SS_2021 .sec4 .flex .fd_wrap:nth-child(1),
#SS_2021 .sec7 .flex,
#SS_2021 .sec7 .flex .fd_wrap:nth-child(1){
  flex-direction: row-reverse;
}

/*------  hashtag  ------*/
#SS_2021 .sec .hashtag-txt{
  position: absolute;
  font-family: 'Gordita-Regular';
  font-size: calc(13*(100vw / 1400));
}


@media screen and (min-width: 561px){
.sw_pc {
    display: block !important;
}
.flex,
.flex_pc {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    }
.sw_sp > .flex {
  display: none;
  }
.pc_order01 {
  order: 1;
  }
.pc_order02 {
  order: 2;
  }
.pc_order03 {
  order: 3;
  }
.pc_order04 {
  order: 4;
  }
.sw_sp {
    display: none !important;
}
#SS_2021 .sec .flex{
    align-items: flex-end;
}
.img33{
position: relative;
}

#SS_2021 .sec3 .flex,
#SS_2021 .sec6 .flex,
#SS_2021 .sec-pc-1 .flex,
#SS_2021 .sec12 .flex,
#SS_2021 .sec-pc-2 .flex,
#SS_2021 .sec23 .flex {
justify-content: flex-start;
}

#SS_2021 .sec3 .flex .noimg a {
width: calc(544* (100vw / 1400));
}
#SS_2021 .sec6 .flex .noimg a {
width: calc(182* (100vw / 1400));
}
#SS_2021 .sec10 .flex .noimg a {
width: calc(243* (100vw / 1400));
}
#SS_2021 .sec12 .flex .noimg a {
width: calc(723* (100vw / 1400));
}
#SS_2021 .sec13 .flex .noimg a {
width: calc(243* (100vw / 1400));
}
#SS_2021 .sec16 .flex .noimg a {
width: calc(243* (100vw / 1400));
}
#SS_2021 .sec19 .flex .noimg a {
width: calc(243* (100vw / 1400));
}
#SS_2021 .sec23 .flex .noimg a {
width: calc(544* (100vw / 1400));
}
#SS_2021 .sec22 .flex .noimg a {
width: calc(243* (100vw / 1400));
}
#SS_2021 .sec-pc-1 .nolink{
margin-left: calc(361* (100vw / 1400));
}
#SS_2021 .sec-pc-2 .nolink{
margin-left: calc(182* (100vw / 1400));
}

#SS_2021 .sec .noimg a {
width: calc(183* (100vw / 1400));
}


#SS_2021 .sec .noimg.w302 a.nolink {
    width: calc(302*(100vw / 1400));
}
#SS_2021 .sec .noimg a.nolink {
    width: calc(362*(100vw / 1400));;
}

#SS_2021 .sec .img05 .hashtag-txt,
#SS_2021 .sec .img13 .hashtag-txt,
#SS_2021 .sec .img20 .hashtag-txt,
#SS_2021 .sec .img22 .hashtag-txt,
#SS_2021 .sec .img24 .hashtag-txt,
#SS_2021 .sec .img33 .hashtag-txt,
#SS_2021 .sec .img41 .hashtag-txt,
#SS_2021 .sec .img42 .hashtag-txt,
#SS_2021 .sec .img44 .hashtag-txt,
#SS_2021 .sec .img48 .hashtag-txt,
.sec-pc-2 .hashtag-txt
{
    left: 0;
    top: calc(-20*(100vw / 1400));
}

#SS_2021 .sec .img06 .hashtag-txt,
#SS_2021 .sec .img23 .hashtag-txt,
#SS_2021 .sec .img37 .hashtag-txt,
#SS_2021 .sec .img47 .hashtag-txt
{
    right: calc(27*(100vw / 1400));
    top: calc(-20*(100vw / 1400));
}

#SS_2021 .sec .wideimg a img{
    width: calc(545*(100vw / 1400));
    height: calc(764*(100vw / 1400));
}
}


/**************************************
move
**************************************/
#SS_2021 .zoom{
  transform: scale(1.2);
}
#SS_2021 .zoomed{
  transform: scale(1);
  transition-delay: 1s;
  transition: all 1.5s;
}
#SS_2021 .fader{
  opacity: 0;
  transition: opacity 2s;
  transform: translate3d(0,70px,0);
  transition: all 1s cubic-bezier(0, 0, 0.3, 1), -webkit-transform 2s cubic-bezier(0, 0, 0.3, 1);
}
#SS_2021 .fade{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: all 2.5s;
} 

#SS_2021 .img a:not(.nolink) img:hover{
  transform: scale(1.1) !important;
  transition: all 1s !important;
}



/**************************************
#itemContents
**************************************/
#itemSwiperArea figure {
  display: block; 
}

#itemSwiperArea figure a {
  display: block; 
}

#itemSwiperArea #itemList > ul {
  display: block; 
}

#itemSwiperArea #itemList > ul > li {
  display: block;
  width: 460px;
  margin: 0 auto 60px; 
}

#itemSwiperArea #itemList > ul > li.twoLine {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%; 
}

#itemSwiperArea #itemList > ul > li.twoLine > figure {
  width: 350px; 
}

#itemSwiperArea #itemList > ul > li figure {
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease; 
}

#itemSwiperArea #itemList > ul > li figure:hover {
  opacity: 0.6; 
}

#itemSwiperArea {
  display: flex;
  align-items: center;
  width: 752px;
  height: 100%;
  position: fixed;
  z-index: 1001;
  opacity: 0;
  -webkit-transform: translate(200vw, 0);
  -moz-transform: translate(200vw, 0);
  -o-transform: translate(200vw, 0);
  -ms-transform: translate(200vw, 0);
  transform: translate(200vw, 0);
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#itemSwiperArea.init {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); 
}

#itemSwiperArea #itemSwiper {
  width: 752px;
  position: relative;
  z-index: 1; 
}

#itemSwiperArea #itemSwiper .itemSwiperWrrapper {
  position: relative;
  width: 100%;
  max-height: 750px;
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}

#itemSwiper .slider {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  opacity: 0 !important; 
}

#itemSwiper .slider figure {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  width: 800px;
  height: 635px;
  -webkit-backface-visibility: hidden;
  background-color: #fff;
  backface-visibility: hidden; 
}




#itemSwiper .slider.wide figure {
  max-height: 522px; 
}

#itemSwiper .slider.wide2 figure {
  max-height: 500px; 
}

#itemSwiper .slider.swiper-slide-active {
  opacity: 1 !important;
  z-index: 2; 
}

#itemSwiper .slider figure a {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}

#itemSwiper .slider figure a:hover {
  opacity: 1; 
}

figure img, figure video{
  cursor: pointer;
}

#itemSwiper .slider figure img, #itemSwiper .slider figure video {
  display: block;
  height: 635px;
  width: 517px;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
  object-fit: cover;
}

#itemSwiper .slider figure a:hover img {
  opacity: .6; 
}

#itemSwiperArea .nextWrap, #itemSwiperArea .prevWrap {
  display: block;
  width: 25px;
  height: 635px;
  border-radius: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
  transform: initial !important;
}

#itemSwiperArea .nextWrap {
  right: -64px; 
}

#itemSwiperArea .prevWrap {
  left: -64px; 
}

#itemSwiperArea .nextBtn, #itemSwiperArea .prevBtn {
  display: block;
  width: 25px;
  height: 50px;
  position: absolute;
  top: 52%;
  left: 0;
  margin-top: -15px;
  z-index: 500;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  -webkit-transition: opacity  0.2s ease;
  -o-transition: opacity  0.2s ease;
  transition: opacity  0.2s ease;
  cursor: pointer; 
}

#itemSwiperArea .nextBtn:hover, #itemSwiperArea .prevBtn:hover {
  opacity: .4; 
}

#itemSwiperArea .nextBtn::before, #itemSwiperArea .nextBtn::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: #ffffff;
  position: absolute; 
}

#itemSwiperArea .prevBtn::before, #itemSwiperArea .prevBtn::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: #ffffff;
  position: absolute; 
}

#itemSwiperArea .nextBtn::before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 28%;
  left: -16%;
}

#itemSwiperArea .nextBtn::after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 75%;
  right: -21%;
}

#itemSwiperArea .prevBtn::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 28%;
  left: -18%;
}

#itemSwiperArea .prevBtn::after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 75%;
  right: -21%;
}

#itemSwiperArea .nextBtn.swiper-button-disabled, #itemSwiperArea .prevBtn.swiper-button-disabled {
  cursor: default; 
}

/**** #swiperCloseBtn***************/
#swiperCloseBtn {
  display: block;
  width: 36px;
  height: 36px;
  position: absolute;
  right: -72px;
  top: calc(50% - 317px);
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease; 
  transform: initial !important;
}

#swiperCloseBtn:hover {
  opacity: .6; 
}

#swiperCloseBtn::before, #swiperCloseBtn::after {
  content: '';
  display: block;
  width: 50px;
  height: 1px;
  background: #ffffff;
  position: absolute; 
  top: 1.4vh;
  left: -0.5vw;
}

#swiperCloseBtn::before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#swiperCloseBtn::after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/**** #swiperBg***************/
#swiperBg {
  display: block;
  width: 100%;
  height: 1287px;
  height: 100vh;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  -webkit-transform: translate(200vw, 0);
  -moz-transform: translate(200vw, 0);
  -o-transform: translate(200vw, 0);
  -ms-transform: translate(200vw, 0);
  transform: translate(200vw, 0);
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}

#itemSwiperArea.init + #swiperBg {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); 
}


/**** #credit***************/

#itemSwiperArea .credit {
  margin: auto 0 20px 20px; 
}

#itemSwiperArea .credit li {
  display: block;
  margin-top: auto;
  font-size: 13px;
  line-height: 1.5;
  color: #ffffff;
  font-family: Helvetica, "Helvetica Neue" , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  font-weight: 500;
  color: #000;
}

#itemSwiperArea ul.credit > li > a:hover {
  opacity: .7; 
}