@charset "utf-8";
:root {
    --font_family_mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "Yu Mincho", "YuMincho", "MS PMincho", serif;
}

/*-------------------
   common
-------------------*/
#container .wrapper {
    font: 0.9rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    padding: 0;
    position: relative;
    text-align: justify;
}
#container .wrapper * {
    box-sizing: border-box;
}
#container .wrapper a {
    color: inherit;
    display: block;
}
#container .wrapper img {
    display: block;
    margin: 0 auto;
    width: 100%;
}
#container article {
    margin: 0 auto;
    width: 100%;
}
#container .flex {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
#container .sec4,
#container .sec5,
#container .sec6,
#container .sec7 {
    background: url(/contents/shop/sevenbeauty/img/freepage/cellogycosme/cellogy-2019_hl1.png);
    padding: 8% 0;
    background-size: 125%;
    background-position: center 5px;
    background-repeat: no-repeat;
}
#container h2{
    color: #a1597e;
    font-family: var(--font_family_mincho);
    font-size: 1.5rem;
    line-height: 1.6rem;
    text-align: center;
}
#container .h2e {
    color: #a1597e;
    font-family: var(--font_family_mincho);
    font-size: 1rem;
    text-align: center;
}
#container .buy-btn,
#container .line-btn {
    color: #fff;
    background: #a56083;
    border-radius: 2em;
    font-size: 1.1rem;
    position: relative;
    margin: 10px auto;
    text-align: center;
    width: 100%;
}
#container .buy-btn a,
#container .line-btn a{
    color: #fff;
    display: block;
    padding: 3%;
}
/*#container .buy-btn a::before,
#container .line-btn a::before {
    border: solid 5px transparent;
    border-left: solid 7px #fff;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    position: relative;
    top: -1px;
}*/
#container .buy-btn:hover,
#container .line-btn:hover {
    filter: alpha(opacity=90);
    transition: all ease-in 0.2s;
    background: #d475a5;
}
#container .ast80 {
    font-size: 0.7rem;
    display: inline-block;
    float: none;
    line-height: 1.5;
}
#container .br-sp{
    display: block;
}

/*-------------------
   mainvisual
-------------------*/
#container .mainvisual {
    background: url(/contents/shop/sevenbeauty/img/freepage/cellogycosme/cellogy-2023_mvsp.jpg) no-repeat;
    background-size: 100%;
    background-position: top;
    background-color: #320e1a;
    color: #FFF;
    padding: 8% 5% 5%;
    text-align: center;
}
#container .mainvisual h1 img{
    margin: 0 auto;
    display: block;
    width: 90%;
}
#container .mainvisual .title-desc1 {
    font-family: var(--font_family_mincho);
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1.8rem;
    margin: 8px 0 5px;
}
#container .mainvisual .title-desc2 {
    margin-bottom: 122%;
}
#container .mainvisual .kome {
    color: #f1e0e6;
    font-size: 0.8rem;
    text-align: right;
}

/*-------------------
   sec1
-------------------*/
#container .sec1{
    background: #f1e0e6;
    color: #a1597e;
    padding:5%;
}
#container .sec1 h2 {
    border-bottom: 1px solid #fff;
    font-family: var(--font_family_mincho);
    font-size: 1.3rem;
    line-height: 1.7rem;
    padding-bottom: 5px;
    text-align: center;
}
#container .sec1 p {
    margin: 3% 0 0;
}
/* イベントバナー */
#container .sec1 .event-bnr li{
    margin-bottom: 15px;
}
#container .sec1 .beautyitem-bnr li{
    margin: 0 auto;
    width: 46%;
}

/*-------------------
   nav
-------------------*/
#container nav{
    background: #a1597e;
    padding: 5% 0 3%;
}
#container nav li{
    margin-bottom: 10px;
    text-align: center;
    width: 50%;
}
#container nav li a{
    color: #FFF;
    display: block;
    padding: 0 15px 15px;
    position: relative;
}
#container nav li:nth-child(even) a{
    border-left: 1px solid #f1e0e6;
}
#container nav li a::after{
    border: solid 8px transparent;
    border-top: solid 5px #FFF;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 45%;
    top: 70%;
}


