/* TOP（フロントページ）リニューアル 2026 — エントリ
   home で読み込む 2026 バンドル。セクションを実装するたびに @import を追加。*/
/*
 * 2026 デザイントークン（ランタイム CSS カスタムプロパティ）
 *
 * 命名方針:
 *  - Figma の Variables にある値は **Figma 変数名をそのまま** 採用（"/"→"-"）。
 *    例: Role/Text/Primary → --Role-Text-Primary, TextSize/Heading/XL → --TextSize-Heading-XL
 *  - Figma に無いプロジェクト都合の値（左右padding・モーション等）は --g26-* を使う。
 *  - leading-trim フォールバックは既存/参考プロジェクト踏襲で --leading-trim。
 *
 * 出所: Figma get_variable_defs（file v9dvGenAQUGKvuwJbbsdXe / Component 2:55）
 * TextSize は既定=PC値。SP は @media (--sp) で上書き（モード値を反映）。
 */
:root {
  /* ── Color: Role/* ── */
  --Role-Background-Default: #ffffff;
  --Role-Background-Subtle: #f1efeb;
  --Role-Background-Muted: #d8d4ce;
  --Role-Background-Emphasis: #4e4d4b;
  --Role-Text-Primary: #4e4d4b;
  --Role-Text-Secondary: #8c8984;
  --Role-Text-onEmphasis: #ffffff;
  --Role-Text-Caution: #e43030; /* Figma Role/Text/Caution（警告・赤注記）*/
  --Role-Border-Default: #d8d4ce;
  --Role-Border-Strong: #4e4d4b; /* Figma Role/Border/Strong（濃色枠線・ボタン等）*/
  --Role-Icon-Default: #4e4d4b;
  --Role-Icon-Muted: #8c8984;
  --Role-Icon-onEmphasis: #ffffff;

  /* ── Font: Font/* （値はサイト実フォント = Typekit）── */
  --Font-JP-Min: "dnp-shuei-mincho-pr6n", serif;     /* Font/JP Min（見出し）*/
  --Font-JP-Go: "dnp-shuei-gothic-gin-std", sans-serif; /* Font/JP Go（本文）*/
  --Font-EN: "adobe-garamond-pro", serif;            /* Font/EN（英字）*/

  /* ── TextSize: TextSize/* （rem化 / 既定=PC）── */
  --TextSize-Heading-XXL: 2.5rem;
  --TextSize-Heading-XL: 2.25rem;
  --TextSize-Heading-L: 2rem;
  --TextSize-Heading-M: 1.75rem;
  --TextSize-Heading-S: 1.5rem;
  --TextSize-Heading-XS: 1.25rem;
  --TextSize-Heading-XXS: 1.125rem;
  --TextSize-Body-L: 1.125rem;
  --TextSize-Body-M: 1rem;
  --TextSize-Body-S: 0.875rem;
  --TextSize-Body-XS: 0.75rem;

  /* ── Type: lineHeight / letterSpacing（Figma type styles）── */
  --LineHeight-Heading: 1.5;
  --LineHeight-Body-150: 1.5;
  --LineHeight-Body-175: 1.75;
  --LineHeight-Body-200: 2;
  --LetterSpacing-Default: 0.1em; /* Figma letterSpacing 10% */

  /* ── 流体単位（横方向のみリキッド）──
     1px 相当の可変単位。SP=375 基準 / PC=1440 基準（下の @media で切替）。
     基準幅ちょうどでは従来の px と完全一致し、画面幅に応じて比例する。
     方針: 横方向（padding-inline / width / column-gap 等）だけ --g26-u でリキッド。
           縦方向（margin-block / padding-block / row-gap 等）は rem() で固定値とする。 */
  --g26-u: calc(100vw / 375);

  /* ── Spacing: 数値スケール（Figma）。--g26-u 掛けで全面リキッド ── */
  --Spacing-4: calc(4 * var(--g26-u));
  --Spacing-8: calc(8 * var(--g26-u));
  --Spacing-12: calc(12 * var(--g26-u));
  --Spacing-16: calc(16 * var(--g26-u));
  --Spacing-20: calc(20 * var(--g26-u));
  --Spacing-24: calc(24 * var(--g26-u));
  --Spacing-32: calc(32 * var(--g26-u));
  --Spacing-40: calc(40 * var(--g26-u));
  --Spacing-48: calc(48 * var(--g26-u));
  --Spacing-64: calc(64 * var(--g26-u));
  --Spacing-80: calc(80 * var(--g26-u));
  --Spacing-120: calc(120 * var(--g26-u)); /* XXXL */

  /* ── Spacing（固定）: 縦の余白・ボタン左右など、画面幅で伸縮させない箇所用。rem 固定。
     横方向のリキッドは上の --Spacing-*（液体）を使う。 ── */
  --Spacing-Fixed-4: 0.25rem;
  --Spacing-Fixed-8: 0.5rem;
  --Spacing-Fixed-12: 0.75rem;
  --Spacing-Fixed-16: 1rem;
  --Spacing-Fixed-20: 1.25rem;
  --Spacing-Fixed-24: 1.5rem;
  --Spacing-Fixed-32: 2rem;
  --Spacing-Fixed-40: 2.5rem;
  --Spacing-Fixed-48: 3rem;
  --Spacing-Fixed-64: 4rem;
  --Spacing-Fixed-80: 5rem;
  --Spacing-Fixed-96: 6rem;
  --Spacing-Fixed-120: 7.5rem;
  --Spacing-Fixed-160: 10rem;
  --Spacing-Fixed-200: 12.5rem;

  /* ── leading-trim フォールバック（非対応ブラウザ用）── */
  --leading-trim: calc((1em - 1lh) / 2);

  /* ── 以下 Figma 非経由（プロジェクト都合）= --g26- ── */
  --g26-header-band: 66px; /* ヘッダー高（SP 66 / PC 89）。hero 高の差引・bleed 量に使用。PCは下で上書き */
  /* FB74: アンカー着地位置の補正量。--g26-header-band は「白ロゴ帯」の高さで、実際にコンテンツへ
     覆いかぶさる固定ヘッダーの高さとは別物（実測: SP 66 / PC 110.3）。見出しが隠れないよう
     実測値 + 少し余裕を持たせる。scroll-margin 専用なので視覚的な余白は増えない。 */
  --g26-anchor-offset: 90px; /* SP: 固定ヘッダー実測 66 + 24（leading-trim で見出しの行ボックスが
                                上に出るため、文字上端で余裕が出るよう実測して決めた値）*/
  --g26-pad-x: 6.4vw;    /* 左右padding（SP 375基準24px・リキッド。ISSUE行43。Figma SP コンテンツ幅327=375-24×2）*/
  --g26-section-y: var(--Spacing-Fixed-64);   /* セクション上下（SP 64px・縦固定）*/
  --g26-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* hover 用（ISSUE行3。参考サイト実測値）:
     矢印コンベア = naturehood-pj.com/zinen（Tailwind 既定 ease / 500ms / 追走 delay 75ms）
     画像ズーム   = neie.jp（easeOutQuart / 1s / scale 1.05） */
  --g26-ease-arrow: cubic-bezier(0.4, 0, 0.2, 1);
  --g26-ease-zoom: cubic-bezier(0.25, 1, 0.5, 1);
  --g26-duration: 0.6s;
}
/* SP（width <= 840px）: TextSize をモード値へ */
@media (width <= 840px) {
  :root {
    --TextSize-Heading-XXL: 1.75rem; /* SP モード値（PC40 → SP28）。欠落していたため追加（Figma 119:7444 実測）*/
    --TextSize-Heading-XL: 1.5rem;
    --TextSize-Heading-L: 1.5rem;
    --TextSize-Heading-M: 1.25rem;
    --TextSize-Heading-S: 1.25rem;
    --TextSize-Heading-XS: 1rem; /* SP モード値（PC20 → SP16）。欠落していたため追加 */
    --TextSize-Heading-XXS: 0.875rem; /* SP モード値（PC18 → SP14）。欠落していたため追加（Figma 119:7444 / 66:832 実測）*/
    --TextSize-Body-L: 1rem;
    --TextSize-Body-M: 0.875rem;
    --TextSize-Body-S: 0.75rem;
    --TextSize-Body-XS: 0.625rem;
  }
}
/* PC（width > 840px）: 左右padding・セクション余白を拡大 */
@media (width > 840px) {
  :root {
    --g26-u: calc(100vw / 1440); /* 流体単位の PC 基準（ISSUE行4）*/
    --g26-header-band: 89px; /* PC 透過ヘッダーの白ロゴ帯の高さ */
    --g26-anchor-offset: 158px; /* PC: 従来のレガシー common.js と同値。ヘッダー実測 110.3 に対し
                                   余裕48で、これまでの見え方（指摘の無かった状態）を維持する（FB74）*/
    --g26-pad-x: 7.777777777777778vw;       /* 1440基準112px・リキッド（ISSUE行43。横余白を画面幅に比例）*/
    --g26-section-y: var(--Spacing-Fixed-160);  /* 160px（縦固定）*/
  }
}
/*
 * g26-l-main（レイアウト）: ページの <main> ラッパ。
 * h-header（既存ヘッダー）が position:absolute のため、その高さ分だけ
 * コンテンツを下げて潜り込みを防ぐ。値は実ヘッダー高に合わせる（PC155/SP66）。
 * ※構造オフセットのため px（ヘッダー高と一致させる）。
 */
.g26-l-main {
  padding-block-start: 66px; /* SP ヘッダー高 */
  -webkit-font-smoothing: antialiased; /* 文字を細く滑らかに（Mac/Chrome/Safari）*/
  -moz-osx-font-smoothing: grayscale; /* Firefox(Mac) 対応 */
}
@media (width > 840px) {
  .g26-l-main {
    padding-block-start: 155px; /* PC ヘッダー高（logo+nav） */
  }
  /* 透過ヘッダー（h-header--transparent）: 白ロゴ帯の下からヒーロー開始（ナビはヒーローに重なる）*/
  .g26-l-main--bleed {
    padding-block-start: var(--g26-header-band); /* 89px */
  }
}
/*
 * 既存ヘッダー（class: h-header / common.css 由来）への上書き。
 * ヒーローにヘッダーを重ねる画面（TOP の PC）で透過ヘッダーにする modifier。
 * Figma: PC/トップ/グロナビ（341:2477 / 341:2490）。SP は対象外（既存の不透明ヘッダー）。
 *
 * スコープ: 透過は「固定化前」のみ有効にしたいので :not(.is-gray-nav) を付与。
 *   スクロールで is-gray-nav（position:fixed + 白背景）が付くと透過上書きは外れ、
 *   common.css 既定の不透明ヘッダー（白地・暗い文字）に戻る。
 *
 * 仕様（PC のみ / 固定化前）:
 *   - h-header           : 背景を透過
 *   - h-header_title     : 白背景（暗いロゴを視認）。旧 boxPC の margin-top 分を padding-block-end に移設
 *   - h-header__boxPC    : margin 廃止 / 上罫線なし（グラデ背景は持たない）
 *   - 上位ナビ文字        : 白（ヒーロー側のグラデ上で視認）
 *
 * グラデ（黒30%→透明・高さ160）は Figma 117:7409 の "Filter" 1枚のみで、
 * 実装ではヒーロー側（.g26-c-hero__slides::before）が担う。ナビ行はその内側に
 * 完全に収まる（nav x17..1423/y89..154 ⊂ hero x16..1424/y89〜）ため、
 * ここで重ねると黒 30%→約 49% の二重掛けになりデザインより濃くなる。
 *
 * ※命名は既存クラスの modifier を踏襲（g26- は付けない）。
 */
@media (width > 840px) {
  .h-header--transparent:not(.is-gray-nav) {
    background-color: transparent;
  }

  /* ロゴ: 白背景 + 旧 boxPC の margin-top(27px) を padding-block-end へ */
  .h-header--transparent:not(.is-gray-nav) .h-header_title {
    background-color: var(--Role-Background-Default); /* #fff */
    padding-block-end: 27px;
  }

  /* ナビ行: margin 廃止 / 罫線なし（グラデはヒーロー側 __slides::before が担う。上記コメント参照）*/
  .h-header--transparent:not(.is-gray-nav) .h-header__boxPC {
    margin-block-start: 0;
    border-block-start: none;
  }

  /* 上位ナビ項目の文字を白に（ドロップダウン内は対象外）*/
  .h-header--transparent:not(.is-gray-nav) .btn_pc_listItem > .btn_pc_submenu {
    color: var(--Role-Text-onEmphasis); /* #fff */
  }

  /* 左右端をヒーローに揃える（FB行3「両端がズレている」）。
     common.css の .h-header__inner は width:calc(100% - 34px)（左右17px固定）だが、
     ヒーロー側のガターは vw(16) のリキッド。幅が広いほど差が開く（1920px で約4.3px）ため、
     透過ヘッダー時のみヒーローと同じ計算に合わせる。*/
  .h-header--transparent:not(.is-gray-nav) .h-header__inner {
    inline-size: calc(100% - 1.1111111111111112vw * 2);
    margin-inline: auto;
  }
}
/*
 * 既存フッター（class: f-footer / common.css 由来）への 2026 上書き。
 * TOP の 2026 デザインでは本文とフッターの間に余白が必要なため、フッター上部に
 * padding-block-start を付与する modifier を用意する（ヘッダーの h-header--transparent と同方針）。
 *
 * スコープ:
 *   2026 バンドル（top/style.css）は front page でのみ読み込まれる（header.php）。
 *   よって .f-footer--2026 のスタイルも実質 TOP 限定。他ページへ展開する際はこの
 *   modifier を付与すればよい（= 「新しいバージョンに切替できる」状態）。
 *
 * ※命名は既存クラスの modifier を踏襲（g26- は付けない）。
 */
@media (width > 840px) {
  .f-footer--2026 {
    padding-block-start: var(--Spacing-Fixed-48); /* PC */
  }
}
/*
 * Icon 基盤（参考: sony-recruit 方式）
 * - 正本は src-2026/icons/<name>.svg → ビルドで 1 枚の symbol スプライト
 *   dist/inc/svg/2026/icons.svg に合成。
 * - 使用: <svg class="g26-c-icon ..."><use href="/inc/svg/2026/icons.svg#<name>"></use></svg>
 * - サイズは 1em（font-size で制御）、色は currentColor で文字色に追従。
 */
.g26-c-icon {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  fill: currentColor; /* 塗りアイコン用。線アイコンは SVG 側 stroke=currentColor */
}
/*
 * Heading コンポーネント（Figma: Component/Heading 358:2966）
 * - g26-c-page-title : H1（和文タイトル → 英字サブ）
 * - g26-c-heading    : H2（英字ラベル → 和文タイトル → 説明文）
 * - g26-c-heading-top: H3/Top（上罫線 + 2カラム：英字ラベル | タイトル+説明）
 *
 * トークンは Figma 変数名（--Role-* / --TextSize-* / --Font-* …）。サイズは
 * TextSize トークンが PC/SP を内包するので、コンポーネント側で size の分岐は不要。
 *
 * leading-trim:
 *   見出しは Figma の cap-baseline 基準に合わせるため text-box-trim を使う。
 *   対応(Chrome133+/Safari18.2+): text-box: trim-both cap alphabetic
 *   非対応(Firefox等):           margin-block: var(--leading-trim) で近似
 *   ※ trim で行ボックスが cap 高さに縮むため、積み重ねは flex column + gap / margin で制御。
 */
