@charset "utf-8";
@import url("base.css");
.page-kv { background: url(/images/pilates/about/kv.jpg) no-repeat 50% 50% / cover;}
@media (max-width: 641px) {
	.page-kv { background: url(/images/pilates/about/kv@sp.jpg) no-repeat 50% 50% / cover;}
}


#lead .inner-sct { padding: 100px 0 50px;}
#lead h2 { margin-bottom: 72px; font-size: clamp(21px,2.7vw,27px); text-align: center;}
#lead .txt { width: 88%; max-width: 1000px; margin: 0 auto;}
#lead .txt p { font-size: 16px; letter-spacing: 0.12rem; line-height: 2.0;}
@media (max-width: 481px) {
	#lead .inner-sct { padding: 40px 0px;}
	#lead h2 { margin-bottom: 30px; text-align: left;}
	#lead .txt p { font-size: 14px; letter-spacing: 0.08rem; line-height: 1.8;}
	#lead .txt p span { display: block;}
}


#message { position: relative;}
#message .inner-sct { position: relative; padding: 80px 0px 0px;}
#message .inner-sct:before{ content: ''; display: block; width: 100%; position: absolute; left: 0; z-index: 1; 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;
}

#message .tit { position: relative; width: 88%; max-width: 1000px; margin: 0 auto 40px; z-index: 3;}
#message .tit h2 { color: #000; font-size: 95px; font-weight: 100; line-height: 1;}
#message .ctn { position: relative; padding: 40px 0 120px; background: #e0e7e8; z-index: 2;}
#message .ctn h3 { margin-bottom: 50px; font-size: 21px; font-weight: 700; text-align: center;}
#message .ctn .flex { display: flex; justify-content: space-between; flex-direction: row-reverse; width: 88%; max-width: 1000px; margin: 0 auto 120px;}
#message .ctn .txt { width: 48%;}
#message .ctn .pht { width: 48%;}
#message .ctn .txt p { margin-bottom: 30px; font-size: 15px; letter-spacing: 0.08rem; line-height: 1.85;}
#message .ctn .txt p:last-child { margin-bottom: 0px;}
#message .ctn .txt p span { display: block; margin-bottom: 2px; font-size: 18px; font-weight: 700;}
#message .ctn .txt p br { display: none;}
#message .ctn .pht figure { text-align: center;}
#message .ctn .pht figure img { width: 100%;}
#message .ctn ul { width: 88%; max-width: 1080px; margin: 0 auto; font-size: 0;}
#message .ctn ul li { display: inline-block; width: 33.333334%; padding: 16px;}
#message .ctn ul li dl { width: 100%; padding: 50px 0 30px; background: #F1F0F0; border-radius: 80px; box-shadow: 0 3px 6px rgba(0,0,0,0.16);
 text-align: center;
}
#message .ctn ul li dl dt { margin-bottom: 18px; color: #776F6B; font-size: 21px; font-weight: 700; letter-spacing: 0.08rem; line-height: 1.4;}
#message .ctn ul li dl dd { font-size: 14px;}
@media (max-width: 1401px){
	#message .inner-sct:before{ background-size: 1400px auto;}
}
@media (max-width: 1001px) {
	#message .ctn ul li { padding: 12px;}
	#message .ctn ul li dl { padding: 30px 0 24px;}
	#message .ctn ul li dl dt { margin-bottom: 12px;}
}
@media (max-width: 801px) {
	#message .inner-sct:before{ top: 100px; 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;
	}
	#message .tit { margin-bottom: 20px;}
	#message .ctn { padding: 40px 0 80px;}
	#message .ctn ul li { width: 50%;}
	#message .inner-sct { padding: 60px 0px;}
	#message .tit h2 { font-size: 14vw;}
	#message .ctn .flex { display: block;}
	#message .ctn .txt { width: 100%;}
	#message .ctn .pht { width: 100%; margin-bottom: 30px;}
}
@media (max-width: 641px) {
	#message .ctn h3 { margin-bottom: 30px;}
	#message .ctn h3 span { display: block;}
	#message .ctn .flex { margin-bottom: 80px; padding-top: 30px;}
}
@media (max-width: 481px) {
	#message .inner-sct { padding: 40px 0px;}
	#message .inner-sct:before{ top: 40px; }
	#message .ctn h3 { margin-bottom: 12px;}
	#message .ctn .flex { margin-bottom: 60px; }
	#message .ctn .txt p { margin-bottom: 20px; font-size: 12px;}
	#message .ctn .txt p span { font-size: 16px;}
	#message .ctn .txt p br { display: block;}

	#message .ctn ul li { width: 100%; padding: 8px 0;}
	#message .ctn ul li dl { padding: 20px 0 18px;}
	#message .ctn ul li dl dt { margin-bottom: 8px; font-size: 16px;}
	#message .ctn ul li dl dd { font-size: 12px;}
}


.tips { width: 92%; max-width: 1000px; margin: 0 auto;}
.tips h2 { position: relative; padding-left: 30px; color: #80A3A2; font-size: 24px; letter-spacing: 0.08rem;}
.tips h2:before { content: ''; display: block; width: 22px; height: 22px; background: url('/images/pilates/about/icn.svg') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 0; top: 21%;
}
.tips h2 span { display: inline-block; font-size: 22px; 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: 30px; color: #80A3A2; 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: 60px; font-weight: 200; 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 #80A3A2; border-radius: 10px; box-shadow: 0 3px 6px rgba(0,0,0,0.16); text-align: center;}
#difference .ctn .lala ul li { color: #80A3A2; border-bottom: solid 1px #80A3A2;}
#difference .ctn .lala ul li.name { border-bottom: none; padding: 32px 0 28px; background: #80A3A2; 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: #e6edec; 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;}
}


#trial {}
#trial .inner-sct { padding: 100px 0px;}
#trial .outer { margin-bottom: 90px;}
@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;}
}
@media (max-width: 481px) {
	#trial .inner-sct { padding: 40px 0 60px;}
	#trial .outer { margin-bottom: 0px;}
}