/* ============================================================
   まほらま農園 v4 — v3（シール主軸・ボルドー）× ogawa_study（右固定縦書きナビ・巨大円アーチ・小川7レバー）ハイブリッド
   基調: 和紙 #FBF9F5 ／ 深紅ボルドー #8C1D2F ／ 濃墨・煤竹 #2A2624
   ============================================================ */

:root {
  --washi: #FBF9F5;
  --washi-deep: #F7F4EC;
  --ink: #2A2624;
  --bordeaux: #7A2432;
  --bordeaux-deep: #4A141D;
  --line: rgba(122, 36, 50, .22);
  --hairline: rgba(42, 38, 36, .14);
  --fruit: #7A2432;
  --font-display: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  --font-body: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  --space-section: clamp(6rem, 14vh, 10rem);
  --header-h: 64px;
  --side-nav-w: clamp(38px, 6vw, 58px);
  --content-safe-r: 0px;
  /* 実りの暦：生命アニメーション（§20 v4.13） */
  --ease-fruit: linear(0, 0.1028, 0.3311, 0.5888, 0.8149, 0.9803, 1.0794, 1.1216, 1.123, 1.1007, 1.0689, 1.0375, 1.0124, 0.9955, 0.9867, 0.984, 0.9855, 0.9891, 0.9933, 0.9969, 0.9996, 1.0012, 1.0019, 1.002, 1.0016);
  --ease-branch: linear(0, 0.275, 0.844, 1.3239, 1.4924, 1.3551, 1.0746, 0.8393, 0.7576, 0.8261, 0.9643, 1.0798, 1.1193, 1.0852, 1.017, 0.9604, 0.9412, 0.9583, 0.9919, 1.0196, 1.0289, 1.0204, 1.0039, 0.9903, 0.9858, 0.99, 0.9982, 1.0048, 1.007, 1.0049, 1.0009);
  --ease-leaf: linear(0, 0.0955, 0.2999, 0.5252, 0.7224, 0.8714, 0.97, 1.0258, 1.05, 1.0539, 1.0466, 1.0348, 1.0228, 1.0127, 1.0054, 1.0007, 0.9981, 0.9971, 0.9971, 0.9976, 0.9983);
}

/* 右固定ナビ(.side-nav)と本文の衝突防止：ナビは画面中央高さに浮き、.side-nav自身は
   min-width:900pxでのみ表示される（883行目付近）。表示条件と同じブレークポイントで、
   ナビの実幅(--side-nav-w)ぶんだけ安全余白を確保する。
   ※旧実装は max-width:899px（＝ナビが出ない側）に固定46pxを確保しており、
   ナビが実際に表示される900px以上では0のままだったため常時衝突していた（2026-08-04修正）。 */
@media (min-width: 900px) {
  :root { --content-safe-r: calc(var(--side-nav-w) + 20px); }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* モバイルSafari/Chrome既定のタップハイライト（灰色〜半透明の四角フラッシュ）を全域で無効化。
   透過PNG（果実プレート等）の上でも和紙の上でも「四角い背景」が一瞬見える原因はこれ一点だった
   （2026-08-05 実機フィードバック）。個別要素ではなくサイト全体のタップ可能要素に効かせる。 */
html { -webkit-tap-highlight-color: transparent; }

/* 短いフレーズが途中で改行されて分断されるのを防ぐ汎用ユーティリティ（2026-08-05） */
.u-nowrap { white-space: nowrap; }

/* スマホ向けに刻んだ改行を、幅に余裕のあるPC/タブレット（900px以上）では無効化する
   （2026-08-05 実機フィードバック。contact__leadが6行に刻まれ狭苦しく見えていた）。 */
@media (min-width: 900px) {
  .u-break-mobile { display: none; }
}

/* PC向けに刻んだ改行を、スマホ/小型画面（899px以下）では無効化するユーティリティ */
@media (max-width: 899px) {
  .u-break-desktop { display: none; }
}

/* body の overflow-x:hidden だけではWebKit/Safari系でページ全体の横パンを止め切れないため、
   実際のスクロールルート要素である html 側にも明示する（Chromiumは元々body側だけで足りていた）。 */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: radial-gradient(120% 120% at 30% 20%, #FEFCF8 0%, #FBF9F5 45%, #F4ECE0 100%);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .06em;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }

#home, #soil, #calendar, #contact,
#fruit-peach, #fruit-apricot, #fruit-plum, #fruit-fig, #fruit-grape {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* ---- 動き（reveal＝transitionのみ・上品な動きの上限） ---- */

.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s ease;
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* 見出し・結びの一言：reveal内でフレーズ／文字単位に遅延をかける拡張(transitionのみ・§5.4の上限を維持) */
.js-anim .soil__title span,
.js-anim .almanac__title span {
  display: inline-block;
  opacity: 0;
  filter: blur(3px);
  transition: opacity .8s ease, filter .8s ease;
  transition-delay: calc(var(--i, 0) * .18s);
}
.reveal.is-visible .soil__title span,
.reveal.is-visible .almanac__title span { opacity: 1; filter: none; }

/* 結びの一言：1文字ずつ遅延で浮かび上がる
   （旧・3重定義時代に必要だった position/width/transform のリセットは、
     .closing 系を1本化して詳細度の漏れが消えたため撤去した・2026-07-25） */
.js-anim .closing__phrase .closing__chars span {
  display: inline-block;
  opacity: 0;
  filter: blur(3px);
  transition: opacity .7s ease, filter .7s ease;
  transition-delay: calc(var(--i, 0) * .12s);
}
.closing__phrase.is-visible .closing__chars span { opacity: 1; filter: none; }

.js-anim .crop-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s ease .2s;
}
.js-anim .is-visible .crop-line { stroke-dashoffset: 0; }

/* ヒーロー直刻（is-awake＝初回表示。銘が浮かび、朱の葉が引かれる） */

.js-anim .hero__name  { opacity: 1; }
.js-anim .hero__name span {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1.3s ease, filter 1.3s ease;
  transition-delay: calc(.25s + var(--i, 0) * .38s);
}
.js-anim.is-awake .hero__name span { opacity: 1; filter: none; }
.js-anim .hero__farm  { opacity: 0; transition: opacity .9s ease 2.85s; }
.js-anim .hero__copy  { opacity: 0; transition: opacity .9s ease 3.05s; }
.js-anim .hero__arc   { opacity: 0; transition: opacity .9s ease 3.25s; }
.js-anim .hero__accent {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s ease 3.3s;
}
.js-anim .mahorama-seal-container,
.js-anim .hero__place { opacity: 0; transition: opacity .9s ease 3.6s; }

.js-anim.is-awake .hero__name,
.js-anim.is-awake .hero__farm,
.js-anim.is-awake .hero__copy,
.js-anim.is-awake .hero__arc,
.js-anim.is-awake .mahorama-seal-container,
.js-anim.is-awake .hero__place { opacity: 1; }
.js-anim.is-awake .hero__accent { stroke-dashoffset: 0; }

100% {
    opacity: 1;
    filter: drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
    transform: scale(1);
  }
}

100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .js-anim .soil__poem { opacity: 1; filter: none; transform: none; transition: none; }
  .soil__title span, .almanac__title span, .closing__phrase .closing__chars span { opacity: 1; filter: none; transition: none; }
  .js-anim .crop-line { stroke-dashoffset: 0; transition: none; }
  .js-anim .mhr-wipe { stroke-dashoffset: 0; transition: none; }
  .js-anim .mhr-leaf__unfurl { opacity: 1; transform: scale(var(--leaf-scale, 1)) rotate(0deg); transition: none; }
  .js-anim .mhr-fruit__unfurl { opacity: 1; transform: scale(1) rotate(var(--fruit-rotate, 0deg)); transition: none; }
  .js-anim .mhr-branch { transition: none; }
  .entry.is-visible .mhr-branch { transform: none; }
  .js-anim .hero__name,
  .js-anim .hero__name span,
  .js-anim .hero__farm,
  .js-anim .hero__copy,
  .js-anim .hero__arc,
  .js-anim .mahorama-seal-container,
  .js-anim .hero__place { opacity: 1; filter: none; transition: none; }
  .js-anim .hero__accent { stroke-dashoffset: 0; transition: none; }
  .menu-overlay, .menu-overlay__panel,
  .menu-overlay__brand, .menu-overlay__nav a, .menu-overlay__sns,
  .soil-story, .soil-story__panel, .soil-story__body, .soil-story__body-inner,
  .soil-story__science, .soil-story__science > p, .soil-story__chevron,
  .soil-story__sci-mark::before, .soil-story__sci-mark::after, .soil__story-trigger,
  .soil-story__close, .soil-story__close-bar,
  .site-header__icon span { transition: none; }

  /* §24 ⑥-3: reduced-motion 時は線画歩行を全スキップして最初から水彩画・本文を即座に表示 */
  .moku-modal__sketch-wrapper, .moku-modal__skip-btn { display: none; }
  .moku-modal.is-open .moku-modal__watercolor {
    opacity: 1;
    filter: drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
    transform: none;
    transition: none;
  }
  .moku-modal.is-open .moku-modal__title,
  .moku-modal.is-open .moku-modal__lead,
  .moku-modal.is-open .moku-modal__text,
  .moku-modal.is-open .moku-modal__action {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .moku-trigger { transition: none; }
}

/* ---- 質感（和紙のグレイン — 絵巻物キャンバス） ---- */

/* 画面全体の和紙グレイン（全セクション共通・1枚の絵巻物） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .65;
  mix-blend-mode: multiply;
  filter: contrast(135%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ============================================================
   絵巻物を貫く完璧な全画面円環モチーフレイヤー（360度どこも切れない命の真円）
   ============================================================ */

/* ============================================================
   背景モジュール：幾何学巨大円アーチ（全セクション共通）
   ============================================================ */

.bg-orbit {
  position: absolute;
  z-index: 0;
  color: var(--bordeaux);
  opacity: .16;
  pointer-events: none;
  overflow: visible;
}

.bg-orbit--hero-a { width: clamp(600px, 92vw, 1380px); height: clamp(600px, 92vw, 1380px); right: clamp(-780px, -62vw, -340px); top: -25%; opacity: .18; }
.bg-orbit--hero-b { width: clamp(380px, 60vw, 780px); height: clamp(380px, 60vw, 780px); left: clamp(-460px, -38vw, -160px); bottom: -24%; opacity: .14; }
.bg-orbit--soil   { width: clamp(480px, 84vw, 1200px); height: clamp(480px, 84vw, 1200px); right: clamp(-540px, -44vw, -150px); top: -12%; opacity: .14; }
.bg-orbit--almanac{ width: clamp(460px, 80vw, 1300px); height: clamp(460px, 80vw, 1300px); left: clamp(-520px, -42vw, -140px); top: 8%; opacity: .12; }
.bg-orbit--contact{ width: clamp(400px, 70vw, 1000px); height: clamp(400px, 70vw, 1000px); right: clamp(-460px, -38vw, -130px); bottom: -30%; opacity: .16; }

/* ---- 固定ヘッダー（§5.2 どこからでも1操作でトップへ） ---- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 32px);
  background: rgba(251, 249, 245, .92);
  border-bottom: 1px solid var(--hairline);
}

.site-header__name {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-header__logo-img {
  height: clamp(24px, 3.6vh, 32px);
  width: auto;
  display: block;
  transition: opacity .3s ease, transform .3s ease;
}
.site-header__name:hover .site-header__logo-img {
  opacity: .85;
  transform: scale(1.03);
}

.site-header__icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.site-header__icon span {
  display: block;
  width: 27px;
  height: 1.5px;
  background: var(--bordeaux);
  transition: transform .35s ease;
}
.site-header__icon:hover span { transform: scaleX(.72); }

/* メニュー開閉時：ハンバーガー2本線がXへ変形（掛け軸の開閉トリガーはこのアイコンのみ） */
.site-header__icon[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
.site-header__icon[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.75px) rotate(-45deg); }

/* ============================================================
   スマホ・タブレット用レスポンシブヘッダー設定
   PC幅では「左: ハンバーガー / 右: ロゴ」の現行バランスを維持。
   スマホ幅(899px以下)では「左: ロゴ / 右: ハンバーガー(大きめサイズ)」に自動反転。
   ============================================================ */
@media (max-width: 899px) {
  .site-header {
    flex-direction: row-reverse;
  }
  
  .site-header__icon {
    width: 60px;
    height: 60px;
    gap: 9px;
  }
  
  .site-header__icon span {
    width: 33px;
    height: 2px;
  }

  .site-header__icon[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }
  .site-header__icon[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(-5.5px) rotate(-45deg);
  }
}

/* ============================================================
   右固定・縦書きナビ（PC・大型モニター用。スマホ・タブレットでは非表示にしメイン領域を全開に開放）
   ============================================================ */

.side-nav {
  display: none !important;
}

@media (min-width: 900px) {
  .side-nav {
    display: flex !important;
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 55;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 3.2vh, 26px);
    padding: 22px 8px 22px 10px;
    background: rgba(251, 249, 245, .88);
    border: 1px solid var(--hairline);
    border-right: none;
    border-radius: 14px 0 0 14px;
    box-shadow: -6px 8px 24px rgba(42, 38, 36, .08);
  }

  .side-nav a {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-display);
    font-size: clamp(10.5px, 1.7vw, 12.5px);
    letter-spacing: .26em;
    text-decoration: none;
    color: var(--ink);
    opacity: .45;
    padding: 6px 2px;
    position: relative;
    transition: opacity .3s ease, color .3s ease, transform .3s ease;
  }
  .side-nav a:hover {
    opacity: 1;
    color: #1A080C !important;
    transform: scale(1.08);
  }
  .side-nav a.is-active {
    opacity: 1;
    color: var(--bordeaux-deep) !important;
    font-weight: 600;
  }
}

