@charset "UTF-8";

/* ==========================================================================
   ULSC変革Dojo — スタイルシート

   目次
     1. Design Tokens
     2. Reset & Base
     3. Layout
     4. Buttons
   （以降、セクション別スタイルを 5 番以降に追記していく）
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
  /* --- Color: green ---------------------------------------------------- */
  --color-green-50: #f0f8f1;
  --color-green-100: #ddede0;
  --color-green-200: #bcdac3;
  --color-green-400: #6aa579;
  /* 下層ページの帯で使う英語ラベルの色。淡い緑（green-50）の上に green-400 を置くと
     コントラスト2.7:1でAA未達のため、一段濃いこの色を使う（4.54:1）。 */
  --color-green-600: #3f7d55;
  --color-green-700: #27673c;
  --color-deep-green: #235633;
  --color-green-900: #1c4428;
  /* 濃緑ボタン（.btn--primary）のホバー面色。green-1200 をほんの少しだけ持ち上げた色。
     以前は green-900 を使っていたが、深緑背景（green-700）のヒーロー・クロージングでは
     持ち上げた先が背景に近く、面と背景の比が 2.85:1 → 1.62:1 まで落ちてボタンが沈んだ。
     明度の上げ幅を ΔL* 21.6 → 8.2 に縮め、黒いボタンのまま「わずかに明るくなる」動きに
     とどめている（背景との比 2.41:1・白文字 16.4:1）。
     これ以上明るくすると背景に近づくので、上げるならこの手前で止めること。 */
  --color-green-1100: #0d2415;
  --color-green-1200: #051008;
  --color-surface-dark: #153722;

  /* --- Color: gray ------------------------------------------------------ */
  --color-gray-50: #f1f1f2;
  --color-gray-100: #dcdcdd;
  --color-gray-400: #787a7f;
  --color-gray-500: #6b6d73; /* gray-400 だと薄緑背景でAA未達のため、副次テキスト用に用意 */
  --color-gray-600: #4a4c52;
  --color-gray-700: #393b3f;
  --color-gray-950: #090a0b;

  /* --- Color: other ----------------------------------------------------- */
  --color-white: #ffffff;
  --color-slate-50: #f8fafc;
  --color-blue-900: #0e1b37;

  /* --- Semantic --------------------------------------------------------- */
  /* 資料ダウンロードボタンの面色。ヘッダー・FV・バナー2箇所・クロージングの
     全5箇所がこの1色を共有する。トーンを変えたいときはここだけ直す。
     純白（#ffffff）にしたい場合もこの値を差し替えるだけでよい。 */
  --color-btn-light: #e9f4ed;

  /* 波形の背景画像の実寸比（2400×1340）。波形を敷いている4箇所
     （FV・3つの特長・育成の自走サイクル・下層ページの帯）は、すべてこの比のまま
     置いて絵柄を切り取らない。詳しくは .hero__bg の注記を参照。 */
  --bg-wave-ratio: 2400 / 1340;

  --color-text: var(--color-gray-700);
  --color-text-strong: var(--color-green-1200);
  --color-text-muted: var(--color-gray-400);
  --color-border: var(--color-gray-100);

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.25rem;    /* 20px */
  --fs-h3: 1.25rem;    /* 20px → PC 24px */
  --fs-h2: 1.75rem;    /* 28px → PC 48px */
  --fs-h1: 1.875rem;   /* 30px → PC 48px */
  --lh-tight: 1.4;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;
  --ls-wide: 0.04em;

  /* --- Spacing / Layout ------------------------------------------------- */
  --section-pad: 64px;      /* SP */
  --container-max: 1152px;
  --container-pad: 20px;
  --header-h: 64px;         /* SP。PC は 80px */

  /* --- Shape ------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 302px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-btn-strong: 0 8px 24px -2px rgba(0, 0, 0, 0.2),
    0 2px 4px 0 rgba(0, 0, 0, 0.3);
  --shadow-btn-strong-hover: 0 12px 28px -2px rgba(0, 0, 0, 0.26),
    0 3px 6px 0 rgba(0, 0, 0, 0.34);
  --shadow-btn-soft: 0 8px 24px -2px rgba(0, 0, 0, 0.08),
    0 2px 4px 0 rgba(0, 0, 0, 0.12);
  --shadow-btn-soft-hover: 0 12px 28px -2px rgba(0, 0, 0, 0.12),
    0 3px 6px 0 rgba(0, 0, 0, 0.16);
  --shadow-card: 0 1px 2px 0 rgba(9, 10, 11, 0.06),
    0 4px 12px -2px rgba(9, 10, 11, 0.08);
  --shadow-card-hover: 0 2px 4px 0 rgba(9, 10, 11, 0.08),
    0 10px 24px -4px rgba(9, 10, 11, 0.12);

  /* --- Motion ----------------------------------------------------------- */
  --transition-base: 0.2s ease;
}

@media (min-width: 768px) {
  :root {
    --section-pad: 80px;
    --container-pad: 24px;
    --fs-h3: 1.375rem;   /* 22px */
    --fs-h2: 2.25rem;    /* 36px */
    --fs-h1: 2.5rem;     /* 40px */
  }
}

@media (min-width: 1024px) {
  :root {
    --section-pad: 96px;
    --container-pad: 32px;
    --header-h: 80px;
    --fs-h3: 1.5rem;     /* 24px */
    --fs-h2: 3rem;       /* 48px */
    --fs-h1: 3rem;       /* 48px */
  }
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text-strong);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base), opacity var(--transition-base);
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--color-green-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* キーボード利用者向けのスキップリンク */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 12px 20px;
  color: var(--color-white);
  background-color: var(--color-green-1200);
  transform: translateY(-120%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* スクリーンリーダー専用テキスト */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

/* ヘッダーが fixed なので、その高さ分だけ本文を下げる */
body {
  padding-top: var(--header-h);
}

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-pad);
}

.section__header {
  margin-bottom: 40px;
  text-align: center;
}

.section__title {
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: 0.033em; /* Figma: 48px に対し 1.6px */
  text-align: center;
}

.section__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

@media (min-width: 1024px) {
  .section__header {
    margin-bottom: 56px;
  }

  .section__lead {
    font-size: var(--fs-lg);
  }
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-base),
    border-color var(--transition-base), color var(--transition-base),
    box-shadow var(--transition-base), transform var(--transition-base);
}

.btn__icon-svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* --- Primary: 濃緑ベタ塗り ------------------------------------------------ */
.btn--primary {
  color: var(--color-gray-50);
  background-color: var(--color-green-1200);
  box-shadow: var(--shadow-btn-strong);
}

.btn--primary:hover {
  color: var(--color-white);
  background-color: var(--color-green-1100);
  box-shadow: var(--shadow-btn-strong-hover);
  transform: translateY(-2px);
}

.btn--primary:active {
  background-color: var(--color-green-1200);
  box-shadow: var(--shadow-btn-strong);
  transform: translateY(0);
}

