@charset "utf-8";

/* pageOuter_wrap */
.scroll_fadeIn{
	opacity: 0;
	transition: opacity 2s ease-out;
}
.scroll_fadeIn.show{
	opacity: 1;
}
.pageOuter_wrap{
	background-attachment: fixed;
	aspect-ratio: 1920 / 1080;
	background-image: url(../images/top/siteBg.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

/* pageWrap */
.pageWrap{
	background-color: #000;
}

/* eyeCatch */
.eyeCatch{
	width: 100%;
	height: 80vh;
	background-image: url(../images/recommendPlan/eyeBg.jpg);
	background-size: cover;
	background-position: center center;
	position: relative;
	overflow: hidden;
}
.eyeCatch:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 100%;
	background-image: url(../images/recommendPlan/moveBg.png);
	background-repeat: repeat-x;
	background-position: 0 0;
	background-size: auto 100%;
	animation: eyeSlider 60s linear infinite;
	will-change: transform;
	z-index: 2;
}
@keyframes eyeSlider{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(-50%);
	}
}
.eyeCatch>p{
	position: absolute;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%,0);
	width: 1100px;
	z-index: 3;
	filter: drop-shadow(0 0 10px rgba(0,0,0,0.75));
}
@media (max-width:1320px){
	.eyeCatch>p{
		width: 80%;
	}
}
@media (max-width:1024px){
	.eyeCatch{
		height: 500px;
	}
}
@media (max-width:768px){
	.eyeCatch{
		height: 400px;
	}
	.eyeCatch:before{
		width: 400%;
	}
	.eyeCatch>p{
		width: 100%;
	}
}

/* planRow_wrap */
.planRow_wrap{
	background-color: #efeae1;
}
.planRow{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.planImg_box,
.planTxt_box{
	width: 50%;
}
.planImg_box{
	background-color: #fff;
}
.planTxt_box{
	position: sticky;
	top: 0;
}
.planDetail{
	background-color: #d3c8af;
	padding: 80px;
	box-sizing: border-box;
}
.planPayment{
	padding: 80px;
	box-sizing: border-box;
}
.planDetail h3{
	margin-bottom: 10px;
}
.detailRow{
	margin-bottom: 30px;
}
.detailRow li{
	font-size: 1.1em;
	margin-bottom: 5px;
}
.detailRow li span{
	font-size: 1.6em;
}
.detailRow li:last-child,
.pointRow li:last-child{
	margin-bottom: 0px;
}
.pointRow li{
	font-size: 1.15em;
	color: #000;
	padding: 0.5em 1.25em;
	box-sizing: border-box;
	background-color: #fff;
	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.05em;
	}
	.planPayment p.notice{
		font-size: 0.65em;
	}
}
@media (max-width:1400px){
	.planImg_box{
		width: 55%;
	}
	.planTxt_box{
		width: 45%;
	}
	.pointRow li{
		font-size: 0.95em;
	}
}
@media (max-width:1200px){
	.planDetail{
		padding: 50px;
	}
	.planPayment{
		padding: 50px;
	}
	.detailRow li{
		font-size: 0.9em;
	}
	.pointRow li{
		font-size: 0.85em;
	}
	.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: 700px;
		margin: 0 auto;
	}
	.planDetail h3{
		margin-bottom: 10px;
	}
	.detailRow{
		margin-bottom: 20px;
	}
}
@media (max-width:840px){
	.planDetail h3,
	.detailRow,
	.pointRow,
	.planPayment p{
		width: 80%;
	}
}
@media (max-width:500px){
	.planDetail h3,
	.detailRow,
	.pointRow,
	.planPayment p{
		width: 90%;
	}
}