@charset "utf-8";
@import url("base.css");
@media (max-width: 1001px) {
}


.spacer { width: 100%; height: 60px;}
.btn-link { width: 65%; max-width: 300px; margin: 0 auto;}
.btn-link a { display: block; padding: 18px 0; background: #c5a600; border: solid 1px #c5a600; border-radius: 50px;
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
.btn-link a:hover { background: #fff; color: #c5a600;}
@media (max-width: 481px){
	.spacer { height: 40px;}
	.btn-link a { padding: 12px 0; font-size: 14px;}
}
.btn-back { width: 65%; max-width: 300px; margin: 0 auto;}
.btn-back a { display: block; padding: 18px 0; background: #000; border: solid 1px #000; border-radius: 50px;
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
.btn-back a:hover { background: #fff; color: #000;}
@media (max-width: 481px){
	.spacer { height: 40px;}
	.btn-link a { padding: 12px 0; font-size: 14px;}
	.btn-back a { padding: 12px 0; font-size: 14px;}
}



#course .inner-sct { padding: 40px 0;}
#course .bloc { padding: 50px 0;}
#course .ctl { width: 88%; max-width: 1000px; margin: 0 auto 20px; padding-bottom: 12px; border-bottom: solid 1px #6a876f;}
#course .ctl h2 { font-size: 18px; text-align: center;}
#course .ctl h2 img { width: 72%; max-width: 450px;}
#course .ctl h2 span{ display: block; padding-top: 18px; letter-spacing: 0.1rem;}
#course .ctn { width: 88%; max-width: 1000px; margin: 0 auto;}
#course .ctn .flex { display: flex; justify-content: space-between; margin-bottom: 40px;}
#course .txt { width: 60%;}
#course .img { width: 36%;}
#course .txt h4 { margin-bottom: 10px; font-size: 24px; font-weight: 700;}
#course .txt p { font-size: 18px; letter-spacing: 0.05rem; line-height: 1.8;}
#course .img figure img { width: 100%;}
#course .classes { padding: 40px 0;}
#course .classes .tit { margin-bottom: 20px;}
#course .classes .tit h3 { margin-bottom: 12px; color: #6a876f; font-size: 16px; text-align: center;}
#course .classes .tit h3 img { width: 60%; max-width: 400px;}
#course .classes .tit h3 span { display: block; }
#course .classes .tit p { text-align: center;}
#course .classes .tit p span { display: inline-block; padding: 0 10px; background: linear-gradient(transparent 50%, #f2c7cb 0%);}
#course .classes p.exempt { margin-bottom: 20px; font-size: 14px; text-align: center;}
#course .classes .box { padding: 30px; background: #f3f3f3;}
#course .classes .box ul { display: flex; justify-content: space-between;}
#course .classes .box ul li { width: 50%;}
#course .classes .box ul li dl { position: relative; padding-left: 80px;}
#course .classes .box ul li dl dt { position: absolute; left: 0; width: 64px; font-size: 18px;}
#course .classes .box ul li dl dt span { display: block; padding: 2px 0; background: #c5a600; color: #fff; font-weight: 700; letter-spacing: 0.2rem; text-align: center;}
#course .classes .box ul li dl dd { font-size: 18px; line-height: 1.8;}
#course .classes .box ul li dl dd.price { font-size: 16px;}
#course .classes .box ul li dl dd.price span { font-size: 24px; line-height: 1.2;}
#course .classes .box ul li dl dd.aside { padding-top: 12px;}
#course .classes .box ul li dl dd.note { padding-top: 15px; font-size: 14px;}
#course .map { padding-top: 40px;}
#course .map p { margin-bottom: 10px; font-size: 21px; font-weight: 700;}
#course .map dl{ position: relative; margin-bottom: 30px; padding-left: 90px;}
#course .map dl dt { position: absolute; left: 0; letter-spacing: 1rem;}
#course .map .mapview { width: 100%; height: 350px; margin: 0 auto 10px;}
#course .map .mapview iframe { width: 100%; height: 100%; border: none;}
#course .map .maplink { }
#course .map .maplink a { display: block; width: 50%; max-width: 200px; margin: 0 0 0 auto; padding: 10px 0; border: solid 1px #c5a600; background: #fff;
 color: #c5a600; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; transition: 0.3s ease;
}
#course .map .maplink a:hover { background: #c5a600; color: #fff;}
@media (max-width: 1001px) {
	#course .txt p { font-size: 16px;}
}
@media (max-width: 801px) {
	#course .inner-sct { padding: 30px 0;}
	#course .bloc { padding: 40px 0;}
	#course .txt h4 { font-size: 20px;}
	#course .classes .box { padding: 20px;}
	#course .classes .box ul { display: block;}
	#course .classes .box ul li { width: 100%; padding: 10px 0;}
}
@media (max-width: 641px) {
	#course .ctn .flex { display: block; margin-bottom: 30px;}
	#course .txt { width: 100%; margin-bottom: 30px;}
	#course .img { width: 100%;}
	#course .classes p.exempt { font-size: 12px; text-align: left;}
}
@media (max-width: 481px) {
	#course .inner-sct { padding: 12px 0;}
	#course .bloc { padding: 30px 0;}

	#course .ctl h2 { font-size: 12px;}
	#course .ctl h2 span{ padding-top: 6px; letter-spacing: 0.05rem;}

	#course .ctn .flex { margin-bottom: 20px;}
	#course .txt { margin-bottom: 20px;}
	#course .txt h4 { margin-bottom: 6px; font-size: 16px;}
	#course .txt p { font-size: 13px;}

	#course .classes { padding: 20px 0;}
	#course .classes .tit p { font-size: 12px;}
	#course .classes .tit p span { padding: 0 5px;}
	#course .classes p.exempt { margin-bottom: 12px; font-size: 11px;}
	#course .classes .box { padding: 12px;}
	#course .classes .box ul li dl { padding-left: 50px;}
	#course .classes .box ul li dl dt { width: 40px; font-size: 13px;}
	#course .classes .box ul li dl dt span { letter-spacing: 0.1rem; line-height: 1.4;}
	#course .classes .box ul li dl dd { font-size: 13px; line-height: 1.65;}
	#course .classes .box ul li dl dd.price { font-size: 12px;}
	#course .classes .box ul li dl dd.price span { font-size: 16px; line-height: 1.4;}
	#course .classes .box ul li dl dd.aside { padding-top: 8px;}
	#course .classes .box ul li dl dd.note { padding-top: 10px; font-size: 11px;}

	#course .map p { font-size: 15px;}
	#course .map dl { padding-left: 60px;}
	#course .map dl dt { font-size: 14px; letter-spacing: 0.5rem;}
	#course .map dl dd { font-size: 13px;}
	#course .map .mapview { height: 240px;}
	#course .map .maplink a { max-width: 180px; padding: 5px 0; font-size: 13px;}
}

#course .instructor {}
#course .instructor .box { width: 48.5%;}
#course .instructor .box dl.prof { position: relative; margin-bottom: 20px; padding-right: 150px; min-height: 130px;;}
#course .instructor .box dl.prof dt { position: absolute; right: 0; top: 0; width: 130px;}
#course .instructor .box dl.prof dt img { width: 100%;}
#course .instructor .box dl.prof dd { font-size: 14px; letter-spacing: 0.1rem;}
#course .instructor .box dl.prof dd.name { display: block; margin-bottom: 8px; color: #98b7d3; font-size: 24px; font-weight: 700; line-height: 1.2;}
#course .instructor .box dl.message { display: block; padding: 10px 20px 20px; background: #98b7d3;}
#course .instructor .box dl.message dt { margin-bottom: 10px; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.05rem;}
#course .instructor .box dl.message dd { color: #fff; font-size: 14px;}
#course .instructor .box dl.message dd span { display: block; font-size: 16px; text-indent: -0.4em;}
@media (max-width: 801px) {
	#course .instructor .ctn .flex { display: block;}
	#course .instructor .box { width: 100%;}
}
@media (max-width: 481px) {
	#course .instructor { padding-top: 30px;}
	#course .instructor .box dl.prof { padding-right: 115px; min-height: 100px;;}
	#course .instructor .box dl.prof dt { width: 100px;}
	#course .instructor .box dl.prof dd { font-size: 12px; letter-spacing: 0.05rem;}
	#course .instructor .box dl.prof dd.name { font-size: 18px;}
	#course .instructor .box dl.message { padding: 8px 12px 12px;}
	#course .instructor .box dl.message dt { margin-bottom: 6px; font-size: 16px;}
	#course .instructor .box dl.message dd { font-size: 12px;}
	#course .instructor .box dl.message dd span { font-size: 14px;}
}


#course .roots { padding-top: 60px;}
#course .roots .txt { width: 88%; max-width: 1000px; margin: 0 auto;}
#course .roots .txt ul { display: flex; justify-content: space-between; margin-bottom: 30px; font-size: 0;}
#course .roots .txt ul li { width: 32%;}
#course .roots .txt ul li img { width: 100%;}
#course .roots .txt p { margin-bottom: 30px; letter-spacing: 0.1rem; line-height: 1.8;}
#course .roots .txt p:last-child { margin-bottom: 0px;}
@media (max-width: 801px) {
	#course .roots .txt p { font-size: 14px;}
}
@media (max-width: 481px) {
	#course .roots { padding-top: 30px;}
	#course .roots .txt ul { margin-bottom: 20px; flex-wrap: wrap;}
	#course .roots .txt ul li { width: 50%;}
	#course .roots .txt p { font-size: 13px;}
}




#process .inner-sct { padding: 80px 0;}
#process .ctn { width: 88%; max-width: 900px; margin: 0 auto 40px;}
#process .ctn ol li { position: relative; padding: 12px 0 30px; padding-left: 80px;}
#process .ctn ol li .no { display: block; width: 60px; padding: 6px; background: #fff; border: solid 1px #000; border-radius: 50%; 
 position: absolute; left: 0; top: 0; z-index: 2;
}
#process .ctn ol li .no svg { width: 100%;}
#process .ctn ol li::after { content: ''; display: block; width: 2px; height: 100%; background: #999;
 position: absolute; left: 30px; bottom: 0;
}
#process .ctn ol li:last-child:after { content: none;}
#process .ctn ol li dl dt { margin-bottom: 8px; font-size: 20px; font-weight: 700;}
#process .ctn ol li dl dd {}
#process .ctn ol li dl dd a { color: #000;}
#process .ctn ol li dl dd a:hover { text-decoration: none;}

#process aside.cancel { width: 88%; max-width: 900px; margin: 0 auto;}
#process aside.cancel .inner { padding: 30px; background: #f3f3f3;}
#process aside.cancel h4 { margin-bottom: 10px; font-size: 18px; font-weight: 700;}
#process aside.cancel ol { padding-left: 1.2em;}
#process aside.cancel ol li { padding: 4px 0; list-style-type: decimal; font-size: 14px;}
@media (max-width: 801px) {
	#process .ctn ol li dl dt { font-size: 18px;}
	#process .ctn ol li dl dd { font-size: 14px;}
}
@media (max-width: 481px) {
	#process .inner-sct { padding: 60px 0;}
	#process .ctn ol li { padding: 10px 0 18px; padding-left: 60px;}
	#process .ctn ol li::after { left: 24px;}
	#process .ctn ol li .no { width: 50px;}

	#process .ctn ol li dl dt { font-size: 16px;}
	#process .ctn ol li dl dd { font-size: 12px;}

	#process aside.cancel .inner { padding: 20px;}
	#process aside.cancel h4 { margin-bottom: 6px; font-size: 16px;}
	#process aside.cancel ol li { font-size: 12px;}
}


#voice .inner-sct { padding: 80px 0;}
@media (max-width: 481px) {
	#voice .inner-sct { padding: 60px 0;}
}


#faq {}
#faq .inner-sct { padding: 80px 0;}
#faq .ctn { width: 88%; max-width: 900px; margin: 0 auto;}
#faq .ctn ul li { padding: 15px 10px; border-bottom: solid 1px #ccc;}
#faq .ctn ul li dl { }
#faq .ctn ul li dl dt { position: relative; padding: 5px; padding-left: 50px; font-size: 20px; letter-spacing: 0.05rem;}
#faq .ctn ul li dl dd { position: relative; padding: 5px; padding-left: 50px; font-size: 16px; letter-spacing: 0.08rem;}
#faq .ctn ul li dl dt:before,
#faq .ctn ul li dl dd:before { content: ''; display: block; width: 30px; height: 30px; position: absolute; left: 0; top: 8px;
 background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 50%;
}
#faq .ctn ul li dl dt:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 72"><g><path d="M63.73,54.48c7.29,6.21,10.43,14.57,18.71,15.41.84.08,1.69.15,2.53.15,4.29,0,8.51-1.3,13.5-6.29l.54.38c-5.83,6.13-11.66,7.82-17.25,7.82-.84,0-1.69,0-2.53-.08-13.88-1-19.25-8.89-24.38-15.11-3.68.61-7.52,1-11.35,1C21.78,57.78,1,46.81,1,29.02S21.78.04,43.48.04s42.48,11.2,42.48,28.99c0,12.04-9.36,20.93-22.24,25.46ZM43.48.96C22.78.96,11.12,11.38,11.12,29.02c0,12.65,5.9,21.39,16.79,25.46,4.75-5.21,9.82-7.05,15.41-7.05.92,0,1.92.08,2.91.15,7.13.46,12.04,2.68,15.87,5.6,8.97-4.45,13.88-12.73,13.88-24.16C76,11.38,64.26.96,43.48.96ZM28.76,54.79c4.22,1.38,9.13,2.15,14.72,2.15,3.83,0,7.44-.38,10.66-1-2.99-3.53-6.06-6.36-10.81-6.82-4.22-.38-9.66.46-14.57,5.67Z"/></g></svg>');}

