/* ============================================================
   THE BASE SAPPORO SUSUKINO — One Page Site
   Concept: しずけさを、わが家に。(BASE × PLACE)
   生成りのベース ＋ 深緑のアクセント
   テーマ色はこの直下の :root だけで切り替わります
   ============================================================ */
:root{
  /* ---- C案パレット（提案サイト base-oku.html と同一値） ----
     生成り --kinari / 墨 --sumi / 深緑 --midori / 金茶 --kin        */
  --paper:#f3efe6;        /* 生成り     ← --kinari      */
  --paper-soft:#eae4d6;   /* 生成り 濃   ← --kinari-deep */
  --ink:#33302a;          /* 墨         ← --sumi        */
  --ink-soft:#5c564d;     /* 墨 うすめ   ← --sumi-soft   */
  --wood:#43604f;         /* 深緑       ← --midori      */
  --wood-deep:#35503f;    /* 深緑 濃     ← --midori-deep */
  --wood-light:#a98f5f;   /* 金茶       ← --kin         */
  --mist:#8c877c;         /* 補助文字（墨系のニュートラルグレー） */
  --line:rgba(51,48,42,.18);   /* 罫線 ← --line（墨18%） */
  --shade:30,28,24;            /* 画像オーバーレイの影色（rgb） */
  --head:rgba(53,80,63,.92);   /* 固定ヘッダー / スマホメニュー ← 深緑濃 */
  --serif:'Shippori Mincho B1','Hiragino Mincho ProN',serif;
  --latin:'Cormorant Garamond',serif;
  --sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-weight:300;
  line-height:2;
  letter-spacing:.06em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul{list-style:none}

::selection{background:var(--wood);color:var(--paper)}

/* ---------- grain overlay ---------- */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.35;
  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='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:10000;background:var(--wood-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  transition:opacity 1s var(--ease),visibility 1s;
}
#loader.done{opacity:0;visibility:hidden}
#loader .l-mark{
  font-family:var(--latin);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.42em;color:var(--paper);
  animation:fadeUp 1.4s var(--ease) both .2s;
}
#loader .l-sub{
  font-family:var(--serif);font-size:.78rem;letter-spacing:.34em;color:var(--wood-light);
  animation:fadeUp 1.4s var(--ease) both .55s;
}
#loader .l-line{
  width:1px;height:56px;background:linear-gradient(to bottom,var(--wood-light),transparent);
  animation:growDown 1.2s var(--ease) both .8s;transform-origin:top;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes growDown{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem clamp(1.4rem,4vw,3.4rem);
  transition:background .6s,box-shadow .6s,padding .6s;
  mix-blend-mode:difference;color:#fff;
}
header.solid{mix-blend-mode:normal;background:var(--head);backdrop-filter:blur(14px);color:var(--paper);padding:1rem clamp(1.4rem,4vw,3.4rem)}
.logo{display:flex;flex-direction:column;line-height:1.3}
.logo .en{font-family:var(--latin);font-size:1.12rem;letter-spacing:.3em;font-weight:500}
.logo .ja{font-size:.58rem;letter-spacing:.42em;color:currentColor;opacity:.65}
nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.2rem)}
nav a.nav-link{font-family:var(--latin);font-size:.8rem;letter-spacing:.26em;position:relative;padding:.3em 0}
nav a.nav-link::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
nav a.nav-link:hover::after{transform:scaleX(1);transform-origin:left}
.lang-switch{display:flex;gap:.55em;font-family:var(--latin);font-size:.78rem;letter-spacing:.14em;align-items:center}
.lang-switch a,.lang-switch .cur{opacity:.42;padding:.2em .1em;letter-spacing:inherit;transition:opacity .3s}
.lang-switch a:hover{opacity:.85}
.lang-switch .cur{opacity:1;border-bottom:1px solid currentColor}
.lang-switch .sep{opacity:.3}
.btn-reserve{
  font-family:var(--latin);font-size:.8rem;letter-spacing:.26em;
  border:1px solid currentColor;padding:.66em 1.5em;border-radius:100px;
  transition:background .45s var(--ease),color .45s var(--ease);
}
header.solid .btn-reserve:hover{background:var(--paper);color:var(--ink)}
header:not(.solid) .btn-reserve:hover{background:#fff;color:var(--ink)}
/* hamburger (mobile only) */
#menu-btn{
  display:none;width:36px;height:36px;padding:0;border:none;background:none;color:inherit;
  cursor:pointer;position:relative;flex-shrink:0;
}
#menu-btn span{position:absolute;left:7px;right:7px;height:1px;background:currentColor;transition:transform .45s var(--ease),opacity .3s}
#menu-btn span:nth-child(1){top:13px}
#menu-btn span:nth-child(2){top:18px}
#menu-btn span:nth-child(3){top:23px}
body.menu-open #menu-btn span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open #menu-btn span:nth-child(2){opacity:0}
body.menu-open #menu-btn span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* mobile drawer — sits under the header so the close button stays tappable */
#drawer{
  position:fixed;inset:0;z-index:900;background:var(--head);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.55rem;
  padding:6rem 2rem 3.4rem;opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s;
}
body.menu-open{overflow:hidden}
body.menu-open #drawer{opacity:1;visibility:visible}
#drawer a{
  font-family:var(--latin);font-size:1.05rem;letter-spacing:.34em;color:var(--paper);
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
body.menu-open #drawer a{opacity:.82;transform:none;transition-delay:calc(.14s + var(--i)*.055s)}
#drawer a.d-reserve{
  margin-top:.9rem;border:1px solid rgba(243,239,230,.5);border-radius:100px;
  padding:.85em 2.6em;font-size:.9rem;
}
body.menu-open #drawer a.d-reserve{opacity:1}

