@charset "UTF-8";

/* 共通 */
h3.cont_ttl {
	margin: 0 auto;
	padding: 0;
	font-size: 6.4vw;
	line-height: 160%;
	font-weight: 600;
	letter-spacing: 0.05em;
}
	h3.cont_ttl small {
		display: block;
		margin: 0;
		padding: 0;
		font-size: 3.4vw;
		line-height: 160%;
		font-weight: 400;
		color: #031d3f !important;
		text-decoration: none !important;
		font-family: "Montserrat", serif !important;  font-weight: 700;
	}
h3.cont_ttl + p {
	margin: 2em auto 0;
	padding: 0;
}


/* KV */
#kv {
	width: 100%;
	height: 36em;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: url(../images/contents/kv_bg_sp.png) center bottom / cover no-repeat;
	position: relative;
}
	#kv h2 {
		position: absolute;
		width: 90%;
		margin: auto;
		padding: 0;
		top: 50%;
		left: 3%;
		transform: translateY(-50%);
		-webkit- transform: translateY(-50%);
		z-index: 2;
	}
		#kv h2 img {
			width: 100%;
			height: auto;
		}

/* モダンな空間 */
#modern {
	width: 100%;
	margin: 0 auto;
	padding: 25% 3% 25%;
	background: url(../images/contents/modern_bg.png) center top / cover no-repeat;
	position: relative;
}
	#modern img.modern_leaf {
		position: absolute;
		content: '';
		display: block;
		width: 45%;
		height: auto;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;
	}
	#modern div.modern_in {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		text-align: left;
	}
		#modern div.modern_in div.cont_ttl {
			width: 100%;
			margin: 0;
			padding: 0;
		}
			#modern div.modern_in div.cont_ttl h3 {
				width: 100%;
				margin: 0;
				padding: 0;
			}
				#modern div.modern_in div.cont_ttl h3 img {
					width: 100%;
					height: auto;
				}
			#modern div.modern_in div.cont_ttl h4 {
				background: #4a678c;
				margin: 5% 0 0;
				padding: .2em .2em 0 .2em;
				font-size: 4.4vw;
				line-height: 100%;
				letter-spacing: 0.05em;
				font-optical-sizing: auto;
				font-weight: 600;
				color: #fff;
				display: inline-block;
			}
				#modern div.modern_in div.cont_ttl h4 small {
					display: block;
					margin: 0;
					padding: 0;
					font-size: 3.4vw;
					line-height: 200%;
				}
		#modern div.modern_in div.txt_cont {
			width: 100%;
			margin: 10% 0 0;
			padding: 0;
		}
			#modern div.modern_in div.txt_cont p {
				margin: 1em 0 0;
				padding: 0;
			}
				#modern div.modern_in div.txt_cont p:first-of-type {
					margin: 0;
				}

