/* CSS Document */

html{
	font-size: 62.5%;
	line-height: 100%;
	-webkit-text-size-adjust:100%;
	}

body{
	color: #404040;
	font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka, sans-serif;
	font-size: 1.4rem;
	line-height: 1.8em;
	}

a{
	color: #1596bb;
	text-decoration: none;
	transition: all 0.2s ease-out;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	cursor: pointer;
	}

img{
	max-width: 100%;
	height: auto;
	vertical-align: top;
	}

main{}
	main article{
		position: relative;
		padding: 80px 0;
		}
		main article > svg{
			position: absolute;
			left: 0;
			top: -20px;
			width: 5900px;
			height: 40px;
			fill: #fff;
			z-index: 1;
			}
	main header{
		padding-bottom: 50px;
		}
	main footer{
		padding-top: 50px;
		}
	main section{
		padding: 50px 0;
		}
		main section:last-child{
			padding-bottom: 80px;
			}
	main h2{
		margin-bottom: 2em;
		text-align: center;
		}
	main p{
		margin-top: 1em;
		}
	main .wrap{
		text-align: center;
		}
	main .thumbBox{
		padding-top: 66.66%;
		}

/* 表示切替 */
#dispSwitch {
	border-top: 1px solid #CCCCCC;
	background: none repeat scroll 0 0 #F2F2F2;
	font-size: 400%;
	padding: 1em 0;
	text-align: center;
	}
#dispSp{
	cursor:pointer;
	}

#wrapper{
	min-width: 980px;
	overflow: hidden;
	}

#header{
	line-height: 42px;
	}
	#header h1{
		float: left;
		}
	#header ul{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align-items: center;
		align-items: center;
		-ms-flex-pack: end;
		justify-content: flex-end;
		}
	#header li{
		position: relative;
		list-style: none;
		margin-left: 1em;
		}
		#header li iframe,#header li .fb-like span{
			vertical-align: middle !important;
			}
		#header li:last-child{
			padding-right: 1.2em;
			font-weight: bold;
			}
	#header a{
		color: #404040;
		text-decoration: underline;
		}
	#header i{
		position: absolute;
		right: 0;
		top: 50%;
		}
	#header svg{
		width: 1em;
		height: 1em;
		margin-top: -0.5em;
		fill: #404040;
		vertical-align: top;
		opacity: .8;
		}

#hero{
	position: relative;
	margin-bottom: 70px;
	background: url(../images/heroImg-01.jpg) center center;
	background-size: cover;
	overflow: hidden;
	}
	#hero > p{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		text-align: center;
		line-height: 540px;
		z-index: 1;
		}
		#hero > p img{
			vertical-align: middle;
			}
	#hero > div{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 1.5em;
		background: rgba(0,0,0,.6);
		color: #fff;
		font-size: 1.6rem;
		font-weight: bold;
		text-align: center;
		z-index: 1;
		}
	#hero li{
		position: relative;
		height: 680px;
		}
		#hero li div.wrap{
			text-align: right;
			}
		#hero li span{
			position: relative;
			display: inline-block;
			margin-top: 1em;
			padding: 0.5em 1em;
			background: rgba(0,0,0,.6);
			border: 1px solid #fff;
			color: #fff;
			}
	#hero .thumbBox{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		}
	#hero .slick-arrow{
		top: 270px;
		margin-top: -2.5em;
		padding: 2em 0.2em;
		}
		#hero .slick-arrow svg{
			width: 3em;
			height: 3em;
			}
	#hero .slick-prev{
		left: calc(50vw - 590px);
		}
	#hero .slick-next{
		right: calc(50vw - 590px);
		}

