/* =========================================================
   pond end. — style.css
   設計思想は design-concept.md 参照。
   カラー・タイポ・グリッドは §1 の CSS 変数で一元管理。
   ========================================================= */

/* ---------- 1. デザイントークン（ここを変えれば全体に反映） ---------- */
:root {
  /* --- カラー（Warm Gray 確定版） --- */
  --bg: #D9D5CD;          /* ベース：漆喰調ウォームグレー */
  --text: #292621;        /* 本文テキスト */
  --accent: #4C7766;      /* タイルの青緑（面で使う唯一の色） */
  --point: #273E12;       /* ロゴ・締めのポイント（深緑） */
  --surface: #292621;     /* 暗い面（Space / Footer） */
  --on-surface: #F2EDE3;  /* 暗い面上のテキスト（リネン） */
  --line: #F2EDE3;        /* 印刷物と揃えるリネン（補助） */

  /* --- グリッド線・目地（薄さ調整はここ） --- */
  --grid-strength: 0.12;  /* 目地の濃さ 0〜0.4 */
  --gl: color-mix(in srgb, var(--text) calc(var(--grid-strength) * 100%), transparent);
  --gld: color-mix(in srgb, var(--on-surface) calc(var(--grid-strength) * 120%), transparent);

  /* --- グリッド（横厳密・縦柔軟の「横」を司る） --- */
  /* ［比例スケール方式］375pxを基準にデザイン。全サイズを --cell 基準（＝vw比例）に。
     - 〜430px：画面幅いっぱいに比例拡大。375pxでも420pxでも「同じ構図」（大きさだけ変わる）
     - 430px超：430pxの見た目で固定。周りにフィールド／レールが増えるだけ */
  --cols: 6;
  --col-w: 430px;                 /* スケール上限（cap）。全スマホをカバー */
  --max-w: var(--col-w);
  --cell: calc(min(100vw, var(--max-w)) / var(--cols)); /* 430pxで 71.7px 上限、それ未満は画面幅追従 */
  --pad: calc(var(--cell) * 0.34); /* セクション内の基準パディング */

  /* --- タイポ（全て --cell 基準＝vw比例。clamp/vw直書きは廃止＝広い画面でも暴れない） --- */
  --font-serif: 'Cormorant Garamond', serif;
  --font-jp: 'Shippori Mincho', serif;
  --font-sans: 'Jost', sans-serif;

  --fs-hero:       calc(var(--cell) * 1.14);  /* = 19vw（cap内） */
  --fs-head-serif: calc(var(--cell) * 0.75);  /* = 12.5vw */
  --fs-head-jp:    calc(var(--cell) * 0.372); /* = 6.2vw */
  --fs-lead:       calc(var(--cell) * 0.30);  /* = 5vw */
  --fs-body: 12.5px;
  --fs-label: 10px;
}

/* ---------- 2. リセット・ベース ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  /* iOS の本文自動拡大を止める（幅の狭いカラムで本文が右に余白を残すのを防ぐ） */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 300;
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; position: relative; }

/* ---------- 3. グリッド（各セクション共通） ---------- */
/* 横＝厳密なカラムグリッド、縦＝コンテンツに追従（auto 行） */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: auto;
}
/* 目地を見せるブロック（線を出すセクション用） */
.ruled {
  background-image:
    linear-gradient(to right, var(--gl) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gl) 1px, transparent 1px);
  background-size: calc(100% / var(--cols)) var(--cell);
  background-position: -1px -1px;
}

/* ---------- 4. コンポーネント（共通パーツ：後から一括変更可） ---------- */
/* セクションラベル 01 — Concept */
.s-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
/* 欧文大見出し */
.s-head {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-head-serif);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
/* 和文大見出し */
.s-head-jp {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: var(--fs-head-jp);
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}
/* イタリックリード */
.s-lead {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 85%, transparent);
}
/* 本文 */
.s-body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: 0.07em;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  text-wrap: pretty;
}

/* 写真プレースホルダー（実画像に差し替える口） */
.ph {
  position: relative;
  margin: 0;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--text) 6%, transparent) 0 7px,
    color-mix(in srgb, var(--text) 1.8%, transparent) 7px 14px
  );
  overflow: hidden;
}
.ph::after {
  content: attr(data-ph);
  position: absolute;
  left: 10px; bottom: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 45%, transparent);
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph:has(img)::after { display: none; } /* 実画像が入ったらラベル非表示 */