/* 見出しテキスト共通: cap-baseline トリム（@supports 分岐） */
.g26-c-page-title__title,
.g26-c-page-title__en,
.g26-c-heading__en,
.g26-c-heading__title,
.g26-c-heading__desc,
.g26-c-heading-top__en,
.g26-c-heading-top__title,
.g26-c-heading-top__desc {
  letter-spacing: var(--LetterSpacing-Default);
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-page-title__title,
  .g26-c-page-title__en,
  .g26-c-heading__en,
  .g26-c-heading__title,
  .g26-c-heading__desc,
  .g26-c-heading-top__en,
  .g26-c-heading-top__title,
  .g26-c-heading-top__desc {
    margin-block: var(--leading-trim);
  }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-page-title__title,
  .g26-c-page-title__en,
  .g26-c-heading__en,
  .g26-c-heading__title,
  .g26-c-heading__desc,
  .g26-c-heading-top__en,
  .g26-c-heading-top__title,
  .g26-c-heading-top__desc {
    text-box: trim-both cap alphabetic;
  }
}
/* ===== H1: page-title ===== */
.g26-c-page-title {
  /* 本プロジェクト方針: コンポーネントは上マージン(margin-block-start)を持つ。
     Figma コンポーネント(128:8031/128:7602)の padTop = 40(SP)/64(PC)。*/
  margin-block-start: var(--Spacing-Fixed-40); /* 40（SP）*/
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-20); /* 20（SP）*/
}
.g26-c-page-title__title {
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-XL);
  line-height: var(--LineHeight-Heading);
  color: var(--Role-Text-Primary);
}
.g26-c-page-title__en {
  font-family: var(--Font-EN);
  font-size: var(--TextSize-Body-L);
  line-height: var(--LineHeight-Heading);
  letter-spacing: 0.05em; /* Figma: H1 英字のみ 5% */
  text-transform: uppercase;
  color: var(--Role-Text-Secondary);
}
@media (width > 840px) {
  .g26-c-page-title {
    margin-block-start: var(--Spacing-Fixed-64);
    gap: var(--Spacing-Fixed-32);
  }
}
/* ===== H2: heading（英字→タイトルは密着、説明は離す）===== */
.g26-c-heading {
  /* 上マージン（仮: セクション見出しとしてセクション余白を流用 PC160/SP64）
     ※実セクション確定時に要調整 */
  margin-block-start: var(--g26-section-y);
  display: flex;
  flex-direction: column;
}
.g26-c-heading__en {
  font-family: var(--Font-EN);
  font-size: var(--TextSize-Body-L);
  line-height: var(--LineHeight-Heading);
  text-transform: uppercase;
  color: var(--Role-Text-Secondary);
}
.g26-c-heading__title {
  /* Figma H2: en→title gap 40(PC)/32(SP)（cap-to-cap, text-box-trim 前提）*/
  margin-block-start: var(--Spacing-Fixed-32); /* 32（SP）*/
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-L);
  line-height: var(--LineHeight-Heading);
  color: var(--Role-Text-Primary);
}
.g26-c-heading__desc {
  margin-block-start: var(--Spacing-Fixed-40); /* 40（SP）*/
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M);
  line-height: var(--LineHeight-Body-200);
  color: var(--Role-Text-Primary);
}
@media (width > 840px) {
  .g26-c-heading__title { margin-block-start: var(--Spacing-Fixed-40); }
  .g26-c-heading__desc { margin-block-start: var(--Spacing-Fixed-48); }
}
/* ===== H3/Top: heading-top ===== */
.g26-c-heading-top {
  /* セクション間の上マージンは使う側（ページ/セクション）が所有する。
     本コンポーネントは上罫線 + 罫線↔テキストの内側 padding のみを持つ。
     （旧: 仮の margin-block-start 80/48 を内包 → 文脈ごとに値が変わり辻褄が合わなくなるため撤廃）*/
  border-block-start: 1px solid var(--Role-Border-Default);
  padding-block-start: var(--Spacing-Fixed-24); /* 24（SP: 罫線 ⇔ ラベル。Figma 358:3292 Frame gap24）*/
}
.g26-c-heading-top__en {
  font-family: var(--Font-EN);
  font-size: var(--TextSize-Body-S); /* 14 / SP12 */
  line-height: var(--LineHeight-Heading);
  color: var(--Role-Text-Secondary);
}
.g26-c-heading-top__title {
  margin-block-start: var(--Spacing-Fixed-64); /* 64（SP: ラベル → タイトル。Figma 358:3292 外側 gap64）*/
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-M);
  line-height: var(--LineHeight-Heading);
  color: var(--Role-Text-Primary);
}
.g26-c-heading-top__desc {
  margin-block-start: var(--Spacing-Fixed-32); /* 32（SP: タイトル → 説明。Figma gap32）*/
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M);
  line-height: var(--LineHeight-Body-200);
  color: var(--Role-Text-Primary);
}
@media (width > 840px) {
  .g26-c-heading-top {
    padding-block-start: var(--Spacing-Fixed-80);
  }
  .g26-c-heading-top__row {
    display: flex;
    gap: var(--Spacing-32);
  }
  .g26-c-heading-top__en {
    flex: none;
    width: calc(176 / 1216 * 100%);
  }
  .g26-c-heading-top__body { flex: 1; }
  .g26-c-heading-top__title { margin-block-start: 0; }
  .g26-c-heading-top__desc { margin-block-start: var(--Spacing-Fixed-40); } /* PC: タイトル → 説明 40（Figma 358:3276 右カラム gap40）*/
}
/* FB69: PC 横並び見出しで __title の PC上書き(margin-block-start:0)により、トリム非対応
   （Firefox等）ではタイトルの cap 上端がラベル(__en)より下がる。両者を cap 上端で揃える
   （片側リーディング分だけ引き上げ）。Chrome/Safari は trim で揃うため非対応時のみ。*/
@supports not (text-box: trim-both cap alphabetic) {
  @media (width > 840px) {
    .g26-c-heading-top__en,
    .g26-c-heading-top__title { margin-block-start: calc((1cap - 1lh) / 2); }
  }
}
/* 罫線なし版（上罫線・内側 padding を持たない。上余白はセクション側で制御）。
   ※ @media より後に置き、PC でも上書きされるようにする */
.g26-c-heading-top--no-border {
  border-block-start: 0;
  padding-block-start: 0;
}
/*
 * Note List（Figma: Component/Text/ListItem/Note）
 * 行頭に ※、muted カラー。本文 14/12・行間 1.5。注釈用。
 */
.g26-c-notes {
  margin-block-start: var(--Spacing-Fixed-24); /* 24（SP）/ PC32 */
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-16); /* 項目間 16（Figma 97-6465 Article/Note/PC）*/
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S); /* 14 / SP12 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Secondary);
}
/* li をブロック化＋マーカー(※)絶対配置で text-box-trim を本文に効かせる */
.g26-c-notes__item {
  position: relative;
  padding-inline-start: calc(16px + var(--Spacing-Fixed-4)); /* マーカー列16 + gap4 */
}
.g26-c-notes__item::before {
  content: "※";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 16px;   /* マーカー列 */
  line-height: 1;      /* 上の half-leading を除去（非対応ブラウザでのズレ低減）*/
  text-align: center;
}
/* leading-trim（Figma の text-box-trim）。本文だけでなくマーカー(::before)も cap で揃える */
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-notes__item,
  .g26-c-notes__item::before { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-notes__item { margin-block: var(--leading-trim); }
  /* FB67: トリム非対応（Firefox等）では item 上端が cap ではなく行ボックス上端になり、
     top:0 起点の ※ マーカーが上へズレる。※は line-height:1 を持つため calc((1lh-1cap)/2) では
     1lh=1em となり補正不足（木村FB: やや上にズレる）。行ボックスを親と同一にして top:0 に戻すと
     ※のベースラインが本文1行目と一致する。 */
  .g26-c-notes__item::before {
    line-height: inherit;
    inset-block-start: 0;
  }
}
/* 注釈内のテキストリンクは下線を付ける（FB行20。色は文脈を継承）*/
.g26-c-notes__item a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
/* caution（赤注記・Figma Role/Text/Caution）。※(::before)・本文・内包リンクは currentColor を継承して赤に揃う */
.g26-c-notes__item--caution { color: var(--Role-Text-Caution, #e43030); }
@media (width > 840px) {
  .g26-c-notes { margin-block-start: var(--Spacing-Fixed-32); }
}
@media (width <= 840px) {
  .g26-c-notes__item {
    padding-inline-start: calc(14px + var(--Spacing-Fixed-4));
  }
  .g26-c-notes__item::before { inline-size: 14px; }
}
/*
 * Bullet List（Figma: Component/Text/ListItem/Bullet）
 * 行頭に 4px ドット（muted）、16px のマーカー列 + gap 4px。本文 16/14・行間 1.75。
 */
.g26-c-list {
  margin-block-start: var(--Spacing-Fixed-24); /* 24（SP）/ PC32 */
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-8); /* 項目間（仮）*/
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M); /* 16 / SP14 */
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
/* li をブロック化（テキストを直接の inline 内容に）し、マーカーは絶対配置。
   こうすることで text-box-trim が本文に効き、項目間 gap が cap 基準になる。
   本文は padding でぶら下げインデント（2行目以降もマーカー右に揃う）。 */
.g26-c-list__item {
  position: relative;
  padding-inline-start: calc(16px + var(--Spacing-Fixed-4)); /* マーカー列16 + gap4 */
}
.g26-c-list__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 16px;   /* マーカー列（Figma PC 97:5522: 16×12 の circle r=2）*/
  block-size: 1cap;    /* trim 後の1行目（cap 高）に合わせ、ドットを cap 中央へ */
  /* Figma と同じ SVG 円（r=2 / #8C8984）。radial-gradient はフェード分ひと回り大きく見えるため不可 */
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4"%3E%3Ccircle cx="2" cy="2" r="2" fill="%238C8984"/%3E%3C/svg%3E') no-repeat center / 4px 4px;
}
/* leading-trim（Figma の text-box-trim:trim-both / edge cap alphabetic）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-list__item { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-list__item { margin-block: var(--leading-trim); }
  /* FB67: トリム非対応（Firefox等）では li 上端が cap ではなく行ボックス上端になり、
     top:0 起点の 1cap マーカーが上へズレる。行ボックス中央（≒cap中央）まで下げて揃える。 */
  .g26-c-list__item::before { inset-block-start: calc((1lh - 1cap) / 2); }
}
@media (width > 840px) {
  .g26-c-list { margin-block-start: var(--Spacing-Fixed-32); }
}
@media (width <= 840px) {
  /* Figma SP(128:8488): マーカー列は 14px（PC16）。ドット径・gap4 は共通 */
  .g26-c-list__item { padding-inline-start: calc(14px + var(--Spacing-Fixed-4)); }
  .g26-c-list__item::before { inline-size: 14px; }
}
/*
 * Label（Figma: Component/Text/Label）
 * 枠付きの小さなラベルチップ。text-box-trim で cap 高さに詰めて枠がテキストを包む。
 */
.g26-c-label {
  display: inline-block;
  /* Figma(Label/PC 235:3305)は枠線が内側でチップ高25px（pad8 + cap + pad8）。
     CSSのborderは外付きなので padding から1px引いて高さを一致させる */
  padding-block: calc(var(--Spacing-Fixed-8) - 1px);
  padding-inline: calc(var(--Spacing-8) - 1px);
  border: 1px solid var(--Role-Border-Default);
  border-radius: 2px;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-XS);
  line-height: 1; /* 単一行チップ。text-box 非対応でも枠が詰まるよう 1 */
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-label { text-box-edge: cap alphabetic; } /* no-op 環境では padding がそのまま */
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-label { text-box: trim-both cap alphabetic; }
}
@media (width <= 840px) {
  .g26-c-label { padding-block: calc(0.375rem - 1px); padding-inline: calc(0.375rem - 1px); }
}
/*
 * Button（Figma: Component/Link/Button）
 * pill 形。Color(default/emphasis/on-emphasis) × Size(medium/large) × Icon(arrow/blank)。
 * - Medium: 48px(SP40) / Large: 64px(SP56)
 * - アイコンは stroke=currentColor で文字色に追従
 * - 注: Figma の Large は地が #4e4d4b（= --emphasis）。Large CTA は `--large --emphasis` で組む。
 * hover（news-item / text-link と同仕様）:
 *  - テキスト: 上下スワップ（移動 + 透明度フェード + scaleY ロール）
 *  - 矢印   : __icon を overflow box にして2本で入替（右へ抜け / 左から入る・75ms遅れ・0.5s）
 *  - hover 端末かつ prefers-reduced-motion 許容時のみ発火
 */
.g26-c-button {
  /* 入替の余白（roll の間）と縦つぶし量（回転感）*/
  --g26-btn-swap-gap: 0.4em;
  --g26-btn-swap-scale: 0.7;
  display: inline-flex;
  align-items: center;
  gap: var(--Spacing-Fixed-24); /* 24（テキスト↔アイコン。左右余白と揃えて固定）*/
  min-block-size: 48px;
  padding-inline: var(--Spacing-Fixed-24) var(--Spacing-Fixed-20); /* L24 R20（固定）*/
  border-radius: 9999px;
  background-color: var(--Role-Background-Subtle); /* Default: #f1efeb */
  color: var(--Role-Text-Primary);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M); /* 16 / SP14 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  font-feature-settings: "palt" 1; /* Figma 同様 日本語プロポーショナル詰め */
  white-space: nowrap; /* CTA ラベルは常に1行（固定幅ボタンでの折返し防止）*/
  text-decoration: none;
}
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す。hover 演出は transform/opacity のみで表現 */
.g26-c-button:hover {
  opacity: 1;
}
/* テキスト: __text を基準に __text-inner（原本）と複製を重ねる。
   inline-flex で中身の実高にぴったり合わせる（line-height 行ボックスで縦ズレしないよう）*/
.g26-c-button__text {
  position: relative;
  display: inline-flex;
}
.g26-c-button__text-inner {
  display: inline-block;
  white-space: nowrap;
}
.g26-c-button__text-inner--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-btn-swap-gap));
  inset-inline-start: 0;
  opacity: 0;
  transform: scaleY(var(--g26-btn-swap-scale));
  pointer-events: none;
}
/* 矢印コンベア: __icon を overflow box（1em）にして2本を入替 */
.g26-c-button__icon {
  /* サイズは font-size（SVG=1em / 基盤は g26-c-icon.css）。色は currentColor で追従 */
  position: relative;
  overflow: hidden;
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  font-size: 1rem;
}
.g26-c-button__arrow {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
}
.g26-c-button__arrow--follow {
  transform: translateX(-100%); /* 左外に待機 */
}
/* leading-trim（Figma の text-box-trim）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-button__text-inner { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-button__text-inner { margin-block: var(--leading-trim); }
}
/* hover: テキストの上下スワップは廃止し、背景色を変更（ISSUE行3 の全体hover方針）
   #F1EFEB(Default)→#E7E4DF / #FFF(on-emphasis)→#E7E4DF / #4E4D4B(emphasis)→#64615D */
@media (hover: hover) {
  .g26-c-button:hover {
    background-color: #e7e4df;
  }
  .g26-c-button--emphasis:hover {
    background-color: #64615d;
  }
}
/* hover インタラクション（ポインタ端末 + 動きを許容する設定のときのみ）*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-button {
    transition: background-color 0.3s ease;
  }
  .g26-c-button__arrow {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-button__arrow--follow {
    transition-delay: 75ms;
  }
  .g26-c-button:hover .g26-c-button__arrow--lead {
    transform: translateX(100%); /* 右へ抜ける */
  }
  .g26-c-button:hover .g26-c-button__arrow--follow {
    transform: translateX(0); /* 左から中央へ */
  }
}
/* Color */
.g26-c-button--emphasis {
  background-color: var(--Role-Background-Emphasis); /* #4e4d4b */
  color: var(--Role-Text-onEmphasis); /* #fff */
}
.g26-c-button--on-emphasis {
  background-color: var(--Role-Background-Default); /* #fff（濃色面で使用）*/
  color: var(--Role-Text-Primary);
}
/* Size: Large */
.g26-c-button--large {
  gap: var(--Spacing-Fixed-40);
  min-block-size: 64px;
  padding-inline: var(--Spacing-Fixed-40) var(--Spacing-Fixed-32); /* L40 R32（固定）*/
  font-size: var(--TextSize-Body-L); /* 18 / SP16 */
}
@media (width <= 840px) {
  .g26-c-button {
    gap: var(--Spacing-Fixed-20);
    min-block-size: 40px;
    padding-inline: var(--Spacing-Fixed-20) var(--Spacing-Fixed-16); /* L20 R16（固定）*/
  }
  .g26-c-button__icon {
    font-size: 0.875rem;
  }
  .g26-c-button--large {
    gap: var(--Spacing-Fixed-24);
    min-block-size: 56px;
    padding-inline: var(--Spacing-Fixed-32) var(--Spacing-Fixed-24); /* L32 R24（固定）*/
  }
}
/*
 * LinkIcon（Figma: Component/Link/LinkIcon）
 * アイコンを内包する pill バッジ。TextLink 内や単体で使用。
 * Color: Default(#f1efeb地) / --on-emphasis(白地)。アイコン色は常に #4e4d4b。
 * 寸法: 32x16（SP 28x14）、アイコン 12px（SP 10px）。
 */