/* ---------- hero ---------- */
#hero{position:relative;height:100svh;min-height:640px;background:var(--ink);overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity 2.6s var(--ease)}
.hero-slide.on{opacity:1;animation:kenburns 9s linear both}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--shade),.36),rgba(var(--shade),.20) 45%,rgba(var(--shade),.58))}
.hero-copy{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  color:var(--paper);text-align:center;flex-direction:column;gap:2.2rem;padding:0 1.4rem;
}
/* コピーの背後だけを落とすスクリム。写真の四隅は明るいまま残る */
.hero-copy::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 44% 60% at 50% 49%,
    rgba(var(--shade),.60) 0%,
    rgba(var(--shade),.46) 40%,
    rgba(var(--shade),.20) 72%,
    rgba(var(--shade),0) 100%);
}
.hero-tate{
  font-family:var(--serif);font-weight:500;
  display:flex;flex-direction:row-reverse;gap:1.2em;
  font-size:clamp(2rem,5.2vw,3.6rem);
  text-shadow:0 1px 2px rgba(var(--shade),.55),0 2px 20px rgba(var(--shade),.62);
}
.hero-tate .line{display:flex;flex-direction:column;align-items:center;gap:.3em}
.hero-tate .line i{font-style:normal;line-height:1;display:block;opacity:0;transform:translateY(14px);animation:charIn 1.1s var(--ease) forwards;animation-delay:calc(1.6s + var(--d)*.09s)}
.hero-tate .line .pn{transform:translate(.3em,-.28em);margin-bottom:-.5em}
.hero-tate .line i.pn{animation-name:charInPn}
@keyframes charIn{to{opacity:1;transform:none}}
@keyframes charInPn{to{opacity:1;transform:translate(.3em,-.28em)}}
/* 写真の上に載るアクセント文字。深緑＋生成りのハイライトで浮かせる */
.hero-tate .accent,.night-copy h3 .accent{
  color:var(--wood);
  text-shadow:
    0 0 .04em var(--paper),0 0 .04em var(--paper),
    0 0 .12em var(--paper),0 0 .26em rgba(243,239,230,.9),
    0 0 .55em rgba(243,239,230,.4);
}
.hero-sub{font-family:var(--latin);font-size:clamp(.72rem,1.4vw,.9rem);letter-spacing:.5em;opacity:.95;text-shadow:0 1px 3px rgba(var(--shade),.8),0 2px 16px rgba(var(--shade),.75)}
.hero-fact{
  position:absolute;left:clamp(1.4rem,4vw,3.4rem);bottom:2.6rem;z-index:6;color:var(--paper);
  display:flex;gap:2.2rem;font-family:var(--latin);
  text-shadow:0 1px 3px rgba(var(--shade),.82),0 2px 14px rgba(var(--shade),.78);
}
.hero-fact div{display:flex;flex-direction:column;gap:.1em}
.hero-fact .n{font-size:1.35rem;letter-spacing:.12em}
.hero-fact .t{font-size:.58rem;letter-spacing:.3em;opacity:.8;font-family:var(--sans)}
.hero-scroll{
  position:absolute;right:clamp(1.6rem,4vw,3.6rem);bottom:0;z-index:6;color:var(--paper);
  font-family:var(--latin);font-size:.66rem;letter-spacing:.4em;writing-mode:vertical-rl;
  display:flex;align-items:center;gap:.9em;height:150px;
  text-shadow:0 1px 3px rgba(var(--shade),.8),0 2px 14px rgba(var(--shade),.75);
}
.hero-scroll::after{content:'';width:1px;flex:1;background:linear-gradient(to bottom,rgba(243,239,230,.8),transparent);animation:scrollHint 2.2s var(--ease) infinite}
@keyframes scrollHint{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:2rem;z-index:6;display:flex;gap:.7em}
.hero-dots span{width:22px;height:1px;background:rgba(243,239,230,.35);transition:background .5s}
.hero-dots span.on{background:var(--paper)}

