/* ============================================================
   Yojo+ — Layout : shell, header, footer, sections
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 940px; }
.wrap--text   { max-width: 760px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--flush-top { padding-top: 0; }
.section--raised { background: var(--bg-raised); }
.section--hairline { border-top: 1px solid var(--line-soft); }

/* ------------------------------------------------------------
   差し色としての金 — 濃淡2段階
   ------------------------------------------------------------
   黒一色だと全体が沈むため、金を「面」で使う場所を作ります。
   ただし多用すると安くなるので、段階を分けて配分を決めています。

     --warm  … 淡。金を落とした黒＋奥からの滲み。数セクションに使う
     --gold  … 濃。箔の面に墨文字。ページ内で1〜2か所だけ
   ------------------------------------------------------------ */

/* 淡：黒に金味を落とし、上辺から金が滲む */
.section--warm {
  background-color: var(--bg-warm);
  background-image: var(--glow-gold);
  background-repeat: no-repeat;
}
/* 隣り合うセクションとの境目に髪の毛一本の金 */
.section--warm + .section,
.section--warm { border-top: 1px solid rgba(198,161,91,.12); }

/* 濃：箔の面。ここだけは文字が墨になります */
.section--gold {
  background: var(--foil-deep);
  color: var(--on-gold);
  position: relative;
  isolation: isolate;
}
/* 箔の粒立ち。べた塗りに見せないための微細なノイズ。
   ★ ハイライトは弱めに。強いと箔ではなく「光沢のあるプラスチック」に見えます。 */
.section--gold::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(90% 60% at 22% 0%, rgba(255,255,255,.09), transparent 62%);
  mix-blend-mode: soft-light;
}

/* 金地の上のタイポグラフィ。既定の紙色のままだと読めないので、
   このセクション配下だけ墨側に寄せます。 */
.section--gold .display-1,
.section--gold .display-2,
.section--gold .display-3,
.section--gold .display-4,
.section--gold h1, .section--gold h2, .section--gold h3 { color: var(--on-gold); }
.section--gold .eyebrow      { color: var(--on-gold-mute); }
.section--gold .lede,
.section--gold .body-dim     { color: var(--on-gold-dim); }
.section--gold .note,
.section--gold .disclaimer   { color: var(--on-gold-mute); }
.section--gold .plan__perk   { color: var(--on-gold-dim); }
.section--gold .plan__perk::before,
.section--gold .msg--ai li::before { color: var(--on-gold); }
.section--gold hr,
.section--gold .rule         { border-color: var(--on-gold-line); }

/* 金地では「金のボタン」が沈むので、墨のボタンに反転させます */
.section--gold .btn--primary {
  background: var(--c-ink-900); color: var(--c-gold-200);
}
.section--gold .btn--primary:hover { background: var(--c-ink-700); color: var(--c-gold-100); }
.section--gold .btn--ghost {
  border-color: var(--on-gold-line); color: var(--on-gold);
}
.section--gold .btn--ghost:hover { background: rgba(5,5,5,.08); border-color: var(--on-gold); }
.section--gold :focus-visible { outline: 2px solid var(--c-ink-900); outline-offset: 3px; }

/* 金地に載る写真は、白フチが出ないよう地に馴染ませる */
.section--gold .figure { box-shadow: 0 30px 80px rgba(60, 40, 10, .38); }

/* 帯として使う金：セクションの余白を持たず、一本の罫のように置く。
   proof（1731 / 10代 / 17チーム / 1日1本）がこれにあたります。 */
.section--band { padding-block: 0; }
.section--band .proof { border-block: 0; }
.section--band .proof__item { border-inline-end-color: var(--on-gold-line); }
.section--gold .proof__value { color: var(--on-gold); }
.section--gold .proof__label { color: var(--on-gold-dim); }
.section--gold .proof__note  { color: var(--on-gold-mute); }
@media (max-width: 720px) {
  .section--band .proof__item:nth-child(-n+2) { border-bottom-color: var(--on-gold-line); }
}

.section__head { margin-bottom: clamp(40px, 5vw, 80px); }
.section__head--center { text-align: center; margin-inline: auto; max-width: 760px; }
.section__head--center .lede { margin-inline: auto; }
/* ★ セクション見出しの説明文は行間を詰めること。
   本文と同じ 1.68 だと、中央揃えで3〜4行になったときに行が離れて見え、
   ひとかたまりの文として読めません（XPRIZE の説明で顕著でした）。 */
.section__head .lede { line-height: 1.5; }
html[lang="ja"] .section__head .lede,
html[lang="zh-Hans"] .section__head .lede { line-height: 1.62; }

/* ------------------------------------------------------------
   Announcement bar
   ------------------------------------------------------------ */
/* 箔地のアナウンスバー。ページ最上部に金の帯を一本通し、
   黒一色になりがちな全体の起点を明るくします。 */
