@charset "utf-8";
#contact-nav .inner { padding: 40px 0px;}
#contact-nav ul { width: 92%; max-width: 1000px; margin: 0 auto; font-size: 0;}
#contact-nav ul li { display: inline-block; width: 25%; padding: 0 10px; font-size: clamp(14px,1.8vw,18px); letter-spacing: 0.05rem;}
#contact-nav ul li a { display: block; width: 100%; border: solid 1px #969696; text-decoration: none;}
#contact-nav ul li a:hover,
#contact-nav ul li.on a { border: solid 1px #00b4a5;}
#contact-nav ul li a span { display: block; width: 100%; border: solid 3px #fff; padding: 6px 0; text-align: center;}
#contact-nav ul li.on a span { border: solid 3px #00b4a5;}
@media (max-width: 801px) {
	#contact-nav ul li { width: 50%; padding: 8px;}
}
@media (max-width: 481px) {
	#contact-nav .inner { padding: 30px 0px;}
	#contact-nav ul li { font-size: 14px; padding: 6px;}
	#contact-nav ul li a span { border-width: 2px;}
	#contact-nav ul li.on a span { border-width: 2px;}
}


#contact .inner-sct { padding: 40px 0 80px;}
#contact .ctn { width: 88%; max-width: 900px; margin: 0 auto;}
#contact .ctn h2 { margin-bottom: 30px; font-size: clamp(21px,3.6vw,36px); text-align: center;}
#contact .box { width: 100%; padding: 40px 0px; background: #f5fcfb; border: solid 0.5px #969696;}
#contact .box.mb { margin-bottom: 60px;}
#contact .box h3 { margin-bottom: 20px; font-size: clamp(16px,3.0vw,30px); letter-spacing: 0.05rem; text-align: center;}
#contact .box figure { width: 90%; margin: 0 auto; text-align: center;}
#contact .box figure.mb { margin-bottom: 30px;}
#contact .box figure img { width: 100%;}
#contact .box .txt { width: 90%; margin: 0 auto;}
#contact .box .txt.mb { margin-bottom: 30px;}
#contact .box p { font-size: 18px; letter-spacing: 0.08rem; line-height: 1.8;}
#contact .box p.tc { text-align: center;}
#contact .box p.pc-tc { text-align: center;}
#contact .box p.mb { margin-bottom: 30px;}
#contact .box p.note { font-size: 14px;}
#contact .box ul { width: 90%; margin: 0 auto 30px; font-size: 0; text-align: center;}
#contact .box ul.point2 { max-width: 400px;}
#contact .box ul li { display: inline-block; padding: 0 8px; font-size: 18px; letter-spacing: 0.1rem; line-height: 1.4;}
#contact .box ul.point2 li { width: 50%;}
#contact .box ul.point4 li { width: 25%;}
#contact .box ul li span { display: block; width: 100%; padding: 10px 0; border: solid 1px #cacaca; background: #dbf2f0;}
#contact .box .flex { display: flex; justify-content: space-between; width: 90%; margin: 0 auto;}
#contact .box .flex-pht { width: calc(100% - 380px);}
#contact .box .flex-txt { width: 350px;}
#contact .box .flex-pht figure img { width: 100%;}
#contact .box .flex-txt p { font-size: 16px;}
#contact .box .flex-txt p.mb { margin-bottom: 20px;}
#contact .box dl { width: 90%; margin: 0 auto; padding: 6px 0;}
#contact .box dl.mb { margin-bottom: 12px;}
#contact .box dl dt { margin-bottom: 4px; font-size: 18px;}
#contact .box dl dd { font-size: 18px;}

#contact .box .app-flex { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse;
 width: 90%; margin: 0 auto; padding-top: 20px; border-top: solid 1px #969696;
}
#contact .box .app-txt { width: 50%;}
#contact .box .app-link{ width: 50%;}
#contact .box .app-txt p { font-size: 12px; letter-spacing: 0.05rem;}
#contact .box .app-txt p span { display: block; font-size: 20px;}
#contact .box .app-txt p.note { margin-top: 30px; line-height: 1.4;}
#contact .box .app-txt p.note br { display: none;}
#contact .box .app-link a { display: block; width: 96%; margin: 0 auto;}
#contact .box .app-link a img { width: 100%;}
#contact .box .app-link a:hover { opacity: 0.8;}

