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

/*===============================================
●共通
===============================================*/
.grayBorder {
	border-top: 1px solid #B9C3C9;
	border-bottom: 1px solid #B9C3C9;
}
.breadcrumb .breadcrumbNav {font-size: 14px;}

/* mainImage
---------------------------------------- */
#mainImage div {background: url("../../images/guest_rooms/main.jpg") no-repeat center center / cover;}

/* roomMain
---------------------------------------- */
#roomMain h2,
#roomMain section > p {text-align: center;}
#roomMain h2 {
	font-size: 1.16em;
	line-height: 2;
}
#roomMain .linkBtn a p span {padding-left: 0.3em;}

/* roomIntro
---------------------------------------- */
#roomIntro .introTxt {text-align: center;}
#roomIntro .introTxt h2 {
	font-size: 1.3em;
}
#roomIntro .introTxt p {font-size: 1.16em;}
#roomIntro .introTxt h2 {
	font-family: "adobe-garamond-pro", "serif";
	letter-spacing: 0.2em;
}

/*#roomIntro .introImg,*/
#roomIntro .introImg {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}
#roomIntro #producer .introImg2 p {letter-spacing: 0.1em;}
#roomIntro #producer .introTxt2 p {line-height: 2;}
#roomIntro #producer .introTxt p:first-of-type {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	display: inline-block;
	line-height: 2.5;
}
#roomTopSlide01 {background: url("../../images/guest_rooms/front01.jpg") no-repeat center center / cover;}
#roomTopSlide02 {background: url("../../images/guest_rooms/front02.jpg") no-repeat center center / cover;}

/* roomInfo
---------------------------------------- */
#roomInfo h2 {
	text-align: center;
	padding: 1em 0;
	font-family: "adobe-garamond-pro", "serif";
}
#roomInfo table {margin: 0 auto;}
#roomInfo table td span {font-family: "adobe-garamond-pro", "serif";}

/* guestRoom
---------------------------------------- */
#guestRoom #guestpara p {text-align: center;}
#guestRoom h2 {
	text-align: center;
	padding: 1em 0;
	font-family: "adobe-garamond-pro", "serif";
}
#guestRoom h3 {
	line-height: 2;
	text-align: center;
}
#guestRoom #guestpara p {line-height: 2.5;}
#guestRoom #roomList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#guestRoom #roomList p {display: inline-block;}
#guestRoom #roomList div a {color: #778288;}
#guestRoom #roomList div a:hover {color: #B0B9BF;}
#guestRoom #roomList div .imgBox {
	display: flex;
	justify-content: center;
	align-items: center;
}
#guestRoom #roomList div img {width: 100%;}
#guestRoom #roomList div .imgBox {position: relative;}
#guestRoom #roomList div .imgBox div span {
	display: block;
	margin-top: 0.5em;
}
#guestRoom #roomList div .imgWrap .roomVertical {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	display: block;
}
#guestRoom #roomList .roomArrow svg {
	width: 4em;
	height: 1em;
	fill: #fff;
}
#guestRoom #roomList a:hover .roomArrow svg {
	transform: translateX(10px);
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
}
#guestRoom #roomList h4 {position: absolute;}