/* ---- インデックスメニュー（掛け軸が上から降りて開く演出） ---- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: clamp(88px, 16vh, 136px) 16px 24px;
  background: rgba(24, 9, 12, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease-out;
}

/* 和紙カードラッパー：中央に和紙パネルを配置 */
.menu-overlay__scroll {
  position: relative;
  width: min(88vw, 460px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* パネル：中央から上下にしなやかに広がる一枚の手ちぎり和紙 */
.menu-overlay__panel {
  position: relative;
  width: 100%;
  max-height: 78vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 4px;
  background: var(--washi);
  box-shadow: 0 30px 60px rgba(10, 4, 6, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, 2.4vmin, 1.4rem);
  text-align: center;
  color: var(--ink);
  padding: clamp(2.2rem, 5.2vmin, 3.2rem) clamp(1.4rem, 4vmin, 2rem) clamp(2.2rem, 5.2vmin, 3.2rem);
  /* 上下左右すべてが手ちぎり和紙風の自然な破れフチ（閉じた時は高さ0の中央水平線） */
  clip-path: polygon(0% 50%, 24% 50%, 52% 50%, 78% 50%, 100% 50%, 99% 50%, 100% 50%, 98% 50%, 99% 50%, 74% 50%, 46% 50%, 20% 50%, 1% 50%, 0% 50%);
  transition: clip-path .75s cubic-bezier(.16, 1, .3, 1);
}
.menu-overlay.is-open .menu-overlay__panel {
  /* 開いた時は上下左右ともに自然なちぎり端で一枚の和紙としてふわりと展開 */
  clip-path: polygon(0% 1.5%, 24% 0.5%, 52% 2%, 78% 0.8%, 100% 1.8%, 99% 24%, 100% 50%, 98% 76%, 99% 98.5%, 74% 99.5%, 46% 98%, 20% 99.2%, 1% 98.2%, 0% 52%);
  transition-delay: .08s;
}

/* 和紙の滲み（「土のこと」と同じ朱赤ブリード表現で世界観を統一） */
.menu-overlay__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 18%, rgba(122, 36, 50, .16) 0%, rgba(122, 36, 50, .05) 45%, transparent 70%);
  mix-blend-mode: multiply;
  filter: blur(28px);
}

/* 古い掛け軸の和紙のザラザラ質感（細かい繊維＋粗い斑の2層ノイズ） */
.menu-overlay__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
  mix-blend-mode: multiply;
  filter: contrast(155%);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size: 240px 240px, 480px 480px;
}

.menu-overlay__brand {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.7rem, 1.8vmin, 1.1rem);
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(4px);
  transition: opacity .5s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1), filter .5s ease;
}
.menu-overlay.is-open .menu-overlay__brand {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .38s;
}
.menu-overlay.is-open .menu-overlay__brand:hover {
  transform: scale(1.04);
  opacity: 0.92;
  transition-duration: .35s;
  transition-delay: 0s;
}

.menu-overlay__mark-img {
  width: auto;
  height: clamp(44px, 7.2vmin, 60px);
  display: block;
  opacity: .96;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-overlay__brand:hover .menu-overlay__mark-img {
  transform: scale(1.2);
}

.menu-overlay__brand-name {
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-overlay__logo-img {
  height: clamp(24px, 4.2vmin, 34px);
  width: auto;
  display: block;
}

.menu-overlay__nav { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(.5rem, 1.6vmin, 1rem); }
.menu-overlay__nav a {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: clamp(1rem, 2.8vmin, 1.35rem);
  letter-spacing: .3em;
  text-decoration: none;
  padding: .18em .6em;
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(4px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}
.menu-overlay.is-open .menu-overlay__nav a:nth-child(1) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .48s; }
.menu-overlay.is-open .menu-overlay__nav a:nth-child(2) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .56s; }
.menu-overlay.is-open .menu-overlay__nav a:nth-child(3) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .64s; }
.menu-overlay.is-open .menu-overlay__nav a:nth-child(4) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .72s; }
/* 登場演出（ふわっと0.5秒＋段差ディレイ）が終わったあとは、ホバーの出入り両方を高速化する。
   is-settled は登場アニメが済んだ頃にJSで付与するクラス（nth-childと詳細度が同点＝後方配置で優先） */
.menu-overlay.is-open.is-settled .menu-overlay__nav a {
  transition: opacity .08s ease-out, transform .08s ease-out, filter .08s ease-out;
}
/* カーソルを載せた瞬間／タップした瞬間、文字だけ即座に薄く（低opacity）なって選択を明示する */
.menu-overlay.is-open .menu-overlay__nav a:hover,
.menu-overlay.is-open .menu-overlay__nav a.is-selected {
  opacity: .38;
  transition: opacity .08s ease-out;
}

.menu-overlay__nav-contact {
  border: 1px solid var(--bordeaux);
  color: var(--bordeaux);
  border-radius: 999px;
  font-size: clamp(.88rem, 2.2vmin, 1.1rem);
}

.menu-overlay__sns {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(4px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}
.menu-overlay.is-open .menu-overlay__sns { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .8s; }
.menu-overlay__sns a {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--bordeaux);
  font-size: clamp(.76rem, 1.8vmin, .88rem);
  letter-spacing: .3em;
  text-decoration: none;
  opacity: .85;
  transition: opacity .35s ease;
}
.menu-overlay__sns a:hover { opacity: 1; }
.menu-overlay__sns-icon {
  display: block;
  width: 1.05em;
  height: 1.05em;
  transform-origin: right center;
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-overlay__sns a:hover .menu-overlay__sns-icon {
  transform: scale(1.28);
}
.menu-overlay__sns-label {
  display: inline-block;
  transform-origin: left center;
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-overlay__sns a:hover .menu-overlay__sns-label {
  transform: scale(1.1);
}

/* ============================================================
   ヒーロー「空間直刻」
   — 枠を持たない。画面全体の和紙を台紙とし、縦書きの銘・
     朱の葉・刻印を圧倒的余白の中へ直接刻む —
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 2vh) calc(var(--side-nav-w) + 20px) 11vh 20px;
  overflow: hidden;
  background: transparent;
}

.hero__glow {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(120vw, 860px);
  height: min(120vw, 860px);
  background: radial-gradient(circle, rgba(140, 29, 47, .06) 0%, rgba(140, 29, 47, .015) 52%, transparent 74%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* 直刻の額 — 超ワイド画面で構図が全幅へ拡散しないよう中央へ収束させる器 */
.hero__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* 建築スケールの果葉線画 — 画面の縁で切れ、世界が外へ続く */
.hero__leaf {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  fill: none;
  stroke: var(--bordeaux);
  stroke-width: 1.2;
  opacity: .14;
  /* 葉の3階層LOD。use のシャドウツリーへはカスタムプロパティのみが届く（⑤の注記）。
     ここが調整の操作点。⑤の var() fallback は同値の安全網。 */
  --lf-outline: 1.2;
  --lf-main: .95;
  --lf-fine: .7;
}
.hero__leaf--nw { width: min(58vw, 500px); top: -7%; left: -10%; transform: rotate(-27deg); }
.hero__leaf--se { width: min(52vw, 440px); bottom: 12%; right: -7%; transform: rotate(147deg); }

/* 直刻の舞台（不可視の配置台。枠・背景・影は一切持たない） */
.hero__stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.6rem, 4.5svh, 3.4rem);
}

/* 銘に寄り添う朱の葉（初回表示で線が引かれ、触るとぬるっと大きく回転する） */
.hero__accent {
  position: absolute;
  z-index: 3; /* .hero__stage(z-index:2)より上。点対称化でRがnameの下端＝inscription内へ入り込み、
                 stageに当たり判定を奪われクリック不能になっていたため（実測で発見） */
  height: auto;
  overflow: visible; /* 内側.hero__accent-artの拡大回転がSVGの元のボックスでクリップされないように */
  pointer-events: auto;
  cursor: pointer;
  fill: none;
  stroke: rgba(140, 29, 47, .65);
  stroke-width: 1.1;
  transition: stroke .5s ease !important;
  /* 触る葉のLOD: restは外郭のみ・触れると主脈+副脈が浮かぶ（transitionはpayload側のg.lf-main/lf-fineに焼き込み済み） */
  --lf-outline: 1.4;
  --lf-main: 0;
  --lf-fine: 0;
}
/* 拡大回転(transform)は視覚要素(.hero__accent-art)だけに適用し、外側<svg>のレイアウト位置(top/left/width)は不変に保つ。
   ＝ pointer-events のヒット判定は常に「rest状態の固定範囲」のまま。
   （transformを外側要素にかけていた旧実装では、hover中にカーソルの真下から見た目が動いて外れ、
   mouseleave→mouseenterが再発火し続けるちらつきが実測で発生したため、この分離構造にした） */
.hero__accent-art {
  display: block;
  transform-origin: center center;
  transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* top/left は position.js（「まほらま」ロゴ基準の動的配置）がインラインstyleで上書きする。ここはJS未実行時のフォールバックのみ */
.hero__accent--l { top: clamp(128px, 15vh, 190px); left: clamp(6%, 9vw, 14%); width: clamp(46px, 6vw, 76px); }
.hero__accent--l .hero__accent-art { transform: rotate(-22deg); }
.hero__accent--r { top: clamp(128px, 15vh, 190px); left: clamp(80%, 91vw, 94%); width: clamp(46px, 6vw, 76px); }
.hero__accent--r .hero__accent-art { transform: rotate(26deg); }

.hero__accent--l:hover, .hero__accent--l:active, .hero__accent--l.is-open {
  stroke: rgba(140, 29, 47, .95) !important;
  --lf-main: .55;
  --lf-fine: .32;
}
.hero__accent--l:hover .hero__accent-art,
.hero__accent--l:active .hero__accent-art,
.hero__accent--l.is-open .hero__accent-art {
  /* --acc-ty はJSが「hover後にヘッダーへ潜り込む分」だけ動的に設定する（position.jsのonIn参照） */
  transform: translateY(var(--acc-ty, 0px)) scale(1.42) rotate(42deg);
}

.hero__accent--r:hover, .hero__accent--r:active, .hero__accent--r.is-open {
  stroke: rgba(140, 29, 47, .95) !important;
  --lf-main: .55;
  --lf-fine: .32;
}
.hero__accent--r:hover .hero__accent-art,
.hero__accent--r:active .hero__accent-art,
.hero__accent--r.is-open .hero__accent-art {
  transform: translateY(var(--acc-ty, 0px)) scale(1.42) rotate(-42deg);
}

/* 縦書きの銘 — シールと同じ組版（右から: いちじく農園／三行の詩／まほらま） */
.hero__inscription {
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.6rem, 5.2vw, 3.8rem);
}

/* 「いちじく農園」— v3では傾いていたが、v4では傾けずまっすぐ垂直に配置する */
.hero__farm {
  font-family: var(--font-display);
  font-size: clamp(.85rem, 2.4svh, 1.18rem);
  letter-spacing: .34em;
  line-height: 1;
  color: rgba(42, 38, 36, .88);
  margin-top: .3em;
}

.hero__copy {
  margin-top: 4.4em;
  margin-right: 0.6em;
  font-size: clamp(.72rem, 1.9svh, .96rem);
  letter-spacing: .26em;
  line-height: 1;
  color: var(--bordeaux);
}
.hero__copy span { display: block; }
.hero__copy span + span { margin-block-start: 1.05em; }
.hero__copy span:nth-child(2) { margin-top: 1em; }
.hero__copy span:nth-child(3) { margin-top: 2em; }

.hero__name,
.js-anim .hero__name,
.js-anim.is-awake .hero__name {
  display: inline-block !important;
  transform-origin: center center !important;
  /* will-change は使わない（2026-08-04）。body::after の和紙グレインは mix-blend-mode:multiply で
     全面に掛かっており、will-change で昇格した合成レイヤーはこのブレンドから外れて
     「和紙でない矩形」として露出する。transform/opacity は遷移開始時に自動で合成されるため不要。 */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, min(12.5svh, 17vw), 6.4rem);
  letter-spacing: .1em;
  line-height: 1.06;
  color: var(--bordeaux);
  cursor: pointer;
  user-select: none;
  /* 縦書き要素でのtransform補間不全を解消する0.85秒スムーズイージング */
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) !important, text-shadow 0.85s ease !important, color 0.85s ease !important, opacity 1.1s ease .25s !important;
}
.hero__name:hover,
.js-anim.is-awake .hero__name:hover,
.hero__name:active,
.js-anim.is-awake .hero__name:active {
  transform: scale(1.08) !important;
  text-shadow: 0 8px 24px rgba(122, 36, 50, .28), 0 2px 4px rgba(122, 36, 50, .15) !important;
  color: #8C2434 !important;
}

/* 欧文刻印 — 銘の足元に沿う凹アーチ（枠なしで空間に浮かぶ） */
.hero__arc {
  width: clamp(230px, 26vw, 330px);
  height: auto;
  overflow: visible;
}
.hero__arc-text {
  fill: var(--bordeaux);
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: .34em;
}

/* 欧文円環刻印 — 包装箱の空押しのように余白へ */
/* まほらまシール（実物SVGダイカット・右下落款・インタラクティブ） */
.mahorama-seal-container {
  position: absolute;
  z-index: 10;
  /* .hero__frame(絶対配置inset:0)は.heroの右パディングを無視するため、
     ここで直接 --content-safe-r（右固定ナビの実幅+20px）を足して衝突を防ぐ */
  right: calc(clamp(20px, 6.5vw, 95px) + var(--content-safe-r));
  bottom: clamp(28px, 6vh, 60px);
  width: clamp(90px, 9.5vw, 135px);
  height: auto;
  aspect-ratio: 240 / 280;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.mahorama-seal-body {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: 50% 5%;
  /* ヌルっと吸い付くように沈み込むイージング (0.42秒) */
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.42s ease,
              opacity 0.38s ease;
  transform-style: preserve-3d;
  opacity: 0.84;
  filter: drop-shadow(0 3px 8px rgba(140, 29, 47, 0.14));
}

.mahorama-seal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* ① ホバー時：ゆっくり浮遊 ＋ 優雅なゆらぎ ＋ 3Dチルト */
.mahorama-seal-container:hover .mahorama-seal-body {
  opacity: 1;
  transform: scale(1.08) translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  filter: drop-shadow(0 16px 28px rgba(140, 29, 47, 0.22))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
  animation: figSwing 1.8s ease-in-out;
}

/* PC用 ゆったりゆらぎアニメーション (1.8秒) */
@keyframes figSwing {
  0% { transform: scale(1.08) translateY(-6px) rotate(0deg); }
  25% { transform: scale(1.08) translateY(-6px) rotate(-5.5deg); }
  50% { transform: scale(1.08) translateY(-6px) rotate(4deg); }
  75% { transform: scale(1.08) translateY(-6px) rotate(-2deg); }
  100% { transform: scale(1.08) translateY(-6px) rotate(0deg); }
}

/* ② クリック/タップ時：ヌル〜ッと沈み込む（スタンプ押し込み） */
.mahorama-seal-container:active .mahorama-seal-body,
.mahorama-seal-container.is-pressed .mahorama-seal-body {
  transform: scale(0.93) translateY(4px) rotate(0deg) !important;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
  filter: drop-shadow(0 1px 3px rgba(140, 29, 47, 0.25));
  animation: none !important;
}

/* 地名は落款のように左縁へ縦書きで */
.hero__place {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 4.5vw, 52px);
  bottom: 6vh;
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: .4em;
  color: rgba(42, 38, 36, .72);
}

