@charset "utf-8";
/* ============================================================================
   制作例25 ORLIENNE(旧銀行のフレンチレストラン)  site.css   2026-09-07 新規(ゲイツ)

   ★参考ページのオマージュとして持ち込んだ「作り方」(絵柄・文言・写真は持ち込まない)
     1. 冒頭 = 夜の外観に灯りがともる(参考は 2 枚の写真を重ねる。当方は 1 枚の写真の明るさを
        瞬き付きで上げる = 写真 1 枚で成立させる)
     2. スクロールで進む 3 章の物語(写真が下から上へ通り過ぎ、文が 1 行ずつ積み上がる)
     3. 右上の縦組みタグライン / 右下に張り付く 3 つのボタン / 文字が転がるホバー
     4. 大きな英字ラベルを写真に重ねた ABOUT / MENU / PARTY と、ずらして置く写真
     5. 帯のお知らせ / ページ内目次 / SCENE の写真の帯 / 貼り付くメニュー付き FAQ / 最後のウェディング
   ★参考の「面取り(bevel)」の意匠は使わず、銀行の窓を思わせる「アーチ」で統一する。

   ★出現演出の規則(社内の実測でこうなっている。破ると静かに壊れる)
   - `opacity` と `transform:scale(0)` は本文の出現に使わない(要素の箱を 0 にして検査を潰す)。
   - 隠す指定は全部 `:where(html.js)` の下(詳細度 0)。JS が落ちたら何も隠れない。
   - `clip-path` を持つ要素は IntersectionObserver から永久に見えない。
     だから site.js は scroll + requestAnimationFrame で発火させる。
   - 見出しの改行は `<br>` で宣言し、大きさは「柱の幅」(cqw)に紐づけて上限(px)を据える。
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--jp);line-height:1.9;overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid #65a7ff;outline-offset:4px}

.demo{position:fixed;z-index:99;left:10px;bottom:10px;padding:9px 13px;border:1px solid currentColor;
  background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(12px);
  border-radius:999px;font:600 12px/1 var(--jp);letter-spacing:.08em}
.demo a{text-decoration:underline;margin-left:10px}
.skip{position:fixed;top:-80px;left:8px;z-index:110;background:#fff;color:#000;padding:10px}
.skip:focus{top:8px}

/* ============================================================================
   色と書体。暗い地の上の文字は全部コントラストを測ってある。
   --paper 15.6:1 / --soft 9.4:1 / --brass 7.8:1(対 --ink)
   ========================================================================== */
:root{
  --ink:#14120f;
  --panel:#1c1916;
  --paper:#f3ede3;
  --soft:#c8bda9;
  --brass:#c9a25a;
  --brass-deep:#8f7238;
  --green:#1f3a2e;
  --rule:#f3ede329;
  --jp:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --en:"Cinzel","Zen Old Mincho",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(20px,4vw,56px);
}

.eyebrow{margin:0;font:500 12px/1.5 var(--en);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}

/* ============================================================================
   出現の演出(覆い = clip-path / 持ち上げ = translate)
   ========================================================================== */
:where(html.js) .wipe{clip-path:inset(0 0 100% 0)}
:where(html.js) .rise{transform:translateY(clamp(14px,2.2vw,28px))}
.wipe.seen{clip-path:inset(-220px);transition:clip-path 1.1s var(--ease)}
.rise.seen{transform:translateY(0);transition:transform .8s var(--ease)}
.stagger .wipe:nth-child(2),.news-grid .rise:nth-child(2),.flow-list .rise:nth-child(2),
.faq-panel .rise:nth-child(3){transition-delay:.08s}
.flow-list .rise:nth-child(3),.faq-panel .rise:nth-child(4){transition-delay:.16s}
.flow-list .rise:nth-child(4){transition-delay:.24s}
.flow-list .rise:nth-child(5){transition-delay:.32s}
.flow-list .rise:nth-child(6){transition-delay:.4s}
.prices .rise:nth-child(2){transition-delay:.1s}
.prices .rise:nth-child(3){transition-delay:.2s}

