/* ============================================================
   採用LPテンプレート style.css
   ============================================================
   規約（CLAUDE.md より）:
   - レスポンシブは本ファイル内の @media に集約する（別ファイル分割禁止。
     多重上書き事故防止のため「同一ファイル内で後勝ち」を保証する）
   - 日本語本文に text-align: justify は使用禁止（字間崩れの既知事故）
   - 色・フォント・CTAは :root のデザイントークン経由でのみ指定する
   - モバイルファースト: 基準幅375px、min-width で拡張
   ============================================================ */

/* ===== デザイントークン =====
   2026-08-24: 社長指示「構成はいいんだがdesign色味とかみこと流を使用できますか」により、
   配色を design-systems / css-templates の「みこと流」正本へ差し替えた。
   正本= projects/css-templates/lp-saiyo-mikoto.html の :root（クリーム地＋4色）。
   独自配色は発明していない。構成・レイアウト・タイポは触っていない（色とそれに追随する影・罫線のみ）。 */
:root {
  /* --- みこと流の装飾4色（この4色は正本の値。変更しない） --- */
  --mikoto-blue: #1499BA;
  --mikoto-yellow: #E49B2C;
  --mikoto-coral: #DC7759;
  --mikoto-green: #26AD6B;
  /* --- 同・テキスト用の濃色（正本がAA対応として持っているもの） --- */
  --mikoto-blue-txt: #0C6F86;
  --mikoto-coral-txt: #A8492E;
  --mikoto-green-txt: #1A7A49;
  --mikoto-yellow-badge: #905013;

  /* --- LPテンプレートのトークンへの割り当て --- */
  --color-primary: var(--mikoto-coral);        /* CTA・大きい数字（18.66px以上の太字限定） */
  --color-primary-dark: var(--mikoto-coral-txt); /* 小さいテキスト用（白・クリーム地でAA 4.5:1超） */
  --color-primary-light: #F3B9A4;              /* 暗色背景上の小テキスト用 */
  --color-primary-soft: #FBE6DD;
  --color-accent: var(--mikoto-green);         /* 図形・大きい数字用 */
  --color-accent-dark: var(--mikoto-green-txt); /* 小さいテキスト用（白地でAA 4.5:1超） */
  --color-accent-soft: #E3F3EA;
  --color-ink: #444444;                        /* 本文（みこと --ink-strong） */
  --color-ink-soft: #666666;                   /* 補助文（みこと --ink） */
  --color-cream: #FEF2E2;                      /* みことのベースクリーム */
  --color-sand: #F8E6CB;                       /* トーンオントーンの一段濃（みこと --tone） */
  --color-paper: #FFF7ED;                      /* カード面・プレート（みこと --plate） */
  --color-line: #F0DCBE;                       /* 罫線（みこと --line） */
  --color-line-active: #06C755;                /* LINEブランド色（機能色・変更しない） */
  --color-line-active-dark: #05A648;           /* LINE緑のhover（ブランド緑を暗くしただけ） */

  /* フォント: 構成そのままのため変更していない */
  /* 2026-08-24: みこと流をメインに。本文・見出しとも Zen Kaku Gothic New（正本と同じ）。
     旧ヒトトナリ流（しっぽり明朝＋BIZ UDPGothic）から入れ替えた */
  --font-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-display: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-num: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-hand: 'Caveat', cursive;

  /* CTA: コーラルの装飾色は白文字でAA不合格(3.3:1)のため、正本のテキスト用濃色を背景に使う */
  --cta-bg: var(--mikoto-coral-txt);
  --cta-bg-dark: #8B3A22;
  --cta-text: #FFFFFF;

  --radius-card: 25px;                         /* みことの角丸3語彙 20/25/55 の中 */
  --shadow-card: 0 0 0 1px var(--color-line), 0 6px 24px rgba(120, 90, 60, 0.10);
  --shadow-cta: 0 8px 20px rgba(168, 73, 46, 0.30);
  --shadow-cta-sm: 0 4px 14px rgba(168, 73, 46, 0.34);
  --dot-tint: rgba(220, 119, 89, 0.10);
  --dot-tint-accent: rgba(38, 173, 107, 0.14);
  --container: 1080px;
}

/* ===== リセット・ベース ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.85;              /* 日本語本文の標準行間 */
  letter-spacing: 0.02em;
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.45;
  word-break: keep-all;           /* 見出しのみ。本文には適用しない（justify事故の教訓） */
  overflow-wrap: break-word;
  margin: 0;
}
p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); }
em, i { font-style: normal; }
sup { font-size: 0.55em; }

/* Archivo数字: 数値表現はすべてこのクラス経由 */
.num {
  font-family: var(--font-num);
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.01em;
}

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

/* ===== レイアウト共通 ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.section { padding: 56px 0; }
@media (min-width: 768px) { .section { padding: 96px 0; } }  /* 余白広め＝上質側に寄せる（2026-08-20） */

.sec-title {
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 36px;
  letter-spacing: 0.05em;   /* 見出しの字間をゆったり（本文0.02emより広く・品格の土台） */
  line-height: 1.5;
}
.sec-title-left { text-align: left; }
.sec-eyebrow {
  display: block;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary-dark);   /* 小テキストはdark系でコントラストAA確保 */
  margin-bottom: 10px;
}
.sec-eyebrow::before {
  content: "●";
  font-size: 8px;
  vertical-align: 3px;
  margin-right: 8px;
  color: var(--color-accent);
}
@media (min-width: 768px) {
  .sec-title { font-size: 32px; margin-bottom: 48px; }
}

.sec-note {
  font-size: 12px;
  color: var(--color-ink-soft);
  text-align: center;
  margin-top: 20px;
}
.sec-cta { text-align: center; margin-top: 40px; }

/* ===== ボタン ===== */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;               /* タップ領域44px以上を大きく上回る */
  padding: 14px 36px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-sub {
  font-family: var(--font-jp);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.9;
}
.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { background: var(--cta-bg-dark); }
.btn-outline {
  background: var(--color-paper);
  color: var(--color-ink);
  border: 2px solid var(--color-line);
}
.btn-outline .num { font-size: 1.15em; }
.btn-line {
  background: var(--color-line-active);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(6, 199, 85, 0.28);
}

/* ===== ヘッダー ===== */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 30px;
  /* 2026-08-24: ヒーローを全面写真に戻したため、ロゴが写真に沈まないよう白のグラデ地を敷く。
     下端は透明に抜いて境目を出さない */
  background: linear-gradient(to bottom,
    rgba(255, 247, 237, 1) 0%,
    rgba(255, 247, 237, 1) 62%,
    rgba(255, 247, 237, 0) 100%);
}
.site-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.8);
}
.site-logo-main {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--color-ink);
}
.site-logo-sub {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-ink-soft);
}
.site-header-cta {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--cta-text);
  background: var(--cta-bg);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-cta-sm);
}

/* ===== ヒーロー ===== */
.hero { position: relative; }
.hero-media img {
  width: 100%;
  height: auto;
  /* 小型機（iPhone SE等）でもCTAがファーストビュー内に収まるよう写真高さを動的に制限 */
  max-height: 58vh;
  object-fit: cover;
  /* 現ヒーロー写真(298=若手職員)は顔が画像最上部にあるため上端維持。
     旧30%指定は1920×1080等の横長画面で顔が切れた（2026-08-21社長指摘） */
  object-position: center top;
}
.hero-inner {
  position: relative;
  max-width: var(--container);
  margin: -96px auto 0;           /* 写真にカードを重ねる */
  padding: 0 16px 8px;
}
.hero-card {
  position: relative;
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 18px 22px;
}
.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.hero-eyebrow span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;   /* 375px幅で2チップが1行に収まる詰め（FV内CTA死守のため） */
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.hero-copy {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 14px;
}
.hero-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.hero-stats li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-cream);
  border: 2px dashed var(--color-line);   /* ステッチ風の枠 = 本テンプレートの意匠 */
  border-radius: 20px;
  padding: 8px 4px 6px;
  text-align: center;
}
.hero-stats .num {
  font-size: 30px;
  color: var(--color-primary);
  line-height: 1;
}
.hero-stats .unit {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--color-primary);        /* 数字と同色＝単位まで含めて全文字強調（2026-08-21指示） */
  /* 固定高で統一: 空のunitでもラベルの縦位置が揃うようにする */
  height: 18px;
  line-height: 18px;
}
.hero-stats .label {
  font-size: 11px;
  font-weight: 900;
  color: var(--color-ink);            /* ラベルも濃色で強調（旧ink-soft） */
  margin-top: 2px;
}
.hero-note {
  font-size: 10.5px;
  color: var(--color-ink-soft);
  margin-bottom: 12px;
}
.hero-cta { text-align: center; }
.hero-cta .btn { width: 100%; max-width: 420px; }

.hero-stamp {
  position: absolute;
  top: -46px;
  right: 10px;
  width: 92px;
  height: 92px;
  transform: rotate(8deg);
}
.hero-stamp text {
  font-family: var(--font-display);
  font-weight: 900;
  fill: #FFFFFF;
  text-anchor: middle;
}
.stamp-line1 { font-size: 24px; }
.stamp-line2 { font-size: 24px; }

@media (min-width: 768px) {
  .hero-media img {
    height: min(74vh, 660px);
    max-height: none;              /* モバイル用の高さ制限を解除 */
    object-fit: cover;
    /* hatto113は職員の頭が画像上部約15%にあり、centerだと1920×1080で頭が切れる
       （8/23に本体で実測済みの値をヒーロー写真の再指名にあわせて移植） */
    object-position: center 15%;
  }
  .hero-inner {
    margin-top: -170px;
    padding: 0 24px;
  }
  .hero-card {
    max-width: 620px;
    padding: 40px 44px;
  }
  .hero-eyebrow span { font-size: 12px; padding: 3px 12px; }
  .hero-copy { font-size: 36px; }
  .hero-stats .num { font-size: 38px; }
  .hero-stats .label { font-size: 12.5px; }
  .hero-cta { text-align: left; }
  .hero-stamp {
    width: 128px;
    height: 128px;
    top: -60px;
    right: -28px;
  }
}

