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

.cmn_tit_01 { font-size: 32px; text-align: center; line-height: 1.4; letter-spacing: 0.1em;}
.cmn_tit_02 { font-size: 28px; text-align: center; line-height: 1.4; letter-spacing: 0.1em;}

@media screen and (max-width: 600px) {
.cmn_tit_01 { font-size: 24px;}
.cmn_tit_02 { font-size: 20px;}
}

/* ---------------------------------------------------
box_lead
------------------------------------------------------ */
.box_lead{ padding: 100px 0; border-bottom: solid 1px #303030;}
.box_lead .txt_01{ text-align: center; padding: 30px 0 0; font-size: 16px; line-height: 2; letter-spacing: 0.1em;}

@media screen and (max-width: 600px) {
.box_lead{ padding: 50px 0;}
.box_lead .txt_01{ text-align: left; padding: 30px 5% 0; font-size: 15px; line-height: 1.7;}
}

/* ---------------------------------------------------
	#sec_rooms
------------------------------------------------------ */
#sec_rooms .rooms { display: flex; flex-wrap: wrap; }
#sec_rooms .rooms>div a { display: flex; flex-direction: column-reverse; height: 100%; }
#sec_rooms .rooms dt { flex-grow: 1; padding: 13px 15px 18px; text-align: center; }
#sec_rooms .rooms dt span:not([class]) { font-size: 18px; }
#sec_rooms .rooms dt .lg { font-size: 22px; }
#sec_rooms .rooms dt .sm { font-size: 14px; }
#sec_rooms .rooms .img { overflow: hidden; position: relative;}
#sec_rooms .rooms .img img { transition: transform .6s, opacity .6s; }
#sec_rooms .rooms>div a:hover { text-decoration: none; }
#sec_rooms .rooms>div a:hover .img img { transform: scale(1.05); opacity: .75; }

#sec_rooms .rooms a.renew:hover .img img{ transform: scale(1); opacity: 1;}
#sec_rooms .rooms .img div.renew p{ position: absolute; opacity: 1; padding: 15px 24px; background: rgb(0 0 0 / 0.7); border: 3px solid #fff; color: #fff; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 60%; z-index: 1;}
#sec_rooms .rooms a:hover div.renew p{ opacity: 1;}

#sec_rooms .box_txt_01{ display: block; margin-top: 60px; padding: 15px 0; border: 1px solid #363636; text-align: center;}

#sec_rooms_01 { padding: 100px 0; }
#sec_rooms_01 h2+p { margin-top: 15px; }
#sec_rooms_01 .tit_col .sub { margin-top: 50px; }
#sec_rooms_01 .rooms { margin-top: 50px; }
#sec_rooms_01 .rooms dt { background: url(../img/cmn/bg_pattern_gr.gif); }
#sec_rooms_01 .rooms dt .reopen{ font-size: 14px; margin: 0 0 5px;}
#sec_rooms_01 .rooms dt span { display: block; }
#sec_rooms_02 { padding: 80px 0 40px; background: url(../img/cmn/bg_pattern_gr.gif); }
#sec_rooms_02 .rooms { width: 1060px; max-width: 92%; margin: 70px auto 0; }
#sec_rooms_02 .rooms dt { background: #000; }
#sec_rooms_02 .rooms dt .lg { display: inline-block; margin-left: .5em; }

@media screen and (min-width: 601px) {
	#sec_rooms_01 .rooms>div { width: 31.6%; margin: 0 2.5% 40px 0; }
	#sec_rooms_01 .rooms>div:nth-child(3n) { margin-right: 0; }
	#sec_rooms_02 .rooms>div { width: 47.2%; margin: 0 5.6% 35px 0; }
	#sec_rooms_02 .rooms>div:nth-child(2n) { margin-right: 0; } 
}
@media screen and (max-width: 600px) {
	#sec_rooms .rooms>div { width: 100%; margin: 0 0 2em; }
	#sec_rooms .rooms dt span:not([class]) { font-size: 16px; }
	#sec_rooms .rooms dt .lg { font-size: 18px; }
	#sec_rooms .rooms dt .sm { font-size: 12px; }

#sec_rooms .box_txt_01{ margin-top: 20px; padding: 12px; line-height: 1.6;}

	#sec_rooms_01 { padding: 11vw 0 8vw; }
	#sec_rooms_01 .tit_col .sub,
	#sec_rooms_01 .rooms { margin-top: 6vw; }
	#sec_rooms_01 .rooms>div { margin: 0 0 2em; }
	#sec_rooms_01 .rooms>div:nth-child(2n) { margin-right: 0; }
	#sec_rooms_02 { padding: 9vw 0 5vw; }
	#sec_rooms_02 .rooms { margin-top: 8vw; }
	#sec_rooms_02 .rooms dt span:not([class]),
	#sec_rooms_02 .rooms dt .lg { display: inline-block; }
	#sec_rooms_01 .rooms dt .reopen{ font-size: 12px;}

	#sec_rooms .rooms .img div.renew{ display: flex;}
	#sec_rooms .rooms .img div.renew p{ padding: 3%; border: 1px solid;}
}

/* Modal Window */
/*#facilities .mfp-bg { opacity: 0.95; }
#facilities .mfp-wrap { left: 0!important; overflow: auto!important; }*/
.popup-modal-dismiss { position: absolute; top: 20px; right: 20px; }
.popup-modal-dismiss:hover { cursor: pointer; }
.popup-modal-dismiss>span { position: relative; font-size: 0; display: block; width: 55px; height: 55px; border: 1px solid #6c6c6c; }
.popup-modal-dismiss>span span::before,
.popup-modal-dismiss>span span::after { position: absolute; left: 50%; content: ''; display: block; width: 2px; height: 100%; background: #6c6c6c; }
.popup-modal-dismiss>span span::before { transform: rotate(45deg) translate(-50%,1px); }
.popup-modal-dismiss>span span::after { transform: rotate(-45deg) translateX(-50%); }
.ro_container { position: relative; display: flex; flex-wrap: wrap; min-width: 1300px; padding: 50px 50px 55px; background: url(../img/cmn/bg_pattern_dgr.png)#000; }
.ro_container .tit_col { width: 100%; margin-bottom: 40px; }
.ro_container .tit_col h3 { font-size: 22px; }
.ro_container .tit_col h3 span:not([class]) { border: 1px solid #6c6c6c; padding: 2px 6px; font-size: 16px; }
.ro_container .tit_col h3 .lg { font-size: 24px; }
.ro_container .summary>p { line-height: 1.7; }
.ro_container>.btn { width: 370px; max-width: 100%; display: flex; align-items: center; justify-content: center; margin: 35px auto 0; padding: 28px 30px 28px 15px; background: #485175; color: #fff; text-align: center; transition: background-color .5s; }
.ro_container>.btn:hover { text-decoration: none; }
.ro_container>.btn::after { content: '>'; display: inline-block; position: relative; right: -40px; opacity: .8;}
.ro_container .slick .ofi { min-height: 216px; }
[id^="ro_1"] .tit_col h3 br:last-of-type { display: none; }
[id^="ro_1"] .tit_col h3 .lg { margin-left: .5em; }
	.popup-modal-dismiss.btm{ display: none;}

@media screen and (hover: hover) {
	.ro_container>.btn:hover { background: #313959; }
}
@media screen and (min-width: 601px) {
	.ro_container .slick { width: calc(100% - 570px); }
	.ro_container .slick .ofi { min-height: 310px; }
	.ro_container .summary { width: 570px; padding-left: 4%; }
	.ro_container .cmn_table { margin-top: 35px; }
	.ro_container .cmn_table dt,
	.ro_container .cmn_table dd { padding: 10px 15px; }
	.ro_container .cmn_table dt { width: 120px; }
	.ro_container .cmn_table dd { width: calc(100% - 120px); }
}
@media screen and (max-width: 600px) {
	#facilities .mfp-container { padding: 0; }
	.popup-modal-dismiss>span { width: 40px; height: 40px; }
	.popup-modal-dismiss>span span::before,
	.popup-modal-dismiss>span span::after { top: 50%; height: 85%; }
	.popup-modal-dismiss>span span::before { transform: rotate(45deg) translate(-12px,-11px); }
	.popup-modal-dismiss>span span::after { transform: rotate(-45deg) translate(11px,-12px); }
	.ro_container { min-width: 0; max-width: 100%; padding: 50px 4% 100px; }
	.ro_container .tit_col { margin-bottom: 5vw; }
	.ro_container .tit_col h3 { font-size: 16px; }
	.ro_container .tit_col h3 span:not([class]) { display: inline-block; margin-bottom: 5px; font-size: 14px; }
	.ro_container .tit_col h3 .lg { font-size: 18px; }
	.ro_container .slick { width: 100%; margin-bottom: 30px; }
	.ro_container .cmn_table { margin-top: 5vw; }
	.ro_container>.btn { padding: 25px 20px 25px 10px; }
	
	.popup-modal-dismiss.btm{ display: block; top: auto; bottom: 30px; right: 50%; transform: translateX(50%); }
}

/* ---------------------------------------------------
calendar_col
------------------------------------------------------ */
.calendar_col { padding: 90px 0 0; width: 100%;}
.calendar_col .cmn_tit { font-size: 26px; }
.calendar_col .room_calendar_txt { text-align: center; margin-top: 30px; }
.calendar_col .calendar_489ban { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 50px; }
.calendar_col .calendar_489ban .calendar { width: min(32%, 360px); }
.calendar_col .calendar_489ban .calendar caption { font-size: 20px; margin-bottom: 10px; }
.calendar_col .calendar_489ban .calendar th { font-weight: normal; text-align: center; border: 1px solid #404040; background: #262829; padding: 8px 5px; vertical-align: middle; }
.calendar_col .calendar_489ban .calendar td { text-align: center; line-height: 1.2; padding: 3px; border: 1px solid #404040; vertical-align: middle; }
.calendar_col .calendar_489ban .calendar td a { transition: opacity .5s;}
.calendar_col .calendar_489ban .calendar td span { display: block; }
.calendar_col .calendar_489ban .calendar th:first-child,
.calendar_col .calendar_489ban .calendar td:first-child,
.calendar_col .calendar_489ban .calendar td:first-child a,
.calendar_col .calendar_489ban .calendar td.holiday,
.calendar_col .calendar_489ban .calendar td.holiday a { color: #b15a69; }
.calendar_col .calendar_489ban .calendar th:last-child,
.calendar_col .calendar_489ban .calendar td:last-child,
.calendar_col .calendar_489ban .calendar td:last-child a { color: #5f70b3; }
.calendar_col .calendar_489ban + a { display: block; width: fit-content; text-align: right; line-height: 1.4; margin: 45px 0 0 auto; padding-right: 30px; background: url(../../room/img/icon_arrow.svg) no-repeat center right/17px; transition: color .3s;}

@media screen and (hover: hover) {
  .calendar_col .calendar_489ban .calendar td a:hover { opacity: .7; }
  .calendar_col .calendar_489ban + a:hover { color: #b3bff3;}
}

@media screen and (max-width: 600px) {
  .calendar_col { padding: 50px 0 0;}
  .calendar_col .cmn_tit { font-size: 20px; }
  .calendar_col .room_calendar_txt { text-align: left; margin-top: 15px; }
  .calendar_col .calendar_489ban { flex-direction: column; margin-top: 30px; }
  .calendar_col .calendar_489ban .calendar { width: 100%; }
  .calendar_col .calendar_489ban .calendar + .calendar { margin-top: 30px; }
  .calendar_col .calendar_489ban .calendar caption { font-size: 17px; margin-bottom: 5px; }
  .calendar_col .calendar_489ban .calendar th { padding: 5px; }
  .calendar_col .calendar_489ban .calendar td { padding: 3px; }
  .calendar_col .calendar_489ban + a { margin: 20px 0 0 auto; padding-right: 25px; }
}


/* ---------------------------------------------------
sec03
------------------------------------------------------ */
#sec_info { padding: 80px 0 120px;}
#sec_info .tb_layout { margin-top: 45px; display: flex; flex-wrap: wrap;}
#sec_info .tb_layout dt,
#sec_info .tb_layout dd { padding: 10px 25px; box-sizing: border-box; border-bottom: 1px solid #404040; line-height: 1.6;}
#sec_info .tb_layout dt { width: 250px; background: #262829;}
#sec_info .tb_layout dd { width: calc(100% - 250px);}
/*#sec03 .tb_layout .list li { padding-left: 1em; text-indent: -1em;}
#sec03 .tb_layout .list li::before { content: '・';}*/

@media screen and (max-width: 600px) {
#sec_info { padding: 40px 0 80px;}
#sec_info .tb_layout { margin-top: 25px; flex-wrap: wrap;}
#sec_info .tb_layout dt { width: 100%; padding: 10px; border-bottom: none;}
#sec_info .tb_layout dd { width: 100%; padding: 10px 15px;}
}