/* --- Light: 資料ダウンロードボタン（全5箇所で共通） -------------------------
   面色・文字色・ホバーの挙動をページ内で1つに統一している。
   以前は置く場所ごとに outline / light / white の3種類に分かれていたが、
   同じ導線が3色に見えるため1つにまとめた。 */
.btn--light {
  color: var(--color-green-1200);
  background-color: var(--color-btn-light);
  box-shadow: var(--shadow-btn-strong);
}

.btn--light:hover {
  background-color: var(--color-white);
  box-shadow: var(--shadow-btn-strong-hover);
  transform: translateY(-2px);
}

.btn--light:active {
  background-color: var(--color-green-100);
  box-shadow: var(--shadow-btn-strong);
  transform: translateY(0);
}

/* 淡色背景（ヘッダーの白帯）に置くときだけ併用する。
   面色が白に近いため、そのままだと背景に溶けてボタンの輪郭が分からない。
   枠線で輪郭を出し、影は白地で浮きすぎないよう弱いものに差し替える。
   面色・文字色・ホバー時の色は他の4箇所とまったく同じ。 */
.btn--light.btn--on-light {
  border-color: var(--color-green-1200);
  box-shadow: var(--shadow-btn-soft);
}

.btn--light.btn--on-light:hover {
  box-shadow: var(--shadow-btn-soft-hover);
}

.btn--light.btn--on-light:active {
  box-shadow: var(--shadow-btn-soft);
}

/* --- Ghost: 濃色背景の上に置く白抜きボタン --------------------------------- */
.btn--ghost {
  color: var(--color-white);
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.7);
}

.btn--ghost:hover {
  color: var(--color-green-1200);
  background-color: var(--color-white);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

/* --- Size modifiers ------------------------------------------------------- */
.btn--large {
  min-height: 56px;
  padding: 14px 32px;
  font-size: var(--fs-base);
}

.btn--block {
  width: 100%;
}

@media (min-width: 1024px) {
  .btn--large {
    min-height: 64px;
    padding: 16px 40px;
  }

  .btn--large .btn__icon-svg {
    width: 24px;
    height: 24px;
  }
}

/* 改行の出し分け（Figmaで指定された改行位置を、幅が足りるときだけ再現する） */
.br-lg {
  display: none;
}

@media (min-width: 1024px) {
  .br-lg {
    display: inline;
  }
}

/* ==========================================================================
   5. Header（全幅で固定。どの位置でもCTAに到達できるようにする）
   ========================================================================== */

.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  box-shadow: 0 1px 0 0 rgba(9, 10, 11, 0.06), 0 2px 8px -4px rgba(9, 10, 11, 0.1);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.header__logo {
  flex-shrink: 0;
  margin-right: auto;
}

.header__logo img {
  width: 150px;
  height: auto;
}

/* --- CTA（全デバイスで常時表示） -------------------------------------------
   初回リリースは資料DL・お問い合わせの2ページのみのため、ナビリンクと
   ハンバーガー（開閉パネル）は置いていない。ヘッダーの中身はロゴとこの2つだけ。 */
.header__cta {
  display: flex;
  gap: 8px;
}

/* SP ではラベルを隠してアイコンだけの円形ボタンにする。
   文字は見えないが要素としては残しているので、読み上げやフォーカス時の
   リンク名は「資料ダウンロード」「お問い合わせ」のまま伝わる。 */
.header__cta-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.header__cta-btn {
  width: 44px;
  padding-inline: 0;
}

/* --- タブレット: CTAのラベルを出す ----------------------------------------- */
@media (min-width: 768px) {
  .header__logo img {
    width: 180px;
  }

  .header__cta {
    gap: 12px;
  }

  .header__cta-label {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }

  .header__cta-btn {
    width: auto;
    padding-inline: 20px;
  }
}

/* --- PC: Figma のレイアウトどおり一列 -------------------------------------- */
@media (min-width: 1024px) {
  .header__logo img {
    width: 206px;
  }

  .header__cta {
    gap: 20px;
  }

  .header__cta-btn {
    padding-inline: 24px;
  }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 48px 56px;
  color: var(--color-white);
  /* 地は深緑の一色。**グラデーションは掛けない**（合意済みのデザインに揃えるため。
     白や明るい色を重ねて奥行きを出す案も試したが、緑の彩度が落ちて色味が浅くなるため見送った。
     経緯は検証結果の節35を参照）。 */
  background-color: var(--color-green-700);
}

/* 波形ビジュアルは面の高さいっぱいに、絵柄の比のまま右へ寄せて敷く。

   ■ 4箇所に共通する原則（ここが波形の置き方の正本）
   **絵柄が見えなくなる境界を、面の内側に作らない。** 面の内側でフェードさせたり
   切り落としたりすると、そこが「途中で切れた」ように見える。境界を面の端に置けば、
   帯は切れるのではなく**面の外へ伸び続けている**ように見え、成長感がそのまま出る。
   素材の実測では、絵柄は左端に一切かかっておらず（左20%はアルファ0）、上端も
   右10%の角を除けばほぼ無地。つまり**右端と下端だけを面の端にぞろえれば足り**、
   左端は面の内側にあってよい。上端も、濃い右上の角さえ面の外へ逃がせば見えない。
   3つの特長・育成の自走サイクル・下層ページの帯は、この性質を使って
   FVより小さく敷いている（各セクションの注記を参照）。

   ■ FV（ここ）の置き方 — スマホとそれ以上で変える
   768px以上では本文と事例カードが**横並び**になり、本文が左半分に寄る。ここでは
   高さを 100% にして幅を比なりに伸ばす（＝切り取らない）。幅（高さ×1.79）が面の幅に
   届かないため左側は無地の緑のまま残り、本文と重ならない。

   スマホ（768px未満）では本文・ボタン・事例カードが**縦に積まれて面いっぱいに広がる**ため、
   同じ置き方だと波形が見出しと本文の真上を横切り、読みにくくなる（上長の指摘）。
   そこで他のセクションと同じく、高さを面の 55% にして右下へ寄せる。本文のある上半分は
   無地の深緑になり、波形は事例カードのまわりと下端に出る。
   このとき上端が面の内側に来るので、絵柄のある右上の角だけ translateX で面の外へ逃がす
   （理屈は .features__bg の注記を参照）。

   どちらの置き方でも、はみ出した分は .hero の overflow: hidden で切れる。
   `img { max-width: 100% }` の既定が効くと幅が面の幅で頭打ちになり比なりに伸びないので、
   max-width: none を明示している。 */
.hero__bg {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: auto;
  max-width: none;
  height: 55%;
  aspect-ratio: var(--bg-wave-ratio);
  object-fit: cover;
  object-position: right bottom;
  transform: translateX(11%);
  /* 帯の見え方の調整。**合意済みのデザインの見え方に合わせて控えめにしてある。**

     opacity … 帯の濃さ。0.4 では「背景が目立ちすぎる」ため 0.18 まで落とした。
               **本文と写真がいちばん目に入るバランス**として、候補を並べて選んだ値。
               上げ下げの目安: 0.24＝帯の形がはっきりする / 0.30＝背景が主張し始める。
     filter  … 帯の色 rgb(108,132,65) は地の深緑より黄みが強く、そのままだと
               色が浮いて目に付く。彩度を落として地の緑に寄せると、同じ濃さでも
               ぐっとなじむ。1 に近いほど元の黄みが残る。 */
  opacity: 0.18;
  filter: saturate(0.7);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero__eyebrow {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.025em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.12);
}

.hero__title {
  margin-top: 12px;
  font-size: 1.625rem; /* 26px → PC 52px */
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.069em; /* Figma: 52px に対し 3.6px */
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.12);
}

