@font-face {
    font-family: 'Quattrocento';
    src: url("/page/collection/2020aw/2st_collection/font/Quattrocento-Regular.ttf");
}

.sp_only {
    display: none;
}

.header .header-nav {
    right: 0;
}

img {
    max-width: 100%;
}

a:hover {
    opacity: .7;
}

._2st_collection {
    width: 1280px;
    margin: 60px auto 0;
    font-family: "Quattrocento";
    color: #000;
    text-align: center;
    /* background-image: url(/page/collection/2020aw/2st_collection/img/PC_2_before.jpg); */
    background-size: 100%;
    background-position-x: center;
    background-position-y: -349px;
    background-repeat: no-repeat;
    background-position-y: 15372px;
}

._2st_collection img {
    width: 100%;
}

/*mv*/
._2st_collection_mv {
    width: 576px;
    margin: 0 auto;
}

._2st_collection_mv figure{
    width: 345px;
    margin: 0 auto;
    padding-top: 73px;
}

._2st_collection_mv p{
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.25em;
    padding-top: 32px;
}

/*box共有*/
._2st_collection section {
    margin: 0 auto;
    width: 576px;
}

._2st_collection section h2{
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.31em;
}

._2st_collection section .slick-dots{
    bottom: -14px;
    width: 5%;
}

._2st_collection section .slick-dots li{
    width: 6px !important;
    height: 6px !important;
    margin: 0 2px !important;
}

._2st_collection section .slick-dots li.slick-active button{
    background-color: transparent;
}

._2st_collection section .slick-dots li.slick-active button{
    color: #3e3a39 !important;
}

._2st_collection section .slick-dots li button {
    border: 1px solid #3e3a39 !important;
    padding: 0;
}

._2st_collection section .slick-dots li button{
    width: 6px !important;
    height: 6px !important;
}

.slick-dots li button:before{
    width: 6px !important;
    background-color: #000;
    border-radius: 5px;
    height: 6px !important;
    line-height: 0!important;
    font-size: 0!important;
    opacity: 0 !important;
}

.slick-dots li.slick-active button:before {
    opacity: unset !important;
}

.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}

.w676{
    width: 676px !important;
    margin: 0 auto;
}

._2st_collection .credit {
    font-size: 11px;
    line-height: 21px;
    letter-spacing: 0.13em;
    padding-top: 31px;
}

._2st_collection_box11 .credit , ._2st_collection_box15 .credit , ._2st_collection_box17 .credit , ._2st_collection_box19 .credit , ._2st_collection_box23 .credit {
    padding-top: 35px;
}
/* box1 */
._2st_collection_box1{
    padding-top: 134px;
}

._2st_collection_box1 ._1{
    padding-top: 28px;
}

._2st_collection_box1 ._2{
    padding-top: 52px;
}
/* box2 */
._2st_collection_box2 {
    padding-top: 118px;
}

/* box3 */
._2st_collection_box3 {
    padding-top: 116px;
}

/* box4 */
._2st_collection_box4 {
    padding-top: 113px;
}

/* box5 */
._2st_collection_box5 {
    padding-top: 113px;
}

._2st_collection_box5 ._2{
    padding-top: 53px;
}

._2st_collection_box5 ._3{
    padding-top: 48px;
}

/* box6 */
._2st_collection_box6 {
    padding-top: 165px;
}

._2st_collection_box6 ._2{
    padding-top: 56px;
}

/* box7 */
._2st_collection_box7 {
    padding-top: 121px;
}

/* box8 */
._2st_collection_box8 {
    padding-top: 116px;
}

/* box9 */
._2st_collection_box9 {
    padding-top: 115px;
}

/* box10 */
._2st_collection_box10 {
    padding-top: 115px;
}

._2st_collection_box10 ._2{
    padding-top: 52px;
}

/* box11 */
._2st_collection_box11{
    padding-top: 118px;
}

._2st_collection_box11 .slick-dots{
    left: 647px !important;
}