/* ---------- shared section bits ---------- */
section{position:relative}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.4rem,4.5vw,3.4rem)}
/* h2 だが見た目は据え置き（ブラウザ既定の bold / 1.5em を打ち消す） */
.sec-head{display:flex;align-items:baseline;gap:1.6rem;margin-bottom:clamp(2.6rem,6vw,4.4rem);font-weight:300;font-size:1rem}
.sec-head .en{font-family:var(--latin);font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:.14em;line-height:1}
.sec-head .ja{font-size:.72rem;letter-spacing:.4em;color:var(--wood);white-space:nowrap}
.sec-head::after{content:'';flex:1;height:1px;background:currentColor;opacity:.16}
.serif{font-family:var(--serif)}
/* 文節単位で折り返す（改行が語の途中で切れないように） */
.nw{display:inline-block;max-width:100%}

/* reveal animation */
.rv{opacity:0;transform:translateY(42px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-img{overflow:hidden}
.rv-img img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.rv-img.in img{transform:scale(1)}
@supports (animation-timeline: view()){
  .float-img{animation:floaty linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes floaty{from{transform:translateY(34px)}to{transform:translateY(-34px)}}
}

/* ---------- concept ---------- */
#concept{padding:clamp(6rem,12vw,10rem) 0 0}
.concept-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.4rem,5vw,4.5rem);align-items:center}
.concept-copy h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.16em;line-height:2.2;margin-bottom:2rem}
.concept-copy h2 .accent{color:var(--wood)}
.concept-copy p{font-size:.92rem;line-height:2.5;color:var(--ink-soft);margin-bottom:1.4em;max-width:34em}
.concept-tag{font-family:var(--latin);letter-spacing:.34em;font-size:.74rem;color:var(--wood);margin-bottom:2.2rem;display:flex;align-items:center;gap:1.2em}
.concept-tag::before{content:'';width:44px;height:1px;background:var(--wood)}
.concept-imgs{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:36px;gap:0}
.concept-imgs .ci-1{grid-column:1/10;grid-row:1/9}
.concept-imgs .ci-2{grid-column:7/13;grid-row:7/13;box-shadow:-18px -18px 0 var(--paper)}
.concept-imgs .ci-3{grid-column:2/7;grid-row:10/15;box-shadow:14px -14px 0 var(--paper)}

/* base x place strip */
.bxp{margin-top:clamp(5rem,10vw,8rem);background:var(--wood-deep);color:var(--paper);padding:clamp(4.5rem,9vw,7rem) 0;overflow:hidden;position:relative}
.bxp .marquee{
  white-space:nowrap;font-family:var(--latin);font-size:clamp(4rem,10vw,8rem);letter-spacing:.1em;
  opacity:.08;position:absolute;top:50%;translate:0 -50%;animation:marq 130s linear infinite;pointer-events:none;
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bxp-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.8rem;text-align:center;padding:0 1.4rem}
.bxp-inner .formula{font-family:var(--latin);letter-spacing:.3em;font-size:clamp(1rem,2.4vw,1.4rem);color:var(--wood-light)}
.bxp-inner h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,3.2vw,2.1rem);letter-spacing:.2em;line-height:2.1}
.bxp-inner p{font-size:.86rem;line-height:2.4;opacity:.72;max-width:38em}

