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

main{ width: 100%; background: url(../img/bg_leaf_01.webp) no-repeat #fff; background-position: calc( 50% - 575px ) 590px; background-size: 410px;}

/* ---------------------------------------------------
Section Detail
------------------------------------------------------ */
.sec_detail{ padding: 100px 0 0;}
.sec_detail .box_img{ width: 100%;}
.sec_detail .box_img img{ width: 100%; height: auto;}
.sec_detail .box_txt{ padding: 40px 0 50px; text-align: center; width: 100%;}
.sec_detail .txt_01{ line-height: 1.9; padding: 0 0 1.9em;}
.sec_detail .box_rv{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start;}
.sec_detail .box_data{ width: 660px;}
.sec_detail .box_data.standard{ width: 830px; margin: 0 auto;}
.sec_detail .box_data > div{ display: block; }
.sec_detail .box_data dt{ color: #1a3c34; padding: 0 0 10px;}
.sec_detail .box_data dd{ margin: 0 0 30px; padding: 0 0 30px; border-bottom: solid 1px #d3d5d4;}
.sec_detail .box_floorplan{ width: 472px;}
.sec_detail .box_floorplan .tit{ padding: 0 0 10px;}
.sec_detail .box_floorplan img{ border: solid 1px #d3d5d4;}

/* Slick */
.sec_detail .slick-dots{ bottom: -20px;}
.sec_detail .slick-dots li{ width: 80px; height: 3px; margin: 0; }
.sec_detail .slick-dots li button { width: 80px; height: 20px; padding: 0; }
.sec_detail .slick-dots li button::before { background-color: #000; top: 8px; width: 80px; height: 2px; content: ""; opacity: 0.25; .sec_fdetail block; }
.sec_detail .slick-dots li.slick-active,
.sec_detail .slick-dots li.slick-active button::before { width: 80px; }
.sec_detail .slick-dots li.slick-active button::before { background-color: #435e58; opacity: 1; }

@media screen and (max-width:600px){
.sec_detail{ padding: 50px 0 0;}
.sec_detail .box_txt{ padding: 20px 0; text-align: left;}
.sec_detail .txt_01{ line-height: 1.7; padding: 0 0 1.7em;}
.sec_detail .box_rv{ flex-direction: column;}
.sec_detail .box_data{ width: 100%;}
.sec_detail .box_data.standard{ width: 100%; margin: 0;}
.sec_detail .box_data dt{ padding: 0 0 5px;}
.sec_detail .box_data dd{ margin: 0 0 15px; padding: 0 0 15px;}
.sec_detail .box_floorplan{ width: 80%; margin: 20px auto 0;}
.sec_detail .box_floorplan .tit{ padding: 0 0 5px;}

/* Slick */
.sec_detail .slick-dotted.slick-slider{ margin-bottom: 20px;}
.sec_detail .slick-dots{ bottom: -20px;}
.sec_detail .slick-dots li{ width: 30px;}
.sec_detail .slick-dots li button { width: 30px; }
.sec_detail .slick-dots li button::before { width: 30px; }
.sec_detail .slick-dots li.slick-active,
.sec_detail .slick-dots li.slick-active button::before { width: 30px; }
}

/* ---------------------------------------------------
Section Calender
------------------------------------------------------ */
.sec_calendar{ padding: 100px 0;}
.sec_calendar .cmn_tit_02{ align-items: center;}
.sec_calendar .txt_01{ text-align: center; padding: 0 0 30px 0;}
.sec_calendar .calendar_489ban{ display: flex; justify-content: space-between; align-items: flex-start;}
.sec_calendar .calendar_489ban.standard{ width: 830px; margin: 0 auto 80px;}
.sec_calendar .calendar_489ban.standard:last-of-type{ margin: 0 auto;}
.sec_calendar .calendar_489ban > div{ width: 30%;}
.sec_calendar .calendar_489ban.standard > div{ width: 47%;}
.sec_calendar .calendar_489ban .tit{ display: block; width: fit-content; height: 26px; background-color: #181818; color: #fff; font-size: 14px; line-height: 26px; text-align: center; margin: 0 auto 5px; padding: 0 10px;}
.sec_calendar .calendar_489ban table{ width: 100%; border-right: solid 1px #d8d9d8; border-bottom: solid 1px #d8d9d8;}
.sec_calendar .calendar_489ban table caption{ padding: 0 0 10px; font-size: 18px;}
.sec_calendar .calendar_489ban table th,
.sec_calendar .calendar_489ban table td{ text-align: center; border-left: solid 1px #d8d9d8; border-top: solid 1px #d8d9d8; font-size: 14px;}
.sec_calendar .calendar_489ban table th:first-child,
.sec_calendar .calendar_489ban table td:first-child,
.sec_calendar .calendar_489ban table td.holiday,
.sec_calendar .calendar_489ban table td:first-child a,
.sec_calendar .calendar_489ban table td.holiday a{ color: #C95857;}
.sec_calendar .calendar_489ban table th:last-child,
.sec_calendar .calendar_489ban table td:last-child,
.sec_calendar .calendar_489ban table td:last-child a{ color: #4653a7;}
.sec_calendar .calendar_489ban table th{ background-color: #f2f2f2; padding: 10px 0; font-weight: normal;}
.sec_calendar .calendar_489ban table td{ background-color: #fff; text-align: center; border-left: solid 1px #d8d9d8; border-top: solid 1px #d8d9d8; padding: 5px 0;}
.sec_calendar .btn_01{ text-align: right; padding: 30px 0;}
.sec_calendar .btn_01 a::after{ content: ""; display: block; width: 6px; height: 6px; border-right: solid 1px #181818; border-bottom: solid 1px #181818; position: absolute; top: 8px; left: -15px; transform: rotate(-45deg);}
.sec_calendar .btn_02{ width: 400px; margin: 0 auto;}
.sec_calendar .btn_02 a{ display: block; width: 100%; height: 64px; font-size: 18px; line-height: 64px; background-color: #112d26; color: #fff; text-align: center; transition: all 0.5s;}
.sec_calendar .btn_02 a:hover{ background-color: #395c54; font-size: 16px; text-decoration: none;}
.sec_calendar .calendar_489ban.standard .btn_02{ width: 100%; margin: 0;}

@media screen and (max-width:600px){
.sec_calendar{ padding: 50px 0;}
.sec_calendar .txt_01{ padding: 0 0 30px 0;}
.sec_calendar .calendar_489ban{ display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column;}
.sec_calendar .calendar_489ban.standard{ width: 100%; margin: 0 0 40px 0;}
.sec_calendar .calendar_489ban.standard:last-of-type{ margin: 0;}
.sec_calendar .calendar_489ban > div{ width: 80%; margin: 0 auto 30px;}
.sec_calendar .calendar_489ban.standard > div{ width: 100%; margin: 0 0 40px;}
.sec_calendar .calendar_489ban.standard table{ width: 80%; margin: 0 auto 30px;}
.sec_calendar .calendar_489ban table caption{ padding: 0 0 5px; font-size: 15px;}
.sec_calendar .calendar_489ban table th,
.sec_calendar .calendar_489ban table td{ font-size: 13px; line-height: 1.3;}
.sec_calendar .calendar_489ban table th{ padding: 10px 0;}
.sec_calendar .calendar_489ban table td{ padding: 5px 0;}
.sec_calendar .btn_01{ text-align: center; padding: 0 0 30px;}
.sec_calendar .btn_02{ width: 100%; margin: 0;}
.sec_calendar .btn_02 a{ height: 50px; font-size: 15px; line-height: 50px;}
.sec_calendar .btn_02 a:hover{ font-size: 13px;}
}

/* ---------------------------------------------------
Section Point
------------------------------------------------------ */
.sec_point{ padding: 0 0 100px;}
.sec_point .inner_md{ border: solid 1px #d3d5d4; background-color: #f2f2f2; padding: 45px 0 45px 70px; display: flex; justify-content: space-between; align-items: center;}
.sec_point .box_txt{ width: 530px;}
.sec_point .box_img{ width: 500px;}
.sec_point .tit_01 span{ display: block;}
.sec_point .tit_01 span.en{ background-color: #1a3c34; color: #fff; width: 92px; height: 20px; font-size: 12px; line-height: 20px; text-align: center;}
.sec_point .tit_01 span.ja{ font-size: 30px; line-height: 1.4; padding: 10px 0 20px;}
.sec_point .txt_01{ line-height: 2;}
.sec_point .btn_01{ padding: 10px 0 0;}
.sec_point .btn_01 a{ position: relative; display: block; width: 350px; height: 50px; border-bottom: solid 1px #181818; font-size: 15px; line-height: 50px; text-align: center; overflow: hidden; container-type: inline-size; }
.sec_point .btn_01 a::before{ content: ""; width: 30px; height: 2px; background-color: #181818; position: absolute; bottom: 0; left: 0; }
.sec_point .btn_01 a:hover{  text-decoration: none; }
.sec_point .btn_01 a:hover::before{  animation: moveLine 0.7s forwards linear;}

@media screen and (max-width:600px){
.sec_point{ padding: 0 0 50px;}
.sec_point .inner_md{ padding: 5% 5% 0; flex-direction: column;}
.sec_point .box_txt{ width: 100%; padding: 0 0 20px;}
.sec_point .box_img{ width: 100%;}
.sec_point .tit_01 span.ja{ font-size: 24px; padding: 5px 0 10px;}
.sec_point .txt_01{ line-height: 2;}
.sec_point .btn_01{ padding: 5px 0 0;}
.sec_point .btn_01 a{ width: 100%; height: 50px; font-size: 13px; line-height: 50px; }
}

@keyframes moveLine {
0% { transform: translateX(-100%); }
55.6% { transform: translateX(100cqw); }
55.7% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}

/* ---------------------------------------------------
Section Siblings
------------------------------------------------------ */
.sec_siblings{ border-top: solid 1px #f2f2f2; padding: 100px 0 150px;}
.sec_siblings .tit_01{ display: flex; justify-content: flex-end; align-items: baseline; flex-direction: row-reverse; padding: 0 0 10px;}
.sec_siblings .tit_01 span.en{ font-size: 18px; letter-spacing: 0.08em; padding: 0 0 0 0.5em; color: #a7abaa;}
.sec_siblings .tit_01 span.ja{ font-size: 30px; letter-spacing: 0.14em;}
.sec_siblings ul{ display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; border-right: solid 1px #d3d5d4;  border-bottom: solid 1px #d3d5d4;}
.sec_siblings ul li{ width: 20%; border-top: solid 1px #d3d5d4; border-left: solid 1px #d3d5d4; box-sizing: border-box;}
.sec_siblings ul li a{ display: block; background-color: #fff; transition: background-color 0.5s;}
.sec_siblings ul li a:hover{ background-color: #f2f2f2; text-decoration: none;}
.sec_siblings ul li a img{ transition: all 0.5s; filter: brightness(1);}
.sec_siblings ul li a:hover img{ filter: brightness(1.4);}
.sec_siblings ul li a .name{ padding: 10px 10px 0; font-size: 20px;}
.sec_siblings ul li a .name .num{ font-size: 15px;}
.sec_siblings ul li a .spec{ padding: 0 10px 10px; font-size: 15px;}

@media screen and (max-width:600px){
.sec_siblings{ padding: 50px 0 70px;}
.sec_siblings .tit_01{ padding: 0 0 5px;}
.sec_siblings .tit_01 span.en{ font-size: 15px;}
.sec_siblings .tit_01 span.ja{ font-size: 24px;}
.sec_siblings ul li{ width: 50%;}
.sec_siblings ul li a .name{ padding: 5px 5px 0; font-size: 18px;}
.sec_siblings ul li a .name .num{ font-size: 12px;}
.sec_siblings ul li a .spec{ padding: 0 5px 5px; font-size: 12px;}
}