/* =====================================================================
   site.css — マージパートナーズ行政書士事務所の実デザイン。
   出典: site/tokens.json（値）+ site/css/decorations.css（ルール、クラス名不変）。
   静的HTML完成版の Source of Truth をほぼそのまま移植した本体。
   レスポンシブ（@media）は responsive.css に分離。
   ===================================================================== */

/* ---------- tokens.json 由来のカスタムプロパティ ---------- */
:root {
  --wp--preset--color--base: #ffffff;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--mist: #f2f6f3;
  --wp--preset--color--sage: #e3ede6;
  --wp--preset--color--brand: #224f39;
  --wp--preset--color--deep: #163427;
  --wp--preset--color--accent: #49a856;
  --wp--preset--color--accent-ink: #256b3a;
  --wp--preset--color--contrast: #1b2620;
  --wp--preset--color--text: #1b2620; /* WP は "text" スラッグを予約するため theme.json 側は contrast のみ登録。
                                          decorations.css の既存参照(var(--…--text))を書き換えずに済むよう別名で定義。 */
  --wp--preset--color--text-light: #5d6d64;
  --wp--preset--color--border: #d9e3dc;

  --wp--preset--font-family--sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --wp--preset--font-family--display: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --wp--preset--font-family--latin: 'Barlow', 'Zen Kaku Gothic New', sans-serif;

  --wp--preset--font-size--site-sm: 14px;
  --wp--preset--font-size--site-base: 16px;
  --wp--preset--font-size--site-lg: 20px;
  --wp--preset--font-size--site-xl: 28px;
  --wp--preset--font-size--site-2xl: 40px;
  --wp--preset--font-size--site-3xl: 52px;

  --wp--preset--spacing--space-xs: 8px;
  --wp--preset--spacing--space-sm: 16px;
  --wp--preset--spacing--space-md: 24px;
  --wp--preset--spacing--space-lg: 32px;
  --wp--preset--spacing--space-xl: 48px;
  --wp--preset--spacing--space-xxl: 64px;
  --wp--preset--spacing--space-xxxl: 80px;
  --wp--preset--spacing--space-xxxxl: 120px;

  --wp--preset--layout--content-size: 1140px;
  --wp--preset--layout--wide-size: 1440px;
}

/* 実体は Font Library 取り込み時にアップロード済みの wp-content/uploads/fonts/*.woff2（download-fonts.mjs）。
   テーマに複製せず絶対URLで直接参照する（enqueue元ディレクトリに依存しないため）。 */
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/gNMYW2drQpDw0GjzrVNFf_valaDBcznOkj5iTWz5UGA.woff2?v=2') format('woff2'); }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/gNMVW2drQpDw0GjzrVNFf_valaDBcznOqodNaWHSTGlMyd8.woff2?v=2') format('woff2'); }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFBEj757Y0rw-oME.woff2?v=2') format('woff2'); }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFCMj757Y0rw-oME.woff2?v=2') format('woff2'); }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFPYk757Y0rw-oME.woff2?v=2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/7cHpv4kjgoGqM7EPDsE46HsxnA.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: italic; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/7cHrv4kjgoGqM7E_Ccs5yn4hnCci.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/wp-content/uploads/fonts/7cHqv4kjgoGqM7E30-8c5VAtlT47dw.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: italic; font-weight: 600; font-display: swap; src: url('/wp-content/uploads/fonts/7cHsv4kjgoGqM7E_CfPk5Fostzsrd6m9.woff2') format('woff2'); }

/* ---------- ここから site/css/decorations.css を移植（クラス名不変） ---------- */

/* ---------- 0. body / 見出し / ボタンの基本値 ---------- */
body {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 16px;
  line-height: 1.95;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--wp--preset--color--text);
  background-color: var(--wp--preset--color--base);
}
.wp-block-heading {
  font-family: var(--wp--preset--font-family--display);
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--wp--preset--color--text);
}
.wp-block-button__link {
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* ---------- 1. フェードイン（main.js 連動。JS 無効時は最初から見える） ---------- */
.show-mobile { display: none; }
.js .fade-in { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.fade-in.is-visible { opacity: 1; transform: none; }

/* ---------- 2. ヘッダー ---------- */
/* ロゴの高さはHeader template part側のインラインstyleで32pxに固定されているため、
   !importantで上書き。line-height:0は、<a>(inline)がblock化した<img>を包むことで
   figure下部に生じる行送り分の余白（flexでの垂直中央がずれる原因）を除去するため。 */
.site-logo { flex-shrink: 0; line-height: 0; }
.site-logo img { height: 40px !important; width: auto; }
.site-nav a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--wp--preset--color--text);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.site-nav a:hover { color: var(--wp--preset--color--brand); }
.btn-compact .wp-block-button__link { padding: 11px 22px; font-size: 14px; }
.mobile-menu { border-top: 1px solid var(--wp--preset--color--border); padding-top: 12px; margin-top: 12px; }
.mobile-menu summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--wp--preset--color--brand);
  list-style: none;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary:focus { outline: none; }