/*-------------------
   sec2
-------------------*/
#container .sec2{
    background: url(/contents/shop/sevenbeauty/img/freepage/cellogycosme/use-bk.jpg);
    background-size: 100%;
    padding: 8% 5%;
}
#container .sec2 .sec2_box {
    background-color: #fff;
    border: 1px solid #a1597e;
    padding: 5%;
}
#container .sec2 .meritBox{
    margin-bottom: 8%;
}
#container .sec2 h3 {
    background-color: #f1e0e6;
    color: #a1597e;
    counter-reset: headline-counter;
    font-family: var(--font_family_mincho);
    font-size: 1.2rem;
    line-height: 1.6rem;
    padding: 3% 3% 3% 14%;
    position: relative;
}
#container .sec2 h3::before{
    background: #a1597e;
    border-radius: 2px; 
    color: #FFF;
    content: "1";
    display: inline-block;
    font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    height: 1.5em;
    left: 0.5em;
    line-height: 1.5em;
    position: absolute;
    text-align: center;
    top: 15%;
    width: 1.5em;  
}
#container .sec2 h3.merit_2::before{
    content: "2";
}
#container .sec2 h3.merit_3::before{
    content: "3";
}
#container .sec2 h3.merit_4::before{
    content: "4";
}
#container .sec2 .sec2_box img {
    display: block;
    margin: 6% auto 3%;
    width: 90%;
}
#container .sec2 .merit1-desc{
    font-size: 0.8rem;
    margin-bottom: 5%;
}

/*-------------------
   c-voice
-------------------*/
#container .c-voice {
    margin: 8% 0;
}
#container .c-voice .voice-wrap {
    margin: 8% auto 0;
    width: 85%;
}
#container .c-voice .voice-wrap .voice-box {
    margin-bottom: 10%;
}
#container .c-voice .voice-wrap .voice-pht {
    display: block;
    margin: 0 auto 5%;
    width: 100%;
}
#container .c-voice h3 {
    color: #a56083;
    font-family: var(--font_family_mincho);
    font-size: 1.2rem;
    line-height: 1.6rem;
    margin-bottom: 3%;
}
#container .c-voice .comment .name,
#container .c-voice .comment .salon-txt{
    margin-bottom: 5%;
}
#container .c-voice .comment .salon-txt em {
    display: block;
    font-size: 1rem;
    font-weight: bold;
}
/* コメントボタン(続きを読む) */
#container .c-voice .voice-wrap .grad-wrap {
    position: relative;
}
#container .c-voice .voice-wrap .grad-btn {
    background: #959595;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    margin: auto;
    padding: 2.5% 0;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    transition: .2s ease;
    width: 180px;
    z-index: 2;
}
#container .c-voice .voice-wrap .grad-btn::before {
    content: "続きを読む"
}
#container .c-voice .voice-wrap .grad-item {
    height: 0;
    /*隠した状態の高さ*/
    position: relative;
    overflow: hidden;
    padding: 0 0 10%
}
#container .c-voice .voice-wrap .grad-item::before {
    background: #FFF;
    content: "";
    display: block;
    height: 90px;
    /*グラデーションで隠す高さ*/
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
#container .c-voice .voice-wrap .grad-trigger {
    display: none;
    /*チェックボックスは常に非表示*/
}
#container .c-voice .voice-wrap .grad-trigger:checked~.grad-btn::before {
    content: "閉じる"
        /*チェックされていたら、文言を変更する*/
}
#container .c-voice .voice-wrap .grad-trigger:checked~.grad-item {
    height: auto;
    /*チェックされていたら、高さを戻す*/
}
#container .c-voice .voice-wrap .grad-trigger:checked~.grad-item::before {
    display: none;
    /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}
#container .c-voice .voice-attention {
    font-size: 0.8rem;
    text-align: right;
    margin-right: 5%;
}

/*-------------------
   trial
-------------------*/
#container .trial{
    background: #a1597e;
    padding: 8% 5%;
}
#container .trial hgroup .catch{
    color:#FFF;
    font: 1.1rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    margin: 0;
    text-align: center;
}
#container .trial h2{
    color: #FFF;
   line-height: 2rem;
}
#container .trialset{
    background: #FFF;
    border: 3px solid #e6cf95;
    margin: 5% auto 0; 
    padding: 0 5% 5%;
}
#container .trialset dt img{
    display: block;
    margin: 0 auto;
    width: 80%;
}
#container .trialset dd .item_a{
    color: #d0942b;
    font-family: var(--font_family_mincho);
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-align: center;
}
#container .trialset dd h4{
    border-bottom: solid 1px #a1597e;
    color: #a1597e;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 3%;
}

