@charset "utf-8";
/* CSS Document */

/*===============================================
●共通
===============================================*/

/* roomTitle */
.roomTitle {
	font-family: "adobe-garamond-pro", serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	line-height: 1.75em;
	border-top: 1px solid #778288;
	border-bottom: 1px solid #778288;
	letter-spacing: 0.2em;
}

/* mainImage
---------------------------------------- */
.tekkei #mainImage div {background: url("../../images/guest_rooms/tekkei/main.jpg") no-repeat center center / cover;}
.kinotoki #mainImage div {background: url("../../images/guest_rooms/kinotoki/main.jpg") no-repeat center center / cover;}
.shiratsuyu #mainImage div {background: url("../../images/guest_rooms/shiratsuyu/main.jpg") no-repeat center center / cover;}
.shiratsuyu #mainImage div {background: url("../../images/guest_rooms/shiratsuyu/main.jpg") no-repeat center center / cover;}
.doou #mainImage div {background: url("../../images/guest_rooms/doou/main.jpg") no-repeat center center / cover;}
.sekirou #mainImage div {background: url("../../images/guest_rooms/sekirou/main.jpg") no-repeat center center / cover;}
.shiki #mainImage div {background: url("../../images/guest_rooms/shiki/main.jpg") no-repeat center center / cover;}
.inotsuchi #mainImage div {background: url("../../images/guest_rooms/inotsuchi/main.jpg") no-repeat center center / cover;}
.kainotetsu #mainImage div {background: url("../../images/guest_rooms/kainotetsu/main.jpg") no-repeat center center / cover;}
.soumoku #mainImage div {background: url("../../images/guest_rooms/soumoku/main.jpg") no-repeat center center / cover;}
.choseki #mainImage div {background: url("../../images/guest_rooms/choseki/main.jpg") no-repeat center center / cover;}
.shohaku #mainImage div {background: url("../../images/guest_rooms/shohaku/main.jpg") no-repeat center center / cover;}
.genshitsu #mainImage div {background: url("../../images/guest_rooms/genshitsu/main.jpg") no-repeat center center / cover;}

/* topBox
-----------------------------------------------*/
#topBox h2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#topBox h2 span:first-child {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	width: 18px;
}
#topBox .image {overflow: hidden;}
#topBox {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}

/* roomFloor
-----------------------------------------------*/
#roomFloor .imageBox {
	display: flex;
	flex-wrap: wrap;
}

/* roomType
-----------------------------------------------*/
#roomType li:before,
#roomType li:after {
	content: "|";
	display: inline-block;
}
#roomType li:before {margin-right: 0.4em;}
#roomType li:after {margin-left: 0.4em;}

/* reservCalendar
-----------------------------------------------*/
#reservCalendar p {text-align: center;}
#reservCalendar p:first-of-type {letter-spacing: 0.2em;}
#reservCalendar #calendar .calendarCaption {
	margin-right: 1em;
	padding-top: 10px;
}
#reservCalendar .calendarCaption li {
	position: relative;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	letter-spacing: 0.7em;
}
#reservCalendar .calendarCaption li:after {
	position: absolute;
	writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	-webkit-writing-mode: horizontal-tb;
	font-size: 0.8em;
	bottom: -3em;
	left: 0;
	letter-spacing: 0;
}
#reservCalendar .linkBtn a {width: 200px;}
#reservCalendar .linkBtn:first-child {margin: 0 auto 2em;}
#reservCalendar .linkBtn:last-child {margin: 0 auto;}

/* 各部屋別スタイル */
.kainotetsu #reservCalendar .calendarCaption {width: 80px;}
.shiratsuyu #reservCalendar .calendarCaption li,
.kainotetsu #reservCalendar .calendarCaption li {padding-left: 0.3em;}
.tekkei #reservCalendar .calendarCaption li:after {content: "TEKKEI";}
.kinotoki #reservCalendar .calendarCaption li:after {
	content: "KINOTOKI";
	left: -0.5em;
}
.shiratsuyu #reservCalendar .calendarCaption li:after,
.inotsuchi #reservCalendar .calendarCaption li:after,
.kainotetsu #reservCalendar .calendarCaption li:after,
.genshitsu #reservCalendar .calendarCaption li:after {left: -1em;}
.shiratsuyu #reservCalendar .calendarCaption li:after {content: "SHIRATSUYU";}
.doou #reservCalendar .calendarCaption li:after {
	content: "DOOU";
	left: 0.4em;
}
.sekirou #reservCalendar .calendarCaption li:after {content: "SEKIROU";}
.shiki #reservCalendar .calendarCaption li:after {
	content: "SHIKI";
	left: 0.6em;
}
.inotsuchi #reservCalendar .calendarCaption li:after {content: "INOTSUCHI";}
.kainotetsu #reservCalendar .calendarCaption li:after {content: "KAINOTETSU";}
.soumoku #reservCalendar .calendarCaption li:after,
.shohaku #reservCalendar .calendarCaption li:after {left: -0.5em;}
.soumoku #reservCalendar .calendarCaption li:after {content: "SOUMOKU";}
.choseki #reservCalendar .calendarCaption li:after {
	content: "CHOSEKI";
	left: -0.3em;
}
.shohaku #reservCalendar .calendarCaption li:after {content: "SHOHAKU";}
.genshitsu #reservCalendar .calendarCaption li:after {content: "GENSHITSU";}

