@charset "UTF-8";
@media screen and (max-width: 768px) {
/*common=========================*/
.pc-none{display: block;}
.sp-none{display: none;}
.anc{ margin-top: -60px; padding-top: 60px;}
a[href^="tel:"] {pointer-events: inherit; cursor: pointer;}
.movie video {max-width: inherit;}	
/*main
=========================*/
.orangefont {color: var(--color-orange_font); font-weight: 500; font-weight: 500; font-style: normal; padding-bottom: 2px; font-size: 13px;} 
.asterisk { font-size: 0.65em; vertical-align: top;}
.attend, .copyright p{
  font-size: 12px;
  /* transform: scale(0.9); */
  line-height: 1.1rem;
  width: 100%;
  text-align: left;
  transform-origin: left;
  font-weight: 400;
}
.copyright p{font-size: 10px;}
.attend p{ font-size: 11px!important; }
.salonguide_table .attend p{font-size: 11px; margin: 0.5% 0;}
.salonguide-single .attend {text-align: right; padding: 1% 0.5%; margin-bottom: -8%;}
.salonguide_area{margin-top: 6%;}

/* =========================================================
		header
========================================================= */
.header {position: fixed; z-index: 9999;top: 0; left: 0; background: #f6f6f6; width: 100%; min-height: 60px;}
.header .logo {margin: auto; position: absolute; left: 0;  right: 0;  width: 160px; height: 36px;}
.header .menu {position: absolute;  bottom: 20px; right: 15px; width: 25px; height: 20px;}
.header.mini { height: calc((100vh - 190vw) / 2);}
.header.mini .menu, .header.mini .logo { display: none;}
.header.logo_none .logo { display: none;}
.menubtn {height: 100%; width: 100%;}
.menubtn span {
  width: 100%;
  display: block;
  border-top: solid 2px #111;
  position: absolute;
  top: 40%;
  transition: all 0.3s;
  top: 0;
  opacity: 0;
}
.menubtn::before, .menubtn::after {
  width: 100%;
  display: block;
  content: " ";
  border-top: solid 2px #111;
  position: absolute;
  transition: all 0.3s;
}
.menubtn::before {top: 50%; transform: rotate(45deg);}
.menubtn::after {bottom: 42%; transform: rotate(-45deg);}
.menubtn.active span {top: 44%; opacity: 1;}
.menubtn.active::before {top: 0; transform: rotate(0deg);}
.menubtn.active::after {bottom: 0; transform: rotate(0deg);}
.menu_list {
  width: 100%; height: 100vh;
  transition: all 0.3s;
  display: none; left: 0;
  position: fixed;
  z-index: 0;
  top: 60px;
  background: rgba(0, 0, 0, 0.85);
}
.menu_list ul { display: flex; flex-wrap: wrap; align-items: center;  align-content: center; width: 80%; margin: 5vh auto 0;}
.menu_list li { width: 100%; color: #fff; font-size: 16px; font-weight: normal;}
.menu_list li a { border-bottom: dashed 1px #666; display: block; margin-top: 1.3em; padding-bottom: 1.3em; position: relative; font-size: 20px;}
.menu_list li a::after {
  content: " ";
  width: 0.5em;
  height: 0.5em;
  border: 2px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(45deg);
  position: absolute;
  right: 0.2em;
  top: 0.25em;
  transition: all 0.3s;
}
.footer2 { 
  position: fixed; width: 100%;
  height: calc((100vh - 190vw) / 2);
  bottom: 0; left: 0;
  background: #efefef; z-index: 9999;
}




/*article========================*/
.wrapper{margin: 0 auto; width: 100%; max-width: inherit;}
.main { background: #111; color: #fff;}
.link_btn { width: 100%; text-align: center; margin: 5% 0 6%;}
.link_btn a, .link_btn_other a {
  width: 84%;
  font-size: 5vw;
  padding: 5% 0;
}
.link_btn a::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40px;
  height: 100%;
  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;
}

.link_btn a::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 8px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  margin: auto;
}


.link_btn a span, .link_btn_other a span {vertical-align: middle;}
.link_btn .yoyaku_info, .link_btn_other .yoyaku_info { margin-top: 3.5%; text-align: center; color: #bb9954; font-size: 0.875rem;}
/* =========================================================
		offer
========================================================= */
.offer_main {margin-top: 60px;}
.offer_main_banner{padding: 1.5% 0 1.5%;}
.offer_main_banner img{width: 70%; vertical-align: baseline;}
.offer_campaign{padding: 3% 0 3%;}
.offer_campaign_main{text-align: center;}
.offer_campaign_inner {max-width: inherit; width: 94%; margin: 0 auto; padding: 5% 0;}
.offer_campaign_parts .attend, .offer_campaign .attend{margin: 0 4%; width: 90%;}
.offer_campaign_main .price{ width: 93%; margin: 4% auto 0;}
.offer_hed {padding:0 0 1.5%;letter-spacing: 0; font-size: 4.8vw; font-weight: 600;}
.offer_campaign_inner h3, .offer_campaign_parts h3 {margin: 0 0 0;}
.offer_campaign_inner h3{font-size:7vw; padding-bottom: 4%;}
.offer_campaign_parts .price{ width: 97%;margin: 10px auto 0;}
.offer_course_area{margin:1% auto 5%;}
.offer_course_ttl{border: solid 2px #f1ddc5; padding: 1.3% 0 1%; width: 44%;font-size: 3.7vw;}
.offer_course_ttl p{line-height: 1.2;}
.or{margin: 0 1%; font-size: 4.3vw;}

/* =========================================================
		monitor
========================================================= */
.body_ttl{padding: 5% 0;}

.body_ttl .mini{font-size: 0.7em;}

.voice{background: #000; color: #fff;}
.voice_ttl{ padding: 5% 0 4%; line-height: 1.3; letter-spacing: 0;}
.voice_ttl h2{font-size:7.4vw;}	
.voice_ttl_sub{font-size: 0.8em;}
.voice_list{margin: 0 0 0; padding: 2%;;}
.voice_list .inner{padding: 4% 0% 5%;}
.voice_name {width: 100%; margin: 1% auto 0;}
.voice_change_img{margin: 5px auto 5%; width: 100%;}
.voice_chart_img{margin: 0 auto 0; width: 94%;}


.voice_comment,.voice_point{
  padding: 3% 3% 0;
  width: 94%;
  margin: 10% auto 0;
  position: relative;
  line-height: 1.6rem;
  }
.voice_comment::before, .voice_point::before{width: 30%;}	
.voice_attend{padding: 3% 0 12%; width: 94%; margin: 0 auto;}
.voice_img{width: 24%; margin-right: 0; margin-top: 7%;}
.voice_text{width: 73%;
        font-size: 3vw;
        line-height: 1.6;
        padding: 5% 0 3%;
        letter-spacing: 0;}
.voice_point .voice_text{width: 100%; padding-top: 2%;}
.voice_point{margin: 10% auto 4%; padding: 3% 3% 1%;}
.voice_point h3{margin-top: 5.5%; font-size: 4.3vw;}

/* 無理なく引き締め */
.body_course_ttl{line-height: 1.4;}
.body_course_ttl h2{font-size: 6vw;}	
.body_list_ttl{width: 94%; margin: 1% auto 0;}
.body_list_box{display: block; width: 92%; margin: 0 auto;}
.body_course_list{padding-bottom: 0%; margin-bottom: 3%; width: 100%; display: flex; align-items: center;}
.body_course_list img{width: 35%; margin-right: 4%;}	
	
.body_course_no{width: 60%;
        padding-top: 0;
        text-align: left;
        line-height: 1.4;
        font-size: 4vw;}
.body_course_list span{font-size: 1.15em; padding-left: 2px;}
.body_course_desc{width: 92%; margin: 5% auto 10%; line-height:1.8; font-size: 3.65vw}



/* アプローチ */
.approach{margin-bottom: 8%;}
.aproach_list{padding-bottom: 6%; width: 92%; margin: 0 auto;}
.approach_ttl{line-height: 1.3;}
.approach_ttl h2{font-size: 6vw;}	
.approach_message{text-align: center;line-height: 1.6rem; padding-top: 5%;}
.approach_message p{margin-bottom: 5px;}
.approach_message h3{font-size: 5.7vw;}
.approach_message .ex{ width: 50%; margin: -1% auto -7%;}
.approach_list_ttl{position: relative; margin-top: 8%;}
.approach_list_ttl p{padding: 4% 0 4% 38%; line-height: 1.3; font-size: 5vw;}
.approach_list_ttl::before,.second_ttl:before{
  content: "";
  position: absolute;
  width: 140px;
  height: 110px;
  display: block;
	bottom: 0;
  z-index: 1;
}
.approach_list_ttl::before{left: 1%;}

.approach_staff1{width: 25%;}
.second_ttl p{padding: 4% 0 4% 17%; line-height: 1.3; }
.second_ttl:before{left: 63%;}
.approach_list_arrow{width: 60%; margin: 4% auto 6%;}

.approach_box{display: block; width: 78%; margin: 0 auto;}
.approach_course{text-align: center; line-height: 1.5rem; width: 100%}
.approach_course .course_ttl{font-size: 4.3vw; margin:5% auto 0;}
.approach_course h3{font-size: 7vw; line-height: 1.45;}
.approach_course_img{width: 100%; margin-right: 0%;}
.approach_desc{text-align: center; font-size: 4vw; margin-top:6%;}
.approach_attend{margin-left: 6%; margin-top: 7%; font-size: 11px;}


/* 体験コースの流れ */
.taiken{padding-bottom: 10%;}
.taiken_ttl{position: relative; padding: 3% 0 4%; margin-bottom: 10%;}
.taiken_ttl h2{width: 63%; margin: 0 auto;}
.taiken ol{width: 92%; margin: 0 auto;}
	
	
.taiken_list_course{display: flex; justify-content: center;}
.border{ margin: auto; width: 30px; height: 30px; background : #f1e2ca;}

.taiken_ttl::after{
    border-top: 25px solid #e8923f;
    border-right: 35px solid transparent;
    border-left: 35px solid transparent;
}
.taiken_list_ttl{font-size: 5.1vw;padding: 3.5% 0 3.5%;}
.taiken_content{display: flex;padding: 4% 3% 4%;}
.taiken_content img{width: 37%; margin-right: 3%;}
.taiken_content p{font-size: 3.4vw; line-height: 1.6; padding-top: 0; width: 100%;} 
.taiken_checkarea{ padding: 6% 4% 4% 6%; background: #f7eedf; margin-top: 15px}
.taiken_checklist{display: flex; align-items: flex-start; margin-bottom: 10px;}
.taiken_checklist img{width: 10%; margin-right: 3%;}
.taiken_checklist p{font-size: 3.3vw; width: 87%;}
.double_arrow{width: 11%; margin: 0 auto;}
.taiken_message{line-height: 1.6; font-size: 4vw; margin:2% 0 5%;}
.taiken .attend{width: 98%; padding-left: 4%; padding-bottom: 5%;}
.course_desc{width: 55%;}
.course_desc_ttl{font-size:4.2vw; line-height: 1.2; padding-bottom: 12px;}
.course_img{width: 84%; margin: 10px auto;}
.course_desc p{font-size: 3.1vw;
        padding-bottom: 15px;
        line-height: 1.5;
        width: 90%;
        margin: 0 auto;}

.taiken_desc{width: 60%;}
/* オーダーメイドプラン */
.ordermade{padding: 8% 0 10%;}
.ordermade_content{border: solid 3px var(--color-red); width: 92%; margin: 0 auto;}
.ordermade_ttl{padding: 2.5% 0 3.5%;}
.ordermade_ttl h2{font-size: 5.1vw;}	
.ordermade_container{background: #fff; padding: 4% 0 7%;}
.ordermade_subttl{color: var(--color-red); text-align: center; position: relative; font-weight: 600;}
.ordermade_desc{font-size: 4vw;}
.otoku_ttl{font-size: var(--font-20);margin-bottom: 2%;}
.otoku_ttl span{
  background: radial-gradient(circle at center, var(--color-red) 20%, transparent 20%); 
  background-position: top right; 
  background-repeat: repeat-x; 
  background-size: 1em 0.3em; 
  padding-top: 0.3rem; 
}
.otoku_area{background: #f9e4e4; padding:5% 0; margin: 0 3%;color: var(--color-red); position: relative;}
.otoku_area p{font-size:12px; text-align: center; line-height: 1.4rem;}
.otoku_area .bold{font-size: 1rem; font-weight: bold;}
.otoku_area::before{ position: absolute; inset: -2px -2px -2px -2px; border: 1px solid var(--color-red); content: '';}
.otoku_attend{margin-top: 3%; font-size: var(--font-12); text-align: center;   font-family:'NotoReg';}
.arrow_ex{width: 60%;margin: 3% auto 6%;}
.ordermade_list{margin: 0 auto; width:90%; padding:5% 4% 5%; line-height: 1.5;}
.ordermade_name{font-size: 3.8vw; padding: 10px 0 0 0; line-height: 1.5; text-align: center;}
.ordermade_name span{font-weight: 300; font-size: 0.85em;}
.ordermade_list span{font-weight: 300; font-style: normal; font-size: 0.85em;}
.kapusel_img{width: 50%; margin: 3% auto 0;}
.kigou{width: 11%; margin: -4% auto;}
.kigou2{margin: 3% auto 2%;}
.ordermade_price{color: var(--color-red);text-align: center;}
.ordermade_price p{font-weight: 500;}
.ordermade_price .p_option{font-size: 3.5vw; margin: 10px auto;}
.ordermade_price .p_option2{font-size: 4vw;}
.ordermade_price .en_ttl{font-size:10vw;}

.ordermade_price h3{font-size: 6vw;}

.ordermade_attend{font-size: 3vw;}
.ordermade .attend{margin: 5% auto 0; width: 90%;}

.ordermade_product{display: flex; justify-content: space-between;}
.ordermade_product dl{width: 49%; text-align: center; padding-top: 1%;}
.ordermade_product dl dt{width:83%; margin: 0 auto 10px;}
.ordermade_product dl dd{font-size: 3.8vw; line-height: 1.3;}
/* スタッフ吹き出し */
.staff_message{display: flex; margin: -5px 0 0;}
.staff_message .staff{width: 90%; padding-bottom: 0;}
.staff_message .comment{width: 60%;}
.staff_message::after{position: absolute;
    content: "";
    width: 100%;
    height: 120px;
    background: linear-gradient(transparent 30%, #ecd0a6 0%);
    bottom: 0;
    z-index: -1;
    opacity: 0.5;
}



/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger{opacity: 0;}

/*package========================*/
.package_main { margin: 3% auto 1%;}
.faq h2 {font-size: 8vw;}
.faq .subtitle {font-size:4vw; margin-bottom: 6%;}

/* よくある質問 */
.faq { margin: 6% auto 8%; width: 92%;}
.faq_main { margin: 5% 0 10%;}
.faq_details {border: solid 2px #939393; margin: 15px auto 0; width: 100%;}
.faq_details .eng {font-size: 6.2vw; padding-right: 8px;}
.faq_details dt {
    padding: 15px 10px;
    font-size: 4vw;}
.faq_details dt::after {right: 3%;}
.faq_details dt.active::after {transform: rotate(-45deg); top: 1.4em;}
.faq_details dd {padding: 2.5% 3%; display: none;}
.faq_details dd .answer{display: flex;}
.faq_details dd .eng {width: 8%; font-size: 6.2vw;}
.faq_details dd p {font-size: 3.6vw; line-height: 1.6; letter-spacing: normal; font-weight: 400;}
.faq_details picture { margin: 4% auto; width: 90%;}

/* 店舗情報 */
.salon_area{background: #eee; padding: 13% 0 8%;}
.salon_logo{width: 52%; margin: 0 auto;}
.salon_area .bold{
	margin-top: 1.5%; 
	font-size: 4vw;}
.salonguide_area {display: block; width: 90%; margin: 8% auto 0;}
.salon_photo_box{width: 100%;}
.salon_text_box{width: 100%;}







.salonguide_photo { display: flex;}
.salonguide_photo picture { width: 100%; height: 100%; padding: 0;}
.salonguide_photo picture img { width: inherit; object-position: top center; object-fit: cover;}
.salonguide_text {padding: 6% 0 4%;}
.salonguide_text2 {padding: 6% 0 4%;}

.salonguide_text h3{margin-bottom: 10px; font-size:5vw;}
.salonguide_text h3 span{font-size: 0.65em;}
.salonguide_table { font-size: 0.875rem;}
.salonguide_table dl { padding: 3% 0;}
.salonguide_table dt {font-size: 3.2vw; }
.salonguide_table dd{font-size: 3.5vw; line-height: 1.5;}
.salonguide_table .attend {margin: 1% 0 0 -4%;}
.link_btn_salon {margin: 8% auto 5%;}
.link_btn_salon a {
  padding: 2.5% 0 2.5% 3%;
  font-size: 4vw;
	width: 80%;
}


/* 電話予約 */
.tel_number {padding: 14px 0 12px; border: none; margin: 0 auto; width: 100%; font-size: 3.4vw;}
.tel_net{background: #aaa; color: #fff; padding: 0.5em; font-size: 0.8125rem;; text-align: center;}
.tel_number .number {font-size: 10vw;
        margin: 0;
        line-height: 1.2;}
.tel_number p{font-size: 3.2vw;}
.tel_number .tel_message{font-size: 3.7vw;}
/* =========================================================
		footer
========================================================= */
footer{padding-top: 0;}
.footer_under { padding-bottom: 10%;background: #fff;}
.footer_guide { font-size: 11px;  padding: 7% 0 6%; width: 90%; margin: 0 auto; }
.footer_guide h4 {font-size:12px; text-align: left;}
.footer_link {padding: 8% 0 0; width:86%; margin: 0 auto; display: block;}
.footer_link li{margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #ccc;}
.footer_link li a { font-size:12px; padding-left: 15px;}
.footer_link li a:after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 1px #e87404;
    border-right: solid 1px #e87404;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 75%;
    left: 0;
    margin-top: -7px;
}
.copyright p{color: #ccc; text-align: center; padding-top: 5px;}
.footer .attend{margin: 10px 0 20px;}
.tel_number span{font-size: 0.9em;}
}