/* ===== 共感セクション（インク地に反転して緊張感を出す） ===== */
.empathy {
  background: var(--color-ink);
  color: var(--color-cream);
}
.empathy .sec-title { color: #FFFFFF; }
.empathy .sec-eyebrow { color: var(--color-primary-light); }  /* 暗色地ではdarkコーラルがAA未達のため明色に */
.empathy-list {
  max-width: 560px;
  margin: 0 auto 28px;
  display: grid;
  gap: 12px;
}
.empathy-list li {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px 12px 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}
.empathy-lead {
  text-align: center;
  font-size: 15px;
  line-height: 2.1;
}
.empathy-lead strong {
  color: #FFC9B8;
  font-weight: 700;
}
@media (min-width: 768px) {
  .empathy-list { max-width: 640px; }
  .empathy-lead { font-size: 17px; }
}

/* ===== 数字で見る ===== */
.stats {
  background:
    radial-gradient(var(--dot-tint-accent) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-color: var(--color-paper);
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat-card {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.stat-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-dark);
  border-bottom: 2px dotted var(--color-line);
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.stat-value { line-height: 1; margin-bottom: 10px; }
.stat-value .num {
  font-size: 46px;
  color: var(--color-primary);
}
.stat-value .unit {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-soft);
  margin-left: 4px;
}
.stat-desc {
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-ink-soft);
  text-align: left;
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .stat-card { padding: 26px 22px 22px; }
  .stat-value .num { font-size: 58px; }
  .stat-desc { font-size: 13px; }
}

/* ===== 1日の流れ ===== */
.day { background: var(--color-sand); }
.day-layout { display: grid; gap: 32px; }
.timeline {
  position: relative;
  display: grid;
  gap: 20px;
  padding-left: 86px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 62px;
  top: 10px;
  bottom: 10px;
  border-left: 3px dotted var(--color-accent);
}
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-paper);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.tl-time {
  position: absolute;
  left: -86px;
  top: 2px;
  width: 48px;
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-ink);
  text-align: right;
}
.tl-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.tl-body p {
  font-size: 13.5px;
  color: var(--color-ink-soft);
  line-height: 1.8;
}
.tl-body strong { color: var(--color-primary); }
.day-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.day-photos img { border-radius: var(--radius-card); }
@media (min-width: 900px) {
  .day-layout {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
  .day-photos {
    grid-template-columns: 1fr;
    gap: 20px;
    position: sticky;
    top: 24px;
  }
}

/* ===== 先輩の声 ===== */
.voice-grid { display: grid; gap: 28px; }
.voice-card {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding-bottom: 24px;
}
.voice-card img { width: 100%; }
/* 本人写真の提供までのモノグラム（写真が届いたら <img> に戻す） */
.voice-avatar {
  display: grid;
  place-items: center;
  padding: 26px 0 0;
}
.voice-avatar span {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  border: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  color: var(--color-accent-dark);
}
.voice-name {
  font-size: 18px;
  font-weight: 900;
  padding: 18px 22px 0;
}
.voice-name span {
  display: block;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-ink-soft);
  margin-top: 2px;
}
.voice-q {
  position: relative;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-primary-dark);
  padding: 14px 22px 0 40px;
  line-height: 1.7;
}
.voice-q::before {
  content: "“";
  position: absolute;
  left: 20px;
  top: 8px;
  font-family: var(--font-num);
  font-size: 34px;
  line-height: 1;
  color: var(--color-primary-soft);
  -webkit-text-stroke: 1px var(--color-primary);
}
.voice-a {
  font-size: 13.5px;
  color: var(--color-ink-soft);
  padding: 10px 22px 0;
  line-height: 1.9;
}
@media (min-width: 768px) {
  .voice-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ===== 園の雰囲気 ===== */
.gallery { background: var(--color-paper); border-top: 1px solid var(--color-line); } /* 白セクション連続時の継ぎ目（2026-08-17〜） */

/* 流れる写真帯（全幅・ホバーで一時停止）
   複製2周構造が前提: .m-group×2（2周目はaria-hidden）。
   gapはgroup内のみ＋group自身のpadding-rightで持つ＝-50%移動で継ぎ目が出ない */
.marquee { overflow: hidden; margin-bottom: 36px; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: loop-slide 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.m-group { display: flex; gap: 14px; padding-right: 14px; }
.m-item {
  width: 220px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  flex-shrink: 0;
}
@keyframes loop-slide { to { transform: translateX(-50%); } }
@media (min-width: 768px) {
  .marquee { margin-bottom: 48px; }
  .m-item { width: 270px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 36px;
}
.gallery-grid img { border-radius: 20px; }
.workforce {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 22px;
}
.workforce h3 {
  font-size: 17px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 18px;
}
.workforce-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 10px;
}
.workforce-facts li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.4;
}
.workforce-facts .num {
  font-size: 34px;
  color: var(--color-accent);
  line-height: 1.1;
}
.workforce-facts .num i {
  font-size: 0.55em;
  font-weight: 900;
  font-family: var(--font-display);   /* 「施設」「年設立」等の単位語まで強調（2026-08-21指示） */
}
.workforce-facts span {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-soft);
}
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }  /* 6枚構成=3列×2行（2026-08-21〜） */
  .workforce { padding: 34px 40px; }
  .workforce-facts { grid-template-columns: repeat(4, 1fr); }
  .workforce-facts .num { font-size: 42px; }
}

/* ===== 園長メッセージ ===== */
.director-layout {
  display: grid;
  gap: 28px;
  align-items: start;
}
.director-photo {
  width: 200px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.director-body p {
  font-size: 14.5px;
  line-height: 2.0;
  margin-bottom: 16px;
}
.director-name {
  font-size: 13px;
  color: var(--color-ink-soft);
}
.director-name em {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-ink);
}
@media (min-width: 768px) {
  .director-layout { grid-template-columns: 260px 1fr; gap: 48px; }
  .director-photo { width: 100%; margin: 0; }
}

/* ===== 待遇・福利厚生 ===== */
.benefits { background: var(--color-sand); }
.benefit-list { display: grid; gap: 14px; }
.benefit-item {
  background: var(--color-paper);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.benefit-item dt {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.benefit-item dt::before {
  content: "✿";
  color: var(--color-accent);
  margin-right: 8px;
}
.benefit-item dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--color-ink-soft);
}
/* 1行1項目の箇条書き（「改行がなく見づらい」指摘への対応・2026-08-21） */
.benefit-points li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 4px;
}
.benefit-points li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-accent-dark);
  font-weight: 700;
}
@media (min-width: 768px) {
  .benefit-list { grid-template-columns: 1fr 1fr; gap: 20px; }
  .benefit-item { padding: 24px 28px; }
}

/* ===== 募集要項 ===== */
.req-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-paper);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  font-size: 13.5px;
}
.req-table th, .req-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-cream);
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.req-table tr:last-child th, .req-table tr:last-child td { border-bottom: none; }
.req-table th {
  width: 96px;
  background: var(--color-accent-soft);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  font-size: 12.5px;
}
.req-sub {
  display: block;
  font-size: 12px;
  color: var(--color-ink-soft);
}
@media (min-width: 768px) {
  .req-table { font-size: 15px; }
  .req-table th { width: 200px; font-size: 14px; padding: 18px 24px; }
  .req-table td { padding: 18px 24px; }
}

/* ===== FAQ ===== */
.faq { background: var(--color-paper); }
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq-item {
  background: var(--color-paper);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.7;
  padding: 16px 48px 16px 52px;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "Q";
  position: absolute;
  left: 18px;
  top: 15px;
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 800;
  color: var(--color-paper);
  background: var(--color-accent);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.faq-item summary::after {
  content: "＋";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  content: "－";
}
.faq-item p {
  padding: 0 20px 18px 52px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-ink-soft);
}
@media (min-width: 768px) {
  .faq-item summary { font-size: 16px; }
  .faq-item p { font-size: 14.5px; }
}

/* ===== 応募フロー ===== */
.flow { background: var(--color-paper); }
.flow-steps {
  counter-reset: flow;
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
}
.flow-step {
  position: relative;
  background: var(--color-paper);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 18px 20px 16px 72px;
}
.flow-num {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.flow-step h3 { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.flow-step p { font-size: 13px; color: var(--color-ink-soft); line-height: 1.8; }
@media (min-width: 900px) {
  .flow-steps {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
    gap: 20px;
  }
  .flow-step { padding: 66px 22px 22px; text-align: center; }
  .flow-num { left: 50%; top: 16px; transform: translateX(-50%); }
  .flow-step p { text-align: left; }
}

/* ===== 動画（OPT:VIDEO用） ===== */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 760px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--color-ink);
}
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-embed video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }

/* ===== 制度ブロック ===== */
.feature-list { display: grid; gap: 20px; max-width: 760px; margin: 0 auto; }
.feature-card {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.feature-card img { width: 100%; }
.feature-body { padding: 18px 20px 22px; }
.feature-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.feature-tags .tag-num {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 22px;
  color: var(--color-primary);
}
.feature-tags span:not(.tag-num) {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  border-radius: 999px;
  padding: 3px 10px;
}
.feature-card h3 { font-size: 19px; font-weight: 900; margin-bottom: 8px; }
.feature-sub {
  display: block;
  font-family: var(--font-jp);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-top: 2px;
}
.feature-desc {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-ink-soft);
  margin-bottom: 12px;
}
.feature-voice {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
  background: var(--color-cream);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
}
.feature-voice span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink-soft);
  margin-top: 2px;
}
@media (min-width: 900px) {
  .feature-list { max-width: none; gap: 28px; }
  .feature-card {
    display: grid;
    grid-template-columns: 42% 1fr;
    align-items: stretch;
  }
  .feature-card img { height: 100%; object-fit: cover; }
  .feature-card:nth-child(even) img { order: 2; }  /* 写真とテキストを交互に */
  .feature-body { padding: 28px 32px; align-self: center; }
}

/* ===== アクセス ===== */
.access { background: var(--color-sand); }
.access-layout { display: grid; gap: 20px; max-width: 760px; margin: 0 auto; }
.access-info { display: grid; gap: 10px; align-content: start; }
.access-info > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  background: var(--color-paper);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  font-size: 14px;
}
.access-info dt {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent-dark);
}
.access-info dd { margin: 0; line-height: 1.8; }
.access-map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.access-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 900px) {
  .access-layout { grid-template-columns: 1fr 1fr; max-width: none; align-items: start; }
  .access-map { aspect-ratio: auto; height: 100%; min-height: 280px; }
}

/* ===== LINE主導モード =====
   導線をLINE一本にする案件（GPS広告×LINE運用等）では <body data-cta="line"> を付ける。
   スティッキーCTAの主ボタンがLINEになり、フォームへのボタンは消える */
[data-cta="line"] .sticky-cta { grid-template-columns: 76px 1fr; }
[data-cta="line"] .sticky-apply { display: none; }
[data-cta="line"] .sticky-line {
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(6, 199, 85, 0.35);
}

