@charset "utf-8";
/* ===================================================
	GUEST ROOMS CSS
====================================================== */
/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
.sec_lead{ width: 90%; max-width: 1300px; margin: 0 auto; padding: 70px 0; text-align: center;}
.sec_lead .tit{ font-size: 40px; letter-spacing: 0.1em; padding: 0 0 30px;}
.sec_lead .txt{ font-size: 16px; line-height: 1.8;}
.sec_lead .wifi{ font-size: 16px; line-height: 1; padding: 50px 0 50px 80px; background: url("../../rooms/img/ico_wifi.png") no-repeat center left; background-size: 68px; display: inline-block;}
.sec_lead .lnav{ display: flex; justify-content: center; gap: 0 3%; }
.sec_lead .lnav li{ width: 23%;}
.sec_lead .lnav li a{ display: flex; align-items: center; justify-content: center; width: 100%; border: solid 1px var(--cmn-btn2); background-color: #fff; padding: 40px 0 50px; position: relative; transition: all 0.3s;}
.sec_lead .lnav li a:hover{ background-color: var(--cmn-btn2); color: #fff; text-decoration: none;}
.sec_lead .lnav li a::after{ content: ""; display: block; width: 10px; height: 10px; border-right: solid 1px var(--cmn-btn2); border-bottom: solid 1px var(--cmn-btn2); transform: rotate(45deg); position: absolute; bottom: 25px; left: 0; right: 0; margin: 0 auto;}
.sec_lead .lnav li a:hover::after{ border-right: solid 1px #fff; border-bottom: solid 1px #fff;}
.sec_lead .lnav li a span{ font-size: 24px;}
.sec_lead .lnav li a span.type{ font-size: 17px; line-height: 1; border: solid 1px #ababab; border-radius: 20px; padding: 5px 15px; margin: 0 0 0 5px; background-color: #fff;}
.sec_lead .lnav li:hover a span.type{ border: solid 1px var(--cmn-yel2); background-color: var(--cmn-yel2);}

@media screen and (max-width: 600px) {
.sec_lead{ width: 90%; max-width: 90%; margin: 0 auto; padding: 30px 0; text-align: center;}
.sec_lead .tit{ font-size: 26px; letter-spacing: 0.1em; padding: 0 0 15px;}
.sec_lead .txt{ font-size: 15px; line-height: 1.7; text-align: left;}
.sec_lead .wifi{ font-size: 15px; padding: 20px 0 20px 80px;}
.sec_lead .lnav{ flex-wrap: wrap; margin: 10px 0 0;}
.sec_lead .lnav li{ width: 48%; margin: 0 0 4%;}
.sec_lead .lnav li a{ padding: 20px 0 30px;}
.sec_lead .lnav li a::after{ bottom: 15px;}
.sec_lead .lnav li a span{ font-size: 16px;}
.sec_lead .lnav li a span.type{ font-size: 12px; padding: 5px 10px; margin: 0 0 0 5px;}
}

@media screen and (max-width: 340px) {
.sec_lead .lnav li a span{ font-size: 15px;}
.sec_lead .lnav li a span.type{ font-size: 11px;}
}

/* ---------------------------------------------------
Section Room Type 01
------------------------------------------------------ */
.sec_room_01{ padding: 90px 0;}
.sec_room_01:nth-of-type(2n){ background-color: var(--cmn-bg); }
.sec_room_01 .tit_01{ text-align: center; padding: 0 0 60px;}
.sec_room_01 .tit_01 span{ display: block; font-size: 40px; letter-spacing: 0.1em; line-height: 1.4; }
.sec_room_01 .tit_01 span.type{ font-size: 20px; background: var(--cmn-btn2); color: #fff; border-radius: 20px; display: inline-block; padding: 5px 20px; line-height: 1.2; margin: 5px 0 0;}
/* .sec_room_01 .tit_01 span.type::first-letter{ font-size: 22px;} */
.sec_room_01 .tit_01 span.en{ font-size: 15px; color: var(--cmn-yel); padding: 20px 0 0;}
.sec_room_01 .box_img{ width: 1100px; margin: 0 auto 80px !important; line-height: 1; font-size: 0;}
.sec_room_01 .slick-dots li button:before{ content: "○"; opacity: 1; color: var(--cmn-yel); font-size: 12px;}
.sec_room_01 .slick-dots li.slick-active button:before{ content: "●"; color: var(--cmn-yel);}
.sec_room_01 .box_data{ width: 1100px; margin: 0 auto; display: flex; justify-content: space-between;}
.sec_room_01 .box_data .box_txt{ width: 480px;}
.sec_room_01 .box_data .box_txt .txt_01{ font-size: 15px; line-height: 2;}
.sec_room_01 .box_data .box_table{ width: 480px;}
.sec_room_01 .box_data .box_table table{ width: 100%; }
.sec_room_01 .box_data .box_table th,
.sec_room_01 .box_data .box_table td{ padding: 15px 30px; text-align: left; vertical-align: middle; border-bottom: solid 1px #ababab; font-weight: normal; font-size: 15px; line-height: 1.5;}
.sec_room_01 .box_data .box_table th{ background-color: #e3e3e3; width: 6em;}
.sec_room_01 .box_data .box_table td{ width: calc( 100% - 6em );}
.sec_room_01 .cmn_btn_01{ width: 320px; margin: 50px auto 0 0; background-color: var(--cmn-color);}
.sec_room_01 .cmn_btn_01:nth-of-type(n+2){ margin: 20px auto 0 0;}
.sec_room_01 .cmn_btn_01:hover{ background-color: var(--cmn-color2);}

.sec_room_01 .smoking{ background-image: url("../../rooms/img/ico_smoking.svg"); background-repeat: no-repeat; background-position: 30px center; background-size: 24px; padding: 10px 50px 10px 70px;}
.sec_room_01 .nosmoking{ background-image: url("../../rooms/img/ico_nosmoking.svg"); background-repeat: no-repeat; background-position: 30px center; background-size: 24px; padding: 10px 50px 10px 70px;}


@media screen and (max-width: 600px) {
.sec_room_01{ padding: 6vw 0;}
.sec_room_01 .tit_01{ padding: 0 0 20px;}
.sec_room_01 .tit_01 span{ font-size: 26px; letter-spacing: 0.1em; }
.sec_room_01 .tit_01 span.type{ font-size: 14px; padding: 5px 20px; margin: 5px 0 0;}
/* .sec_room_01 .tit_01 span.type::first-letter{ font-size: 18px;} */
.sec_room_01 .tit_01 span.en{ font-size: 14px; padding: 10px 0 0;}
.sec_room_01 .box_img{ width: 90%; margin: 0 auto 30px !important;}
.sec_room_01 .slick-dots li { margin: 0 2px; }
.sec_room_01 .box_data{ width: 90%; flex-direction: column;}
.sec_room_01 .box_data .box_txt{ width: 100%; padding: 0 0 20px;}
.sec_room_01 .box_data .box_txt .txt_01{ font-size: 14px; line-height: 1.7;}
.sec_room_01 .box_data .box_table{ width: 100%;}
.sec_room_01 .box_data .box_table th,
.sec_room_01 .box_data .box_table td{ padding: 15px; font-size: 13px; line-height: 1.5;}
.sec_room_01 .box_data .box_table td{ padding: 15px 0 15px 15px;}
.sec_room_01 .cmn_btn_01{ width: 100%; margin: 20px auto 0 0;}
}

@media screen and (max-width: 350px) {
.sec_room_01 .smoking{ background-position: 20px center; padding: 10px 40px 10px 50px;}
.sec_room_01 .nosmoking{ background-position: 20px center; padding: 10px 40px 10px 50px;}
}

/* ---------------------------------------------------
Section Information
------------------------------------------------------ */
.sec_info{ /*background-color: var(--cmn-bg);*/ padding: 90px 0 130px;}
.sec_info .inner{ width: 1100px; margin: 0 auto;}
.sec_info .tit{ text-align: center; padding: 0 0 30px;}
.sec_info .tit span{ display: block;}
.sec_info .tit .ja{ font-size: 40px; letter-spacing: 0.2em;}
.sec_info .tit .en{ font-size: 15px; color: var(--cmn-yel); padding: 10px 0 0;}
.sec_info .data{ width: 100%;}
.sec_info .data th,
.sec_info .data td{ padding: 25px 50px; font-size: 15px; line-height: 2; vertical-align: middle; text-align: left; font-weight: normal; border-bottom: solid 1px #ababab;}
.sec_info .data th{ width: 5em; background: #e3e3e3;}
.sec_info .data td{ width: calc( 100% - 5em ); padding: 25px 0 25px 50px;}

@media screen and (max-width: 600px) {
.sec_info{ padding: 30px 0 80px;}
.sec_info .inner{ width: 90%;}
.sec_info .tit{ padding: 0 0 20px;}
.sec_info .tit .ja{ font-size: 24px; letter-spacing: 0.1em;}
.sec_info .tit .en{ font-size: 14px; padding: 5px 0 0;}
.sec_info .data,
.sec_info .data tr,
.sec_info .data tbody { display: block;}
.sec_info .data th,
.sec_info .data td{ display: block; padding: 10px 15px; font-size: 14px; line-height: 1.7; border-bottom: none; box-sizing: border-box;}
.sec_info .data th{ width: 100%;}
.sec_info .data td{ width: 100%; padding: 10px 15px; border-bottom: solid 1px #ababab; margin: 0 0 10px;}
}