@charset "utf-8";
/* =========================================================
   QOONELTAS - つながる CAMP RESORT くうねるたす
   PC 1920 / TB 768 / SP 393
   ========================================================= */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* 画面幅に比例して全体が拡大縮小する。1rem = 10px @1920。
   下限は 1200（PC の下端）で止め、上は青天井にして広い画面でも拡大を続ける */
html{background:var(--dark);   /* 端まで引っ張ったときの余白も深緑にしておく */
     font-size:calc(max(1200px,100vw) / 192);-webkit-text-size-adjust:100%;scroll-behavior:smooth;
     /* 縦スクロールバーの場所を最初から空けておく。ローディング中だけ
        バーが無い状態にすると、明けた瞬間に幅が変わって横スクロールが
        一瞬出る */
     scrollbar-gutter:stable}
body,h1,h2,h3,h4,h5,p,figure,dl,dd,ul,li{margin:0;padding:0}
ul{list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- lenis (smooth scroll) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- tokens ---------- */
:root{
  --dark:#06272a;
  --deep:#283739;
  --footerbg:#022326;
  --cafebg:#4b6772;
  --gold:#948966;
  --gold2:#978c65;
  --goldlt:#bbae82;
  --olive:#989d6d;
  --ink:#212121;
  --logoink:#2b383f;
  --orange:#ff7d20;

  --f-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-en:"Roboto","Helvetica Neue",Arial,sans-serif;
  --f-min:"Zen Old Mincho","Yu Mincho",serif;
  --f-dsp:"The Seasons","Cormorant Garamond","Times New Roman",serif;

  /* fluid page metrics (PC base 1920) */
  --edge:clamp(1.6rem,2.5vw,4.8rem);
  --pad:clamp(6.4rem,11.35vw,21.8rem);
  --innerW:min(148.4rem,calc(100% - 2 * var(--pad)));
  --innerHalf:calc(var(--innerW) / 2);
  --narrow:11.4555%;        /* 170 / 1484 */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.36' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

body{
  font-family:var(--f-jp);
  font-size:1.6rem;                /* html を vw 基準にしたので既定値を明示 */
  font-weight:400;
  color:#fff;
  background:#06272a;
  overflow-x:clip;
  line-height:1.6;
  /* macOS の既定（サブピクセル）は字面が太る。暗い地に明るい文字という
     構成では特に顕著で、Figma の見えより重くなる。グレースケールに揃える */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- shared bits ---------- */
.inner{width:var(--innerW);margin-inline:auto;position:relative}
.narrow{margin-left:var(--narrow)}

.sec__noise{
  position:absolute;inset:0;
  background-image:var(--noise);
  background-size:12rem 12rem;
  opacity:.08;
  pointer-events:none;
  z-index:1;
}

.vtxt{
  writing-mode:vertical-rl;
  font-family:var(--f-min);
  font-weight:400;
  line-height:1.4;
  letter-spacing:.4em;      /* Figma の行送り 1.4 ＝ 1 字送り 1.4em 相当 */
  text-align:center;
}
.vtxt--lg{font-size:4rem}

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed;left:0;right:0;top:0;
  z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:2.4rem;
  padding:4.8rem var(--edge) 0;
  transition:padding .35s;
}
.hdr::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:-1;
  height:var(--hdr-fade,10rem);
  background:linear-gradient(180deg,
    rgba(6,39,42,.88) 0%,
    rgba(6,39,42,.62) 38%,
    rgba(6,39,42,.28) 68%,
    rgba(6,39,42,0) 100%);
  opacity:0;transition:opacity .45s ease;pointer-events:none;
}
.hdr.is-solid::before{opacity:1}
.hdr.is-solid{padding-top:3rem;padding-bottom:2.4rem}
.hdr__left,.hdr__right{filter:drop-shadow(0 0.4rem 0.4rem rgba(0,0,0,.25))}
.hdr__left{display:flex;align-items:center;gap:2.4rem}
.hdr__logo img{width:17.885rem;height:auto;filter:brightness(0) invert(1)}
.hdr__right{display:flex;align-items:center;gap:6.4rem}

.lang{position:relative;display:flex;align-items:center}
/* Figma: borderStrokeWeightsIndependent = true / 左辺のみ 1px。
   枠線ではなくロゴとの間に立つ縦罫 */
.lang__btn{
  display:flex;align-items:center;justify-content:center;gap:1.6rem;
  width:6.8rem;height:2.4rem;padding:0 0 0 2.3rem;
  border-left:1px solid #fff;
  font-family:var(--f-en);font-size:1.4rem;letter-spacing:.05em;line-height:1;
  transition:opacity .3s;
}
.lang__btn>span{display:block;width:1.9rem;text-align:left}
.lang__caret{width:1rem;height:1rem;flex:none;overflow:visible}
.lang__btn:hover{opacity:.7}

.gnav{display:flex;align-items:center;gap:4rem;font-family:var(--f-en);font-size:1.4rem;letter-spacing:.05em;line-height:1}
.gnav a{position:relative;padding-bottom:0.4rem}
/* 見た目は変えずにホバー／クリックの当たり判定だけ広げる（左右 1.6rem ずつ／上はヘッダーの高さぶん。下はヘッダーからはみ出さない範囲） */
.gnav a::before{content:"";position:absolute;inset:-2.4rem -1.6rem -0.2rem;z-index:1}
.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.gnav a:hover::after{transform:scaleX(1);transform-origin:left}
/* 日本語ページは英日の入れ替えアニメがあるので下線は出さない（英語ページは下線のまま） */
[lang="ja"] .gnav a::after{content:none}
/* ホバーで英字と日本語が上下に入れ替わる。
   日本語のほうが幅が広いので、横は clip せずにはみ出させる（overflow-y だけ clip） */
.gnav__flip{display:block;position:relative;height:1em;line-height:1;overflow-x:visible;overflow-y:clip}
.gnav__en,.gnav__ja{display:flex;align-items:center;justify-content:center;height:100%;white-space:nowrap;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s}
.gnav__ja{position:absolute;inset:0;font-family:var(--f-jp);font-size:.86em;letter-spacing:.08em;
  transform:translateY(105%);opacity:0}
@media (hover:hover){
  .gnav a:hover .gnav__en{transform:translateY(-105%);opacity:0}
  .gnav a:hover .gnav__ja{transform:translateY(0);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .gnav__en,.gnav__ja{transition:opacity .2s}
  .gnav a:hover .gnav__en{transform:none}
  .gnav__ja{transform:none}
}

.ham{display:flex;align-items:center;gap:0.6rem;padding-top:1px}
.ham__bars{display:flex;flex-direction:column;justify-content:space-between;width:2.4rem;height:0.6rem}
.ham__bars i{display:block;width:100%;height:1px;background:#fff;transition:transform .3s,opacity .3s}
.ham__label{font-family:var(--f-en);font-size:1.2rem;letter-spacing:.05em;line-height:1}
.ham.is-open .ham__bars i:nth-child(1){transform:translateY(0.3rem) rotate(20deg)}
.ham.is-open .ham__bars i:nth-child(2){transform:translateY(-0.2rem) rotate(-20deg)}

/* ---------- drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:99;
  background:rgba(6,39,42,.97);
  /* 上寄せ＋余白でヘッダーを避ける。余白も画面幅に連れて変わる */
  display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:clamp(88px,6vw,104px) 0 clamp(32px,3vw,56px);
  opacity:0;transition:opacity .4s;
}
.drawer[hidden]{display:none}
/* ドロワーを開いている間はグローバルナビを伏せる */
body:has(.drawer.is-open) .gnav{opacity:0;visibility:hidden;transition:opacity .3s}
.drawer.is-open{opacity:1}
.drawer__inner{width:calc(100% - 2 * var(--edge));margin-top:auto;display:flex;flex-wrap:wrap;gap:6.4rem;justify-content:space-between;align-items:flex-end}
.drawer__nav{display:grid;grid-template-columns:1fr;gap:clamp(12px,calc(1vw + 6px),24px);flex:0 1 auto;width:min(480px,100%)}
.drawer__nav a{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1.6rem}
/* 英字は The Seasons をアウトライン化した SVG。em 基準なので font-size で拡縮する */
/* 画面幅に連れて連続的に変わるサイズ。rem はブレークポイントごとに基準が
   変わり 1199→1200 で段差が出るため、ここだけ vw + px で組む */
.drawer__nav em{font-style:normal;font-size:min(clamp(30px,calc(1.5vw + 30px),64px),5.2vh);line-height:1;color:#fff}
.drawer__nav span{font-size:1.6rem;color:rgba(255,255,255,.6)}
/* ホバー：英字・和文ともゴールドへ、英字は少し右へ滑る。
   他の項目は少し引いて、狙っている行だけが立つ */
@media (hover:hover){
  .drawer__nav a{transition:opacity .35s}
  .drawer__nav em{transition:color .35s,transform .55s cubic-bezier(.22,1,.36,1)}
  .drawer__nav span{transition:color .35s}
  .drawer__nav a:hover em,.drawer__nav a:hover span{color:var(--goldlt)}
  .drawer__nav a:hover em{transform:translateX(10px)}
  .drawer__nav:hover a:not(:hover){opacity:.4}
}
@media (prefers-reduced-motion:reduce){
  .drawer__nav a,.drawer__nav em,.drawer__nav span{transition:none}
  .drawer__nav a:hover em{transform:none}
}
.drawer__foot{display:flex;flex-direction:column;gap:3.2rem;align-items:stretch;width:min(400px,100%)}
.drawer__sns{display:flex;gap:2.4rem;width:100%;justify-content:center;order:-1}   /* SNS を予約ボタンの上に */
.drawer__sns img{width:2.8rem;filter:brightness(0) invert(1)}
/* ホバー：アイコンをゴールドに寄せて少し持ち上げる */
@media (hover:hover){
  .drawer__sns a{display:block;transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .drawer__sns img{transition:filter .35s,opacity .35s}
  .drawer__sns a:hover{transform:translateY(-3px)}
  /* #bbae82（--goldlt）へ寄せる */
  .drawer__sns a:hover img{filter:brightness(0) saturate(100%) invert(78%) sepia(18%) saturate(605%) hue-rotate(2deg) brightness(92%) contrast(86%)}
  .drawer__sns:hover a:not(:hover) img{opacity:.5}
}
@media (prefers-reduced-motion:reduce){
  .drawer__sns a,.drawer__sns img{transition:none}
  .drawer__sns a:hover{transform:none}
}

/* ---------- 予約モーダル（宿泊施設の選択） ---------- */
.rmodal{
  position:fixed;inset:0;z-index:120;
  background:rgba(6,39,42,.88);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,5vw,64px);overflow-y:auto;
  opacity:0;transition:opacity .35s;
}
.rmodal[hidden]{display:none}
.rmodal.is-open{opacity:1}
.rmodal__panel{
  position:relative;width:min(520px,100%);margin:auto;
  background:#01191b;border-radius:5px;color:#fff;text-align:center;
  padding:clamp(40px,6vw,56px) clamp(24px,4vw,40px) clamp(32px,5vw,48px);
  transform:translateY(16px);transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.rmodal.is-open .rmodal__panel{transform:none}
.rmodal__close{
  position:absolute;right:12px;top:12px;width:44px;height:44px;
  transition:opacity .3s;
}
.rmodal__close:hover{opacity:.7}
.rmodal__close::before,.rmodal__close::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:1px;background:#fff;
}
.rmodal__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.rmodal__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.rmodal__en{font-size:clamp(28px,3.2vw,40px);line-height:1;color:var(--goldlt)}
.rmodal__lead{margin-top:16px;font-size:13px;line-height:1.8;color:rgba(255,255,255,.8)}
.rmodal__list{margin-top:28px;display:grid;gap:12px}
.rmodal__btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:64px;padding:14px 24px;
  background:var(--gold);border-radius:3px;color:#fff;
  transition:opacity .3s;
}
.rmodal__btn:hover{opacity:.82}
.rmodal__btn b{font-family:var(--f-en);font-weight:500;font-size:20px;letter-spacing:.04em;line-height:1}
.rmodal__btn span{font-size:12px;line-height:1}
@media (prefers-reduced-motion:reduce){
  .rmodal,.rmodal__panel{transition:none}
}

/* お問い合わせフォーム（CF7 の出力クラスに合わせてある） */
.rmodal--form .rmodal__panel{width:min(600px,100%);text-align:left}
.rmodal--form .rmodal__en,.rmodal--form .rmodal__lead{text-align:center}
.rmodal__form{margin-top:28px}
.rmodal__row{display:block}
.rmodal__row + .rmodal__row{margin-top:18px}
.rmodal__label{
  display:flex;align-items:center;gap:8px;
  margin-bottom:6px;font-size:13px;line-height:1;
}
.rmodal__req{
  padding:4px 8px 5px;background:var(--gold);border-radius:2px;
  font-size:10px;line-height:1;letter-spacing:.04em;
}
.rmodal .wpcf7-form-control-wrap{display:block}
.rmodal .wpcf7-form-control{
  width:100%;padding:12px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.28);border-radius:3px;
  color:#fff;font:inherit;font-size:14px;line-height:1.6;
  transition:border-color .3s,background-color .3s;
}
/* background の一括指定だとセレクトの矢印（背景画像）まで消えて動いて見えるので、色だけ変える */
.rmodal .wpcf7-form-control:focus{
  outline:none;border-color:var(--goldlt);background-color:rgba(255,255,255,.1);
}
.rmodal .wpcf7-textarea{resize:vertical;min-height:120px}
.rmodal .wpcf7-select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:36px;
}
.rmodal__submit{margin-top:28px}
.rmodal .wpcf7-submit{
  width:100%;min-height:56px;padding:0;
  background:var(--gold);border:0;border-radius:3px;
  color:#fff;font-size:15px;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:opacity .3s;
}
.rmodal .wpcf7-submit:hover{opacity:.82}
.rmodal__note{margin-top:14px;font-size:11px;line-height:1.8;color:rgba(255,255,255,.6);text-align:center}
/* CF7 が出す検証メッセージ */
.rmodal .wpcf7-not-valid-tip{margin-top:6px;font-size:11px;line-height:1.6;color:#e2a0a0}
.rmodal .wpcf7-response-output{
  margin:18px 0 0;padding:12px 14px;border:1px solid rgba(255,255,255,.28);border-radius:3px;
  font-size:12px;line-height:1.7;
}

.btn-gold{
  display:flex;flex-direction:column;align-items:center;gap:0.8rem;
  background:var(--gold);border-radius:0.5rem;
  padding:2.4rem 4rem 2rem;
  font-size:2.8rem;line-height:1;
}
.btn-gold span{font-family:var(--f-jp);font-size:1.2rem;font-weight:500;letter-spacing:.02em}
/* ホバー：地色が左から濃いゴールドに置き換わる（予約バナーと同じ動き） */
@media (hover:hover){
  .btn-gold{position:relative;overflow:hidden}
  .btn-gold::before{
    content:"";position:absolute;inset:0;background:#6b6349;
    transform:scaleX(0);transform-origin:100% 50%;
    transition:transform .55s cubic-bezier(.65,.05,.36,1);
  }
  .btn-gold:hover::before{transform:scaleX(1);transform-origin:0 50%}
  .btn-gold > *{position:relative;z-index:1}
}
@media (prefers-reduced-motion:reduce){
  .btn-gold::before{transition:none}
}

/* =========================================================
   LOADING  ロゴが立ち上がってから、雲が晴れて本編が現れる
   ========================================================= */
.loader{
  --kv-w:min(31vw,41rem);      /* 写真の枠の幅 */
  /* inset:0 だと、モバイルで URL バーが隠れた瞬間に高さが変わり、
     中央に置いた写真とロゴがずれる。大きい方のビューポート高で固定する */
  position:fixed;left:0;right:0;top:0;
  height:100vh;height:100lvh;
  z-index:9999;overflow:hidden;   /* 写真は画面の端で切れて消える */
  background:rgb(191,203,214);    /* 雲が描かれる前の最初の描画も同じ色にしておく */
  display:flex;align-items:center;justify-content:center;
}
/* 2 回目以降は写真とロゴを出さず、雲だけで始める */
.is-revisit .loader__kv,
.is-revisit .loader__logo{display:none}

/* イントロ：中央の 1 枚の枠の中で、8 枚が入れ替わりながら重なっていく */
.loader__kv{
  position:absolute;left:50%;top:50%;z-index:1;
  transform:translate(-50%,-50%);
  width:var(--kv-w);aspect-ratio:3/2;
  border-radius:.5rem;overflow:hidden;
  /* 枠そのものを、1 枚目から消え切るまで通しで縮め続ける。
     transform は 1 本にしないと後のアニメーションに丸ごと上書きされるため、
     入れ替わり（0.15s〜）から消滅（3.43s）までを 1 つの kvScale で持つ */
  animation:kvOut   .8s   cubic-bezier(.15,.7,.25,1) 2.63s both,
            kvScale 3.28s cubic-bezier(.5,0,.72,.95)  .15s both;
}
.loader__kv img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  animation:kvIn .8s cubic-bezier(.2,.6,.2,1) calc(var(--i,0) * .24s + .15s) both;
}
@keyframes kvIn{
  from{opacity:0;transform:scale(1.06)}
  to  {opacity:1;transform:scale(1)}
}
@keyframes kvOut{from{opacity:1}to{opacity:0}}
/* 中央寄せの translate を持っているので、キーフレーム側にも書いて打ち消さないようにする */
@keyframes kvScale{
  from{transform:translate(-50%,-50%) scale(1)}
  to  {transform:translate(-50%,-50%) scale(.82)}
}

