/* 炭と錫 ── 居酒屋・和食（没入シネマ型）
   ─────────────────────────────────────────────────────────────
   狙い：暗く濃密な、映画のワンシーンのようなファーストビュー。
   大判写真を面で敷き、明朝の見出しを写真の隅に大胆に置く。
   中央寄せの欧文eyebrow・薄い2行leadは使わない。

   ■ 配色
   地は漆黒〜炭色。差し色は炭火のオレンジ／熾火の赤み。
   従来テンプレの「小面積1色ルール」から解放し、
   火の色はCTAで面としても使う。金は見出しの一部に効かせる。

   ■ 写真
   全点に軽いグレーディング（.grade）をかけ、暗くコントラストを上げて
   デュオトーン気味に統一する。純白 #FFF は地・文字に使わない。 */

:root {
  --ink:     #080604;   /* 最深。漆黒 */
  --ink-2:   #0e0b09;
  --char:    #17120e;   /* 濃い炭色地 */
  --char-2:  #1f1813;

  --ember:   #e2611f;   /* 炭火のオレンジ。差し色・CTAの面 */
  --ember-d: #c1420c;
  --ember-l: #f08a3e;
  --gold:    #cba24f;   /* 熾火に残る金。見出しの一部 */
  --gold-d:  #9c7526;

  --ash:     #9a9187;   /* 錫・灰。ラベル */
  --smoke:   #6f665c;   /* 補助文字 */
  --kinari:  #ece5d8;   /* 生成りの白。本文 */

  --on-dark:     rgba(236,229,216,.86);
  --on-dark-sub: rgba(236,229,216,.60);
  --line-d:  rgba(236,229,216,.14);

  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;

  --pad: clamp(22px, 5.2vw, 56px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--kinari);
  font-family: var(--gothic);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.tabnum, .dish-p, .info, .hero-meta { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 660px; }

/* 写真の統一グレーディング（デュオトーン気味） */
.grade { position: relative; overflow: hidden; }
.grade > img { width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.08) brightness(.82) saturate(.82); }
.grade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 96%, rgba(226,97,31,.18), rgba(226,97,31,0) 55%),
    linear-gradient(180deg, rgba(8,6,4,.30) 0%, rgba(8,6,4,0) 26%, rgba(8,6,4,.22) 74%, rgba(8,6,4,.66) 100%);
}

/* ---------- ヘッダー ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--pad);
  color: var(--kinari);
  transition: background .4s, box-shadow .4s;
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(6,4,3,.82), rgba(6,4,3,0));
  transition: opacity .4s;
}
.bar.on { background: rgba(12,9,7,.94); backdrop-filter: blur(10px);
          box-shadow: 0 1px 0 rgba(236,229,216,.10); }
.bar.on::before { opacity: 0; }
.bar .logo { text-decoration: none; line-height: 1.3; }
.bar .logo b { display: block; font-family: var(--mincho); font-weight: 700;
               font-size: 17px; letter-spacing: .22em; }
.bar .logo small { display: block; font-family: var(--mincho);
                   font-size: 9px; letter-spacing: .36em; color: var(--gold); font-weight: 500; }
.bar nav { display: none; gap: 24px; font-size: 12.5px; letter-spacing: .1em; }
.bar nav a { text-decoration: none; color: rgba(236,229,216,.80); transition: color .3s; }
.bar nav a:hover { color: var(--ember-l); }
@media (min-width: 940px) { .bar nav { display: flex; } }

/* ═════════ ファーストビュー：大判写真を全面。見出しは左下に特大 ═════════ */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; background: var(--ink);
}
.hero-shot { position: absolute; inset: 0; }
.hero-shot > img { width: 100%; height: 100%; object-position: 50% 40%; }
/* 左下を最も暗く沈ませ、特大見出しの可読性を作る（黒の余白を贅沢に取る） */
.hero-grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(140% 120% at 8% 108%, rgba(6,4,3,.94) 0%, rgba(6,4,3,.55) 34%, rgba(6,4,3,0) 62%),
    linear-gradient(180deg, rgba(6,4,3,.55) 0%, rgba(6,4,3,0) 30%, rgba(6,4,3,.10) 60%, rgba(6,4,3,.72) 100%);
}
.hero-copy {
  position: absolute; z-index: 2;
  left: 0; bottom: clamp(96px, 16vh, 172px);
  padding: 0 var(--pad);
  max-width: 1060px;
}
.hero-scene {
  font-family: var(--mincho); font-weight: 500;
  font-size: clamp(12.5px, 3vw, 15px); line-height: 2.4;
  letter-spacing: .16em; color: rgba(236,229,216,.82);
  margin-bottom: clamp(18px, 3.2vw, 30px);
  text-shadow: 0 1px 14px rgba(0,0,0,.85);
}
.hero-title {
  font-family: var(--mincho); font-weight: 700;
  font-size: clamp(40px, 12.5vw, 118px); line-height: 1.24;
  letter-spacing: .05em; text-wrap: balance;
  text-shadow: 0 4px 40px rgba(0,0,0,.7);
}
.hero-title .fire {
  color: var(--ember-l);
  text-shadow: 0 0 26px rgba(226,97,31,.45), 0 4px 40px rgba(0,0,0,.7);
}
.hero-foot {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 0 var(--pad) clamp(22px, 4vw, 38px);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 26px;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none;
  font-size: 11.5px; letter-spacing: .1em; color: rgba(236,229,216,.86); }