/*-------------------
   application
-------------------*/
#container .application {
    background-color: #a1597e;
    margin: 0 auto;
    padding: 1rem;
}
#container .application .app-title {
    background-color: #fff;
    border-radius: 10px;
    color: #797476;
    font: bold 1.2rem/1.4 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
}
#container .application .app-box {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 auto;
    padding: 1rem 0;
}
#container .application .app-box .left-box {
    color: #fff;
    margin: 0 auto;
    width: 100%;
}
#container .application .app-box .left-box .text1 {
    color: #fff;
    font: 1.2rem/1.5 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    margin: 0.5rem auto 0;
    text-align: center;
}
#container .application .app-box .left-box p {
    color: #fff;
    font: bold 1.8rem/1.4 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    letter-spacing: -.2px;
    margin: 0 auto;
    text-align: center;
}
#container .application .app-box .right-box {
    margin: 0 auto;
    width: 100%;
}
#container .application .app-box .right-box .btn-web,
#container .sec8 .flex .btn-web {
    background-color: #b4c332;
    border: 2px solid #d4e25d;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font: bold 1.3rem/2.8 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    transition: all .1s;
    margin: 1rem auto;
    text-align: center;
    width: 100%;
}
#container .sec3 .stepbox .btn_wrap .btn-web {
    background-color: #b4c332;
    border: 2px solid #d4e25d;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font: bold .9rem/2.8 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    letter-spacing: -.5px;
    transition: all .1s;
    margin: 1rem auto;
    text-align: center;
    width: 100%;
}

#container .application .app-box .right-box .btn-web a,
#container .application .app-box .right-box .btn-freetrial a,
#container .sec8 .flex .btn-web a,
#container .sec8 .flex .btn-freetrial a,
#container .sec3 .stepbox .btn_wrap .btn-web a,
#container .sec3 .stepbox .btn_wrap .btn-freetrial a {
    display: block;
    text-decoration: none;
    color: #fff;
}

#container .application .app-box .right-box .btn-web a:hover,
#container .application .app-box .right-box .btn-freetrial a:hover,
#container .sec3 .stepbox .btn_wrap .btn-web a:hover,
#container .sec3 .stepbox .btn_wrap .btn-freetrial a:hover {
    opacity: .8;
}

#container .application .app-box .right-box .btn-web a:before,
#container .sec8 .flex .btn-web a:before,
#container .sec3 .stepbox .btn_wrap .btn-web a:before {
    font-family: "Font Awesome 5 Free";
    content: '\f35d';
    font-weight: 900;
    padding-right: 5px;
}

#container .application .app-box .right-box .btn-freetrial,
#container .sec8 .flex .btn-freetrial {
    background-color: #c5a257;
    border: 2px solid #f0cd80;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font: bold 1.3rem/2.8 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    transition: all .1s;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

#container .sec3 .stepbox .btn_wrap .btn-freetrial {
    background-color: #c5a257;
    border: 2px solid #f0cd80;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font: bold .9rem/2.8 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    letter-spacing: -.5px;
    transition: all .1s;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

#container .application .app-box .right-box .btn-freetrial a:before,
#container .sec8 .flex .btn-freetrial a:before,
#container .sec3 .stepbox .btn_wrap .btn-freetrial a:before {
    font-family: "Font Awesome 5 Free";
    content: '\f0e0';
    font-weight: 900;
    padding-right: 5px;
}
#container .application .app-bottom {
    color: #fff;
    font: 1rem/1.4 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    margin: 0 auto;
    text-align: center;
}
#container .wrapper .sec8 .flex dl dd.btn-web,
#container .wrapper .sec8 .flex dl dd.btn-freetrial {
    color: #fff;
    font: bold 1.2rem/2.8 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    margin: 1rem auto;
    padding: 0;
    text-align: center;
    width: 80%;
}
#container .sec8 .event-bnr ul{
    margin-bottom: 1em;
}
#container .sec8 .event-bnr ul li{
    padding: 0.5em 1em;
}

/*-------------------
   sec4
-------------------*/
#container .sec4_box {
    background: url(/contents/shop/sevenbeauty/img/freepage/cellogycosme/cellogy-2023_6.png);
    background-color: #401923;
    padding: 5% 5% 60%;
    background-size: 130%;
    background-position: bottom center;
    background-repeat: no-repeat;
}
#container .sec4 .text-box{
    color: #FFF;
}
#container .sec4 .text-box br {
    display: none;
}
#container .sec4 .text-box dt {
    font-family: var(--font_family_mincho);
    font-size: 2rem;
}
#container .sec4 .flex .left-box,
#container .sec4 .flex .right-box{
    background-color: #f1e0e6;
    color: #a1597e;
    margin: 0 auto;
    width: 100%;
}
#container .sec4 .flex .left-box h2,
#container .sec4 .flex .right-box h2 {
    font-family: var(--font_family_mincho);
    font-size: 1.5rem;
    margin-bottom: 3%;
    padding-top: 8%;
}
#container .sec4 .flex .left-box .desc,
#container .sec4 .flex .right-box .desc {
   padding: 0 5% 5%;
    text-align: justify;
}
#container .sec4 .kome {
    font-size: 0.8rem;
    margin: 0 5% 5% 0;
    text-align: right;
}
#container .flex-reverse {
    display: flex;
    flex-wrap: wrap-reverse;
}

