@charset "utf-8";
@import url("base.css");
.page-kv { background: url(/images/yoga/about/kv.jpg) no-repeat 50% 50% / cover;}
@media (max-width: 641px) {
	.page-kv { background: url(/images/yoga/about/kv@sp.jpg) no-repeat 50% 50% / cover;}
}
#lead .inner-sct { padding: 100px 0 50px;}
#lead h2 { margin-bottom: 50px; text-align: center;}
#lead h2 img { width: 88%; max-width: 730px;}
#lead h2 img.sp { display: none;}
#lead .txt { width: 88%; max-width: 1000px; margin: 0 auto;}
#lead .txt p { margin-bottom: 30px; font-size: 16px; letter-spacing: 0.12rem; line-height: 2.0;}
#lead .txt p:last-child { margin-bottom: 0px;}
@media (max-width: 481px) {
	#lead .inner-sct { padding: 40px 0px;}
	#lead h2 { margin-bottom: 30px;}
	#lead .txt p { font-size: 14px; letter-spacing: 0.08rem; line-height: 1.8;}
	#lead .txt p span { display: block;}
	#lead .txt p br.pc { display: none;}
}

#yogan { background: url('/images/yoga/about/bg.jpg') no-repeat 50% 50% / cover;}
#yogan .inner-sct { padding: 80px 0 120px;}
#yogan .tit { margin-bottom: 60px;}
#yogan .tit h2 { margin-bottom: 30px; color: #fff; font-size: 22px; font-weight: 300; letter-spacing: 0.1rem; text-align: center; opacity: 0.7;}
#yogan .tit h2 span { display: block; font-size: 45px;}
#yogan .tit p { color: #fff; font-size: 21px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#yogan .ctn { display: flex; justify-content: space-between; flex-direction: row-reverse; width: 88%; max-width: 1000px; margin: 0 auto;}
#yogan .ctn .txt { width: 48%;}
#yogan .ctn .pht { width: 48%;}
#yogan .ctn .txt p { margin-bottom: 24px; color: #fff; font-size: 15px; line-height: 1.85;}
#yogan .ctn .txt p:last-child { margin-bottom: 0px;}
#yogan .ctn .txt p span { display: block; margin-bottom: 2px; font-size: 18px; font-weight: 700;}
#yogan .ctn .txt p br { display: none;}
#yogan .ctn .pht figure { text-align: center;}
#yogan .ctn .pht figure img { width: 100%;}
@media (max-width: 801px) {
	#yogan .inner-sct { padding: 60px 0px;}
	#yogan .ctn { display: block;}
	#yogan .ctn .txt { width: 100%;}
	#yogan .ctn .pht { width: 100%; margin-bottom: 30px;}
}
@media (max-width: 481px) {
	#yogan .inner-sct { padding: 40px 0px;}
	#yogan .tit { margin-bottom: 40px;}
	#yogan .tit h2 { margin-bottom: 30px; font-size: 16px;}
	#yogan .tit h2 span { font-size: 24px;}
	#yogan .tit p { font-size: 16px;}
	#yogan .ctn .txt p { font-size: 12px;}
	#yogan .ctn .txt p span { font-size: 16px;}
	#yogan .ctn .txt p br { display: block;}
}