#gNav{
	position: absolute;
	top: 722px;
	left: 0;
	width: 100%;
	height: 100px;
	overflow: hidden;
	padding-top: 10px;
	background: #1596bb;
	}
	#gNav.min{
		position: fixed;
		top: 0;
		left: 0;
		height: 60px;
		padding: 0;
		z-index: 10;
		-webkit-animation: gNav 0.5s 1;
		animation: gNav 0.5s 1;
		}
		#gNav.min svg{
			display: none;
			}
		@-webkit-keyframes gNav {
			0% {top: -90px;}
			100% {top: 0px;}
			}
		@keyframes gNav {
			0% {top: -90px;}
			100% {top: 0px;}
			}
	#gNav ul{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		list-style: none;
		}
	#gNav li{
		position: relative;
		height: 60px;
		padding: 5px 0;
		overflow: hidden;
		border-left: 1px solid rgba(255,255,255,.4);
		}
		#gNav li:hover:before{
			opacity: .8;
			}
		#gNav li:last-child{
			border-right: 1px solid rgba(255,255,255,.4);
			}
		#gNav li:nth-child(1){}
			#gNav li:nth-child(1):before{
				content: url(../images/gNav-01.png);
				}
		#gNav li:nth-child(2){}
			#gNav li:nth-child(2):before{
				content: url(../images/gNav-02.png);
				}
		#gNav li:nth-child(3){}
			#gNav li:nth-child(3):before{
				content: url(../images/gNav-03.png);
				}
		#gNav li:nth-child(4){}
			#gNav li:nth-child(4):before{
				content: url(../images/gNav-04.png);
				}
	#gNav a{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
		}
	#gNav svg{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 5900px;
		height: 40px;
		fill: #1596bb;
		z-index: 1;
		}

[id^="nav_"]{
	position: absolute;
	display: block;
	width: 100px;
	height: 0;
	margin-top: -100px;
	}

#route{
	background: url(../images/pattern-01.jpg);
	}
	#route a{
		text-decoration: underline;
		}
	#route figure{
		margin-top: 50px;
		}
	#route li{
		position: relative;
		}
		#route li span{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0.8em;
			background: rgba(0,0,0,.6);
			color: #fff;
			line-height: 1.2em;
			text-align: center;
			}
	#route section{
		padding-bottom: 0;
		}
	#route .flex{
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		margin-top: 50px;
		}
		#route .flex > *{
			width: calc(50% - 0.5em);
			}
	#route .con{
		padding-right: 1em;
		}
		#route .con h4{
			margin-top: 0.3em;
			font-size: 1.1em;
			font-weight: bold;
			line-height: 1em;
			}
		#route .con [href="#"]{
			pointer-events: none;
			text-decoration: none;
			}
#route #gMap .infoWinMap a {
	
	}
#route #gMap .infoWinMap h4 {
	font-size: 1.4rem;
	font-weight: bold;
	}

#hotel{
	padding-bottom: 0;
	}
	#hotel section{
		padding-top: 0;
		border-top: 10px solid #fff;
		overflow: hidden;
		}
		#hotel section:nth-of-type(1){
			background: url(../images/hoteBg-01.jpg);
			}
			#hotel section:nth-of-type(1) .but{
				color: #d45c80;
				}
				#hotel section:nth-of-type(1) .but:hover{
					background: #d45c80;
					color: #fff;
					}
					#hotel section:nth-of-type(1) .but:hover svg{
						fill: #fff;
						}
				#hotel section:nth-of-type(1) .but svg{
					fill: #d45c80;
					}
		#hotel section:nth-of-type(2){
			background: url(../images/hoteBg-02.jpg);
			}
			#hotel section:nth-of-type(2) .but{
				color: #e3802c;
				}
				#hotel section:nth-of-type(2) .but:hover{
					background: #e3802c;
					color: #fff;
					}
					#hotel section:nth-of-type(2) .but:hover svg{
						fill: #fff;
						}
				#hotel section:nth-of-type(2) .but svg{
					fill: #e3802c;
					}
		#hotel section:nth-of-type(3){
			background: url(../images/hoteBg-03.jpg);
			}
			#hotel section:nth-of-type(3) .but{
				color: #1596bb;
				}
				#hotel section:nth-of-type(3) .but:hover{
					background: #1596bb;
					color: #fff;
					}
					#hotel section:nth-of-type(3) .but:hover svg{
						fill: #fff;
						}
				#hotel section:nth-of-type(3) .but svg{
					fill: #1596bb;
					}
		#hotel section:nth-of-type(4){
			background: url(../images/hoteBg-04.jpg);
			}
			#hotel section:nth-of-type(4) .but{
				color: #2f820e;
				}
				#hotel section:nth-of-type(4) .but:hover{
					background: #2f820e;
					color: #fff;
					}
					#hotel section:nth-of-type(4) .but:hover svg{
						fill: #fff;
						}
				#hotel section:nth-of-type(4) .but svg{
					fill: #2f820e;
					}
	#hotel h3{
		margin-top: -5px;
		}
	#hotel h4{
		margin-top: 2em;
		}
	#hotel li{
		position: relative;
		margin: 0 1px;
		}
		#hotel li span{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0.8em;
			background: rgba(0,0,0,.6);
			color: #fff;
			line-height: 1.2em;
			text-align: center;
			}
	#hotel .flex{
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		margin: 3em 0;
		}
		#hotel .flex > *{
			width: calc(33.33% - 1em);
			}
		#hotel .flex > *+*{
			margin-left: 1.33em;
			}