/* ---------- numbers ---------- */
#numbers{padding:clamp(4.5rem,9vw,7rem) 0}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line)}
.num-cell{border-right:1px solid var(--line);padding:1.2rem clamp(1rem,2.4vw,2.2rem);display:flex;flex-direction:column;gap:.5rem}
.num-cell .label{font-size:.66rem;letter-spacing:.3em;color:var(--mist)}
.num-cell .value{font-family:var(--latin);font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.1;letter-spacing:.04em}
.num-cell .value .unit{font-family:var(--serif);font-size:.42em;letter-spacing:.1em;margin-left:.18em}
.num-cell .note{font-size:.68rem;letter-spacing:.16em;color:var(--ink-soft);opacity:.75}

/* ---------- rooms ---------- */
#rooms{background:var(--paper-soft);padding:clamp(6rem,12vw,10rem) 0}
.room{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:center;margin-bottom:clamp(5rem,10vw,8rem)}
.room:last-child{margin-bottom:0}
.room.alt .room-visual{order:2}
.room-visual{position:relative}
/* .rv-img の overflow:hidden が .room-no を切ってしまうため打ち消す（クリップは .room-main 側で行う） */
.room-visual.rv-img{overflow:visible}
.room-main{aspect-ratio:4/3;position:relative;overflow:hidden}
.room-main img{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.room-main img.on{opacity:1}
.room-no{
  position:absolute;top:-1.15em;left:-.06em;font-family:var(--latin);font-size:clamp(4.4rem,9vw,7rem);
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(51,48,42,.42);letter-spacing:.04em;z-index:3;pointer-events:none;
}
.room.alt .room-no{left:auto;right:-.06em}
.room-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.room-thumbs button{border:none;padding:0;cursor:pointer;aspect-ratio:4/3;overflow:hidden;background:none;position:relative;opacity:.55;transition:opacity .4s}
.room-thumbs button.on,.room-thumbs button:hover{opacity:1}
.room-thumbs button.on::after{content:'';position:absolute;inset:0;border:1px solid var(--wood)}
.room-info .cap{font-family:var(--latin);font-size:.76rem;letter-spacing:.34em;color:var(--wood);display:flex;align-items:center;gap:1.1em;margin-bottom:1.6rem}
.room-info .cap::before{content:'';width:38px;height:1px;background:var(--wood)}
.room-info h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:.18em;margin-bottom:1.6rem;line-height:1.9}
.room-info p{font-size:.9rem;line-height:2.4;color:var(--ink-soft);margin-bottom:2rem;max-width:32em}
.room-specs{display:flex;flex-wrap:wrap;gap:.6em .6em;margin-bottom:2.4rem}
.room-specs li{font-size:.7rem;letter-spacing:.14em;border:1px solid rgba(51,48,42,.30);border-radius:100px;padding:.42em 1.15em;color:var(--ink-soft)}
.link-line{font-family:var(--latin);font-size:.8rem;letter-spacing:.3em;display:inline-flex;align-items:center;gap:1em;position:relative;padding-bottom:.5em}
.link-line::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--ink);transition:transform .5s var(--ease);transform-origin:right}
.link-line:hover::after{transform:scaleX(.4);transform-origin:left}
.link-line.link-ja{font-family:var(--sans);font-size:.86rem;letter-spacing:.16em}
.link-line .arrow{transition:transform .5s var(--ease)}
.link-line:hover .arrow{transform:translateX(8px)}