.g26-c-link-icon {
  /* 矢印コンベアの可動窓・移動距離（ピル全幅32ではなくアイコン幅相当。
     ボタンの16px移動と揃える = naturehood 実測レンジ。ISSUE行3 FB）*/
  --g26-arrow-travel: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 16px;
  border-radius: 9999px;
  background-color: var(--Role-Background-Subtle); /* #f1efeb */
  color: var(--Role-Icon-Default); /* アイコン currentColor #4e4d4b */
}
.g26-c-link-icon--on-emphasis {
  background-color: var(--Role-Background-Default); /* 白（濃色面で使用）*/
}
.g26-c-link-icon .g26-c-icon {
  font-size: 0.75rem;
}
@media (width <= 840px) {
  .g26-c-link-icon {
    --g26-arrow-travel: 14px;
    inline-size: 28px;
    block-size: 14px;
  }
  .g26-c-link-icon .g26-c-icon {
    font-size: 0.625rem;
  }
}
/*
 * TextLink（Figma: Component/Link/TextLink）
 * リンクテキスト + LinkIcon バッジ。Color: Default / --on-emphasis（文字を白に）。
 * gap 16（SP 12）、本文 16/14。
 * hover（news-item と同仕様）:
 *  - テキスト: 上下スワップ（移動 + 透明度フェード + scaleY ロール）
 *  - 矢印   : LinkIcon(pill) 内で 1本目が右へ抜け、2本目が左から入る（duration 0.5s / 2本目 delay 75ms）
 *  - hover 端末かつ prefers-reduced-motion 許容時のみ発火
 */
.g26-c-text-link {
  /* 入替の余白（roll の間）と縦つぶし量（回転感）*/
  --g26-tl-swap-gap: 0.4em;
  --g26-tl-swap-scale: 0.7;
  display: inline-flex;
  align-items: center;
  gap: var(--Spacing-16);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M); /* 16 / SP14 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
  text-decoration: none;
}
.g26-c-text-link--on-emphasis {
  color: var(--Role-Text-onEmphasis); /* 文字色（バッジは link-icon 側で制御）*/
}
/* --back: 「戻る/前へ」リンク。text-link の逆向き（アイコンを左・矢印を左向き・コンベアも左方向）。*/
.g26-c-text-link--back {
  flex-direction: row-reverse; /* アイコンを左に */
  /* 幅が伸びる文脈（sidebar の flex-column stretch 等）でも左パックにする
     （row-reverse では flex-end が視覚的な左）*/
  justify-content: flex-end;
}
/* --back の反転は、アニメーションする .g26-c-icon ではなく動かない「窓」に scaleX(-1) を掛ける。
   アイコン側は hover で translateX する。同じ要素に反転を置くと transform ごと上書きされて
   反転が外れ、hover で矢印が右向きに戻ってしまう。窓を反転すれば内側の translate も鏡像になり、
   base（順方向）の移動ルールをそのまま流用できる（コンベアが自動で左方向になる）。*/
.g26-c-text-link--back .g26-c-text-link__arrow {
  transform: scaleX(-1); /* 矢印を左向きに＋内側の移動方向も鏡像化 */
}
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す。hover 演出は transform/opacity のみで表現 */
.g26-c-text-link:hover {
  opacity: 1;
}
/* テキスト: __text を基準に __text-inner（原本）と複製を重ねる。
   inline-flex で中身の実高にぴったり合わせる（inline-block だと line-height ぶんの行ボックスが付き、
   クローンの top:100% と translateY(実高) がズレるため）。*/
.g26-c-text-link__text {
  position: relative;
  display: inline-flex;
}
.g26-c-text-link__text-inner {
  display: inline-block;
  white-space: nowrap;
}
/* 複製: 1行ぶん + 余白だけ下に、縦つぶし・不可視で待機 */
.g26-c-text-link__text-inner--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-tl-swap-gap));
  inset-inline-start: 0;
  opacity: 0;
  transform: scaleY(var(--g26-tl-swap-scale));
  pointer-events: none;
}
/* 矢印コンベア: LinkIcon(pill) を overflow box にして2本を入替（text-link 配下のみ）*/
.g26-c-text-link .g26-c-link-icon {
  position: relative;
  overflow: hidden;
}
/* 矢印の可動窓: ピル全幅ではなくアイコン幅相当（--g26-arrow-travel）でクリップし、
   移動距離をボタンと揃える（ISSUE行3 FB）。動くのは窓内の svg */
.g26-c-text-link__arrow {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  margin-inline-start: calc(var(--g26-arrow-travel, 16px) / -2);
  inline-size: var(--g26-arrow-travel, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.g26-c-text-link__arrow--follow .g26-c-icon {
  transform: translateX(calc(-1 * var(--g26-arrow-travel, 16px))); /* 窓の左外に待機（--back は窓が反転済みなので視覚的には右外）*/
}
/* leading-trim: Figma の cap-baseline 基準に合わせ、バッジと光学的に中央を揃える。
   対応(Chrome133+/Safari18.2+): text-box / 非対応(Firefox等): margin-block 近似 */
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-text-link__text-inner {
    margin-block: var(--leading-trim);
  }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-text-link__text-inner {
    text-box: trim-both cap alphabetic;
  }
}
/* hover: テキストは Opacity 70% に（上下スワップは廃止。ISSUE行3 の全体hover方針）*/
@media (hover: hover) {
  .g26-c-text-link:hover .g26-c-text-link__text {
    opacity: 0.7;
  }
}
/* hover インタラクション（ポインタ端末 + 動きを許容する設定のときのみ）*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-text-link__text {
    transition: opacity 0.3s ease;
  }
  .g26-c-text-link__arrow .g26-c-icon {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-text-link__arrow--follow .g26-c-icon {
    transition-delay: 75ms;
  }
  .g26-c-text-link:hover .g26-c-text-link__arrow--lead .g26-c-icon {
    transform: translateX(var(--g26-arrow-travel, 16px)); /* 右へ抜ける */
  }
  .g26-c-text-link:hover .g26-c-text-link__arrow--follow .g26-c-icon {
    transform: translateX(0); /* 左から中央へ（--back は窓の反転で右から中央へ）*/
  }
}
@media (width <= 840px) {
  .g26-c-text-link {
    gap: var(--Spacing-12);
  }
}
/*
 * g26-c-anchor-nav — ページ内アンカーのナビ行（テキスト + 下矢印バッジ、列間に区切り線）。
 * Figma: PC 60:260 / SP 88:2881
 *  - PC: 4等幅を横並び（col-gap 48）。列間に区切り線（1px / h24）。
 *  - SP: 2列グリッド×2行（col-gap 16 / row-gap 16）。列間に区切り線。
 * 区切り線は ::before（h24・中央）で生成し、レイアウトに応じて表示を切替。
 * バッジ=g26-c-link-icon（arrow-down）。
 */
.g26-c-anchor-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Figma(60:260 / 90:3768): アイテム⇔線・線⇔アイテムが各48 → アイテム間の総距離 97（48+1+48）*/
  column-gap: calc(calc(96 * var(--g26-u)) + 1px);
  align-items: center;
}
.g26-c-anchor-nav__item {
  /* 入替の余白（roll の間）と縦つぶし量（回転感）*/
  --g26-anchor-swap-gap: 0.4em;
  --g26-anchor-swap-scale: 0.7;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--Spacing-16);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M); /* 16 / SP14 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
  text-decoration: none;
}
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す。hover 演出は transform/opacity のみで表現 */
.g26-c-anchor-nav__item:hover {
  opacity: 1;
}
/* テキスト: __text を基準に __text-inner（原本）と複製を重ねる。
   flex で中身の実高にぴったり合わせる（line-height 行ボックスで縦ズレしないよう）*/
.g26-c-anchor-nav__text {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-inline-size: 0;
  /* 幅が足りない時はテキストを折り返す（アイコンに被せない。Figma 842:2441 / ISSUE行20・39）*/
}
.g26-c-anchor-nav__text-inner {
  display: inline-block;
}
.g26-c-anchor-nav__text-inner--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-anchor-swap-gap));
  inset-inline-start: 0;
  opacity: 0;
  transform: scaleY(var(--g26-anchor-swap-scale));
  pointer-events: none;
}
/* 矢印コンベア（縦）: LinkIcon(pill) を overflow box にして2本を上下入替（arrow-down なので下へ抜け／上から入る）*/
.g26-c-anchor-nav__item .g26-c-link-icon {
  position: relative;
  overflow: hidden;
}
.g26-c-anchor-nav__arrow {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g26-c-anchor-nav__arrow--follow {
  transform: translateY(-100%); /* 上に待機 */
}
/* leading-trim（Figma の text-box-trim）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-anchor-nav__text-inner { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-anchor-nav__text-inner { margin-block: var(--leading-trim); }
}
/* hover: テキストは Opacity 70% に（上下スワップは廃止。ISSUE行3 の全体hover方針）*/
@media (hover: hover) {
  .g26-c-anchor-nav__item:hover .g26-c-anchor-nav__text {
    opacity: 0.7;
  }
}
/* hover インタラクション（ポインタ端末 + 動きを許容する設定のときのみ）*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-anchor-nav__text {
    transition: opacity 0.3s ease;
  }
  .g26-c-anchor-nav__arrow {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-anchor-nav__arrow--follow {
    transition-delay: 75ms;
  }
  .g26-c-anchor-nav__item:hover .g26-c-anchor-nav__arrow--lead {
    transform: translateY(100%); /* 下へ抜ける */
  }
  .g26-c-anchor-nav__item:hover .g26-c-anchor-nav__arrow--follow {
    transform: translateY(0); /* 上から中央へ */
  }
}
/* 区切り線（列の左側・ギャップ中央に h24）*/
.g26-c-anchor-nav__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * calc(48 * var(--g26-u)) - 1px); /* 前アイテムまで48・次アイテムまで48（線幅1px）*/
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 1px;
  block-size: 24px;
  background-color: var(--Role-Border-Default);
}
.g26-c-anchor-nav__item:first-child::before {
  display: none; /* 先頭は線なし */
}
@media (width <= 840px) {
  .g26-c-anchor-nav {
    /* Figma 88:2881: 列幅147固定×2 + 列間33（16+線1+16）＝ナビ幅327。
       1fr の min-content 下限で長文（キッチンレイアウト）が左列を押し広げるため minmax(0,1fr) で均等化 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--Spacing-32) + 1px);
    row-gap: var(--Spacing-Fixed-16);
  }
  /* Figma の行ボックスは 24px（border 高に一致）。leading-trim でテキスト箱が詰まり
     item が 14px に潰れるため、min 24px を与えて border どうしの縦間隔を 16 に保つ。
     gap は 0（Figma SP は justify-between のみ。固定gapがあると列幅147に収まらない）*/
  .g26-c-anchor-nav__item {
    min-block-size: 24px;
    gap: 0;
  }
  .g26-c-anchor-nav__item::before {
    inset-inline-start: calc(-1 * calc(16 * var(--g26-u)) - 1px); /* 前アイテムまで16・次アイテムまで16（線幅1px）*/
  }
  /* 2列: 左列(1,3)は線なし、右列(2,4)に線 */
  .g26-c-anchor-nav__item:nth-child(odd)::before {
    display: none;
  }
  .g26-c-anchor-nav__item:nth-child(even)::before {
    display: block;
  }
}
/*
 * g26-c-news-item — 日付 + 本文 + 矢印アイコンのニュース行（明色ピル）
 * Figma: PC 97:7271 / SP 346:5431
 * 構造: .g26-c-news-item（ピル）> __body（__row ×2: 原本 + 複製）+ __icon（__arrow ×2）
 *  - PC: 内容幅の inline-flex、1行（nowrap）、外gap24 / px24 / min-h48、内gap16、Body-S(14)
 *  - SP: 横幅いっぱい、本文折返し、外gap16 / px16 / py12、内gap12、Body-XS(10)
 *  - 日付は EN セリフ体（Adobe Garamond）。本文は JP Go。palt 有効。
 * hover（参考: naturehood-pj.com/zinen）:
 *  - テキスト: 上下スワップ（原本が上へ抜け、複製が下から入る）
 *  - 矢印   : 1本目が右へ抜け、2本目が左から入る（duration 0.5s / 2本目 delay 75ms）
 *  - hover 端末のみ・prefers-reduced-motion では無効（静止表示）
 */
.g26-c-news-item {
  /* テキスト上下スワップで、出ていく行と入ってくる行の間に空ける余白（roll の間） */
  --g26-news-swap-gap: 0.5em;
  /* 入替時の縦つぶし量（回転＝ロールっぽさ）。1=つぶさない / 小さいほど回転感が強い */
  --g26-news-swap-scale: 0.7;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--Spacing-24); /* 24（本文群 ⇔ アイコン）*/
  min-block-size: 48px;
  padding-inline: var(--Spacing-24);
  border-radius: 30px;
  background-color: var(--Role-Background-Subtle); /* #f1efeb */
  color: var(--Role-Text-Primary);
  letter-spacing: var(--LetterSpacing-Default); /* 0.1em */
  text-decoration: none;
}
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す。hover 演出は transform のみで表現する */
.g26-c-news-item:hover {
  opacity: 1;
}
/* 本文（上下スワップの基準）。
   ※ overflow:hidden は使わない（text-box-trim で詰まった行高だとグリフ上下が切れるため）。
     代わりに、入替時は「移動＋透明度フェード」で消す/現すことではみ出しを見せない。 */