.tips { width: 92%; max-width: 1000px; margin: 0 auto;}
.tips h2 { position: relative; padding-left: 30px; color: #cf9491; font-size: 24px; font-weight: 300; letter-spacing: 0.08rem;}
.tips h2:before { content: ''; display: block; width: 22px; height: 22px; background: url('/images/yoga/about/icn.svg') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 0; top: 21%;
}
.tips h2 span.eng { display: inline-block; font-size: 22px; letter-spacing: 0.16rem; vertical-align: baseline;}
@media (max-width: 801px) {
}
@media (max-width: 481px) {
	.tips h2 { padding-left: 24px; font-size: 18px;}
	.tips h2:before { width: 16px; height: 16px;}
	.tips h2 span { font-size: 15px;}
}

#commit .inner-sct { padding: 50px 0 100px;}
#commit .tips { margin-bottom: 40px;}
#commit .ctn { width: 92%; max-width: 1000px; margin: 0 auto;}
#commit .ctn ol { display: flex; justify-content: space-between; padding-top: 20px;}
#commit .ctn ol li { position: relative; width: 33%;}
#commit .ctn ol li:nth-child(1) { padding-right: 60px;}
#commit .ctn ol li:nth-child(2) { padding-left: 30px; padding-right: 30px;}
#commit .ctn ol li:nth-child(3) { padding-left: 60px;}
#commit .ctn ol li::before { content: ''; display: block; width: 1px; height: 100%; background: #707070; position: absolute; left: 0; top: 50%;
 transform: translate(0,-50%) rotate(10deg);
}
#commit .ctn ol li:nth-child(1):before { content: none;}
#commit .ctn ol li:nth-child(2):before { left: -25px;}
#commit .ctn ol li dl { padding: 20px 0;}
#commit .ctn ol li dl dt { position: relative; margin-bottom: 20px; color: #cf9491; font-size: 18px; font-weight: 700; letter-spacing: 0.08rem; line-height: 1.8;}
#commit .ctn ol li dl dt span.eng { display: block; margin-bottom: 18px; font-size: 50px; font-weight: 300; line-height: 1;}
#commit .ctn ol li dl dd { font-size: 14px; letter-spacing: 0.08rem; line-height: 1.8;}
#commit .ctn ol li dl dd span { display: block;}
@media (max-width: 1024px) {
	#commit .ctn ol li:nth-child(1) { padding-right: 40px;}
	#commit .ctn ol li:nth-child(2) { padding-left: 20px; padding-right: 20px;}
	#commit .ctn ol li:nth-child(3) { padding-left: 40px;}
	#commit .ctn ol li dl dd span { display: inline;}
}
@media (max-width: 801px) {
	#commit .tips { margin-bottom: 0px;}
	#commit .ctn ol { display: block; padding-top: 0;}
	#commit .ctn ol li { position: relative; width: 100%;}
	#commit .ctn ol li:nth-child(1) { padding-right: 0px;}
	#commit .ctn ol li:nth-child(2) { padding-left: 0px; padding-right: 0px;}
	#commit .ctn ol li:nth-child(3) { padding-left: 0px;}
	#commit .ctn ol li::before { content: none;}
	#commit .ctn ol li dl dt { margin-bottom: 12px; padding-left: 100px;}
	#commit .ctn ol li dl dt span.eng { position: absolute; left: 0; top: 8px; margin-bottom: 0; }
	#commit .ctn ol li dl dd { padding-left: 100px;}
}
@media (max-width: 481px) {
	#commit .inner-sct { padding: 40px 0 60px;}
	#commit .ctn ol li dl dt { margin-bottom: 8px; padding-left: 80px; line-height: 1.6;}
	#commit .ctn ol li dl dt span.eng { font-size: 40px;}
	#commit .ctn ol li dl dd { padding-left: 80px;}
}


#difference .inner-sct { padding: 130px 0 60px;}
#difference .tips { margin-bottom: 40px;}
#difference .ctn { display: flex; align-items: flex-end; width: 92%; max-width: 1000px; margin: 0 auto;}
#difference .ctn .tit { position: relative; width: 20%; padding-bottom: 2px; z-index: 2;}
#difference .ctn .tit ul { text-align: center;}
#difference .ctn .tit ul li { padding: 25px 0; background: #F1F0F0; border-bottom: solid 1px #C4C4C4;}
#difference .ctn .tit ul li.blank { background: none; border-bottom: none;}
#difference .ctn .tit ul li:last-child { border-bottom: none;}

#difference .ctn .lala { position: relative; width: 30%; z-index: 3;}
#difference .ctn .lala ul { border: solid 2px #DD5F62; border-radius: 10px; box-shadow: 0 3px 6px rgba(0,0,0,0.16); text-align: center;}
#difference .ctn .lala ul li { color: #DD5F62; border-bottom: solid 1px #DD5F62;}
#difference .ctn .lala ul li.name { border-bottom: none; padding: 32px 0 28px; background: #DD5F62; color: #fff; font-size: 18px; font-weight: 600;}
#difference .ctn .lala ul li:last-child { border-bottom: none;}
#difference .ctn .lala ul li dl dt { display: none;}
#difference .ctn .lala ul li dl dd { padding: 25px 0;}