#spot{}
	#spot header{
		padding-bottom: 0;
		}
		#spot header .flex{
			position: relative;
			margin-top: 50px;
			padding: 50px 0;
			}
			#spot header .flex:before{
				content: "";
				position: absolute;
				left: 50%;
				top: 0;
				width: 100vw;
				height: 100%;
				margin-left: -50vw;
				background: url(../images/pattern-01.jpg);
				}
		#spot header .but{
			display: inline-block;
			}
	#spot dl{
		position: relative;
		width: calc(33.33% - 2em);
		margin-left: 3em;
		}
		#spot dl:nth-child(n+4){
			margin-top: 3em;
			}
		#spot dl:nth-child(3n+1){
			margin-left: 0;
			}
		#spot dl:hover{
			cursor: pointer;
			opacity: .8;
			}
	#spot dt{
		background: #fff;
		}
	#spot dd{
		margin-top: 0.5em;
		line-height: 1.4em;
		}
		#spot dd br{
			display: none;
			}
		#spot dd a{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			}
	#spot section{
		display: none;
		}
	#spot footer{}
		#spot footer .flex{
			-ms-flex-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			margin: 3em 0;
			}

#spotMap{
	width: 70%;
	background: #f2f2f2;
	}
	#spotMap .com{
		padding-right: 1em;
		}
		#spotMap .com h4{
			margin-top: 0.3em;
			font-size: 1.1em;
			font-weight: bold;
			line-height: 1em;
			}
		#spotMap .com p{
			margin: 0;
			text-align: center;
			}
	#spotMap .but{
		display: inline-block;
		margin-top: 1em;
		padding: 0.8em 1em;
		background: #436d99;
		box-shadow: none;
		color: #fff;
		font-size: 1.3rem;
		}
		#spotMap .but[href="#"]{
			display: none;
			}

#spotList{
	position: relative;
	width: calc(30% - 1em);
	border: 1px solid #bbb;
	}
	#spotList ul{
		padding: 2em 1em;
		list-style: none;
		}
	#spotList li{
		margin: 0.5em 0;
		}
		#spotList li a{
			position: relative;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-ms-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
			color: #404040;
			font-weight: bold;
			line-height: 1.4em;
			text-align: left;
			}
		#spotList li span{
			width: calc(100% - 5em);
			padding-left: 1em;
			}
		#spotList li .thumbBox{
			width: 5em;
			padding-top: 5em;
			}
	#spotList .slick-arrow{
		position: absolute;
		top: auto;
		width: 100%;
		margin: 0;
		padding: 0.2em;
		background: none;
		z-index: 1;
		transition: opacity 0.2s ease-out;
		}
		#spotList .slick-arrow:hover{
			cursor: pointer;
			opacity: .8;
			}
		#spotList .slick-arrow svg{
			width: 1em;
			height: 1em;
			}
	#spotList .slick-prev{
		top: 0;
		}
	#spotList .slick-next{
		bottom: 0;
		}