.mobile-nav { padding-top: 14px; padding-bottom: 6px; }
.mobile-nav a { color: var(--wp--preset--color--text); text-decoration: none; font-size: 15px; font-weight: 500; }

/* ---------- 3. セクション共通の見出し部品 ---------- */
.eyebrow {
  font-family: var(--wp--preset--font-family--latin);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-ink);
  margin-top: 0;
  line-height: 1.6;
}
.eyebrow-light { color: #9fd0ae; }
.page-title { font-size: 38px; letter-spacing: 0.01em; }
.product-title { font-size: 40px; letter-spacing: 0.01em; }
.product-tagline { font-size: 18px; color: var(--wp--preset--color--text-light); line-height: 1.95; }
.dark-subtitle { font-size: 18px; color: #ffffff; }
.form-section-title { font-size: 20px; }
.contact-box { background-color: var(--wp--preset--color--sage); border-radius: 10px; }
.contact-tel { font-family: var(--wp--preset--font-family--latin); font-size: 30px; font-weight: 600; color: var(--wp--preset--color--brand); line-height: 1.4; }
.contact-tel a { color: var(--wp--preset--color--brand); text-decoration: none; }
.contact-sub { font-size: 15px; color: var(--wp--preset--color--text); }
.contact-sub a { color: var(--wp--preset--color--brand); text-decoration: none; }
.section-title { font-size: 34px; letter-spacing: 0.01em; }
.section-lead { font-size: 17px; color: var(--wp--preset--color--text-light); }
.lead { font-size: 17px; }
.note { font-size: 14px; color: var(--wp--preset--color--text-light); line-height: 1.9; }
.divider-line { border-top: 1px solid var(--wp--preset--color--border); padding-top: 20px; }

/* 視覚的パンくず（SEO第2弾。/drone/ 配下の子ページのページヘッダー内でのみ使用）。
   既存のページヘッダーの余白・色をそのまま使い、新しい配色や間隔は増やさない。 */
.breadcrumb { font-size: 13px; line-height: 1.8; color: var(--wp--preset--color--text-light); }
.breadcrumb a { color: var(--wp--preset--color--brand); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .breadcrumb-sep { margin: 0 8px; color: var(--wp--preset--color--border); }

/* ---------- 4. ヒーロー（cover） ---------- */
.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(16,35,26,.94) 0%, rgba(16,35,26,.86) 42%, rgba(16,35,26,.48) 100%);
}
.hero > * { position: relative; z-index: 2; }
.hero-eyebrow {
  font-family: var(--wp--preset--font-family--latin);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9fd0ae;
  margin-top: 0;
}
.hero-title { font-size: 42px; line-height: 1.45; color: #ffffff; }
.hero-lead { font-size: 17px; color: #dcebe2; line-height: 1.95; }
.hero-tag { font-size: 14px; color: #b9d6c6; letter-spacing: 0.02em; }

/* ---------- 5. カード（行政書士サービス／理由など） ---------- */
.card {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.card-image { width: 100%; }
.card-image img { width: 100%; height: 210px; object-fit: cover; display: block; }
.card-body { display: flex; flex-direction: column; flex: 1; }
.card-label {
  font-family: var(--wp--preset--font-family--latin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-ink);
}
.card-title { font-size: 22px; line-height: 1.55; }
.card-text { font-size: 15px; color: var(--wp--preset--color--text-light); line-height: 1.95; }
.card-list { font-size: 15px; color: var(--wp--preset--color--text-light); }
.card-link { margin-top: auto; padding-top: 8px; }
.card-link a { color: var(--wp--preset--color--brand); font-weight: 700; text-decoration: none; font-size: 15px; }
.card-link a:hover { color: var(--wp--preset--color--accent-ink); }

/* ---------- 6. 自社ツールカード ---------- */
.tool-card {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tool-card-featured { border-color: var(--wp--preset--color--accent); }
.tool-logo { align-self: stretch; width: 100%; }
.tool-logo img { height: 38px; width: auto; }
.tool-role {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--wp--preset--color--accent-ink);
}
.tool-title { font-size: 21px; }
.tool-text { font-size: 16px; line-height: 1.95; color: var(--wp--preset--color--text-light); }

/* ---------- 6b. 実画面スクリーンショット ---------- */
.shot {
  width: 100%;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--wp--preset--color--white);
}
.shot img { width: 100%; height: auto; display: block; }
.shot-tall img { height: 300px; object-fit: cover; object-position: center top; }
.shot-card { width: 100%; border-radius: 8px 8px 0 0; overflow: hidden; border-bottom: 1px solid var(--wp--preset--color--border); }
.shot-card img { width: 100%; height: auto; display: block; }
.shot-caption { font-size: 13px; color: var(--wp--preset--color--text-light); }
.shot-caption-light { font-size: 13px; color: #a9c4b3; }
.shot-panel { background-color: var(--wp--preset--color--white); border-radius: 10px; overflow: hidden; }
.shot-panel img { width: 100%; height: 200px; object-fit: cover; object-position: center top; display: block; }

/* ---------- 7. サービスのつながり（診断→相談→運用） ---------- */
.flow-card {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.flow-card-accent { border-color: var(--wp--preset--color--accent); }
.flow-step {
  font-family: var(--wp--preset--font-family--latin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--wp--preset--color--accent-ink);
}
.flow-title { font-size: 18px; }
.flow-text { font-size: 14px; color: var(--wp--preset--color--text-light); line-height: 1.9; }
.flow-arrow { font-size: 20px; color: var(--wp--preset--color--accent); line-height: 1.2; }
.flow-band {
  background-color: var(--wp--preset--color--sage);
  border-radius: 12px;
}
.flow-band-title { font-size: 20px; }

/* ---------- 8. 機能・特長リスト（MFO 等） ---------- */
.plan-card { background-color: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border); border-radius: 10px; display: flex; flex-direction: column; height: 100%; }
.plan-card-featured { border-color: var(--wp--preset--color--accent); border-width: 2px; }
.plan-name { font-size: 17px; }
.plan-price { font-family: var(--wp--preset--font-family--latin); font-size: 26px; font-weight: 600; color: var(--wp--preset--color--brand); line-height: 1.4; }
.plan-price-note { font-size: 12px; color: var(--wp--preset--color--text-light); }
.plan-list { font-size: 13px; color: var(--wp--preset--color--text-light); line-height: 1.85; }
.plan-list li::marker { color: var(--wp--preset--color--accent); }
.map-embed { position: relative; width: 100%; padding-bottom: 62%; border-radius: 8px; overflow: hidden; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.feature {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.feature-accent { border-color: var(--wp--preset--color--accent); }
.feature-title { font-size: 17px; }
.feature-text { font-size: 14px; color: var(--wp--preset--color--text-light); line-height: 1.9; }
.spec-list { font-size: 15px; color: var(--wp--preset--color--text-light); }
.spec-list li::marker { color: var(--wp--preset--color--accent); }
.spec-list-light { font-size: 15px; color: #cfe2d7; line-height: 1.95; }
.spec-list-light li::marker { color: var(--wp--preset--color--accent); }
.dark-panel {
  background-color: var(--wp--preset--color--deep);
  border-radius: 14px;
}
.dark-title { font-size: 26px; color: #ffffff; }
.dark-text { font-size: 15px; color: #cfe2d7; line-height: 1.95; }
.panel-photo img { width: 100%; height: 320px; object-fit: cover; border-radius: 10px; display: block; }
.dark-label {
  font-family: var(--wp--preset--font-family--latin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fd0ae;
}

/* ---------- 9. 数字・実績まわり ---------- */
.stat-value { font-family: var(--wp--preset--font-family--latin); font-size: 30px; font-weight: 600; color: var(--wp--preset--color--brand); line-height: 1.3; }
.stat-label { font-size: 13px; color: var(--wp--preset--color--text-light); }

/* ---------- 10. プロフィール ---------- */
.profile-photo img { width: 100%; height: 320px; object-fit: cover; object-position: center top; border-radius: 12px; }
.profile-name { font-size: 22px; }
.profile-role { font-size: 14px; color: var(--wp--preset--color--accent-ink); font-weight: 700; letter-spacing: 0.04em; }
.profile-text { font-size: 15px; color: var(--wp--preset--color--text-light); }

/* ---------- 11. お知らせ行 ---------- */
.news-row { border-top: 1px solid var(--wp--preset--color--border); padding-top: 16px; padding-bottom: 16px; }
.news-date { font-family: var(--wp--preset--font-family--latin); font-size: 13px; color: var(--wp--preset--color--text-light); letter-spacing: 0.06em; }
.news-title a { color: var(--wp--preset--color--text); text-decoration: none; font-size: 15px; font-weight: 500; }
.news-title a:hover { color: var(--wp--preset--color--brand); }

/* ---------- 12. FAQ（details） ---------- */
.faq {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: 18px;
  padding-bottom: 18px;
}
.faq summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--brand);
  line-height: 1.7;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus { outline: none; }
.faq p { font-size: 15px; color: var(--wp--preset--color--text-light); padding-top: 10px; }

/* ---------- 13. 手続きの流れ（番号付き） ---------- */
.step-row { border-top: 1px solid var(--wp--preset--color--border); padding-top: 22px; padding-bottom: 22px; }
.step-num {
  font-family: var(--wp--preset--font-family--latin);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--wp--preset--color--accent-ink);
}
.step-title { font-size: 18px; }
.step-text { font-size: 15px; color: var(--wp--preset--color--text-light); }

/* ---------- 14. CTA（cover） ---------- */
.cta-cover { position: relative; }
.cta-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16,35,26,.88) 0%, rgba(16,35,26,.82) 100%);
}
.cta-cover > * { position: relative; z-index: 2; }
.cta-title { font-size: 30px; line-height: 1.55; }
.cta-text { font-size: 16px; color: #dcebe2; }
.cta-note { font-size: 13px; color: #b9d6c6; }

/* ---------- 15. フォーム（Contact Form 7） ---------- */
.site-form { display: block; width: 100%; }
.site-form .form-row { display: block; margin-bottom: 22px; }
.site-form label { display: block; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--text); margin-bottom: 8px; }
.site-form .req { font-size: 12px; font-weight: 700; color: #ffffff; background-color: var(--wp--preset--color--brand); border-radius: 3px; padding: 2px 7px; margin-left: 8px; }
.site-form input[type="text"],
.site-form input[type="email"],
.site-form input[type="tel"],
.site-form select,
.site-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--wp--preset--color--text);
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 6px;
  padding: 12px 14px;
}
.site-form textarea { min-height: 180px; }
.site-form .consent-row { display: flex; align-items: flex-start; gap: 10px; background-color: var(--wp--preset--color--mist); border-radius: 8px; padding: 16px; }
.site-form .consent-row label { margin-bottom: 0; font-weight: 500; font-size: 14px; }
.site-form .consent-row a { color: var(--wp--preset--color--brand); }
.site-form .form-submit { margin-top: 28px; }
.site-form .wpcf7-submit {
  display: inline-block;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: #ffffff;
  background-color: var(--wp--preset--color--brand);
  border: none;
  border-radius: 6px;
  padding: 14px 44px;
  cursor: pointer;
}
.form-note { font-size: 13px; color: var(--wp--preset--color--text-light); }
.form-note a { color: var(--wp--preset--color--brand); }

/* ---------- 15b. 法務ページ（privacy / kiyaku / hyoji） ---------- */
.legal-body a { color: var(--wp--preset--color--brand); }
.legal-h2 { font-size: 20px; line-height: 1.7; }
.legal-h3 { font-size: 16px; line-height: 1.8; color: var(--wp--preset--color--brand); }
.legal-list { font-size: 15px; line-height: 1.95; }
.legal-ol { font-size: 15px; line-height: 1.95; }
.legal-note { font-size: 14px; color: var(--wp--preset--color--text-light); line-height: 1.9; }
.legal-meta { font-size: 14px; color: var(--wp--preset--color--text-light); }
.legal-nav { font-size: 15px; }
.legal-nav a { color: var(--wp--preset--color--brand); font-weight: 700; text-decoration: none; }
.legal-box { background-color: var(--wp--preset--color--mist); border-radius: 8px; }
.legal-table table { width: 100%; table-layout: fixed; border-collapse: collapse; box-sizing: border-box; }
.legal-table th { width: 30%; text-align: left; vertical-align: top; padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--text); background-color: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--border); }
.legal-table td { vertical-align: top; padding: 12px 14px; font-size: 15px; line-height: 1.9; border: 1px solid var(--wp--preset--color--border); }

/* ---------- 15c. 汎用テーブル（事務所概要・料金・ツール比較） ---------- */
.info-table { align-self: stretch; }
.info-table table { width: 100%; table-layout: fixed; border-collapse: collapse; box-sizing: border-box; }
.info-table th { width: 32%; text-align: left; vertical-align: top; padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--text); background-color: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--border); }
.info-table td { vertical-align: top; padding: 12px 14px; font-size: 15px; line-height: 1.9; border: 1px solid var(--wp--preset--color--border); }
.news-empty { font-size: 17px; font-weight: 700; color: var(--wp--preset--color--text); }

/* ---------- 16. フッター ---------- */
.footer-logo { font-family: var(--wp--preset--font-family--display); font-size: 18px; font-weight: 700; color: #ffffff; }
.footer-lead { font-size: 14px; color: #c3d8cb; line-height: 1.95; padding-top: 12px; }
.footer-meta { padding-top: 14px; }
.footer-meta p { font-size: 13px; color: #a9c4b3; }
.footer-head { font-size: 13px; font-weight: 700; color: #ffffff; letter-spacing: 0.08em; }
.footer-nav a { font-size: 14px; color: #c3d8cb; text-decoration: none; }
.footer-nav a:hover { color: #ffffff; }
.footer-copy { font-size: 12px; color: #9fb8a8; }
.footer-legal { border-top: 1px solid #2c4c3d; padding-top: 20px; }
.footer-legal a { font-size: 13px; color: #c3d8cb; text-decoration: none; }
.footer-legal a:hover { color: #ffffff; }

/* =====================================================================
   17. 補助金情報（/grant-info/）
   既存トークン（色・フォント・余白）だけで構成し、新しい配色は増やさない。
   接頭辞 gi- は grant-info の意味。既存クラスと衝突させないための名前空間。
   ===================================================================== */

/* ---------- 17-1. 公募ステータス badge ----------
   色だけで状態を区別しないため、badge内には必ず状態名のテキストが入る（PHP側で出力）。
   ドットは装飾なので aria-hidden。 */
.gi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 4px 12px;
  border: 1px solid var(--wp--preset--color--border);
  background-color: var(--wp--preset--color--mist);
  color: var(--wp--preset--color--text);
  white-space: nowrap;
}
.gi-badge__dot { width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; flex-shrink: 0; }
.gi-badge--open     { background-color: var(--wp--preset--color--sage); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink); }
.gi-badge--upcoming { background-color: var(--wp--preset--color--mist); border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); }
.gi-badge--waiting  { background-color: var(--wp--preset--color--mist); border-color: var(--wp--preset--color--border); color: var(--wp--preset--color--text-light); }
.gi-badge--closed   { background-color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--border); color: var(--wp--preset--color--text-light); }

/* ---------- 17-2. 絞り込みUI ----------
   既定は hidden 属性付きで出力し、JSが動いたときだけ表示する。 */
.gi-filter {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-md);
  background-color: var(--wp--preset--color--mist);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: var(--wp--preset--spacing--space-md);
  margin-bottom: var(--wp--preset--spacing--space-xl);
}
.gi-filter[hidden] { display: none; }
.gi-filter__group { display: flex; flex-direction: column; gap: 10px; }
.gi-filter__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--text);
  margin: 0;
  line-height: 1.6;
}
.gi-filter__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.gi-chip {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--wp--preset--color--text);
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  /* 指で押せる大きさを確保する（スマホ）。 */
  padding: 8px 16px;
  min-height: 40px;
  cursor: pointer;
}
.gi-chip:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink); }
/* 選択状態は aria-pressed が正。太字＋チェック記号を併用し、色だけに依存させない。 */
.gi-chip[aria-pressed="true"] {
  background-color: var(--wp--preset--color--brand);
  border-color: var(--wp--preset--color--brand);
  color: #ffffff;
  font-weight: 700;
}
.gi-chip[aria-pressed="true"]::before { content: "\2713\00a0"; }
.gi-filter__result { font-size: 13px; color: var(--wp--preset--color--text-light); margin: 0; line-height: 1.8; }

/* ---------- 17-3. 一覧セクションとカードグリッド ---------- */
.gi-section { margin-top: var(--wp--preset--spacing--space-xxl); }
.gi-section:first-of-type { margin-top: 0; }
.gi-section__title { font-size: 26px; letter-spacing: 0.01em; margin: 0 0 8px; }
.gi-section__lead { font-size: 15px; color: var(--wp--preset--color--text-light); margin: 0 0 var(--wp--preset--spacing--space-md); }
.gi-section__empty { font-size: 15px; color: var(--wp--preset--color--text-light); margin: 0; }
.gi-section__empty[hidden] { display: none; }
.gi-grid {
  display: grid;
  /* min() を挟むことで、390px幅でもトラックがビューポートを超えず横スクロールが出ない。 */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--wp--preset--spacing--space-md);
}
.gi-grid[hidden] { display: none; }

/* ---------- 17-4. 補助金カード ----------
   カード全体をクリック可能にするが、実体は .gi-card__link（本物のa要素）を面展開しているだけなので、
   Tabでの到達とEnterでの遷移がそのまま効く。 */
.gi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: var(--wp--preset--spacing--space-md);
}
.gi-card[hidden], .gi-card.is-hidden { display: none; }
.gi-card:hover { border-color: var(--wp--preset--color--accent); }
/* カード内のリンクにフォーカスが来たら、カード全体に枠を出す（focus表示は消さない）。 */
.gi-card:focus-within { outline: 2px solid var(--wp--preset--color--accent-ink); outline-offset: 2px; }
.gi-card__head { display: flex; flex-wrap: wrap; gap: 8px; }
.gi-card__title { font-size: 19px; line-height: 1.55; margin: 0; }
.gi-card__link { color: var(--wp--preset--color--text); text-decoration: none; }
.gi-card__link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.gi-card__link:focus { outline: none; } /* 枠は :focus-within でカード全体に出す */
.gi-card:hover .gi-card__link { color: var(--wp--preset--color--brand); }
.gi-card__type { font-size: 13px; font-weight: 700; color: var(--wp--preset--color--accent-ink); margin: 0; line-height: 1.6; }
.gi-card__summary { font-size: 14px; line-height: 1.9; color: var(--wp--preset--color--text-light); margin: 0; }

