@charset "utf-8";

/*共通*/
section { margin-top: 80px; margin-bottom: 100px; }
.pc_none { display: none; }

/* box */
.box_yel { text-align: center; padding:5px 25px; border: 7px solid #f6c725; }
.notice_box { font-size: clamp(16px,3vw,22px);}

/* mv */
#slider { height: calc(100vh - 220px); min-height: 560px; margin: 2px 60px 0 0; }
#main_visual { position: relative;}
#main_visual .main_con { position: absolute;
    z-index: 2;
    top:42%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    transform: -webkit-translate(-50%,-50%);
		text-align: center;
	color: #fff;
}
#main_visual .main_copy img{ width: 75%;margin: 0 auto; }
#main_visual .catch_copy { font-size: 22px;}
.snsLink { position: absolute; z-index: 90; top: 0; right: 1.2%; bottom: 0; margin: auto; height: 361px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
.snsLink li { position: relative; padding-top: 7%;}
.snsLink li a { text-decoration: none;}
.snsLink li:nth-child(1)::before { content: ""; position: absolute; top: 0; display: inline-block; width: 20px; height: 20px; background-image: url("../img/top/instagram.svg"); background-repeat: no-repeat; background-size: contain; vertical-align: middle;}
.snsLink li:nth-child(2)::before { content: ""; position: absolute; top: 0; display: inline-block; width: 20px; height: 20px; background-image: url("../img/top/facebook.svg"); background-repeat: no-repeat; background-size: contain; vertical-align: middle;
transform: rotate(90deg); -moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);}
.snsLink li:nth-child(3)::before { content: ""; position: absolute; top: 0; display: inline-block; width: 20px; height: 20px; background-image: url("../img/top/youtube.svg"); background-repeat: no-repeat; background-size: contain; vertical-align: middle;
transform: rotate(90deg); -moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);}
.hbox01 { height: 54px;}
.topmv_box>video {max-height:940px; height: 100%; max-width:100%; width: 100%; object-fit: cover;}


/* contents */
.sec_ttl {
  margin: 10px 0 26px; font-size:56px; font-weight: 600; color: #311f08;
  line-height: 100%; border-bottom: 1px solid #311f08;
}
.sec_ttl span.sub {
  display: inline-block; margin-left: 16px; line-height: 200%;
  color: #e5b100; font-size: 15px;
}

#main_area #txt_box p { margin: 0; font-weight: bold; }
.ttl_sp { display: none; }

.fee { position:absolute; padding-top:10px; top:0; right:20px;
width: 120px; height:120px; text-align: center;
background:#f6c725; color:#000; font-weight:bold; line-height:27px;
border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; z-index: 9999;
}
.fee span.ima { display:inline-block; font-size:14px; }
.fee span.nyukai { display:inline-block; margin-bottom:5%; font-size:20px; }
.fee span.font_en { display:inline-block; padding-right:5%; font-size:45px; }
.fee span.en { display:inline-block; font-size:20px; }

/*休業日コメント*/
.comment { position:absolute; top:0; width:300px; background: #f6c725; z-index: 100; padding: 15px 20px; margin: 20px; }
.comment h3 {margin: 10px auto;text-align: center;font-weight: bold;  }
.comment span { display: block; padding: 8px 0; margin: 10px auto 15px;
    text-align: center; font-weight: bold; border-bottom: 2px solid; border-top: 2px solid; }


/* BRAND STATEMENT
================================================================== */
#brand_statement h2 { margin-bottom: 0; font-size: 36px; color: #a3a3a3; border: none; }
#brand_statement p .font_en { font-size: min(9.5vw,56px);  font-weight: bold; line-height: 1.1; color: #f6c725; }
#brand_statement p .small { display: block; margin-top: 1em; }
#brand_statement .brand_txt { margin-top: 1.5em; line-height: 2; }
#brand_statement .brand_ja { margin-top: 0.7em; font-size: 1.2em; }


/* profile プロフィール
================================================================== */
#profile.top_prof {margin-top: 6em;}
#profile figure { width: 50%; float: left; }
#profile .txt_box { width:46%; float: right; }
#profile .name {
  margin: 20px 0 14px; font-weight: bold; font-size: 25px;
}
#profile .name span {
  display: block; margin-bottom: -5px; font-size: 13px;
  font-weight: normal;
}
#profile .about { font-weight: bold; }

/* concept コンセプト
================================================================== */
#concept .inner { width: 100%; margin: 0 auto; padding: 0 3.5em 2.5em; background:#f3e9d4; }