/* ---------- night (full bleed) ---------- */
#night{position:relative;height:min(88svh,760px);overflow:hidden;background:var(--ink)}
#night .bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center}
@supports (animation-timeline: view()){
  #night .bg{animation:parallax linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes parallax{from{transform:translateY(-5%)}to{transform:translateY(5%)}}
}
#night::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(var(--shade),.06),rgba(var(--shade),.62))}
.night-copy{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;color:var(--paper);text-align:center;padding:0 1.4rem}
.night-copy h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:.24em;line-height:2.1;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.night-copy .en{font-family:var(--latin);font-size:.78rem;letter-spacing:.5em;opacity:.8}

/* ---------- stay ---------- */
#stay{padding:clamp(6rem,12vw,10rem) 0}
.stay-lead{max-width:44em;font-size:.94rem;line-height:2.6;color:var(--ink-soft);margin-bottom:clamp(3rem,7vw,5rem)}
.stay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}
.stay-card{position:relative;overflow:hidden;cursor:default}
.stay-card .ph{aspect-ratio:3/3.6;overflow:hidden}
.stay-card .ph img{transition:transform 1.2s var(--ease)}
.stay-card:hover .ph img{transform:scale(1.06)}
.stay-card .txt{padding:1.15rem .2rem 0}
.stay-card .t-en{font-family:var(--latin);font-size:.68rem;letter-spacing:.3em;color:var(--wood);display:block;margin-bottom:.35em}
.stay-card .t-ja{font-family:var(--serif);font-size:.98rem;letter-spacing:.2em;display:block;margin-bottom:.4em}
.stay-card .t-note{font-size:.74rem;line-height:2;color:var(--mist);letter-spacing:.08em}
.stay-band{
  margin-top:clamp(4rem,8vw,6rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
  background:var(--ink);color:var(--paper);
}
.stay-band .ph{min-height:340px}
.stay-band .txt{padding:clamp(2.6rem,5vw,4.4rem);display:flex;flex-direction:column;justify-content:center;gap:1.3rem}
.stay-band .txt .cap{font-family:var(--latin);font-size:.72rem;letter-spacing:.34em;color:var(--wood-light)}
.stay-band .txt h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2.4vw,1.7rem);letter-spacing:.2em;line-height:2}
.stay-band .txt p{font-size:.86rem;line-height:2.4;opacity:.75;max-width:32em}
.stay-flow{display:flex;gap:0;margin-top:1.2rem;flex-wrap:wrap}
.stay-flow li{font-size:.7rem;letter-spacing:.12em;display:flex;align-items:center;opacity:.85}
.stay-flow li:not(:last-child)::after{content:'—';margin:0 .9em;color:var(--wood-light);opacity:.7}

/* ---------- gallery ---------- */
#gallery{padding:clamp(6rem,12vw,9rem) 0;overflow:hidden}
/* ビューポート：PC でもドラッグ・ホイール・スクロールバーで動かせる */
.gal-vp{
  overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  cursor:grab;padding-bottom:clamp(1.4rem,3vw,2.6rem);
}
.gal-vp::-webkit-scrollbar{display:none}
.gal-vp.grabbing{cursor:grabbing}
.gal-vp.grabbing figure{pointer-events:none}
.gal-track{display:flex;gap:clamp(.8rem,1.6vw,1.4rem);width:max-content;padding:0 clamp(1.4rem,4.5vw,3.4rem)}
.gal-track figure{width:clamp(240px,30vw,420px);aspect-ratio:3/2;overflow:hidden;flex-shrink:0}
.gal-track figure:nth-child(even){translate:0 clamp(1.4rem,3vw,2.6rem)}
.gal-note{margin-top:clamp(4rem,7vw,5.4rem);text-align:center;font-family:var(--latin);letter-spacing:.4em;font-size:.7rem;color:var(--mist)}
.gal-note .sp-only{display:none}