.gi-card__specs { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gi-card__spec { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; line-height: 1.8; }
.gi-card__spec dt { flex: 0 0 68px; font-weight: 700; color: var(--wp--preset--color--text); margin: 0; }
.gi-card__spec dd { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--wp--preset--color--text-light); overflow-wrap: anywhere; }

.gi-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gi-tag {
  font-size: 12px;
  line-height: 1.6;
  color: var(--wp--preset--color--accent-ink);
  background-color: var(--wp--preset--color--sage);
  border-radius: 4px;
  padding: 3px 8px;
  margin: 0;
}
.gi-card__checked { font-size: 12px; color: var(--wp--preset--color--text-light); margin: 0; line-height: 1.7; }
.gi-card__more { margin: auto 0 0; padding-top: 4px; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--brand); }

/* ---------- 17-5. 概要サマリー（詳細ページ上部の4項目カード） ----------
   条件で変わる数値は value に印を付け、直下の note で条件を説明する。 */
.gi-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--wp--preset--spacing--space-sm);
  margin: 0;
}
.gi-summary__item {
  background-color: var(--wp--preset--color--mist);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  padding: var(--wp--preset--spacing--space-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gi-summary__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--wp--preset--color--accent-ink); margin: 0; line-height: 1.6; }
.gi-summary__value { font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--wp--preset--color--brand); margin: 0; overflow-wrap: anywhere; }
.gi-summary__note { font-size: 12px; line-height: 1.7; color: var(--wp--preset--color--text-light); margin: 0; }