/* タイル（#4C7766 の装飾ブロック） */
.tile { background: var(--accent); }

/* 暗い面（Space / Footer） */
.dark {
  background: var(--surface);
  --text: var(--on-surface);
  --point: var(--on-surface);
  --gl: var(--gld);
  color: var(--on-surface);
}

/* ---------- 5. スクロール表示（reveal） ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1),
              transform 1s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   6. セクション個別レイアウト
   縦はコンテンツ追従（padding/margin で間隔）、横は grid-column で配置
   ========================================================= */

/* ---- HERO ---- */
.hero {
  position: relative;
  z-index: 1;                  /* stacking context を作る。無いと .hero-photo(z-1) が body::before(フィールドの不透明地・z0)に隠れる＝SPで真っ黒になる */
  width: 100%;
  max-width: var(--max-w);     /* SP＝中央カラムと同じ幅（.wrap と揃う） */
  margin-inline: auto;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: var(--cell) 1fr auto var(--cell);
  overflow: hidden;            /* スロウズームで拡大した写真をクリップ／下端の隙間対策 */
  background: var(--surface);  /* 写真の下に敷く暗色（万一の隙間が目立たない） */
}
.hero-photo {
  position: absolute;
  inset: -1px;                 /* 1pxオーバースキャン＝サブピクセルの隙間を殺す */
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  z-index: -1;
}
/* 文字可読性の下スクリム（軽め。強い暗転はエッジのヴィネットに寄せた） */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--surface) 40%, transparent), transparent 32%);
  pointer-events: none;
  z-index: -1;
}
/* SP：ロゴ＝睡蓮マーク＋ワードマークの横並びロックアップを上部ヘッダー位置に中央配置。PC は media query で非表示 */
.hero__title {
  position: absolute;
  top: clamp(20px, 6.5vw, 38px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--cell) * 0.16);
  color: var(--on-surface);
  line-height: 0;
  z-index: 3;
}
.hero__title .hero__mark {
  flex: none;
  width: calc(var(--cell) * 0.4);
  height: auto;
  display: block;
}
.hero__title .hero__wordmark {
  width: calc(var(--cell) * 2.3);
  height: auto;
  display: block;
}
.hero__tile {
  grid-column: -2 / -1;
  grid-row: 4;
}

/* ═══ Hero 入場後の演出：スロウズーム／額縁（PC）／エッジのヴィネット／スクロールキュー ═══ */

/* 写真：入場後にごくゆっくりズーム（生きてる感じ。1回だけ・ループしない） */
.hero-photo {
  animation: heroZoom 22s ease-out both;
  animation-play-state: paused;
}
body.loaded .hero-photo { animation-play-state: running; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.055); } }

/* SP：ロゴは入場後にフェードイン（波紋→写真→要素、の流れ） */
.hero__title { opacity: 0; transition: opacity 1s ease .15s; }
body.loaded .hero__title { opacity: 1; }

/* 額縁ヘアライン／Hero中央ロゴ：PC のみ（base では非表示） */
.hero__frame, .hero__logo { display: none; }

/* エッジのヴィネット：四隅は暗く、中央は写真の色をそのまま出す（PC/SP共通・Hero上のみ）。
   → グリーンタイル等の主役が中央にあれば暗くならない */
.hero__edges {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
  background: radial-gradient(
    130% 115% at 50% 42%,
    transparent 44%,
    color-mix(in srgb, var(--surface) 34%, transparent) 100%
  );
}
body.loaded.at-hero .hero__edges { opacity: 1; }

