@charset "utf-8";
@import url("base.css");
#hd { background: rgba(255,255,255,0); transition: 0.3s linear;}
#hd.wh { background: rgba(255,255,255,1);}
@media (max-width: 801px){
	#hd { background: #fff;}
}
#wrapper { padding-top: 0px;}
@media (max-width: 1201px) {
	#wrapper { padding-top: 0px;}
}
@media (max-width: 801px) {
	#wrapper { padding-top: 100px;}
}
@media (max-width: 481px) {
	#wrapper { padding-top: 84x;}
}

.fix-sp ul li.exp a { background: #A7BEBD;}
.fix-sp ul li.reserve a { background: #D6D4CB;}
.fix-sp ul li.exp a:hover,
.fix-sp ul li.exp a:active{ background: #8CACAA; color: #fff;}
.fix-sp ul li.reserve a:hover,
.fix-sp ul li.reserve a:active{ background: #B1AD9D; color: #fff;}

@media (max-width: 641px) {
	#ft .inner-ft { padding: 20px 0 80px;}
}

#kv-pilates { position: fixed; left: 0; top: 0; width: 100%; z-index: -1;}
#kv-pilates .inner-sct { position: relative;}
#kv-pilates .ctn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin-top: -80px; width: 100%; z-index: 2;}
#kv-pilates .ctn .inner {  width: 92%; max-width: 1000px; margin: 0 auto;}
#kv-pilates .ctn .txt { width: 80%; max-width: 580px; margin: 0 0 0 auto; text-align: center; transition: 0.6s linear 0.2s; opacity: 0;}
#kv-pilates .ctn .txt p { margin-bottom: 20px; color: #80A3A2; font-size: 22px; font-weight: 200; letter-spacing: 0.2rem; line-height: 1;}
#kv-pilates .ctn .txt h1 { color: #4A4A4A; font-size: 20px; letter-spacing: 0.24rem;}
#kv-pilates .ctn .txt h1 span { display: block; margin-bottom: 20px; font-size: 35px;}
#kv-pilates .bg { position: relative; width: 100%; height: 800px; background: url('/images/pilates/top/kv.jpg') no-repeat 50% 50% / cover; z-index: 1;}
#kv-pilates .bg img { display: none; width: 100%;}
#kv-pilates.hide { opacity: 0;}
#kv-pilates.show .ctn .txt { opacity: 1;}
@media (max-width: 801px){
	#kv-pilates { top: 100px;}
	#kv-pilates .ctn { top: 9%; transform: translateY(0%); margin-top: 0px;}
	#kv-pilates .ctn .txt { width: 100%; max-width: 580px; margin: 0 auto;}
	#kv-pilates .ctn .txt p { margin-bottom: 15px; font-size: 20px;}
	#kv-pilates .ctn .txt h1 { font-size: 16px;}
	#kv-pilates .ctn .txt h1 span { margin-bottom: 15px; font-size: clamp(18px, 5.6vw,35px);}

	#kv-pilates .bg { height: auto; background: none;}
	#kv-pilates .bg img { display: block;}
}
@media (max-width: 481px) {
	#kv-pilates { top: 80px;}
	#kv-pilates .ctn { top: 7%;}
	#kv-pilates .ctn .txt p { margin-bottom: 8px; font-size: 16px;}
	#kv-pilates .ctn .txt h1 { font-size: 14px; letter-spacing: 0.18rem;}
	#kv-pilates .ctn .txt h1 span { margin-bottom: 6px;}
}


.spacer { position: relative; width: 100%; padding-top: 880px; z-index: 2;}
.spacer .shape { position: absolute; left: 0; bottom: -2px; width: 100%; height: 200px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="200" viewBox="0 0 1400 200"><path d="M0,0v200h1400V0c-136.47,49.18-398.79,82.47-700,82.47S136.47,49.18,0,0Z" fill="%23e0e7e8"/></svg>');
 background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 0;
}
@media (max-width: 1401px){
	.spacer .shape { background-size: 1400px auto;}
}
@media (max-width: 801px){
	.spacer { padding-top: 132%;}
	.spacer .shape { display: none; height: 14vw;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><path d="M0,0v400h800V0c-88.77,52.27-234.84,86.39-400,86.39S88.77,52.27,0,0Z" fill="%23e0e7e8"/></svg>');
		background-size: 100% auto;
	}
}

.ttl { position: relative; width: 92%; max-width: 1048px; margin: 0 auto; transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
.ttl h2 { font-size: 95px; font-weight: 100; line-height: 1;}
.ttl.show { opacity: 1;}
@media (max-width: 801px){
	.ttl { width: 88%;}
	.ttl h2 { font-size: 14vw;}
}

.btn-more { position: relative; width: 88%; max-width: 1000px; margin: 0 auto; z-index:2;}
.btn-more div { position: relative; width: 80%; max-width: 250px; padding-right: 20px;}
.btn-more div:after { content: ''; display: block; width: 45px; height: 1px; background: #000; position: absolute; right: 0; top: 50%;}
.btn-more div a { position: relative; display: block; border: solid 1px #000; border-radius: 50px; width: 100%;
 color: #000; font-size: 14px; font-weight: 400; letter-spacing: 0.1rem; line-height: 1; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
.btn-more div a span { display: block; padding: 15px 0; }
.btn-more div a:hover { background: #dbdbdb; border-color: #dbdbdb;}
@media (max-width: 481px){
	.btn-more div { max-width: 200px; padding-right: 16px;}
	.btn-more div:after { width: 32px;}
	.btn-more div a { font-size: 12px;}
	.btn-more div a span { padding: 12px 0;}
}

#lead { position: relative; background:#e0e7e8; z-index: 2;}
#lead .inner-sct { padding: 20px 0 200px;}
#lead .ttl { margin-bottom: 80px; padding-left: 24px;}
#lead .ctn { display: flex; justify-content: space-between; width: 88%; max-width: 1000px; margin: 0 auto 60px;}
#lead .txt { width: 520px; transition: .8s cubic-bezier(.4,.4,0,1); transition-delay: 0.4s; opacity: 0;}
#lead .img { position: relative; width: calc( 100% - 530px); max-width: 450px;}
#lead .txt h3 { margin-bottom: 50px; font-size: 16px; letter-spacing: 0.1rem;}
#lead .txt h3 span { display: block; font-size: 18px; font-weight: 200;}
#lead .txt .inner { padding: 20px 0;}
#lead .txt p { margin-bottom: 40px; font-size: 16px; letter-spacing: 0.08rem; line-height: 2;}
#lead .txt p:last-child { margin-bottom: 0px;}
#lead .txt figure { position: relative; display: none;}
#lead .img:after { content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(#e0e7e8, rgba(224,231,232,0) );
 position: absolute; left: 0; top: 0; transition-delay: 0.2s;
 transition: 6.0s cubic-bezier(.4,.4,0,1);; transform: translateY(20px);
}
#lead .img figure { position: relative; display: block; width: 100%; transition: 4.0s cubic-bezier(.4,.4,0,1); opacity: 0;}
#lead .img figure img { position: relative; width: 100%; transition: 3.0s cubic-bezier(.4,.4,0,1); transition-delay: 0.2s; transform: translateY(40px);}
#lead .btn-more { transition: .6s cubic-bezier(.4,.4,0,1); opacity: 0;}
#lead .txt.show  { opacity: 1;}
#lead .img.show:after { height: 0%; transform: translateY(-20px); opacity: 0;}
#lead .img.show figure { opacity: 1;}
#lead .img.show figure img { transform: translateY(0px);}
#lead .btn-more.show { opacity: 1;}
@media (max-width: 1001px){
	#lead .ttl { margin-bottom: 60px;}
	#lead .txt { width: 450px;}
	#lead .txt .inner { padding: 12px 0;}
	#lead .img { width: calc( 100% - 460px);}
	#lead .txt h2 { margin-bottom: 30px;}
	#lead .txt p { margin-bottom: 24px; font-size: 14px;}
}
@media (max-width: 801px){
	#lead .inner-sct { padding: 80px 0 120px;}
	#lead .ttl { margin-bottom: 40px; padding-left: 0px;}
	#lead .ctn { display: block; width: 100%; margin: 0 auto;}
	#lead .txt { width: 100%; margin: 0 auto;}
	#lead .txt h3 { width: 88%; margin: 0 auto;}
	#lead .txt .inner { width: 88%; margin: 0 auto; padding: 40px 0;}
	#lead .txt figure { display: block;}
	#lead .txt figure img { width: 100%;}
	#lead .img { display: none;}
	#lead .btn-more div { margin: 0 0 0 auto;}
}
@media (max-width: 481px){
	#lead .inner-sct { padding: 60px 0 80px;}
	#lead .ttl { margin-bottom: 30px;}
}


.view { background:#e0e7e8; }
.view .slider { transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
.view .slider figure img { width: 100%;}
.view.show .slider { opacity: 1;}

#news { position: relative; background:#e0e7e8; z-index: 2;}
#news .inner-sct { padding: 100px 0 150px;}
#news .ttl { margin-bottom: -50px; z-index: 2;}
#news .ttl h2 { text-align: right;}
#news .box { position: relative; width: 92%; max-width: 1000px; margin: 0 auto; padding: 80px 100px; background: #fff;
 transition: 1.2s cubic-bezier(.4,.4,0,1); transition-delay: 0.2s; opacity: 0; transform: translateY(20px);
}
#news .box ul { width: 100%; margin: 0 auto;}
#news .box ul li { position: relative; padding: 15px 0; padding-left: 230px; border-bottom: solid 1px #B7B2B0; font-size: 14px; letter-spacing: 0.08rem;}
#news .box ul li:last-child { border-bottom: none;}
#news .box ul li time { position: absolute; left: 0; top: 15px; color: #676767; letter-spacing: 0.15rem;}
#news .box ul li span.tag { display: block; width: 82px; padding: 4px 0; border-radius: 50px;
 position: absolute; left: 120px; top: 14px;
 color: #fff; letter-spacing: 0.1rem; line-height: 1; text-align: center;
}
#news .box ul li span.news-p { background: #dbaeac !important;}
#news .box ul li span.topix-p{ background: #b7b3b1 !important;}
#news .box ul li a { color: #000; text-decoration: none; transition: 0.3s ease;}
#news .box ul li a:hover { color: #7f7f7f;}
#news .box.show  { opacity: 1; transform: translateY(0px);}
@media (max-width: 1001px) {
	#news .box { padding: 40px 50px;}
}
@media (max-width: 801px) {
	#news .inner-sct { padding: 80px 0;}
	#news .ttl { margin-bottom: -5vw;}
	#news .box { margin: 0; padding: 60px 40px 40px;}
}
@media (max-width: 641px) {
	#news .ttl h2 { text-align: left;}
	#news .box ul li { padding: 48px 0 15px;}
	#news .box ul li time { position: absolute; left: 100px; top: 18px; }
	#news .box ul li span.tag { position: absolute; left: 0; top: 18px; }
}
@media (max-width: 481px) {
	#news .inner-sct { padding: 60px 0 80px;}
	#news .box { margin: 0; padding: 50px 30px 30px;}
}


#campaign { position: relative; background: linear-gradient(120deg,#BFD1D6,#D0D5C6); z-index: 3; transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
#campaign .inner-sct { position: relative;}
#campaign h2 { position: absolute; left: 0; top: -12px; width: 100%; text-align: center;}
#campaign h2 img { width: 60%; max-width: 210px;}
#campaign .ctn { position: relative; padding: 80px 0;}
#campaign .ctn h3 { margin-bottom: 30px; text-align: center;}
#campaign .ctn h3 picture { display: block; width: 86%; max-width: 690px; margin: 0 auto;}
#campaign .ctn h3 picture img { width: 100%;}
#campaign .ctn ul { width: 90%; max-width: 820px; margin: 0 auto; font-size: 0; text-align: center;}
#campaign .ctn ul li { display: inline-block; width: 33%; padding: 0 18px;}
#campaign .ctn ul li dl dd.icn span { display: block; border: solid 5px #fff; border-radius: 50%; padding: 2px; background: #e4c2c0; overflow: hidden;
 box-shadow: 0 3px 6px rgba(0,0,0,.16);
}
#campaign .ctn ul li dl dd.icn picture { display: block; width: 100%; border-radius: 50%; overflow: hidden; background: #fff;}
#campaign .ctn ul li dl dd.icn img { width: 100%;}
#campaign.show { opacity: 1;}
@media (max-width: 641px) {
	#campaign .ctn ul li { padding: 0 12px;}
	#campaign .ctn ul li dl dt { margin-bottom: 18px; color: #344446; font-size: 16px; font-weight: 700;}
	#campaign .ctn ul li dl dt span { display: block; margin-bottom: 4px;}
	#campaign .ctn ul li dl dt:after { content: ''; display: block; width: 100%; height: 6px;
		 background:url('/images/aside/dots.svg') no-repeat 50% 50% / auto 100%;
	}
	#campaign .ctn ul li dl dd.icn { margin-bottom: 15px;}
	#campaign .ctn ul li dl dd.icn span { border-width: 3px; padding: 1px;}
	#campaign .ctn ul li dl dd.txt { color: #344446; font-size: 12px;}
}
@media (max-width: 481px) {
	#campaign .ctn { padding: 60px 0 40px;}
	#campaign .ctn h3 {}
	#campaign .ctn ul li { padding: 0 6px;}
	#campaign .ctn ul li dl dt { margin-bottom: 12px; font-size: 14px;}
}


#trial { background: #fff;}
#trial .inner-sct { padding: 200px 0 100px;}
#trial .outer { margin-bottom: 90px; transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
#trial .step { width: 86%; max-width: 1000px; margin: 0 auto 120px; transition: .6s cubic-bezier(.4,.4,0,1); opacity: 0;}
#trial .step ul { margin-bottom: 8px;}
#trial .step ul li { padding: 8px 0;}
#trial .step ul li dl { display: table; width: 100%; padding: 8px 20px; background: #F1F0F0; border-radius: 15px;}
#trial .step ul li dl dt,
#trial .step ul li dl dd { display: table-cell; vertical-align: middle;}
#trial .step ul li dl dt { width: 160px; color: #717c7d; font-size: 23px; font-weight: 700; letter-spacing: 0.12rem; text-align: center;}
#trial .step ul li dl dt span { position: relative; display: block; padding: 12px 0; border-right: solid 2px #fff;}
#trial .step ul li dl dd { padding-left: 32px; font-size: 16px; letter-spacing: 0.12rem;}
#trial .step p { font-size: 14px; text-align: right; }
#trial .btn-exp { transition: .6s cubic-bezier(.4,.4,0,1); opacity: 0;}
#trial .outer.show { opacity: 1;}
#trial .step.show { opacity: 1;}
#trial .btn-exp.show { opacity: 1;}
@media (max-width: 1001px) {
	#trial .inner-sct { padding: 120px 0;}
	#trial .step { margin-bottom: 100px;}
}
@media (max-width: 801px) {
	#trial .inner-sct { padding: 80px 0;}
	#trial .outer { margin-bottom: 0px;}
	#trial .step { margin-bottom: 60px;}
	#trial .step ul li dl dt { width: 140px; font-size: 20px;}
	#trial .step ul li dl dd { font-size: 14px;}
	#trial .step p { text-align: left;}
}
@media (max-width: 481px) {
	#trial .inner-sct { padding: 60px 0;}
	#trial .outer { margin-bottom: 0px;}
	#trial .step { margin-bottom: 30px;}
	#trial .step ul li dl dt,
	#trial .step ul li dl dd { display: block;}
	#trial .step ul li dl dt { width: 100%;}
	#trial .step ul li dl dt span { padding: 8px 0; border-right: 0px;}
	#trial .step ul li dl dt:after { content: ''; display: block; width: 60px; height: 2px; background: #fff; margin: 0 auto;}
	#trial .step ul li dl dd { width: 100%; padding: 10px; font-size: 12px; text-align: center;}
	#trial .step p { font-size: 11px;}
}


#price { position: relative; background: #fff;}
#price .inner-sct { position: relative; padding: 100px 0 50px;}
#price .inner-sct:before,
#price .inner-sct:after { content: ''; display: block; width: 100%; position: absolute; left: 0; z-index: 1;}
#price .inner-sct:before{ top: 130px; height: 200px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="500" viewBox="0 0 1400 500"><path d="M700,0C398.79,0,136.47,33.24,0,82.35v417.65h1400V82.35C1263.53,33.24,1001.21,0,700,0Z" fill="%23e0e7e8"/></svg>');
 background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 0;
}
#price .inner-sct:after { height: 300px; background: #E0E7E8; bottom: -10px;}
#price .ttl { margin-bottom: 40px; padding-left: 24px; z-index: 2;}
#price .bloc { position: relative; background: #E0E7E8; padding: 40px 0; z-index: 2;}
#price .bloc .ctn { width: 88%; max-width: 1000px; margin: 0 auto; transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
#price .flex-3 { display: flex; justify-content: space-between; }
#price .tit { position: relative; margin-bottom: 30px;}
#price .tit h4 { position: relative; color: #344446; font-size: 25px; font-weight: 700; line-height: 1; text-align: center;}
#price .tit h4:after { content: ''; display: block; width: 100%; height: 2px; background: #344446; position: absolute; left: 0; top: 50%;}
#price .tit h4 span { position: relative; display: inline-block; padding: 0 18px; background: #E0E7E8; z-index: 2;}
#price .box { width: 32%;}
#price .box .inner { background: #fff; border-radius: 15px; overflow: hidden;}
#price .box .box-tit { padding: 25px 0 12px; background: #80A3A2;}
#price .box .box-tit.p1 { background: #344446}
#price .box .box-tit p { color: #fff; letter-spacing: 0.08rem; text-align: center;}
#price .box .box-tit p span { display: block;}
#price .box .box-tit p span.jp { font-size: 21px; font-weight: 700;}
#price .box .box-tit p span.eng{ font-size: 14px; font-weight: 300;}
#price .box .box-ctn { min-height: 280px; padding: 30px 0 0;}
#price .box .box-ctn dl { margin-bottom: 40px; text-align: center;}
#price .box .box-ctn dl dt,
#price .box .box-ctn dl dd { letter-spacing: 0.08rem;}
#price .box .box-ctn dl dt { margin-bottom: 8px;}
#price .box .box-ctn dl dt span { display: inline-block; padding: 5px 15px; border: solid 1px #A0A0A0; border-radius: 50px; font-size: 14px; line-height: 1;}
#price .box .box-ctn dl dd {}
#price .box .box-ctn dl dd span { display: block; }
#price .box .box-ctn dl dd span.price { font-size: 35px; font-weight: 700;}
#price .box .box-ctn dl dd span.tax { font-size: 14px;}
#price .box .box-ctn ul { width: 92%; max-width: 260px; margin: 0 auto;}
#price .box .box-ctn ul li { position: relative; padding: 5px; padding-left: 20px; font-size: 15px;}
#price .box .box-ctn ul li::before { content: ''; display: block; width: 14px; height: 14px;
 position: absolute; left: 0; top: 10px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M20,1.79c0,.98-.44,1.94-1.33,2.87l-.14.14-7.77,8.18c-1.65,1.73-3.06,3.08-4.22,4.02-1.16.95-1.98,1.42-2.46,1.42-.5,0-1.13-.24-1.87-.71-.75-.47-1.23-.96-1.45-1.46-.18-.42-.36-1.31-.52-2.66-.16-1.36-.24-2.83-.24-4.41,0-.86.36-1.66,1.08-2.39.72-.73,1.52-1.1,2.39-1.1s1.32.76,1.48,2.27c.02.18.03.31.04.39.13,1.16.29,1.98.47,2.44.18.46.41.69.72.69.13,0,.36-.14.7-.41.34-.27.75-.64,1.23-1.11l7.98-7.91c.67-.67,1.27-1.18,1.8-1.52.53-.34.98-.51,1.35-.51.28,0,.47.11.59.31.12.21.18.56.18,1.06v.42Z" fill="%2380a3a2"/></svg>');
 background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 50%;
}
#price .btn-more { padding-top: 30px; transition: .6s cubic-bezier(.4,.4,0,1); opacity: 0;}
#price .btn-more div { margin: 0 0 0 auto;}
#price .bloc.show .ctn{ opacity: 1;}
#price .btn-more.show { opacity: 1;}
@media (max-width: 1401px){
	#price .inner-sct:before{ background-size: 1400px auto;}
}
@media (max-width: 801px) {
	#price .inner-sct:before{ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><path d="M400,0C234.84,0,88.77,34.12,0,86.39v713.61h800V86.39C711.23,34.12,565.16,0,400,0Z" fill="%23e0e7e8"/></svg>');
	 background-size: 100% auto;
	}
	#price .ttl { margin-bottom: 20px; padding-left: 0px;}
	#price .flex-3 { display: block;}
	#price .box { width: 100%; max-width: 450px; margin: 0 auto; padding: 12px 0;}
	#price .btn-more { padding-top: 12px;}
}
@media (max-width: 641px) {
	#price .inner-sct { position: relative; padding: 50px 0px;}
	#price .inner-sct:before{ top: 90px;}
	#price .box .box-ctn { min-height: auto; padding: 20px 0;}
	#price .box .box-ctn dl { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#price .inner-sct:before{ top: 60px;}
	#price .ttl { margin-bottom: 12px;}
	#price .bloc { padding: 25px 0;}
	#price .tit { margin-bottom: 12px;}
	#price .tit h4 { font-size: 16px;}
	#price .box .box-tit { padding: 20px 0 12px;}
	#price .box .box-tit p span.jp { font-size: 18px;}
	#price .box .box-tit p span.eng{ font-size: 12px;}
	#price .box .box-ctn dl { margin-bottom: 12px;}
	#price .box .box-ctn dl dt span { font-size: 12px;}
	#price .box .box-ctn dl dd span.price { font-size: 30px;}
	#price .box .box-ctn dl dd span.tax { font-size: 13px;}
	#price .box .box-ctn ul { max-width: 230px;}
	#price .box .box-ctn ul li { padding: 2px; padding-left: 18px; font-size: 14px;}
	#price .box .box-ctn ul li::before { width: 12px; height: 12px; top: 8px;}
	#price .btn-more { padding-top: 0px;}
}


#studio { background: #E0E7E8;}
#studio .inner-sct { position: relative; padding: 100px 0 150px;}
#studio .ttl { margin-bottom: -50px; z-index: 2;}
#studio .ttl h2 { text-align: right;}
#studio .box { position: relative; width: 88%; max-width: 1200px; margin: 0 auto; padding: 90px 50px 72px; border-radius: 20px;
 background: #F1F0F0; box-shadow: 0 2px 4px rgba(0,0,0,.16);
 transition: .8s cubic-bezier(.4,.4,0,1); opacity: 0;
}
#studio .ctn { display: flex; justify-content: space-between; flex-direction: row-reverse; width: 100%; max-width: 1000px; margin: 0 auto; }
#studio .ctn .img { width: 38%; position: relative;}
#studio .ctn .txt { width: 60%; transition: 1.2s cubic-bezier(.4,.4,0,1); transition-delay: 0.4s; opacity: 0;}
#studio .ctn .img:after { content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(#F1F0F0, rgba(241,240,240,0) );
 position: absolute; left: 0; top: 0; transition-delay: 0.2s;
 transition: 6.0s cubic-bezier(.4,.4,0,1);; transform: translateY(20px);
}

