/* ============================================================
   米吉 COMEKICHI ── 物語型LP スタイル
   設計思想：AI生成テンプレの均質さを避ける。章ごとにレイアウトの
   「型」を変え、非対称・不均等・裁ち落とし・重なりでリズムをつくる。
   面と罫線だけで組む（角丸カード・影・グラデーション・汎用アイコンは不使用）。
   ============================================================ */

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--paper);
  background-image: var(--washi);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--shu); color: var(--paper); }

/* ---------- 版面 ---------- */
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.chapter { position: relative; padding-block: var(--sect-pad); overflow: hidden; }

/* 墨地の章（白抜き）。物語の緩急をつくる */
.chapter--sumi {
  background-color: var(--sumi);
  background-image: var(--washi-dark);
  color: var(--sumi-ink);
}
.chapter--sumi .lead, .chapter--sumi p { color: var(--sumi-ink); }

/* ---------- 印刷物の文法：栞の章番号（欧文キャプション） ---------- */
.eyebrow {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-cap);
  letter-spacing: var(--ls-latin);
  text-transform: uppercase;
  color: var(--shu);
  display: inline-block;
}
.chapter--sumi .eyebrow { color: var(--shu-on-dark); }



/* 細い1px墨罫 */
.rule { border: 0; border-top: 1px solid var(--rule); }
.rule--soft { border-top: 1px solid var(--rule-soft); }
.chapter--sumi .rule { border-top-color: var(--rule-on-dark); }


/* ---------- タイポグラフィ基本 ---------- */
.h-mincho {
  font-family: var(--font-mincho);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--sumi);
}
.chapter--sumi .h-mincho { color: var(--sumi-ink); }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.95;
  color: var(--text);
  max-width: 40ch;
}
.body-block { max-width: var(--measure); }
.body-block p + p { margin-top: 1.4em; }
.sign {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--sumi);
  margin-top: 2.2em;
}
.chapter--sumi .sign { color: var(--sumi-ink); }
.accent { color: var(--shu); }
.kanji-accent { color: var(--shu); font-family: var(--font-mincho); font-weight: 700; }

/* ---------- 日本語の改行を整える ----------
   本文全体を文節（フレーズ）単位で折り返し、助詞の孤立・語中改行を防ぐ。
   見出しは行数を均等に、本文は行末の泣き別れを避ける。
   （対応ブラウザで有効・非対応環境は従来の折り返しにフォールバック） */
main :is(h1, h2, h3, p, li, dd, dt, blockquote, summary, figcaption),
.promise__sign .name, .authority, .hero__sub,
.site-footer__tag, .site-footer__company {
  line-break: strict;
  word-break: auto-phrase;
}
main :is(h1, h2, h3), .vow__statement, .promise__declare, .trial__title, .lineup__name {
  text-wrap: balance;
}
main :is(p, li, dd), .lead {
  text-wrap: pretty;
}

/* ---------- 物語パートの本文を明朝で組む ----------
   読み物・エディトリアルの質感。AI標準のゴシック本文（Noto Sans）から脱する。
   データ表・FAQ・ナビ・ボタン等の機能パートはサンセリフのまま残す。 */
.lead,
.body-block p,
.origin__text p, .origin__text .lead-in,
.promise__body p,
.zig__d,
.grower__qa .a,
.pro__leadin,
.proof__lead, .safety__lead, .safety__note-detected {
  font-family: var(--font-mincho);
  font-weight: 400;
}

/* ---------- 写真・プレースホルダー ---------- */
.media {
  position: relative;
  overflow: hidden;
  background-color: var(--paper-deep);
  background-image: var(--washi);
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* アスペクト比のバリエーション（章ごとに変える） */
.media--pano     { aspect-ratio: 21 / 9; }
.media--wide     { aspect-ratio: 16 / 9; }
.media--square   { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--tall     { aspect-ratio: 3 / 4; }

/* onerror フォールバック：写真が無くても「意図されたデザイン」で成立させる */
.media--failed img,
.media:not(.media--ok) img[data-optional] { }
.media--failed img { display: none; }
.media--failed::after,
.media--empty::after {
  content: attr(data-ph);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 1.5rem;
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  line-height: 1.9;
  color: var(--text-dim);
  border: 1px solid var(--rule-soft);
  box-shadow: inset 0 0 0 6px var(--paper);
}
.media--failed::after { white-space: pre-line; }
/* 墨地の章に置く写真スロット（ブランク枠でも「意図された余白」として成立させる） */
.chapter--sumi .media { background-color: #22211d; }
.chapter--sumi .media--failed::after,
.chapter--sumi .media--empty::after {
  color: var(--sumi-ink-dim);
  border-color: var(--rule-on-dark-soft);
  box-shadow: inset 0 0 0 6px var(--sumi);
}

/* 写真のさりげないホバーズーム（デスクトップの上質なあしらい） */
@media (hover: hover) {
  .media img { transition: transform 1.1s var(--ease-settle); }
  .grower__photo:hover img, .pro__photo:hover img, .origin__photo:hover img,
  .grow__photo:hover img, .zig__media:hover img, .lineup__photo:hover img,
  .vow__photo:hover img, .awake__photo:hover img { transform: scale(1.045); }
}

/* 90度回転キャプション（写真脇に縦） */
.cap-vert {
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: var(--fs-cap);
  letter-spacing: 0.18em;
  color: var(--text-dim);
  z-index: 2;
  /* 写真に重なっても読めるよう、生成りの淡いにじみを添える */
  text-shadow: 0 0 6px rgba(242,241,235,.9), 0 0 2px rgba(242,241,235,.7);
}
.cap {
  font-family: var(--font-latin);
  font-size: var(--fs-cap);
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-top: 0.8rem;
}
.chapter--sumi .cap, .chapter--sumi .cap-vert { color: var(--sumi-ink-dim); }

/* 写真上に載せる白抜き縦書きコピー */
.overlay-vert {
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mincho);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
  z-index: 3;
}

/* ---------- モーション：動くのは見出しと写真だけ。8px の沈み込みからの静止 ---------- */
[data-settle] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-settle) var(--ease-settle),
              transform var(--dur-settle) var(--ease-settle);
  will-change: opacity, transform;
}
[data-settle].is-in { opacity: 1; transform: none; }
[data-settle="media"] { transform: translateY(14px) scale(1.008); }
@media (prefers-reduced-motion: reduce) {
  [data-settle] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================================================
   HEADER ── 最小限のナビ
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 2.4rem);
  transition: background-color .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background-color: rgba(242, 241, 235, 0.9);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--rule-soft);
}
.site-header__brand { display: flex; align-items: center; gap: .5rem; transition: opacity .4s ease; }
.site-header__brand img { height: 44px; width: auto; mix-blend-mode: multiply; transition: height .4s ease; }
.site-header.is-scrolled .site-header__brand img { height: 36px; }
/* Hero上では大きなエンブレムを主役に。ヘッダーのロゴはスクロール後に現れる */
.site-header:not(.is-scrolled) .site-header__brand { opacity: 0; pointer-events: none; }
.site-header.is-scrolled .site-header__brand img { filter: none; }
/* 墨地のHeroに重なる間は白抜きにして視認性を確保 */
.site-header:not(.is-scrolled) .site-header__brand img { filter: brightness(0) invert(1); mix-blend-mode: normal; }
.site-nav { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.8rem); }
.site-nav a {
  font-family: var(--font-latin);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; color: var(--sumi); opacity: .82;
  transition: opacity .25s, color .25s;
}
.site-nav a:hover { opacity: 1; color: var(--shu); }
.site-nav .site-nav__cta {
  padding: .5rem 1.1rem;
  background: var(--sumi); color: var(--paper);
  letter-spacing: 0.12em; opacity: 1;
}
.site-nav .site-nav__cta:hover { background: var(--shu); color: #fff; }
.site-header:not(.is-scrolled) .site-nav__link { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.4); opacity: .95; }
.nav-toggle { display: none; }

