@charset "utf-8";
/* 服の素材相性チェッカー — テキスタイル見本帳のトーン（グレージュ紙 × ディープグリーン × テラコッタ）
   外部フォントは読まない（CSP は self 完結・システムフォントのみ）。 */

:root {
  --paper: #f2eee8;
  --paper-card: #fbf9f6;
  --paper-sunk: #eae4db;
  --line: #d9d0c4;
  --line-strong: #bfb3a3;

  --ink: #1f2320;
  --ink-soft: #55605a;
  /* 補助文字。いちばん暗い下地（--paper-sunk）に載せても AA 4.5:1 を満たす濃さにしてある。
     これより薄くすると 12px の組成表記・見出しラベルが AA を割る（2026-09-06 実測で43件） */
  --ink-faint: #5a655f;

  --green: #1f4a38;
  --green-soft: #2e6a50;
  --green-wash: #e6ede9;

  /* テラコッタは差し色。文字に使う濃度と、面に使う濃度を分ける（コントラスト確保） */
  --terracotta: #c96f4a;
  --terracotta-text: #a0512f;
  --terracotta-wash: #f6e9e2;

  --amber-text: #7a5a12;
  --amber-wash: #f4eddc;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-card:
    0 1px 1px rgba(31, 35, 32, 0.04),
    0 2px 4px rgba(31, 35, 32, 0.04),
    0 8px 20px rgba(31, 35, 32, 0.06);
  --shadow-chip: 0 1px 0 rgba(31, 35, 32, 0.05), 0 1px 3px rgba(31, 35, 32, 0.06);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 見本帳の紙目 */
  background-image:
    repeating-linear-gradient(0deg, rgba(31, 74, 56, 0.025) 0 1px, transparent 1px 4px);
}

.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- ヘッダー */
.site-header {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f7f4ef 0%, var(--paper) 100%);
}
.site-header .wrap { padding-block: 24px 20px; }
.site-title {
  margin: 0;
  font-size: clamp(1.35rem, 4.4vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--green);
  text-wrap: balance;
}
.site-title .mark {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border: 1.5px solid var(--green);
  border-radius: 4px;
  font-size: 0.72em;
  letter-spacing: 0.14em;
  vertical-align: 0.18em;
}
.site-lead {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-wrap: pretty;
}

/* ------------------------------------------------- 追従する判定バー（モバイルのみ） */
.sticky-verdict {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line-strong);
  background: rgba(251, 249, 246, 0.97);
  box-shadow: 0 2px 8px rgba(31, 35, 32, 0.07);
}
.sv-level { font-weight: 700; font-size: 0.98rem; line-height: 1.3; }
.sticky-verdict[data-level="empty"] .sv-level { color: var(--ink-faint); font-weight: 500; }
.sv-jump[disabled] { opacity: 0.4; cursor: not-allowed; }
.sticky-verdict[data-level="low"] .sv-level { color: var(--green); }
.sticky-verdict[data-level="mid"] .sv-level { color: var(--amber-text); }
.sticky-verdict[data-level="high"] .sv-level { color: var(--terracotta-text); }
.sv-jump {
  appearance: none;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--green);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
/* PCでは結果カードが同じ画面に収まるので出さない（クリックを奪わないよう display で消す） */
@media (min-width: 760px) {
  .sticky-verdict { display: none !important; }
}

/* ---------------------------------------------------------------- 層セレクタ */
.picker { margin: 28px 0 0; }
.layer {
  scroll-margin-top: 72px;   /* 追従バーの下に隠れないように */
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.layer:last-child { border-bottom: none; }

.layer-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.layer-name { font-weight: 700; font-size: 1.02rem; color: var(--green); margin: 0; }
.badge {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: var(--paper-card);
}
.badge.required { border-color: var(--terracotta); color: var(--terracotta-text); background: var(--terracotta-wash); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip-group-label {
  width: 100%;
  margin: 6px 0 2px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.chip {
  appearance: none;
  min-height: 44px;                    /* タッチターゲット（AAA 目標値） */
  padding: 8px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-card);
  box-shadow: var(--shadow-chip);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease),
    transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.chip:hover { border-color: var(--green-soft); background: #fff; }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 1px 0 rgba(31, 35, 32, 0.08), 0 3px 10px rgba(31, 74, 56, 0.22);
}
.chip .compo {
  display: block;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--ink-faint);
}
.chip[aria-pressed="true"] .compo { color: rgba(255, 255, 255, 0.82); }
.chip.clear { border-style: dashed; color: var(--ink-soft); box-shadow: none; background: transparent; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 6px;
}

details.optional > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--green);
  font-weight: 600;
}
details.optional > summary::marker { color: var(--green-soft); }