#difference .ctn .aside { position: relative; width: 25%; padding-bottom: 2px; z-index: 1;}
#difference .ctn .aside ul { background: #F1F0F0; text-align: center;}
#difference .ctn .aside.right ul { border-left: solid 1px #c4c4c4;}
#difference .ctn .aside ul li { border-bottom: solid 1px #C4C4C4;}
#difference .ctn .aside ul li.name { padding: 25px 0; border-bottom: none; background: #DFDDDC; font-size: 16px;}
#difference .ctn .aside ul li:last-child { border-bottom: none;}
#difference .ctn .aside ul li dl {}
#difference .ctn .aside ul li dl dt { display: none;}
#difference .ctn .aside ul li dl dd { padding: 25px 0;}
@media (max-width: 1001px) {
	#difference .ctn .tit ul li { padding: 20px 0; font-size: 13px;}

	#difference .ctn .lala ul li { font-size: 13px;}
	#difference .ctn .lala ul li.name { padding: 25px 0 20px; font-size: 16px;}
	#difference .ctn .lala ul li dl dd { padding: 20px 0;}

	#difference .ctn .aside ul li { font-size: 13px;}
	#difference .ctn .aside ul li.name { padding: 20px 0; font-size: 14px;}
	#difference .ctn .aside ul li dl dd { padding: 20px 0;}
}
@media (max-width: 801px) {
	#difference .inner-sct { padding: 80px 0 40px;}
	#difference .tips { margin-bottom: 30px;}
	#difference .ctn { display: block; width: 90%; border-radius: 20px; box-shadow: 0 3px 6px rgba(0,0,0,0.16);}
	#difference .ctn .tit { display: none;}
	#difference .ctn .lala { width: 100%;}
	#difference .ctn .lala ul { border-radius: 20px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom: none; overflow: hidden; box-shadow: none;}
	#difference .ctn .lala ul li.name { padding: 30px 0; font-size: 18px;}
	#difference .ctn .lala ul li dl { display: table; width: 100%;}
	#difference .ctn .lala ul li dl dt,
	#difference .ctn .lala ul li dl dd { display: table-cell; vertical-align: middle;}
	#difference .ctn .lala ul li dl dt { width: 200px; background: #FAE8E8; color: #000;}
	#difference .ctn .lala ul li dl dd { width: auto; text-align: center;}

	#difference .ctn .aside { width: 100%; padding: 0;}
	#difference .ctn .aside ul { border-left: solid 2px #C4C4C4; border-right: solid 2px #C4C4C4;}
	#difference .ctn .aside.right ul { border: solid 2px #c4c4c4; border-top: 0px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; overflow: hidden;}
	#difference .ctn .aside ul li.name { padding: 30px 0; font-size: 18px;}
	#difference .ctn .aside ul li dl { display: table; width: 100%;}
	#difference .ctn .aside ul li dl dt,
	#difference .ctn .aside ul li dl dd { display: table-cell; vertical-align: middle;}
	#difference .ctn .aside ul li dl dt { width: 200px; background: #F1F0F0; color: #000;}
	#difference .ctn .aside ul li dl dd { width: auto; background:#fff; text-align: center;}
}
@media (max-width: 641px) {
	#difference .ctn .lala ul li.name { padding: 20px 0;}
	#difference .ctn .lala ul li dl dt { width: 150px;}

	#difference .ctn .aside ul li.name { padding: 20px 0;}
	#difference .ctn .aside ul li dl dt { width: 150px;}
}
@media (max-width: 481px) {
	#difference .inner-sct { padding: 60px 0 30px;}
	#difference .ctn { border-radius: 14px;}
	#difference .ctn .lala ul { border-radius: 12px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}
	#difference .ctn .lala ul li { font-size: 12px;}
	#difference .ctn .lala ul li.name { padding: 15px 0; font-size: 16px;}
	#difference .ctn .lala ul li dl dt { width: 120px;}
	#difference .ctn .lala ul li dl dd { padding: 12px 0;}

	#difference .ctn .aside.right ul { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
	#difference .ctn .aside ul li { font-size: 12px;}
	#difference .ctn .aside ul li.name { padding: 15px 0; font-size: 16px;}
	#difference .ctn .aside ul li dl dt { width: 120px;}
	#difference .ctn .aside ul li dl dd { padding: 12px 0;}
}


