@charset "utf-8";

/* sub visual */
.sub-visual {background-image:url("../image/sub_02/sub_visual.jpg");}

/* 02_01 / 02_02 */
.process-wrap {}
.process-wrap ol {width:100%; height:auto; display:flex; flex-wrap:wrap;}
.process-wrap ol li {position:relative;}
.process-wrap ol li:after {content:''; display:block; width:3.167em; height:3.167em; background:url("../image/sub_02/arrow.png") 0 0 / 100% no-repeat; position:absolute;}
.process-wrap ol li mark {display:block;}
.process-wrap ol li mark span {display:block; width:100%; text-align:right; font-family:'twaysky'; font-style:italic;}
.process-wrap ol li em {display:block; font-weight:600; line-height:1.4;}

.process-wrap .process-1 {}
.process-wrap .process-1 li {width:25%;}
.process-wrap .process-1 li:after {top:90px; left:-36px;}
.process-wrap .process-1 li mark {width:7.625em; height:7.625em; padding:1.875em 1.563em; margin:0 auto; border-radius:100%; font-weight:800; font-size:1.333em; color:#fff;}
.process-wrap .process-1 li mark span {font-size:1.25em;}
.process-wrap .process-1 li em {color:#3b3d3f; padding:32px 20px 48px;}
.process-wrap .process-1 li:nth-child(-n+4) mark {background-color:#0c4c95;}
.process-wrap .process-1 li:nth-child(-n+4) span {color:#3ec8f0; margin-bottom:16px;}
.process-wrap .process-1 li:nth-child(n+4) mark {background-color:#d39614;}
.process-wrap .process-1 li:nth-child(n+4) span {color:#805700; margin-bottom:16px;}
.process-wrap .process-1 li:nth-child(1) em, .process-wrap .process-1 li:nth-child(6) em {font-size:1.333em;}
.process-wrap .process-1 li:nth-child(1) em {color:#0c3660;}
.process-wrap .process-1 li:nth-child(6) em {color:#4c3503;}
.process-wrap .process-1 li:nth-child(1):after, .process-wrap .process-1 li:nth-child(5):after {display:none;}

.process-wrap .process-2 {}
.process-wrap .process-2 li {width:33.33%; height:auto; min-height:15em; padding:0 1.75em 1.75em; color:#fff;}
.process-wrap .process-2 li:after {top:calc(50% - 1.25em); left:-36px; transform:translateY(-50%);}
.process-wrap .process-2 li div {width:100%; height:100%; padding:1.333em;}
.process-wrap .process-2 li mark {font-weight:800; font-size:1.333em; line-height:1.2;}
.process-wrap .process-2 li mark span {font-size:1em;}
.process-wrap .process-2 li em {font-size:.833em; padding:1.6em 1em 0; line-height:1.4;}
.process-wrap .process-2 li:nth-child(-n+3) div {background-color:#0c4c95;}
.process-wrap .process-2 li:nth-child(-n+3) span {color:#3ec8f0; margin-bottom:16px;}
.process-wrap .process-2 li:nth-child(n+4) div {background-color:#d39614;}
.process-wrap .process-2 li:nth-child(n+4) span {color:#805700; margin-bottom:16px;}
.process-wrap .process-2 li:nth-child(1):after, .process-wrap .process-2 li:nth-child(4):after {display:none;}

.process-wrap .contact-info {width:100%; height:auto; padding:.833em 4em; margin-top:2.667em; background-color:#f8f8f8; border:1px solid #959393; text-align:left;}
.process-wrap .contact-info ul {display:flex; flex-wrap:wrap;}
.process-wrap .contact-info ul li {width:100%; margin:13px 0;}
.process-wrap .contact-info ul li.w50 {width:50%;}
.process-wrap .contact-info ul li:before {content:''; display:inline-block; vertical-align:middle; width:10px; height:6px; margin-right:12px; background-color:#000;}
.process-wrap .contact-info ul li strong {font-weight:600;}
.process-wrap .contact-info ul li:last-child strong {font-weight:800; color:#184b85;}

@media screen and (max-width: 1194px) {
	.process-wrap .process-1 li {width:33.33%;}
	.process-wrap .process-1 li:nth-child(4):after, .process-wrap .process-1 li:nth-child(7):after {display:none;}
	.process-wrap .process-1 li:nth-child(5):after {display:block;}

	.process-wrap .process-2 li {width:50%;}
	.process-wrap .process-2 li:nth-child(odd):after {display:none;}
	.process-wrap .process-2 li:nth-child(4):after {display:block;}
}
@media screen and (max-width: 926px) {
	.process-wrap .process-1 li {width:50%;}
	.process-wrap .process-1 li:after {left:-24px;}
	.process-wrap .process-1 li:nth-child(3):after, .process-wrap .process-1 li:nth-child(5):after {display:none;}
	.process-wrap .process-1 li:nth-child(4):after {display:block;}

	.process-wrap .contact-info {padding:.833em 1.4em;}
	.process-wrap .contact-info ul li.w50 {width:100%;}
}
@media screen and (max-width: 667px) {
	.process-wrap ol li:after {width:3em; height:3em; left:50% !important; transform:translateX(-50%) rotate(90deg) !important;}

	.process-wrap .process-1 li {width:100%;}
	.process-wrap .process-1 li:after {top:82%;}
	.process-wrap .process-1 li em {padding:16px 0 64px;}
	.process-wrap .process-1 li:nth-child(odd):after {display:block;}
	.process-wrap .process-1 li:nth-child(8):after {display:none;}

	.process-wrap .process-2 li {width:100%; padding:1.75em 0}
	.process-wrap .process-2 li:after {top:90%;}
	.process-wrap .process-2 li:nth-child(odd):after {display:block;}
	.process-wrap .process-2 li:nth-child(6):after {display:none;}

	.process-wrap .contact-info ul li {line-height:1.2;}
	.process-wrap .contact-info ul li:before {display:block; margin:0 0 .5em 0;}
}