#concept #method.inner .sec_ttl { margin-top: 40px; line-height: 1; }

#concept .inner .txt_box { width: 42%; float: left; /*transform: skew(-5deg); -webkit-transform: skew(-5deg);*/}
#concept .inner .sec_ttl { margin-top: 40px; }
#concept .inner .lead { font-size: 20px; font-weight: bold;}
#concept .inner .lead span {
  display: block; margin: 0 0 14px; font-size: 12px; font-weight: normal;
}
#concept .inner .img_box {
  width: 60%; float: right; margin: -20px -60px 0 0;
  position: relative;
}

#concept .inner .img_box .training { margin-left: -4%; }
#concept .roots .img_box .training { margin-left: 0%; }
#concept #education .img_box .training { margin-left: 1%; }

#concept .inner .img_box .massage { width: 90%; position: absolute; top: 250px; right: -60px;}

#movie { position: relative; width: 100%; padding: 40px 30px; margin: 60px auto 0; border: 1px solid #311f08;}
#movie:before { content: ""; position: absolute; top: 0; left: 0; width: 40%; min-height: 200px; background: linear-gradient(to top left, rgba(255,255,255,0) 50%, rgba(246,199,37, 0.5) 50%) no-repeat top left/100% 100%; z-index:-1; }
#movie .txt_box { width: 100%; margin-bottom: 30px; }
#movie .txt { margin:0 auto; }
#movie .sec_ttl { margin:0 auto; font-size: 36px; border-bottom: none; }
#movie .sec_ttl span.sub { display: none; }
#movie .btn { position: absolute; bottom: -21px; right: 30px; margin: 20px 0 0; }
.movie_box { width: 100%; }
.movie_box li { width: 48%; }
.movie_box li a { display: block; position: relative; }
.movie_box li a:hover { opacity: .7; }
.movie_box li a::before { content:url("../img/top/icon_play.svg"); position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); transform:-webkit-translate(-50%,-50%); z-index: 2; }
.movie_box li a img { width: 100%; }
.movie_ttl { margin: .6em auto; font-size:1.25em; font-weight: bold; line-height: 1.5; }
.movie_ttl span { font-size: 16px; font-weight: normal; margin-left: 4px; }

#concept #roots, #concept #education { position: relative; margin: 100px 0 120px;}
#concept #roots.inner, #concept #education.inner { background: none; }
#concept #roots.inner { padding: 0; }
#concept #roots .img_box { float: left; width: 50%;}
#concept #roots .txt_box { width: 48%; transform: none; -webkit-transform: none; padding-left: 90px;}
#concept #roots .txt_box::before { content: ""; position: absolute; right: 0; height: 0; padding-left: 60px; z-index: -1; width: 53%; border-bottom: 550px solid #f3e9d4; border-left: 103px solid transparent; transform: inherit;}
#concept #roots .sec_ttl span.sub { line-height: 110%; padding-bottom: 5px; }
#concept #roots .logo { width: 50%; }
#concept #education .txt_box::before { content: ""; position: absolute; left: 0; height: 0; padding-right: 60px; z-index: -1; width: 53%; border-bottom: 550px solid #f3e9d4; border-right: 103px solid transparent; transform: inherit;}


/* services コース紹介
================================================================== */

.tax_box { padding: 20px; margin-bottom: 60px;background: #f6c725; font-size: 120%; text-align: center; font-weight: bold; }

#services {
  padding-bottom: 60px; margin-top: 120px; border-bottom: 1px solid #311f08;
  border-top: 1px solid #311f08;
}
#services .sec_ttl {
  height:26px; margin:0 0 70px; padding:0; text-align: center; border-bottom: none;
}
#services .sec_ttl p {
  display: inline-block; padding: 0 30px; margin: 0; position: relative;
  top: -30px; background:#fff;
}
#services .sec_ttl .sub { display: block; }

