@charset "UTF-8";

:root {
    --text-pink: #e8308f;
    --back-pink:#f562a1;
    --fnt-pink:#d57592;
    --contents-wd: 90%;
    --font-14: 0.875rem;
    --font-18: 1.125rem;
    --font-20: 1.25rem;
    --font-22:1.375rem;
    --font-24:1.5rem;
    --font-28: 1.75rem;
    --font-30: 1.875rem;
    --font-36: 2.25rem;
    --font-38:2.375rem;
    --font-40:2.5rem;
    --font-44:2.75rem;
}

html{
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: #3a3012;
    font-size: clamp(0.9rem, 0.95rem + 0.4vw, 1rem);
}

.attend{ font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-weight: 400; font-size: 12px;}
.wrapper{width: 90%; max-width: 980px; padding: 5% 0; margin: 0 auto;}
.fnt_pink{color: var(--fnt-pink); font-weight: 600;}
.caution {
	font-size: 0.5em;
	vertical-align: top;
}
.sp-only{display: none;}
a:hover{opacity: .8;}
.head{ position: fixed; right: 2%;  z-index: 1000; top: 2%; }
.flattery{display: flex; align-items: center; width: 40%; max-width: 400px; gap : 0 10px; justify-content: center;}
.flattery_area{display:none;}
.kv{
    background: url(../images/facial/fv_bg.webp) center/cover no-repeat;
    padding-bottom: 50px;
}

.kv h1{max-width: 980px; margin: 0 auto;}
.kv .attend{
    margin-top: 10px;
    width: 80%;
    max-width: 800px; margin: 0 auto
}
.btn_area {margin: 4% 0;}
.btn_area p{
    color: #fff; text-align: center;  padding: 3% 0;
}