/* box12 */
._2st_collection_box12{
    padding-top: 118px;
}

/* box13 */
._2st_collection_box13{
    padding-top: 118px;
    width: 578px;
}

/* box14 */
._2st_collection_box14{
    padding-top: 118px;
    width: 554px !important;
}

/* box15 */
._2st_collection_box15{
    padding-top: 118px;
}

._2st_collection_box15 .slick-dots{
    left: 551px !important;
}

/* box16 */
._2st_collection_box16{
    padding-top: 115px;
}

/* box17 */
._2st_collection_box17{
    padding-top: 115px;
}

._2st_collection_box17 .slick-dots{
    left: 548px !important;
}

/* box18 */
._2st_collection_box18{
    padding-top: 115px;
}

/* box19 */
._2st_collection_box19{
    padding-top: 119px;
}

._2st_collection_box19 .slick-dots{
    left: 550px !important;
}

/* box20 */
._2st_collection_box20{
    padding-top: 115px;
}

/* box21 */
._2st_collection_box21{
    padding-top: 118px;
}

/* box22 */
._2st_collection_box22{
    padding-top: 118px;
}

/* box23 */
._2st_collection_box23{
    padding-top: 110px;
}

._2st_collection_box23 .slick-dots{
    left: 646px !important;
}

/* STAFF */
.staff{
    margin: 0 auto 123px;
    width: 576px;
    padding-top: 118px;
    font-size: 12px;
    line-height: 19px;
    letter-spacing: 0.19em;
}

.staff p{
    padding-top: 72px;
    padding-bottom: 68px;
}

.staff span{
    font-size: 11px;
    letter-spacing: 0.11em;
}

.staff .big{
    font-size: 12px;
    letter-spacing: 0.17em;
}

.staff .border{
    font-size: 17px;
    letter-spacing: 0.18em;
    padding-top: 92px !important;
    padding-bottom: 0 !important;
}

.staff .border a{
    border: solid 1px;
    padding: 21px 123px 19px;
}