/* ============================================================
   STICKY CTA ── スクロール追従（Hero通過後に出現・購入到達で退場）
   ============================================================ */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 55;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--shu);
  color: #fff;
  transform: translateY(110%);
  transition: transform .5s var(--ease-settle);
  border-top: 1px solid rgba(0,0,0,.15);
}
.sticky-cta.is-shown { transform: none; }
.sticky-cta__text { font-family: var(--font-mincho); font-weight: 700; letter-spacing: .06em; font-size: 1rem; }
.sticky-cta__text small { display: block; font-family: var(--font-sans); font-weight: 400; font-size: .68rem; letter-spacing: .08em; opacity: .85; }
.sticky-cta__btn {
  padding: .6rem 1.4rem; background: #fff; color: var(--shu);
  font-family: var(--font-sans); font-weight: 700; font-size: .9rem; letter-spacing: .05em;
  text-decoration: none; white-space: nowrap; border: 1px solid rgba(255,255,255,.6);
}
.sticky-cta__btn:hover { background: var(--sumi); color: #fff; }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ============================================================
   共通 CTA ボタン
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1rem 2.1rem;
  font-family: var(--font-sans); font-weight: 700; font-size: 1rem; letter-spacing: .05em;
  text-decoration: none;
  border: 1px solid var(--sumi);
  background: var(--sumi); color: var(--paper);
  transition: background .3s, color .3s, transform .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn--shu { background: var(--shu); border-color: var(--shu); color: #fff; }
.btn--shu:hover { background: var(--shu-deep); border-color: var(--shu-deep); }
.btn--ghost { background: transparent; color: var(--sumi); }
.chapter--sumi .btn--ghost { color: var(--sumi-ink); border-color: var(--sumi-ink); }
.btn--ghost:hover { background: var(--sumi); color: var(--paper); }
.btn__arrow { transition: transform .3s; }
.btn:hover .btn__arrow { transform: translateX(4px); }
.textlink {
  font-family: var(--font-sans); font-size: .95rem; letter-spacing: .04em;
  color: var(--sumi); text-decoration: none; border-bottom: 1px solid var(--rule);
  padding-bottom: 2px; transition: color .3s, border-color .3s;
}
.chapter--sumi .textlink { color: var(--sumi-ink); border-bottom-color: var(--rule-on-dark); }
.textlink:hover { color: var(--shu); border-color: var(--shu); }

/* ============================================================
   CHAPTER 0 ── HERO（コールドオープン）
   写真全面＋縦書きコピーを左へ寄せる（中央配置しない）
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: stretch;
  color: #fff;
  padding: 0;
}
.hero__photo { position: absolute; inset: 0; z-index: 0; background: #171613; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12,10,8,.72) 0%, rgba(12,10,8,.38) 42%, rgba(12,10,8,.12) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--page-max); margin-inline: auto;
  padding: 7rem var(--gutter) 3.5rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hero__headline {
  /* 縦組みだと3行目が画面に収まらないため横組みに。
     site-story の他の大見出しと同じ組み方になり、統一もとれる。 */
  writing-mode: horizontal-tb;
  font-family: var(--font-mincho); font-weight: 900;
  font-size: clamp(1.9rem, 4.2vw, 3.5rem); line-height: 1.5; letter-spacing: 0.06em;
  color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,.45);
  margin: 0;
}
.hero__line{ display:block; white-space:nowrap; }
.hero__aside { align-self: end; padding-bottom: .5rem; max-width: 30rem; }
.hero__eyebrow { color: #f4d9b0; letter-spacing: .28em; }
.hero__sub {
  font-family: var(--font-mincho); font-weight: 500;
  font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.9;
  margin: 1.2rem 0 2rem; color: #f3efe6; text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
/* Hero に米吉エンブレムを白抜きで大きく（写真に直接・白枠なし・視認性優先） */
.hero__emblem {
  width: clamp(140px, 15vw, 205px); height: auto; display: block;
  filter: brightness(0) invert(1) drop-shadow(0 6px 30px rgba(0,0,0,.6));
  margin-bottom: 1.1rem;
}
/* ブランドの合言葉（エンブレム直下のタグライン） */
.hero__tagline {
  font-family: var(--font-mincho); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: .16em;
  color: #fff; margin-bottom: 1.7rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  /* 折り返し位置をブラウザ任せにしない（Safari で崩れるため） */
  word-break: keep-all; line-break: strict;
}
.hero__tagline-line{ display: block; white-space: nowrap; }
.hero__tagline-brand { font-weight: 900; letter-spacing: .1em; }
/* Produced by クレジット */
.hero__credit { display: flex; align-items: center; gap: .6rem; margin-top: 2rem; }
.hero__credit span { font-family: var(--font-latin); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: #d8d2c6; }
.hero__credit img { height: 20px; width: auto; opacity: .9; }
.hero__cta-row { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
/* 権威性チップ（細罫で仕切った小テキスト。バッジ乱用はしない） */
.authority {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
  padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.32);
  font-family: var(--font-sans); font-size: .74rem; letter-spacing: .04em; color: #ece7dc;
}
.authority span { white-space: nowrap; }
.authority .sep { opacity: .5; }
.hero__scroll {
  position: absolute; left: var(--gutter); bottom: 1.4rem; z-index: 3;
  font-family: var(--font-sans); font-size: .8rem; letter-spacing: .12em; color: #f3efe6;
  text-decoration: none; opacity: .9; display: inline-flex; align-items: center; gap: .5rem;
}
.hero__scroll .arrow-down { animation: bob 2.4s var(--ease-settle) infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
@media (prefers-reduced-motion: reduce){ .hero__scroll .arrow-down{ animation:none; } }

/* ============================================================
   CHAPTER 1 ── 気づき（墨地・白抜き明朝）
   本文を右1/2に、左半分は余白＋縦書き引用のみ
   ============================================================ */
.awake { }
.awake__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.awake__left { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2rem, 5vw, 3rem); }
.awake__quote {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-mincho); font-weight: 700;
  /* 縦組みは1列が長くなると Safari で列が増えて改行位置が変わるため、
     収まるサイズに抑え、禁則を明示する。 */
  font-size: clamp(1.05rem, 1.9vw, 1.5rem); line-height: 1.9; letter-spacing: .08em;
  color: var(--sumi-ink);
  /* 縦組みは「列」で折り返して読ませる組み方。高さを絞りすぎると
     1列に押し込められて溢れるため、十分な高さを与える。
     禁則(keep-all)は列送りを妨げるのでここでは使わない。 */
  max-height: min(64vh, 560px);
  word-break: normal; line-break: strict;
}
.awake__photo { aspect-ratio: 1/1; align-self: stretch; }
.awake__quote .qmark { color: var(--shu); font-size: 1.6em; }
.awake__right { padding-top: 2vh; }
.awake__h2 { font-size: var(--fs-h2); margin-bottom: 1.8rem; }
.awake__body { max-width: 46ch; font-size: 1.075rem; }
.awake__body p + p { margin-top: 1.5em; }

/* ============================================================
   CHAPTER 2 ── 誓い（生成り地・1画面に巨大ステートメント1つ）
   中央でなくやや左下、右上に大きな余白
   ============================================================ */
.vow__inner {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center;
  min-height: min(52vh, 460px);
  text-align: center;
}
.vow__photo { aspect-ratio: 4/5; }
.vow__statement {
  font-family: var(--font-mincho); font-weight: 900;
  /* 写真を外し、コピー一点で見せるので思い切り大きく */
  font-size: clamp(1.9rem, 5.4vw, 4.2rem);
  line-height: 1.62; letter-spacing: .05em;
  color: var(--sumi);
  max-width: none; margin: 0;
}
.vow__line { display: block; white-space: nowrap; }
@media (max-width: 720px){
  .vow__statement { font-size: clamp(1.35rem, 6.4vw, 2.2rem); }
  .vow__line { white-space: normal; }
}
.vow__statement em { font-style: normal; color: var(--shu); }
.vow__tag {
  font-family: var(--font-mincho); font-size: .95rem; line-height: 1.9; color: var(--text-dim);
  letter-spacing: .06em; margin-top: 1.6rem;
}

/* ============================================================
   CHAPTER 3 ── 決意（Origin・物語の熱源）
   写真を画面端まで裁ち落とし、テキストを写真に少し重ねる
   ============================================================ */
.origin { padding-bottom: calc(var(--sect-pad) + 2rem); }
.origin__head { position: relative; z-index: 2; max-width: 42ch; margin-bottom: clamp(2rem,6vw,4rem); }
.origin__h2 { font-size: var(--fs-h2); margin: 1rem 0 1.4rem; }
.origin__stage {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: 0;
}
/* 写真を左端まで裁ち落とし */
.origin__photo {
  position: relative; z-index: 1;
  margin-left: calc(-1 * var(--gutter));
  aspect-ratio: 4/5;
}
.origin__photo .cap-vert { top: 1rem; right: -1.6rem; }
/* テキストを写真に重ねる（負のマージン） */
.origin__text {
  position: relative; z-index: 3;
  margin-left: -8%;
  background: var(--paper);
  background-image: var(--washi);
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid var(--rule-soft);
  max-width: 46ch;
}
.origin__text p + p { margin-top: 1.3em; }
.origin__text .lead-in { font-family: var(--font-mincho); font-weight:700; font-size: 1.2rem; color: var(--sumi); line-height:1.7; }

/* アイガモロボ サブブロック */
.aigamo { margin-top: clamp(3.5rem, 8vw, 6rem); position: relative; z-index: 2; }
.aigamo__label { margin-bottom: 1.4rem; }
.aigamo__title { font-family: var(--font-mincho); font-weight:700; font-size: var(--fs-h3); color: var(--sumi); margin-bottom: 1.6rem; letter-spacing: .06em; }
.aigamo__video {
  position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid var(--rule);
  margin-bottom: 2rem;
}
.aigamo__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 3ステップ図解（横並びカードにしない：番号を大きく、罫で区切る） */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.step { padding: 1.6rem 1.4rem 1.8rem; border-right: 1px solid var(--rule-soft); }
.step:last-child { border-right: 0; }
.step__n { font-family: var(--font-latin); font-weight: 300; font-size: 2.4rem; color: var(--shu); line-height: 1; }
.step__t { font-family: var(--font-mincho); font-weight: 700; font-size: 1.05rem; color: var(--sumi); margin: .7rem 0 .5rem; }
.step__d { font-size: .92rem; line-height: 1.8; color: var(--text); }
.aigamo__points { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.6rem 0 1.2rem; }
.aigamo__points li { list-style: none; font-size: .92rem; letter-spacing: .03em; color: var(--text); }
.aigamo__points li::before { content: "―"; color: var(--shu); margin-right: .5em; }
.origin__foreshadow {
  margin-top: clamp(3rem, 7vw, 5rem);
  font-family: var(--font-mincho); font-size: 1.05rem; line-height: 2; color: var(--text-dim);
  max-width: 52ch; padding-left: 1.4rem; border-left: 2px solid var(--shu);
}

/* ============================================================
   CHAPTER 4 ── つくりかた（縦ジグザグ・左右交互）
   ============================================================ */
.grow__head { max-width: 48ch; margin-bottom: clamp(2.5rem, 7vw, 5rem); position: relative; z-index: 1; }
.grow__h2 { font-size: var(--fs-h2); margin: 1rem 0 1.4rem; }
.zig { display: flex; flex-direction: column; gap: clamp(2.4rem, 5vw, 3.6rem); position: relative; z-index: 1; }
.zig__item {
  display: grid; grid-template-columns: minmax(240px, 48%) 1fr; align-items: center;
  gap: clamp(1.6rem, 4vw, 3.2rem);
}
.zig__item:nth-child(even) { direction: rtl; }
.zig__item:nth-child(even) > * { direction: ltr; }
.zig__media { aspect-ratio: 4/3; }
.zig__text { max-width: 46ch; }
.zig__n { font-family: var(--font-latin); font-weight: 300; font-size: 2.3rem; line-height: 1; color: var(--shu-on-dark); display: block; margin-bottom: .35rem; }
.zig__t { font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-h3); margin-bottom: .7rem; letter-spacing: .04em; }
.zig__d { font-size: 1rem; line-height: 1.9; }
.zig__note { margin-top: .7rem; font-size: .78rem; line-height: 1.7; letter-spacing: .01em; }
/* 写真を持たない中央の一項目（画像→メッセージ→画像 のリズムをつくる） */
.zig__item--text, .zig__item--text:nth-child(even) {
  grid-template-columns: 1fr; direction: ltr; text-align: center;
  max-width: 60ch; margin-inline: auto;
  padding: clamp(1.4rem, 3.5vw, 2.4rem) 0;
  border-top: 1px solid var(--rule-on-dark-soft);
  border-bottom: 1px solid var(--rule-on-dark-soft);
}
.zig__item--text .zig__n { margin-inline: auto; }
.zig__item--text .zig__text { max-width: none; }
.zig__item--text .zig__d { max-width: 50ch; margin-inline: auto; }
/* 墨地の章なので文字は生成りで（以前ダーク文字で見えづらかった箇所を修正） */
.chapter--sumi .zig__t    { color: var(--sumi-ink); }
.chapter--sumi .zig__d    { color: var(--sumi-ink); }
.chapter--sumi .zig__note { color: var(--sumi-ink-dim); }
.grow__photo { margin-top: clamp(3rem, 7vw, 5rem); }
.grow__photo .cap { text-align: right; }

/* ============================================================
   CHAPTER 5 ── 仲間（Growers・1人ずつ写真左右反転）
   ============================================================ */
.mates__head { max-width: 50ch; margin-bottom: clamp(2.5rem, 7vw, 5rem); position: relative; z-index: 1; }
.mates__h2 { font-size: var(--fs-h2); margin: 1rem 0 1.4rem; }
.grower { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(3.5rem, 8vw, 6rem); }
.grower--flip { direction: rtl; }
.grower--flip > * { direction: ltr; }
.grower__photo { aspect-ratio: 1/1; position: relative; }
.grower__photo .cap-vert { top: 1rem; }
.grower--flip .grower__photo .cap-vert { right: auto; left: -1.5rem; }
.grower:not(.grower--flip) .grower__photo .cap-vert { right: -1.5rem; }
.grower__meta { font-family: var(--font-latin); font-size: var(--fs-cap); letter-spacing: .2em; color: var(--shu); }
.grower__name { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.5rem,3vw,2.1rem); color: var(--sumi); margin: .6rem 0 .3rem; letter-spacing: .04em; }
.grower__name small { font-family: var(--font-latin); font-weight: 400; font-size: .8rem; letter-spacing: .16em; color: var(--text-dim); margin-left: .6rem; }
.grower__role { font-size: .85rem; color: var(--text-dim); letter-spacing: .04em; margin-bottom: 1.4rem; }
.grower__pull {
  font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.7; color: var(--sumi); letter-spacing: .04em;
  padding-left: 1.2rem; border-left: 3px solid var(--shu); margin-bottom: 1.6rem;
}
/* コメント全文を引用として見せる（Q&A形式ではない場合） */
.grower__pull--comment {
  font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 500; line-height: 1.95;
  max-width: 60ch; margin-bottom: .6rem;
}
.grower__pull--comment p + p { margin-top: .9rem; }
.grower__detail { border-top: 1px solid var(--rule-soft); }
.grower__detail summary {
  list-style: none; cursor: pointer; padding: 1rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-sans); font-weight: 500; font-size: .92rem; letter-spacing: .06em; color: var(--sumi);
}
.grower__detail summary::-webkit-details-marker { display: none; }
.grower__detail summary .plus { position: relative; width: 14px; height: 14px; flex: none; }
.grower__detail summary .plus::before,
.grower__detail summary .plus::after { content:""; position:absolute; background: var(--shu); transition: transform .3s; }
.grower__detail summary .plus::before { inset: 6px 0; height: 2px; }
.grower__detail summary .plus::after  { inset: 0 6px; width: 2px; }
.grower__detail[open] summary .plus::after { transform: scaleY(0); }
.grower__qa { padding: .4rem 0 1.6rem; max-width: 60ch; }
.grower__qa .q { font-family: var(--font-mincho); font-weight: 700; color: var(--sumi); margin-top: 1.4rem; font-size: .98rem; }
.grower__qa .q:first-child { margin-top: .4rem; }
.grower__qa .a { font-size: .95rem; line-height: 1.95; color: var(--text); margin-top: .5rem; }