/* ---------- 17-6. チェックリスト風リスト ----------
   チェックが付いたから申請できる、という意味ではない旨を必ず直下の注記で補う。 */
.gi-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gi-check li {
  position: relative;
  margin: 0;
  padding: 10px 14px 10px 40px;
  font-size: 15px;
  line-height: 1.85;
  background-color: var(--wp--preset--color--mist);
  border-radius: 8px;
}
.gi-check li::before {
  content: "\2713";
  position: absolute;
  left: 14px;
  top: 10px;
  font-weight: 700;
  color: var(--wp--preset--color--accent-ink);
}

/* ---------- 17-7. 外部リンク（公式情報） ----------
   外部であることを記号とテキストの両方で示す（色だけに依存させない）。 */
.gi-ext { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gi-ext li { margin: 0; font-size: 15px; line-height: 1.85; }
.gi-ext a { color: var(--wp--preset--color--brand); font-weight: 700; overflow-wrap: anywhere; }
.gi-ext a[target="_blank"]::after { content: "\00a0\2197"; font-weight: 400; }
.gi-ext__note { display: block; font-size: 13px; color: var(--wp--preset--color--text-light); font-weight: 400; }

/* ---------- 17-8. 更新履歴 ---------- */
.gi-history { margin: 0; }
.gi-history__row { display: flex; flex-wrap: wrap; gap: 4px 20px; border-top: 1px solid var(--wp--preset--color--border); padding: 12px 0; }
.gi-history__row:last-child { border-bottom: 1px solid var(--wp--preset--color--border); }
.gi-history dt { flex: 0 0 140px; font-family: var(--wp--preset--font-family--latin); font-size: 13px; letter-spacing: 0.06em; color: var(--wp--preset--color--text-light); margin: 0; line-height: 1.9; }
.gi-history dd { flex: 1 1 240px; min-width: 0; font-size: 15px; line-height: 1.9; margin: 0; }

/* ---------- 17-9. 目的別ナビゲーション（/grant-info/ 一覧） ----------
   既存の絞り込みフィルター（17-2）とは別機能。制度名を知らない利用者が
   「やりたいこと」から詳細ページへ直接進むための静的ナビ。JSは使わない。 */
.gi-purpose {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--wp--preset--spacing--space-md);
}
.gi-purpose__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: var(--wp--preset--spacing--space-md);
}
.gi-purpose__title { font-size: 17px; line-height: 1.6; margin: 0; }
.gi-purpose__text { font-size: 14px; line-height: 1.9; color: var(--wp--preset--color--text-light); margin: 0; }
.gi-purpose__links { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.gi-purpose__links li { margin: 0; font-size: 14px; line-height: 1.7; }
.gi-purpose__links a { color: var(--wp--preset--color--brand); font-weight: 700; text-decoration: none; }
.gi-purpose__links a::after { content: "\00a0\2192"; }
.gi-purpose__links a:hover { color: var(--wp--preset--color--accent-ink); text-decoration: underline; }

/* ---------- 17-10. 「補助金を探す」2択カード（/grant/） ----------
   既存の .card / .feature と同じ枠線・角丸・余白の考え方に揃え、
   このセクションだけ異質にならないようにする。 */
.gi-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--wp--preset--spacing--space-md);
}
.gi-choice__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: var(--wp--preset--spacing--space-lg);
}
.gi-choice__item:hover { border-color: var(--wp--preset--color--accent); }
.gi-choice__item:focus-within { outline: 2px solid var(--wp--preset--color--accent-ink); outline-offset: 2px; }
.gi-choice__label {
  font-family: var(--wp--preset--font-family--latin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-ink);
  margin: 0;
  line-height: 1.6;
}
.gi-choice__title { font-size: 20px; line-height: 1.55; margin: 0; }
.gi-choice__text { font-size: 15px; line-height: 1.9; color: var(--wp--preset--color--text-light); margin: 0; }
.gi-choice__cta { margin: auto 0 0; padding-top: 8px; font-size: 15px; font-weight: 700; }
.gi-choice__cta a { color: var(--wp--preset--color--brand); text-decoration: none; }
/* カード全体をクリック可能にする。実体は本物のa要素の面展開なのでキーボード操作もそのまま効く。 */
.gi-choice__cta a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.gi-choice__cta a:focus { outline: none; } /* 枠は :focus-within でカード全体に出す */
.gi-choice__item:hover .gi-choice__cta a { color: var(--wp--preset--color--accent-ink); }
.gi-choice__cta .gi-choice__arrow::before { content: "\00a0\2192"; }
.gi-choice__cta .gi-choice__ext::before { content: "\00a0\2197"; }