/*-------------------
   sec5
-------------------*/
#container .sec5{
    padding-bottom: 0;
}
#container .sec5 h3 {
    background-color: #a1597e;
    color: #fff;
    font-family: var(--font_family_mincho);
    font-size: 1.5rem;
    margin: 8% 5% 0;
    padding: 1%;
    text-align: center;
}
#container .sec5 .desc_sec5 {
    margin: 3% 5% 8%;
    text-align: justify;
}
#container .sec5 .item-box{
    border-bottom: 1px solid #d4d4d4;
    margin: 0 auto 10%;
    padding-bottom: 8%;
    width: 90%;
}
/* 写真+アイコン */
#container .sec5 dt {
    margin-bottom: 5%;
    position: relative;
    text-align: center;
}
#container .sec5 .item-box dt img {
    margin: 0 auto;
    width: 55%;
}
#container .sec5 .item-box dt .cell_1p {
    left: 2%;
    position: absolute;
    top: 0;
    width: 28%;
}
#container .sec5 .item-box dt .monde {
    position: absolute;
    right: 2%;
    top: 0;
    width: 23%;
}
#container .sec5 .item-box dt .mustbuy {
    position: absolute;
    right: 2%;
    top: 50%;
    width: 23%;
}
/* テキスト */
#container .sec5 .item-box .item_a{
    color: #d0942b;
    font-family: var(--font_family_mincho);
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-align: center;
}
#container .sec5 .item-box .item_b{
    text-align: justify;
}
#container .sec5 .item-box ul li:nth-child(1) {
    background-color: #ebc2d1;
    color: #a1597e;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    width: 100%;
}
#container .sec5 .item-box ul li:nth-child(2) {
    background-color: #fcf0f4;
    color: #a1597e;
    padding: 10px;
    text-align: justify;
}
#container .sec5 .item-box ul li:nth-child(3) {
    color: #808080;
    font-size: 0.8rem;
    line-height: 1.1rem;
    margin: 3% 0 5%;
    text-align: justify;
}
#container .sec5 .item-box h4 {
    border-bottom: solid 1px #a1597e;
    color: #a1597e;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 3%;
}

/* 施術の流れ */
#container .sec5 .sec5_flow{
    background: url(/contents/shop/sevenbeauty/img/freepage/cellogycosme/use-bk.jpg);
    background-size: 100%;
    padding: 8% 0;
}
#container .sec5 .sec5_flow h3{
    background: none;
    color: #a1597e;
    font-family: var(--font_family_mincho);
    font-size: 1.5rem;
    line-height: 1.6rem;
    margin: 0;
    text-align: center;
}
#container .sec5 .sec5_flow ul {
    display: flex;
    flex-flow: wrap;
    margin: 0 auto;
    width: 94%;
}
.sec5_flow ul li {
    background: #FFF;
    border: 1px solid #bd6b89;
    margin: 3% auto 0;
    padding: 2%;
    position: relative;
    width: 46%;
}
.sec5_flow ul li img {
    display: block;
    margin: 0 auto;
    width: 70%;
}
#container .sec5_flow li h4 {
    font-size: 1rem;
    line-height: 1.2rem;
    margin-bottom: 3%;
    padding: 3% 0 0 20%;
    position: relative;
}
#container .sec5_flow li h4::before{
    background: #a1597e;
    border-radius: 2px; 
    color: #FFF;
    content: "1";
    display: inline-block;
    font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    height: 1.5em;
    left: 0;
    line-height: 1.5em;
    position: absolute;
    text-align: center;
    top: 0;
    width: 1.5em;  
}
#container .sec5_flow li:nth-child(2) h4::before{
    content: "2";
}
#container .sec5_flow li:nth-child(3) h4::before{
    content: "3";
}
#container .sec5_flow li:nth-child(4) h4::before{
    content: "4";
}
#container .sec5_flow li:nth-child(5) h4::before{
    content: "5";
}
#container .sec5_flow li:nth-child(6) h4::before{
    content: "6";
}
#container .sec5_flow li:nth-child(7) h4::before{
    content: "7";
}
#container .sec5_flow li:nth-child(8) h4::before{
    content: "8";
}
#container .sec5_flow li p{
    text-align: justify;
}
/* 動画 */
#container .sec5 .movie-box {
    margin: 8% auto 0;
    width: 90%;
}
#container .sec5 .movie-box iframe {
    min-height: 185px;
    width: 100%;
}
/* お試し */
#container .sec5 .trialset{
    border-bottom: 3px solid #e6cf95;
}
#container .sec5 .trialset dt{
    margin: 0;
}
#container .sec5 .trialset dt img {
   width: 80%;
}