.hero__lead {
  margin-top: 20px;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.12);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero__cta .btn {
  flex: 1 1 auto;
}

/* --- 支援事例カード -------------------------------------------------------- */
/* カード全体がULS本体サイトの事例ページへのリンク（Hero.astro）。
   ホバーで4px浮かせ、影を一段強くする。支援事例セクションのカード（.case__card）も
   同じ「浮き上がり＋影」に揃えてある。 */
.hero__case {
  display: block;
  max-width: 408px;
  background-color: var(--color-white);
  box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.1),
    0 8px 16px -2px rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hero__case:hover {
  box-shadow: 0 28px 48px -4px rgba(0, 0, 0, 0.16),
    0 10px 20px -2px rgba(0, 0, 0, 0.18), 0 2px 4px 0 rgba(0, 0, 0, 0.22);
  transform: translateY(-4px);
}

.hero__case-media {
  position: relative;
}

.hero__case-media img {
  width: 100%;
  height: auto;
}

.hero__case-tag {
  position: absolute;
  top: 10px;
  right: 9px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.167em; /* Figma: 12px に対し 2px */
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero__case-body {
  padding: 14px 23px 18px;
}

.hero__case-name {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.033em;
  color: var(--color-green-1200);
}

.hero__case-desc {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.033em;
  color: var(--color-green-1200);
}

@media (min-width: 768px) {
  .hero {
    padding-block: 56px 64px;
  }

  /* 本文が左半分に寄る幅（下の .hero__inner を参照）からは、波形を面の高さいっぱいに
     戻す。幅が面に届かないぶん左側は無地の緑で残るので、本文とは重ならない。
     スマホで右下に寄せている理由は .hero__bg の注記にある。 */
  .hero__bg {
    height: 100%;
    transform: none;
  }

  /* タブレット幅から本文と支援事例カードを横並びにする（PCと同じ組み方）。
     縦積みのままだとカード（最大408px）の右側が大きく空いてしまい、
     本文の行も長くなりすぎて余白のバランスが崩れて見えるため。 */
  .hero__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }

  /* 本文側に下限を持たせているのは、これより狭くなると資料DL・お問い合わせの
     2ボタンが横に並びきらず2行に折り返してしまうため（実測: 2つで435px必要）。 */
  .hero__body {
    flex: 1 1 0;
    min-width: 440px;
  }

  /* カードは「本文の下限を確保した残り」を取り、最大408px（PCの幅）で止まる。
     768pxでは約240px、1000px付近で408pxに達する。中間幅を個別に指定しなくても
     滑らかに伸びるので、タブレット用の追加の分岐を持たずに済む。 */
  .hero__case {
    flex: 0 1 408px;
    margin-top: 8px;
  }

  /* 導入文はここでは大きくしない（18pxのまま）。20pxにすると本文の列が狭い
     768〜1023pxで「自律自走を促す育成型コンサルティングサービス」の最後の1文字だけが
     2行目に落ちてしまうため。20pxは1024px以上から。 */

  /* 横並びにした分だけ本文の幅が狭くなるため、PCの52pxへ一段（32px）で寄せる。
     40pxのままだと768px幅で「現場で推進する力を。」が折り返してしまう。 */
  .hero__title {
    font-size: 2rem; /* 32px */
  }

  .hero__lead {
    font-size: var(--fs-lg);
  }

  .hero__cta .btn {
    flex: 0 0 auto;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: 64px 59px;
  }

  /* 横並びとカード幅は768pxのブロックで指定済み（カードはこの幅で408pxに達している）。
     ここは差分だけ。 */
  .hero__inner {
    gap: 40px;
  }

  .hero__eyebrow {
    font-size: 1.5rem; /* 24px */
    line-height: 1.542; /* 37px */
  }

  /* Figmaの52pxはここではまだ使わない。1024〜1151pxでは本文の列が約500pxしかなく、
     52pxだと「現場で推進する力を。」（10文字で約556px必要）が折り返して3行になるため、
     40pxを挟んでいる。52pxは下のブロック（1152px以上）から。 */
  .hero__title {
    margin-top: 8px;
    font-size: 2.5rem; /* 40px */
    line-height: 1.25;
  }

  .hero__lead {
    margin-top: 28px;
    font-size: 1.25rem; /* 20px */
    line-height: 1.6; /* 32px */
  }

  .hero__cta {
    margin-top: 42px;
    gap: 20px;
  }
}

/* 内容の最大幅（1152px）に達してから、見出しをFigmaどおりの52pxにする。
   この幅なら本文の列が640px以上あり、2行（AI時代の変革に／現場で推進する力を。）で収まる。 */
@media (min-width: 1152px) {
  .hero__title {
    font-size: 3.25rem; /* 52px */
    line-height: 1.25; /* 65px */
  }
}

/* ==========================================================================
   7. Pain Points（課題提起 → 解決の方向性）
   ========================================================================== */

.pain__panel {
  padding: 28px 20px 32px;
  text-align: center;
}

.pain__panel--problem {
  margin-top: 32px;
  background-color: var(--color-green-50);
}

.pain__panel--solution {
  background-color: var(--color-white);
  border: 1px solid var(--color-deep-green);
}

.pain__panel-title {
  font-size: 1.375rem; /* 22px → PC 40px */
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--color-green-1200);
}

/* --- チェックリスト -------------------------------------------------------- */
.pain__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 24px auto 0;
  text-align: left;
}

.pain__list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-green-1200);
}

.pain__list-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--color-green-1200);
}

/* --- 課題から解決へつなぐ矢印 ---------------------------------------------- */
/* 上下の余白は全幅共通で 16px。SVGの図形は枠いっぱいに描かれていて内側の余白が
   ないため、この値がそのまま見た目の余白になる（上下を揃えるにはここだけ見ればよい）。 */
.pain__arrow {
  display: flex;
  justify-content: center;
  margin-block: 16px;
  color: var(--color-green-100);
}

.pain__arrow svg {
  width: 80px;
  height: auto;
}

/* 長い本文はSPで中央寄せにすると行端が乱れるため、PCでのみ中央寄せにする */
.pain__solution-body {
  margin-top: 20px;
  font-size: var(--fs-base);
  line-height: 1.75;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--color-green-1200);
}