/* ---------- 17-11. 詳細ページのCTA優先順位 ----------
   相談（第一）→ Merge GrantMatch（第二）→ /grant/・/price/（補助リンク）。
   同列に並べず、面積・色の強さで序列が分かるようにする。 */
.gi-cta-primary {
  background-color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--accent);
  border-radius: 12px;
  padding: var(--wp--preset--spacing--space-lg);
}
.gi-cta-secondary {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: var(--wp--preset--spacing--space-md);
}
/* 補助リンクはボタンにせず、テキストリンクの列にする。 */
.gi-sublinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.gi-sublinks li { margin: 0; font-size: 15px; line-height: 1.8; }
.gi-sublinks a { color: var(--wp--preset--color--brand); text-decoration: underline; }
.gi-sublinks a::after { content: "\00a0\2192"; text-decoration: none; }
.gi-sublinks a:hover { color: var(--wp--preset--color--accent-ink); }

/* ---------- 17-12. お問い合わせフォーム上部の「対象制度」 ----------
   補助金詳細ページの相談CTA（/contact/?grant={slug}）から来たときだけ、
   サーバー側が出力する。既存トークンのみで構成する。 */
.gi-contact-target {
  background-color: var(--wp--preset--color--sage);
  border-left: 4px solid var(--wp--preset--color--accent);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 0 0 var(--wp--preset--spacing--space-md);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
  overflow-wrap: anywhere;
}
.gi-contact-target__note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--wp--preset--color--text-light);
}