/*-------------------
   sec6
-------------------*/
#container .sec6 h3 {
    background-color: #a1597e;
    color: #fff;
    font-family: var(--font_family_mincho);
    font-size: 1.2rem;
    margin: 5% auto 0;
    padding: 1%;
    text-align: center;
    width: 90%;
}
/* ラベル */
#container .cp_box label {
    background-color: #ebc2d1;
    border: 1px solid #FFF;
    color: #a1597e;
    cursor: pointer;
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin: auto;
    padding: 2%;
    position: relative;
    transition: all 0.6s;
    text-align: center;
    width: 90%;
}
#container .cp_box label:hover {
    transition: all 0.6s;
    color: #a1597e;
}
#container .cp_box label::after {
    content: ' ▼';
    color: #a1597e;
}
#container .cp_box .label_u:after {
    content: ' ×';
    color: #a1597e;
}
#container .cp_box label:hover::after {
    color: #a1597e;
}
#container .cp_box input:checked~label::after {
    content: ' ×';
    color: #a1597e;
}
#container .cp_box input:checked~label:hover::after {
    color: #a1597e;
}
#container .cp_box input {
    display: none;
}
#container .sec6 .permit {
    color: #a1597e;
    margin: 2% auto;
    text-align: center;
}
#container .sec6 table {
    margin: 0 auto;
    width: 90%;
}
#container .sec6 table td {
    font-size: 0.8rem;
    line-height: 1.2rem;
    padding: 5px;
    vertical-align: middle;
}
#container table,
#container td {
    border: 1px solid #a1597e;
    border-collapse: collapse;
    text-align: left;
}
#container tr td:nth-child(1) {
    width: 30%;
}
#container tr td:nth-child(2) {
    width: 31%;
}
#container tr td:nth-child(3) {
    width: 22%;
}
#container tr td:nth-child(4) {
    width: 22%;
}
#container tr:nth-child(odd) {
    background-color: #fffafc
}
#container .cp_box *,
#container .cp_box *:before,
#container .cp_box *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#container .cp_box {
    width: auto;
    margin: 3em auto;
}
#container .cp_box .cp_container {
    position: relative;
    z-index: 10;
    overflow: hidden;
    height: 0;
    margin-top: -1px;
    transition: height 0.6s ease-in-out, box-shadow 0.6s linear;
    background: rgba(255, 255, 255, 0.5);
}
#container .cp_box input:checked~div {
    transition: height 0.6s ease-in-out, box-shadow 0.1s linear;
}
/* 続きを読むを押すと表示されるテキストの高さ */
#container .cp_box input:checked~div.cp_container {
    background-color: #fff;
    height: auto;
    width: 100%;
    margin: 0 auto;
}
.open-btn {
    background-color: #c5a257;
    border: 2px solid #f0cd80;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font: bold 1.3rem/2.8 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    transition: all .1s;
    margin: 30px 2% 10px;
    text-align: center;
    width: 96%;
}

/*-------------------
   sec7-media
-------------------*/
#container .sec7 {
    padding: 0 8%;
}
#container .sec7 h3 {
    font-size: 1.1rem;
    color: #a1597e;
    border-bottom: 1px solid;
    margin: 8% 0;
    text-align: center;
}
#container .sec7 h4 {
    font-size: 1rem;
    color: #a1597e;
    text-align: center;
}
#container .sec7 .media-box {
    border-bottom: 1px dashed #a1597e;
    margin: 0 auto 20px;
    padding: 10px 0 20px;
}
#container .sec7 ul {
    text-align: center;
}
#container .sec7 ul li {
    margin: 10px 0;
}

#container .sec7 .des {
    text-align: justify;
    text-justify: inter-ideograph;
}

#container .sec7 ul li strong {
    color: #a1597e;
}

/* 固定ボタン */
#container .glo-navi-foot {
    background-color: #353535;
    bottom: 0;
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 0;
    margin: 0;
    padding: 0;
    -ms-filter: "alpha(opacity=60)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    position: fixed;
    z-index: 1000;
    width: 100%;
}
#container .glo-navi-foot ul {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
#container .glo-navi-foot li {
    margin: .8rem auto;
    padding: 3% 0;

    text-align: center;
    width: calc(100% / 2);
}
#container .glo-navi-foot li a {
    color: #fff;
    font-size: .8em;
}

/*-------------------
   store-trial
-------------------*/
#container .store-trial{
    margin: 5% 0;
}
#container .trial-reserve dt{
	font-family: var(--font_family_mincho);
	font-size: 6vw;
	line-height: 7.5vw;
	margin-top: var(--space_2);
	text-align: center;
    padding: 1% 0 3%;
}
#container .trial-reserve dd{
	background: linear-gradient(to right, #c3c2c2 0%, #787878 100%);
	border-radius: 999px;
	color: #FFF;
	font-size: 4.5vw;
	margin: 0 auto;
    padding: 2% 0;
	text-align: center;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	width: 70%;
}
#container .store-trial a:hover{
	opacity: .8;
}

