/* 株式会社喜多村 製品情報ダウンロード
 *
 * 配色・書体は www.kitamuraltd.jp から採取した値に合わせている。
 *   文字色     #565656（本文で最も多用されている色）
 *   主色       #155536（リンク色。サイト全体のアクセント）
 *   緑帯       #00713b → #0c5231（ヘッダーの帯）
 *   セージ     #77aa92
 *   背景       #f5f5f5
 * 本文16px / 行間1.5、h1は24pxで太字にしない、という本サイトの流儀を踏襲している。
 *
 * 読みやすさと使いやすさは、デジタル庁デザインシステム（DADS）の決まりに合わせる（2026-10-06）。
 *   フォーカスの枠は、黒 4px と黄色 2px の二重の枠（DADS の決まりで、色は変えない）
 *   リンクには下線を付ける（コーポレートサイトは下線なしだが、色だけではまわりの文字と見分けられない）
 *   文字は 14px 以上（本文は 16px）。文字の色は地との差 4.5:1 以上、入力欄の枠は 3:1 以上
 *   必須の欄には「※必須」、入力の例はラベルと欄の間、まちがいは欄の下に「＊」から書く
 * 会社の緑と、ボタンの 4px の角は変えない（DADS も、色と角の形はブランドに合わせてよいとしている）。
 */

:root {
  --green:       #00713b;
  --green-dark:  #0c5231;
  --green-press: #109f5b;  /* ボタンを押した瞬間（コーポレートサイトの .button:active と同じ） */
  --green-link:  #155536;
  --sage:        #77aa92;
  --text:        #565656;
  --text-strong: #333333;
  --bg:          #f5f5f5;
  --card:        #ffffff;
  --border:      #e0e0e0;
  --border-soft: #ededed;
  --muted:       #666666;  /* 補足の文字。白地との差 5.74:1（DADS の基準は 4.5:1 以上。前の #999 は 2.85:1 だった） */
  --danger:      #c0392b;
  --field-border: #666666; /* 入力欄の枠。白地との差 5.74:1（部品の線は 3:1 以上。DADS の入力欄の枠と同じ色） */
  --focus-black:  #000000; /* フォーカスの枠（DADS の決まり。色は変えない） */
  --focus-yellow: #ffd43d;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
          "Hiragino Kaku Gothic ProN", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}

/* リンクには下線を付ける（DADS。下線がないと、まわりの文字と色だけでは見分けられない：差 1.20:1）。
   マウスを乗せたら、下線を太くする（文字の太さや大きさは変えない） */
a {
  color: var(--green-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 3px; }

/* フォーカスの枠（DADS の決まり）：黒 4px と黄色 2px の二重の枠。緑の帯の上でも白地でも見える。色は変えない。
   キーボードで操作したときに出る（入力欄は、マウスで選んだときも出る） */
:focus-visible {
  outline: 4px solid var(--focus-black);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-yellow);
}
/* リンクは、地も黄色にする（DADS）。緑の帯の上の明るい色のリンクも読めるよう、文字は黒にする */
a:focus-visible {
  background-color: var(--focus-yellow);
  color: var(--focus-black);
  border-radius: 4px;
}

/* 描き直したあとに見出しへ移したフォーカス（押したボタンがなくなったとき）は、枠を出さない。見出しは押せないため */
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* 画面には出さず、読み上げだけで伝える文字（新しいタブで開くこと、手順が済んだことなど） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* 新しいタブで開くリンクの印（DADS：リンクの終わりにアイコンを付け、読み上げでは「新しいタブで開きます」と伝える） */
.new-tab-icon { width: 1em; height: 1em; margin-left: 2px; vertical-align: -0.125em; }

/* --- ヘッダー -------------------------------------------------------- */
/* コーポレートサイトと同じく、緑一色の帯に、ロゴと社名の画像を上下ぴったりに、すき間なく並べる。
   画像の地の色は帯と同じ #00713b（--green）なので、継ぎ目が見えない（グラデーションの帯にすると、画像だけが浮いて見える） */