/* =====================================================================
   18. 補助金情報の図表コンポーネント（詳細ページ本文）
   出力は inc/grant-info-figures.php のショートコード。
   既存トークン（色・フォント・余白・角丸）だけで構成し、新しい配色は増やさない。
   画像は使わず、JSにも依存しない（印刷・検索エンジン・読み上げのいずれでも内容が読める）。
   ===================================================================== */

/* ---------- 18-0. 図表の外枠（見出し・リード・注記） ----------
   width:100% と min-width:0 は必須。省略すると、横スクロール表（18-2）の中の
   table の min-width が枠の max-content 幅になり、overflow-x:auto が効かないまま
   枠が親（.legal-body）からはみ出して、ページ全体が横スクロールしてしまう。 */
.gi-fig {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
  width: 100%;
  min-width: 0;
}
.gi-fig__title { font-size: 16px; line-height: 1.8; color: var(--wp--preset--color--brand); margin: 0; }
.gi-fig__lead { font-size: 15px; line-height: 1.9; color: var(--wp--preset--color--text-light); margin: 0; }
.gi-fig__note { font-size: 13px; line-height: 1.9; color: var(--wp--preset--color--text-light); margin: 0; }
.gi-fig a { color: var(--wp--preset--color--brand); }

/* ---------- 18-1. 補助額の具体例 ----------
   「投資額 → 補助率 → 補助金 → 自己負担」を上から順に読める形にする。
   実際の補助額は対象経費・補助上限・審査結果で変わるため、
   単純化した例である旨の注意書きをショートコード側で必ず先頭に出している。 */