#services .c_ttl {
  padding: 8px 0 10px 10px; margin: 0 0 40px;
  background:url(../img/top/services_ttl.png) no-repeat left top;
}
#services .c_ttl span {
  display: block; width: 220px; text-align: center; font-weight: bold;
  font-size: 16px;
}
.services_cat .box  { margin: 0 -2%; }
.services_cat li { position: relative; max-width: 320px; width: 29.2%; margin:0 2% 40px; padding-bottom: 50px; }
.services_cat li a { display: block; text-decoration: none; }
.services_cat .box h4 { margin: 18px 0 8px; font-size: 18px; }
.services_cat .box h4 span {
  display: block; color: #777777; font-size: 12px; font-weight: normal;
}
.services_cat .box p { margin: 0; }
#services .btn a {
  padding:20px 120px; font-size: 20px; font-weight: bold;
}
#services .btn a span {
  padding-right: 20px; font-size: 24px; font-weight: normal;
}
.services_cat li .btn { position: absolute; bottom: 0; display: inline-block; width: 100%; padding: 10px 0 8px; text-align: center; text-decoration: none; font-size: 16px; background: #eeeeee; }
.services_cat li .btn::after { content: url(../img/arrow.png); position: absolute; right: 14px; top: 10px; }
.services_cat li a:hover .btn::after { right: 10px; }

#services .btn a::after { right: 30px; top: 26px; }
#services .btn a:hover::after { right: 26px; }

.services_txt { position:relative;}
.services_txt .fee { top:-37px; }
.services_cat .option { padding:30px; margin:30px auto; width:auto; font-weight: bold; background:#eee; }

/* consultation カウンセリング
================================================================== */
#consultation .txt_box { width: 45%; float: left; }
#consultation .img_box { width: 50%; float: right; }
#consultation .img_box .img2 { margin: -120px 0 0 0; text-align: right; }

/* location スタジオ紹介
================================================================== */
#location .txt_box { width: 45%; float: right; }
#location figure { width: 50%; float: left; }

/* success お客様の声
================================================================== */
#success {
  padding-top: 70px; padding-bottom: 10px;
  background:linear-gradient(#eee 94%, #fff 94%);
}
#success .ttl_box { margin-bottom: 30px; }
#success .lead { margin: 20px 0; }
#success .txt_box { width: 55%; float: left; }
#success .img_box { width: 40%; float: right; }
#success .img_box img { width: 300px; }
#success .img_box .img2 { margin: -120px 0 0 0; text-align: right; }
#success .img_box .img2 img { width: 200px; }
#success .inner { margin: 0 -2% 0; }
#success .inner li {
  width: 29%; margin: 0 2% 30px; background: #fff; position: relative;
}
#success .txt { padding: 20px 20px 40px; margin: 0; }
#success .name {
  width: 100%; padding: 13px 0; margin: 0; text-align: center;
  font-weight: bold; position: absolute; bottom: -25px; left: 0;
  background: url(../img/success_name_bg.png) no-repeat top center;
}

/* con_box インスタ アクセス
================================================================== */
.insta { max-width: 500px; width: 45%; }
.insta h3 { margin-bottom:1em; font-size:1.8em; line-height:1; }
.insta_post { margin-bottom:25px; }
.insta_post li { float:left; width:32%; margin-bottom:1.3%; box-sizing:border-box;}
.insta_post li:not(:nth-child(3n)) { margin-right:1.3%; }
.insta_post li a { display: block;  position: relative;  overflow: hidden;  width: 100%;  padding-top: 100%; background:#311f08; }
.insta_post li img { position: absolute;  top: 50%;  left: 50%;  max-width: 150%;  max-height: 150%;  -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%); -webkit-transition: all .3s;  transition: all .3s; }
.insta_post li a:hover img { opacity:0.25; }
#top .insta .sec_ttl { margin: 0 0 30px;  padding: 5px 0 0; font-size: 40px;  height: 26px;  text-align: center;  border-bottom: none; }
.insta .sec_ttl > span { position: relative; padding-left: 1em; }
.insta .sec_ttl > span:before { content: '';  position: absolute;  top: 15px;  left: 0;  display: inline-block;  width: 33px; height: 33px;  background-image: url(../img/top/instagram.svg);  background-repeat: no-repeat; }
.insta .sec_ttl span.sub { display: block; padding-top: .5em; }

#fb { max-width: 500px; width: 45%; float: left; }
/*#fb iframe { width: 100%; }*/
#access { width: 50%; float: right; }
#access .sec_ttl { font-size: 40px; }
#access iframe { width: 100%; }
#access .studio_data { margin-bottom: 40px; }

@media screen and (max-width: 1080px) {
  #slider { width: 100%; max-width: 980px; float: none; margin: 0 auto; }
  #slider li { width: 100%; }

  #profile { margin-top: 20px; }

  #movie .txt_box .flex { display: block; text-align: center; }
  #movie .sec_ttl { margin: 0 auto .5em; }

  #consultation .sec_ttl { font-size: 46px; }

  /*休業日コメント*/
  .comment { position: inherit; text-align:center;  top: -30px; width:60%; padding: 10px 5%; margin: 0 auto;}
  .comment br { display: none;}

	.snsLink { display: none;}

}

