/* 様式記入ガイド専用テンプレート（.gi-form-guide を含む記事だけに読み込まれる）
   方針: 直線・角丸なし（サイト共通の2pxのみ）・グラデーションなし・青は導線だけ。
   赤 #C4161C は様式画像の赤枠と同じ系統で、「画像の番号＝見出しの番号」を目で結ぶために使う。 */

.gi-form-guide {
  --fg-red: #C4161C;
  --fg-red-bg: #FDF1F1;
  --fg-navy: var(--rc-navy, #0F1B3D);
  --fg-text: var(--rc-text, #1F2937);
  --fg-muted: var(--rc-muted, #4B5563);
  --fg-line: var(--rc-border-2, #D1D5DB);
  --fg-bg: var(--rc-bg-alt, #F8F9FB);
  --fg-green: #047857;  /* 白文字で 5.48:1（T07）。サイトの #059669 は白文字 3.77:1 で足りない */
}

/* 1. 通常記事の上部ブロック（基本情報・ジャンプナビ・制度の基礎データ）を隠す。様式カードとタブで置き換える */
/* テーマのスマホ用 `.gi-grant-page #conditions.gi-conclusion{display:block!important}` に勝つよう ID を含める */
body:has(.gi-form-guide) #gi-grant-article :is(#conditions, .gi-conclusion.gi-kf, .gi-kf-nav, .gi-overview-accordion) { display: none !important; }

/* 2. 様式カード */
.gi-form-guide .gi-form-card { border: 2px solid var(--fg-navy); margin: 1.5em 0; background: #fff; }
.gi-form-guide .gi-form-card__head { display: flex; align-items: center; gap: .75em; background: var(--fg-navy); color: #fff; padding: .6em 1em; margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.gi-form-guide .gi-form-card__label { border: 1px solid #fff; padding: .1em .5em; font-size: .75rem; letter-spacing: .08em; white-space: nowrap; }
.gi-form-guide .gi-form-card__body { padding: 1em; }
.gi-form-guide .gi-form-card dl { display: grid; grid-template-columns: 7.5em 1fr; margin: 0; border-top: 1px solid var(--fg-line); }
.gi-form-guide .gi-form-card dt,
.gi-form-guide .gi-form-card dd { margin: 0; padding: .55em .6em; border-bottom: 1px solid var(--fg-line); font-size: .9rem; line-height: 1.6; }
.gi-form-guide .gi-form-card dt { background: var(--fg-bg); color: var(--fg-muted); font-weight: 700; }
.gi-form-guide .gi-form-pages { display: flex; flex-wrap: wrap; gap: 1px; margin: 1em 0 .25em; border: 1px solid var(--fg-line); background: var(--fg-line); }  /* 枠線は隙間1pxの背景で引く（空きマスに線が残らない） */
.gi-form-guide .gi-form-page { flex: 1 1 calc(25% - 1px); min-width: 140px; padding: .6em .5em; text-align: center; line-height: 1.35; background: #fff; }
.gi-form-guide .gi-form-page__no { display: block; font-size: 1.35rem; font-weight: 700; color: var(--fg-navy); }
.gi-form-guide .gi-form-page__who { display: inline-block; margin: .2em 0; padding: .05em .5em; font-size: .75rem; font-weight: 700; border: 1px solid var(--fg-muted); color: var(--fg-muted); }
.gi-form-guide .gi-form-page__what { display: block; font-size: .75rem; color: var(--fg-muted); }
.gi-form-guide .gi-form-page.is-self { background: var(--fg-red-bg); }
.gi-form-guide .gi-form-page.is-self .gi-form-page__who { border-color: var(--fg-red); background: var(--fg-red); color: #fff; }
.gi-form-guide .gi-form-card__note { margin: .5em 0 0; font-size: .8rem; color: var(--fg-muted); }
.gi-form-guide .gi-form-dl { margin: 1em 0 0; }
#gi-grant-article .gi-form-guide .gi-form-dl a { display: block; padding: .8em 1em; border: 2px solid var(--fg-navy); border-radius: 0; color: var(--fg-navy) !important; font-weight: 700; text-align: center; text-decoration: none !important; background: #fff; }
#gi-grant-article .gi-form-guide .gi-form-dl a:hover,
#gi-grant-article .gi-form-guide .gi-form-dl a:focus-visible { background: var(--fg-navy); color: #fff !important; }
.gi-form-guide .gi-form-card dd a { display: inline-block; padding: .15em 0; min-height: 24px; }  /* 押せる高さ 24px 以上（T11） */

/* 3. ページ切り替えタブ（スクロールしても上に残る。top は JS がサイトのヘッダーの下端に合わせる＝T02）
   PC は折り返し、SP は 4 列の格子で全タブを最初から見せる（T03・T04）。文字色はテーマのリンク色より強く上書き（T01） */
.gi-form-guide .gi-form-tabs { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; margin: 1.5em 0; background: var(--fg-line); gap: 1px; border: 1px solid var(--fg-line); border-bottom: 2px solid var(--fg-navy); transition: top .15s; }
#gi-grant-article .gi-form-guide .gi-form-tabs a { flex: 1 0 auto; padding: .7em 1em; font-size: .85rem; font-weight: 700; line-height: 1.35; color: var(--fg-navy) !important; background: #fff; text-align: center; text-decoration: none !important; border-radius: 0 !important; }
#gi-grant-article .gi-form-guide .gi-form-tabs a:hover { background: #EEF1F6; }
#gi-grant-article .gi-form-guide .gi-form-tabs a.is-current { background: var(--fg-navy); color: #fff !important; }
.gi-form-guide h2[id] { scroll-margin-top: 8em; }  /* ヘッダー＋タブの高さぶん */

/* 4. この記事で分かること（左に見出し・右にチェックリスト） */
.gi-form-guide .gi-callout--info { display: grid; grid-template-columns: 9em 1fr; padding: 0; border: 2px solid var(--fg-navy); background: #fff; }
.gi-form-guide .gi-callout--info .gi-callout__title { display: flex; align-items: center; justify-content: center; margin: 0; padding: 1em; background: var(--fg-navy); color: #fff; text-align: center; font-size: .95rem; }
.gi-form-guide .gi-callout--info ol { margin: 0; padding: .6em 1em; list-style: none; counter-reset: none; }
.gi-form-guide .gi-callout--info li { position: relative; padding: .45em 0 .45em 1.8em; border-bottom: 1px solid var(--fg-line); }
.gi-form-guide .gi-callout--info li:last-child { border-bottom: 0; }
.gi-form-guide .gi-callout--info li::before { content: ""; position: absolute; left: .3em; top: .85em; width: .5em; height: .9em; border: solid var(--fg-green); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* 5. 欄番号の札（様式画像の赤い札と同じ見た目） */
.gi-form-guide .gi-form-no { display: inline-block; min-width: 1.9em; margin-right: .45em; padding: .08em .35em; background: var(--fg-red); color: #fff; font-size: .82em; font-weight: 700; text-align: center; vertical-align: .08em; font-family: inherit; }

/* 6. 様式画像 */
.gi-form-guide .gi-form-figure { position: relative; margin: 1.5em 0; padding: 2.1em .6em .6em; border: 1px solid var(--fg-line); background: #fff; }
.gi-form-guide .gi-form-figure::before { content: "記入例"; position: absolute; top: 0; left: 0; padding: .3em .8em; background: var(--fg-red); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.gi-form-guide .gi-form-figure::after { content: "タップで拡大"; position: absolute; top: .45em; right: .7em; font-size: .75rem; color: var(--fg-muted); }
.gi-form-guide .gi-form-figure a { display: block; cursor: zoom-in; }
.gi-form-guide .gi-form-figure img { display: block; width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; }
.gi-form-guide .gi-form-figure figcaption { margin: .6em 0 0; font-size: .78rem; line-height: 1.6; color: var(--fg-muted); }

/* 7. ページごとのポイント */
.gi-form-guide .gi-callout--success { position: relative; margin: 1.75em 0; padding: 1em 1em .6em; border: 2px solid var(--fg-green); border-left-width: 2px; background: #fff; }
.gi-form-guide .gi-callout--success .gi-callout__title { display: inline-block; margin: 0 0 .5em; padding: .15em .7em; background: var(--fg-green); color: #fff; font-size: .9rem; }
.gi-form-guide .gi-callout--success ul { margin: 0; padding: 0; list-style: none; }
.gi-form-guide .gi-callout--success li { position: relative; padding: .4em 0 .4em 1.8em; border-top: 1px dashed var(--fg-line); }
.gi-form-guide .gi-callout--success li:first-child { border-top: 0; }
.gi-form-guide .gi-callout--success li::before { content: ""; position: absolute; left: .3em; top: .75em; width: .5em; height: .9em; border: solid var(--fg-green); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* 8. 専門家のひと言（アドバイス枠として小見出しを付ける。吹き出し本体は横並びなので段落の頭に付ける） */
.gi-form-guide .gi-balloon:not(.gi-balloon--r) .gi-balloon__body > p:first-child::before { content: "専門家のアドバイス"; display: block; margin-bottom: .25em; font-size: .75rem; font-weight: 700; color: var(--fg-navy); letter-spacing: .04em; }

/* 9. 書き間違えやすいポイント（NG→正しい書き方）。ラベルは本文の span（テーマが SP で td::before に列名を出すので擬似要素は使わない＝T06） */
.gi-form-guide .gi-form-ng table { width: 100%; border-collapse: collapse; }
.gi-form-guide .gi-form-tag { display: inline-block; margin-right: .5em; padding: .05em .5em; font-size: .8rem; font-weight: 700; line-height: 1.5; color: #fff; vertical-align: .1em; }
.gi-form-guide .gi-form-tag--ng { background: var(--fg-red); }
.gi-form-guide .gi-form-tag--ok { background: var(--fg-green); }
.gi-form-guide .gi-form-ng tr > td:first-child { background: var(--fg-red-bg); }

/* 9b. 長い一覧の折りたたみ（T12） */
.gi-form-guide .gi-form-more { margin: 1em 0 1.5em; border: 1px solid var(--fg-line); background: #fff; }
.gi-form-guide .gi-form-more > summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: .6em 1em; font-weight: 700; color: var(--fg-navy); cursor: pointer; list-style: none; }
.gi-form-guide .gi-form-more > summary::-webkit-details-marker { display: none; }
.gi-form-guide .gi-form-more > summary::after { content: "開く"; flex: none; margin-left: 1em; padding: .1em .7em; border: 1px solid var(--fg-navy); font-size: .8rem; }
.gi-form-guide .gi-form-more[open] > summary::after { content: "閉じる"; }
.gi-form-guide .gi-form-more > :not(summary) { margin: 0 1em 1em; }

/* 9c. 角丸をそろえる（T14）。テーマの 2〜8px の角丸をテンプレート内だけ 0 に */
html #gi-grant-article.gi-grant-page .gi-form-guide :is(.gi-callout, .gi-form-figure, .gi-form-figure a, .gi-form-figure img, .gi-form-card, .gi-form-more) { border-radius: 0 !important; }  /* テーマの #gi-grant-article.gi-grant-page.gi-redesign :is(.gi-callout …) より強く */
#gi-grant-article .gi-form-guide .gi-form-figure a { border: 0 !important; box-shadow: none !important; }

/* 10. 拡大表示（ライトボックス）。既定は等倍（様式の文字を読める大きさ）で縦横にスクロール。「全体を表示」で画面幅に合わせる（T05） */
.gi-form-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: rgba(15, 27, 61, .94); }
.gi-form-lightbox[hidden] { display: none; }
.gi-form-lightbox__bar { display: flex; flex-wrap: wrap; gap: .5em; justify-content: space-between; align-items: center; padding: .5em .75em; background: #0F1B3D; color: #fff; font-size: .85rem; }
.gi-form-lightbox__cap { flex: 1 1 100%; min-width: 0; }
.gi-form-lightbox__hint { flex: 1 1 auto; color: #D8DEEA; font-size: .8rem; }
.gi-form-lightbox__btn { min-height: 44px; padding: .4em .9em; border: 1px solid #fff; border-radius: 0; background: transparent; color: #fff; font-size: .9rem; cursor: pointer; }
.gi-form-lightbox__stage { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.gi-form-lightbox__stage img { display: block; width: auto; max-width: none; height: auto; margin: 0 auto; background: #fff; }
.gi-form-lightbox.is-fit .gi-form-lightbox__stage img { width: 100%; max-width: 100%; }
@media (min-width: 992px) { .gi-form-lightbox__cap { flex-basis: auto; } .gi-form-lightbox__hint { display: none; } }

/* スマホ */
@media (max-width: 600px) {
  .gi-form-guide .gi-form-card dl { grid-template-columns: 7em 1fr; }
  .gi-form-guide .gi-callout--info { grid-template-columns: 1fr; }
  .gi-form-guide .gi-callout--info .gi-callout__title { justify-content: flex-start; padding: .6em 1em; }
  /* 1 段 4 個まで。足りない段は残りが広がる（空きマスを作らない） */
  #gi-grant-article .gi-form-guide .gi-form-tabs a { flex: 1 1 calc(25% - 1px); min-width: 0; padding: .55em .25em; font-size: .78rem; }
}