@media (min-width: 768px) {
  .pain__panel {
    padding: 36px 32px 40px;
  }

  .pain__panel--problem {
    margin-top: 36px;
  }

  .pain__panel-title {
    font-size: 1.875rem; /* 30px */
  }

  .pain__list-item {
    font-size: var(--fs-lg);
  }

  .pain__list-icon {
    width: 34px;
    height: 34px;
  }

  .pain__arrow svg {
    width: 100px;
  }

  .pain__solution-body {
    font-size: var(--fs-lg);
  }
}

@media (min-width: 1024px) {
  .pain__panel {
    padding: 40px 32px 48px;
  }

  .pain__panel--problem {
    margin-top: 40px;
  }

  .pain__panel-title {
    font-size: 2.5rem; /* 40px */
    line-height: 1.325; /* 53px */
  }

  .pain__list {
    gap: 10px;
    margin-top: 30px;
  }

  .pain__list-item {
    align-items: center;
    gap: 16px;
    font-size: 1.5rem; /* 24px */
    line-height: 1.167; /* 28px */
  }

  .pain__list-icon {
    width: 44px;
    height: 44px;
  }

  /* 余白のPC専用指定は置かない。Figmaは上10px/下20pxだったが、上下が揃っていないため
     全幅で共通の 16px（基本の指定）に任せている。 */
  .pain__arrow svg {
    width: 121px;
  }

  .pain__solution-body {
    margin-top: 24px;
    font-size: 1.25rem; /* 20px */
    line-height: 1.6; /* 32px */
    text-align: center;
  }
}

/* ==========================================================================
   8. Features（3つの特長）
   ========================================================================== */

.features {
  position: relative;
  overflow: hidden;
  background-color: var(--color-green-50);
}

/* 波形は面の右下に、絵柄の比のまま置く（原則は .hero__bg の注記を参照）。

   高さを面の 55% にして幅を比なりに伸ばす。下端・右端は面の端にぞろい、
   左端は絵柄の無い側なので面の内側にあっても継ぎ目にならない。
   上端だけは面の内側に来るが、そこに絵柄があるのは右上の角だけなので、
   translateX でその角を面の外へ逃がしている。ずらし量の % は**要素自身の幅**が
   基準なので、画面幅が変わってもこの関係は崩れない（right: -◯% だと基準が
   面の幅になり、狭い画面で逃がし量が足りなくなる）。
   はみ出した分は .features の overflow: hidden で切れる。

   `img { max-width: 100% }` の既定が効くと比なりに伸びないので max-width: none を明示。 */
.features__bg {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: auto;
  max-width: none;
  height: 55%;
  aspect-ratio: var(--bg-wave-ratio);
  object-fit: cover;
  object-position: right bottom;
  transform: translateX(11%);
  /* 帯の濃さ。0.20 では背景が主張しすぎるため 0.14 を選んだ（候補を実物で並べて選定）。 */
  opacity: 0.14;
  pointer-events: none;
}

.features__inner {
  position: relative;
  z-index: 1;
}

.features__logo {
  width: 240px;
  height: auto;
  margin-inline: auto;
}

.features__title {
  margin-top: 24px;
}

.features__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.features__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 20px 28px;
  background-color: var(--color-white);
  border: 1px solid var(--color-green-100);
}

.features__card-media {
  display: grid;
  place-items: center;
  width: 100%;
}

/* 表示サイズは width/height 属性（Figmaの実寸）に従わせる。
   ファイル自体は3xで書き出してあるので高解像度ディスプレイでも劣化しない。 */
.features__card-media img {
  max-width: 100%;
}

.features__card-body {
  width: 100%;
}

/* 番号・区切りバー・見出しを縦中央で揃える。
   以前はベースライン揃えにしていたが、見出しが2行に折り返すSP幅では
   番号が1行目に、バーが2行の中央に来てバラバラに見えたため中央揃えに変更した。 */
.features__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.features__card-no {
  font-size: 1.75rem; /* 28px → PC 40px */
  font-weight: 300;
  line-height: 1;
  color: var(--color-deep-green);
}

.features__card-rule {
  flex-shrink: 0;
  width: 2px;
  height: 24px;
  background-color: var(--color-deep-green);
}

.features__card-title {
  font-size: 1.125rem; /* 18px → PC 32px */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--color-deep-green);
}

.features__card-text {
  margin-top: 12px;
  font-size: 0.9375rem; /* 15px → PC 16px */
  line-height: 1.75;
  color: var(--color-gray-700);
}

@media (min-width: 768px) {
  .features__logo {
    width: 320px;
  }

  .features__title {
    margin-top: 28px;
  }

  .features__list {
    margin-top: 40px;
  }

  .features__card {
    flex-direction: row;
    gap: 24px;
    padding: 24px 32px 24px 20px;
    text-align: left;
  }

  .features__card-media {
    flex: 0 0 200px;
  }

  .features__card-no {
    font-size: 2rem; /* 32px */
  }

  .features__card-title {
    font-size: 1.375rem; /* 22px */
  }
}

@media (min-width: 1024px) {
  .features__logo {
    width: 400px;
  }

  .features__title {
    margin-top: 40px;
  }

  .features__list {
    margin-top: 40px;
  }

  .features__card {
    min-height: 180px;
    padding: 14px 44px 14px 0;
  }

  .features__card-media {
    flex: 0 0 268px;
  }

  .features__card-body {
    padding-left: 26px;
  }

  .features__card-head {
    align-items: center;
    gap: 18px;
  }

  .features__card-no {
    font-size: 2.5rem; /* 40px */
  }

  .features__card-rule {
    height: 32px;
  }

  .features__card-title {
    font-size: 2rem; /* 32px */
  }

  .features__card-text {
    margin-top: 16px;
    font-size: var(--fs-base);
  }
}

/* ==========================================================================
   9. CTA Banner（資料ダウンロード導線。2箇所で再利用）
   ========================================================================== */

.cta-banner {
  padding-block: 32px;
  color: var(--color-white);
  /* Figma の帯の色（#051008）は既存の green-1200 と一致するため、そのまま使う。
     クロージング（.closing）は従来どおり green-700 のままにして、
     「黒い帯＝資料ダウンロード導線」「緑の面＝ページ末の締め」と役割を分けている。 */
  background-color: var(--color-green-1200);
}

/* 資料ダウンロード・お問い合わせの2ページでは、この帯の直下がすぐフッター
   （同じ green-1200）になるため、黒のままだと帯とフッターの境目が消える。
   ページ末の締め（.closing）と同じ green-700 にして面を分ける。
   トップページは前後にセクションが挟まるので Figma どおりの黒のまま。 */
.cta-banner--green {
  background-color: var(--color-green-700);
}