.announce {
  min-height: var(--announce-h);
  display: grid;
  /* ★ 高さ固定をやめ、パディングで高さを決めます。
     文字が上下に詰まって見えていたのは、高さ 34px 固定のうえに
     .announce__item が position:absolute で流れから外れており、
     親の align-items:center が効いていなかったためです。 */
  padding-block: 11px;
  padding-inline: var(--gutter);
  background: var(--foil);
  border-bottom: 1px solid var(--c-gold-600);
  overflow: hidden;
  position: relative; z-index: calc(var(--z-header) + 1);
}

/* 箔の艶は静止。以前はハイライトが横切るアニメーションを入れていましたが、
   帯そのものが動いて見えて注意を引きすぎるため外しました。金は面で見せます。 */

/* ★ 複数のお知らせを重ねる方法を absolute から grid の重ねに変更。
   同じセルに積むので、高さは最も背の高い項目で決まり、
   親のパディングがそのまま効きます。 */
.announce__track { display: grid; width: 100%; align-items: center; }
.announce__item {
  grid-area: 1 / 1;
  justify-self: center;
  /* ★ p の既定マージン（base.css の p { margin: 0 0 1em }）を必ず消すこと。
     重ねた項目それぞれに下マージンが付き、行の高さが 11px 増えて
     文字が上に寄って見えます。詰まりの正体はこれでした。 */
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--on-gold);
  text-align: center;
  /* ★ 行高は倍率ではなく固定値。
     欧文（Jost）と和文（Noto Sans JP）が混ざる項目だけ行ボックスが高くなり、
     お知らせが切り替わるたびに帯の高さが変わってしまうためです。 */
  line-height: 22px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.announce__item.is-active { opacity: 1; }

/* 帯が狭いスマホでは折り返しを許して、切れないようにする */
@media (max-width: 640px) {
  .announce { padding-block: 9px; }
  .announce__item { font-size: var(--fs-3xs); letter-spacing: .10em; line-height: 20px; }
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line-soft); background: rgba(0,0,0,.92); }

.header__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4);
}

.brand { display: inline-flex; align-items: baseline; gap: 10px; justify-self: start; }
.brand__mark {
  font-family: var(--font-display-en);
  font-size: 1.5rem; line-height: 1;
  letter-spacing: .01em; color: var(--fg);
}
.brand__mark sup { font-size: .62em; top: -.5em; position: relative; color: var(--accent); }
/* ワードマークは高さで揃えます（viewBox 131.38 x 46.92、比 2.80:1）。
   色は SVG に焼き込み済み（Yojo=白 / ＋=金）なので CSS では触りません。 */
/* ★ flex: none を必ず付けること。
   .brand は inline-flex、その親はグリッド列（auto）で、
   狭い画面ではロゴが縮められて 18px まで潰れていました。
   高さ指定＋width:auto でも、収縮を止めないと比率が保てません。 */
.brand__img { height: 27px; width: auto; flex: none; }
.brand--lg .brand__img { height: 46px; }
@media (max-width: 560px) { .brand__img { height: 23px; } }
/* 会社ロゴと同じく、アラビア語でも欧文ワードマークは反転させない */
[dir="rtl"] .brand__img { direction: ltr; }

/* ── 商標表記：ロゴ直下の読み仮名（日本語版のみ） ──────────────
   「YOJO+」と「ヨージョープラス」が一体のブロックに見えるよう、
   横並び（inline-flex + baseline）を縦積みに切り替えて中央で揃えます。
   ★ gap を詰めすぎないこと。0 だとロゴの一部に見え、6px 以上あると
     別々の要素に見えます。4px が、2段組みとして読める最小の間隔です。

   ★ 文字サイズは「ロゴの幅にそろえる」ことから逆算します（2026-08-25 の指示）。
     ロゴ SVG の viewBox は 131.38 × 46.92（比 2.80:1）なので
       ロゴ幅 = ロゴ高さ × 2.80
     読み仮名は全角カナ8文字＝8em 相当（letter-spacing 0）。したがって
       文字サイズ = ロゴ高さ × 2.80 ÷ 8 = ロゴ高さ × 0.35
     高さ 27px → 9.5px、狭い画面の 23px → 8px。
     ロゴ高さを変えたら、この計算で読み仮名も入れ替えること。 */
.brand--stack { flex-direction: column; align-items: center; gap: 4px; }
.brand__reading {
  font-family: var(--font-ui);
  font-size: 9.5px; line-height: 1;
  letter-spacing: 0;                   /* 字間を空けるとロゴより広くなります */
  color: var(--fg);
  white-space: nowrap;                 /* 読み仮名が途中で折れないこと */
}
@media (max-width: 560px) {
  /* モバイルでも2段のまま。ロゴが 23px に縮むので読み仮名も合わせます。 */
  .brand__reading { font-size: 8px; }
}

.brand__since {
  font-family: var(--font-ui); font-size: var(--fs-4xs);
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--c-paper-faint);
}

.nav { justify-self: center; }
.nav__list { display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); }
.nav__link {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-block: 6px;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--accent); }

.header__actions { justify-self: end; display: flex; align-items: center; gap: var(--sp-3); }

