@charset "UTF-8";
/* ============================================================
   客室ページ (room.css)
   PC: Figma「room」フレーム / SP: 「room_sp」フレーム準拠
============================================================ */

/* コンテンツ全体（和紙テクスチャ） */
.room-content{
  position:relative;z-index:2;
  background:var(--white) url('../images/bg-texture.png') top left/800px auto;
  display:flex;flex-direction:column;gap:0;
  padding:100px 0;
} 

/* ============================================================
   イントロ
============================================================ */
.room-intro{
  display:flex;flex-direction:column;align-items:center;gap:96px;
  padding:0 100px 150px;
}
.room-intro__txt{max-width:1550px;text-align:center;display:flex;flex-direction:column;gap:77px;width: 100%;}
.room-intro__txt h2{font-size:40px;font-weight:500;line-height:1.4;}
.room-intro__txt p{font-size:15px;line-height:2;}

/* ============================================================
   カテゴリ1：露天風呂付客室（濃紺）
============================================================ */
.room-cat1{
  background:var(--navy);color:#fff;
  display:flex;flex-direction:column;gap:104px;
  padding:150px 0;
}
.room-cat1__head{text-align:center;display:flex;flex-direction:column;gap:49px;padding:0 40px;}
.room-cat1__head h2{font-size:40px;font-weight:500;line-height:1.4;}
.room-cat1__head p{font-size:15px;line-height:2;}
.room-cat1__list{display:flex;flex-direction:column;gap:150px;}

/* 客室ブロック */
.rblock{display:flex;gap:90px;justify-content:flex-end;align-items:flex-start;width:100%;overflow:hidden;}
.rblock__title{
  flex-shrink:0;width:72px;
  border-left:1px solid #fff;padding-left:23px;padding-bottom:140px;
}
.rblock__title span{
  display:block;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:40px;font-weight:500;line-height:1.25;letter-spacing:.3em;
  text-align:left;
}
.rblock__body{width:calc(100% - 291px);max-width:1524px;display:flex;flex-direction:column;gap:20px;}
.rblock__img{height:100%;max-height: 600px;aspect-ratio: 19 / 9;}
.rblock__img img{width:100%;height:100%;object-fit:cover;}
.rblock__foot{display:flex;gap:50px;align-items:flex-start;max-width:100%;}
.rblock__txt{width:535px;flex-shrink:0;padding-top:25px;display:flex;flex-direction:column;gap:89px;}
.rblock__txt p{font-size:15px;line-height:2;}
.rblock .info-list{flex:1;min-width:0;}

.btn_tb{display: none;}

/* ============================================================
   カテゴリ2：一般和室
============================================================ */
.room-cat2{
  display:flex;flex-direction:column;align-items:center;gap:75px;
  padding:150px 100px 100px;
}
.room-cat2__ttl{font-size:40px;font-weight:500;text-align:center;line-height:1.4;}
.room-cat2__inner{width:100%;max-width:1551px;display:flex;flex-direction:column;align-items:center;}
.room-cat2__img{width:100%;max-width:1359px;height:726px;}
.room-cat2__img img{width:100%;height:100%;object-fit:cover;}
.room-cat2__body{
  width:100%;max-width:1548px;
  display:flex;gap:50px;align-items:flex-start;
  padding:50px 100px;
}
.room-cat2__txt{width:442px;flex-shrink:0;padding-top:25px;display:flex;flex-direction:column;gap:58px;}
.room-cat2__txt h3{font-size:30px;line-height:1.5;}
.room-cat2__txt p{font-size:15px;line-height:2;}
.room-cat2__body .info-list{flex:1;min-width:0;}

/* ============================================================
   予約ボタン
============================================================ */
.room-reserve{display:flex;justify-content:center;padding:0 40px 0;}

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width:1500px){
  .rblock{gap:50px;}
  .rblock__body{width:calc(100% - 200px);}
  .rblock__foot{flex-wrap:wrap;padding-right:40px;}
  .rblock__txt{width:100%;gap:40px;}
  .room-cat2__body{padding:50px 40px;flex-wrap:wrap;}
  .room-cat2__txt{width:100%;gap:36px;}
  .room-cat2__img{height:auto;aspect-ratio:1359/726;}
  .btn_pc{display: none;}
  .btn_tb{display: block;width: 100%;}
}

@media (max-width:900px){
  .room-content{padding:0 0 50px;}
  .room-intro{padding:50px 30px;gap:50px;}
  .room-intro__txt{gap:30px;}
  .room-intro__txt h2{font-size:30px;}
  .room-cat1{padding:100px 30px;gap:80px;}
  .room-cat1__head{padding:0;gap:36px;}
  .room-cat1__head h2{font-size:30px;}
  .room-cat1__list{gap:100px;}
  /* ブロック: 縦積み（room_sp準拠） */
  .rblock{flex-direction:row;justify-content:flex-start;}
  .rblock__title{width:41px;padding-left:10px;padding-bottom:50px;}
  .rblock__title span{font-size:25px;font-weight:400;}
  .rblock__body{width:100%;gap:0;}
  .rblock__foot{flex-direction:column;gap:50px;padding-right:0;}
  .rblock__txt{padding-top:25px;gap:50px;}
  .room-cat2{padding:100px 30px 0;gap:60px;}
  .room-cat2__ttl{font-size:30px;}
  .room-cat2__img {
      height: auto;
      aspect-ratio: 13 / 9;
  }
  .room-cat2__body{flex-direction:column;padding:20px 0;gap:50px;}
  .room-cat2__txt{padding-top:25px;gap:40px;}
  .room-cat2__txt h3{font-size:30px;}
  .room-reserve{padding:50px 30px 0;}
}

@media (max-width:600px){
   .rblock{flex-direction:column;gap:32px;justify-content:flex-start;align-items: center;}
   .room-cat2{gap: 35px;}
   .room-cat2__txt{gap: 20px;}
   .room-cat2__body{gap: 40px;}
   .rblock__img{aspect-ratio: 13 / 9;}
}