/* ===== 応募フォーム ===== */
.apply {
  background:
    radial-gradient(var(--dot-tint) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-color: var(--color-paper);
  /* スティッキーCTAに隠れないよう余白を確保 */
  padding-bottom: 120px;
}
.apply-lead {
  text-align: center;
  font-size: 14.5px;
  margin-bottom: 32px;
}
.apply-lead strong {
  color: var(--color-primary);
  font-family: var(--font-num);
  font-size: 1.2em;
}
.apply-form {
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 22px 30px;
  display: grid;
  gap: 20px;
}
.form-field { display: grid; gap: 6px; border: none; padding: 0; margin: 0; }
.form-field label, .form-field legend {
  font-weight: 700;
  font-size: 14px;
  padding: 0;
}
.req-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--color-primary-dark);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: 2px;
}
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-jp);
  font-size: 16px;                 /* iOSのフォーカス時自動ズームを防ぐため16px未満にしない */
  color: var(--color-ink);
  background: var(--color-cream);
  border: 2px solid var(--color-line);
  border-radius: 20px;
  padding: 13px 14px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #FFFFFF;
}
.field-note { font-size: 11.5px; color: var(--color-ink-soft); }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-chip { position: relative; }
.radio-chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.radio-chip span {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  min-height: 44px;
  border: 2px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-cream);
  transition: all 0.15s ease;
}
.radio-chip input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
}
.radio-chip input:focus-visible + span {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* バリデーションエラーの視覚表示（ブラウザ標準ツールチップだけでは見落とされるため） */
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
  border-color: var(--color-primary-dark);
  background: #FDF0ED;
}
.form-field.is-invalid .radio-chip span { border-color: var(--color-primary-dark); }
.form-field .field-error {
  display: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.form-field.is-invalid .field-error { display: block; }

/* ハニーポット: 視覚・スクリーンリーダー双方から隠す */
.hp-wrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-privacy { font-size: 12px; text-align: center; color: var(--color-ink-soft); }
.btn-submit { width: 100%; }
.form-note {
  font-size: 12px;
  text-align: center;
  color: var(--color-ink-soft);
}

.apply-alt { text-align: center; margin-top: 36px; }
.apply-alt > p { font-size: 13.5px; font-weight: 700; margin-bottom: 14px; }
.apply-alt-btns {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .apply-alt-btns { grid-template-columns: 1fr 1fr; }
  .apply-form { padding: 40px 44px; }
}

/* ===== フッター ===== */
.site-footer {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.85);
  padding: 40px 0 110px;           /* スティッキーCTAぶんの逃げ */
  text-align: center;
  font-size: 12.5px;
  line-height: 2;
}
.footer-nav { margin: 12px 0; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.footer-nav a { color: rgba(255, 255, 255, 0.85); }
.footer-demo-note { font-size: 11px; color: rgba(255, 255, 255, 0.55); margin-top: 10px; }
.footer-copy { margin-top: 8px; color: rgba(255, 255, 255, 0.55); }

/* ===== スティッキーCTA ===== */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 88px 68px 1fr;   /* 給与・条件／電話／LINEで相談する（こざくら型・2026-08-21） */
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);   /* iOS Safari 17以前はプレフィックス必須 */
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 20px rgba(120, 90, 60, 0.14);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 50px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  text-decoration: none;
  line-height: 1.2;
}
.sticky-icon { display: inline-flex; }
.sticky-tel,
.sticky-req {
  background: var(--color-paper);
  color: var(--color-ink);
  border: 2px solid var(--color-line);
}
.sticky-req { font-size: 12.5px; }
.sticky-line {
  background: var(--color-line-active);
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(6, 199, 85, 0.28);
}
@media (min-width: 768px) {
  .sticky-cta {
    max-width: 560px;
    left: auto;
    right: 24px;
    bottom: 24px;
    border-radius: 20px;
    padding: 10px;
  }
}

/* ===== 数字カードの園ラベル（複数園比較用バッジ） ===== */
.stat-garden {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 6px;
}

/* ===== 園一覧（東京=2園を厚めのカードで） ===== */
.facilities { background: var(--color-sand); }
.facility-grid { display: grid; gap: 24px; }
.facility-card {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.facility-card-photo img { width: 100%; }
.facility-card-body { padding: 22px 20px 26px; }
.facility-card-type {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.facility-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 14px;
  line-height: 1.4;
}
.facility-info {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 8px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px dotted var(--color-line);
}
.facility-info dt {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink-soft);
}
.facility-info dd { margin: 0; line-height: 1.75; }
.facility-features-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}
.facility-features { display: grid; gap: 6px; margin-bottom: 18px; }
.facility-features li {
  position: relative;
  font-size: 13px;
  line-height: 1.75;
  padding-left: 18px;
  color: var(--color-ink-soft);
}
.facility-features li::before {
  content: "◦";
  position: absolute;
  left: 2px;
  color: var(--color-accent);
  font-weight: 700;
}
.facility-card-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.facility-card-cta .btn { min-height: 52px; padding: 10px 22px; font-size: 14px; }
@media (min-width: 900px) {
  .facility-grid { grid-template-columns: 1fr 1fr; }
  .facility-card-body { padding: 26px 26px 30px; }
}

/* ===== 求人ブロック（募集要項・複数求人） ===== */
.req-block { margin-bottom: 32px; }
.req-block:last-child { margin-bottom: 0; }
.req-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 14px;
}
.req-badge-urgent {
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--color-primary-dark);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.req-pending {
  background: var(--color-paper);
  border: 2px dashed var(--color-line);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-ink-soft);
}
.req-pending strong { color: var(--color-primary-dark); }
@media (min-width: 768px) {
  .req-block-title { font-size: 18px; }
}

/* ===== 見学ツアー案内 ===== */
.tour {
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.tour-box {
  max-width: 680px;
  margin: 0 auto;
  background: var(--color-accent-soft);
  border-radius: var(--radius-card);
  padding: 26px 24px 28px;
}
.tour-lead {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent-dark);
  margin-bottom: 18px;
}
.tour-schedule {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.tour-schedule li {
  background: var(--color-paper);
  border-radius: 20px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.7;
  box-shadow: var(--shadow-card);
}
.tour-schedule strong {
  display: inline-block;
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  margin-right: 6px;
}
.tour-contact {
  text-align: center;
  font-size: 12.5px;
  color: var(--color-ink-soft);
  margin-top: 16px;
}
@media (min-width: 768px) {
  .tour-box { padding: 36px 44px 40px; }
  .tour-schedule { grid-template-columns: 1fr 1fr; }
}

/* ===== モーション（過度にしない・reduce対応） ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.is-shown {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   ヒトトナリ流タイポ・作法（2026-08-21 比較用バリアント）
   出典: design-systems/hitotonari-warm-serif.css のレシピを
   本テンプレのトークン体系に翻訳して適用（後勝ち上書き）
   ============================================================ */
body { line-height: 2.0; letter-spacing: 0.045em; }   /* ゆったり行間が「品」の土台 */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.7; }  /* 明朝はW700が本家の所作（W900の偽ボールドを避ける） */
.sec-title { font-weight: 700; letter-spacing: 0.14em; }
.hero-copy { font-weight: 700; letter-spacing: 0.08em; }
.voice-name, .workforce h3, .facility-card-name { font-weight: 700; }
.site-logo-main { font-weight: 700; letter-spacing: 0.06em; }
.btn { font-family: var(--font-jp); }                 /* ボタンはゴシックが本家流 */
.num { font-weight: 600; }                            /* Jostは600が上品 */

/* 手書き英字ラベル（sec-eyebrow = Movie / Interview 等の英字のみ対象） */
.sec-eyebrow {
  font-family: var(--font-hand);
  font-size: 30px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--color-accent-dark);
  transform: rotate(-3deg);
  margin-bottom: 4px;
}
.sec-eyebrow::before { content: none; }

/* 丸の徹底: 写真の有機角丸（1角だけ大きく）・帯とギャラリーに適用 */
.gallery-grid img:nth-child(3n+1) { border-radius: 1.6rem 4rem 1.6rem 1.6rem; }
.gallery-grid img:nth-child(3n+2) { border-radius: 4rem 1.6rem 1.6rem 1.6rem; }
.gallery-grid img:nth-child(3n)   { border-radius: 1.6rem 1.6rem 4rem 1.6rem; }
.m-item { border-radius: 1.8rem; }
.feature-card img { border-radius: 1.6rem 1.6rem 0 0; }
.day-photos img, .hero-media img { border-radius: 0; }

/* 見出し直下の余白リズム（明朝の字間ぶん、下余白をひと呼吸広く） */
@media (min-width: 768px) {
  .sec-title { margin-bottom: 56px; }
}

/* ============================================================
   v2「どんと見せ方」追補（2026-08-22）
   出典: サマバケ流の見せ方骨格（円形クラスタ・巨大見出し・ピル数字）を
   種の会トークン（コーラル×セージ）＋しっぽり明朝で翻訳。
   設計根拠: Codex反証 inv-tokyo-v2-samabake-01
   規約: 後勝ち上書きのため必ずファイル末尾に置く
   ============================================================ */

:root {
  /* サンド地の小さい文字用（白地dark系はサンド上で4.5:1未満のため深色を用意） */
  --color-primary-deep: #B73821;
  --color-accent-deep: #4D6A4A;
}

/* ---------- 見出し3階層 ---------- */
/* 特大: ヒーロー / 数字 / 園の1日 / 制度 / 職員のリアル のみ */
.sec-title-xl { font-size: 30px; letter-spacing: 0.1em; line-height: 1.55; }
@media (min-width: 768px) { .sec-title-xl { font-size: 46px; margin-bottom: 20px; } }

/* 単語ハイライト（見出しの中で1〜2語だけ。細字への多用は禁止） */
.hl-c { font-style: normal; color: var(--color-primary-deep); }
.hl-s { font-style: normal; color: var(--color-accent-deep); }

/* 英字ラベルは主要章だけ（既存 .sec-eyebrow を継承しつつ特大見出し用に位置調整） */
.sec-title-xl .sec-eyebrow { margin-bottom: 2px; }

/* ---------- ヒーロー: 白ステージ型 ---------- */
.hero-v2 { background: var(--color-paper); padding: 18px 0 8px; }
.hero-v2 .hero-grid { display: grid; gap: 14px; }
.hero-copy-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin: 6px 0 0;
}
.hero-sub {
  font-size: 13.5px;
  color: var(--color-ink-soft);
  margin-top: 12px;
  line-height: 1.9;
}
.hero-photo-col { position: relative; display: flex; justify-content: center; }
/* 有機ブロブ（1角だけ大きい非対称角丸＝ヒトトナリ流の語彙） */
.hero-blob-main {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
}
.hero-blob-sat {
  position: absolute;
  right: 4%;
  bottom: -6px;
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--color-paper);
  box-shadow: 0 6px 18px rgba(120, 90, 60, 0.16);
}
.hero-v2 .hero-stats { margin-top: 18px; }
.hero-cta-col { display: grid; gap: 10px; margin-top: 16px; }
.hero-cta-col .btn { width: 100%; }
.btn-cond { min-height: 56px; font-size: 15.5px; }
.hero-cta-sub { text-align: center; font-size: 13px; margin-top: 2px; }
.hero-cta-sub a { color: var(--color-ink-soft); text-underline-offset: 3px; }