.g26-c-news-item__body {
  position: relative;
  min-inline-size: 0;
  font-size: var(--TextSize-Body-S);
  line-height: var(--LineHeight-Heading);
  white-space: nowrap; /* PC は1行 */
}
.g26-c-news-item__row {
  display: flex;
  align-items: center;
  gap: var(--Spacing-16); /* 16（日付 ⇔ 本文）*/
}
/* 複製行: 1行ぶん + 余白だけ下に待機。待機中は不可視（hover で上昇しながらフェードイン）*/
.g26-c-news-item__row--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-news-swap-gap));
  inset-inline-start: 0;
  inline-size: 100%;
  opacity: 0;
  transform: scaleY(var(--g26-news-swap-scale)); /* 待機中は縦につぶれている（hover で伸びて現れる）*/
  pointer-events: none; /* 装飾の複製。リンクの当たり判定を広げない */
}
.g26-c-news-item__date {
  flex: none;
  font-family: var(--Font-EN); /* Adobe Garamond */
  font-feature-settings: "palt" 1;
}
.g26-c-news-item__text {
  flex: none;
  font-family: var(--Font-JP-Go);
  font-feature-settings: "palt" 1;
}
/* 矢印（コンベア式: overflow box に2本。1本目=表示, 2本目=左外に待機）*/
.g26-c-news-item__icon {
  position: relative;
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  overflow: hidden;
  color: var(--Role-Icon-Default);
}
.g26-c-news-item__arrow {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
}
.g26-c-news-item__arrow--follow {
  transform: translateX(-100%); /* 左外に待機 */
}
/* leading-trim（Figma の text-box-trim）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-news-item__date,
  .g26-c-news-item__text {
    text-box: trim-both cap alphabetic;
  }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-news-item__date,
  .g26-c-news-item__text {
    margin-block: var(--leading-trim);
  }
}
/* hover: ピルの背景色を #E7E4DF に（テキスト上下スワップは廃止。Figma 97:7271 / ISSUE行3）*/
@media (hover: hover) {
  .g26-c-news-item:hover {
    background-color: #e7e4df;
  }
}
/* hover インタラクション（ポインタ端末 + 動きを許容する設定のときのみ）*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-news-item {
    transition: background-color 0.3s ease;
  }
  .g26-c-news-item__arrow {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-news-item__arrow--follow {
    transition-delay: 75ms; /* 1本目に少し遅れて入る */
  }
  .g26-c-news-item:hover .g26-c-news-item__arrow--lead {
    transform: translateX(100%); /* 右へ抜ける */
  }
  .g26-c-news-item:hover .g26-c-news-item__arrow--follow {
    transform: translateX(0); /* 左から中央へ */
  }
}
@media (width <= 840px) {
  .g26-c-news-item {
    display: flex;
    inline-size: 100%;
    min-block-size: 0;
    gap: var(--Spacing-16); /* 16（本文群 ⇔ アイコン）*/
    padding: var(--Spacing-Fixed-12) var(--Spacing-16);
  }
  .g26-c-news-item__body {
    flex: 1;
    font-size: var(--TextSize-Body-XS);
    white-space: normal; /* SP は本文折返し */
  }
  .g26-c-news-item__row {
    gap: var(--Spacing-12);
  }
  .g26-c-news-item__text {
    flex: 1;
    min-inline-size: 0;
  }
  .g26-c-news-item__date {
    line-height: var(--LineHeight-Body-200);
  }
  .g26-c-news-item__icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }
}
/*
 * g26-c-media-panel — 画像 + コンテンツパネルの2カラムブロック（SP は縦積み）。
 * Figma の「画像 + ベージュ面」型セクション（例: 価格リード 296:3816 / 119:7444）の
 * 再利用レイアウト。中身（見出し・本文・リンク等）は呼び出し側が __body に流し込む。
 *  - PC: __media(50%) + __body(50%, Muted パネル, 縦中央)。--reverse で画像を右に。
 *  - SP: 全体を Muted パネルで包み、__media → __body を縦積み。
 */
.g26-c-media-panel {
  display: flex;
}
.g26-c-media-panel--reverse {
  flex-direction: row-reverse;
}
/* 画像側（既定は正方形。別比率は呼び出し側で aspect-ratio を上書き）*/
.g26-c-media-panel__media {
  margin: 0;
  position: relative;
  flex: 0 0 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.g26-c-media-panel__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* コンテンツパネル（Muted 地・縦中央・左右 112）*/
.g26-c-media-panel__body {
  flex: 0 0 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(64 * var(--g26-u)); /* 64（既定の縦リズム）。※例外: 縦だがここは vw リキッドにする */
  padding-inline: calc(112 * var(--g26-u));
  background-color: var(--Role-Background-Muted); /* #d8d4ce */
  color: var(--Role-Text-Primary);
  font-feature-settings: "palt" 1;
}
@media (width <= 840px) {
  .g26-c-media-panel {
    flex-direction: column;
    gap: var(--Spacing-Fixed-64); /* 64（画像 ⇔ 内容）*/
    padding: var(--Spacing-Fixed-64) calc(24 * var(--g26-u)) var(--Spacing-Fixed-80); /* pt64 px24 pb80 */
    background-color: var(--Role-Background-Muted);
  }
  .g26-c-media-panel__media {
    flex: none;
    inline-size: 100%;
  }
  .g26-c-media-panel__body {
    flex: none;
    padding-inline: 0;
    gap: calc(40 * var(--g26-u)); /* ※例外: 縦だがここは vw リキッド */
    background: none; /* 親が Muted */
  }
}
/*
 * g26-c-plan — プラン紹介（FEATURES）。Figma: PC 273:2635 / SP 278:3421
 *  - PC: 大画像(2:1) + 下部情報バー[PLAN番号 | 区切り線 | (タイトル / スペック)] + 詳しく見る(右)
 *  - SP: カード（画像 → [PLAN番号 | 線 | タイトル] → スペック(全幅) → 詳しく見る(中央)）
 * 情報部は単一 DOM を CSS Grid で PC/SP に再配置する。
 * チップ=g26-c-label / ボタン=g26-c-button--on-emphasis を流用。
 */
.g26-c-plan {
  position: relative; /* ボタンの ::after をカード全面に伸ばす基準 */
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-40); /* 40（画像 ⇔ 情報）*/
  color: var(--Role-Text-Primary);
  font-feature-settings: "palt" 1;
}
/* Figma(273:2632) 注記「ブロック全体をリンク領域とする」: 詳しく見るボタンの当たり判定をカード全面へ */
.g26-c-plan__button::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* hover: 画像を拡大（Figma 273:2632 annotation「▼画像 拡大する」参考 neie.jp / ISSUE行3）
   スケール値の経緯: 実装ISSUEリスト55「拡大率を上げる」で 1.05 → 木村さん別FBで一旦 1.03
   → 2026-07-23 CEO判断で 1.05 に戻す（リスト55原文どおり）*/
@media (hover: hover) {
  .g26-c-plan:hover .g26-c-plan__media img {
    transform: scale(1.05);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-plan__media img {
    transition: transform 1s var(--g26-ease-zoom);
  }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .g26-c-plan:hover .g26-c-plan__media img {
    transform: none;
  }
}
/* hover: テキスト群（PLAN番号・タイトル・スペック）を Opacity 70%（ボタン除く）。
   実装ISSUEリスト55「テキスト群のOpacityを70%にする（ボタン除く）」/ 全体hover方針 ISSUE行3。
   状態変化なので reduce でも 70% にはする（フェードのみ no-preference で付与。case-card と同仕様）*/
@media (hover: hover) {
  .g26-c-plan:hover .g26-c-plan__no,
  .g26-c-plan:hover .g26-c-plan__title,
  .g26-c-plan:hover .g26-c-plan__spec,
  .g26-c-plan:hover .g26-c-plan__specs {
    opacity: 0.7;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-plan__no,
  .g26-c-plan__title,
  .g26-c-plan__spec,
  .g26-c-plan__specs {
    transition: opacity 0.3s ease;
  }
}
/* 画像 */
.g26-c-plan__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1; /* PC 1216x608 */
}
.g26-c-plan__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* 情報部（grid） */
.g26-c-plan__info {
  display: grid;
  grid-template-columns: auto 1px 1fr auto; /* no | 線 | 本体 | button */
  column-gap: calc(48 * var(--g26-u));
  row-gap: var(--Spacing-Fixed-20); /* 20（タイトル ⇔ スペック）*/
  align-items: center;
}
/* PLAN 番号（EN セリフ）*/
.g26-c-plan__no {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-Fixed-16);
  padding-block-end: 4px;
  inline-size: 40px;
  font-family: var(--Font-EN);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-c-plan__no-label {
  font-size: var(--TextSize-Body-S);
}
.g26-c-plan__no-num {
  font-size: 2.5rem;
}
/* 区切り線 */
.g26-c-plan__divider {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: stretch;
  inline-size: 1px;
  background-color: var(--Role-Border-Default);
}
/* タイトル（JP Min）*/
.g26-c-plan__title {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-S);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
}
/* タイトル内の改行は SP のみ（PC は広いカラムで1行）*/
.g26-c-plan__title br {
  display: none;
}
/* スペック（レイアウト/カラー）*/
.g26-c-plan__specs {
  grid-column: 3;
  grid-row: 2;
  margin: 0;
  display: flex;
  /* 幅が足りない時はラベルを改行させず「カラー行ごと」カラム落ち（Figma 744:3013。ISSUE行48）*/
  flex-wrap: wrap;
  gap: var(--Spacing-Fixed-8) calc(32 * var(--g26-u)); /* 縦8 / 横32 */
}
.g26-c-plan__spec {
  flex: none; /* 行の自然幅を保ち、収まらなければ行ごと折り返す */
  display: flex;
  align-items: center;
  gap: var(--Spacing-8);
}
.g26-c-plan__spec .g26-c-label {
  white-space: nowrap; /* チップ内は改行させない（ISSUE行48）*/
}
.g26-c-plan__spec-label {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-XS);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-c-plan__spec-values {
  margin: 0;
  display: flex;
  gap: var(--Spacing-4);
}
/* 詳しく見るボタン（配置のみ。見た目は g26-c-button--on-emphasis）*/
.g26-c-plan__button {
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: center;
}
/* leading-trim */
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-plan__no-label,
  .g26-c-plan__no-num,
  .g26-c-plan__title,
  .g26-c-plan__spec-label {
    margin-block: var(--leading-trim);
  }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-plan__no-label,
  .g26-c-plan__no-num,
  .g26-c-plan__title,
  .g26-c-plan__spec-label {
    text-box: trim-both cap alphabetic;
  }
}
@media (width <= 840px) {
  .g26-c-plan {
    gap: var(--Spacing-Fixed-32);
  }
  .g26-c-plan__media {
    aspect-ratio: 1600 / 1000;
  }
  .g26-c-plan__info {
    grid-template-columns: auto 1px 1fr; /* no | 線 | タイトル */
    column-gap: calc(20 * var(--g26-u));
    row-gap: var(--Spacing-Fixed-24); /* 24（head ⇔ specs）*/
  }
  .g26-c-plan__no {
    grid-row: 1;
    inline-size: 32px;
    gap: var(--Spacing-Fixed-12);
    padding-block-end: 2px;
  }
  .g26-c-plan__no-num {
    font-size: 1.75rem;
  }
  .g26-c-plan__divider {
    grid-row: 1;
  }
  .g26-c-plan__title {
    grid-row: 1;
  }
  .g26-c-plan__title br {
    display: inline; /* SP は改行を有効化 */
  }
  .g26-c-plan__title {
    /* 行末の letter-spacing(0.1em) を CSS は幅に含める（Figma は含めない）ため、
       「キッチンダイニング一体型で」(実測255px)が列幅254に1pxで収まらず折れる。行末分を相殺 */
    margin-inline-end: -0.1em;
  }
  .g26-c-plan__specs {
    grid-column: 1 / 4; /* 全幅 */
    grid-row: 2;
    flex-direction: column;
    gap: var(--Spacing-Fixed-8);
  }
  .g26-c-plan__spec-label {
    inline-size: 54px; /* ラベル幅を揃える（チップ開始位置を統一）*/
    white-space: nowrap; /* 「レイアウト」を1行に保つ */
    font-size: var(--TextSize-Body-S); /* SP=12 */
  }
  .g26-c-plan .g26-c-label {
    font-size: var(--TextSize-Body-S); /* SP チップは 14 */
  }
  .g26-c-plan__button {
    grid-column: 1 / 4;
    grid-row: 3;
    justify-self: start; /* Figma: カードは items-start（左寄せ）*/
    margin-block-start: var(--Spacing-Fixed-8); /* 24→32 の差分 */
  }
}
/*
 * g26-c-layout-card — キッチンレイアウトのカード（画像 + 名称 + 説明）。
 * Figma: 21:413 ほか（grid 21:454 / 66:832 の各セル）
 *  - 画像: 16:10（≈314.67/196.67）, object-fit cover。
 *  - 名称: Heading-XXS(18) JP Min / 説明: Body-XS(12,SP10) JP Go・Text/Secondary・leading1.75。
 */
.g26-c-layout-card {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24);
  color: var(--Role-Text-Primary);
  text-decoration: none;
  /* FB68: grid アイテムの既定 min-width:auto(min-content) が Safari で 1fr トラックを
     膨張させ、グリッドがリキッドせず右へはみ出す症状の定番原因。0 にして膨張を防ぐ。
     min-inline-size は Safari 15+ のため、古い Safari 用に物理 min-width:0 も併記。 */
  min-width: 0;
  min-inline-size: 0;
}
.g26-c-layout-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.g26-c-layout-card__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.g26-c-layout-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-20);
}
.g26-c-layout-card__name {
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-XXS);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-c-layout-card__desc {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-XS); /* PC12（Figma 60:271 = Body/XS）*/
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Secondary);
  font-feature-settings: "palt" 1;
}
@media (width <= 840px) {
  /* Figma(66:832): SP の説明文は Body/S（SP=12）。Body-XS のままだと 10 で小さすぎる */
  .g26-c-layout-card__desc {
    font-size: var(--TextSize-Body-S);
  }
}
/* leading-trim */
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-layout-card__name,
  .g26-c-layout-card__desc {
    margin-block: var(--leading-trim);
  }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-layout-card__name,
  .g26-c-layout-card__desc {
    text-box: trim-both cap alphabetic;
  }
}
/*
 * g26-c-case-card — 納入事例カード（画像 + CASE番号 + レイアウト/カラー + 矢印）。
 * Figma: PC 60:333 / SP 66:1201。チップ=g26-c-label、矢印=g26-c-link-icon。
 * hover:
 *  - 画像: ズーム（__media overflow:hidden 内で scale）
 *  - CASE番号(__no): テキスト上下スワップ（移動 + フェード + scaleY ロール。他コンポーネントと同仕様）
 *  - 矢印: link-icon(pill) 内で「横」コンベア（右へ抜け / 左から入る・75ms遅れ・0.5s）
 *  - hover 端末かつ prefers-reduced-motion 許容時のみ発火
 */
.g26-c-case-card {
  /* hover: 画像ズーム量 / テキスト入替の余白・縦つぶし量 */
  --g26-case-zoom: 1.05; /* neie.jp 実測に合わせ縮小（ISSUE行3）*/
  --g26-case-swap-gap: 0.4em;
  --g26-case-swap-scale: 0.7;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-32); /* 32（画像 ⇔ 情報）*/
  color: var(--Role-Text-Primary);
  text-decoration: none;
}
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す。hover 演出は transform のみで表現 */
.g26-c-case-card:hover {
  opacity: 1;
}
.g26-c-case-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden; /* 画像ズームをはみ出させない */
}
.g26-c-case-card__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.g26-c-case-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24);
}
/* CASE番号: __no を基準に __no-inner（原本）と複製を重ねる。
   flex で中身の実高に合わせ縦ズレ防止（line-height 行ボックス回避）*/
