@font-face {
    font-family: 'EBGaramond';
    src: url("/page/collection/2020aw/1st_collection/font/EBGaramond-Regular.woff");
}

@font-face {
    font-family: 'Cormorant';
    src: url("/page/collection/2021ss/1st_collection/font/Cormorant-Light.ttf");
}

/* @font-face {
    font-family: 'Cinzel';
    src: url("/page/collection/2021ss/1st_collection/font/Cinzel-Regular.ttf");
} */

.sp_only {
    display: none !important;
}

.header {
    min-width: 100%;
}

.header .header-nav {
    right: 0;
}

img {
    max-width: 100%;
}

a:hover {
    opacity: .7;
}

/* [data-aos^=fade][data-aos^=fade] {
    }
    [data-aos][data-aos][data-aos-duration="1750"]{
    transition: opacity 1500ms, transform 1500ms;
    transition-duration: 1.5s!important;
    } */

#collection_1st {
    width: 100%;
    margin: 0 auto;
    /* background-image: url(/Page/collection/2021ss/1st_collection/img/PC_2.jpg); */
    background-repeat: no-repeat;
    background-size: 120rem;
    background-position-x: center;
    background-position-y: -343px;
    background-position-y: 13170px;
}

.fl {
    display: flex;
    flex-wrap: wrap;
}

#collection_1st img {
    width: 100%;
}

/*mv*/
.mv {
    width: 102.5rem !important;
    margin: 0 auto !important;
}

/*box共有*/

.block_credit {
    font-size: 1.5rem;
    line-height: 3.8rem;
    letter-spacing: 0.06em;
    font-family: 'Cormorant', 'Cinzel' , serif;
    font-weight: 600;
    color: #1f1f1f;
}

.block_credit span{
    font-family: 'Cinzel', 'Cormorant' , serif;
    font-weight: normal;
    transform: scale( 1 , 0.85 );
    display: inline-block;
    vertical-align: bottom;    
}

.jtext{
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    transform: none !important;
    font-size: 1rem;
}

.relative{
    position: relative;
}

#collection_1st .item-inner.active .block_link,
#collection_1st .item-inner.active .block_credit,
#collection_1st .item-inner.active .btn_close,
#collection_1st .mv.active .block_link,
#collection_1st .mv.active .block_credit,
#collection_1st .mv.active .btn_close,
#collection_1st .js-point.active .block_link,
#collection_1st .js-point.active .block_credit,
#collection_1st .js-point.active .btn_close{
  visibility: visible;
  opacity: 1;
}

#collection_1st .item-inner.active .block-image,
#collection_1st .mv.active .block-image,
#collection_1st .js-point.active .block-image {
  opacity: 0.3;
}

#collection_1st .js-point{
    position: relative;
}

#collection_1st .block_link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    visibility: hidden;
    opacity: 0;
  }

  #collection_1st .block-image {
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  
  /* #collection_1st .block_credit {
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto;
    padding-left: 2rem;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  } */

  #collection_1st .block_credit {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 2rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    opacity: 0;
  }

  #collection_1st .block_credit ol li {
    padding: 0.5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
  }
  
  #collection_1st .block_credit--num {
    padding-right: 1rem;
  }

  #collection_1st .btn_close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 6.8rem;
    height: 6.8rem;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  #collection_1st .btn_close:hover {
    cursor: pointer;
  }
  
  #collection_1st .btn_close span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #1f1f1f;
  }
  
  #collection_1st .btn_close span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  #collection_1st .btn_close span:nth-child(2) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

#collection_1st figure{
    position: relative;
}

#collection_1st .slick-dots {
    bottom: -2rem !important;
    position: absolute;
    left: auto;
    right: 0.4rem;
    margin: 0;
}

#collection_1st .slick-dots li {
    margin: 0 0.7rem 0 0;
}

#collection_1st .slick-dots li button {
    width: 0.6rem;
    height: 0.6rem;
}

#collection_1st .item-inner.show {
    transform: scaleY(1);
}
#collection_1st .item-inner {
    transform: scaleY(0);
}
#collection_1st .item-inner {
    margin: 0 0% 0 0%;
    width: 100%;
    height: 100%;
    -webkit-transition: transform 650ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: transform 650ms cubic-bezier(0.19, 1, 0.22, 1);
    -ms-transition: transform 650ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: transform 650ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 650ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* box1 */
#collection_1st .collection_1st_box1 {
    margin-top: 14rem;
}