@media (min-width: 900px) {
  .hero-v2 { padding: 34px 0 10px; }
  .hero-v2 .hero-grid {
    grid-template-columns: 1fr 0.85fr;
    grid-template-areas: "head photo" "body photo";
    align-items: start;
    column-gap: 40px;
  }
  .hero-head { grid-area: head; }
  .hero-body { grid-area: body; }
  .hero-photo-col { grid-area: photo; align-self: center; }
  .hero-copy-xl { font-size: 52px; line-height: 1.42; }
  .hero-blob-main { max-width: 460px; }
  .hero-blob-sat { width: 148px; height: 148px; right: -6px; bottom: 8px; }
  .hero-cta-col { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .hero-cta-col .hero-cta-sub { grid-column: 1 / -1; text-align: left; }
}

/* ---------- 数字: 大型ピル3 + サブ5 ---------- */
.stat-pills { display: grid; gap: 12px; margin-bottom: 18px; }
.stat-pill {
  background: var(--color-paper);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  padding: 20px 26px;
  text-align: center;
}
.stat-pill .stat-label {
  font-family: var(--font-jp);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-ink-soft);
  letter-spacing: 0.08em;
}
.stat-pill .stat-value { line-height: 1.1; margin: 2px 0 4px; }
.stat-pill .num { font-size: 54px; color: var(--color-primary); }
.stat-pill .unit {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary-deep);
  margin-left: 4px;
}
.stat-pill .stat-desc { font-size: 12px; color: var(--color-ink-soft); }
.stat-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-subs .stat-card { padding: 14px 12px; text-align: center; }
.stat-subs .num { font-size: 30px; }
@media (min-width: 768px) {
  .stat-pills { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .stat-subs { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .stat-pill .num { font-size: 62px; }
}

/* ---------- 園の1日: 時系列の円クラスタ ---------- */
.day-lead {
  text-align: center;
  font-size: 13.5px;
  color: var(--color-ink-soft);
  margin-bottom: 26px;
}
.day-circles { display: grid; gap: 22px; counter-reset: day; }
/* 599px以下: 写真=左・テキスト=右の1本軸に統一する。
   li の子は figure / h3 / p の3つあり、明示配置しないと自動配置で別セルに散って
   説明文が132px列（1行7〜9文字）に潰れる。figureを1列目・2行分spanで固定し、
   h3とpを2列目に置く。交互配置をやめたことで時刻バッジが縦に揃い、時系列を追える。 */
.day-circles > li {
  display: grid;
  grid-template-columns: 112px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: start;
}
.day-circles > li > .day-fig { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.day-circles > li > h3 { grid-column: 2; grid-row: 1; align-self: end; }
.day-circles > li > p { grid-column: 2; grid-row: 2; align-self: start; }
.day-fig { position: relative; margin: 0; }
.day-fig img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 5px var(--color-paper), 0 8px 22px rgba(120, 90, 60, 0.14);
}
.day-time {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  background: var(--color-accent-deep);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}
.day-circles h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.day-circles p { font-size: 13px; color: var(--color-ink-soft); line-height: 1.85; }
.day-circles .day-main h3 { color: var(--color-primary-deep); }

@media (min-width: 600px) {
  /* 2列の順序付きグリッド（重なりなし・視線は左→右→次の行） */
  .day-circles { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .day-circles > li,
  .day-circles > li:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    text-align: center;
    justify-items: center;
    gap: 18px;
  }
  /* モバイルの明示配置を解除しないと縦積みにならない */
  .day-circles > li > .day-fig,
  .day-circles > li > h3,
  .day-circles > li > p { grid-column: auto; grid-row: auto; align-self: auto; }
  .day-circles > li:nth-child(even) .day-fig { order: 0; }
  .day-circles h3 { font-size: 17px; letter-spacing: 0.04em; margin-bottom: 4px; }
  .day-fig img { width: 168px; height: 168px; }
}
@media (min-width: 900px) {
  .day-circles { grid-template-columns: repeat(3, 1fr); gap: 44px 26px; }
  .day-fig img { width: 194px; height: 194px; }
  /* 13:00 ノンコンタクトタイムを一段大きく（この章の主役） */
  .day-circles .day-main .day-fig img {
    width: 232px;
    height: 232px;
    box-shadow: 0 0 0 6px var(--color-paper), 0 12px 30px rgba(120, 90, 60, 0.18);
  }
  .day-circles .day-main h3 { font-size: 19px; }
}

/* ---------- 職員のリアル（動画＋声の統合） ---------- */
.real-lead {
  text-align: center;
  font-size: 13.5px;
  color: var(--color-ink-soft);
  margin-bottom: 18px;
}
.real-lead-2 { margin-top: 34px; }

/* ---------- 募集要項: 主役の強調と他職種の折りたたみ ---------- */
.req-job-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.req-badge-main {
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--color-accent-deep);
  border-radius: 999px;
  padding: 3px 12px;
}
.req-fold > summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.req-fold > summary::-webkit-details-marker { display: none; }
.req-fold-hint {
  font-family: var(--font-jp);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-primary-deep);
  border: 1.5px solid var(--color-primary-deep);
  border-radius: 999px;
  padding: 2px 12px;
}
.req-fold[open] .req-fold-hint::after { content: "を閉じる"; }


/* ---------- v2モバイル専用構成（Codex指摘: PC分割の縦積みではCTAが落ちる） ----------
   順序: 情報チップ → H1 → 主写真200px → コンパクト実績 → CTA
   ヘッダーは白ステージ上では重ねずに通常フローへ戻す */
body:has(.hero-v2) .site-header {
  position: static;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
}
body:has(.hero-v2) .site-logo { text-shadow: none; }
.hero-v2 .hero-copy-xl { overflow-wrap: anywhere; }
.hero-sub { overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .hero-v2 { padding-top: 10px; }
  .hero-v2 .hero-grid { gap: 10px; }
  .hero-v2 .hero-copy-xl { font-size: 27px; line-height: 1.48; }
  .hero-sub { font-size: 12.5px; margin-top: 8px; line-height: 1.8; }
  .hero-blob-main { max-width: 208px; }
  .hero-blob-sat { width: 74px; height: 74px; right: 14%; bottom: -4px; border-width: 3px; }
  /* 実績3枚をコンパクトに（3列固定の横あふれを解消） */
  .hero-v2 .hero-stats { gap: 6px; margin-top: 14px; }
  .hero-v2 .hero-stats li { padding: 7px 2px 5px; border-radius: 12px; }
  .hero-v2 .hero-stats .num { font-size: 25px; }
  .hero-v2 .hero-stats .unit { font-size: 11px; height: 15px; line-height: 15px; }
  .hero-v2 .hero-stats .label { font-size: 9.5px; letter-spacing: 0; }
  .hero-v2 .hero-note { font-size: 10px; line-height: 1.7; }
  .hero-v2 .btn { min-height: 58px; font-size: 16px; padding: 12px 18px; }
  .btn-cond { min-height: 50px; font-size: 14.5px; }
}

@media (max-width: 899px) {
  /* FV内にCTAを収めるための詰め（実測892px→844px以内）。説明文はチップとH1で代替できる */
  .hero-v2 .hero-sub { display: none; }
  .hero-v2 .hero-stats { margin-top: 12px; }
  .hero-v2 .hero-cta-col { margin-top: 12px; }
}

/* 監査#2: 大型数字は700（.num既定600だとピル/ヒーローで弱い。Jostは700まで読込済み） */
.stat-pill .num, .hero-stats .num { font-weight: 700; }

/* ── 監査#21: 白ステージ型ヒーロー直下に旧テンプレの破線ステッチ枠が残り様式が割れる
      （v2のヒーロー内だけ実線＋淡い面に。他セクションのステッチ意匠はそのまま） */
.hero-v2 .hero-stats li {
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  box-shadow: 0 2px 10px rgba(120, 90, 60, 0.05);
}

/* ── 監査#10: 小型機(375×667 / 360×640)でLINE CTAがファーストビューに収まらない
      高さ700px以下の端末だけさらに圧縮する（390×844の見え方は変えない） */
@media (max-height: 700px) and (max-width: 899px) {
  .hero-v2 { padding-top: 6px; }
  .hero-v2 .hero-copy-xl { font-size: 23px; line-height: 1.42; }
  .hero-v2 .hero-eyebrow { margin-bottom: 6px; }
  .hero-blob-main { max-width: 150px; }
  .hero-blob-sat { width: 56px; height: 56px; }
  .hero-v2 .hero-stats { margin-top: 8px; }
  .hero-v2 .hero-stats .num { font-size: 21px; }
  .hero-v2 .hero-stats .label { font-size: 9px; }
  .hero-v2 .hero-note { display: none; }   /* 注記は数字直下から募集要項へ委ねる */
  .hero-v2 .hero-cta-col { margin-top: 10px; gap: 8px; }
  .hero-v2 .btn-line { min-height: 52px; font-size: 15px; }
  .btn-cond { min-height: 44px; font-size: 13.5px; }
}

/* ===== v2へ移植（2026-08-24）: 本体 lp-tokyo から動画スライダーと関連スタイルを持ってきた ===== */
/* ===== 動画スライダー（2026-08-24: 3本を横スライドで見せる。外部ライブラリ非依存） =====
   スクロールスナップが土台。JSが死んでも「横スクロールで全部見られる」状態は保つ。 */
.vslider { position: relative; max-width: 760px; margin: 0 auto; }
.vslider-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* scroll-behavior: smooth はここでは指定しない。
     サブスクローラーへのsmooth指定が効かず scrollLeft が 0 のまま動かない環境を実測で確認した
     （2026-08-24）。滑らかさはJS側で試行し、動かなければ即時スクロールに落とす。 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vslider-viewport::-webkit-scrollbar { display: none; }
.vslider-track {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vslide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: center;
  padding: 4px 2px 0;   /* カード影が切れないぶんの逃げ */
}
.video-caption {
  margin-top: 14px;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-ink);
  text-align: center;
}
.video-caption span {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--color-ink-soft);
}

