/* =========================================================
   つきじ治作 — rooms ページ固有スタイル（抽出元: rooms/index.html の <style>）
   body名前空間: page-rooms / url(): css/pages/基準 ../../images/
   ========================================================= */
/* =========================================================
   Rooms & Garden — page-scoped styles
   Inherits tokens and global components from ../css/style.css
   ========================================================= */

.op-main{padding-top:120px;}

/* ---------- Page hero ---------- */
.op-hero{
  position:relative;
  min-height:clamp(360px, 60vh, 560px);
  display:flex;align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.op-hero__media{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg, rgba(11,22,32,.5) 0%, rgba(11,22,32,.85) 100%),
    url('../../images/hero.webp') center/cover no-repeat;
  transform:scale(1.04);
  animation:opHeroBreath 14s ease-in-out infinite alternate;
}
@keyframes opHeroBreath{to{transform:scale(1.0)}}
.op-hero__vignette{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
.op-hero__inner{
  width:100%;
  padding:0 clamp(24px,8vw,120px) clamp(48px,8vh,96px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
}
.op-hero__crumb{
  font-family:var(--en-serif);
  letter-spacing:.32em;text-transform:uppercase;
  font-size:11px;color:var(--mute);
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;
}
.op-hero__crumb a{color:var(--mute);opacity:.85;transition:opacity .3s;}
.op-hero__crumb a:hover{opacity:1;color:var(--gold-hi);}
.op-hero__crumb .sep{width:22px;height:.5px;background:var(--mute);opacity:.5;}
.op-hero__title{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(24px,3vw,40px);
  letter-spacing:.22em;
  line-height:1.5;
  color:var(--mute);
  margin-bottom:10px;
}
.op-hero__sub{
  font-family:var(--en-serif);
  letter-spacing:.36em;text-transform:uppercase;
  font-size:12px;color:var(--gold);
  margin:0 0 22px;
}
.op-hero__lead{
  max-width:32em;
  font-size:14px;line-height:2;letter-spacing:.14em;
  color:rgba(232,226,212,.88);
}
.op-hero__kanji{
  flex-shrink:0;
  writing-mode:vertical-rl;
  font-family:var(--serif-display);
  font-weight:700;
  font-size:clamp(72px,9vw,140px);
  letter-spacing:.1em;
  line-height:1;
  color:var(--mute);
  text-shadow:0 6px 30px rgba(0,0,0,.55);
  position:relative;
  padding-left:28px;
}
.op-hero__kanji::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:.5px;background:var(--gold);opacity:.5;
}
.op-hero__kanji .tag{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:14px;letter-spacing:.3em;
  color:var(--gold);
  margin-top:20px;
}

/* ---------- Intro ---------- */
.op-intro{padding:clamp(80px,10vh,140px) 0 clamp(40px,6vh,72px);}
.op-intro__inner{max-width:980px;margin:0 auto;text-align:center;padding:0 clamp(24px,4vw,48px);}
.op-intro__en{
  font-family:var(--en-serif);letter-spacing:.4em;text-transform:uppercase;
  font-size:11px;color:var(--gold);margin-bottom:20px;
}
.op-intro__h{
  font-family:var(--serif-display);font-weight:500;
  font-size:clamp(22px,2.4vw,32px);letter-spacing:.18em;line-height:1.7;
  color:var(--mute);margin:0 0 28px;
}
.op-intro__body{
  font-size:14px;line-height:2.1;letter-spacing:.14em;
  color:rgba(232,226,212,.82);
  max-width:34em;margin:0 auto;
}
.op-intro__rule{
  width:52px;height:.5px;background:var(--gold);opacity:.7;
  margin:36px auto 0;
}

/* =========================================================
   FLOORMAP — illustrated garden diagram
   ========================================================= */
.floormap-section{
  padding:clamp(40px,5vh,64px) 0 clamp(96px,12vh,160px);
}
.floormap-wrap{
  position:relative;
  max-width:1320px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
}
.floormap-header{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;margin-bottom:48px;
}
.floormap-header .en{
  font-family:var(--en-serif);letter-spacing:.42em;text-transform:uppercase;
  font-size:11px;color:var(--gold);margin-bottom:14px;
}
.floormap-header h2{
  font-family:var(--serif-display);font-weight:500;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:.2em;line-height:1.6;
  color:var(--mute);margin:0 0 18px;
}
.floormap-header .caption{
  font-family:var(--en-body);font-style:italic;
  font-size:13px;letter-spacing:.05em;color:var(--gold-hi);
  opacity:.82;
}
.floormap-header .rule{
  width:40px;height:.5px;background:var(--gold);opacity:.6;margin-top:22px;
}

.floormap{
  position:relative;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(184,147,90,.04) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(15,25,35,0) 0%, rgba(15,25,35,.4) 100%);
  border:.5px solid rgba(184,147,90,.35);
  padding:clamp(24px,3vw,48px) clamp(16px,2.5vw,36px);
  border-radius:2px;
  box-shadow:
    inset 0 0 0 1px rgba(184,147,90,.08),
    0 30px 80px rgba(0,0,0,.45);
}
.floormap::before,
.floormap::after{
  content:"";position:absolute;width:22px;height:22px;
  border:.5px solid var(--gold);opacity:.7;
  pointer-events:none;
}
.floormap::before{top:10px;left:10px;border-right:none;border-bottom:none;}
.floormap::after{bottom:10px;right:10px;border-left:none;border-top:none;}
.floormap__corner-tr,
.floormap__corner-bl{
  position:absolute;width:22px;height:22px;
  border:.5px solid var(--gold);opacity:.7;pointer-events:none;
}
.floormap__corner-tr{top:10px;right:10px;border-left:none;border-bottom:none;}
.floormap__corner-bl{bottom:10px;left:10px;border-right:none;border-top:none;}