#food{
	padding-top: 0;
	background: url(../images/pattern-01.jpg);
	}
	#food h2{
		padding: 1.5em 0;
		background:rgba(227,220,171,.8);
		}
	#food dl{
		position: relative;
		}
	#food dt{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		}
	#food dd+dd{
		margin-top: 1em;
		text-align: justify;
		line-height: 1.5em;
		}
	#food .flex{
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		margin-top: 3em;
		}
		#food .flex > *{
			width: calc(25% - 3em);
			}
	#food .thumbBox{
		padding-top: calc(100% - 8px);
		border-radius: 100%;
		border: 4px solid #436d99;
		}

#facebook{}
	#facebook p+div{
		margin: auto;
		margin-top: 3em;
		}

#footer{
	background: url(../images/pattern-01.jpg);
	}
	#footer svg{
		width: 1em;
		height: 1em;
		color: #000;
		vertical-align: top;
		}
	#footer li{
		position: relative;
		padding-left: 1.2em;
		line-height: 1em;
		list-style: none;
		}
		#footer li i{
			position: absolute;
			left: 0;
			top: 50%;
			}
		#footer li svg{
			margin-top: -0.5em;
			}

#fNav{
	padding: 30px 0;
	color: #1596bb;
	}
	#fNav > *:nth-of-type(n+2){
		margin-top: 10px;
		}
	#fNav dt{
		position: absolute;
		padding-left: 1.2em;
		color: #1596bb;
		font-weight: bold;
		}
		#fNav dt a{
			color: #1596bb;
			}
		#fNav dt i{
			position: absolute;
			left: 0;
			top: 50%;
			}
		#fNav dt svg{
			margin-top: -0.5em;
			fill: #1596bb;
			opacity: .5;
			}
	#fNav dd{
		padding-left: 10em;
		overflow: hidden;
		}
		#fNav dd span{
			float: left;
			margin: 0 20px 20px 0;
			text-align: left;
			}
			#fNav dd span a{
				display: block;
				}
	#fNav ul{
		float: left;
		}
		#fNav ul+ul{
			margin-left: 3em;
			}
	#fNav li{}
		#fNav li+li{
			margin-top: 1em;
			}
		#fNav li a{
			color: #404040;
			}
		#fNav li svg{
			fill: #1596bb;
			opacity: .5;
			}
	#fNav+div{
		padding: 1em 0;
		background:rgba(227,220,171,.8);
		color: #fff;
		}
		#fNav+div ul{
			text-align: center;
			}
		#fNav+div li{
			display: inline-block;
			}
		#fNav+div li+li{
			margin-left: 1em;
			}
		#fNav+div svg{
			fill: #1596bb;
			opacity: .5;
			}

#copyright{
	position: relative;
	padding: 1em 0;
	text-align: center;
	}
	#copyright:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #1596bb;
		opacity: .9;
		}
	#copyright p{
		position: relative;
		color: #fff;
		font-size: 1.2rem;
		line-height: 1em;
		}

.wrap{
	width: 980px;
	margin: auto;
	}

.flex{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	}
	.flex > *{
		width: 100%;
		}

.slick-arrow{
	position: absolute;
	top: 50%;
	margin-top: -1.7em;
	padding: 1em 0.3em;
	background: rgba(255,255,255,.8);
	z-index: 1;
	transition: opacity 0.2s ease-out;
	}
	.slick-arrow:hover{
		cursor: pointer;
		opacity: .8;
		}
	.slick-arrow svg{
		width: 1.4em;
		height: 1.4em;
		fill: #404040;
		vertical-align: middle;
		}
.slick-prev{
	left: 0;
	}
.slick-next{
	right: 0;
	}