/* 言語セレクタ。5言語あるので横並びボタンではなく select にしています。
   ラベルはネイティブ表記（English / 日本語 / Français / 简体中文 / العربية）。 */
.lang {
  display: inline-flex; border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  overflow: hidden;
}
.lang__select {
  appearance: none;
  background: transparent; color: var(--fg-dim); border: 0;
  font-family: var(--font-ui); font-size: var(--fs-2xs); letter-spacing: .04em;
  padding: 7px 26px 7px 12px; cursor: pointer; max-width: 10.5rem;
  /* ネイティブの矢印を消して自前の指標を置く。論理方向に追従させる */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 4px 4px, 4px 4px;
  background-position: right 13px top 52%, right 9px top 52%;
  background-repeat: no-repeat;
  transition: color var(--dur-fast) var(--ease);
}
.lang__select:hover { color: var(--fg); }
.lang__select option { background: var(--c-ink-800); color: var(--fg); }
/* RTL では矢印を左側に。★ background-position は方向を意識しないので、
   位置だけ左右反転すると2つの三角が入れ替わって「◤◥」に割れます。
   ▼ の形を保つため、2枚のグラデーションの前後関係も入れ替えます。 */
[dir="rtl"] .lang__select {
  padding: 7px 12px 7px 26px;
  background-position: left 9px top 52%, left 13px top 52%;
}

/* 配送先の国・地域。通貨・販売可否はここで決まります（言語とは別軸）。 */
.region {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
}
.region__label {
  font-family: var(--font-ui); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-mute);
}
.region__select {
  appearance: none;
  background: transparent; color: var(--fg-dim);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: var(--fs-2xs);
  padding: 8px 12px; cursor: pointer; max-width: 100%;
}
.region__select:hover { border-color: var(--line-hard); color: var(--fg); }
.region__select option { background: var(--c-ink-800); color: var(--fg); }
/* 販売できない地域を選んだときの説明。隠さず、はっきり出します。 */
.region__note {
  flex-basis: 100%; margin: 0;
  font-size: var(--fs-2xs); line-height: 1.7; color: var(--c-gold-300);
}

.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  color: var(--fg-dim); position: relative;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--line-hard); color: var(--fg); }
.icon-btn__count {
  position: absolute; top: -5px; inset-inline-end: -5px;
  min-width: 18px; height: 18px; padding-inline: 5px;
  display: grid; place-items: center;
  background: var(--c-gold-400); color: var(--c-ink-900);
  border-radius: var(--r-pill);
  font-family: var(--font-ui); font-size: var(--fs-4xs); font-weight: 500; line-height: 1;
}
.icon-btn__count[hidden] { display: none; }

.burger { display: none; }

@media (max-width: 1080px) {
  .header__inner { grid-template-columns: auto 1fr auto; }
  .nav { display: none; }
  .burger { display: grid; justify-self: end; }
  .header__actions { grid-column: 3; }
  .nav-toggle-slot { justify-self: end; }
}

/* ★ 狭い画面ではヘッダーのショップCTAを隠します。
   モバイルメニュー（.mobile-nav）に同じ導線があるため機能は失われません。
   フランス語の «Boutique» のように語が長い言語では、
   言語セレクタ＋CTA＋カート＋バーガーが 375px に収まらず、
   ヘッダーごと横にあふれていました。 */
@media (max-width: 560px) {
  /* ★ セレクタを 1段深くしてあります。
     .btn { display: inline-flex } は components.css にあり、
     読み込み順が layout.css より後です。同じ詳細度（0,1,0）だと
     後勝ちで display が戻ってしまい、CTA が消えませんでした。 */
  .header__actions .header__shop { display: none; }
  .header__actions { gap: var(--sp-3); }
  .lang__select { max-width: 7.5rem; padding-inline: 8px 22px; }
}

/* mobile nav sheet */
.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--c-ink-850);
  padding: var(--sp-8) var(--gutter);
  display: flex; flex-direction: column; gap: var(--sp-5);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-out-soft);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav__link {
  font-family: var(--font-display); font-size: var(--fs-xl);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__close { position: absolute; top: 18px; inset-inline-end: var(--gutter); }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(120% 90% at 68% 42%, #16120C 0%, #050403 46%, #000 100%);
  /* 画面端への引き出し量。1100px 以上で実値に上書きされます。
     ★ 既定値はメディアクエリの外に置くこと。後ろのクエリの中に書くと、
       1100px 用の上書きを打ち消してしまいます。 */
  --hero-bleed: 0px;
}
.hero__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(56px, 7vw, 120px) var(--gutter);
  display: grid; gap: clamp(28px, 4vw, 72px);
  /* 画像を大きく見せるため、右（メディア）側に配分を寄せています */
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  /* ★ 社名ロゴはコピーとは別の要素です（セパレート）。
     PC では右カラムの2行目＝画像の直下に置き、
     コピーは左カラムで2行分をまたぎます。 */
  grid-template-areas:
    "copy  media"
    "copy  mark";
  align-items: center;
}
.hero__copy  { grid-area: copy; align-self: center; }
.hero__mark  { grid-area: mark; align-self: start; }
.hero__media { grid-area: media; align-self: end; }
.hero__copy { position: relative; z-index: 2; max-width: 620px; }
/* ヒーローの社名は会社ロゴで出します（テキストの eyebrow は取得失敗時の控え）。
   ロゴは 3行ロックアップなので、eyebrow 1行より背が高くなります。
   色は SVG が currentColor なのでここで決まります。 */