/* 施設紹介 */
#facility {
	margin: -2em auto 0;
	padding: 0;
	position: relative;
	clip-path:polygon(0 2em, 100% 0, 100% calc(100% - 2em), 0 100%);
}
	#facility:before,
	#facility:after {
		position: absolute;
		content: '';
		display: block;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
	}

	#facility:after {
		border-top: 2em solid transparent;
		border-right: 100vw solid #fff;
		border-left: 0px solid transparent;
		border-bottom: 0px solid transparent;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
	#facility div.facility_img {
		width: 100%;
		height: 20em;
		margin: 0;
		padding: 0;
		background: url(../images/contents/facility_img.png) center / cover no-repeat;
		position: relative;
	}
		#facility div.facility_img:after {
			position: absolute;
			content: '';
			display: block;
			width: 0;
			height: 0;
			margin: 0;
			padding: 0;
			border-top: 2em solid transparent;
			border-right: 100vw solid #f6f6f6;
			border-left: 0px solid transparent;
			border-bottom: 0px solid transparent;
			bottom: 0;
			left: 0;
			z-index: 1;
		}
	#facility div.facility_txt {
		width: 100%;
		margin: 0;
		padding: 8% 3% 20%;
		text-align: left;
		background: #f6f6f6;
	}
		#facility div.facility_txt div {
			width: 100%;
			margin: 0;
			padding: 0;
		}
			#facility div.facility_txt div p {
				margin: 1em 0 0;
				padding: 0;
			}
				#facility div.facility_txt div p:first-of-type {
					margin: 2em 0 0;
				}
			#facility div.facility_txt div dl {
				margin: 2em 0 0;
				padding: 0;
				/*border-bottom: 1px solid #E4DFD1;*/
				display: flex;
				flex-wrap: wrap;
			}
				#facility div.facility_txt div dl dt,
				#facility div.facility_txt div dl dd {
					margin: .3em 0;
					font-size: 3.4vw;
					line-height: 200%;
					color: #28415F;
					/*border-top: 1px solid #E4DFD1;*/
				}
				#facility div.facility_txt div dl dt {
					border-right:1px solid #28415F; 
					width: 45%;
					padding: 3% 4% 3% 0;
					text-align: right;
				}
				#facility div.facility_txt div dl dd {
					width: 55%;
					padding: 3% 0 3% 4%;
				}

#room {
	margin: 15% auto 0;
	padding: 0;
}
	#room ul {
		margin: 0 3%;
		padding: 0;
		display: flex;
		justify-content: space-between;
	    flex-wrap: wrap;
	}
			#room ul li {
				list-style: none;
				width: 49%;
				padding-bottom: 10px;
			}
			#room ul li img {
				max-width: 100%;
				height: auto;
			}

		#room div.room_youtube {
			width: 100%;
			height: 14.3em;
			margin: 1.5em auto 0;
			padding: 0;
			position: relative;
		}
			#room div.room_youtube iframe {
				position: absolute;
				width: 100%;
				height: 100%;
				margin: 0 auto;
				padding: 0;
				top: 0;
				left: 0;
			}



/* 設備・無料アメニティ */
#amenities {
	width: 100%;
	margin: 15% auto 0;
	padding: 0 3%;
}
	#amenities div.amenities_box {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
		#amenities div.amenities_box h3 {
			margin: 0;
			padding: 0;
			font-size: 4.8vw;
			line-height: 160%;
			font-weight: 600;
			letter-spacing: 0.05em;
			text-align: left;
		}
		#amenities div.amenities_box dl {
			width: 100%;
			margin: 5% 0 0;
			padding: 0;
			font-size: 3.6vw;
			line-height: 200%;
			display: flex;
			flex-wrap: wrap;
			border-bottom: 1px solid #e2e2e2;
		}
			#amenities div.amenities_box dl dt {
				width: 34%;
				margin: 0;
				padding: 4% 1%;
				background: #f0f0f0;
				border-top: 1px solid #e2e2e2;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#amenities div.amenities_box dl dd {
				width: 66%;
				margin: 0;
				padding: 4% 3%;
				text-align: left;
				border-top: 1px solid #e2e2e2;
			}
	#amenities ul {
		width: 100%;
		margin: 0 auto;
		padding: 10% 0 0;
		text-align: left;
		list-style: none;
		display: flex;
        flex-wrap: wrap;
    	gap: 2%;
    	justify-content: flex-start;
	}
		#amenities ul li {
			width: 32%;
			margin: 1% 0 0;
			padding: 0;
		}
			#amenities ul li img {
				width: 100%;
				height: auto;
			}
			#amenities ul li h4 {
				margin: 0.2em 0 0;
				padding: 0;
				font-size: 2.8vw;
				line-height: 160%;
				font-weight: 400;
			}

/* フロア */
#floor {
	width: 96%;
	margin: 10% auto;
	text-align: center;
}
	#floor img{
		max-width: 100%;
	}