/* 雲は canvas に fBm ノイズで描く。しきい値を上げると薄いところから順に抜けていき、
   雲が晴れるように地が消える。矩形の縁も継ぎ目も原理的に出ない */

.loader__canvas{
  position:absolute;inset:0;z-index:0;display:block;
  width:100%;height:100%;pointer-events:none;
}
.loader{flex-direction:column}
/* スマホ実機では URL バーが見えている間、表示領域（svh）は 100lvh より短い。
   枠は 100lvh のまま、ロゴと写真の中心だけを見えている領域の中央に置く。
   svh / lvh は固定値なので、URL バーが隠れても位置は動かない */
@supports (height:100svh){
  .loader{padding-bottom:calc(100lvh - 100svh)}
  .loader__kv{top:50svh}
  /* ドロワー・モーダルは inset:0 で見えている領域に追従するが、
     念のため高さも「いま見えている高さ（dvh）」で明示して中央合わせを固定する */
  .drawer,.rmodal{height:100dvh}
}
.loader__logo{position:relative;z-index:2;width:16rem}
.loader__mark{display:block;width:100%;height:auto;color:#fff;overflow:visible}
/* シンボルの各パーツが別々の向きから寄り集まって組み上がる */
.lm{
  transform-box:fill-box;transform-origin:50% 50%;
  animation:markIn 2s cubic-bezier(.18,.7,.22,1) both;
  animation-delay:2.60s;   /* 写真が消えていく途中から立ち上がる */
}
.lm--1{--tx:-46%;--ty: 32%;--rot:-16deg;animation-delay:2.80s}   /* 左下のループ */
.lm--2{--tx:  4%;--ty:-52%;--rot: 13deg;animation-delay:2.99s}   /* 上の山 */
.lm--3{--tx: 60%;--ty: 18%;--rot: 22deg;animation-delay:3.23s}   /* 右下の点 */
.lm--4{--tx: 66%;--ty: 26%;--rot:-24deg;animation-delay:3.31s}
.lm--5{--tx: 48%;--ty: 30%;--rot: 15deg;animation-delay:3.09s}   /* 右下のループ */
@keyframes markIn{
  from{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0deg))}
  to  {opacity:1;transform:translate(0,0) rotate(0deg)}
}
/* 読み込みの数値（いまは非表示。戻すときは display を外す） */
.loader__num{
  display:none;
  position:relative;z-index:2;margin-top:3.2rem;
  font-family:"Roboto",var(--f-en);font-weight:400;font-size:1.4rem;letter-spacing:.18em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;  /* 桁が増えても幅が動かない */
  line-height:1;color:rgba(43,56,63,.72);
  opacity:0;animation:loaderNumIn .8s ease .35s both;
}
@keyframes loaderNumIn{from{opacity:0}to{opacity:1}}
/* 晴れる：雲は canvas 側で抜けていく。ここではロゴと数値だけ */
.loader.is-clearing{pointer-events:none}
.loader.is-clearing .loader__logo,
.loader.is-clearing .loader__num{
  animation:none;
  opacity:0;transform:translateY(-1.2rem) scale(1.04);filter:blur(.4rem);
  transition:opacity 2.1s ease,transform 2.6s cubic-bezier(.3,0,.2,1),filter 2.1s ease;
}
.loader.is-clearing .lm{animation:none}
.loader.is-hidden{display:none}
/* 雲を描き始めたら地色は外す。地色を残すと雲が抜けても向こうのページが見えない */
.loader.is-drawn{background:transparent}
/* 読み込み中は本編を動かさない */
/* 横は常に clip のまま触らない。ここで overflow を丸ごと上書きすると
   横方向の扱いが hidden→clip と切り替わり、その間にバーが出る */
body.is-loading{overflow-y:hidden}
@media (prefers-reduced-motion:reduce){
  .lm,.loader__num{animation:none;opacity:1;transform:none}
  .loader__canvas,
  .loader.is-clearing .loader__logo{transition:opacity .3s ease}
}

/* ---------- side reserve button ---------- */
/* 通常の面と、ゴールドの面を重ねて置き、上の面を clip-path で上から開く。
   地色・文字・罫が同じ境界で切り替わるので、色が切り替わる瞬間が出ない */