.floormap__svg{
  display:block;
  width:100%;
  height:auto;
  max-height:78vh;
  user-select:none;
  overflow:visible;
}

/* SVG text inherits via CSS */
.fm-label-jp{
  font-family:var(--serif-display);
  font-weight:500;
  fill:var(--mute);
  letter-spacing:.16em;
}
.fm-label-en{
  font-family:var(--en-body);
  font-style:italic;
  font-weight:400;
  fill:var(--gold);
  letter-spacing:.02em;
}
.fm-facility-jp{
  font-family:var(--serif);
  font-weight:400;
  fill:rgba(232,226,212,.72);
  letter-spacing:.18em;
}
.fm-facility-en{
  font-family:var(--en-serif);
  fill:rgba(216,184,122,.7);
  letter-spacing:.32em;
  text-transform:uppercase;
}

.fm-watermark-jp{
  font-family:var(--serif-display);
  font-weight:400;
  fill:var(--mute);
  opacity:.10;
  letter-spacing:.4em;
}


/* Room (clickable) */
.fm-room{cursor:pointer;transition:filter .35s var(--ease,ease);}
.fm-room__face{
  fill:var(--mute);
  fill-opacity:.06;
  stroke:var(--gold);
  stroke-width:.8;
  vector-effect:non-scaling-stroke;
  transition:fill-opacity .35s, stroke .35s, stroke-width .35s;
}
.fm-room:hover .fm-room__face{
  fill:var(--gold-hi);
  fill-opacity:.18;
  stroke:var(--gold-hi);
  stroke-width:1.2;
}
.fm-room:hover .fm-label-jp{fill:var(--gold-hi);}
.fm-room:hover .fm-label-en{fill:var(--gold-hi);}
.fm-room:focus-visible{outline:none;}
.fm-room:focus-visible .fm-room__face{
  fill:var(--gold-hi);fill-opacity:.22;stroke:var(--gold-hi);stroke-width:1.4;
}

/* Facility (non-clickable label area) */
.fm-facility__shape{
  fill:var(--mute);
  fill-opacity:.03;
  stroke:rgba(184,147,90,.55);
  stroke-width:.6;
  stroke-dasharray:0;
  vector-effect:non-scaling-stroke;
}