/* reservCalendar
---------------------------------------- */
#reservCalendar,
#reservCalendar p,
#reservCalendar table thead th {text-align: center;}
#reservCalendar h2 {padding: 1em 0;}
#reservCalendar table thead th,
#reservCalendar table td {padding: 0.5em 0;}
#reservCalendar table tbody th,
#reservCalendar table span {font-family: "adobe-garamond-pro", "serif";}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px) {
	
	/* roomMainhg
	---------------------------------------- */
	#roomMain {margin-bottom: 7em;}
	#roomMain h2 {margin-bottom: 3em;}
	#roomMain section > p {
		font-size: 1.1em;
		margin-bottom: 3em;
		line-height: 2.2;
	}
	
	/* roomIntro
	---------------------------------------- */
	#roomIntro p {text-align: center;}
	#roomIntro section:not(:last-child) {margin-bottom: 4em;}
	#roomIntro section:last-child {margin-bottom: 5.6em;}
	#roomIntro .introImg2 {flex-direction: column;}
	#roomIntro .introImg .conIntro {
		font-size: 1.1em;
		padding: 2em 2em 0;
		line-height: 2em;
	}
	#roomIntro #reception {
		display: flex;
		flex-direction: column;
	}
	#roomIntro .introTxt h2 {margin-bottom: 1.2em;}
	#roomIntro .introTxt p {margin-bottom: 1em;}
	
	/* reception */
	#roomIntro #reception .introImg {order: 1;}
	#roomIntro #reception .introTxt {order: 0;}
	#roomIntro #producer {
		display: flex;
		flex-direction: column-reverse;
		padding: 3em 2em 0;
	}
	#roomIntro #producer .introTxt2 p {
		font-size: 1.1em;
	}
	#roomIntro #producer #producerBox {
		position: relative;
		display: flex;
		flex-direction: row-reverse;
		margin-bottom: 4.8em;
	}
	
	/* producer */
	#roomIntro #producer .introTxt,
	#roomIntro #producer .introImg2 {width: 50%;}
	#roomIntro #producer .introTxt {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#roomIntro #producer .introTxt p {line-height: 2.5em;}
	#roomIntro #producer .introImg2 {align-items: unset;}
	#roomIntro #producer .introImg2 p {text-align: left;}
	
	/* roomInfo
	---------------------------------------- */
	#roomInfo h2 {
		font-size: 1.3em;
		margin-bottom: 5em;
	}
	#roomInfo table {margin-bottom: 5.7em;}
	#roomInfo table th,
	#roomInfo table td {
		padding: 0.7em 1em;
		line-height: 2;
	}
	#roomInfo table th {width: 40%;}
	#roomInfo table td {width: 60%;}
	
	/* guestRoom
	---------------------------------------- */
	#guestRoom  {margin-bottom: 3em;}
	#guestRoom h2 {
		font-size: 1.3em;
		margin-bottom: 3em;
	}
	#guestRoom #guestpara {
		font-size: 1.05em;
		margin-bottom: 4em;
	}
	#guestRoom h3 {
		font-size: 1.16em;
		margin-bottom: 2.5em;
	}
	#guestRoom #roomList > div {width: 49%;}
	#guestRoom #roomList > div:not(:nth-last-child(-n+2)) {margin-bottom: 5.5em;}
	#guestRoom #roomList .imgWrap {position: relative;}
	#guestRoom #roomList .imgBox h4 {
		left: 0;
		padding: 0 2em;
		text-align: left;
		width: 100%;
	}
	#guestRoom #roomList div .imgBox div span {letter-spacing: 0.2em;}
	#guestRoom #roomList div .imgBox div .roomVertical {
		font-size: 1.5em;
		margin-bottom: 0.5em;
	}
	#guestRoom #roomList .imgWrap div:last-child {
		position: absolute;
		width: 90px;
		color: #fff;
		top: 50%;
		margin-top: -42px;
		left: 50%;
		margin-left: -45px;
		text-align: center;
	}
	#guestRoom #roomList div .imgWrap .roomVertical {
		font-size: 1.5em;
		letter-spacing: 0.2em;
		margin: 0 33px 0.5em;
	}
	#guestRoom #roomList .imgWrap div:last-child span {display: block;}
	#guestRoom #roomList .roomArrow svg {fill: #fff;}
	#guestRoom div.grayBk {padding: 1em 0;}
	#guestRoom div.grayBk img {width: 70%;}
	
	/* inMap
	---------------------------------------- */
	#inMap {margin-bottom: 5em;}
	
	/* reservCalendar
	---------------------------------------- */
	#reservCalendar {
		margin-bottom: 5.7em;
		overflow: hidden;
	}
	#reservCalendar h2 {
		font-size: 1.16em;
		margin-bottom: 5.7em;
	}
	#reservCalendar p {
		line-height: 1.75;
	}
	#reservCalendar p:first-of-type,
	#reservCalendar p:nth-of-type(2) {
		font-size: 1.1em;
		line-height: 2.2;
	}
	#reservCalendar p:nth-of-type(2),
	#reservCalendar table {
		margin-bottom: 0.5em;
		overflow: hidden;
		width: 100%;
	}
	#reservCalendar table thead th,
	#reservCalendar table td {padding: 0.5em;}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px) {
	h2 {letter-spacing: 0.2em;}
	.bx-viewport {height: 400px!important;}
	.slideBox {width: 100%;}
	.slideBox li {width: 670px!important;}
	
	/* roomMain
	---------------------------------------- */
	#roomMain {padding-bottom: 12em;}
	#roomMain h2 {
		font-size: 1.3em;
		margin-bottom: 3.2em;
	}
	#roomMain section > p {
		font-size: 1.15em;
		margin-bottom: 5em;
		line-height: 2.5;
	}
	
	/* roomIntro
	---------------------------------------- */
	#roomIntro section {
		display: flex;
		margin-bottom: 16.6em;
	}
	#roomIntro .introTxt {width: 28%;}
	#roomIntro .introTxt h2 {
		margin-bottom: 3em;
	}
	#roomIntro .introTxt p:first-of-type {
		writing-mode: vertical-rl;
		display: inline-block;
		font-size: 1.2em;
		line-height: 2.5;
	}
	#roomIntro .conIntro {
		font-size: 1.15em;
		padding-top: 2em;
		line-height: 1.75;
	}
	#roomIntro #reception .introImg {width: 72%;}
	#roomIntro #reception .conIntro {text-align: right;}
	#roomIntro .introImg2 {line-height: 2.5;}
	#roomIntro .introImg2 p {font-size: 1.3em;}
	
	/* producer */
	#roomIntro #producer #producerBox {
		display: flex;
		width: 55%;
	}
	#roomIntro #producer .introTxt {
		padding-top: 3em;
		width: 50%;
	}
	#roomIntro #producerBox .introTxt h2 {margin-bottom: 4em;}
	#roomIntro #producer .introTxt p:last-of-type {text-align: center;}
	#roomIntro #producer .introTxt2 {
		display: flex;
		align-items: flex-end;
		line-height: 1.5;
		width: 35%;
		margin: 0 8% 1.5em 0;
	}
	#roomIntro #producer .introImg2 {width: 50%;}
	#roomIntro #producer .introImg2 p {font-size: 1em;}
	
	/* roomInfo
	---------------------------------------- */
	#roomInfo {margin-bottom: 6em;}
	#roomInfo h2 {
		font-size: 1.5em;
		margin-bottom: 4em;
	}
	#roomIntro #producer .introTxt2 p {
		font-size: 1.15em;
	}
	#roomInfo table {
		width: 60%;
		min-width: 490px;
	}
	#roomInfo table th,
	#roomInfo table td {
		font-size: 1.2em;
		line-height: 2.8em;
	}
	#roomInfo table th {
		width: 35%;
		padding-right: 7%;
	}
	#roomInfo table td {
		width: 65%;
	}
	#roomInfo table td .inOut {line-height: 16px;}
	
	/* guestRoom
	---------------------------------------- */
	#guestRoom h2 {
		font-size: 1.5em;
		margin-bottom: 8em;
	}
	#guestRoom h3 {
		font-size: 1.3em;
		margin-bottom: 1.8em;
	}
	#guestRoom #roomList > div {width: 100%;}
	#guestRoom #roomList .imgWrap {
		display: flex;
		margin-bottom: 5em;
	}
	#guestRoom #roomList > div:nth-child(odd) .imgWrap {flex-direction: row-reverse;}
	#guestRoom #guestpara {
		font-size: 1.15em;
		margin-bottom: 10em;
	}
	#guestRoom #roomList .imgWrap .imgBox {
		letter-spacing: 0.2em;
		width: 70%;
		height: 250px;
		overflow: hidden;
	}
	#guestRoom #roomList div img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -38%);
		width: 100%;
		height: auto;
	}
	#guestRoom #roomList div img.topImg {top: 0;}
	#guestRoom #roomList .imgWrap div:last-child {
		width: 30%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#guestRoom #roomList div .imgWrap .roomVertical {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 2em;
		letter-spacing: 0.5em;
	}
	#guestRoom #roomList div .imgWrap .roomArrow {margin-top: 1em;}
	#guestRoom #roomList > div > p {line-height: 2.1;}
	#guestRoom #roomList .roomArrow svg {fill: #778288;}
	
	/* inMap
	---------------------------------------- */
	#inMap {margin-bottom: 7.6em;}
	
	/* reservCalendar
	---------------------------------------- */
	#reservCalendar {margin-bottom: 8em;}
	#reservCalendar h2 {
		font-size: 1.33em;
		margin-bottom: 4em;
	}
	#reservCalendar p {
		font-size: 1.2em;
		line-height: 2;
	}
	#reservCalendar #calendarWrap {padding: 2.5em;}
	#reservCalendar table {margin: 0 auto 1em;}
}