@media (max-width: 1281px) {
}
@media (max-width: 801px) {
	#contact .inner-sct { padding: 40px 0 60px;}
	#contact .ctn h2 { margin-bottom: 20px;}
	#contact .box { padding: 30px 0;}
	#contact .box.mb { margin-bottom: 40px;}
	#contact .box h3 { margin-bottom: 12px;}
	#contact .box h3 span { display: block;}
	#contact .box figure.mb { margin-bottom: 20px;}
	#contact .box p { font-size: 16px;}
	#contact .box p.pc-tc { text-align: left;}
	#contact .box p.tc span { display: block;}
	#contact .box p br.pc { display: none;}
	#contact .box ul li { padding: 0 6px; font-size: 16px;}
	#contact .box dl dt { font-size: 16px;}
	#contact .box dl dd { font-size: 16px;}

	#contact .box .flex-pht { width: calc(100% - 320px);}
	#contact .box .flex-txt { width: 300px;}
	#contact .box .flex-txt p { font-size: 14px;}
	
	#contact .box .app-flex { display: block;}
	#contact .box .app-txt { width: 100%;}
	#contact .box .app-link{ width: 100%;}
	#contact .box .app-txt p { text-align: center;}
	#contact .box .app-txt p.note { margin-top: 15px;}
	#contact .box .app-link a { width: 50%; max-width: 300px;}
}
@media (max-width: 641px) {
	#contact .box p { font-size: 14px;}
	#contact .box ul li { font-size: 14px;}
	#contact .box ul li span { padding: 8px 0;}
	#contact .box dl dt { font-size: 14px;}
	#contact .box dl dd { font-size: 13px;}
}
@media (max-width: 481px) {
	#contact .inner-sct { padding: 20px 0 40px;}
	#contact .ctn h2 { margin-bottom: 12px;}
	#contact .box { padding: 20px 0;}
	#contact .box.mb { margin-bottom: 30px;}
	#contact .box h3 { font-weight: 600; letter-spacing: 0.02rem;}
	#contact .box figure.mb { margin-bottom: 12px;}
	#contact .box p { font-size: 12px; letter-spacing: 0.05rem;}
	#contact .box .flex-txt p { font-size: 12px;}
	#contact .box ul { margin-bottom: 20px;}
	#contact .box ul li { padding: 5px;}
	#contact .box ul.point4 li { width: 50%;}
	#contact .box ul li span { padding: 6px 0;}
	#contact .box dl dt { font-size: 13px;}
	#contact .box dl dd { font-size: 12px;}

	#contact .box .app-txt p { font-size: 13px;}
	#contact .box .app-txt p span { font-size: 16px;}
	#contact .box .app-txt p.note { margin-top: 10px; font-size: 12px;}
	#contact .box .app-txt p.note br { display: block;}
}



#flow { background: #f5fcfb;}
#flow .inner-sct { padding: 60px 0px;}
#flow .ttl { margin-bottom: 30px;}
#flow .ctn { width: 96%; max-width: 1180px; margin: 0 auto;}
#flow .flex { display: flex; justify-content: space-between;}
#flow .box { position: relative; width: 25%; padding: 0 20px;}
#flow .box:after { content: ''; display: block; width: 24px; height: 54px;
 position: absolute; top: 50%; right: -12px; transform: translateY(-50%); z-index: 10;
 background: url('/img/arw-R.svg') no-repeat 50% 50% / 100% auto;
}
#flow .box.end:after { content: none;}