/* Pond / garden layers */
.fm-pond{
  fill:var(--moss);
  fill-opacity:.26;
  stroke:rgba(184,147,90,.45);
  stroke-width:.5;
  vector-effect:non-scaling-stroke;
}
.fm-pond-overlay{fill:url(#fm-ripple);opacity:.5;}
.fm-ripple{
  fill:none;stroke:var(--gold);stroke-width:.6;
  vector-effect:non-scaling-stroke;
  opacity:.35;
}

/* Corridor (廊下) — subtle walking path */


/* Zones transposed from Jisaku_floor.jpg (dark / light gray) */
.fm-zone-dark{
  fill:rgba(232,226,212,.16);
  stroke:rgba(184,147,90,.35);
  stroke-width:.4;
  vector-effect:non-scaling-stroke;
}
.fm-zone-light{
  fill:rgba(232,226,212,.34);
  stroke:rgba(184,147,90,.3);
  stroke-width:.4;
  vector-effect:non-scaling-stroke;
}
/* Central passage: no stroke, so the pond/Ran edge reads as a single continuous water surface */
.fm-zone-passage{
  stroke:none;
}
/* Central garden-trees zone (green foliage between the two ponds) */
.fm-zone-trees{
  fill:rgba(47,107,56,.30);
  stroke:rgba(47,107,56,.45);
  stroke-width:.5;
  vector-effect:non-scaling-stroke;
}
.fm-zone-trees-overlay{
  fill:url(#fm-foliage);
  stroke:none;
  opacity:.9;
}
.fm-trees-label{
  font-family:var(--serif);
  fill:rgba(232,239,228,.78);
  letter-spacing:.4em;
  font-size:9px;
  writing-mode:vertical-rl;
}
/* Unbordered white = corridor (廊下). Base floor tint inside property. */
.fm-floor-base{
  fill:rgba(244,239,230,.06);
  stroke:none;
}
.fm-corridor-tag{
  font-family:var(--en-serif);
  fill:rgba(232,226,212,.42);
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:7px;
}
.fm-corridor-label{
  font-family:var(--serif);
  fill:rgba(232,226,212,.55);
  letter-spacing:.4em;
  font-size:9px;
  writing-mode:vertical-rl;
}

/* Icons (line art) */


/* Arrows / flow */

.fm-arrow-line{
  stroke:var(--gold-hi);
  stroke-width:.8;
  fill:none;
  vector-effect:non-scaling-stroke;
}

/* River waves (north edge) */


/* Stairs icon (step pattern left of "To the 2nd floor") */
.fm-stairs{
  vector-effect:non-scaling-stroke;
  opacity:.8;
}

/* Front entrance — torii-style gateway */
.fm-front-entrance .fm-entrance-gate{
  fill:none;
  stroke:var(--gold-hi);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:.92;
}
.fm-front-entrance .fm-entrance-threshold{
  stroke:var(--gold);
  stroke-width:.9;
  opacity:.6;
  vector-effect:non-scaling-stroke;
}

/* Frame and scale */
.fm-frame-line{
  fill:none;
  stroke:var(--gold);
  stroke-width:.5;
  opacity:.45;
  vector-effect:non-scaling-stroke;
}


/* ---------- Legend ---------- */
.floormap-legend{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px 28px;
  padding:24px clamp(16px,2vw,28px);
  border-top:.5px solid rgba(184,147,90,.35);
  border-bottom:.5px solid rgba(184,147,90,.35);
}
.floormap-legend__item{
  display:flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.14em;color:rgba(232,226,212,.75);
}
.floormap-legend__swatch{
  display:inline-block;width:22px;height:14px;flex-shrink:0;
  border:.5px solid var(--gold);
}
.floormap-legend__swatch.is-room{background:rgba(232,226,212,.06);}
.floormap-legend__swatch.is-pond{background:rgba(47,59,45,.45);border-color:rgba(184,147,90,.55);}
.floormap-legend__swatch.is-corridor{background:rgba(244,239,230,.06);border-color:rgba(184,147,90,.55);}
.floormap-legend__swatch.is-interactive{background:rgba(216,184,122,.2);border-color:var(--gold-hi);}
.floormap-legend__item .en{
  display:block;
  font-family:var(--en-serif);font-size:9px;letter-spacing:.28em;
  color:var(--gold);opacity:.75;margin-top:3px;
}

/* ---------- Floor label divider (1F / 2F) ---------- */
.floormap-floorlabel{
  display:flex;align-items:center;justify-content:center;gap:22px;
  margin:56px auto 28px;
  max-width:640px;
  padding:0 clamp(16px,2vw,28px);
}
.floormap-floorlabel::before,
.floormap-floorlabel::after{
  content:"";flex:1;height:.5px;
  background:linear-gradient(90deg,transparent,rgba(184,147,90,.55),transparent);
}
.floormap-floorlabel .fl-kanji{
  font-family:var(--serif-display);font-weight:500;
  font-size:22px;letter-spacing:.05em;color:var(--mute);
}
.floormap-floorlabel .fl-en{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);
}

/* 2F terrace — outdoor balcony tint */
.fm-terrace{
  fill:rgba(152,180,200,.14);
  stroke:rgba(184,147,90,.45);
  stroke-width:.5;
  vector-effect:non-scaling-stroke;
}

/* Subtle partition line within a shared room (e.g. 松 | 竹) */
.fm-room-split{
  stroke:var(--gold);
  stroke-width:.4;
  opacity:.35;
  stroke-dasharray:2 3;
  vector-effect:non-scaling-stroke;
}

/* ---------- Rooms list (anchor targets) ---------- */
.rooms-list{
  padding:clamp(72px,10vh,120px) 0;
  max-width:1160px;margin:0 auto;
  padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px);
}
.rooms-list__head{text-align:center;margin-bottom:56px;}
.rooms-list__head .en{
  font-family:var(--en-serif);letter-spacing:.4em;text-transform:uppercase;
  font-size:11px;color:var(--gold);margin-bottom:16px;display:block;
}
.rooms-list__head h2{
  font-family:var(--serif-display);font-weight:500;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:.2em;line-height:1.6;
  color:var(--mute);margin:0;
}
.rooms-list__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}
.rooms-list__divider{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:center;gap:22px;
  margin:18px 0 6px;
}
.rooms-list__divider::before,
.rooms-list__divider::after{
  content:"";flex:1;max-width:140px;height:.5px;
  background:linear-gradient(90deg,transparent,rgba(184,147,90,.55),transparent);
}
.rooms-list__divider .jp{
  font-family:var(--serif-display);font-weight:500;
  font-size:16px;letter-spacing:.08em;color:var(--mute);
}
.rooms-list__divider .en{
  font-family:var(--en-serif);
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);
}
.room-card{
  border:.5px solid rgba(184,147,90,.3);
  background:rgba(232,226,212,.02);
  transition:border-color .35s, background .35s;
  scroll-margin-top:140px;
  overflow:hidden;
}
.room-card:target,
.room-card:hover{
  border-color:var(--gold-hi);
  background:rgba(216,184,122,.04);
}
.room-card__img{
  width:100%;height:200px;object-fit:cover;
  display:block;
  filter:brightness(.92) contrast(1.04);
  transition:transform .6s var(--ease), filter .4s;
}
.room-card:hover .room-card__img{
  transform:scale(1.03);
  filter:brightness(1) contrast(1.02);
}
.room-card__body{padding:24px 24px 28px;}
.room-card__jp{
  font-family:var(--serif-display);font-weight:500;
  font-size:22px;letter-spacing:.22em;color:var(--mute);
  margin:0 0 6px;
}
.room-card__en{
  font-family:var(--en-body);font-style:italic;font-weight:400;
  font-size:13px;letter-spacing:.04em;color:var(--gold);
  margin:0 0 14px;
}
.room-card__rule{
  width:28px;height:.5px;background:var(--gold);opacity:.55;margin-bottom:14px;
}
.room-card__meta{
  font-family:var(--serif);font-size:12px;letter-spacing:.12em;
  color:rgba(232,226,212,.7);line-height:1.9;
}
.room-card__specs{
  display:flex;flex-wrap:wrap;gap:6px 16px;
  margin-top:12px;
  font-size:11px;letter-spacing:.08em;
  color:rgba(232,226,212,.6);
}
.room-card__specs dt{color:var(--gold);font-family:var(--en-serif);font-size:9px;letter-spacing:.2em;text-transform:uppercase;}
.room-card__specs dd{margin:0 0 4px;}
.room-card__btn{
  display:inline-flex;align-items:center;gap:18px;
  margin-top:18px;
  padding:0 0 8px;
  border:none;border-bottom:.5px solid rgba(232,226,212,.8);
  background:transparent;
  font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.3em;
  color:var(--mute);
  cursor:pointer;
  transition:letter-spacing .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.room-card__btn:hover{
  letter-spacing:.34em;color:var(--gold-hi);border-color:var(--gold-hi);
  background:none;
}
.room-card__btn .arrow{
  display:inline-block;width:22px;height:.5px;background:currentColor;
  position:relative;
  transition:width .4s var(--ease);
}
.room-card__btn .arrow::after{display:none;}
.room-card__btn:hover .arrow{width:32px;}

/* ---------- Hashtag tags ---------- */
.room-modal__tag{
  padding:5px 14px;
  border:.5px solid rgba(184,147,90,.35);
  font-size:11px;letter-spacing:.1em;
  color:rgba(232,226,212,.7);
}
.room-modal__tag::before{content:"#";color:var(--gold);margin-right:2px;}

/* ---------- Room filter ---------- */
.rooms-filter{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-bottom:40px;
}
.rooms-filter__tag{
  padding:6px 16px;
  border:.5px solid rgba(184,147,90,.3);
  background:transparent;
  font-family:var(--serif);font-size:11px;letter-spacing:.12em;
  color:rgba(232,226,212,.6);
  cursor:pointer;
  transition:all .3s;
}
.rooms-filter__tag::before{content:"#";color:var(--gold);margin-right:2px;}
.rooms-filter__tag:hover,
.rooms-filter__tag.is-active{
  border-color:var(--gold-hi);
  color:var(--mute);
  background:rgba(216,184,122,.1);
}
.rooms-filter__tag.is-active{
  background:rgba(216,184,122,.15);
  color:var(--gold-hi);
}
.room-card.is-hidden{display:none;}

/* ---------- Room detail modal ---------- */
.room-modal-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(10,16,22,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
  padding:24px;
}
.room-modal-overlay.is-open{opacity:1;pointer-events:auto;}
.room-modal{
  position:relative;
  width:100%;max-width:860px;max-height:88vh;
  background:var(--ink);
  border:.5px solid rgba(184,147,90,.4);
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateY(24px);
  transition:transform .45s var(--ease);
}
.room-modal-overlay.is-open .room-modal{transform:translateY(0);}
.room-modal__close{
  position:absolute;top:0;right:0;z-index:5;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,17,22,.7);
  border:none;cursor:pointer;
  color:var(--mute);font-size:22px;
  transition:color .3s;
}
.room-modal__close:hover{color:var(--gold-hi);}
.room-modal__hero{
  width:100%;height:320px;object-fit:cover;display:block;
  filter:brightness(.88) contrast(1.05);
}

