@charset "utf-8";

/* kv */
#kv {
	z-index:1;
	position:relative;
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#kv {
			margin-bottom:100px;
		}
	}

#kv div {
	z-index:1;
}
#kv h1 {
	width:42%;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}
	@media(max-width:767px) {
		#kv h1 {
			width:54%;
		}
	}

#kv h1 > img {
	width:100%;
}



/* overview */
#overview {
	max-width:800px;
	margin:0 auto 150px auto;
	padding:0 15px;
}
	@media(max-width:767px) {
		#kv {
			margin-bottom:100px;
		}
	}

#overview > p {
	line-height:1.6;
	margin-bottom:1em;
}



/* legend */
#legend {
	margin-bottom:150px;
	background:url(../images/bg1.jpg) center center no-repeat;
	backgorund-size:cover;
	padding-bottom:100px;
}
#legend > h2 {
	margin-bottom:100px;
}
#legend > div {
	max-width:900px;
	padding:30px;
	background-color:rgba(255,255,255,0.65);
	margin:0 auto;
}
	@media(max-width:767px) {
		#legend > div {
			padding:30px 15px;
		}
	}

#legend > div > p {
	line-height:1.4;
	margin-bottom:40px;
	text-shadow: 1px 1px 2px #FFF, -1px -1px 2px #FFF, 1px 1px 4px #FFF, -1px -1px 4px #FFF;
}
#legend > div > figure {
	text-align:center;
}
#legend > div > figure > img {
	margin-bottom:40px;
	width:100%;
	max-width:820px;
}
#legend > div > figure > figcaption {
	text-align:left;
	font-size:16px;
	line-height:1.4;
	text-shadow: 1px 1px 2px #FFF, -1px -1px 2px #FFF, 1px 1px 4px #FFF, -1px -1px 4px #FFF;
	text-indent:-1em;
	padding-left:1em;
}



/* play */
	@media(max-width:767px) {
		#play {
			margin-bottom:100px;
		}
	}

#play > div > div {
	position:relative;
	width:960px;
	margin:0 auto;
	height:420px;
}
	@media(min-width:1366px) {
		#play > div > div {
			height:480px;
		}
	}
	@media(min-width:1600px) {
		#play > div > div {
			height:540px;
		}
	}
	@media(max-width:979px) {
		#play > div > div {
			width:auto;
			padding:0 15px;
		}
	}
	@media(max-width:767px) {
		#play > div > div {
			width:auto;
			height:auto;
		}
	}

#walk {
	background:url(../images/bg2.jpg) center center;
	background-size:cover;
}
	@media(max-width:767px) {
		#walk {
			background:none;
		}
	}

#sun {
	background:url(../images/bg3.jpg) center center;
	background-size:cover;
}
	@media(max-width:767px) {
		#sun {
			background:none;
		}
	}

#fishing {
	background:url(../images/bg4.jpg) center center;
	background-size:cover;
}
	@media(max-width:767px) {
		#fishing {
			background:none;
		}
	}

#oyster {
	background:url(../images/bg5.jpg) center center;
	background-size:cover;
}
	@media(max-width:767px) {
		#oyster {
			background:none;
		}
	}

#marinesports {
	background:url(../images/bg6.jpg) center center;
	background-size:cover;
}
	@media(max-width:767px) {
		#marinesports {
			background:none;
		}
	}

#play > div > div > div {
	width:480px;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
}
	@media(max-width:979px) {
		#play > div > div > div {
			width:48%;
			left:2%;
		}
	}
	@media(max-width:767px) {
		#play > div > div > div {
			width:auto;
			padding:25px 0;
			position:static;
			transform:none;
			-webkit-transform:none;
		}
	}

#play > div > div > div > img {
	display:none;
}
	@media(max-width:767px) {
		#play > div > div > div > img {
			display:block;
			margin-bottom:15px;
		}
	}

#play > div > div > div > h3 {
	font-size:42px;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝",serif;
	margin-bottom:20px;
	padding-bottom:8px;
	display:inline-block;
}
	@media(max-width:979px) {
		#play > div > div > div > h3 {
			font-size:32px;
		}
	}

#play > div > div > div > p {
	line-height:1.4;
	font-size:18px;
}
	@media(max-width:979px) {
		#play > div > div > div > p {
			font-size:16px;
		}
	}

#walk h3 {
	color:#2C5722;
	border-bottom:3px solid #2C5722;
}
#sun h3 {
	color:#D27B2D;
	border-bottom:3px solid #D27B2D;
}
#fishing h3 {
	color:#3C496A;
	border-bottom:3px solid #3C496A;
}
#oyster h3 {
	color:#CC2E00;
	border-bottom:3px solid #CC2E00;
}
#marinesports h3 {
	color:#0F5C8C;
	border-bottom:3px solid #0F5C8C;
}

#sun > div > div, #fishing > div > div {
	left:50% !important;
}



/* location */
#location {
	background:url(../images/bg7.jpg) center center;
	background-size:cover;
}
	@media(max-width:767px) {
		#location {
			margin-bottom:100px;
		}
	}