.hero__scroll {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero__scroll span {
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .44em;
  color: var(--bordeaux);
  opacity: .7;
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 48px;
  background: var(--line);
}

@media (max-width: 768px) {
  .mahorama-seal-container { width: 92px; right: 18px; bottom: 24px; }
  .mahorama-seal-container:hover .mahorama-seal-body,
  .mahorama-seal-container.is-swinging .mahorama-seal-body {
    animation: figSwingMobile 2.6s ease-in-out !important;
  }
}

@keyframes figSwingMobile {
  0% { transform: scale(1.06) translateY(-4px) rotate(0deg); }
  25% { transform: scale(1.06) translateY(-4px) rotate(-7deg); }
  50% { transform: scale(1.06) translateY(-4px) rotate(5.5deg); }
  75% { transform: scale(1.06) translateY(-4px) rotate(-2.5deg); }
  100% { transform: scale(1.06) translateY(-4px) rotate(0deg); }
}

@media (max-width: 599px) {
  .hero__leaf--nw { width: 64vw; top: -3%; left: -20%; }
  .hero__leaf--se { width: 58vw; bottom: 8%; right: -20%; }
  .hero__place { bottom: 5vh; left: 16px; }
}

/* ============================================================
   土のこと — テキストはv3、レイアウトはogawa_study
   （左：縦長アーチ実写写真 × 右：円形背景グラフィック）
   ============================================================ */

.soil {
  position: relative;
  overflow: visible;
  padding: var(--space-section) 0 calc(var(--space-section) * .3);
  z-index: 2;
}

.soil__head {
  text-align: center;
  padding: 0 calc(24px + var(--content-safe-r)) 0 24px;
  margin-bottom: clamp(2.6rem, 6vh, 4rem);
  position: relative;
  z-index: 4;
}

.soil__eyebrow,
.almanac__eyebrow,
.contact__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .42em;
  color: var(--bordeaux);
  margin-bottom: 1.1rem;
}

.soil__title,
.almanac__title,
.contact__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-feature-settings: "palt";
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  letter-spacing: .18em;
  line-height: 1.5;
}

/* position指定なし：#soil自体を絶対配置の基準（containing block）にする。
   ここにposition:relativeを与えると、子要素が全てposition:absoluteの場合に
   高さ0のコンテナとなり、写真・円の配置基準がずれるため注意。 */
.soil__layout { z-index: 2; }

/* 左：縦長アーチ型の実写写真（中央寄せを解除し、左見出しと揃えて左配置。右下のボルドー球体と黄金比で対抗）
   モバイル幅では対称の角丸（下の基準値）。非対称の「アーチ」形状は768px以上でのみ有効化する
   （2026-08-05 実機フィードバック: 狭いスマホ画面では右上だけ突出した角丸が不格好に見えた）。 */
.soil__arch-photo {
  position: relative;
  width: min(80vw, 420px);
  aspect-ratio: 3 / 4;
  margin: clamp(1.8rem, 4vh, 3rem) auto 0 clamp(24px, 6vw, 64px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 52px rgba(42, 38, 36, .22);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.soil__arch-photo:hover {
  transform: scale(1.02);
  box-shadow: 0 28px 60px rgba(42, 38, 36, .28);
}
.soil__arch-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soil__arch-photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: 10.5px;
  letter-spacing: .3em;
  color: var(--washi);
  text-shadow: 0 1px 10px rgba(20, 10, 12, .65);
}

/* 右：和紙の滲み・透かし（案A） — 濃いベタ塗りを廃し、和紙の裏から朱色がじわっと染み出す表現 */
.soil__circle {
  position: relative;
  z-index: 1;
  width: 130vw;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: clamp(-52px, -9vw, -22px) 0 0 -15vw;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ぼかし・滲みグラデーションを背景疑似要素に分離（文字子要素がぼけるのを防止） */
.soil__circle::before {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(122, 36, 50, 0.32) 0%, rgba(122, 36, 50, 0.1) 48%, transparent 72%);
  mix-blend-mode: multiply;
  filter: blur(28px);
}

.soil__circle::after {
  display: none;
}

.soil__inner {
  position: relative;
  z-index: 3;
  width: min(calc(84vw - var(--content-safe-r)), 480px);
  max-width: 100%;
  padding: 6vw 0 8vw;
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  /* will-change 不使用（和紙グレインのブレンドを壊すため。理由は .hero__name のコメント参照） */
}


/* 土のこと：段落ごとの和紙フォーカスイン時間差演出（Blur & Fade Stagger - 段落間隔深め） */
.js-anim .soil__poem {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(12px);
  transition: opacity 1.6s ease, filter 1.6s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * .85s + .35s);
}
.reveal.is-visible .soil__poem,
.soil__circle.is-visible .soil__poem,
.js-anim .soil__circle.is-visible .soil__poem {
  opacity: 1;
  filter: none;
  transform: none;
}

/* 文字色：和紙に美しく映える濃墨・煤竹（var(--ink)）で情緒と高可読性を両立 */
.soil__poem {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(.9rem, 1.8vw, 1.02rem);
  line-height: 2.3;
  letter-spacing: .12em;
  margin-bottom: 1.9em;
  overflow-wrap: break-word;
  transition: opacity 0.6s ease, text-shadow 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.soil__poem:last-child { margin-bottom: 0; }

.soil__inner:hover,
.soil__inner.is-hover {
  transform: scale(1.025);
}

.soil__inner:hover .soil__poem,
.soil__inner.is-hover .soil__poem {
  color: var(--bordeaux);
}

/* 中画面（850px〜1149px）：スペース不足による要素重なりを「構造的・仕組み的」に物理遮断するガードレール */
@media (min-width: 850px) and (max-width: 1149px) {
  .soil {
    padding: clamp(4rem, 8vh, 6rem) max(70px, calc(var(--side-nav-w) + 20px)) clamp(3rem, 6vh, 5rem) clamp(24px, 4vw, 48px);
  }
  .soil__head {
    text-align: left;
    margin-bottom: 2.5rem;
  }
  .soil__layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(30px, 4vw, 60px);
  }
  .soil__arch-photo {
    width: min(40vw, 380px);
    flex-shrink: 0;
    margin: 0;
    border-radius: 24px clamp(90px, 28vw, 160px) 24px 24px;
  }
  .soil__circle {
    position: relative;
    flex: 1;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px;
  }
  .soil__circle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 500px;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(122, 36, 50, 0.25) 0%, rgba(122, 36, 50, 0.06) 50%, transparent 72%);
    mix-blend-mode: multiply;
    filter: blur(28px);
  }
  /* 中画面では横書き（horizontal-tb）に自動安全シフト。右固定ナビへのめり込みを100%遮断 */
  .soil__inner {
    writing-mode: horizontal-tb;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
  }
  .soil__poem {
    line-height: 2.1;
    letter-spacing: .08em;
    margin-bottom: 1.4em;
  }
}

/* 大型ディスプレイ（1150px以上）：十分な領域で展開する情緒豊かな「縦書き2カラム」 */
@media (min-width: 1150px) {
  .soil {
    min-height: auto;
    padding: clamp(6rem, 12vh, 9rem) max(140px, calc(var(--side-nav-w) + 7vw)) clamp(4rem, 8vh, 6rem) clamp(32px, 5vw, 80px);
  }

  .soil__head {
    text-align: left;
    padding-left: 0;
    margin-bottom: clamp(2.5rem, 5vh, 4rem);
  }

  /* 物理的重なり防止のコア：Flexboxで「写真」と「縦書き文章」を確実に左右分離 */
  .soil__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(50px, 6vw, 100px);
    position: relative;
    z-index: 2;
    max-width: 1400px;
  }

  /* 左カラム：アーチ実写写真 */
  .soil__arch-photo {
    position: relative;
    flex-shrink: 0;
    width: min(32vw, 440px);
    margin: 0;
    z-index: 2;
  }

  /* 右カラム：背景赤滲み ＆ 縦書き文章 */
  .soil__circle {
    position: relative;
    flex-shrink: 0;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    margin: 0;
    padding: 20px 30px;
    align-items: center;
    justify-content: center;
  }

  /* 背景の滲み赤グラデーション（テキスト背景としての中央絶対配置） */
  .soil__circle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(480px, 45vw, 700px);
    height: clamp(480px, 45vw, 700px);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(122, 36, 50, 0.28) 0%, rgba(122, 36, 50, 0.08) 50%, transparent 72%);
    mix-blend-mode: multiply;
    filter: blur(32px);
  }

  /* 縦書き文章エリア */
  .soil__inner {
    width: auto;
    height: min(60vh, 480px);
    padding: 0;
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: combined;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    z-index: 2;
  }

  .soil__poem {
    margin-bottom: 0;
    letter-spacing: .18em;
    line-height: 2.4;
  }
}

/* ---- 実りの暦 ---- */

.almanac {
  position: relative;
  overflow: visible;
  padding: clamp(140px, 18vh, 240px) 0 calc(var(--space-section) * .6);
  z-index: 1;
}

.almanac__head {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 calc(24px + var(--content-safe-r)) 0 24px;
  margin-bottom: clamp(4rem, 9vh, 7rem);
}

.almanac__lead {
  margin-top: 1.6rem;
  font-size: clamp(.88rem, 1.5vw, .98rem);
  line-height: 2.3;
  letter-spacing: .1em;
  opacity: .88;
}

.almanac__list {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: 1rem calc(24px + var(--content-safe-r)) 3rem 24px;
  display: flex;
  flex-direction: column;
  gap: clamp(4.5rem, 11vh, 8.5rem);
}

.entry {
  position: relative;
  width: 100%;
}

.entry__month {
  /* v4.18: 幅を問わず品種名の横に置く（以前はPCだけステージへ縦書きで絶対配置していた） */
  position: relative;
  display: inline-block;
  writing-mode: horizontal-tb;
  background: var(--washi-deep);
  border: 1px solid var(--hairline);
  padding: 5px 11px;
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--bordeaux);
  border-radius: 4px;
  vertical-align: middle;
}
.entry__month i { font-style: normal; opacity: .55; }

/* 2カラム・ジグザグ（左右交互）グリッド構造 */
.entry__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-left: clamp(20px, 4vw, 40px);
}

@media (min-width: 850px) {
  .entry__body {
    grid-template-columns: 1fr 1fr;
  }
  .entry--left .entry__visual { grid-column: 1; }
  .entry--left .entry__text { grid-column: 2; }

  .entry--right .entry__visual { grid-column: 2; }
  .entry--right .entry__text { grid-column: 1; }
  .entry--right /* v4.18: 月の札は絶対配置をやめたため不要 */
}

/* ビジュアル領域（切り抜き果実 ＋ 植物動線SVG） */
.entry__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* 植物動線 ＆ 切り抜き果実：小川ぶどう園完全再原器（上部：蔓・本物葉・垂れ下がる果実 / 下部：品種紹介） */
.entry {
  position: relative;
  margin-bottom: 6rem;
  overflow: visible;
}

/* 1. 上部ステージエリア：画面幅の約75%を横切る枝・蔓と、垂れ下がる果実のキャンバス */
.entry__stage {
  position: relative;
  width: 100%;
  height: 240px;
  margin-bottom: 1.5rem;
  overflow: visible;
}

.entry__plant-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
}

.entry__plant-line .plant-stem,
.entry__plant-line .plant-substem,
.entry__plant-line .plant-tendril {
  stroke: var(--fruit);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.entry__plant-line .plant-stem--thick {
  stroke-width: 4px;
}

/* 枝・蔓のスクロールイン手描き伸長アニメーション（主枝: 0.1s / 側枝: 0.6s のシーケンス） */
.entry__plant-line path.crop-line {
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1 !important;
  transition: stroke-dashoffset 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.1s !important;
}
.entry__plant-line path.plant-substem {
  transition: stroke-dashoffset 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.6s !important;
}
.entry.is-visible .entry__plant-line path.crop-line {
  stroke-dashoffset: 0 !important;
}

/* ============================================================
   実りの暦：生命アニメーション（成長パス・展葉・結実しなり）§20 v4.13
   growth-path（Affinity手描きの枝の芯線）をマスクの伸長で根元から先端へ描画し、
   実座標へ葉を吸着・展葉、先端で果実が結実、最後に枝全体がしなって静まる。
   ============================================================ */
.mhr-branch { transform-box: view-box; }
.js-anim .mhr-branch {
  transition: transform .9s var(--ease-branch) 2.7s;   /* 2.70s → 3.60s でしなって静まる */
}
.entry.is-visible .mhr-branch {
  transform: translateY(4px) rotate(1.2deg);
}

.js-anim .mhr-wipe {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* 全体のイージングは生成器側のスケジュール(GAMMA)が持つ。
     セグメント個々に再度イージングを掛けると二重適用になり、
     親の front 位置と子の開始時刻がズレる（＝空中発生の根因）。ここは必ず linear。 */
  transition: stroke-dashoffset var(--seg-dur, .35s) linear var(--seg-delay, 0s);
}
.entry.is-visible .mhr-wipe {
  stroke-dashoffset: 0;
}

/* 品種別 葉スケール（実測由来 2026-08-03 / 規則: 最大葉幅 = 果実幅 × 0.90） */
#fruit-peach   { --leaf-scale: 1.00; }  /* 桃は細葉。既に目標内のため据え置き */
#fruit-apricot { --leaf-scale: 0.78; }
#fruit-plum    { --leaf-scale: 0.49; }
#fruit-grape   { --leaf-scale: 0.36; }
#fruit-fig     { --leaf-scale: 0.47; --fruit-rotate: 0deg; }  /* v4.20: fruit_fig_main.webp は原本が既に茎上・実下(=180度/真下)の自然な向きのため、追加回転は不要 */

.mhr-leaf__unfurl,
.mhr-fruit__unfurl {
  transform-box: view-box;
  transform-origin: 0px 0px;
}
/* 基底（no-JS でもこの大きさで出る。ここが抜けると JS 無効時に葉が原寸で巨大化する） */
.mhr-leaf__unfurl { transform: scale(var(--leaf-scale, 1)); }
.js-anim .mhr-leaf__unfurl {
  opacity: 0;
  transform: scale(0) rotate(-18deg);
  transition: transform .75s var(--ease-leaf) var(--leaf-delay, 0s), opacity .45s ease var(--leaf-delay, 0s);
}
.entry.is-visible .mhr-leaf__unfurl {
  opacity: 1;
  transform: scale(var(--leaf-scale, 1)) rotate(0deg);
}

.mhr-fruit__unfurl { transform: rotate(var(--fruit-rotate, 0deg)); }
.js-anim .mhr-fruit__unfurl {
  opacity: 0;
  transform: scale(0);
  /* --fruit-delay: 枝先に実がなる時刻。遅らせるほど「枝が伸び、葉が開き、
     やがて やっと結実した」の時間差が生まれる。品種ごとに #fruit-* で上書きする。 */
  transition: transform .6s var(--ease-fruit) var(--fruit-delay, 2.55s),
              opacity .3s ease var(--fruit-delay, 2.55s);
}
.entry.is-visible .mhr-fruit__unfurl {
  opacity: 1;
  transform: scale(1) rotate(var(--fruit-rotate, 0deg));
}

/* 本物の精密SVG葉っぱアニメーション（枝・蔓の上に重ねてレイヤー描画） */
.plant-leaf-anim {
  opacity: 0;
  transition: opacity 0.7s ease var(--delay, 0.8s), transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--delay, 0.8s);
}
.entry.is-visible .plant-leaf-anim {
  opacity: 1;
}