#faq .ctn ul li dl dd:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 72"><g><path d="M54.4.2l34,54.1h9.8v.8c-3.4,0-11.1-.2-14.6-.2s-10.5.2-15.3.2v-.8h10.4l-11.7-18.6H24.5l-11.7,18.6h10.3v.8c-4.1,0-7-.2-11-.2s-6.3.2-10.3.2v-.8h10L45.4.9h-11.1V0c2.1,0,12.1.2,14.3.2s2.1,0,3.2,0c1.2,0,1.5,0,2.6,0ZM25,34.9h41.5L45.8,2l-20.8,32.9Z"/></g></svg>');}
@media (max-width: 801px) {
	#faq .ctn ul li dl dt { font-size: 18px;}
	#faq .ctn ul li dl dd { font-size: 14px;}
	#faq .ctn ul li dl dt:before,
	#faq .ctn ul li dl dd:before { top: 5px;}
}
@media (max-width: 481px) {
	#faq .ctn ul li { padding: 12px 6px;}
	#faq .ctn ul li dl dt { font-size: 15px; padding-left: 36px;}
	#faq .ctn ul li dl dd { font-size: 13px; padding-left: 36px;}
	#faq .ctn ul li dl dt:before,
	#faq .ctn ul li dl dd:before { width: 24px; height: 24px;}
}


