@charset "UTF-8";



/* ------------------------------
	.head_box
------------------------------ */
.head_box .head_img{
	background: url(../img/rooms/head_img.jpg) no-repeat center top;
	background-size: cover;
}

.head_box .head_ttl{
	background: url(../img/rooms/head_ttl_img.png) no-repeat center top;
	background-size: 220px;
}

.bg_wrap{
	background: url(../img/rooms/content_bg.png) no-repeat center top;
	background-size: 100%;
}


@media screen and (max-width: 768px){
	.head_box .head_img{
		background: url(../img/rooms/head_img_sp.jpg) no-repeat center top;
		background-size: cover;
	}

	.head_box .head_ttl{
		background-size: 120px;
	}

	.bg_wrap{
		background: none;
	}
	.sp_bg{
		background: url(../img/rooms/content_bg_sp.png) no-repeat right top;
		background-size: 100%;
		background-position: center 100px;
	}
}



/* ------------------------------
	.special
------------------------------ */
.special .img_ttl_box{
	background: url(../img/rooms/special_bg.jpg) no-repeat center center;
	background-size: cover;
}

.special .txt.center{
	margin-bottom: 60px;
}

.special_box .img.inview-zoom{
	width: 100%;
	height: 700px;
}
.special_box:nth-of-type(1) .img.inview-zoom div{
	background: url(../img/rooms/special_img01.jpg) no-repeat center center;
	background-size: cover;
}