.cta-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* SPでは見出しだけ中央寄せ。本文は行末が乱れるので左寄せのまま。 */
.cta-banner__title {
  font-size: var(--fs-xl); /* 20px → PC 32px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

.cta-banner__text {
  margin-top: 10px;
  font-size: 0.9375rem; /* 15px → PC 16px */
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

.cta-banner__btn {
  align-self: stretch;
}

@media (min-width: 768px) {
  .cta-banner {
    padding-block: 36px;
  }

  .cta-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }

  .cta-banner__title {
    font-size: 1.5rem; /* 24px */
    text-align: left;
  }

  .cta-banner__text {
    font-size: var(--fs-base);
  }

  .cta-banner__btn {
    flex-shrink: 0;
    align-self: center;
  }
}

@media (min-width: 1024px) {
  .cta-banner {
    /* Figma の帯は約190px。見出しの行ボックス48px（32px × 1.5）＋ margin-top 12px
       ＋本文2行56pxで中身が116pxなので、上下40pxで約196pxになる。
       実物を見てからの再調整を前提とした初期値。 */
    padding-block: 40px;
  }

  .cta-banner__title {
    font-size: 2rem; /* 32px */
  }

  .cta-banner__text {
    margin-top: 12px;
  }

  .cta-banner__btn {
    min-height: 70px;
    padding-inline: 32px;
    font-size: var(--fs-lg); /* 18px */
  }
}

/* ==========================================================================
   10. Stakeholder Benefits（3者それぞれの課題 → 提供価値）
   ========================================================================== */

.benefits__lead {
  margin-top: 20px;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-green-1200);
}

/* SPは1カラム縦積み。PCでは「見出し／課題／矢印／提供価値」の4行を
   列方向に流し込み、3列の各行の高さを自動で揃える。 */
.benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 36px;
}

/* 見出しは全幅で中央揃え（justify-content: center）。下のブレークポイントで
   padding（タブレット）や min-height（PC）を上書きしても、中央揃えは変えないこと。 */
.benefits__head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background-color: var(--color-green-700);
}

.benefits__role {
  font-size: var(--fs-xl); /* 20px → PC 22px */
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-white);
  /* タブレット幅で2行に折り返すと、唯一のフレックスアイテムであるこの要素が
     幅いっぱいに広がり、親（.benefits__head）の justify-content: center が
     効かなくなって左寄せに見えてしまうため、自身も中央揃えにしておく。 */
  text-align: center;
}

/* 「管理者・上司 の課題」の「の課題」だけを一回り小さくする。
   親に対する相対指定（em）にして、ブレークポイントで見出しサイズが
   変わっても縮小の比率が保たれるようにしている。 */
.benefits__role-suffix {
  font-size: 0.8em;
  /* 役割名（管理者・上司／育成担当者・人事担当／受講者）を「の課題」より
     強調するための余白。emはこの要素自身のfont-size（親の0.8em）が基準になるため、
     PC（親22px→自身17.6px）で約4.4px、タブレット（親18px→自身14.4px）で約3.6px、
     SP（親20px→自身16px）で約4pxになる。 */
  margin-inline-start: 0.25em;
}

.benefits__problems {
  padding: 20px 20px 24px;
  background-color: var(--color-green-50);
}

.benefits__gains {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-green-100);
}

.benefits__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem; /* 15px → PC 16px */
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-blue-900);
}

.benefits__item + .benefits__item {
  margin-top: 12px;
}

.benefits__item-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-blue-900);
}

/* 矢印の上下の余白は必ず同じ値にする（課題パネルと提供価値カードから等距離）。
   上下で違う値にすると矢印が上か下に寄って見える。 */
.benefits__arrow {
  display: flex;
  justify-content: center;
  padding-block: 10px;
  color: var(--color-green-100);
}

.benefits__value {
  margin-bottom: 32px;
  padding: 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-green-100);
}

.benefits__tag {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 6px 16px;
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.062em;
  color: var(--color-green-700);
  background-color: var(--color-white);
  border: 1px solid var(--color-green-100);
  border-radius: 190px;
}

.benefits__value-title {
  margin-top: 16px;
  font-size: var(--fs-xl); /* 20px → PC 22px */
  font-weight: 700;
  line-height: 1.41;
  text-align: center;
  color: var(--color-blue-900);
}

@media (min-width: 768px) {
  .benefits__lead {
    font-size: var(--fs-lg);
  }

  .benefits__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-auto-flow: column;
    column-gap: 16px;
    margin-top: 40px;
  }

  .benefits__value {
    margin-bottom: 0;
  }
}

/* タブレット幅は1列あたりが狭いため、見出しのパディングを基本（12px 20px）から
   左右は詰め・上下は広げる（14px 16px）。役割名が2行になりやすい分、縦方向は
   むしろ余裕を持たせている。 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .benefits__head {
    padding: 14px 16px;
  }

  .benefits__role {
    font-size: var(--fs-lg);
  }

  .benefits__problems,
  .benefits__value {
    padding-inline: 16px;
  }

  .benefits__item {
    font-size: 0.875rem;
  }

  .benefits__value-title {
    font-size: var(--fs-lg);
  }
}

@media (min-width: 1024px) {
  .benefits__lead {
    margin-top: 24px;
    font-size: 1.25rem; /* 20px */
    line-height: 1.5; /* 30px */
  }

  .benefits__grid {
    column-gap: 24px;
    margin-top: 44px;
  }

  .benefits__head {
    min-height: 67px;
  }

  .benefits__role {
    font-size: 1.375rem; /* 22px */
  }

  .benefits__problems {
    padding: 20px 30px 24px;
  }

  .benefits__item {
    font-size: var(--fs-base);
  }

  .benefits__item-icon {
    width: 31px;
    height: 31px;
  }

  .benefits__arrow svg {
    width: 60px;
    height: 36px;
  }

  .benefits__value {
    padding: 20px 30px 30px;
  }

  .benefits__value-title {
    margin-top: 20px;
    font-size: 1.375rem; /* 22px */
    line-height: 1.409; /* 31px */
  }
}

/* ==========================================================================
   11. Training Method（育成の自走サイクル）
   ========================================================================== */

.method {
  background-color: var(--color-green-50);
}

.method__card {
  position: relative;
  overflow: hidden;
  margin-top: 32px;
  padding: 32px 20px 36px;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
}

/* 置き方は .features__bg と同じ（原則は .hero__bg の注記を参照）。
   面はカードなので、はみ出した分は .method__card の overflow: hidden で切れる。 */
.method__bg {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: auto;
  max-width: none;
  height: 55%;
  aspect-ratio: var(--bg-wave-ratio);
  object-fit: cover;
  object-position: right bottom;
  transform: translateX(11%);
  /* カードの中の図版と重なるので、3つの特長と同じ 0.14 まで落としてある。 */
  opacity: 0.14;
  pointer-events: none;
}

.method__inner {
  position: relative;
  z-index: 1;
}

.method__title {
  font-size: 1.375rem; /* 22px → PC 40px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-green-1200);
}

.method__lead {
  margin-top: 20px;
  font-size: 0.9375rem; /* 15px → PC 20px */
  line-height: 1.8;
  text-align: left;
  color: var(--color-gray-950);
}

.method__highlight {
  font-weight: 700;
  color: var(--color-green-700);
}