/* 英語ページの予約カレンダー */
body.englishPage #reservCalendar #calendar .calendarCaption {
	width: 130px;
	margin-right: 0;
	padding-top: 40px;
}
body.englishPage #reservCalendar .calendarCaption li {
	-ms-writing-mode: lr-tb;
	-webkit-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
	padding-left: 0;
	letter-spacing: 0.05em;
	text-align: right;
}
body.englishPage #reservCalendar .calendarCaption li:after {
	content: none;
}
/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px) {
	
	.choseki .linkBtn a {
		padding: 0.7em 3em;
	}

	/* roomTitle */
	.roomTitle {
		font-size: 1.3em;
		padding: 0.8em 0 0.6em;
		margin-bottom: 5em;
	}
	
	/* topBox
	---------------------------------------- */
	#topBox {padding-bottom: 6em;}
	#topBox .inner {padding: 0;}
	#topBox h2 span:first-child {
		font-size: 2em;
		letter-spacing: 0.5em;
	}
	#topBox h2 {margin-bottom: 2em;}
	#topBox h2 span:last-child {margin-top: -0.2em;}
	#topBox .imageText {
		font-size: 1.15em;
		text-align: center;
		line-height: 2.3em;
		letter-spacing: 0.2em;
		padding: 2.5em 1em 0;
	}
	#topBox .image {
		margin-bottom: 2em;
		text-align: center;
	}
	
	/* roomFloor
	---------------------------------------- */
	#roomFloor {padding-bottom: 6em;}
	#roomFloor .imageBox {
		padding: 0 1em;
		margin-bottom: 1em;
		justify-content: center;
	}
	#roomFloor .imageBox div {
		width: 49%;
		margin-bottom: 1em;
		text-align: center;
	}
	#roomFloor .imageBox div:nth-child(odd) {margin-right: 2%;}
	#roomFloor p.inner {
		width: 95%;
		margin: 0 auto;
		line-height: 2.3em;
		letter-spacing: 0.2em;
	}
	
	/* roomType
	---------------------------------------- */
	#roomType {padding-bottom: 5.8em;}
	#roomType ul {margin-bottom: 2.5em;}
	#roomType li {
		font-size: 1.1em;
		text-align: center;
		line-height: 2.3em;
		margin-bottom: 1em;
	}
	#roomType .image {
		width: 85%;
		max-width: 350px;
		margin: 0 auto;
		text-align: center;
	}
	
	/* reservCalendar
	-----------------------------------------------*/
	#reservCalendar {
		padding-bottom: 5.8em;
		overflow: hidden;
	}
	#reservCalendar p {
		font-size: 1.15em;
	}
	#reservCalendar p:first-of-type {margin-bottom: 0.5em;}
	#reservCalendar .calendarCaption li {
		font-size: 1.1em;
	}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px) {
	
	#headWrap {padding-bottom: 10%;}
	.bx-viewport {height: 400px!important;}
	.slideBox {width: 100%;}
	.slideBox li {width: 620px!important;}
	
	/* roomTitle */
	.roomTitle {
		line-height: 1.75em;
		font-size: 1.5em;
		padding: 0.8em 0 0.6em;
		margin-bottom: 7em;
	}
	
	/* topBox
	---------------------------------------- */
	#topBox {padding-bottom: 8%;}
	#topBox .flexBox {
		display: flex;
		align-items: center;
	}
	#topBox h2 {width: 35%;}
	#topBox h2 span:first-child {
		font-size: 3em;
		letter-spacing: 0.7em;
	}
	#topBox h2 span:last-child {
		padding-left: 0.5em;
		font-size: 1.29em;
	}
	#topBox .slideBox {width: 65%;}
	#topBox .imageText {
		font-size: 1.2em;
		padding: 3em 0 0 35%;
		line-height: 2.8em;
		letter-spacing: 0.2em;
	}
	
	/* imageBox */
	#topBox .image {
		width: 80%;
		margin-bottom: 3em;
		max-height: 500px;
	}
	#topBox .image img {width: 100%;}
	
	/* sekirou */
	.sekirou #topBox ruby rt:last-child {padding-left: 0.5em;}
	
	/* roomFloor
	---------------------------------------- */
	#roomFloor {padding-bottom: 8%;}
	#roomFloor .imageBox {
		width: 100%;
		max-width: 980px;
		padding: 0 10px;
		margin: 0 auto 1em;
		box-sizing: border-box;
		justify-content: space-between;
	}
	#roomFloor .imageBox div {
		width: 30%;
		margin-bottom: 2em;
	}
	#roomFloor p.inner {
		max-width: 700px;
		margin: 0 auto;
		text-align: center;
		line-height: 2em;
	}
	
	/* roomType
	---------------------------------------- */
	#roomType {
		letter-spacing: 0.2em;
		padding-bottom: 8%;
	}
	#roomType .inner {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#roomType li {
		font-size: 1.2em;
		margin-bottom: 0.5em;
		line-height: 2.4;
	}
	#roomType ul {
		order: 2;
		width: 50%;
		margin-left: 10%;
	}
	
	/* marginHalf */
	#roomType .marginHalf {margin-left: 5%;}
	
	/* landscape
	---------------------------------------- */
	#roomType.landscape .inner {
		flex-direction: column;
		align-items: center;
	}
	#roomType.landscape ul {
		width: 77%;
		margin-left: 0;
	}
	#roomType.landscape ul .liSide {display: inline-block;}
	#roomType.landscape ul .liSide:not(:last-of-type) {margin-right: 2em;}
	#roomType.landscape .image {margin-bottom: 5.8em;}
	
	/* reservCalendar
	-----------------------------------------------*/
	#reservCalendar {margin-bottom: 8em;}
	#reservCalendar p {
		font-size: 1.2em;
	}
	#reservCalendar p:first-of-type {margin-bottom: 1em;}
	#reservCalendar #calendarWrap {padding: 4em 0;}
}