@charset "utf-8";
#quality .inner-sct { padding: 80px 0 100px;}
#quality .ctn { width: 88%; max-width: 900px; margin: 0 auto;}
#quality .ctn h2 { margin-bottom: 20px; font-size: clamp(24px, 3.6vw,36px); letter-spacing: 0.15rem; line-height: 1.4;}
#quality figure { margin-bottom: 40px; text-align: center;}
#quality figure img { width: 100%;}
#quality .txt.mb { margin-bottom: 30px;}
#quality .txt h3 { margin-bottom: 20px; font-size: clamp(20px, 3.0vw,30px); letter-spacing: 0.15rem; line-height: 1.4;}
#quality .txt p { font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8;}
@media (max-width: 801px) {
	#quality .txt p { font-size: 16px;}
}
@media (max-width: 481px) {
	#quality .inner-sct { padding: 40px 0px;}
	#quality figure { margin-bottom: 20px;}
	#quality .ctn h2 { margin-bottom: 12px; font-size: 20px; letter-spacing: 0.08rem;}
	#quality .txt h3 { margin-bottom: 12px; font-size: 16px; letter-spacing: 0.05rem;}
	#quality .txt p { font-size: 13px; letter-spacing: 0.05rem; }
	#quality .txt.mb { margin-bottom: 20px;}
}


#todo { background: #f5fcfb; border-bottom: solid 0.5px #969696;}
#todo .inner-sct { padding: 100px 0 40px;}
#todo .tips { position: relative; width: 88%; max-width: 900px; margin: 0 auto 30px; text-align: center;}
#todo .tips h2 { font-size: clamp(24px,4.0vw,40px); font-weight: 400;}
#todo .tips h2 span { display: inline-block; line-height: 1; vertical-align: baseline;}
#todo .tips h2 span.eng { margin-right: 30px; color: #00b4a5; font-size: clamp(24px,6.0vw,50px); letter-spacing: 0.08rem;}
#todo .tips h2 span.jp { font-size: clamp(18px,3.0vw,30px); letter-spacing: 0.15rem;}

#todo .ctn { position: relative; width: 88%; max-width: 900px; margin: 0 auto; padding: 30px 0 80px; text-align: center;}
#todo .tit { margin-bottom: 30px; padding: 20px 0; border-top: dashed 1px #969696; border-bottom: dashed 1px #969696;}
#todo .tit.top { border-top: none;}
#todo .tit h3 { font-size: clamp(18px,3.0vw,30px); letter-spacing: 0.05rem; line-height: 1.25; text-align: center;}
#todo .txt p { font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8; text-align: left;}
#todo .txt p.mb { margin-bottom: 20px;}
#todo .txt figure { margin-bottom: 20px; text-align: center;}
#todo .txt figure img { width: 90%; max-width: 1000px;}

#todo .point { }
#todo .point ul { display: flex; justify-content: space-between; font-size: 0; margin-bottom: 30px;}
#todo .point ul li { width: calc( 25% - 8px); padding: 8px 0;}
#todo .point ul li dl { padding: 20px; background: #373737; height: 100%;}
#todo .point ul li dl dt { margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid 1px #969696; color: #fff; font-size: clamp(16px,2.2vw,21px); letter-spacing: 0.15rem; line-height: 1.4; text-align: left;}
#todo .point ul li dl dd { color: #fff; font-size: 16px; letter-spacing: 0.1rem; text-align: left;}
#todo .point p { font-size: 18px;}
#todo .flex { display: flex; justify-content: space-between; flex-wrap: wrap;}

#todo .flex .box-2 { width: 48%; padding: 30px 0;}
#todo .flex .box-2 h4 { margin-bottom: 12px; padding-bottom: 10px; border-bottom: solid 1px #969696; font-size: clamp(18px,2.4vw,24px); letter-spacing: 0.05rem;}
#todo .flex .box-2 .descript { min-height: 150px;}
#todo .flex .box-2 p { font-size: 16px; letter-spacing: 0.1rem; line-height: 1.8; text-align: left;}
#todo .flex .box-2 figure { text-align: center;}
#todo .flex .box-2 figure img { width: 100%;}