@media screen and (max-width: 980px) {
  section { margin-top: 40px; margin-bottom: 40px; }
  .sec_ttl { font-size: 40px; }
  #profile { padding: 0; }
  #profile figure { width: 45%; }
  #profile .txt_box { width: 52%; }
  #concept .inner .txt_box { width: 46%; }
  #concept .inner .img_box { width: 52%; margin: 60px 0 0; }
  #concept .inner .img_box .training { margin-left: 0; }
  #concept .inner .img_box .massage { margin-top: 10px; top: auto; right: 0; }
  #concept #roots .img_box {width: 47%;}
  #concept #roots .txt_box {width: 49%; padding-left: 3px;}
  .services_cat .box { margin: 0; }
  #consultation .sec_ttl { font-size: 36px; }
  #consultation .img_box .img2 { margin: -100px 0 0; }
  #success { padding-top: 30px; }
  #success .img_box img { width: 100%; }
  #success .img_box .img2 { display: none; }
  #success .inner { margin: 0 -1%; }
  #success .inner li { width: 31%; margin: 0 1% 30px; }
  #success .name { background-size: 100% auto; }

}



@media screen and (min-width: 1081px) {
  .topmv_box {width: 96%; margin: 0 60px 0 0;}
}

@media screen and (min-width: 1231px) {
  .topmv_box {width: 96%; margin: 0 60px 0 0;}
}


/*----------------------------------------------------
タブレット
-----------------------------------------------------*/
@media screen and (max-width: 769px) {




#main_visual .main_con { width: 90%; }
#main_visual .main_copy img{ width: 100%; }

/*休業日コメント*/
  .comment {width: 70%;}

  #main_area #txt_box {
    width: 100%; margin: 0; padding: 0 20px; top: 30%; text-align: center;
  }
  .sec_ttl { margin: 0 0 20px; }
  .sec_ttl span.sub { display: block; margin-left: 0; }
  #roots .sec_ttl span.sub, #education .sec_ttl span.sub {margin-top: .7em;}
  .btn { margin: 20px 0 0; }
  #profile .name { line-height: 100%; }
  #concept #roots, #concept #education { margin: 30px 0 80px;  }
  #concept #education { top: 3.5em; margin-bottom: 10em; }
 

  #movie { width: 100%; padding: 20px; }
  #services { margin-top: 80px; }
  #services .sec_ttl { margin-bottom: 40px; }
  .services_cat li { width: 46%; max-width: 46%; }
  .services_cat li figure { text-align: center; }
  #consultation .sec_ttl { font-size: 40px; }
  #consultation .img_box .img2 { margin: -60px 0 0; }
  #location figure { width: 43%; }
  #location .txt_box { width: 54%; }
  #success .inner li { width: 100%; margin-bottom: 35px; }
  #success .name { width: 280px; left: auto; right: 0; }
  #success .btn { margin: 20px 0 0; }
  #access { width: 100%; margin: 0 0 40px; float: none; }
  #access .sec_ttl { padding-bottom: 5px; border-bottom: 1px solid; }
  .insta { width: auto; margin: 0 auto; float: none; }

  .fee { padding-top:12px; line-height:23px; width:120px; height:120px; top:-10px; right:5px;  }
  .fee span.ima { font-size:16px; }
  .fee span.nyukai { margin-bottom:10%; font-size:20px; }
  .fee span.font_en { font-size:50px; }
  .fee span.en { font-size:16px; }

  

}/*タブレット*/