/* ============================================================
   CHAPTER 6 ── プロの目（Pro's Voice・生産者と同じカード体裁）
   ============================================================ */
.pro__leadin { font-size: 1rem; line-height: 1.95; color: var(--text); max-width: 52ch; margin-bottom: 1.6rem; }
.pro__leadin q { quotes: "「" "」"; color: var(--shu); font-family: var(--font-mincho); font-weight: 700; }
.pro__article {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-weight: 700; font-size: .92rem; letter-spacing: .06em;
  color: var(--sumi); text-decoration: none;
  border-bottom: 1px solid var(--shu); padding-bottom: 5px;
  transition: color .3s, gap .3s;
}
.pro__article:hover { color: var(--shu); gap: .85rem; }
.pro__article .btn__arrow { transition: transform .3s; }
.pro__article:hover .btn__arrow { transform: translateX(4px); }

/* ============================================================
   CHAPTER 7 ── 証明（Proof・整然としたレポート組み・温度を下げる）
   物語パートと質感差をつける
   ============================================================ */
.proof { }
.proof__head { max-width: 60ch; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.proof__h2 { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.5rem,2.8vw,2.1rem); color: var(--sumi); margin: 1rem 0 1.3rem; line-height: 1.55; letter-spacing: .04em; }
.proof__lead { font-size: 1.05rem; line-height: 1.9; color: var(--text); max-width: 48ch; }
.proof__source { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .04em; color: var(--text-dim); margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.proof__spread { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pentagon { position: relative; }
.pentagon svg { width: 100%; height: auto; overflow: visible; }
.pentagon__poly { fill: rgba(190,58,43,.10); stroke: var(--shu); stroke-width: 2; }
.pentagon__axis { stroke: var(--rule); stroke-width: 1; }
.pentagon__ring { fill: none; stroke: var(--rule-soft); stroke-width: 1; }
.pentagon__label { font-family: var(--font-sans); font-size: 13px; fill: var(--sumi); }
.pentagon__dot { fill: var(--shu); }
.proof-legend { list-style: none; display: grid; gap: 0; }
.proof-legend li { padding: 1.1rem 0; border-bottom: 1px solid var(--rule-soft); display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .4rem 1rem; }
.proof-legend li:first-child { border-top: 1px solid var(--rule); }
.legend-label { font-family: var(--font-mincho); font-weight: 700; font-size: 1.05rem; letter-spacing: .16em; color: var(--sumi); }
.legend-value { font-family: var(--font-latin); font-weight: 400; font-size: 2rem; color: var(--sumi); line-height: 1; text-align: right; }
.legend-value .unit { font-size: .9rem; color: var(--text-dim); margin-left: .2rem; }
.legend-tag { grid-column: 1 / -1; font-size: .78rem; color: var(--text-dim); letter-spacing: .02em; }
.proof-legend li.is-accent .legend-value { color: var(--shu); }
.proof-legend li.is-accent .legend-tag { color: var(--shu); }
.proof__note { font-size: .72rem; line-height: 1.85; color: var(--text-dim); margin-top: 2rem; max-width: 82ch; letter-spacing: .01em; }

/* ============================================================
   CHAPTER 8 ── 安心（Safety・引き続き低温のレポート組み）
   ============================================================ */
.safety { }
.safety__head { max-width: 62ch; margin-bottom: clamp(2rem,5vw,3.5rem); }
.safety__h2 { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.5rem,2.8vw,2.1rem); color: var(--sumi); margin: 1rem 0 1.3rem; line-height:1.55; letter-spacing:.04em; }
.safety__lead { font-size: 1.05rem; line-height:1.9; color: var(--text); max-width: 50ch; }
.safety__source { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .04em; color: var(--text-dim); margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
/* ヒーロー数字 */
.safety__hero {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(1.5rem,4vw,3rem);
  padding: clamp(1.8rem,4vw,2.8rem) 0; margin: 2.5rem 0;
  border-top: 2px solid var(--sumi); border-bottom: 2px solid var(--sumi);
}
.safety__bignum { font-family: var(--font-latin); font-weight: 300; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .95; color: var(--sumi); }
.safety__bignum .items { display:block; font-size: .2em; letter-spacing: .2em; color: var(--text-dim); margin-bottom: .4rem; font-family: var(--font-sans); }
.safety__result { }
.safety__result .arrow-to { font-family: var(--font-mincho); font-size: 1rem; color: var(--text-dim); letter-spacing: .1em; }
.safety__result .none { font-family: var(--font-mincho); font-weight: 900; font-size: clamp(1.6rem,3.4vw,2.4rem); color: var(--shu); letter-spacing: .06em; display: block; margin-top: .3rem; }
.safety__result .limit { font-size: .8rem; color: var(--text-dim); margin-top: .6rem; }
.safety__note-detected { font-size: .92rem; line-height: 1.9; color: var(--text); max-width: 60ch; margin-bottom: 2.5rem; }
/* 3データ枠（角丸カードにしない：罫のみで区切る） */
.nutri { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.nutri__col { padding: 1.6rem 1.4rem 1.8rem; border-right: 1px solid var(--rule-soft); }
.nutri__col:last-child { border-right: 0; }
.nutri__cap { font-family: var(--font-latin); font-size: var(--fs-cap); letter-spacing: .16em; color: var(--shu); margin-bottom: .3rem; }
.nutri__title { font-family: var(--font-mincho); font-weight: 700; font-size: 1.05rem; color: var(--sumi); margin-bottom: 1rem; letter-spacing: .04em; }
.nutri__list { list-style: none; }
.nutri__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dotted var(--rule-soft); font-size: .88rem; }
.nutri__list li span:last-child { font-family: var(--font-latin); color: var(--sumi); }
.nutri__unit { font-size: .72rem; color: var(--text-dim); margin-top: .8rem; }
.safety__pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.4rem; padding: 1.4rem 0; border-top: 1px solid var(--rule); }
.safety__pdf .note { font-size: .82rem; color: var(--text-dim); }
.safety__note { font-size: .72rem; line-height: 1.85; color: var(--text-dim); margin-top: 2rem; max-width: 88ch; letter-spacing: .01em; }

/* ============================================================
   CHAPTER 9 ── 約束（Philosophy・墨地フル・クライマックス）
   縦書き主体、署名は右下
   ============================================================ */
.promise { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.promise__inner { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 5rem); width: 100%; position: relative; z-index: 1; }
.promise__h2 {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-mincho); font-weight: 900; font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.22; letter-spacing: .08em; color: var(--sumi-ink); margin: 0;
  max-height: 74vh;
}
.promise__body { max-width: 52ch; align-self: center; }
.promise__body .promise__tag { font-family: var(--font-mincho); color: var(--shu-on-dark); font-size: 1.05rem; letter-spacing: .06em; margin-bottom: 2rem; }
.promise__body p { color: var(--sumi-ink); line-height: 2.05; }
.promise__body p + p { margin-top: 1.3em; }
.promise__body .beat { color: var(--sumi-ink-dim); font-family: var(--font-mincho); font-size: 1.3rem; margin: 1.6em 0; }
/* このページ唯一の言い切り */
.promise__declare {
  font-family: var(--font-mincho); font-weight: 900;
  font-size: clamp(1.45rem, 2.9vw, 2.1rem); line-height: 1.6; letter-spacing: .04em;
  color: #fff; margin: 1em 0 !important;
}
.promise__declare .under { border-bottom: 3px solid var(--shu); padding-bottom: .1em; }
.promise__sign { margin-top: 2.6rem; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.promise__sign .name { font-family: var(--font-hand); font-weight: 600; font-size: 1.15rem; color: var(--sumi-ink); text-align: right; }
.promise__sign img { height: 30px; width: auto; opacity: .95; }
.promise__photo { aspect-ratio: 16/10; max-width: 760px; margin: clamp(2.5rem, 6vw, 4rem) auto 0; }
.promise__next { text-align: center; margin-top: clamp(3rem,7vw,5rem); position: relative; z-index: 1; }
.promise__next a { font-family: var(--font-mincho); font-size: 1.15rem; color: var(--sumi-ink); letter-spacing: .08em; text-decoration: none; }
.promise__next a:hover { color: var(--shu-on-dark); }

/* ============================================================
   CHAPTER 10 ── 購入（Lineup / Shop）
   ============================================================ */
.shop__head { text-align: left; max-width: 54ch; margin-bottom: clamp(2rem,5vw,3.5rem); }
.shop__h2 { font-size: var(--fs-h2); margin: 1rem 0 1.2rem; }
/* お試しバナー（最重要CV・朱で軽く立てる） */
.trial {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem;
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.6rem, 4vw, 2.6rem);
  background: var(--shu); color: #fff;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.trial__eyebrow { color: #ffe1d6; font-family: var(--font-latin); letter-spacing: .24em; font-size: var(--fs-cap); }
.trial__title { font-family: var(--font-mincho); font-weight: 900; font-size: clamp(1.5rem,3.4vw,2.3rem); line-height: 1.4; margin: .6rem 0; letter-spacing: .04em; }
.trial__sub { font-size: .95rem; opacity: .95; }
.trial__cta { display:flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.trial__note { font-size: .72rem; opacity: .9; text-align: right; }
.btn--onshu { background: #fff; color: var(--shu); border-color: #fff; }
.btn--onshu:hover { background: var(--sumi); color: #fff; border-color: var(--sumi); }
/* ラインナップ（商品写真1点＋内容量を「文字だけ」で選ぶ・面と罫線で組む） */
.lineup { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; position: relative; z-index: 1; border: 1px solid var(--rule); }
.lineup__photo { aspect-ratio: auto; background: var(--paper); border-right: 1px solid var(--rule-soft); }
.lineup__photo img { width: 100%; height: 100%; object-fit: contain; padding: clamp(1.2rem, 3vw, 2.2rem); }
.lineup__panel { padding: clamp(1.8rem, 4vw, 2.8rem); display: flex; flex-direction: column; justify-content: center; }
.lineup__label { font-family: var(--font-latin); font-size: var(--fs-cap); letter-spacing: .18em; color: var(--shu); margin-bottom: .9rem; }
.lineup__tabs { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--rule); margin-bottom: 1.7rem; }
/* 精米・玄米の種別タブ（内容量タブの上に置く2択） */
.lineup__tabs--type { grid-template-columns: repeat(2,1fr); margin-bottom: 1.4rem; }
.lineup__tab {
  appearance: none; background: transparent; border: 0; border-right: 1px solid var(--rule-soft);
  padding: .95rem .5rem; font-family: var(--font-mincho); font-weight: 700; font-size: 1.05rem;
  color: var(--text-dim); letter-spacing: .06em; cursor: pointer;
  transition: color .3s var(--ease-settle), background-color .3s var(--ease-settle);
}
.lineup__tab:last-child { border-right: 0; }
.lineup__tab:hover { color: var(--sumi); }
.lineup__tab.is-active { color: var(--sumi); box-shadow: inset 0 -2px 0 var(--shu); }
.lineup__tab:focus-visible { outline: 2px solid var(--shu); outline-offset: -2px; }
.lineup__flag { font-family: var(--font-sans); font-weight: 700; font-size: .72rem; letter-spacing: .12em; color: var(--shu); min-height: 1.1em; }
.lineup__name { font-family: var(--font-mincho); font-weight: 700; font-size: 1.35rem; color: var(--sumi); letter-spacing: .04em; margin-top: .2rem; }
.lineup__price { font-family: var(--font-latin); font-size: clamp(1.5rem, 3vw, 1.75rem); color: var(--sumi); margin: .35rem 0 .1rem; transition: opacity .3s; }
.lineup__price .tax { font-size: .72rem; color: var(--text-dim); font-family: var(--font-sans); margin-left: .35rem; }
.lineup__price.is-tbd { font-family: var(--font-mincho); font-size: 1.15rem; color: var(--text-dim); }
.lineup__desc { font-size: .9rem; line-height: 1.85; color: var(--text); margin: .8rem 0 1.1rem; min-height: 2.6em; }
.lineup__trust { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-bottom: 1.6rem; }
.lineup__trust li { font-size: .74rem; color: var(--text-dim); letter-spacing: .02em; }
.lineup__trust li::before { content: "—"; color: var(--shu); margin-right: .35em; }
.lineup__cta { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.lineup__cta .btn { justify-content: center; }
.lineup__sub { font-size: .82rem; letter-spacing: .03em; color: var(--sumi); text-decoration: none; border-bottom: 1px solid var(--rule-soft); padding-bottom: 2px; }
.lineup__sub:hover { color: var(--shu); border-color: var(--shu); }
/* ギフトモジュール（主CVを邪魔しない位置に静かに） */
.gift { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; margin-top: clamp(2rem,5vw,3rem); padding: 1.6rem 1.8rem; border: 1px solid var(--rule); background: var(--paper); position: relative; z-index: 1; }
.gift__mark { font-family: var(--font-latin); font-size: var(--fs-cap); letter-spacing: .18em; color: var(--shu); }
.gift__title { font-family: var(--font-mincho); font-weight: 700; font-size: 1.2rem; color: var(--sumi); margin: .5rem 0; letter-spacing: .04em; }
.gift__text { font-size: .88rem; line-height: 1.85; color: var(--text); max-width: 56ch; }
.shop__note { font-size: .76rem; color: var(--text-dim); margin-top: 2rem; letter-spacing: .02em; }

/* ============================================================
   CHAPTER 11 ── FAQ & Shipping
   ============================================================ */
.faq__head { max-width: 46ch; margin-bottom: clamp(2rem,5vw,3rem); }
.faq__h2 { font-size: var(--fs-h2); margin-top: 1rem; }
.faq__list { border-top: 1px solid var(--rule); max-width: 74ch; position: relative; z-index: 1; }
.faq__item { border-bottom: 1px solid var(--rule-soft); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 0; font-family: var(--font-mincho); font-weight: 700; font-size: 1.05rem; color: var(--sumi); letter-spacing: .04em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item .plus { position: relative; width: 15px; height: 15px; flex: none; }
.faq__item .plus::before, .faq__item .plus::after { content:""; position:absolute; background: var(--shu); transition: transform .3s; }
.faq__item .plus::before { inset: 6.5px 0; height: 2px; }
.faq__item .plus::after { inset: 0 6.5px; width: 2px; }
.faq__item[open] .plus::after { transform: scaleY(0); }
.faq__a { padding: 0 0 1.4rem; font-size: .95rem; line-height: 1.95; color: var(--text); max-width: 66ch; }
/* 配送ストリップ4枠 */
/* セル数が変わっても崩れないよう、固定4列をやめて自動追従にする */
.ship-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); border: 1px solid var(--rule); margin-top: clamp(2.5rem,6vw,4rem); position: relative; z-index: 1; }
.ship-strip__col { padding: 1.4rem 1.2rem; border-right: 1px solid var(--rule-soft); }
.ship-strip__col:last-child { border-right: 0; }
.ship-strip__t { font-family: var(--font-mincho); font-weight: 700; font-size: 1rem; color: var(--sumi); margin-bottom: .4rem; letter-spacing: .03em; }
.ship-strip__d { font-size: .8rem; line-height: 1.75; color: var(--text-dim); }

/* ============================================================
   CHAPTER 12 ── About & Footer
   ============================================================ */
.about { }
.about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.5rem,4vw,3rem); max-width: 90ch; }
.about__block dt { font-family: var(--font-latin); font-size: var(--fs-cap); letter-spacing: .18em; color: var(--shu); margin-bottom: .6rem; }
.about__block dd { font-size: .92rem; line-height: 1.9; color: var(--text); }
.about__block dd a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }

.site-footer { background: var(--sumi); background-image: var(--washi-dark); color: var(--sumi-ink); padding: clamp(4rem, 9vw, 7rem) var(--gutter) 3rem; }
.site-footer__inner { max-width: var(--page-max); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: start; }
.site-footer__brand-emblem { height: 70px; width: auto; margin-bottom: 1.4rem; filter: brightness(0) invert(1); }
.site-footer__latin { font-family: var(--font-latin); letter-spacing: .3em; font-size: .7rem; color: var(--sumi-ink-dim); text-transform: uppercase; }
.site-footer__tag { font-family: var(--font-mincho); font-size: 1.15rem; color: var(--sumi-ink); margin: 1rem 0 2rem; letter-spacing: .06em; }
.site-footer__credit { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.site-footer__credit .produced { font-family: var(--font-latin); font-size: .62rem; letter-spacing: .2em; color: var(--sumi-ink-dim); text-transform: uppercase; }
.site-footer__credit img { height: 30px; width: auto; }
.site-footer__company { font-size: .82rem; color: var(--sumi-ink-dim); line-height: 1.9; }
.site-footer__nav { display: flex; flex-direction: column; gap: .7rem; text-align: right; }
.site-footer__nav a { font-family: var(--font-sans); font-size: .82rem; letter-spacing: .06em; color: var(--sumi-ink); text-decoration: none; opacity: .85; }
.site-footer__nav a:hover { color: var(--shu-on-dark); opacity: 1; }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding-top: 1.6rem; margin-top: 1rem; border-top: 1px solid var(--rule-on-dark-soft); }
.site-footer__legal a { font-size: .76rem; color: var(--sumi-ink-dim); text-decoration: none; letter-spacing: .04em; }
.site-footer__legal a:hover { color: var(--shu-on-dark); }
.site-footer__copy { grid-column: 1 / -1; font-family: var(--font-latin); font-size: .68rem; letter-spacing: .1em; color: var(--sumi-ink-dim); margin-top: .8rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .site-nav__link { display: none; }
  .hero__inner { grid-template-columns: 1fr; align-items: end; padding-top: 5.5rem; }
  .hero__headline { max-height: 50vh; font-size: clamp(2.2rem, 7vw, 3.6rem); }
  .awake__grid { grid-template-columns: 1fr; }
  .awake__left { min-height: auto; margin-bottom: 2rem; }
  .awake__quote { position: static; writing-mode: horizontal-tb; max-height: none; text-align: left; font-size: clamp(1.4rem,6vw,2rem); }
  .vow__inner { grid-template-columns: 1fr; }
  .vow__photo { aspect-ratio: 16/11; }
  .origin__stage { grid-template-columns: 1fr; }
  .origin__photo { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); aspect-ratio: 16/10; }
  .origin__photo .cap-vert { right: .6rem; }
  .origin__text { margin-left: 0; margin-top: -2.5rem; margin-right: 1.5rem; }
  .steps, .nutri { grid-template-columns: 1fr; }
  .step, .nutri__col { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .step:last-child, .nutri__col:last-child { border-bottom: 0; }
  .grower, .grower--flip { grid-template-columns: 1fr; direction: ltr; }
  .grower__photo { aspect-ratio: 4/3; }
  .grower__photo .cap-vert { right: .6rem !important; left: auto !important; }
  .pro__link { grid-template-columns: 1fr; }
  .pro__photo { aspect-ratio: 16/10; }
  .proof__spread { grid-template-columns: 1fr; }
  .safety__hero { grid-template-columns: 1fr; }
  .lineup { grid-template-columns: 1fr; }
  .lineup__photo { aspect-ratio: 1/1; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .lineup__panel { padding: clamp(1.6rem,5vw,2.2rem); }
  .trial { grid-template-columns: 1fr; }
  .trial__cta { align-items: flex-start; }
  .trial__note { text-align: left; }
  .gift { grid-template-columns: 1fr; }
  .ship-strip { grid-template-columns: 1fr 1fr; }
  .promise__inner { grid-template-columns: 1fr; }
  .promise__h2 { writing-mode: horizontal-tb; max-height: none; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__nav { text-align: left; }
  .sticky-cta__text small { display: none; }
}
@media (max-width: 620px) {
  .zig__item, .zig__item:nth-child(even) { direction: ltr; grid-template-columns: 1fr; gap: 1.1rem; }
  .zig__media { aspect-ratio: 16/10; }
}
@media (max-width: 560px) {
  .ship-strip { grid-template-columns: 1fr; }
  .ship-strip__col { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .ship-strip__col:last-child { border-bottom: 0; }
  .hero__logo-emblem { height: 72px; }
  .authority { font-size: .68rem; }
  .lineup__tab { font-size: .95rem; padding: .8rem .3rem; }
}

/* ============================================================
   OPENING / ATMOSPHERE ── 開幕エフェクトと全体の空気感
   ============================================================ */
/* 開幕の帳：生成りの幕がゆっくり上がり、Heroが立ち上がる */
.intro-veil {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); background-image: var(--washi);
  transition: opacity 1.5s var(--ease-settle), visibility 1.5s var(--ease-settle);
}
/* ① まずコピーが浮かんで、じっくり見せてから消える */
.intro-veil__copy {
  position: absolute;
  font-family: var(--font-mincho); font-weight: 700;
  font-size: clamp(1.4rem, 4.5vw, 2.7rem); letter-spacing: .14em; color: var(--sumi);
  opacity: 0;
  animation: introCopy 2.9s var(--ease-settle) forwards;
}
.intro-veil__copy-brand { font-weight: 900; }
@keyframes introCopy {
  0%   { opacity: 0; transform: translateY(9px); }
  14%  { opacity: 1; transform: none; }
  66%  { opacity: 1; transform: none; }
  88%  { opacity: 0; transform: translateY(-8px) scale(1.02); }
  100% { opacity: 0; }
}
/* ② 続いて米吉ロゴが大きく、ゆっくり立ち上がる（ぼけ→くっきり、わずかに拡大） */
.intro-veil__logo {
  position: absolute;
  width: min(62vw, 470px); height: auto; mix-blend-mode: multiply;
  opacity: 0; transform: scale(.895);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
  animation: introLogoIn 1.5s cubic-bezier(.33,.06,.28,1) .12s forwards;
}
@keyframes introLogoIn {
  0.0% { opacity: 0.000; transform: scale(0.8950); }
  10.0% { opacity: 0.028; transform: scale(0.9167); }
  20.0% { opacity: 0.104; transform: scale(0.9357); }
  30.0% { opacity: 0.216; transform: scale(0.9521); }
  40.0% { opacity: 0.352; transform: scale(0.9659); }
  50.0% { opacity: 0.500; transform: scale(0.9771); }
  60.0% { opacity: 0.648; transform: scale(0.9860); }
  70.0% { opacity: 0.784; transform: scale(0.9926); }
  80.0% { opacity: 0.896; transform: scale(0.9970); }
  90.0% { opacity: 0.972; transform: scale(0.9993); }
  100.0% { opacity: 1.000; transform: scale(1.0000); }
}
/* ③ ふわっと消えて Hero が現れる */
body.is-loaded .intro-veil { opacity: 0; visibility: hidden; }
body.is-loaded .intro-veil__copy { opacity: 0; }
body.is-loaded .intro-veil__logo {
  animation: none; opacity: 0; transform: scale(1.1) translateZ(0);
  transition: opacity 1.1s cubic-bezier(.33,.06,.28,1), transform 1.4s cubic-bezier(.33,.06,.28,1);
}

/* Hero の立ち上がり（写真は緩いケンバーンズ、文字はわずかに遅れて浮上） */
.hero__photo img { transform: scale(1.12); transition: transform 7s ease-out; will-change: transform; }
body.is-loaded .hero__photo img { transform: scale(1); }
.hero__headline { opacity: 0; transform: translateY(18px); }
.hero__aside    { opacity: 0; transform: translateY(14px); }
.hero__scroll   { opacity: 0; }
body.is-loaded .hero__headline { opacity: 1; transform: none; animation: none; }
/* 分割できなかった場合の保険：従来どおり行ごと立ち上げる */
body.is-loaded .hero__headline:not([data-split]) { animation: heroRise 1.3s var(--ease-settle) .15s forwards; }
body.is-loaded .hero__aside    { animation: heroRise 1.3s var(--ease-settle) .45s forwards; }
body.is-loaded .hero__scroll   { animation: heroRise 1s  var(--ease-settle) 1s   forwards; }
@keyframes heroRise { to { opacity: 1; transform: none; } }


/* 写真リビールをより雰囲気に（大きめの沈み込みからの静止） */
[data-settle="media"] { transform: translateY(16px) scale(1.04); }
[data-settle="media"].is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .intro-veil { display: none; }
  .hero__photo img { transform: none; transition: none; }
  .hero__headline, .hero__aside, .hero__scroll {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  [data-settle="stamp"] { transform: rotate(-4deg) !important; }
}

/* ============================================================
   蒸製骨粉 モーダル ＋ 本文中のトリガー
   ============================================================ */
.bone-link {
  appearance: none; background: none; border: 0; padding: 0 0 1px; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
  border-bottom: 1px solid var(--shu);
  transition: color .25s;
}
.bone-link:hover { color: var(--shu); }
.bone-link__plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.2em; height: 1.2em; margin-left: .35em; vertical-align: middle;
  border: 1px solid var(--shu); color: var(--shu); border-radius: 50%;
  font-family: var(--font-sans); font-size: .58em; line-height: 1;
}
.chapter--sumi .bone-link { border-bottom-color: var(--shu-on-dark); }
.chapter--sumi .bone-link:hover { color: var(--shu-on-dark); }
.chapter--sumi .bone-link__plus { border-color: var(--shu-on-dark); color: var(--shu-on-dark); }

.modal {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease-settle), visibility .4s var(--ease-settle);
}
.modal[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: auto; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20,18,15,.55); backdrop-filter: blur(3px); }
.modal__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  background: var(--paper); background-image: var(--washi);
  border: 1px solid var(--rule-soft);
  padding: clamp(1.9rem, 5vw, 3.2rem);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  transform: translateY(14px) scale(.98);
  transition: transform .45s var(--ease-settle);
  -webkit-overflow-scrolling: touch;
}
.modal[aria-hidden="false"] .modal__panel { transform: none; }
.modal__close {
  position: absolute; top: .8rem; right: 1rem;
  width: 2.2rem; height: 2.2rem; border: 0; background: none; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: var(--text-dim); transition: color .25s;
}
.modal__close:hover { color: var(--shu); }
.modal__mark { font-family: var(--font-latin); font-size: var(--fs-cap); letter-spacing: .16em; color: var(--shu); text-transform: uppercase; }
.modal__title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--sumi); margin: .6rem 0 1.4rem; letter-spacing: .04em; line-height: 1.5; }
.modal__lead { font-family: var(--font-mincho); font-size: 1.02rem; line-height: 1.95; color: var(--text); margin-bottom: 1.8rem; }
.modal__lead strong { color: var(--sumi); font-weight: 700; }
.modal__section { border-top: 1px solid var(--rule); padding-top: 1.6rem; }
.modal__section-title { font-family: var(--font-sans); font-weight: 700; font-size: .82rem; letter-spacing: .1em; color: var(--shu); margin-bottom: 1.3rem; }
.modal__list { list-style: none; display: grid; gap: 1.3rem; margin: 0; padding: 0; }
.modal__list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.modal__num { font-family: var(--font-latin); font-weight: 300; font-size: 1.7rem; line-height: 1; color: var(--shu); }
.modal__list div { font-size: .95rem; line-height: 1.85; color: var(--text); }
.modal__list div strong { color: var(--sumi); font-weight: 700; }
.modal__list div > strong:first-child { display: block; font-family: var(--font-mincho); margin-bottom: .25rem; }
.modal__supplier { margin-top: 2rem; padding: clamp(1.2rem,3vw,1.6rem); border: 1px solid var(--rule-soft); background: var(--paper-deep); }
.modal__supplier-name { font-family: var(--font-mincho); font-weight: 700; font-size: 1.2rem; color: var(--sumi); margin: .4rem 0 .6rem; }
.modal__supplier-desc { font-size: .9rem; line-height: 1.8; color: var(--text); margin-bottom: 1rem; }
.modal__supplier-desc strong { color: var(--sumi); }
.modal__supplier-link { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-sans); font-weight: 700; font-size: .88rem; letter-spacing: .04em; color: var(--sumi); text-decoration: none; border-bottom: 1px solid var(--shu); padding-bottom: 3px; }
.modal__supplier-link:hover { color: var(--shu); }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal__panel { transition: none; }
  .modal__panel { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   追補：プロの声（開閉）／玄米／送料一覧
   site-story の文法（生成り・細墨罫・朱の一点）に合わせる
   ═══════════════════════════════════════════════════════════ */

/* ── プロの声：インタビュー開閉 ── */
.pro__detail { margin-top: 1.4rem; border-top: 1px solid var(--rule-soft); }
.pro__detail > summary {
  list-style: none; cursor: pointer; padding: .9rem 0;
  display: inline-flex; align-items: center; gap: .6em;
}
.pro__detail > summary::-webkit-details-marker { display: none; }
.pro__detail-label {
  font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .08em; color: var(--shu);
  border-bottom: 1px solid var(--shu); padding-bottom: 2px;
}
.pro__detail > summary::after {
  content: "＋"; color: var(--shu); font-size: .9rem; transition: transform .3s;
}
.pro__detail[open] > summary::after { content: "－"; }
.pro__qa { padding-bottom: 1.2rem; }
.pro__q {
  font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-body);
  color: var(--sumi); margin: 1.3rem 0 .5rem;
}
.pro__a { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 .9rem; }
.pro__note { font-size: var(--fs-small); color: var(--text-dim); margin: 1rem 0 0; }