/* 前後ボタン: 指の届く位置（動画の上端寄り）に置き、コントロールバーに重ねない */
.vslider-nav {
  position: absolute;
  top: 28%;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(120, 90, 60, 0.22);
  cursor: pointer;
  display: none;               /* JSが有効化する（1枚しかない時は出さない） */
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.vslider-nav::before {
  content: "";
  width: 11px;
  height: 11px;
  border-top: 2.5px solid var(--color-ink);
  border-right: 2.5px solid var(--color-ink);
}
.vslider-prev { left: -6px; }
.vslider-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.vslider-next { right: -6px; }
.vslider-next::before { transform: rotate(45deg); margin-right: 4px; }
.vslider-nav:hover { background: #fff; transform: scale(1.06); }
.vslider-nav[disabled] { opacity: 0.35; cursor: default; transform: none; }
.vslider.is-ready .vslider-nav { display: flex; }

/* ドット */
.vslider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.vslider-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-line);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.vslider-dots button[aria-current="true"] {
  background: var(--color-primary-dark);
  transform: scale(1.25);
}

@media (min-width: 860px) {
  .vslider { max-width: 820px; }
  .vslider-prev { left: -30px; }
  .vslider-next { right: -30px; }
  .vslider-nav { width: 48px; height: 48px; }
}

/* 動画のキャプション */
.video-caption {
  margin-top: 14px;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-ink);
  text-align: center;
}
.video-caption span {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--color-ink-soft);
}

/* 「園の1日」動画は day-circles の外側に全幅で置く */
.day-video { margin-top: 32px; }

/* ヘッダーの正規ロゴ（v2は白地なのでグラデ地は不要） */

/* フッターのロゴ: 暗色地で沈むため白い面に載せる。ロゴの色は変えない */
.footer-logo { display: flex; justify-content: center; margin-bottom: 24px; }
.footer-logo img {
  height: 74px; width: auto;
  padding: 14px 22px;
  background: var(--color-paper);
  border-radius: 20px;
}

/* 他の園から移ってきた職員が驚いたこと（本体からの移植） */
.surprise { background: var(--color-paper); border-top: 1px solid var(--color-line); }
.surprise-lead { max-width: 34em; margin: -24px auto 40px; text-align: center; color: var(--color-ink-soft); line-height: 2; }
.surprise-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
.surprise-card { margin: 0; padding: 32px 28px; background: var(--color-cream); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.surprise-card blockquote { margin: 0; font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; line-height: 1.95; letter-spacing: 0.04em; color: var(--color-ink); }
.surprise-card blockquote::before { content: "「"; }
.surprise-card blockquote::after  { content: "」"; }
.surprise-card figcaption { margin-top: 16px; font-size: 0.9rem; color: var(--color-accent-dark); }
@media (min-width: 768px) {
  .surprise-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .surprise-lead { margin: -32px auto 48px; }
}

/* 来てほしい人（ヒアリングQ2の回答原文） */
.facility-wanted {
  margin: 6px 0 0; padding: 12px 14px;
  background: var(--color-accent-soft);
  border-radius: 20px;
  font-size: 0.94rem; line-height: 1.9; color: var(--color-ink);
}

/* ===== 2026-08-24: ファーストビューだけ本体（全面写真＋重ねカード）へ戻した =====
   hero-v2（白ステージ＋円形ブロブ）のCSSは上に残してあるが、HTML側で class を外したので
   当たっていない。body:has(.hero-v2) のヘッダー上書き（position:static・白地）も同様に無効化され、
   ベースの position:absolute ＋ 上の白グラデ地が効く。戻すならHTMLのヒーローをv2版に差し替えるだけ */
@media (min-width: 768px) {
  .site-header { padding: 18px 28px 40px; }
}


/* ===== 角丸をみことの3語彙に寄せた（2026-08-24） =====
   みこと正本は --r-s:20px / --r-m:25px / --r-l:55px。中間半径が14px・18pxと散っていたので20pxへ統一。
   ピル(999px)と円(50%)は「形そのものが役割」なので語彙とは別扱いで残す */

/* ===== ヘッダーの見せ方（2026-08-24・みこと流に寄せる） =====
   みことのヘッダーは「クリームの地に、マーク＋園名が置かれているだけ」で箱や枠が無い。
   ロゴ画像の台紙は scripts/build-logo.mjs でヘッダーと同じ #FFF7ED に焼いてあるので、
   CSS側は箱を作らず、余白と字並びだけで格を出す。 */
.site-header {
  align-items: flex-start;
  gap: 16px;
}
.site-logo {
  display: flex;
  flex-direction: column;
  /* stretch既定のまま画像を置くと、幅がサブテキスト幅へ引き伸ばされ縦横比が壊れる
     （実測: 800×317のロゴが182×38=横1.9倍で描画されていた・2026-08-24社長指摘） */
  align-items: flex-start;
  gap: 6px;
  line-height: 1.2;
}
.site-logo-mark {
  height: 38px;
  width: auto;
  /* 台紙がヘッダー地と同色なので、箱に見えないよう左端をわずかに引き込む */
  margin-left: -6px;
}
.site-logo-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-ink-soft);
  /* みこと流: 補助情報は色を持たせず、字間で整える */
  padding-left: 2px;
  /* 390pxで必要幅206pxに対し実測203px＝数px差で「世田谷はっ/と」と語中折れしていた。
     折り返し禁止＋狭幅は下のメディアで字詰めして1行を保証（2026-08-24最終チェック） */
  white-space: nowrap;
}
.site-header-cta {
  align-self: center;
  letter-spacing: 0.04em;
  /* 「LINEで相談す/る」の語中折れ防止（こざくらhd-ctaと同じ対策） */
  white-space: nowrap;
}
@media (max-width: 380px) {
  .site-logo-sub { font-size: 10px; letter-spacing: 0.1em; }
}

/* ============================================================
   みこと正本の追加移植 第2弾（2026-08-24 社長「参考にしたサイトからもっと」）
   ①虹アーチ区切り帯（正本 .rainbow・repeat-x。本家の使用位置=KV下段とフッター前
     に合わせ、フッター前に1本）
   ②四隅カッコ枠（正本 .kakko-box。applyセクションの電話/LINEボックスに適用
     ＝本家と同じ「応募直前のいちばん気軽な導線」の位置）
   対象外と理由: 背景テクスチャ200s・板フェード・回転写真スタックは正本では
   「ヒーロー内」の文法。v2のヒーローは社長指名の全面写真型のため該当なし
   ============================================================ */
.rainbow {
  width: 100%;
  height: 24px;
  margin: 72px 0 40px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="108" height="24"><path d="M8 22 A 42 42 0 0 1 100 22" fill="none" stroke="%231499ba" stroke-width="3.4"/><path d="M20 22 A 31 31 0 0 1 88 22" fill="none" stroke="%23e49b2c" stroke-width="3.4"/><path d="M32 22 A 20 20 0 0 1 76 22" fill="none" stroke="%23dc7759" stroke-width="3.4"/></svg>') repeat-x left center;
  background-size: 108px 24px;
}

/* 四隅カッコ枠: apply-alt をクリーム板に格上げして4色ブラケットを乗せる */
.apply-alt {
  position: relative;
  max-width: 560px;
  margin: 36px auto 0;
  background: var(--color-cream);
  border-radius: 25px;
  padding: 26px 22px 28px;
}
.apply-alt .kk {
  position: absolute;
  width: 34px;
  height: 34px;
}
.apply-alt .kk svg { width: 100%; height: 100%; display: block; }
.kk1 { top: -9px; left: -9px; }
.kk2 { top: -9px; right: -9px; rotate: 90deg; }
.kk3 { bottom: -9px; right: -9px; rotate: 180deg; }
.kk4 { bottom: -9px; left: -9px; rotate: 270deg; }
@media (prefers-reduced-motion: no-preference) {
  .apply-alt .kk {
    opacity: 0;
    transition: translate 0.6s cubic-bezier(0.68, -0.6, 0.32, 2), opacity 0.6s cubic-bezier(0.68, -0.6, 0.32, 2);
  }
  .kk1 { translate: -21px -21px; transition-delay: 0.45s; }
  .kk2 { translate: 21px -21px; transition-delay: 0.57s; }
  .kk3 { translate: 21px 21px; transition-delay: 0.69s; }
  .kk4 { translate: -21px 21px; transition-delay: 0.81s; }
  .apply-alt.is-shown .kk { opacity: 1; translate: 0 0; }
}

/* 640px以上の2カラムグリッドでLINEボタンが左セルに落ちて非対称だったのを、
   全幅スパン＋中央寄せに（正本 kakko-box .btn の max-width:400px も踏襲） */
@media (min-width: 640px) {
  .apply-alt-btns .btn-line {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 400px;
  }
}

/* ============================================================
   ズレ総点検の検出修正（2026-08-24・SPレンズ監査）
   ============================================================ */
/* 「兵庫・大阪・神奈川・東/京」の地名泣き別れ防止（折るなら・の後で折る） */
.workforce-facts span { word-break: keep-all; }

/* 統計サブカードが奇数枚のとき、2列グリッドで最後の1枚が
   左に単独で落ちて右に不揃いな空白ができるのを全幅化で解消（SPのみ） */