/* スクロールキュー（Hero上のみ・入場後に出る）。SP＝base はやや大きめ、PC は media query で少し詰める */
.hero__scroll {
  --sl-h: 60px;                 /* 縦線の長さ（＝ドットの移動距離） */
  position: fixed;
  left: 50%;
  bottom: clamp(20px, 2.6vw, 34px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--rail-ink);
  text-decoration: none;
  opacity: 0;
  transition: opacity .9s ease, color .8s ease;
  pointer-events: none;
}
body.loaded.at-hero .hero__scroll { opacity: 1; pointer-events: auto; }
.hero__scroll-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.1em;
}
.hero__scroll-line {
  position: relative;
  width: 1px;
  height: var(--sl-h);
  background: color-mix(in srgb, currentColor 32%, transparent);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 16px;
  background: currentColor;
  animation: scrollDot 2s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(-18px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(var(--sl-h)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; }
  .hero__scroll-line::after { animation: none; opacity: 0.6; }
}

/* ---- 共通：セクション余白 ---- */
.section { padding-block: 60px; }   /* セクション上下＝60px（隣接ギャップ 120px でリズムを取る・Shogo 2026-08-29） */
.section__label { padding-left: var(--pad); margin-bottom: calc(var(--cell) * 0.5); }

/* ---- CONCEPT ---- */
.concept__head {
  padding-left: var(--pad);
  padding-right: var(--pad);
  margin-bottom: calc(var(--cell) * 0.8);
  /* 1行目「「他人以上、友達未満」の、」が SP 幅で収まるサイズに（共通の --fs-head-jp より控えめ） */
  font-size: calc(var(--cell) * 0.336);   /* ≒ 5.6vw@390（フリーズ） */
  letter-spacing: 0.02em;
}
/* 末尾要素の下マージンは削除（セクション間の余白は .section の padding-block に一元化） */
.concept__body { padding-right: var(--pad); padding-left: var(--pad); margin-bottom: 0; max-width: 34em; margin-left: auto; }
.concept__lead { padding-left: var(--pad); }

/* ---- SPACE（ギャラリー：暗い面） ---- */
.space__head { padding-left: var(--pad); margin-bottom: calc(var(--cell) * 0.7); }
.space__gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: var(--cell);
  gap: 0;
  margin-bottom: calc(var(--cell) * 0.6);
}
.space__gallery .ph--a { grid-column: 1 / span 3; grid-row: 1 / span 3; }
.space__gallery .ph--b { grid-column: -4 / -1; grid-row: 5 / span 2; }
.space__gallery .tile  { grid-column: 1; grid-row: 5; }
.space__wide {
  grid-column: 2 / -1;
  aspect-ratio: 16 / 10;
  margin-right: 0;                 /* はみ出しは廃止（Shogo判断・2026-08-29） */
  margin-bottom: calc(var(--cell) * 0.6);
}
.space__gallery--b { margin-bottom: calc(var(--cell) * 0.6); }
.space__gallery--b .ph--e { grid-column: 1 / span 3; grid-row: 1 / span 2; }
.space__gallery--b .ph--f { grid-column: 5 / span 2; grid-row: 2 / span 3; }
.space__gallery--b .ph--g { grid-column: 1 / span 4; grid-row: 6 / span 3; }
.space__gallery--b .tile { grid-column: 1; grid-row: 4; }
/* 左右パディングは --pad で固定、本文幅は列いっぱいに可変。
   max-width を外し、text-wrap も pretty をやめて greedy に（＝375〜430px で本文が右に余白を残して「左寄り」に見えないように・Shogo 2026-09-03） */
.space__body { padding-left: var(--pad); padding-right: var(--pad); text-wrap: wrap; }

/* ---- MENU ---- */
.menu__head { padding-left: var(--pad); margin-bottom: calc(var(--cell) * 0.7); }
.menu__feature {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: var(--cell);
}
/* 次の項目との間隔：marginではなくグリッド内の余白行（1セル分）にして目地を通す */
.menu__feature:not(.menu__feature--food):has(+ .menu__feature) {
  grid-template-rows: repeat(6, var(--cell));
}
/* Food＝Chicken Over Rice ＋ 月替わりランチ ＋ キッズ を1ブロックに。
   写真4行＋名前1行＋サブ3行＝常に8セル固定。サブの中身（ランチ有/無）が変わっても
   ブロック高がセル整数のままなので、下の Coffee とグリッド（目地）がズレない。
   ※ランチを出す/隠すは HTML の .menu__lunch をコメントアウトするだけでOK（CSSは触らなくていい） */