.special_box .txt_box{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.special_box .ttl_box{
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 400px;
	height: 350px;
}

.special_box .ttl{
	font-size: 3.5rem;
	font-weight: bold;
	letter-spacing: 0.15em;
	padding-left: 1em;
}
.special_box .ttl .min{
	display: block;
	margin-left: 10px;
	font-size: 2.0rem;
}

.special_box .en{
	text-transform: uppercase;
	margin-top: 50px;
	letter-spacing: 0.15em;
}

.special_box .ttl_box + div{
	width: 100%;
}

.special_box .txt{
	width: 100%;
	margin-bottom: 30px;
	line-height: 2.2;
}

.special_box dl{
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 650px;
	height: 60px;
	border-top: 1px solid #aaa;
}
.special_box dl:last-child{
	border-bottom: 1px solid #aaa;
}
.special_box dt,
.special_box dd{
	letter-spacing: 0.15em;
	line-height: 2;
}

.special_box dt{
	flex-shrink: 0;
	width: 175px;
	padding-left: 1em;
}
.special_box dd{
	width: 100%;
}

.special_box .center_box .flex{
	justify-content: center;
}
.special_box .center_box .flex .img + .img{
	margin-left: 20px;
}

.special_box .center_box .flex .img:nth-child(2) { -webkit-transition-delay: .25; transition-delay: .25s; }

.special_box .center_box .txt{
	margin: 35px 0 70px;
	text-align: center;
}


@media screen and (max-width: 768px) {
	.special .img_ttl_box{
		margin-bottom: 20px;
		background: url(../img/rooms/special_bg_sp.jpg) no-repeat center center;
		background-size: cover;
	}

	.special .txt.center{
		margin-bottom: 30px;
	}

	.special .wrap{
		width: 100%;
	}

	.special_box{
		padding-bottom: 40px;
	}

	.special_box .img.inview-zoom{
		height: 250px;
	}
	.special_box:nth-of-type(1) .img.inview-zoom div{
		background: url(../img/rooms/special_img01_sp.jpg) no-repeat center center;
		background-size: cover;
	}

	.special_box .txt_box{
		flex-wrap: wrap;
	}

	.special_box:nth-of-type(even) .ttl_box{
		order: 1;
	}
	.special_box:nth-of-type(even) .txt{
		order: 2;
		padding: 0;
	}

	.special_box .ttl_box{
		height: auto;
		width: 100%;
		padding: 25px 0 25px;
	}

	.special_box .ttl{
		text-align: center;
		padding-left: 0;
		font-size: 2.4rem;
	}
	.special_box .ttl .min{
		margin-left: 0;
		margin-bottom: 10px;
		font-size: 1.6rem;
	}

	.special_box .en{
		margin-top: 10px;
	}

	.special_box dl{
		width: 92%;
		max-width: 100%;
		height: 50px;
		margin: 0 auto;
	}
	.special_box dt{
		width: 120px;
		padding-left: 1em;
	}

	.special_box .center_box .flex{
		width: 92%;
		margin: 20px auto 0;
	}

	.special_box .center_box .flex .img + .img{
		margin-left: 8px;
	}

	.special_box .center_box .txt{
		width: 92%;
		margin: 15px auto 0;
		text-align: left;
	}

	.special_box .txt{
		text-align: center;
	}
}



/* ------------------------------
	.guestroom
------------------------------ */
.guestroom{
	padding-bottom: 70px;
}

.guestroom .txt.center{
	margin-bottom: 60px;
}

.guestroom .img_ttl_box{
	background: url(../img/rooms/guestroom_bg.jpg) no-repeat center center;
	background-size: cover;
}

.guestroom .flex{
	flex-wrap: wrap;
}

.guestroom_box{
	position: relative;
	width: 590px;
	height: 420px;
	overflow: hidden;
}
.guestroom_box .img{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all .5s cubic-bezier(.215, .61, .355, 1);
	transition: all .5s cubic-bezier(.215, .61, .355, 1);
}
.guestroom_box:hover .img{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.guestroom_box .txt_box{
	position: relative;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	height: 100%;
	padding: 75px 40px 0;
	background: rgba(35,26,20,0.8);
	-webkit-transition: all .5s cubic-bezier(.215, .61, .355, 1);
	transition: all .5s cubic-bezier(.215, .61, .355, 1);
}
.guestroom_box:hover .txt_box{
	opacity: 1;
	visibility: visible;
}

.guestroom_box .cate{
	width: 170px;
	padding-bottom: 15px;
	margin: 0 auto 30px;
	border-bottom: 1px solid #fff;
	text-align: center;
	font-size: 2.0rem;
	color: #fff;
	letter-spacing: 0.15em;
}

.guestroom_box .ttl{
	margin: auto;
	font-size: 3.5rem;
	font-weight: bold;
	letter-spacing: 0.15em;
	text-align: center;
	color: #fff;
}

.guestroom_box .en{
	text-transform: uppercase;
	margin-top: 30px;
	letter-spacing: 0.15em;
	text-align: center;
	color: #fff;
}

.guestroom_box .txt{
	text-align: center;
	margin-top: 35px;
	color: #fff;
}

.rooms_wrap{
	margin-top: 90px;
}

.rooms_wrap .flex{
	flex-wrap: nowrap;
}
.rooms_wrap .flex + .flex{
	margin-top: 80px;
}

.rooms_box + .rooms_box{
	flex-shrink: 0;
	width: 590px;
	margin-left: 65px;
}

.rooms_box > div + div{
	margin-top: 50px;
}

.rooms_box .ttl{
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #aaa;
	font-size: 2.0rem;
}

.rooms_box + .rooms_box div{
	padding-left: 50px;
	padding-bottom: 10px;
	border-left: 1px solid #aaa;
}

.rooms_wrap .flex:nth-child(2) .rooms_box:first-child .txt{
	padding-top: 100px;
	background: url(../img/rooms/ico_wifi.png) no-repeat center top;
	background-size: 60px;
}


@media screen and (max-width: 768px) {
	.guestroom{
		padding-bottom: 40px;
	}

	.guestroom .img_ttl_box{
		margin-bottom: 20px;
		background: url(../img/rooms/guestroom_bg_sp.jpg) no-repeat center center;
		background-size: cover;
	}
	.guestroom .txt.center{
		width: 92%;
		text-align: left;
		margin: 0 auto 30px;
		line-height: 2.2;
	}

	.guestroom .wrap{
		width: 100%;
	}

	.guestroom_box{
		width: 100%;
		height: 280px;
		background-size: cover;
	}

	.guestroom_box .img{
		height: 100%;
	}
	.guestroom_box .img img{
		position: absolute;
		top: 0;
		left: 0;
		width: auto;
		height: auto;
		min-width: 100%;
		min-height: 100%;
		object-fit: cover;
	}

	.guestroom_box .txt_box{
		padding: 50px 20px 0;
	}

	.guestroom_box .cate{
		width: 140px;
		margin-bottom: 20px;
		font-size: 1.6rem;
	}

	.guestroom_box .ttl{
		font-size: 2.4rem;
	}
	.guestroom_box .en{
		margin-top: 10px;
	}

	.guestroom_box .txt{
		margin-top: 30px;
		line-height: 2.2;
	}

	.rooms_wrap{
		margin-top: 0;
	}
	.rooms_wrap .flex{
		flex-wrap: wrap;
	}

	.rooms_box{
		width: 92%;
		margin: 0 auto;
	}
	.rooms_box + .rooms_box{
		width: 92%;
		margin: 0 auto;
	}

	.rooms_box .ttl{
		padding: 20px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #aaa;
		font-size: 1.7rem;
		text-align: center;
	}

	.rooms_box .img{
		margin-top: 20px;
	}

	.rooms_box > div + div{
		margin-top: 20px;
	}

	.rooms_wrap .flex + .flex{
		margin-top: 0;
	}

	.rooms_box + .rooms_box div{
		padding-left: 0;
		padding-bottom: 0;
		margin-top: 20px;
		border-left: 0;
	}

	.rooms_wrap .flex:nth-child(2) .rooms_box:first-child .txt{
		padding-top: 0;
		padding-left: 70px;
		background-size: 40px;
		background-position: 10px center;
	}
}