.hero__mark { margin-top: var(--sp-5); }
.hero__mark-logo {
  color: var(--c-gold-300);
  width: min(268px, 62%);
  /* 器の中で中央に置きます。器の幅は PC では画像と同じ（下の引き出し指定） */
  margin-inline: auto;
}
.hero__mark-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
/* 欧文ロックアップなのでアラビア語でも反転させない */
[dir="rtl"] .hero__mark-logo { direction: ltr; }
@media (max-width: 900px) {
  /* 余白と揃えは下のレスポンシブ指定（.hero__inner のグリッド定義側）で
     まとめて扱います。ここではロゴの大きさだけ。 */
  .hero__mark-logo { width: min(228px, 66%); }
}

.hero__title { font-size: var(--fs-4xl); margin-bottom: var(--sp-5); }
/* 見出しの2行目以降（説明部分）はブランド名より一段小さく。
   文言は content/<locale>.json の home.hero.title に span で入れています。 */
.hero__title-sub { font-size: .78em; display: inline-block; }
.hero__title-ja {
  font-family: var(--font-ui); font-size: var(--fs-sm);
  letter-spacing: .1em; color: var(--c-gold-300); margin-bottom: var(--sp-5);
}
html[lang="ja"] .hero__title-ja { font-family: var(--font-body-ja); letter-spacing: .06em; }
.hero__lede { margin-bottom: var(--sp-7); max-width: 44ch; }
/* ★ 2つのボタンは同じ幅に揃えること。
   flex だと中身の長さで幅が変わり、「YOJO+ を購入する」と
   「AI養生診断をはじめる」で段違いになります。
   inline-grid にすると器の幅＝長いほうに揃い、両方がそれに伸びます。 */
.hero__actions {
  display: inline-grid; grid-auto-flow: row;
  gap: var(--sp-3); justify-items: stretch;
}
.hero__actions .btn { padding-inline: clamp(28px, 3vw, 48px); }

.hero__media { position: relative; justify-self: center; }
/* 広い画面では、コンテナのガター分だけ画面端側へ引き出して商品を大きく見せます。
   margin-inline-end なのでアラビア語（RTL）では自動的に左へ寄ります。 */