#approach .inner-sct { padding: 60px 0;}
#approach .tips { margin-bottom: 40px;}
#approach .ctn { width: 88%; max-width: 1000px; margin: 0 auto;}
#approach .ctn p { margin-bottom: 50px; letter-spacing: 0.12rem;}
#approach .ctn ul { display: flex; flex-wrap: wrap; font-size: 0;}
#approach .ctn ul li { position: relative; width: 33.33335%; border-right: solid 1px #776F6B; border-bottom: solid 1px #776F6B; vertical-align: top;}
#approach .ctn ul li:nth-child(3){ border-right: 0px;}
#approach .ctn ul li:nth-child(4){ border-bottom: 0px;}
#approach .ctn ul li:nth-child(5){ border-bottom: 0px;}
#approach .ctn ul li:nth-child(6){ border-right: 0px; border-bottom: 0px;}
#approach .ctn ul li:nth-child(5):after,
#approach .ctn ul li:nth-child(6):after{ content: ''; display: block; width: 24px; height: 24px; background: #fff; position: absolute; top: -12px; left: -12px;}
#approach .ctn ul li dl { padding: 20px 20px 0;}
#approach .ctn ul li dl dt { margin-bottom: 10px; text-align: center;}
#approach .ctn ul li dl dt img { width: 60%; max-width: 188px;}
#approach .ctn ul li dl dd { min-height: 11em; font-size: 14px;}
#approach .ctn ul li dl dd span { position: relative; display: block; padding: 15px 0; color: #776F6B; font-size: 18px; font-weight: 700; text-align: center;}
#approach .ctn ul li dl dd span:after { content: ''; display: block; width: 40px; height: 2px; background: #DFDDDC; margin: 15px auto 0;}
#approach .ctn ul li dl dd br { display: none;}
@media (max-width: 801px) {
	#approach .inner-sct { padding: 40px 0;}
	#approach .tips { margin-bottom: 30px;}
	#approach .ctn ul li { width: 50%;}
	#approach .ctn ul li:nth-child(3){ border-right: solid 1px #776F6B;}
	#approach .ctn ul li:nth-child(2){ border-right: 0px;}
	#approach .ctn ul li:nth-child(4){ border-right: 0px; border-bottom: solid 1px #776F6B;}
	#approach .ctn ul li:nth-child(5){ border-bottom: 0px;}
	#approach .ctn ul li:nth-child(6){ border-right: 0px; border-bottom: 0px;}
	#approach .ctn ul li:nth-child(4):after { content: ''; display: block; width: 24px; height: 24px; background: #fff; position: absolute; top: -12px; left: -12px;}
	#approach .ctn ul li:nth-child(5):after { content: none;}
	#approach .ctn ul li dl dd br { display: block;}
}
@media (max-width: 481px) {
	#approach .inner-sct { padding: 30px 0;}
	#approach .ctn p { margin-bottom: 30px; font-size: 13px; letter-spacing: 0.08rem;}
	#approach .ctn ul li dl { padding: 12px 10px;}
	#approach .ctn ul li dl dt img { width: 85%;}
	#approach .ctn ul li dl dd { min-height: 11em; font-size: 12px;}
	#approach .ctn ul li dl dd span { padding: 10px 0; font-size: 14px;}
	#approach .ctn ul li dl dd span:after { width: 20px; margin-top: 8px;}
}


#report { position: relative;}
#report #p4 { position: absolute; top: -100px;}
#report .inner-sct { padding: 60px 0;}
#report .tips { margin-bottom: 40px;}
#report .ctn { width: 88%; max-width: 1000px; margin: 0 auto;}
#report .ctn p {letter-spacing: 0.12rem;}
@media (max-width: 801px) {
	#report .inner-sct { padding: 40px 0;}
	#report .tips { margin-bottom: 30px;}
}
@media (max-width: 481px) {
	#report #p4 { top: -50px;}
	#report .inner-sct { padding: 30px 0;}
	#report .tips { margin-bottom: 20px;}
	#report .ctn p { font-size: 13px; letter-spacing: 0.08rem;}
}


