@charset "utf-8";
/* ===================================================
	Room CSS
====================================================== */

#main_img::before { background: rgba(0, 0, 0, 0.1); }

/* ---------------------------------------------------
	cnav
------------------------------------------------------ */
#cnav { padding: 70px 0; background: var(--color04); color: #fff; }
#cnav::before { height: 100%; }
#cnav ul { display: flex; flex-wrap: wrap; gap: 40px 30px; }
#cnav ul li { width: calc((100% - 90px) / 4); }
#cnav a { display: block; color: #fff; text-align: center; font-size: 14px; padding:0 10px 15px; border-bottom: 1px solid #898989; }
#cnav a span { display: block; font-size: 20px; letter-spacing: 0.1em; }

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
	#cnav::before { background-position: bottom -435px left; }
}
@media screen and (max-width: 600px) {
	#cnav { padding: 35px 0; }
	#cnav ul { gap: 20px; }
	#cnav ul li { width: calc((100% - 20px) / 2); }
	#cnav a { font-size: 12px; padding:0 5px 10px; height: 100%; align-content: center; }
	#cnav a span { font-size: 16px; }
}


/* ---------------------------------------------------
	共通 - room_layout
------------------------------------------------------ */
.room_layout { padding: 100px 0 125px; letter-spacing: 0.1em; }
.room_layout .tit_col { text-align: center; margin-bottom: 15px; }
.room_layout .tit_col .tit { font-size: 32px; text-align: center; }
.room_layout .tit_col .stit { font-size: 18px; color: #fff; background: #5d6d90; width: fit-content; margin: 0 auto; display: block; padding: 0 20px; border-radius: 50px; margin-bottom: 5px; min-width: 90px; }
.room_layout .tit_col .stit.city { background: #9f8a57; }
.room_layout .tit_col + p { text-align: center; margin-bottom: 45px; }
.room_layout .main_photo + p { padding-top: 45px; text-align: center; line-height: 2.1; }
.room_layout .flex_box { margin-top: 90px; display: flex; justify-content: space-between; }
.room_layout .flex_box .detail_col { padding-top: 30px;}
.room_layout .flex_box .detail_col dl { font-size: 16px; }
.room_layout .flex_box .detail_col dl div { display: flex; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #aeaeae; }
.room_layout .flex_box .detail_col dl div:last-child { margin-bottom: 0; }
.room_layout .flex_box .detail_col dl div dt { width: 100px; flex-shrink: 0; }
.room_layout .flex_box .detail_col dl div dd { flex-grow: 1; }
.room_layout .flex_box .detail_col .amenity_btn { display: flex; align-items: center; width: fit-content; margin-top: 25px; }
.room_layout .flex_box .detail_col .amenity_btn .arrow { margin-left: 10px; width: 17px; height: 17px; border-radius: 50px; border: 0.8px solid #636361; background: url(../img/arrow01_bk.svg) no-repeat center/7px; transform: rotate(-90deg); }
.room_layout .flex_box .calendar_col { display: flex; flex-wrap: wrap; justify-content: space-between; }
.room_layout .flex_box .calendar_col .calendar_489ban { width: min(47.9%, 340px); display: flex; flex-direction: column; letter-spacing: 0.05em; }
.room_layout .flex_box .calendar_col .calendar_489ban > p { font-size: 20px; text-align: center; margin-bottom: 15px; line-height: 1; }
.room_layout .flex_box .calendar_col .calendar_489ban table { width: 100%; flex-grow: 1; }
.room_layout .flex_box .calendar_col .calendar_489ban table tr :where(td, th) { border: 1px solid #d9d8d6; text-align: center; vertical-align: middle; font-size: 14px; line-height: 1.2; }
.room_layout .flex_box .calendar_col .calendar_489ban table th { font-size: 15px; padding: 0 10px; height: 40px; background: #eae6db; font-weight: normal; }
.room_layout .flex_box .calendar_col .calendar_489ban table td { background: var(--color01);}
.room_layout .flex_box .calendar_col .calendar_489ban table tr .holiday,
.room_layout .flex_box .calendar_col .calendar_489ban table tr > *:first-child { color: #e04747; }
.room_layout .flex_box .calendar_col .calendar_489ban table tr > *:last-child { color: #5c79bd; }
.room_layout .flex_box .calendar_col .calendar_489ban table td a { color: #79a5b1; text-shadow: 0 0 1px #79a5b1; }
.room_layout .flex_box .calendar_col .txt_col { margin-top: 15px; width: 100%; display: flex; justify-content: space-between; }
.room_layout .flex_box .calendar_col .txt_col p { font-size: 13px; }
.room_layout .flex_box .calendar_col .txt_col a { font-size: 15px; border-bottom: 1px solid #aeaeae; display: block; width: fit-content; filter: drop-shadow(0 0 3px var(--color01)) drop-shadow(0 0 3px var(--color01)); line-height: 1; padding-bottom: 5px; }

section[class^=room_layout]:nth-child(2n) { padding: 110px 0 150px; background: url(../img/bg02.jpg); }

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
	.room_layout .flex_box .detail_col { width: min(36.7%, 440px); }
	.room_layout .flex_box .calendar_col { width: min(59.2%, 710px); }
	.room_layout .flex_box .detail_col dl div dd { padding: 0 15px 0 0; }
}
@media screen and (max-width: 600px) {
	.room_layout { padding: 60px 0; }
	.room_layout .tit_col { margin-bottom: 10px; }
	.room_layout .tit_col .tit { font-size: 22px; }
	.room_layout .tit_col .stit { font-size: 14px; padding: 2px 20px; min-width: 70px; }
	.room_layout .tit_col + p { margin-bottom: 25px; }
	.room_layout .main_photo + p { padding-top: 30px; text-align: left; line-height: 1.8; }
	.room_layout .main_photo { margin-inline: -6vw!important; height: 70vw; }
	.room_layout .main_photo .photo {height: 100%;}
	.room_layout .flex_box { margin-top: 30px; flex-direction: column; }
	.room_layout .flex_box .detail_col { padding-top: 0;}
	.room_layout .flex_box .detail_col dl { font-size: 14px; }
	.room_layout .flex_box .detail_col dl div { padding: 0 2% 1em; margin-bottom: 1em; }
	.room_layout .flex_box .detail_col dl div dt { width: 4em; }
	.room_layout .flex_box .detail_col .amenity_btn { margin-top: 15px; }
	.room_layout .flex_box .detail_col .amenity_btn .arrow { margin-left: 5px; width: 15px; height: 15px; border-width: 0.5px; background-size: 6px; }
	.room_layout .flex_box .calendar_col { margin-top: 20px; flex-direction: column; }
	.room_layout .flex_box .calendar_col .calendar_489ban { width: min(90%, 320px); margin: 20px auto 0; }
	.room_layout .flex_box .calendar_col .calendar_489ban > p { font-size: 17px; margin-bottom: 5px; }
	.room_layout .flex_box .calendar_col .calendar_489ban table tr :where(td, th) { font-size: 13px; }
	.room_layout .flex_box .calendar_col .calendar_489ban table th { font-size: 14px; padding: 10px 5px; }
	.room_layout .flex_box .calendar_col .txt_col { margin-top: 10px; flex-direction: column; align-items: center; }
	.room_layout .flex_box .calendar_col .txt_col p { font-size: 12px; }
	.room_layout .flex_box .calendar_col .txt_col a { font-size: 14px; margin-top: 20px; }

	section[class^=room_layout]:nth-child(2n) { padding: 60px 0 70px; }
}


/* ---------------------------------------------------
	sec_bg
------------------------------------------------------ */
#sec01 { position: relative; overflow: hidden;  }
#sec01::before { content: ''; width: 674px; height: 625px; background: url(../../room/img/sec_bg01.png) no-repeat center/contain; position: absolute; top: -20px; right: -295px; z-index: -1; }

#sec03 { position: relative; overflow: hidden;  }
#sec03::before { content: ''; width: 674px; height: 604px; background: url(../../room/img/sec_bg02.png) no-repeat center/contain; position: absolute; bottom: -300px; right: -240px; z-index: -1; }

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
	#sec01::before { width: 90vw; height: 85vw;  top: -3vw; right: -65vw; }
	#sec03::before { width: 90vw; height: 83vw;  bottom: -45vw; right: -30vw; }
}


/* ---------------------------------------------------
	amenity_col
------------------------------------------------------ */
#amenity_col { width: min(90%, 1000px); display: flex; flex-direction: column; align-items: center; position: relative; margin: 10px auto;padding: 85px min(85px, 5.7%); background: var(--color01); border-radius: 5px; }
#amenity_col .tit { font-size: 32px; text-align: center; margin-bottom: 25px; }
#amenity_col .icon_list { display: flex; justify-content: center; gap: 10px; }
#amenity_col .icon_list li { font-size: 15px; color: #fff; background: #5d6d90; width: fit-content; display: flex; align-items: center; gap: 10px; padding: 3px 25px; border-radius: 50px; }
#amenity_col .icon_list li .icon { font-size: 0; line-height: 0; }
#amenity_col dl { margin-top: 50px;}
#amenity_col dl div { display: flex; line-height: 1.6; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #aeaeae; }
#amenity_col dl div dt { width: 140px; flex-shrink: 0; }
#amenity_col dl div dd p + p { margin-top: 0.5em;}

/* Magnific Popup */
#amenity_col .mfp-close { width: 26px; height: 26px; margin: 30px; padding: 0; opacity: 1; user-select: auto; cursor: pointer; line-height: normal; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: opacity .5s; }
#amenity_col .mfp-close::before,
#amenity_col .mfp-close::after { content: ''; width: 36px; height: 1px; transform: rotate(45deg); display: block; background: #595958; }
#amenity_col .mfp-close::after { transform: rotate(-45deg); }
.mfp-bg { opacity: 0; transition: all .5s ease-out; }
.mfp-bg.mfp-ready { opacity: 0.8; }
.mfp-bg.mfp-removing { opacity: 0;}
.mfp-wrap .mfp-content { opacity: 0; transition: all .5s ease-out; }
.mfp-wrap.mfp-ready .mfp-content { opacity: 1; }
.mfp-wrap.mfp-removing .mfp-content { opacity: 0; }
.mfp-close:active { top: 0;}

@media screen and (hover: hover) {
	#amenity_col .mfp-close:hover { opacity: .8; }

}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
	#amenity_col { width: min(90%, 1000px); margin: 30px auto; padding: 65px 6% 30px; }
	#amenity_col .tit { font-size: 22px; margin-bottom: 15px; }
	#amenity_col .icon_list { flex-wrap: wrap; }
	#amenity_col .icon_list li { font-size: 13px; gap: 7px; padding: 2px 15px; }
	#amenity_col .icon_list li .icon { width: 15px; font-size: 0; line-height: 0; }
	#amenity_col dl { margin-top: 35px; }
	#amenity_col dl div { flex-direction: column; margin-bottom: 15px; padding: 0 4% 15px; }
	#amenity_col dl div dt { width: 100%; padding-bottom: 5px; }

	#amenity_col .mfp-close { margin: 20px 20px 0 0;  }
	#amenity_col .mfp-close::before,
	#amenity_col .mfp-close::after  { width: 31px; }
}