html {scroll-behavior: smooth;}

body {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans","BIZ UDPGothic", Meiryo, sans-serif;
	color: #252525;

}

a {
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}



/******************/
/***** HEADER *****/
/******************/
#header {
	height: 500px; padding-top: 160px;
	color: #fff; text-align: center;
	background-color: #4fa2ef;
	background-image: url(images/header_bg_left.png), url(images/header_bg_right.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left, top right;
}

#header h1 {font-size: 5rem; font-weight: 600;}
#header h1 span { display: block; font-size: 1rem; font-weight: 500; letter-spacing: 0.5em;}
#header p { margin-top: 0.5rem; font-size: 1.2rem; font-weight: 600;}
#header p.header_time { font-size:2em; letter-spacing: 0.25em;}



/******************/
/***** INTRO ******/
/******************/
.intro_wrapper {
	max-width: 800px; padding-left: 20px; padding-right: 20px; margin: 160px auto;
}
.intro_wrapper h1 { margin-bottom: 2em; font-size:2rem; color: #2288e7; text-align: center;}
.intro_wrapper p { font-size:1.4rem; line-height:2.8rem; }


/******************/
/****** NAVI ******/
/******************/
#navi {
	width: 100%; max-width: 1500px; margin: 160px auto; padding: 0;
	display: flex;
}
#navi li {
	list-style: none;
	width: calc(100% / 3);
	background-color: #000;
}
#navi li a {
	display: flex; justify-content: center; align-items: center; height: 20vw;
	text-decoration: none; color: #fff; text-align: center; font-size: 2rem; font-weight: 600;
	background-size: cover; background-position: center; background-repeat: no-repeat;
}
#navi li a:hover {
	font-size: 2.5rem;
	background-color:rgba(0,0,0,0.2); background-blend-mode:darken;
}
.navi_beachhouse a { background-image: url(images/navi_beachhouse.jpg);}
.navi_bbq a { background-image: url(images/navi_bbq.jpg);}
.navi_menu a { background-image: url(images/navi_menu.jpg);}




/******************/
/**** 予約ボタン ****/
/******************/
.booking_btn {
	display: block; width: 500px; max-width: 80%;
	margin: 60px auto;
	border-radius: 10px;
}
.booking_btn:hover { opacity: 0.7; }




/******************/
/****** 共通 ******/
/******************/
.service_wrapper {
	max-width: 1020px; padding-left: 20px; padding-right: 20px; margin: 80px auto;
}
.service_wrapper h1 {
	margin-bottom: 40px;
	font-size: 3rem; font-weight: 600; text-align: center; color: #2288e7;
}
.service_main_price { padding-left: 1rem;}
.service_main_price dl { display: flex; justify-content: space-around; gap: 1rem; border-bottom: dotted 1px #4fa2ef; }
.service_main_price dl:first-child { border-top: dotted 1px #4fa2ef; }
.service_main_price dt { padding: 0.5em; width:9em; }
.service_main_price dd { padding: 0.5em; }
.service_main_price span { font-size: 0.8rem; }


/******************/
/*** beachhouse ***/
/******************/
.beachhouse_flex {display: flex; justify-content: space-between;}
.beachhouse_main, .beachhouse_rental { width: calc( (100% - 1rem) / 2 ); }
.beachhouse_main_title { margin-bottom: 1rem; }
.beachhouse_main .service_main_price { margin-bottom: 80px;}



/******************/
/****** BBQ *******/
/******************/
.bbq_flex {
	display: flex; justify-content: space-between;
}
.bbq_main { width: calc( (100% - 1rem) / 2 ); }

.bbq_main h2 { margin-bottom: 1rem; }
.bbq_main span { font-size: 0.8rem; }
.bbq_include {
	list-style: none; padding-left: 1rem;
	font-size: 1.2rem; font-weight: 500;
}
.bbq_include li { padding-bottom: 0.5rem;}
.bbq_info { padding-left: 1rem; margin-left: 1rem; }
.bbq_info li { margin-top: 1rem; }



/******************/
/****** MENU ******/
/******************/
.menu_flex {
	display: flex; flex-wrap: wrap; justify-content: space-between;
}
.menu_main { width: calc( (100% - 1rem) / 2 ); }
.menu_main h2 { margin-bottom: 1rem; }
.menu_main_price { margin-bottom:80px; }
.menu_main_price dl {
	display: flex; flex-wrap: wrap; 4justify-content: space-between;
	border-top: dotted 1px #4fa2ef;
}
.menu_main_price dt {
	width: calc( 100% - 8em); padding: 0.5em;
	border-bottom: dotted 1px #4fa2ef;
}

.menu_main_price dd {
	width: 6em; padding: 0.5em; padding-right: 1em;
	text-align: right;
	border-bottom: dotted 1px #4fa2ef;
}
.menu_main_price span {font-size: 0.8rem;}


.huladance {
	text-align: center; font-size: 1.4rem;
}
.huladance_schedule {
	display: flex; flex-direction: column; align-items: center;
}
.huladance_schedule p {
	margin-top: 1em; max-width: 34em;
}


/******************/
/***** ACCESS *****/
/******************/
.googlemap iframe { height:450px!important; }


/******************/
/** INFORMATION ***/
/******************/
.informations { display: flex; flex-wrap: wrap; justify-content: space-between;}
.informations_image, .informations dl { width: calc( (100% - 1rem) / 2 ); }
.informations_image {
	background-image: url(images/informations_image.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;
}
.informations dl {display: flex; flex-wrap: wrap;border-top: dotted 1px #4fa2ef;}
.informations dt { width: 5rem; padding: 0.5rem;  border-bottom: dotted 1px #4fa2ef;}
.informations dd {width: calc(100% - 7rem); padding: 0.5rem;  border-bottom: dotted 1px #4fa2ef;}


/******************/
/***** FOOTER *****/
/******************/
#footer {
	padding: 1rem;
	font-size: 0.8rem; color: #fff; text-align: center;
	background-color: #4fa2ef;
}




@media screen and (max-width: 768px) {
	/*Header*/
	#header { height: 440px; padding-top: 140px; background-size: 50vw;}
	#header h1 { font-size: 11vw;}


	/*Intro*/
	.intro_wrapper { margin-top:80px; margin-bottom:80px; }
	.intro_wrapper h1 { margin-bottom: 1em; font-size: 1.8rem; line-height: 1.6em; }
	.intro_wrapper p { font-size:1.1rem; }


	/*Navi*/
	#navi { margin: 80px auto; }
	#navi li a { height:50vw; font-size: 8vw;}

	/*Menu*/
	.service_wrapper h1 { margin-bottom: 1em; font-size: 2em; }
	.service_main_price { padding-left:0; }
	.service_main_price dl { justify-content:space-between; }
	.service_main_price dd {text-align: right;}
	.beachhouse_flex, .bbq_flex, .menu_flex { flex-direction: column; align-items: center;}
	.beachhouse_main, .beachhouse_rental, .bbq_main, .menu_main { width:540px; max-width: 100%; }
	.beachhouse_main .service_main_price { margin-bottom:40px; }
	.bbq_main:first-child { margin-bottom: 80px; }
	.menu_main_price { margin-bottom:40px; }
	.menu_main_price dt { width: calc(100% - 6em); }


	/*Map*/
	.googlemap iframe { height:40vh!important; }
	
	/*Info*/
	.informations { flex-direction: column; align-items: center; }
	.informations_image { width: 100%; height: 36vw; }
	.informations dl { width:540px; max-width: 100%; margin-top: 40px;}
	.informations dd { width: calc(100% - 5rem); }
}