/* 図版は薄い枠で囲って、背景の波形と切り分ける */
.method__figure {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 20px 16px 24px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-green-100);
}

.method__figure img {
  width: 100%;
  max-width: 582px;
  height: auto;
  margin-inline: auto;
}

.method__caption {
  margin-top: 8px;
  font-size: 1.0625rem; /* 17px → PC 26px */
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  color: var(--color-green-700);
}

@media (min-width: 768px) {
  .method__card {
    margin-top: 40px;
    padding: 44px 32px 48px;
  }

  .method__title {
    font-size: 1.75rem; /* 28px */
  }

  .method__lead {
    font-size: var(--fs-lg);
    text-align: center;
  }

  .method__figure {
    margin-top: 36px;
    padding: 24px 24px 28px;
  }

  .method__caption {
    font-size: 1.375rem; /* 22px */
  }
}

@media (min-width: 1024px) {
  .method__card {
    margin-top: 48px;
    padding: 60px 32px 64px;
  }

  .method__title {
    font-size: 2.5rem; /* 40px */
    line-height: 1.2;
  }

  .method__lead {
    margin-top: 26px;
    font-size: 1.25rem; /* 20px */
    line-height: 1.8; /* 36px */
  }

  .method__figure {
    margin-top: 40px;
    padding: 30px 32px 32px;
  }

  .method__caption {
    margin-top: 12px;
    font-size: 1.625rem; /* 26px */
    line-height: 1.538; /* 40px */
  }
}

/* --- 育成方法: 2つのアプローチ --------------------------------------------- */
.method__approach-lead {
  margin-top: 40px;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
  color: var(--color-green-1200);
}

.method__approaches {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

.method__approach {
  padding: 24px 20px 28px;
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-green-100);
}

.method__approach-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-green-400);
}

.method__approach-title {
  margin-top: 8px;
  font-size: 1.375rem; /* 22px → PC 22.4px */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--color-deep-green);
}

.method__approach-text {
  margin-top: 14px;
  font-size: 0.9375rem; /* 15px → PC 16px */
  line-height: 1.7;
  color: var(--color-green-1200);
}

@media (min-width: 768px) {
  .method__approach-lead {
    margin-top: 48px;
    font-size: var(--fs-lg);
  }

  .method__approaches {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .method__approach-title {
    font-size: 1.75rem; /* 28px */
  }

  .method__approach-text {
    font-size: var(--fs-base);
  }
}

@media (min-width: 1024px) {
  .method__approach-lead {
    margin-top: 56px;
    font-size: 1.25rem; /* 20px */
    line-height: 1.4; /* 28px */
  }

  .method__approaches {
    margin-top: 28px;
  }

  .method__approach {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 178px;
    padding: 24px 32px 28px;
  }

  .method__approach-title {
    margin-top: 6px;
    /* 1024px幅（この範囲の下限かつ最も厳しい条件）でカード内側395pxに対し
       「テーマ型・改善プロジェクト参画型」が1行に収まる上限は実測約23.51px。
       3%以上の余裕を持たせて22.4pxにしている（1280px以上ではさらに余裕が増える）。
       この1行化は1024px以上にのみ適用する。それ未満は見出しと本文の大きさの差が
       1pxまで縮んで強弱が失われるため、2行の折り返しを許容している。 */
    font-size: 1.4rem; /* 22.4px */
  }

  .method__approach-text {
    margin-top: 18px;
  }
}

/* .container が最大幅1216pxに達すると、アプローチ名の枠は498pxで固定され広がらなくなる。
   この枠では「テーマ型・改善プロジェクト参画型」が1行に収まる上限が実測約29.6pxあり、
   1024px時点の制約（上限23.51px）に合わせた22.4pxのままだと本文16pxとの差が1.4倍しかなく、
   見出しの左右に空白が余る。約6%の余裕を残して28pxまで戻し、本文との差を1.75倍にする。 */
@media (min-width: 1216px) {
  .method__approach-title {
    font-size: 1.75rem; /* 28px */
  }
}

/* ==========================================================================
   12. Case Study（支援事例）
   ========================================================================== */

/* カード全体がULS本体サイトの事例ページへのリンク（CaseStudy.astro）。
   FVのカード（.hero__case）と同じ「4px浮き上がる＋影」に揃える。ただしこちらは
   薄緑地に枠線があり元の影が無いため、影はFVより弱くし、あわせて枠線を
   --color-green-100 から --color-green-400 に濃くする（--color-green-400 は
   :focus-visible のアウトライン色（style.css:219）と同じ色なので、配色を変える際は注意）。 */
.case__card {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  background-color: var(--color-green-50);
  border: 1px solid var(--color-green-100);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.case__card:hover {
  border-color: var(--color-green-400);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.12),
    0 4px 8px -2px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.case__media {
  flex-shrink: 0;
}

.case__media img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.case__body {
  padding: 24px 20px 28px;
}

.case__logo {
  width: 146px;
  height: auto;
}

.case__title {
  margin-top: 16px;
  font-size: var(--fs-xl); /* 20px → PC 24px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.033em;
  color: var(--color-green-1200);
}

.case__person {
  margin-top: 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0.057em;
  color: var(--color-gray-500);
}

.case__quote {
  margin-top: 20px;
  padding: 16px 14px;
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  line-height: 1.73;
  color: var(--color-gray-600);
  background-color: var(--color-white);
  border: 1px solid var(--color-green-100);
}

/* 事例ページへの導線であることを示す部品。形は .btn を借り、色だけここで足す。
   お問い合わせ（--primary）・資料ダウンロード（--light）と同じ見た目にすると
   CVボタンと同格に見えるため、地を持たない枠線だけにしてある。
   ホバーを .case__button:hover ではなく .case__card:hover で受けているのは、
   実際に押せるのがカード全体だから（HTMLは <span> でリンクではない）。 */
.case__button {
  align-self: flex-start; /* PC幅で .case__body が縦flexになるため、横に伸びるのを止める */
  margin-top: 24px;
  color: var(--color-green-1200);
  background-color: transparent;
  border-color: var(--color-green-1200);
}

.case__card:hover .case__button {
  color: var(--color-white);
  background-color: var(--color-green-1200);
}

@media (min-width: 768px) {
  .case__card {
    flex-direction: row;
    margin-top: 40px;
  }

  .case__media {
    flex: 0 0 40%;
  }

  .case__media img {
    min-height: 100%;
  }

  .case__body {
    flex: 1 1 auto;
    padding: 24px 24px 28px 28px;
  }
}

@media (min-width: 1024px) {
  .case__card {
    margin-top: 48px;
  }

  .case__media {
    flex: 0 0 468px;
  }

  .case__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 310px;
    padding: 24px 30px 24px 30px;
  }

  .case__title {
    margin-top: 20px;
    font-size: 1.5rem; /* 24px */
    line-height: 1.333; /* 32px */
  }

  .case__person {
    margin-top: 14px;
  }

  .case__quote {
    margin-top: 22px;
    padding: 18px 14px;
    line-height: 1.733; /* 26px */
  }
}

/* ==========================================================================
   13. Plans & Pricing（プラン・料金）
   ========================================================================== */

.plans {
  background-color: var(--color-green-50);
}

/* 支援事例（白地）を伏せているあいだ、このセクションを白にして白／薄緑の交互を保つ。
   支援事例が抜けると 育成の自走サイクル（薄緑）→ プラン・料金（薄緑）が隣り合い、
   セクションの切れ目が読み取れなくなるため。
   付与の判定は src/lib/flags.mjs の SHOW_TAIHO_CASE（Plans.astro が見る）。
   true に戻すとこのクラスは付かなくなり、薄緑に戻る。 */
.plans--on-white {
  background-color: transparent;
}

.plans__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.875;
  letter-spacing: 0.025em;
  text-align: center;
  color: var(--color-green-1200);
}

.plans__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}