#studio .ctn .img figure { position: relative; width: 100%; transition: 4.0s cubic-bezier(.4,.4,0,1); opacity: 0;}
#studio .ctn .img figure img { position: relative; width: 100%; transition: 3.0s cubic-bezier(.4,.4,0,1); transition-delay: 0.2s; transform: translateY(40px);}
#studio .ctn .txt .inner { margin-bottom: 60px;}
#studio .ctn .txt p { font-size: 22px; line-height: 2.25;}
#studio .ctn .txt p span { display: block;}
#studio .ctn .txt ul { width: 100%; max-width: 450px; margin: 0 0 30px; font-size: 0;}
#studio .ctn .txt ul li { display: inline-block; width: 33%; padding: 18px 0; padding-right: 20px; font-size: 18px; }
#studio .ctn .txt ul li a { position: relative; display: block; color: #000; font-weight: 700; line-height: 1; text-align: center; text-decoration: none; transition: 0.3s ease;}
#studio .ctn .txt ul li a:after { content: ''; display: block; width: 100%; height: 10px; border-radius: 10px; background: #DFDDDC;
 position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
}
#studio .ctn .txt ul li a span { position: relative; display: block; padding: 4px 0; z-index: 2;}
#studio .ctn .txt ul li a:hover { opacity: 0.5;}
#studio .ctn .txt figure { display: none;}
#studio .ctn .txt figure img { width: 100%;}
#studio .btn-more div { margin: 0 0 0 auto;}
#studio .box.show { opacity: 1;}
#studio .show .ctn .img { opacity: 1;}
#studio .show .ctn .img:after { height: 0; transform: translateY(-20px); opacity: 0;}
#studio .show .ctn .img figure { opacity: 1;}
#studio .show .ctn .img figure img { transform: translateY(0px);}
#studio .show .ctn .txt { opacity: 1;}
@media (max-width: 801px) {
	#studio .ttl { margin-bottom: -6vw;}
	#studio .box { padding: 40px 0;}
	#studio .ctn { display: block; }
	#studio .ctn .img { display: none;}
	#studio .ctn .txt { width: 100%;}
	#studio .ctn .txt .inner { width: 88%; margin: 0 auto; padding: 40px 0;}
	#studio .ctn .txt p span { display: inline;}
	#studio .ctn .txt figure { display: block;}
	#studio .ctn .txt ul { width: 88%; max-width: 88%; margin: 0 auto; padding: 30px 0;}
}
@media (max-width: 481px) {
	#studio .inner-sct { padding: 40px 0 60px;}
	#studio .ctn .txt .inner { padding: 30px 0;}
	#studio .ctn .txt p { font-size: 16px;}
	#studio .ctn .txt ul { width: 90%; max-width: 90%; padding: 20px 0;}
	#studio .ctn .txt ul li { width: 50%; padding: 10px;}
}



