@charset "utf-8";
/* =========================================================
   UMAMACHI COFFEE 馬町珈琲 — style.css
   色は店舗実素材から抽出した5色のみ。追加しない。
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  --bg:        #FDF9F0;   /* クリーム（地） */
  --bg-2:      #FBF4EA;   /* やや沈んだクリーム */
  --accent:    #E0A257;   /* オレンジ（ロゴの馬・店名） */
  --accent-ink:#986218;   /* 文字に使えるまで暗くしたオレンジ（cream 4.88:1／sec-alt 4.70:1） */
  --ink:       #463D36;   /* チャコール（本文・見出し 10.09:1） */
  --ink-soft:  #6E645C;   /* 補助文字 5.49:1 */
  --line:      rgba(70, 61, 54, .13);
  --line-2:    rgba(70, 61, 54, .22);
  --shade:     #EFE7DA;   /* 画像読み込み前のプレースホルダ */

  --serif-cjk: "Shippori Mincho B1", "Yu Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans-cjk:  "Zen Kaku Gothic New", "Yu Gothic", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --serif:     "Cormorant Garamond", var(--serif-cjk);
  --sans:      var(--sans-cjk);

  --hdr-h: 64px;
  --pad-sec: clamp(72px, 9vw, 128px);
  --gutter: 20px;
  --edge: max(var(--gutter), calc((100vw - 1180px) / 2));
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --hdr-h: 76px; } }

/* 言語ごとの CJK フォント切替（日本語フォントへのフォールバックを防ぐ） */
html[lang="zh"] {
  --serif-cjk: "Noto Serif SC", "Songti SC", SimSun, serif;
  --sans-cjk:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}
html[lang="ko"] {
  --serif-cjk: "Noto Serif KR", "Nanum Myeongjo", Batang, serif;
  --sans-cjk:  "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; }
figure { margin: 0; }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0 0 1.45em; max-width: 36em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

html[lang="en"] body, html[lang="es"] body { line-height: 1.75; letter-spacing: .005em; }
html[lang="ja"] body { line-break: strict; }
html[lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }
html[lang="zh"] body { letter-spacing: .01em; }

@media (min-width: 900px) { body { font-size: 17px; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 12px 20px;
}
.skip:focus { left: 0; }

.container { width: min(1180px, 100% - var(--gutter) * 2); margin-inline: auto; }

/* 固定ヘッダー分のアンカー位置補正 */
.sec, .band, .hero { scroll-margin-top: var(--hdr-h); }

/* ---------- 共通パーツ ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px; max-width: none;
  font-size: 12px; line-height: 1.6; letter-spacing: .24em;
  color: var(--ink-soft); text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--accent); flex: none;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(27px, 3.2vw, 42px);
  line-height: 1.34; letter-spacing: .045em;
  margin: 0 0 30px;
  max-width: 22em;
  /* 日本語見出しを文節で折る（対応外のブラウザでは無視される） */
  word-break: auto-phrase;
  text-wrap: balance;
}
html[lang="en"] .h2, html[lang="es"] .h2 { letter-spacing: .012em; line-height: 1.22; }
.h3, .menu-h {
  font-family: var(--serif);
  word-break: auto-phrase;
  font-size: clamp(20px, 2.1vw, 25px);
  line-height: 1.4; letter-spacing: .05em;
  margin: 0 0 18px;
}
/* 下位見出し：h2 と同じ語彙（オレンジの罫）を使いつつ、階層は明確に一段下げる */
.h3-rule::before {
  content: ""; display: block; width: 26px; height: 1px;
  background: var(--accent); margin: 0 0 16px;
}
.lead { font-size: 1.05em; }
.note { color: var(--ink-soft); font-size: 14px; letter-spacing: .03em; }
/* 中央寄せの短い注記は、文節で折って行長を均す */
.sec-head-c .note, .ig-note { word-break: auto-phrase; text-wrap: balance; }
.note-sm { font-size: 13px; margin-top: 18px; }
.tax-note { margin-top: clamp(26px, 3vw, 38px); max-width: none; }
#drink .tax-note { text-align: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 30px;
  background: var(--accent); color: var(--ink);
  font-size: 14px; font-weight: 500; letter-spacing: .1em;
  text-decoration: none; border: 1px solid var(--accent);
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover { background: #D2913F; border-color: #D2913F; }
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--line-2);
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
span.btn-ghost { color: var(--ink-soft); cursor: default; }
span.btn-ghost:hover { background: transparent; color: var(--ink-soft); border-color: var(--line-2); }

.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 13px; height: 13px; }
.ico-play { width: 20px; height: 20px; fill: currentColor; stroke: none; }