.yoyaku_btn{
    width: 70%;
    max-width: 700px;
    margin: 0 auto 3%;
    background: linear-gradient(0deg, #d57592 16.49%, #e94a7e 81.25%);
    border-radius: 100px;
    position: relative;
    animation: btnup 3s ease-in-out infinite;
    overflow: hidden;
}

.yoyaku_btn a{
    position:  relative;
    overflow: hidden;
}
.yoyaku_btn a::after {
    content: '';
    position: absolute;
    top: 10%;
    left: -20%;
    width: 50px;
    height: 70%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    animation: kirakira 2.5s ease-in-out infinite;
  }
  @keyframes kirakira {
    from { left: -5%; opacity:0} 10% { left: 105%; opacity:10} 100% { left: 105%; opacity:100}
  }
  @keyframes btnup {
    from, 100%{transform: scale(1);}  50%{ transform: scale(1.075);}
  }

.yoyaku_btn p{font-size: var(--font-36); position: relative;}
.salon_btn p{font-size: var(--font-28); position: relative;}

.yoyaku_btn p::before, .salon_btn p::before{
    content: '';
  width: 15px;
  height: 15px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 7%;
  bottom: 0;
  margin: auto;
}

.salon_btn{
    width: 60%;
    max-width: 500px;
    margin: 0 auto;
    background-color:#634c15 ;
    border-radius: 100px;
}


.nayami{ margin: 5% 0 0;}
.nayami .wrapper{padding-bottom: 0;}
.nayami_content{background-color:#f5f5f5;}
.nayami .ttl{width: 70%; margin: 0 auto;}
.nayami_box{width: 80%; margin: 0 auto; display: block; }
.arrow{width: 15%; margin: 3% auto;}
.nayami_cause{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 30px;
    border: 3px double #bb9f5b ;
    padding:  2% 3%;
    width: 90%; max-width: 980px;margin: 0 auto; }
.nayami_cause_sample{width: 30%;}
.nayami_cause_text{width: 50%; font-size: var(--font-22); line-height: 1.6;}
.balance_box{ width: 90%; max-width: 980px;margin: 0 auto; display: block; }
.tbc_message{
    width: 90%; max-width: 980px;margin: 0 auto;
    text-align: center; font-size: var(--font-36);
    border-top: solid 1px #bb9f5b;
    border-bottom: solid 1px #bb9f5b;
    padding: 3% 0;}
.tbc_message .fnt_pink{font-size: var(--font-44);}


/* STEP */
.step{background-color:#fdf8ed; margin-top: 5%;}
.step .ttl,.point .ttl{text-align: center; font-size: var(--font-40); position: relative; margin-bottom: 4%;}
.step .ttl::after,.point .ttl::after{
    content: '';
    width: 10%;
    height: 2px;
    display: inline-block;
    background-color: #634c15;
    position: absolute;
    bottom: -10px;
    left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
}
.step_list{display: flex; flex-direction: column; gap: 30px 0;}
.step_item{display: flex; gap: 0 30px; background-color: #fff; padding: 3%;}
.step_item_img{width: 30%;}
.step_item_desc{width: 70%;}
.step_item_desc_ttl{font-size: var(--font-28); margin-bottom: 10px; font-weight: 500; color: #634c15;}
.step_item_desc_text{font-size: var(--font-20); line-height: 1.6;}
.step_item_desc .attend{margin-top: 20px; font-size: 1rem;}

.staff_comment{
    width: 80%; max-width: 980px; margin: 0 auto;
    padding: 3% 0 0;
}


/* POINT */
.point .wrapper{padding-bottom: 0;}
.ttl_area{text-align: center;}
.ttl_area p{font-size: var(--font-22);}
.point_list{display: flex; flex-direction: column; gap: 40px 0;}
.point_item{display: flex; gap: 0 50px; align-items: center; justify-content: center;}
.point_item_img{width: 30%;}
.point_item_desc{width: 70%;}
.point_item_desc_no{color: #bb9f5b; font-size: var(--font-22);}
.point_item_desc_no span{font-size: var(--font-28);}
.point_item_desc_ttl{ font-size: var(--font-30); margin-bottom: 20px;}
.point_item_desc_text{font-size: var(--font-20); line-height: 1.6;}
.point_item_desc .attend{margin-top: 20px;}
.point_item:nth-child(2){flex-direction: row-reverse;}
.point .tbc_message{width: 100%; font-size: var(--font-30);}
.point .staff_comment{width: 90%;}


/* offer */
.offer_wrapper{
    background: url(../images/facial/fv_bg.webp) center/cover no-repeat;
    padding-bottom: 50px;
}
.offer_wrapper .attend{
    width: 90%;
    max-width: 980px;
    margin: 0 auto;

}
.offer_con{width: 90%; max-width: 980px; margin: 0 auto; padding: 3% 0;}


/* ================- package ===================- */

.package_inner::before{left: 0;}
.package {
    width: 90%;
    max-width: 980px;
    margin: 5% auto;
    text-align: center;
}
.package .attend{text-align: left; }
.pcg_staff {width: 70%; margin: 0 auto;}
.package a {
    display: block;
    padding: 1.2%;
    color: #fff;
    font-weight: bold;
    font-size: var(--font-24);
    background: #bb9f5b;
    position: relative;
}
.package a::after {
    content: "▼";
    font-size: 0.9em;
    transform: all .3s;
    position: absolute;
    right: 10%;
}
.package a.action::after { content: "▲";}

.package .step_list{padding: 3% 3% 5%;}
.pull{display: none; background-color:#fdf8ed; text-align: left;}


/* カウンセリング */
.counseling{background-color: #fdf8ed; padding: 10% 0 20%; margin-top: -15%; margin-bottom: -23%;}
.counseling h2{width: 70%; margin: 0 auto;}
.counseling_intro{text-align: center; margin-top: 3%; font-size: var(--font-18); line-height: 1.8;}
.counseling_item{border: solid 1px #bb9f5b; background-color: #fff; padding: 4% 3%;margin-top: 3%;}
.counseling_item_con{ display: flex; gap: 0 40px;}
.counseling_item_img{width: 30%;}
.counseling_item_desc{width: 70%;}
.counseling_item_desc_ttl{ font-size: var(--font-28); margin-bottom: 20px; color: #634c15; margin-top: 3%;}
.counseling_item_desc_text{font-size: var(--font-18);}
.counseling_hada{display: flex; align-items: center; justify-content: center; gap: 0 20px; margin-top: 3%;}
.counseling_hada_img{width: 15%;}
.counseling_hada_desc{width: 80%; border: 1px dashed #bb9f5b; padding: 3%; color: #634c15;}


/* VOICE */
.voice{background-color: #f7eff0;}
.voice_ttl_area{text-align: center;}
.voice .ttl{font-size: var(--font-38); position: relative; display: inline-block;}
.voice .ttl:before, .voice .ttl::after{
    content: '';
    position: absolute;
    top: 60%;

    display: inline-block;
    width: 100px;
    height: 2px;
    background-color: #d57592;
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);

}
.voice .ttl::before{ left: -20%;}
.voice .ttl::after{
    top: 60%;
    right: -20%;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.voice_list{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px 0;
}

.voice_item{background-color: #fff; padding: 5px;}
.voice_item_inner{
    border: 1px solid #d57592;
    padding: 3% 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 50px;
}

.voice_item:nth-child(2) .voice_item_inner{
    flex-direction: row-reverse
}

.voice_item_img{width: 20%;}
.voice_item_text{
    width: 73%;
    font-size: var(--font-18);
    line-height: 1.5;
}

.tbc_message2{
    border: none;
    margin: 3% auto;
}


/* ordermade */

.ordermade{
    background-color:#f2cad6 ;
    padding: 5% 0;
}
.ordermade .wrapper{
    background: #fff;
    padding: 5% ;
}


.sub_ttl_ashirai{width: 100px; margin: 0 auto;}
.ttl_sub{text-align: center; font-size: var(--font-18); margin: 10px 0 30px;}

.ordermade .ttl{width: 80%; margin: 0 auto;}
.ordermade_innner{
    border: dashed 2px #d57592;
    text-align: center;
    padding: 4% 8%;
    margin-top: 5%;
}

.ordermade_innner p{
    font-size: var(--font-24);
    margin-bottom: 30px;
}

.ordermade_img{width: 90%; margin: 0 auto;}
.ordermade .attend{ margin: 20px 0 40px;}
.salon_staff{
    color: #634c15;
    text-align: center;
    font-size: var(--font-28);
}


/* map */
.mv_area {display: flex; width: 100%; margin: 0 auto 2%;} .mv_area video{width:100%}
.mv_area dd{width: 48%; margin: 0 1%; overflow: hidden; border-radius: 8px;}

.map .wrapper{ padding-top: 8%;}
.map_inner{
    border: solid 1px #3a3012;
    position: relative;
    padding: 0 4% 5%;
}
.map .ttl{
    font-size: var(--font-36);
    text-align: center;
    margin-top: 5%;
}
.map .ttl .fnt_pink{ font-size: var(--font-44);}
.map_sub_ttl{
    text-align: center;
    background: #fff;
    position: absolute;
    top: -25px;
    left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
    font-size: var(--font-30);
    padding: 0 40px;
}

 .map_view { text-align: center;  position: relative; z-index: 5;}
 .map_comment {position: absolute; left: 7%; top: 30%; font-size: var(--font-20)}
 .map_wrap.map_2{width: 100%;}
 .sp_map{display: block;} .pc_map{display: none;}
 .mapbtn li {position: absolute; width: 11%;}
 .hokkaido {right: 10%; top: 4%;}
 .kanto {bottom: 17%; right: 22%; top: inherit;}
 .tohoku {top: 32%; right: 20%;} .hokuriku {top: 36%; right: 39%;}
 .hokuriku {top: 36%; right: 38%;} .tokyo {bottom: 14%; right: 27%; top: inherit;}
 .tokai {right: 43%;  bottom: 18%;} .chugoku {top: 50%; left: 12%;} .kansai { left: 30%; top: 47%;} .okinawa {left: 4%; bottom: 13%;} .maplink {padding: 3% 5% 5%;}
 .maplink li {border-bottom: dotted 1px #7ecbf5; font-size: 15px; color: #388dbc;}
 .maplink li a {display: block; padding: 1%; position: relative;}
 .maplink li a::after { content: " "; left: 4px; box-sizing: border-box;  width: 5px; height: 5px; border: 5px solid transparent; border-left: 5px solid #388dbc;  vertical-align: top; position: absolute; left: 95%; top: 28%;}
 figure.map_bg, .map_wrap.map_2 figure.map_bg { position: absolute; left: 5%;  top: 11%; width: 60%;  margin: 0;}
 @media (min-width: 600px) {
         .sp_map{display: none;} .pc_map{display: block;}
     }


/* TEL */

.tel_area{
    width: 80%;
    max-width: 800px;
    margin: 0 auto 5%;
    border: solid 1px #bb9f5b;
    padding: 2% 4% ;
}

.tel_area a{
    text-decoration: none;
    color: #3a3012;
}

.telbox{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 30px;
}
.telbox_message{
    font-size: var(--font-22);
    border-right: 1px solid #634c15;
    padding-right: 20px;
}
.footer_sp{display: none;}
.tel_area .number { font-size: var(--font-30); letter-spacing: 0.05em; line-height: 1;}
.tel_area p{margin-top: 5px;}



/* footer */
.footer_attend{background-color: #f7f7f7;}
.footer_attend h4{margin-bottom: 3px;}
.footer_attend .attend p{ line-height: 1.6;}

.lp_footer{
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
    padding: 4% 0;
}

.lp_footer_logo{
    width: 20%;
    margin: 0 auto 20px;
}

.footer_link{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.footer_link a{
    color: #333;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-weight: 400;
    position: relative;
    padding-left: 20px;
    display: inline-block;
}

.footer_link a::before{

        content: '';
        width: 6px;
        height: 6px;
        border: 0;
        border-top: solid 1px #333;
        border-right: solid 1px #333;
        transform: rotate(45deg);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
}

.footer_link a:hover{
    color: var(--fnt-pink);
}

.lp_footer .copy{
    text-align: center;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: var(--font-14);
    font-weight: 400;
    margin-top: 5%;

}



/* タブレット用 */
@media screen and (max-width: 1024px) {
    .yoyaku_btn p{font-size: var(--font-30);}
    .nayami .ttl,.counseling h2{width: 60%;}
    .nayami_box{width: 70%;}
    .nayami_cause_text{ font-size: var(--font-20); line-height: 1.6;}
    .tbc_message{font-size: var(--font-30); line-height: 1.3;}
    .tbc_message .fnt_pink{font-size: var(--font-36);}
    .staff_comment{width: 90%;}
    .step_item_desc_ttl{font-size: var(--font-24);}
    .step_item_desc_text{font-size: var(--font-18);}
    .step_item_desc .attend{font-size: var(--font-14);}
    .step_list{gap: 20px;}
    .balance_box{width: 80%;}
    .step .ttl, .point .ttl{font-size: var(--font-36);}
    .step .ttl{ margin-bottom: 50px;}
    .point_item_desc_ttl{font-size: var(--font-24); margin-bottom: 15px;}
    .point_item_desc_text{font-size: var(--font-18);}
    .point_item_img{width: 25%;}
    .point_item_desc_no{font-size: var(--font-20);}
    .arrow{    margin: 4% auto;}
    .point .tbc_message{font-size: var(--font-24);}
    .tbc_message .fnt_pink{font-size: var(--font-30);}
    .point .staff_comment { width: 80%;}
    .counseling_item_desc_ttl{font-size: var(--font-24); margin-bottom: 10px;}
    .voice .ttl{font-size: var(--font-28);}
    .voice_list{margin-top: 40px;}
    .map_sub_ttl{padding: 0 30px; font-size: var(--font-24);}
    .map .ttl{font-size: var(--font-30);}
    .map .ttl .fnt_pink { font-size: var(--font-36);}
    .map_comment{font-size: var(--font-18);}
    .counseling_intro{margin-top: 1%;}
    .counseling_item{padding: 3%;}
    .tbc_message2{margin: 1% auto;}
    .ordermade_img{width: 80%;}
    .ordermade_innner p{font-size: var(--font-22);}
    .voice .ttl:before, .voice .ttl::after{ width: 80px;}
    .tel_area{width: 90%;}

}



/* スマートフォン用 */

@media screen and (max-width: 768px) {
    .wrapper{
        width: 95%;
        padding: 9% 0;
    }
    .pc-only{display: none;}
    .attend{font-size: 10px; line-height: 1.6;}
    .flattery_area{
        background-color: rgba(236, 236, 224, .8);
        height: 60px;
        position: fixed; width:100%;  z-index: 999; bottom: 0;
    }
    .head{
        position: fixed; width:95%;  z-index: 999; bottom: 10px; top: inherit;
        left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
    }
    .kv{padding-bottom: 9%;}
    .kv .attend{width: 90%; margin-top: 3%;}
    .yoyaku_btn{width: 90%; margin-bottom: 5%;}
    .yoyaku_btn p{font-size: var(--font-22);}
    .yoyaku_btn p::before,.salon_btn p::before{width: 10px; height: 10px;}
    .salon_btn{width: 80%;}
    .salon_btn p{font-size: var(--font-20);}
    .btn_area{margin: 7% auto 9%;}
    .nayami_box{width: 80%;}
    .nayami .ttl, .counseling h2 {width: 90%;}
    .nayami_cause{width: 95%;}
    .nayami_cause_text{ font-size: 1rem; line-height: 1.6;}
    .nayami_cause_sample{width: 60%;}
    .nayami_cause_text{width: 100%; text-align: center;}
    .arrow{width: 20%; margin: 5% auto;}
    .balance_box{width: 95%;}
    .tbc_message{font-size: var(--font-22); line-height: 1.4; padding: 5% 0;}
    .tbc_message .fnt_pink{font-size: var(--font-28);}
    .step{margin-top: 9%;}
    .step .ttl, .point .ttl{font-size: var(--font-28); margin-bottom: 30px; }
    .step_item{flex-direction: column; padding: 7% 5%;}
    .step_item_img,.step_item_desc{width: 100%;}
    .step .ttl::after,.point .ttl::after{width: 20%;}
    .step_item_desc_ttl{margin: 10px 0 5px; font-size: var(--font-20);}
    .step_item_desc_text{font-size: 15px;}
    .step_item_desc .attend{font-size: 12px; margin-top: 10px;}
    .staff_comment{width: 100%; margin-left: -10px;}
    .ttl_area p{font-size: var(--font-18);}
    .point_item{gap: 0 10px; align-items: flex-start;}
    .point_item_img{width: 40%; margin-top: 10px;}
    .point_item_desc_no{font-size: var(--font-14);}
    .point_item_desc_ttl{font-size: var(--font-20); margin-bottom: 5px;}
    .point_item_desc_text{font-size: 15px;}
    .point_item_desc_no span{font-size: var(--font-22);}
    .point_list{gap: 20px 0;}
    .point_list .attend{margin-top: -10px;}
    .point .tbc_message{font-size: var(--font-18);}
    .point .tbc_message .fnt_pink{font-size: var(--font-28); line-height: 1.5;}
    .point .staff_comment{margin: 0 auto; width: 90%;}
    .offer_con{padding: 0; width: 100%;}
    .offer_wrapper .attend{margin-top: 3%;}
    .offer_wrapper{padding-bottom: 9%;}
    .package a{font-size: var(--font-18); padding: 3%;}
    .package a::after{right: 5%;}
    .package .step_list{padding: 6% 3%;}
    .counseling{margin-bottom: -25%;}
    .counseling_item{margin-top: 5%; padding: 7% 3%;}
    .counseling_item_con{flex-direction: column-reverse;}
    .counseling_item_desc{width: 100%; text-align: center;}
    .counseling_item_desc_ttl{font-size: var(--font-22); margin-top: 0;}
    .counseling_item_desc_text{font-size: 1rem;}
    .counseling_item_img{width: 80%; margin: 20px auto ;}
    .counseling_hada{ gap: 0 5px; margin-top: 0;}
    .counseling_hada_img{width: 30%;}
    .counseling_hada_desc{font-size: var(--font-14);}
    .voice .ttl{font-size: var(--font-20);}
    .voice .ttl:before, .voice .ttl::after{ width: 50px;}
    .voice .ttl::before{left: -15%;}
    .voice .ttl::after{right: -15%;}
    .voice_list{margin-top: 20px; gap: 10px 0;}
    .voice_item_inner{flex-direction: row-reverse; gap: 0 10px; align-items: flex-start; padding: 7% 2%;}
    .voice_item_img{width: 30%;}
    .ordermade{padding: 9% 0;}
    .ordermade .wrapper{padding: 5% 3% 7%;}
    .sub_ttl_ashirai{width: 50px;}
    .ttl_sub{font-size: var(--font-14); margin: 10px 0;}
    .ordermade .ttl{width: 90%;}
    .ordermade_innner{padding: 4%; border: dashed 1px #d57592;}
    .ordermade_innner p{font-size: var(--font-14); margin-bottom: 20px;}
    .ordermade_img{width: 95%;}
    .salon_staff{font-size: var(--font-18);}
    .ordermade .attend{margin: 20px 0;}
    .map .wrapper{padding: 10% 0;}
    .map_sub_ttl{font-size: 1rem; padding: 5px 0; width: 250px; top: -3%;}
    .map .ttl{font-size: var(--font-18); margin-top: 7%;}
    .map .ttl .fnt_pink{font-size: var(--font-20);}
    .map_comment{top: 25%; left: 5%;}
    .map_view{margin: 10% 0 5%;}
    .number_under{font-size: var(--font-14);}
    .telbox_message{font-size: var(--font-18);}
    .tel_area{width: 95%; padding: 5%; margin-bottom: 9%;}
    .lp_footer{padding: 7% 0;}
    .lp_footer_logo{width: 50%; max-width: 200px; margin-bottom: 7%;}
    .footer_link{
        flex-direction: column; gap: 5px;
        align-items: flex-start;
        margin: 5px;
        font-size: var(--font-14);
    }

    .foote_line{
        border-bottom: 1px solid #aeaeae;
        width: 100%;
    }
    .lp_footer .copy{margin: 10% 0 18%;}
    .footer_attend .attend{font-size: 10px;}

}


@media screen and (max-width: 480px) {
    .sp-only{display: block;}
    .counseling_hada_img{width: 35%;}
    .telbox{flex-direction: column;}
    .telbox_message{border-right: none; padding: 0;  border-bottom: 1px solid #a5a5a5;}
    .telbox_num{text-align: center;}
    .tel_area p{margin-bottom: 5px;}
    .voice_item_text{font-size: var(--font-14);}
    .map_comment{font-size: var(--font-14); }
    .nayami_cause{width: 95%; flex-direction: column; padding:7% 5% ;}
    .nayami_cause_text{margin-top: 5%;}
    .nayami_cause_sample { width: 80%;}
    .attend{font-size: 9px; }
    .footer_attend .attend{font-size: 10px;}

}