#collection_1st .collection_1st_box1 ._1{
    width: 53rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box1 ._2{
    width: 53rem;
    margin: 18rem auto 0;
}

#collection_1st .collection_1st_box1 ._3{
    width: 55rem;
    margin: 17rem auto 0;
}

/* box2 */
#collection_1st .collection_1st_box2{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box2 ._1{
    width: 37rem;
    margin-top: 11.5rem;
    margin-left: 13rem;
}

#collection_1st .collection_1st_box2 ._2{
    width: 52rem;
    margin-top: 25.5rem;
    margin-left: 9rem;
}

/* box3 */
#collection_1st .collection_1st_box3 ._1{
    width: 55rem;
    margin: 10.5rem auto 0;
}

/* box4 */
#collection_1st .collection_1st_box4{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box4 ._1{
    width: 51rem;
    margin-top: 14.5rem;
    margin-left: 10.5rem;
}

#collection_1st .collection_1st_box4 ._2{
    width: 38.5rem;
    margin-top: 64rem;
    margin-left: 10rem;
}

#collection_1st .collection_1st_box4 ._3{
    width: 42.5rem;
    margin-top: -13rem;
    margin-left: 21rem;
}

/* box5 */
#collection_1st .collection_1st_box5{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box5 ._1{
    width: 55rem;
    margin-top: 11rem;
    margin-left: 42rem;
}

/* box6 */
#collection_1st .collection_1st_box6{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box6 ._1{
    width: 51rem;
    margin-top: 15rem;
    margin-left: 8.5rem;
}

#collection_1st .collection_1st_box6 ._2{
    width: 41rem;
    margin-top: 74rem;
    margin-left: 9.5rem;
}

#collection_1st .collection_1st_box6 ._3{
    width: 57.5rem;
    margin: 11rem auto 0;
}

/* box7 */
#collection_1st .collection_1st_box7{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box7 ._1{
    width: 36rem;
    margin-top: 62rem;
    margin-left: 20.5rem;
}

#collection_1st .collection_1st_box7 ._2{
    width: 42.5rem;
    margin-top: 15rem;
    margin-left: 9rem;
}

#collection_1st .collection_1st_box7 ._3{
    width: 51.5rem;
    margin-top: 15rem;
    margin-left: 52rem;
}

/* box8 */
#collection_1st .collection_1st_box8{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box8 ._1{
    margin-top: 15.5rem;
}

/* box9 */
#collection_1st .collection_1st_box9{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box9 ._1{
    width: 47rem;
    margin: 13rem auto 0;
}

/* box10 */
#collection_1st .collection_1st_box10{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box10 ._1{
    width: 40rem;
    margin-top: 11.5rem;
    margin-left: 13rem;
}

#collection_1st .collection_1st_box10 ._2{
    width: 47rem;
    margin-top: 40rem;
    margin-left: 9.5rem;
}

#collection_1st .collection_1st_box10 ._3{
    width: 49.5rem;
    margin-top: 11.5rem;
    margin-left: 17.5rem;
}

/* box11 */
#collection_1st .collection_1st_box11{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box11 ._1{
    width: 53rem;
    margin-top: 14.5rem;
    margin-left: 35rem;
}

/* box12 */
#collection_1st .collection_1st_box12{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box12 ._1{
    width: 49.5rem;
    margin-top: 52rem;
    margin-left: 10rem;
}

#collection_1st .collection_1st_box12 ._2{
    width: 47.5rem;
    margin-top: 12.5rem;
    margin-left: 3rem;
}

#collection_1st .collection_1st_box12 ._3{
    width: 51rem;
    margin-top: 8rem;
    margin-left: 37rem;
}

/* box13 */
#collection_1st .collection_1st_box13{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box13 ._1{
    margin-top: 7.5rem;
}

/* box14 */
#collection_1st .collection_1st_box14{
    width: 120rem;
    margin: 0 auto;
}

#collection_1st .collection_1st_box14 ._1{
    width: 62.5rem;
    margin-top: 19.5rem;
    margin-left: 15rem;
}

#collection_1st .collection_1st_box14 ._2{
    width: 59rem;
    margin-top: 15.5rem;
    margin-left: auto;
    margin-right: 9.5rem;
}

#collection_1st .collection_1st_box14 ._3{
    width: 40.5rem;
    margin-top: 9rem;
    margin-left: 20rem;
}