/* 写真枠 */
.ph { position: relative; overflow: hidden; background: var(--shade); min-width: 0; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-34 { aspect-ratio: 3 / 4; }
.ph-43 { aspect-ratio: 4 / 3; }
.ph-11 { aspect-ratio: 1 / 1; }

/* ---------- header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  color: var(--ink);
  background: rgba(253, 249, 240, .93);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
/* ヒーローの上に重なっている状態（JS が制御。JS 不在時は常に通常状態） */
.js .hdr.is-over {
  color: #fff;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
.hdr::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px;
  background: linear-gradient(to bottom, rgba(24, 19, 15, .5), rgba(24, 19, 15, 0));
  opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: -1;
}
.js .hdr.is-over::before { opacity: 1; }

.hdr-in {
  display: flex; align-items: center; gap: 20px;
  height: var(--hdr-h); width: min(1320px, 100% - var(--gutter) * 2); margin-inline: auto;
}
/* ブランド表示：ロゴ画像（濃灰の版）はヘッダー幅では文字が潰れるため、
   ヘッダーは同じ組みを文字で再現する。ロゴ画像はフッターで大きく見せる。
   店名は言語が変わっても同じ字形で出す（日本語明朝を明示指定）。 */
.brand {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.brand-jp {
  font-family: "Shippori Mincho B1", "Yu Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
  font-size: 19px; letter-spacing: .16em;
}
.brand-en { font-size: 8.5px; letter-spacing: .26em; opacity: .74; }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-list a {
  display: inline-block; position: relative; padding: 6px 0;
  font-size: 13.5px; letter-spacing: .08em; text-decoration: none; color: inherit;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--accent); transition: right .25s ease;
}
.nav-list a:hover::after { right: 0; }

.hdr-tools { display: flex; align-items: center; gap: 8px; }

.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line-2); border-radius: 2px;
  font-size: 13px; letter-spacing: .04em; cursor: pointer;
  transition: border-color .3s ease;
}
.js .hdr.is-over .lang-btn { border-color: rgba(255, 255, 255, .5); }
.lang-btn:hover { border-color: var(--accent); }
.lang-cur { white-space: nowrap; }
.lang-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 184px; list-style: none; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(70, 61, 54, .18);
}
.lang.is-open .lang-menu { display: block; }
.lang-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 46px; padding: 0 16px;
  background: transparent; border: 0; text-align: left;
  font-size: 14px; letter-spacing: .03em; cursor: pointer;
}
.lang-menu button:hover { background: var(--bg-2); }
.lang-menu button::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none;
}
.lang-menu button[aria-current="true"] { font-weight: 500; }
.lang-menu button[aria-current="true"]::before { background: var(--accent); }

