@charset "utf-8";

/* headLogo
================================================== */
#headLogo {
	mix-blend-mode: difference;
	position: fixed;
	z-index: 999;
	top: 20px;
	left: 3%;
}
#headLogo p{
	font-size: 200%;
	white-space: nowrap;
}
@media screen and (max-width: 1200px) {
	#headLogo p{
		font-size: 3vw;
	}
}
@media screen and (max-width: 600px) {
	#headLogo p{
		font-size: 140%;
	}
}
#headLogo p a{
	color: #444;
}
#headLogo p a:hover{
	color: #fff;
	transition: 1s;
}

/* mainWrapper
================================================== */
#mainWrapper {
	position: relative;
}
@media screen and (max-width: 600px) {
	#mainWrapper {
	}
}
#mainBg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

/* mainArea
================================================== */
/* mainArea */
#mainArea{
	position: relative;
	z-index: 1;
}
#mainArea h1{
	color: #fff;
	text-align: center;
	font-size: 500%;
	line-height: 100%;
	padding: 22% 0;
}
@media screen and (max-width: 1600px) {
	#mainArea h1{
		font-size: 5vw;
	}
}
@media screen and (max-width: 600px) {
	#mainArea h1{
		font-size: 240%;
		padding: 52% 0;
	}
}

/* contentWrapper
================================================== */
.contentWrapper {
	position: relative;
	z-index: 2;
	background-color: #eee;
}

/* menuArea
================================================== */
#menuArea {
	width: 90%;
	margin: 0 auto;
	max-width: 1200px;
	padding-bottom: 5%;
}
@media screen and (max-width: 600px) {
	#menuArea {
		padding-bottom: 10%;
	}
}


/* menuBlock */
.menuBlock {
	padding-top: 3%;
}
.menuBox {
	float: left;
	width: 35%;
}
@media screen and (max-width: 1100px) {
	.menuBox {
		float: none;
		width: 100%;
		padding-bottom: 5%;
	}
}
.menuBox dl{
	padding: 2% 0 3% 0;
}
.menuBox dl:last-child{
	padding: 2% 0 3% 0;
	border-bottom: none;
}
.menuBox dt{
	padding: 0 0 3% 2%;
	margin: 0;
	font-size: 80%;
	line-height: 140%;
	font-weight: bold;
}
@media screen and (max-width: 600px) {
	.menuBox dt{
		font-size: 2.5vw;
	}
}
.menuBox dd{
	padding: 0 0 0 2%;
	margin: 0;
	line-height: 160%;
	font-weight: bold;
}
@media screen and (max-width: 600px) {
	.menuBox dd{
		padding: 1% 0 0 2%;
		font-size: 100%;
	}
}
.menuBox dd a{
	color: #222;
}
/* ------ carouselArea ------ */
.carouselArea {
	float: right;
	width: 60%;
}
@media screen and (max-width: 600px) {
	.carouselArea {
		float: none;
		width: 100%;
	}
}

/* ------ mapArea ------ */
#mapArea {
	padding: 3% 0 0;
}
@media screen and (max-width: 1100px) {
	#mapArea {
		padding: 8% 0 0;
	}
}
#mapBlock {
	height: 60vh;
}
@media screen and (max-width: 600px) {
	#mapBlock {
		height: 80vh;
	}
}
#map {
	width: 100%;
	height: 100%;
}
/* ------ google-maps ------ */
.google-maps {
position: relative;
padding-bottom: 0; // これが縦横比
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}