#lesson { position: relative; background: #fff;}
#lesson .inner-sct { padding: 140px 0px;}
#lesson .ttl { padding-left: 24px;}
#lesson .read { width: 88%; max-width: 1200px; margin: 0 auto 50px; transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
#lesson .read p { color: #344446; font-size: 22px; letter-spacing: 0.12rem; line-height:1.8; text-align: right;}
#lesson .bloc { padding: 40px 0;}
#lesson .ctn { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto;}
#lesson .ctn.lesson-1 { flex-direction: row-reverse; padding-left: 100px;}
#lesson .ctn.lesson-2 { padding-left: 50px; padding-right: 50px;}
#lesson .ctn.lesson-3 { flex-direction: row-reverse; padding-right: 100px;}
#lesson .ctn.lesson-4 { padding-right: 100px;}
#lesson .ctn.lesson-5 { flex-direction: row-reverse; padding-left: 100px;}
#lesson .ctn.lesson-6 { padding-left: 100px;}
#lesson .ctn .img { width: 50%;}
#lesson .ctn .descript { width: 50%; padding: 0 80px; transition: .8s cubic-bezier(.4,.4,0,1); opacity: 0;}
#lesson .ctn.lesson-2 .img { width: 54.5%;}
#lesson .ctn.lesson-2 .descript { width: 45.5%;}
#lesson .ctn.lesson-4 .descript{ padding-left: 120px; padding-right: 0;}
#lesson .ctn .img figure { text-align: center; transition: 4.0s cubic-bezier(.4,.4,0,1); opacity: 0;}
#lesson .ctn .img figure img { width: 100%;}
#lesson .ctn .img picture { display: block; width: 100%; text-align: center; transition: 4.0s cubic-bezier(.4,.4,0,1); opacity: 0;}
#lesson .ctn .img picture img { width: 100%;}
#lesson .ctn .descript .tit { margin-bottom: 60px;}
#lesson .ctn .descript .tit dl dt,
#lesson .ctn .descript .tit dl dd { color: #80A3A2; font-size: clamp(30px,6.0vw,60px); font-weight: 200; line-height: 1;}
#lesson .ctn .descript .tit dl dt { margin-bottom: 30px;}
#lesson .ctn .descript .tit dl dt:after { content: ''; display: block; width: 60px; height: 1px; margin-top: 30px; background: #80A3A2;}
#lesson .ctn .descript .txt p { font-size: 14px; letter-spacing: 0.08rem; line-height: 2;}
#lesson .ctn .descript .txt p span { display: block; font-size: 18px; font-weight: 700;}
#lesson .read.show { opacity: 1;}
#lesson .show .descript { opacity: 1;}
#lesson .show .img figure,
#lesson .show .img picture{ opacity: 1;}
@media (max-width: 1001px) {
	#lesson .bloc { padding: 30px 0;}
	#lesson .ctn.lesson-1 { padding-left: 50px;}
	#lesson .ctn.lesson-2 { padding-left: 20px; padding-right: 20px;}
	#lesson .ctn.lesson-3 { padding-right: 50px;}
	#lesson .ctn.lesson-4 { padding-right: 50px;}
	#lesson .ctn.lesson-5 { padding-left: 50px;}
	#lesson .ctn.lesson-6 { padding-left: 50px;}
	#lesson .ctn .descript { padding: 0 40px;}
	#lesson .ctn.lesson-4 .descript{ padding-left: 40px;}
	#lesson .ctn .descript .tit { margin-bottom: 40px;}
}
@media (max-width: 801px) {
	#lesson .ttl { padding-left: 0px;}
	#lesson .read { margin: 0 auto; padding: 30px 0;}
	#lesson .ctn.lesson-1 { padding-left: 0px;}
	#lesson .ctn.lesson-3 { padding-right: 0px;}
	#lesson .ctn.lesson-5 { padding-left: 0px;}
	#lesson .ctn .descript .tit dl { display: flex; justify-content: space-between; align-items: center;}
	#lesson .ctn.lesson-1 .descript .tit dl,
	#lesson .ctn.lesson-3 .descript .tit dl,
	#lesson .ctn.lesson-5 .descript .tit dl{ flex-direction: row-reverse;}

	#lesson .ctn .descript .tit { margin-bottom: 12px;}
	#lesson .ctn .descript .tit dl dt { width: 60px; margin-bottom: 0px; font-size: 50px; text-align: center;}
	#lesson .ctn .descript .tit dl dt:after { width: 52px; margin: 10px auto 0;}
	#lesson .ctn .descript .tit dl dd { width: auto;}
	#lesson .ctn .descript .txt p { line-height: 1.8;}
	#lesson .ctn .descript .txt p span { margin-bottom: 8px; font-size: 16px;}
	#lesson .ctn.lesson-2 .descript .txt p span,
	#lesson .ctn.lesson-4 .descript .txt p span,
	#lesson .ctn.lesson-6 .descript .txt p span { text-align: right;}
}
@media (max-width: 641px) {
	#lesson .ctn { display: block;}
	#lesson .ctn.lesson-2 { padding-left: 0px; padding-right: 0px;}
	#lesson .ctn.lesson-4 { padding-right: 0px;}
	#lesson .ctn.lesson-6 { padding-left: 0px;}
	#lesson .ctn .img { width: 100%;}
	#lesson .ctn .descript { width: 100%; padding: 40px 40px 0;}
	#lesson .ctn.lesson-2 .img { width: 100%;}
	#lesson .ctn.lesson-2 .descript { width: 100%;}
	#lesson .ctn.lesson-4 .descript { padding: 40px 40px 0;}
}
@media (max-width: 481px) {
	#lesson .bloc { padding: 20px 0;}
	#lesson .read { padding: 30px 0px 10px;}
	#lesson .read p { font-size: 14px;}
	#lesson .ctn .descript { width: 100%; padding: 30px 30px 0;}
	#lesson .ctn .descript .txt p span { margin-bottom: 12px;}
}