@media (min-width: 1100px) {
  /* ★ 商品の見かけの大きさは列幅で決まります。
     コンテナ（max-width 1320px）の外側 ＝ ガター＋左右の余りまで
     引き出して、画面の端まで使い切ります。
     justify-self は stretch（既定）のままにすること。end にすると
     ボックスが内容幅に縮み、負マージンを足しても広がりません。
     margin-inline-end なので RTL では自動的に左へ寄ります。 */
  /* ★ ロゴの器にも同じ引き出しを掛けること。
     画像だけを引き出すと器の幅が揃わず、ロゴの中心が画像の中心とずれます。 */
  /* ★ 引き出し量は変数で持つこと。
     幅の式で使う 100% は「グリッドの列幅」であって、負マージンぶんは
     含まれません。マージンにだけ書くと、幅の計算からこの分が抜け落ちて
     画像が列幅まで縮みます（実際に 740px → 648px に縮みました）。

     ★ この値が「写真が画面の右端に貼り付く量」です。
       以前は (100vw - maxw)/2 + gutter ＝ 画面の端まで引き出していました。
       .hero__media は justify-self: center なので、この負マージンの
       半分だけ箱の中心が端へ寄ります。画面端へ寄せすぎない値にしています。 */
  .hero {
    --hero-bleed: 0px;
  }
  .hero__media,
  .hero__mark {
    margin-inline-end: calc(var(--hero-bleed) * -1);
  }
}
.hero__media img {
  /* ★ ヒーローの主役は商品なので大きく見せます。
     上限は 560px → 980px → 1400px。ビューポート幅にも連動させ、
     広い画面ではさらに伸びるようにしています。 */
  width: min(100%, clamp(440px, 74vw, 1400px));

  /* ★ 素材は still-life-hero（1536x914）＝ 横長の元写真です。
     以前使っていた still-life.jpg は、この写真の右 64% だけを切り出したもので、
     左のスティック・粉の器・白玉の器・ヤマブシタケが落ちていました。
     上の空きは素材側で落としてある（tools/build-hero-still-life.py）ので、
     ここでは切りません。比率は素材そのままです。 */
  aspect-ratio: 1536 / 904;
  object-fit: cover;
  object-position: 50% 100%;
  filter: drop-shadow(0 40px 90px rgba(0,0,0,.9));
  /* ★ 静物写真は黒地の上に「四角い写真」として乗るため、
     縁が直線で切れて見えます（左端で輝度が 8 → 124 に跳ねていました）。
     外周だけを落としてページの地に溶かします。

     楕円の radial-gradient では辺の中央まで届かず（中心から辺までの距離が
     半径の 4割ほどしかない）、角しかフェードしません。
     縦横それぞれの線形フェードを intersect で掛け合わせます。
     中央 8割は素通しなので、素材そのものは削りません。 */
  /* 上のフェードは薄く（6%）。トリミングで空きを削ったぶん、
     ここを厚くすると商品の頭が沈んで見えます。 */
  /* ★ フェードは短くて済みます。
     横長の元写真は四辺とも黒地に落ちきっているためです（実測）。

       左  0-2% … 平均 2.9 / 最大 27    右 98-100% … 平均  9.7
       上  0-6% … 平均 1.0 / 最大  7    下 98-100% … 平均  9.9

     以前の素材（右 64% だけの切り出し）は左端に急須のガラス（輝度 236）が
     乗っていたため 15〜22% の長いフェードが要りましたが、
     いまは縁を撫でるだけで地に溶けます。長く掛けると、せっかく写っている
     スティック・粉の器・白玉の器が消えてしまいます。 */
  /* ★ 左のフェードだけは長く・浅く。
     写真をテキスト側へ張り出させている（--hero-lead）ので、その帯は
     「文字と写真の間の受け渡し」になります。4% で切ると帯の途中で
     いきなり写真が始まって見えるため、9% まで伸ばしつつ、
     立ち上がりを早くして中身は早めに見えるようにしています。
     切り取り後の左端（素材 x=400）は平均 22 / 最大 212 と明るいので、
     短いフェードでは縦線が出ます。 */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, rgba(0,0,0,.35) 2.5%, rgba(0,0,0,.72) 7%, #000 13%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 3%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, rgba(0,0,0,.35) 2.5%, rgba(0,0,0,.72) 7%, #000 13%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 3%, #000 95%, transparent 100%);
          mask-composite: intersect;
}
/* ------------------------------------------------------------
   PC：ヒーローを1画面に収める
   ------------------------------------------------------------
   使える高さ ＝ ビューポート − アナウンスバー − ヘッダー。
   アナウンスバーは上下パディング 11px ＋ 行高 22px ＋ 境界線 1px の
   45px で固定です（PC では折り返しません）。

   この中に「左：コピー列」と「右：画像＋社名ロゴ列」の両方を入れます。
   足りない分は
     ① 上下パディング ② 画像とロゴの間 ③ 見出しの級数 ④ 商品画像の高さ
   の順に vh へ連動させて吸収します。

   ★ 高さは min-height で与えること。height で固定すると、
     文字が伸びた言語（フランス語など）で中身が切れます。
     入りきらない場合は切らずに素直に伸びる作りです。 */
