@charset "utf-8";
/* CSS Document */
.pagetitle{
	background-color: #FFEBF7;
}

.top_box .imgbox{
	width: 40%;
}
.top_box .txtbox{
	width: 60%;
	padding-right: 5%;
}


.bottom_box{
	background-color: #F4F4F4;
}
.bottom_box .boxwrap .box{
	border-radius: 20px;
	overflow: hidden;
}
.bottom_box .boxwrap .box:not(:last-of-type){
	margin-bottom: 80px;
}
.bottom_box .boxwrap .box:nth-of-type(even){
	flex-direction: row-reverse;
}
.bottom_box .boxwrap .box:nth-of-type(1){
	background-color: #F59C00;
}
.bottom_box .boxwrap .box:nth-of-type(2){
	background-color: #37B3EC;
}
.bottom_box .boxwrap .box:nth-of-type(3){
	background-color: #7DBF4D;
}

.bottom_box .boxwrap .box{
	align-items: stretch;
}
.bottom_box .boxwrap .box > div{
	width: 50%;
}
.bottom_box .boxwrap .box .txtbox{
	padding: 5%;
}
.bottom_box .boxwrap .box .txtbox h3,.bottom_box .boxwrap .box .txtbox p{
	color: #fff;
}
.bottom_box .boxwrap .box .txtbox p{
	line-height: 2;
}

body.on .bottom_box .boxwrap .box .imgbox img{
	opacity: 0;
	display: block;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){

}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){

}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.top_box .imgbox{
		width: 60%;
		margin-bottom: 30px;
	}
	.top_box .txtbox{
		width: 90%;
		padding-right: 0;
	}
	
	.bottom_box .boxwrap .box .imgbox{
		width: 70%;
	}
	.bottom_box .boxwrap .box .txtbox{
		width: 100%;
	}
	body.on .bottom_box .boxwrap .box .imgbox{
		background-image: none!important;
		padding: 5%;
		padding-bottom: 0;
	}
	body.on .bottom_box .boxwrap .box .imgbox img{
		opacity: 1;
		display: block;
		border-radius: 20px;
	}

}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.top_box .imgbox{
		width: 80%;
		margin-bottom: 30px;
	}
	.top_box .txtbox{
		width: 100%;
	}
	.bottom_box .boxwrap .box .imgbox{
		width: 100%;
	}

}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}