@media screen and (min-width:768px){
#container .store-trial{
	margin: 2% auto;
	width: 40vw;
}
#container .trial-reserve dt{
	font-size: 1.5vw;
	line-height: 0;
    padding: 5% 0;
}
#container .trial-reserve dd{
	font-size: 1.2vw;
	margin-top: var(--space_2);
	width: 60%;
}
}

/*　スマホ横～タブレット 480pxからここを読み込む　*/
@media screen and (min-width:480px) and ( max-width:960px) {
/*-------------------
   common
-------------------*/
#container h2{
    font-size: 2rem;
    line-height: 2.2rem;
}

/*-------------------
   mainvisual
-------------------*/
#container .mainvisual{
    padding-top: 11%;
}
#container .mainvisual .title-desc1 {
    font-size: 3rem;
    line-height: 3.5rem;
    margin: 3% 0;
}
#container .mainvisual .title-desc2 {
    margin-bottom: 130%;
}

/*-------------------
   sec1
-------------------*/
#container .sec1 h2 {
    font-size: 1.8rem;
    line-height: 2.4rem;
    padding-bottom: 10px;
}

/*-------------------
   nav
-------------------*/
#container nav{
    background: #a1597e;
    padding: 3% 0 1%;
}
#container nav li{
    width: 33.3%;
}
#container nav li:nth-child(even) a{
    border-left: none;
}


/*-------------------
   sec2
-------------------*/
#container .sec2 h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 2% 2% 2% 10%;
}
#container .sec2 h3::before{
    top: 18%;
}
#container .sec2 .sec2_box .meritPht{
    margin: 0 auto;
}
#container .sec2 .merit1-desc{
    margin-bottom: 2%;
}

/*-------------------
   c-voice
-------------------*/
#container .c-voice .voice-wrap {
    width: 90%;
}
#container .c-voice .voice-wrap .voice-box {
   margin: 0 2% 10%;
    width: 46%;
}

/*-------------------
   trial
-------------------*/
#container .trial h2{
    margin-top: 1%;
}
#container .trial h2 br{
    display: none;
}
#container .trialset dt img{
    width: 50%;
}
#container .trialset dd .item_a{
    font-size: 1.4rem;
}

/*-------------------
   sec4
-------------------*/
#container .sec4 .text-box dt {
    font-size: 3rem;
}
#container .sec4 .flex .left-box img,
#container .sec4 .flex .right-box img{
    display: block;
    margin: 0 auto;
    width: 60%;
}

/*-------------------
   sec5
-------------------*/
#container .sec5{
    padding-bottom: 0;
}
/* 写真+アイコン */
#container .sec5 .item-box dt img {
    width: 40%;
}
#container .sec5 .item-box dt .cell_1p {
    width: 15%;
}
#container .sec5 .item-box dt .monde {
    width: 15%;
}
#container .sec5 .item-box dt .mustbuy {
    top: 45%;
    width: 15%;
}
/* テキスト */
#container .sec5 .item-box .item_a{
    font-size: 1.5rem;
    line-height: 2rem;
}
/* 施術の流れ */
#container .sec5 .sec5_flow h3{
    font-size: 2rem;
    line-height: 2.2rem;
}
#container .sec5_flow li h4 {
    padding: 1% 0 0 12%;
}
/* お試し */
#container .sec5 .trialset dt img {
   width: 60%;
}
}

/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
@media screen and (min-width:960px) {
/*-------------------
   common
-------------------*/
#container .sec4,
#container .sec5,
#container .sec6,
#container .sec7 {
    padding: 5% 0;
    background-size: 100%;
}
#container h2{
    font-size: 2.5rem;
    line-height: 3rem;
}
#container .h2e {
    font-size: 1.2rem;
}
#container .buy-btn,
#container .line-btn {
    border-radius: 10em;
    font-size: 1.1rem;
    margin: 10px auto;
}
#container .buy-btn a,
#container .line-btn a{
    padding: 15px;
}
#container .inner-wrap {
    margin: 0 auto;
    width: 1040px;
}
#container .br-sp{
    display: none;
}

