@charset "utf-8";

/* eyeCatch */
.relative{
	position: relative;
}
.absolute{
	position: absolute;
	top: 0;
	left: 0;
}

/* planRow */
.planRow{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.planImg_box,
.planTxt_box{
	width: 50%;
}
.planImg_box{
	background-color: #f9f9f9;
}
.planTxt_box{
	position: sticky;
	top: 0;
}
.planDetail{
	background-color: #e4f1f7;
	padding: 80px;
	box-sizing: border-box;
}
.planPayment{
	background-color: #fff;
	padding: 80px;
	box-sizing: border-box;
}
.planDetail h3{
	margin-bottom: 10px;
}
.detailRow{
	margin-bottom: 20px;
}
.detailRow li{
	font-size: 1.1em;
	margin-bottom: 5px;
}
.detailRow li:last-child,
.pointRow li:last-child{
	margin-bottom: 0px;
}
.pointRow li{
	font-size: 1.25em;
	color: #fff;
	padding: 0.5em 1.25em;
	box-sizing: border-box;
	background: linear-gradient(90deg,#00b5c3 0%,#006082 100%);
	margin-bottom: 10px;
}
.planPayment p.notice{
	font-size: 0.75em;
	padding-top: 20px;
}
@media (max-width:1500px){
	.detailRow li{
		font-size: 1em;
	}
	.pointRow li{
		font-size: 1.15em;
	}
	.planPayment p.notice{
		font-size: 0.65em;
	}
}
@media (max-width:1400px){
	.planImg_box{
		width: 55%;
	}
	.planTxt_box{
		width: 45%;
	}
	.pointRow li{
		font-size: 1.05em;
	}
}
@media (max-width:1200px){
	.planDetail{
		padding: 50px;
	}
	.planPayment{
		padding: 50px;
	}
	.detailRow li{
		font-size: 0.9em;
	}
	.pointRow li{
		font-size: 0.95em;
	}
	.planPayment p.notice{
		font-size: 0.55em;
	}
}
@media (max-width:1024px){
	.planImg_box,
	.planTxt_box{
		width: 100%;
	}
	.planTxt_box{
		position: static;
		top: auto;
	}
	.planImg_box{
		order: 1;
	}
	.planDetail{
		padding: 50px 0;
	}
	.planPayment{
		padding: 50px 0;
	}
	.planDetail h3,
	.detailRow,
	.pointRow,
	.planPayment p{
		width: 600px;
		margin: 0 auto;
	}
	.planDetail h3{
		margin-bottom: 10px;
	}
	.detailRow{
		margin-bottom: 20px;
	}
}
@media (max-width:720px){
	.planDetail h3,
	.detailRow,
	.pointRow,
	.planPayment p{
		width: 80%;
	}
}
@media (max-width:500px){
	.planDetail h3,
	.detailRow,
	.pointRow,
	.planPayment p{
		width: 90%;
	}
}

/* pageNotice_wrap */
.pageNotice{
	background-color: #d8e4ea;
}