@charset "utf-8";

.pc {
	display: block;
}
.sp {
	display: none;
}
@media only screen and (max-width: 768px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}



/* --------------------
 * mv
 * -------------------- */
.page-mv {
	width: 100%;
	height: 460px;
}
.page-system .page-mv {
	background: #0c1d83 url("../img/hero-pc.jpg") no-repeat center left / auto 100%;
}
	.page-mv .lyt-inner {
		position: relative;
		height: 100%;
	}

	.page-title {
		width: 50%;
		position: absolute;
		top: 175px;
		right: 0;
	}

	.page-title_text01 {
		display: block;
		width: 200px;
		margin: 0 auto;
	}

	.page-title_text02 {
		color: #fff;
		font-size: 2.7rem;
		letter-spacing: 0.1em;
		line-height: 1.5;
		text-align: center;
		display: block;
		margin: 35px 0 0 0;
	}
@media only screen and (max-width: 768px) {
	 .page-mv {
		height: 300px;
	}
	.page-system .page-mv {
		background: #0c1d83 url("../img/hero-sp.jpg") no-repeat center top 0 / cover;
	}
		.page-title {
			width: 100%;
			top: 60px;
			right: 0;
		}

		.page-title_text01 {
			width: 250px;
		}

		.page-title_text02 {
			font-size: 1.9rem;
			margin: 70px 0 0 0;
		}
}



/* --------------------
 * section-system
 * -------------------- */
.section-system {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 80px 20px 0 20px;
}
	.section-system #read {
		margin-bottom: 80px;
	}
		.section-system #read p {
			font-size: 1.6rem;
			line-height: 2em;
			text-align: center;
		}

	.section-system .set {
		margin-bottom: 80px;
	}
		.section-system .set h2 {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 2.7rem;
			font-weight: 500;
			line-height: 1.3em;
			margin-bottom: 20px;
		}
			.section-system .set h2 img {
				width: 42px;
			}
			.section-system .set h2 span {
				margin-left: 10px;
			}
			.section-system .set h2 sup {
				vertical-align: super;
				font-size: 1.2rem;
			}


		.section-system .set .read {
			font-size: 1.6rem;
			line-height: 2em;
		}
			.section-system .set .read span {
				display: block;
				margin-top: 8px;
				font-size: 1.2rem;
				line-height: 1.4em;
			}


		.section-system .set .list {
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}
			.section-system .set .list .box {
				width: 49%;
				margin-right: 2%;
				background: #ECECF4;
				border-radius: 10px;
				padding: 20px;
				margin-bottom: 20px;
			}
			.section-system #set3 .list .box:nth-child(2) {
				margin-right: 0;
			}
			.section-system #set2 .list .box:nth-child(2n) {
				margin-right: 0;
			}
			.section-system .set .list .box.column1 {
				width: 100%;
				margin-right: 0;
			}
				.section-system .set .list .box h3 {
					font-size: 2.0rem;
					font-weight: 700;
					color: #0C1D83;
					line-height: 1.3em;
					margin-bottom: 10px;
				}

				.section-system .set .list .box p {
					font-size: 1.4rem;
					font-weight: 500;
					line-height: 1.7em;
				}
					.section-system .set .list .box p span {
						font-size: 1.1rem;
					}
@media only screen and (max-width: 768px) {
	.section-system {
		padding: 50px 20px 0 20px;
	}
		.section-system #read {
			margin-bottom: 50px;
		}
			.section-system #read p {
				font-size: 1.4rem;
				line-height: 1.8em;
				text-align: left;
			}
				.section-system #read p br {
					display: none;
				}
	
		.section-system .set {
			margin-bottom: 50px;
		}
			.section-system .set h2 {
				font-size: 2.0rem;
			}
				.section-system .set h2 img {
					width: 50px;
				}
	
			.section-system .set .js-scrollable .img-table {
				width: 750px;
			}


		.section-system .set .read {
			font-size: 1.4rem;
			line-height: 1.8em;
		}


		.section-system .set .list {
			display: block;
		}
			.section-system .set .list .box {
				width: 100%;
				margin-right: 0;
			}
				.section-system .set .list .box h3 {
					font-size: 1.7rem;
				}

				.section-system .set .list .box p {
					font-size: 1.3rem;
					line-height: 1.6em;
				}
					.section-system .set .list .box p span {
						font-size: 1.0rem;
					}
}