/*----------------------------------------------------
スマホ
-----------------------------------------------------*/
@media screen and (max-width: 599px) {
	.pc_none { display: inherit; }
  .ttl_sp { display: block; }
  .ttl_pc { display: none; }

  .main_copy { margin-bottom: 2em; }
  #main_visual .catch_copy { font-size: 13px;}

  #concept #method.inner .sec_ttl {line-height: 1;}

  .box_yel { padding-inline: 20px; text-align: start;}

  /* mv */
  .topmv_box {height: calc(46vh - 80px); margin-bottom: 2em;}
  .topmv_box>video {height: 100%; object-fit: cover;}

  /* brand_statement */
  #brand_statement { margin-top: 10px; }
  #brand_statement h2 { font-size: clamp(1.75rem, 0.917rem + 3.56vw, 2.25rem); }
  #brand_statement .brand_txt { font-feature-settings:"palt"; text-align: left; letter-spacing: 0.9px; }
  #brand_statement .brand_ja { font-size: 1.1em; letter-spacing: -0.7px; }

  /*休業日コメント*/
  .comment {width: 90%; top: -10px; padding: 15px 10px; }
  .comment h3 { margin: 0 auto 10px; }
  .comment p { margin: 0 auto; }
  .comment span { padding: 5px; margin: 10px auto; }
  .comment br { display: inherit; }

  header { background: none; }
  header h1 { font-size: 12px; }
  header .inner { background: #e9d8b2; }
  #main_area { padding-bottom: 10px; }
  .btn { text-align: center; }
  .sec_ttl { font-size:36px; padding-bottom: 5px; border-bottom: 1px solid; }
  #profile figure { width: 100%; /*margin: 0 auto 20px;*/ float: none; }
  #profile .txt_box { width: 100%; float: none; }
  #profile .name { font-size: 20px; }
  #profile .name span { margin-bottom: 2px; }
  #profile .about { font-size: 14px; }

  #profile.top_prof {margin-top: 1em;}
  #concept #roots { margin: 20px auto 50px; }
  #concept .inner {
    display: flex; display: -webkit-flex; flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    padding: 0 1em 2.5em;
  }
  #concept .inner .txt_box { width: 100%; float: none; }
  #concept .inner .sec_ttl { width: 100%; margin: 30px auto 0; }
  #concept .inner .img_box {
    width: 100%; float: none; margin: 20px 0 5px; }
  #concept .inner .img_box .massage {
    position: relative; width: 100%; margin: 0;
  }
  #concept #education .txt_box::before {
    top: 0;
    width: 100%;
    border-bottom: 680px solid #f3e9d4;
  }

  #movie { margin: 40px auto 0; padding: 20px 20px 40px; }
  #movie .txt_box { float: none; width: 100%; margin-bottom: 15px; }
  #movie .btn { right: 50%; transform: translate(50%, 0); transform:-webkit-translate(50%, 0);}
  #movie .movie_box {float: none; width: 100%; margin: 0; }
  #movie .movie_box li { width: 100%; }
  #movie .movie_box li:first-child { margin-bottom: 10px; }
  .movie_ttl { font-size: 1.0625em;  }
  #movie .sec_ttl { width: 100%; margin: 0 0 16px; padding-bottom: 0; font-size: 26px; border-bottom: 1px solid; }
  #movie .txt { text-align: left; }

	.tax_box { margin-bottom: 30px; text-align: left; font-size: 100%;}

  #services { border-bottom: none; }
  #services .sec_ttl { margin-bottom: 20px; border-bottom: none; }
  #services .sec_ttl .sub { margin-left: 0; }
  .services_cat .box h4 { font-size: 15px; }
  #services .btn a { width: 100%; padding:20px 60px 20px 10px; font-size: 15px; }
  #services .btn a span { padding-right: 10px; }
  #services .btn a::after { right: 20px; }

  #consultation .img_box {
    width: 100%; float: none; margin-bottom: 20px; text-align: center;
  }
  #consultation .img_box .img2 { display: none; }
  #consultation .txt_box { width: 100%; float: none; }
  #location figure { width: 100%; margin-bottom: 20px; float: none; }
  #location .txt_box { width: 100%; float: none; }
  #location .studio_data dt {
    width: 20%; margin-bottom: 5px; float: none; clear: none;
  }
  #location .studio_data dd { padding-left: 0; }
  #success { background:linear-gradient(#eee 97%, #fff 97%); }
  #success .lead br { display: none; }
  #success .ttl_box { margin-bottom: 10px; }
  #success .img_box {
    width: 100%; float: none; display: flex; display: -webkit-flex;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;
  }
  #success .img_box figure { width: 50%; }
  #success .img_box .img2 { display: block; margin: 0; }
  #success .img_box .img2 img { width: 100%; }
  #success .txt_box { width: 100%; float: none; }


  .fee { width:90px; height:90px; line-height:1.1;}
  .fee span.ima { font-size:14px; }
  .fee span.nyukai { margin-bottom:0; font-size:18px; }
  .fee span.font_en { font-size:35px; }
  .fee span.en { font-size:14px; }
  .services_txt .fee { top:-50px; }
  
  #concept #education { top: 0; margin: 0 auto 8em; }
  #concept #education.inner { padding: 0; }
	#concept #roots .txt_box, #concept #education .txt_box { width: 100%; padding-left: 0;}
	#concept #roots .txt_box::before ,#concept #education .txt_box::before { display: none;}
	#concept #roots .img_box, #concept #education .img_box { width: 100%;}



}/*スマホ*/