.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 1px; margin: 5px auto; background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  .burger { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; color: var(--ink);
    background: var(--bg); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .3s ease, visibility .3s;
  }
  .nav.is-open { max-height: 80vh; visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 16px; }
  .nav-list li { width: min(1180px, 100% - var(--gutter) * 2); margin-inline: auto; }
  .nav-list a {
    display: block; padding: 15px 0; font-size: 15px;
    border-bottom: 1px solid var(--line);
  }
  .nav-list li:last-child a { border-bottom: 0; }
  .nav-list a::after { display: none; }
}
@media (min-width: 1024px) {
  .hdr-in { gap: 28px; }
  .brand-jp { font-size: 21px; }
  .brand-en { font-size: 9px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh;
  min-height: 520px; max-height: 960px;
}
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 46%; }
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(22, 17, 13, .34) 0%,
    rgba(22, 17, 13, .10) 20%,
    rgba(22, 17, 13, 0) 40%,
    rgba(22, 17, 13, .30) 66%,
    rgba(22, 17, 13, .76) 100%);
}
.hero-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-bottom: clamp(104px, 13vh, 148px);
}
.hero-mark {
  margin: 0 0 16px; max-width: none;
  font-size: 11.5px; letter-spacing: .36em; color: rgba(255, 255, 255, .85);
}
.hero-title {
  font-family: var(--serif); color: #fff;
  word-break: auto-phrase;
  font-size: clamp(28px, 5.4vw, 66px); line-height: 1.24; letter-spacing: .04em;
  margin: 0; max-width: 16em;
  text-shadow: 0 1px 26px rgba(20, 14, 10, .35);
}
html[lang="en"] .hero-title, html[lang="es"] .hero-title { letter-spacing: .01em; }
.hero-sub {
  margin: 18px 0 0; max-width: 28em;
  font-size: clamp(13.5px, 1.4vw, 16px); letter-spacing: .1em;
  color: rgba(255, 255, 255, .88);
}
.hero-scroll {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: rgba(255, 255, 255, .8);
}
.hero-scroll-label { font-size: 10px; letter-spacing: .3em; text-indent: .3em; }
.hero-scroll-line {
  width: 1px; height: 62px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
}
@media (max-width: 767px) {
  .hero-scroll { display: none; }
  /* モバイルの外観写真は下部に白い立て看板が入る。画角を上へ寄せて看板を文字の下から外す */
  .hero-media img { inset: 0 0 auto 0; height: 156%; object-position: 50% 0; }
  .hero-shade {
    background: linear-gradient(to bottom,
      rgba(20, 15, 11, .42) 0%,
      rgba(20, 15, 11, .12) 22%,
      rgba(20, 15, 11, .04) 40%,
      rgba(20, 15, 11, .46) 68%,
      rgba(20, 15, 11, .86) 100%);
  }
  .hero-body { padding-bottom: clamp(48px, 8vh, 76px); }
}

/* ヒーローの入り（1つだけ） */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.js .hero-mark  { animation: heroIn .9s cubic-bezier(.22, .7, .3, 1) .05s both; }
.js .hero-title { animation: heroIn .9s cubic-bezier(.22, .7, .3, 1) .18s both; }
.js .hero-sub   { animation: heroIn .9s cubic-bezier(.22, .7, .3, 1) .32s both; }
.js .hero-scroll { animation: heroIn .9s cubic-bezier(.22, .7, .3, 1) .5s both; }

/* ---------- sections ---------- */
.sec { padding: var(--pad-sec) 0; }
.sec-alt { background: var(--bg-2); }
.sec-ig { padding-top: 0; }
.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .note { margin-top: -8px; }
.sec-head-c { text-align: center; }
.sec-head-c .eyebrow { justify-content: center; }
.sec-head-c .h2 { margin-inline: auto; }
.sec-head-c .note { margin-inline: auto; }

.split { display: grid; gap: clamp(36px, 5vw, 56px); }
.split-media { align-self: center; }
.split-media > .ph { width: 100%; max-width: 460px; margin-inline: auto; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); align-items: center; }
  .split-rev .split-media { order: -1; }
  .split-text { padding-block: 8px; }
}

/* about の2枚組み（どちらも元の比率のまま。トリミングしない） */
.split-media-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.split-media-2 > .ph { max-width: none; }
.split-media-2 .ph-offset { margin-top: 33.333%; }   /* 3:4 と 1:1 の下端を揃える */