/* ---------- access ---------- */
#access{background:var(--ink);color:var(--paper);padding:clamp(6rem,12vw,10rem) 0}
#access .sec-head .ja{color:var(--wood-light)}
.access-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.4rem,5vw,4.4rem);align-items:start}
.access-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.access-photos .a-1{grid-column:1/3;aspect-ratio:16/8.4;overflow:hidden}
.access-photos .a-2,.access-photos .a-3{aspect-ratio:4/3;overflow:hidden}
.access-info h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:.2em;line-height:2;margin-bottom:1.8rem}
.access-info h3 .accent{color:var(--wood-light)}
.access-list{display:flex;flex-direction:column}
.access-list li{display:grid;grid-template-columns:7.4em 1fr;gap:1.2em;padding:1.05em 0;border-bottom:1px solid rgba(243,239,230,.16);font-size:.84rem;line-height:1.9}
.access-list .k{font-size:.68rem;letter-spacing:.26em;color:var(--wood-light);padding-top:.35em}
.access-list .v{opacity:.88}
/* Google マップ埋め込み（アクセスの写真と差し替え） */
.access-map-embed{
  position:relative;aspect-ratio:4/3.4;overflow:hidden;
  background:var(--paper-soft);border:1px solid rgba(243,239,230,.16);
}
.access-map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.access-map{margin-top:1.8rem}
.access-map a{display:inline-flex}
.access-map .link-line::after{background:var(--paper)}

/* ---------- reserve ---------- */
#reserve{position:relative;padding:clamp(7rem,14vw,11rem) 0;overflow:hidden;background:var(--ink)}
#reserve .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.36}
#reserve::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,var(--ink),transparent 30%,transparent 70%,var(--ink))}
.reserve-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:2.2rem;text-align:center;color:var(--paper);padding:0 1.4rem}
.reserve-inner .cap{font-family:var(--latin);font-size:.74rem;letter-spacing:.5em;color:var(--wood-light)}
.reserve-inner h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:.22em;line-height:2.1}
.reserve-inner p{font-size:.86rem;line-height:2.4;opacity:.78;max-width:36em}
.btn-big{
  font-family:var(--latin);letter-spacing:.34em;font-size:.92rem;color:var(--paper);
  border:1px solid rgba(243,239,230,.55);padding:1.15em 3.6em;border-radius:100px;position:relative;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s;display:inline-flex;align-items:center;gap:1em;
}
.btn-big::before{content:'';position:absolute;inset:0;background:var(--paper);transform:translateY(102%);transition:transform .55s var(--ease);border-radius:inherit}
.btn-big:hover{color:var(--ink);border-color:var(--paper)}
.btn-big:hover::before{transform:none}
.btn-big span{position:relative;z-index:2}

/* ---------- footer ---------- */
footer{background:var(--wood-deep);color:var(--paper);padding:clamp(3.4rem,7vw,5rem) 0 2.2rem}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.8rem}
.foot-logo .en{font-family:var(--latin);font-size:1.3rem;letter-spacing:.3em;display:block}
.foot-logo .ja{font-size:.6rem;letter-spacing:.4em;opacity:.55;display:block;margin-top:.5em}
.foot-nav{display:flex;gap:1.8em;flex-wrap:wrap}
.foot-nav a{font-family:var(--latin);font-size:.72rem;letter-spacing:.26em;opacity:.66;transition:opacity .3s}
.foot-nav a:hover{opacity:1}
.foot-copy{font-size:.62rem;letter-spacing:.2em;opacity:.4;text-align:center;border-top:1px solid rgba(243,239,230,.16);padding-top:2rem;line-height:2.2}

