/*
 * 用語集ページ
 *
 * ■ 見た目の考え方
 *   協会サイトの既存ページ（qualification / news）と同じ色・同じ間の取り方に揃えます。
 *   このページのために新しい色や形は作りません。
 *
 * ■ 読み手
 *   車の持ち主が「スモークフィルムって何だ」と調べて来ます。
 *   ですので、1つの言葉に対して答えが1行目で終わるようにします。
 *   読み進めなくても分かる、が目標です。
 */

.gl-hero { padding: 44px 0 28px; }
.gl-hero h1 {
  font-family: "Noto Serif JP", serif;
  font-size: 28px;
  color: var(--navy-900, #1b3a6b);
  margin: 6px 0 14px;
  line-height: 1.5;
}
.gl-lead { font-size: 16px; line-height: 2; margin: 0 0 12px; max-width: 46em; }
.gl-note { font-size: 12px; color: var(--ink-500, #5b6b7c); margin: 0; }

.gl-sec { padding: 8px 0 40px; }
.gl-sec h2 {
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  color: var(--navy-900, #1b3a6b);
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--navy-900, #1b3a6b);
}

/* ── 言葉の意味 ─────────────────────────────────── */
.gl-list { margin: 0; }
.gl-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--line-200, #d7dfe7);
}
.gl-item:last-child { border-bottom: 0; }
.gl-item dt {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-900, #1b3a6b);
  margin: 0 0 8px;
  line-height: 1.6;
}
.gl-alt {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-500, #5b6b7c);
  margin-top: 3px;
}
.gl-item dd { margin: 0; }
/* 1行目の定義。ここだけ読めば分かる、が目標なので少し大きくします */
.gl-def { font-size: 15.5px; line-height: 1.95; margin: 0; }
.gl-more {
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-700, #3f5266);
  margin: 10px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--line-200, #d7dfe7);
}
.gl-more strong { color: var(--navy-900, #1b3a6b); }

/* ── 主なメーカー ───────────────────────────────── */
.gl-sec--makers .sec-copy { font-size: 14px; line-height: 2; margin: 0 0 18px; max-width: 46em; }
.gl-makers {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.gl-makers a {
  display: block; padding: 16px 18px;
  border: 1px solid var(--line-200, #d7dfe7);
  border-radius: 6px; background: #fff;
  text-decoration: none; color: inherit; transition: .15s;
}
.gl-makers a:hover { border-color: var(--navy-900, #1b3a6b); background: var(--sky-100, #eef4fa); }
.gl-makers strong { display: block; font-size: 15px; color: var(--navy-900, #1b3a6b); margin-bottom: 4px; }
.gl-makers span { display: block; font-size: 12.5px; color: var(--ink-500, #5b6b7c); line-height: 1.8; }
.gl-brand { margin-top: 4px; color: var(--navy-900, #1b3a6b) !important; font-weight: 700; }

/* ── お探しの内容から ───────────────────────────── */
.gl-next {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.gl-next a {
  display: block; padding: 16px 18px;
  border: 1px solid var(--line-200, #d7dfe7);
  border-radius: 6px; background: #fff;
  text-decoration: none; color: inherit; transition: .15s;
}
.gl-next a:hover { border-color: var(--navy-900, #1b3a6b); background: var(--sky-100, #eef4fa); }
.gl-next strong { display: block; font-size: 14.5px; color: var(--navy-900, #1b3a6b); margin-bottom: 3px; }
.gl-next span { display: block; font-size: 12.5px; color: var(--ink-500, #5b6b7c); line-height: 1.8; }

@media (max-width: 600px) {
  .gl-hero { padding: 28px 0 20px; }
  .gl-hero h1 { font-size: 22px; }
  .gl-lead { font-size: 15px; }
  .gl-item dt { font-size: 16px; }
}

/* 出どころの注記。協会サイトでは、載せたことの根拠を必ず示します。 */
.gl-src { font-size: 12px; color: var(--ink-500, #5b6b7c); margin: -8px 0 18px; }