@media (max-width: 767px) {
  .stat-subs .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 時刻バッジの幅を統一（7:15と13:00で幅が揃わず個体差に見えるため） */
.day-time { min-width: 64px; text-align: center; }

/* モノグラム円の文字を機械的に光学中央へ（「も」だけ上寄りに見える個体差の解消） */
.voice-avatar span { line-height: 1; }

/* 園カード2枚の電話・見学CTA行を下端に固定（PC実測で約90px上下ズレしていた。
   右カードだけ施設1行・特色1項目・来てほしい人1行ぶん長く、差が下に積み上がるため） */
.facility-card { display: flex; flex-direction: column; }
.facility-card-body { flex: 1; display: flex; flex-direction: column; }
.facility-card-cta { margin-top: auto; padding-top: 18px; }

/* 待遇カード5枚（奇数）の3行目「そのほか」が左single落ちして右が空くのを全幅化（PC 2列時のみ） */
@media (min-width: 768px) {
  .benefit-list .benefit-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ============================================================
   配色の組み合わせの洗練（2026-08-24・3レンズ監査の確証分）
   トークン値は正本のまま。整理した文法:
   ①白文字バッジ類（flow-num・day-time・FAQのQ）＝濃色4種
     (blue-txt/yellow-badge/coral-txt/green-txt) の4n循環で明度を揃える
     （base色とdark色の混在は「1つだけ暗い」という不揃いに見える＝2レンズが独立に指摘）
   ②色つき数字の反復列＝同じ濃色4種で循環（小さい単位語までAA 4.5:1を満たす。
     旧・コーラルbase単色は13px単位語で3.0:1のAA未達が潜在していた）
   ③装飾（ボーダー・カッコ・アーチ・モチーフ）＝base4色
   ④コーラルの「主役の座」はCTAに返す（数字の単色コーラル占有をやめる）
   ============================================================ */

/* FAQのQバッジ: 単色green固定→4n循環（正本の.faqと同じ文法。白文字なので濃色系のみ） */
.faq-item:nth-of-type(4n+1) summary::before { background: var(--mikoto-blue-txt); }
.faq-item:nth-of-type(4n+2) summary::before { background: var(--mikoto-yellow-badge); }
.faq-item:nth-of-type(4n+3) summary::before { background: var(--mikoto-coral-txt); }
.faq-item:nth-of-type(4n+4) summary::before { background: var(--mikoto-green-txt); }

/* 応募フロー番号: base/dark混在（明1暗2明3暗4）→濃色4種で明度統一 */
.flow-step:nth-child(1) .flow-num { background: var(--mikoto-blue-txt); }
.flow-step:nth-child(2) .flow-num { background: var(--mikoto-yellow-badge); }
.flow-step:nth-child(3) .flow-num { background: var(--mikoto-coral-txt); }
.flow-step:nth-child(4) .flow-num { background: var(--mikoto-green-txt); }

/* 園の1日 時刻バッジ: 6番目がcoral再利用で4n循環が壊れ3列目だけ縦にcoral2連
   →正しい4n循環に修正（1〜6 = blue,yellow,coral,green,blue,yellow） */
.day-circles > li:nth-child(6) .day-time { background: var(--mikoto-yellow-badge); }

/* 13:00主役カードだけバッジ(緑)と見出し(コーラル深)の2系統が同居していた
   →見出しをバッジと同系に。主役性はサイズ(19px)が担う。19px太字=大文字扱いでサンド地3:1クリア */
.day-circles .day-main h3 { color: var(--mikoto-green-txt); }

/* ヒーロー実績3点: コーラル単色→正本のchip文法(3項目はblue/coral/green)を濃色系で。
   13px単位語のAA未達(コーラルbase 3.0:1)も同時に解消。CTAボタンとの色被りも解ける */
.hero-stats li:nth-child(1) .num, .hero-stats li:nth-child(1) .unit { color: var(--mikoto-blue-txt); }
.hero-stats li:nth-child(2) .num, .hero-stats li:nth-child(2) .unit { color: var(--mikoto-coral-txt); }
.hero-stats li:nth-child(3) .num, .hero-stats li:nth-child(3) .unit { color: var(--mikoto-green-txt); }

/* 数字で見る・サブ: コーラル単色→濃色4種循環（2026-08-24夜に園別5枚→統合4枚へ） */
.stat-subs .stat-card:nth-child(1) .num { color: var(--mikoto-blue-txt); }
.stat-subs .stat-card:nth-child(2) .num { color: var(--color-primary-deep); }
.stat-subs .stat-card:nth-child(3) .num { color: var(--mikoto-yellow-badge); }
.stat-subs .stat-card:nth-child(4) .num { color: var(--mikoto-green-txt); }

/* 制度カード番号01/02/03: コーラル単色→正本の3項目文法（blue/coral/green・濃色系） */
.feature-card:nth-child(1) .tag-num { color: var(--mikoto-blue-txt); }
.feature-card:nth-child(2) .tag-num { color: var(--mikoto-coral-txt); }
.feature-card:nth-child(3) .tag-num { color: var(--mikoto-green-txt); }

/* 共感リストの左ボーダー: コーラル単色→正本worry-cardの順(green→blue→coral)。装飾なのでbase色 */
.empathy-list li:nth-child(1) { border-left-color: var(--mikoto-green); }
.empathy-list li:nth-child(2) { border-left-color: var(--mikoto-blue); }
.empathy-list li:nth-child(3) { border-left-color: var(--mikoto-coral); }

/* 法人規模の4数字: green base単色（34px太字でも3:1割れの潜在NG）→濃色4種の循環 */
.workforce-facts li:nth-child(1) .num { color: var(--mikoto-blue-txt); }
.workforce-facts li:nth-child(2) .num { color: var(--mikoto-yellow-badge); }
.workforce-facts li:nth-child(3) .num { color: var(--mikoto-coral-txt); }
.workforce-facts li:nth-child(4) .num { color: var(--mikoto-green-txt); }
.workforce-facts .num i { color: inherit; }

/* アクセスの園名ラベル: 折り返しはHTML側<wbr>の意味の切れ目のみ許可
   （「アルテ子ども/と木幼保園」の語中泣き別れ防止・PC監査指摘) */
.access-info dt { word-break: keep-all; }

/* 統計サブを園別5枚→統合4枚にしたため、PCの5トラックを4トラックへ（空きトラック防止） */
@media (min-width: 768px) {
  .stat-subs { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   みこと正本モーションの移植（2026-08-24 社長「アニメーションなど
   みことから引っ張ってこれていますか もっとクオリティを上げてください」）
   正本 lp-saiyo-mikoto.html の4イージングと動きの語彙を全面移植。
   移植対象外: 回転写真スタック/板フェード/背景テクスチャ（正本ではヒーロー内
   の文法＝写真ヒーロー固定のv2に該当なし・既記録）
   ============================================================ */
:root {
  --ov: cubic-bezier(0.68, -0.6, 0.32, 2);   /* オーバーシュート（正本値） */
  --e-fill: cubic-bezier(0.76, 0, 0.24, 1);  /* ボタン塗り（正本値） */
  --e-wipe: cubic-bezier(0.87, 0, 0.13, 1);  /* 下線ワイプ（正本値） */
  --e-std: cubic-bezier(0.65, 0, 0.35, 1);   /* 標準（正本値） */
}

/* リビール: 汎用ease 0.6s → 正本の .9s e-std・22px（手触りの土台） */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transform: translateY(22px);
    transition: opacity 0.9s var(--e-std), transform 0.9s var(--e-std);
  }
}

/* 主CTAの塗りスイープ: 正本 .btn::after の左→右フィルを移植。
   正本は黄で塗るが白文字がAA不合格(1.9:1)のため、塗り色だけ濃コーラルに差し替え
   （機構と曲線は正本のまま）。素のテキストノードでも文字が沈まないよう
   負z-indexの二層ペーパー（-2=地色/-1=スイープ）で塗る */
.btn-primary {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: transparent;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--cta-bg);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -101%;
  z-index: -1;
  border-radius: inherit;
  background: var(--cta-bg-dark);
  transition: left 0.6s var(--e-fill);
}
.btn-primary:hover { background: transparent; }
.btn-primary:hover::after { left: 0; }

/* ヘッダーCTA: 塗り遷移をe-fillに・ovの小さなリフト */
.site-header-cta { transition: background-color 0.6s var(--e-fill), translate 0.3s var(--ov); }
.site-header-cta:hover { background: var(--cta-bg-dark); translate: 0 -2px; }

/* テキストリンクの下線ワイプ（正本 .jump の e-wipe scaleX。フッター・戻りリンク） */
.footer-nav a, .policy-back, .thanks-back {
  position: relative;
  text-decoration: none;
}
.footer-nav a::after, .policy-back::after, .thanks-back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--mikoto-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--e-wipe);
}
.footer-nav a:hover::after, .policy-back:hover::after, .thanks-back:hover::after { transform: scaleX(1); }

/* FAQの開閉印: ＋/－の文字差し替え → ＋をovで45度回す（正本 .arw の rotate .4s ov） */
.faq-item summary::after { transition: transform 0.4s var(--ov); }
.faq-item[open] summary::after {
  content: "＋";
  transform: translateY(-50%) rotate(45deg);
}

/* スティッキーCTAの出現を正本の .45s e-std に */
.sticky-cta { transition: transform 0.45s var(--e-std); }

/* 動きを減らす設定では全アニメーションを止める（正本と同じ全域kill） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   数字セクションを正本 .num-card の型へ（2026-08-24 社長「枠とかdesignとか
   クオリティ低いよね みことはどうなの」）
   正本 .numbers の設計: 素のプレート地＋大角丸の棚／カードはクリーム・r-m(25px)・
   影ゼロ／線画アイコン→大きい数字→ラベル→説明の順。
   旧v2の「ドット地＋999pxブロブ＋点線下線＋影」を正本の語彙に置き換える
   ============================================================ */
.stats {
  background: var(--color-paper);   /* ドットパターン地を正本の素のプレートに */
  border-radius: 55px 55px 0 0;     /* 正本 .numbers と同じ棚化 */
}
.apply { background: var(--color-paper); }  /* applyのドット地も正本の素プレートへ統一 */

.stat-pill {
  background: var(--color-cream);
  border-radius: 25px;              /* 999pxブロブ→正本のr-m */
  box-shadow: none;                 /* 正本は影ゼロ（クリーム/プレートの面差で立てる） */
  padding: 30px 20px 24px;
}
.stat-pill .mark {
  width: 44px;
  height: 44px;
  display: block;
  margin: 0 auto 10px;
}
.stat-pill .stat-value { margin: 0 0 4px; }
.stat-pill .stat-label {
  color: var(--color-ink);
  font-size: 14px;
  letter-spacing: 0.08em;
  border-bottom: none;              /* 点線下線を廃止（正本にない装飾） */
  padding-bottom: 0;
}
.stat-pill .stat-desc { margin-top: 8px; }

.stat-subs .stat-card {
  background: var(--color-cream);
  border-radius: 20px;
  box-shadow: none;
}
.stat-subs .stat-label { border-bottom: none; padding-bottom: 0; }

/* ヒーロー実績チップ（2026-08-25 社長「これもいまいち」）:
   点線ステッチ枠は旧テンプレの意匠でみことに無い語彙。正本 .kv-stats .chip と同じ
   「無枠・影ゼロ・角丸r-s・地はカードと一段違いのトーン」へ（数字の3色は適用済み） */
.hero-stats li {
  border: none;
  background: var(--color-cream);
  border-radius: 20px;
  padding: 10px 6px 8px;
}

/* LINE起動失敗時のみ表示される救済リンク（こざくら準拠・初期hidden） */
.line-fallback {
  font-size: 12px;
  color: var(--color-ink-soft);
  text-align: center;
  margin-top: 10px;
}
.line-fallback a { color: var(--color-primary-dark); font-weight: 700; }
@media (min-width: 768px) {
  .site-header { padding: 20px 28px 44px; gap: 24px; }
  .site-logo-mark { height: 48px; }
  .site-logo-sub { font-size: 12px; letter-spacing: 0.18em; }
}