.menu__feature--food {
  grid-template-rows: repeat(8, var(--cell));
}
.menu__feature .ph { grid-column: 1 / span 5; grid-row: 1 / span 4; }
.menu__feature .menu__name { grid-column: 1 / span 5; grid-row: 5; align-self: center; padding-left: var(--pad); }
.menu__feature .menu__price { grid-column: -3 / -1; grid-row: 5; align-self: center; text-align: right; padding-right: var(--pad); }
.menu__name .en { display: block; font-family: var(--font-serif); font-size: calc(var(--cell) * 0.336); line-height: 1.1; }
.menu__name .jp { display: block; font-family: var(--font-jp); font-size: 11px; letter-spacing: 0.08em; color: color-mix(in srgb, var(--text) 66%, transparent); padding-top: 6px; }
.menu__price { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.1em; }

/* 料金の数字は欧文（Jost）で統一：フィーチャー／ランチ／キッズ／リスト */
.menu__lunch-row > span:last-child,
.menu__kids-name > span:last-child,
.menu__row > span:last-child {
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
}
.menu__feature .menu__sweets {
  grid-column: 1 / -1;
  grid-row: 5 / span 3;
  align-self: start;
  padding-inline: var(--pad);
  padding-block: calc(var(--cell) * 0.3) calc(var(--cell) * 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-jp);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--text) 80%, transparent);
}

/* Food ブロックのサブ：月替わりランチ告知＋キッズ。フィーチャーのグリッド 6〜8行目（3セル分）に上詰めで置く。
   3セル分あればランチ有/無どちらの中身も収まる（狭い端末で説明文が折り返しても余裕がある） */
.menu__sub {
  grid-column: 1 / -1;
  grid-row: 6 / span 3;
  align-self: start;
  padding: calc(var(--cell) * 0.3) var(--pad);
  display: flex;
  flex-direction: column;
  gap: calc(var(--cell) * 0.26);
  font-family: var(--font-jp);
}
.menu__lunch { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.menu__lunch-row {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--text);
}
.menu__lunch-note {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
.menu__kids { display: flex; flex-direction: column; gap: 6px; }
.menu__kids-name {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
}
.menu__kids-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--text) 65%, transparent);
}
.menu__kids-drink {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}

/* メニューリスト（深緑タイル壁ではなく #4C7766 の面に載せる） */
.menu__list {
  background-color: var(--accent);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--on-surface) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--on-surface) 14%, transparent) 1px, transparent 1px);
  background-size: calc(100% / var(--cols)) var(--cell);
  background-position: -1px -1px;
  color: var(--on-surface);
  --text: var(--on-surface);
  padding: var(--cell) var(--pad);   /* 上下＝ちょうど1セル分。グリッドが端で途中で切れないように */
  display: flex;
  flex-direction: column;
  gap: calc(var(--cell) * 0.7);
}
.menu__group-title { font-family: var(--font-serif); font-size: 22px; letter-spacing: 0.02em; }
.menu__rows { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; font-family: var(--font-jp); font-size: 12px; letter-spacing: 0.06em; color: color-mix(in srgb, var(--on-surface) 85%, transparent); }
.menu__row { display: flex; justify-content: space-between; gap: 16px; }

/* ---- VISIT（線なし・余白で見せる） ---- */
.visit__photo { aspect-ratio: 4 / 5; margin-bottom: calc(var(--cell) * 0.35); }
.visit__info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--cell) * 0.34);   /* 行グループ間 */
  padding-left: var(--pad);
  margin-top: calc(var(--cell) * 0.3);
}
.visit__row { display: flex; flex-direction: column; gap: 5px; }  /* グループ内は詰める */
.visit__dt { text-align: left; margin: 0; }
.visit__dd { text-align: left; margin: 0; font-family: var(--font-jp); font-size: 13px; letter-spacing: 0.06em; line-height: 1.5; }
.visit__map { grid-column: 1 / -1; padding-left: var(--pad); padding-top: calc(var(--cell) * 0.2); font-size: 11px; letter-spacing: 0.14em; }
.visit__map a { border-bottom: 1px solid color-mix(in srgb, var(--text) 30%, transparent); padding-bottom: 2px; }

/* ---- FOLLOW ---- */
.follow { padding-block: 60px; }
.follow__lead { padding-left: var(--pad); font-family: var(--font-jp); font-size: calc(var(--cell) * 0.264); line-height: 1.9; letter-spacing: 0.05em; margin: 0 0 calc(var(--cell) * 0.8); }
.follow__handle { display: block; padding-left: var(--pad); font-family: var(--font-serif); font-size: calc(var(--cell) * 0.564); color: var(--point); line-height: 1; letter-spacing: -0.02em; margin-left: -0.03em; }