.g26-c-case-card__no {
  position: relative;
  display: flex;
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-XS);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-c-case-card__no-inner {
  display: inline-block;
  white-space: nowrap;
}
.g26-c-case-card__no-inner--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-case-swap-gap));
  inset-inline-start: 0;
  opacity: 0;
  transform: scaleY(var(--g26-case-swap-scale));
  pointer-events: none;
}
.g26-c-case-card__specs {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-8);
}
.g26-c-case-card__spec {
  display: flex;
  /* Figma(60:325): 行は上揃えで「カラー」はチップ1段目(h25)の中央合わせ。
     baseline 揃えなら1段目のチップ内テキストと揃い、折返し2段目以降には引っ張られない */
  align-items: baseline;
  gap: var(--Spacing-8);
}
.g26-c-case-card__spec-label {
  flex: none;
  inline-size: 56px;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-XS);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-c-case-card__spec-values {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--Spacing-Fixed-4);
  column-gap: var(--Spacing-4);
  min-inline-size: 0;
}
/* 矢印コンベア（横）: link-icon(pill) を overflow box にして2本を入替 */
.g26-c-case-card .g26-c-link-icon {
  position: relative;
  overflow: hidden;
}
/* 矢印の可動窓: アイコン幅相当（--g26-arrow-travel）でクリップし移動距離をボタンと揃える（ISSUE行3 FB）*/
.g26-c-case-card__arrow {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  margin-inline-start: calc(var(--g26-arrow-travel, 16px) / -2);
  inline-size: var(--g26-arrow-travel, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.g26-c-case-card__arrow--follow .g26-c-icon {
  transform: translateX(calc(-1 * var(--g26-arrow-travel, 16px))); /* 窓の左外に待機 */
}
/* leading-trim */
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-case-card__no-inner,
  .g26-c-case-card__spec-label { margin-block: var(--leading-trim); }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-case-card__no-inner,
  .g26-c-case-card__spec-label { text-box: trim-both cap alphabetic; }
}
/* hover: テキスト群（CASE番号 + レイアウト/カラー情報）は Opacity 70% に
  （上下スワップは廃止。Figma 60:333 annotation / ISSUE行3）*/
@media (hover: hover) {
  .g26-c-case-card:hover .g26-c-case-card__no,
  .g26-c-case-card:hover .g26-c-case-card__specs {
    opacity: 0.7;
  }
}
/* hover インタラクション（ポインタ端末 + 動きを許容する設定のときのみ）*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-case-card__media img {
    transition: transform 1s var(--g26-ease-zoom);
  }
  .g26-c-case-card:hover .g26-c-case-card__media img {
    transform: scale(var(--g26-case-zoom)); /* 画像ズーム */
  }
  .g26-c-case-card__no,
  .g26-c-case-card__specs {
    transition: opacity 0.3s ease;
  }
  .g26-c-case-card__arrow .g26-c-icon {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-case-card__arrow--follow .g26-c-icon {
    transition-delay: 75ms;
  }
  .g26-c-case-card:hover .g26-c-case-card__arrow--lead .g26-c-icon {
    transform: translateX(var(--g26-arrow-travel, 16px)); /* 右へ抜ける */
  }
  .g26-c-case-card:hover .g26-c-case-card__arrow--follow .g26-c-icon {
    transform: translateX(0); /* 左から中央へ */
  }
}
@media (width <= 840px) {
  .g26-c-case-card {
    gap: var(--Spacing-Fixed-24);
  }
  .g26-c-case-card__body {
    gap: var(--Spacing-Fixed-20);
  }
  .g26-c-case-card__spec-label {
    inline-size: 54px;
    font-size: var(--TextSize-Body-S); /* SP=12 */
  }
  .g26-c-case-card .g26-c-label {
    font-size: var(--TextSize-Body-S); /* SP チップは Body-S（12）*/
  }
}
/*
 * g26-c-support-card — リンクカード（Subtle 地・タイトル + 説明 + 矢印バッジ）。
 * Figma: PC 63:424 / SP 90:3031。バッジ=g26-c-link-icon--on-emphasis。
 * レイアウト（grid 配置）はページ側（g26-p-top__support-grid / -col）が担う。
 *  - 既定 : 右カラム用カード（padding 48）
 *  - --lead: 左の大カード（pl64・タイトル Heading-M・高さは伸縮）
 */
.g26-c-support-card {
  box-sizing: border-box; /* Figma(63:424): 左右カラムは 604/604 の1:1。content-box だと padding 差で 656/552 に歪む */
  display: flex;
  flex: 1 0 0;
  min-inline-size: 0;
  gap: var(--Spacing-32);
  align-items: center;
  justify-content: center;
  padding-block: var(--Spacing-Fixed-48); /* 上下48（右2カード）*/
  padding-inline: var(--Spacing-48) var(--Spacing-40); /* pl48 pr40 */
  background-color: var(--Role-Background-Subtle); /* #f1efeb */
  text-decoration: none;
  color: inherit;
}
.g26-c-support-card--lead {
  padding-block: 0; /* 高さは右カラムに合わせて伸縮（h-full）*/
  padding-inline: var(--Spacing-64) var(--Spacing-40); /* pl64 pr40 */
}
.g26-c-support-card__text {
  display: flex;
  flex: 1 0 0;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--Spacing-Fixed-32);
}
.g26-c-support-card__title {
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-XS);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
  font-feature-settings: "palt" 1;
}
.g26-c-support-card--lead .g26-c-support-card__title {
  font-size: var(--TextSize-Heading-M); /* PC28 / SP20 */
}
.g26-c-support-card__desc {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S); /* 14 / SP12 */
  line-height: var(--LineHeight-Body-200);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Secondary);
  font-feature-settings: "palt" 1;
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-support-card__title,
  .g26-c-support-card__desc { margin-block: var(--leading-trim); }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-support-card__title,
  .g26-c-support-card__desc { text-box: trim-both cap alphabetic; }
}
/* ===== hover ===== */
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す */
.g26-c-support-card:hover {
  opacity: 1;
}
/* hover: 背景色を #E7E4DF に（Figma 63:424 annotation / ISSUE行3）*/
@media (hover: hover) {
  .g26-c-support-card:hover {
    background-color: #e7e4df;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-support-card {
    transition: background-color 0.3s ease;
  }
}
/* link-icon を overflow box にして矢印を2本で入替（全カード共通の仕組み）*/
.g26-c-support-card .g26-c-link-icon {
  position: relative;
  overflow: hidden;
}
/* 矢印の可動窓: アイコン幅相当（--g26-arrow-travel）でクリップし移動距離をボタンと揃える（ISSUE行3 FB）*/
.g26-c-support-card__arrow {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  margin-inline-start: calc(var(--g26-arrow-travel, 16px) / -2);
  inline-size: var(--g26-arrow-travel, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* 待機位置: follow は窓の左外（横コンベア）。lead も外部リンクも共通で左→右に統一
   （旧: 外部リンクのみ右下外の斜めコンベアだったが、矢印と同じ横方向へ変更）*/
.g26-c-support-card__arrow--follow .g26-c-icon {
  transform: translateX(calc(-1 * var(--g26-arrow-travel, 16px)));
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-support-card__arrow .g26-c-icon {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-support-card__arrow--follow .g26-c-icon {
    transition-delay: 75ms;
  }
  /* 横コンベア（右へ抜け / 左から入る）: lead・外部リンク 共通 */
  .g26-c-support-card:hover .g26-c-support-card__arrow--lead .g26-c-icon {
    transform: translateX(var(--g26-arrow-travel, 16px));
  }
  .g26-c-support-card:hover .g26-c-support-card__arrow--follow .g26-c-icon {
    transform: translateX(0);
  }
}
@media (width <= 840px) {
  .g26-c-support-card,
  .g26-c-support-card--lead {
    gap: var(--Spacing-24);
    padding-block: var(--Spacing-Fixed-32); /* 上下32 */
    padding-inline: var(--Spacing-32) var(--Spacing-24); /* pl32 pr24 */
  }
  .g26-c-support-card--lead {
    min-block-size: 157px; /* Figma 90:3032 */
  }
  /* Figma(90:3032): SP の lead 見出しは Heading/XS（16）＝他カードと同サイズ（ISSUE行31。Heading-M の SP20 では大きい）*/
  .g26-c-support-card--lead .g26-c-support-card__title {
    font-size: var(--TextSize-Heading-XS);
  }
  .g26-c-support-card__text {
    gap: var(--Spacing-Fixed-24);
  }
}
/*
 * g26-c-news-row — お知らせ等のリスト行（日付 + タイトル + 抜粋2行 + 矢印バッジ）。
 * Figma: PC 63:473 / SP 66:1319。バッジ=g26-c-link-icon。
 * ※ ヒーロー下の明色ピル（g26-c-news-item）とは別物。
 * リストの配置・区切り線はページ側（g26-p-top__news-list / __news-sep）が担う。
 */
.g26-c-news-row {
  /* タイトル上下スワップの余白（roll の間）と縦つぶし量（回転感）*/
  --g26-news-swap-gap: 0.4em;
  --g26-news-swap-scale: 0.7;
  display: flex;
  align-items: flex-start;
  gap: var(--Spacing-48); /* 48（本文群 ⇔ アイコン）*/
  text-decoration: none;
  color: inherit;
}
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す。演出は transform/opacity のみ */
.g26-c-news-row:hover {
  opacity: 1;
}
.g26-c-news-row__main {
  flex: 1 0 0;
  min-inline-size: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--Spacing-48); /* 48（日付 ⇔ 本文）*/
}
.g26-c-news-row__date {
  flex: none;
  inline-size: 104px;
  margin: 0;
  font-family: var(--Font-EN);
  font-size: var(--TextSize-Body-L); /* PC18（SP は Body-M=14 に切替）*/
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
  font-feature-settings: "palt" 1;
}
.g26-c-news-row__body {
  flex: 1 0 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-32); /* 32（タイトル ⇔ 抜粋）*/
}
.g26-c-news-row__title {
  position: relative; /* 上下スワップの基準（__title-inner 原本 + 複製を重ねる）*/
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-XS);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
  font-feature-settings: "palt" 1;
}
/* block にして複数行タイトルでも __title 高さ＝中身の実高に一致させる（縦ズレ防止）*/
.g26-c-news-row__title-inner {
  display: block;
}
.g26-c-news-row__title-inner--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-news-swap-gap));
  inset-inline-start: 0;
  inline-size: 100%;
  opacity: 0;
  transform: scaleY(var(--g26-news-swap-scale));
  pointer-events: none;
}
.g26-c-news-row__excerpt {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S); /* 14 / SP12 */
  line-height: var(--LineHeight-Body-200);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Secondary);
  font-feature-settings: "palt" 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 2行クランプ */
  overflow: hidden;
  /* -webkit-box には text-box(leading-trim) が効かず半行分の余白が乗るため、
     margin で相殺して Figma のキャップ基準 gap（タイトル⇔抜粋32/SP20・抜粋⇔罫線48/SP40）に合わせる */
  margin-block: var(--leading-trim);
}
/* 矢印コンベア（横）: link-icon を overflow box にして2本を入替 */
.g26-c-news-row .g26-c-link-icon {
  flex: none;
  position: relative;
  overflow: hidden;
}
/* 矢印の可動窓: アイコン幅相当（--g26-arrow-travel）でクリップし移動距離をボタンと揃える（ISSUE行3 FB）*/
.g26-c-news-row__arrow {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  margin-inline-start: calc(var(--g26-arrow-travel, 16px) / -2);
  inline-size: var(--g26-arrow-travel, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.g26-c-news-row__arrow--follow .g26-c-icon {
  transform: translateX(calc(-1 * var(--g26-arrow-travel, 16px))); /* 窓の左外に待機 */
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-news-row__date,
  .g26-c-news-row__title-inner { margin-block: var(--leading-trim); }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-news-row__date,
  .g26-c-news-row__title-inner { text-box: trim-both cap alphabetic; }
}
/* hover: テキスト群（日付・タイトル・抜粋）は Opacity 70% に
  （上下スワップは廃止。Figma 77:1654 annotation「※日付や説明文も含める」/ ISSUE行3）*/
@media (hover: hover) {
  .g26-c-news-row:hover .g26-c-news-row__main {
    opacity: 0.7;
  }
}
/* hover インタラクション（ポインタ端末 + 動きを許容する設定のときのみ）*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-news-row__main {
    transition: opacity 0.3s ease;
  }
  .g26-c-news-row__arrow .g26-c-icon {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-news-row__arrow--follow .g26-c-icon {
    transition-delay: 75ms;
  }
  .g26-c-news-row:hover .g26-c-news-row__arrow--lead .g26-c-icon {
    transform: translateX(var(--g26-arrow-travel, 16px)); /* 右へ抜ける */
  }
  .g26-c-news-row:hover .g26-c-news-row__arrow--follow .g26-c-icon {
    transform: translateX(0); /* 左から中央へ */
  }
}
@media (width <= 840px) {
  .g26-c-news-row {
    align-items: center;
    gap: var(--Spacing-24);
  }
  .g26-c-news-row__main {
    flex-direction: column;
    gap: var(--Spacing-Fixed-24); /* 24（日付 ⇔ 本文）*/
  }
  .g26-c-news-row__date {
    inline-size: auto;
    font-size: var(--TextSize-Body-M); /* SP=14（EN/M）*/
  }
  .g26-c-news-row__body {
    gap: var(--Spacing-Fixed-20);
  }
}
/*
 * Hero（TOP キービジュアル / Figma: 2:2 MainVisual, 66:487）
 * 4枚スライド: 右→左の linear パン（JS/WAAPI）+ クロスフェード（opacity）。
 * 上部に黒30%→透明の filter。下部に footer（ページネーション + ニュース）。
 *  - PC: footer は左下ドット / 右下ニュース（row, space-between）
 *  - SP: footer は縦積み（ドット→ニュース）。gap 一定（ニュースが折返しても変わらない）
 */
.g26-c-hero {
  position: relative;
  /* 左右ガター（Figma: PC 16px / SP 8px）。画像も footer もこの内側に収まる */
  padding-inline: 1.1111111111111112vw; /* リキッド（ISSUE行43）*/
}
/* --- slides（ビューポート）--- */
.g26-c-hero__slides {
  position: relative;
  overflow: hidden;
  /* ヘッダー高を除いた画面高いっぱい（ヘッダー + hero = 100vh）。
     --g26-header-band は SP66 / PC89 でレスポンシブ。*/
  block-size: calc(100vh - var(--g26-header-band));
}
.g26-c-hero__slides::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 160px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent);
  z-index: 2;
  pointer-events: none;
}
.g26-c-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s linear;
}
.g26-c-hero__slide.is-active {
  opacity: 1;
}
.g26-c-hero__img {
  position: absolute;
  inset-block: 0;
  /* 中央トリミング基準: はみ出し12%を左右均等(-6%)に振り、パンは中央±3%（hero.ts）。
     旧実装は左端アンカーで「画像の左側ばかり映る」状態だった（ISSUE行5） */
  inset-inline-start: -6%;
  inline-size: 112%; /* パン用にビューポートより広く */
  block-size: 100%;
  object-fit: cover;
}
/* --- footer（ページネーション + ニュース）--- */
.g26-c-hero__footer {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 3;
  inline-size: 100%;
  box-sizing: border-box; /* padding を幅に含めて横はみ出しを防ぐ */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-block: var(--Spacing-Fixed-24);
  padding-inline: var(--Spacing-24);
}
.g26-c-hero__pagination {
  display: flex;
  align-items: center;
  gap: 0; /* ピッチはドットの padding/margin で管理（下記） */
}
/* ドット: ボタンは透明で当たり判定24pxを確保し、見た目は ::before の円。
   ピッチ: PC=中心間14（6px + 視覚ギャップ8）/ SP=中心間8（4px + 4。Figma 174:3716 と同仕様。ISSUE行45）*/
.g26-c-hero__dot {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px; /* 6px ドット + 当たり判定 = 24px（固定・リキッド対象外）*/
  margin-inline: -5px; /* 24px 当たり判定を保ちつつ中心間 14 に（固定）*/
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.g26-c-hero__dot::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background-color: var(--Role-Background-Default); /* 白 */
  opacity: 0.5;
  transition: opacity 0.3s var(--g26-ease);
}
.g26-c-hero__dot.is-active::before {
  opacity: 1;
}
.g26-c-hero__dot:focus-visible {
  outline: 2px solid var(--Role-Background-Default);
  outline-offset: -6px;
}
/* ニュースは独立コンポーネント g26-c-news-item を footer 内に配置（PC右下 / SP全幅）*/
@media (width <= 840px) {
  .g26-c-hero {
    padding-inline: 2.1333333333333333vw; /* リキッド（ISSUE行43）*/
  }
  /* SP も calc(100vh - var) を踏襲（var は SP=66）。aspect-ratio は使わない */
  .g26-c-hero__footer {
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing-Fixed-16); /* ニュース⇔ドットの一定 gap */
    padding-block: var(--Spacing-Fixed-20);
    padding-inline: var(--Spacing-20);
  }
  /* SP は切替がスワイプ主体でドットはタップしない想定 → 当たり判定用 padding なし（詳細ページと同方針） */
  .g26-c-hero__dot {
    padding: 0;
    margin-inline: 2px; /* 中心間 8（ドット4 + ギャップ4・固定）。Figma SP 準拠（ISSUE行45）*/
  }
  .g26-c-hero__dot::before {
    inline-size: 4px;
    block-size: 4px;
  }
  /* SP はパン移動量を増やす（hero.ts: 中央±5%）ぶん、画像を広げて端が見えないよう余地を確保 */
  .g26-c-hero__img {
    inline-size: 120%;
    inset-inline-start: -10%; /* はみ出し20%を左右均等に（中央トリミング基準） */
  }
}
/* pages（TOP 固有セクション）*/
/*
 * g26-p-top — TOP（フロントページ）固有のセクションスタイル。
 * 既存コンポーネント（g26-c-*）を組み合わせる「ページ専用」レイヤー（命名 g26-p-*）。
 */