.gi-calc__disclaimer {
  font-size: 13px;
  line-height: 1.9;
  color: var(--wp--preset--color--text-light);
  background-color: var(--wp--preset--color--mist);
  border-left: 4px solid var(--wp--preset--color--border);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 0;
}
.gi-calc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* min() を挟むことで、390px幅でもトラックがビューポートを超えず横スクロールが出ない。 */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--wp--preset--spacing--space-sm);
}
.gi-calc__case {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: var(--wp--preset--spacing--space-md);
}
.gi-calc__case-title { font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--wp--preset--color--accent-ink); margin: 0; }
.gi-calc__steps { margin: 0; display: flex; flex-direction: column; }
.gi-calc__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 8px;
  background-color: var(--wp--preset--color--mist);
}
/* 段の間の「↓」。矢印は装飾で、順序は要素の並び順そのものが持つ。 */
.gi-calc__step + .gi-calc__step { margin-top: 24px; }
.gi-calc__step + .gi-calc__step::before {
  content: "\2193";
  position: absolute;
  left: 50%;
  top: -21px;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--accent-ink);
}
.gi-calc__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.6; color: var(--wp--preset--color--text-light); margin: 0; }
.gi-calc__value { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--wp--preset--color--text); margin: 0; overflow-wrap: anywhere; }
/* 補助金の行だけを結論として強調する（枠線＋背景＋文字サイズ。色だけに依存させない）。 */
.gi-calc__step--result { background-color: var(--wp--preset--color--sage); border: 1px solid var(--wp--preset--color--accent); }
.gi-calc__step--result .gi-calc__label { color: var(--wp--preset--color--accent-ink); }
.gi-calc__step--result .gi-calc__value { font-size: 22px; color: var(--wp--preset--color--brand); }
.gi-calc__step--self { background-color: var(--wp--preset--color--white); border: 1px dashed var(--wp--preset--color--border); }
.gi-calc__hint { font-size: 13px; line-height: 1.85; color: var(--wp--preset--color--text-light); margin: auto 0 0; padding-top: 2px; }