#column { position: relative; background: #fff;}
#column .inner-sct { position: relative; padding: 20px 0px 50px;}
#column .inner-sct:after { content: ''; display: block; width: 100%; height: calc( 100% - 68px ); background: #E0E7E8; z-index: 1;
 position: absolute; left: 0; bottom: 0;
}
#column .ttl { margin-bottom: 40px; padding-left: 24px; z-index: 2;}
#column .ctn { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; z-index: 2; transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
#column .ctn .slider-column { margin-bottom: 40px;}
#column .ctn .slider-column a { display: block; width: 92%; max-width: 320px; margin: 0 auto; color: #000; text-decoration: none; transition: 0.3s ease;}
#column .ctn .slider-column a:hover { opacity: 0.5;}
#column .ctn .slider-column a dl dt { margin-bottom: 20px; overflow: hidden;}
#column .ctn .slider-column a dl dt span { position: relative; display: block; width: 100%; padding-top: 80%; background: #eee;}
#column .ctn .slider-column a dl dt span img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-height: 100%; }
#column .ctn .slider-column a dl dd { font-size: 14px;}
#column .ctn .slider-column a dl dd span { display: block; font-size: 18px;}
#column .btn-more { width: 100%; padding: 0 10px;}
#column .btn-more div { margin: 0 0 0 auto;}
#column .ctn.show { opacity: 1;}
@media (max-width: 801px) {
	#column .ttl { margin-bottom: 60px; padding-left: 0px;}
	#column .ctn .slider-column a { width: 92%; max-width: 400px;}
	#column .btn-more { width: 90%; max-width: 1000px; margin: 0 auto; padding: 0;}
}
@media (max-width: 481px) {
	#column .inner-sct:after { height: calc( 100% - 50px );}
	#column .ttl { margin-bottom: 80px;}
}


