@charset "UTF-8";
/* CSS Document */



/****************************************************************************************************
contents
****************************************************************************************************/
#sec1 {
	padding: 60px 0;
}
#sec2 {
	padding: 0 0 0 0;
	background: URL(../img/plan/sec2-bg.jpg) no-repeat center right;
	background-size: cover;
}
#sec3 {
	padding: 0 0 0 0;
	background: URL(../img/plan/sec3-bg.jpg) no-repeat center left;
	background-size: cover;
}
#sec4 {
	padding: 80px 0 80px 0;
	background: URL(../img/plan/sec4-bg.jpg) no-repeat top right;
}

.plan-btn {
	margin: 40px 0 0 0;
}
.plan-btn ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.plan-btn ul li {
	margin: 0 18px;
	box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, .35);
}
.plan-area {
	padding: 0 0 0 0;
}
.plan-ttl {
	margin: 0 0 20px 0;
	background: URL(../img/plan/ttl-bg.png) no-repeat center center;
}
.plan-block {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 20px;
}
.plan-block div {
	box-shadow: 0 0 10px rgba(0,0,0,.10);
}
.plan-detail {
	padding: 160px 0 120px 0;
	background: URL(../img/plan/plan-bg.jpg) no-repeat center center;
	background-size: cover;
}
.plan-detail img {
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, .15);
}
.plan-link {
	width:1000px;
	margin:0 auto;
	margin-top:60px;
}
.plan-link select {
	width:100%;
	height:auto;
	padding:1.0em;
	background:#F0EDE1;
	font-size:18px;
}
.mg-detail {
	padding: 100px 0 140px 0;
	background: URL(../img/plan/plan-bg.jpg) no-repeat center center;
	background-size: cover;
}



@media screen and (max-width: 767px),
screen and (max-width: 960px) and (orientation: landscape) {
	/****************************************************************************************************
	contents
	****************************************************************************************************/
	#sec1 {
		padding: 10vw 4vw;
		background-size: auto 100%;
	}
	#sec2 {
		padding: 0 4vw 0 4vw;
	}
	#sec3 {
		padding: 0 4vw 0 4vw;
		background: URL(../img/plan/sec3-bg-sp.jpg) no-repeat -30vw 0;
		background-size: cover;
	}
	#sec4 {
		padding: 10vw 0;
		background: URL(../img/plan/sec4-bg.jpg) no-repeat top right;
		background-size: 100% auto;
	}
	
	.plan-btn {
		margin: 5vw 0 0 0;
	}
	.plan-btn ul li {
		width: 40vw;
		margin: 0 1vw;
		box-shadow: 0.5vw 0.5vw 0.5vw 0.1vw rgba(0, 0, 0, .35);
	}
	.plan-area {
		padding: 0 0 0 0;
	}
	.plan-ttl {
		margin: 0 0 0 0;
		background: URL(../img/plan/ttl-bg.png) no-repeat center center;
		background-size: 110vw auto;
	}
	.plan-ttl img {
		width: 26vw;
		margin: auto;
	}
	.plan-block {
		gap: 2vw;
	}
	.plan-block div {
		width: 45vw;
	}
	.plan-block div + div {
	}
	.plan-block {
		padding: 0 4vw;
	}
	.plan-box {
		width: 60vw;
		margin: auto;
	}
	.plan-detail {
		padding: 15vw 4vw 10vw 4vw;
		background: URL(../img/plan/plan-bg.jpg) no-repeat center center;
		background-size: cover;
	}
	.plan-detail img {
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, .15);
	}
	.plan-link {
		width:100%;
		margin:0 auto;
		margin-top:5vw;
	}
	.plan-link select {
		width:100%;
		height:auto;
		padding:1.0em;
		background:#F0EDE1;
		font-size:1rem;
	}
	.mg-detail {
		padding: 10vw 4vw 10vw 4vw;
		background: URL(../img/plan/plan-bg.jpg) no-repeat center center;
		background-size: cover;
	}
}

@media screen and (max-width: 960px) and (orientation: landscape) {
}