.site-header {
  background: var(--green);
  padding: 0 24px;
}
.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
}
.header-inner img { display: block; height: 95px; width: auto; }
/* ロゴの画像は、上と左右のふちに1ピクセルの明るい線がある。帯とつなげるため、表示のときに隠す（画像そのものは変えない） */
.header-inner img.logo {
  -webkit-clip-path: inset(1.06% 0.68% 0 0.68%);
  clip-path: inset(1.06% 0.68% 0 0.68%);
}
.page-title {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 22px 24px;
}
.page-title-inner { max-width: 1120px; margin: 0 auto; }
/* 見出しの文字は、コーポレートサイトのページの見出し（「会社案内」など）と同じ緑（--green）。リンクの文字は --green-link */
.page-title h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  color: var(--green);
  letter-spacing: .02em;
}
.page-title p {
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--muted);
}

main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 72px; }

/* --- カード共通 ------------------------------------------------------ */
.panel,
.search-box {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 24px 26px;
}
.panel { margin-bottom: 16px; }
.panel h2,
.search-box h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 4px solid var(--green);
}

/* --- 検索 ------------------------------------------------------------ */
.search-box label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-strong);
}
.search-row { display: flex; gap: 8px; }
.search-row input {
  flex: 1;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--field-border);
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
}
/* ボタンは、コーポレートサイトの .button と同じく、角を 4px 丸め、押した瞬間を明るい緑にする（カードや枠は四角のまま） */
.search-row button {
  min-height: 48px;
  padding: 0 26px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  min-width: 96px;
}
.search-row button:hover:not(:disabled) { background: var(--green-dark); }
.search-row button:active:not(:disabled) { background: var(--green-press); }
.search-row button:disabled,
.search-row button[aria-disabled="true"] { opacity: .55; cursor: progress; }

.hint { margin-top: 10px; font-size: 14px; color: var(--muted); }
.hint button {
  background: none;
  border: none;
  color: var(--green-link);
  cursor: pointer;
  padding: 0 3px;
  font-size: 14px;
  font-family: inherit;
  text-decoration: underline;
}

/* --- 結果 ------------------------------------------------------------ */
#result { margin-top: 20px; }

.grade-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: #f2f7f4;
  border: 1px solid #d6e5dc;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.grade-badge {
  background: var(--green-dark);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 5px 14px;
  flex-shrink: 0;
}
.grade-meta     { font-size: 14px; color: var(--green-link); }
.grade-material { flex-basis: 100%; font-size: 14px; color: var(--green-link); }

.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.doc-card {
  border: 1px solid var(--border);
  padding: 14px 16px;
  background: var(--card);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.doc-card:hover { border-color: var(--sage); background: #fafcfb; }
.doc-card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.doc-card .icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: #f2f7f4;
}
/* チェックボックスは 24px（DADS の小さいサイズ。前は 17px）。カード全体を押しても入る */
.doc-card input[type=checkbox] {
  width: 24px; height: 24px;
  accent-color: var(--green);
  margin: 0;
}
.doc-card .name { font-weight: 700; font-size: 16px; color: var(--text-strong); }
.doc-card .desc { font-size: 14px; color: var(--muted); margin-top: 3px; }
.doc-card .version { font-size: 14px; color: var(--green); margin-top: 6px; }

/* お知らせの枠（DADS のノティフィケーションバナー）。アイコンと見出しを付け、色だけで伝えない。
   情報は会社の緑（DADS の「情報」はプライマリーカラー）、エラーは赤 */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--green);
  border-left-width: 6px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.banner-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.banner-title { margin: 2px 0 0; font-weight: 700; color: var(--text-strong); }
.banner-text { margin: 6px 0 0; }
.banner-error { border-color: var(--danger); background: #fdf3f2; }
.banner-error .banner-icon { background: var(--danger); }
.banner-error .banner-title { color: var(--danger); }
.loading { text-align: center; padding: 26px; color: var(--muted); font-size: 14px; }

/* --- 申請フォーム ---------------------------------------------------- */
/* 文字のボタンは、上下に余白をとって押しやすくする（押せる範囲の高さ 40px 余り） */
.select-toggle {
  font-size: 14px;
  color: var(--green-link);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 0;
  margin-bottom: 0;
  font-family: inherit;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.form-grid .full { grid-column: 1 / -1; }
.form-field label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 4px;
}
.form-field input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--field-border);
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
}
/* 入力欄（DADS）：マウスを乗せると枠を黒くし、まちがいのある欄は枠を赤くする（欄の下の「＊」の文でも伝える） */
.search-row input:hover,
.form-field input:hover,
.code-row input:hover { border-color: var(--focus-black); }
.search-row input[aria-invalid="true"],
.form-field input[aria-invalid="true"],
.code-row input[aria-invalid="true"] { border-color: var(--danger); }

