@charset "UTF-8";

:root {
    --text-purple: #560b79;
    --fnt-purple:#b05ed7;
    --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;
    --font-sans:'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    --font-400:400
}

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

.attend{ font-family: var(--font-sans); font-weight: 400; font-size: 12px; margin-top: 30px;}
.wrapper{width: 90%; max-width: 980px; padding: 7% 0; margin: 0 auto;}
.fnt_red{color:#de0010 ;}
.fnt_purple{color: var(--text-purple);}
.caution {	font-size: 0.5em; vertical-align: top;}
.sp-only{display: none;}
a:hover{opacity: .8;}
.head{ position: fixed; right: 2%;  z-index: 10; top: 2%; }
.flattery_area{display: none;}
.flattery{display: flex; align-items: center; width: 40%; max-width: 400px; gap : 0 10px; justify-content: center;}
.kv{ background: url(../images/vio5/fv_bg.webp) center/cover no-repeat;}
.kv h1{max-width: 980px; margin: 0 auto;}
.btn_area {margin: 3% 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, #f772d1 16.49%, #f15d9f 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:#5590f2 ;
    border-radius: 100px;
}

.kv_attend{
    width: 90%; max-width: 980px; margin: 0 auto 5%;
}

/* ABOUT */
.about{ background-color: #fcf7fd;}
.about .ttl, .step .ttl{
    font-size: var(--font-36);
    text-align: center;
    border-bottom: 1px solid #b05ed7;
}
.about_desc{
    text-align: center;
    font-size: var(--font-20);
    margin-top: 2%;
}
.vio_parts{
    display: flex;
    gap: 0 20px;
    padding: 5%;
    border: dashed 1px var(--fnt-purple);
    background-color: #fff;
    margin: 5% 0;
}
.vio_parts1{display: flex; gap: 0 20px;}
.vio_parts_item{flex: 1;}
.vio_parts_item p{
    font-size: var(--font-18); text-align: center;
    font-family: var(--font-sans); font-weight: var(--font-400);
}

.about_merit h3{
    text-align: center;
    background-color:var(--fnt-purple);
    position: relative;
    color: #fff;
    padding: 2%;
    font-size: var(--font-28);
}

.about_merit h3::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 20px solid var(--fnt-purple);
    border-left: 8vw solid transparent;
    border-right: 8vw solid transparent;
}

.merit_list{display: flex; gap: 0 20px;  margin-top: 8%;}
.merit_item{background: #fff; text-align: center; padding: 3%; flex: 1;}
.merit_item_num{width: 20%; margin: -20% auto 5%;}
.merit_item_ttl{font-size: var(--font-22); color: var(--text-purple); line-height: 1.4;}
.merit_item_img{margin: 20px auto;}
.merit_item_text{font-family: var(--font-sans); font-weight: var(--font-400); line-height: 1.5;}


/* STEP */
.step_ttl{background: var(--fnt-purple); color: #fff;
    text-align: center;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--font-20);
    padding: 5px 0;
}

.step_first{margin-top: 3%;}
.step_desc{display: flex; gap: 0 30px; width: 97%; margin: 4% auto 0;}
.step_desc_img{width: 30%; position: relative;}
.step_desc_num{width: 20%; position: absolute; left: -5%; top: -10%;}
.step_desc_text{width: 70%;}
.step_desc_text_ttl{font-size: var(--font-24);}
.step_desc_text_sub{font-size: var(--font-18); margin-top: 10px;}
.step_another{margin-top: 5%;}
.step_list{display: flex; gap: 0 20px; margin: 4% auto 0; width: 97%; }
.step_item{flex: 1; position: relative;}
.step_item_num{position: absolute; width: 20%; left: -5%; top: -10%;}
.step_item p{text-align: center; font-size: var(--font-20); margin-top: 5px;}

.staff_comment{
    border: solid 1px var(--fnt-purple);
    padding: 3% 5%;
    margin-top: 5%;
}
.staff_comment_inner{
    display: flex;
    align-items: center;
    gap: 0 40px;
}
.staff_comment_desc{width: 70%;}
.staff_comment_img{width: 30%;}
.staff_comment_ttl{font-size: var(--font-30); color: var(--text-purple); margin-bottom: 10px;}
.staff_comment_text{font-size: var(--font-22);}


/* cycle */
.cycle{background-color: #fcf7fd; text-align: center;}
.cycle .ttl,.plan_link .ttl{
    width: 100%;
    text-align: center;
    font-size: var(--font-28);
    display: inline;
    position: relative;
    font-weight: 500;
}
.cycle .ttl:before, .cycle .ttl::after,.plan_link .ttl::before,.plan_link .ttl::after{
    content: "";
    position: absolute;
    top: 60%;
    display: inline-block;
    width: 50px;
    height: 2px;
    background-color: #333;
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);
}
.cycle .ttl::before,.plan_link .ttl::before{ left: -13%;}
.cycle .ttl::after,.plan_link .ttl::after{
    top: 60%;
    right: -13%;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.cycle_con{
    background: #fff;
    border: dashed 1px var(--fnt-purple);
    padding: 3%;
    margin-top:5%;
    display: flex;
    gap: 0 40px;
}

.cycle_con_desc{width: 50%; text-align: left;}
.cycle_con_desc h3{font-weight: 500; font-size: var(--font-24); margin-bottom: 10px; color: var(--text-purple);}
.cycle_con_desc p{font-size: var(--font-18); font-weight: 400; font-family: var(--font-sans);}
.cycle_con_img{width: 50%; text-align: right; margin-top: 3%;}
.cycle_con_img .attend{margin-top: 10px;}
.cycle .attend{text-align: left;}
.cycle_con .attend{text-align: right;}
.staff_message{width: 80%; max-width: 980px; margin: 0 auto;}


/* nayami */
.tbc_message{
    width: 90%; max-width: 980px;margin: 3% auto;
    text-align: center; font-size: var(--font-40);
}
.tbc_message .fnt_red{font-size: 50px;}

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

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

/* advice */
.advice{display: flex; width: 90%; max-width: 980px; margin: 0 auto; gap: 0 50px; justify-content: center; align-items: center;}
.advice .staff_img{width: 25%;}
.advice .advice_inner{width: 75%;}
.advice_text{font-size: var(--font-20);}
.advice_desc{width: 90%; margin-top: 4%;}


/* plan */
.plan{
    background:url(../images/vio5/plan_bg.webp) center/cover no-repeat;
    padding: 7% 0;
}
.plan .wrapper{ background: #fff; padding: 5% ;}
.plan_sub_ttl{width: 60%; margin: 0 auto;}
.plan .ttl{width: 90%; margin: 3% auto 6%;}
.plan_inner{
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

/* recommend */
.recommend{background-color: #fcf7fd;}
.recommend .ttl{
    color: var(--text-purple);
    font-size: var(--font-36);
    text-align: center;
    margin-bottom: 5%;
}

.recommend_list{gap: 50px 0; display: flex; flex-direction: column;}
.recommend_item{background-color: #fff; padding: 5%;}
.recommend_item_ttl{text-align: center; font-size: var(--font-20);}
.recommend_item_ttl span{font-size: var(--font-36);}
.recommend_point_item{display: flex; gap: 0 20px; width: 90%; margin: 3% auto 0;}

/* map */
.map_con{ position: relative; width: 95%;}
.map_comment {position: absolute; left: 0; top: 20px; width: 50%;}

/* recommend */
.recommend_text{font-family: var(--font-sans);font-weight: 400; font-size: var(--font-18); margin-top: 30px;}
.recommend_text span{font-size: var(--font-20); font-weight: 500;}
.recommend_text .fnt_purple{font-weight: 400; font-size: var(--font-18);}
.recommend_care{background-color: #f5f5f5; padding: 3% 5% 0; margin-top: 5%;}
.recommend_care_img{width: 90%; margin: 0 auto;}


/* recommend_guarantee */
.recommend_guarantee{display: flex; gap: 0 50px; margin-top: 5%;}
.recommend_guarantee_item{
    background-color: #fcf7fd;
    text-align: center;
    flex: 1;
    padding: 3% 4px;
    font-family: var(--font-sans);
}
.recommend_guarantee_icon{width: 35%; margin: 3% auto;}
.recommend_guarantee_ttl{font-size: var(--font-22);}
.recommend_guarantee_text{font-weight: 400; font-size: var(--font-18);}


/* recommend_plus */
.recommend_plus{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.recommend_plus{margin-top: 5%;}
.recommend_plus_item{
    flex: 20%; text-align: center;
    background: #edeffc;
    padding: 3% 1% 2%;
    font-family: var(--font-sans);
}
.recommend_plus_icon{width: 80%; margin: 10px auto 0;}
.recommend_plus_item:last-child{
    line-height: 1.3;
    padding-top: 1.5%;
}
.recommend_plus_ttl{font-size: var(--font-20);}
.plan_link{text-align: center;}
.plan_link_con{display: flex; gap: 0 20px; justify-content: center; margin-top: 3%;}

/* 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; }
.number_under{font-family: var(--font-sans); font-weight: 400;}



/* footer */
.footer_attend{background-color: #f7f7f7;}
.footer_attend .wrapper{padding: 5% 0;}
.footer_attend h4{margin-bottom: 3px;}
.footer_attend .attend p{ line-height: 1.6;}
.footer_attend .attend:first-child{margin-top: 0;}

.lp_footer{
    width: 95%;
    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: var(--font-sans);
    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: var(--font-sans);
    font-size: var(--font-14);
    font-weight: 400;
    margin-top: 5%;
}


/* タブレット用 */
@media screen and (max-width: 1024px) {
    .tbc_message .fnt_red{font-size: var(--font-36);}

    .yoyaku_btn p, .about .ttl,.step .ttl,.step .ttl,.recommend .ttl, .recommend_item_ttl span{
        font-size: var(--font-30);
    }

    .about_merit h3,.staff_comment_ttl, .cycle .ttl, .plan_link .ttl{
        font-size: var(--font-24);
    }

    .step_desc_text_ttl, .recommend_guarantee_ttl{
        font-size: var(--font-20);
    }

    .about_desc, .staff_comment_text, .step_item p,.advice_text,.recommend_item_ttl,.recommend_plus_ttl{
        font-size: var(--font-18);
    }

    .merit_item_ttl{
        font-size: var(--font-14);
    }

    .vio_parts_item p, .cycle_con_desc p,.recommend_guarantee_text, .recommend_text, .recommend_text .fnt_purple {
        font-size: 1rem;
    }

    .merit_item_num{width: 25%;}
    .step_desc_text_sub{font-size: 1rem; margin-top: 5px;}
    .cycle_con{align-items: center;}
    .cycle_con_desc h3{font-size: var(--font-22); margin-bottom: 0;}
    .tbc_message{font-size: var(--font-28); line-height: 1.3;}
    .recommend_point_item{width: 85%;}
    .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; margin-top: 20px;}
    .flattery_area{
        background-color: rgba(252, 247, 253, .8);
        height: 60px;
        position: fixed; width:100%;  z-index: 6; bottom: 0;
        display: none;
    }
    .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%);
    }
    .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: 6% auto 8%;}
    .kv_attend{width: 95%;}

    .about_desc br{display: none;}
    .about .ttl, .step .ttl, .step .ttl, .recommend .ttl{font-size: var(--font-24);}
    .vio_parts{flex-direction: column; gap: 10px; padding: 5% 2%; margin-bottom: 10%;}
    .vio_parts1{justify-content: center; gap: 0 15px;}
    .vio_parts_item{width: 30%; flex: none;}
    .vio_parts_item p{font-size: var(--font-14);}

    .about_merit h3{font-size: var(--font-18);}
    .about_merit h3::after{ border-top: 15px solid var(--fnt-purple);}
    .merit_list{flex-direction: column; gap: 50px; margin-top: 15%;}
    .merit_item_ttl {  font-size: var(--font-20);}
    .merit_item_num{width: 15%; max-width: 70px; margin: -10% auto 3%;}
    .merit_item_img{width: 80%; margin: 20px auto 10px;}
    .merit_item{padding-bottom: 5%;}
    .merit_item_text{font-size: 1rem;}

    .plan{padding: 9% 0;}
    .plan .wrapper{padding: 7% 3%}
    .plan_sub_ttl{width: 90%;}
    .sub_ttl_ashirai{width: 50px;}
    .ttl_sub{font-size: var(--font-14); margin: 10px 0;}
    .salon_staff{font-size: var(--font-18);}
    .plan .attend{margin: 20px 0;}

    .step_desc{flex-direction: column; width: 100%; margin: 10% auto 0;}
    .step_desc_img{width: 70%; margin: 0 auto;}
    .step_desc_text{width: 100%;}
    .step_desc_text_ttl{font-size: 17px; margin-top: 3%;}
    .step_desc_text_sub{font-size: var(--font-14);}
    .step_list{ gap: 20px; flex-wrap: wrap; margin-top: 6%;}
    .step_item{flex: 45%;}
    .step_item_num,.step_desc_num{width: 70px;}
    .step_another{margin-top: 7%;}
    .staff_comment_ttl{font-size: var(--font-18); text-align: center;}
    .staff_comment_text{font-size: 1rem;}
    .staff_comment_inner{gap: 0 10px;}
    .staff_comment_ttl.pc-only{display: block;}

    .cycle .ttl, .plan_link .ttl {font-size: var(--font-20); line-height: 1.4;}
    .cycle .ttl:before, .cycle .ttl::after,.plan_link .ttl::before,.plan_link .ttl::after{height: 1px; width: 30px;}
    .cycle .ttl::before,.plan_link .ttl::before{left: -10%;}
    .cycle .ttl::after,.plan_link .ttl::after{right: -10%;}
    .cycle_con{flex-direction: column;  margin-top: 4%; padding: 4%;}
    .cycle_con_desc,.cycle_con_img{width: 100%; margin-top: 0;}
    .cycle_con_desc{ margin-bottom: 4%;}
    .cycle_con_desc h3{text-align: center; font-size: var(--font-20); margin-bottom: 5px;}
    .cycle_con_desc p{font-size: 15px;}
    .staff_message{width: 90%; margin-top: 1%;}


    .advice{gap: 0 20px;}
    .advice_desc{width: 95%; margin: 4% auto 9%;}

    .recommend_item{padding: 7% 3%;}
    .recommend_point_item{width: 100%; gap: 0 5px;}
    .recommend_list{gap: 30px;}
    .recommend_text{margin-top: 10px;}
    .recommend_text span{font-size: var(--font-18);}
    .recommend_care_img{width: 95%;}
    .recommend_guarantee{gap: 0 10px;}
    .recommend_guarantee_ttl{font-size: 1rem;}
    .recommend_guarantee_icon{width: 50%; margin: 5% auto;}
    .recommend_guarantee_text{font-size: var(--font-14); line-height: 1.4;}
    .recommend_plus{gap: 10px 5px;}
    .recommend_plus_ttl{font-size:var(--font-14); line-height: 1.3;}
    .recommend_plus_item{padding: 3% 2px;}
    .recommend_plus_icon{margin-top: 5px;}

    .map_comment{ top: -25px; width: 65%;}
    .map_view{margin: 10% 0 0; padding-bottom: 0;}
    .map_con{width: 100%;}

    .offer_con{width: 100%;}
    .ttl_area p{font-size: var(--font-18);};
    .offer_con{padding: 0; width: 100%;}
    .offer_wrapper .attend{margin-top: 3%;}

    .number_under{font-size: var(--font-14);}
    .telbox_message{font-size: var(--font-18);}
    .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;}
    .tel_area{padding: 3%; 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);
    }

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

}


@media screen and (max-width: 480px) {
    .about_desc br{display: block;}
    .merit_list{gap: 30px;}
    .merit_item_ttl { font-size: var(--font-18);}
    .merit_item_text{font-size: var(--font-14);}
    .plan .ttl{width: 70%;}

    .about .ttl,.step .ttl,.step .ttl,.recommend .ttl{
        font-size: var(--font-24); line-height: 1.4;
    }
    .about_desc{font-size: 1rem;}
    .staff_comment_ttl.pc-only{display: none;}
    .staff_comment_img{width: 35%;}

    .step_list{flex-direction: column; width: 80%; margin: 10% auto 0; gap: 30px;}
    .step_ttl{font-size: 1rem;}
    .staff_comment_ttl{font-size: var(--font-18); }
    .staff_comment_text{font-size: var(--font-14);}
    .step_desc_img{width: 80%; }
    .step_item_num,.step_desc_num{width: 50px;}

    .cycle .ttl:before, .cycle .ttl::after,.plan_link .ttl::before,.plan_link .ttl::after{width: 40px;}
    .cycle .ttl::before,.plan_link .ttl::before{left: -45%;}
    .cycle .ttl::after,.plan_link .ttl::after{right: -20%;}

    .recommend_item_ttl{margin-bottom: -5%;}
    .recommend_item_ttl span{font-size: var(--font-24);}
    .advice_text, .recommend_item_ttl, .recommend_plus_ttl {font-size: 15px; line-height: 1.5;}
    .recommend_care{padding: 7% 0 0;}
    .recommend_plus_item:last-child{padding-top: 3%;}
    .recommend_plus_ttl{font-size: 12px; line-height: 1.2;}
    .tbc_message{font-size: var(--font-24); line-height: 1.2; padding: 5% 0; margin-bottom: 0;}
    .tbc_message .fnt_red{font-size: var(--font-30);}
    .sp-only{display: block;}
    .attend{font-size: 9px; }
    .footer_attend .attend{font-size: 10px;}
    .plan_link_con{flex-direction: column; gap: 10px;}


}