/* 果実水彩画：枝の先端(78%)の真下に垂れ下がるように完璧に接続配置（画像枠と枝の不自然な重なりをゼロ化） */
.entry__fruit-art {
  z-index: 15;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* シーケンス（v4.17 / 5果樹共通・前半にゆとりを持たせた版）:
   枝 0〜1.60s → 葉 0.34〜2.35s → 枝先に実 2.55s → 枝がしなって静まる 2.70〜3.60s
   → 拡大した果実（品種プレート）4.10s。時刻は --fruit-delay / --plate-delay で品種別に上書きできる。 */
.js-anim .entry__fruit-art {
  opacity: 0;
  transform: scale(0.4);
  filter: blur(8px);
  transition: opacity 0.95s ease var(--plate-delay, 4.1s),
              transform 0.95s cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--plate-delay, 4.1s),
              filter 0.95s ease calc(var(--plate-delay, 4.1s) + 0.2s);
}
.entry.is-visible .entry__fruit-art {
  opacity: 1;
  transform: scale(1) !important;
  filter: blur(0) !important;
}

.entry__fruit-art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  outline: none;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 12px 24px rgba(42, 38, 36, .16));
  cursor: pointer;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), filter 0.85s ease;
}

.entry__fruit-art img:hover,
.entry__fruit-art img:active {
  transform: scale(1.10) translateY(6px) rotate(2deg);
  filter: drop-shadow(0 22px 40px rgba(122, 36, 50, .28));
}
/* タッチ主体端末（スマホ）限定の対処（2026-08-05 けんすう×深津会議）。
   transform・filter のどちらも「値が変化すること」自体が独立した合成レイヤーへの
   昇格を招き、body::after の和紙グレインのブレンドから外れて矩形が露出する
   （§38・v4.34と同一機構）。box-shadowへの差し替えも一度検討したが、box-shadow は
   要素の矩形バウンディングボックスに沿うため、透過PNGの果実の輪郭に沿わない
   （filter:drop-shadow はアルファチャンネルに沿うため両者は別物）。
   デスクトップのマウスhoverではChromium/WebKit実測どちらも問題が出ていないため、
   PC/スマホを別の戦場として扱い、タッチ端末では base の値のまま変化させない
   （＝タップしても transform も filter も一切変わらない）ことでバグの発生条件自体を無くす。
   持ち上がる演出はデスクトップのみに残る。 */
@media (hover: none) {
  .entry__fruit-art img:hover,
  .entry__fruit-art img:active {
    transform: none;
    filter: drop-shadow(0 12px 24px rgba(42, 38, 36, .16));
  }
}

/* 2. 下部情報エリア：枝アニメーションの下に重なりなく配置される品種紹介テキスト */
.entry__info {
  /* v4.18: 下段は 左＝説明テキスト / 右＝拡大した実写果実 の2カラム。
     拡大果実を右列いっぱい(grid-row: 1/-1)に置くため、テキスト・写真との重なりが
     構造的に起こり得ない（以前はステージへ絶対配置しており幅ごとに衝突していた）。 */
  position: relative;
  z-index: 10;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--plate-col, min(30vw, 216px));
  column-gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start;
}
.entry__info > * { grid-column: 1; }
/* 縦書きの札・タグは伸ばさない（グリッド化で既定の stretch が効いてしまうため） */
.entry__info > .entry__lead-role,
.entry__info > .entry__ident { justify-self: start; }
/* 拡大果実だけ右列いっぱい。上の一括指定と同じ詳細度では後勝ちで潰れるため、こちらを後ろに置く */
.entry__info > .entry__fruit-art {
  grid-column: 2;
  grid-row: 1 / span 8;   /* 左列の全行に並ぶ。1/-1 は明示行が無いと機能しない */
  align-self: center;
  justify-self: center;
  width: 92%;   /* PCでは列いっぱい(100%)だと右に寄りすぎるため、少しだけセンターに寄せる */
}

.entry__ident { display: flex; align-items: center; gap: 14px; margin-bottom: .9rem; }

.entry__motif {
  width: 48px;
  height: 48px;
  flex: none;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275);
}
.entry__motif:hover,
.entry__motif:active,
.entry__motif.is-active {
  transform: scale(1.22) rotate(-8deg);
}
.entry__motif .crop-line {
  fill: none;
  stroke: var(--fruit);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-feature-settings: "palt";
  font-size: clamp(1.35rem, 2.8vw, 1.7rem);
  letter-spacing: .28em;
}
.entry__name small {
  margin-left: .9em;
  font-size: .56em;
  letter-spacing: .24em;
  color: var(--fruit);
}

/* word-break:keep-all — 「彩の姫」等の固有名が「・」区切りの途中で分断されるのを防ぐ
   （2026-08-05 実機フィードバック: すももで発生。5果樹すべての品種名に共通して効く） */
.entry__variety { font-size: .95rem; letter-spacing: .16em; opacity: .9; word-break: keep-all; }

.entry__span {
  font-family: var(--font-display);
  font-size: .88rem;
  letter-spacing: .24em;
  color: var(--bordeaux);
  margin: .3rem 0 1.1rem;
}

.entry__desc {
  font-size: .92rem;
  line-height: 2.2;
  letter-spacing: .08em;
  max-width: 42ch;
  opacity: .92;
}

/* いちじく＝主役の設え（1.2倍拡大） */
.entry--fig { --fruit: #8C1D2F; }
.entry--fig { --plate-col: min(34vw, 312px); }
.entry--fig .entry__fruit-art {
}
.entry--fig .entry__fruit-art img {
  filter: drop-shadow(0 18px 36px rgba(140, 29, 47, .22));
}

/* ぶどう＝豊かな房のスケール設え（1.2倍拡大） */
#fruit-grape { --plate-col: min(34vw, 324px); }

/* スモモ＝葉付きの果実スケール設え（1.2倍拡大） */
#fruit-plum { --plate-col: min(30vw, 276px); }

/* v4.21: 縦書きの帯 → 横書きのプレミアム金タグへ（セブンの「金の〜」シリーズを参照）。
   黒に近い深色の箱に金文字・金の縁取り、という「高級食品パッケージ」の型を踏襲。 */
.entry__lead-role {
  display: inline-block;
  writing-mode: horizontal-tb;
  background: linear-gradient(155deg, #171208 0%, #251d10 55%, #171208 100%);
  color: #E4C271;
  border: 1px solid #A9834C;
  outline: 1px solid rgba(228, 194, 113, .35);
  outline-offset: 2px;
  padding: .62em 1.4em;
  margin-bottom: 1.3rem;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .34em;
  border-radius: 2px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .32),
    0 2px 6px rgba(0, 0, 0, .24),
    inset 0 0 0 1px rgba(228, 194, 113, .18);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  transform: none;
  cursor: pointer;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s ease, background .35s ease;
}
.entry__lead-role:hover {
  transform: translateY(-3px) scale(1.05);
  background: linear-gradient(155deg, #1f1810 0%, #2d2314 55%, #1f1810 100%);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .4),
    0 4px 10px rgba(0, 0, 0, .3),
    inset 0 0 0 1px rgba(228, 194, 113, .32);
}

.entry__gallery {
  display: flex;
  justify-content: center;
  gap: clamp(1.4rem, 4vw, 2.2rem);
  margin-top: 1.8rem;
}
.entry__photo img {
  display: block;
  width: min(34vw, 160px);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(42, 38, 36, .14);
}
.entry__photo figcaption {
  margin-top: .9rem;
  font-size: 10.5px;
  letter-spacing: .22em;
  opacity: .6;
  text-align: center;
}

/* 品種プレートのシールクオリア（手貼りの微傾斜と復元応答） */

.qualia-seal {
  position: relative;
  transform: rotate(-1deg);
  transition: transform .5s ease, filter .5s ease;
  filter:
    drop-shadow(0 2px 4px rgba(42, 38, 36, .1))
    drop-shadow(0 14px 32px rgba(140, 29, 47, .18));
}
/* 2026-08-05: 拡大果実へのローカル和紙グレイン（対処案A）は実機で「タップ前から常時、
   四角い背景が不自然に見える」という悪化を招いたため撤去した。Chromium/WebKit両エンジンの
   スクリーンショットでは問題なく見えたが、実機iOS Safariでは平常時にも不透明度が
   重なって見える／グレインの矩形境界そのものが周囲と異なる質感パッチとして視認される
   等、デスクトップ環境のレンダリングでは再現できない差異があった。
   タップ中だけ一瞬見える程度の元の不具合の方が実害が小さいと判断し、いったん保留（案C）。
   次に試すなら: ①タップ演出をtransform以外（box-shadow濃淡等）へ差し替える案B
   ②実機で直接デバッグする、のいずれか。 */
.qualia-seal:hover {
  transform: rotate(0deg) scale(1.02);
  filter:
    drop-shadow(0 4px 8px rgba(42, 38, 36, .14))
    drop-shadow(0 20px 42px rgba(140, 29, 47, .24));
}

/* いちじく：鑑定シールの多角度演出（opacityトグル＋重ね方式。合成スレッドのみで完走） */
.fig-spin { position: relative;   /* v4.18: グリッドの一員として並ぶ。absolute のままだと本文に重なる */ }
.fig-spin__frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 90ms linear;   /* 90ms のクロスフェード。点滅ではなく回転に見える */
  will-change: auto;
}
.fig-spin__frame.is-active { opacity: 1; }
/* 回転中の will-change: opacity は撤去（2026-08-04）。90msのopacityクロスフェードは元々
   合成スレッドで走るため昇格は不要で、昇格した矩形だけが和紙グレインのブレンドから外れて
   「タップすると四角い枠に和紙でない背景が出る」症状になっていた。 */

/* ヒント文字：figure の外へ4pxはみ出して半端に見切れ「謎の文字」に見えていた（実測）。
   figure の内側へ収め、読める濃さにして「意図されたラベル」として成立させる。 */
.fig-spin__hint {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  font-size: 0.72rem; letter-spacing: .12em; color: var(--bordeaux);
  opacity: 0.72; pointer-events: none;
  transition: opacity .3s ease;
}
.fig-spin.is-spinning .fig-spin__hint { opacity: 0; }
100% {
    opacity: 1;
    filter: drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
    transform: scale(1);
  }
}

100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .js-anim .soil__poem { opacity: 1; filter: none; transform: none; transition: none; }
  .soil__title span, .almanac__title span, .closing__phrase .closing__chars span { opacity: 1; filter: none; transition: none; }
  .js-anim .crop-line { stroke-dashoffset: 0; transition: none; }
  .js-anim .mhr-wipe { stroke-dashoffset: 0; transition: none; }
  .js-anim .mhr-leaf__unfurl { opacity: 1; transform: scale(var(--leaf-scale, 1)) rotate(0deg); transition: none; }
  .js-anim .mhr-fruit__unfurl { opacity: 1; transform: scale(1) rotate(var(--fruit-rotate, 0deg)); transition: none; }
  .js-anim .mhr-branch { transition: none; }
  .entry.is-visible .mhr-branch { transform: none; }
  .js-anim .hero__name,
  .js-anim .hero__name span,
  .js-anim .hero__farm,
  .js-anim .hero__copy,
  .js-anim .hero__arc,
  .js-anim .mahorama-seal-container,
  .js-anim .hero__place { opacity: 1; filter: none; transition: none; }
  .js-anim .hero__accent { stroke-dashoffset: 0; transition: none; }
  .menu-overlay, .menu-overlay__panel,
  .menu-overlay__brand, .menu-overlay__nav a, .menu-overlay__sns,
  .soil-story, .soil-story__panel, .soil-story__body, .soil-story__body-inner,
  .soil-story__science, .soil-story__science > p, .soil-story__chevron,
  .soil-story__sci-mark::before, .soil-story__sci-mark::after, .soil__story-trigger,
  .soil-story__close, .soil-story__close-bar,
  .site-header__icon span { transition: none; }

  /* §24 ⑥-3: reduced-motion 時は線画歩行を全スキップして最初から水彩画・本文を即座に表示 */
  .moku-modal__sketch-wrapper, .moku-modal__skip-btn { display: none; }
  .moku-modal.is-open .moku-modal__watercolor {
    opacity: 1;
    filter: drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
    transform: none;
    transition: none;
  }
  .moku-modal.is-open .moku-modal__title,
  .moku-modal.is-open .moku-modal__lead,
  .moku-modal.is-open .moku-modal__text,
  .moku-modal.is-open .moku-modal__action {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .moku-trigger { transition: none; }
}

/* ---- お取引・お問い合わせ ---- */

/* 下パディングは結び写真へ滑らかに渡すため上より浅くする（和紙の空き帯を作らない） */
.contact { position: relative; overflow: hidden; padding: var(--space-section) calc(24px + var(--content-safe-r)) clamp(3rem, 7vh, 5rem) 24px; }

.contact__inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; text-align: center; }

.contact__lead {
  margin-top: clamp(1.8rem, 3.5vh, 2.4rem);
  font-size: clamp(.9rem, 1.5vw, .98rem);
  line-height: 2.2;
  letter-spacing: .1em;
}
.contact__lead-p {
  margin: 0;
}
.contact__lead-p + .contact__lead-p {
  margin-top: clamp(1.1rem, 2.2vh, 1.5rem);
}

.contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid var(--bordeaux);
  border-radius: 999px;
  color: var(--bordeaux);
  font-family: var(--font-mincho, "Shippori Mincho", serif);
  font-size: clamp(13px, 2.2vw, 15px);
  letter-spacing: .08em;
  text-decoration: none;
  background: transparent;
  transition: all .35s ease;
}
.contact__btn-arrow {
  flex: none;
  stroke: currentColor;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact__btn:hover .contact__btn-arrow,
.contact__btn:focus-visible .contact__btn-arrow {
  transform: translateX(4px);
}
.contact__btn:hover { background-color: var(--bordeaux); color: var(--washi); }

.contact__note {
  margin-top: .9rem;
  font-size: clamp(11.5px, 2.2vw, 12.5px);
  color: var(--ink-sub, rgba(43, 27, 23, .68));
  letter-spacing: .08em;
  line-height: 1.6;
}

.contact__info {
  display: grid;
  gap: .7rem;
  font-size: .9rem;
  letter-spacing: .12em;
  margin-top: clamp(1.8rem, 3.5vh, 2.6rem);
}
.contact__info div { display: flex; justify-content: center; gap: 1.4em; flex-wrap: wrap; }
.contact__info dt { color: var(--bordeaux); flex: none; }

/* 結び（.closing）とフッターのスタイルは、ファイル末尾の
   「結び（closing）— 大団円」ブロックに1本化した。ここには書かないこと。 */

/* ============================================================
   デスクトップ
   ============================================================ */

@media (min-width: 900px) {

  :root { --side-nav-w: 66px; }

  .hero__ring { bottom: 20%; }

  .almanac__line-wrap::before { left: 50%; }

  .entry { padding-left: 0; }

  /* v4.18: 月の札は絶対配置をやめたため不要 */

  /* 背骨が中央へ移るので、ツルも葉も追従（PCは余白が広いので少し大きく） */
  .almanac__vine { left: 50%; }

  .entry__body {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(5rem, 9vw, 8rem);
  }

  .entry__plate img { width: min(30vw, 350px); margin: 0; }
  .entry--fig .entry__plate img { width: min(33vw, 400px); }

  .entry--right .entry__plate { grid-column: 1; grid-row: 1; }
  .entry--right .entry__plate img { margin-left: auto; }
  .entry--right .entry__text { grid-column: 2; grid-row: 1; }

  .entry--left .entry__plate { grid-column: 2; grid-row: 1; }
  .entry--left .entry__text { grid-column: 1; grid-row: 1; justify-self: end; }

  .entry__gallery { justify-content: flex-start; gap: 1.6rem; }
  .entry__photo img { width: min(13vw, 150px); }

  .contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid var(--bordeaux);
  border-radius: 999px;
  color: var(--bordeaux);
  font-family: var(--font-mincho, "Shippori Mincho", serif);
  font-size: clamp(13px, 2.2vw, 15px);
  letter-spacing: .08em;
  text-decoration: none;
  background: transparent;
  transition: all .35s ease;
}
.contact__btn-arrow {
  flex: none;
  stroke: currentColor;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact__btn:hover .contact__btn-arrow,
.contact__btn:focus-visible .contact__btn-arrow {
  transform: translateX(4px);
}

  .side-nav { gap: 30px; padding: 26px 10px 26px 14px; }
  .side-nav a { font-size: 13px; letter-spacing: .3em; }
}


/* SVGロゴ文字のレスポンシブサイズと描画設定 */
.hero__name-char {
  display: inline-block;
  width: clamp(2.6rem, min(12svh, 16vw), 6.0rem);
  height: auto;
  fill: currentColor;
  vertical-align: middle;
  transition: fill 0.3s ease;
}



/* ============================================================
   角田式・深津式・けんすう式 統合ロゴアニメーション
   ============================================================ */

.hero__name-svg {
  display: block;
  width: clamp(3.2rem, min(14svh, 18vw), 7.2rem);
  height: auto;
  overflow: visible;
  fill: currentColor;
}

/* 角田式：和紙へ墨が滲んで浮かび上がる優美なアニメーション (1.1s cubic-bezier) */
.js-anim .hero__path {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  filter: blur(8px);
  transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-anim.is-awake .hero__path--1 { transition-delay: 0.35s; }
.js-anim.is-awake .hero__path--2 { transition-delay: 0.72s; }
.js-anim.is-awake .hero__path--3 { transition-delay: 1.08s; }
.js-anim.is-awake .hero__path--4 { transition-delay: 1.44s; }

.js-anim.is-awake .hero__path {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 深津式：2回目以降のアクセスの場合は即時表示（UXのストレスゼロ） */
.has-visited .hero__path {
  opacity: 1;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ============================================================
   いちじく農園 SVGロゴアニメーション（角田式・深津式・けんすう式統合）
   ============================================================ */

.hero__farm-svg {
  display: block;
  width: clamp(1.08rem, min(3.4svh, 2.2vw), 1.85rem);
  height: auto;
  overflow: visible;
  fill: currentColor;
}

/* 「まほらま」の進行（0.35s〜）に合わせて0.65sからオーバーラップで優美に出現 */
.js-anim .hero__farm-path {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-anim.is-awake .hero__farm-path--1 { transition-delay: 0.65s; }
.js-anim.is-awake .hero__farm-path--2 { transition-delay: 0.74s; }
.js-anim.is-awake .hero__farm-path--3 { transition-delay: 0.83s; }
.js-anim.is-awake .hero__farm-path--4 { transition-delay: 0.92s; }
.js-anim.is-awake .hero__farm-path--5 { transition-delay: 1.01s; }
.js-anim.is-awake .hero__farm-path--6 { transition-delay: 1.10s; }

.js-anim.is-awake .hero__farm-path {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 深津式：初回訪問済みの場合即時表示 */
.has-visited .hero__farm-path {
  opacity: 1;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ============================================================
   結び（closing）— 大団円
   全幅写真＋縦書きコピー＋写真に重ねたフッターで、ページを和紙の帯なしに閉じる。
   ⚠ 旧「結び」「締め」「クロージング写真」の3重定義をここへ1本化した（2026-07-25）。
     .closing 系のルールを他の場所へ分散させないこと。詳細度の漏れが不具合の温床になる。
   ============================================================ */

.closing {
  position: relative;
  width: 100%;
  height: clamp(560px, 78svh, 860px);
  overflow: hidden;
}

.closing img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 上端＝和紙からの継ぎ目を溶かす（絵巻物の一続き）／下端＝文字の可読性を作る暗転 */
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--washi) 0%, rgba(251, 249, 245, 0) 12%),
    linear-gradient(to bottom, rgba(16, 6, 9, .12) 25%, rgba(16, 6, 9, .60) 100%);
}

.closing__phrase {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, 2vw, 1.4rem);
  pointer-events: none;
  color: var(--washi);
  font-family: var(--font-display);
  text-shadow: 0 2px 18px rgba(10, 4, 6, .7);
}

.closing__chars {
  writing-mode: vertical-rl;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: .22em;
  line-height: 1.4;
}

.closing__phrase > span:not(.closing__chars) {
  font-size: clamp(.72rem, 1.8vw, .96rem);
  letter-spacing: .38em;
  opacity: .78;
}

/* フッター：写真の上へ重ね、ページ末尾の和紙帯を消す */
.closing .site-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 24px clamp(1.1rem, 3vh, 1.8rem);
  text-align: center;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--washi);
  opacity: .72;
  text-shadow: 0 1px 10px rgba(10, 4, 6, .65);
}

/* ============================================================
   bg-orbit: モバイルでの過剰なはみ出し・余白を防止
   ============================================================ */
@media (max-width: 899px) {
  .bg-orbit--hero-a,
  .bg-orbit--hero-b {
    /* スマホでは hero の overflow:hidden で切り取られるよう overflow 属性を制限 */
    opacity: .10;
  }

  .hero {
    overflow: hidden;
  }
}

.entry.is-visible .entry__plant-line path.crop-line.plant-stem {
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.1s !important;
}
.entry.is-visible .entry__plant-line path.crop-line.plant-substem {
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.6s !important;
}


/* ============================================================
   スマホUI完璧補正（深津・けんすう仕様：重なりゼロ＆可読性・親指UX最優先）
   ============================================================ */
@media (max-width: 899px) {
  /* --- 0. v4.19: 枝先の実はスマホでも表示する。拡大果実が下段の情報エリアへ移ったため、
     非表示にしていた理由（ステージ内でプレートとほぼ同位置になる）が消滅した。
     実が無いまま枝だけしなるのは不自然。 --- */

  /* --- 1. 「土のこと」の画像と本文の重なり解消 --- */
  .soil__circle {
    width: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    margin: 24px 0 0 0 !important;
    padding: 0 !important;
  }
  /* 左右24pxは .soil__head と同値。ここが0だと詩文が画面端に密着し「左が切れて見える」
     （2026-08-04 実測: .soil__poem が L:0 R:393 でビューポート幅ぴったりだった） */
  .soil__inner {
    width: 100% !important;
    padding: 12px calc(24px + var(--content-safe-r)) 24px 24px !important;
  }
  .soil__poem {
    font-size: 0.95rem !important;
    line-height: 2.1 !important;
    margin-bottom: 1.6em !important;
  }

  /* --- 2. 「実りの暦」果物エントリーの文字・札の重なり解消 --- */
  .entry__month {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    writing-mode: horizontal-tb !important; /* スマホでは読みやすい横書きタグに変換 */
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    letter-spacing: 0.15em !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    box-shadow: none !important;
  }

  .entry__ident {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin-bottom: 0.8rem !important;
    padding-top: 8px !important;
  }

  .entry__name {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    font-size: 1.45rem !important;
    letter-spacing: 0.18em !important;
  }
  .entry__name small {
    font-size: 0.85rem !important;
    opacity: 0.75 !important;
    letter-spacing: 0.05em !important;
  }

  /* いちじく特有の「まほらまの主役」バッジと「月札」の重なり解消 */
  .entry__lead-role {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    writing-mode: horizontal-tb !important;
    display: inline-block !important;
    padding: 6px 13px !important;
    font-size: 13.5px !important;
    margin-bottom: 8px !important;
    transform: none !important;
  }
  .entry__lead-role:hover {
    transform: none !important;
  }

  /* 果物ステージ・写真とテキストの間隔補正 */
  .entry__stage {
    height: auto !important;
    min-height: 180px !important;
    margin-bottom: 1rem !important;
  }
  .entry__info {
    padding: 0 16px !important;
  }
}


/* ============================================================
   スマホ幅限定：果実水彩画の縮小 ＆ 重なりゼロ絶対防止構造
   ============================================================ */
@media (max-width: 899px) {
  /* 全果実水彩画をスマホサイズ(120px〜150px)にコンパクト縮小 */
  .entry__info {
    grid-template-columns: 1fr !important;
  }
  .entry__fruit-art {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center !important;
    width: clamp(130px, 42vw, 190px) !important;
    max-width: 190px !important;
    height: clamp(130px, 42vw, 190px) !important;
    margin: .4rem 0 .2rem !important;
    transform: scale(1) !important;
  }

  /* いちじく（桝井ドーフィン）もコンパクト化してバッジ・テキストとの被りを完全シャットアウト */
  .entry--fig .entry__fruit-art {
    width: clamp(140px, 46vw, 205px) !important;
    max-width: 205px !important;
    height: clamp(140px, 46vw, 205px) !important;
  }

  /* 果実ステージの高さをスマホ用に最適化し、下部見出し・テキストへの侵入を防止 */
  .entry__stage {
    height: 175px !important;
    min-height: 175px !important;
    margin-bottom: 0.2rem !important;
    overflow: visible !important;
  }

  /* 見出し・バッジ領域の余白調整 */
  .entry__info {
    position: relative !important;
    z-index: 20 !important;
    margin-top: 0 !important;
    padding: 0 16px !important;
  }
}

/* ============================================================
   「土のこだわり4選」Deep Dive モーダル（v4.25）
   設計書: docs/specs/soil_commitment_modal_spec.md
   デザイン案A（ヘアライン区切り ＋ 開いたカードに朱の染み）をアツシ選択で採用
   ============================================================ */

/* ---- トリガー：詩文の下のゴーストボタン（.soil__layout の外＝flex子にしない） ---- */
.soil__more {
  position: relative;
  z-index: 4;
  text-align: center;
  margin-top: clamp(2rem, 5vh, 3.4rem);
  padding: 0 calc(24px + var(--content-safe-r)) 0 24px;
}

.soil__story-trigger {
  display: inline-flex;
  align-items: center;
  gap: clamp(.6em, 2vw, 1em);
  padding: .95em 2.2em;
  border: 1px solid rgba(122, 36, 50, .36);
  border-radius: 999px;
  background: rgba(247, 244, 236, .85);
  color: var(--bordeaux);
  font-family: var(--font-display);
  font-size: clamp(12.5px, 3.3vw, 14.5px);
  font-weight: 500;
  letter-spacing: .28em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(122, 36, 50, .06);
  position: relative;
  overflow: hidden;
  transition: background .45s ease, border-color .45s ease, transform .45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .45s ease;
  animation: soilTriggerPulse 4s infinite ease-in-out;
}

@keyframes soilTriggerPulse {
  0%, 100% {
    border-color: rgba(122, 36, 50, .32);
    box-shadow: 0 4px 16px rgba(122, 36, 50, .05);
  }
  50% {
    border-color: rgba(122, 36, 50, .68);
    box-shadow: 0 6px 22px rgba(122, 36, 50, .15);
  }
}

.soil__story-trigger:hover,
.soil__story-trigger:focus-visible {
  background: rgba(122, 36, 50, .09);
  border-color: var(--bordeaux);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(122, 36, 50, .18);
}

/* 「続きがある」ことを線で示す短い罫 */
.soil__story-trigger-rule {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--bordeaux);
  opacity: .5;
  transition: width .35s ease, opacity .35s ease;
}
.soil__story-trigger:hover .soil__story-trigger-rule {
  width: 32px;
  opacity: 1;
}

.soil__story-trigger-label { display: block; }

/* ナッジ：右端の矢印インジケーター（ホバーで心地よく右へスライド） */
.soil__story-trigger-arrow {
  flex: none;
  stroke: currentColor;
  opacity: .85;
  transform: translateX(0);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), opacity .35s ease;
}
.soil__story-trigger:hover .soil__story-trigger-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* ---- モーダル本体 ---- */
/* z-index:90 = .menu-overlay(80) より上・body::after の和紙グレイン(200) より下。
   200以上にすると質感が乗らずモーダルだけ別世界になる（ブランド崩壊） */