/* ---------- feature（写真を紙の端まで出す大きな組み） ---------- */
.sec-feature { padding: var(--pad-sec) 0; }
.feature { display: grid; gap: clamp(30px, 4vw, 44px); }
.feature-media { position: relative; overflow: hidden; background: var(--shade); min-width: 0; }
.feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-text { width: min(1180px, 100% - var(--gutter) * 2); margin-inline: auto; }

.fm-iced { aspect-ratio: 4 / 5; }
.fm-iced img { object-position: 50% 38%; }
/* 焙煎機：ポスター下部の但し書き（誤記あり）を画角に入れないため 8/7 で固定する */
.fm-roaster { aspect-ratio: 8 / 7; }
.fm-roaster img { object-position: 50% 0; }

@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; }
  .feature-text { width: auto; margin: 0; }
  .feature-media-left .feature-text { padding-left: clamp(32px, 4vw, 64px); padding-right: var(--edge); }
  .feature-media-right .feature-media { order: 2; }
  .feature-media-right .feature-text { padding-right: clamp(32px, 4vw, 64px); padding-left: var(--edge); }
  .fm-iced { aspect-ratio: 8 / 7; }
  .fm-iced img { object-position: 50% 34%; }
}

/* feature の下に置く従属ブロック */
.sub { display: grid; gap: clamp(26px, 4vw, 40px); margin-top: clamp(60px, 8vw, 108px); }
.sub-media .ph { width: 100%; max-width: 340px; }
@media (min-width: 900px) {
  /* 写真とテキストの下端をそろえる（中央そろえだと文章量の差がそのまま下の空きになる） */
  .sub { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); align-items: end; }
  .sub-text { max-width: 36em; }
  .sub-text > :last-child { margin-bottom: 0; }
}
/* .sub で終わるセクションは下パディングを一段詰める（取り残された空間を作らない） */
.sec-feature:has(> .sub:last-child) { padding-bottom: clamp(56px, 6vw, 84px); }

/* ---------- band（全幅の帯・パララックス） ---------- */
.band { position: relative; height: clamp(280px, 52vh, 540px); overflow: hidden; }
.band img {
  position: absolute; left: 0; top: -8%;
  width: 100%; height: 116%; object-fit: cover;
}
.band-1 img { object-position: 50% 52%; }
.band-2 img { object-position: 50% 86%; }

/* ---------- food ---------- */
.food-feature { display: grid; gap: clamp(32px, 4vw, 48px); }
.food-card { min-width: 0; }
@media (min-width: 768px) { .food-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.food-card .ph { margin-bottom: 22px; }
.food-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px;
}
.food-name { font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); letter-spacing: .05em; line-height: 1.4; margin: 0; }
.food-tag {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; color: var(--accent-ink);
}
.food-desc { margin: 0 0 10px; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); max-width: 34em; }
.food-side { margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--ink-soft); }
/* 写真なしの品は2段組。列幅・左右の起点を上の写真カードと完全にそろえ、
   1180px 幅で品名と価格が離れすぎるのを防ぐ。 */
.food-cols { display: grid; gap: 0 clamp(32px, 4vw, 48px); margin-top: clamp(40px, 5vw, 64px); }
.food-list { border-top: 1px solid var(--line); }
.food-list:empty { display: none; }
@media (min-width: 768px) {
  .food-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 767px) {
  /* 縦積みのときは境界の罫線が二重にならないよう2本目の上罫を落とす */
  .food-cols .food-list + .food-list { border-top: 0; }
}