#location > div {
	max-width:930px;
	margin:0 auto;
	padding:600px 15px 100px 15px;
}
	@media(max-width:767px) {
		#location > div {
			padding:70px 15px;
		}
	}

#location > div > h2 {
	font-size:42px;
	color:#FFF;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝",serif;
	text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px 1px 4px #000, -1px -1px 4px #000;
	margin-bottom:20px;
	line-height:1.4;
}
	@media(max-width:979px) {
		#location > div > h2 {
			font-size:32px;
		}
	}

#location > div > p {
	font-size:20px;
	color:#FFF;
	text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px 1px 4px #000, -1px -1px 4px #000;
	line-height:1.4;
}
	@media(max-width:979px) {
		#location > div > p {
			font-size:16px;
		}
	}



/* movie */
#movie {
	background:url(../images/bg8.jpg) center center;
	background-size:cover;
}
#movie > ul {
	max-width:700px;
	margin:80px auto 0 auto;
}
	@media(max-width:767px) {
		#movie > ul {
			padding:0 15px;
		}
	}

#movie > ul > li {
	width:308px;
	float:left;
	margin-bottom:80px;
}
	@media(max-width:767px) {
		#movie > ul > li {
			width:auto;
			float:none;
		}
	}

#movie > ul > li:nth-child(even) {
	float:right;
}
	@media(max-width:767px) {
		#movie > ul > li:nth-child(even) {
			float:none;
		}
	}

#movie > ul > li > a > figure > img  {
	width:100%;
}
#movie > ul > li > a > figure > figcaption {
	background-color:rgba(0,0,0,0.6);
	padding:8px 0;
	text-align:center;
	color:#FFF;
}
#movie > span {
	display:block;
	max-width:740px;
	margin:0 auto;
	text-align:right;
	font-size:14px;
	color:#FFF;
	padding-bottom:80px;
	line-height:1.4;
}
	@media(max-width:767px) {
		#movie > span {
			padding:0 15px 50px 15px;
		}
	}



/* map */
#map {
	height:640px;
	margin-bottom:20px;
}
	@media(max-width:979px) {
		#map {
			height:320px;
		}
	}

#access > p {
	font-size:20px;
	line-height:1.4;
	max-width:960px;
	margin:0 auto 50px auto;
}
	@media(max-width:979px) {
		#access > p {
			padding:15px;
			font-size:16px;
		}
	}

#access > p > span {
	font-size:16px;
	display:block;
	text-indent:-1em;
	padding-left:1em;
}
	@media(max-width:979px) {
		#access > p > span {
			font-size:14px;
		}
	}



/* hotel */
#hotel > h2 {
	margin-bottom:50px;
}
	@media(max-width:979px) {
		#hotel > h2 {
			margin-bottom:20px;
		}
	}

#hotel > ul {
	max-width:960px;
	margin:0 auto 80px auto;
}
	@media(max-width:979px) {
		#hotel > ul {
			padding:0 15px;
		}
	}

#hotel > ul > li {
	width:30%;
	display:inline-block;
	margin-right:5%;
}
	@media(max-width:979px) {
		#hotel > ul > li {
			width:100%;
			margin:0 0 25px 0;
		}
	}

#hotel > ul > li:last-child {
	margin-right:0;
}
#hotel > ul > li > a {
	display:block;
	text-align:center;
	border: 1px solid #FEA645;
	background-color: #FEEFCB;
	padding:15px 10px;
}


/* group */
#group > h2 {
	margin-bottom:80px;
}
	@media(max-width:979px) {
		#group > h2 {
			margin-bottom:40px;
		}
	}

#group > div {
	max-width:960px;
	margin:0 auto 100px auto;
}
	@media(max-width:979px) {
		#group > div {
			padding:0 15px;
		}
	}

#group > div > figure {
	margin:0 auto 30px auto;
}
#group > div > figure > img {
	width:100%;
	margin-bottom:30px;
}
#group > div > figure > figcaption {
	line-height:1.4;
}

#group > div > h3 {
	display:inline-block;
	background-color:#000;
	color:#FFF;
	padding:8px 15px;
	margin-bottom:10px;
}
#group > div > p {
	line-height:1.4;
	font-size:18px;
	margin-bottom:40px;
}
	@media(max-width:979px) {
		#group > div > p {
			font-size:16px;
		}
	}

#group > div > span {
	display:block;
	font-size:16px;
	margin-bottom:80px;
	line-height:1.4;
}
	@media(max-width:979px) {
		#group > div > span {
			font-size:14px;
		}
	}

#group > div > aside {
	background-color:#F6F6F6;
	padding:15px;
	max-width:510px;
	margin:0 auto;
}
#group > div > aside > span {
	display:block;
	text-align:center;
	padding-bottom:10px;
}



/* footer */
address {
	text-align:center;
	font-size:14px;
	line-height:1.2;
	font-style:normal;
	line-height:30px;
}