#instructor { background: #E0E7E8;}
#instructor .inner-sct { padding: 50px 0px;}
#instructor .ttl { margin-bottom: -40px; z-index: 2;}
#instructor .ttl h2 { text-align: right;}
#instructor .outer { position: relative; width: 100%; padding: 120px 0 60px;}
#instructor .outer:after { content: ''; display: block; width: 86%; height: 100%; background: #fff;
 position: absolute; left: 0; bottom: 0; box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
#instructor .ctn { position: relative; z-index: 2; width: 100%; max-width: 1040px; margin: 0 auto; padding-left: 40px; padding-right: 100px;
 transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;
}
#instructor .slider-instructor {}
#instructor .slider-instructor dl { width: 100%; padding: 0 20px;}
#instructor .slider-instructor dl dt { margin-bottom: 20px;}
#instructor .slider-instructor dl dt figure { display: block; width: 92%; max-width: 160px; margin: 0 auto; border-radius: 50%; overflow: hidden;}
#instructor .slider-instructor dl dt figure img { width: 100%;}
#instructor .slider-instructor dl dd.name { font-size: 18px; text-align: center;}
#instructor .slider-instructor dl dd.studio { margin-bottom: 30px; font-size: 16px; text-align: center;}
#instructor .slider-instructor dl dd.txt { font-size: 14px; }
#instructor.show .ctn { opacity: 1;}
@media (max-width: 1201px) {
	#instructor .outer { padding: 80px 0 40px;}
	#instructor .outer:after { width: calc(100% - 80px);}
}
@media (max-width: 641px) {
	#instructor .inner-sct { padding: 60px 0px;}
	#instructor .ttl { margin-bottom: -6vw;}
	#instructor .outer:after { width: calc(100% - 60px);}
	#instructor .slider-instructor .slick-list { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#instructor .inner-sct { padding: 40px 0px;}
	#instructor .outer:after { width: 88%; left: 50%; transform: translateX(-50%);}
	#instructor .ctn { width: 88%; padding: 0px;}
	#instructor .outer { padding: 45px 0 12px;}

	#instructor .slider-instructor .slick-list { margin-bottom: 12px;}
	#instructor .slider-instructor dl dt { margin-bottom: 12px;}
	#instructor .slider-instructor dl dd.name { font-size: 15px;}
	#instructor .slider-instructor dl dd.studio { margin-bottom: 20px; font-size: 14px;}
	#instructor .slider-instructor dl dd.txt { font-size: 12px; }
}