/* ── Modal carousel ── */
.room-carousel{position:relative;}
.room-carousel__viewport{overflow:hidden;}
.room-carousel__track{
  display:flex;
  transition:transform .6s var(--ease);
  will-change:transform;
}
.room-carousel__slide{flex:0 0 100%;min-width:0;}
.room-carousel__img{
  width:100%;height:320px;object-fit:cover;display:block;
  filter:brightness(.88) contrast(1.05);
}
.room-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,17,22,.55);
  border:.5px solid rgba(184,147,90,.45);
  cursor:pointer;
  transition:background .3s, border-color .3s;
}
.room-carousel__nav:hover{background:rgba(14,17,22,.85);border-color:var(--gold-hi);}
.room-carousel__nav--prev{left:14px;}
.room-carousel__nav--next{right:14px;}
.room-carousel__nav::before{
  content:"";width:11px;height:11px;
  border-top:1.5px solid var(--gold-hi);
  border-right:1.5px solid var(--gold-hi);
}
.room-carousel__nav--prev::before{transform:rotate(-135deg);margin-left:4px;}
.room-carousel__nav--next::before{transform:rotate(45deg);margin-right:4px;}
.room-carousel__dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:2;
  display:flex;justify-content:center;gap:9px;
}
.room-carousel__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(232,226,212,.35);
  border:.5px solid rgba(232,226,212,.5);
  cursor:pointer;padding:0;
  transition:background .3s, transform .3s;
}
.room-carousel__dot.is-active{background:var(--gold-hi);border-color:var(--gold-hi);transform:scale(1.15);}
.room-carousel.is-single .room-carousel__nav,
.room-carousel.is-single .room-carousel__dots{display:none;}