@media (min-width: 901px) {
  .hero {
    --hero-chrome: calc(45px + var(--header-h));
    --hero-avail:  calc(100svh - var(--hero-chrome));
    --hero-pad:     clamp(16px, 2.4vh, 52px);
    --hero-row-gap: clamp(8px, 1.2vh, 22px);
    /* 社名ロゴのロックアップ実測高（幅 268px 固定なので高さも一定） */
    --hero-mark-h: 56px;
    /* 写真を列の外（テキスト側）へどれだけ張り出させるか。
       張り出した分はマスクのフェードの中に入るので、文字には掛かりません。 */
    --hero-lead: clamp(20px, 6vw, 110px);
    /* 商品画像に割ける高さ ＝ 使える高さ − 上下パディング − 行間 − ロゴ */
    --hero-media-h: calc(var(--hero-avail) - var(--hero-pad) * 2
                         - var(--hero-row-gap) - var(--hero-mark-h));
    min-height: var(--hero-avail);
  }
  .hero__inner {
    padding-block: var(--hero-pad);
    row-gap: var(--hero-row-gap);
    /* ★ 左右の列は近づけること。
       既定の gap（clamp(28px,4vw,72px)）だと 1440px で 58px 空き、
       写真側のフェードと合わせて実質 150px 以上の空白になって、
       コピーと写真が別々の島に見えていました。 */
    column-gap: clamp(16px, 1.8vw, 36px);
    /* 横長の写真になったぶん、右列に幅を回します。
       ★ ただしコピーに左の余白（下の padding-inline-start）を入れたぶんは
         左列に戻すこと。戻さないと見出しの折り返しが増えて縦に伸び、
         1画面に収まらなくなります。 */
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  }
  /* ★ コピーはガターに貼り付けないこと。
     見出しが画面の左端から始まると、ヘッダーのロゴと同じ位置に落ちて
     「文字が左に張り付いている」ように見えます。一段だけ内側へ入れます。 */
  .hero__copy { padding-inline-start: clamp(12px, 2.4vw, 84px); }
  /* 行間は grid の row-gap で持たせるので、ロゴ側のマージンは 0 に */
  /* ★ ロゴの器は画像と同じ justify-self にすること。
     画像が列いっぱいだった頃は stretch でも中心が一致していましたが、
     高さ優先で画像を縮めた結果、画像は justify-self:center（＝負マージン分
     だけ端へ寄る）、ロゴは stretch（＝負マージン分だけ器が広がる）となり、
     中心が最大 76px ずれていました。揃え方を合わせて解消します。 */
  /* ★ 画像の器とロゴの器は「同じ幅・同じ揃え」にすること。
     写真を列の外へ張り出させるため、器の幅は列幅（100%）ではなく
     下の式で決めます。両方に同じ式を与えれば中心が自動で揃います。
     （片方だけ変えると、以前のように中心が最大 76px ずれます） */
  .hero__media,
  .hero__mark {
    /* ★ end を外さないこと。
       素の .hero__media は justify-self: center なので、外すと center に
       落ちます。center と負マージンの組み合わせでは箱が右へずれ、
       1440px で 36px 画面外にはみ出し、社名ロゴとの中心も 32px ずれました。
       写真を左（センター寄り）へ動かすつまみは --hero-bleed のほうです。 */
    justify-self: end;
    width: min(calc(100% + var(--hero-bleed) + var(--hero-lead)),
               clamp(440px, 74vw, 1400px),
               calc(var(--hero-media-h) * 1536 / 1201));
  }
  .hero__mark {
    margin-top: 0;
  }
  .hero__mark-logo { width: 268px; margin-inline: auto; }

  /* 見出しは幅だけでなく高さにも連動させます。
     横に広く縦の浅い画面（13インチノートなど）で効きます。 */
  .hero__title    { font-size: min(var(--fs-4xl), 10vh); margin-bottom: clamp(10px, 1.8vh, 24px); }
  .hero__title-ja { margin-bottom: clamp(10px, 1.8vh, 24px); }
  .hero__lede     { margin-bottom: clamp(18px, 3vh, 48px); }

  /* ★ 商品画像は「高さ」ではなく「幅」で抑えること。
     max-height を足すと、幅はそのままで箱だけ低くなり、
     object-fit: cover が上から余分に切って試験管の頭が欠けます。
     使える高さを縦横比で幅に換算し、min() の候補に足します。 */
  .hero__media img {
    /* ★ 枠の中で写真を左へ寄せます。
       素材そのままの比率（1.681）だと cover の切り取りが起きないため、
       object-position がまったく効きません。枠を少し縦長（1.536）にして
       横に余りを作り、object-position: 100% で右端を枠の右端に合わせる
       ＝切り取りを左から取る、という形にしています。
       切り取りは左から 380px（素材の 24.7%）。
       主役（筒＋瓶。素材の水平中心 61.6%）が枠内の 49.0% に来る量です。
       ★ 380 は素材の中でいちばん暗い縦の筋（平均輝度 6.3）です。
       ★ 中開きを差し替えたら、この比率と下の width の比率を測り直すこと
         （tools/build-hero-still-life.py が書き出す高さが変わります）。
         400 で切るとヤマブシタケの白い縁が枠の端に来て、フェードを
         13% まで伸ばしても Δ+13 の段差が残りました。
       ★ 枠が縦長になるぶん、同じ幅でも商品は大きくなります（506→595px）。 */
    aspect-ratio: 1536 / 1201;
    object-position: 100% 100%;
    /* 幅は器（.hero__media）が決めます。器いっぱいに広げるだけ。 */
    width: 100%;
  }

  /* 縦がとくに浅い画面では本文とボタンもさらに詰めます */
  @media (max-height: 880px) {
    .hero__lede { font-size: var(--fs-sm); line-height: 1.6; }
    .hero__actions { gap: var(--sp-2); }
  }

  /* 小さめのノート・タブレット横（901〜1200px）。
     ここだけは画像ではなくコピー列が高さの上限を決めます。
     左列が狭く見出しが何行にも折り返すためで、画像をいくら縮めても
     収まりません。列の配分をコピー寄りに戻し、見出しを一段落とします。 */
  @media (max-width: 1200px) {
    .hero__inner { grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); }
    .hero__title { font-size: min(var(--fs-4xl), 8vh, 6.6vw); }
    .hero__lede  { font-size: var(--fs-sm); line-height: 1.6; }
  }
}

.hero__glow {
  position: absolute; inset: -18% -12% -6% -12%;
  background: radial-gradient(closest-side, rgba(198,161,91,.16), transparent 72%);
  pointer-events: none;
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: var(--fs-3xs); font-weight: var(--fw-label); letter-spacing: .26em;
  text-transform: uppercase; color: var(--c-paper-faint);
}
.hero__scroll span.line {
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--c-gold-400), transparent);
}

