@charset "UTF-8";

header{
	position: absolute;
	z-index: 9998;
	left: 0;
	top: -34px;
}

#mv{
	position: relative;
}
#mvContent{
	display: flex;
	align-items: center;
	background: url("/parts/common/img/bg_blue.png") center top #f2fbfb;
	margin: 34px;
	padding: 102px 0 68px 0;
	border-radius: 10px;
	height: 50vw;
	/*min-height: 800px;*/
}
#mv #mvTxt{
	width: 45%;
}
#mv h1{
	padding-left: 34px;
}
#mv h1 img{
	width: 34vw;
}
#mv h1 span{
	display: block;
	font-size: 1.8vw;
	line-height: 1.3;
	padding-left: 7vw;
	margin-bottom: -0.3em;
}
#mv h1 strong{
	display: block;
	font-size: 3.6vw;
	line-height: 1.4;
	padding-left: 7vw;
	margin-top: -0.3em;
}
#mv #mvPhoto{
	width: 58%;
}
#mv ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}
#mv ul li{
	width: calc(88% / 2);
	padding: 17px;
}
#mv #mv01{
	transform: rotate(5deg);
}
#mv #mv02{
	transform: rotate(-5deg);
	margin-top: 1vw;
}
#mv #mv03{
	transform: rotate(-5deg);
	margin-left: 1vw;
}
#mv #mv04{
	transform: rotate(5deg);
	margin-top: 1vw;
}
#mv #scroll{
	position: absolute;
	z-index: 999;
	right: 68px;
	bottom: -68px;
}
#mainContent{
	position: relative;
	z-index: 998;
}
#bnrBox{
	text-align: center;
	margin-bottom: 56px;
}
#bnrBox img{
	max-width: 798px;
}

#topTxt{
	background: url("/parts/common/img/bg_sand.png") center top #f7f7ee;
	padding: 102px;
}
#topTxt h3,
#topTxt p{
	text-align: center;
}
#topTxt h3{
	font-size: 300%;
	line-height: 1.3;
	margin-bottom: 34px;
}
#topTxt p{
	margin-bottom: 34px;
}

#topTxt ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#topTxt li{
	width: 50%;
	max-width: 416px;
	padding: 0 17px;
	text-align: center;
}
#topTxt li strong{
	display: inline-block;
	font-size: 112%;
	line-height: 1.3;
	margin-top: 34px;
	padding-bottom: 16px;
	border-bottom: solid 2px #3a3a3a;
}


@media screen and (max-width: 1400px) {

	#mvContent{
		height: 54vw;
	}
	#mv ul li{
		width: calc(94% / 2);
	}

}

@media screen and (max-width: 1350px) {

	#mvContent{
		height: 67vw;
		padding-top: 170px;
	}

}

@media screen and (max-width: 1024px) {/* iPad pro */


}

@media screen and (max-width: 920px) {/* vw */

	header{
		top: -4vw;
	}

	#mvContent{
		flex-wrap: wrap;
		justify-content: center;
		margin: 4vw;
		padding: 18vw 0 8vw 0;
		height: inherit;
	}
	#mv #mvTxt{
		width: inherit;
		text-align: center;
	}
	#mv h1{
		padding-left: 0;
	}
	#mv h1 img{
		width: 76vw;
		margin-left: -10vw;
	}
	#mv h1 span{
		font-size: 4.6vw;
		padding-left: 0;
	}
	#mv h1 strong{
		font-size: 10vw;
		line-height: 1.4;
		padding-left: 0;
	}
	#mv #mvPhoto{
		width: 100%;
		margin-top: 4vw;
	}
	#mv ul li{
		width: calc(88% / 4);
		padding: 0.6vw;
	}
	#mv #mv02{
		margin-top: 0;
	}
	#mv #mv03{
		margin-left: 0;
	}
	#mv #mv04{
		margin-top: 0;
	}
	#mv #scroll{
		right: 8vw;
		bottom: -8vw;
	}
	#mv #scroll img{
		width: 2vw;
	}

	#bnrBox{
		text-align: center;
		margin-bottom: 8vw;
		margin-top: 8vw;
	}
	#bnrBox img{
		width: 90vw;
	}
	#topTxt{
		padding: 12vw 4vw;
	}
	#topTxt p{
		text-align: left;
	}
	#topTxt h3{
		margin-bottom: 4vw;
	}
	#topTxt p{
		margin-bottom: 8vw;
	}

	#topTxt li{
		max-width: inherit;
		padding: 0 2vw;
	}
	#topTxt li strong{
		font-size: 94%;
		margin-top: 4vw;
		padding-bottom: 2vw;
	}

}

@media screen and (max-width: 768px) {/* TB */


}

@media screen and (max-width: 759px) {/* SP */

	#topTxt h3{
		font-size: 210%;
	}
	#topTxt h3 .show920vw{
		display: none;
	}

}