/*-------------------
   mainvisual
-------------------*/
#container .wrapper{
    background: url(/contents/shop/sevenbeauty/img/freepage/cellogycosme/cellogy-2023_mv.jpg) no-repeat;
    background-position: center;
    background-size: auto;
}
#container .mainvisual {
    background: none;
    height: 715px;
    margin: 0 auto;
    padding: 3% 0 0;
    width: 1040px;
}
#container .mainvisual h1 img{
    margin-bottom: 15px;
    width: 60%;
}
#container .mainvisual h1{
    font-size: 1.1rem;
}
#container .mainvisual .title-desc1 {
    font-size: 2.4rem;
    line-height: 3rem;
    margin: 1% 0 0;
}
#container .wrapper .mainvisual .title-desc2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/cellogycosme/gold_bestitem_2023.png) no-repeat;
    background-position: top center;
    background-size: 100%;
    font-size: 1.2rem;
    margin: 3% 2% 0;
    padding: 17% 0 1%;
    width: 48%;
}
#container .wrapper .mainvisual .salonorhome{
    margin: 0 1% 1.5%;
    width: 50%;
}
#container .mainvisual .kome {
    margin-left: 3%;
    text-align: left;
}

/*-------------------
   sec1
-------------------*/
#container .sec1{
    background: #f1e0e6;
    padding:3%;
}
#container .sec1 h2 {
    font-size: 1.8em;
    padding-bottom: 10px;
}
#container .sec1 p {
    margin: 15px 30px 0;
}
/* イベントバナー */
#container .sec1 .event-bnr li,
#container .sec8 .event-bnr li{
    margin: 0 auto 15px;
    width: 750px;
}
#container .sec1 .beautyitem-bnr{
    width: 750px;
}
#container .sec1 .beautyitem-bnr li{
    margin: 0 auto;
    width: 48%;
}

/*-------------------
   nav
-------------------*/
#container nav{
    padding: 0;
}
#container nav ul{
    width: 1200px;
}
#container nav li{
    margin-bottom:0;
    width: 200px;
}
#container nav li a{
    border-left: 1px solid #f1e0e6;
    padding: 20px 0 30px;
}
#container nav li:last-child a{
    border-right: 1px solid #f1e0e6;
}
#container nav li a::after{
    top: 65%;
}

/*-------------------
   sec2
-------------------*/
#container .sec2{
    padding: 5% 0 4%;
}
#container .sec2 h3 {
    font-size: 1.5rem;
    line-height: 0;
    padding: 3% 3% 3% 60px;
}
#container .sec2 .meritBox{
    flex-flow: row-reverse;
    margin: 30px auto 50px;
    width: 90%;
}
#container .sec2 .meritBox .meritPht{
    width: 30%;
}
#container .sec2 .meritBox p{
    margin-right: 4%;
    width: 66%;
}
#container .sec2 .sec2_box img {
    margin: 0;
    width: 100%;
}
#container .sec2 .meritBox .merit1-desc{
    margin-bottom: 0;
    width: 100%;
}

/*-------------------
   c-voice
-------------------*/
#container .c-voice {
    margin: 5% 0;
}
#container .c-voice .voice-wrap {
    margin: 0 auto;
    width: 1200px;
}
#container .c-voice .voice-wrap .voice-box {
    margin: 5% 2% 0;
    width: 29.3%;
}
#container .c-voice .voice-attention {
    margin: 0 auto;
    width: 1200px;
}

/*-------------------
   trial
-------------------*/
#container .trial{
    background: #a1597e;
    padding: 5% 0;
}
#container .trial hgroup .catch{
    font-size: 1.3rem;
}
#container .trial h2{
   margin-top: 15px;
}
#container .trial h2 br{
    display: none;
}
#container .trialset,
#container .sec5 .trialset{
    margin-top: 50px; 
    padding: 10px 30px;
    width: 960px;
}
#container .trialset dl,
#container .sec5 .trialset dl{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
#container .trialset dt,
#container .sec5 .trialset dt{
    margin-right: 4%;
    width: 30%;
}
#container .trialset dt img,
#container .sec5 .trialset dt img{
    width: 100%;
}
#container .trialset dd,
#container .sec5 .trialset dd{
    width: 66%;
}
#container .trialset dd .item_a,
#container .sec5 .trialset dd .item_a{
    font-size: 1.4rem;
    text-align: left;
}
#container .trialset dd h4,
#container .sec5 .trialset dd h4{
    font-size: 1.1rem;
    margin: 20px 0 10px;
}
#container .trialset .buy-btn{
    width: 80%;
}

/*-------------------
   sec4
-------------------*/
#container .sec4_box {
    padding: 3% 0 28%;
    background-size: 60%;
}
#container .sec4 .text-box{
    text-align: center;
}
#container .sec4 .text-box br {
    display: block;
}
#container .sec4 .text-box dt {
    font-size: 3.5rem;
}
#container .sec4 .text-box dd{
    font-size: 1.1rem;
}
#container .sec4 .flex .left-box,
#container .sec4 .flex .right-box{
    height: 339px;
    width: 50%;
}
#container .sec4 .flex .left-box h2,
#container .sec4 .flex .right-box h2 {
    margin: 0;
    padding-top: 5%;
}