/* インフォ */
#information {
	width: 100%;
	margin: 25% auto 0;
	padding: 20% 3% 15%;
	background: #4a668b;
	position: relative;
}
	#information:before {
		position: absolute;
		content: '';
		display: block;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		border-top: 2em solid transparent;
		border-right: 2em solid transparent;
		border-left: 100vw solid #F0F0F0;
		border-bottom: 2em solid transparent;
		top: -2em;
		left: 0;
		z-index: 1;
	}
	#information:after {
		position: absolute;
		content: '';
		display: block;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		border-top: 0px solid transparent;
		border-right: 0px solid transparent;
		border-left: 100vw solid #4a668b;
		border-bottom: 2em solid transparent;
		bottom: calc(-2em + 1px);
		left: 0;
		z-index: 2;
	}
	#information h3 {
		color: #fff;
		margin: 0;
		padding: 0;
		font-size: 4.8vw;
		line-height: 160%;
		font-weight: 600;
	}
	#information dl {
		color: #FFF;
		width: 100%;
		margin: 0 auto;
		padding: 5% 0 0;
		text-align: left;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
		#information dl dt {
			width: 25%;
			margin: 5% 0 0;
			padding: 0;
			font-size: 3.4vw;
			line-height: 200%;
		}
		#information dl dd {
			width: 75%;
			margin: 5% 0 0;
			padding: 0;
			font-size: 3.4vw;
			line-height: 200%;
		}

/* 周辺スポットのご紹介 */
#neighborhood {
	width: 100%;
	margin: -10% auto 0;
	padding: 25% 3% 20%;
	background: #F0F0F0;
	position: relative;
}
	#neighborhood img.neighborhood_leaf2 {
		position: absolute;
		content: '';
		display: block;
		width: 20%;
		margin: 0;
		padding: 0;
		top: 355em;
		right: 0;
		z-index: 1;
	}
		#neighborhood img.neighborhood_leaf img,
		#neighborhood img.neighborhood_leaf2 img {
			width: 100%;
			height: auto;
		}


	#sightseeing {
		width: 100%;
		margin: 10% auto;
		padding: 0;
	}
	#meal {
		width: 100%;
		margin: 20% auto;
		padding: 0;
	}
	#neighborhood div.spot_list h4 {
		width: 7em;
		height: 7em;
		margin: 0 auto;
		padding: 2em 5% 0;
		font-size: 4.0vw;
		line-height: 160%;
		font-weight: 600;
		/*color: #0B5F65;*/
		letter-spacing: 0.05em;
		background: url(../images/contents/spot_ttl_bg.png) center / contain no-repeat;
	}
		#neighborhood div.spot_list h4 small {
			display: block;
			margin: 0;
			padding: 0.1em 0 0;
			font-size: 2.6vw;
			line-height: 160%;
			font-weight: 400;
			color: #001A33 !important;
			text-decoration: none !important;
			font-family: "Montserrat", serif !important;  font-weight: 700;
		}
	#neighborhood div.spot_list ul {
		margin: 0 auto;
		padding: 5% 0 0;
		text-align: left;
		list-style: none;
	}
		#neighborhood div.spot_list ul li {
			width: 100%;
			margin: 5% 0 0;
			padding: 0;
		}
			#neighborhood div.spot_list ul li div.spot_img {
				margin: 0;
				padding: 0;
				position: relative;
			}
				#neighborhood div.spot_list ul li div.spot_img img {
					width: 100%;
					height: auto;
				}
				#neighborhood div.spot_list ul li div.spot_img strong {
					position: absolute;
					display: inline-block;
					margin: 0;
					padding: 2% 3%;
					font-size: 3.0vw;
					line-height: 120%;
					color: #fff;
					font-weight: 400;
					background: #4a668b;
					bottom: 0;
					left: 0;
				}
			#neighborhood div.spot_list ul li div.spot_txt {
				margin: 0;
				padding: 5% 4%;
				background: #fff;
				text-align: left;
			}
				#neighborhood #sightseeing.spot_list ul li div.spot_txt h5 {
					margin: 0;
					padding: 0;
					font-size: 4.2vw;
					line-height: 160%;
					font-weight: 500;
				}
					#neighborhood #sightseeing.spot_list ul li div.spot_txt h5 span {
						display: inline-block;
						margin: 0;
						padding: 0;
						font-size: 3.0vw;
						line-height: 160%;
						font-weight: 400;
					}
				#neighborhood #sightseeing.spot_list ul li div.spot_txt h6 {
					margin: 0.2em 0 0;
					padding: 0;
					font-size: 3.2vw;
					line-height: 160%;
					font-weight: 400;
					color: #001a33 !important;
					font-family: "Montserrat", serif !important; 
					font-weight: 700;
				}
				#neighborhood #meal.spot_list ul li div.spot_txt h6,
				#neighborhood #onsen.spot_list ul li div.spot_txt h6 {
					margin: 0.2em 0 0;
					padding: 0;
					font-size: 3.2vw;
					line-height: 160%;
					font-weight: 400;
				}
				#neighborhood #meal.spot_list ul li div.spot_txt h5,
				#neighborhood #onsen.spot_list ul li div.spot_txt h5 {
					margin: 0.2em 0 0;
					padding: 0;
					font-size: 4.2vw;
					line-height: 160%;
					font-weight: 500;
				}
					#neighborhood #meal.spot_list ul li div.spot_txt h5 span,
					#neighborhood #onsen.spot_list ul li div.spot_txt h5 span {
						display: inline-block;
						margin: 0;
						padding: 0;
						font-size: 3.2vw;
						line-height: 160%;
						font-weight: 400;
					}
				#neighborhood div.spot_list ul li div.spot_txt p {
					margin: 1.5em 0 0;
					padding: 0;
				}
				#neighborhood div.spot_list ul li div.spot_txt div {
					margin: 2em 0 0;
					padding: 0;
					font-size: 3.4vw;
					line-height: 160%;
				}
					#neighborhood div.spot_list ul li div.spot_txt div ol {
						margin: 0;
						padding: 0;
						list-style: none;
					}
						#neighborhood div.spot_list ul li div.spot_txt div ol li {
							display: block;
							width: auto;
							margin: 0;
							padding: 0;
						}
							#neighborhood div.spot_list ul li div.spot_txt div ol li.max {
								display: block;
								width: 100%;
								margin: 0;
								padding: 0;
							}
							#neighborhood div.spot_list ul li div.spot_txt div ol li img {
								width: 1em;
								height: auto;
								margin-right: 0.4em;
								vertical-align: -0.1em;
							}
							#neighborhood div.spot_list ul li div.spot_txt div ol li a {
								text-decoration: none;
							}