#access .inner-sct { padding: 50px 0;}
#access .bloc { padding: 30px 0;}
#access .ctn { width: 88%; max-width: 900px; margin: 0 auto;}
#access .ctn h4 { margin-bottom: 20px; font-size: 24px; }
#access .ctn p { margin-bottom: 10px;}
#access .ctn dl { position: relative; margin-bottom: 30px; padding-left: 80px;}
#access .ctn dl dt { position: absolute; left: 0; font-size: 16px;}
#access .ctn dl dd { font-size: 14px;}
#access .ctn .map { width: 100%; height: 400px; margin: 0 auto;}
#access .ctn .map iframe { width: 100%; height: 100%; border: none;}


#contact .inner-sct { padding: 50px 0;}
#contact .ctn { width: 88%; max-width: 900px; margin: 0 auto;}
#contact .read { margin-bottom: 60px;}
#contact .read p { font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8;}
#contact .read p span { display: inline-block; margin-right: 8px; padding: 3px 10px; background: #c5a600; border-radius: 20px;
 color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2rem; text-align:center; vertical-align: baseline;
}
#contact .form-bloc ul { margin-bottom: 30px;}
#contact .form-bloc ul li { padding: 15px; border-bottom: dashed 1px #ccc;}
#contact .form-bloc ul li:last-child { border-bottom: none;}
#contact .form-bloc ul li dl { }
#contact .form-bloc ul li dl dt { margin-bottom: 8px; font-size: 18px; font-weight: 700;}
#contact .form-bloc ul li dl dt span.require { display: inline-block; margin-right: 8px; padding: 0px 10px; background: #c5a600; border-radius: 20px;
 color: #fff; font-size: 14px; letter-spacing: 0.2rem; text-align:center; vertical-align: middle;
}
#contact .form-bloc ul li span.dt { display: block; font-size: 18px; font-weight: 700;}

