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

.ttl { text-align: center;}
.ttl h2 { color: #677374; font-size: 35px; font-weight: 500; letter-spacing: 0.1rem;}
.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;}

.btn-more { text-align: right;}
.btn-more a { position: relative; display: inline-block; padding: 8px 0; padding-right: 160px;
 color: #000; font-size: 17px; font-weight: 700; line-height: 1; text-align: right; text-decoration: none;
}
.btn-more a:before,
.btn-more a:after { content: ''; display: block; position: absolute;}
.btn-more a:before{ width: 130px; height: 8px; top: 35%; 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: #F1F0F0; border-radius: 50%;
 right: 0; top: 50%; transform: translateY(-50%); z-index: 1; transition: 0.3s ease;
}
.btn-more a span { position: relative; display: inline-block; padding: 0 12px 0; background: #fff; z-index: 3; transition: 0.3s ease;}
.btn-more a:hover:after { background: #DFDDDC;}
.btn-more a:hover span { opacity: 0.6;}

@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% 60% 37% 63% / 55% 40% 60% 45%; }
  75%  { border-radius: 53% 47% 53% 47% / 37% 63% 37% 51%; }
  100% { border-radius: 55% 45% 60% 40% / 66% 32% 60% 50%; }
}
@keyframes rotate {
  0%   { transform: rotate(0deg);}
  100% { transform: rotate(360deg)}
}

.spacer { width: 100%;}
.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;}

#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;}
#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%;}

#lead .inner-sct { padding: 130px 0 50px;}
#lead .ctn { position: relative; width: 100%; max-width: 1000px; margin: 0 auto;}
#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: -60px;}
#lead .ctn .img { width: 44%;}
#lead .ctn .txt .tit { margin-bottom: 80px;}
#lead .ctn .txt .tit h2 img { width: 100%; max-width: 368px;}
#lead .ctn .txt p { font-size: 16px; letter-spacing: 0.1rem; line-height: 2;}
#lead .ctn .txt p span.pcbr { display: block;}
#lead .ctn .img figure { }
#lead .ctn .img figure img { width: 100%;}
#lead .img-wide { position: relative; width: 100%; max-width: 1000px; margin: 0 auto;}
#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 .bg { display: none; position: relative; z-index: -1; width: 100%; max-width: 1200px; margin: 0 auto;}
#lead .bg .circle { position: absolute; left: 100px; top: 0px; width: 200px; padding: 200px; margin: auto;
	border-radius: 55% 45% 74% 26% / 66% 32% 68% 34%;
	background-image: radial-gradient(#ccc 0%, #000 100%);
	animation-name: corners, rotate;
	animation-duration: 20s, 12s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	border-radius: 55% 45% 74% 26% / 66% 32% 68% 34%;
	background-image: radial-gradient(#e7d4e3 0%, 845080 100%);
	animation-name: corners, rotate;
	animation-duration: 20s, 12s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@media (max-width: 1001px){}
@media (max-width: 801px) {}
@media (max-width: 481px) {}

#news .inner-sct { padding: 130px 0;}
#news .box { width: 100%; max-width: 1200px; margin: 0 auto; padding: 70px 0; background: #F1F0F0;}
#news .box .ttl { margin-bottom: 30px;}
#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; }
#news .box ul li span.tag { display: block; width: 82px; padding: 4px 0; border-radius: 50px;
 position: absolute; left: 120px; top: 14px;
 color: #fff; line-height: 1; text-align: center;
}
#news .box ul li span.news { background: #bfd1d0;}
#news .box ul li span.topix{ background: #bbb7b5;}
#news .box ul li a { color: #000; text-decoration: none; transition: 0.3s ease;}
#news .box ul li a:hover { color: #7f7f7f;}

#campaign { position: relative; background: linear-gradient(90deg,#DEA0A0,#E8E7DE);}
#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 img { width: 86%; max-width: 690px;}
#campaign .ctn h3 img.sp { display: none;}
#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 span { display: block; border: solid 5px #fff; border-radius: 50%; padding: 2px; background: #BB6662; overflow: hidden;
 box-shadow: 0 3px 6px rgba(0,0,0,.16);
}
#campaign .ctn ul li img { width: 100%; border-radius: 50%;}


