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

.under{ text-decoration: underline;}

/* ---------------------------------------------------
	Section Rooms
------------------------------------------------------ */
.sec_rooms{ padding: 0 0 135px;}
.sec_rooms .box_rooms{ display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 50px 3.75%; }
.sec_rooms .box_in a{ display: block; width: 100%; height: 100%; position: relative; text-align: center;}
.sec_rooms .box_in a .img{ overflow: hidden; background: #000; position: relative; z-index: 2;}
.sec_rooms .box_in a .img img{ overflow: hidden; transition: all 0.5s; width: 100%; height: auto; }
.sec_rooms .box_in a .box_01 { position: relative; }
.sec_rooms .box_in a .box_01 .img img{ opacity: 0.55; }
.sec_rooms .box_in a .box_01 .img::before{ content: "詳細"; position: absolute; top: calc(50% + 90px); left: 50%; transform: translate(-50%, 0%); z-index: 10; font-size: 18px; line-height: 1; color: #fff; border-bottom: solid 1px #fff; width: 2.8em; height: 1em; margin: auto auto; padding: 0 0 5px; display: block; opacity: 0; transition: all 0.8s;}
.sec_rooms .box_in a .name { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; z-index: 8; letter-spacing: 0.15em; }
.sec_rooms .box_in .name .name01 { font-size: 26px; display: block; }
.sec_rooms .box_in .name .name02 { font-size: 18px; display: block; margin-top: 5px; }


.sec_rooms .box_in.style_lg { width: 100%; margin-bottom: 50px; }
.sec_rooms .box_in.style_lg a .box_02 { display: flex; }
.sec_rooms .box_in.style_lg a .box_02 > div { width: calc(100% / 3); }

.sec_rooms .box_in.style_md { width: 100%; }

.sec_rooms .box_in.style_sm{ width: 30.8%; max-width: 370px; }
.sec_rooms .box_in.style_sm a .name{ font-size: 20px; line-height: 1.8; padding: 10px 0 0;}
.sec_rooms .box_in.style_sm a .box_01 .img::before { top: calc(50% + 40px);}
@media screen and (hover: hover) {
.sec_rooms .box_in a:hover{ text-decoration: none;}
.sec_rooms .box_in a:hover .box_01 .img img{ transform: scale(1.1); opacity: 0.3;}
.sec_rooms .box_in a:hover .box_01 .img::before{ opacity: 1; }
.sec_rooms .box_in a:hover .box_02 .img img{ opacity: 0.7;}
}
@media screen and (max-width: 600px) {
.sec_rooms{ padding: 0 0 60px;}
.sec_rooms .box_rooms{ justify-content: space-between; gap: 25px 4%; }
.sec_rooms .box_in .name { width: 100%; }
.sec_rooms .box_in .name .name01 { font-size: 20px; }
.sec_rooms .box_in .name .name02 { font-size: 15px; letter-spacing: 0.1em; }
.sec_rooms .box_in a .box_01 .img::before { display: none; }

.sec_rooms .box_in.style_lg { margin-bottom: 25px; }
.sec_rooms .box_in.style_lg a .box_01 .img img { height: 50vw; object-fit: cover; }

.sec_rooms .box_in.style_sm { width: 48%; max-width: 48%; }
.sec_rooms .box_in.style_sm a .img img{ height: 140px; object-fit: cover;}
.sec_rooms .box_in.style_sm a:hover .img::before{ font-size: 16px;}
.sec_rooms .box_in.style_sm a .name{ font-size: 15px; line-height: 1.7; padding: 5px 0 0;}
}

/* ---------------------------------------------------
	Section Information
------------------------------------------------------ */
.sec_info{ position: relative; padding: 0 0 120px; background: #f9f8f7;}
.sec_info::before{ content: ""; display: block; width: 1px; height: 120px; background: #c1b8af; position: absolute; top: -60px; left: 50%;}
.sec_info .tit{ font-size: 26px; line-height: 1; color: #9c937d; letter-spacing: 0.3em; text-align: center; padding: 120px 0 40px;}
.sec_info .box_data{ width: 1000px; margin: 0 auto;}
.sec_info .flex_box { display: flex; justify-content: space-between; margin-top: 65px; }
.sec_info .flex_box .photo_col { width: 470px; }
.sec_info .flex_box .txt { margin-top: 5px; }
.sec_info .cmn_table_01 dt,
.sec_info .cmn_table_01 dd { display: flex; flex-direction: column; justify-content: center; }
@media screen and (max-width: 600px) {
.sec_info{ position: relative; padding: 0 0 40px;}
.sec_info::before{ content: ""; display: block; width: 1px; height: 60px; background: #c1b8af; position: absolute; top: -30px; left: 50%;}
.sec_info .tit{ font-size: 22px; line-height: 1; color: #9c937d; letter-spacing: 0.3em; text-align: center; padding: 50px 0 20px;}
.sec_info .box_data{ width: 90%; margin: 0 auto;}
.sec_info .flex_box .photo_col { width: 100%; }
.sec_info .flex_box { width: 100%; flex-direction: column; gap: 25px; margin-top: 40px; }
.sec_info .flex_box .txt { font-size: 14px; }
}