#contact .form-bloc ul li ul { margin: 0;}
#contact .form-bloc ul li ul li { border: none;}
#contact .form-bloc ul li ul li dl { display: table; width: 100%;}
#contact .form-bloc ul li ul li dl dt,
#contact .form-bloc ul li ul li dl dd { display: table-cell; vertical-align: middle;}
#contact .form-bloc ul li ul li dl dt { width: 100px;}
#contact .form-bloc ul li ul li dl dd { width: calc( 100% - 120px );}
#contact .form-bloc ul li ul li dl dd .time { display: inline-block; width: 55%; max-width: 250px; vertical-align: middle;}
#contact .form-bloc ul li input[type="text"],
#contact .form-bloc ul li input[type="tel"],
#contact .form-bloc ul li input[type="email"] { width: 100%; padding: 8px; border: none; background: #f3f3f3; }
#contact .form-bloc ul li input[type="date"] { width: 40%; max-width: 150px; margin-right: 10px; padding: 8px; border: none; background: #f3f3f3; }
#contact .form-bloc ul li textarea { width: 100%; height: 200px; padding: 8px; border: none; background: #f3f3f3; }
#contact .form-bloc ul li span[data-name="your-course"],
#contact .form-bloc ul li span[data-name="your-time-1"],
#contact .form-bloc ul li span[data-name="your-time-2"],
#contact .form-bloc ul li span[data-name="your-time-3"]{ position: relative; display: block; }
#contact .form-bloc ul li span[data-name="your-course"]:after,
#contact .form-bloc ul li span[data-name="your-time-1"]:after,
#contact .form-bloc ul li span[data-name="your-time-2"]:after,
#contact .form-bloc ul li span[data-name="your-time-3"]:after { content: ''; display: block; width: 8px; height: 8px;
 border-bottom: solid 2px #000; border-right: solid 2px #000;
 position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#contact .form-bloc ul li select { width: 100%; padding: 8px; border: none; background: #f3f3f3; appearance: none; -webkit-appearance: none;}