#collection_1st .collection_1st_box14 ._4{
    width: 52rem;
    margin-top: 15rem;
    margin-left: auto;
    margin-right: 10rem;
}

/* staff */
.staff {
    font-family: 'Cormorant', serif;
    width: 120rem;
    margin: 0 auto;
}

.staff .button {
    letter-spacing: 0.12em;
    border: solid 1px;
    padding: 1.5rem 0;
    width: 41rem;
    text-align: center;
    display: block;
    font-size: 2.4rem;
    margin: 8rem auto 0;
    color: #000;
}

.staff .text {
    line-height: 2.8rem;
    font-size: 1.9rem;
    margin-top: 4.5rem;
    margin-left: 17.5rem;
    font-weight: 300;
    letter-spacing: 0.06rem;
}

.staff .text span {
    margin-bottom: 3rem;
    display: inline-block;
    font-weight: 300;
}

.staff ._1{
    width: 47.5rem !important;
    margin: 17rem auto 0 !important;
}

.archive_slider {
    margin: 0px auto 13rem;
}

@media all and (-ms-high-contrast: none){
    #collection_1st #mv span {
        letter-spacing: 0.08em;
    }
  }

/*タブレット*/
@media only screen and (max-width: 1200px) and (min-width: 561px) {
    html {
        font-size: calc(10 * (100vw / 1200));
    }

}

/* for sp */
@media only screen and (max-width: 560px) {

    html {
        font-size: calc(10 * (100vw / 750));
    }

    .cateList {
        display: flex;
        flex-wrap: wrap;
    }

    .cateList li {
        display: inline-block;
    }

    .pc_only {
        display: none;
    }

    .sp_only {
        display: block !important;
    }

    html {
        font-size: calc(10 * (100vw / 750));
        }

    #collection_1st {
        width: 75rem;
        /* background-image: url(/Page/collection/2021ss/1st_collection/img/LP_3.jpg); */
        background-size: 100%;
        background-position-y: calc(-372* (100vw / 750));
        background-position-y: calc(14378* (100vw / 750));
        background-position-y: calc(29410* (100vw / 750));
    }

    /* mv */
    .mv {
        width: 100% !important;
    }

    /* box共通 */
    .block_credit {
        font-size: 2.9rem;
        line-height: 7.2rem;
    }

    #collection_1st .slick-dots {
        bottom: -4.3rem !important;
        right: 1rem !important;
    }

    #collection_1st .slick-dots li button {
        width: 1.3rem;
        height: 1.3rem;
    }

    #collection_1st .slick-dots li{
        margin: 0 1.5rem 0 0;
    }

    #collection_1st .btn_close {
        top: 2.5rem;
        right: 2.5rem;
        width: 9rem;
        height: 9rem;
    }

    #collection_1st .block_credit {
        padding-left: 6%;
    }

    .jtext{
        font-size: 1.2rem;
    }

/* sp_only */
#collection_1st .sp_1{
margin-top: 17.5rem;
}

#collection_1st .sp_2{
    margin: 11rem auto 0;
    width: 66rem;
}

/* box1 */
#collection_1st .collection_1st_box1 {
    margin-top: 13.5rem;
    display: flex;
    flex-wrap: wrap;
}

#collection_1st .collection_1st_box1 ._1{
    width: 60rem;
    margin: 13.5rem auto 0;
    order: 2;
}

#collection_1st .collection_1st_box1 ._2{
    width: 61.5rem;
    margin: 0rem auto 0;
    order: 1;
}

#collection_1st .collection_1st_box1 ._3{
    width: 100%;
    margin: 15rem auto 0;
    order: 3;
}

/* box2 */
#collection_1st .collection_1st_box2{
    width: 100%;
}

#collection_1st .collection_1st_box2 ._1{
    width: 53rem;
    margin-top: 14rem;
    margin-left: 11rem;
}

#collection_1st .collection_1st_box2 ._2{
    width: 100%;
    margin-top: 0rem;
    margin-left: 0;
}

/* box3 */
#collection_1st .collection_1st_box3 ._1{
    width: 100%;
    margin: 20rem auto 0;
}

/* box4 */
#collection_1st .collection_1st_box4{
    width: 100%;
}

#collection_1st .collection_1st_box4 ._1{
    width: 100%;
    margin-top: 13.5rem;
    margin-left: 0;
    order: 2;
}

#collection_1st .collection_1st_box4 ._2{
    width: 58.5rem;
    margin: 11rem auto 0;
    order: 3;
}