/* ===== みこと流のタイポと色差し（2026-08-24・全面適用） =====
   正本= css-templates/lp-saiyo-mikoto.html。丸みのあるゴシック1書体で通し、
   見出しの一部に4色を差して抑揚をつけるのがみことの作法。明朝の字間設計は解除する。 */
.sec-title,
.hero-copy,
.hero-copy-xl {
  font-weight: 700;
  letter-spacing: 0.06em;   /* 明朝前提の 0.14em は間延びするので詰める */
}
.sec-title { line-height: 1.6; }
.hero-copy { line-height: 1.55; }

/* 見出しの色差し4種（みことの装飾4色。テキストなのでAA対応の濃色を使う） */
.hl-c { font-style: normal; color: var(--mikoto-coral-txt); }
.hl-s { font-style: normal; color: var(--mikoto-green-txt); }
.hl-b { font-style: normal; color: var(--mikoto-blue-txt); }
.hl-y { font-style: normal; color: var(--mikoto-yellow-badge); }

/* 英字アイブロウはみこと流だと小さく静かに置く */
.sec-eyebrow {
  font-family: var(--font-num);
  letter-spacing: 0.24em;
  color: var(--color-ink-soft);
}
.sec-eyebrow::before { color: var(--mikoto-yellow); }

/* トーンオントーンの巨大モチーフ（クリーム地に極淡）。みことの地の作り方 */
.stats, .day, .benefits { position: relative; overflow: hidden; }
.stats::before, .day::before, .benefits::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(46vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mikoto-yellow);
  opacity: 0.055;
  pointer-events: none;
}
.stats::before   { right: -12%; top: -8%; }
.day::before     { left: -14%; bottom: -10%; background: var(--mikoto-blue); }
.benefits::before{ right: -10%; bottom: -12%; background: var(--mikoto-green); }
.stats > .container, .day > .container, .benefits > .container { position: relative; z-index: 1; }

/* 角丸の大語彙（みこと --r-l:55px）。大きな面に1つだけ効かせる */
.apply { border-radius: 55px 55px 0 0; }

/* ボタンはオーバーシュートで返す（みこと --ov） */
.btn { transition: transform 0.28s cubic-bezier(0.68, -0.6, 0.32, 2), box-shadow 0.2s ease, background-color 0.2s ease; }

/* ============================================================
   TOP以降の面が立たない件の修正（2026-08-24）
   社長指摘「topからスクロールしたあとのデザインが微妙すぎる」の原因と対処。

   原因: みことの色トークンは移植したが、正本 lp-saiyo-mikoto.html が
   その色を成立させている「面の作り方」を移植していなかった。
   正本は box-shadow を一切使わず、セクションの地とカードの地を必ず入れ替える
   ことだけでカードを浮かせている。v2はカードの地を --color-paper に固定したまま、
   旧・白ベース時代の影に分離を任せていたため、クリーム地では影が物理的に見えず
   カードが面として存在していなかった（6箇所は地とカードが完全同色＝コントラスト比1.000）。

   規約: 後勝ちで効かせるため必ずファイル末尾に置く
   ============================================================ */

/* 1-a. 地とカードが完全同色（ΔL*=0）だった箇所を反転する。
   .stat-pill を含めないと同じ .stats の中で上3枚だけ平板に残る（反証で検出） */
.stats .stat-card,
.stat-pill,
.workforce,
.faq-item,
.flow-step,
.apply-form { background: var(--color-cream); }

/* 1-b. 唯一の輪郭だった1px線が地に対して1.09〜1.26:1で不可視だった。2.2:1台へ上げる */
:root {
  --shadow-card: 0 0 0 1px rgba(90, 62, 34, 0.45), 0 10px 28px rgba(80, 55, 30, 0.16);
}

/* 1-c. ヒーローは社長指名の「当初のまま」を維持する。
   .hero-card は写真の上と素のクリーム地の2つにまたがり、下側は影以外に輪郭を作る手段がない。
   トークンを共有しているので旧値をここでピン留めして無傷にする（このピン留めを外さないこと） */
.hero-card { box-shadow: 0 0 0 1px var(--color-line), 0 6px 24px rgba(120, 90, 60, 0.10); }

/* 2. 本文の土台ウェイト。body に font-weight の指定が一度も無く既定の400で描画されていた。
   Zen Kaku Gothic New は400が特に軽く、明朝から乗り換えた線の細さがそのまま出ていた。
   500は読み込み済みの実ウェイトなので偽ボールドは合成されない。行間も明朝用の2.0から戻す */
body { font-weight: 500; line-height: 1.85; }

/* 3-a. 英字ラベルが8/21のヒトトナリ流ブロックに乗っ取られ、グレーの筆記体30px・傾き付き・
   ドット非表示になっていた。4色の主要な担い手が無彩色に潰れていた原因。
   1513行の同名ルールと詳細度が同じなので、後に置くこちらが勝つ */
.sec-title-xl .sec-eyebrow {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transform: none;
  margin-bottom: 10px;
}
.sec-title-xl .sec-eyebrow::before {
  content: "\25CF";
  font-size: 8px;
  vertical-align: 3px;
  margin-right: 8px;
}

/* 3-b. 4章に4色を1色ずつ。各セクションの実地でAA 4.5:1以上を確認済み。
   .day はサンド地で緑が4.38:1と不足するためコーラル濃色(4.70:1)を充てている */
#stats    .sec-eyebrow { color: var(--mikoto-blue-txt); }
#stats    .sec-eyebrow::before { color: var(--mikoto-blue); }
#features .sec-eyebrow { color: var(--mikoto-yellow-badge); }
#features .sec-eyebrow::before { color: var(--mikoto-yellow); }
#day      .sec-eyebrow { color: var(--mikoto-coral-txt); }
#day      .sec-eyebrow::before { color: var(--mikoto-coral); }
#voices   .sec-eyebrow { color: var(--mikoto-green-txt); }
#voices   .sec-eyebrow::before { color: var(--mikoto-green); }

/* 4. 8/21ブロックが残した明朝案向けの調整を打ち消す。
   .num は一次定義800だったが「Jostは600が上品」が後勝ちしていた。
   .feature-card h3 の900は900→700正規化から漏れた唯一の取り残し（正本の語彙は500/700のみ） */
.num { font-weight: 800; }
.feature-card h3 { font-weight: 700; }

/* 5. 4色を「面」として出す。正本の nth 循環の移植。
   装飾4色をそのまま白文字バッジに使うとAAが割れる（緑は白文字2.89:1）ため、
   可読テキストを載せる .day-time は濃色のみで循環させる */
.flow-step:nth-child(1) .flow-num { background: var(--mikoto-blue); }
.flow-step:nth-child(2) .flow-num { background: var(--mikoto-yellow-badge); }
.flow-step:nth-child(3) .flow-num { background: var(--mikoto-coral); }
.flow-step:nth-child(4) .flow-num { background: var(--mikoto-green-txt); }

.day-circles > li:nth-child(1) .day-time { background: var(--mikoto-blue-txt); }
.day-circles > li:nth-child(2) .day-time { background: var(--mikoto-yellow-badge); }
.day-circles > li:nth-child(3) .day-time { background: var(--mikoto-coral-txt); }
.day-circles > li:nth-child(4) .day-time { background: var(--mikoto-green-txt); }
.day-circles > li:nth-child(5) .day-time { background: var(--mikoto-blue-txt); }
.day-circles > li:nth-child(6) .day-time { background: var(--mikoto-coral-txt); }

/* .stat-pill の数字は現状コーラル2.90:1で既に3:1未達だった。濃色に直す（既存バグの同時修正） */
.stat-pill:nth-child(1) .num { color: var(--color-primary-deep); }
.stat-pill:nth-child(2) .num { color: var(--mikoto-blue-txt); }
.stat-pill:nth-child(3) .num { color: var(--mikoto-green-txt); }

/* ============================================================
   みこと正本の虹アーチ（2026-08-24）
   出典: css-templates/lp-saiyo-mikoto.html の .sec-arc（本家line.svg再現）。
   全15セクションの見出し下に出ることをローカル実機（getComputedStyle）で
   確認済みのパッチをそのまま正式化。装飾のみ（aria対象外・テキストなし） */
.sec-title { position: relative; }
.sec-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 24px;
  margin: 16px auto 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="108" height="24"><path d="M8 22 A 42 42 0 0 1 100 22" fill="none" stroke="%231499ba" stroke-width="3.4"/><path d="M20 22 A 31 31 0 0 1 88 22" fill="none" stroke="%23e49b2c" stroke-width="3.4"/><path d="M32 22 A 20 20 0 0 1 76 22" fill="none" stroke="%23dc7759" stroke-width="3.4"/></svg>') no-repeat center/contain;
}

/* ============================================================
   トーンオントーン巨大モチーフの作り直し（2026-08-24）
   旧実装（汎用の円×ブランド4色×opacity .055）は合成後ΔL* 1.5〜2.3で
   実質見えないコードだった。正本の機構は「モチーフSVG（風ぐるま・4円）を
   tone色・不透明のままクリーム/プレート地に置く」
   （lp-saiyo-mikoto.html .tone-motif / .tone-motif2。色の値も正本のまま）。
   ブランド色×低透過という誤訳をやめ、機構ごと移植し直す */
.stats::before, .day::before, .benefits::before { content: none; }

/* 風ぐるま（正本 .tone-motif）。暗転（empathy）明けの章扉＝制度セクションに1つ */
.features { position: relative; overflow: hidden; }
.features::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -24%;
  top: 0;
  width: 78vw;
  aspect-ratio: 1;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g fill="%23f8e6cb"><path d="M100 100 C 92 60 100 28 100 12 C 122 30 126 66 104 96 Z"/><path d="M100 100 C 140 92 172 100 188 100 C 170 122 134 126 104 104 Z"/><path d="M100 100 C 108 140 100 172 100 188 C 78 170 74 134 96 104 Z"/><path d="M100 100 C 60 108 28 100 12 100 C 30 78 66 74 96 96 Z"/></g><circle cx="100" cy="100" r="9" fill="%23f3dcb8"/><rect x="98.6" y="100" width="2.8" height="96" rx="1.4" fill="%23f3dcb8"/></svg>') no-repeat center/contain;
}
.features > .container { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .features::before { right: -6%; top: 2%; width: min(46vw, 560px); }
}

/* 4円クラスタ（正本 .tone-motif2）。応募セクションの左下 */
.apply { position: relative; overflow: hidden; }
.apply::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -4%;
  bottom: -2%;
  width: min(34vw, 380px);
  aspect-ratio: 1;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><circle cx="30" cy="14" r="9" fill="%23f6e3c8"/><circle cx="14" cy="40" r="9" fill="%23f6e3c8"/><circle cx="46" cy="40" r="9" fill="%23f6e3c8"/><circle cx="30" cy="33" r="6" fill="%23f0d9b8"/></svg>') no-repeat center/contain;
}
.apply > .container { position: relative; z-index: 1; }