/* ── INTERLUDE：米吉の田んぼから（実際の圃場風景ギャラリー） ── */
.scenery { padding-block: clamp(3rem, 7vh, 5rem); }
.scenery__mark { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.scenery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); }
.scenery__cap {
  margin-top: .7rem; font-family: var(--font-mincho);
  font-size: var(--fs-small); color: var(--text-dim); letter-spacing: .08em;
}
.scenery__cap::before { content: "—"; color: var(--shu); margin-right: .5em; }
.scenery__item--lead { margin-bottom: clamp(1.2rem, 2.6vw, 2rem); }
@media (max-width: 720px) {
  .scenery__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .scenery__item .media--portrait { aspect-ratio: 4 / 3; }
}

/* ── お店の紹介カード（Pro's Voice・写真付き） ── */
.store-card {
  margin-top: 1.8rem;
  display: grid; grid-template-columns: 136px 1fr; gap: 1.4rem; align-items: center;
  border: 1px solid var(--rule); border-top: 2px solid var(--shu);
  background: var(--paper-deep); background-image: var(--washi);
  padding: 1.2rem 1.5rem;
}
.store-card > img { width: 136px; height: 136px; object-fit: cover; display: block; }
.store-card__label {
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-cap);
  letter-spacing: .14em; color: var(--shu); margin: 0;
}
.store-card__name {
  font-family: var(--font-mincho); font-weight: 700; font-size: 1.3rem;
  color: var(--sumi); letter-spacing: .06em; margin: .3rem 0 .6rem;
}
.store-card__dl { margin: 0; font-size: var(--fs-small); color: var(--text); line-height: 1.8; }
.store-card__dl > div { display: flex; gap: .9em; }
.store-card__dl dt { color: var(--text-dim); flex: none; min-width: 3.2em; }
.store-card__dl dd { margin: 0; }
.store-card__dl a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
.store-card__dl a:hover { color: var(--shu); border-color: var(--shu); }
/* 親カラム（.grower__body）が狭い間は縦積みにして、写真を大きく見せる */
@media (max-width: 1100px) {
  .store-card { grid-template-columns: 1fr; gap: 1rem; padding: 1.1rem 1.2rem; }
  .store-card > img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}