/* ページ本文ラッパー。最終セクション（story）と footer の間に余白を作る。
   ※ px 引数で書ける独自関数が使える: rem()/vw()/vws()/vh()/vhs()/fluid()/percentage()。
     PC vw は 1440 基準、SP は vws()（375 基準）。引数は px なので可読性が高い。 */
@media (width > 840px) {
  .g26-p-top {
    padding-block-end: var(--Spacing-Fixed-16); /* PC: デザイン上 footer との隙間は僅か */
  }
}
/*
 * TOP の hero は「ヘッダー込みで画面ぴったり」ではなく、ファーストビュー下端に
 * notice の頭を少しだけ覗かせる（白い帯が見える）。共有 g26-c-hero を TOP だけ上書き。
 * Figma PC 341:2477 = ヘッダー90 + MainVisual704 + 下16 = 810 → hero = 100vh - header - 16。
 */
.g26-p-top .g26-c-hero__slides {
  block-size: calc(100vh - var(--g26-header-band) - 1rem);
}
/* SP: 覗き量は左右ガター（8px=0.5rem）に合わせる */
@media (width <= 840px) {
  .g26-p-top .g26-c-hero__slides {
    block-size: calc(100vh - var(--g26-header-band) - 0.5rem);
  }
}
/*
 * hero 直下のキャンペーン告知バー。Figma: PC 80:1909 / SP 119:7425
 *  - 下境界線（#d8d4ce）+ py16、中身（g26-c-text-link）を中央配置。
 *  - 左右はヒーローのガター（PC16 / SP8）に揃え、境界線をヒーロー幅に一致させる。
 */
.g26-p-top__notice {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: 1.1111111111111112vw; /* 16: hero ガターに揃える（リキッド。ISSUE行43）*/
  padding-block: var(--Spacing-Fixed-16);
  border-block-end: 1px solid var(--Role-Border-Default); /* #d8d4ce */
}
/* Figma(80:1909/119:7425): テキストは Body/S（PC14 / SP12）。text-link 既定の Body-M より一段小さい */
.g26-p-top__notice .g26-c-text-link {
  font-size: var(--TextSize-Body-S);
}
@media (width <= 840px) {
  .g26-p-top__notice {
    margin-inline: 2.1333333333333333vw; /* リキッド（ISSUE行43）*/
  }
}
/*
 * ブランド紹介（GRAFTEKTについて）。Figma: PC 119:7415 / SP 119:7443
 *  - full-bleed の画像コラージュ。画像（写真・ロゴ）は vw 基準のリキッド仕様。
 *    PC=1440基準（1px = 100/1440 vw）, SP=375基準（1px = 100/375 vw）。
 *  - リードは可読性のため font-size はトークン固定（Body-M 16/14）。
 *  - 画像にさりげないパララックス予定（別途 JS。未実装）。Figma 注記: 参考 nuset.jp
 */
.g26-p-top__about {
  position: relative;
  overflow-x: clip; /* vw 配置の端数はみ出しをクリップ */
  padding-block-start: var(--Spacing-Fixed-120);
}
.g26-p-top__about-collage {
  position: relative;
  block-size: 84.30555555555556vw;
}
/* 左上のロゴ + リード文 */
.g26-p-top__about-intro {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 15vw;
  z-index: 1; /* 文字群を写真より前面に */
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-80); /* 80（PC はリキッド。FB: ロゴ⇔リード間を PC のみ可変に。SP は下で 48 固定へ上書き）*/
  padding-block-start: 11.11111111111111vw;
}
.g26-p-top__about-logo {
  display: block;
  /* リード文（about-lead）と同じ比率で 840px→1440px を線形補間（ISSUE54: 最小12px基準）。
     1440px=320px / 840px=320×(12/16)=240px。傾き = 80px / 600px → 1440px 換算 192px = vw(192)、
     切片 = 240 - 192×840/1440 = 128px。≥1440px は 320px で頭打ち。
     ※ 下限240px は SP(≤840px) Figma 指定の 240px 固定と一致し、境界の段差も解消。*/
  inline-size: clamp(15rem, calc(8rem + 13.333333333333334vw), 20rem);
  block-size: auto;
  aspect-ratio: 320 / 56;
}
.g26-p-top__about-lead {
  margin: 0;
  font-family: var(--Font-JP-Min);
  /* ISSUE54: PCは「デザイン16px基準・最小12px」でリキッド。840px(12px)→1440px(16px)を線形補間。
     傾き = 4px / 600px → 1440px 換算で 9.6px = vw(9.6)、切片 = 12 - 9.6*840/1440 = 6.4px。
     ≤840px は 12px 下限、≥1440px は 16px で頭打ち。
     ※a11y: 日本語本文12pxは基準(16px)を割るがクライアント明示指定に従う。*/
  font-size: clamp(0.75rem, calc(0.4rem + 0.6666666666666666vw), 1rem);
  line-height: 2.4; /* Figma leading 2.4 */
  letter-spacing: var(--LetterSpacing-Default); /* 0.1em */
  color: var(--Role-Text-Primary);
  font-feature-settings: "palt" 1;
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-p-top__about-lead {
    margin-block: var(--leading-trim);
  }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-p-top__about-lead {
    text-box: trim-both cap alphabetic;
  }
}
/* 中間ブレークポイントでの上書きは廃止（上の clamp が 840〜1440px を連続で補間する）*/
.g26-p-top__about-br-sp {
  display: none; /* SP のみ改行 */
}
/* 写真の絶対配置キャンバス。
   PC: 高さは collage が持つ（vw(1214)）ので box を消して透過し、写真は collage 基準で置く。
   SP: intro と縦に並ぶ通常フロー要素になり、このラッパー自身が高さを持つ（下の --sp 参照）。*/
.g26-p-top__about-photos {
  display: contents;
}
/* 写真（絶対配置のコラージュ）*/
.g26-p-top__about-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
}
.g26-p-top__about-photo img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* パララックス対象(全4枚): 枠は固定、内側 img を JS で translateY+scale（画像の中身だけ動く。ISSUE行8。FBで A/C 追加）*/
.g26-p-top__about-photo[data-parallax] img {
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .g26-p-top__about-photo[data-parallax] img {
    transform: none;
  }
}
.g26-p-top__about-photo--a {
  inset-block-start: 0;
  inset-inline-start: 56.111111111111114vw;
  inline-size: 43.888888888888886vw;
  block-size: 29.305555555555557vw;
  border-start-start-radius: 11.11111111111111vw; /* tl 160 */
}
.g26-p-top__about-photo--b {
  inset-block-start: 26.25vw;
  inset-inline-start: 51.11111111111111vw;
  inline-size: 19.444444444444446vw;
  block-size: 25.833333333333336vw;
}
.g26-p-top__about-photo--c {
  inset-block-start: 43.19444444444444vw;
  inset-inline-start: 0;
  inline-size: 41.66666666666667vw;
  block-size: 27.77777777777778vw;
  border-start-end-radius: 11.11111111111111vw; /* tr 160 */
  border-end-end-radius: 11.11111111111111vw; /* br 160 */
}
.g26-p-top__about-photo--d {
  inset-block-start: 57.638888888888886vw;
  inset-inline-start: 65.55555555555556vw;
  inline-size: 26.666666666666668vw;
  block-size: 26.666666666666668vw;
}
@media (width <= 840px) {
  .g26-p-top__about {
    padding-block-start: var(--Spacing-Fixed-96);
  }
  /* SP は intro → 写真キャンバス の縦積み（Figma 119:7442）。collage の magic height は廃止し、
     高さは「intro の実高 + 80 + 写真キャンバス」で決まる。*/
  .g26-p-top__about-collage {
    block-size: auto;
  }
  .g26-p-top__about-intro {
    position: static; /* PC の絶対配置を解除して通常フローへ */
    transform: none;
    align-items: center;
    inline-size: 87.2vw;
    margin-inline: auto;
    gap: var(--Spacing-Fixed-48); /* 48（rem 固定）*/
    padding-block-start: 0;
  }
  /* 写真キャンバス（Figma 119:7442 の y316〜878 = 562）。中の3枚はこのボックス基準で絶対配置。*/
  .g26-p-top__about-photos {
    display: block;
    position: relative;
    block-size: 149.86666666666665vw;
    margin-block-start: var(--Spacing-Fixed-80); /* intro ⇔ 写真 = 80（縦は固定）*/
  }
  .g26-p-top__about-logo {
    inline-size: 15rem; /* 240（Figma SP 指定）。PC clamp 下限も 240 になり境界は連続。*/
    aspect-ratio: 240 / 42;
  }
  .g26-p-top__about-lead {
    text-align: center;
    font-size: 0.875rem; /* SP は 14px 固定（Figma SP=Body/M）。ISSUE54 の 12px 化は PC 限定のため据え置き。*/
  }
  .g26-p-top__about-br-sp {
    display: inline;
  }
  /* 座標は写真キャンバス基準（Figma 119:7442 の y から 316 を引いた値）*/
  .g26-p-top__about-photo--a {
    inset-block-start: 0; /* 316 - 316 */
    inset-inline-start: 18.933333333333334vw;
    inline-size: 74.66666666666667vw;
    block-size: 49.86666666666667vw;
    border-start-start-radius: 21.333333333333336vw; /* tl 80 */
  }
  .g26-p-top__about-photo--b {
    inset-block-start: 39.2vw; /* 463 - 316 */
    inset-inline-start: 12.8vw;
    inline-size: 27.73333333333333vw;
    block-size: 36.8vw;
  }
  .g26-p-top__about-photo--c {
    inset-block-start: 93.06666666666666vw; /* 665 - 316 */
    inset-inline-start: 0;
    inline-size: 85.33333333333334vw;
    block-size: 56.8vw;
    border-start-end-radius: 21.333333333333336vw; /* tr 80 */
    border-end-end-radius: 21.333333333333336vw; /* br 80 */
  }
  .g26-p-top__about-photo--d {
    display: none; /* SP では plants は非表示 */
  }
}
/*
 * 価格リード（184万円）。Figma: PC 296:3816 / SP 119:7444
 * レイアウトは汎用 g26-c-media-panel を使用。ここは配置(余白)と価格テキストのみ。
 *  - 見出し/価格=JP Min、本文=JP Go(leading2)。色は media-panel__body が Text/Primary。
 */
.g26-p-top__price {
  padding-block-start: var(--Spacing-Fixed-160);
}
/* 価格画像は Figma frame 296:3818 を正方形(1440²)で焼き込み書き出し済み。
   画像自体がデザインのクロップなので object-fit:cover の既定(中央)で一致する（object-position 不要）。*/
/* 見出し + 価格（JP Min）*/
.g26-p-top__price-head {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24);
  font-family: var(--Font-JP-Min);
  letter-spacing: var(--LetterSpacing-Default); /* 0.1em */
}
.g26-p-top__price-label {
  margin: 0;
  font-size: var(--TextSize-Heading-XXS);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default); /* 親(head)の計算済みpx継承だと自身のサイズ基準にならないため再指定 */
}
.g26-p-top__price-amount {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--Spacing-8);
  white-space: nowrap;
}
.g26-p-top__price-num {
  font-size: var(--TextSize-Heading-XXL);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default); /* 40px 基準の 0.1em（=4px。Figma 実測）*/
}
.g26-p-top__price-tax {
  font-size: var(--TextSize-Heading-XXS);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
}
/* 本文（JP Go / leading 2）*/
.g26-p-top__price-desc {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-40);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M); /* 16 / SP14 */
  line-height: var(--LineHeight-Body-200);
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-p-top__price-desc p {
  margin: 0;
}
/* leading-trim（Figma の text-box-trim に合わせる）*/
@supports not (text-box: trim-both cap alphabetic) {
  .g26-p-top__price-label,
  .g26-p-top__price-num,
  .g26-p-top__price-tax,
  .g26-p-top__price-desc p {
    margin-block: var(--leading-trim);
  }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-p-top__price-label,
  .g26-p-top__price-num,
  .g26-p-top__price-tax,
  .g26-p-top__price-desc p {
    text-box: trim-both cap alphabetic;
  }
}
/* 中間ブレークポイント（841〜1024px）: 金額を 36px（Heading/XL）・説明文を 14px（Body/S）へ */
@media (width > 840px) and (width <= 1024px) {
  .g26-p-top__price-num {
    font-size: var(--TextSize-Heading-XL); /* 36px */
  }
  .g26-p-top__price-desc {
    font-size: var(--TextSize-Body-S); /* 14px */
  }
}
@media (width <= 840px) {
  .g26-p-top__price {
    padding-block-start: var(--Spacing-Fixed-96);
  }
  .g26-p-top__price-head {
    gap: var(--Spacing-Fixed-20);
  }
  .g26-p-top__price-desc {
    gap: var(--Spacing-Fixed-32);
  }
  /* FB: SP は縦余白を固定値に。media-panel の __body gap は既定でリキッド（例外）だが、
     ここ(price)だけ 40px 固定へ上書き（catalog 等の共有利用には波及させない）。*/
  .g26-p-top__price .g26-c-media-panel__body {
    gap: var(--Spacing-Fixed-40);
  }
  /* Figma(66:629): SP は画像を左24px・右はウィンドウ右端に接地（全幅ブリード）。
     パネルの右パディングを外して media(100%) を右端まで、本文だけ右24px を維持。 */
  .g26-p-top__price .g26-c-media-panel {
    padding-inline-end: 0;
  }
  .g26-p-top__price .g26-c-media-panel__body {
    padding-inline-end: calc(24 * var(--g26-u));
  }
}
/*
 * FEATURES（プラン紹介）。Figma: PC 21:406 / SP 66:715。見出しは無し。
 * 各プラン=g26-c-plan を縦積み。背景は Subtle(#f1efeb)（PC/SP 共通、白ボタンが映える）。
 * 本文カラムは 1216（左右 112 / SP 24）。間隔 PC160 / SP80、上下 PC160/160・SP64/80。
 */
.g26-p-top__plans {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-160);
  padding-block: var(--Spacing-Fixed-160);
  padding-inline: var(--g26-pad-x);
  background-color: var(--Role-Background-Subtle); /* #f1efeb */
}
@media (width <= 840px) {
  .g26-p-top__plans {
    gap: var(--Spacing-Fixed-80);
    padding-block: var(--Spacing-Fixed-64) var(--Spacing-Fixed-80);
    padding-inline: var(--g26-pad-x);
  }
}
/*
 * SELF SELECT（ワンプライスで自由に組み合わせ）冒頭。Figma: PC 66:503 / SP 66:768
 * 見出し（g26-c-heading）+ アンカーナビ（g26-c-anchor-nav）。見出し→ナビ gap PC80/SP64。
 */
.g26-p-top__select {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-80); /* 80（見出し ⇔ ナビ）*/
  padding-block-start: var(--Spacing-Fixed-160);
  padding-inline: var(--g26-pad-x);
}
.g26-p-top__select .g26-c-heading {
  margin-block-start: 0; /* 上余白はセクション側で制御 */
}
@media (width <= 840px) {
  .g26-p-top__select {
    gap: var(--Spacing-Fixed-64);
    padding-block-start: var(--Spacing-Fixed-96);
    padding-inline: var(--g26-pad-x);
  }
}
/* SELF SELECT 配下の各セクション間の上余白（= セクション間リズム）はページが所有する。
 * heading-top はマージンを持たない（罫線+内側 padding のみ）ため、ここで一元管理。
 * Figma（コンテナ PC 41:307 = pt160/gap120 ・ SP 66:1001 = pt80/gap80）:
 *   先頭 layout は PC160/SP80、以降 color/cupboard/tools は PC120/SP80。
 *   ※ option は別構造（Subtle ブロック）で自前の余白を持つため対象外。
 */