/* サンド帯の棚化（2026-08-24 実機比較で採用）
   正本は大角丸55pxを .numbers と .apply の複数面で使っており「1箇所限定」ではない。
   サンド帯4本すべてに揃えて「サンド帯＝棚」の文法を一貫させる（2本だけだと不揃いになる）。
   面の反転修正（同日）が効いた状態での比較スクショで採否判定済み */
.facilities, .day, .benefits, .access { border-radius: 55px 55px 0 0; }

/* ============================================================
   LINE導線の色をブランド緑に統一（2026-08-25 社長「ラインのバナーは基本緑で統一して」）
   ヘッダーCTAだけ --cta-bg（コーラル）で、応募内・追従バー・thanks は緑という
   不揃いだった。位置ではなく「LINEかどうか」で色が決まるよう .js-line-cta に寄せる。
   ※白文字×#06C755 は 2.26:1 でAA未達だが、LINEのブランド色は変更しない方針
     （既存の緑CTA2本と同じ扱い＝lp-inspectの既知FAIL）
   ============================================================ */
.js-line-cta {
  background: var(--color-line-active);
  color: #FFFFFF;
}
.js-line-cta:hover { background: var(--color-line-active-dark); }
.site-header-cta.js-line-cta { box-shadow: 0 4px 14px rgba(6, 199, 85, 0.28); }

/* ============================================================
   日本語の泣き別れ（語中改行）対策（2026-08-25 社長「文字の改行問題ちゃんとチェックして」）
   360pxで実測して16件検出したもののうち、短い構造化テキスト（数値・表・見出し・
   ラベル・注記）を処置する。
     word-break: keep-all  … 漢字かな連続を語として扱い、語の途中で折らない
     overflow-wrap: anywhere … それでも収まらないときだけ折る（横あふれの保険）
     line-break: strict    … 行頭に「っ」「ー」「%」等が来るのを避ける
   長い本文（feature-desc・voice本文・FAQ回答など）は対象外。keep-all だと日本語の
   1文が丸ごと1語扱いになり、かえって不自然な位置で折れるため。
   ============================================================ */
/* keep-all は「1行〜数語で収まる短い要素」だけに当てる。
   文章を含む要素に当てると1文が丸ごと1語扱いになり、overflow-wrap:anywhere の保険が
   働いて「。」「・」「）」を行頭に落とす＝禁則違反になる（390pxで実測して判明）。 */
.stat-label, .num-label, .req-job-title,
.tour-schedule li, .facility-meta dt, .access-list dt,
.day-circles h3, .flow-step h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 文章側は既定の日本語改行（禁則あり）に任せ、strict で行頭の小書き仮名・記号を抑える */
body, .facility-wanted, .facility-meta dd, .sec-note, .hero-note, .feature-voice,
.day-circles p, .benefit-points li, .footer-org, .access-list dd, .video-caption,
.req-table td, .feature-desc, .voice-a, .faq-item p {
  line-break: strict;
}
/* 数値＋単位は必ず1行（「100」と「%」が泣き別れていた） */
.stat-value { white-space: nowrap; }
/* 見出し列を nowrap にすると「受動喫煙防止措置」等でth幅が151pxまで伸び、
   表全体が360px幅のコンテナから34pxはみ出す（折りたたみを外して発覚）。
   nowrapはやめ、幅を少し広げて keep-all で語中改行だけ止める。
   中点が行頭に落ちていた「雇用形態・契約期間」は2行に分けて解消した。 */
.req-table th { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 767px) { .req-table th { width: 104px; } }
/* 先輩の声の顔写真（2026-08-25 掲載許可済み・公式サイトのアイキャッチ由来）。
   モノグラムを置き換え。素材は3枚とも1:1に揃えてあるのでカードの画像高さが揃う */
.voice-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}
/* 募集要項の表は keep-all を当てない。セル幅が狭く1文が丸ごと1語扱いになるため、
   overflow-wrap の保険が働いて「）」「」」「・」を行頭に落としていた。
   ブラウザ既定の日本語改行（禁則あり）に任せ、割れて困る固有名詞だけ .nw で止める。 */
.req-table td { line-break: strict; }
.nw { white-space: nowrap; }

/* ============================================================
   募集要項の園タブ（2026-08-25 社長「あるてとはっとの募集要項はタブで切り替えられるように」）
   JSが無い環境では tablist を hidden のままにし、2園ぶんのパネルを縦に並べて全部見せる。
   main.js が hidden を外したときだけタブとして振る舞う（段階的強化）。
   ============================================================ */
.req-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 auto 26px;
  max-width: 720px;
}
.req-tab {
  appearance: none;
  border: 2px solid var(--color-line);
  background: var(--color-paper);
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 13px 10px;
  border-radius: 999px;
  cursor: pointer;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: background-color 0.3s var(--e-std), color 0.3s var(--e-std), border-color 0.3s var(--e-std);
}
.req-tab:hover { border-color: var(--mikoto-blue-txt); }
.req-tab.is-active {
  background: var(--mikoto-blue-txt);
  border-color: var(--mikoto-blue-txt);
  color: #FFFFFF;
}
.req-tab:focus-visible { outline: 3px solid var(--mikoto-yellow-badge); outline-offset: 2px; }
/* 園名（タブ表示中は重複するのでJSが隠す。JS無しのときは見出しとして機能する） */
.req-panel-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-accent-dark);
  margin-bottom: 18px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.req-panel + .req-panel { margin-top: 40px; }
.req-panel[hidden] { display: none; }
@media (min-width: 768px) {
  .req-tab { font-size: 15px; padding: 15px 14px; }
  .req-panel-name { font-size: 17px; }
}

/* アクセスは園ごとに「住所・経路＋地図」で1枚（2026-08-25 社長「マップ入れて」） */
.access-card { display: grid; gap: 12px; align-content: start; }
.access-card .access-info > div { box-shadow: none; border: 1px solid var(--color-line); }
@media (min-width: 900px) {
  .access-card .access-map { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}

/* ============================================================
   CTAの色を正本のコーラルへ戻す（2026-08-24）
   社長指摘「園見学ボタンの色のせいで全体印象がくすんで見える」。

   経緯: 装飾コーラル #DC7759 は白文字で3.08:1。17px/700は「大きい文字」の
   閾値(18.66px以上の太字)にわずかに届かず4.5:1が必要だったため、
   やむを得ず濃い #A8492E(5.74:1) を使っていた。これがクリーム地に対して
   5.20と重く、ページ全体をくすませていた。

   対処: 主CTAの文字を19pxへ上げて「大きい文字」の基準3:1を適用させ、
   正本と同じ #DC7759 を使えるようにする。文字が大きくなるのはスマホの
   主導線として利点でもある。
   ヘッダーとスティッキーのCTAは13pxのままなので4.5:1が必要 → 濃色を維持する
   （同じ色相の濃淡なので不整合には見えない。サイズ制約による使い分けであることを
   トークン名で明示しておく）。
   ============================================================ */
:root {
  --cta-bg: var(--mikoto-coral);          /* 主CTA: 19px以上の太字で使う前提（3:1基準） */
  --cta-bg-dark: #C25E3F;                 /* hover。同系のまま一段落とす */
  --cta-bg-compact: var(--mikoto-coral-txt); /* 13pxの小さいCTA用（4.5:1が要るため濃色） */
  --shadow-cta: 0 8px 20px rgba(220, 119, 89, 0.34);
  --shadow-cta-sm: 0 4px 14px rgba(168, 73, 46, 0.30);
}

/* 主CTA: 19px＝18.66px超で「大きい文字」扱いになり、#DC7759 の3.08:1 が基準3:1を満たす */
.btn { font-size: 19px; }
.btn-sub { font-size: 12px; }   /* 添え文言は残っている箇所だけ相対的に調整 */

/* ヘッダーCTAが --cta-bg を使う場合だけ濃色にする（13px/700は4.5:1が必要なため）。
   2026-08-26 修正: 当初 .site-header-cta へ無条件に当てていたが、ヘッダーCTAは
   .js-line-cta（LINEブランド緑）でもある。同詳細度で後勝ちしてLINEボタンを
   コーラルに塗り潰してしまっていた（社長指摘「ラインで相談するのボタンは緑のはず」）。
   「位置ではなくLINEかどうかで色が決まる」という既存の方針に合わせ、LINEは除外する。
   スティッキーCTA3本は元から --cta-bg を使っていない（アウトライン2本＋LINE緑） */
.site-header-cta:not(.js-line-cta) { background: var(--cta-bg-compact); }

/* ============================================================
   主CTAが常に「hover用の濃い色」で塗られていたバグの修正（2026-08-26）

   .btn-primary::after（左→右の塗りスイープ）が inset:0 と left:-101% を併用していた。
   inset:0 が right:0 を張ったままなので left を負にしても要素は左へ動かず、
   幅が左へ伸びるだけ（実測 left:-424px / width:844px＝ボタン幅420pxを完全に覆う）。
   結果、静止時から ::after が ::before の地色を隠し、常に --cta-bg-dark が見えていた。
   社長指摘「園見学ボタンの色のせいで全体印象がくすんで見える」の直接原因はこれ。

   right を外して transform で動かす。機構（左→右に塗る）と曲線はそのまま。
   ============================================================ */
.btn-primary::after {
  right: auto;
  left: 0;
  width: 100%;
  transform: translateX(-101%);
  transition: transform 0.6s var(--e-fill);
}
.btn-primary:hover::after { left: 0; transform: translateX(0); }

/* 塗りスイープを疑似要素から要素自身の background へ移す（2026-08-26）
   理由: ::before/::after 方式だと .btn-primary 自身の background が transparent になり、
   コントラスト検出器が主CTA8本すべてを「背景なし」と読んで検査対象から外していた
   （lp-inspect が白文字 on セクション地 と誤判定＝安全網が死ぬ）。
   background-position のスライドなら同じ左→右の塗りを、要素自身の背景色を保ったまま出せる。
   機構・曲線・色は正本移植のまま。テキストは背景の上なので z-index の細工も不要になる */
.btn-primary {
  background-color: var(--cta-bg);
  background-image: linear-gradient(to right, var(--cta-bg-dark) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  transition: background-position 0.6s var(--e-fill), transform 0.28s var(--ov), box-shadow 0.2s ease;
}
.btn-primary::before,
.btn-primary::after { content: none; }
.btn-primary:hover { background-color: var(--cta-bg); background-position: 0 0; }