@font-face {
    font-family: 'Hiragino Mincho ProN';
    src: url("../font/HiraKakuProN-W3-AlphaNum-01.woff");
}


@font-face {
    font-family: 'yumin';
    src: url("../font/yumin.woff");
}

@font-face {
    font-family: 'yuminl';
    src: url("../font/yuminl.woff");
    font-weight: bold;
}


.sp_only {
    display: none;
}

.header {
    min-width: 100%;
}

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

.lp201120_celvoke img , .lp201120_celvoke video {
    width: 100%;
}

a:hover {
    opacity: .7;
}


.fl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.lp201120_celvoke {
    width: 1200px;
    margin: 0 auto 140px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    font-feature-settings: 'pkna';
    text-align: center;
    color: #58595b;
    /* background-image: url(/Page/feature/201120_celvoke/img/celvoke_pc.jpg); */
    background-size: 100%;
    background-position-x: center;
    background-position-y: -248px;
}

/*mv*/
.lp201120_celvoke_mv {
    width: 1000px;
    margin: 0 auto;
}

.lp201120_celvoke_mv p {
    padding-top: 74px;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.12em;
}

.lp201120_celvoke_mv p span {
    font-size: 18px;
    border-bottom: 1px solid;
    line-height: 26px;
    padding-bottom: 1px;
    margin-bottom: 23px;
    display: inline-block;
}

/*box共有*/

.video_no{
    padding-top: 0 !important;
}

.lp201120_celvoke section {
    margin: 0 auto;
    width: 1000px;
}

.lp201120_celvoke section h2 {
    font-size: 32px;
    letter-spacing: 0.04em;
    color: #000;
    font-weight: 400;
    font-family: trajan-pro-3, serif;
}

.lp201120_celvoke section .credit {
    font-size: 13px;
    letter-spacing: 0.12em;
    line-height: 2;
    color: #58595b;
    font-weight: bold;
    padding-top: 15px;
}

.lp201120_celvoke section .text {
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.12em;
}

.lp201120_celvoke section h3{
    font-size: 22px;
    letter-spacing: 0.04em;
    color: #000;
    font-weight: 400;
    font-family: trajan-pro-3, serif;
    padding-top: 20px;
    border-bottom: 1px solid;
    margin: 0 auto 80px;
}

/* アイコン */
.label {
    line-height: 20px;
    font-family: "Cormorant Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    color: #fff;
    display: inline-block;
}

.label span {
    background: #58595b;
    padding: 0px 7px;
    font-size: 12px;
    display: inline-block;
    color: #fff !important;
    margin-left: 5px;
    margin-bottom: 2px;
}

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

.PRESENT ._1 figure{
    width: 300px;
    margin: 0 auto;
    padding-top: 17px;
}

.PRESENT ._1 .text{
    padding-top: 27px;
}

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

.MAKEUP_MOVIE hr{
    width: 100%;
    color: #808080;
    margin: 30px 0;
}

.MAKEUP_MOVIE .video{
    width: 300px;
    margin: 0 auto;
}

.MAKEUP_MOVIE ._1{
    padding-top: 35px;
}

.MAKEUP_MOVIE ._1 h3{
    width: 210px;
}

.MAKEUP_MOVIE ._2 h3{
    width: 255px;
}

.MAKEUP_MOVIE ._3 {
    width: 690px;
    margin: 0 auto;
}

.MAKEUP_MOVIE ._3 figure{
    width: 320px;
}

.MAKEUP_MOVIE ._3 .text{
    padding-top: 34px;
}

.MAKEUP_MOVIE ._3 .text span{
    font-size: 10px;
    padding-top: 13px;
    display: inline-block;
    line-height: 2;
}

/*RECOMMEND*/
.RECOMMEND {
    padding-top: 111px;
}

.RECOMMEND ul {
    display: flex;
    flex-wrap: wrap;
    width: 845px;
    margin: 0 auto;
    padding-top: 35px;
    justify-content: space-between;
}

.RECOMMEND ul li {
    width: 195px;
    padding-bottom: 50px;
}

.RECOMMEND ul li .txt {
    font-size: 13px;
    line-height: 1.3846;
    letter-spacing: 0.05em;
    word-break: break-all;
    font-feature-settings: normal;
    color: #000;
    text-align: left;
    padding-top: 10px;
}

.RECOMMEND ul li .txt .ttl {
    letter-spacing: 0;
    word-break: break-all;
    padding-top: 5px;
    margin-bottom: 2px;
}