.room-modal__content{padding:40px clamp(24px,4vw,48px) 48px;}
.room-modal__title{
  font-family:var(--serif-display);font-weight:500;
  font-size:clamp(26px,3vw,36px);letter-spacing:.22em;
  color:var(--mute);margin:0 0 4px;
}
.room-modal__title-en{
  font-family:var(--en-body);font-style:italic;font-weight:400;
  font-size:14px;letter-spacing:.06em;color:var(--gold);
  margin:0 0 20px;
}
.room-modal__rule{width:40px;height:.5px;background:var(--gold);opacity:.6;margin-bottom:28px;}
.room-modal__desc{
  font-size:14px;line-height:2.1;letter-spacing:.12em;
  color:rgba(232,226,212,.82);
  margin-bottom:32px;
}
.room-modal__floorplan{
  margin-bottom:32px;
  padding:28px 24px 20px;
  border:.5px solid rgba(184,147,90,.25);
  background:rgba(232,226,212,.02);
  text-align:center;
}
.room-modal__floorplan-label{
  font-family:var(--en-serif);font-size:9px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;display:block;
}
.room-modal__floorplan svg{
  display:block;margin:0 auto;
  max-width:420px;width:100%;height:auto;
}
.room-modal__floorplan-note{
  font-size:10px;letter-spacing:.1em;color:rgba(232,226,212,.45);
  margin-top:12px;
}
.room-modal__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;
  padding:24px 0;
  border-top:.5px solid rgba(184,147,90,.25);
  border-bottom:.5px solid rgba(184,147,90,.25);
}
.room-modal__grid-item{display:flex;flex-direction:column;gap:2px;}
.room-modal__grid-label{
  font-family:var(--en-serif);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);
}
.room-modal__grid-value{
  font-family:var(--serif);font-size:13px;letter-spacing:.12em;
  color:rgba(232,226,212,.8);
}
.room-modal__features{
  margin-top:28px;
  display:flex;flex-wrap:wrap;gap:10px;
}
@media(max-width:600px){
  .room-modal__hero,
  .room-carousel__img{height:220px;}
  .room-carousel__nav{width:38px;height:38px;}
  .room-modal__grid{grid-template-columns:1fr;}
  .room-modal__content{padding:28px 20px 36px;}
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .op-hero__inner{flex-direction:column;align-items:flex-start;gap:28px;}
  .op-hero__kanji{padding-left:0;padding-top:24px;writing-mode:horizontal-tb;font-size:clamp(56px,10vw,96px);}
  .op-hero__kanji::before{left:0;top:0;right:0;bottom:auto;height:.5px;width:60px;}
  .op-hero__kanji .tag{margin-top:14px;font-size:12px;}
  .floormap{padding:16px 12px;}
  .floormap__svg{max-height:none;}
}
@media (max-width:720px){
  .op-main{padding-top:96px;}
  .op-hero__inner{padding:0 24px clamp(40px,6vh,64px);}
  .op-hero__title{font-size:clamp(20px,5vw,26px);letter-spacing:.2em;}
  .op-hero__lead{font-size:13px;line-height:1.95;letter-spacing:.1em;}
  .floormap-wrap{padding:0 10px;}
  .floormap-scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .floormap-scroller > .floormap__svg{min-width:920px;}
  .floormap-scroller::after{
    content:"←  横にスクロール  →";
    display:block;text-align:center;
    font-family:var(--en-serif);font-size:9px;letter-spacing:.3em;
    color:var(--gold);opacity:.6;
    margin-top:8px;
  }
}

