@charset "utf-8";

#reason {}
#reason .inner-sct { padding: 80px 0 150px;}
#reason .article-ctn { width: 92%; max-width: 1000px; margin: 0 auto;}
#reason .article-ctn.mb { margin-bottom: 80px;}
#reason .article-hd { position: relative; margin-bottom: 40px; padding-left: 160px;}
#reason .article-hd .badge { position: absolute; left: 0; top: 0.4em; width: 130px; background: #FFB300; border: solid 3px #003C88; border-radius: 8px;
 color: #003C88; font-weight: 700; line-height: 1; text-align: center;
}
#reason .article-hd .badge span { display: block; width: 100%; padding: 8px 0; border-bottom: dotted 3px #003C88; font-size: 21px; font-size: min(1.25vw,21px);}
#reason .article-hd .badge em { display: block; width: 100%; padding: 12px 0; font-size: 50px; font-size: min(4.2vw,50px);}
#reason .article-hd h2 { color: #003C88; font-size: 42px; font-size: min(3.0vw,42px); font-weight: 700; letter-spacing: 0.05rem;}
#reason .ctn figure { text-align: center;}
#reason .ctn figure.mb { margin-bottom: 40px;}
#reason .ctn figure img { width: 100%;}
#reason .ctn-flex { display: flex; justify-content: space-between;}
#reason .ctn-flex.mb { margin-bottom: 40px;}
#reason .ctn-flex figure { width: 48.5%;}

#reason .ctn p {font-size: 18px; font-size: min(1.15vw,18px); letter-spacing: 0.05rem;}
#reason .ctn p.mb { margin-bottom: 40px;}
@media (max-width: 1281px) {
	#reason .article-hd .badge { top: -0.4em;}
}
@media (max-width: 801px) {
	#reason .article-hd { margin-bottom: 20px; padding-left: 0px;}
	#reason .article-hd .badge { position: relative; width: 100px; margin: 0 auto 8px;}
	#reason .article-hd .badge span { padding: 6px 0; border-bottom: dotted 2px #003C88; font-size: 18px;}
	#reason .article-hd .badge em { padding: 8px 0; font-size: 36px;}
	#reason .article-hd h2 { font-size: 4.0vw;}
	#reason .article-hd h2 br { display: none;}
}
@media (max-width: 641px) {
	#reason .ctn figure.mb { margin-bottom: 20px;}
	#reason .ctn-flex.mb { margin-bottom: 20px;}
	#reason .ctn p { font-size: 14px;}
	#reason .ctn p.mb { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#reason .inner-sct { padding: 40px 0 80px;}
	#reason .article-ctn.mb { margin-bottom: 40px;}
	#reason .article-hd { margin-bottom: 12px;}
	#reason .article-hd .badge { width: 68px; border-width: 2px; top: 0;}
	#reason .article-hd .badge span { padding: 3px 0; font-size: 13px;}
	#reason .article-hd .badge em { padding: 4px 0; font-size: 28px;}
	#reason .article-hd h2 { font-size: 20px; line-height: 1.4;}
}

.inner-sct { padding: 80px 0 150px;}
.article-ctn { width: 92%; max-width: 1000px; margin: 0 auto;}
.article-ctn.mb { margin-bottom: 80px;}
.article-hd { position: relative; margin-bottom: 40px; padding-left: 160px;}
.article-hd .badge { position: absolute; left: 0; top: 0.4em; width: 130px; background: #FFB300; border: solid 3px #003C88; border-radius: 8px;
 color: #003C88; font-weight: 700; line-height: 1; text-align: center;
}
.article-hd .badge span { display: block; width: 100%; padding: 8px 0; border-bottom: dotted 3px #003C88; font-size: min(1.25vw,21px);}
.article-hd .badge em { display: block; width: 100%; padding: 12px 0; font-size: min(4.2vw,50px);}
.article-hd h2 { color: #003C88; font-size: min(3.0vw,42px); font-weight: 700; letter-spacing: 0.05rem;}
.ctn figure { text-align: center;}
.ctn figure.mb { margin-bottom: 40px;}
.ctn figure img { width: 100%;}
.ctn-flex { display: flex; justify-content: space-between;}
.ctn-flex.mb { margin-bottom: 40px;}
.ctn-flex figure { width: 48.5%;}

.ctn p {font-size: 18px; font-size: min(1.15vw,18px); letter-spacing: 0.05rem;}
.ctn p.mb { margin-bottom: 40px;}
@media (max-width: 1281px) {
	.article-hd .badge { top: -0.4em;}
}
@media (max-width: 801px) {
	.article-hd { margin-bottom: 20px; padding-left: 0px;}
	.article-hd .badge { position: relative; width: 100px; margin: 0 auto 8px;}
	.article-hd .badge span { padding: 6px 0; border-bottom: dotted 2px #003C88; font-size: 18px;}
	.article-hd .badge em { padding: 8px 0; font-size: 36px;}
	.article-hd h2 { font-size: 4.0vw;}
	.article-hd h2 br { display: none;}
}
@media (max-width: 641px) {
	.ctn figure.mb { margin-bottom: 20px;}
	.ctn-flex.mb { margin-bottom: 20px;}
	.ctn p { font-size: 14px;}
	.ctn p.mb { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	.inner-sct { padding: 40px 0 80px;}
	.article-ctn.mb { margin-bottom: 40px;}
	.article-hd { margin-bottom: 12px;}
	.article-hd .badge { width: 68px; border-width: 2px; top: 0;}
	.article-hd .badge span { padding: 3px 0; font-size: 13px;}
	.article-hd .badge em { padding: 4px 0; font-size: 28px;}
	.article-hd h2 { font-size: 20px; line-height: 1.4;}
}