/* ── 玄米・精米 ── */
.genmai {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  padding: clamp(1.6rem,3.4vw,2.2rem);
  border: 1px solid var(--rule-soft); background: var(--paper-deep);
  margin: clamp(2rem,5vw,3rem) 0;
}
.genmai__mark {
  font-family: var(--font-latin); font-size: var(--fs-cap); letter-spacing: var(--ls-latin);
  color: var(--shu); margin: 0 0 .5rem;
}
.genmai__title {
  font-family: var(--font-mincho); font-weight: 900; font-size: var(--fs-h3);
  margin: 0 0 .5rem; letter-spacing: .04em;
}
.genmai__text { font-size: var(--fs-small); color: var(--text-dim); margin: 0; }
.genmai__row {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .55rem 0; border-bottom: 1px solid var(--rule-soft);
}
.genmai__label { font-family: var(--font-mincho); font-weight: 700; min-width: 3em; }
.genmai__unit { font-size: var(--fs-small); color: var(--text-dim); }
.genmai__price {
  font-family: var(--font-mincho); font-weight: 900; font-size: 1.3rem; color: var(--shu);
  margin-left: auto;
}
.genmai__price small { font-size: .7rem; font-weight: 400; color: var(--text-dim); margin-left: .2em; }
.genmai__was {
  font-size: var(--fs-small); color: var(--text-dim); text-decoration: line-through;
}
.genmai__note { font-size: var(--fs-cap); color: var(--text-dim); margin: .7rem 0 0; }

