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

main{ width: 100%; background: url(../img/bg_flower_01.webp) no-repeat #fff; background-position: calc( 50% + 550px ) 55px; background-size: 700px;}

/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
.cmn_sec_lead{ background: transparent !important;}

/* ---------------------------------------------------
Section Type
------------------------------------------------------ */
.sec_type{ padding: 60px 0;}
.sec_type#type_03{ padding: 40px 0 150px;}
.sec_type .cmn_tit_02{ align-items: center;}
.sec_type .box_grid{ width: 90%; max-width: 1200px; margin: 0 auto; display: grid; gap: 1px; }
.sec_type#type_01 .box_grid{ grid-template-columns: 1fr; }
.sec_type#type_02 .box_grid{ grid-template-columns: repeat(2,1fr); }
.sec_type#type_03 .box_grid{ display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.sec_type#type_03 .box_grid .room{ width: 50%;}
.sec_type .room a{ position: relative; display: block; width: 100%; height: 100%; overflow: hidden; color: #fff;}
.sec_type .room a img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease, filter .6s ease; }
.sec_type .room a:hover img{ transform:scale(1.05); filter:blur(4px); }
.sec_type .room .box_txt{ position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); display:flex; flex-direction:column; align-items:center; justify-content:center; width: 310px; text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);}
.sec_type .room .en{ font-size: 18px; line-height: 1; letter-spacing: 0.08em; color: #bd9b58;}
.sec_type .room .ja{ font-size: 40px; line-height: 1; letter-spacing: 0.14em; border-bottom: solid 1px rgba(255, 255, 255, .2); padding: 15px 0 20px; width: 100%; text-align: center;}
.sec_type .room .spec{ font-size: 20px; line-height: 1.6; letter-spacing: 0.08em; padding: 15px 0 0;}

@media screen and (max-width:600px){
.sec_type{ padding: 30px 0;}
.sec_type#type_03{ padding: 30px 0 70px;}
.sec_type#type_01 .box_grid{ grid-template-columns: 1fr; }
.sec_type#type_02 .box_grid{ grid-template-columns: 1fr; }
.sec_type#type_03 .box_grid .room{ width: 100%;}
.sec_type .room .box_txt{ width: 280px;}
.sec_type .room .en{ font-size: 15px;}
.sec_type .room .ja{ font-size: 30px; padding: 7px 0 10px;}
.sec_type .room .spec{ font-size: 14px; line-height: 1.6; letter-spacing: 0.08em; padding: 7px 0 0;}
}