/* 必須の印（DADS：「※必須」。地の文と違うと分かるよう全角の米印から始め、赤で示す） */
.req { margin-left: 8px; font-weight: 400; color: var(--danger); }
/* 入力の例や条件（DADS のサポートテキスト）。ラベルと入力欄の間に置く（欄の中の薄い字は使わない） */
.support { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
/* 欄ごとのまちがい（DADS）。欄のすぐ下に、全角の「＊」から、何が違い、どう直すかを書く */
.field-error { margin: 6px 0 0; color: var(--danger); }
.form-errors .banner { margin: 18px 0 0; }

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
}
.consent-row input[type=checkbox] {
  margin: 1px 0 0;
  width: 24px; height: 24px;
  accent-color: var(--green);
  flex-shrink: 0;
}

.primary-btn {
  margin-top: 20px;
  width: 100%;
  padding: 14px 0;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.primary-btn:hover:not(:disabled) { background: var(--green-dark); }
.primary-btn:active:not(:disabled) { background: var(--green-press); }
/* 送っている間は aria-disabled（disabled にすると、押したボタンからフォーカスが外れる） */
.primary-btn:disabled,
.primary-btn[aria-disabled="true"] { opacity: .55; cursor: progress; }


/* --- コード入力 ------------------------------------------------------ */
.code-panel {
  background: var(--card);
  border: 1px solid var(--sage);
  border-top: 3px solid var(--green);
  padding: 24px 26px;
}
.code-panel h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
}
.code-panel p.lead {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--text);
  line-height: 1.8;
}
.code-panel label {
  display: block;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.code-row { display: flex; gap: 8px; align-items: center; }
.code-row input {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid var(--field-border);
  font-size: 22px;
  letter-spacing: .4em;
  text-align: center;
  font-family: inherit;
  color: var(--text-strong);
}
.code-row .primary-btn { margin-top: 0; width: auto; padding: 13px 24px; white-space: nowrap; }
.code-meta { margin-top: 12px; font-size: 14px; color: var(--muted); }
.code-meta .countdown { font-weight: 700; color: var(--green-link); }

/* --- 完了 ------------------------------------------------------------ */
.done-panel {
  background: var(--card);
  border: 1px solid var(--sage);
  border-top: 3px solid var(--green);
  padding: 24px 26px;
}
.done-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
}
/* 済んだことの印（DADS のノティフィケーションバナーの「成功」と同じく、チェックの印を添える） */
.done-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.done-icon svg { width: 18px; height: 18px; }
.done-panel dl { margin: 0; font-size: 16px; }
.done-panel dt {
  font-weight: 700;
  color: var(--text-strong);
  margin-top: 12px;
  font-size: 14px;
}
.done-panel dd { margin: 3px 0 0; color: var(--text); }
.done-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}
.redownload { margin: 14px 0 0; font-size: 16px; }
.back-top { display: block; width: auto; padding: 12px 32px; }

/* --- プライバシーポリシー・利用規約 ------------------------------------ */
.legal { font-size: 16px; line-height: 1.9; }
.legal p { margin: 0 0 12px; }
.legal h2 { margin-top: 30px; }
.legal h3 {
  margin: 18px 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
}
/* （1）・ア・１ などの記号のあとで折り返しても、2行目を本文の頭にそろえる */
.legal-list { list-style: none; margin: 0 0 12px; padding: 0; }
.legal-list li { display: flex; margin-bottom: 4px; }
.legal-mark { flex-shrink: 0; margin-right: .5em; }
.legal-bullets { margin: 0 0 12px; padding-left: 1.6em; }
.legal-bullets li { margin-bottom: 4px; }
.legal-bullets .legal-list { margin: 4px 0 8px; }
.legal p.legal-line { margin-bottom: 2px; }
.legal p.legal-date { margin: 28px 0 0; text-align: right; }
@media (max-width: 700px) {
  .panel.legal { padding: 20px 18px; }
}

/* --- フッター -------------------------------------------------------- */
/* コーポレートサイトと同じく、ヘッダーと同じ緑の一色。
   暗い緑のときより背景が明るいので、小さい文字は薄くしすぎない（白との差を、読みやすい比に保つ） */