/*-------------------
   sec5
-------------------*/
#container .sec5{
    padding-bottom: 0;
}
#container .sec5 h3 {
    margin: 5% 0 0;
}
#container .sec5 .item-box{
    margin-bottom: 8%;
    padding-bottom: 3%;
    width: 100%;
}
#container .sec5 .item-box dl{
    display: flex;
    flex-wrap: wrap;
}
/* 写真+アイコン */
#container .sec5 dt {
    margin-right: 4%;
    width: 26%;
}
#container .sec5 .item-box dt img {
    margin-left: 15%;
    width: 85%;
}
#container .sec5 .item-box dt .cell_1p {
    left: -30px;
    top: 0;
    width: 90px;
}
#container .sec5 .item-box dt .monde {
    left: -20px;
    right: 0;
    top: 100px;
    width: 70px;
}
#container .sec5 .item-box dt .mustbuy {
    left: -20px;
    right: 0;
    top: 230px;
    width: 70px;
}
/* テキスト */
#container .sec5 .item-box dd{
    width: 70%;
}
#container .sec5 .item-box .item_a{
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: left;
}
#container .sec5 .item-box ul{
    display: flex;
    flex-wrap: wrap;
}
#container .sec5 .item-box ul li:nth-child(1) {
    line-height: 2.2rem;
    position: relative;
    width: 20%;
}
#container .sec5 .item-box ul li:nth-child(1)::after {
    border: solid 8px transparent;
    border-left: solid 8px #ebc2d1;
    content: "";
    display: inline-block;
    height: 0;
    left: 100%;
    position: absolute;
    top: 0.9em;
    width: 0;
}
#container .sec5 .item-box ul li:nth-child(2) {
    padding-left: 20px;
    width: 80%;
}
#container .sec5 .item-box ul li:nth-child(3) {
    margin: 2% 0;
}
#container .sec5 .item-box h4 {
    font-size: 1.1rem;
    margin-bottom: 2%;
}
#container .sec5 .item-box .buy-btn{
    margin-top: 5%;
    width: 60%;
}
    
/* 施術の流れ */
#container .sec5 .sec5_flow{
    padding: 5% 0;
}
#container .sec5 .sec5_flow h3{
    font-size: 2.5rem;
    line-height: 2.2rem;
}
#container .sec5 .sec5_flow ul {
    width: 94%;
}
#container .sec5_flow ul li {
    margin: 3% 2% 0;
    padding: 2%;
    position: relative;
    width: 29.3%;
}
#container .sec5_flow ul li::after{
    border: solid 20px transparent;
    border-left: solid 18px #a56083;
    content: "";
    display: inline-block;
    height: 0;
    left: 100%;
    position: absolute;
    top: 45%;
    width: 0;
}
#container .sec5_flow ul li:last-child::after{
    display: none;
}
#container .sec5_flow li h4 {
    font-size: 1.1rem;
    padding: 1% 0 0 35px;
}
#container .sec5_flow li img{
    width: 120px;
}

/* 動画 */
#container .sec5 .movie-box {
    margin-top: 5%;
    width: 560px;
}
/* お試し */
#container .sec5 .trialset{
    padding-bottom: 10px;
    width: 960px;
}
#container .sec5 .trialset dd{
    width: 66%;
}
#container .sec5 .trialset dt img{
    margin: 0;
    width: 100%;
}
#container .sec5 .trialset .buy-btn{
    margin: 10px auto;
    width: 80%;
}

/*-------------------
   sec6
-------------------*/

/* ラベル */
#container .cp_box label {
    padding: 1%;
}

/*-------------------
   sec7-media
-------------------*/
#container .sec7 {
    padding: 0;
}
#container .sec7 h3 {
    font-size: 1.8rem;
    margin: 5% 0;
}
#container .sec7 h4 {
    font-size: 1.3rem;
}
#container .sec7 .media-box {
    margin-bottom: 50px;
    padding: 0 0 50px;
}
#container .sec7 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#container .sec7 ul li {
    margin: 10px;
}
#container .sec7 img {
    width: 100%;
}
#container .sec7 .type4 .img2 {
    width: 55%;
}
#container .sec7 .type3 .img2 {
    width: 25%;
}
#container .sec7 .type2 .img2 {
    width: 9.2%;
}
#container .sec7 .type1 .img2 {
    width: 245px;
}
#container .sec7 .des {
    font-size: 1rem;
    padding: 0 20%;
    text-align: center;
}
#container .sec7 a{
    display: block;
    text-align: center;
}

/* 固定ボタン */
#container .glo-navi-foot ul {
    margin: 0 auto;
    width: 1040px;
}
#container .glo-navi-foot li {
    margin: 0;
    padding: 3% 0;
}
#container .glo-navi-foot li a {
    font-size: 1.1rem;
}
}