.plans__card {
  display: flex;
  flex-direction: column;
  padding: 24px 20px 28px;
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-green-100);
}

.plans__label {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 30px;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--color-deep-green);
  background-color: var(--color-green-200);
  border-radius: 174px;
}

.plans__title {
  margin-top: 16px;
  font-size: 1.375rem; /* 22px → PC 32px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-deep-green);
}

.plans__text {
  margin-top: 16px;
  font-size: 0.9375rem; /* 15px → PC 16px */
  line-height: 1.7;
  color: var(--color-green-1200);
}

.plans__note {
  margin-top: 28px;
  font-size: var(--fs-lg); /* 18px → PC 20px */
  font-weight: 700;
  text-align: center;
  color: var(--color-green-1200);
}

.plans__cta {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .plans__lead {
    font-size: var(--fs-lg);
  }

  .plans__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
  }

  .plans__card {
    padding: 30px 16px 32px;
  }

  .plans__title {
    font-size: 1.5rem; /* 24px */
  }

  .plans__text {
    margin-top: auto;
    padding-top: 20px;
    font-size: var(--fs-base);
  }
}

@media (min-width: 1024px) {
  .plans__lead {
    margin-top: 20px;
  }

  .plans__list {
    gap: 61px;
    margin-top: 44px;
  }

  .plans__card {
    min-height: 240px;
    padding: 30px 16px 38px;
  }

  .plans__title {
    /* Figmaと同じ位置（「ケーススタディ型 / プラン」）で折り返させるための上限幅 */
    max-width: 292px;
    margin-top: 20px;
    margin-inline: auto;
    font-size: 2rem; /* 32px */
    line-height: 1.1875; /* 38px */
  }

  .plans__note {
    margin-top: 40px;
    font-size: 1.25rem; /* 20px */
  }

  .plans__cta {
    margin-top: 29px;
  }

  .plans__cta-btn {
    min-height: 70px;
    padding-inline: 36px;
    font-size: var(--fs-lg);
  }
}

/* Plan Bの強制改行後の2行目「長期育成型プラン」（8文字）は、既定の24pxのままだと
   カード内側が狭い幅でさらに折り返してしまう。768pxからウィンドウ幅を1px単位で
   実測（.plans__title--bのfont-sizeを外し、既定24pxで行数が3行→2行に変わる境界を
   二分探索）したところ、817px幅ではcardInner=201px（3行）、818px幅ではcardInner=202px
   （2行）と、既定24pxが収まる境界はちょうど818pxだった（必要幅8×24×1.05=201.6px）。
   1px の安全マージンを取って818pxまでを縮小対象とし、819px以上は既定24pxに任せる。
   iPad Air縦向き（820px）はこの範囲の外側になるため、Plan Cなど他のカードと同じ
   24pxで表示される。Plan A・Cのタイトルはこのクラスを持たないため影響を受けない。 */
@media (min-width: 768px) and (max-width: 818.98px) {
  .plans__title--b {
    font-size: 1.3125rem; /* 21px */
  }
}

/* 同じ理由で1024px以上でも既定32pxが収まらない範囲がある。1024pxからウィンドウ幅を
   1px単位で実測（既定32pxで行数が3行→2行に変わる境界を二分探索）したところ、
   1109px幅では3行、1110px幅では2行だった（必要幅8×32×1.05=268.8px）。2pxの安全
   マージンを取って1111pxまでを縮小対象とし、1112px以上は既定32pxに任せる。 */
@media (min-width: 1024px) and (max-width: 1111.98px) {
  .plans__title--b {
    font-size: 1.6875rem; /* 27px */
  }
}

/* ==========================================================================
   14. Closing CTA
   ========================================================================== */

.closing {
  padding-block: 48px;
  background-color: var(--color-green-700);
}

.closing__inner {
  text-align: center;
}

