/* ============================================================
   AIMA Tokyo Kinshicho — Room Detail (HORIZONTAL scroll)
   paper / mincho theme, matches the main site
   ============================================================ */
:root{
  --bg:#efe9dd;--bg-alt:#e7e0d1;--bg-dark:#1c1a17;
  --ink:#1c1a17;--ink-soft:#6a6356;--line:#cdc4b2;
  --serif:'EB Garamond','Shippori Mincho',serif;
  --mincho:'Shippori Mincho','EB Garamond',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--mincho);font-weight:400;font-size:13px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}

.noise{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- header ---- */
.rd-header{position:fixed;top:0;left:0;width:100%;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:18px 32px;mix-blend-mode:difference}
.rd-header a{color:#fff}
.rd-header__logo{font-family:var(--serif);letter-spacing:.22em;font-size:.82rem;display:flex;gap:.7rem;align-items:center}
.rd-header__logo img{height:24px;width:auto;display:block;filter:invert(1)}
.rd-header__logo small{font-size:.56rem;letter-spacing:.3em;opacity:.85}
.rd-header__nav{display:flex;gap:1.6rem;font-family:var(--serif);font-size:.68rem;letter-spacing:.18em;align-items:center}
.rd-header__nav a{opacity:.85}.rd-header__nav a:hover,.rd-header__nav a.is-active{opacity:1}
.rd-header__reserve{border:1px solid #fff;padding:.5em 1.2em;letter-spacing:.2em}
.rd-header__lang{letter-spacing:.14em;opacity:.85}.rd-header__lang:hover{opacity:1}
@media(max-width:820px){.rd-header__nav a:not(.rd-header__reserve):not(.rd-header__lang){display:none}.rd-header{padding:14px 18px}}

/* ---- horizontal engine ---- */
.rd-viewport{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden}
.rd-track{display:flex;height:100%;will-change:transform}
.rd-spacer{width:1px}
.rd-panel{height:100vh;flex:0 0 auto;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--bg)}
.rd-progress{position:fixed;left:0;bottom:0;width:100%;height:2px;background:rgba(0,0,0,.08);z-index:90}
.rd-progress__fill{height:100%;width:0;background:var(--ink)}

.rd-label{font-family:var(--serif);font-size:.62rem;letter-spacing:.36em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.2rem}

/* reveal */
[data-rv]{opacity:0;transform:translateY(34px);filter:blur(3px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.rd-panel.in [data-rv]{opacity:1;transform:none;filter:blur(0)}

/* ===== 1. GALLERY panel ===== */
.rp-gallery{width:100vw;justify-content:center}
.rp-gallery__inner{display:flex;gap:4vw;align-items:center;width:90vw;max-width:1240px}
.rp-gallery__stage{flex:1 1 auto;min-width:0}
.rp-gallery__main{width:100%;aspect-ratio:3 / 2;max-height:72vh;overflow:hidden;background:var(--bg-alt);display:flex;align-items:center;justify-content:center}
/* #4 全体表示：切り取らずレターボックスで全景を見せる（シャワーヘッド等の見切れ防止） */
.rp-gallery__main img{width:100%;height:100%;object-fit:contain}
.rp-gallery__thumbs{display:flex;gap:6px;margin-top:10px}
.rp-gallery__thumb{flex:1;border:none;padding:0;cursor:pointer;opacity:.5;transition:opacity .3s;background:none;position:relative;overflow:hidden}
.rp-gallery__thumb.is-active,.rp-gallery__thumb:hover{opacity:1}
.rp-gallery__thumb.is-active::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--ink)}
.rp-gallery__thumb img{height:64px;object-fit:cover}
.rp-gallery__side{flex:0 0 260px}
.rp-gallery__name{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.3rem);letter-spacing:.05em;line-height:1.15;margin-bottom:.4rem}
.rp-gallery__name-jp{font-family:var(--mincho);font-size:.9rem;color:var(--ink-soft);letter-spacing:.08em;margin-bottom:1.4rem}
.rp-gallery__facts{border-top:1px solid var(--line)}
.rp-gallery__fact{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.8rem}
.rp-gallery__fact b{font-family:var(--serif);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.rp-gallery__hint{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.8rem;font-family:var(--serif);font-size:.6rem;letter-spacing:.3em;color:var(--ink-soft)}
.rp-gallery__hint .line{width:52px;height:1px;background:var(--line);position:relative;overflow:hidden}
.rp-gallery__hint .line::after{content:"";position:absolute;inset:0;background:var(--ink);animation:rdslide 2.4s ease-in-out infinite}
@keyframes rdslide{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ===== 2. ABOUT panel ===== */
.rp-about{width:100vw;justify-content:center}
.rp-about__in{width:88vw;max-width:760px;padding:0 4vw}
.rp-about__title{font-family:var(--mincho);font-weight:500;font-size:clamp(1.5rem,2.8vw,2.2rem);letter-spacing:.05em;line-height:1.3;margin-bottom:2rem}
.rp-about__desc{font-size:.9rem;line-height:2.3;color:#34302a}
.rp-about__desc p+p{margin-top:1.2rem}

/* ===== 3. PLAN + SPECS panel ===== */
.rp-plan{width:100vw;justify-content:center}
.rp-plan__inner{display:grid;grid-template-columns:1.15fr 1fr;gap:5vw;align-items:center;width:88vw;max-width:1180px}
.rp-plan__fig{background:#fff;border:1px solid var(--line);padding:1.6rem}
.rp-plan__fig img{width:100%;height:auto;object-fit:contain}
.rp-specs-table{width:100%;border-collapse:collapse}
.rp-specs-table th,.rp-specs-table td{padding:.95rem .8rem;border-bottom:1px solid var(--line);text-align:left;font-size:.82rem;line-height:1.6;letter-spacing:.04em}
.rp-specs-table th{width:38%;color:var(--ink-soft);font-weight:500;white-space:nowrap}

/* ===== 4. AMENITIES panel ===== */
.rp-amenities{width:100vw;justify-content:center}
.rp-amenities__inner{width:88vw;max-width:1080px}
.rp-amenities__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1.6rem}
.rp-amenities__item{display:flex;align-items:center;gap:.9rem;padding:1.4rem 1.6rem;background:#fff;border:1px solid var(--line);font-size:.82rem;letter-spacing:.04em;line-height:1.5}
.rp-amenities__item small{font-family:var(--serif);font-size:.66rem;color:var(--ink-soft);display:block;margin-top:.15rem}
.rp-amenities__icon{font-size:1.1rem;color:var(--ink-soft);flex-shrink:0}

/* ===== 5. CTA panel ===== */
.rp-cta{width:100vw;justify-content:center;text-align:center}
.rp-cta__inner{width:88vw;max-width:640px}
.rp-cta__title{font-family:var(--serif);font-weight:500;font-size:1.8rem;letter-spacing:.06em;margin-bottom:.5rem}
.rp-cta__sub{font-size:.78rem;color:var(--ink-soft);letter-spacing:.15em;margin-bottom:2.4rem}
.rp-cta__reserve{display:inline-block;padding:1rem 3.6rem;background:var(--ink);color:#fff;font-family:var(--serif);font-size:.78rem;letter-spacing:.2em;transition:opacity .3s}
.rp-cta__reserve:hover{opacity:.85}
.rp-cta__links{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1.6rem}
.rp-cta__back{font-size:.78rem;color:var(--ink-soft);letter-spacing:.08em}
.rp-cta__back:hover{color:var(--ink)}
.rp-cta__nav{display:flex;gap:2rem;margin-top:.3rem}
.rp-cta__brand{margin-top:3rem;font-family:var(--serif);font-size:1rem;letter-spacing:.18em;color:var(--ink-soft)}

/* ============================================================
   MOBILE — vertical stacking
   ============================================================ */
@media(max-width:820px){
  .rd-progress,.rd-spacer{display:none}
  body{font-size:15px}
  .rd-viewport{position:static;height:auto;overflow:visible}
  .rd-track{flex-direction:column;height:auto;transform:none!important;will-change:auto}
  .rd-panel{display:block;width:100%;height:auto;min-height:0;padding:12vh 0}

  .rp-gallery__inner{display:block;width:100%;padding:0 6vw}
  .rp-gallery__main{max-height:none}
  .rp-gallery__thumbs{margin-bottom:2rem}
  .rp-gallery__side{margin-top:0}
  .rp-gallery__hint{display:none}
  /* SP: 画像を左右スワイプで行き来できるカルーセル */
  .rp-gallery__swipe{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:1.4rem;margin-bottom:1.6rem}
  .rp-gallery__swipe::-webkit-scrollbar{height:3px}
  .rp-gallery__swipe::-webkit-scrollbar-thumb{background:var(--line)}
  .rp-gallery__slide{flex:0 0 90%;scroll-snap-align:center;aspect-ratio:3/2;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .rp-gallery__slide img{width:100%;height:100%;object-fit:contain}
  .rp-gallery__swipehint{font-family:var(--serif);font-size:.6rem;letter-spacing:.28em;color:var(--ink-soft);text-align:center;margin-bottom:1.4rem}

  .rp-about{width:100%;max-width:none;padding:0 7vw}

  .rp-plan__inner{display:block;width:100%;padding:0 7vw}
  .rp-plan__fig{margin-bottom:2.4rem}

  .rp-amenities__inner{width:100%;padding:0 7vw}
  .rp-amenities__grid{grid-template-columns:repeat(2,1fr)}

  .rp-cta__inner{width:100%;padding:0 7vw}
}
/*NAVDRAWER*/
.navtoggle{display:none}
.drawer{display:none}
@media(max-width:820px){
  .navtoggle{display:flex;position:fixed;top:15px;right:18px;z-index:210;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;background:none;border:0;padding:0;cursor:pointer;mix-blend-mode:difference}
  .navtoggle span{display:block;width:24px;height:1.5px;background:#fff;transition:transform .3s,opacity .3s}
  .navtoggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .navtoggle.is-open span:nth-child(2){opacity:0}
  .navtoggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .drawer{display:flex;position:fixed;inset:0;z-index:200;background:rgba(20,18,16,.97);opacity:0;visibility:hidden;transition:opacity .35s;align-items:center;justify-content:center}
  .drawer.is-open{opacity:1;visibility:visible}
  .drawer__inner{display:flex;flex-direction:column;align-items:center;gap:1.45rem;text-align:center;padding:2rem}
  .drawer__link{color:#fff;font-family:var(--serif);letter-spacing:.22em;font-size:1.2rem;text-decoration:none;opacity:.92}
  .drawer__langs{display:flex;gap:1.4rem;margin-top:.6rem}
  .drawer__lang{color:#fff;font-family:var(--serif);font-size:.95rem;letter-spacing:.12em;text-decoration:none;opacity:.85}
  .drawer__reserve{margin-top:.9rem;border:1px solid #fff;color:#fff;font-family:var(--serif);letter-spacing:.24em;font-size:.9rem;padding:.75em 2.4em;text-decoration:none}
  .topbar__nav,.hd__nav,.rd-header__nav{display:none!important}
  .topbar__right,.hd>.langsw{display:none!important}
}