#trial .inner-sct { padding: 140px 0;}
#trial .ctn { margin-bottom: 90px;}
#trial .step { width: 86%; max-width: 1000px; margin: 0 auto 120px;}
#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: #344446; 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; }


#studio { background: #f5f4f4;}
#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: 52%;}
#studio .pht figure img { width: 100%;}
#studio .txt p { margin-bottom: 72px; padding-left: 6px;}
#studio .txt p img { width: 100%; max-width: 340px;}
#studio .txt ul { margin-bottom: 40px; font-size: 0;}
#studio .txt ul li { display: inline-block; width: 32%; padding: 6px; font-size: 15px;}
#studio .txt ul li a { display: block; width: 100%; padding: 8px 0; border: solid 1px #7f7f7f; border-radius: 50px;
 color: #000; 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;}


#lesson .inner-sct { padding: 140px 0;}
#lesson .ttl { margin-bottom: 30px;}
#lesson p.read { margin-bottom: 20px; font-size: 15px; letter-spacing: 0.08rem; text-align: center;}
#lesson .bloc { padding: 36px 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%;}
#lesson .ctn { display: flex; justify-content: space-between; width: 90%; 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: table; width: 100%;}
#lesson .ctn .detail .tit dl dt,
#lesson .ctn .detail .tit dl dd { display: table-cell; font-size: 14px; vertical-align: middle;}
#lesson .ctn .detail .tit dl dt { width: 26%; color: #BB6662; text-align: center;}
#lesson .ctn .detail .tit dl dt span { display: block; font-size: 30px; font-weight: 700;}
#lesson .ctn .detail .tit dl dd.descript { width: 50%; padding: 20px; border-left: solid 1px #000; border-right: solid 1px #000; line-height: 2;}
#lesson .ctn .detail .tit dl dd.lv { width: 24%; text-align: center;}
#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;}

#price .inner-sct { padding: 80px 0px 120px;}
#price .ttl { margin-bottom: 30px;}
#price .read { margin-bottom: 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; text-align: center;}
#price .ctn .plan-tit h4 span { font-size: 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 .flex-3 .box dl dt span { background: #DFDDDC;}
#price .ctn .flex-4 .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;}
@media (max-width: 641px) {
	#price .ctn .flex-3,
	#price .ctn .flex-4 { display: block;}
	#price .ctn .flex-3 .box { width: 100%; border-left: none;}
	#price .ctn .flex-4 .box { width: 100%; border-left: none;}
}


#column .inner-sct { padding: 100px 0px 80px;}
#column .ttl { margin-bottom: 40px;}
#column .ctn { width: 90%; max-width: 1000px; margin: 0 auto;}
#column .ctn ul { display: flex; justify-content: space-between; margin-bottom: 20px;}
#column .ctn ul li { width: 32%;}
#column .ctn ul li a { display: block; color: #000; text-decoration: none; transition: 0.3s ease;}
#column .ctn ul li a:hover { opacity: 0.5;}
#column .ctn ul li a dl dt { margin-bottom: 20px;}
#column .ctn ul li a dl dt span { position: relative; display: block; width: 100%; padding-top: 80%; background: #eee;}
#column .ctn ul li a dl dd { font-size: 14px;}
#column .ctn ul li a dl dd span { display: block; font-size: 18px;}

#instructor {  background: #F1F0F0;}
#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: 100%; 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 { font-size: 16px; text-align: center;}
#instructor .slider-instructor dl dd.txt { font-size: 14px; }


#voice .inner-sct { padding: 100px 0 60px;}
#voice .ttl { margin-bottom: 30px;}
#voice .slider-voice { width: 96%; 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: 92%; max-width: 1024px; margin: 0 auto;}
#voice .note ul { max-width: 320px; margin: 0 0 0 auto;}


#faq .inner-sct { padding: 60px 0;}
#faq .ttl { margin-bottom: 30px;}


#instagram .inner-sct { padding: 60px 0 100px;}
#instagram .ttl { margin-bottom: 50px;}