#collection_1st .collection_1st_box4 ._3{
    width: 62.5rem;
    margin: 13.5rem auto 0;
    order: 1;
}

/* box5 */
#collection_1st .collection_1st_box5{
    width: 100%;
}

#collection_1st .collection_1st_box5 ._1{
    width: 100%;
    margin-top: 18rem;
    margin-left: 0;
}

/* box6 */
#collection_1st .collection_1st_box6{
    width: 100%;
}

#collection_1st .collection_1st_box6 ._1{
    width: 100%;
    margin-top: 12rem;
    margin-left: 0;
}

#collection_1st .collection_1st_box6 ._2{
    width: 60rem;
    margin: 12rem auto 0;
}

#collection_1st .collection_1st_box6 ._3{
    width: 100%;
    margin: 12.5rem auto 0;
}

/* box7 */
#collection_1st .collection_1st_box7{
    width: 100%;
}

#collection_1st .collection_1st_box7 ._1{
    width: 36rem;
    margin-top: 62rem;
    margin-left: 20.5rem;
}

#collection_1st .collection_1st_box7 ._2{
    width: 60rem;
    margin: 12rem auto 0;
}

#collection_1st .collection_1st_box7 ._3{
    width: 100%;
    margin-top: 12rem;
    margin-left: 0;
}

/* box8 */
#collection_1st .collection_1st_box8{
    width: 100%;
}

#collection_1st .collection_1st_box8 ._1{
    margin-top: 14.5rem;
}

/* box9 */
#collection_1st .collection_1st_box9{
    width: 100%;
}

#collection_1st .collection_1st_box9 ._1{
    width: 100%;
    margin: 15rem auto 0;
}

/* box10 */
#collection_1st .collection_1st_box10{
    width: 100%;
}

#collection_1st .collection_1st_box10 ._1{
    width: 62rem;
    margin: 14rem auto 0;
}

#collection_1st .collection_1st_box10 ._2{
    width: 100%;
    margin-top: 15.5rem;
    margin-left: 0;
}

#collection_1st .collection_1st_box10 ._3{
    width: 64rem;
    margin-top: 15.5rem;
    margin-left: 6.5rem;
}

/* box11 */
#collection_1st .collection_1st_box11{
    width: 100%;
}

#collection_1st .collection_1st_box11 ._1{
    width: 100%;
    margin-top: 16rem;
    margin-left: 0;
}

/* box12 */
#collection_1st .collection_1st_box12{
    width: 100%;
}

#collection_1st .collection_1st_box12 ._1{
    width: 100%;
    margin-top: 12rem;
    margin-left: 0;
    order: 2;
}

#collection_1st .collection_1st_box12 ._2{
    width: 66rem;
    margin-top: 12.5rem;
    margin-left: 4.5rem;
    order: 1;
}

#collection_1st .collection_1st_box12 ._3{
    width: 65rem;
    margin: 12rem auto 0;
    order: 3;
}

/* box13 */
#collection_1st .collection_1st_box13 ._1{
    margin-top: 7.5rem;
}

/* box14 */
#collection_1st .collection_1st_box14{
    width: 100%;
}

#collection_1st .collection_1st_box14 ._1{
    width: 60rem;
    margin-top: 12rem;
    margin-left: 8rem;
    order: 3;
}

#collection_1st .collection_1st_box14 ._2{
    width: 100%;
    margin-top: 11.5rem;
    margin-left: 0;
    margin-right: 0;
    order: 1;
}

#collection_1st .collection_1st_box14 ._3{
    width: 48rem;
    margin-top: 11rem;
    margin-left: 13.5rem;
    order: 2;
}

#collection_1st .collection_1st_box14 ._4{
    width: 100%;
    margin-top: 12rem;
    margin-left: 0;
    margin-right: 0;
    order: 4;
}

    /* staff */
    .staff {
        width: 100%;
    }

    .staff .button {
        padding: 2.5rem 0;
        width: 64rem;
        font-size: 3.4rem;
        margin: 16rem auto 18rem;
        letter-spacing: 0.12em;
    }
    
    .staff .text {
        line-height: 3.6rem;
        font-size: 2.4rem;
        margin-top: 12rem;
        margin-left: 10.5rem;
    }
    
    .staff .text span {
        margin-bottom: 4rem;
        display: inline-block;
    }
    
    .staff ._1{
        width: 54.5rem !important;
        margin: 15rem auto 0 !important;
    }
}
