@charset "UTF-8";

.example {
	border: #001446 solid 2px;
	padding: 20px 30px 30px 30px;
}
.example h2 {
	font-weight: 700;
	font-size: 120%;
	padding-bottom: 10px;
	color: #001446;
}
@media(max-width: 900px) {
	.example {
		padding: 20px;
	}
}
@media(max-width: 500px) {
	.example {
		padding: 15px;
	}
	.example h2 {
		padding-bottom: 0px;
	}
}
.example .example-inner {
	display: flex;
}
@media(max-width: 500px) {
	.example .example-inner {
		display: block
	}
}
.example .example-inner:nth-of-type(n+2) {
	margin-top: 40px;
	padding-top: 40px;
	background-image: linear-gradient(to right, #001446, #001446 8px, transparent 8px, transparent 4px);
	background-size: 14px 2px;
	background-position: left top; 
	background-repeat: repeat-x;
}
@media(max-width: 900px) {
	.example .example-inner:nth-of-type(n+2) {
		margin-top: 25px;
		padding-top: 25px;
	}
}
.example .example-inner .imgs {
	width: 30%;
	order: 1;
}
.example .example-inner .explanation {
	width: 70%;
	padding-left: 40px;
	order: 2;
}
@media(max-width: 500px) {
	.example .example-inner .imgs {
		width: auto;
		margin-top: 15px;
	}
	.example .example-inner .explanation {
		width: auto;
		padding-left: 0;
		padding-top: 20px;
	}
}
.example .example-inner .explanation p.lead {
	font-weight: 500;
	padding-bottom: 20px;
}
.example .example-inner .explanation p.sup {
	padding-top: 20px;
}

.why-wrap {
	display: flex;
	margin-top: 40px;
}
.why-wrap .imgs {
	width: 31%;
	order: 1;
}
.why-wrap .explanation {
	width: 69%;
	padding-left: 40px;
	order: 2;
}
.why-wrap .explanation p {
	font-weight: 500;
}
@media(max-width: 500px) {
	.why-wrap {
		display: block;
	}
	.why-wrap .imgs {
		width: auto;
		margin-top: 15px;
	}
	.why-wrap .explanation {
		width: auto;
		padding-left: 0px;
	}
}

/* common調整 */
main .features:nth-of-type(n+2) {
	margin-top: 50px;
}
@media(max-width: 500px) {
	main .features:nth-of-type(n+2) {
		margin-top: 25px;
	}
}