/*タブレット*/
@media only screen and (max-width: 1200px) and (min-width: 561px) {

    .main-area.archive_slider {
        min-width: inherit !important;
    }

    ._2st_collection {
        width: 100%;
        margin: calc(60*(100vw / 1200)) auto 0;
    }

    /*mv*/
._2st_collection_mv {
    width: calc(576*(100vw / 1200));
}

._2st_collection_mv figure{
    width: calc(345*(100vw / 1200));
    padding-top: calc(73*(100vw / 1200));
}

._2st_collection_mv p{
    font-size: calc(15*(100vw / 1200));
    line-height: calc(24*(100vw / 1200));
    padding-top: calc(32*(100vw / 1200));
}

/*box共有*/
._2st_collection section {
    width: calc(576*(100vw / 1200));
}

._2st_collection section h2{
    font-size: calc(16*(100vw / 1200));
    line-height: calc(24*(100vw / 1200));
}

._2st_collection section .slick-dots{
    bottom: calc(-14*(100vw / 1200));
}

._2st_collection section .slick-dots li{
    width: calc(6*(100vw / 1200)) !important;
    height: calc(6*(100vw / 1200)) !important;
    margin: 0 calc(2*(100vw / 1200)) !important;
}

._2st_collection section .slick-dots li button{
    width: calc(6*(100vw / 1200)) !important;
    height: calc(6*(100vw / 1200)) !important;
}

.slick-dots li button:before{
    width: calc(6*(100vw / 1200)) !important;
    border-radius: calc(5*(100vw / 1200));
    height: calc(6*(100vw / 1200)) !important;
}

.w676{
    width: calc(676*(100vw / 1200)) !important;
}

._2st_collection .credit {
    font-size: calc(11*(100vw / 1200));
    line-height: calc(21*(100vw / 1200));
    padding-top: calc(31*(100vw / 1200));
}

._2st_collection_box11 .credit , ._2st_collection_box15 .credit , ._2st_collection_box17 .credit , ._2st_collection_box19 .credit , ._2st_collection_box23 .credit {
    padding-top: calc(35*(100vw / 1200));
}
/* box1 */
._2st_collection_box1{
    padding-top: calc(134*(100vw / 1200));
}

._2st_collection_box1 ._1{
    padding-top: calc(28*(100vw / 1200));
}

._2st_collection_box1 ._2{
    padding-top: calc(52*(100vw / 1200));
}
/* box2 */
._2st_collection_box2 {
    padding-top: calc(118*(100vw / 1200));
}

/* box3 */
._2st_collection_box3 {
    padding-top: calc(116*(100vw / 1200));
}

/* box4 */
._2st_collection_box4 {
    padding-top: calc(113*(100vw / 1200));
}

/* box5 */
._2st_collection_box5 {
    padding-top: calc(113*(100vw / 1200));
}

._2st_collection_box5 ._2{
    padding-top: calc(53*(100vw / 1200));
}

._2st_collection_box5 ._3{
    padding-top: calc(48*(100vw / 1200));
}

/* box6 */
._2st_collection_box6 {
    padding-top: calc(165*(100vw / 1200));
}

._2st_collection_box6 ._2{
    padding-top: calc(56*(100vw / 1200));
}

/* box7 */
._2st_collection_box7 {
    padding-top: calc(121*(100vw / 1200));
}

/* box8 */
._2st_collection_box8 {
    padding-top: calc(116*(100vw / 1200));
}

/* box9 */
._2st_collection_box9 {
    padding-top: calc(115*(100vw / 1200));
}

/* box10 */
._2st_collection_box10 {
    padding-top: calc(115*(100vw / 1200));
}

._2st_collection_box10 ._2{
    padding-top: calc(52*(100vw / 1200));
}

/* box11 */
._2st_collection_box11{
    padding-top: calc(118*(100vw / 1200));
}

._2st_collection_box11 .slick-dots{
    left: calc(645*(100vw / 1200)) !important;
}

/* box12 */
._2st_collection_box12{
    padding-top: calc(118*(100vw / 1200));
}

/* box13 */
._2st_collection_box13{
    padding-top: calc(118*(100vw / 1200));
    width: calc(578*(100vw / 1200));
}

/* box14 */
._2st_collection_box14{
    padding-top: calc(118*(100vw / 1200));
    width: calc(554*(100vw / 1200)) !important;
}

/* box15 */
._2st_collection_box15{
    padding-top: calc(118*(100vw / 1200));
}

._2st_collection_box15 .slick-dots{
    left: calc(551*(100vw / 1200)) !important;
}

/* box16 */
._2st_collection_box16{
    padding-top: calc(115*(100vw / 1200));
}

/* box17 */
._2st_collection_box17{
    padding-top: calc(115*(100vw / 1200));
}

._2st_collection_box17 .slick-dots{
    left: calc(548*(100vw / 1200)) !important;
}

/* box18 */
._2st_collection_box18{
    padding-top: calc(115*(100vw / 1200));
}

/* box19 */
._2st_collection_box19{
    padding-top: calc(119*(100vw / 1200));
}

._2st_collection_box19 .slick-dots{
    left: calc(548*(100vw / 1200)) !important;
}

/* box20 */
._2st_collection_box20{
    padding-top: calc(115*(100vw / 1200));
}

/* box21 */
._2st_collection_box21{
    padding-top: calc(118*(100vw / 1200));
}

/* box22 */
._2st_collection_box22{
    padding-top: calc(118*(100vw / 1200));
}

/* box23 */
._2st_collection_box23{
    padding-top: calc(110*(100vw / 1200));
}

._2st_collection_box23 .slick-dots{
    left: calc(646*(100vw / 1200)) !important;
}

/* STAFF */
.staff{
    margin: 0 auto calc(123*(100vw / 1200));
    width: calc(576*(100vw / 1200));
    padding-top: calc(118*(100vw / 1200));
    font-size: calc(12*(100vw / 1200));
    line-height: calc(19*(100vw / 1200));
}

.staff p{
    padding-top: calc(72*(100vw / 1200));
    padding-bottom: calc(68*(100vw / 1200));
}

.staff span{
    font-size: calc(11*(100vw / 1200));
}

.staff .big{
    font-size:  calc(12*(100vw / 1200));
}

.staff .border{
    font-size: calc(17*(100vw / 1200));
    padding-top: calc(92*(100vw / 1200)) !important;
}

.staff .border a{
    padding: calc(21*(100vw / 1200)) calc(123*(100vw / 1200)) calc(19*(100vw / 1200));
}

}