#contact .form-bloc ul li.txt { padding: 20px 0;}
#contact .form-bloc ul li.txt a { color: #000;}
#contact .form-bloc ul li.txt a:hover { text-decoration: none;}

#contact .form-bloc .btn-submit { position: relative; width: 60%; max-width: 250px; margin: 0 auto; border: solid 1px #000; border-radius: 50px; overflow: hidden;}
#contact .form-bloc .btn-submit input[type="submit"] { position: relative; z-index: 2;
 display: block; width: 100%; padding: 8px 0; background: #000; border: none;
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; transition: 0.3s ease;
}
#contact .form-bloc .btn-submit input[type="submit"]:hover { background: #fff; color: #000;}
#contact .form-bloc .btn-submit span.wpcf7-spinner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
@media (max-width: 801px) {
	#contact .read p { font-size: 16px;}
	#contact .form-bloc ul li dl dt { margin-bottom: 6px; font-size: 16px;}
	#contact .form-bloc ul li dl dt span.require { font-size: 12px;}
	#contact .form-bloc ul li dl dd { font-size: 13px;}
	#contact .form-bloc ul li span.dt { margin-bottom: 6px; font-size: 16px;}
}
@media (max-width: 481px) {
	#contact .read { margin-bottom: 30px;}
	#contact .read p { font-size: 13px; letter-spacing: 0.05rem; line-height: 1.65;}
	#contact .read p span { font-size: 11px;}

	#contact .form-bloc ul li { padding: 10px 0;}
	#contact .form-bloc ul li dl dt { margin-bottom: 4px; font-size: 14px;}
	#contact .form-bloc ul li dl dt span.require { font-size: 10px;}
	#contact .form-bloc ul li span.dt { font-size: 14px;}
	#contact .form-bloc ul li ul li dl dt,
	#contact .form-bloc ul li ul li dl dd { display: block;}
	#contact .form-bloc ul li ul li dl dt { width: 100%;}
	#contact .form-bloc ul li ul li dl dd { width: 100%;}
	#contact .form-bloc ul li textarea { height: 150px;}
	#contact .form-bloc ul li.txt { padding: 12px 0; font-size: 12px;}
	
	#contact .form-bloc .btn-submit input[type="submit"] { padding: 4px 0; font-size: 16px;}
}


#contact .send { margin-bottom: 60px; padding-top: 60px;}
#contact .send h3 { margin-bottom: 20px; font-size: 21px; font-weight: 700; text-align: center;}
#contact .send p { font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8;}
@media (max-width: 801px) {
	#contact .send p { font-size: 16px;}
}
@media (max-width: 481px) {
	#contact .send { margin-bottom: 40px; padding-top: 20px;}
	#contact .send h3 { font-size: 18px;}
	#contact .send h3 span { display: block;}
	#contact .send p { font-size: 13px; letter-spacing: 0.05rem;}
}