@charset "utf-8";
@import url("base.css");

.ttl { text-align: center; transition: 0.6s ease-in; opacity: 0;}
.ttl h2 { color: #677374; font-size: 35px; font-weight: 300; letter-spacing: 0.26rem; line-height: 1;}
.ttl h2 svg { display: inline-block; width: 26px; margin-right: 6px; fill: #344446; vertical-align: baseline;}
.ttl h2 span{ display: inline-block; vertical-align: baseline;}
.ttl.show { opacity: 1;}
@media (max-width: 801px) {
	.ttl h2 { font-size: 24px;}
}
@media (max-width: 481px) {
	.ttl h2 svg { width: 20px;}
}

.btn-more { text-align: right;}
.btn-more a { position: relative; display: inline-block; padding: 10px 0 6px; padding-right: 160px;
 color: #000; font-size: 14px; line-height: 1; text-align: right; text-decoration: none;
}
.btn-more a::before,
.btn-more a::after { content: ''; display: block; position: absolute; transition: 0.3s ease;}
.btn-more a::before{ width: 130px; height: 8px; top: 30%; right: 34px; z-index: 2;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 8.5"><polygon points="139.77 8.54 0 8.54 0 7.48 137.17 7.48 121.91 .98 122.32 0 139.98 7.52 139.77 8.54" fill="%23070203"/></svg>');
 background-size: auto 100%; background-repeat: no-repeat; background-position: 100% 50%;
}
.btn-more a::after { width: 68px; height: 68px; background: #EDECEC; border-radius: 50%;
 right: 0; top: 50%; transform: translateY(-50%); z-index: 1;
}
.btn-more a span { position: relative; display: inline-block; padding: 0 12px 0; background: #fff; z-index: 3; letter-spacing: 0.1rem; transition: 0.3s ease;}
.btn-more a:hover:after { background: #DFDDDC;}
.btn-more a:hover:before { opacity: 0.4;}
.btn-more a:hover span { opacity: 0.6;}
@media (max-width: 481px) {
	.btn-more a { padding: 6px 0; padding-right: 90px;}
	.btn-more a:before{ width: 80px; height: 6px; right: 24px;}
	.btn-more a:after { width: 50px; height: 50px;}
	.btn-more a span { padding: 0 8px 0 0;}
}

.fix-sp ul li.exp a { background: #d2a7a5;}
.fix-sp ul li.reserve a { background: #B1AD9D;}
.fix-sp ul li.exp a:hover,
.fix-sp ul li.exp a:active{ background: #D6C1C0;}
.fix-sp ul li.reserve a:hover,
.fix-sp ul li.reserve a:active{ background: #D6D4CB;}

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


.bg-circle { position: relative; z-index: -1; width: 100%; max-width: 1400px; margin: 0 auto;}
.bg-circle .circle { position: absolute; margin: auto; opacity: 0.15;
	border-radius: 55% 45% 60% 40% / 66% 32% 60% 40%;
	animation-name: corners, rotate;
	animation-duration: 50s, 40s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes corners {
  0%   { border-radius: 55% 45% 60% 40% / 66% 32% 60% 40%; }
  25%  { border-radius: 33% 67% 44% 56% / 44% 56% 44% 60%; }
  50%  { border-radius: 40% 70% 37% 63% / 55% 40% 70% 45%; }
  75%  { border-radius: 53% 47% 53% 47% / 37% 63% 37% 51%; }
  100% { border-radius: 55% 45% 60% 40% / 66% 32% 60% 40%; }
}
@keyframes rotate {
  0%   { transform: rotate(0deg);}
  100% { transform: rotate(360deg)}
}

.spacer { width: 100%; opacity: 0; transition: 0.8s linear;}
.spacer:before { content: ''; display: block; width: 100%; height: 500px; background: #000; opacity: 0.4;}
.spacer.pht-1 { background:url('/images/yoga/top/spacer-1.jpg') no-repeat 50% 50% / cover;}
.spacer.pht-2 { background:url('/images/yoga/top/spacer-2.jpg') no-repeat 50% 50% / cover;}
.spacer.show { opacity: 1;}
@media (max-width: 801px) {
	.spacer:before { height: 360px;}
}
@media (max-width: 481px) {
	.spacer:before { height: 240px;}
}

#kv-yoga { background: #f5f4f4;}
#kv-yoga .inner-kv { position: relative;}
#kv-yoga .ctn { position: absolute; left: 0; top: 50%; transform: translateY(-52%); width: 100%; z-index: 10;}
#kv-yoga .ctn .txt { width: 92%; max-width: 1200px; margin: 0 auto; transition: 0.6s linear 0.2s; opacity: 0;}
#kv-yoga .ctn .txt h1 img { width: 50%; max-width: 500px;}
#kv-yoga .bg-kv { position: relative; width: 100%;/* max-width: 1600px; */ margin: 0 auto;}
#kv-yoga .bg-kv picture { display: block; width: 100%;}
#kv-yoga .bg-kv picture img { width: 100%;}
#kv-yoga .bg-kv .kv-slider { display: none;}
#kv-yoga .bg-kv figure { display: block; width: 100%;}
#kv-yoga .bg-kv figure img { width: 100%;}
#kv-yoga.show .ctn .txt { opacity: 1;}
@media (max-width: 801px) {
	#kv-yoga .ctn { display: none;}
	#kv-yoga .bg-kv .kv-slider { display: block;}
}

#kv-yoga .css-slider { position: relative; width: 100%; overflow: hidden; z-index: 1;}
#kv-yoga .css-slider:after { content: ''; display: block; width: 100%; height: 700px;}
#kv-yoga .css-slider div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; opacity: 0;
 background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;
}
#kv-yoga .css-slider div.kv-1 { background-image: url('/images/yoga/top/kv-1.jpg'); animation: css-slide 24s infinite;}
#kv-yoga .css-slider div.kv-2 { background-image: url('/images/yoga/top/kv-2.jpg'); animation: css-slide 24s infinite; animation-delay: 8s;}
#kv-yoga .css-slider div.kv-3 { background-image: url('/images/yoga/top/kv-3.jpg'); animation: css-slide 24s infinite; animation-delay: 16s;}
@keyframes css-slide {
  0% { opacity: 0;}
 20% { opacity: 1;}
 80% { opacity: 0; transform: scale(1.2) ;}
100% { opacity: 0; z-index:9;}
}
@media (max-width: 801px) {
	#kv-yoga .css-slider { display: none;}
}


#lead .inner-sct { padding: 130px 0 50px;}
#lead .ctn { position: relative; width: 88%; max-width: 1000px; margin: 0 auto; transition: 0.6s ease-in; opacity: 0;}
#lead .ctn.mb { margin-bottom: -72px;}
#lead .ctn .flex { display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center;}
#lead .ctn .txt { position: relative; width: 45%;}
#lead .ctn .txt.wide { width: 100%; margin-bottom: -30px;}
#lead .ctn .img { width: 44%;}
#lead .ctn .txt .tit { position: relative; margin-bottom: 80px;}
#lead .ctn .txt .tit h2 picture { display: block; width: 100%; max-width: 368px;}
#lead .ctn .txt .tit h2 picture img { width: 100%;}
#lead .ctn .txt p { font-size: 16px; letter-spacing: 0.1rem; line-height: 2;}
#lead .ctn .txt p.mb { margin-bottom: 20px;}
#lead .ctn .txt p span.pcbr { display: block;}
#lead .ctn .txt p br.sp { display: none;}
#lead .ctn .img picture { display: block; width: 100%; }
#lead .ctn .img picture img { width: 100%;}
#lead .img-wide { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; opacity: 0; transition: 0.6s ease-in;}
#lead .img-wide picture { display: block; width: 38%; max-width: 380px; margin: 0 0 0 auto;}
#lead .img-wide figure { position: absolute; left: 20%; top: 50%; transform: translateY(-35%); width: 32%; max-width: 320px;}
#lead .img-wide picture img,
#lead .img-wide figure img { width: 100%;}
#lead .img-sp { display: none; width: 100%; max-width: 1000px; margin: 0 auto;}
#lead .img-sp figure img{ width: 100%;}

#lead .bg-circle .circle-1 { background-image: radial-gradient(#EDEAE7 0%, #A93E48 100%); left: -200px; top: -800px; width: 280px; padding: 300px;}
#lead .bg-circle .circle-2 { background-image: radial-gradient(#F7F7F6 0%, #B0C6C9 100%); right: -200px; top: 80px; width: 180px; padding: 200px;}

#lead .ctn.show { opacity: 1;}
#lead .img-wide.show { opacity: 1;}
@media (max-width: 1001px){
	#lead .ctn .txt.wide { margin-bottom: 0px;}
}
@media (max-width: 801px) {
	#lead .inner-sct { padding: 80px 0px;}
	#lead .ctn { width: 100%;}
	#lead .ctn.mb { margin-bottom: 60px;}
	#lead .ctn .flex { display: block;}
	#lead .ctn .txt { width: 88%; margin: 0 auto;}
	#lead .ctn .txt.wide { width: 88%; margin: 0 auto; padding: 60px 0;}

	#lead .ctn .txt .tit { margin-bottom: 60px; padding-left: 60%;}
	#lead .ctn .txt .tit:before { content: ''; display: block; width: 58%; padding-top: 85%; background: url('/images/yoga/top/pht-1.png') no-repeat 50% 50% / 100% auto;
	 position: absolute; left: 0; top: 0;
	}
	#lead .ctn .txt .tit h2 { text-align: center;}
	#lead .ctn .txt .tit h2 picture { width: 50%; margin: 0 auto;}

	#lead .ctn .img { display: none;}
	
	#lead .img-wide picture { width: 100%; max-width: 100%; margin: 0 auto;}
	#lead .img-wide figure { display: none;}
	
	#lead .img-sp { display: block; margin-bottom: 40px;}
	#lead .right { width: 88%; margin: 0 auto;}
}
@media (max-width: 481px) {
	#lead .inner-sct { padding: 40px 0px;}
	#lead .ctn.mb { margin-bottom: 40px;}
	#lead .ctn .txt.wide { padding: 40px 0;}
	#lead .ctn .txt .tit { margin-bottom: 40px;}
	#lead .ctn .txt p { font-size: 15px; letter-spacing: 0.05rem; line-height: 1.8;}
	#lead .ctn .txt p span { display: block;}
	#lead .ctn .txt p span.pcbr { display: inline;}
	#lead .ctn .txt p br.sp { display: block;}
	#lead .bg-circle .circle-1 { left: -150px; top: -500px; width: 130px; padding: 150px;}
	#lead .bg-circle .circle-2 { right: -60px; top: 80px; width: 80px; padding: 100px;}

}


#news .inner-sct { padding: 130px 0;}
#news .box { width: 100%; max-width: 1200px; margin: 0 auto; padding: 70px 0; background: #F1F0F0; opacity: 0; transition: 0.6s ease-in;}
#news .box .ttl { margin-bottom: 50px;}
#news .box ul { width: 90%; max-width: 1000px; margin: 0 auto;}
#news .box ul li { position: relative; padding: 15px 0; padding-left: 230px; border-bottom: solid 1px #B7B2B0; font-size: 14px;}
#news .box ul li:last-child { border-bottom: none;}
#news .box ul li time { position: absolute; left: 0; top: 15px; color: #676767;}
#news .box ul li span.tag { display: block; width: 82px; padding: 6px 0 3px; border-radius: 50px;
 position: absolute; left: 120px; top: 14px;
 color: #fff; line-height: 1; letter-spacing: 0.08rem; text-align: center;
}
#news .box ul li span.news-y { background: #bccece !important;}
#news .box ul li span.topix-y{ 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.show .box { opacity: 1;}
@media (max-width: 801px) {
	#news .inner-sct { padding: 80px 0;}
	#news .box { padding: 50px 0;}
	#news .box .ttl { margin-bottom: 30px;}
}
@media (max-width: 641px) {
	#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: 40px 0 80px;}
	#news .box .ttl { margin-bottom: 20px;}
}

#campaign { position: relative; background: linear-gradient(120deg,#DEA0A0,#E8E7DE); opacity: 0; transition: 0.6s ease-in;}
#campaign #cp { position: absolute; top: -100px;}
#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 .inner-sct { padding: 140px 0;}
#trial .outer { margin-bottom: 90px; opacity: 0; transition: 0.6s ease-in;}
#trial .step { width: 86%; max-width: 1000px; margin: 0 auto 120px; opacity: 0; transition: 0.6s ease-in;}
#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: #677374; font-size: 23px; font-weight: 300; letter-spacing: 0.26rem; 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 { opacity: 0; transition: 0.6s ease-in;}
#trial.show .outer { opacity: 1;}
#trial .step.show { opacity: 1;}
#trial .btn-exp.show { opacity: 1;}
#trial .bg-circle .circle { background-image: radial-gradient(#EDEAE7 0%, #A93E48 100%); left: -80px; top: 100px; width: 200px; padding: 200px;}
@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;}
	#trial.show .ttl { opacity: 1;}

}
@media (max-width: 481px) {
	#trial .inner-sct { padding: 60px 0;}
	#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;}
	#trial .bg-circle .circle { left: 20px; top: -60px; width: 80px; padding: 80px;}
}


#price { opacity: 0; transition: 0.6s ease-in;}
#price .inner-sct { padding: 80px 0px 120px;}
#price .ttl { margin-bottom: 30px;}
#price .read { width: 88%; margin: 0 auto 50px; text-align: center;}
#price .read h3 { margin-bottom: 30px; color: #776F6B; font-size: 18px; font-weight: 700;}
#price .read h3 span { display: inline-block; padding: 0 0 2px; border-bottom: solid 2px #776F6B;}
#price .read p { font-size: 15px; letter-spacing: 0.08rem; line-height: 2.2;}
#price .bloc { border-top: solid 1px #000; border-bottom: solid 1px #000;}
#price .bloc.bottom { margin-bottom: 60px; border-top: none;}
#price .bloc .ctn { }
#price .ctn .plan-tit { padding: 10px 0; border-bottom: solid 1px #000;}
#price .ctn .plan-tit h4 { font-size: 16px; letter-spacing: 0.1rem; text-align: center;}
#price .ctn .plan-tit h4 span { margin-left: 4px; font-size: clamp(20px,2.6vw,26px);}
#price .ctn .flex-3,
#price .ctn .flex-4 { display: flex; justify-content: space-between; width: 92%; max-width: 1000px; margin: 0 auto; padding: 10px 0;}
#price .ctn .flex-3 .box { width: 33%; padding: 20px 0 40px; border-left: solid 1px #000;}
#price .ctn .flex-4 .box { width: 25%; padding: 30px 0 40px; border-left: solid 1px #000;}
#price .ctn .box:first-child { border-left: none;}
#price .ctn .box p { margin-bottom: 20px; text-align: center;}
#price .ctn .box p img { width: 88%; max-width: 250px;}
#price .ctn .box dl { text-align: center;}
#price .ctn .box dl dt { margin-bottom: 20px; font-size: 14px; letter-spacing: 0.08rem;}
#price .ctn .box dl dt span { display: block; width: 90%; max-width: 160px; margin: 0 auto 20px; padding: 10px 0px; background: #eee; border-radius: 50px;
 font-size: 16px; font-weight: 700;
}
#price .ctn .box dl dt span { background: #DFDDDC;}
#price .ctn.ticket .box dl dt span { background: #E0E7E8;}

#price .ctn .box dl dd { font-size: 16px; letter-spacing: 0.08rem;}
#price .ctn .box dl dd span{ display: block;}
#price .ctn .box dl dd span.price em { font-size: 23px; font-weight: 700;}
#price .btn-more { width: 90%; max-width: 1000px; margin: 0 auto;}
#price.show { opacity: 1;}
@media (max-width: 801px) {
	#price .inner-sct { padding: 60px 0px 80px;}
	#price .read p { font-size: 15px; letter-spacing: 0.05rem; line-height: 1.8; text-align: left;}
}
@media (max-width: 641px) {
	#price .ctn .flex-3,
	#price .ctn .flex-4 { display: block; padding: 0;}
	#price .ctn .flex-3 .box { width: 100%; border-left: none; padding: 20px 0 0;}
	#price .ctn .flex-4 .box { width: 100%; border-left: none; padding: 20px 0 0;}
	#price .ctn .box:last-child { padding-bottom: 20px;}
	#price .ctn .box::after { content: ''; display: block; width: 85%; height: 1px; background: #C3C3C3; margin: 20px auto 0;}
	#price .ctn .box:last-child:after  { content: none;}
	#price .ctn .box dl { display: table; width: 100%; max-width: 400px; margin: 0 auto;}
	#price .ctn .box dl dt,
	#price .ctn .box dl dd { display: table-cell; vertical-align: middle;}
	#price .ctn .box dl dt { margin-bottom: 0px; width: 40%;}
	#price .ctn .box dl dt span { margin-bottom: 6px; padding: 2px 0px;}
	#price .ctn .box dl dd { width: 60%;}
}
@media (max-width: 481px) {
	#price .inner-sct { padding: 40px 0px 60px;}

	#price .ttl { margin-bottom: 20px;}
	#price .read { margin-bottom: 30px;}
	#price .read h3 { margin-bottom: 20px; font-size: 15px;}
	#price .read p { font-size: 13px;}
	#price .bloc.bottom { margin-bottom: 30px; border-top: none;  border-bottom: none;}
	#price .bloc .ctn { }
	#price .ctn .plan-tit { padding: 10px 0; border-bottom: solid 1px #000;}
	#price .ctn .plan-tit h4 { font-size: 14px; letter-spacing: 0.08rem;}
	#price .ctn .plan-tit h4 span { font-size: 15px}

	#price .ctn .box p { margin-bottom: 12px;}
	#price .ctn .box dl { display: table; width: 100%; max-width: 240px;}
	#price .ctn .box dl dt { font-size: 11px;}
	#price .ctn .box dl dt span { width: 100px; margin-bottom: 6px; padding: 2px 0px; font-size: 13px;}
	#price .ctn .box dl dd { font-size: 11px;}
	#price .ctn .box dl dd span { text-align: right;}
}



#studio { background: #f7f6f6; opacity: 0; transition: 0.6s ease-in;}
#studio .inner-sct { padding: 80px 0;}
#studio .ttl { margin-bottom: 30px;}
#studio .ctn { display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: flex-end; width: 90%; max-width: 1000px; margin: 0 auto;}
#studio .pht { width: 38%;}
#studio .txt { width: 56%;}
#studio .pht picture { display: block; width: 100%;}
#studio .pht picture img { width: 100%;}
#studio .txt h3 { display: none;}
#studio .txt p { margin-bottom: 50px; padding-left: 15px; font-size: 15px; letter-spacing: 0.1rem;}
#studio .txt p img { width: 80%; max-width: 340px;}
#studio .txt ul { margin-bottom: 40px; font-size: 0;}
#studio .txt ul li { display: inline-block; width: 33%; padding: 12px; font-size: 18px; line-height: 1;}
#studio .txt ul li a { display: block; width: 100%; margin: 0 auto; padding: 15px 0; border: solid 1px #7f7f7f; border-radius: 50px;
 color: #000; letter-spacing: 0.1rem; text-align: center; text-decoration: none; transition: 0.3s ease;
}
#studio .txt ul li a:hover { background: #DFDDDC; border-color: #DFDDDC;}
#studio .btn-more a span {background: #f5f4f4;}
#studio.show { opacity: 1;}
@media (max-width: 801px) {
	#studio .inner-sct { padding: 0px;}
	#studio .ttl { display: none;}
	#studio .ctn { display: block; width: 100%;}
	#studio .pht { width: 100%;}
	#studio .txt { width: 88%; margin: 0 auto; padding: 40px 0 60px;}
	#studio .txt h3 { display: block; margin-bottom: 40px; color: #677374; font-size: 24px; font-weight: 300; letter-spacing: 0.1rem; line-height: 1; text-align: center;}
	#studio .txt p { margin-bottom: 60px; padding-left: 8px; font-size: 15px; letter-spacing: 0.05rem; line-height: 1.8;}
	#studio .txt ul { margin-bottom: 20px;}
	#studio .txt ul li { padding: 8px;}
}
@media (max-width: 481px) {
	#studio .txt h3 { margin-bottom: 30px;}
	#studio .txt p { margin-bottom: 30px; padding-left: 5px; font-size: 13px; letter-spacing: 0.05rem;}
	#studio .txt ul { margin-bottom: 12px;}
	#studio .txt ul li { width: 50%; padding: 5px; font-size: 14px;}
	#studio .txt ul li a { padding: 12px 0;}
}


#lesson {}
#lesson .inner-sct { padding: 140px 0;}
#lesson .ttl { margin-bottom: 30px;}
#lesson .read { width: 88%; margin: 0 auto; margin-bottom: 20px; transition: 0.6s ease-in; opacity: 0;}
#lesson .read p { font-size: 15px; letter-spacing: 0.08rem; text-align: center;}
#lesson .bloc { padding: 36px 0; transition: 0.6s ease-in; opacity: 0;}
#lesson .outer{ position: relative; width: 100%; max-width: 1420px; margin: 0 auto;}
#lesson .outer .image { position: absolute; left: 0; top: 0; width: 32%; max-width: 460px;}
#lesson .outer .image .movie {}
#lesson .outer .image .movie video { width: 100%; vertical-align: bottom;}
#lesson .ctn { display: flex; justify-content: space-between; width: 94%; max-width: 1000px; margin: 0 auto;}
#lesson .ctn:before { content: ''; display: block; width: 30%; padding-top: 36%;}
#lesson .ctn .detail { width: 70%;}
#lesson .ctn .detail .tit { margin-bottom: 50px; padding: 8px 0; border-top: solid 1px #000; border-bottom: solid 1px #000;}
#lesson .ctn .detail .tit dl { display: flex; justify-content: space-between; align-items: center; width: 100%;}
#lesson .ctn .detail .tit dl dt,
#lesson .ctn .detail .tit dl dd { font-size: 14px; vertical-align: middle;}
#lesson .ctn .detail .tit dl dt { width: 230px; color: #cf9491; text-align: center; order: 1;}
#lesson .ctn .detail .tit dl dt span { display: block; font-size: clamp(21px,3.0vw,30px); font-weight: 300; letter-spacing: 0.2rem; line-height: 1.4;}
#lesson .ctn .detail .tit dl dd.lv { width: 150px; text-align: center; order: 3;}
#lesson .ctn .detail .tit dl dd.descript { width: calc( 100% - 380px ); padding: 20px; border-left: solid 1px #000; border-right: solid 1px #000; line-height: 2; order: 2;}
#lesson .ctn .detail .txt ul { display: flex; justify-content: space-between;}
#lesson .ctn .detail .txt ul li { width: 48%;}
#lesson .ctn .detail .txt ul li dl dt { margin-bottom: 5px; font-size: 18px; font-weight: 700;}
#lesson .ctn .detail .txt ul li dl dd { letter-spacing: 0.06rem; line-height: 1.8;}
#lesson .read.show,
#lesson .bloc.show { opacity: 1;}

#lesson .bg-circle .circle-1 { background-image: radial-gradient(#F7F7F6 0%, #B0C6C9 100%); right: -200px; top: -150px; width: 250px; padding: 250px;}
@media (max-width: 1201px) {
	#lesson .ctn:before { width: 32%; padding-top: 36%;}
	#lesson .ctn .detail { width: 68%;}
}
@media (max-width: 1001px) {
	#lesson .ctn:before { width: 33%; padding-top: 36%;}
	#lesson .ctn .detail { width: 66%;}
	#lesson .ctn .detail .tit dl dt { width: 20vw;}
	#lesson .ctn .detail .tit dl dd.lv { width: 14vw;}
	#lesson .ctn .detail .tit dl dd.descript { width: calc( 100% - 34vw ); padding: 12px;}
}
@media (max-width: 801px) {
	#lesson .inner-sct { padding: 100px 0;}
	#lesson .outer .image { position: relative; left: auto; top: auto; width: 100%; max-width: 100%;}
	#lesson .ctn { display: block; width: 88%;}
	#lesson .ctn:before { content: none;}
	#lesson .ctn .detail { width: 100%; padding-top: 40px;}
	#lesson .ctn .detail .tit { margin-bottom: 30px;}
	#lesson .ctn .detail .tit dl dt { width: 180px;}
	#lesson .ctn .detail .tit dl dd.descript { width: calc( 100% - 330px ); padding: 12px;}
	#lesson .ctn .detail .tit dl dd.lv { width: 150px;}
}
@media (max-width: 641px) {
	#lesson .read { margin-bottom: 0;}
	#lesson .read p { text-align: left;}
	#lesson .ctn .detail .tit { margin-bottom: 30px; padding: 0px; border-top: 0px;}

	#lesson .ctn .detail .tit dl { display: block;}
	#lesson .ctn .detail .tit dl dt,
	#lesson .ctn .detail .tit dl dd { display: block;}
	#lesson .ctn .detail .tit dl dt { width: 100%;}
	#lesson .ctn .detail .tit dl dd.lv { width: 100%; padding-top: 20px; text-align: center;}
	#lesson .ctn .detail .tit dl dd.descript { width: 100%; padding: 20px 0 30px; border: 0px; line-height: 1.8;}
}
@media (max-width: 481px) {
	#lesson .inner-sct { padding: 40px 0;}
	#lesson .bloc { padding: 20px 0;}
	#lesson .ctn .detail .tit { margin-bottom: 8px;}
	#lesson .ctn .detail .tit dl dd.lv { padding-top: 12px;}
	#lesson .ctn .detail .tit dl dd.descript { padding: 16px 0;}
	#lesson .ctn .detail .txt ul { display: block;}
	#lesson .ctn .detail .txt ul li { width: 100%; padding: 15px 0;}
	#lesson .ctn .detail .txt ul li dl dt { font-size: 15px;}
	#lesson .ctn .detail .txt ul li dl dd { font-size: 13px; line-height: 1.65;}
	#lesson .bg-circle .circle-1 { right: -50px; top: 800px; width: 100px; padding: 100px;}
}


#column { opacity: 0; transition: 0.6s ease-in;}
#column .inner-sct { padding: 100px 0px 80px;}
#column .ttl { margin-bottom: 40px;}
#column .ctn { width: 100%; max-width: 1000px; margin: 0 auto;}
#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 dt span img.logo { width: 80%; height: auto;}
#column .ctn .slider-column a dl dd { font-size: 14px;}
#column .ctn .slider-column a dl dd span { display: block; font-size: 18px;}
#column.show { opacity: 1;}
#column .bg-circle .circle-1 { background-image: radial-gradient(#EDEAE7 0%, #A93E48 100%); left: -200px; top: -100px; width: 230px; padding: 250px;}
@media (max-width: 801px) {
	#column .ctn .slider-column a { width: 92%; max-width: 400px;}
	#column .btn-more { width: 90%; max-width: 1000px; margin: 0 auto;}
}
@media (max-width: 481px) {
	#column .ttl { margin-bottom: 20px;}
	#column .bg-circle .circle-1 { left:-80px; top: -140px; width: 80px; padding: 100px;}
}


#instructor {  background: #F1F0F0; opacity: 0; transition: 0.6s ease-in;}
#instructor .inner-sct { padding: 80px 0px;}
#instructor .ttl { margin-bottom: 40px;}
#instructor .ctn { width: 100%; max-width: 1040px; margin: 0 auto;}
#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 { opacity: 1;}
@media (max-width: 641px) {
	#instructor .inner-sct { padding: 60px 0px;}
	#instructor .inner-sct { padding: 60px 0px;}
	#instructor .slider-instructor .slick-list { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#instructor .inner-sct { padding: 40px 0px;}
	#instructor .ttl { margin-bottom: 30px;}
	#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 { opacity: 0; transition: 0.6s ease-in;}
#voice .inner-sct { padding: 100px 0 60px;}
#voice .ttl { margin-bottom: 30px;}
#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; border: solid 1px #DFDDDC; border-radius: 20px;}
#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: 340px; 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.show { opacity: 1;}
@media (max-width: 801px) {
	#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 .box .tit p { font-size: 16px;}
	#voice .box .txt p { font-size: 13px;}
}


#faq .inner-sct { padding: 60px 0;}
#faq .ttl { margin-bottom: 30px;}
#faq .ctn { transition: 0.6s ease-in; transition-delay: 0.2s; opacity: 0;}
#faq .ctn.show { opacity: 1;}
#faq .bg-circle .circle { background-image: radial-gradient(#EDEAE7 0%, #A93E48 100%); right: -300px; top: 200px; width: 230px; padding: 250px;}
@media (max-width: 481px) {
	#faq .bg-circle .circle { right: -50px; top: 400px; width: 80px; padding: 100px;}
}


#instagram { transition: 0.6s ease-in; opacity: 0;}
#instagram .inner-sct { padding: 60px 0 100px;}
#instagram .ttl { margin-bottom: 50px;}
#instagram.show { opacity: 1;}
#instagram .ctn { width: 88%; max-width: 1000px; margin: 0 auto;}
#instagram .ctn.show { opacity: 1;}
@media (max-width: 481px) {
	#instagram .inner-sct { padding: 40px 0 80px;}
	#instagram .ttl { margin-bottom: 20px;}
}

#otherbrands .ttl { margin-bottom: 50px;}
#otherbrands .ctn ul li { transition: 0.6s ease-in; opacity: 0;}
#otherbrands .ctn.show ul li { opacity: 1;}
@media (max-width: 641px) {
	#otherbrands .ttl { margin-bottom: 20px;}
}


#recruit-bnr { transition: 0.6s ease-in; opacity: 0;}
#recruit-bnr.show { opacity: 1;}