/* ---------- language ---------- */
html.en .hero-tate{display:block;line-height:1.7;letter-spacing:.1em;font-size:clamp(1.7rem,4.2vw,3rem);text-align:center}
html.en body{letter-spacing:.02em}
html.en p[data-en],html.en .t-note[data-en],html.en .v[data-en]{line-height:2.1}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .stay-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  nav .nav-link{display:none}
  .btn-reserve{display:none}      /* → ドロワー内の RESERVE に集約 */
  #menu-btn{display:block}
  nav{gap:1rem}
  .concept-grid,.room,.access-grid,.stay-band{grid-template-columns:1fr}
  .room.alt .room-visual{order:0}
  .stay-grid{grid-template-columns:repeat(3,1fr)}
  .num-grid{grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
  .num-cell{border-bottom:1px solid var(--line);padding:1.4rem 1.2rem}
  .concept-imgs{margin-top:1.4rem}
  .hero-fact{display:none}
  .stay-band .ph{min-height:260px}
  .stay-band .txt{padding:2.4rem 1.6rem 3rem}
}
/* ギャラリー：スマホ／タブレットは JS ドリフトをやめて指でスワイプ */
@media (max-width:768px){
  .gal-vp{scroll-snap-type:x proximity;padding-bottom:0;cursor:auto}
  .gal-track{gap:.8rem;padding:0 1.4rem}
  .gal-track figure{width:76vw;scroll-snap-align:center}
  .gal-track figure:nth-child(even){translate:none}
  .gal-note{margin-top:2.8rem}
  .gal-note .pc-only{display:none}
  .gal-note .sp-only{display:inline}
}
@media (max-width:600px){
  body{letter-spacing:.04em}
  .logo .en{font-size:1rem;letter-spacing:.2em}
  .logo .ja{font-size:.5rem;letter-spacing:.18em}
  .lang-switch{font-size:.72rem}
  .hero-tate{font-size:1.9rem;gap:.95em}
  .hero-sub{font-size:.66rem;letter-spacing:.34em;line-height:1.9}
  .hero-scroll{display:none}
  .sec-head{flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:2.6rem}
  .sec-head .en{font-size:2.1rem}
  .sec-head .ja{white-space:normal;font-size:.64rem;letter-spacing:.2em}
  .concept-copy h2{font-size:1.32rem;letter-spacing:.06em;line-height:2.05;margin-bottom:1.6rem}
  .concept-copy p{font-size:.86rem;line-height:2.2}
  .concept-tag{font-size:.68rem;letter-spacing:.26em;margin-bottom:1.6rem}
  .bxp-inner{gap:1.3rem}
  .bxp-inner h3{font-size:1.24rem;letter-spacing:.08em;line-height:1.95}
  .bxp-inner p{font-size:.82rem;line-height:2.15}
  .num-cell .value{font-size:2.2rem}
  .room-info h3{font-size:1.24rem;letter-spacing:.06em;line-height:1.95;margin-bottom:1.2rem}
  .room-info p{font-size:.86rem;line-height:2.2;margin-bottom:1.6rem}
  .room-specs{margin-bottom:1.8rem}
  .room-thumbs{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
  .night-copy h3{font-size:1.3rem;letter-spacing:.1em;line-height:2}
  .night-copy .en{font-size:.68rem;letter-spacing:.34em}
  .stay-lead{font-size:.88rem;line-height:2.3}
  .stay-grid{grid-template-columns:1fr 1fr;gap:1.1rem .9rem}
  .stay-card .txt{padding:.9rem 0 0}
  .stay-card .t-ja{font-size:.9rem;letter-spacing:.12em}
  .stay-card .t-note{font-size:.7rem;line-height:1.95;letter-spacing:.04em}
  .stay-band .txt h3{font-size:1.18rem;letter-spacing:.08em;line-height:1.95}
  .stay-band .txt p{font-size:.82rem;line-height:2.15}
  .stay-flow{gap:.1rem 0}
  .stay-flow li:not(:last-child)::after{margin:0 .6em}
  .access-map-embed{aspect-ratio:1/1}
  .access-info h3{font-size:1.18rem;letter-spacing:.08em;line-height:1.95;margin-bottom:1.4rem}
  .access-list li{grid-template-columns:1fr;gap:.35em;padding:.95em 0;font-size:.82rem}
  .access-list .k{padding-top:0}
  .reserve-inner{gap:1.7rem}
  .reserve-inner h2{font-size:1.35rem;letter-spacing:.1em;line-height:2}
  .reserve-inner p{font-size:.82rem;line-height:2.15}
  .btn-big{font-size:.82rem;letter-spacing:.26em;padding:1.05em 2.2em}
  .foot-grid{flex-direction:column;align-items:flex-start;gap:1.6rem;margin-bottom:2rem}
  .foot-logo .en{font-size:1.15rem;letter-spacing:.24em}
  .foot-logo .ja{font-size:.5rem;letter-spacing:.2em}
  .foot-nav{gap:.2em 1.3em}
  .foot-nav a{font-size:.68rem;letter-spacing:.2em;padding:.55em 0}
  .foot-copy{font-size:.58rem;letter-spacing:.12em;line-height:2}
}
@media (max-width:380px){
  .logo .ja{font-size:.46rem;letter-spacing:.1em}
  .hero-tate{font-size:1.7rem}
  .sec-head .en{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
}