/* ── 送料一覧 ── */
.shiplist { margin: clamp(2.4rem,6vw,3.6rem) 0 clamp(1.6rem,4vw,2.4rem); }
.shiplist__mark {
  font-family: var(--font-latin); font-size: var(--fs-cap); letter-spacing: var(--ls-latin);
  color: var(--shu); margin: 0 0 .5rem;
}
.shiplist__title {
  font-family: var(--font-mincho); font-weight: 900; font-size: var(--fs-h3);
  margin: 0 0 .4rem; letter-spacing: .04em;
}
.shiplist__sub { font-size: var(--fs-small); color: var(--text-dim); margin: 0 0 1.2rem; }
.shiplist__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shiplist__scroll:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }
.shiptable { width: 100%; min-width: 520px; border-collapse: collapse; }
.shiptable thead th {
  background: var(--sumi); color: var(--sumi-ink);
  font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-small);
  letter-spacing: .06em; padding: .85rem 1.1rem; text-align: right; white-space: nowrap;
}
.shiptable thead th:first-child { text-align: left; }
.shiptable tbody th {
  font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-body);
  text-align: left; padding: .85rem 1.1rem; white-space: nowrap;
}
.shiptable td {
  text-align: right; padding: .85rem 1.1rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.shiptable .yen { font-family: var(--font-mincho); font-size: 1.15rem; font-weight: 700; }
.shiptable td small { font-size: .75rem; margin-left: .15em; color: var(--text-dim); }
.shiptable tbody tr { border-bottom: 1px solid var(--rule-soft); }
.shiptable tbody tr:nth-child(odd) { background: rgba(26,26,24,.025); }
.shiptable tbody tr:last-child { border-bottom: 1px solid var(--rule); }
.shiplist__notes {
  list-style: none; margin: 1.1rem 0 0; padding: 1rem 1.2rem;
  background: var(--paper-deep); border-left: 3px solid var(--shu);
}
.shiplist__notes li {
  font-size: var(--fs-small); line-height: 1.9; color: var(--text-dim); margin: 0;
}
.shiplist__notes li + li { margin-top: .25rem; }
.sr-only {
  position: absolute!important; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 760px) {
  .genmai { grid-template-columns: 1fr; }
  .shiptable thead th, .shiptable tbody th, .shiptable td { padding: .7rem .8rem; }
}


/* ═══════════════════════════════════════════════════════════
   ヒーロー見出し ── 一文字ずつ、墨が紙に染みるように立ち上げる
   縦組みのまま。文字は動かさず「にじみ→定着」で見せるので、
   派手さではなく、じわっと効く。
   ═══════════════════════════════════════════════════════════ */
.hero__headline[data-split] { opacity: 1; transform: none; }
.hero__headline .hk {
  display: inline-block;
  opacity: 0;
  /* キーフレーム 0% と同値にしておくと、開始の瞬間に飛ばない */
  transform: translateY(.40em) scale(1.026) skewX(-1.4deg);
  /* Safari 対策：filter ではなく text-shadow でにじみを作る。
     filter は合成レイヤーの背面を白く塗ることがある。 */
  text-shadow: 0 0 10px currentColor, 0 0 22px currentColor;
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
body.is-loaded .hero__headline[data-split] .hk {
  animation: inkSettle 1.15s cubic-bezier(.16,.62,.23,1) both;
  animation-delay: calc(var(--i) * 105ms + .18s);
}
@keyframes inkSettle {
  0.0% { opacity: 0.000; transform: translateY(0.4000em) scale(1.02600) skewX(-1.400deg); text-shadow: 0 0 10.50px currentColor, 0 0 22.00px currentColor; }
  7.1% { opacity: 0.015; transform: translateY(0.3348em) scale(1.02176) skewX(-1.172deg); text-shadow: 0 0 8.99px currentColor, 0 0 18.83px currentColor; }
  14.3% { opacity: 0.055; transform: translateY(0.2763em) scale(1.01796) skewX(-0.967deg); text-shadow: 0 0 7.60px currentColor, 0 0 15.92px currentColor; }
  21.4% { opacity: 0.118; transform: translateY(0.2242em) scale(1.01457) skewX(-0.785deg); text-shadow: 0 0 6.33px currentColor, 0 0 13.26px currentColor; }
  28.6% { opacity: 0.198; transform: translateY(0.1784em) scale(1.01159) skewX(-0.624deg); text-shadow: 0 0 5.18px currentColor, 0 0 10.85px currentColor; }
  35.7% { opacity: 0.292; transform: translateY(0.1385em) scale(1.00900) skewX(-0.485deg); text-shadow: 0 0 4.15px currentColor, 0 0 8.70px currentColor; }
  42.9% { opacity: 0.394; transform: translateY(0.1044em) scale(1.00679) skewX(-0.365deg); text-shadow: 0 0 3.24px currentColor, 0 0 6.79px currentColor; }
  50.0% { opacity: 0.500; transform: translateY(0.0758em) scale(1.00493) skewX(-0.265deg); text-shadow: 0 0 2.45px currentColor, 0 0 5.13px currentColor; }
  57.1% { opacity: 0.606; transform: translateY(0.0523em) scale(1.00340) skewX(-0.183deg); text-shadow: 0 0 1.77px currentColor, 0 0 3.71px currentColor; }
  64.3% { opacity: 0.708; transform: translateY(0.0338em) scale(1.00220) skewX(-0.118deg); text-shadow: 0 0 1.21px currentColor, 0 0 2.53px currentColor; }
  71.4% { opacity: 0.802; transform: translateY(0.0198em) scale(1.00129) skewX(-0.069deg); text-shadow: 0 0 0.76px currentColor, 0 0 1.58px currentColor; }
  78.6% { opacity: 0.882; transform: translateY(0.0099em) scale(1.00064) skewX(-0.035deg); text-shadow: 0 0 0.41px currentColor, 0 0 0.87px currentColor; }
  85.7% { opacity: 0.945; transform: translateY(0.0037em) scale(1.00024) skewX(-0.013deg); text-shadow: 0 0 0.18px currentColor, 0 0 0.37px currentColor; }
  92.9% { opacity: 0.985; transform: translateY(0.0007em) scale(1.00005) skewX(-0.002deg); text-shadow: 0 0 0.04px currentColor, 0 0 0.09px currentColor; }
  100.0% { opacity: 1.000; transform: translateY(0.0000em) scale(1.00000) skewX(-0.000deg); text-shadow: 0 0 0.00px currentColor, 0 0 0.00px currentColor; }
}
/* 行の切れ目でひと呼吸おく（読点のあと） */
.hero__headline .hk--breath { animation-delay: calc(var(--i) * 105ms + .52s) !important; }

@media (prefers-reduced-motion: reduce) {
  .hero__headline .hk { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   ヒーロー見出し ── 湯気をまとって立ちのぼる
   ・文字自体：ゆらぎ（skew）を含めて、たちのぼる熱気の中で像を結ぶ
   ・湯気レイヤー：見出しの背後で実素材が流れ、文字にまとわりつく
   ═══════════════════════════════════════════════════════════ */
.hero__headline-wrap{
  position: relative; display: inline-block;
  /* Safari 対策：合成の基準を作る。これが無いと screen 合成が
     白い矩形として描かれてしまう。 */
  isolation: isolate;
  background-color: transparent;
}


/* 再生できていない動画は完全に隠す（Safari で WebM が再生できない等の
   状況で、空の video が白く描かれるのを防ぐ保険）。
   animation を打ち消さないよう visibility で制御する。 */


/* 出現に合わせて湯気が濃くなり、文字が定着すると静かに引く */

@keyframes heroSteamVeil{
  0%   { opacity: 0;   transform: translateY(6%)  scale(1.02); }
  16%  { opacity: .58; }
  46%  { opacity: .5;  transform: translateY(-2%) scale(1.05); }
  78%  { opacity: .26; transform: translateY(-6%) scale(1.08); }
  100% { opacity: .14; transform: translateY(-9%) scale(1.1); }
}
/* 文字は湯気より前面に */
.hero__headline{ position: relative; z-index: 1; }

/* 立ちのぼる熱の残り香：定着後もごくわずかに揺らぐ */
body.is-loaded .hero__headline[data-split] .hk{
  animation:
    inkSettle 1.95s linear both,
    heatShimmer 5.6s ease-in-out infinite;
  animation-delay:
    calc(var(--i) * 82ms + .16s),
    calc(var(--i) * 82ms + 2.2s);
}
@keyframes heatShimmer{
  0%,100% { text-shadow: 0 4px 40px rgba(0,0,0,.45); }
  50%     { text-shadow: 0 4px 40px rgba(0,0,0,.45), 0 0 22px rgba(255,255,255,.16); }
}
.hero__headline .hk--breath{
  animation-delay: calc(var(--i) * 82ms + .42s), calc(var(--i) * 82ms + 2.5s) !important;
}

@media (prefers-reduced-motion: reduce){
  .hero__steam{ display: none; }
  body.is-loaded .hero__headline[data-split] .hk{ animation: none; opacity: 1; filter: none; transform: none; }
}


/* ── 和文を明朝に統一したことへの光学補正 ──────────────
   明朝はゴシックより線が細く、小サイズ・色地の上で沈むため、
   ラベル/注記/ボタンだけウェイトと字間を補正する。 */
.btn, .lineup__tab, .lineup__flag, .modal__section-title,
.pro__detail-label, .grower__detail-label,
.faq__q, .shiplist__mark, .genmai__mark, .trial__eyebrow{
  font-weight: 700;
  letter-spacing: .06em;
}
.proof__source, .safety__source, .shiplist__notes li,
.site-footer__nav a, .sticky-cta__text small{
  font-weight: 500;
}
/* 墨地に乗る小さな明朝はさらに一段強く */
.chapter--sumi .eyebrow, .chapter--sumi .cap-vert,
.site-footer__nav a, .promise .lead{
  font-weight: 600;
}


/* ── vow：細い罫線で囲み、宣言としてのメリハリを出す ── */
.vow__inner{
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.6rem, 7vh, 5rem);
  position: relative;
}
/* 四隅に短い罫を足して「額装」に見せる（囲みすぎない） */
.vow__inner::before, .vow__inner::after{
  content: ""; position: absolute; width: 1px; height: 26px;
  background: var(--rule);
}
.vow__inner::before{ left: 0;  top: -1px; }
.vow__inner::after { right: 0; bottom: -1px; }
.vow .wrap{ max-width: min(var(--page-max), 1040px); }
@media (max-width: 720px){
  .vow__inner{ padding-block: 2.2rem; }
}

/* ── 象徴コピー：湯気の中で像を結ぶ（ヒーローと同じ設計）── */
.vow__statement[data-split] .vk{
  display: inline-block;
  opacity: 0;
  transform: translateY(.40em) scale(1.026) skewX(-1.4deg);
  text-shadow: 0 0 10px currentColor, 0 0 22px currentColor;
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.vow__statement[data-vow="in"] .vk{
  animation: inkSettle 1.95s linear both;
  animation-delay: calc(var(--i) * 82ms + .1s);
}
/* 2行目の頭でひと呼吸 */
.vow__statement[data-vow="in"] .vk--breath{
  animation-delay: calc(var(--i) * 82ms + .42s);
}
/* 罫線も同じ呼吸で引かれる */
.vow__inner{ position: relative; }
.vow__inner::before, .vow__inner::after{ transition: opacity 1.2s ease .2s; }
@media (prefers-reduced-motion: reduce){
  .vow__statement[data-split] .vk{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
}

/* 玄米・精米の購入導線 */
.genmai__cta{ margin-top: 1.1rem; }
.genmai__cta .btn{ padding: .85rem 1.6rem; font-size: .92rem; }
@media (max-width: 720px){
  .genmai__cta .btn{ width: 100%; justify-content: center; }
}


/* ── 湯気（CSS 描画）───────────────────────────────────
   動画の透過はブラウザ差が大きいため、放射グラデーションで描く。
   mix-blend-mode を使わないので Safari でも黒くも白くもならない。 */
.hero__steam{
  position: absolute; left: 0; right: 0; bottom: -8%;
  height: 165%; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__steam i{
  position: absolute; bottom: 0;
  display: block;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side,
              rgba(255,255,255,.34), rgba(255,255,255,.10) 55%, rgba(255,255,255,0) 78%);
}
.hero__steam i:nth-child(1){ left:  4%; width: 46%; height: 58%; animation: steamRise 11s ease-in-out  -2s infinite; }
.hero__steam i:nth-child(2){ left: 26%; width: 38%; height: 66%; animation: steamRise 14s ease-in-out  -7s infinite; }
.hero__steam i:nth-child(3){ left: 48%; width: 42%; height: 54%; animation: steamRise 12.5s ease-in-out -11s infinite; }

@keyframes steamRise{
  0%   { opacity: 0;   transform: translate3d(0, 14%, 0) scale(.94); }
  18%  { opacity: .5; }
  52%  { opacity: .34; transform: translate3d(-3%, -16%, 0) scale(1.06); }
  100% { opacity: 0;   transform: translate3d(2%, -44%, 0) scale(1.2); }
}
@media (prefers-reduced-motion: reduce){
  .hero__steam{ display: none; }
}

/* ── 見出しの改行制御（Safari 対策）──────────────────────
   ブラウザ任せだと語中や助詞の前で折れて意味が切れる。
   読点・句点の直後でだけ折り返すよう、文節を保つ設定にする。 */
.h-mincho,
.hero__headline, .vow__statement, .promise__lead, .modal__title,
.awake__h2, .origin__h2, .mates__h2, .shop__h2, .faq__h2, .about__h2,
.proof__h2, .safety__h2, .promise__h2{
  /* Safari(WebKit) は keep-all を「日本語を折り返さない」と解釈して
     見出しが横にはみ出すため、keep-all は使わず通常の折り返しにする。
     文節改行（auto-phrase）対応ブラウザは下の @supports で上書き。 */
  word-break: normal;
  line-break: strict;
  overflow-wrap: normal;
  text-wrap: balance;        /* 対応ブラウザでは行長を均す */
}
/* 文節改行に対応するブラウザではさらに自然な位置で折る */
@supports (word-break: auto-phrase){
  .h-mincho, .proof__h2, .safety__h2, .promise__h2,
  .awake__h2, .origin__h2, .mates__h2, .shop__h2, .faq__h2, .about__h2,
  .promise__sign .name,
  .sticky-cta__text, .modal__lead, .modal__supplier-desc,
  .promise__tag, .genmai__text, .shiplist__sub, .lineup__desc{
    word-break: auto-phrase;
  }
}

/* 縦組みの引用は列送りが必要なので、共通の keep-all を打ち消す */
.awake__quote{ word-break: normal !important; }


/* ── 溢れ対策（実測で確認した2箇所）────────────────────
   vow：2行が入りきらず下が切れていたので行間と高さを調整。
   promise の縦組み見出し：列幅がわずかに足りず切れていた。 */
/* 明朝は字面が大きく、line-height が小さいと scrollHeight が
   はみ出す（＝下端が切れる）。行間を十分に取る。 */
.vow__statement{ line-height: 1.68; }
.vow__line{ line-height: 1.68; }
.promise__h2{
  max-height: min(62vh, 560px);
  padding-inline: .06em;      /* 縦組みの列がにじみで切れるのを防ぐ */
}

/* 同様に、大きな文字を使う箇所は行間を確保して切れを防ぐ */
.hero__headline{ line-height: 1.62; }
.hero__line{ line-height: 1.62; }
.safety__bignum{ line-height: 1.25; }


/* ── 縦組みの列を明示的に制御 ────────────────────────────
   縦組みは折り返し位置をブラウザに任せると、意味の途中や
   「代表取締／役」のような不自然な位置で列が変わる。
   意図した位置で列を分け、各列は折り返さない。 */
.awake__quote .vline,
.promise__h2 .vline,
.cap-vert .vline{
  display: block;
  white-space: nowrap;
}
/* 列が分かれた分、高さの上限は不要（自動で収まる） */
.awake__quote{ max-height: none; }
.promise__h2{ max-height: none; }

/* promise の見出しが本文や写真に重ならないよう間隔を確保 */
.promise__inner{ column-gap: clamp(2rem, 5vw, 4.5rem); }

/* 署名：「代表取締／役」のように語中で折れないようにする
   （keep-all は Safari で署名全体がはみ出すため使わない。役職は nowrap で保護） */
.promise__sign .name{ word-break: normal; line-break: strict; }
.promise__sign .name__role{ white-space: nowrap; }
/* 幅が足りないときはロゴを次の行へ送る（署名の左端が画面外に出ないように） */
.promise__sign{ flex-wrap: wrap; }

/* 残る複数行テキスト：通常の折り返し＋禁則（文節改行は上の @supports で付与） */
.sticky-cta__text, .modal__lead, .modal__supplier-desc,
.promise__tag, .genmai__text, .shiplist__sub, .lineup__desc{
  word-break: normal;
  line-break: strict;
}
/* 商品パネルが中身の幅に引きずられて画面より広がらないようにする */
.lineup > *, .lineup__panel{ min-width: 0; }

/* ══════════════ スマホ最適化（560px以下） ══════════════ */
@media (max-width: 560px) {
  /* ヒーロー見出しが右端で切れないように（11文字が収まるサイズ） */
  .hero__headline { font-size: clamp(1.5rem, 7.4vw, 2.2rem); letter-spacing: .03em; }
  /* 縦に長くなりすぎる正方形写真を 4:3 に */
  .awake__photo { aspect-ratio: 4 / 3; }
  .lineup__photo { aspect-ratio: 4 / 3; }
  /* 送料表：横スクロールなしで「お届け先＋3列」を収める */
  .shiptable { min-width: 0; }
  .shiptable thead th { padding: .6rem .35rem; font-size: .72rem; letter-spacing: .02em; }
  .shiptable tbody th { padding: .6rem .35rem; font-size: .82rem; }
  .shiptable td { padding: .6rem .3rem; }
  .shiptable .yen { font-size: .95rem; }
  .shiptable td small { font-size: .62rem; margin-left: .05em; }
  /* 食味レーダーのラベルを読みやすく（SVG内の viewBox 単位） */
  .pentagon__label { font-size: 19px; }
  /* 追従CTAに隠れないようフッター下部に余白 */
  .site-footer { padding-bottom: 6.5rem; }
}
/* 小さな端末（iPhone SE / 拡大表示）では購入ボタンの文字が2行にならないよう余白を詰める */
@media (max-width: 380px) {
  .lineup__cta .btn { width: 100%; padding-inline: 1rem; font-size: .95rem; letter-spacing: .04em; }
}

/* ページ内リンクで移動したとき、固定ヘッダーの下に見出しが隠れないようにする */
section[id], main[id], [id="top"] { scroll-margin-top: 84px; }

/* ══════════════ スマホ用ハンバーガーメニュー ══════════════ */
.site-nav__toggle {
  display: none; appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; margin-left: .25rem; position: relative; z-index: 1001;
}
.site-nav__toggle span {
  display: block; height: 2px; width: 24px; margin: 5px auto; background: #fff;
  transition: transform .3s var(--ease-settle), opacity .3s, background-color .3s;
}
.site-header.is-scrolled .site-nav__toggle span { background: var(--sumi); }
body.is-menu-open .site-nav__toggle span { background: var(--sumi); }
body.is-menu-open .site-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.is-menu-open .site-nav__toggle span:nth-child(2) { opacity: 0; }
body.is-menu-open .site-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 1000; background: var(--paper); background-image: var(--washi);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .35s var(--ease-settle), transform .35s var(--ease-settle), visibility 0s .35s;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
body.is-menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
body.is-menu-open { overflow: hidden; }
.mobile-menu__inner { padding: 5.5rem var(--gutter) 3rem; max-width: 30rem; margin: 0 auto; }
.mobile-menu__logo { width: 120px; height: auto; display: block; margin: 0 auto 1.6rem; }
.mobile-menu__nav { border-top: 1px solid var(--rule); }
.mobile-menu__nav a {
  display: flex; align-items: baseline; gap: 1rem; padding: 1.05rem .2rem;
  border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: var(--sumi);
}
.mobile-menu__en { font-family: var(--font-latin); font-size: .78rem; letter-spacing: .28em; color: var(--shu); min-width: 5.2em; }
.mobile-menu__ja { font-family: var(--font-mincho); font-weight: 600; font-size: 1.08rem; letter-spacing: .06em; }
.mobile-menu__cta { width: 100%; justify-content: center; margin-top: 1.8rem; }
.mobile-menu__contact { margin-top: 1.4rem; text-align: center; font-size: var(--fs-small); }
.mobile-menu__contact a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
@media (max-width: 900px) {
  .site-nav__toggle { display: block; }
  .site-nav { gap: .5rem; }
  .site-nav .site-nav__cta { padding: .7rem .9rem; font-size: .78rem; }
}
/* メニュー展開中はヘッダー（×ボタン）をオーバーレイより手前に */
body.is-menu-open .site-header { z-index: 1001; background: transparent; border-color: transparent; box-shadow: none; }
body.is-menu-open .site-header .site-header__brand { opacity: 0; pointer-events: none; }
body.is-menu-open .site-nav .site-nav__cta { visibility: hidden; }

/* ══════════════ 新米入荷前のお値引き（二重価格表示） ══════════════
   景表法：取消線の価格には「当店通常価格」のラベルを必ず添え、両方の金額に
   （税込）を付ける。誤記の訂正ではなく値引きなので、訂正印・赤ペン風の演出はしない。
   お値引きを止めるときは content.js の sale.active を false にするだけ。 */
.lineup__saleflag {
  font-family: var(--font-mincho); font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; color: var(--shu);
  margin: .9rem 0 .2rem; display: flex; align-items: center; gap: .55rem;
}
.lineup__saleflag::before {
  content: ""; width: 18px; height: 2px; background: var(--shu); flex: none;
}
.lineup__saleflag[hidden] { display: none; }

/* 価格：1行目に「当店通常価格 ¥2,160（税込）」（斜線）、2行目に値引き後価格 */
.lineup__price.is-sale { display: block; }
.price-was {
  display: flex; align-items: baseline; gap: .4em;
  font-family: var(--font-sans); font-size: .5em; color: var(--sumi);
  opacity: .82; margin-bottom: .1em;
}
.price-was__label { letter-spacing: .04em; flex: none; }
/* 赤い斜線は金額にだけ掛ける（ラベルには掛けない） */
.price-was__yen {
  position: relative; font-family: var(--font-latin); font-size: 1.28em;
  padding-inline: .1em;
}
.price-was__yen::after {
  content: ""; position: absolute; left: -8%; right: -8%; top: 50%;
  height: 2px; background: var(--shu); border-radius: 2px;
  transform: translateY(-50%) rotate(-10deg); transform-origin: center;
  pointer-events: none;
}
.price-was__tax { font-size: .95em; color: var(--text-dim); }
.price-now-row { display: flex; align-items: baseline; gap: .3em; }
.price-now { font-family: var(--font-latin); color: var(--sumi); }
.lineup__price.is-sale .tax {
  font-size: .62rem; color: var(--text-dim); font-family: var(--font-sans); margin-left: 0;
}
.lineup__salenote {
  font-size: .8rem; line-height: 1.7; color: var(--text); margin: .35rem 0 0;
  word-break: normal; line-break: strict;
}
.lineup__salenote[hidden] { display: none; }
/* 条件の注記は価格と同一視野に置く（打消し表示が離れると認識されないため） */
.lineup__salelegal {
  font-size: .68rem; line-height: 1.65; color: var(--text-dim);
  margin: .6rem 0 0; padding-top: .55rem; border-top: 1px solid var(--rule-soft);
  word-break: normal; line-break: strict;
}
.lineup__salelegal[hidden] { display: none; }

@media (max-width: 560px) {
  .price-was { font-size: .46em; }
  .lineup__saleflag { font-size: .78rem; }
  .lineup__salenote { font-size: .76rem; }
  .lineup__salelegal { font-size: .66rem; }
}