.closing__title {
  font-size: 1.375rem; /* 22px → PC 40px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

.closing__text {
  margin-top: 14px;
  font-size: 0.9375rem; /* 15px → PC 16px */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.closing__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

@media (min-width: 768px) {
  .closing {
    padding-block: 64px;
  }

  .closing__title {
    font-size: 1.875rem; /* 30px */
  }

  .closing__text {
    font-size: var(--fs-base);
  }

  .closing__cta {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .closing {
    padding-block: 80px;
  }

  .closing__title {
    font-size: 2.5rem; /* 40px */
  }

  .closing__text {
    margin-top: 18px;
  }

  .closing__cta {
    margin-top: 34px;
  }

  .closing__btn {
    min-height: 64px;
    padding-inline: 32px;
    font-size: var(--fs-lg); /* 18px */
  }
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.footer {
  padding-block: 48px 40px;
  color: var(--color-white);
  background-color: var(--color-green-1200);
}

.footer__top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ロゴはULSコーポレートサイトへの外部リンク。
   block + fit-content にしているのは、クリック範囲をロゴの絵柄ぴったりに収めつつ、
   リンクにする前と余白を変えないため。inline-block だと行の高さ（文字の下がり分）が
   ロゴの下に約7px 足され、住所以下が下にずれる。 */
.footer__logo-link {
  display: block;
  width: fit-content;
}

.footer__logo-link:hover {
  opacity: 0.7;
}

.footer__logo {
  width: 200px;
  height: auto;
}

.footer__address {
  margin-top: 20px;
  font-size: 0.9375rem; /* 15px → PC 16px */
  font-weight: 700;
  font-style: normal;
  line-height: 1.6;
}

.footer__tel {
  margin-top: 20px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.footer__tel a:hover {
  color: var(--color-green-200);
}

.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__nav a {
  display: inline-block;
  padding-block: 6px;
  font-size: var(--fs-base);
  letter-spacing: 0.25em; /* Figma: 16px に対し 4px */
  color: #d9d9d9;
}

.footer__nav a:hover {
  color: var(--color-white);
}

.footer__copyright {
  margin-top: 40px;
  padding-top: 28px;
  font-size: var(--fs-sm);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

@media (min-width: 768px) {
  .footer {
    padding-block: 64px 48px;
  }

  .footer__top {
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
  }

  .footer__nav ul {
    align-items: flex-end;
    text-align: right;
  }
}

@media (min-width: 1024px) {
  .footer {
    padding-block: 100px 54px;
  }

  .footer__logo {
    width: 244px;
  }

  .footer__address,
  .footer__tel {
    font-size: var(--fs-base);
  }

  .footer__nav ul {
    gap: 0;
  }

  .footer__nav a {
    padding-block: 0;
    line-height: 2.5; /* 40px */
  }

  .footer__copyright {
    margin-top: 72px;
    padding-top: 40px;
  }
}

/* ==========================================================================
   16. Breadcrumb（下層ページ共通。緑の帯 Page Hero の中）
   ========================================================================== */

/* この部品は幅も左右の余白も持たない。帯の .page-hero__inner（.container）が
   持っているので、ここで重ねると余白が二重になる。

   項目が長くなっても2行に折り返さず横スクロールさせる。
   折り返すと下の見出しが押し下げられ、フォームが画面外に出るため。

   padding と同じ幅の負の margin は、フォーカスリング（3px＋offset 2px）が
   overflow で切れないための逃げ。レイアウト上の位置は動かない。 */
.breadcrumb {
  overflow-x: auto;
  margin: -5px;
  padding: 5px;
}

/* 既定はリンクと同じ薄いグレー。現在地だけ下で濃くする。 */
.breadcrumb__list {
  display: flex;
  align-items: center;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-gray-500);
  white-space: nowrap;
}

/* 現在地は本文と同じ濃さにして、リンク（薄いグレー）と強弱をつける。
   淡い緑（--color-green-50 = #f0f8f1）の上でのコントラストは10.37:1で、
   AA（4.5:1）にもAAA（7:1）にも余裕がある。 */
.breadcrumb__item [aria-current="page"] {
  color: var(--color-text);
}

/* 区切りの「>」。文字ではなく枠線で描いているのは、読み上げに混ざらないようにするため。 */
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline: 10px 12px;
  vertical-align: 1px;
  border-top: 1.5px solid var(--color-gray-400);
  border-right: 1.5px solid var(--color-gray-400);
  transform: rotate(45deg);
}

.breadcrumb__link:hover {
  color: var(--color-green-700);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .breadcrumb__list {
    font-size: var(--fs-sm);
  }
}

/* ==========================================================================
   17. Page Hero（下層ページ共通の帯）
   ========================================================================== */

/* 帯の高さは「上の padding ＋ 英語ラベル ＋ 見出し ＋ 間隔 ＋ パンくず ＋ 下の padding」。
   下の padding は .page-hero__breadcrumb の margin-top と同じ値にしてある（そちらの注記を参照）。 */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: 26px 18px;
  background-color: var(--color-green-50);
}

/* 波形は帯の右下に薄く敷く（原則は .hero__bg の注記を参照）。

   帯は横長なので、要素は上下いっぱい・右ぞろえのままでよい。上端・右端・下端は
   面の端にぞろい、左端は絵柄の無い側なので継ぎ目にならない。**つまり4辺とも
   面の内側に切れ目ができないので、ここだけは置き方を変えずマスクを外すだけで済む。**

   幅を100%にすると object-fit: cover の倍率が幅で決まってしまい、
   object-position の水平方向が効かず絵が中央に来る。要素自体を狭くして
   右端に寄せることで、波形を右側に置いている。 */
.page-hero__bg {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 65%;
  min-width: 360px;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  /* 帯が低いぶん絵柄の濃い部分だけが出るので、トップページより薄い 0.12 にしてある。
     マスクを外した以上、同じ 0.20 では今までより一気に強く出るため。 */
  opacity: 0.12;
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
}

/* h1 とパンくずの間。パンくずは帯のいちばん下に置く。
   PageHero はスロットが渡されたときだけこの枠を出すので、
   パンくずのないページで余白が空くことはない。

   パンくず側の負のマージン（節16）が padding をちょうど打ち消すため、
   この値は「h1 の文字の下端からパンくずの文字の上端まで」、
   .page-hero の padding-bottom は「パンくずの文字の下端から帯の下端まで」に
   そのまま一致する。**下の余白はこの間隔と同じか少し狭く保つ**と、
   英語ラベル＋h1 のかたまりとパンくずがひとまとまりに見える。 */
.page-hero__breadcrumb {
  margin-top: 18px;
}

.page-hero__en {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-green-600);
}

.page-hero__title {
  margin-top: 2px;
  font-size: 1.75rem; /* 28px */
  line-height: 1.35;
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  .page-hero {
    padding-block: 38px 24px;
  }

  .page-hero__breadcrumb {
    margin-top: 24px;
  }

  .page-hero__en {
    font-size: var(--fs-base);
  }

  .page-hero__title {
    font-size: 2rem; /* 32px */
  }
}

@media (min-width: 1024px) {
  .page-hero {
    padding-block: 52px 30px;
  }

  .page-hero__breadcrumb {
    margin-top: 30px;
  }

  .page-hero__title {
    font-size: 2.5rem; /* 40px */
  }
}

/* ==========================================================================
   18. Form Embed（MT.netフォームのiframe枠）
   ========================================================================== */

/* ヘッダーのボタン（#form）からの飛び先。固定ヘッダーに隠れない位置で止まるのは、
   html に scroll-padding-top: var(--header-h) が既にあるため（2. Reset & Base 参照）。
   ここで scroll-margin-top を足す必要はない。 */
.form-embed {
  margin-top: 32px;
}

/* height はフォームからの高さ通知が届くまでの初期値。
   通知を受けたら public/js/main.js が実寸で上書きする。
   フォーム自体がreCAPTCHAでJavaScript必須なので、この値の精度は問わない。 */
.form-embed__frame {
  display: block;
  width: 100%;
  height: 700px;
  overflow: hidden;
  border: 0;
}

/* 開発サーバーだけで出るダミー枠（ビルド出力には含まれない） */
.form-embed__dev {
  display: grid;
  place-items: center;
  padding: 24px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-gray-500);
  text-align: center;
  border: 2px dashed var(--color-gray-100);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   19. Form Page（資料DL・お問い合わせページの本文カラム）
   ========================================================================== */

/* 帯とフォームの間は --section-pad（64〜96px）を使わず詰める。
   フォームの最初の入力欄をPCの初期画面内に入れるため。 */
.form-page {
  padding-block: 32px 48px;
}

/* 入力欄が横に伸びすぎると書きにくいので、本文とフォームは幅を絞って中央に置く。
   パンくずと帯は .container（最大1152px）の左端に揃うので、
   「見出しのレイヤー（左揃え）」と「読む・入力するレイヤー（中央の狭いカラム）」に分かれる。
   ※ この720pxは、ステージングでフォームの実物を見てから760〜880pxの範囲で
     微調整する前提（フォーム内部の余白が別オリジンのため測れない）。 */
.form-page__inner {
  width: 100%;
  max-width: calc(720px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.form-page__lead {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

@media (min-width: 1024px) {
  .form-page {
    padding-block: 40px 64px;
  }
}