/* 画面の外に出た節では、回り続ける動きを止める(site.js が is-off を付け外しする) */
section.is-off *{animation-play-state:paused!important}

/* ============================================================================
   固定ヘッダー(冒頭を過ぎたら降りてくる)
   ========================================================================== */
.orl-head{position:fixed;z-index:40;left:0;right:0;top:0;height:64px;padding:0 28px;
  display:flex;align-items:center;gap:32px;
  background:linear-gradient(to bottom,#14120ff2 0%,#14120fd0 70%,#14120f00 100%);
  }
:where(html.js) .orl-head{clip-path:inset(0 0 100% 0)}
html.scrolled .orl-head{clip-path:inset(0);transition:clip-path .6s var(--ease)}
.orl-head .mark{display:block;width:36px;height:36px}
.orl-head svg{width:100%;height:100%;fill:none;stroke:var(--paper);stroke-width:1.4}
.orl-head .mk-in{stroke:var(--brass)}
.orl-head nav{display:flex;gap:26px;margin-left:auto;font:500 12px/1 var(--en);letter-spacing:.2em}
.orl-head nav a{padding:8px 0;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.orl-head nav a:hover,.orl-head nav a:focus-visible{color:var(--brass);border-bottom-color:var(--brass)}
/* ★共有 shared-quality.css は 820px 以下で `header nav` を !important で消す(多くの制作例の
   ナビが狭い画面で溢れたため)。このページのナビは 5 語(520px 以下は 3 語)で収まるので、
   詳細度で上回って出しておく。消すとヘッダーの直下の子が 1 個になり、隣接の検査が
   「測れない」で飛ばされる(飛ばしの上限は全ページ合算で 24 件)。 */
body>.demo + #main>header.orl-head nav{display:flex!important}

/* ============================================================================
   幕(読み込み直後の 1.6 秒。印が描かれ、名前が現れ、幕が上へ抜けて灯りがともる)
   ========================================================================== */
.veil{display:none}
:where(html.js) .veil{display:grid;place-content:center;justify-items:center;position:fixed;inset:0;z-index:110;
  background:var(--ink);clip-path:inset(0);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1)}
html.lit .veil{clip-path:inset(0 0 100% 0)}
html.gone .veil{display:none}
.veil svg{width:min(28vw,150px);height:auto;overflow:visible}
.veil circle,.veil path{fill:none;stroke:var(--brass);stroke-width:1.2;stroke-dasharray:100;stroke-dashoffset:100;
  animation:vdraw 1.1s var(--ease) forwards}
.veil .v-in{animation-delay:.15s}
.veil .v-bar{animation-delay:.3s;stroke-width:.8}
@keyframes vdraw{to{stroke-dashoffset:0}}
.v-word{margin-top:22px;font:400 clamp(16px,2.4vw,26px)/1 var(--en);letter-spacing:.42em;color:var(--paper);
  clip-path:inset(0 100% 0 0);animation:vword 1s .5s var(--ease) forwards}
@keyframes vword{to{clip-path:inset(0 -2px 0 0)}}

/* ============================================================================
   1. 夜の外観(灯りがともる)
   ========================================================================== */
.hero{position:relative;height:calc(100svh - 44px);min-height:min(640px,calc(100svh - 44px));overflow:hidden;contain:paint;max-width:100vw}
.hero>img{position:absolute;inset:0}
:where(html.js) .hero>img{filter:brightness(.16) saturate(.55);transform:scale(1.08)}
html.lit .hero>img{filter:brightness(1) saturate(1);transform:scale(1);
  transition:transform 5s var(--ease);animation:flick 1.3s steps(1,end) both}
@keyframes flick{
  0%{filter:brightness(.16) saturate(.55)}18%{filter:brightness(.55) saturate(.8)}30%{filter:brightness(.2) saturate(.6)}
  44%{filter:brightness(.8) saturate(.9)}56%{filter:brightness(.35) saturate(.7)}70%{filter:brightness(1) saturate(1)}
  100%{filter:brightness(1) saturate(1)}}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,#14120fa6 0%,#14120f00 32%,#14120f00 62%,#14120fd9 100%)}
.glow{position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 78%,#ffb86a33 0%,#ffb86a00 55%)}
:where(html.js) .glow{transform:scale(.2)}
html.lit .glow{transform:scale(1);transition:transform 2.4s var(--ease) .3s}

.wordmark{position:absolute;z-index:2;left:clamp(20px,5vw,72px);top:clamp(80px,14vh,140px);margin:0;
  display:flex;flex-direction:column;gap:16px;font-size:min(112px,9vw);line-height:1}
.wm{display:block;font:400 1em/1 var(--en);letter-spacing:.2em;color:var(--paper)}
.wm-sub{display:block;font:500 12px/1 var(--en);letter-spacing:.34em;color:var(--brass);margin-left:.15em}
:where(html.js) .wordmark .wm{clip-path:inset(0 0 100% 0);transform:translateY(.25em)}
:where(html.js) .wordmark .wm-sub{clip-path:inset(0 100% 0 0)}
html.lit .wordmark .wm{clip-path:inset(-10px);transform:none;transition:clip-path 1.2s var(--ease) .5s,transform 1.2s var(--ease) .5s}
html.lit .wordmark .wm-sub{clip-path:inset(-4px -4px -4px 0);transition:clip-path 1s var(--ease) 1.1s}

.tagline{position:absolute;z-index:2;right:clamp(20px,5vw,72px);top:clamp(80px,14vh,140px);margin:0;
  writing-mode:vertical-rl;height:min(56vh,520px);
  font:500 clamp(16px,1.5vw,22px)/1.9 var(--jp);letter-spacing:.2em;color:var(--paper);text-shadow:0 1px 18px #000a}
:where(html.js) .tagline{clip-path:inset(0 0 100% 0)}
html.lit .tagline{clip-path:inset(-8px);transition:clip-path 1.4s var(--ease) 1.2s}

.cue{position:absolute;z-index:2;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 12px/1 var(--en);letter-spacing:.3em;color:var(--paper)}
.cue i{display:block;width:1px;height:56px;position:relative;overflow:hidden;background:#f3ede326}
.cue i:before{content:"";position:absolute;inset:0;background:var(--brass);animation:cue 1.9s cubic-bezier(.5,0,.5,1) infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* ============================================================================
   右下に張り付く 3 つのボタン(最後の節に入ったら引っ込む)
   ========================================================================== */
.float{position:fixed;z-index:35;right:28px;bottom:28px;display:flex;gap:10px;transition:transform .6s var(--ease)}
html.float-off .float{transform:translateY(180%)}

.btn{--bbg:#181512;position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border:1px solid var(--paper);color:var(--paper);background:var(--bbg);
  font:500 13px/1 var(--jp);letter-spacing:.12em;overflow:hidden;white-space:nowrap;
  transition:border-color .4s var(--ease),color .4s var(--ease)}
.btn.solid{--bbg:var(--paper);color:var(--ink)}
.btn>span{display:block;transition:transform .5s var(--ease)}
.roll:after{content:attr(data-t);position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  padding:0 24px;color:var(--brass);transform:translateY(100%);transition:transform .5s var(--ease)}
.btn.solid.roll:after{color:var(--brass-deep)}
.btn:before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
@media(hover:hover){
  .btn:hover,.btn:focus-visible{border-color:var(--brass)}
  .roll:hover>span,.roll:focus-visible>span{transform:translateY(-100%)}
  .roll:hover:after,.roll:focus-visible:after{transform:none}
  .btn:hover:before,.btn:focus-visible:before{transform:scaleX(1)}
}

/* ============================================================================
   2. 物語(スクロールで写真が通り過ぎ、文が積み上がる)
   ========================================================================== */
.story{position:relative;background:var(--ink)}
:where(html.js) .story{height:300vh}
.stage{position:relative}
:where(html.js) .stage{position:sticky;top:0;height:100vh;overflow:hidden}
.ch{margin:0;position:relative;height:72vh;background:var(--ink)}
:where(html.js) .ch{position:absolute;inset:0;height:100%;transform:translateY(100%);will-change:transform}
:where(html.js) .ch1{transform:none}
.ch1{display:grid;grid-template-columns:1fr 1fr}
.ch img{filter:brightness(.68)}
.lines{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  width:max-content;max-width:calc(100% - 40px);text-align:center;
  font:500 min(60px,6.6vw)/1.55 var(--jp);letter-spacing:.06em;color:var(--paper);text-shadow:0 2px 28px #000c}
.lines span{display:block}
:where(html.js) .lines span{clip-path:inset(0 0 100% 0);transform:translateY(.45em)}
.lines span.on{clip-path:inset(-10px);transform:none;transition:clip-path .9s var(--ease),transform .9s var(--ease)}

/* ============================================================================
   3. お知らせ(帯 + 2 件)
   ========================================================================== */
.news{padding:0}
.band{margin:0;background:var(--green);color:var(--paper);text-align:center;padding:14px var(--pad);
  font-size:14px;letter-spacing:.06em;line-height:1.8;position:relative;overflow:hidden}
.band:before{content:"";position:absolute;top:0;bottom:0;width:38%;left:-40%;
  background:linear-gradient(90deg,#ffffff00,#ffffff14,#ffffff00);animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%{left:-40%}60%{left:110%}100%{left:110%}}
.band span{position:relative}
.news-grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)}
.news-item{display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto;column-gap:22px;row-gap:6px;
  align-items:center;padding:26px var(--pad);border-right:1px solid var(--rule)}
.news-item:last-child{border-right:0}
.news-item img{grid-row:1/3;width:84px;height:84px;border-radius:42px 42px 4px 4px;filter:brightness(.9);transition:filter .4s var(--ease)}
.meta{display:flex;align-items:center;gap:14px;font:400 12px/1 var(--en);letter-spacing:.14em;color:var(--soft)}
.meta em{font-style:normal;border:1px solid var(--rule);border-radius:999px;padding:5px 11px;letter-spacing:.1em}
.news-item b{display:block;font-weight:500;font-size:15px;line-height:1.7;letter-spacing:.02em;transition:color .3s var(--ease)}
@media(hover:hover){
  .news-item:hover b{color:var(--brass)}
  .news-item:hover img{filter:brightness(1.05)}
}

/* ページ内の目次(中央に回る印) */
.strip{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px var(--pad);
  border-bottom:1px solid var(--rule);font:500 12px/1 var(--en);letter-spacing:.2em}
.strip a{padding:10px 0;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.strip a:hover,.strip a:focus-visible{color:var(--brass);border-bottom-color:var(--brass)}
.coin{display:block;width:52px;height:52px}
.coin svg{display:block;width:100%;height:100%;fill:none;stroke:var(--paper);stroke-width:1.2;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================================
   4〜6. 建物 / 料理 / 宴会(写真 + 文 + ずらした写真)
   ========================================================================== */
.about,.menu,.party,.vault{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(28px,5vw,80px);row-gap:0;align-items:center;padding:clamp(56px,7vw,100px) var(--pad)}
.copy{container-type:inline-size}
.copy h2{margin:22px 0 0;font:500 min(52px,7.2cqw)/1.5 var(--jp);letter-spacing:.04em}
.copy p{margin:18px 0 0;font-size:15px;line-height:2.1;color:var(--soft);max-width:36em}
.copy .btn{margin-top:30px}

.arch{margin:0;position:relative;overflow:hidden;border-radius:50% 50% 0 0/30% 30% 0 0;background:var(--panel)}
.arch.tall{aspect-ratio:3/4.2}
.arch.sq{aspect-ratio:1;border-radius:50% 50% 0 0/26% 26% 0 0}
.arch.wide{aspect-ratio:3/2;border-radius:50% 50% 0 0/22% 22% 0 0}
.arch .prlx{position:absolute;inset:-12% 0;will-change:transform}
.arch .prlx img{height:100%}
.big{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(18px,3vw,40px);
  font:400 clamp(44px,7vw,104px)/1 var(--en);letter-spacing:.06em;color:var(--paper);text-shadow:0 2px 30px #000b;pointer-events:none}

.stagger{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:clamp(20px,3vw,40px)}
.stagger figure:first-child{grid-column:6/10}
.stagger figure:last-child{grid-column:2/6;margin-top:-18%}

.facts{display:flex;flex-wrap:wrap;gap:14px 30px;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--rule)}
.facts dt{font:500 12px/1.4 var(--en);letter-spacing:.18em;color:var(--brass)}
.facts dd{margin:6px 0 0;font:500 clamp(20px,2vw,26px)/1.2 var(--jp);letter-spacing:.02em}
.facts i{font-style:normal;font-family:var(--en);font-size:1.2em}

.prices{margin:30px 0 0;padding:0;max-width:520px}
.prices div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:16px 0;
  border-top:1px solid var(--rule);position:relative}
.prices div:last-child{border-bottom:1px solid var(--rule)}
.prices div:before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:left}
.prices div.seen:before{transform:scaleX(1);transition:transform 1.2s var(--ease) .25s}
.prices dt{font:500 14px/1.4 var(--en);letter-spacing:.2em}
.prices dd{margin:0;font-size:15px;letter-spacing:.06em}
.prices small{font-size:12px;color:var(--soft)}

/* コースの流れ(点が線の上を進む) */
.flow{grid-column:1/-1;margin-top:clamp(40px,6vw,90px);padding-top:clamp(28px,4vw,56px);border-top:1px solid var(--rule)}
.flow-track{position:relative;margin-top:30px}
.flow-track:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
.flow-list{list-style:none;margin:0;padding:30px 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.flow-list li{position:relative;padding-top:4px}
.flow-list li:before{content:"";position:absolute;left:0;top:-34px;width:9px;height:9px;border-radius:50%;
  background:var(--ink);border:1px solid var(--brass)}
.flow-list b{display:block;font:500 12px/1.4 var(--en);letter-spacing:.2em;color:var(--brass)}
.flow-list span{display:block;margin-top:8px;font-size:14px;line-height:1.8;color:var(--soft)}
.flow-dot{position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--brass);
  box-shadow:0 0 0 6px #c9a25a2e;animation:flowrun 14s linear infinite}
@keyframes flowrun{0%{left:0}94%{left:calc(100% - 11px)}100%{left:calc(100% - 11px)}}

/* ============================================================================
   7. ご利用シーン(暗い写真の上に題、下に流れる写真の帯)
   ========================================================================== */
.scene{position:relative;padding:clamp(64px,9vw,120px) var(--pad) 0;overflow:hidden;contain:paint;max-width:100vw}
.scene-bg{position:absolute;inset:0;z-index:0}
.scene-bg .prlx{position:absolute;inset:-12% 0;will-change:transform}
.scene-bg img{filter:grayscale(1) brightness(.42)}
.scene:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,var(--ink) 0%,#14120f00 30%,#14120f00 70%,var(--ink) 100%)}
.scene-copy,.reel{position:relative;z-index:2}
.scene-copy{text-align:center;max-width:860px;margin:0 auto}
.big-t{margin:0;font:400 clamp(56px,9vw,128px)/1 var(--en);letter-spacing:.1em;color:var(--paper)}
.scene-copy h2{margin:16px 0 0;font:500 clamp(18px,2vw,24px)/1.6 var(--jp);letter-spacing:.24em}
.scene-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 0;font-size:14px;line-height:1.8;color:var(--soft)}
.scene-list li{padding:0 14px}
.scene-list li+li{border-left:1px solid var(--rule)}
.reel{margin-top:clamp(40px,6vw,80px);padding-bottom:clamp(60px,8vw,110px);overflow:hidden;width:100%}
.reel-track{display:flex;align-items:flex-end;width:max-content;animation:reel 52s linear infinite}
.reel figure{margin:0 18px 0 0;width:clamp(180px,22vw,320px);aspect-ratio:1;overflow:hidden;
  border-radius:50% 50% 0 0/24% 24% 0 0;background:var(--panel)}
.reel figure.pt{aspect-ratio:3/4}
.reel img{filter:brightness(.92)}
@keyframes reel{to{transform:translateX(-50%)}}
@media(hover:hover){.reel:hover .reel-track{animation-play-state:paused}}

/* ============================================================================
   8. 旧金庫室(扉の車輪がスクロールで回る)
   ========================================================================== */
.vault{background:var(--panel)}
.vault-fig{display:grid;place-items:center;padding:clamp(10px,3vw,40px)}
.door{width:min(100%,520px);height:auto;overflow:visible}
.d-outer{fill:#221e1a;stroke:var(--brass);stroke-width:2}
.d-ring{fill:none;stroke:#c9a25a55;stroke-width:1}
.d-bolts circle{fill:var(--brass);animation:bolt 3.2s ease-in-out infinite}
.d-bolts circle:nth-child(2){animation-delay:.4s}.d-bolts circle:nth-child(3){animation-delay:.8s}
.d-bolts circle:nth-child(4){animation-delay:1.2s}.d-bolts circle:nth-child(5){animation-delay:1.6s}
.d-bolts circle:nth-child(6){animation-delay:2s}.d-bolts circle:nth-child(7){animation-delay:2.4s}
.d-bolts circle:nth-child(8){animation-delay:2.8s}
@keyframes bolt{50%{fill:var(--paper)}}
.wheel{transform-box:fill-box;transform-origin:center;will-change:transform}
.w-rim{fill:none;stroke:var(--paper);stroke-width:6}
.w-spoke{fill:none;stroke:var(--paper);stroke-width:5;stroke-linecap:round}
.w-hub{fill:#2a2622;stroke:var(--paper);stroke-width:3}
.w-cap{fill:var(--brass)}
.d-handle{fill:none;stroke:var(--brass);stroke-width:6;stroke-linecap:round}
.vault .arch.wide{grid-column:1/-1;margin-top:clamp(28px,5vw,70px)}

/* ============================================================================
   9. よくある質問(貼り付く分類 + 開閉)
   ========================================================================== */
.faq{padding:clamp(56px,7vw,100px) var(--pad)}
.sec-head{max-width:1180px;margin:0 auto}
.sec-head h2{margin:16px 0 0;font:500 clamp(28px,3.4vw,44px)/1.4 var(--jp);letter-spacing:.06em}
.faq-body{max-width:1180px;margin:clamp(30px,4vw,56px) auto 0;display:grid;grid-template-columns:240px minmax(0,1fr);
  column-gap:clamp(24px,5vw,80px);align-items:start}
.faq-menu{position:sticky;top:140px;display:flex;flex-direction:column;gap:6px}
.faq-menu button{text-align:left;padding:12px 0 12px 18px;min-height:44px;border-left:1px solid var(--rule);
  font-size:14px;letter-spacing:.1em;color:var(--soft);transition:color .3s var(--ease),border-color .3s var(--ease)}
.faq-menu button.is-on{color:var(--paper);border-left-color:var(--brass)}
.faq-menu button:hover{color:var(--paper)}
.faq-panel h3{margin:0 0 6px;font:500 clamp(18px,1.8vw,22px)/1.5 var(--jp);letter-spacing:.1em;color:var(--brass)}
.faq-panel+.faq-panel{margin-top:48px}
details{border-top:1px solid var(--rule)}
details:last-child{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-size:15px;letter-spacing:.04em;line-height:1.8}
summary::-webkit-details-marker{display:none}
summary:before,summary:after{content:"";position:absolute;right:8px;top:50%;width:16px;height:1px;background:var(--paper);
  transition:transform .5s var(--ease)}
summary:after{transform:rotate(90deg)}
details[open] summary:after{transform:rotate(0)}
.a{padding:0 0 22px;color:var(--soft);font-size:14px;line-height:2}
.a p{margin:0;max-width:40em}

/* ============================================================================
   10. アクセス・ご予約(手描きの略図が線から描かれる)
   ========================================================================== */
.reach{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,80px);
  padding:clamp(56px,7vw,100px) var(--pad);border-top:1px solid var(--rule);background:var(--panel)}
.reach-col{container-type:inline-size}
.reach h2{margin:16px 0 0;font:500 min(40px,6.4cqw)/1.5 var(--jp);letter-spacing:.06em}
.reach p{margin:18px 0 0;font-size:14px;line-height:2;color:var(--soft)}
.map{margin-top:28px;border:1px solid var(--rule);padding:18px;background:var(--ink)}
.map svg{display:block;width:100%;height:auto}
.map path{fill:none}
:where(html.js) .draw path{stroke-dasharray:1000;stroke-dashoffset:1000}
.draw.seen path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease)}
.m-river{stroke:#4f7482;stroke-width:14;stroke-linecap:round}
.m-street path{stroke:#3d3833;stroke-width:6}
.m-street path:nth-child(1){transition-delay:.2s}.m-street path:nth-child(2){transition-delay:.3s}
.m-street path:nth-child(3){transition-delay:.4s}.m-street path:nth-child(4){transition-delay:.5s}
.m-street path:nth-child(5){transition-delay:.6s}
.m-stone{stroke:var(--brass);stroke-width:6;transition-delay:.9s}
.m-station,.m-here{transform-box:fill-box;transform-origin:center}
:where(html.js) .draw .m-station,:where(html.js) .draw .m-here{clip-path:inset(50%)}
.draw.seen .m-station,.draw.seen .m-here{clip-path:inset(-150%);transition:clip-path .8s var(--ease) 1.3s}
.m-station circle{fill:var(--ink);stroke:var(--paper);stroke-width:3}
.m-pin{fill:var(--brass)}
.m-pulse{fill:none;stroke:var(--brass);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-out infinite}
.m-pulse2{animation-delay:1.3s}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(2.8);opacity:0}}
.map-note{margin:12px 0 0;font-size:12.5px;line-height:1.8;color:var(--soft)}
.transit,.hours{margin:26px 0 0;padding:0}
.transit div,.hours div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.transit div:last-child,.hours div:last-child{border-bottom:1px solid var(--rule)}
.transit dt,.hours dt{font:500 12px/1.6 var(--en);letter-spacing:.18em;color:var(--brass);padding-top:3px}
dd{margin:0;font-size:14px;line-height:1.9}
.reach .arch.wide{margin-top:24px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ============================================================================
   11. ウェディング(最後の見せ場)
   ========================================================================== */
.wedding{position:relative;padding:clamp(100px,14vw,180px) var(--pad) clamp(60px,8vw,100px);overflow:hidden;contain:paint;
  text-align:center;max-width:100vw}
.wed-bg{position:absolute;inset:0;z-index:0}
.wed-bg .prlx{position:absolute;inset:-12% 0;will-change:transform}
.wed-bg img{filter:grayscale(1) brightness(.38)}
.wedding:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,var(--ink) 0%,#14120f00 28%,#14120f00 78%,var(--ink) 100%)}
.wed-copy{position:relative;z-index:2;max-width:760px;margin:0 auto;container-type:inline-size}
.wed-copy h2{margin:0;font:500 min(44px,6.6cqw)/1.6 var(--jp);letter-spacing:.06em}
.wed-copy p{margin:18px auto 0;font-size:15px;line-height:2.1;color:var(--soft);max-width:34em}
.wed-copy .btn{margin-top:30px}
.wed-mark{margin:clamp(56px,8vw,96px) 0 0;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:min(72px,10cqw)}
.sns{margin:22px 0 0;font:500 12px/1 var(--en);letter-spacing:.3em;color:var(--soft)}
.totop{display:inline-flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(40px,6vw,70px);
  font-size:12px;letter-spacing:.2em;color:var(--soft)}
.totop i{display:block;width:26px;height:26px;border-left:1px solid var(--paper);border-top:1px solid var(--paper);
  transform:rotate(45deg);animation:bob 2.2s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(45deg) translate(-4px,-4px)}}

footer{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;padding:26px var(--pad);border-top:1px solid var(--rule);
  font:500 12px/1.6 var(--en);letter-spacing:.16em;color:var(--soft)}
footer b{color:var(--paper);letter-spacing:.3em;font-weight:500}

/* ============================================================================
   動きを減らす設定
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}

/* ============================================================================
   画面の幅
   ========================================================================== */
@media(max-width:1180px){
  .stagger figure:first-child{grid-column:6/11}
  .stagger figure:last-child{grid-column:1/6}
}
@media(max-width:960px){
  .float{left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .float .btn{padding:0 6px;min-height:44px;font-size:12px;letter-spacing:.04em}
  .roll:after{padding:0 6px}
  .cue{bottom:96px}
  .flow-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
  .flow-list li:nth-child(n+4):before{display:none}
  .faq-body{grid-template-columns:200px minmax(0,1fr)}
}
@media(max-width:820px){
  .about,.menu,.party,.vault,.reach{grid-template-columns:minmax(0,1fr)}
  .copy{padding-top:clamp(24px,5vw,40px)}
  .arch.tall{aspect-ratio:4/4.6}
  .menu .copy{order:2}.menu .arch.tall{order:1}.menu .flow{order:3}.menu .stagger{order:4}
  .stagger figure:first-child{grid-column:7/13}
  .stagger figure:last-child{grid-column:1/7;margin-top:-14%}
  .faq-body{grid-template-columns:minmax(0,1fr)}
  .faq-menu{position:sticky;top:120px;z-index:3;flex-direction:row;flex-wrap:wrap;gap:8px;padding:12px 0;background:var(--ink)}
  .faq-menu button{border-left:0;border-bottom:1px solid var(--rule);padding:10px 12px}
  .faq-menu button.is-on{border-bottom-color:var(--brass)}
  .faq-panels{margin-top:24px}
  .reach-col+.reach-col{margin-top:clamp(48px,8vw,80px)}
  .strip{flex-wrap:wrap;justify-content:center;gap:12px 22px}
  .coin{display:none}
}
@media(max-width:720px){
  .demo{max-width:calc(100vw - 20px)}
  .orl-head{padding:0 18px;gap:18px}
  .orl-head nav{gap:16px}
  .wordmark{left:20px;top:clamp(70px,12vh,110px);gap:12px;font-size:min(56px,10.5vw)}
  .tagline{writing-mode:horizontal-tb;height:auto;left:20px;right:20px;top:auto;bottom:210px;
    font-size:clamp(15px,4.2vw,18px);line-height:1.9;letter-spacing:.12em}
  .cue i{height:44px}
  .ch1{grid-template-columns:1fr}
  .ch1 img:last-child{display:none}
  .lines{font-size:min(40px,8.6vw)}
  .news-grid{grid-template-columns:minmax(0,1fr)}
  .news-item{border-right:0}
  .news-item+.news-item{border-top:1px solid var(--rule)}
  .flow-track:before{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .flow-list{grid-template-columns:minmax(0,1fr);row-gap:20px;padding:0 0 0 30px}
  .flow-list li:before,.flow-list li:nth-child(n+4):before{display:block;left:-30px;top:5px}
  .flow-dot{left:-1px;top:0;animation-name:flowrun-v}
  .facts dd{font-size:20px}
  footer{grid-template-columns:minmax(0,1fr);gap:8px}
}
@keyframes flowrun-v{0%{top:0}94%{top:calc(100% - 11px)}100%{top:calc(100% - 11px)}}
@media(max-width:520px){
  .orl-head nav a:nth-child(1),.orl-head nav a:nth-child(3){display:none}
  /* 320px で日付と分類の札が 1.2px 右へはみ出していた(別人格レビュー W2)= 札は折り返せるようにし、写真を少し小さく */
  .news-item{grid-template-columns:64px minmax(0,1fr);column-gap:16px}
  .news-item img{width:64px;height:64px;border-radius:32px 32px 4px 4px}
  .meta{flex-wrap:wrap;gap:8px 12px}
  .big{font-size:clamp(36px,11vw,56px)}
  .reel figure{width:clamp(150px,44vw,200px);margin-right:12px}
  .prices div{flex-wrap:wrap;gap:6px 18px}
  .transit div,.hours div{grid-template-columns:80px minmax(0,1fr)}
  .stagger{gap:12px}
  .stagger figure:first-child{grid-column:6/13}
  .stagger figure:last-child{grid-column:1/8;margin-top:-16%}
}

/* はみ出しの止め。器そのものの幅も固定する。 */
html,body,#main{max-width:100%;overflow-x:clip}