.site-footer {
  background: var(--green);
  color: #ffffff;
  padding: 26px 24px 30px;
  margin-top: 40px;
}
.footer-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.footer-notice {
  max-width: 660px;
  margin: 0 auto 14px;
  font-size: 14px;
  line-height: 1.9;
}
.footer-notice a { color: #cfe5d8; text-decoration: underline; }
.footer-copy { font-size: 14px; opacity: .9; }

@media (max-width: 700px) {
  .doc-grid,
  .form-grid { grid-template-columns: 1fr; }
  .search-row { flex-direction: column; }
  .code-row { flex-direction: column; }
  .code-row .primary-btn { width: 100%; }
  .site-header { padding: 0 12px; }
  .header-inner img { height: 60px; }
  .page-title h1 { font-size: 20px; }
}
@media (max-width: 380px) {
  .header-inner img { height: 50px; }
}

/* --- 右のグレード一覧と、開いたグレードのタブ ------------------------------ */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; }
.grade-list {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 18px 16px;
  position: sticky;
  top: 16px;
}
.grade-list h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 4px solid var(--green);
}
/* 一覧はスクロールする枠なので、フォーカスの枠（はみ出す 6px）が切れないよう、内側にその分の余白をとる */
.grade-list ul { list-style: none; margin: -6px; padding: 6px; max-height: 70vh; overflow-y: auto; }
.grade-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  color: var(--green-link);
  text-align: left;
  cursor: pointer;
}
.grade-link:hover { background: #f2f7f4; }
.grade-link.current { background: #f2f7f4; border-left-color: var(--green); font-weight: 700; }
.grade-count { font-size: 14px; color: var(--green); white-space: nowrap; }
.list-status { font-size: 14px; color: var(--muted); padding: 6px 4px; }

.grade-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: -1px; }
.grade-tab-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-bottom: none;
  background: #f7f7f7;
}
.grade-tab-wrap.current { background: var(--card); border-top: 3px solid var(--green); }
.grade-tab {
  min-height: 44px;
  background: none;
  border: none;
  padding: 9px 4px 9px 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
}
.tab-count { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--green); }
/* タブを閉じる × は、押せる範囲を 44px 四方にする（DADS のボタンのターゲットの大きさ） */
.tab-close {
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  padding: 0 10px;
  font: inherit;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
}
.tab-close:hover { color: var(--danger); }
.tab-panel { border-top-color: var(--border); }
.selection-summary { font-size: 14px; color: var(--green-link); margin: 0 0 14px; }
.empty-hint { font-size: 16px; color: var(--muted); padding: 18px 4px; }
.link-btn {
  margin-top: 4px;
  background: none;
  border: none;
  padding: 10px 0;
  font: inherit;
  font-size: 16px;
  color: var(--green-link);
  text-decoration: underline;
  cursor: pointer;
}

/* 確認コードの入力とダウンロードのあとは、右の一覧を出さない（書類を選ぶ画面に戻ると、また出す） */
.layout.no-list { grid-template-columns: minmax(0, 1fr); }
.layout.no-list .grade-list { display: none; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .grade-list { order: -1; position: static; }
  .grade-list ul { display: flex; flex-wrap: wrap; gap: 4px; max-height: 160px; }
  .grade-link { width: auto; border: 1px solid var(--border); padding: 6px 10px; }
  .grade-link.current { border-color: var(--green); }
}

/* --- 手続きの流れ（DADS のステップナビゲーション） ------------------------------ */
/* 1 書類を選ぶ → 2 確認コード → 3 ダウンロード。今の手順は緑の丸、済んだ手順はチェックの印、まだの手順は白い丸。
   色だけで伝えないよう、印を変え、読み上げでは「今の手順」（aria-current）と「済み」を伝える */
.steps {
  display: flex;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  color: var(--text);
}
.step:last-child { flex: 0 0 auto; }
.step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  margin-right: 10px;
  background: var(--field-border);
}
.step-mark {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--field-border);
  background: var(--card);
  color: var(--text-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.step-mark svg { width: 18px; height: 18px; }
.step-label { white-space: nowrap; }
.step.current .step-mark { background: var(--green); border-color: var(--green); color: #fff; }
.step.current .step-label { font-weight: 700; color: var(--text-strong); }
.step.done .step-mark { border-color: var(--green); color: var(--green); }
@media (max-width: 700px) {
  .step { flex: 1; flex-direction: column; gap: 4px; text-align: center; }
  .step:last-child { flex: 1; }
  .step:not(:last-child)::after {
    position: absolute;
    top: 15px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    margin: 0;
  }
  .step-label { font-size: 14px; white-space: normal; }
}