#flow .box dl { position: relative; width: 100%; height: 100%; padding: 30px 0; background: #fff; border: solid 1px #969696;}
#flow .box dl dt { margin-bottom: 18px; font-size: clamp(18px,1.8vw,21px); font-weight: 600; line-height: 1; text-align: center;}
#flow .box dl dd {}
#flow .box dl dd.icn { margin-bottom: 18px; text-align: center;}
#flow .box dl dd.icn img { width: 30%; max-width: 136px;}
#flow .box dl dd.txt { padding: 0 30px; font-size: clamp(12px,1.12vw,16px); letter-spacing: 0.15rem; line-height: 1.4;}
@media (max-width: 1281px) {
	#flow .box dl { padding: 20px 0;}
	#flow .box dl dd.icn { margin-bottom: 12px;}
	#flow .box dl dd.txt { padding: 0 20px;}
}
@media (max-width: 801px) {
	#flow .box { padding: 0 12px;}
	#flow .box:after { width: 16px; height: 36px; right: -8px;}
	#flow .box dl dt { margin-bottom: 12px; font-size: 14px;}
	#flow .box dl dd.txt { padding: 0 12px;}
}
@media (max-width: 641px) {
	#flow .ttl { margin-bottom: 0px;}
	#flow .ctn { width: 88%;}
	#flow .flex { display: block;}
	#flow .box { width: 100%; padding: 20px 0;}
	#flow .box:after { width: 24px; height: 54px; top: auto; right: auto; left: 50%; bottom: -25px; transform: translateX(-50%) rotate(90deg);}

	#flow .box dl { padding: 30px; padding-left: 150px;}
	#flow .box dl dt { margin-bottom: 8px; font-size: 16px; letter-spacing: 0.05rem; text-align: left;}
	#flow .box dl dd.icn { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); width: 100px;}
	#flow .box dl dd.icn img { width: 100%;}
	#flow .box dl dd.txt { padding: 0px; font-size: 14px;}
}
@media (max-width: 481px) {
	#flow .inner-sct { padding: 40px 0px;}
	#flow .ttl { margin-bottom: 0px;}
	#flow .box { width: 100%; padding: 16px 0;}
	#flow .box:after { width: 12px; height: 28px; bottom: -15px; transform: translateX(-50%) rotate(90deg);}

	#flow .box dl { padding: 20px; padding-left: 120px;}
	#flow .box dl dt { margin-bottom: 6px; font-size: 14px; text-align: left;}
	#flow .box dl dd.icn { left: 24px; width: 72px;}
	#flow .box dl dd.txt { padding: 0px; font-size: 12px;}
}


#faq { background: #dbf2f0;}
#faq .inner-sct { padding: 60px 0px;}
#faq .ttl { margin-bottom: 20px;}
#faq .ctn { width: 88%; max-width: 900px; margin: 0 auto;}
#faq .ctn ul li { padding: 15px 0;}
#faq .ctn ul li dl { padding: 12px 40px; background: #f5fcfb; border: solid 1px #969696;}
#faq .ctn ul li dl dt { position: relative; padding: 10px 0 15px; padding-left: 40px; border-bottom: solid 1px #969696;
 font-size: 20px; letter-spacing: 0.1rem; line-height: 1.4;
}
#faq .ctn ul li dl dt span.eng { position: absolute; left: 0; top: 10px; color: #00b4a5; font-size: 30px; line-height: 1;}
#faq .ctn ul li dl dd { padding: 15px 8px; font-size: 18px;}
@media (max-width: 641px) {
	#faq .ttl { margin-bottom: 12px;}
	#faq .ctn ul li { padding: 10px 0;}
	#faq .ctn ul li dl { padding: 8px 20px;}
	#faq .ctn ul li dl dt { font-size: 16px;}
	#faq .ctn ul li dl dt span.eng { top: 8px;}
	#faq .ctn ul li dl dd { padding: 12px 5px; font-size: 14px;}
}
@media (max-width: 481px) {
	#faq .ttl { margin-bottom: 8px;}
	#faq .ctn ul li { padding: 6px 0;}
	#faq .ctn ul li dl dt { padding: 6px 0 8px; padding-left: 30px; font-size: 14px; letter-spacing: 0.05rem;}
	#faq .ctn ul li dl dt span.eng { top: 5px; font-size: 24px;}
	#faq .ctn ul li dl dd { padding: 8px 4px; font-size: 12px;}
}



#thanks .inner-sct { padding: 80px 0;}
#thanks .ctn { width: 88%; max-width: 820px; margin: 0 auto;}
#thanks .ctn h2 { margin-bottom: 50px; font-size: clamp(21px,3.6vw,36px); letter-spacing: 0.15rem; text-align: center;}
#thanks .ctn h3 { margin-bottom: 30px; font-size: clamp(16px,3.0vw,30px); letter-spacing: 0.05rem; text-align: center;}
#thanks .ctn p { font-size: 18px; letter-spacing: 0.08rem; line-height: 1.8;}
@media (max-width: 801px) {
	#thanks .inner-sct { padding: 60px 0px;}
}
@media (max-width:481px) {
	#thanks .inner-sct { padding: 60px 0 40px;}
	#thanks .ctn h2 { font-size: 16px; letter-spacing: 0.05rem;}
	#thanks .ctn h3 { margin-bottom: 20px; font-size: 14px; letter-spacing: 0.02rem;}
	#thanks .ctn p { font-size: 12px; letter-spacing: 0.05rem;}
}