@media (max-width: 900px) {
  /* 縦積み。並びは 画像 → 社名ロゴ → コピー。 */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "mark"
      "copy";
    /* 縦積みでは画像・ロゴ・コピーの軸を中央で通します */
    text-align: center;
    /* 縦積みになるぶん上下の余白を詰める */
    padding-block: clamp(36px, 6vw, 56px) clamp(40px, 7vw, 72px);
  }
  .hero__copy { max-width: none; }
  .hero__lede { margin-inline: auto; }
  .hero__actions { justify-self: center; }   /* inline-grid なので justify-self */
  /* 中央寄せをやめて上詰めに。中央寄せだと画像の上に空きが溜まります。 */
  .hero { align-items: start; min-height: 0; }
  /* ロゴは画像の直下でセンター揃え。画像も中央にあるので軸が通ります。
     コピー（見出し・本文）は左揃えのままにします。 */
  .hero__mark { margin: var(--sp-5) 0 var(--sp-6); justify-self: center; }
  .hero__mark-logo { margin-inline: auto; }
  /* ★ スマホでは画面の左右いっぱいまで使います。
     .hero__inner はガター（20〜64px）を持っているので、その分だけ外へ
     引き出します。
     ★ 100vw は使わないこと。縦スクロールバーが出る環境ではバーの幅まで
       含んでしまい、横に数px あふれます。 */
  .hero__media {
    justify-self: stretch;
    margin-inline: calc(var(--gutter) * -1);
  }
  .hero__media img {
    width: 100%; max-width: none; margin-inline: 0;
    /* ★ スマホでは横長のまま出さないこと。
       幅 336px の画面だと高さが 200px しか出ず、主役の筒が 116px まで
       小さくなります。ここだけは横を切って縦を稼ぎます。
       object-position の 76% は「右に寄せるが試験管は切らない」位置で、
       筒・瓶・急須・ヤマブシタケ・ハナビラタケが入ります。 */
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 76% 100%;
    /* 左右のフェードは外すこと。端まで見せるのが狙いなので、残すと
       両端が黒へ溶けて「いっぱい」に見えません。
       上下だけ、地に溶かすぶんを残します。 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 96%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 96%, transparent 100%);
  }
  .hero__scroll { display: none; }
}

/* ------------------------------------------------------------
   Pattern band (real asanoha from the brochure)
   ------------------------------------------------------------ */
/* 背景画像は JS 側で設定します（CSS 変数内の相対 url() は
   宣言元スタイルシートを基準に解決されるため、ここでは指定しません）。 */
/* 麻の葉の地紋帯。
   ★ 以前はチラシから切り出したラスターを background-size: cover で
     引き伸ばしていたため、幅が広い画面ほど柄がぼやけていました。
     ベクタータイル（assets/patterns/asanoha-gold.svg）を敷き詰める方式に変更。
     どの画面幅でも線幅が一定で、柄が明瞭に出ます。 */
.pattern-band {
  height: clamp(120px, 18vw, 260px);
  position: relative;
  /* ★ 柄の大きさは従来の約70%。粗いと和柄というより幾何模様に見えます。
     72→50 / 9vw→6.3vw / 132→92（いずれも 0.7 倍）。 */
  --jimon-scale: clamp(50px, 6.3vw, 92px);
  /* 露出を上げる。従来 .42 では下のグラデーションに負けて沈んでいました。 */
  --jimon-opacity: .55;
}
.pattern-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--jimon-src, url("../assets/patterns/asanoha-gold.svg"));
  background-size: calc(var(--jimon-scale) * 1.7320508) var(--jimon-scale);
  background-repeat: repeat;
  background-position: center top;
  opacity: var(--jimon-opacity);
}
/* 帯の上下端だけを地に溶かす。柄が直線で切れると安く見えます。
   ★ 従来は上端から地色に向かって全面にかぶせており、柄の大半が沈んでいました。
   中央 6割は素通しにして、柄をしっかり見せます。 */
.pattern-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    var(--bg) 0%, transparent 24%, transparent 76%, var(--bg) 100%);
}
.pattern-band--flip { transform: scaleY(-1); }

/* 帯をセクション冒頭に入れたときは、帯の下に本文までの間隔を作ります。
   （.section--flush-top で上パディングを 0 にしているため） */
.section--flush-top > .pattern-band { margin-bottom: var(--section-y); }
.section--flush-top > .pattern-band:first-child { margin-top: 0; }

/* ------------------------------------------------------------
   Page hero (interior pages)
   ------------------------------------------------------------ */
.page-hero {
  padding-block: clamp(72px, 10vw, 150px) clamp(40px, 6vw, 90px);
  position: relative; overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .30;
}