/* ---------- 18-2. 比較表 ----------
   PCは通常の表。スマホは data-mobile の指定で
     cards  … 1行＝1枚のカードに畳み、各セルに列名を添える（既定）
     scroll … 表のまま横スクロール（列が多く、横の対比が要るとき）
   に切り替える。 */
.gi-table { align-self: stretch; width: 100%; min-width: 0; max-width: 100%; }
.gi-table__table { width: 100%; border-collapse: collapse; box-sizing: border-box; }
.gi-table__table th,
.gi-table__table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border: 1px solid var(--wp--preset--color--border);
  line-height: 1.9;
}
.gi-table__table thead th {
  font-size: 14px;
  font-weight: 700;
  color: var(--wp--preset--color--brand);
  background-color: var(--wp--preset--color--sage);
}
.gi-table__table tbody th {
  font-size: 14px;
  font-weight: 700;
  color: var(--wp--preset--color--text);
  background-color: var(--wp--preset--color--mist);
}
.gi-table__table tbody td { font-size: 15px; background-color: var(--wp--preset--color--white); }
.gi-table__scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* スクロール領域はキーボードでも動かせるようにしているため、フォーカス表示を必ず出す。 */
.gi-table__scroll:focus-visible { outline: 2px solid var(--wp--preset--color--accent-ink); outline-offset: 2px; }
.gi-table__scroll .gi-table__table { min-width: 620px; }
.gi-table__hint { font-size: 13px; line-height: 1.8; color: var(--wp--preset--color--text-light); margin: 8px 0 0; }

/* ---------- 18-3. 申請フロー図 ----------
   各STEPの詳しい説明は本文に残し、ここは全体像だけを一続きで示す。 */
/* 折り返し位置を固定するためにグリッドにしている。flex-wrap では行末がどの項目か
   分からず、行末の矢印がコンテンツ幅の外へはみ出してしまうため。
   行末（4n）と最後の項目の矢印は出さない。列数を変える指定は responsive.css 側。 */
.gi-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 30px;
}
.gi-flow__item {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.gi-flow__item::after {
  content: "\2192";
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--accent-ink);
}
.gi-flow__item:nth-child(4n)::after,
.gi-flow__item:last-child::after { content: none; }
.gi-flow__num {
  font-family: var(--wp--preset--font-family--latin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 20px;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #ffffff;
  background-color: var(--wp--preset--color--brand);
}
.gi-flow__title { font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--wp--preset--color--text); margin: 0; }
.gi-flow__meta { font-size: 12px; line-height: 1.7; color: var(--wp--preset--color--text-light); margin: auto 0 0; padding-top: 2px; }

/* ---------- 18-4. 活用イメージ（現状 → 導入 → 導入後） ----------
   3段目は「導入後に期待できること」。効果や採択を断定する表現は使わない。 */
.gi-ba {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--wp--preset--spacing--space-sm);
}
.gi-ba__case {
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: var(--wp--preset--spacing--space-md);
}
.gi-ba__stage { position: relative; padding: 12px 14px; border-radius: 8px; background-color: var(--wp--preset--color--mist); }
.gi-ba__stage + .gi-ba__stage { margin-top: 26px; }
.gi-ba__stage + .gi-ba__stage::before {
  content: "\2193";
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--accent-ink);
}
.gi-ba__stage--action { background-color: var(--wp--preset--color--sage); }
/* 最終段は枠線で「結論」であることを示す。
   margin-top:auto で下端に揃えることはしない。カード内に余白が無いとき auto が 0 になり、
   段の間に置いた「↓」が上の段と重なってしまうため、段の間隔は常に一定にする。 */
.gi-ba__stage--after {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--accent);
}
.gi-ba__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.6; color: var(--wp--preset--color--accent-ink); margin: 0; }
.gi-ba__text { font-size: 14px; line-height: 1.85; color: var(--wp--preset--color--text); margin: 0; }

/* ---------- 18-5. 日程の図 ----------
   締切が複数あり、前後関係を間違えると申請できなくなる制度で使う。 */
.gi-timeline { list-style: none; margin: 0; padding: 0; }
.gi-timeline__item { position: relative; margin: 0; padding: 0 0 22px 32px; }
.gi-timeline__item:last-child { padding-bottom: 0; }
.gi-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background-color: var(--wp--preset--color--border);
}
.gi-timeline__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--white);
  border: 3px solid var(--wp--preset--color--accent);
  box-sizing: border-box;
}
.gi-timeline__item--alert::after { background-color: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); }
.gi-timeline__date { font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--wp--preset--color--accent-ink); margin: 0; }
.gi-timeline__title { font-size: 16px; font-weight: 700; line-height: 1.75; color: var(--wp--preset--color--text); margin: 0; }
/* 強調を色だけに頼らないためのラベル（「要注意」等の文字を必ず出す）。 */
.gi-timeline__flag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #ffffff;
  background-color: var(--wp--preset--color--brand);
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 8px;
}
.gi-timeline__text { font-size: 14px; line-height: 1.9; color: var(--wp--preset--color--text-light); margin: 0; }