/* for sp */
@media only screen and (max-width: 560px) {

    .cateList {
        display: flex;
        flex-wrap: wrap;
    }

    .cateList li {
        display: inline-block;
    }

    .pc_only {
        display: none;
    }

    .sp_only {
        display: block;
    }

    .main-area .main-inner {
        margin: 0 auto !important;
    }
    

    ._2st_collection {
        width: calc(750* (100vw / 750));
        margin: calc(100* (100vw / 750)) auto 0;
        /* background-image:  url("/page/collection/2020aw/2st_collection/img/LP_3_before.jpg");  */
        background-position-y: -207px;
        background-position-y: 8449px;
        background-position-y: 15635px;
    }
    
    /*mv*/
    ._2st_collection_mv {
        width: calc(640* (100vw / 750));
    }
    
    ._2st_collection_mv figure{
        width: calc(385* (100vw / 750));
        padding-top: calc(80* (100vw / 750));
    }
    
    ._2st_collection_mv p{
    font-size: calc(19* (100vw / 750));
    line-height: calc(27* (100vw / 750));
    letter-spacing: 0.27em;
    padding-top: calc(37* (100vw / 750));
    }
    
    /*box共有*/
    ._2st_collection section {
        width: calc(640* (100vw / 750));
    }
    
    ._2st_collection section h2{
        font-size: calc(23* (100vw / 750));
        line-height: calc(27* (100vw / 750));
        letter-spacing: 0.31em;
    }
    
    ._2st_collection section .slick-dots{
        bottom: calc(-25* (100vw / 750));
        width: 7%;
    }

    .w676{
        width: 100% !important;
    }
    
    ._2st_collection .credit {
        font-size: calc(19* (100vw / 750));
        line-height: calc(31* (100vw / 750));
        padding-top: calc(40* (100vw / 750));
    }
    
    ._2st_collection_box11 .credit , ._2st_collection_box15 .credit , ._2st_collection_box17 .credit , ._2st_collection_box19 .credit , ._2st_collection_box23 .credit {
        padding-top: calc(45* (100vw / 750));
    }
    /* box1 */
    ._2st_collection_box1{
        padding-top: calc(150* (100vw / 750));
    }
    
    ._2st_collection_box1 ._1{
        padding-top: calc(33* (100vw / 750));
    }
    
    ._2st_collection_box1 ._2{
        padding-top: calc(60* (100vw / 750));
    }
    /* box2 */
    ._2st_collection_box2 {
        padding-top: calc(105* (100vw / 750));
    }
    
    /* box3 */
    ._2st_collection_box3 {
        padding-top: calc(105* (100vw / 750));
    }
    
    /* box4 */
    ._2st_collection_box4 {
        padding-top: calc(105* (100vw / 750));
    }
    
    /* box5 */
    ._2st_collection_box5 {
        padding-top: calc(105* (100vw / 750));
    }
    
    ._2st_collection_box5 ._2{
        padding-top: calc(55* (100vw / 750));
    }
    
    ._2st_collection_box5 ._3{
        padding-top: calc(100* (100vw / 750));
    }
    
    /* box6 */
    ._2st_collection_box6 {
        padding-top: calc(200* (100vw / 750));
    }
    
    ._2st_collection_box6 ._2{
        padding-top: calc(60* (100vw / 750));
    }
    
    /* box7 */
    ._2st_collection_box7 {
        padding-top: calc(150* (100vw / 750));
    }
    
    /* box8 */
    ._2st_collection_box8 {
        padding-top: calc(105* (100vw / 750));
    }
    
    /* box9 */
    ._2st_collection_box9 {
        padding-top: calc(155* (100vw / 750));
    }
    
    /* box10 */
    ._2st_collection_box10 {
        padding-top: calc(150* (100vw / 750));
    }
    
    ._2st_collection_box10 ._2{
        padding-top: calc(60* (100vw / 750));
    }
    
    /* box11 */
    ._2st_collection_box11{
        padding-top: calc(155* (100vw / 750));
    }
    
    ._2st_collection_box11 .slick-dots{
        left: calc(690* (100vw / 750)) !important;
    }
    
    /* box12 */
    ._2st_collection_box12{
        padding-top: calc(95* (100vw / 750));
    }
    
    /* box13 */
    ._2st_collection_box13{
        padding-top: calc(110* (100vw / 750));
        width: calc(640* (100vw / 750));
    }
    
    /* box14 */
    ._2st_collection_box14{
        padding-top: calc(125* (100vw / 750));
        width: calc(615* (100vw / 750)) !important;
    }
    
    /* box15 */
    ._2st_collection_box15{
        padding-top: calc(105* (100vw / 750));
    }
    
    ._2st_collection_box15 .slick-dots{
        left: calc(600* (100vw / 750)) !important;
    }
    
    /* box16 */
    ._2st_collection_box16{
        padding-top: calc(105* (100vw / 750));
    }
    
    /* box17 */
    ._2st_collection_box17{
        padding-top: calc(105* (100vw / 750));
    }
    
    ._2st_collection_box17 .slick-dots{
        left: calc(605* (100vw / 750)) !important;
    }
    
    /* box18 */
    ._2st_collection_box18{
        padding-top: calc(110* (100vw / 750));
    }
    
    /* box19 */
    ._2st_collection_box19{
        padding-top: calc(110* (100vw / 750));
    }
    
    ._2st_collection_box19 .slick-dots{
        left: calc(600* (100vw / 750)) !important;
    }
    
    /* box20 */
    ._2st_collection_box20{
        padding-top: calc(97* (100vw / 750));
    }
    
    /* box21 */
    ._2st_collection_box21{
        padding-top: calc(105* (100vw / 750));
    }
    
    /* box22 */
    ._2st_collection_box22{
        padding-top: calc(95* (100vw / 750));
    }
    
    /* box23 */
    ._2st_collection_box23{
        padding-top: calc(105* (100vw / 750));
    }
    
    ._2st_collection_box23 .slick-dots{
        left: calc(700* (100vw / 750)) !important;
    }
    
    /* STAFF */
    .staff{
        margin: 0 auto calc(60* (100vw / 750));
        width: calc(640* (100vw / 750));
        padding-top: calc(124* (100vw / 750));
        font-size: calc(18* (100vw / 750));
        line-height: calc(50* (100vw / 750));
    }
    
    .staff p{
        padding-top: calc(85* (100vw / 750));
        padding-bottom: calc(100* (100vw / 750));
        line-height: calc(27* (100vw / 750));
    }
    
    .staff span{
        font-size: calc(16* (100vw / 750));
        margin-bottom: calc(-20* (100vw / 750));
        display: block;
    }
    
    .staff .big{
        font-size: calc(18* (100vw / 750));
    }
    
    .staff .border{
        font-size: calc(26* (100vw / 750));
        padding-top: calc(30* (100vw / 750)) !important;
        padding-bottom: calc(120* (100vw / 750)) !important;
    }
    
    .staff .border a{
        padding: calc(30* (100vw / 750)) calc(170*(100vw / 750)) calc(27* (100vw / 750));
    }
    
}