.g26-p-top__layout {
  margin-block-start: var(--Spacing-Fixed-160);
}
.g26-p-top__color,
.g26-p-top__cupboard,
.g26-p-top__tools {
  margin-block-start: var(--Spacing-Fixed-120);
}
@media (width <= 840px) {
  .g26-p-top__layout,
  .g26-p-top__color,
  .g26-p-top__cupboard,
  .g26-p-top__tools {
    margin-block-start: var(--Spacing-Fixed-80);
  }
}
/*
 * キッチンレイアウト一覧。Figma: PC 60:271 / SP 358:3292+66:832
 * H3/Top 見出し + カードグリッド(11) + 詳しく見るボタン。
 *  - PC: グリッドは見出し本文に揃えて左をインデント（en列176/1216 + gap32）。3列。
 *  - SP: 全幅2列。
 */
.g26-p-top__layout {
  padding-inline: var(--g26-pad-x);
}
.g26-p-top__layout-main {
  /* PC: 見出し本文（en ラベル列の右）に揃える */
  padding-inline-start: calc(176 / 1216 * 100% + var(--Spacing-32));
}
.g26-p-top__layout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--Spacing-32);
  row-gap: var(--Spacing-Fixed-48);
  padding-block-start: var(--Spacing-Fixed-80); /* 80（見出し ⇔ グリッド）*/
}
.g26-p-top__layout-action {
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--Spacing-Fixed-64);
}
@media (width <= 840px) {
  .g26-p-top__layout {
    padding-inline: var(--g26-pad-x);
  }
  .g26-p-top__layout-main {
    padding-inline-start: 0; /* SP はインデントなし（全幅）*/
  }
  .g26-p-top__layout-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--Spacing-16);
    padding-block-start: var(--Spacing-Fixed-64);
  }
  .g26-p-top__layout-action {
    justify-content: flex-start;
    padding-block-start: var(--Spacing-Fixed-48);
  }
}
/*
 * SELF SELECT > カラー（EVALT）。Figma: PC 60:272 / SP 66:882
 * H3/Top 見出し + スウォッチ画像（全体で1枚）+ EVALT ボックス + 詳しく見るボタン。
 */
.g26-p-top__color {
  padding-inline: var(--g26-pad-x);
}
.g26-p-top__color-swatch {
  margin: 0;
  margin-block-start: var(--Spacing-Fixed-80); /* 80（見出し ⇔ スウォッチ）*/
}
.g26-p-top__color-swatch img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* PC/SP でスウォッチ画像が別比率のため（img 属性=SP 327×519）、PC は横長比を明示予約して
     読み込み時の CLS を防ぐ。SP 比は下の @media(--sp) で上書き。*/
  aspect-ratio: 1216 / 530;
}
/* EVALT ボックス */
.g26-p-top__color-evalt {
  margin-block-start: var(--Spacing-Fixed-64);
  display: flex;
  align-items: center;
  gap: calc(64 * var(--g26-u));
  /* 枠線1pxを左右padding で吸収（Figma は枠線内側で内寸1088。-1px/片側で一致）*/
  padding: var(--Spacing-Fixed-48) calc(calc(64 * var(--g26-u)) - 1px);
  border: 1px solid var(--Role-Border-Default);
  color: var(--Role-Text-Primary);
}
.g26-p-top__color-evalt-logo {
  flex: none;
  inline-size: 16.5rem; /* 264（ロゴ列）*/
}
.g26-p-top__color-evalt-logo img {
  display: block;
  inline-size: 12.5rem; /* 200（ロゴ実寸）*/
  block-size: auto;
  margin-inline-start: calc(41 * var(--g26-u)); /* Figma(60:296): ロゴ列264の左端から41px（左詰めではない）*/
}
.g26-p-top__color-evalt-body {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-32);
}
.g26-p-top__color-evalt-title {
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-XS);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  font-feature-settings: "palt" 1;
}
.g26-p-top__color-evalt-desc {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S); /* 14 / SP12 */
  line-height: var(--LineHeight-Body-200);
  letter-spacing: var(--LetterSpacing-Default);
  font-feature-settings: "palt" 1;
}
.g26-p-top__color-action {
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--Spacing-Fixed-64);
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-p-top__color-evalt-title,
  .g26-p-top__color-evalt-desc {
    margin-block: var(--leading-trim);
  }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-p-top__color-evalt-title,
  .g26-p-top__color-evalt-desc {
    text-box: trim-both cap alphabetic;
  }
}
@media (width <= 840px) {
  .g26-p-top__color {
    padding-inline: var(--g26-pad-x);
  }
  .g26-p-top__color-swatch {
    margin-block-start: var(--Spacing-Fixed-64);
  }
  .g26-p-top__color-swatch img {
    aspect-ratio: 327 / 519; /* SP は縦長スウォッチ（swatch-sp 981×1557）*/
  }
  .g26-p-top__color-evalt {
    margin-block-start: var(--Spacing-Fixed-48);
    flex-direction: column;
    align-items: stretch;
    gap: var(--Spacing-Fixed-32);
    /* 枠線1pxを左右padding で吸収（Figma 内寸279。-1px/片側で一致）*/
    padding: var(--Spacing-Fixed-32) calc(var(--Spacing-24) - 1px);
  }
  .g26-p-top__color-evalt-logo {
    inline-size: 100%;
    block-size: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .g26-p-top__color-evalt-logo img {
    inline-size: 8.75rem; /* Figma(88:2948): SP ロゴは 140px */
    margin-inline-start: 0; /* SP は中央寄せ（PC の 41px オフセットを解除）*/
  }
  .g26-p-top__color-action {
    justify-content: flex-start;
    padding-block-start: var(--Spacing-Fixed-48);
  }
}
/*
 * SELF SELECT > カップボード。Figma: PC 60:273 / SP 66:1003
 * H3/Top 見出し + 注記(g26-c-notes) + 画像（PC=3枚横並び / SP=2枚縦積み）。
 * 注記・画像は見出し本文に揃えて左インデント（PC）。
 */
.g26-p-top__cupboard {
  padding-inline: var(--g26-pad-x);
}
.g26-p-top__cupboard-main {
  padding-inline-start: calc(176 / 1216 * 100% + var(--Spacing-32)); /* 見出し本文に揃える */
}
.g26-p-top__cupboard-main .g26-c-notes {
  margin-block-start: var(--Spacing-Fixed-24); /* 24（見出し ⇔ 注記）*/
}
.g26-p-top__cupboard-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: var(--Spacing-8); /* FB59同種: 縦もリキッドに（横 column-gap と同値。行↔列の余白比を一定に）*/
  column-gap: var(--Spacing-8);
  padding-block-start: var(--Spacing-Fixed-80); /* 80（注記 ⇔ 画像）*/
}
.g26-p-top__cupboard-img {
  position: relative;
  margin: 0;
  aspect-ratio: 331 / 400; /* 縦長 */
  overflow: hidden;
}
.g26-p-top__cupboard-img img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
@media (width <= 840px) {
  .g26-p-top__cupboard {
    padding-inline: var(--g26-pad-x);
  }
  .g26-p-top__cupboard-main {
    padding-inline-start: 0;
  }
  .g26-p-top__cupboard-main .g26-c-notes {
    margin-block-start: var(--Spacing-Fixed-20);
  }
  .g26-p-top__cupboard-images {
    grid-template-columns: 1fr; /* 縦積み */
    row-gap: var(--Spacing-4); /* FB59同種(木村FB): SP も縦をリキッドに（画像の伸縮に余白を追従させる）*/
    column-gap: var(--Spacing-4);
    padding-block-start: var(--Spacing-Fixed-64);
  }
  .g26-p-top__cupboard-img {
    aspect-ratio: 2 / 1; /* 横長 */
  }
  .g26-p-top__cupboard-img:nth-child(2) {
    display: none; /* SP は中央画像を省略 */
  }
}
/*
 * SELF SELECT > 標準機器（TOOLS）。Figma: PC 60:274 / SP 66:1064
 * H3/Top 見出し + 箇条書き(g26-c-list) + 画像（2×2 ブリック 436/564 を行で反転）。
 * 箇条書き・画像は見出し本文に揃えて左インデント（PC）。
 */
.g26-p-top__tools {
  padding-inline: var(--g26-pad-x);
}
.g26-p-top__tools-main {
  padding-inline-start: calc(176 / 1216 * 100% + var(--Spacing-32)); /* 見出し本文に揃える */
}
.g26-p-top__tools-main .g26-c-list {
  gap: var(--Spacing-Fixed-24); /* 24（項目間。Figma TOOLS）*/
}
.g26-p-top__tools-images {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-8); /* FB59: 縦もリキッドに（横 tools-row と同じ 8×g26-u。行↔列の余白比を一定に）*/
  padding-block-start: var(--Spacing-Fixed-80); /* 80（箇条書き ⇔ 画像）*/
}
.g26-p-top__tools-row {
  display: flex;
  gap: var(--Spacing-8);
  aspect-ratio: 1008 / 320;
}
.g26-p-top__tools-img {
  position: relative;
  margin: 0;
  overflow: hidden;
}
/* 画像はトリミング済みを書き出し済み（PC/SP 別）。object-fit cover でセルにフィット。*/
.g26-p-top__tools-img img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.g26-p-top__tools-img--narrow { flex: 436; }
.g26-p-top__tools-img--wide { flex: 564; }
@media (width <= 840px) {
  .g26-p-top__tools {
    padding-inline: var(--g26-pad-x);
  }
  .g26-p-top__tools-main {
    padding-inline-start: 0;
  }
  .g26-p-top__tools-main .g26-c-list {
    gap: var(--Spacing-Fixed-16);
  }
  .g26-p-top__tools-images {
    gap: var(--Spacing-4); /* FB59(木村FB): SP も縦をリキッドに（横 tools-row と同じ 4×g26-u。行↔列の余白比を一定に）*/
    padding-block-start: var(--Spacing-Fixed-64);
  }
  .g26-p-top__tools-row {
    gap: var(--Spacing-4);
    aspect-ratio: 327 / 163.5; /* ≈ 2/1 */
  }
}
/*
 * SELF SELECT > オプション（OPTION）。Figma: PC 60:275 / SP 66:1076
 * 見出し（H3/Top・罫線なし）+ オプション3項目（画像 + タイトル + 価格）。
 *  - PC: row1 = 2項目(50%), row2 = 全幅項目。画像はトリミング済み書き出し（PC/SP 別）。
 *  - SP: 全項目を縦積み。item3 の2画像は SP では縦積み。
 */
.g26-p-top__option {
  /* Figma 60:275: Subtle ブロックは viewport から左右16・上120 の余白を持つ内側ブロック。
     コンテンツは標準ガター112（= ブロック左右16 + 内側 padding 96）に揃える。*/
  margin-block-start: var(--Spacing-Fixed-120); /* 120（ブロック上の白余白）*/
  margin-inline: 1.1111111111111112vw; /* 16（ブロック左右の白余白・リキッド。ISSUE行43）*/
  padding-block: var(--Spacing-Fixed-120); /* 120（ブロック内側 上下）*/
  padding-inline: 6.666666666666667vw; /* 96（16+96=112 でコンテンツをガターに・リキッド）*/
  background-color: var(--Role-Background-Subtle); /* #f1efeb */
}
/* 2列グリッド（--half ×2 / --full は全幅）。
   flex-wrap + 幅計算だと、列 gap がリキッド（1440超で 32px を超える）なのに
   幅の引き算が固定 32px のままで合計が 100% を超え、大画面でカラム落ちしていた。
   grid なら列数が宣言的に固定され、幅が gap から自動導出されるため折り返し得ない。 */
.g26-p-top__option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--Spacing-Fixed-80) calc(32 * var(--g26-u)); /* row 80 / col 32 */
  padding-block-start: var(--Spacing-Fixed-120); /* 120（見出し ⇔ 項目）*/
}
.g26-p-top__option-item {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-32);
  min-inline-size: 0; /* 中身（画像・長文）でトラックが押し広がらないように */
}
.g26-p-top__option-item--full { grid-column: 1 / -1; }
.g26-p-top__option-media {
  display: flex;
  gap: var(--Spacing-8);
}
.g26-p-top__option-media figure {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
}
.g26-p-top__option-media img {
  display: block;
  inline-size: 100%;
  block-size: auto; /* 書き出し済み画像の比率で高さ決定 */
}
.g26-p-top__option-text {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-20);
}
.g26-p-top__option-title {
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-XS);
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
.g26-p-top__option-price {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S); /* 14 / SP12 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Secondary);
  font-feature-settings: "palt" 1;
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-p-top__option-title,
  .g26-p-top__option-price { margin-block: var(--leading-trim); }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-p-top__option-title,
  .g26-p-top__option-price { text-box: trim-both cap alphabetic; }
}
@media (width > 840px) {
  /* img の width/height 属性は SP ファイルの実寸（= SP の予約）。PC は <source> で
     別比率のファイルに差し替わる（例 option3a: SP 2.0 / PC 1.9）ため、属性由来の比のままだと
     読み込み完了時に高さが変わって CLS になる。PC 実寸比を明示して先に予約する。
     --pc-w / --pc-h は select-option.php の $opt_pic が figure に出力（img へ継承）。*/
  .g26-p-top__option-media img {
    aspect-ratio: var(--pc-w) / var(--pc-h);
  }
}
@media (width <= 840px) {
  .g26-p-top__option {
    /* Figma 66:1076: SP も Subtle ブロック。ブロックは content+16 を bleed（左右8pxの白余白）、
       内側 padding 16 でコンテンツをガター24に。上下 padding 32/80、上 margin 80（tools とのリズム）。*/
    margin-block-start: var(--Spacing-Fixed-80);
    margin-inline: 2.1333333333333333vw; /* リキッド（ISSUE行43）*/
    padding-inline: 4.266666666666667vw;
    padding-block: var(--Spacing-Fixed-32) var(--Spacing-Fixed-80);
    background-color: var(--Role-Background-Subtle);
  }
  .g26-p-top__option-grid {
    grid-template-columns: minmax(0, 1fr); /* SP は1列縦積み */
    gap: var(--Spacing-Fixed-48); /* 48（項目間）*/
    padding-block-start: var(--Spacing-Fixed-64);
  }
  .g26-p-top__option-item {
    gap: var(--Spacing-Fixed-24); /* SP: 画像 ⇔ テキスト 24（Figma 66:1088 gap24。PC は32）*/
  }
  .g26-p-top__option-media {
    gap: var(--Spacing-4);
  }
  .g26-p-top__option-item--full .g26-p-top__option-media {
    flex-direction: column; /* item3 の2画像を SP では縦積み */
  }
}
/*
 * 納入事例（CASE）カルーセル。Figma: PC 66:506 / SP 66:1219
 * 見出し(g26-c-heading) + スクラッチ carousel（scroll-snap）+ コントロール。
 *  - PC: カード384・gap32・prev/next矢印 + 一覧ボタン / SP: カード270・gap16・矢印なし(スワイプ)
 *  - トラックは見出しガター(112/24)から右へフルブリード。
 */
