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


#info { border-bottom: solid 0.5px #969696;}
#info .inner-sct { padding: 30px 0 120px;}
#info .box { position: relative; width: 88%; max-width: 900px; margin: 0 auto 60px; padding: 20px 40px 40px; background: #373737;}
#info .box:last-child { margin-bottom: 0px;}
#info .box .topics { margin-bottom: 12px; padding: 20px 0; border-bottom: solid 0.5px #969696;}
#info .box .topics h3 { color: #fff; font-size: clamp(18px,3.0vw,30px); letter-spacing: 0.15rem; line-height: 1.4; text-align: center;}
#info .box .tit { margin-bottom: 20px;}
#info .box .tit h4 { color: #fff; font-size: clamp(18px,2.4vw,24px);; text-align: center;}
#info .box .txt { margin-bottom: 30px;}
#info .box .txt p { color: #fff; font-size: 18px; letter-spacing: 0.1rem; line-height: 1.76;}
#info .box .txt p.mb { margin-bottom: 20px;}
#info .box .txt p.note { font-size: 14px;}
#info .box figure { margin-bottom: 60px; text-align: center;}
#info .box figure img.w100 { width: 100%;}
#info .box figure img.w960 { width: 92%; max-width: 900px;}
#info .box .flex { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
#info .box .flex .bloc { width: calc(50% - 10px); padding: 10px 0;}
#info .box .flex .bloc dl { height: 100%; padding: 20px; background: #4e504f;}
#info .box .flex .bloc dl dt { position: relative; margin-bottom: 12px; padding-left: 30px; color: #fff; font-size: 18px; letter-spacing: 0.1rem; line-height: 1.4;}
#info .box .flex .bloc dl dt:before { content: ''; display: block; width: 20px; height: 20px; border: solid 6px #006e78; border-radius: 50%;
 position: absolute; left: 0; top: 0.2em;
}
#info .box .flex .bloc dl dd { color: #fff; font-size: 16px; letter-spacing: 0.08rem; }


#info .box ul.support { display: flex; justify-content: space-between; width: 100%; margin-bottom: 60px;}
#info .box ul.support li { width: 33%; padding: 0 15px;}
#info .box ul.support li figure { display: none;}
#info .box ul.support li figure img { width: 100%;}
#info .box ul.support li dl dt { margin-bottom: 10px; padding-bottom: 10px; border-bottom: dashed 1px #969696;
 color: #fff; font-size: 18px; letter-spacing: 0.15rem; line-height: 1.4;}
#info .box ul.support li dl dd { color: #fff; font-size: 14px; letter-spacing: 0.1rem;}


#info .box aside { padding: 30px; background: #4e504f;}
#info .box aside .inner { position: relative; min-height: 200px; padding-right: 320px;}
#info .box aside figure { width: 300px; position: absolute; right: 0; top: 0; margin: 0;}
#info .box aside figure img { width: 100%;}
#info .box aside figure figcaption { padding-top: 8px; color: #fff; font-size: 14px; letter-spacing: 0.15rem; text-align: left;}
#info .box aside h4 { position: relative; margin-bottom: 12px; padding-left: 30px; color: #fff; font-size: 18px; letter-spacing: 0.1rem; line-height: 1.4;}
#info .box aside h4:before { content: ''; display: block; width: 20px; height: 20px; border: solid 6px #006e78; border-radius: 50%;
 position: absolute; left: 0; top: 0.25em;
}
#info .box aside p { color: #fff; font-size: 16px; letter-spacing: 0.08rem; }
@media (max-width: 1281px) {
	#info .box { margin-bottom: 40px; padding: 12px 40px 40px;}
	#info .box .txt p { font-size: 16px;}
	#info .box aside .inner { min-height: 200px; padding-right: 240px;}
	#info .box aside figure { width: 220px;}
	#info .box aside p { font-size: 14px;}
}
@media (max-width: 801px) {
	#info .inner-sct { padding: 40px 0 80px;}
	#info .box .tit h4 { font-size: 18px;}
	#info .box .txt p { font-size: 14px;}
	#info .box .txt p.note { font-size: 12px;}
	
	#info .box figure { margin-bottom: 40px;}
	#info .box figure.pc { display: none;}

	#info .box .flex .bloc dl dd { font-size: 14px;}

	#info .box ul.support { display: block; margin-bottom: 30px;}
	#info .box ul.support li { width: 100%; padding: 15px;}
	#info .box ul.support li figure { display: block; margin-bottom: 8px; text-align: center;}
	#info .box ul.support li dl dd.paid { margin: 10px auto 0; padding: 10px; border-radius: 8px; background: #80be26; color: #000; letter-spacing: 0rem;}
	#info .box ul.support li dl dd.paid span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; text-align: center;}
	#info .box aside { padding: 20px 30px;}
	#info .box aside .inner { min-height: auto; padding: 0;}
	#info .box aside figure { position: relative; right: auto; top: auto; width: 100%; padding-top: 20px;}
}
@media (max-width: 641px) {
	#info .box .tit { margin-bottom: 8px;}
	#info .box .flex { display: block;}
	#info .box .flex .bloc { width: 100%; padding: 8px 0;}
	#info .box .flex .bloc dl dt { padding-left: 24px; font-size: 16px;}
	#info .box .flex .bloc dl dt:before { width: 15px; height: 15px; border-width: 4px; top: 0.28em;}

	#info .box aside h4 { padding-left: 24px; font-size: 16px;}
	#info .box aside h4:before { width: 15px; height: 15px; border-width: 4px; top: 0.28em;}
}
@media (max-width: 481px) {
	#info .inner-sct { padding: 20px 0px 60px;}
	#info .box { margin-bottom: 20px; padding: 10px 20px 20px;}
	#info .box .topics { margin-bottom: 8px; padding: 12px 0;}
	#info .box .topics h3 { font-size: 16px;}
	#info .box .tit h4 { font-size: 16px;}

	#info .box .txt { margin-bottom: 20px;}
	#info .box .txt p { font-size: 13px; letter-spacing: 0.05rem; line-height: 1.65;}
	#info .box .txt p.note { font-size: 10px;}

	#info .box figure { margin-bottom: 20px;}

	#info .box .flex .bloc{ padding: 6px 0;}
	#info .box .flex .bloc dl { padding: 12px 15px;}
	#info .box .flex .bloc dl dd { font-size: 12px;}

	#info .box ul.support { margin-bottom: 20px;}
	#info .box ul.support li {  padding: 15px 0;}
	#info .box ul.support li dl dt { margin-bottom: 8px; padding-bottom: 8px; font-size: 14px; letter-spacing: 0.1rem;}
	#info .box ul.support li dl dd { font-size: 12px; letter-spacing: 0.05rem;}

	#info .box aside { padding: 12px 15px;}
	#info .box aside h4 { font-size: 14px;}
	#info .box aside p { font-size: 12px;}
	#info .box aside figure figcaption { padding-top: 4px; font-size: 10px;}
}