#band {
	width: 100%;
	height: 12em;
	margin: 0 auto;
	padding: 0;
	background: url(../images/contents/sp_band_img.png) center / cover no-repeat;
	position: relative;
	z-index: 2;
}
	#band:before {
		position: absolute;
		content: '';
		display: block;
		width: 120%;
		height: 5em;
		margin: 0;
		padding: 0;
		background: #fff;
		transform: rotate(-4deg);
		top: -3em;
		left: -10%;
	}
	#band:after {
		position: absolute;
		content: '';
		display: block;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		border-top: 2em solid transparent;
		border-right: 100vw solid #F0F0F0;;
		border-left: 0px solid transparent;
		border-bottom: 0px solid transparent;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

/* アクセス */
#access {
	width: 100%;
	margin: 0 auto;
	padding: 25% 3% 20%;
	background: #fff;
	position: relative;
}

		#access div.access_in p {
			margin: .5em 0;
			padding: 0;
			text-align: left;
		}


	#access img.access_ff {
		position: absolute;
		content: '';
		display: block;
		width: 65%;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;
		z-index: 1;
	}
	#access dl.address {
		width: 90%;
		margin: 10% auto 0;
		padding: 0;
	}
		#access dl.address dt {
			display: block;
			width: 45%;
			margin: 0 auto;
			padding: 0 0 5%;
		}
			#access dl.address dt img {
				width: 100%;
				height: auto;
			}
		#access dl.address dd {
			display: block;
			width: 100%;
			margin: 0;
			padding: 5% 0 0;
			font-size: 3.4vw;
			border-top: 1px solid #28415F;
		}
	#access div.gmap {
		width: 100%;
		height: 30em;
		margin: 8% auto 0;
		padding: 0;
		position: relative;
	}
		#access div.gmap iframe {
			position: absolute;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
		}
	#access div.access_in {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
		#access div.access_in h4 {
			margin: 8% 0 0;
			padding: 0;
			font-size: 4.0vw;
			line-height: 160%;
			font-weight: 600;
			text-align: left;

		}
		#access div.access_in div.access_img {
			margin: 1em 0 0;
			padding: 0;
		}
			#access div.access_in div.access_img img {
				width: 100%;
				height: auto;
			}
		#access div.access_in div.access_youtube {
			width: 100%;
			height: 14.3em;
			margin: 2em auto 3em;
			padding: 0;
			position: relative;
		}
			#access div.access_in div.access_youtube iframe {
				position: absolute;
				width: 100%;
				height: 100%;
				margin: 0 auto;
				padding: 0;
				top: 0;
				left: 0;
			}