#voice { position: relative; background: #fff;}
#voice .inner-sct { position: relative; padding: 50px 0px;}
#voice .inner-sct:before{ content: ''; display: block; width: 100%; padding-top: 500px; position: absolute; left: 0; top: -10px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="600" viewBox="0 0 1400 600"><path d="M700,600c301.21,0,563.53-33.24,700-82.35V0S0,0,0,0v517.65c136.47,49.11,398.79,82.35,700,82.35Z" fill="%23e0e7e8"/></svg>');
 background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 100%;
}
#voice .ttl { position: relative; margin-bottom: 40px; z-index: 2;}
#voice .ctn { transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
#voice .slider-voice { width: 100%; max-width: 1024px; margin: 0 auto 20px; padding: 0px 0px;}
#voice .box { width: 92%; max-width: 400px; margin: 0 auto; padding: 30px 0 20px; border-radius: 20px; background: #F1F0F0;}
#voice .box h4 { font-size: 14px; text-align: center;}
#voice .box .tit { position: relative; padding: 20px 0 10px; }
#voice .box .tit:before { content: ''; display: block; width: 30px; height: 1px; margin: 0 auto 20px; background: #776F6B;}
#voice .box .tit p { color: #776F6B; font-size:18px; text-align: center;}
#voice .box .txt { min-height: 310px; padding: 10px 30px 0px;}
#voice .box .txt p { font-size:14px; line-height: 1.8;}
#voice .note { width: 88%; max-width: 1024px; margin: 0 auto;}
#voice .note ul { max-width: 320px; margin: 0 0 0 auto;}
#voice .ctn.show { opacity: 1;}
@media (max-width: 1401px){
	#voice .inner-sct:before{ background-size: 1400px auto;}
}
@media (max-width: 801px){
	#voice .inner-sct:before{ padding-top: 120%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1200" viewBox="0 0 800 1200"><path d="M400,1200c165.16,0,311.23-34.12,400-86.39V0H0v1113.61c88.77,52.27,234.84,86.39,400,86.39Z" fill="%23e0e7e8"/></svg>');
		background-size: 100% auto;
	}
	#voice .slider-voice { margin: 0 auto;}
	#voice .box .txt { min-height: 270px;}
}
@media (max-width: 641px) {
	#voice .box { width: 88%; }
	#voice .note ul { max-width: 320px; margin: 0;}
}
@media (max-width: 481px) {
	#voice .inner-sct { padding: 40px 0px;}
	#voice .ttl h2 { text-align: center;}
	#voice .box .tit p { font-size: 16px;}
	#voice .box .txt p { font-size: 13px;}
}