/* 地紋を敷く版。cover で引き伸ばさず、ベクタータイルを並べます。 */
.page-hero__bg--jimon {
  --jimon-scale: clamp(53px, 5.6vw, 90px);   /* .pattern-band と同じ 0.7 倍 */
  background-image: var(--jimon-src, url("../assets/patterns/asanoha-gold.svg"));
  background-size: calc(var(--jimon-scale) * 1.7320508) var(--jimon-scale);
  background-repeat: repeat;
  background-position: center;
  opacity: .34;
  mask-image: radial-gradient(120% 100% at 50% 30%, #000 32%, transparent 80%);
}
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.94) 8%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.9) 100%),
              linear-gradient(to bottom, rgba(0,0,0,.6), var(--bg) 96%);
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-5); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: var(--sp-9) var(--sp-6);
  background: var(--c-ink-850);
}
.footer__top {
  display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(240px, 1.2fr) repeat(4, minmax(120px, 1fr));
  margin-bottom: var(--sp-9);
}
.footer__brand .brand__mark { font-size: 2rem; }
.footer__tagline {
  font-family: var(--font-display-en); font-size: var(--fs-md);
  color: var(--fg-mute); margin-top: var(--sp-4); max-width: 26ch;
  /* ★ 本文用の行間（1.95）を継いでいて、2行に折り返すと 37px 空いていました。
     見出し系の書体なので、見出しに近い行間にします。 */
  line-height: 1.5;
}
.footer__col-title {
  font-family: var(--font-ui); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--sp-4);
}
.footer__links { display: grid; gap: 10px; }
.footer__links a {
  font-size: var(--fs-xs); color: var(--fg-mute);
  transition: color var(--dur-fast) var(--ease);
}
.footer__links a:hover { color: var(--fg); }

.footer__lockup {
  text-align: center; padding-block: var(--sp-7);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--sp-6);
}
.footer__lockup-name {
  font-family: var(--font-display-en); font-size: var(--fs-lg);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-gold-300);
}
.footer__lockup-sub {
  font-family: var(--font-ui); font-size: var(--fs-3xs); font-weight: var(--fw-label); letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-gold-500); margin-top: 8px; line-height: 2;
}
/* 会社ロゴ（SVG をインライン挿入）。
   SVG は fill="currentColor" なので、色はここの color だけで決まります。
   --accent = #C6A15B は、製品の箔押しロゴから起こした gold と同じ値です。 */
.footer__lockup-logo {
  color: var(--accent);
  width: min(440px, 72%);
  margin-inline: auto;
}
.footer__lockup-logo svg {
  display: block; width: 100%; height: auto;
  fill: currentColor;
}
/* アラビア語でも会社ロゴは欧文ロックアップなので反転させない */
[dir="rtl"] .footer__lockup-logo { direction: ltr; }

@media (max-width: 640px) {
  .footer__lockup-logo { width: min(320px, 86%); }
}

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
  align-items: center; justify-content: space-between;
}
.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer__bottom, .footer__legal-links a { font-size: var(--fs-2xs); color: var(--c-paper-faint); }
.footer__legal-links a:hover { color: var(--fg-mute); }

.footer__disclaimer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-3xs); line-height: 1.9; color: var(--c-paper-faint);
  max-width: 90ch;
}

@media (max-width: 900px) {
  .footer__top { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
/* ★ スマホでリンク群を1列に積まないこと。
   以前は 520px 以下で 1 列にしていました。4つのリンク群が縦に並ぶだけで
   628px（実測）になり、フッター全体で 1855px＝画面 2.2 枚ぶんの高さでした。
   2列のまま畳み、あわせて上下の間を詰めます。
   ここの余白は PC 用に決めた値（96px など）がそのまま効いていたので、
   小さい画面ではひと回り小さい値に置き換えます。 */
@media (max-width: 640px) {
  .footer { padding-block: var(--sp-7) var(--sp-5); }
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
    margin-bottom: var(--sp-6);
  }
  .footer__tagline { margin-top: var(--sp-3); }
  .footer__col-title { margin-bottom: var(--sp-3); }
  .footer__links { gap: 8px; }

  /* ★ 下の罫線は外すこと。すぐ下の「国・地域」も上に罫線を持っているので、
     間を詰めると 24px しか離れていない二重線になり、空の帯に見えます。
     区切りは「国・地域」側の1本に任せます。 */
  .footer__lockup { padding-block: var(--sp-5); margin-bottom: 0; border-bottom: 0; }

  /* 「国・地域」はラベルと選択肢を同じ行に。折り返すと2行ぶん高くなります。 */
  .footer .region { margin-top: var(--sp-5); padding-top: var(--sp-5); flex-wrap: nowrap; }
  .footer .region__select { flex: 1; min-width: 0; }

  .footer__bottom { margin-top: var(--sp-4); gap: var(--sp-3) var(--sp-4); }
  .footer__legal-links { gap: var(--sp-2) var(--sp-4); }
  .footer__disclaimer { margin-top: var(--sp-4); padding-top: var(--sp-4); line-height: 1.75; }
}

/* ------------------------------------------------------------
   Grids
   ------------------------------------------------------------ */
/* ★ 列は minmax(0, 1fr) で下限を 0 に固定します。
   素の 1fr は minmax(auto, 1fr) と同義で、下限が内容の min-content になるため、
   nowrap のボタンや長い単語が入ると列が縮まずページごと横にあふれます。 */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }

@media (max-width: 1000px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .grid--3, .grid--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid--2, .grid--4, .grid--5 { grid-template-columns: minmax(0, 1fr); }
}

/* reveal on scroll */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft);
}
[data-reveal].is-visible { opacity: 1; transform: none; }