/* ご利用の流れ */
#flow {
	width: 100%;
	margin: 0 auto;
	padding: 20% 3% 20%;
	background: url(../images/contents/sp_flow_bg.png) center top / cover no-repeat;
	position: relative;
}
	#flow:before {
		position: absolute;
		content: '';
		display: block;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		border-top: 2em solid transparent;
		border-right: 2em solid transparent;
		border-left: 100vw solid #f8f8f8;
		border-bottom: 2em solid transparent;
		top: -2em;
		left: 0;
		z-index: 1;
	}
	#flow dl {
		width: 100%;
		margin: 0 auto;
		padding: 10% 0 0 2%;
	}
		#flow dl dt {
			width: 100%;
			margin: 0;
			padding: 4% 3% 4% 8%;
			font-size: 4.0vw;
			line-height: 200%;
			font-weight: normal;
			color: #28415F;
			text-align: left;
			font-optical-sizing: auto;
			font-weight: 700;
			background:rgba(255,255,255,.9);
			position: relative;
		}
			#flow dl dt img {
				position: absolute;
				display: block;
				width: 12%;
				height: auto;
				margin: 0;
				padding: 0;
				top: -0.8em;
				left: -6%;
			}
		#flow dl dd {
			width: 100%;
			margin: 0;
			padding: 0 3% 4%;
			font-size: 3.8vw;
			line-height: 200%;
			text-align: left;
			background:rgba(255,255,255,.9);
		}
		#flow dl .arrow {
			width: 6%;
			margin: 0.7em auto 1.0em;
			padding: 0;
		}
			#flow dl .arrow img {
				width: 100%;
				height: auto;
			}

#band2 {
	width: 100%;
	height: 12em;
	margin: 0 auto;
	padding: 0;
	background: url(../images/contents/sp_band_img2.png) center / cover no-repeat;
	position: relative;
	z-index: 2;
}
	#band2:before {
		position: absolute;
		content: '';
		display: block;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		border-top: 0px solid transparent;
		border-right: 0px solid transparent;
		border-left: 100vw solid #D5EEF4;
		border-bottom: 2em solid transparent;
		top: 0;
		left: 0;
		z-index: 1;
	}
	#band2:after {
		position: absolute;
		content: '';
		display: block;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		border-top: 2em solid transparent;
		border-right: 100vw solid #fff;
		border-left: 0px solid transparent;
		border-bottom: 0px solid transparent;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