.hero-meta li { position: relative; padding-left: 20px; }
.hero-meta li::before { content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--ember); }
.hero-meta b { font-weight: 700; font-family: var(--mincho); letter-spacing: .04em; }
.hero-sample { flex: 1 1 260px; font-size: 10.5px; line-height: 1.9;
  color: rgba(236,229,216,.52); letter-spacing: .02em; text-align: right; }

/* 炭火が明滅するスクロールヒント */
.hero-hint { position: absolute; z-index: 2; right: clamp(20px, 5vw, 48px);
  top: clamp(90px, 16vh, 150px); }
.hero-hint .ember { display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ember-l); box-shadow: 0 0 16px 3px rgba(226,97,31,.55);
  animation: emberFlicker 2.6s ease-in-out infinite; }
@keyframes emberFlicker {
  0%, 100% { opacity: .35; transform: scale(.85); box-shadow: 0 0 8px 1px rgba(226,97,31,.35); }
  45%      { opacity: 1;   transform: scale(1.1);  box-shadow: 0 0 22px 5px rgba(226,97,31,.7); }
  70%      { opacity: .6;  transform: scale(.95); }
}

@media (max-width: 560px) {
  .hero-sample { flex-basis: 100%; text-align: left; margin-top: 4px; }
}

/* ---------- セクション共通 ---------- */
section { padding: clamp(78px, 12vw, 148px) 0; }
.sec-ink  { background: var(--ink);  color: var(--kinari); }
.sec-char { background: var(--char); color: var(--kinari); }

.idx { display: flex; align-items: baseline; gap: 14px;
  font-family: var(--mincho); font-weight: 600;
  font-size: 12.5px; letter-spacing: .22em; color: var(--ash);
  margin-bottom: 22px; }
.idx i { font-style: normal; font-size: 22px; color: var(--ember-l);
  letter-spacing: 0; line-height: 1; }
.idx.light { color: rgba(236,229,216,.9); }

h2 { font-family: var(--mincho); font-weight: 700;
  font-size: clamp(26px, 5.2vw, 46px); line-height: 1.5;
  letter-spacing: .07em; margin-bottom: 30px; text-wrap: balance; }
h3 { font-family: var(--mincho); font-weight: 600; letter-spacing: .06em; }

p + p { margin-top: 1.4em; }
.lead { font-family: var(--mincho); font-weight: 500;
  font-size: clamp(16px, 2.8vw, 20px); line-height: 2.2;
  letter-spacing: .08em; }
.mute { color: var(--on-dark-sub); font-size: 13.5px; line-height: 2.1; }
.sec-ink p, .sec-char p { color: var(--on-dark); }
.sec-ink strong, .sec-char strong { color: var(--kinari); }

.fine-note { margin-top: clamp(30px, 5vw, 44px); font-size: 12px; line-height: 2;
  color: var(--on-dark-sub); padding-top: 18px; border-top: 1px solid var(--line-d); }