/* ============================================================
   SCENERY GALLERY (庭園と四季の景観)
   ============================================================ */
.scenery{
  padding:clamp(72px,10vh,120px) 0 clamp(80px,11vh,130px);
  max-width:1160px;margin:0 auto;
  padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px);
}
.scenery__head{text-align:center;margin-bottom:clamp(40px,5vw,60px);}
.scenery__head .en{
  font-family:var(--en-serif);letter-spacing:.4em;text-transform:uppercase;
  font-size:11px;color:var(--gold);margin-bottom:16px;display:block;
}
.scenery__head h2{
  font-family:var(--serif-display);font-weight:500;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:.2em;line-height:1.6;
  color:var(--mute);margin:0;
}
.scenery__lead{
  margin:22px auto 0;max-width:34em;
  font-family:var(--serif);font-weight:300;
  font-size:13.5px;letter-spacing:.08em;line-height:2;
  color:rgba(232,226,212,.7);
}

.scenery__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,17vw,210px);
  grid-auto-flow:dense;
  gap:14px;
}
.scenery__item{
  position:relative;
  overflow:hidden;
  border:.5px solid rgba(184,147,90,.3);
  background:rgba(232,226,212,.02);
  margin:0;
  transition:border-color .35s var(--ease);
}
.scenery__item--feature{grid-column:span 2;grid-row:span 2;}
.scenery__item--wide{grid-column:span 2;}
.scenery__item .u-clip{width:100%;height:100%;}
.scenery__img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.86) contrast(1.04);
  transition:transform .7s var(--ease), filter .5s;
}
.scenery__item:hover{border-color:rgba(184,147,90,.6);}
.scenery__item:hover .scenery__img{
  transform:scale(1.05);
  filter:brightness(1) contrast(1.02);
}
/* gradient veil + caption */
.scenery__item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(15,24,39,.78) 0%,rgba(15,24,39,.18) 40%,transparent 70%);
  opacity:.85;transition:opacity .45s var(--ease);
}
.scenery__item:hover::after{opacity:1;}
.scenery__cap{
  position:absolute;left:0;bottom:0;z-index:2;
  width:100%;
  padding:clamp(14px,1.4vw,20px) clamp(16px,1.6vw,24px);
  display:flex;flex-direction:column;gap:5px;
  transform:translateY(6px);opacity:.92;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.scenery__item:hover .scenery__cap{transform:translateY(0);opacity:1;}
.scenery__cap .jp{
  font-family:var(--serif-display);font-weight:500;
  font-size:clamp(14px,1.2vw,16px);letter-spacing:.1em;
  color:var(--mute);
}
.scenery__cap .en{
  font-family:var(--en-serif);font-style:italic;
  font-size:11px;letter-spacing:.18em;color:var(--gold-hi);
}
.scenery__item--feature .scenery__cap .jp{font-size:clamp(15px,1.5vw,19px);}

@media (max-width:860px){
  .scenery__grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:clamp(150px,38vw,220px);
  }
  .scenery__item--feature{grid-column:span 2;grid-row:span 1;}
  .scenery__item--wide{grid-column:span 2;}
}
@media (max-width:520px){
  .scenery__grid{grid-template-columns:1fr;grid-auto-rows:clamp(200px,56vw,260px);gap:12px;}
  .scenery__item--feature,
  .scenery__item--wide{grid-column:span 1;}
}