.soil-story {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  justify-items: center;
  align-items: center;
  padding: clamp(56px, 10vh, 96px) clamp(14px, 4vw, 28px) clamp(28px, 6vh, 56px);
  background: rgba(24, 9, 12, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.soil-story.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease-out;
}

/* スクロールする器は「外側のこの枠」。パネル側で overflow を持たせると、質感の疑似要素
   （inset:0 ＝ パディングボックス基準）が可視高までしか広がらず、スクロールした先が無地になる。
   実測（2026-08-04・393px）: panelScrollH 1551px に対し ::before/::after は 732.7px しか無く、
   818px 分のテクスチャが欠落していた ＝ 和紙が途中で途切れる症状の正体。 */
.soil-story__scroll {
  position: relative;
  width: min(92vw, 640px);
  max-height: 100%;
  border-radius: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.soil-story__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* パネル：プレーンな角丸（2026-08-05 実機フィードバックで引き算に決定）。
   旧: 上下だけ「手ちぎり和紙」clip-pathで開閉、左右は直線——精読面である本モーダルでは
   その非対称が「上下だけギザギザで左右が直線」というノイズに見えるとの指摘。
   けんすう×深津 監査: 「和紙感」は開いた瞬間の一瞥で既に伝わっており、読む面ではむしろ
   信号を弱めて本文を前に出す方が勝ち筋（KISS・Layer3科学ブロックの角丸と同じ語彙に統一）。
   左右にも同じちぎり表現を足す案は不採用（ポリゴン点数がほぼ倍になり調整コストが増す割に
   精読中は効果が薄い）。開閉のモーションは opacity（.soil-story 側）のみで担う。 */
.soil-story__panel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  /* border-radius だけでは疑似要素(::before/::after は inset:0 の絶対配置矩形)が
     角丸に沿ってクリップされない。overflow:hidden を明示して角の四角い露出を防ぐ
     （2026-08-05 実機フィードバック）。panel 自体は overflow-y:auto を持たない
     （§38でスクロール文脈を .soil-story__scroll へ移設済み・高さは content-based のため
     この overflow:hidden は縦方向のクリップを一切発生させない＝再発の心配なし） */
  overflow: hidden;
  background: var(--washi);
  color: var(--ink);
  box-shadow: 0 30px 60px rgba(10, 4, 6, .45);
  padding: clamp(1.4rem, 4vmin, 2rem) clamp(1.3rem, 4.4vmin, 2.4rem) clamp(2rem, 5vmin, 3rem);
}

/* 和紙の滲み（.menu-overlay__panel::before と同値） */
.soil-story__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 18%, rgba(122, 36, 50, .16) 0%, rgba(122, 36, 50, .05) 45%, transparent 70%);
  mix-blend-mode: multiply;
  filter: blur(28px);
}

/* 古い掛け軸の和紙のザラザラ質感（.menu-overlay__panel::after と同値・2層ノイズ） */
.soil-story__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
  mix-blend-mode: multiply;
  filter: contrast(155%);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size: 240px 240px, 480px 480px;
}

/* スクロールバーの非表示は .soil-story__scroll 側（実際のスクロール文脈）に置いてある。
   ※ Chrome 121+ は標準の scrollbar-width を書くと ::-webkit-scrollbar の装飾を丸ごと無視するため、
     「細く染める」方式は効かず実線バーが残る（2026-08-04 実機で確認）。隠す一手に倒している。 */

/* ---- 閉じるボタン（円形モジュール＝ブランドの形状言語。パネルをスクロールしても常に押せる） ----
   v4.25 は 44px・背景透明で、重なった本文に埋もれて「押せる場所」が読めず機能不全に見えた。
   v4.26 で 56px＋和紙色の下地に拡大したが、実機で「見た目はあるがクリック領域が狭い」と指摘（2026-08-04）。
   視覚サイズを 68px へ、加えて ::before で見た目を変えずに当たり判定だけ全方向 +14px 広げる
   （ネイティブアプリのヒットスロップと同じ考え方。指の許容誤差を吸収する）。 */
.soil-story__close {
  position: sticky;
  top: clamp(.1rem, .8vmin, .4rem);
  z-index: 12;
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(251, 249, 245, .86);
  cursor: pointer;
  transition: background .45s ease, border-color .45s ease;
}
.soil-story__close::before {
  content: "";
  position: absolute;
  inset: -14px;
  pointer-events: auto;
}
.soil-story__close:hover,
.soil-story__close:focus-visible {
  background: var(--washi);
  border-color: var(--line);
}
.soil-story__close span {
  position: absolute;
  width: 27px;
  height: 1px;
  background: var(--ink);
  opacity: .72;
  transition: opacity .45s ease, background .45s ease;
}
.soil-story__close span:first-child { transform: rotate(45deg); }
.soil-story__close span:last-child { transform: rotate(-45deg); }
.soil-story__close:hover span { opacity: 1; background: var(--bordeaux); }

/* ---- ヘッダー ---- */
.soil-story__head {
  position: relative;
  z-index: 1;
  text-align: center;
  /* 閉じるボタンが68pxへ拡大された際にmargin-topが無く実測3pxの重なりが発生していた
     （2026-08-05 実機フィードバック）。ボタンの高さと無関係に安全な間隔を確保する。 */
  margin-top: clamp(.6rem, 2vmin, 1rem);
  padding-bottom: clamp(1.4rem, 4vmin, 2rem);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(.6rem, 2vmin, 1rem);
}
.soil-story__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .42em;
  color: var(--bordeaux);
  margin-bottom: 1.1rem;
}
.soil-story__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-feature-settings: "palt";
  font-size: clamp(1.4rem, 3.8vw, 1.9rem);
  letter-spacing: .18em;
  line-height: 1.5;
}
.soil-story__lead {
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-size: clamp(13.5px, 3.6vw, 15px);
  letter-spacing: .08em;
  line-height: 2;
  opacity: 1;
}

/* ---- カード（案A：区切りは上下のヘアライン1本だけ。箱にしない） ---- */
.soil-story__list {
  position: relative;
  z-index: 1;
  list-style: none;
}
.soil-story__card {
  border-top: 1px solid var(--hairline);
  transition: background .45s ease, border-color .45s ease;
}
.soil-story__card:last-child { border-bottom: 1px solid var(--hairline); }
.soil-story__card.is-open {
  background: rgba(122, 36, 50, .035);
  border-color: var(--line);
}

.soil-story__card-title { font-weight: 400; }
.soil-story__card-head {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2.6vw, 1.1rem);
  width: 100%;
  min-height: 48px;
  padding: clamp(1.1rem, 3.2vmin, 1.5rem) 0 .5rem;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* 2026-08-05実機フィードバック: 「その一〜その四」は4項目の目次（インデックス）として
   機能する要素なのに、文字だけでは埋もれて見づらいとの指摘。.entry__month（実りの暦の
   「6月」タグ）と同じ語彙（下地＋枠線＋角丸）のチップにして独立した目印にする。
   チップ自体が視認性を担うため、以前のような opacity 減衰は不要（不透明の濃墨で置く）。 */
.soil-story__ordinal {
  flex-shrink: 0;
  display: inline-block;
  background: var(--washi-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .3em .65em;
  font-family: var(--font-display);
  font-size: clamp(12.5px, 3.2vw, 14px);
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--bordeaux);
}
.soil-story__names { flex: 1; }
.soil-story__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(16px, 4.4vw, 19px);
  font-feature-settings: "palt";
  letter-spacing: .14em;
  line-height: 1.5;
}
.soil-story__name-en {
  display: block;
  margin-top: .35em;
  font-size: 10.5px;
  letter-spacing: .3em;
  color: var(--bordeaux);
  opacity: .7;
}
.soil-story__chevron {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--bordeaux);
  border-bottom: 1px solid var(--bordeaux);
  opacity: .6;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}
.soil-story__card.is-open .soil-story__chevron {
  transform: rotate(225deg) translate(-2px, -2px);
  opacity: 1;
}

/* Layer 1：一言記憶コピー（.soil-story__body の外＝閉じていても常に見える） */
.soil-story__copy {
  padding: 0 0 clamp(1.1rem, 3.2vmin, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(16px, 4.4vw, 18.5px);
  letter-spacing: .06em;
  line-height: 1.95;
  max-width: 34em;
}

/* ---- 開閉する本文（高さは grid-template-rows 0fr↔1fr。max-height は使わない） ---- */
.soil-story__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.16, 1, .3, 1);
}
.soil-story__card.is-open .soil-story__body { grid-template-rows: 1fr; }

/* min-height:0 が無いと grid item が内容サイズ未満に縮まず 0fr が効かない */
.soil-story__body-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  padding-bottom: 0;
  transition: visibility 0s linear .55s, padding-bottom .55s cubic-bezier(.16, 1, .3, 1);
}
.soil-story__card.is-open .soil-story__body-inner {
  visibility: visible;
  padding-bottom: clamp(1.2rem, 3vmin, 1.8rem);
  transition: visibility 0s, padding-bottom .55s cubic-bezier(.16, 1, .3, 1);
}

/* Layer 2：情緒とロマン */
.soil-story__emotion {
  font-family: var(--font-body);
  font-size: clamp(15px, 4vw, 16.5px);
  letter-spacing: .07em;
  line-height: 2.05;
  opacity: 1;
  max-width: 34em;
}

/* ---- Layer 3：科学と論理（2段目の開示。状態は aria-expanded だけで持つ） ---- */
/* 2026-08-05 けんすう×深津会議: 科学の話を既定折りたたみへ戻す代わりに、
   トグル自体を「その一〜その四」チップと同じ語彙（下地＋枠線＋角丸）へ格上げし、
   入りやすさで埋め合わせる。ヒットスロップ（::before）で当たり判定も広げる。 */
.soil-story__sci-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  position: relative;
  min-height: 46px;
  margin-top: .9rem;
  padding: .5em 1.1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--washi-deep);
  color: var(--bordeaux);
  font-family: var(--font-display);
  font-size: clamp(12.5px, 3.3vw, 13.5px);
  letter-spacing: .2em;
  cursor: pointer;
  opacity: 1;
  transition: background .45s ease, border-color .45s ease;
}
.soil-story__sci-toggle:hover,
.soil-story__sci-toggle:active {
  background: var(--washi);
  border-color: var(--bordeaux);
}
.soil-story__sci-toggle::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.soil-story__sci-mark {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
}
.soil-story__sci-mark::before,
.soil-story__sci-mark::after {
  content: "";
  position: absolute;
  background: var(--bordeaux);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}
.soil-story__sci-mark::before { left: 0; top: 4px; width: 9px; height: 1px; }
.soil-story__sci-mark::after { left: 4px; top: 0; width: 1px; height: 9px; }
.soil-story__sci-toggle[aria-expanded="true"] .soil-story__sci-mark::after {
  transform: scaleY(0);
  opacity: 0;
}

.soil-story__science {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: .7rem;
  transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1);
}
.soil-story__sci-toggle[aria-expanded="true"] + .soil-story__science { grid-template-rows: 1fr; }

/* 「注釈である」ことを面で示す：和紙の一段深い面 ＋ 左にボルドーの縦罫 */
.soil-story__science > p {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  background: var(--washi-deep);
  border-left: 2px solid var(--line);
  border-radius: 2px;
  padding: 0 1.2em;
  font-family: var(--font-body);
  font-size: clamp(14px, 3.6vw, 15px);
  letter-spacing: .05em;
  line-height: 2.1;
  opacity: .9;
  cursor: pointer;
  transition: visibility 0s linear .45s, padding .45s cubic-bezier(.16, 1, .3, 1);
}
.soil-story__sci-toggle[aria-expanded="true"] + .soil-story__science > p {
  visibility: visible;
  padding: 1.1em 1.2em;
  transition: visibility 0s, padding .45s cubic-bezier(.16, 1, .3, 1);
}

/* ---- フッター：問い合わせへの導線1本だけ ---- */
.soil-story__foot {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.6rem, 4vmin, 2.4rem);
  text-align: center;
}
.soil-story__foot-link {
  display: inline-block;
  padding: .9em 1.6em;
  border-bottom: 1px solid var(--line);
  color: var(--bordeaux);
  font-family: var(--font-display);
  font-size: clamp(13px, 3.4vw, 14.5px);
  letter-spacing: .22em;
  text-decoration: none;
  transition: border-color .45s ease, background .45s ease;
}
.soil-story__foot-link:hover {
  border-color: var(--bordeaux);
  background: rgba(122, 36, 50, .05);
}

/* ---- 下部の「閉じる」帯（右上の×より到達しやすい第2の閉じ口・親指の届く位置） ---- */
.soil-story__close-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  width: 100%;
  min-height: 56px;
  margin-top: clamp(1.4rem, 3.6vmin, 2rem);
  padding: 1em;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(13px, 3.4vw, 14.5px);
  letter-spacing: .28em;
  cursor: pointer;
  opacity: .7;
  transition: opacity .45s ease, background .45s ease;
}
.soil-story__close-bar:hover,
.soil-story__close-bar:focus-visible {
  opacity: 1;
  background: rgba(122, 36, 50, .04);
}
.soil-story__close-bar-mark {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.soil-story__close-bar-mark::before,
.soil-story__close-bar-mark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 1px;
  background: var(--ink);
}
.soil-story__close-bar-mark::before { transform: rotate(45deg); }
.soil-story__close-bar-mark::after { transform: rotate(-45deg); }

/* ホバー拡大は不採用（2026-08-04 けんすう×深津 UI/UX監査）。
   ①5%ルール（使うのは一部・全員がコストを払う）②font-size 変化でアコーディオンの高さが揺れ、
   視力の弱い方にはむしろ読みにくい ③:hover はマウス限定で、助けたい層（スマホの年配）に届かない。
   解は「最初から十分な大きさと濃さで組む」——サイズと opacity は本ファイルの基準値側で担保済み。 */

/* ============================================================
   ひつじの「もく」モーダル v2（v4.43）
   指示書: todo_protocol.md §24（初出 §23）／ 計画書: docs/specs/moku_modal_plan.md
   演出は transition ＋ transition-delay のみで組む（@keyframes を新設しない・§5.4の上限を維持）。
   トコトコの上下動も keyframes ではなく linear() イージングの往復で作る（下の __sketch を参照）。
   will-change は使わない（body::after の和紙グレインの mix-blend-mode から外れて矩形が露出する）。
   ============================================================ */

/* ---- 導線：#contact の控えめなピルタグ ---- */
.moku-trigger-wrap {
  margin: clamp(1.8rem, 3.5vh, 2.4rem) 0 clamp(14px, 2.5vh, 22px);
  text-align: center;
}