/* ═════════ 壱 この店のこと：エディトリアル2カラム ═════════ */
.ed { padding-top: clamp(84px, 12vw, 150px); }
.ed-row { display: grid; gap: clamp(30px, 5vw, 60px); align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
.ed-shot { aspect-ratio: 4 / 5; }
.ed-shot > img { object-position: 52% 42%; }
.ed-text { max-width: 480px; }
.ed-text .lead { margin-bottom: 22px; color: var(--kinari); }
.ed-text .mute { margin-top: 1.4em; }
@media (min-width: 900px) {
  .ed-row { grid-template-columns: 1.02fr 1fr; gap: clamp(48px, 6vw, 92px); }
  .ed-shot { aspect-ratio: 3 / 4; }
}

/* ═════════ 弐 炭火：シネマ幕間（全面写真＋左下見出し） ═════════ */
.cine { position: relative; padding: 0; }
.cine-shot { aspect-ratio: 4 / 5; }
.cine-shot > img { object-position: 50% 52%; }
.cine-cap { position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 0 var(--pad) clamp(28px, 5vw, 48px); max-width: 1060px; margin: 0 auto; }
.cine-cap .idx { color: rgba(236,229,216,.86); text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.cine-cap h2 { margin-bottom: 0; color: var(--kinari);
  text-shadow: 0 3px 30px rgba(0,0,0,.75); }
.cine-body { padding: clamp(52px, 8vw, 92px) 0 clamp(78px, 12vw, 148px); }
.cine-body p { font-size: 14.5px; }
@media (min-width: 900px) {
  .cine-shot { aspect-ratio: 16 / 8; }
  .cine-shot > img { object-position: 50% 58%; }
  .cine-cap { left: 50%; transform: translateX(-50%); width: 100%; }
}

/* ═════════ 参 皿：導入＋写真二枚並べ ═════════ */
.sara-intro { max-width: 720px; }
.sara-intro h2 { margin-bottom: 24px; }
.diptych { display: grid; gap: 4px; margin-top: clamp(40px, 6vw, 64px); background: var(--ink); }
.diptych figure { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.diptych figure:first-child { aspect-ratio: 4 / 5; }
.diptych img { width: 100%; height: 100%; object-fit: cover; }
.diptych figcaption { position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 44px 18px 15px; font-size: 11.5px; letter-spacing: .06em;
  color: rgba(236,229,216,.95); text-shadow: 0 1px 10px rgba(0,0,0,.9); }
@media (min-width: 760px) {
  .diptych { grid-template-columns: 1fr 1fr; }
  .diptych figure, .diptych figure:first-child { aspect-ratio: 4 / 5; }
}

/* ═════════ CTA：火のモチーフの色ベタ帯 ═════════ */
.cta-fire { position: relative; overflow: hidden; text-align: center;
  padding: clamp(64px, 10vw, 108px) 0;
  background: linear-gradient(150deg, var(--ember-d) 0%, var(--ember) 52%, var(--ember-l) 100%);
  color: #241205; }
.cta-fire-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 118%, rgba(255,224,150,.55), rgba(255,224,150,0) 60%);
  animation: fireBreath 5.5s ease-in-out infinite; }
@keyframes fireBreath { 0%,100% { opacity: .45; } 50% { opacity: .85; } }
.cta-fire .wrap { position: relative; z-index: 1; }
.cta-fire h2 { color: #241205; margin-bottom: 16px;
  font-size: clamp(23px, 4.6vw, 34px); text-shadow: none; }
.cta-fire p { color: rgba(36,18,5,.82); font-size: 13.5px; }

/* ═════════ 肆 地酒：脱・3カラムカード。大きな漢字を添えた帖 ═════════ */
.sake-list { margin-top: clamp(40px, 6vw, 58px); }
.sake-row { display: grid; grid-template-columns: auto 1fr;
  gap: clamp(22px, 4vw, 48px); align-items: start;
  padding: clamp(30px, 4.5vw, 44px) 0; border-top: 1px solid var(--line-d); }
.sake-row:last-child { border-bottom: 1px solid var(--line-d); }
.sake-k { font-family: var(--mincho); font-weight: 800;
  font-size: clamp(56px, 12vw, 104px); line-height: .9; color: var(--ember);
  opacity: .92; letter-spacing: 0;
  text-shadow: 0 0 30px rgba(226,97,31,.25); }
.sake-b h3 { font-size: clamp(18px, 3.4vw, 23px); margin-bottom: 12px; color: var(--kinari); }
.sake-b p { font-size: 14px; line-height: 2.05; max-width: 40em; }

/* ═════════ 伍 お品書き：横スクロールのカード ═════════ */
.rail-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-top: clamp(46px, 6vw, 66px); margin-bottom: 18px; }
.rail-title { font-family: var(--mincho); font-weight: 700;
  font-size: clamp(20px, 3.6vw, 27px); letter-spacing: .14em;
  position: relative; padding-left: 20px; }
.rail-title::before { content: ""; position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -3px; background: var(--ember); }
.rail-hint { font-size: 11px; letter-spacing: .16em; color: var(--ash); white-space: nowrap; }

.rail { display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(212px, 62vw, 262px);
  gap: clamp(14px, 2.2vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px var(--pad) 22px;
  scrollbar-width: thin; scrollbar-color: var(--ember) transparent; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--ember-d); border-radius: 3px; }
.rail::-webkit-scrollbar-track { background: rgba(236,229,216,.08); }
.dish { scroll-snap-align: start; background: var(--ink-2);
  border: 1px solid var(--line-d); display: flex; flex-direction: column; }
.sec-char .dish { background: rgba(8,6,4,.5); }
.dish figure { aspect-ratio: 5 / 4; }
.dish figure > img { object-position: 50% 46%; }
.dish-b { padding: 18px 18px 22px; display: flex; flex-direction: column; flex: 1; }
.dish-b h4 { font-family: var(--mincho); font-weight: 600; font-size: 17px;
  letter-spacing: .05em; color: var(--kinari); }
.dish-d { font-size: 11.5px; line-height: 1.85; color: var(--on-dark-sub);
  margin-top: 8px; flex: 1; }
.dish-p { margin-top: 16px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 10px; padding-top: 12px;
  border-top: 1px solid var(--line-d); }
.dish-p .qty { font-size: 11.5px; letter-spacing: .06em; color: var(--ash); }
.dish-p .yen { font-family: var(--mincho); font-weight: 600; font-size: 17px;
  letter-spacing: .02em; color: var(--ember-l); }

.menu-note { list-style: none; margin-top: clamp(30px, 5vw, 44px);
  font-size: 12px; line-height: 2; color: var(--on-dark-sub); }
.menu-note li { padding-left: 16px; position: relative; }
.menu-note li + li { margin-top: 7px; }
.menu-note li::before { content: "※"; position: absolute; left: 0; }
.menu-note .alert { color: var(--ember-l); }
.menu-note .alert::before { content: ""; }
.menu-note strong { color: var(--kinari); }

/* ---------- 全幅の写真帯 ---------- */
.band { position: relative; overflow: hidden; display: block; aspect-ratio: 3 / 2; }
.band > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
@media (min-width: 760px) { .band { aspect-ratio: 16 / 5; } }
.band figcaption { position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 70px var(--pad) 20px; }
.band figcaption span { display: block; max-width: 1060px; margin: 0 auto;
  font-size: 11.5px; letter-spacing: .08em; color: rgba(236,229,216,.95);
  text-shadow: 0 1px 10px rgba(0,0,0,.85); }

/* ═════════ 陸 席：写真主体（左に大判写真、右に語り） ═════════ */
.seki { padding: 0; display: grid; }
.seki-shot { position: relative; min-height: 62vw; }
.seki-shot > img { width: 100%; height: 100%; object-position: 50% 40%; }
.seki-shot figcaption { position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 60px var(--pad) 18px; font-size: 11.5px; letter-spacing: .06em;
  color: rgba(236,229,216,.95); text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.seki-body { padding: clamp(64px, 10vw, 120px) var(--pad); max-width: 620px; }
.seki-list { margin-top: clamp(30px, 5vw, 44px); }
.seki-row { padding: clamp(22px, 3.6vw, 32px) 0; border-top: 1px solid var(--line-d); }
.seki-row:last-child { border-bottom: 1px solid var(--line-d); }
.seki-tag { display: block; font-family: var(--mincho); font-size: 10.5px;
  letter-spacing: .28em; color: var(--gold); margin-bottom: 8px; }
.seki-row h3 { font-size: clamp(17px, 3.2vw, 21px); margin-bottom: 10px; color: var(--kinari); }
.seki-row p { font-size: 13.5px; line-height: 2.05; }
@media (min-width: 900px) {
  .seki { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .seki-shot { min-height: 100%; }
  .seki-body { display: flex; flex-direction: column; justify-content: center;
    max-width: none; padding: clamp(80px, 8vw, 130px) clamp(44px, 5vw, 80px); }
  .seki-body > * { max-width: 560px; }
}

/* ---------- アクセス ---------- */
.access { display: grid; gap: 30px; margin-top: 42px; }
@media (min-width: 860px) { .access { grid-template-columns: 1.05fr .95fr; gap: 54px; } }
.info div { display: grid; grid-template-columns: 96px 1fr; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line-d); align-items: baseline; }
.info div:first-child { border-top: 1px solid var(--line-d); }
.info dt { font-size: 11.5px; letter-spacing: .12em; color: var(--ash); }
.info dd { font-size: 14px; line-height: 1.95; }
.info a { color: var(--gold); }
.map-card { background: var(--ink); border: 1px solid var(--line-d);
  padding: clamp(32px, 6vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.map-card .nm { font-family: var(--mincho); font-weight: 600; font-size: 20px; letter-spacing: .12em; }
.map-card .ad { margin-top: 10px; font-size: 13px; color: var(--on-dark-sub); line-height: 2; }
.map-card .btn { margin-top: 26px; align-self: flex-start; }
.map-card .fine { margin-top: 22px; font-size: 11.5px; color: rgba(236,229,216,.5); line-height: 2; }

/* ---------- CTA ボタン ---------- */
.btn { display: inline-block; padding: 16px 34px;
  background: var(--ember); color: #241205; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: .1em;
  border: 1px solid var(--ember);
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s; }
.btn:hover { background: var(--ember-d); border-color: var(--ember-d);
  transform: translateY(-2px); box-shadow: 0 8px 26px rgba(226,97,31,.3); }
.btn.inv { background: transparent; color: var(--kinari); border-color: rgba(236,229,216,.42); }
.btn.inv:hover { background: var(--kinari); color: var(--ink);
  border-color: var(--kinari); box-shadow: none; }
/* 火の色ベタ帯の上のボタンは炭色で抜く */
.btn.ghost-fire { background: var(--ink); color: var(--kinari); border-color: var(--ink); }
.btn.ghost-fire:hover { background: var(--char-2); border-color: var(--char-2);
  box-shadow: 0 8px 26px rgba(8,6,4,.35); }

.cta-inline { margin-top: clamp(40px, 6vw, 60px); padding: clamp(28px, 5vw, 36px) var(--pad);
  text-align: center; border: 1px solid var(--line-d); background: rgba(236,229,216,.04); }
.cta-inline p { font-size: 13.5px; }
.cta-inline .btn { margin-top: 18px; }
.cta-fire .btn { margin-top: 28px; }

/* ═════════ 最終CTA：火のモチーフ。暗いまま終える ═════════ */
.cta-last { position: relative; overflow: hidden; text-align: center;
  padding: clamp(78px, 12vw, 132px) 0; }
.cta-last-shot { position: absolute; inset: 0; }
.cta-last-shot > img { width: 100%; height: 100%; object-position: 50% 55%; }
.cta-last-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,6,4,.78), rgba(8,6,4,.9)); }
.cta-last-inner { position: relative; z-index: 2; }
.cta-last h2 { color: var(--kinari); margin-bottom: 16px;
  text-shadow: 0 3px 30px rgba(0,0,0,.7); }
.cta-last h2 .fire { color: var(--ember-l); text-shadow: 0 0 24px rgba(226,97,31,.5); }
.cta-last p { color: var(--on-dark); font-size: 13.5px; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.cta-fine { margin-top: 26px; font-size: 11.5px; color: rgba(236,229,216,.55); }

/* スマホ追従バー */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 8px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  background: rgba(12,9,7,.96); backdrop-filter: blur(8px);
  transform: translateY(115%); transition: transform .4s; }
.sticky.on { transform: none; }
.sticky a { flex: 1; text-align: center; padding: 14px 6px; text-decoration: none;
  font-size: 13.5px; font-weight: 700; letter-spacing: .08em; }
.sticky .s1 { background: var(--ember); color: #241205; }
.sticky .s2 { background: transparent; color: var(--kinari); border: 1px solid rgba(236,229,216,.42); }
@media (min-width: 940px) { .sticky { display: none; } }

/* ---------- フッター ---------- */
footer { background: var(--ink); color: #7c7268; text-align: center;
  padding: 58px var(--pad) 104px; border-top: 1px solid var(--line-d); }
.f-logo { font-family: var(--mincho); font-weight: 700; color: var(--kinari);
  font-size: 17px; letter-spacing: .22em; margin-bottom: 8px; }
.f-en { font-family: var(--mincho); font-size: 9.5px; letter-spacing: .36em;
  color: var(--gold); margin-bottom: 20px; opacity: .85; }
footer p { font-size: 11.5px; line-height: 2.1; }
.f-note { max-width: 640px; margin: 20px auto 0; color: #6b6259; }
.credit { margin-top: 28px; font-size: 10.5px; color: #635b52; }
footer a { color: var(--gold); }
@media (min-width: 940px) { footer { padding-bottom: 58px; } }

/* スクロールで浮かび上がる */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  .hero-hint .ember, .cta-fire-glow { animation: none; }
  html { scroll-behavior: auto; }
}