#flow .inner-sct { padding: 20px 0 120px;}
#flow .ctn { width: 88%; max-width: 1000px; margin: 0 auto 20px;}
#flow .ctn h3 { position: relative; color: #677374; font-size: 35px; font-weight: 300; letter-spacing: 0.2rem; line-height: 1; text-align: center;}
#flow .ctn h3:after { content: ''; display: block; width: 100%; height: 1px; background: #344446; position: absolute; top: 50%; left: 0; z-index: 1;}
#flow .ctn h3 span { position: relative; display: inline-block; padding: 0 40px; background: #fff; z-index: 2;}
#flow .ctn ol { display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 0;}
#flow .ctn ol li { width: calc( 33% - 25px ); padding: 30px 0; font-size: 14px;}
#flow .ctn ol li dl.detail { }
#flow .ctn ol li dl.detail dt { position: relative; margin-bottom: 30px;}
#flow .ctn ol li dl.detail dt span { display: block; width: 62px; height: 62px; background: #344446; position: absolute; left: 0; top: 0; z-index: 2;
 color: #fff; font-size: 30px; font-weight: 300; line-height: 68px; text-align: center;
}
#flow .ctn ol li dl.detail dt picture { position: relative; z-index: 1;}
#flow .ctn ol li dl.detail dt picture img { width: 100%;}
#flow .ctn ol li dl.detail dd span { display: block; margin-bottom: 20px; color: #BB6662; font-size: 18px; font-weight: 700;}
#flow .message .ctn { margin: 0 auto; padding: 0 7px; border: solid 1px #707070;}
#flow .ctn ol li dl.detail dd { line-height: 1.85;}

#flow .ctn ol li dl.point { margin-top: 20px; padding: 25px 30px; background: #F1F0F0; border-radius: 20px; color: #776F6B;}
#flow .ctn ol li dl.point dt { margin-bottom: 8px; font-size: 14px; font-weight: 700;}
#flow .ctn ol li dl.point dd { line-height: 1.85;}

#flow .message .box { width: 92%; max-width: 1000px; margin: 0 auto; padding: 0px 7px; border: solid 1px #707070;}
#flow .message .box .inner { padding: 50px; border-left: solid 1px #707070; border-right: solid 1px #707070;}
#flow .message .box p { margin-bottom: 30px; font-size: 15px; font-weight: 700;}
#flow .message .box ul li { font-size: 15px; line-height: 1.8;}
@media (max-width: 801px) {
	#flow .ctn ol li { width: calc( 50% - 15px ); padding: 20px 0;}
	#flow .ctn ol li dl.detail dt { margin-bottom: 20px;}
	#flow .ctn ol li dl.detail dd span { margin-bottom: 12px;}
	#flow .message .box .inner { padding: 30px;}
	#flow .message .box p { margin-bottom: 20px;}
	#flow .message .box ul li { font-size: 13px;}
}
@media (max-width: 641px) {
	#flow .ctn ol li { width: 100%; padding: 16px 0;}
	#flow .ctn ol li dl.detail dd span { text-align: center;}

	#flow .message .box p span { display: block;}
}
@media (max-width: 481px) {
	#flow .inner-sct { padding: 20px 0 60px;}
	#flow .ctn h3 { font-size: 24px;}
	#flow .ctn h3 span { padding: 0 20px;}
	#flow .ctn ol li dl.detail dt span { width: 50px; height: 50px; font-size: 24px; line-height: 50px;}
	#flow .ctn ol li dl.detail dd { font-size: 13px; }
	#flow .ctn ol li dl.detail dd span { margin-bottom: 8px;}
	
	#flow .message .box { padding: 0 5px;}
	#flow .message .box .inner { padding: 25px 20px;}
	#flow .message .box p { margin-bottom: 12px;}
	#flow .message .box ul li { font-size: 12px;}
}


#trial { background: #F1F0F0;}
#trial .inner-sct { padding: 140px 0 80px;}
#trial .outer { margin-bottom: 72px;}
@media (max-width: 1001px) {
	#trial .inner-sct { padding: 100px 0 60px;}
}
@media (max-width: 801px) {
	#trial .inner-sct { padding: 60px 0 80px;}
	#trial .outer { margin-bottom: 20px;}
	#trial .outer .img { margin: 0 auto;}
}
@media (max-width: 481px) {
	#trial .inner-sct { padding: 40px 0 60px;}
	#trial .outer { margin-bottom: 0px;}
}