.but{
	position: relative;
	display: block;
	padding: 1em;
	padding-left: 3em;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,.2);
	border-radius: 4px;
	color: #1596bb;
	font-size: 1.8rem;
	line-height: 1em;
	font-weight: bold;
	text-align: center;
	transition: all 0.2s ease-out;
	}
	.but:hover{
		text-decoration: none;
		background: #1596bb;
		color: #fff;
		}
		.but:hover svg{
			fill: #fff;
			}
	.but i{
		position: absolute;
		left: 1em;
		top: 50%;
		}
	.but svg{
		width: 1.4em;
		height: 1.4em;
		margin-top: -0.7em;
		vertical-align: top;
		fill: #1596bb;
		transition: all 0.2s ease-out;
		}

.thumbBox{
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 100% 0 0 0;
	overflow: hidden;
	background-color: #ccc;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: opacity 0.5s ease-out;
	}
	.thumbBox img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		height: calc(100% + 0px);
		opacity: 0 !important;
		-ms-filter: "alpha(opacity=0)" !important;
		}
	.thumbBox.wide{}
	.thumbBox.long{
		background-size: cover;
		}

#lg-gallery{
	height: calc(100vh - 88px);
	min-width: 1100px;
	}
	#lg-gallery .thumb-inner{
		margin: auto;
		}
	#lg-gallery .thumb-cont{
		bottom: -88px;
		}
		#lg-gallery .thumb-cont .thumb{
			height: 60px;
			overflow: hidden;
			}
		#lg-gallery .thumb-cont .thumb > img{
			border-radius: 0;
			}
	#lg-gallery .thumb-info{
		display:none;
		}
#lg-close{
	right: 1em;
	top: 1em;
	width: 2em;
	height: 2em;
	border-radius: 0;
	font-size: 1.8rem;
	text-align: center;
	line-height: 2em;
	}
	#lg-close:after{
		position: static;
		}
#lg-action{
	position: absolute;
	bottom: 50%;
	left: 50%;
	width: 1100px;
	max-width: 1100px;
	margin-left: -550px !important;
	}
	#lg-action .cl-thumb{
		display: none !important;
		}
	#lg-action a{
		position: absolute;
		top: 0;
		width: 2em;
		height: 2em;
		margin: -1em 0 0 0 !important;
		border-radius: 0;
		font-size: 1.8rem;
		line-height: 2em;
		text-align: center;
		}
		#lg-action a:before,
		#lg-action a:after{
			position: static !important;
			}
	#lg-prev{
		left: 0;
		}
	#lg-next{
		left: auto !important;
		right: 300px !important;
		}
#lg-slider .video{
	background-color:#fff;
	padding: 0;
	width: 1100px;
	height: 600px;
	}
#lg-slider .video-cont{
	overflow-x: hidden;
	}
.gallery-detail{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	background-color:#fff;
	}
	.gallery-detail .thumbBox{
		position: absolute;
		left: 0;
		top: 0;
		width: calc(100% - 300px);
		height: 100%;
		padding: 0;
		background-size: cover;
		}
		.gallery-detail .thumbBox.long{
			background-size: contain;
			}
	.gallery-detail figure{
		width: calc(100% - 300px);
		}
	.gallery-detail figure+div{
		position: relative;
		width:300px;
		padding: 2em;
		}
	.gallery-detail h3{
		color: #436d99;
		font-size:120%;
		font-weight: bold;
		text-align: left;
		line-height: 1.4em;
		}
	.gallery-detail p{
		margin-top: 1em;
		text-align: justify;
		line-height: 1.5em;
		}
	.gallery-detail ul{
		/*
		position: absolute;
		left: 0;
		bottom: 0;
		*/
		width: 100%;
		padding: 1em 2em;
		list-style: none;
		}
	.gallery-detail li{
		margin-top: .5em;
		}
	.gallery-detail .but{
		padding: 0.8em 1em;
		background: #436d99;
		box-shadow: none;
		color: #fff;
		font-size: 1.4rem;
		}



/* ie */
@media all and (-ms-high-contrast: none){}