.revbtn{
  --revbtn-hover:var(--gold);      /* ホバー時の地色 */
  --revfill-out:inset(100% 0 0 0); /* 離したときの抜け先＝下 */
  position:fixed;right:var(--edge);bottom:4.8rem;
  z-index:90;overflow:hidden;
  width:4rem;
  background:#fff;border-radius:0.3rem;
}
.revbtn__in{
  min-height:26.8rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  padding:2.4rem 1.2rem;
  color:#000;
}
.revbtn__in--fill{
  position:absolute;inset:0;min-height:0;
  background:var(--revbtn-hover);color:#fff;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .42s cubic-bezier(.65,.05,.36,1);
}
.revbtn:hover .revbtn__in--fill{clip-path:inset(0 0 0 0)}
/* 離したときは上へ戻さず、そのまま下へ抜けていく（JS が .is-leaving を付ける） */
.revbtn.is-leaving .revbtn__in--fill{
  animation:revfillout .34s cubic-bezier(.5,0,.75,.4) forwards;
}
@keyframes revfillout{
  from{clip-path:inset(0)}
  to  {clip-path:var(--revfill-out)}
}
.revbtn__ja{writing-mode:vertical-rl;font-size:1.4rem;font-weight:500;letter-spacing:.05em;line-height:1.1}
.revbtn__line{width:1px;height:4rem;background:currentColor}
.revbtn__en{writing-mode:vertical-rl;font-family:var(--f-en);font-weight:500;font-size:1.4rem;letter-spacing:.05em;line-height:1}
.revbtn__in>.revbtn__en{color:#212121}
.revbtn__in--fill>.revbtn__en{color:#fff}
@media (prefers-reduced-motion:reduce){
  .revbtn__in--fill{transition:none}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:100vh;min-height:60rem;overflow:hidden;background:#000}
.hero__media{position:absolute;inset:0}
.hero__media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15)}
.hero__media picture,.sec__main picture,.cafe__main picture,.access__main picture,.zoom__fig picture,.wide picture{display:contents}
/* 3:2 を縦長の枠に入れるので、寄せ先は下。人物とデッキが下寄りにある */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
/* 縦画面は切り出し済みの専用画像。枠とほぼ同じ比率なので中央でよい */
@media (max-width:1199px) and (orientation:portrait){
  .hero__media img{object-position:50% 50%}
}

.hero__coord{
  position:absolute;left:var(--edge);top:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center;
  font-family:var(--f-en);font-size:1.4rem;letter-spacing:.05em;white-space:nowrap;line-height:1;
}
.hero__sns{
  position:absolute;right:var(--edge);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4rem;
  width:1.4rem;
}
.hero__sns a{
  writing-mode:vertical-rl;
  font-family:var(--f-en);font-size:1.4rem;letter-spacing:.05em;line-height:1;
  transition:opacity .4s cubic-bezier(.22,1,.36,1);
}
.hero__sns a:hover{opacity:.6}

.hero__lead{
  position:absolute;left:4.2rem;bottom:3.7rem;
  display:flex;flex-direction:column;gap:0.8rem;
  filter:drop-shadow(0 0.4rem 0.4rem rgba(0,0,0,.25));
}
.hero__en{font-family:var(--f-en);font-size:1.6rem;line-height:1;padding-left:0.4rem}
.hero__ja{font-size:clamp(4rem,3.75vw,7.2rem);font-weight:400;line-height:1.2;letter-spacing:0}

.triad{
  position:absolute;right:calc(var(--edge) + 23.6rem);bottom:4.8rem;
  display:flex;align-items:center;gap:clamp(4rem,5vw,9.6rem);
  filter:drop-shadow(0 0.4rem 0.4rem rgba(0,0,0,.25));
}
.triad__item{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.triad__ja{
  font-size:2.4rem;font-weight:500;line-height:1;
  transition:transform .5s cubic-bezier(.2,.8,.25,1);
}
.triad__en{font-family:var(--f-en);font-size:1rem;letter-spacing:.05em;line-height:1}
.triad__arw{width:1.2rem;height:0.6rem;margin-top:0.4rem}

.triad__item:hover .triad__ja{transform:translateY(-0.4rem)}
/* 矢印は下へ抜けて、上から入り直す。行き先が下にあることを一往復で示す */
.triad__item:hover .triad__arw{animation:triadArw .72s cubic-bezier(.5,0,.2,1)}
@keyframes triadArw{
  0%  {transform:translateY(0);opacity:1}
  38% {transform:translateY(1.1rem);opacity:0}
  39% {transform:translateY(-1.1rem);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .triad__ja{transition:none}
  .triad__item:hover .triad__arw{animation:none}
}

/* =========================================================
   CONCEPT
   ========================================================= */
.concept{position:relative;background:var(--dark)}
.concept::after{
  content:"";position:absolute;inset:0 0 100vh;z-index:1;
  background-image:var(--noise);background-size:12rem 12rem;
  opacity:.08;pointer-events:none;
}
.concept__canvas{position:relative;z-index:2;width:100%;aspect-ratio:1920/5937;margin-top:-100vh}
.concept__deco{position:sticky;top:0;left:0;width:100%;height:100vh;overflow:hidden;opacity:.1;z-index:1;pointer-events:none;will-change:transform;backface-visibility:hidden}
.concept__deco img{width:100%;height:auto;aspect-ratio:16/9}
.cph{position:absolute;overflow:hidden}
.cph img{width:100%;height:100%;object-fit:cover}
.cph--1{left:50%;top:20.280%;width:50%;aspect-ratio:1/1}
.cph--2{left:8.854%;top:33.215%;width:17.76%;aspect-ratio:341/530.32}
.cph--3{left:0;top:47.617%;width:50%;aspect-ratio:960/631}
.cph--4{left:73.437%;top:58.245%;width:17.708%;aspect-ratio:1/1}
.cph--5{left:8.854%;top:64.671%;width:17.76%;aspect-ratio:1/1}
.cph--6{left:55.677%;top:72.983%;width:26.615%;aspect-ratio:511/323.84}
.cph--7{left:2.5%;top:81.759%;width:41.823%;aspect-ratio:803/536}
.cph--8{left:64.531%;top:88.294%;width:35.469%;aspect-ratio:681/454}

/* ---- CONCEPT 最後の写真 → CONCEPT 内で静止 → 全画面へ拡大 → SAVOR ----
   この写真は Figma 上で SAVOR のメイン画像と同一素材。
   CONCEPT 内で sticky 固定して拡大し、全画面になった地点で
   SAVOR（負マージンで重ねたスティッキー画像）へ差し替える   */
.zoom{position:relative;z-index:5;height:180vh}
.zoom__sticky{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;justify-content:center;
}
.zoom.is-done .zoom__sticky{visibility:hidden}
/* (2) 引き渡し後は CONCEPT の装飾レイヤー（等高線・ノイズ）を伏せる。
   SAVOR は負マージンで CONCEPT の最後 100vh と重なっており、
   これらが写真の上に乗ると透けて見えるため */
.concept.is-handed .concept__deco{opacity:0}
.zoom__fig{
  --z-w0:46.771vw;
  --z-h0:calc(var(--z-w0) * .66704);
  /* 箱は最初から最終サイズ。clip-path の窓を広げて拡大を表現する。
     width/height を毎フレーム変えると再レイアウト＋画像の再ラスタライズが走り
     スクロール（特に戻り）でカクつくため、描画のみで済む方式にしている */
  width:100%;height:100vh;
  /* 中の写真は 1.06 倍から始まる。clip-path は描画を切るだけで
     スクロール範囲には効かないため、箱の外は overflow でも落とす */
  overflow:clip;
  clip-path:inset(
    calc((100% - var(--z-h0)) / 2 * (1 - var(--zp,0)))
    calc((100% - var(--z-w0)) / 2 * (1 - var(--zp,0)))
    round calc(0.5rem * (1 - var(--zp,0))));
  background:#000;
}
.zoom__fig img{
  width:100%;height:100%;object-fit:cover;
  /* 寄りは 0.94 で終わり。残りの区間は SAVOR 側の写真と等倍・同位置になる */
  transform:scale(calc(1 + clamp(0, (.94 - var(--zp,0)), 1) / .94 * .06));
  will-change:transform;
}
/* 先出しの間もレイヤーを保持させる。visibility で消すと合成テクスチャが
   破棄され、再表示のフレームで描き直しが走る */
.sec--savor > .sec__main{will-change:opacity}

.concept__head{
  position:sticky;top:0;margin:-100vh auto 0;will-change:transform;
  width:min(90rem,86vw);height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;z-index:3;
}
/* The Seasons はライセンスフォントで配信できないため、字形を SVG に起こしてある。
   em = 1000 の座標系なので、横組みは height:1em、縦組みは width:1em で
   フォントサイズに追随する。字送りはパスの配置に織り込み済み */
.ttl-en{font-weight:400;font-size:2.1rem;line-height:1;color:var(--gold)}
.concept__ttl{margin-top:3.2rem;font-size:3.2rem;font-weight:400;line-height:1.6;letter-spacing:0}
.concept__txt{margin-top:8rem;font-size:1.8rem;font-weight:400;line-height:2.7}

/* =========================================================
   SECTION (SAVOR / RESTORE / ENRICH)
   ========================================================= */
.sec{position:relative;background:var(--deep)}
.sec--savor{background:var(--dark);margin-top:-100vh}
/* ズーム中の余白は CONCEPT と同じ地色。引き渡し後は他セクションと同じ地色へ */
.concept.is-handed + .sec--savor{background:var(--deep)}
.sec__main{position:sticky;top:0;z-index:0;width:100%;height:100vh;min-height:42rem;overflow:hidden;background:#000}
.sec__main img{width:100%;height:100%;object-fit:cover}

/* ---- 固定された全画面写真に雲がかかって消えていくベール ----
   --vp : 0（写真そのまま）→ 1（セクション地色で覆い尽くす）      */
.veil{position:absolute;inset:0;pointer-events:none;z-index:2}
.veil i{position:absolute;display:block;background:var(--veil-c,var(--deep))}
/* 雲はローディングと同じ fBm を canvas で描く（.veil__cv） */
.veil__cv{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  opacity:calc(var(--vp,0) / .95);
}
.veil__flat{inset:0;opacity:calc((var(--vp,0) - .72) / .28)}
/* 雲がかかる間の寄り。--vp が 0→1 で 1.0→1.10 倍 */
[data-veil] > img{transform:scale(calc(1 + var(--vp,0) * .10));will-change:transform}
/* つながるカフェの雲は白から始めて、地の色へ寄せる */
.cafe__main{--veil-c:var(--cafebg);--veil-fog:rgb(255,255,255)}
.cafe__main img,.access__main img{width:100%;height:100%;object-fit:cover}

.sec__body{
  position:relative;
  z-index:1;
  padding:110rem 0 32rem;
}
.sec__body>*{position:relative;z-index:2}

.sec__feature{
  position:relative;width:var(--innerW);margin-inline:auto;
  aspect-ratio:1484/800;border-radius:0.5rem;overflow:hidden;
}
.sec__feature img{width:100%;height:100%;object-fit:cover}
.sec--savor .sec__feature img{object-position:50% 100%}
.sec--enrich .sec__feature img{object-position:99.1% 68%}
.sec__feature figcaption{
  position:absolute;right:6.2%;top:72%;
  filter:drop-shadow(0 0.4rem 0.4rem rgba(0,0,0,.15));
}

.sec__display{
  height:1em;margin-top:-10rem;margin-bottom:8.8rem;
  text-align:right;padding-right:clamp(1.6rem,8.96vw,17.2rem);
  font-size:clamp(7.2rem,10.4vw,20rem);
  line-height:1;color:var(--gold);
  pointer-events:none;
}

/* 大きい英字（SAVOR / RESTORE / ENRICH / TsunagaruCafe）は
   画面に入ると横に流れながら結像する。分割は JS */
.dsp{display:inline-block;vertical-align:top}
/* 単語の途中では折り返さない（欧文用）。和文は 1 文字＝1 単語になるので影響なし */
.dsp__w{white-space:nowrap}
/* 位置は始点から定位置まで一区間。行き過ぎも揺り戻しも作らず、減速して着くだけ。
   45% は opacity のみなので transform は 0%→100% を通しで補間する */
@keyframes dspdrift{
  0%  {transform:translate3d(calc(-.55em * var(--amp,1)), calc(-.32em * var(--sv,0)), 0)
                 skewY(calc(2deg * var(--sk,0)))
                 scaleX(1.06);
       opacity:0}
  45% {opacity:1}
  100%{transform:translate3d(0,0,0) skewY(0) scaleX(1); opacity:1}
}
@keyframes dspfocus{
  from{filter:blur(.07em)}
  to  {filter:blur(0)}
}

/* ヒーローの見出しは、雲が晴れるのに合わせて一文字ずつ立ち上がる。
   スクロールではなく <html> の .is-entered で発火する */
.dsp--h{overflow:hidden;padding:.2em 0;margin:-.2em 0}
.dsp--h i{
  display:inline-block;font-style:normal;
  /* 共通の .dsp i（横流し＋ぼかし）が効いてしまうので、ここで打ち消す */
  opacity:0;filter:none;
  transform:translateY(108%);
  transition:transform 1.1s cubic-bezier(.2,.78,.25,1),opacity .5s ease;
  transition-delay:calc(var(--d,0) * 46ms);
}
.is-entered .dsp--h i{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .dsp--h i{transform:none;transition:none}
}

/* 縦書き（喰う／寝る／足す／つながるカフェ）は字が進む向き＝上から下へ流れ込む。
   横のばらつきは小さめにして、縦一列の連なりを崩さない */
.dsp--v i{
  display:inline-block;font-style:normal;   /* <i> の既定は斜体 */
  transform:translate3d(calc(.09em * var(--sk,0)), calc(-.5em * var(--amp,1)), 0)
            scaleY(1.06);
  opacity:0;
}
.dsp--v.is-shown i{
  animation:dspvdrift 1.5s cubic-bezier(.2,.7,.25,1) both,
            dspfocus 2.1s cubic-bezier(.1,.8,.2,1) both;
  animation-delay:var(--dl,0ms);
}
@keyframes dspvdrift{
  0%  {transform:translate3d(calc(.09em * var(--sk,0)), calc(-.5em * var(--amp,1)), 0)
                 scaleY(1.06);
       opacity:0}
  45% {opacity:1}
  100%{transform:translate3d(0,0,0) scaleY(1); opacity:1}
}
@media (prefers-reduced-motion:reduce){
}

/* 固定される前の位置は見出し（.lead）の横。.inner の先頭 = 見出しの上端 */
.rail-wrap{
  position:absolute;z-index:3;
  left:-0.4rem;top:0;bottom:0;width:4rem;
  pointer-events:none;
}
/* 固定前は見出しの上端から。固定後は Figma と同じ画面上端から 20rem の位置 */
.rail{
  position:sticky;top:20rem;will-change:transform;
  width:4rem;
  display:flex;flex-direction:column;align-items:center;gap:3.2rem;
}
.rail__en{font-size:4rem;line-height:1;color:var(--gold)}
.rail__line{width:1px;height:4rem;flex:none;background:#fff}
.rail__ja{writing-mode:vertical-rl;font-family:var(--f-min);font-weight:400;font-size:3.2rem;line-height:1.4}

/* lead */
.lead{display:flex;gap:4rem;align-items:flex-start}
.lead__ttl{flex:0 0 33.3%;font-size:2.1rem;font-weight:400;line-height:1.8;letter-spacing:0}
.lead__txt{flex:1 1 auto;padding-top:0.4rem;font-size:1.6rem;font-weight:300;line-height:2.1}

/* wide image */
.wide{border-radius:0.5rem;overflow:hidden;aspect-ratio:1314/640;background:#fff}
.wide img{width:100%;height:100%;object-fit:cover}

/* =========================================================
   SAVOR blocks
   ========================================================= */
.sec--savor .lead{margin-top:0}
.sec--savor .wide{margin-top:31.5rem}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4.8rem;margin-top:20.2rem}
.plan__head{display:flex;flex-direction:column}
.plan__ja{font-size:1.3rem;font-weight:400;line-height:1}
.plan__en{margin-top:0.8rem;font-family:var(--f-en);font-weight:400;font-size:2.7rem;line-height:1}
.plan__price{margin-top:1.6rem;font-family:var(--f-en);font-size:2.4rem;line-height:1;display:flex;align-items:flex-end;gap:0.4rem}
.plan__price span{font-size:1.6rem;font-family:var(--f-jp)}
.plan__img{margin-top:4rem;aspect-ratio:633/424.2;border-radius:0.5rem;overflow:hidden}
.plan__img img{width:100%;height:100%;object-fit:cover}
.plan__txt{margin-top:4rem}
.plan__txt h4{font-size:1.8rem;font-weight:400;line-height:1.6}
.plan__txt p{margin-top:2.4rem;font-size:1.4rem;font-weight:300;line-height:2}

.option{margin-top:16rem}
.option__ttl{font-family:var(--f-en);font-weight:400;font-size:2.7rem;line-height:1}
.option__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17.2rem;margin-top:4rem}
.option__cols--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:4.8rem}
.option__list li{display:flex;justify-content:space-between;align-items:baseline;gap:1.6rem;font-size:1.6rem;line-height:1.8;padding-bottom:1.6rem}
.option__list li em{font-style:normal;font-family:var(--f-en)}
.option--cafe{margin-top:12.8rem}

.notes{margin-top:16rem;display:flex;flex-direction:column;gap:0.8rem}
.notes li{font-size:1.4rem;font-weight:300;line-height:1.6}
.notes--lg li{font-size:1.4rem;font-weight:400;line-height:1.8}
.notes--sm{margin-top:4rem;gap:1.6rem}
.notes--sm li{font-size:1.4rem;font-weight:400;line-height:1.6}

/* =========================================================
   RESTORE blocks
   ========================================================= */
.sec--restore .wide:first-of-type{margin-top:31.4rem}
.features{margin-top:19.9rem;display:flex;gap:4rem;align-items:flex-start}
.features__head{flex:0 0 30.4%;padding-top:0.4rem}
.features__head h3{font-size:2.1rem;font-weight:400;line-height:1}
.features__en{margin-top:1.6rem;font-family:var(--f-en);font-size:1.6rem;line-height:1}
.features__list{flex:1 1 auto;border-top:1px solid rgba(255,255,255,.2)}
.features__row{display:flex;gap:6.9rem;align-items:center;padding:4.8rem 0;border-bottom:1px solid rgba(255,255,255,.2)}
.features__row dt{flex:0 0 21rem;font-family:var(--f-en);font-size:2rem;line-height:1.4}
.features__row dd{display:flex;flex-direction:column;gap:0.8rem}
.features__row dd b{font-size:1.6rem;font-weight:400;line-height:1.6}
.features__row dd span{font-size:1.4rem;font-weight:300;line-height:1.6}
.sec--restore .wide + .features + .wide{margin-top:20.2rem}
.sec--restore .features + .wide{margin-top:20.2rem}

.rooms{margin-top:32rem;display:flex;flex-direction:column;gap:24rem}
.room__head p{font-size:1.3rem;line-height:1}
.room__head h3{margin-top:0.8rem;font-family:var(--f-en);font-weight:400;font-size:4rem;line-height:1}
.room .slider{margin-top:4rem}
.spec{
  /* 区切り線を等間隔に並べるため、項目の間はアキではなく余白（li の padding）で取る。
     gap を入れると 1 本目と 2 本目の間だけ狭くなる */
  margin-top:2.4rem;display:flex;justify-content:center;align-items:center;gap:0;
}
.spec li{
  display:flex;justify-content:space-between;align-items:center;gap:1.6rem;
  width:19.2rem;font-size:1.4rem;line-height:1.6;
  border-left:1px solid rgba(255,255,255,.24);
  border-right:1px solid rgba(255,255,255,.24);
  padding:0 3.2rem;height:2.2rem;
}
.spec li + li{border-left:0}
.spec li em{font-style:normal}
.room__body{margin-top:6.4rem;display:flex;justify-content:space-between;gap:4.8rem;align-items:flex-start}
.room__txt{flex:1 1 auto;max-width:80.3rem}
.room__txt h4{font-size:1.8rem;font-weight:400;line-height:1.6}
.room__txt p{margin-top:2.4rem;font-size:1.4rem;font-weight:300;line-height:2}
.kv{display:flex;gap:0;margin-top:4.8rem}
.kv dt{flex:0 0 17.1rem;font-size:1.4rem;font-weight:300;line-height:1.8}
.kv dd{flex:1 1 auto;font-size:1.2rem;font-weight:300;line-height:1.8}

.btn-book{
  flex:0 0 29.3rem;height:7.2rem;border-radius:0.5rem;background:var(--gold2);
  display:flex;align-items:center;justify-content:center;gap:2.4rem;
  transition:opacity .3s;
}
.btn-book:hover{opacity:.8}
.btn-book b{font-family:var(--f-en);font-weight:500;font-size:1.8rem;line-height:1}
.btn-book span{font-size:1.6rem;font-weight:500;line-height:1}

/* ---------- slider ---------- */
.slider{position:relative;border-radius:0.5rem;overflow:hidden;background:#040404}
.slider__track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.slider__slide{flex:0 0 100%;aspect-ratio:1314/739}
.slider__slide img{width:100%;height:100%;object-fit:cover}
.slider__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:4.4rem;height:4.4rem;display:grid;place-items:center;
  transition:opacity .3s;opacity:.9;
}
.slider__btn:hover{opacity:1}
.slider__btn img{width:100%;height:100%}
.slider__btn--prev{left:2.4rem}
.slider__btn--next{right:2.4rem}
/* 回転はボタンではなく中の矢印に掛ける。ボタン側に rotate を置くと
   translateY(-50%) ごと回って、左右位置が高さの半分ぶんずれる */
.slider__btn--prev img{rotate:-90deg}
.slider__btn--next img{rotate:90deg}
.slider__count{
  position:absolute;right:2.4rem;bottom:2rem;
  font-family:var(--f-en);font-size:1.6rem;line-height:1;
}

/* =========================================================
   ENRICH blocks
   ========================================================= */
.sec--enrich .lead{margin-bottom:0}
.block{margin-top:32rem}
.block + .block{margin-top:24rem}
.block__head{margin-top:9.6rem;display:flex;gap:5rem;align-items:center;padding-bottom:4.8rem;border-bottom:1px solid rgba(255,255,255,.2)}
.block:first-of-type .block__head,.block .wide + .block__head{margin-top:9.6rem}
.block__ttl{flex:0 0 30.9%}
.block__ja{font-size:1.4rem;line-height:1}
.block__en{margin-top:1.6rem;font-family:var(--f-en);font-weight:400;font-size:4rem;line-height:1}
.block__txt{flex:1 1 auto;font-size:1.6rem;font-weight:300;line-height:2.1}

.cards{display:grid;gap:4.8rem;margin-top:9.6rem}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card__head h4{font-size:2.1rem;font-weight:400;line-height:1}
.card__head p{margin-top:1rem;font-family:var(--f-en);font-size:1.1rem;line-height:1}
.card__head--row{display:flex;justify-content:space-between;align-items:center;gap:1.6rem}
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.7rem 1.6rem 0.8rem;background:var(--gold);color:#fff;
  font-size:1.6rem;font-weight:500;line-height:1;white-space:nowrap;
}
.card__img{margin-top:2.4rem;aspect-ratio:406/272.08;border-radius:0.5rem;overflow:hidden;background:#000}
.cards--2 .card__img{aspect-ratio:633/424.2}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__txt{margin-top:2.4rem;font-size:1.4rem;font-weight:300;line-height:2}
.card__body{margin-top:2.4rem}
.card__body h5{font-size:1.8rem;font-weight:400;line-height:1.6}
.card__body p{margin-top:2.4rem;font-size:1.4rem;font-weight:300;line-height:2}
.card__body .kv{margin-top:2.4rem}
.card__body .kv:first-of-type{margin-top:4.8rem}
/* 本文の行数が違ってもリンクボタンを下端でそろえる（全デバイス共通） */
.card{display:flex;flex-direction:column}
.card__txt:has(+ .btn-link){margin-bottom:2.4rem}   /* ボタンとの最小間隔 */
.card .btn-link{margin-top:auto}

.btn-link{
  margin-top:2.4rem;height:5.2rem;border-radius:0.3rem;background:var(--gold2);
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
  font-family:var(--f-en);font-weight:500;font-size:1.6rem;color:var(--ink);
  transition:opacity .3s;
}
.btn-link:hover{opacity:.8}
.btn-link img{width:1.7rem;height:1.7rem}

.block .notes--lg{margin-top:9.6rem}

/* =========================================================
   FACILITIES
   ========================================================= */
.facility{position:relative;background:var(--deep);padding:0 0 17.4rem;overflow:hidden}
.facility>*{position:relative;z-index:2}
/* Figma: Frame 364 は facility の 2.1rem 下から始まる 2480x604 の 1 列（360x540 / gap 64 / 偶数枚は +64） */
.marquee{--mq-gap:6.4rem;overflow:hidden;padding-top:2.1rem}
.marquee__track{display:flex;align-items:flex-start;gap:var(--mq-gap);width:max-content;animation:mq 48s linear infinite}
/* 12 枚＝6 枚の 2 周分。1 周は 6*幅 + 6*gap なので、track 幅の半分（gap 5.5 本分）に半 gap を足す */
@keyframes mq{
  from{transform:translateX(0)}
  to  {transform:translateX(calc(-50% - var(--mq-gap) / 2))}
}
.mq{position:relative;width:min(36rem,25vw);aspect-ratio:360/540;border-radius:0.5rem;overflow:hidden;background:#fff;flex:none}
.mq--b{margin-top:6.4rem}
/* 画像は Figma の実寸・位置をカード比の％で再現（--w/--h/--x/--y は各 img にインラインで指定） */
.mq img{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--w,100%);height:var(--h,100%);max-width:none;object-fit:cover}

.ttl-block{margin-top:24.2rem;text-align:center;filter:drop-shadow(0 0.4rem 0.4rem rgba(0,0,0,.15))}
.ttl-block__ja{font-size:1.6rem;letter-spacing:.02em;line-height:1}
.ttl-block__en{margin-top:1.6rem;font-size:4.8rem;line-height:1;color:var(--gold)}

.facility .inner{margin-top:19.6rem;display:flex;flex-direction:column;gap:16rem}
.frow{display:flex;gap:7.3%;align-items:flex-start}
.frow__img{flex:0 0 50.07%;aspect-ratio:743/495;border-radius:0.5rem;background:#fff}
.frow__img .slider__slide{aspect-ratio:743/495}
.frow__txt{flex:1 1 auto}
.frow__head p{font-size:1.3rem;line-height:1}
.frow__head h3{margin-top:0.8rem;font-family:var(--f-en);font-weight:400;font-size:2.7rem;line-height:1}
.frow__txt h4{margin-top:4rem;font-size:1.8rem;font-weight:400;line-height:1.6}
.frow__body{margin-top:2.4rem;font-size:1.4rem;font-weight:300;line-height:2}
.frow__txt .kv{margin-top:4rem}

/* =========================================================
   CAFE
   ========================================================= */
.cafe{position:relative;background:var(--cafebg)}
.cafe__main{position:sticky;top:0;z-index:0;width:100%;height:100vh;min-height:42rem;overflow:hidden;background:#000}
.cafe__main img{width:100%;height:100%;object-fit:cover}
.cafe__body{
  position:relative;z-index:1;padding-bottom:12rem;
}
.cafe__body>.inner{position:relative;z-index:6}
.cafe__body>.ttl-block{z-index:6}   /* position は .ttl-block--menu 側に任せる */
.cafe__wide{position:absolute;overflow:hidden;background:#000;z-index:1}
.cafe__wide--l{left:0;top:110rem;width:79.79%;aspect-ratio:1532/740;border-radius:0 0.5rem 0.5rem 0}
.cafe__wide--r{left:37.97%;top:258.1rem;width:62.03%;aspect-ratio:1191/740;border-radius:0.5rem 0 0 0.5rem}
.cafe__wide img,.cafe__sq img,.cafe__shot img{width:100%;height:100%;object-fit:cover}
.cafe__wide--l img{object-position:50% 37%}
.cafe__sq{position:absolute;z-index:1;left:11.35%;top:294.5rem;width:38.65%;aspect-ratio:742/495;border-radius:0.5rem;overflow:hidden;background:#fff}
.cafe__shot{position:absolute;left:46.82%;top:199.9rem;width:41.82%;aspect-ratio:803/422;border-radius:0.5rem;overflow:hidden;z-index:2}
.cafe__shot figcaption{position:absolute;right:4%;top:8%;font-size:4rem;line-height:1.1;letter-spacing:.1em;filter:drop-shadow(0 0.4rem 0.4rem rgba(0,0,0,.15))}
.cafe__vtxt{position:absolute;left:84.32%;top:140.5rem;font-size:3.6rem;line-height:1.1;letter-spacing:.1em;z-index:4}
.cafe__display{
  position:absolute;left:0;right:0;top:174.1rem;
  text-align:right;padding-right:clamp(1.6rem,8.96vw,17.2rem);
  font-size:clamp(5.6rem,8.33vw,16rem);
  line-height:1;color:var(--olive);
  z-index:3;
}
.cafe__intro{
  position:absolute;left:11.35%;top:198.8rem;width:26.61%;
  display:flex;flex-direction:column;gap:4rem;z-index:5;
}
.cafe__intro .lead{display:block}
.cafe__intro .lead__ttl{font-size:2.1rem;line-height:1.8}
.cafe__intro .lead__txt{margin-top:4rem;padding-top:0}
.cafe__info{display:flex;flex-direction:column;gap:0.8rem}
.cafe__info>div{display:flex;gap:0;font-size:1.6rem;line-height:1.8}
.cafe__info dt{flex:0 0 12.2rem}
.cafe__info dd{flex:1 1 auto}
.ttl-block--menu{position:absolute;left:0;right:0;top:364rem;margin-top:0;z-index:4}
.ttl-block--menu .ttl-block__en{color:#fff}   /* カフェメニュー / MENU LIST は白 */
.cafe .inner{padding-top:384.8rem}
.menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6.4rem 4.8rem}
.menu__item figure{position:relative;aspect-ratio:463/310.27;border-radius:0.5rem;overflow:hidden;background:#000}
/* Figma は cover より 1.14〜1.58 倍寄せて配置している。実寸・位置を％で再現
   （--w/--h/--x/--y は各 img にインラインで指定） */
.menu__item figure img{
  position:absolute;left:var(--x,0);top:var(--y,0);
  width:var(--w,100%);height:var(--h,100%);max-width:none;object-fit:cover;
  transform:rotate(var(--r,0deg));transform-origin:0 0;   /* 傾けて置かれている写真がある */
}
.menu__row{margin-top:2.4rem;display:flex;justify-content:space-between;align-items:center;gap:1.6rem}
.menu__row h4{font-size:1.8rem;font-weight:400;line-height:1}
.menu__row p{margin-top:1rem;font-family:var(--f-en);font-size:1.1rem;line-height:1}
.menu__row em{font-style:normal;font-family:var(--f-en);font-size:1.8rem;line-height:1;white-space:nowrap}

/* =========================================================
   ACCESS
   ========================================================= */
.access{position:relative;background:var(--deep)}
.access__main{position:sticky;top:0;z-index:0;width:100%;height:100vh;min-height:42rem;overflow:hidden;background:#000}
.access__main img{width:100%;height:100%;object-fit:cover}
.access__body{
  position:relative;z-index:1;padding:110rem 0 20.2rem;
}
.access__body>*{position:relative;z-index:2}
.access__body .ttl-block{margin-top:0}
.access .inner{margin-top:9.6rem}
.access__map figure{aspect-ratio:1484/700;border-radius:0.5rem;overflow:hidden;background:#000}
.access__map figure img{width:100%;height:100%;object-fit:cover}
.access__map figure iframe{display:block;width:100%;height:100%;border:0}
.access__addr{margin-top:4.8rem;text-align:center}
.access__name{font-family:var(--f-en);font-size:2rem;line-height:1}
.access__zip{margin-top:2.4rem;font-family:var(--f-en);font-size:1.6rem;line-height:1}
.access__zip a{margin-left:2.4rem;text-decoration:underline;transition:opacity .3s}
.access__zip a:hover{opacity:.7}
.access__grid{
  margin-top:15.2rem;display:flex;gap:8.22%;
  border-top:1px solid rgba(187,174,130,.25);padding:9.6rem 0 0;
}
.access__col{flex:0 0 auto}
.access__col:nth-child(1){width:45.96%}
.access__col:nth-child(2){width:42.52%}
/* 見出しは styleIdForFill = qooCol/col4 (#bbae82) にバインド。塗りの #ffffff は古い焼き込み */
.access__col h3{font-family:var(--f-en);font-weight:600;font-size:2.1rem;line-height:1;color:var(--goldlt)}
.acc{margin-top:4rem;display:flex;flex-direction:column;gap:0.8rem}
.acc__row{display:flex;gap:0;align-items:center}
.acc__row dt{flex:0 0 17rem;font-size:1.6rem;font-weight:400;line-height:1}
.acc__row dd{flex:1 1 auto;font-size:1.6rem;line-height:1}
.acc__row--strong{margin-bottom:2.4rem}
.acc__row--strong dt,.acc__row--strong dd{font-size:1.8rem;font-weight:500}
/* 路線バスのみ複数行：Figma lh=1.6 */
.acc__row--multi{align-items:flex-start}
.acc__row--multi dd{line-height:1.6}
.acc__row dd b{font-family:var(--f-en);font-weight:400;font-size:2.4rem;line-height:1}
.acc__row dd small{font-size:1.2rem}

/* =========================================================
   FOOTER   Figma: footer 1920x1192 / 内容は 1484 コンテナ内
   ========================================================= */
.ftr{position:relative;background:var(--footerbg);padding:4.8rem 0 0}
.revbanner{
  --rev-hover:#6b6349;             /* ホバー時の地色＝#948966 を 28% 暗くした濃いゴールド */
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:6.4rem;
  margin:0 var(--edge);
  height:24rem;border-radius:0.5rem;background:var(--gold);
  padding:0 6.69%;                 /* Figma: 内容左端 x=122 / 1824 */
}
/* 地色は左から右へスライドして入れ替わる（離すと右へ抜けていく） */
.revbanner::before{
  content:"";position:absolute;inset:0;background:var(--rev-hover);
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .7s cubic-bezier(.65,.05,.36,1);
}
.revbanner:hover::before{transform:scaleX(1);transform-origin:0 50%}
.revbanner__en,.revbanner__ja,.revbanner__line{position:relative;z-index:1}
/* 罫：右端へ吸い込まれて消え、左端から引き直される */
.revbanner__line{flex:1 1 auto;height:1px;background:#fff;max-width:21.8rem;margin-left:auto}
.revbanner:hover .revbanner__line{animation:revline 1.4s}
@keyframes revline{
  0%   {transform:scaleX(1);transform-origin:100% 50%;
        animation-timing-function:cubic-bezier(.6,0,.85,.2)}  /* 加速しながら右へ消える（0.56s） */
  39.9%{transform:scaleX(0);transform-origin:100% 50%}
  40%  {transform:scaleX(0);transform-origin:0 50%;
        animation-timing-function:cubic-bezier(.2,.8,.25,1)}  /* 左から伸びて静かに止まる（0.84s） */
  100% {transform:scaleX(1);transform-origin:0 50%}
}
/* 英語は一文字ずつ下から迫り上がる（親でマスク／--d で 32ms ずつ遅延） */
.revbanner__en{
  font-size:4.8rem;line-height:1;
  display:block;overflow:hidden;margin:-.16em 0;padding:.16em 0;
}
.revbanner__en .dsp--r i{display:inline-block;font-style:normal}
.revbanner:hover .revbanner__en .dsp--r i{
  animation:revup .58s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--d,0) * 32ms);
}
@keyframes revup{
  0%  {transform:translateY(112%)}
  100%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .revbanner::before{transition:none}
  .revbanner:hover .revbanner__line,
  .revbanner:hover .revbanner__en .dsp--r i{animation:none}
}
.revbanner__ja{font-size:1.6rem;font-weight:500;letter-spacing:.02em;line-height:1}

/* 内容ブロック：Figma の y=489〜1192 を 1484 コンテナ内の絶対配置で再現 */
.ftr__body{
  position:relative;
  width:var(--innerW);margin:20.1rem auto 0;
  height:70.3rem;
}

/* 左 : ロゴ ＋ 名称・住所（x=219 / y=489, 925） */
.ftr__brand{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:16rem}
.ftr__logo{width:20rem;height:auto;aspect-ratio:242/329.6}
.ftr__addr{display:flex;flex-direction:column;gap:1.6rem}
.ftr__name{display:flex;align-items:baseline;gap:1rem;font-family:var(--f-en);font-weight:500}
.ftr__name span{font-size:1.4rem}
.ftr__name b{font-size:2.6rem;font-weight:600}
.ftr__zip{font-family:var(--f-en);font-weight:300;font-size:1.4rem;line-height:1.6}
.ftr__zip a{margin-left:0.8rem;font-weight:400;font-size:1.4rem;text-decoration:underline;transition:opacity .3s}
.ftr__zip a:hover{opacity:.7}

/* 中央 : くう・ねる・たす ／ ナビ ／ SNS（x=556 / y=503, 575, 719） */
.ftr__nav{
  position:absolute;left:22.78%;top:1.4rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:4.8rem;
}
.ftr__triad{display:flex;gap:6.8rem}
.ftr__triad li,.ftr__links li{line-height:1}
.ftr__triad a,.ftr__links a{display:block}
.ftr__triad a{font-size:2.4rem;font-weight:500;letter-spacing:.2em;line-height:1}
.ftr__links{display:flex;gap:8.2rem}
.ftr__links li + li{margin-top:2.4rem}
.ftr__links a{font-size:1.6rem;line-height:1}
.ftr__sns{display:flex;gap:6.1rem}
.ftr__sns a{
  display:block;width:3.3rem;height:3.4rem;background:#fff;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
  transition:opacity .3s;
}
.ftr__sns a:hover{opacity:.7}
.ftr__sns li:nth-child(1) a{--ico:url(../images/icon-instagram.svg)}
.ftr__sns li:nth-child(2) a{--ico:url(../images/icon-line.svg)}
.ftr__sns img{display:none}

/* 右 : CONTACT ／ メールボタン ／ TEL（右端 1702 = コンテナ右端） */
.ftr__contact{position:absolute;right:0;top:1.1rem;width:29.3rem}
.ftr__ct-en{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-en);font-size:2.7rem;letter-spacing:-.05em;line-height:1;
  color:#fff;
}
.ftr__ct-en span{font-family:var(--f-jp);font-size:1.6rem;font-weight:500;letter-spacing:0}
/* Figma: Frame 152  293x80 / #000 / r5 / padding 16-24
   └ Frame 155 245x48  SPACE_EVENLY（テキストと右ブロックの間 4.7rem）
     ├ テキスト  Noto Sans JP Medium 1.8rem / 行送り20px
     └ Frame 154 36x48
        ├ Line 2   左端に 0.5px の白い縦罫（4.8rem）
        └ Polygon  右端に橙の正三角形を90°回転（9 × 10.39） */
.mailbtn{
  margin-top:3.2rem;
  height:8rem;border-radius:0.5rem;background:var(--gold);
  display:flex;align-items:center;justify-content:space-between;padding:1.6rem 2.4rem;
  transition:opacity .3s;
}
.mailbtn:hover{opacity:.8}
.mailbtn span{font-size:1.8rem;font-weight:500;line-height:2rem}
.mailbtn__arw{position:relative;display:block;width:3.6rem;height:4.8rem;flex:none}
.mailbtn__arw::before{content:"";position:absolute;left:0;top:0;width:.5px;height:100%;background:#fff}
.mailbtn__arw::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:0;height:0;
  border-top:0.52rem solid transparent;
  border-bottom:0.52rem solid transparent;
  border-left:0.9rem solid #fff;
}
.ftr__tel{margin-top:5.6rem;text-align:center;color:#fff}
.ftr__tel p{display:flex;align-items:baseline;justify-content:center;gap:0.8rem;font-family:var(--f-en)}
.ftr__tel p span{font-size:2rem}
.ftr__tel p a{font-size:3.8rem;letter-spacing:.03em;line-height:1}
.ftr__hours{margin-top:1.6rem;font-family:var(--f-en);font-size:1.3rem;line-height:1;display:block}

/* コピーライト：y=978 / 右端揃え */
.ftr__copy{position:absolute;right:0;top:48.9rem;font-family:var(--f-en);font-size:1.4rem;line-height:1;color:#fff}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(2.4rem);transition:opacity .9s ease,transform .9s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee__track{animation:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   TABLET  ( - 119.9rem / base 768 )
   ========================================================= */
@media (max-width:1199px){
  .loader{--kv-w:min(48vw,41rem)}
  /* 基準幅 768。768〜1199 で拡縮し、両端で止める */
  html{font-size:calc(clamp(768px,100vw,1199px) / 76.8)}
  :root{
    --edge:clamp(1.6rem,3.2vw,3.2rem);
    --pad:clamp(1.6rem,4vw,3.2rem);
    --innerW:min(148.4rem,calc(100% - 2 * var(--pad)));
    --narrow:0%;
  }
  .hdr{padding-top:2.4rem;--hdr-fade:9.2rem}
  .hdr.is-solid{padding-top:1.8rem;padding-bottom:1.6rem}
  .hdr__logo img{width:14rem}
  .gnav{display:none}
  .hdr__right{gap:2.4rem}

  .rail-wrap{display:none}
  /* ドロワー：スマホと同じ縦組み。タブレットは中央寄せ。
     rem は 1199 で 1.56 倍になり間延びするので、ここは px で固定する */
  .drawer__inner{width:calc(100% - 2 * var(--edge));flex-direction:column;gap:40px;align-items:center;margin-block:auto}
  .drawer__foot{width:min(480px,100%)}
  .drawer__nav{gap:24px}
  .drawer__nav a{gap:8px}
  .drawer__nav em{font-size:32px}
  .drawer__nav span{font-size:14px;white-space:nowrap}
  .btn-gold{padding:20px 24px 16px;font-size:24px;gap:8px;width:100%}
  .btn-gold span{font-size:12px}

  .revbtn__in{min-height:20rem;padding:1.6rem 1rem;gap:1.2rem}
  .revbtn__in--fill{min-height:0}
  .revbtn__ja{font-size:1.3rem}
  .revbtn__en{font-size:1.2rem}

  .hero__ja{font-size:clamp(3.4rem,5.6vw,5.6rem)}
  .hero__en{font-size:1.4rem}
  /* min-height:60rem は PC の縮尺で決めた下限。TB の縮尺（768 で等倍、
     1199 で 1.56 倍）だと 937px まで伸び、横向きの画面でコピーが
     画面外へ落ちる。TB 以下は画面高だけで決める */
  .hero{height:100svh;min-height:0}
  /* くうねるたすのナビは畳む（ヘッダーとドロワーに同じ導線がある）。
     空いた分、コピーはナビが居た高さまで下げる */
  .triad{display:none}
  .hero__lead{left:var(--edge);bottom:5.6rem}
  .hero__coord{display:none}
  .hero__sns{gap:2.4rem}

  /* concept : 並びは 2 列のグリッドにするが、挙動は PC と同じにする。
     見出しが画面に貼り付いたまま、写真がその上を流れて見出しが消える。
     等高線 → 見出し → 写真 の順に -100svh で重ねるのは PC と同じ組み方 */
  .concept{padding:0;display:flex;flex-direction:column}
  .concept__head{
    order:1;position:sticky;top:0;transform:none;
    margin:-100svh auto 0;height:100svh;width:min(72rem,88vw);
  }
  .concept__ttl{font-size:2.6rem}
  .concept__txt{margin-top:4.8rem;font-size:1.5rem;line-height:2.4}
  .concept__canvas{
    order:2;position:relative;z-index:2;
    margin-top:-100svh;                  /* 見出しに重ねる */
    aspect-ratio:auto;
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:1.6rem;row-gap:8rem;align-items:start;
    padding:calc(100svh + 10rem) var(--edge) 16rem;   /* 最初の 1 画面は見出しだけ見せる */
  }
  /* 16:9 のままだと縦長の画面で上の帯にしか出ず、線も細くて見えない。
     枠いっぱいに拡大して中央（等高線の中心）を見せる */
  .concept__deco{position:sticky;top:0;height:100svh;opacity:.08}
  .concept__deco img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 50%}
  .zoom{order:3;height:170vh}
  .zoom__fig{--z-w0:66vw}
  /* PC の散らし方（左右交互・大小まぜ・余白多め）を 12 列で引き継ぐ。
     狭い画面では PC の 17〜27% だと小さすぎるので、幅は上げてある。
     4 と 5 だけ同じ行に並べて、PC の「小さいのが二つ寄る」場面を残す */
  .cph{position:static;width:auto !important;border-radius:0.4rem}
  /* 大小の開きは PC と同じくらい（PC は 17.7〜50% の 2.8 倍）。
     大 2 枚・中 3 枚・小 3 枚で、67〜75% に固まらないようにする */
  .cph--1{grid-area:1/5/2/13;  aspect-ratio:1/1}            /* 67% 大 */
  .cph--2{grid-area:2/1/3/4;   aspect-ratio:341/530.32}     /* 25% 小 */
  .cph--3{grid-area:3/4/4/13;  aspect-ratio:960/631}        /* 75% 大・右寄せ */
  .cph--4{grid-area:4/10/5/13; aspect-ratio:1/1;margin-top:9rem}  /* 25% 小 */
  .cph--5{grid-area:4/1/5/5;   aspect-ratio:1/1}            /* 33% 小 */
  .cph--6{grid-area:5/7/6/13;  aspect-ratio:511/323.84}     /* 50% 中 */
  .cph--7{grid-area:6/1/7/9;   aspect-ratio:803/536}        /* 67% 大 */
  .cph--8{grid-area:7/8/8/13;  aspect-ratio:681/454}        /* 42% 中 */

  /* SAVOR などの大きい英字は、PC では写真の右下に重ねているが、
     狭い幅では収まらない。写真の下に置いて中央揃えにする */
  .sec__display{
    height:auto;
    /* 字の上側が写真に重なる。em 基準なので文字サイズを変えても比率は保つ */
    margin-top:-0.3em;margin-bottom:5.6rem;
    text-align:center;padding-right:0;
    font-size:clamp(7.2rem,12vw,14rem);
  }
  /* 縦書きの 喰う／寝る／足す は PC と同じ縦一列のまま。
     top:72% だと写真の下端までの高さが足りず、1 字ごとに列が折り返して
     横並びになっていた。下端基準にして高さを content に任せる */
  .sec__feature figcaption{right:2.4rem;top:auto;bottom:2.4rem}
  /* 見出しとテキストの横並びは、狭い幅だと見出し欄が細くなりすぎる。
     1 カラムに積む（.lead は見出し 33.3% 固定、カフェの dt/dd は
     768 で dd が 82px しか残らなかった） */
  .lead{flex-direction:column;gap:2.4rem}
  .lead__ttl{flex:none}
  .lead__txt{padding-top:0}
  .marquee{--mq-gap:2.4rem}   /* 無限ループの写真間 24px（768 基準）*/
  .cards{gap:2.4rem}          /* 3 カラム・2 カラムの間隔 24px */

  /* ---- 文字は一段小さく、行間も詰める（768 基準）---- */
  /* 本文 */
  .lead__txt,.block__txt{font-size:1.3rem;line-height:1.85}
  .plan__txt p,.room__txt p,.card__txt,.card__body p,.frow__body{font-size:1.3rem;line-height:1.85}
  .features__row dd span{font-size:1.3rem;line-height:1.6}
  .option__list li{font-size:1.4rem;line-height:1.7}
  .notes li,.notes--lg li,.notes--sm li{font-size:1.2rem;line-height:1.6}
  .kv dt{font-size:1.2rem;line-height:1.7}
  .kv dd{font-size:1.1rem;line-height:1.7}
  .spec li{font-size:1.3rem}
  .concept__txt{font-size:1.35rem;line-height:2.1}
  /* 小見出し */
  .lead__ttl,.card__head h4,.features__head h3{font-size:1.8rem;line-height:1.7}
  .plan__txt h4,.room__txt h4,.card__body h5,.frow__txt h4{font-size:1.6rem;line-height:1.5}
  .features__row dd b{font-size:1.4rem}
  .concept__ttl{font-size:2.2rem;line-height:1.5}
  /* 英字見出し */
  .block__en,.room__head h3{font-size:3.2rem}
  .plan__en,.option__ttl,.frow__head h3{font-size:2rem}
  .plan__ja,.frow__head p{font-size:1.2rem}   /* 英語タイトルに合わせる */
  .features__row dt{font-size:1.8rem}
  .features__en{font-size:1.4rem}
  .tag{font-size:1.3rem;padding:0.5rem 1.2rem 0.6rem}   /* 要予約 / 宿泊者無料 */

  /* 設備・備品／ご利用の前に（dt 17.1rem 固定｜dd）も縦に積む */
  .kv{flex-direction:column;gap:0.8rem}
  .kv dt{flex:none}
  .kv dd{flex:none;width:100%}

  /* ---- 余白（PC の値がそのまま出ていたので詰める）---- */
  .sec__body{padding:60rem 0 16rem}
  .access__body{padding:60rem 0 12rem}
  .cafe__body{padding-bottom:8rem}
  .facility{padding-bottom:8rem}
  .ttl-block{margin-top:20rem}              /* FACILITIES 見出しの上 */
  .facility .inner{margin-top:8rem;gap:10rem}   /* 見出し→最初の行 / 行間 */
  .rooms{margin-top:14rem;gap:12rem}
  .block{margin-top:14rem}
  .block + .block{margin-top:12rem}
  .block__head{margin-top:6.4rem}
  .block:first-of-type .block__head,.block .wide + .block__head{margin-top:6.4rem}
  .features{margin-top:10rem}
  .sec--savor .wide{margin-top:10rem}
  .plans{margin-top:10rem}
  .sec--restore .wide:first-of-type{margin-top:10rem}
  .sec--restore .wide + .features + .wide,.sec--restore .features + .wide{margin-top:10rem}
  .option{margin-top:9.6rem}
  .option__cols{gap:6.4rem;margin-top:2.4rem}
  .notes{margin-top:8rem}
  .notes--sm{margin-top:2.4rem}
  .cards{margin-top:5.6rem}
  .kv,.card__body .kv:first-of-type{margin-top:2.4rem}
  .plan__img,.plan__txt,.room .slider,.frow__txt h4,.frow__txt .kv,.acc{margin-top:2.4rem}
  .block .notes--lg{margin-top:6.4rem}

  /* アクセスも 1 カラムへ。dt が 17rem 固定なので、393 では
     カラム幅 153px に収まらず外へはみ出していた */
  .access__grid{flex-direction:column;gap:4.8rem;padding-top:4.8rem;margin-top:8rem}
  .access__col:nth-child(1),.access__col:nth-child(2){width:100%}

  /* ---- アクセス ---- */
  .access__map figure{aspect-ratio:1/1}          /* 正方形に */
  .access__col h3{font-size:1.8rem}
  .acc__row dt,.acc__row dd{font-size:1.4rem}
  .acc__row--strong dt,.acc__row--strong dd{font-size:1.5rem}
  .access__name{font-size:1.7rem}
  .access__zip{font-size:1.3rem}
  .access__zip a{margin-left:1.6rem}

  /* ---- フッター ---- */
  /* PC は 1484 幅に対して高さ 240（約 6.2:1）。同じ比率で詰める */
  .revbanner{height:12rem;gap:2.4rem;padding:0 3.2rem}
  .revbanner__en{font-size:3.2rem}
  .revbanner__ja{font-size:1.4rem}
  .revbanner__line{max-width:12rem}
  .ftr{padding-bottom:8rem}
  .ftr__logo{width:12rem}
  .ftr__tel{margin-top:2.4rem}   /* メールボタンとの間 */
  /* お問い合わせ → ナビ → ロゴ の順 */
  .ftr__contact{order:1}
  .ftr__nav{order:2}
  .ftr__brand{order:3}
  .ftr__copy{order:4}
  /* ロゴを 200 → 120px に詰めたぶん、下の社名も同じ比率で下げる */
  .ftr__name span{font-size:1.2rem}
  .ftr__name b{font-size:2rem}

  /* ---- ボタンの高さ ---- */
  .btn-book{height:5.6rem}
  .btn-link{height:4.4rem;font-size:1.3rem}
  .btn-link img{width:1.5rem;height:1.5rem}
  .mailbtn{height:6.4rem}
  .revbtn__in{min-height:17rem}
  /* 散策スポット等のブロック見出し（見出し 30.9% 固定＋本文） */
  .block__head{flex-direction:column;align-items:flex-start;gap:2.4rem}
  .block__ttl{flex:none}
  .block__txt{flex:none;width:100%}
  /* 客室共通の特別な体験。見出し｜一覧 と、各行の dt｜dd の
     二重の横並びをどちらも縦に積む */
  .features{flex-direction:column;gap:3.2rem}
  .features__head{flex:none;padding-top:0}
  .features__list{flex:none;width:100%}
  .features__row{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .features__row dt{flex:none}
  .features__row dd{width:100%}   /* 行ごとに折り返し幅が変わらないように */

  /* くうはうす等の客室と、施設案内の各行。狭い幅では本文の欄が
     366px / 301px まで痩せるので縦に積む */
  .room__body{flex-direction:column;gap:3.2rem}
  .room__txt{max-width:none}
  /* flex:0 0 29.3rem は基準値。縦積みにすると幅ではなく高さに効いて
     縦長の箱になるので、幅で指定し直す */
  .btn-book{flex:none;width:29.3rem;max-width:100%;align-self:flex-end}
  .frow{flex-direction:column;gap:3.2rem}
  .frow__img{flex:none;width:100%}
  /* つながるカフェは PC の絶対配置のままだと、写真が散らしの位置に
     残り、intro が 204px まで痩せる。他セクションと同じ流し込みに
     組み直す。最初の写真＋タイトルは SAVOR 等と同じ扱い */
  .cafe__body{
    position:relative;z-index:1;
    width:var(--innerW);margin-inline:auto;
    display:flex;flex-direction:column;align-items:stretch;
    padding-bottom:16rem;
  }
  .cafe__wide,.cafe__sq,.cafe__shot,.cafe__display,.cafe__intro,
  .cafe__vtxt,.ttl-block--menu,.cafe__body>.inner{
    position:static;left:auto;right:auto;top:auto;transform:none;
    width:100%;margin-left:0;
  }
  .cafe__wide--l{border-radius:0.5rem;order:1}
  .cafe__display{
    order:2;margin-top:-0.3em;
    text-align:center;padding-right:0;
    font-size:clamp(7.2rem,12vw,14rem);
  }
  /* 同じ文言が写真の figcaption にもあるので、こちらは出さない */
  .cafe__vtxt{display:none}
  /* 2 枚目は右を空けて、縦書きの figcaption をその余白に出す。
     figure の overflow で切られないよう、角丸は img 側へ移す */
  .cafe__shot{
    /* figcaption の基準にするので static には戻さない */
    position:relative;order:4;margin-top:8rem;aspect-ratio:803/422;
    width:78%;margin-right:auto;overflow:visible;border-radius:0;
  }
  .cafe__shot img{border-radius:0.5rem}
  /* 右に空けた 22% の帯のほぼ中央へ。rem 固定だと SP で右に寄りすぎる。
     % は写真（＝包含ブロック）の幅に対する値 */
  .cafe__shot figcaption{right:auto;left:calc(100% + 17%);transform:translateX(-50%);top:0;font-size:2.8rem}
  .cafe__wide--r{order:5;margin-top:4.8rem;border-radius:0.5rem}
  /* 最後の 1 枚は左を空ける */
  .cafe__sq{order:6;margin-top:4.8rem;width:78%;margin-left:auto}
  .cafe__intro{order:7;margin-top:8rem;gap:3.2rem}
  .ttl-block--menu{order:8;margin-top:20rem}       /* FACILITIES と同じ */
  .cafe .inner{padding-top:0}                      /* PC 用の 384.8rem を解除 */
  .cafe__body>.inner{order:9;padding-top:8rem}     /* MENU LIST の下 */
  .option--cafe{margin-top:8rem}
  .menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:4.8rem 2.4rem}
  .menu__row{margin-top:1.6rem}
  .menu__row h4{font-size:1.4rem}
  .menu__row p{margin-top:0.6rem;font-size:1rem}
  .menu__row em{font-size:1.4rem}

  /* footer : PC は絶対配置で 3 カラムに置いているが、狭い幅では
     内側の幅が足りず、ロゴ・ナビ・CONTACT が重なる。縦に積み直す */
  .ftr__body{
    position:static;height:auto;margin:8rem auto 0;
    display:flex;flex-direction:column;align-items:center;gap:6.4rem;
    text-align:center;
  }
  .ftr__brand{position:static;align-items:center;gap:3.2rem}
  .ftr__addr{align-items:center}
  .ftr__name{justify-content:center}
  .ftr__nav{position:static;align-items:center;gap:4rem;margin-top:3.2rem}  /* 電話番号ブロックとの間 */
  .ftr__triad{gap:5.6rem;justify-content:center}
  .ftr__links{gap:6.4rem;justify-content:center}
  .ftr__sns{gap:4.8rem;justify-content:center}
  .ftr__contact{position:static;width:fit-content;max-width:100%}  /* ボタン幅を電話番号に合わせる */
  .ftr__copy{position:static;top:auto;right:auto;margin-top:4.8rem}
}

/* =========================================================
   SP  ( - 76.7rem / base 393 : 全体拡縮 + 最大/最小幅制御 )
   1rem = 1rem @393  /  min 32rem  max 56rem
   ========================================================= */
@media (max-width:767px){
  .loader{--kv-w:min(68vw,38rem)}
  .loader__logo{width:10rem}
  /* 基準幅 393。320〜560 で拡縮し、両端で止める */
  html{font-size:calc(clamp(320px,100vw,560px) / 39.3)}

  :root{
    --edge:1.6rem;
    --pad:1.6rem;
    --innerW:calc(100% - 3.2rem);
  }
  body{line-height:1.8}

  /* header */
  .hdr{padding:1.6rem var(--edge) 0;gap:1.2rem}
  .hdr.is-solid{padding:1.4rem var(--edge) 1.2rem}
  .hdr__left{gap:1.2rem}
  .hdr__logo img{width:12rem}
  .lang__btn{width:5.2rem;height:2.2rem;padding:0 0 0 1.6rem;gap:1.1rem;font-size:1.2rem}
  .lang__btn>span{width:1.6rem}
  .lang__caret{width:.9rem;height:.9rem}
  .hdr{--hdr-fade:8rem}
  .hdr__right{gap:1.2rem}
  .ham__bars{width:2.2rem;height:.6rem}
  .ham__label{font-size:1rem}

  /* スマホは画面端まで伸ばし、下寄せのまま。
     縦が短い端末でも先頭の CONCEPT がヘッダーに近づきすぎないよう上を確保する */
  .drawer{padding-top:128px}
  .drawer__nav em{font-size:28px}
  .drawer__inner{align-items:stretch;margin-top:auto;margin-bottom:0}
  .drawer__foot{width:100%}

  /* fixed reserve : bottom bar */
  /* 画面の中心から右端までの横バー。四辺に余白を取る */
  .revbtn{left:auto;right:var(--edge);bottom:var(--edge);width:calc(50% - var(--edge));border-radius:0.3rem}
  .revbtn__in{
    min-height:0;flex-direction:row;gap:1.2rem;padding:0.9rem 1.2rem;
  }
  .revbtn{--revfill-out:inset(0 0 0 100%)}   /* 横バーなので右へ抜ける */
  .revbtn__in--fill{clip-path:inset(0 100% 0 0)}
  .revbtn:hover .revbtn__in--fill{clip-path:inset(0)}
  .revbtn__ja{writing-mode:horizontal-tb;font-size:1.2rem}
  .revbtn__line{width:1px;height:1.6rem}
  .revbtn__en{writing-mode:horizontal-tb;font-size:1.2rem}

  /* hero */
  .hero{height:100svh;min-height:0}
  .hero__coord{display:none}
  .hero__sns{right:1.2rem;gap:2rem;width:1.4rem}
  .hero__sns a{font-size:1.1rem}
  .hero__lead{left:1.6rem;right:1.6rem;bottom:7.2rem;gap:.8rem}
  .hero__en{font-size:1.2rem;padding-left:.2rem}
  .hero__ja{font-size:3rem;line-height:1.4}
  .triad__ja{font-size:1.8rem}
  .triad__en{font-size:.9rem}
  .triad__arw{width:1rem;height:.5rem}

  /* concept */
  .concept__head{width:calc(100% - 11.2rem)}   /* 左右 5.6rem ずつ空ける */
  .ttl-en{font-size:1.8rem}
  .concept__ttl{margin-top:2.4rem;font-size:2rem;line-height:1.8}
  .concept__txt{margin-top:3.2rem;font-size:1.3rem;line-height:2}
  .concept__txt br{display:none}
  .concept__canvas{column-gap:1.2rem;row-gap:18rem;padding:calc(100svh + 8rem) 1.6rem 14rem}   /* 写真同士の縦の間隔を広めに */
  /* 12 カラムのまま、1 枚あたりの占有幅を広げてメリハリを付け直す */
  .cph--1{grid-area:1/4/2/13}                     /* 75% 大 */
  .cph--2{grid-area:2/1/3/6}                      /* 42% 小 */
  .cph--3{grid-area:3/3/4/13}                     /* 83% 大・右寄せ */
  .cph--4{grid-area:4/8/5/13;margin-top:6rem}     /* 42% 小 */
  .cph--5{grid-area:4/1/5/7}                      /* 50% 中 */
  .cph--6{grid-area:5/5/6/13}                     /* 67% 中 */
  .cph--7{grid-area:6/1/7/11}                     /* 83% 大 */
  .cph--8{grid-area:7/6/8/13}                     /* 58% 中 */
  .zoom{height:160vh}
  /* 高さはそのままに、窓の幅だけ詰めて左右をトリミングする */
  .zoom__fig{--z-w0:calc((100vw - 3.2rem) * .88);--z-h0:calc((100vw - 3.2rem) * .66704)}

  /* section common */
  .sec__main,.cafe__main,.access__main{height:100vh;aspect-ratio:auto}
  .sec__body{padding:40rem 0 10rem}
  .sec__feature{border-radius:.5rem;aspect-ratio:1/1}
  /* 1:1 だと右の男性が切れるので、二人が入る位置まで右へ寄せる */
  .sec--savor .sec__feature img{object-position:68% 50%}
  .sec--enrich .sec__feature img{object-position:45% 50%}
  .sec__feature figcaption{right:1.6rem;top:auto;bottom:1.6rem;font-size:2.2rem}
  .sec__display{margin-top:-0.3em;margin-bottom:4rem;font-size:7.2rem}   /* 字の上を写真に重ねる */
  .vtxt--lg{font-size:2.2rem}

  .lead{gap:1.6rem}
  .lead__ttl{font-size:1.8rem;line-height:1.8}
  .lead__txt{font-size:1.4rem;line-height:2}
  .lead__txt br,.plan__txt p br,.room__txt p br{display:none}

  .wide{aspect-ratio:1/1;border-radius:.5rem}
  .wide img[src$="enrich-retreat.webp"]{object-position:96% 50%}   /* リトリート */
  .sec--savor .wide{margin-top:6.4rem}
  .plans{grid-template-columns:1fr;margin-top:6.4rem;gap:6.4rem}
  .plan__ja{font-size:1.1rem}
  .plan__en{font-size:2rem}
  .plan__price{font-size:2rem}
  .plan__price span{font-size:1.3rem}
  .plan__img{margin-top:2.4rem;border-radius:.5rem}
  .plan__txt{margin-top:2.4rem}
  .plan__txt h4{font-size:1.6rem}
  .plan__txt p{margin-top:1.6rem;font-size:1.3rem;line-height:2}

  .option{margin-top:6.4rem}
  .option__ttl{font-size:2rem}
  .option__cols{grid-template-columns:1fr;gap:0;margin-top:2.4rem}
  .option__list li{font-size:1.3rem;padding-bottom:1.2rem}
  .notes{margin-top:5.6rem;gap:.8rem}
  .notes--sm{margin-top:2.4rem;gap:1.2rem}
  .notes li{font-size:1.2rem;line-height:1.8}
  .notes--lg li{font-size:1.3rem}

  .features{margin-top:6.4rem;gap:2.4rem}
  .features__head h3{font-size:1.8rem}
  .features__en{margin-top:.8rem;font-size:1.3rem}
  .features__row{padding:2.4rem 0;gap:1.2rem}
  .features__row dt{font-size:1.6rem}
  .features__row dd b{font-size:1.4rem}
  .features__row dd span{font-size:1.2rem}
  .sec--restore .wide:first-of-type,.sec--restore .features + .wide{margin-top:6.4rem}

  .rooms{margin-top:8rem;gap:8rem}
  .room__head p{font-size:1.2rem}
  .room__head h3{font-size:2.4rem}
  /* 客室スライダーだけ画面いっぱい・角丸なし */
  .room .slider{margin-top:2.4rem;width:100vw;margin-left:calc(50% - 50vw);border-radius:0}
  .slider{border-radius:.5rem}
  .slider__btn{width:4rem;height:4rem}
  .slider__btn--prev{left:0.8rem}
  .slider__btn--next{right:0.8rem}
  .slider__count{right:1.2rem;bottom:1.2rem;font-size:1.2rem}
  .spec{margin:1.6rem 0 0 auto;flex-direction:column;gap:0;width:50vw}   /* 画面の半分・右寄せ */
  .spec li{width:100%;height:auto;padding:0.6rem 0;border:0;font-size:1.3rem}   /* 区切り線なし */
  .spec li + li{border-left:0}
  .room__body{margin-top:4.8rem;gap:2.4rem}   /* スペックとリード文の間 */
  .room__txt h4{font-size:1.6rem}
  .room__txt p{margin-top:1.6rem;font-size:1.3rem;line-height:2}
  .kv{margin-top:2.4rem}
  .kv dt{font-size:1.3rem}
  .kv dd{font-size:1.2rem}
  .btn-book{height:5.6rem;width:100%;max-width:none;align-self:stretch;gap:1.6rem;margin-top:2.4rem}
  .btn-book b{font-size:1.5rem}
  .btn-book span{font-size:1.3rem}

  .block{margin-top:8rem}
  .block + .block{margin-top:8rem}
  /* 下線だけ画面幅いっぱいに伸ばす（中身の位置はそのまま） */
  .block__head,
  .block:first-of-type .block__head,
  .block .wide + .block__head{margin-top:2.4rem}   /* 下線との余白と同じ */
  .block__head{gap:1.6rem;padding-bottom:2.4rem;
               width:100vw;margin-left:calc(50% - 50vw);padding-left:1.6rem;padding-right:1.6rem}
  .block__ja{font-size:1.3rem}
  .block__en{margin-top:.8rem;font-size:2.4rem}
  .block__txt{font-size:1.3rem;line-height:2}
  .cards{margin-top:4rem;gap:4rem}
  .cards--3,.cards--2{grid-template-columns:1fr}
  .card__head h4{font-size:1.8rem}
  .card__head p{font-size:1.1rem}
  .card__img{margin-top:1.6rem;border-radius:.5rem}
  .cards--2 .card__img{aspect-ratio:4/3}
  .card__txt,.card__body p{font-size:1.3rem;line-height:2}
  .card__body h5{font-size:1.6rem}
  .tag{font-size:1.2rem;padding:.5rem 1rem}
  .btn-link{height:4.8rem;font-size:1.4rem}
  .btn-link img{width:1.5rem;height:1.5rem}

  .facility{padding-bottom:8rem}
  .marquee{--mq-gap:1.6rem}
  .mq{width:16rem}
  .mq--b{margin-top:2.4rem}
  .ttl-block{margin-top:8rem}
  .ttl-block__ja{font-size:1.3rem}
  .ttl-block__en{font-size:3rem}
  .facility .inner{margin-top:6.4rem;gap:6.4rem}
  .frow{gap:2.4rem}
  /* 客室スライダーと同じく画面いっぱい・角丸なし */
  .frow__img{aspect-ratio:3/2;width:100vw;margin-left:calc(50% - 50vw);border-radius:0}
  .frow__img .slider__slide{aspect-ratio:3/2}
  .frow__head p{font-size:1.1rem}
  .frow__head h3{font-size:2rem}
  .frow__txt h4{margin-top:2.4rem;font-size:1.6rem}
  .frow__body{font-size:1.3rem;line-height:2}
  .frow__txt .kv{margin-top:2.4rem}

  .cafe__body{gap:0;padding:40rem 0 8rem}   /* 左右は他セクションと同じ幅 */
  .cafe__wide--l{aspect-ratio:1/1}          /* 先頭写真は他セクションと同じ正方形 */
  .cafe__wide--l img{object-position:27% 50%}   /* 正方形では二人が中央に来る位置 */
  .cafe__display{font-size:5.2rem}
  .cafe__wide--r,.cafe__sq{margin-top:8rem}   /* メイン写真下の3枚の間隔 */
  .cafe__intro .lead__ttl{font-size:1.8rem}
  .cafe__intro .lead__txt{margin-top:0.8rem;font-size:1.3rem}   /* 見出しとの間 */
  .hide-sp{display:none}
  .cafe__info>div{font-size:1.3rem}          /* 見出し／内容の 2 カラム */
  .cafe__info dt{flex:0 0 8rem;font-weight:500}
  .cafe__wide--l,.cafe__wide--r,.cafe__sq,.cafe__shot{border-radius:.5rem}
  /* 縦書きラベルは写真の右の余白に置く。right を併記すると幅 0 に潰れる */
  .cafe__shot{aspect-ratio:4/3}
  .cafe__shot figcaption{font-size:2.2rem;right:auto;top:0}
  .menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:3.2rem 1.6rem}
  .menu__item figure{border-radius:.5rem}
  .menu__row{margin-top:1.2rem;gap:0.8rem}
  .menu__row h4{font-size:1.2rem}
  .menu__row p{margin-top:.5rem;font-size:1rem}
  .menu__row em{font-size:1.2rem}
  .option--cafe{margin-top:4.8rem}

  .access__body{padding:40rem 0 8rem}
  .access .inner{margin-top:4.8rem}
  .access__map figure{aspect-ratio:1/1;border-radius:.5rem}
  .access__addr{margin-top:2.4rem}
  .access__name{font-size:1.6rem}
  .access__zip{margin-top:1.2rem;font-size:1.2rem;line-height:1.8}
  .access__zip a{display:block;margin:.4rem 0 0}
  .access__grid{margin-top:4rem;padding:4.8rem 0 0;gap:5.6rem}   /* 見出しの上を空ける */
  /* 393 では dt 17rem ＋ dd で横に収まらないので、SP だけ縦に積む */
  .acc__row{flex-direction:column;align-items:flex-start;gap:0.4rem}
  .acc__row dt{flex:none}
  .acc__row dd{flex:none;width:100%}
  .access__col h3{font-size:1.8rem}
  .acc{margin-top:2.4rem;gap:1.2rem}
  .acc__row--strong{margin-bottom:1.2rem}
  .acc__row dt,.acc__row dd{font-size:1.3rem}
  .acc__row--strong dt,.acc__row--strong dd{font-size:1.5rem}
  .acc__row dd b{font-size:1.8rem}
  .acc__row dd small{font-size:1.1rem}

  .ftr{padding:1.6rem 0 8rem}
  /* 英字と和文を縦積みで中央揃え、罫線は出さない */
  .revbanner{height:auto;padding:4.8rem 1.6rem;
             flex-direction:column;justify-content:center;align-items:center;gap:0.8rem}
  .revbanner__line{display:none}
  .revbanner__en{font-size:3.2rem}
  .revbanner__ja{font-size:1.2rem}
  .ftr__body{margin-top:6.4rem;gap:4.8rem}
  .ftr__logo{width:10rem}
  .ftr__brand{margin-top:-2.4rem}   /* ロゴ上の余白 */
  .ftr__brand{gap:3.2rem}
  /* くうねるたすの前で改行 */
  .ftr__name{flex-direction:column;align-items:center;gap:0}
  .ftr__name span{font-size:1.2rem}
  .ftr__name b{font-size:2rem}
  .ftr__zip{font-size:1.2rem}
  /* リンクだけ改行 */
  .ftr__addr{width:100%}
  .ftr__zip a{display:block}
  .ftr__zip a{font-size:1.2rem;margin:0.4rem 0 0}
  .ftr__triad{gap:3.2rem}
  .ftr__triad a{font-size:1.8rem}
  .ftr__links{gap:4rem}
  .ftr__links a{font-size:1.3rem}
  .ftr__links li + li{margin-top:1.6rem}
  .ftr__sns{gap:3.2rem}
  .ftr__sns a{width:2.6rem;height:2.68rem}
  .ftr__contact{width:min(26rem,100%)}   /* メールボタンの幅 */
  .ftr__ct-en{gap:1.6rem;justify-content:center;font-size:2.4rem}
  .ftr__ct-en span{font-size:1.3rem}
  .mailbtn{height:6.4rem;padding:1.2rem 1.6rem;margin-top:2.4rem}
  .mailbtn span{font-size:1.5rem}
  .mailbtn__arw{width:2.4rem;height:3.2rem}
  .mailbtn__arw::after{border-top-width:.35rem;border-bottom-width:.35rem;border-left-width:.6rem}
  .ftr__tel p span{font-size:1.5rem}
  .ftr__tel p a{font-size:2.8rem}
  .ftr__hours{font-size:1.1rem}
  .ftr__tel{margin-top:3.2rem}
  .ftr__hours{margin-top:1.2rem}
  .ftr__nav{margin-top:2.4rem}
  .ftr__copy{margin-top:3.2rem;font-size:1.1rem}
}

/* very small screens */
@media (max-width:359px){
  .drawer__nav{grid-template-columns:1fr}
}

/* ---------- anchor offset ---------- */
section[id],footer[id]{scroll-margin-top:9.6rem}
@media (max-width:767px){section[id],footer[id]{scroll-margin-top:6rem}}

/* =========================================================
   ENGLISH  ( /en/ )  縦組みなど日本語前提の指定を英語向けに直す
   ========================================================= */
/* 英語ページの基本書体は Roboto（和文専用の Noto Sans JP は使わない） */
[lang="en"]{--f-jp:"Roboto","Helvetica Neue",Arial,sans-serif}
/* 縦書き前提の和文（喰う／寝る／足す・つながるカフェ・サイドレール）は英語では出さない */
[lang="en"] .vtxt,
[lang="en"] .rail__ja,
[lang="en"] .rail__line{display:none}

/* ヒーローの見出し（The Seasons） */
[lang="en"] .hero__ja{font-size:clamp(6.4rem,6vw,11.6rem);line-height:0.98}
/* 見出しが大きくなったぶん、上のタグラインを少し離して上げる */
[lang="en"] .hero__en{margin-bottom:1.2rem}
/* くう・ねる・たすは、和文の全角アキではなく字送りで空ける（狭め） */
[lang="en"] .triad__ja{letter-spacing:.18em;margin-right:-.18em}
/* 「1 - 4 guests」などは折り返さない。和文前提の固定幅をやめて内容で決める */
[lang="en"] .spec li{width:24rem;justify-content:center;gap:1.6rem}
/* コンセプト・リード・客室の見出し（The Seasons）。改行位置は入力どおり */
[lang="en"] .concept__ttl{line-height:1.35}
[lang="en"] .lead__ttl{line-height:1.5;font-size:2.6rem}
@media (max-width:1199px){[lang="en"] .lead__ttl{font-size:2.4rem}}
@media (max-width:767px){[lang="en"] .lead__ttl{font-size:1.8rem}}
[lang="en"] .room__txt h4{font-size:2.6rem;line-height:1.45}
@media (max-width:1199px){[lang="en"] .room__txt h4{font-size:2.4rem}}
@media (max-width:767px){[lang="en"] .room__txt h4{font-size:1.7rem}}
/* 大きくしたぶん 33.3% では最長行が入らないので、見出し欄を広げる */
@media (min-width:1200px){[lang="en"] .lead > .lead__ttl{flex:0 0 42%;margin-top:1.28rem}}
/* 縦組みの英字も同じ位置から始める（見出しを字面基準で下げたぶんだけ下げる） */
@media (min-width:1200px){[lang="en"] .rail{margin-top:1.02rem}}
/* EXPLORING THE AREA などの見出しと、横の説明文の 1 行目の字面をそろえる。
   英語版は上の和文（.block__ja）を隠しているので、そのぶんの margin も外す */
@media (min-width:1200px){
  [lang="en"] .block__head{align-items:flex-start}
  [lang="en"] .block__en{margin-top:0}
  [lang="en"] .block__ttl{padding-top:0.31rem}   /* 本文のアセンダぶんの微差 2.3px */
}
/* 英文は 1 行が短くなるぶん行が空いて見えるので、本文の行間を詰める */
/* 英文は和文より 1 行が短くなるぶん行が空いて見えるので、説明文の行間を全体的に詰める。
   ブレイクポイントごとの指定より詳細度が高いので、この 1 か所で全デバイスに効く */
[lang="en"] .concept__txt{text-align:left;line-height:1.9}
[lang="en"] .lead__txt,
[lang="en"] .block__txt,
[lang="en"] .plan__txt p,
[lang="en"] .room__txt p,
[lang="en"] .card__txt,
[lang="en"] .card__body p,
[lang="en"] .frow__body,
[lang="en"] .notes li,
[lang="en"] .notes--lg li{line-height:1.75}
/* 見出しがアウトライン SVG になり、字面の下に 0.23em ぶんの余白が入るので本文までを詰める */
[lang="en"] .concept__txt{margin-top:4.8rem}
@media (max-width:1199px){[lang="en"] .concept__txt{margin-top:3.2rem}}
@media (max-width:767px){[lang="en"] .concept__txt{margin-top:2.4rem}}
[lang="en"] .spec li span,[lang="en"] .spec li em{white-space:nowrap}
/* Roboto は字間が空いて見えるので、英語ページ全体を少し詰める */
[lang="en"] body{letter-spacing:-.012em}
/* ヘッダーロゴは英語版（QOONEL+）。和文版と同じ高さに合わせる */
[lang="en"] .hdr__logo img{width:auto;height:2.307rem}
/* 固定の予約ボタンは「Reserve｜RESERVATION」で重複するので、英字だけにする */
[lang="en"] .revbtn__ja,[lang="en"] .revbtn__line{display:none}
/* フッターは英語ロックアップ（logo-full-en.svg）に差し替えるので比率も合わせる */
[lang="en"] .ftr__logo{aspect-ratio:242.23/320.93}
/* 英字は同じ級数でも和文より大きく見えるのでフッターの社名だけ下げる */
[lang="en"] .ftr__name b{font-size:2.2rem;font-weight:500}
@media (max-width:1199px){[lang="en"] .ftr__name b{font-size:1.8rem}}
@media (max-width:767px){[lang="en"] .ftr__name b{font-size:1.8rem}}
/* 英語の住所は和文より長いので、アクセスの住所だけ級数を下げる */
[lang="en"] .access__zip,[lang="en"] .access__zip a{font-size:1.4rem}
@media (max-width:1199px){[lang="en"] .access__zip,[lang="en"] .access__zip a{font-size:1.2rem}}
@media (max-width:767px){[lang="en"] .access__zip,[lang="en"] .access__zip a{font-size:1.1rem}}
/* 英語はサブラベル（Book your stay）がないぶん RESERVATION が大きく見えるので下げる */
[lang="en"] .btn-gold{font-size:2.2rem}
@media (max-width:1199px){[lang="en"] .btn-gold{font-size:19px}}
/* 縦の RESERVATION をキャッチコピーの高さにそろえる。
   コピー 2 行の実測 173px（1440px 時）＝23.07rem、下端は .hero__lead と同じ 3.7rem */
@media (min-width:1200px){
  [lang="en"] .revbtn{bottom:3.7rem}
  [lang="en"] .revbtn__in{min-height:23.07rem}
}
/* 日本語版で「英字＋和訳」の 2 段になっていた見出しは、英語では同じ語が
   2 回並ぶだけになる。大きい方だけを残して小さい方を伏せる */
[lang="en"] .block__ja,          /* EXPLORING THE AREA ／ Walks nearby   */
[lang="en"] .plan__ja,           /* PREMIUM BBQ PLAN  ／ Premium ...     */
[lang="en"] .room__ja,           /* QOO HOUSE         ／ qoo house       */
[lang="en"] .frow__head p,       /* SAUNA             ／ Sauna           */
[lang="en"] .features__en,       /* Shared by every room ／ ROOM FEATURES*/
[lang="en"] .card__head p,       /* Day-trip hot spring  ／ HOT SPA      */
[lang="en"] .menu__row p,        /* Bento of the day     ／ BENTO        */
[lang="en"] .ttl-block__ja,      /* FACILITIES        ／ Facilities      */
[lang="en"] .ftr__ct-en span,    /* CONTACT           ／ Contact         */
[lang="en"] .rmodal__btn span{display:none}   /* QOO HOUSE ／ qoo house  */

@media (max-width:1199px){[lang="en"] .hero__ja{font-size:6rem}}
@media (max-width:767px){[lang="en"] .hero__ja{font-size:3.5rem}}
@media (max-width:767px){[lang="en"] .spec li{width:100%;justify-content:space-between}}
@media (max-width:1199px){[lang="en"] .hdr__logo img{height:1.806rem}}
@media (max-width:767px){[lang="en"] .hdr__logo img{height:1.548rem}}

/* =========================================================
   THE SEASONS（自己ホスト）
   静的版では The Seasons を配信できずアウトライン SVG に起こしていたが、
   テーマでは woff2 を同梱するので実テキストに戻す。
   これで大きい英字の見出しもすべて管理画面から編集できる。
   字送りは静的版の SVG の字送りを実測して合わせてある。
   ========================================================= */
@font-face{
  font-family:"The Seasons";
  src:url("../fonts/the-seasons-light.woff2") format("woff2");
  font-weight:300 400;font-style:normal;font-display:swap;
}

/* 小見出しの CONCEPT（ゴールド） */
.ttl-en{font-family:var(--f-dsp);font-weight:300;letter-spacing:.002em}
/* セクションの特大英字。1 文字ずつ立ち上げるので main.js が分割する */
.sec__display,.cafe__display{font-family:var(--f-dsp);font-weight:300;letter-spacing:-.006em}
/* 縦組みの英字。静的版は SVG を 90 度回していた */
.rail__en{font-family:var(--f-dsp);font-weight:300;writing-mode:vertical-rl;letter-spacing:.05em}
/* FACILITIES / ACCESS / MENU LIST */
.ttl-block__en{font-family:var(--f-dsp);font-weight:300;letter-spacing:.012em}
/* ドロワーのナビ英字 */
.drawer__nav a em{font-family:var(--f-dsp);font-weight:300;font-style:normal;letter-spacing:0}
/* 予約ボタン・バナー・モーダル見出し */
.btn-gold{font-family:var(--f-dsp);font-weight:300;letter-spacing:.04em}
.revbanner__en{font-family:var(--f-dsp);font-weight:300;letter-spacing:.022em}
.rmodal__en{font-family:var(--f-dsp);font-weight:300;letter-spacing:0}

/* 英語ページ：本文まわりの大きい見出しも The Seasons */
[lang="en"] .hero__ja{font-family:var(--f-dsp);font-weight:300;letter-spacing:-.043em}
[lang="en"] .concept__ttl,
[lang="en"] .lead__ttl,
[lang="en"] .room__txt h4{font-family:var(--f-dsp);font-weight:300;letter-spacing:.005em}

/* 静的版の SVG は 1em の枠の 0.77em にベースラインがあった。実テキストのベースラインは
   フォントの ascent 996 / descent 297 から「行送り/2 + 0.35em」に来るので、その差ぶん
   持ち上げて字面の位置を静的版とそろえる（枠の大きさは変わらない。縦組みの .rail__en は対象外）
   行送り 1 → 0.08em、0.98 → 0.07em、1.35 → 0.25em、1.45 → 0.30em、1.5 → 0.33em */
.ttl-en,.sec__display,.ttl-block__en,.drawer__nav a em,
.btn-gold,.revbanner__en,.rmodal__en{position:relative;top:-.08em}
/* カフェの大きい英字は PC では絶対配置（top:174.1rem）なので、position/top をそのまま
   上書きすると位置ごと動いてしまう。持ち上げぶんは top の計算に織り込む */
.cafe__display{top:calc(174.1rem - .08em)}
@media (max-width:1199px){.cafe__display{position:relative;top:-.08em}}
[lang="en"] .hero__ja{position:relative;top:-.07em}
[lang="en"] .concept__ttl{position:relative;top:-.25em}
[lang="en"] .room__txt h4{position:relative;top:-.30em}
[lang="en"] .lead__ttl{position:relative;top:-.33em}

/* 特大英字（SAVOR など）の結像アニメーション。SVG のパス単位だったものを
   JS が分割した 1 文字（.dsp--x i）に同じ動きで当て直す */
.dsp--x i{
  display:inline-block;font-style:normal;
  transform:translate3d(calc(-.55em * var(--amp,1)), calc(-.32em * var(--sv,0)), 0)
            skewY(calc(2deg * var(--sk,0))) scaleX(1.06);
  filter:blur(.07em);
  opacity:0;
}
.dsp--x.is-shown i{
  animation:dspdrift 1.6s cubic-bezier(.2,.7,.25,1) both,
            dspfocus 2.3s cubic-bezier(.1,.8,.2,1) both;
  animation-delay:var(--dl,0ms);
}
@media (prefers-reduced-motion:reduce){
  .dsp--x i{transform:none;filter:none;opacity:1}
  .dsp--x.is-shown i{animation:none}
}
/* MENU LIST だけは静的版の字送りが 0 だった */
.ttl-block--menu .ttl-block__en{letter-spacing:0}
/* RESTORE / ENRICH の特大英字は静的版の SVG がヒーローと同じ詰め（-0.043em）だった */
.sec--restore .sec__display,.sec--enrich .sec__display{letter-spacing:-.043em}

/* =========================================================
   ハンバーガー：タブレット・スマホは線を長く・文字を大きく、押しやすく
   （線の間隔は元のまま） 
   ========================================================= */
@media (max-width:1199px){
  .ham{padding:.8rem;margin:-.8rem}                 /* 見た目を動かさずに押せる範囲だけ広げる */
  .ham__bars{width:3rem;height:.6rem}
  .ham__label{font-size:1.4rem}
}
@media (max-width:767px){
  .ham__bars{width:2.8rem;height:.6rem}
  .ham__label{font-size:1.2rem}
}

/* スマホのスライダーは 3:2（写真と同じ比率で、切れずに見せる） */
@media (max-width:767px){
  .slider__slide{aspect-ratio:3/2}
}

/* スマホの CONCEPT 写真：大きさは元のまま、余白ぶん（1.6rem）だけ画面端へずらす。
   1 枚目は右端、4 枚目は右端、5 枚目は左端、7 枚目は左端 */
@media (max-width:767px){
  .cph--1{grid-area:1/4/2/13;margin-left:1.6rem;margin-right:-1.6rem}
  .cph--4{grid-area:4/8/5/13;margin-top:6rem;margin-left:1.6rem;margin-right:-1.6rem}
  .cph--5{grid-area:4/1/5/7;margin-left:-1.6rem;margin-right:1.6rem}
  .cph--7{grid-area:6/1/7/11;left:0;margin-left:-1.6rem;margin-right:1.6rem}
}

/* スマホ：最後の写真 → SAVOR の切り替えを、ズームの枠が固定されている間に済ませる。
   ズーム領域を 20vh 延ばし、SAVOR を同じぶん早く重ねる（全画面になる位置は変えない）。
   切り替えの瞬間にズーム側の枠がスクロールで動き出す前に隠せるので、1 フレームの段差が出ない */
@media (max-width:767px){
  .zoom{height:180vh}
  .sec--savor{margin-top:-120vh}
}

/* スマホ：写真に添える縦書き（喰う・寝る・足す・つながるカフェ）を大きく */
@media (max-width:767px){
  .vtxt--lg,.sec__feature figcaption{font-size:3.2rem}
}

/* =========================================================
   スライダー：横一列のトラックをやめ、1 枚ずつ重ねて動かす。
   13 枚を横に並べると iOS Safari で描画レイヤーが上限を超えて真っ白になるため
   （表示中と両隣の 3 枚だけを描く）
   ========================================================= */
.slider__track{display:block;position:relative;aspect-ratio:1314/739;transition:none;transform:none!important}
.frow__img .slider__track{aspect-ratio:743/495}
.slider__slide{position:absolute;inset:0;aspect-ratio:auto;flex:none;
  transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform;visibility:hidden}
.slider__slide.is-cur,.slider__slide.is-side{visibility:visible}
/* 写真 1 枚だけ（スライドなし）のものは JS を通らないので常に表示 */
.slider:not([data-slider]) .slider__slide{visibility:visible}
@media (max-width:1199px){.frow__img .slider__track{aspect-ratio:3/2}}
@media (max-width:767px){.slider__track{aspect-ratio:3/2}}

/* タブレット以下：CONCEPT の本文は左寄せ（見出しは中央のまま） */
@media (max-width:1199px){
  .concept__txt{text-align:left}
}

/* スマホ：写真の縦書き（喰う・寝る・足す）を下寄せのまま左右中央に */
@media (max-width:767px){
  .sec__feature figcaption{right:auto;left:50%;top:auto;bottom:1.6rem;transform:translateX(-50%)}
}

/* MENU LIST 見出しの直下の注釈（季節ごとメニュー変更あり など）。
   見出しブロックの中に置くので、見出しとの間隔は margin だけで決まる */
.notes--menu{margin:4.8rem 0 0;gap:1rem;align-items:center;text-align:center;filter:none}
.notes--menu li{font-weight:500;font-size:1.5rem;line-height:1.8}
@media (min-width:1200px){.cafe .inner{padding-top:394rem}}    /* PC：注釈の下を少し空ける（元 384.8rem）。TB/SP は 0 のまま */
@media (max-width:1199px){.notes--menu li{font-size:1.2rem}}   /* TB/SP は小さめ */
@media (max-width:767px){.notes--menu{margin-top:3.2rem;gap:.6rem}}

/* スライダーは PC でもドラッグで送れる */
.slider[data-slider]{cursor:grab;touch-action:pan-y}
.slider[data-slider].is-dragging{cursor:grabbing}
.slider[data-slider] img{-webkit-user-drag:none;user-select:none}

/* 設備・備品などの中の「項目　価格」一覧（カフェデッキの貸切プランなど）。
   見出しは折り返さず上に置き、一覧は枠いっぱいに広げる。全体を少し太めに */
.kv--plan{flex-direction:row;gap:4.8rem;align-items:flex-start}   /* PC/TB：見出し｜一覧 の 2 カラム（TB の .kv は縦積みなので明示） */
.kv--plan dt{flex:0 0 auto;white-space:nowrap;font-weight:500;font-size:1.6rem;line-height:1.6}   /* 2 カラム時は見出しを一覧と同じ級数に */
.kv--plan dd{flex:1 1 auto;min-width:0;font-weight:500}
@media (max-width:767px){.kv--plan{flex-direction:column;gap:1.2rem}}   /* SP：縦積み */
.kv__list{display:flex;flex-direction:column;gap:.8rem;width:100%}
.kv__list li{display:flex;justify-content:space-between;align-items:baseline;gap:1.6rem;
  padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,.22);font-size:1.4rem}
.kv__list em{font-style:normal;font-family:var(--f-en);font-weight:500;font-size:1.6rem;letter-spacing:.02em;white-space:nowrap}
@media (max-width:767px){
  .kv--plan dt{font-size:1.3rem}
  .kv__list li{font-size:1.2rem}
  .kv__list em{font-size:1.4rem}
}

/* 個人情報の窓（長い文章を読む用） */
.rmodal--doc .rmodal__panel{width:min(680px,100%)}
.rmodal__doc{margin-top:24px;text-align:left;max-height:56vh;overflow-y:auto;padding-right:8px}
.rmodal__doc h3{margin:20px 0 6px;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--goldlt)}
.rmodal__doc h3:first-child{margin-top:0}
.rmodal__doc p{font-size:12px;line-height:2;color:rgba(255,255,255,.82)}
.rmodal__doc-foot{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:11px;color:rgba(255,255,255,.6)}
.rmodal__doc::-webkit-scrollbar{width:4px}
.rmodal__doc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:2px}
.rmodal__back{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;
  border:1px solid rgba(255,255,255,.4);border-radius:3px;color:#fff;font-size:13px;letter-spacing:.04em;transition:background .3s}
.rmodal__back:hover{background:rgba(255,255,255,.1)}
/* 送信ボタンの上の一文 */
.rmodal__consent{margin-top:20px;font-size:11px;line-height:1.9;color:rgba(255,255,255,.7);text-align:center}
.rmodal__consent a{text-decoration:underline;text-underline-offset:3px;color:var(--goldlt)}