@charset "UTF-8";
/*common=========================*/
@font-face {
  font-family:'NotoReg'; font-weight: 400; font-style: normal;
  src: url('../font/NotoSansJP-Light.otf') format('opentype');
}
@font-face {
  font-family:'NotoMid'; font-weight: 500; font-style: normal;
  src: url('../font/NotoSansJP-Medium-min.otf') format('opentype');
}
@font-face {
  font-family:'NotoBd'; font-weight: 700; font-style: normal;
  src: url('../font/NotoSerifJP-Bold-min.otf') format('opentype');
}
@font-face {
  font-family:'NunitoBd'; font-weight: 700; font-style: normal;
  src: url('../font/NunitoSans-Bold.ttf') format('truetype');
}
html {text-size-adjust: none; font-size: clamp(0.9rem, 0.95rem + 0.4vw, 1rem); font-family:'NotoReg', sans-serif;}
* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;}
body {  width: 100%; font-size: 1rem; line-height: 1.4; font-family: 'NotoMid',sans-serif; background: #fff;}
li {list-style-type: none;}
article img, article picture, article video { display: block; width: 100%; height: 100%; line-height: 0; margin: 0; padding: 0;}
a { color: inherit; text-decoration: none;  font-family: 'NotoBd', sans-serif;}
h2, h3, h4 { font-family: 'NotoBd',sans-serif;}
.eng, h2 .eng, h3 .eng, h2.eng, h3.eng {font-family: 'NotoBd',sans-serif;}
.resize_mini{font-size: 0.865em;}

.anc{
  margin-top: -70px;
  padding-top: 60px;
}
.pc-none{display: none;}

/*main
=========================*/
.movie { 
  line-height: 0; width: 100%; 
  /* height: 56.25vw; */
}
.goldfont {color: #bb9954;} 
.bluefont {color: #004884}
.redfont {color: #b5091f}
.asterisk { font-size: 0.65em; vertical-align: top;}
.attend, .copyright p{
  font-size: 11px!important;
  transform: scale(0.9);
  line-height: 1.3;
  width: 110%;
  text-align: left;
  transform-origin: left;
}
.copyright p{transform: scale(0.9); font-size: 12px!important; width: 100%;transform-origin: center; }
.attend p, .vitamin-b{margin: 0.2em 0; font-size: 11px!important;  }
.salonguide_table .attend p{font-size: 11px; margin: 0.5% 0;}
.salonguide-yokohama .attend {text-align: right; padding: 1% 0.5%; margin-bottom: -8%;}
.salonguide_table .attend {margin: 1% 0 0 -4%;}
.salonguide-sendai img,.salonguide-yokohama img{object-fit: cover;height: 56.25vw;}
.sendai_photo,.yokohama_photo{margin-bottom: 10px;}
.salonguide-sendai,.salonguide-yokohama{background-color: #111; }
.sendai,.yokohama{padding-top: 10%; margin-top: 3px;}


/*header========================*/
.header {position: fixed; z-index: 9999;top: 0; left: 0; background: #f6f6f6; width: 100%; min-height: 60px;
   /* height: 16vw;  */
}
.header .logo {margin: auto; position: absolute;  bottom: 10px; left: 0;  right: 0;  width: 160px; height: 42px;}
.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: 6.5vh;
  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 2px #666;
  display: block;
  margin-top: 1.5em;
  padding-bottom: 1.5em;
  position: relative;
}
.menu_list li a::after {
  content: " ";
  width: 0.6em;
  height: 0.6em;
  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========================*/
article { 
  position: relative; 
  z-index: 10;
  overflow: hidden;
}
.main { background: #111; color: #fff;}
.link_btn { width: 100%; text-align: center; margin: 4% 0;}
.link_btn a, .link_btn_other a {
  width: 72%;  
  max-width: 380px;
  display: block;  position:  relative; 
  color: #fff;
  font-size: 1.165rem; 
  margin: 0 auto; padding: 4%;
  line-height: 1; letter-spacing: 0.08em;
  text-align: center;
  background: #004884;
  font-family: 'NotoBd', sans-serif; 
  position: relative;
  overflow: hidden;
  animation: btnup 3s ease-in-out infinite;
}
.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;
}
@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);}
}

.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: 68px;}
.offer_ex {position: absolute; top: -5px; left: -10px; width: 29%; max-width: 150px; height: auto;}
.offer_campaign{ background-image: linear-gradient(180deg, rgba(229, 245, 245, 1), rgba(252, 252, 241, 1));}
.offer_campaign_main, .offer_campaign_mainsub{text-align: center;}
.offer_campaign_inner { width: 100%; margin: 0 auto ; padding: 10% 0 ; background: rgba(255,255,255,0.3);}
/* .offer_main_innner{ border: solid 3px #b6d2ea;} */
.offer_campaign_inner .attend.redfont{ padding-left: 3%;}
.offer_campaign_parts .attend, .offer_campaign .attend{margin: 0 4%; width: 102%;}
.offer_campaign_mainsub .attend{margin: 0 7.5%; padding-left: 7.5%;}
.offer_campaign_parts{
  position: relative;
  border: 5px solid #1e5583;
  border-image: linear-gradient(to right,#004884 0%, #f0f56e 100%);
  border-image-slice: 1; 
}
.offer_campaign_main .price{ width: 95%; margin: 3% auto 0; text-align: left;}
.offer_hed {
  font-size: 0.875rem;
  letter-spacing: 2px;
  border: solid 1px #ccc; border-radius: 8px;
  display: inline-block;
  padding: 0.1em .8em 0;
  color: #004884;
  background: #fff;
  font-family:'NunitoMid', sans-serif; font-weight: 400; font-style: normal;
}
.offer_campaign_inner h2, .offer_campaign_parts h3 { color: #004884; margin: 1% 0;}
.offer_campaign_inner h2{ margin: 1% 0 2%;}
/* .offer_campaign_parts {padding: 3% 0 0} */
.offer_campaign_parts h3 { margin: 1% 0; font-size: 1.25rem; line-height: 1.3;}

/* add 2404 */
/* .offer_banner_img{margin-top: 5px;} */
.offer_banner_cam{padding-top: 3%;background-color: #fcfcf1;}
.offer_banner_cam p{
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  display: flex;
	justify-content: center;
  align-items: center;
}
.offer_banner_cam.bluefont{ color: #004884; font-size: 26px; margin-left: 5px;}
.offer_banner_cam p::before,.offer_banner_cam p::after {content: ''; width: 3px; height: 35px; background-color: #004884;}
.offer_banner_cam p::before { margin-right: 30px; transform: rotate(-35deg)}
.offer_banner_cam p::after { margin-left: 30px; transform: rotate(35deg)}
.dot-text{ position: relative;}
.dot-text::before{
  position: absolute;
  top: -7px;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  padding-top: 10px;
  background: -webkit-radial-gradient(circle 5px,#b5091f 50%,transparent 50%);
  background: radial-gradient(circle 5px,#b5091f 50%,transparent 50%);
  background: -moz-radial-gradient(circle 5px,#b5091f 50%,transparent 50%);
}

/*追加　20240119========================*/
.price{text-align: left; margin: 5% 0;}
.price h4{color: #004884; padding-bottom:3%; font-size: 1.375em;}
.offer_attend{font-size: 11px!important; margin-top: 5%;font-family:'NotoReg',sans-serif;}
.offer_nomal_cource{  border: 3px solid #1e5583;
  border-image: linear-gradient(to right,#1e5583 0%, #5284ae 100%);
  border-image-slice: 1; background: #fff;
  padding:6% 4%;
}
.offer_rich_cource{  border: 3px solid #1e5583;
  border-image: linear-gradient(to right,#b59b2c 0%, #dfce8a 100%);
  border-image-slice: 1; background: #fff; padding:5% 4%;}
.offer_rich_cource h4{text-indent: -0.5em; color: #715d07;}
.offer_rich_cource .offer_sub_ttl{
  background-color: #f3ebc7;
  border-radius: 5px;
  padding: 2px 3%;
  color: #3f3509;
  display: inline-block;
  margin-bottom: 3px;
  font-size: 0.875rem;
}
.offer_top .offer_campaign_main .price.offer_nomal_cource{margin-top: -15%;}
.offer_campaign_inner h2.offer_main_ttl{margin-top: -15px; width: 97%;}
.offer_campaign_inner h2.offer_sub_ttl{width: 90%; margin: 10px auto 15px;}

/* 肌分析 */
.choice{background: url(../images/addition/choice_bg.png) center/cover no-repeat; padding: 8% 0 10%;}
.choice_container{display: flex; justify-content: center; margin: 5% 0 3%;}
.choice .attend{padding-left: 6%;}
.item_hada{border: solid 2px #c5ddf1; padding:7% 0; width: 27%; text-align: center; background-color: #fff; color: #004884;}
.item{width: 55%;}
.item_nomal{border: solid 2px #004884;padding: 1% 8% 4%; margin-bottom: 10px; color: #004884;background-color: #fff;}
.item span{font-size: 12px;}
.item_rich{border: solid 2px #715d07;padding: 1% 8% 4%;color: #715d07;background-color: #fff; }
.item_plus{width: 7%; height: 7%; padding-top: 13%; margin: 0 6px;}

.item_ttl{
  position: relative;
  font-size: 1.125rem;
  line-height: 1.3;
}
.item_ttl .resize_mini{font-size: 0.875rem;}
.item_ttl::after{
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #757575;
  border-right: solid 2px #757575;
  position: absolute;
  bottom: -20px;
  right: 43%;  
  transform: rotate(135deg);
}

.item .item_ttl::after{
  bottom: 15px;
  right: -3px;
}
.analysis_wrapper{
  padding: 0 4% 10%;
}

.analysis_subttl{
  background: url(../images/addition/analysis_bg.png)center/cover no-repeat;
  padding: 3% 0 8%;
  color: #fff;
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.analysis_ttl h2{background-color: #dff0ff; color: #004884; text-align: center; padding: 2% 0;}
.analysis_comment{text-align: center; color: #004884; background-color: #f3fafa; display: block; width: 95%; margin: 5% auto; padding: 3% 0;}

.analysis_list{
  border: solid 2px #8bcfd1 ;
  border-radius: 20px;
  padding: 5% 5% 3% ;
  margin-top: 8%;
}
.analysis_desc{font-size: 0.875rem;}
.analysis_list picture{width: 90%; margin: 8% auto;}
.analysis_num{width: 40%; margin: -10% auto 5%;}
.analysis_con{margin-top: 8%;}
.analysis_con_text{font-size: 0.875rem;}
.analysis_ex_img{width: 25%; margin-bottom: 5px; margin-left: -8px;}
.analysis_treatment{width: 90%; margin: 20px auto 15px;}
.analysis_treatment .attend{margin-top: 5%;}


/*===maincommon==============*/
.facialintro h2{font-size: 1.5rem}
@media screen and (max-width: 375px) {.facialintro h2{font-size: 1.35rem}}

/*===step_wrap=======trouble & step==============*/
.trouble_inner{margin:6% auto 0;text-align: center;}
.step_inner {background: #eaf5ff; padding: 3% 0 0; margin: -1% 0 5%;}
.step_wrap h2{ font-size: 1.375rem; letter-spacing: 0.05em; line-height: 1.5;}
.trouble_list{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 3% 0;
}
.trouble_title .bluefont{ background: linear-gradient(transparent 75%, #f6f7ac 50%);}
.trouble_list li {
  width: 42%;
  margin: 1% 1.5%;
  padding: 2%;
  background: #e6edf3;
  color: #004884;
}

.trouble_taiken{
  text-align: center;
  background-color:#eaf5ff ;
  padding-top: 5%;
  color:#004884;
  margin-top: -3%;
}

.trouble_taiken h2{font-size: 1.625rem;}
.trouble_taiken_sub {margin-bottom: 2%; font-size: 1.3rem;}
.trouble_taiken .attend{ text-align: center; color: #555;}
.step_box{
  background: #fff;
  border-bottom: solid 2px #1369b1;
  border-top: solid 2px #1369b1;
  padding: 5% 4%;
  margin: 1.5% 0;
  text-align: left;
}
.step_box:last-child{border-bottom: none;}
.step_box .mini_text{font-size: 0.875em;}
.step_box_title {
  display: flex; 
  align-items: center; justify-content: center;
  text-align: center;
  margin-bottom: 3%;
}
.step_box_title.step_box_2 {
  width: 125%;
  transform: scale(0.9);
  transform-origin: left;
  left: -10%;
  margin-left: -7%;
}
.step_number{
  background: #1369b1; 
  border-radius: 50px; 
  height: 4rem; 
  width: 4rem;
  font-size: 1rem;
  margin-right: -1em;
  opacity: 0;
}
.step_number span{display: block; line-height: 1; color: #fff;}
.step_number .number {font-size: 1.5rem; margin-top: 0.15em; display: block;}
.steptitle{ padding-top: 0.85em; font-size: 0.8em;}
.step_box_title_name {width: 80%;}
.step_box_title_name h2 {
  border-bottom: solid 2px #1369b1;
  margin-bottom: 0.2em;
}
.step_box_point{ display: flex; margin:4% 0 3%; }
.step_box_point p, .step_box .copy, .step_box .point_copy{
  font-size: 0.875rem; 
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.025em;
}
.subcopy{font-size:1rem;}
.step_box_point2 .check_copy{margin-top: 5px;}




.step_box .point_copy{font-family:'NotoBd', sans-serif; margin-bottom: 1.5%;}
.step_box .copy{margin: 1% 0;}
.check_subbox {
  font-size: 0.6875rem;
  text-align: left;
  letter-spacing: 0.025em;
  width: 42%;
  margin: 0 -1%;
  position: relative;
}
.check_subbox{ text-align: center;}
.check_subbox picture{margin: 3% 0;}
.step_box_point picture{width: 40%; margin-right: 6%;}
.step_box_point .check_details {width: 54%; text-align: left;}
.step_box_point2 picture{width: 35%; margin-right: 5%;}
.step_box_point2 .check_details {width: 68%; text-align: left;}
.step_copy { font-family:'NotoBd', sans-serif; font-size: 0.965rem;}
.step_box_point .and{
  color: #fff;
  background-color: #bda438;
    text-align: center;
    line-height: 3;
    border: solid 1px;
    border-radius: 50%;
    width: 100px;
    height: 50px;
}
.step5_box picture{width: 100%; margin: 6% 0;}

@media screen and (max-width: 390px) {
  .step_copy {font-size: 0.8125rem;}
  .step_number .number {font-size: 1.6rem;}
.step_box_point2 picture{width: 40%; margin-right: 5%;}

 }
/*アニメーション*/
.step_number,.trouble_list.bound{opacity: 0;}
.step_number.anm,.trouble_list.anm,.bound.anm{animation: bound .6s ease-in ; opacity: 1;}

@keyframes bound{
  from { transform: translateY(-30px); opacity: 0;} 100% {transform: translateY(0); opacity: 1;}
}
.check_details_bold {
  color: #004884;
  background: #e6edf3;
  text-align: center;
  padding: 0.5em;
  margin: 4% 0 2%;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}
.check_details_icon{
  letter-spacing: 0.1em;
  text-align: left; 
  font-size: 0.75em;
  padding: 0.2em 0.5em 0.1em;
  margin: 2% 0;
  background: #f6f7ac; 
  display: inline-block;
}
.check_details_icon::before{
  display: inline-block;
  content: " ";
  width: 1em;
  height: 0.8em;
  background: url(../images/addition/check.png) no-repeat;
  background-size: 1em;
  background-position: center;
}
.check_mini_box {display: flex; align-items: flex-start; align-items: center; justify-content: center;}
.point_box_or { 
  color: #004884;
  width: 14%;
  text-align: center; line-height: 3.65;
  border: solid 1px; border-radius: 80px;
  width: 4rem; height: 4rem;
}
.step_box_model {
  display: flex; align-items: center;
  margin: 4% 0 0;
  background: linear-gradient(2deg, rgb(205 , 230, 250), rgb(243 , 249, 253)) no-repeat;
  background-size: 80% 80%;
  background-position: center;
}
.step_box_model.step_wd{ background-size: 100% 80%;  margin-top: -8%; background-position: center bottom;}
.step_staff { display: inline-block; margin-left: -10%; width: 80%;}
.step_wd_mens{width: 44%;}
.step_wd_comment{margin: 10% 2% 0 0; width: 52%; display: block; position: relative;}
/*package========================*/
.other_pages .package_offer {  background: #e6edf3; padding: 10% 5% 8%; margin-top: -5%;}
.package_offer h3{font-size: 1.375rem; white-space: nowrap; text-align: center;}
.package_main { margin: 3% auto 1%;}
/* 202306 add */
.other_pages {background: #fefefe; color: #111;}
.other_pages section {padding-top: 4vw;}
.other_pages h2 {font-size: 1.625rem; letter-spacing: 0.05rem;  color: #939393; text-align: center;}
.other_pages .subtitle { text-align: center;}
.other_pages p {font-size: 0.9375rem; letter-spacing: 0.05rem; line-height: 1.4;}
.other_pages .gallery {padding: 2% 0; background: #111;}
.infomation { text-align: center;}
.infomation h2 { width: 70%; margin: 5% auto 8%;}
.infomation .gallery {  background: #ccc; max-height: 200px;}
.infomation_text {padding: 0 2%; margin: 0 0 12%;}
.infomation_text p {font-family: 'NotoMid', sans-serif; color: #444; line-height: 2;}
.infomation_text .bold { font-family: 'NotoBd', sans-serif; margin-bottom: 3.5%;}
.snapshot {margin: 14% 8% 12%;}
.faq { margin: 0 4% 8%;}
.faq_main { margin: 6% 0 10%;}
.faq_details {border: solid 3px #939393; margin: 3% auto 0; width: 100%;}
.faq_details .eng {font-size: 1.2rem; padding-right: 0.4em; vertical-align: top; line-height: 1;}
.faq_details dt { background: #939393; padding: 1em 0.9em; position: relative; display: flex; color: #fff; font-size: 0.875rem;}
.faq_details dt::after {
  content: " ";
  width: 0.6em;
  height: 0.6em;
  border: 2px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(136deg);
  position: absolute;
  right: 0.3em;
  top: 1em;
  transition: all 0.3s;
}
.faq_details dt.active::after {transform: rotate(-45deg); top: 1.4em;}
.faq_details dd {padding: 4%;  display: flex; display: none;}
.faq_details dd .eng {color: #939393;}
.faq_details dd p { font-size: 0.8125rem; line-height: 1.6; letter-spacing: normal;}
.faq_details picture { margin: 4% auto; width: 90%;}
.salonguide {  background: #eee;}
.salonguide_area{margin-top: 6%;}
.salonguide_photo { display: flex; height: 27vw; max-height: 335px; padding: 0 0.5%; background: #111;}
.salonguide_photo picture { width: 100%; height: 100%; padding: 1.5% 0.8%;}
.salonguide_photo picture img { width: inherit; object-position: top center; object-fit: cover;}
.salonguide_text {padding: 8% 6% 6%;}
.sendai_text h3 span{font-size:1rem ;}
.salonguide_subtitle{color: #b8944a; font-family: 'NotoBd', sans-serif; }
.salonguide_text h3{margin-bottom: 0.5%;}
.salonguide_table { font-size: 0.875rem;}
.salonguide_table > * + * { border-top: solid 1px #aaa; border-bottom: solid 1px #aaa;}
.salonguide_table dl {
  padding: 3% 0;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.salonguide_table dt {background: #fff; width: 6em; padding: 0.5em; margin-right: 3%; text-align: center;}
.salonguide_table .attend {margin: 1% 0 0 -4%;}
.link_btn_salon {margin: 8% auto 5%;}
.link_btn_salon a {
  position: relative;
  display: block;
  background: #939393;
  color: #fff;
  text-align: center;
  padding: 2.5% 0;
  font-size: 1rem;
  width: 80%;
  margin: 0 auto;
}
.link_btn_salon a::before {
  content: " "; position: absolute; background: url(../images/main/map.svg) no-repeat;
  width: 1.5em;  height: 1.4em; left: 1em;}
.link_btn_salon .eng { font-weight: 700; font-size: 1.06em;  margin-right: 0.05em;}
.tel_number {
  color: #111; text-align: center; padding: 1em 2em;
  font-size: 0.8125rem;
  border-bottom: solid 1px #444; 
  background: #fff;
}
.tel_net{ background: #aaa; color: #fff; padding: 0.5em;font-size: 0.8125rem;; text-align: center;}
.telguide { background: #fff; display: inline-block; color: #ebebeb; padding: 0.25em 1em; line-height: 1; margin: 0.5em 0 -1.5em;}
.tel_number .number { font-size: 2.15em; margin: 0;  font-family: 'NunitoBd', sans-serif;}
.tel_number span{font-size: 10px;}
.footer_under { padding-bottom: 12%;background: #fff;}
.footer_guide {  font-size: 0.75rem;  padding: 6%;  background: #ebebeb; color: #111; }
.footer_guide h4 {font-size: 0.75rem; font-weight: normal;}
.footer_link {padding: 6%;}
.footer_link li a { font-size: 0.75rem; display: block; color: #004884; border-bottom: solid 1px #666;  padding: 0.8em 0;}
.copyright p{color: #ccc; text-align: center;}
/*swiper========================*/
.swiper-base { width: 100%; height: 25vw; overflow: hidden;}
.swiper-base .swiper-wrapper {transition-timing-function: linear;}
.swiper-base .slider_view { overflow: hidden; }
.swiper-base .slider_view img { transition: all 0.3s;}
.swiper-base .slider_view img:hover {transform: scale(1.2);}
@media screen and (max-width: 393px) {
  .other_pages p{font-size:0.8125rem;}
  .faq_details dt{ font-size: 0.8125rem;}
  .link_btn a, .link_btn_other a {font-size: 0.95rem;}
}
@media screen and (max-width: 320px) {
  .other_pages p {font-size: 0.7rem;}
  .link_btn_salon a{font-size: 0.85rem;}
}
/*新規　20230619========================*/
article{background-color: #fff; color: #555555;}
.introduction{position: relative; text-align: center;}
.introduction-title{ font-family:'NotoMid', sans-serif; letter-spacing: 0.065em; padding: 15% 0; color: #fff; }
.introduction .resize_mini{ display: inline; opacity: 1;}
.course.introduction-title{padding: 6% 0;}
.introduction-title::after{
  content: "";
  background: url(../images/main/background.png) no-repeat;
  background-size: contain;
  position: absolute; z-index: -1;
  left: 0; top: 20px;
  width: 100%; height: 35%;
  display: inline-block;
  padding: 8% ;
  opacity: 0;
}
.introduction-title.introduction-2::after{
  background-position: top center;
  z-index: -1;
  left: -20%;
  top: 10px;
  width: 140%;
  height: 50%;
}

.introduction-title span{display: block; opacity: 0;}
.introduction-text{
  padding: 5% 3% 10%;
  font-size: 0.8125rem;
  line-height: 1.6rem;
  letter-spacing: 0.05rem;
}
.bold{ margin-top: 2%;}
.bold span{ color: #004884; background: linear-gradient(transparent 75%, #d7e9fa 50%);}
/*アニメーション*/
.introduction-title.anm::after,.aesthetic-title.anm::after {
  animation: slideIn .4s ease-out;
  opacity: 1;
}
.introduction-title span.anm,.aesthetic-title span.anm{
  display: block;
  animation: slideIn-late .5s ease-out 0.08s;
  opacity: 1;
}
  
@keyframes slideIn{
  from { transform: translateX(850px); opacity: 0;} 100% {transform: translateX(0); opacity: 1;}
}
@keyframes slideIn-late{
  from { transform: translateX(1500px); opacity: 0;} 100% {transform: translateX(0); opacity: 1;}  
} 


/*アニメーション*/
.howto-bg{opacity: 0;}
.howto-bg.anm{
  animation:fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  opacity: 1;
}

@keyframes fadeIn {
  from {opacity: 0;} 100% {opacity: 1;};
}
.right, .left{opacity: 0;}
.right.anm{animation: slideIn-right .8s ease-in-out; opacity: 1;}
.left.anm{animation: slideIn-left .8s ease-in-out; opacity: 1;}
  @keyframes slideIn-right{
    from {transform: translateX(100%); opacity: 0;}
    100% {transform: translateX(0); opacity: 1;}
  }
  @keyframes slideIn-left{
    from {transform: translateX(-100%); opacity: 0;}
    100% {transform: translateX(0); opacity: 1;}
  }
  .reason-title span.anm{animation: slideIn-late_right .8s ease-out 1s infinite;}
  @keyframes slideIn-late_right{
    from { width: 0%; opacity: 0;} 100% {width: 100%; opacity: 1;}
  }  
  .point-arrow.anm{animation: slideDown 3s infinite forwards; display: block;}
  @keyframes slideDown {
    from {opacity: 0; transform: translateY(-30px); opacity: 0;}
    50%{opacity: 1; transform: translateY(0); opacity: 0.5;}
    100% { opacity:0; transform: translateY(30px); opacity: 0.5;} 
  }

/*snapshot========================*/
.snapshot_swiper { position: relative;  width: 96%;  margin: 12% auto}
.snapshot_swiper .swiper-slide { width: 60%; position: relative; transform: translateX(50%);}
.snapshot_swiper .swiper-slide:nth-child(odd) .slider_view { transform: rotate(5deg);}
.snapshot_swiper .swiper-slide:nth-child(even) .slider_view {transform: rotate(-5deg);}
.snapshot_swiper .swiper-slide.swiper-slide-active .slider_view {transform: rotate(0deg); z-index: 10000;}
.snapshot_swiper .swiper-slide img {opacity: 0.4; transition: all 0.3s;}
.snapshot_swiper .swiper-slide.swiper-slide-active img {opacity: 1;}
.snapshot_swiper .slider_view img {width: 94%; margin: 2% auto 0;}
.snapshot_swiper .slider_view.large {margin-top: -5%;}
.snapshot_swiper .slider_view.large img {  width: 58%;}
.snapshot_swiper .swiper-button-next, .snapshot_swiper .swiper-button-prev {color: #939393; transform: scale(0.8);}
.snapshot_swiper .swiper-button-next {right: -8%; top: 45%;}
.snapshot_swiper .swiper-button-prev {left: -8%; top: 45%;}
.snap_dummy {width: 87%; height: 50vw; max-height: 300px; background: #ccc;  position: absolute;top: 0; left: 6%; transform: rotate(-5deg);}

/* add 20240119 */
.rich_course{background-color:#fffbea; color: #3f3509; font-family: 'Noto Serif JP', serif,'ヒラギノ明朝 ProN';}
.rich_course h3{ font-family: 'Noto Serif JP', serif,'ヒラギノ明朝 ProN';}
.rich_course_price {color:#b41326 ;}
.rich_course_price span {font-size: 20px; font-weight: bold;}
.rich_course_taiken {  background: linear-gradient(transparent 60%, #f3ecd8 30%); display: inline-block; margin-bottom: 3%; }
.rich_course_step{padding: 5% 0 10%;
    background-image: linear-gradient(120deg, rgba(222, 197, 90, 1) 0%, rgba(252, 245, 218, 1) 18%, rgba(223, 198, 94, 1) 41%, rgba(252, 245, 218, 1) 62%, rgba(199, 162, 21, 1) 79%, rgba(223, 199, 96, 1) 100%);}
.rich_course_step-area{background-color: #fffdf6; margin: 0 4%; padding: 0 3%;}
.rich_course_ttl{display: inline-block; position: relative;vertical-align: bottom;}
.rich_course_ttl::after{
  content: "";
  background-image: url(../images/addition/arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px;
  height: 40px;
  position: absolute;
  bottom: -5%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.rich_step_ttl,.step5_ttl{display: flex; align-items: center; position: relative; z-index: 999;}
.rich_step_ttl::before,.step5_ttl::before{  content: '';
  position: absolute;
  top: 4px;
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #f1e4c3;
  z-index: -1;
} 
.rich_step_ttl::after,.step5_ttl::after{  content: '';
  position: absolute;
  bottom: 4px;
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #f1e4c3;
  z-index: -1;
} 
.step5_ttl::before{top: -3px;}
.step5_ttl::after{bottom: -5px;}
.step5_ttl .asterisk{font-size: 0.5em; vertical-align: 8px;}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
@keyframes fadeUpAnime{
    from { opacity: 0; transform: translateY(10px);}
    100% { opacity: 1; transform: translateY(0);}
  }
.fadeUpTrigger{ opacity: 0;}
.rich_step_ttl img{width: 15%;}
.rich_step_ttl h3{margin-left: 20px; font-size: 1.375rem;}
.rich_step_box{ padding-top: 7%;}
.rich_step_box .check_copy{color: #25241d;letter-spacing: -0em}
.rich_step_box .check_copy span{ font-size: 0.675rem; }
.rich_step_box .copy{  font-size: 0.875rem; text-align: left; line-height: 1.5; letter-spacing: 0.025em; padding-bottom:4%;}
.rich_step_desc{padding: 4% 0;}
.rich_step_box .attend p{font-family:'NotoReg',sans-serif; color: #555;}
.step5_ttl h3{line-height: 1.7rem;}
.rich_course .step_box_model{ background: none; margin: 0}
.premium_point{ color:#b41326 ; font-weight: bold; display: inline-block;}
.premium_point::before{ display: inline-block;content: " "; width: 1em; height: 0.8em;background: url(../images/addition/pre_icon.png) no-repeat center/1em;}
.rich_step_box  .check_details {width: 60%; text-align: left; background-color: #ece2b4; border-radius: 5px; padding:3% 2%;font-size: 0.875rem;line-height: 1.5;letter-spacing: 0.025em;}
.rich_step5_box .check_details {width: 100%; text-align: left; background-color: #ece2b4; border-radius: 5px; padding:3% 2%;font-size: 0.875rem;line-height: 1.5;}
.rich_step_box .step_box_point picture{margin-right: 4%};


@media (orientation: landscape){
  html {font-size: clamp(1rem, 0.625rem + 0.83vw, 1.25rem)}
  article {width: 100%;}
  .header {height: 60px;}
  .header.mini {  height: 60px;}
  .menu_list { top: 60px;}
  .menu_list ul {margin: 1.5vh auto 0;}
  .menu_list li{ font-size: 14px;}
  .menu_list li a{ margin-top: 1em; padding-bottom: 1em;}
  .footer2 {  height: 0;}
  .link_btn .yoyaku_info, .link_btn_other .yoyaku_info { margin-top: 1.85vw;}
  .link_btn, .link_btn_other{bottom: 0;}
  .movie {line-height: 0; width: auto;}
  h2.menu_title { line-height: 3rem; margin: 1.5% 0;}
  .facial_info {height: auto; margin-top: 20px;}
  .other_pages {margin-top: 20px;}
  .other_pages section { padding-top: 0;}
  .top_title{ width: 36%;  margin: 4% auto 4.5%;}
  .course_modal { height: 100vh;}
  .course_modal_in { height: 60vw;}
  .snap_dummy {height: 50vw;}
  .cont_frame { width: 80%;margin: 0 auto;}
  .facial_info .facial_price{width: 85%; padding: 0 8%;}
  .other_pages .package_offer{padding-bottom: 15%;}
}
@media screen and (min-width: 600px) {
 article { width: 600px;  margin: 0 auto; border: solid 2px #eee;}
 body{ background: #efefef;}
 .salonguide_table {font-size: 1rem;}
 .salonguide-sendai img,.salonguide-yokohama img{height: 36.25vw ; max-height: 335px;}
 .price h4{font-size: 26px;}
 .offer_banner_cam p {font-size: 30px;}
 .offer_hed{padding-left: 3rem; padding-right: 3rem; font-size: 1.125rem;}
 .offer_campaign_inner h2 {margin: 2% 0 2%; font-size: 30px;}
 .analysis_desc,.analysis_con_text{font-size: 1rem;}
 .analysis_treatment{width: 80%;}
 .analysis_subttl { padding: 3% 0 10%; font-size: 24px; }
 .analysis_comment{font-size: 1.125rem;}
 .analysis_num {width: 35%;}
 .item_hada{font-size: 20px; padding-top: 7%;}
 .item_plus{padding-top: 11.5%; margin: 0 10px;}
 .item_ttl{font-size: 26px;}
 .item_ttl .resize_mini{font-size: 1rem;}
 .item_ttl span{font-size: 1rem;}
 .item_hada{width: 25%;}
 .item .item_ttl::after{ bottom: 23px;}
 .item_ttl::after{width: 12px; height: 12px;}

}
@media screen and (max-width: 475px) {
  h2{font-size: 1.165rem;}
  .selfcheck-title{font-size: 1.165rem; line-height: 1.15;}
  .introduction-title{padding-top: 17%;}
  .introduction-title.anm::after, .aesthetic-title.anm::after { padding: 7%;}
  .package_offer h3{font-size: 1.165rem;}
  .trouble_list li{width: 45%;}
  .pc-none{display: block;}
  .infomation h2 {margin: 10% auto 8%;}
  .offer_campaign_inner h3 {font-size: 1.25rem;}
  .offer_rich_cource h4 span {font-size: 0.875rem;}
  .offer_campaign_inner h2 {font-size: 22px;}
  .rich_course_ttl::after{
    width: 50px;
    height: 20px;
    position: absolute;
    bottom: -3%;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
  }
  .trouble_taiken h2{font-size: 1.375rem;}
  .trouble_taiken_sub{font-size: 1.1255rem;}
  .rich_step_ttl h3{ font-size: 1.175rem;}
  .vitamin-b p{margin: 0.2em 0; font-size: 10px!important; }



}