.moku-trigger {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .62em 1.5em;
  border: 1px solid rgba(122, 36, 50, .26);
  border-radius: 999px;
  background: rgba(247, 244, 236, .8);
  color: var(--bordeaux);
  font-family: var(--font-display);
  font-size: clamp(11.5px, 3vw, 13px);
  letter-spacing: .16em;
  line-height: 1;
  cursor: pointer;
  transition: background .45s ease, border-color .45s ease, transform .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.moku-trigger:hover,
.moku-trigger:focus-visible {
  background: rgba(122, 36, 50, .07);
  border-color: rgba(122, 36, 50, .58);
  transform: translateY(-2px);
}
/* 導線のミニアイコンにも同じ線画ファイルを使う＝差し替え契約（§23 ②-2）が導線側にも自動で効く */
.moku-trigger__icon {
  width: 26px;
  height: auto;
  flex: none;
  opacity: .78;
  transition: opacity .45s ease;
}
.moku-trigger:hover .moku-trigger__icon { opacity: 1; }
.moku-trigger__label { display: block; }

/* ---- モーダル本体 ---- */
/* z-index:90 = .menu-overlay(80) より上・body::after の和紙グレイン(200) より下。
   200以上にすると質感が乗らずモーダルだけ別世界になる（.soil-story と同値・同理由） */
.moku-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  justify-items: center;
  align-items: center;
  /* 上下の余白は「閉じる」を置く帯ぶんだけ。§24 ⑤ の五感ナラティブは縦に長く、
     ここを広く取ると PC で CTA がスクロール器の外へ落ちる（1440×900で実測） */
  padding: clamp(44px, 7.5vh, 72px) clamp(12px, 4vw, 28px) clamp(24px, 5vh, 44px);
  background: rgba(24, 9, 12, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.moku-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease-out;
}

/* スクロールする器は外側のこの枠（パネル側に overflow を持たせない：§38 と同じ理由）。
   雲型の張り出しが切れないよう左右に余白を持たせている */
.moku-modal__scroll {
  position: relative;
  width: min(94vw, 560px);
  max-height: 100%;
  padding: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.moku-modal__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 果樹園のしずく型パネル（§24 ③-1）。
   横方向の不等形は指示値どおり（48% 52% 45% 55%）。縦方向だけ指示の 55/48/52/45% を使わない：
   §24 ⑤ の五感ナラティブを入れるとパネルは幅の約2倍の縦長になり、縦50%前後の角丸は
   「しずく」ではなく尖った木の葉型になって CTA の両肩を overflow で食い落とす（375pxで実測）。
   縦は上を深く・下を浅くして、枝から下がる果実／朝露の丸みに寄せた。
   overflow:hidden は和紙テクスチャ（::after）と滲み（::before のぼかし）を
   しずくの輪郭で止めるために必須。水彩の滲みマスクは 80% で透明へ落ちきるので
   この clip には触れない＝「くっきり切り抜かない」（§24 ③-2）は保たれる */


.moku-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(90vw, 480px);
  max-width: 480px;
  border-radius: 44% 56% 56% 44% / 36% 38% 42% 40%;
  overflow: hidden;
  background: var(--washi);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 26px 56px rgba(10, 4, 6, .42);
  padding: clamp(3.2rem, 7vh, 4.4rem) 0 clamp(3.8rem, 9vh, 5.2rem);
}

/* 和紙の滲み（.soil-story__panel::before と同値） */
.moku-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 18%, rgba(122, 36, 50, .16) 0%, rgba(122, 36, 50, .05) 45%, transparent 70%);
  mix-blend-mode: multiply;
  filter: blur(28px);
}

/* 和紙のザラザラ質感（.soil-story__panel::after と同値・2層ノイズ） */
.moku-modal__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
  mix-blend-mode: multiply;
  filter: contrast(155%);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size: 240px 240px, 480px 480px;
}

/* 閉じるボタン：スクリム上（パネルの外）に固定。タップエリア56×56は §3 の契約値 */
.moku-modal__close {
  position: absolute;
  z-index: 12;
  top: clamp(10px, 2.4vh, 22px);
  right: clamp(10px, 3vw, 24px);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(251, 249, 245, .86);
  cursor: pointer;
  transition: background .45s ease, border-color .45s ease;
}
.moku-modal__close:hover,
.moku-modal__close:focus-visible {
  background: var(--washi);
  border-color: var(--line);
}
.moku-modal__close span {
  position: absolute;
  width: 24px;
  height: 1px;
  background: var(--ink);
  opacity: .72;
  transition: opacity .45s ease, background .45s ease;
}
.moku-modal__close span:first-child { transform: rotate(45deg); }
.moku-modal__close span:last-child { transform: rotate(-45deg); }
.moku-modal__close:hover span { opacity: 1; background: var(--bordeaux); }

.moku-modal__body {
  position: relative;
  z-index: 2;
}

/* ---- 二段階演出の舞台（§24 ④） ---- */
/* 舞台の地は和紙のまま（＝紙の上を線画が歩き、そこへ水彩が滲む、という時間の流れを見せる）。
   ここに overflow:hidden も border-radius も置かない。硬い窓を廃して
   水彩自身の radial マスクだけで和紙へ溶かすのが §24 ③-2 の眼目。
   しずくの縁に噛まないよう、舞台幅は content の内側へ寄せてある */
.moku-modal__visual-container {
  position: relative;
  width: clamp(210px, 75%, 280px);
  margin: clamp(3.6rem, 9vh, 6.0rem) auto clamp(1.4rem, 3.5vh, 2.2rem);
  aspect-ratio: 4 / 3;
}