/* ---------------------------------------------------------------- 結果カード */
.result {
  /* 未選択のときも判定後と同じ骨格を描くので、min-height は下限の保険だけ持たせる。
     中身の量で高さが変わるぶんは、すべて利用者の操作の直後に起きる＝CLSには算入されない。 */
  min-height: 430px;
  margin: 26px 0 0;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow-card);
  scroll-margin-top: 72px;
}
/* 未選択の骨格。中身は同じ構造のまま、色だけ控えめにして「まだ結果ではない」ことを示す */
.result[data-state="empty"] .verdict,
.result[data-state="empty"] .reason,
.result[data-state="empty"] .skin-none,
.result[data-state="empty"] .s-mark { color: var(--ink-faint); }
.result[data-state="empty"] .verdict { background: var(--paper-sunk); font-weight: 600; font-size: 1rem; }
.result[data-state="empty"] .result-combo { color: var(--ink-soft); }

.result h2 {
  margin: 0 0 14px;
  font-size: 1.06rem;
  letter-spacing: 0.02em;
  color: var(--green);
}
.result-combo {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.axis { padding: 14px 0; border-top: 1px solid var(--line); }
.axis:first-of-type { border-top: none; padding-top: 0; }
.axis-label {
  margin: 0 0 6px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.verdict[data-level="low"] { background: var(--green-wash); color: var(--green); }
.verdict[data-level="mid"] { background: var(--amber-wash); color: var(--amber-text); }
.verdict[data-level="high"] { background: var(--terracotta-wash); color: var(--terracotta-text); }

/* 文字量で高さが動く3ブロックは、よくある行数ぶんを先に確保しておく */
.reason { margin: 10px 0 0; min-height: 3.5em; text-wrap: pretty; }
.skin-list, .skin-none { min-height: 5.25em; }
.flags:not(:empty) { min-height: 7.5em; }

.season-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 10px;
  padding: 0;
  list-style: none;
}
.season-grid li {
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  text-align: center;
}
.season-grid .s-name { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.season-grid .s-mark {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}
.season-grid li[data-mark="△"] .s-mark,
.season-grid li[data-mark="—"] .s-mark { color: var(--ink-faint); }

.skin-list { margin: 0; padding-left: 1.15em; }
.skin-list li { margin-bottom: 6px; text-wrap: pretty; }
.skin-list .who { font-weight: 600; color: var(--green); }
.skin-none { margin: 0; color: var(--ink-soft); }

.flags { margin: 12px 0 0; padding: 0; list-style: none; }
.flag {
  margin-top: 8px;
  padding: 9px 12px;
  border-left: 3px solid var(--line-strong);
  background: var(--paper-sunk);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.flag[data-kind="disputed"] { border-left-color: var(--terracotta); }

/* ---------------------------------------------------------------- アクション */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.btn {
  appearance: none;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--green);
  background: var(--green);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.btn:hover { background: var(--green-soft); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: transparent; color: var(--green); }
.btn.secondary:hover { background: var(--green-wash); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
/* ボタンの見た目をしたリンク（マップ・guide・404・ツールチップ）は下線を出さない。
   ボタンとして押す対象なので、本文中のリンクと同じ下線が付くと別物に見える。 */
a.btn { text-decoration: none; }

.toast {
  margin: 10px 0 0;
  min-height: 1.5em;                    /* トーストの出入りで高さを動かさない */
  font-size: 0.86rem;
  color: var(--green-soft);
}

.history { margin: 22px 0 0; }
.history h2 { margin: 0 0 8px; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 600; }

/* 判定の根拠に添える出典（結果カードの中・設計 §0-5「根拠1行＋出典リンク」） */
.reason-sources { margin: 6px 0 0; font-size: 0.82rem; color: var(--ink-faint); text-wrap: pretty; }
.reason-sources a { color: var(--green-soft); }
.reason-sources .sep { margin: 0 4px; }
.history ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.history .chip { font-size: 0.86rem; min-height: 40px; }

/* ---------------------------------------------------------------- 読み物 */
.section { margin: 44px 0 0; }
.section > h2 {
  margin: 0 0 6px;
  font-size: 1.12rem;
  color: var(--green);
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.section > .lead { margin: 0 0 14px; color: var(--ink-soft); font-size: 0.94rem; text-wrap: pretty; }

details.topic, details.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-card);
  margin-bottom: 10px;
  overflow: hidden;
}
details.topic > summary, details.faq-item > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--green);
  text-wrap: pretty;
}
details.topic > summary:hover, details.faq-item > summary:hover { background: var(--green-wash); }
details.topic .body, details.faq-item .body {
  padding: 0 16px 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  text-wrap: pretty;
}
details.topic .body > p:first-child, details.faq-item .body > p:first-child { margin-top: 0; }

.sources { margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.sources li { padding: 8px 0; border-bottom: 1px dotted var(--line); text-wrap: pretty; }
.sources li:last-child { border-bottom: none; }
.sources .verified {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--green-wash);
  color: var(--green);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
a { color: var(--green-soft); text-underline-offset: 2px; }
a:hover { color: var(--green); }

.numeric, .moisture { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- フッター */
.site-footer {
  margin-top: 52px;
  padding: 22px 0 34px;
  border-top: 1px solid var(--line);
  background: var(--paper-sunk);
  color: var(--ink-soft);
  font-size: 0.84rem;
}
.site-footer p { margin: 0 0 6px; text-wrap: pretty; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- レスポンシブ */
@media (min-width: 760px) {
  .result { min-height: 400px; }
  .picker { display: block; }
}

@media (max-width: 759px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 16px; }
  .result { min-height: 470px; padding: 18px 16px 14px; }
  .season-grid { gap: 6px; }
  .actions .btn { flex: 1 1 46%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ================================================================ 素材ページ（/sozai/<slug>/）
   build_sozai.py が生成するページ用。ツール本体と同じ紙のトーンを共有する。
   表は必ず .table-scroll でくるむ（横幅の広い表が本文ごと横スクロールさせないため）。 */

.crumbs { margin: 0 0 10px; font-size: 0.82rem; color: var(--ink-faint); }
.crumbs a { color: var(--green-soft); }
.crumbs span[aria-hidden] { margin: 0 4px; }

.verified-badge {
  display: inline-block;
  margin: 12px 0 0;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-card);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.facts, .tier, .compat {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.facts th, .facts td, .tier th, .tier td, .compat th, .compat td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  text-wrap: pretty;
}
.facts thead th, .tier thead th, .compat thead th {
  background: var(--paper-sunk);
  color: var(--green);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.facts tbody tr:last-child th, .facts tbody tr:last-child td,
.tier tbody tr:last-child th, .tier tbody tr:last-child td,
.compat tbody tr:last-child th, .compat tbody tr:last-child td { border-bottom: none; }
/* 区分名は長い（例：アメリカン・ピマ（Gossypium barbadense））。nowrap にすると
   表が親幅を超え、右端の列が画面の外へ押し出される（2026-09-06 実測）。折り返させる。 */
.facts tbody th, .tier tbody th, .compat tbody th { color: var(--green); }
.compat tbody th { white-space: nowrap; }
.facts tbody th { width: 7.5em; }
.facts tbody td:nth-of-type(1) { min-width: 12em; }
.tier tbody th { width: 15em; }
.facts .src { font-size: 0.8rem; color: var(--ink-faint); }
.facts .src a { color: var(--green-soft); }
.tier td.numeric { font-variant-numeric: tabular-nums; }

.status {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--green-wash);
  color: var(--green);
  font-size: 0.72rem;
  white-space: nowrap;
}
.status[data-status="諸説あり"] { background: var(--terracotta-wash); color: var(--terracotta-text); }
.status[data-status="傾向"] { background: var(--amber-wash); color: var(--amber-text); }

.season-inline { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.season-inline .s-cell { display: inline-flex; align-items: baseline; gap: 4px; }
.season-inline .s-name { font-size: 0.8rem; color: var(--ink-soft); }
.season-inline .s-mark { font-weight: 700; color: var(--green); }

.fact-notes { margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--ink-soft); }
.fact-notes li {
  margin-bottom: 8px;
  padding-left: 12px;
  border-left: 3px solid var(--line-strong);
  text-wrap: pretty;
}
.fact-notes .who { display: block; font-weight: 600; color: var(--green); font-size: 0.8rem; }

.article h2 { text-wrap: balance; }
.article h3 {
  margin: 26px 0 8px;
  font-size: 1.02rem;
  color: var(--green);
  text-wrap: balance;
}
.article p { margin: 0 0 16px; text-wrap: pretty; }
.article .art-list { margin: 0 0 16px; padding-left: 1.15em; }
.article .art-list li { margin-bottom: 6px; text-wrap: pretty; }

.tier-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--line-strong);
  background: var(--paper-card);
  color: var(--ink-soft);
  font-size: 0.86rem;
  text-wrap: pretty;
}
.tier-block h3 { margin: 22px 0 8px; font-size: 0.98rem; color: var(--green); }
.tier-block .sources { margin-top: 14px; }

.compat .lv {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.86rem;
}
.compat .lv[data-level="low"] { background: var(--green-wash); color: var(--green); }
.compat .lv[data-level="mid"] { background: var(--amber-wash); color: var(--amber-text); }
.compat .lv[data-level="high"] { background: var(--terracotta-wash); color: var(--terracotta-text); }
.compat .mini-flag { display: block; margin-top: 4px; font-size: 0.76rem; color: var(--ink-faint); }
.compat tbody th a { color: var(--green-soft); }

.cta {
  margin: 40px 0 0;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow-card);
}
.cta-lead { margin: 0 0 8px; font-weight: 700; color: var(--green); font-size: 1.02rem; text-wrap: balance; }
.cta p { margin: 0 0 12px; text-wrap: pretty; }
.cta p:last-child { margin-bottom: 0; }
.cta .btn { text-decoration: none; }

/* 素材ページの回遊チップはリンク。ツール側のチップ（button）と見た目をそろえる。 */
a.chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
a.chip:hover { border-color: var(--green-soft); background: #fff; color: var(--ink); }

@media (max-width: 759px) {
  .facts, .tier, .compat { min-width: 420px; font-size: 0.88rem; }
  .facts tbody th { width: 6em; }
  .facts tbody td:nth-of-type(1) { min-width: 9em; }
  .tier tbody th { width: 11em; }
}

/* 判定結果から素材ページへ送る1行（設計 §0-7 の回遊）。出典行と同じ見た目にそろえる。 */
.detail-links { margin: 6px 0 0; font-size: 0.82rem; color: var(--ink-faint); text-wrap: pretty; }
.detail-links a { color: var(--green-soft); }
.detail-links .sep { margin: 0 4px; }

/* ================================================================ S3 で足した分
   マップ／共通フッター／読みものカード／お問い合わせフォーム
   ================================================================ */

/* ---------------------------------------------------------------- 共通フッター */
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 10px; }
.footer-nav a { color: var(--green); }
.site-footer .copyright { margin: 0 0 10px; }
/* 問い合わせは目立たない位置に1本だけ（独立管理ポリシー §3） */
.footer-contact { margin: 0; font-size: 0.78rem; }
.footer-contact a { color: var(--ink-faint); }
.footer-contact a:hover { color: var(--green); }

/* ---------------------------------------------------------------- 読みものカード */
.link-cards { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.link-cards li {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-card);
  box-shadow: var(--shadow-chip);
}
.link-cards a { display: block; font-weight: 700; color: var(--green); text-wrap: balance; }
.link-cards span {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.nav-map { margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- 素材ポジショニングマップ
   色は dataviz skill の手順で決めた3段階（diverging）。値の根拠は build_map.py の冒頭に実測値つきで残してある。
   中央のグレーは紙地とのコントラストが 2.22 で 3:1 に届かないので、
   **色だけに頼らない**：形（▲●▼）・全点の直接ラベル・同ページの表・濃い輪郭線で読めるようにしている。 */
:root {
  --mk-plus: #b0552b;
  --mk-neutral: #a6a199;
  --mk-minus: #2e6a50;
  --mk-edge: #3a4038;
}

/* 図と吹き出しをまとめる箱。吹き出しの位置の基準になる（.map-tip は absolute）。
   吹き出しを図の外の流れに置くと、点から数百px下に出て画面外になり、
   そこへマウスを動かす途中で消える＝中のリンクを押せない（2026-09-06 実測で修正）。 */
.map-block { position: relative; }

.map-frame {
  margin: 0 0 16px;
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* 狭い画面では図を縮めずに横スクロールさせる（潰すと名前が重なって読めなくなる） */
.map-svg { display: block; width: 100%; min-width: 720px; height: auto; }

.map-svg .grid { stroke: var(--line); stroke-width: 1; }
.map-svg .axis { stroke: var(--line-strong); stroke-width: 1; }
.map-svg .tick { stroke: var(--line-strong); stroke-width: 1; }
.map-svg .lane-rule { stroke: var(--line); stroke-width: 1; }
.map-svg .lane-band { fill: var(--paper-sunk); opacity: 0.5; }
.map-svg .lane-label {
  fill: var(--green);
  font: 700 13px "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
}
.map-svg .lane-note {
  fill: var(--ink-faint);
  font: 400 11.5px "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
}
.map-svg .tick-label {
  fill: var(--ink-soft);
  text-anchor: middle;
  font: 400 12px "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.map-svg .axis-title {
  fill: var(--ink-soft);
  font: 400 12px "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
}
.map-svg .pt-label {
  fill: var(--ink);
  font: 500 13px "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
}

/* 当たり判定だけの円。見た目には出さないが、指でも押せる大きさを確保する */
.map-svg .hit { fill: transparent; }
.map-svg .mk { stroke: var(--mk-edge); stroke-width: 1.5; }
.map-svg .mk-plus { fill: var(--mk-plus); }
.map-svg .mk-neutral { fill: var(--mk-neutral); }
.map-svg .mk-minus { fill: var(--mk-minus); }

.map-svg .map-pt { cursor: pointer; }
.map-svg .map-pt:hover .mk,
.map-svg .map-pt:focus-visible .mk { stroke-width: 3; }
.map-svg .map-pt:hover .pt-label,
.map-svg .map-pt:focus-visible .pt-label { fill: var(--green); font-weight: 700; }
.map-svg .map-pt:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.map-legend li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.88rem; }
.map-legend .lg-mark { flex: 0 0 auto; margin-top: 2px; }
.map-legend .lg-mk { stroke: var(--mk-edge); stroke-width: 1.5; }
.map-legend .mk-plus { fill: var(--mk-plus); }
.map-legend .mk-neutral { fill: var(--mk-neutral); }
.map-legend .mk-minus { fill: var(--mk-minus); }
.map-legend .lg-body { color: var(--ink-soft); }
.map-legend .lg-body strong { display: block; color: var(--ink); }

/* 点のそばに浮かせる。位置は map.js が .map-block の中で決める（左右は必ず箱の内側へ収める）。 */
.map-tip {
  position: absolute;
  z-index: 6;
  width: min(340px, 100%);
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-card);
  box-shadow: 0 6px 20px rgba(31, 35, 32, 0.16);
}
.map-tip .tip-close {
  position: absolute;
  top: 4px;
  right: 4px;
  /* 44px＝WCAG 2.5.5(AAA) の目標値。図の上に浮くので、押し間違いが起きない大きさにする */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-faint);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.map-tip .tip-close:hover { color: var(--ink); background: var(--paper); }
.map-tip .tip-name { padding-right: 40px; }
.map-tip .tip-name { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; }
.map-tip .tip-name a { color: var(--green); }
.map-tip .tip-cat { margin-left: 10px; font-size: 0.78rem; font-weight: 500; color: var(--ink-faint); }
.map-tip .tip-value { margin: 0 0 4px; font-size: 0.9rem; }
.map-tip .tip-key {
  display: inline-block;
  min-width: 7em;
  color: var(--ink-faint);
  font-size: 0.82rem;
}
.map-tip .tip-src { margin: 8px 0 0; font-size: 0.8rem; color: var(--ink-faint); }
.map-tip .tip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.map-tip .tip-actions .btn { text-decoration: none; }
.map-tip .tip-note { margin: 0; align-self: center; font-size: 0.85rem; color: var(--ink-soft); }

.mapdata { width: 100%; }
.mapdata tbody th { white-space: nowrap; }
.mapdata .muted { color: var(--ink-faint); }

/* ---------------------------------------------------------------- お問い合わせフォーム */
.contact-form { max-width: 620px; }
.contact-form label {
  display: block;
  margin: 18px 0 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--green);
}
.contact-form select,
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-card);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}
.contact-form textarea { min-height: 170px; resize: vertical; line-height: 1.7; }
.contact-form :is(select, input, textarea):focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 1px;
}
.turnstile-slot { margin: 18px 0 0; min-height: 68px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.form-actions .btn { text-decoration: none; }
.form-status:empty { display: none; }
.form-status {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--line-strong);
  background: var(--paper-card);
  font-size: 0.92rem;
  text-wrap: pretty;
}
.form-status[data-kind="ok"] { border-left-color: var(--green); color: var(--green); background: var(--green-wash); }
.form-status[data-kind="err"] { border-left-color: var(--terracotta); color: var(--terracotta-text); background: var(--terracotta-wash); }

@media (max-width: 759px) {
  .map-tip .tip-key { min-width: 6em; }
  .mapdata { min-width: 480px; }

  /* 狭い画面では図を横スクロールさせている＝点が画面外にあることがあるので、
     点のそばではなく画面下に固定して出す（絶対配置のままだと吹き出しごと画面外に出る）。 */
  .map-tip {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 62vh;
    overflow-y: auto;
    z-index: 40;
  }
}