#faq { position: relative; background: #fff;}
#faq .inner-sct { padding: 70px 0px;}
#faq .ttl { position: relative; margin-bottom: 40px; padding-left: 24px;}
#faq .ctn { transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
#faq .btn-more {transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
#faq .btn-more div { margin: 0 0 0 auto;}
#faq .ctn.show { opacity: 1;}
#faq .btn-more.show { opacity: 1;}
@media (max-width: 801px){
	#faq .ttl { margin-bottom: 30px; padding-left: 0px;}
}

#instagram { position: relative; background: #fff;}
#instagram .inner-sct { padding: 90px 0px 180px;}
#instagram .ttl { margin-bottom: 40px; padding: 0 12px;}
#instagram .ttl h2 { text-align: right;}
#instagram .ctn { width: 90%; max-width: 1000px; margin: 0 auto; transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
#instagram .ctn.show { opacity: 1;}
@media (max-width: 481px) {
	#instagram .inner-sct { padding: 40px 0 80px;}
	#instagram .ttl { margin-bottom: 20px; padding: 0px;}
	#instagram .ttl h2 { text-align: center;}
}


#otherbrands { position: relative; background: #fff;}
#otherbrands .inner-sct { position: relative; padding: 0 0 90px;}
#otherbrands .inner-sct:after { content: ''; display: block; width: 100%; height: calc( 100% - 48px ); background: #F1F0F0; z-index: 1;
 position: absolute; left: 0; bottom: 0;
}
#otherbrands .ttl { margin-bottom: 80px; z-index: 2;}
#otherbrands .ctn { position: relative; z-index: 2;}
#otherbrands .ctn ul li { transition: 1.2s cubic-bezier(.4,.4,0,1); opacity: 0;}
#otherbrands .ctn.show ul li { opacity: 1;}
@media (max-width: 801px) {
	#otherbrands .ttl h2 { font-size: 12vw;}
}
@media (max-width: 641px) {
	#otherbrands .inner-sct { padding: 0 0 60px;}
	#otherbrands .ttl { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#otherbrands .inner-sct { padding: 0 0 40px;}
	#otherbrands .inner-sct:after { height: calc( 100% - 24px );}
}


#recruit-bnr { transition: .6s cubic-bezier(.4,.4,0,1); opacity: 0;}
#recruit-bnr.show { opacity: 1;}