/* ---------- メニュー行（フード写真なし・ドリンク共通） ---------- */
.mlist { list-style: none; }
.mrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.m-name { min-width: 0; }
.m-en { display: block; font-size: 15px; letter-spacing: .035em; line-height: 1.5; }
.m-sub { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.m-meta { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.m-temp { font-size: 10.5px; letter-spacing: .14em; color: var(--ink-soft); }
.m-price {
  font-family: "Cormorant Garamond", var(--serif-cjk);
  font-size: 20px; font-weight: 600; letter-spacing: .02em;
  min-width: 3.4em; text-align: right;
}
.m-desc {
  grid-column: 1 / -1; margin: 8px 0 0; max-width: 36em;
  font-size: 13px; line-height: 1.8; color: var(--ink-soft);
}
.m-side { grid-column: 1 / -1; margin: 6px 0 0; font-size: 11.5px; letter-spacing: .1em; color: var(--ink-soft); }
.mgroup {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 30px 0 8px;
}
.mrow + .mgroup { padding-top: 34px; }
.mgroup-name { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .2em; color: var(--ink); }
.mgroup-name::before { content: ""; width: 18px; height: 1px; background: var(--accent); flex: none; }
.mgroup-tag { font-size: 10.5px; letter-spacing: .12em; color: var(--accent-ink); }
.mnote { padding: 14px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); }

.menu-cols { display: grid; gap: clamp(44px, 6vw, 64px); }
.menu-col { min-width: 0; }
.menu-h { margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
@media (min-width: 900px) {
  /* 2段組。段幅は等分（品名を折り返させないため）。
     左右の段の長さの差は原稿量そのものの差で、締めの注記を中央に置いて受ける。 */
  .menu-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(56px, 6vw, 88px);
  }
}

/* ---------- video ---------- */
/* 縦動画が空間に浮かないよう、地を一段沈めた帯で受ける */
.sec-video { background: var(--shade); padding: clamp(64px, 7vw, 100px) 0; }
.sec-video .sec-head { margin-bottom: clamp(28px, 3vw, 40px); }
.video-frame {
  position: relative; width: min(420px, 100%); margin-inline: auto;
  aspect-ratio: 9 / 16; background: var(--ink); overflow: hidden;
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 26px; cursor: pointer;
  background: rgba(253, 249, 240, .94); border: 0; color: var(--ink);
  font-size: 14px; letter-spacing: .08em;
}
.video-play:hover { background: var(--accent); }
.video-frame.is-playing .video-play { display: none; }

/* ---------- instagram（写真は置かず、導線だけを静かに） ---------- */
.ig-in {
  max-width: 640px; margin-inline: auto; text-align: center;
  border-top: 1px solid var(--line); padding-top: clamp(52px, 6vw, 76px);
}
.ig-h { margin: 0 auto 18px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .16em; }
.ig-note { margin-inline: auto; }
.ig-embed:empty { display: none; }
/* 動画の帯（沈んだ地）の直後は色の切り替わりが境界になるので、上罫を重ねない */
.sec-video + .sec-ig .ig-in { border-top: 0; }
.ig-embed { margin: clamp(28px, 4vw, 40px) 0 0; display: flex; justify-content: center; }
.ig-cta { margin: clamp(28px, 4vw, 40px) 0 0; text-align: center; max-width: none; }

/* ---------- visit ---------- */
.facts { margin: 0 0 34px; }
.fact {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.fact:last-child { border-bottom: 1px solid var(--line); }
.fact dt { font-size: 11.5px; letter-spacing: .18em; color: var(--ink-soft); }
.fact dd { margin: 0; font-size: 15px; line-height: 1.8; }
@media (min-width: 560px) {
  .fact { grid-template-columns: 7.5em 1fr; gap: 16px; align-items: baseline; }
  .fact dt { padding-top: 2px; }
}
.tel { text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; letter-spacing: .05em; }
.visit-cta { max-width: none; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 84px) 0 clamp(44px, 5vw, 64px); text-align: center; }
.ftr-logo { height: 112px; width: auto; }
.ftr-name { margin: 20px 0 0; max-width: none; font-family: var(--serif); font-size: 14px; letter-spacing: .3em; }
.ftr-company { margin: 12px 0 0; max-width: none; font-size: 13.5px; color: var(--ink-soft); }
.ftr-copy { margin: 26px 0 0; max-width: none; font-size: 11.5px; letter-spacing: .06em; color: var(--ink-soft); }

/* ---------- 出現アニメーション ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero-mark, .js .hero-title, .js .hero-sub, .js .hero-scroll { animation: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}