/* お問い合わせ */
#inquiry {
	margin: 0 auto;
	padding: 20% 3% 20%;
}
	#inquiry ul {
		margin: 5% auto 0;
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: space-between;
	}
		#inquiry ul li {
			width: 46%;
			margin: 0;
			padding: 0;
		}
			#inquiry ul li a.img img {
				width: 86%;
				height: auto;
			}
			#inquiry ul li a.txt {
				display: block;
				width: 100%;
				margin: 5% 0 0;
				padding: 0;
				font-size: 3.4vw;
				line-height: 2.6em;
				color: #fff;
				text-decoration: none;
				background: #031d3f;
				border-radius: 1.3em;
			}

/* ご予約 */
#reservation {
	width: 100%;
	margin: 0 auto;
	padding: 20% 3% 25%;
	background: #f8f8f8;
	position: relative;
}
	#reservation:before {
		position: absolute;
		content: '';
		display: block;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		border-top: 2em solid transparent;
		border-right: 2em solid transparent;
		border-left: 100vw solid #031d3f;
		border-bottom: 2em solid transparent;
		top: -2em;
		left: 0;
		z-index: 1;
	}
	#reservation div.privacy {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		text-align: left;
	}
		#reservation div.privacy h4 {
			margin: 2em auto 0;
			padding: 0;
			font-size: 3.8vw;
			line-height: 160%;
			font-weight: 500;
			color: #28415F;
		}
			#reservation div.privacy h4 small {
				display: inline-block;
				margin: 0 0 0 1em;
				padding: 0;
				font-size: 3.2vw;
				line-height: 160%;
				font-weight: normal;
				font-family: "Montserrat", serif !important;  font-weight: 700;
			}
		#reservation div.privacy ul {
			margin: 3% auto 0;
			padding: 0;
			font-size: 3.2vw;
			line-height: 160%;
			list-style: none;
		}
			#reservation div.privacy ul li {
				margin: 0;
				padding: 0 0 0 2em;
				text-indent: -2em;
			}
			#reservation div.privacy ul li:nth-of-type(n+10) {
				margin: 0;
				padding: 0 0 0 3em;
				text-indent: -3em;
			}
		#reservation div.privacy p {
			margin: 0 auto;
			padding: 0;
			font-size: 3.2vw;
			line-height: 160%;
		}
			#reservation div.privacy p:first-of-type {
				margin: 10px auto 0;
			}
			#reservation div.privacy h5 {
				display: block;
				margin: 10px auto 0;
				padding: 0;
				font-size: 3.2vw;
				line-height: 160%;
				font-weight: 500;
			}
			#reservation div.privacy strong {
				display: block;
				margin: 8px auto 0;
				padding: 0;
				font-size: 3.2vw;
				line-height: 160%;
				font-weight: 400;
			}

#reservation dl {
		width: 100%;
		font-size: 3.2vw;
	   line-height: 160%;
    	margin: 3% auto 0;
		padding: 0 ;
		border-top: 1px solid #28415F;
}
		#reservation dl dt {
			width: 100%;
			margin: 0;
			padding: 2% ;
			font-weight: normal;
			color: #28415F;
			text-align: left;
			border-right: 1px solid #28415F;
			border-bottom: 1px solid #28415F;
			border-left: 1px solid #28415F;
			position: relative;
		}

		#reservation  dl dd {
			width: 100%;
			margin: 0;
			padding: 2%;
			text-align: left;
			border-right: 1px solid #28415F;
			border-bottom: 1px solid #28415F;
			border-left: 1px solid #28415F;
		}




/* 予約システム */
div.reservation_cont {
	width: 100%;
	height: 86em;
	margin: 10% auto 0;
	padding: 0;
	text-align: left;
	background: #fff;
	position: relative;
}
	div.reservation_cont iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;
	}


.checkin_out_btn{
}

.checkin_out_btn a{
				display: block;
				width: 94%;
				margin: 12% auto;
				padding: 1em .6em;
				font-size: 3.4vw;
				line-height: 2.6em;
				text-decoration: none;
				background: #eaf2ff;
                border: 1px solid #435d7f;
				border-radius: 20px;
                color: #031d3f;
				border-radius: 1.5em;
			}