/* モーダル内スキップボタン（羊の下部・モーダル底部エリアで待機し、スキップ時/水彩画浮上時に確実に完全消滅） */
.moku-modal__skip-btn {
  position: absolute;
  top: clamp(520px, 76vh, 640px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid rgba(122, 36, 50, .28);
  border-radius: 999px;
  background: rgba(247, 243, 237, .85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--bordeaux);
  font-family: var(--font-mincho, "Shippori Mincho", serif);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

/* アニメーション再生中のみ、1.2s〜11.8s の間フェードインして表示 */
@keyframes mokuSkipBtnLifecycle {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateX(-50%) translateY(6px);
  }
  8% {
    opacity: .65;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  92% {
    opacity: .65;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-4px);
  }
}

.moku-modal.is-open:not(.is-skipped) .moku-modal__skip-btn {
  pointer-events: auto;
  animation: mokuSkipBtnLifecycle 11.8s ease-out 1.2s forwards;
}

.moku-modal__skip-btn:hover,
.moku-modal__skip-btn:focus-visible {
  opacity: 1;
  background: var(--bordeaux);
  color: var(--washi);
  border-color: var(--bordeaux);
  transform: translateX(-50%) translateY(-1px);
}

/* スキップ時は即座にアニメーション停止＆完全非表示 */
.moku-modal.is-open.is-skipped .moku-modal__skip-btn {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

/* 両ラッパーは舞台に完全に重ねる（線画が歩き終えた位置＝水彩が滲み出す中心） */
.moku-modal__sketch-wrapper,
.moku-modal__watercolor-wrapper {
  position: absolute;
  inset: 0;
}
.moku-modal__sketch-wrapper {
  position: absolute;
  top: clamp(170px, 32vh, 260px);
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(-128%);
}        /* 歩いているあいだは線画が前 */
.moku-modal__watercolor-wrapper { z-index: 1; }

/* Step 2（1.2s → 2.6s）: 線画のいた場所から、水彩がじわ〜っと時間をかけて滲み出る。
   外周は radial-gradient マスクで和紙へ溶かす（＝境界線の融解・Blur & Bleed） */
.moku-modal__watercolor {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 停止位置は §24 ③-2 の指示値。形だけ circle → ellipse にしてある：
     舞台は 4:3 で、circle は最遠コーナー基準のため 80% の時点でも左右がまだ不透明に残り、
     上下だけ溶けて左右に直線の切り口が立つ（＝廃したはずの「くっきりした窓」が戻る）。
     ellipse なら四方が同じ割合で和紙へ落ちきる */
  mask-image: radial-gradient(ellipse at center, black 45%, rgba(0, 0, 0, .8) 60%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 45%, rgba(0, 0, 0, .8) 60%, transparent 80%);
  opacity: 0;
  filter: blur(10px) drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
  transform: scale(.96);
  transition: opacity .5s ease, filter .5s ease, transform .5s ease;
}
.moku-modal.is-open .moku-modal__watercolor {
  opacity: 1;
  filter: blur(0) drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
  transform: scale(1);
  /* 1.4秒かけてゆっくり滲ませる＝「手間ひまをかけて育てた」の努力の錯視（§24 ①-1） */
  transition: opacity 1.4s ease-out 11.95s, filter 1.4s ease-out 11.95s, transform 1.4s ease-out 11.95s;
}

/* Step 1 & 2: 
   もくの完全感情ストーリー（全尺 12.20s）
   - Step 1 (0.0s〜2.2s): トコトコ登場
   - Step 2 (2.2s〜2.5s): 気づきの静止（0.3s）
   - Step 2.2 (2.5s〜2.8s): わっ！と小ジャンプ（-8px・0.3s）
   - Step 2.4 (2.8s〜3.1s): えっ…！？と少しの溜め（0.3s）
   - Step 2.5 (3.1s〜3.4s): お客さんと気づいてプルプルッ！(0.3s)
   - Step 2.8 (3.4s〜4.6s): 歓迎のジャンプをするぞまでの溜め（たっぷり1.2s・物語の区切り）
   - Step 3 (4.6s〜5.8s): 喜びの3段ジャンプ（小 -8px ➔ 中 -14px ➔ 大 -22px）
   - Step 4 (5.8s〜6.2s): 間（0.4s）
   - Step 5 (6.2s〜7.15s): 調子に乗って大大ジャンプ(-56px) ➔ ズドーーーンと沈み込み(+36px) ➔ 復帰
   - Step 6 (7.15s〜7.75s): やっちゃった…の溜め（0.6s）
   - Step 6.5 (7.75s〜9.25s): 恥ずかしがってプルプルプルッ…！と震える（たっぷり1.5s）
   - Step 6.8 (9.25s〜10.25s): 恥ずかしくてどうしょ〜の溜め（1.0s）
   - Step 7 (10.25s〜11.95s): 完全等速720度回転ロール退場
   - Step 8 (11.95s〜): 水彩画じわ〜っと浮上
   ※ワンタップ/クリックで即座に Step 8（水彩画と本文）へショートカット可能（.is-skipped） */
.moku-modal__sketch-wrapper {
  position: absolute;
  top: clamp(170px, 32vh, 260px);
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(-128%);
}
.moku-modal.is-open .moku-modal__sketch-wrapper {
  animation: mokuMoveX 12.2s linear forwards;
}

.moku-modal__sketch-bobber {
  position: absolute;
  inset: 0;
  transform: translateY(0);
}
.moku-modal.is-open .moku-modal__sketch-bobber {
  animation: mokuMoveY 12.2s linear forwards;
}

.moku-modal__sketch {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  height: auto;
  transform: translate(-50%, -50%) rotate(0deg);
}
.moku-modal.is-open .moku-modal__sketch {
  animation: mokuPureSpin 12.2s linear forwards;
}

/* X軸：水平トラック移動 */
@keyframes mokuMoveX {
  /* 0.0s〜2.2s (0%〜18.03%): 左端から中央へ到着 */
  0% {
    transform: translateX(-128%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  18.03% {
    transform: translateX(0);
    opacity: 1;
  }
  /* 2.2s〜10.25s (18.03%〜84.02%): 中央（X=0）で完全静止（ドラマ・演技） */
  84.02% {
    transform: translateX(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.3, 0, 0.25, 1);
  }
  /* 10.25s〜11.95s (84.02%〜97.95%): 右へ一定ペースで進む */
  97.95% {
    transform: translateX(115%);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  /* 11.95s〜12.20s (97.95%〜100%): フェードアウト */
  100% {
    transform: translateX(135%);
    opacity: 0;
  }
}

/* Y軸：トコトコ ➔ 気づき(0.3s) ➔ 小ジャンプ(0.3s) ➔ 溜め(0.3s) ➔ 驚きプルプル(0.3s) ➔ 助走溜め(1.2s) ➔ 3段ジャンプ ➔ 間 ➔ 大大ジャンプ(-56px) ➔ 沈み込み(+36px) ➔ 溜め(0.6s) ➔ 恥ずかしプルプル(1.5s) ➔ 溜め(1.0s) */
@keyframes mokuMoveY {
  /* 0.0s〜2.2s (0%〜18.03%): 8歩のハイピッチトコトコ */
  0%    { transform: translateY(0);    animation-timing-function: ease-out; }
  1.13% { transform: translateY(-7px); animation-timing-function: ease-in; }
  2.25% { transform: translateY(0);    animation-timing-function: ease-out; }
  3.38% { transform: translateY(-7px); animation-timing-function: ease-in; }
  4.51% { transform: translateY(0);    animation-timing-function: ease-out; }
  5.63% { transform: translateY(-7px); animation-timing-function: ease-in; }
  6.76% { transform: translateY(0);    animation-timing-function: ease-out; }
  7.89% { transform: translateY(-7px); animation-timing-function: ease-in; }
  9.02% { transform: translateY(0);    animation-timing-function: ease-out; }
  10.14%{ transform: translateY(-7px); animation-timing-function: ease-in; }
  11.27%{ transform: translateY(0);    animation-timing-function: ease-out; }
  12.40%{ transform: translateY(-7px); animation-timing-function: ease-in; }
  13.52%{ transform: translateY(0);    animation-timing-function: ease-out; }
  14.65%{ transform: translateY(-7px); animation-timing-function: ease-in; }
  15.78%{ transform: translateY(0);    animation-timing-function: ease-out; }
  16.90%{ transform: translateY(-7px); animation-timing-function: ease-in; }
  18.03%{ transform: translateY(0); }

  /* 2.2s〜2.5s (18.03%〜20.49%): Step 2 気づきの静止（0.3s） */
  20.49%{ transform: translateY(0); }

  /* 2.5s〜2.8s (20.49%〜22.95%): Step 2.2 わっ！と小ジャンプ（-8px） */
  21.72%{ transform: translateY(-8px);  animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
  22.95%{ transform: translateY(0);     animation-timing-function: ease-in; }

  /* 2.8s〜3.1s (22.95%〜25.41%): Step 2.4 えっ…！？と少しの溜め（0.3s） */
  25.41%{ transform: translateY(0); }

  /* 3.1s〜3.4s (25.41%〜27.87%): Step 2.5 気づきプルプル（0.3s Y=0） */
  27.87%{ transform: translateY(0); }

  /* 3.4s〜4.6s (27.87%〜37.70%): Step 2.8 歓迎ジャンプ前の溜め（たっぷり1.2s静止・物語の区切り） */
  37.70%{ transform: translateY(0); }

  /* 4.6s〜4.95s (37.70%〜40.57%): 1回目 小ジャンプ（-8px） */
  39.14%{ transform: translateY(-8px);  animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
  40.57%{ transform: translateY(0);     animation-timing-function: ease-in; }

  /* 4.95s〜5.35s (40.57%〜43.85%): 2回目 中ジャンプ（-14px） */
  42.21%{ transform: translateY(-14px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
  43.85%{ transform: translateY(0);     animation-timing-function: ease-in; }

  /* 5.35s〜5.80s (43.85%〜47.54%): 3回目 大ジャンプ（-22px） */
  45.70%{ transform: translateY(-22px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
  47.54%{ transform: translateY(0);     animation-timing-function: ease-in; }

  /* 5.80s〜6.20s (47.54%〜50.82%): Step 4 間（0.4s静止） */
  50.82%{ transform: translateY(0); }

  /* 6.20s〜6.65s (50.82%〜54.51%): Step 5 大大ジャンプ頂点（-56px！！） */
  54.51%{ transform: translateY(-56px); animation-timing-function: cubic-bezier(0.55, 0.05, 0.85, 0.35); }

  /* 6.65s〜6.95s (54.51%〜56.97%): 勢いのままズドーーーンと最深沈み込み（+36px！！） */
  56.97%{ transform: translateY(36px);  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); }

  /* 6.95s〜7.15s (56.97%〜58.61%): ぽよんと元の高さに戻る（Y=0） */
  58.61%{ transform: translateY(0); }

  /* 7.15s〜7.75s (58.61%〜63.52%): Step 6 やっちゃった…の溜め（0.6s静止） */
  63.52%{ transform: translateY(0); }

  /* 7.75s〜9.25s (63.52%〜75.82%): Step 6.5 恥ずかしプルプル（1.5s Y=0） */
  75.82%{ transform: translateY(0); }

  /* 9.25s〜10.25s (75.82%〜84.02%): Step 6.8 どうしよ〜の溜め（1.0s静止 Y=0） */
  84.02%{ transform: translateY(0); }

  /* 84.02%〜100%: Y=0 */
  100%  { transform: translateY(0); }
}

/* 回転 ＆ Step 2.5 気づきプルプル(0.3s) ＆ Step 6.5 超高速ハイピッチ恥ずかしプルプル(1.5s) ＆ Step 6.8 溜め(1.0s) ＆ 720度ロール */
@keyframes mokuPureSpin {
  /* 0.0s〜3.1s (0%〜25.41%): 回転ゼロ（水平） */
  0%, 25.41% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  /* 3.1s〜3.4s (25.41%〜27.87% / 0.3秒間): Step 2.5 お客さんと気づいて嬉しいプルプルッ！（ゆったりピッチ） */
  25.9% { transform: translate(-50%, -50%) rotate(-4deg); }
  26.4% { transform: translate(-50%, -50%) rotate(4deg); }
  26.9% { transform: translate(-50%, -50%) rotate(-3deg); }
  27.4% { transform: translate(-50%, -50%) rotate(3deg); }
  27.87%{ transform: translate(-50%, -50%) rotate(0deg); }

  /* 3.4s〜7.75s (27.87%〜63.52%): 回転ゼロ（1.2s溜め・ジャンプ・沈み込み・溜め） */
  63.52%{ transform: translate(-50%, -50%) rotate(0deg); }

  /* 7.75s〜9.25s (63.52%〜75.82% / たっぷり1.5秒間): Step 6.5 恥ずかしがって超高速ハイピッチでブルブルブルブルッ…！と震える！ */
  63.8% { transform: translate(-50%, -50%) rotate(-5deg); }
  64.1% { transform: translate(-50%, -50%) rotate(5deg); }
  64.4% { transform: translate(-50%, -50%) rotate(-5deg); }
  64.7% { transform: translate(-50%, -50%) rotate(5deg); }
  65.0% { transform: translate(-50%, -50%) rotate(-5deg); }
  65.3% { transform: translate(-50%, -50%) rotate(5deg); }
  65.6% { transform: translate(-50%, -50%) rotate(-5deg); }
  65.9% { transform: translate(-50%, -50%) rotate(5deg); }
  66.2% { transform: translate(-50%, -50%) rotate(-4.5deg); }
  66.5% { transform: translate(-50%, -50%) rotate(4.5deg); }
  66.8% { transform: translate(-50%, -50%) rotate(-4.5deg); }
  67.1% { transform: translate(-50%, -50%) rotate(4.5deg); }
  67.4% { transform: translate(-50%, -50%) rotate(-4deg); }
  67.7% { transform: translate(-50%, -50%) rotate(4deg); }
  68.0% { transform: translate(-50%, -50%) rotate(-4deg); }
  68.3% { transform: translate(-50%, -50%) rotate(4deg); }
  68.6% { transform: translate(-50%, -50%) rotate(-3.5deg); }
  68.9% { transform: translate(-50%, -50%) rotate(3.5deg); }
  69.2% { transform: translate(-50%, -50%) rotate(-3.5deg); }
  69.5% { transform: translate(-50%, -50%) rotate(3.5deg); }
  69.8% { transform: translate(-50%, -50%) rotate(-3deg); }
  70.1% { transform: translate(-50%, -50%) rotate(3deg); }
  70.4% { transform: translate(-50%, -50%) rotate(-3deg); }
  70.7% { transform: translate(-50%, -50%) rotate(3deg); }
  71.0% { transform: translate(-50%, -50%) rotate(-2.5deg); }
  71.3% { transform: translate(-50%, -50%) rotate(2.5deg); }
  71.6% { transform: translate(-50%, -50%) rotate(-2.5deg); }
  71.9% { transform: translate(-50%, -50%) rotate(2.5deg); }
  72.2% { transform: translate(-50%, -50%) rotate(-2deg); }
  72.5% { transform: translate(-50%, -50%) rotate(2deg); }
  72.8% { transform: translate(-50%, -50%) rotate(-2deg); }
  73.1% { transform: translate(-50%, -50%) rotate(2deg); }
  73.4% { transform: translate(-50%, -50%) rotate(-1.5deg); }
  73.7% { transform: translate(-50%, -50%) rotate(1.5deg); }
  74.0% { transform: translate(-50%, -50%) rotate(-1.5deg); }
  74.3% { transform: translate(-50%, -50%) rotate(1.5deg); }
  74.6% { transform: translate(-50%, -50%) rotate(-1deg); }
  74.9% { transform: translate(-50%, -50%) rotate(1deg); }
  75.2% { transform: translate(-50%, -50%) rotate(-0.5deg); }
  75.5% { transform: translate(-50%, -50%) rotate(0.5deg); }
  75.82%{ transform: translate(-50%, -50%) rotate(0deg); }

  /* 9.25s〜10.25s (75.82%〜84.02% / 1.0秒間): Step 6.8 恥ずかしくてどうしょ〜の溜め（静止 rotate: 0deg） */
  84.02%{ transform: translate(-50%, -50%) rotate(0deg); }

  /* 10.25s〜11.95s (84.02%〜97.95%): 完全等速（linear）で720度（2回転）回る！ */
  97.95%, 100% {
    transform: translate(-50%, -50%) rotate(720deg);
  }
}

100% {
    opacity: 1;
    filter: drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
    transform: scale(1);
  }
}

100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.moku-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(90vw, 480px);
  max-width: 480px;
  border-radius: 44% 56% 56% 44% / 36% 38% 42% 40%;
  overflow: hidden;
  background: var(--washi);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 26px 56px rgba(10, 4, 6, .42);
  padding: clamp(3.2rem, 7vh, 4.4rem) 0 clamp(3.8rem, 9vh, 5.2rem);
}

/* ---- 五感ナラティブ（§24 ④-3：行ごとに遅延して下から浮上） ---- */
.moku-modal__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3.5vw, 20px);
  box-sizing: border-box;
}

.moku-modal__title,
.moku-modal__lead,
.moku-modal__text,
.moku-modal__action {
  opacity: 0;
  transform: translateY(14px);
}

.moku-modal.is-open .moku-modal__title,
.moku-modal.is-open .moku-modal__lead,
.moku-modal.is-open .moku-modal__text,
.moku-modal.is-open .moku-modal__action {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 12.1s),
    transform .8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 12.1s);
}

.moku-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.8vw, 1.6rem);
  font-weight: 500;
  font-feature-settings: "palt";
  color: var(--bordeaux);
  letter-spacing: .14em;
  line-height: 1.45;
  margin: 0 0 clamp(0.9rem, 2.4vh, 1.3rem);
  text-align: center;
}

.moku-modal__lead {
  font-family: var(--font-body);
  font-size: clamp(13px, 3.2vw, 14.8px);
  font-weight: 500;
  color: rgba(42, 38, 36, .88);
  line-height: 1.85;
  letter-spacing: .02em;
  margin: 0 0 clamp(1.1rem, 2.8vh, 1.6rem);
  text-align: center;
}

.moku-modal__text {
  font-family: var(--font-body);
  font-size: clamp(12.5px, 3.0vw, 13.8px);
  color: var(--ink);
  line-height: 2.0;
  letter-spacing: .02em;
  margin: 0 0 clamp(1.1rem, 2.8vh, 1.6rem);
  text-align: center;
}

.moku-modal__text:last-of-type {
  margin-bottom: clamp(1.2rem, 3.0vh, 1.6rem);
}

.moku-modal__action {
  margin-top: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: clamp(1.8rem, 4.5vh, 2.6rem);
}

/* スマホでも確実にモーダル内に美しく余裕をもって収まるコンパクトCTAボタン */
.moku-modal__cta-btn {T0px;
  padding: 10px 22px;
  border: 1px solid var(--bordeaux);
  border-radius: 999px;
  background: var(--bordeaux);
  color: var(--washi);
  font-family: var(--font-mincho, "Shippori Mincho", serif);
  font-size: clamp(12px, 1.8vw, 13.5px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .04em;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 6px 20px rgba(122, 36, 50, .26);
  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.moku-modal__btn-text {
  display: inline-block;
  white-space: nowrap;
}
.moku-modal__btn-sub {
  font-size: 0.86em;
  opacity: .92;
  display: block;
}
.moku-modal__cta-btn:hover,
.moku-modal__cta-btn:focus-visible {
  background: var(--bordeaux-deep);
  border-color: var(--bordeaux-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(122, 36, 50, .34);
}
.moku-modal__btn-arrow {
  flex: none;
  stroke: currentColor;
  opacity: .85;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.moku-modal__cta-btn:hover .moku-modal__btn-arrow {
  flex: none;
  stroke: currentColor;
  opacity: .85;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- ワンタップ・スキップ（ショートカット）：線画はふわっと消え、水彩画の滲み出し〜各行の浮上をテンポよく語りかける ---- */
@keyframes mokuSketchFadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.92);
    visibility: hidden;
  }
}

@keyframes mokuWatercolorEmerge {
  0% {
    opacity: 0;
    filter: blur(10px) drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
    transform: scale(1);
  }
}

@keyframes mokuContentFloatUp {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.moku-modal.is-open.is-skipped .moku-modal__sketch-wrapper {
  animation: mokuSketchFadeOut .45s ease-out forwards;
  pointer-events: none;
}

.moku-modal.is-open.is-skipped .moku-modal__watercolor {
  opacity: 1;
  filter: drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
  transform: scale(1);
  animation: mokuWatercolorEmerge 1.2s ease-out forwards;
}

.moku-modal.is-open.is-skipped .moku-modal__title {
  animation: mokuContentFloatUp .7s cubic-bezier(0.22, 1, 0.36, 1) .5s forwards;
}
.moku-modal.is-open.is-skipped .moku-modal__lead {
  animation: mokuContentFloatUp .7s cubic-bezier(0.22, 1, 0.36, 1) .65s forwards;
}
.moku-modal.is-open.is-skipped .moku-modal__text:nth-of-type(2) {
  animation: mokuContentFloatUp .7s cubic-bezier(0.22, 1, 0.36, 1) .8s forwards;
}
.moku-modal.is-open.is-skipped .moku-modal__text:nth-of-type(3) {
  animation: mokuContentFloatUp .7s cubic-bezier(0.22, 1, 0.36, 1) .95s forwards;
}
.moku-modal.is-open.is-skipped .moku-modal__text:nth-of-type(4) {
  animation: mokuContentFloatUp .7s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}
.moku-modal.is-open.is-skipped .moku-modal__action {
  animation: mokuContentFloatUp .7s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .js-anim .soil__poem { opacity: 1; filter: none; transform: none; transition: none; }
  .soil__title span, .almanac__title span, .closing__phrase .closing__chars span { opacity: 1; filter: none; transition: none; }
  .js-anim .crop-line { stroke-dashoffset: 0; transition: none; }
  .js-anim .mhr-wipe { stroke-dashoffset: 0; transition: none; }
  .js-anim .mhr-leaf__unfurl { opacity: 1; transform: scale(var(--leaf-scale, 1)) rotate(0deg); transition: none; }
  .js-anim .mhr-fruit__unfurl { opacity: 1; transform: scale(1) rotate(var(--fruit-rotate, 0deg)); transition: none; }
  .js-anim .mhr-branch { transition: none; }
  .entry.is-visible .mhr-branch { transform: none; }
  .js-anim .hero__name,
  .js-anim .hero__name span,
  .js-anim .hero__farm,
  .js-anim .hero__copy,
  .js-anim .hero__arc,
  .js-anim .mahorama-seal-container,
  .js-anim .hero__place { opacity: 1; filter: none; transition: none; }
  .js-anim .hero__accent { stroke-dashoffset: 0; transition: none; }
  .menu-overlay, .menu-overlay__panel,
  .menu-overlay__brand, .menu-overlay__nav a, .menu-overlay__sns,
  .soil-story, .soil-story__panel, .soil-story__body, .soil-story__body-inner,
  .soil-story__science, .soil-story__science > p, .soil-story__chevron,
  .soil-story__sci-mark::before, .soil-story__sci-mark::after, .soil__story-trigger,
  .soil-story__close, .soil-story__close-bar,
  .site-header__icon span { transition: none; }

  /* §24 ⑥-3: reduced-motion 時は線画歩行を全スキップして最初から水彩画・本文を即座に表示 */
  .moku-modal__sketch-wrapper, .moku-modal__skip-btn { display: none; }
  .moku-modal.is-open .moku-modal__watercolor {
    opacity: 1;
    filter: drop-shadow(0 4px 20px rgba(180, 140, 100, .15));
    transform: none;
    transition: none;
  }
  .moku-modal.is-open .moku-modal__title,
  .moku-modal.is-open .moku-modal__lead,
  .moku-modal.is-open .moku-modal__text,
  .moku-modal.is-open .moku-modal__action {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .moku-trigger { transition: none; }
}

/* スマホ専用改行ブロック制御（PC表示では自然な1行、スマホでは指定行数で綺麗に改行） */
.u-sp-block {
  display: inline;
}
@media (max-width: 600px) {
  .u-sp-block {
    display: block;
  }
}
@media (max-width: 600px) {
  .u-sp-break {
    display: inline;
  }
  .u-sp-break br {
    display: block;
    content: "";
  }
}