/* ---- FOOTER ---- */
.footer { padding-block: 60px; }
.footer__grid { display: flex; align-items: center; justify-content: center; padding-inline: var(--pad); }
.footer__logo { display: block; width: 130px; height: auto; color: var(--point); }
.footer__illust { height: calc(var(--cell) * 1.4); width: auto; }

/* =========================================================
   8. 全面フィールド（背景グリッド・常時）＋ レール（768px以上）
   中央カラムは §1 で「375基準・430pxで上限」の比例スケール済み。ここでは「周りの装飾」を足す。
   ・フィールド（背景グリッド）＝どの幅でも常時ON。柱の左右に隙間ができたら見える
   ・レール（ロゴ／索引／SNS）＝768px以上でだけ出す（それ未満は幅が足りず窮屈なため）
   ========================================================= */

/* --- フィールド（柱の周りの地）のトークン。暗部トグルで切り替わる --- */
:root {
  --field: #CFCABF;                 /* 通常＝漆喰グレーより少し沈めた地 */
  --field-line: color-mix(in srgb, #292621 10%, transparent);
  --rail-ink: #292621;             /* レールの文字色（通常） */
  --rail-ink-dim: color-mix(in srgb, #292621 45%, transparent);
}
body.field-dark {
  --field: #201E1B;               /* 暗部セクション（Space / Footer）が画面中央 → 水面が翳る */
  --field-line: color-mix(in srgb, #F2EDE3 12%, transparent);
  --rail-ink: #F2EDE3;
  --rail-ink-dim: color-mix(in srgb, #F2EDE3 45%, transparent);
}
body.field-green {
  --field: #446A5C;               /* Menuのグリーンタイル面が画面中央 → 水面が緑に染まる */
  --field-line: color-mix(in srgb, #F2EDE3 12%, transparent);
  --rail-ink: #F2EDE3;
  --rail-ink-dim: color-mix(in srgb, #F2EDE3 45%, transparent);
}
/* Hero を見ているあいだ＝レールは写真の上に乗る → 文字色をリネンに（Concept以降は通常のテキスト色に戻る） */
body.at-hero {
  --rail-ink: #F2EDE3;
  --rail-ink-dim: color-mix(in srgb, #F2EDE3 55%, transparent);
}

/* --- 全面フィールド（背景グリッド）：どの画面幅でも常時ON --- */
body {
  background: var(--field);
  overflow-x: hidden;
}
/* 固定＝スクロールしても動かない"水盤の地"。グリッドは柱の .ruled と同じ1セル。
   縦線を「ビューポート中央に線が来る」ように置く（柱＝430px＝6セルは中央基準で左右3セルずつ
   なので、柱の左右端にちょうど線が乗る）。50%基準なのでスクロールバー幅に左右されず柱とズレない。
   ※ 100vw 基準だとスクロールバー分ズレる（柱の margin:auto は 100vw を含まないため）。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--field);
  background-image:
    linear-gradient(to right, var(--field-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--field-line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  /* ビューポート中央に縦線を1本置く。柱＝6セルは中央から左右3セルずつなので、
     柱の内側グリッドと "同じサイズ・同じ位相" でフィールドが連続する（柱がグリッドの上に乗る絵）。
     % 基準なのでスクロールバー幅に依存しない。 */
  background-position: calc(50% + var(--cell) / 2) 0;
  transition: background-color .8s ease;
  pointer-events: none;
}
/* 中央カラム＝水盤。フィールドの上に乗る。 */
.wrap {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
/* 柱の左右端：各セクションの地色を1pxだけ外へにじませて、縁にちょうど乗るフィールドの生の縦線を
   左右とも隠す（右端だけ見えて "太く／濃く" なる非対称を断つ）。
   明示的なヘアラインは置かず、柱の輪郭は地色の差（--field ↔ セクション地）＋グリッドの連続で見せる。
   ※ #16 で対称ヘアラインを足したが、線の外側に地色1〜2pxが挟まって "余白" に見えたため撤回（Shogo・#31）。 */
.section,
.follow,
.footer {
  box-shadow: -1px 0 0 var(--bg), 1px 0 0 var(--bg);
}
.section.dark,
.footer.dark {
  box-shadow: -1px 0 0 var(--surface), 1px 0 0 var(--surface);
}

/* 768px未満ではレールを出さない */
.pc-frame { display: none; }

@media (min-width: 768px) {

  /* ── PC の Hero だけ全画面写真（Concept 以降は 430px カラム） ──
     .wrap の外に出したので width:100%（＝スクロールバーを除いたコンテンツ幅）でフルブリード。
     100vw を使わないのでレール・フィールド・額縁とピクセル単位で揃う */
  .hero {
    max-width: none;
    margin-inline: 0;
    position: relative;
    z-index: 1;
  }
  /* 大きいワードマークは PC では非表示（レールのロゴタイプが担う） */
  .hero__title { display: none; }
  /* 緑タイル：1:1 の正方形。画像の右下コーナーに置いて、さりげなくグリッドを意識させる */
  .hero__tile {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--cell);
    height: var(--cell);
    grid-column: auto;
    grid-row: auto;
  }
  /* PC は睡蓮マークをレールが担う */
  .hero__mark { display: none; }

  /* Hero中央のロゴ（.hero の子＝スクロールで Hero と一緒に上へ抜けて消える）。
     .hero は .wrap の外＝コンテンツ幅なので left:50% が正確に中央 */
  .hero__logo {
    display: flex;
    position: absolute;
    top: clamp(22px, 3.2vw, 52px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;                       /* エッジのヴィネット(2)・額縁(3)より上 */
    align-items: center;
    gap: clamp(7px, 0.8vw, 12px);
    color: var(--on-surface);
    pointer-events: none;
    transition: opacity .45s ease;
  }
  body:not(.at-hero) .hero__logo { opacity: 0; }   /* 保険：Hero を抜けたら確実に消す */
  .hero__logo-mark { width: clamp(20px, 2vw, 28px); height: auto; display: block; }
  .hero__logo-type {
    width: clamp(100px, 10vw, 168px);
    height: auto;
    display: block;
    filter: brightness(0) invert(0.93) sepia(0.12);  /* logotype.svg は #273E12 固定 → リネン化 */
  }

  /* 額縁ヘアライン（Hero上のみ・入場後に出る。写真＝紙に貼った1枚、という額装の気配） */
  .hero__frame {
    display: block;
    position: fixed;
    inset: clamp(14px, 2vw, 26px);
    border: 1px solid var(--rail-ink-dim);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .9s ease, border-color .8s ease;
  }
  body.loaded.at-hero .hero__frame { opacity: 1; }

  /* PC はスクロールキューを少し詰める（SP=base は一回り大きめ） */
  .hero__scroll { --sl-h: 48px; gap: 10px; }
  .hero__scroll-label { font-size: 13px; }
  .hero__scroll-line::after { height: 13px; }

  /* PC：左右エッジだけ少し足す（リネンのレール文字を写真から浮かせる。中央は触らない） */
  .hero__edges {
    background:
      radial-gradient(130% 115% at 50% 42%, transparent 44%, color-mix(in srgb, var(--surface) 32%, transparent) 100%),
      linear-gradient(to right, color-mix(in srgb, var(--surface) 34%, transparent), transparent 11%),
      linear-gradient(to left,  color-mix(in srgb, var(--surface) 34%, transparent), transparent 11%);
  }

  /* レールは Hero から常時表示（フェードインはしない）。
     文字色だけ切り替える：Hero上＝写真の上なのでリネン／Concept以降＝ベージュ地なので通常のテキスト色 */
  .pc-frame { display: block; }
  .pc-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 3.2vw, 52px);
    width: calc((100vw - min(100vw, var(--col-w))) / 2);
    color: var(--rail-ink);
    transition: color .8s ease;
    pointer-events: none;
  }
  .pc-rail a { pointer-events: auto; }

  .pc-rail--left  { left: 0;  justify-content: space-between; align-items: flex-start; }
  .pc-rail--right { right: 0; justify-content: center;        align-items: flex-end; }

  /* --- 左レール：ロゴタイプ（上）／ SNS・地図（下） --- */
  .pc-logotype {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(7px, 0.8vw, 12px);
    transition: opacity .5s ease, filter .8s ease;
  }
  /* Hero を見ているあいだは左上ロゴを隠す（中央の .hero__logo が担当）。
     Hero を抜けた瞬間にフェードインして定位置に現れる＝中央ロゴとクロスフェード */
  body.at-hero .pc-logotype { opacity: 0; }
  /* ハスマーク（インラインSVG・currentColor で制御） */
  .pc-logotype__mark {
    width: clamp(20px, 2vw, 28px);
    height: auto;
    display: block;
    color: var(--point);
    transition: color .8s ease;
  }
  .pc-logotype__type {
    width: clamp(100px, 10vw, 168px);
    height: auto;
    display: block;
    /* logotype.svg は #273E12 固定。暗部フィールドでは反転してリネン寄りに */
    transition: filter .8s ease;
  }
  body.field-dark .pc-logotype__type,
  body.field-green .pc-logotype__type,
  body.at-hero .pc-logotype__type { filter: brightness(0) invert(0.93) sepia(0.12); }
  body.field-dark .pc-logotype__mark,
  body.field-green .pc-logotype__mark,
  body.at-hero .pc-logotype__mark { color: var(--on-surface); }

  .pc-rail__foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .pc-link {
    position: relative;
    color: var(--rail-ink-dim);
    transition: color .3s ease;
  }
  .pc-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -3px;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
  }
  .pc-link:hover { color: var(--rail-ink); }
  .pc-link:hover::after { transform: scaleX(1); }

  /* --- 右レール：セクション索引（スクロールで現在地がハイライト） --- */
  .pc-index {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vw, 18px);
    text-align: right;
  }
  .pc-index a {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(12px, 1.15vw, 14px);
    letter-spacing: 0.08em;
    color: var(--rail-ink-dim);
    transition: color .35s ease, letter-spacing .35s ease;
  }
  .pc-index__no {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .pc-index a:hover { color: var(--rail-ink); }
  .pc-index li.is-current a {
    color: var(--rail-ink);
    font-weight: 500;
    letter-spacing: 0.14em;
  }
  .pc-index li.is-current .pc-index__no { color: var(--accent); }

  /* --- ホバーの気配（PCだけの小さな動き） --- */
  .ph img { transition: transform 1.2s cubic-bezier(.22,.61,.36,1), filter .6s ease; }
  .ph:hover img { transform: scale(1.03); }
  .follow__handle { transition: color .3s ease, letter-spacing .5s ease; }
  .follow__handle:hover { letter-spacing: 0.02em; }

  /* ── 入場演出：波紋が消えたあと、レール（ロゴ／SNS／索引）が遅れてフェードイン ──
     写真だけの「ひと呼吸」を挟むため、JS が body.loaded を付けるのを遅らせている（script.js） */
  .pc-frame {
    position: relative;
    z-index: 3;                 /* opacity で stacking context ができるので Hero(1) より前に固定 */
    opacity: 0;
    transition: opacity .8s ease;
  }
  body.loaded .pc-frame { opacity: 1; }

}

/* =========================================================
   9. 入場演出（ローディング：波紋）
   睡蓮マークが浮かび、そこから静かな波紋が広がって、面がほどける。
   タイムライン：0s マーク／0.4s〜 波紋／2.0s ローダー退場（0.6s）→ 約2.6s で写真だけ
   その後 script.js が body.loaded を付与 → レールが 0.8s でフェードイン
   ========================================================= */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--accent);
  overflow: hidden;
  animation: loaderExit 0.6s ease 2.0s forwards;
}
.loader__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  color: #273E12;
  opacity: 0;
  transform: scale(0.85);
  animation: markIn 0.7s ease 0s forwards;
}
.ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  border: 1px solid var(--point);
  opacity: 0;
  animation: rippleOut 1.6s cubic-bezier(.22,.6,.3,1) 0.4s forwards;
}
.ripple--2 { animation-delay: 1.0s; }
.ripple--3 { display: none; }
@keyframes markIn {
  to { opacity: 1; transform: scale(1); }
}
@keyframes rippleOut {
  0%   { width: 6px;   height: 6px;   margin: -3px 0 0 -3px;     opacity: 0.4; }
  100% { width: 220px; height: 220px; margin: -110px 0 0 -110px; opacity: 0; }
}
@keyframes loaderExit {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .pc-frame { opacity: 1; transition: none; }
}