.g26-p-top__case {
  padding-block-start: var(--Spacing-Fixed-160);
}
.g26-p-top__case .g26-c-heading {
  margin-block-start: 0; /* 余白はセクションで制御 */
}
.g26-p-top__case-head {
  padding-inline: var(--g26-pad-x);
}
.g26-p-top__case-track {
  display: flex;
  gap: 2.2222222222222223vw; /* リキッド化（ISSUE行20）: カードと合わせて画面幅に追従 */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--g26-pad-x); /* 112（左ガター + 右フルブリード余白）*/
  scroll-padding-inline-start: var(--g26-pad-x);
  margin-block-start: var(--Spacing-Fixed-80); /* 80（見出し ⇔ カード）*/
  scrollbar-width: none;
}
.g26-p-top__case-track::-webkit-scrollbar {
  display: none;
}
.g26-p-top__case-track .g26-c-case-card {
  flex: 0 0 26.666666666666668vw; /* リキッド化（ISSUE行20）: 1440時384px を画面幅に比例 */
  scroll-snap-align: start;
  scroll-snap-stop: always; /* 慣性でもスナップ点を飛ばさず必ず1枚ずつ止める */
}
.g26-p-top__case-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--g26-pad-x);
  margin-block-start: var(--Spacing-Fixed-80);
}
.g26-p-top__case-arrows {
  display: flex;
  gap: var(--Spacing-16);
}
.g26-p-top__case-arrow {
  inline-size: 64px;
  block-size: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--Role-Border-Default);
  border-radius: 9999px;
  background: none;
  color: var(--Role-Icon-Default);
  cursor: pointer;
  transition: opacity var(--g26-duration) var(--g26-ease);
}
.g26-p-top__case-arrow .g26-c-icon {
  font-size: 1rem;
}
.g26-p-top__case-arrow--prev .g26-c-icon {
  transform: scaleX(-1); /* 左向き */
}
.g26-p-top__case-arrow:disabled {
  opacity: 0.5;
  cursor: default;
}
/* hover（Figma 235:3276 / ISSUE行21）: 枠線を Border/Strong に + アイコンをコンベア移動（進む=右 / 戻る=左）*/
.g26-p-top__case-arrow-box {
  position: relative;
  inline-size: 1rem;
  block-size: 1rem;
  overflow: hidden;
}
.g26-p-top__case-arrow-icon {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g26-p-top__case-arrow--next .g26-p-top__case-arrow-icon--follow {
  transform: translateX(-100%); /* 左外に待機 */
}
.g26-p-top__case-arrow--prev .g26-p-top__case-arrow-icon--follow {
  transform: translateX(100%); /* 右外に待機（戻るは左方向コンベア）*/
}
@media (hover: hover) {
  .g26-p-top__case-arrow:hover:not(:disabled) {
    border-color: var(--Role-Border-Strong, #4e4d4b);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-p-top__case-arrow {
    transition: opacity var(--g26-duration) var(--g26-ease), border-color 0.3s ease;
  }
  .g26-p-top__case-arrow-icon {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-p-top__case-arrow-icon--follow {
    transition-delay: 75ms;
  }
  .g26-p-top__case-arrow--next:hover:not(:disabled) .g26-p-top__case-arrow-icon--lead {
    transform: translateX(100%); /* 右へ抜ける */
  }
  .g26-p-top__case-arrow--next:hover:not(:disabled) .g26-p-top__case-arrow-icon--follow {
    transform: translateX(0);
  }
  .g26-p-top__case-arrow--prev:hover:not(:disabled) .g26-p-top__case-arrow-icon--lead {
    transform: translateX(-100%); /* 左へ抜ける */
  }
  .g26-p-top__case-arrow--prev:hover:not(:disabled) .g26-p-top__case-arrow-icon--follow {
    transform: translateX(0);
  }
}
@media (width <= 840px) {
  .g26-p-top__case {
    padding-block-start: var(--Spacing-Fixed-96);
  }
  .g26-p-top__case-head {
    padding-inline: var(--g26-pad-x);
  }
  .g26-p-top__case-track {
    gap: 4.266666666666667vw; /* リキッド化（ISSUE行20）: SP は 375 基準 */
    padding-inline: var(--g26-pad-x);
    scroll-padding-inline-start: calc(24 * var(--g26-u));
    margin-block-start: var(--Spacing-Fixed-64);
  }
  .g26-p-top__case-track .g26-c-case-card {
    flex: 0 0 72vw; /* リキッド化（ISSUE行20）: 375時270px を画面幅に比例 */
  }
  .g26-p-top__case-controls {
    justify-content: flex-start;
    padding-inline: var(--g26-pad-x);
    margin-block-start: var(--Spacing-Fixed-48);
  }
  .g26-p-top__case-arrows {
    display: none; /* SP は矢印なし（スワイプ）*/
  }
}
/*
 * ショールームCTA。Figma: PC 286:3703 / SP 286:3759
 * 背面に画像が横へ流れ続ける（無限マーキー・CSS）+ 中央の白カード。高さ固定/横幅フィット。
 */
.g26-p-top__cta {
  padding-block-start: var(--Spacing-Fixed-160);
}
.g26-p-top__cta-inner {
  position: relative;
  overflow: hidden;
  block-size: 810px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--g26-pad-x);
}
.g26-p-top__cta-bg {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  inline-size: max-content;
  animation: g26-cta-marquee 120s linear infinite;
}
.g26-p-top__cta-bg--sp {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .g26-p-top__cta-bg { animation: none; }
}
@keyframes g26-cta-marquee {
  to { transform: translateX(-50%); }
}
.g26-p-top__cta-slide {
  position: relative;
  flex: none;
  margin: 0;
  inline-size: 1240px;
  block-size: 810px;
}
.g26-p-top__cta-slide img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.g26-p-top__cta-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.g26-p-top__cta-card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  inline-size: 592px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-Fixed-48);
  /* FB73同種: カード幅 592 固定に対し左右 padding がリキッドだと、1440 超で padding が膨らんで
     内側が痩せる（見出しの折り返しが変わる）。padding も固定にして内寸を一定に保つ。 */
  padding: var(--Spacing-Fixed-64) var(--Spacing-Fixed-48);
  background-color: var(--Role-Background-Default);
  color: var(--Role-Text-Primary);
  text-align: center;
}
.g26-p-top__cta-title {
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-L); /* 32 / SP→Mで上書き */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-p-top__cta-body {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S);
  line-height: var(--LineHeight-Body-200);
  letter-spacing: var(--LetterSpacing-Default);
}
/* 説明文の改行: Figma は PC(286:3720)=3行 / SP(286:3766)=2行。「ご相談の上、」後の br は PC のみ */
.g26-p-top__cta-body-br-pc {
  display: inline;
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-p-top__cta-title,
  .g26-p-top__cta-body { margin-block: var(--leading-trim); }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-p-top__cta-title,
  .g26-p-top__cta-body { text-box: trim-both cap alphabetic; }
}
@media (width <= 840px) {
  .g26-p-top__cta {
    padding-block-start: var(--Spacing-Fixed-96);
  }
  .g26-p-top__cta-inner {
    block-size: 640px;
    padding-inline: 0; /* 余白はカードの max-width + 中央寄せで確保（狭幅でもボタンを改行させない）*/
  }
  .g26-p-top__cta-bg--pc { display: none; }
  .g26-p-top__cta-bg--sp { display: flex; }
  .g26-p-top__cta-slide {
    inline-size: 640px; /* Figma 355:6159: SP は 640×640 正方形 ×3枚（ISSUE行51）*/
    block-size: 640px;
  }
  .g26-p-top__cta-card {
    inline-size: 100%;
    max-inline-size: 18rem; /* Figma 286:3764≈279。ボタン232が収まる最小幅+余裕。左右余白は中央寄せで≈Figma48 */
    gap: var(--Spacing-Fixed-32);
    /* FB73: カード幅は 288 固定なのに左右 padding がリキッドだと、TB 幅で padding が膨らみ
       （375:24px → 768:49px → 840:54px）内側が痩せてタイトルがカラム落ちする。padding も固定にして
       内寸を 240px で一定に保つ。 */
    padding: var(--Spacing-Fixed-40) var(--Spacing-Fixed-24);
  }
  .g26-p-top__cta-title {
    font-size: var(--TextSize-Heading-M);
  }
  .g26-p-top__cta-body-br-pc {
    display: none; /* SP は「ご相談の上、」で改行しない（Figma 286:3766）*/
  }
}
/*
 * プランニングサポート。Figma: PC 63:424 / SP 90:3031
 * 白地セクション内に Subtle カードを配置（地は白、左右は標準ガター --g26-pad-x）。
 *  - PC: 左に大カード(プランニングサポート/Heading-M) + 右に縦2カード(Heading-XS)、gap8、左右2分割
 *  - SP: 3カード縦積み、gap4（左カードも Heading-M→SP20 に縮む）
 *  - 各カードの白pillは g26-c-link-icon--on-emphasis（左=arrow-right / 右2=external-link）
 */
.g26-p-top__support {
  padding-block-start: var(--Spacing-Fixed-96);
  padding-inline: var(--g26-pad-x); /* 112 / SP24（標準ガター = 左右余白）*/
}
.g26-p-top__support-grid {
  /* Figma(63:424): 左右 604/604 の完全1:1。flex(basis0)だと lead の padding が基底サイズに
     クランプされ 656/552 に歪むため grid で等分する */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--Spacing-Fixed-8);
  column-gap: var(--Spacing-8);
  align-items: stretch;
}
.g26-p-top__support-col {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--Spacing-8); /* FB59: 縦もリキッドに（横 column-gap と同じ 8×g26-u。行↔列の余白比を一定に）*/
}
/* カード本体は g26-c-support-card（コンポーネント）へ分離。ここはレイアウト（grid 配置）のみ。 */
@media (width <= 840px) {
  .g26-p-top__support {
    padding-block-start: var(--Spacing-Fixed-64);
  }
  .g26-p-top__support-grid {
    grid-template-columns: minmax(0, 1fr); /* 3カード縦1列 */
    grid-auto-rows: 1fr; /* FB60: 3カードを等高に（最も高いカードに揃え。タブレット幅でも差が出ない）*/
    row-gap: var(--Spacing-Fixed-4);
    column-gap: var(--Spacing-4);
  }
  .g26-p-top__support-col {
    display: contents; /* 右カラムを解体し3カードを縦1列に */
  }
}
/*
 * NEWS / 最新情報。Figma: PC 63:473 / SP 66:1319
 * 白地。PC=左見出し(280固定)+右リスト2カラム / SP=見出し上→リスト縦。
 * リストは Border/Default 罫線区切り。各行: 日付(EN) + 本文(タイトル+抜粋2行クランプ) + 矢印pill。
 *  - 見出しは g26-c-heading（EN Body-L → Heading-L）を流用。
 *  - pill は g26-c-link-icon（白地なので subtle 地のデフォルト）。
 */
.g26-p-top__news {
  padding-block-start: var(--Spacing-Fixed-160);
  padding-inline: var(--g26-pad-x); /* 112 / SP20 */
  display: flex;
  align-items: flex-start;
  gap: var(--Spacing-32); /* 32（見出し ⇔ リスト）*/
}
.g26-p-top__news .g26-c-heading {
  margin-block-start: 0;
  flex: none;
  inline-size: 280px;
}
.g26-p-top__news-list {
  flex: 1 0 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-48);
}
.g26-p-top__news-sep {
  block-size: 1px;
  inline-size: 100%;
  background-color: var(--Role-Border-Default); /* #d8d4ce */
}
/* ニュース行は g26-c-news-row（コンポーネント）へ分離。ここはセクション/リスト/区切り線のみ。 */
@media (width <= 840px) {
  .g26-p-top__news {
    padding-block-start: var(--Spacing-Fixed-96);
    flex-direction: column;
    gap: var(--Spacing-Fixed-48); /* 48（見出し ⇔ リスト）*/
  }
  .g26-p-top__news .g26-c-heading {
    inline-size: 100%;
  }
  .g26-p-top__news-list {
    gap: var(--Spacing-Fixed-40);
  }
}
/*
 * ブランドストーリー（時間品質）。Figma: PC 77:1822 / SP 90:3130
 * 左右16余白のインセット帯。背景=建物写真をブラー(5px)+黒50%、上に写真(496×310)+白文字。
 * PC=横並び justify-between（px196/py160, 横幅フィット）/ SP=縦積み（px16/pt64 pb80）。
 * 画像は PC/SP 同一ソース（マスク位置のみ差）→ bg/photo の2枚に集約、object-fit cover で調整。
 */
.g26-p-top__story {
  padding-block-start: var(--Spacing-Fixed-200);
  padding-inline: 1.1111111111111112vw; /* 16（帯の左右余白・リキッド。ISSUE行43）*/
}
.g26-p-top__story-band {
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Spacing-32); /* 最小間隔（justify-between の押し合い保険）*/
  padding-block: var(--Spacing-Fixed-160);
  padding-inline: 13.61111111111111vw; /* 1440 で 196、画面幅に比例（リキッド。ISSUE行43で上限196pxのキャップを撤去）*/
}
.g26-p-top__story-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.g26-p-top__story-bg img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: blur(5px);
  transform: scale(1.1); /* ブラーの縁欠け防止 */
}
.g26-p-top__story-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 黒 50% */
}
.g26-p-top__story-photo {
  position: relative;
  z-index: 1;
  flex: 0 1 48.82%; /* 帯の内側幅(1440時=1016)に対する % → 48.82%。狭幅でも比率維持 */
  min-inline-size: 0;
  margin: 0;
}
.g26-p-top__story-photo img {
  display: block;
  inline-size: 100%;
  block-size: auto; /* height 属性(930)を打ち消し aspect-ratio を有効化（無いと 496x930 になる）*/
  aspect-ratio: 496 / 310;
  object-fit: cover;
  /* 画像は Figma frame(PC 63:475 / SP 90:3135) を 1.6 比で焼き込み書き出し済み（枠比=画像比）→ クロップ・object-position 不要 */
}
.g26-p-top__story-text {
  position: relative;
  z-index: 1;
  flex: 0 1 40.94%; /* 帯の内側幅(1440時=1016)に対する % → 40.94%。狭幅でも比率維持 */
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-64);
  color: var(--Role-Text-onEmphasis); /* white */
}
.g26-p-top__story-title {
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-L); /* 32 / SP24 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  font-feature-settings: "palt" 1;
}
.g26-p-top__story-body {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M); /* 16 / SP14 */
  line-height: var(--LineHeight-Body-200);
  letter-spacing: var(--LetterSpacing-Default);
  font-feature-settings: "palt" 1;
}
/* 改行切替（PC/SP で文節の折り位置が異なる）*/
.g26-p-top__story-title .g26-br-sp { display: none; }
.g26-p-top__story-title .g26-br-pc { display: inline; }
@supports not (text-box: trim-both cap alphabetic) {
  .g26-p-top__story-title,
  .g26-p-top__story-body { margin-block: var(--leading-trim); }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-p-top__story-title,
  .g26-p-top__story-body { text-box: trim-both cap alphabetic; }
}
/* 中間ブレークポイント（841〜1024px）: 見出しを 28px（Heading/M）・説明文を 14px（Body/S）へ */
@media (width > 840px) and (width <= 1024px) {
  .g26-p-top__story-title {
    font-size: var(--TextSize-Heading-M); /* 28px（Heading/M。指定確認済み）*/
  }
  .g26-p-top__story-body {
    font-size: var(--TextSize-Body-S); /* 14px */
  }
}
@media (width <= 840px) {
  .g26-p-top__story {
    padding-block-start: var(--Spacing-Fixed-120);
    padding-inline: 2.1333333333333333vw; /* Figma(90:3131): SP は帯の左右余白 8（帯幅359）。内側16と合わせて本文が24位置（リキッド）*/
  }
  .g26-p-top__story-band {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--Spacing-Fixed-64);
    padding-block: var(--Spacing-Fixed-64) var(--Spacing-Fixed-80); /* pt64 / pb80 */
    padding-inline: 4.266666666666667vw; /* リキッド（ISSUE行43）*/
  }
  .g26-p-top__story-photo {
    flex: none;
    inline-size: 100%;
  }
  .g26-p-top__story-text {
    flex: none;
    inline-size: 100%;
    gap: var(--Spacing-Fixed-40);
  }
  .g26-p-top__story-title .g26-br-sp { display: inline; }
  .g26-p-top__story-title .g26-br-pc { display: none; }
}