.RECOMMEND ul li .txt .price .tax {
    font-size: 10px;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

/* .RECOMMEND ul li .txt .price {
    font-size: 13px;
} */

/*staff  */
.staff {
    margin: 0 auto;
    text-align: center;
    font-family: 'EB Garamond', serif;
    font-feature-settings: 'palt';
    text-align: center;
    line-height: 1.7;
    letter-spacing: 0.03em;
    width: 1100px;
    padding-top: 90px;
}

.staff a {
    border-bottom: double 3px #cacaca;
    padding-bottom: 4px;
    color: #000;
    font-size: 20px;
    letter-spacing: 0.02em;
}


/*タブレット*/
@media only screen and (max-width: 1200px) and (min-width: 561px) {
    .main-area.archive_slider {
        min-width: inherit !important;
    }

    .lp201120_celvoke {
        width: 100%;
        margin: 0 auto calc(126*(100vw / 1200));
    }
    
    /*mv*/
    .lp201120_celvoke_mv {
        width: calc(1000*(100vw / 1200));
    }

    .lp201120_celvoke_mv p {
        padding-top: calc(74*(100vw / 1200));
        font-size: calc(16*(100vw / 1200));
    }
    
    .lp201120_celvoke_mv p span {
        font-size: calc(18*(100vw / 1200));
        line-height: calc(26*(100vw / 1200));
        padding-bottom: calc(1*(100vw / 1200));
        margin-bottom: calc(23*(100vw / 1200));
    }
    
    /*box共有*/
    .lp201120_celvoke section {
        width: calc(1000*(100vw / 1200));
    }
    
    .lp201120_celvoke section h2 {
        font-size: calc(32*(100vw / 1200));
    }
    
    .lp201120_celvoke section .credit {
        font-size: calc(13*(100vw / 1200));
        padding-top: calc(15*(100vw / 1200));
    }
    
    .lp201120_celvoke section .text {
        font-size: calc(13*(100vw / 1200));
    }

    .lp201120_celvoke section h3{
        font-size: calc(22*(100vw / 1200));
        padding-top: calc(20*(100vw / 1200));
        margin: 0 auto calc(80*(100vw / 1200));
    }
    
    /*PRESENT*/
    .PRESENT {
        padding-top: calc(113*(100vw / 1200));
    }

    .PRESENT ._1 figure{
        width: calc(300*(100vw / 1200));
        padding-top: calc(17*(100vw / 1200));
    }

    .PRESENT ._1 .text{
        padding-top: calc(27*(100vw / 1200));
    }

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

    .MAKEUP_MOVIE hr{
        margin: calc(30*(100vw / 1200)) 0;
    }

    .MAKEUP_MOVIE .video{
        width: calc(300*(100vw / 1200));
    }

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

    .MAKEUP_MOVIE ._1 h3{
        width: calc(210*(100vw / 1200));
    }
    
    .MAKEUP_MOVIE ._2 h3{
        width: calc(255*(100vw / 1200));
    }

    .MAKEUP_MOVIE ._3 {
        width: calc(690*(100vw / 1200));
    }

    .MAKEUP_MOVIE ._3 figure{
        width: calc(320*(100vw / 1200));
    }

    .MAKEUP_MOVIE ._3 .text{
        padding-top: calc(34*(100vw / 1200));
    }

    .MAKEUP_MOVIE ._3 .text span{
        font-size: calc(10*(100vw / 1200));
        padding-top: calc(13*(100vw / 1200));
    }
    
    /*RECOMMEND*/
    .RECOMMEND {
        padding-top: calc(111*(100vw / 1200));
    }
    
    .RECOMMEND ul {
        width: calc(845*(100vw / 1200));
        padding-top: calc(35*(100vw / 1200));
    }
    
    .RECOMMEND ul li {
        width: calc(195*(100vw / 1200));
        padding-bottom: calc(50*(100vw / 1200));
    }
    
    .RECOMMEND ul li .txt {
        font-size: calc(13*(100vw / 1200));
    }
    
    .RECOMMEND ul li .txt .ttl {
        padding-top: calc(5*(100vw / 1200));
        margin-bottom: calc(2*(100vw / 1200));
    }
    
    .RECOMMEND ul li .txt .price {
        font-size: calc(13*(100vw / 1200));
    }

    .RECOMMEND ul li .txt .price .tax {
        font-size: calc(10*(100vw / 1200));
    }

    .staff {
        margin: calc(90*(100vw / 1200)) auto 0;
        width: calc(1100*(100vw / 1200));
        padding-bottom: calc(140*(100vw / 1200));
    }

    .staff a {
        border-bottom: double 3px #cacaca;
        padding-bottom: calc(4*(100vw / 1200));
        font-size: calc(20*(100vw / 1200));
    }
}

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

    #breadcrumb .cateList {
        line-height: calc(40 *(100vw / 750));
        font-size: calc(20 *(100vw / 750));
        margin: 10px auto;
        color: #000000;
        width: 92%;
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    }

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

    .cateList li {
        display: inline-block;
    }

    .pc_only {
        display: none;
    }

    .sp_only {
        display: block;
    }

    .lp201120_celvoke {
        width: calc(750* (100vw / 750));
        margin: 0 auto calc(160* (100vw / 750));
        font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
        /* background-image: url(/Page/feature/201120_celvoke/img/celvoke_sp.jpg); */
        background-position-y: -45px;
        background-size: 100%;
    }

    /*mv*/
    .lp201120_celvoke_mv {
        width: 100%;
    }

    .lp201120_celvoke_mv p {
        padding-top: calc(115* (100vw / 750));
        font-size: calc(28* (100vw / 750));
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    }

    .lp201120_celvoke_mv p span {
        font-size: calc(32* (100vw / 750));
        line-height: calc(26* (100vw / 750));
        padding-bottom: calc(10* (100vw / 750));
        margin-bottom: calc(46* (100vw / 750));    
    }

    /*box共有*/
    .lp201120_celvoke section {
        width: 100%;
    }

    .lp201120_celvoke section h2 {
        font-size: calc(54* (100vw / 750));
    }

    .lp201120_celvoke section .credit {
        font-size: calc(26* (100vw / 750));
        padding-top: calc(10* (100vw / 750));    
    }

    .lp201120_celvoke section .text {
        font-size: calc(26* (100vw / 750));
        line-height: 2;
        letter-spacing: 0.12em;
    }

    .lp201120_celvoke section h3{
        font-size: calc(40* (100vw / 750));
        padding-top: calc(45* (100vw / 750));
        margin: 0 auto calc(135* (100vw / 750));
    }

    /*PRESENT*/
    .PRESENT {
        padding-top: calc(160* (100vw / 750));
    }

    .PRESENT ._1 figure{
        width: calc(500* (100vw / 750));
        padding-top: calc(25* (100vw / 750));
    }

    .PRESENT ._1 .text{
        padding-top: calc(33* (100vw / 750));
    }

    /* MAKEUP_MOVIE */
    .MAKEUP_MOVIE{
        padding-top: calc(160* (100vw / 750));
    }

    .MAKEUP_MOVIE hr {
        width: 90%;
        margin: calc(40* (100vw / 750)) auto ;
    }

    .MAKEUP_MOVIE .video{
        width: calc(526* (100vw / 750));
        margin: 0 auto;
    }

    .MAKEUP_MOVIE ._1{
        margin-top: calc(60* (100vw / 750));
        padding-top: 0;
    }

    .MAKEUP_MOVIE ._2{
        padding-top: 0;
        margin-bottom: calc(73* (100vw / 750));
    }

    .MAKEUP_MOVIE ._1 h3{
        width: calc(380*(100vw / 750));
    }
    
    .MAKEUP_MOVIE ._2 h3{
        width: calc(465*(100vw / 750));
    }

    .MAKEUP_MOVIE ._3 {
        width: calc(710* (100vw / 750));
    }

    .MAKEUP_MOVIE ._3 figure{
        width: calc(345* (100vw / 750));
    }

    .MAKEUP_MOVIE ._3 .text{
        padding-top: calc(47* (100vw / 750));
    }

    .MAKEUP_MOVIE ._3 .text span{
        font-size: calc(20* (100vw / 750));
        padding-top: calc(16* (100vw / 750));
    }

    /*RECOMMEND*/
    .RECOMMEND {
        padding-top: calc(153* (100vw / 750));
    }

    .RECOMMEND ul {
        width: 100%;
        margin: 0 auto;
        padding-top: calc(55* (100vw / 750));
    }

    .RECOMMEND ul li {
        width: calc(365* (100vw / 750));
        padding-bottom: calc(75* (100vw / 750));
    }

    .RECOMMEND ul li .txt {
        font-size: 12px;
        line-height: 1.5;
        letter-spacing: 0.05em;
        width: 85.831%;
        margin: 0 auto;
    }

    .RECOMMEND ul li .txt .ttl {
        letter-spacing: 0;
        margin-bottom: 9px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    }

    .RECOMMEND ul li .txt .price {
        font-size: 14px;
        letter-spacing: 0.01em;
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    }

    .RECOMMEND ul li .txt .price .tax {
        font-size: 9px;
    }

    .staff {
        width: 100%;
        border-bottom: 1px solid #fff;
        padding-top: calc(85 * (100vw / 750));
    }

    .staff a {
        letter-spacing: 0.03em;
        font-size: calc(40 * (100vw / 750));
        border-bottom: double 4px #c0c0c0;
        padding-bottom: calc(6 * (100vw / 750));
    }

}