#todo .flex .box-3 { width: 31.5%;}
#todo .flex .box-3 h4 { margin-bottom: 12px; padding-bottom: 10px; border-bottom: solid 1px #969696; font-size: clamp(18px,2.4vw,24px); letter-spacing: 0.05rem;}
#todo .flex .box-3 .descript { position: relative;}
#todo .flex .box-3 .descript .inner { min-height: 188px;}
#todo .flex .box-3 p { font-size: 16px; letter-spacing: 0.1rem; line-height: 1.8; text-align: left;}
#todo .flex .box-3 figure { margin-bottom: 30px; text-align: center;}
#todo .flex .box-3 figure img { width: 80%; max-width: 250px;}
#todo .flex .box-3 dl { min-height: 190px; border: solid 1px #c4c4c4;}
#todo .flex .box-3 dl dt { padding: 8px 0; background: #00b4a5; color: #fff; font-size: clamp(16px,2.0vw,20px); text-align: center;}
#todo .flex .box-3 dl dd { padding: 16px 20px; font-size: 16px; text-align: left;}

@media (max-width: 1281px) {
	#todo .txt p { font-size: 16px;}
	#todo .point ul { flex-wrap: wrap;}
	#todo .point ul li { width: calc( 25% - 4px);}
	#todo .point ul li dl dt { margin-bottom: 12px; padding-bottom: 12px;}
	#todo .point ul li dl dd { font-size: 16px;}
	#todo .point p { font-size: 16px;}
	
	#todo .flex .box-2 p { font-size: 14px;}
	#todo .flex .box-3 p { font-size: 14px;}
	#todo .flex .box-3 dl { min-height: 200px;}
	#todo .flex .box-3 dl dd { padding: 20px 16px 10px; font-size: 14px;}
}
@media (max-width: 801px) {
	#todo .inner-sct { padding: 40px 0 80px;}
	#todo .ctn { padding: 20px 0 40px;}

	#todo .txt p { font-size: 14px;}

	#todo .point ul li { width: calc( 50% - 8px);}

	#todo .flex .box-3 { width: 100%; padding: 0 20px; margin-bottom: 40px;}
	#todo .flex .box-3:last-child { margin-bottom: 0px;}
	#todo .flex .box-3 h4 { margin-bottom: 20px;}
	#todo .flex .box-3 .descript .inner { min-height: 160px; padding-right: 220px;}
	#todo .flex .box-3 .descript figure { position: absolute; right: 0; top: 0; width: 200px; margin: 0;}
	#todo .flex .box-3 .descript figure img { width: 100%;}
	#todo .flex .box-3 dl { min-height: auto;}
	#todo .flex .box-3 dl dd { padding: 15px 20px;}
}
@media (max-width: 641px) {
	#todo .flex .box-2 { width: 100%; padding: 20px 20px 30px;}
	#todo .flex .box-2:last-child { padding: 20px 20px 0;}
	#todo .flex .box-2 .descript { min-height: auto; margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#todo .inner-sct { padding: 40px 0px;}
	#todo .tips { margin-bottom: 12px; text-align: left;}
	#todo .tips h2 span.eng{ margin-right: 10px; font-size: 23px; letter-spacing: 0.02rem;}
	#todo .tips h2 span.jp { font-size: 10px; letter-spacing: 0rem;}

	#todo .ctn { padding: 12px 0 30px;}

	#todo .tit { margin-bottom: 12px; padding: 8px 0;}
	#todo .tit h3 { font-size: 16px;}
	#todo .txt p { font-size: 13px; letter-spacing: 0.05rem; line-height: 1.65;}
	#todo .txt p.mb { margin-bottom: 12px;}

	#todo .point ul li { width: calc( 50% - 4px); padding: 4px 0;}
	#todo .point ul li dl dt { margin-bottom: 8px; padding-bottom: 8px; font-size: 13px;}
	#todo .point ul li dl dd { font-size: 12px;}
	#todo .point p { font-size: 13px; letter-spacing: 0.05rem; line-height: 1.65; text-align: left;}

	#todo .flex .box-2 { padding: 12px; padding: 20px 12px 30px;}
	#todo .flex .box-2:last-child { padding: 20px 12px 0;}
	#todo .flex .box-2 h4 { font-size: 14px;}
	#todo .flex .box-2 p { font-size: 12px; letter-spacing: 0.05rem;}

	#todo .flex .box-3 { padding: 0 12px;}
	#todo .flex .box-3 h4 { padding-bottom: 6px; font-size: 14px;}
	#todo .flex .box-3 .descript { margin-bottom: 12px;}
	#todo .flex .box-3 .descript .inner { min-height: 100px; padding-right: 130px;}
	#todo .flex .box-3 .descript figure { width: 120px; }
	#todo .flex .box-3 p { font-size: 12px; letter-spacing: 0.05rem;}
	#todo .flex .box-3 dl dt { padding: 6px 0px; font-size: 13px;}
	#todo .flex .box-3 dl dd { padding: 15px; font-size: 12px;}
}