:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --ink: #1f2733;
  --muted: #5b6573;
  --line: #dfe3e9;
  --brand: #1f5fa6;
  --brand-dark: #174a82;
  --warn-bg: #fff7e6;
  --warn-line: #f0c869;
  --ok: #1c7c4a;
  --ng: #b3261e;
  --review: #b06a00;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
}
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }
.site-header { background: var(--brand); color: #fff; }
.site-header .wrap { padding-top: 14px; padding-bottom: 14px; }
.logo { font-weight: 700; font-size: 17px; }
.content { padding-top: 20px; padding-bottom: 40px; }
.site-footer { border-top: 1px solid var(--line); background: #fff; padding: 16px 0; margin-top: 40px; }
.small { font-size: 13px; color: var(--muted); margin: 0; }

h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 24px 0 12px; }
h3 { font-size: 16px; margin: 0 0 10px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 18px;
}

/* ステップ表示 */
.steps { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; }
.step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #e3e7ee; color: var(--muted); font-weight: 700;
}
.step.current .step-num { background: var(--brand); color: #fff; }
.step.done .step-num { background: var(--ok); color: #fff; }
.step.current .step-name { color: var(--ink); font-weight: 700; }
.step-name { display: none; }
@media (min-width: 560px) { .step-name { display: inline; } }

/* 注意文言 */
.notice-box {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.notice-box ul { margin: 8px 0 0; padding-left: 20px; }
.notice-box li { margin-bottom: 6px; }

.clause {
  background: #f8f9fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  white-space: pre-wrap;
  font-size: 14px;
}

/* フォーム */
label.field { display: block; margin-bottom: 16px; }
label.field .lbl { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
label.field .req { color: var(--ng); font-size: 12px; margin-left: 4px; }
input[type=text], input[type=tel], input[type=email], input[type=number],
input[type=password], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 16px; background: #fff;
}
textarea { min-height: 90px; resize: vertical; }
input[type=file] { width: 100%; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: 14px; }
.check input { margin-top: 4px; }

/* ボタン */
.btn {
  display: inline-block; padding: 13px 22px; border-radius: 8px;
  background: var(--brand); color: #fff; border: none; font-size: 16px;
  font-weight: 700; cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { background: var(--brand-dark); }
.btn:disabled { background: #aab3c0; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.btn.block { display: block; width: 100%; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.btn-row .btn { flex: 1; }

/* メッセージ */
.msg { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.msg.ok { background: #e7f5ec; border: 1px solid #9ed3b3; color: var(--ok); }
.msg.error { background: #fde8e7; border: 1px solid #eaa9a5; color: var(--ng); }
.msg.info { background: #e9f1fa; border: 1px solid #a9c7e8; }

/* 選択肢カード */
.option { display: block; border: 2px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 14px; cursor: pointer; }
.option:hover { border-color: var(--brand); }
.option input { margin-right: 8px; }
.option .opt-title { font-weight: 700; font-size: 16px; }
.option .opt-desc { font-size: 14px; color: var(--muted); margin-top: 6px; }
.option.selected { border-color: var(--brand); background: #f3f8fd; }

/* データ表示テーブル */
.kv { width: 100%; border-collapse: collapse; }
.kv th, .kv td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
.kv th { width: 38%; color: var(--muted); font-weight: 600; }

/* 申請番号 */
.app-no { font-size: 24px; font-weight: 800; letter-spacing: 1px; color: var(--brand); background: #f3f8fd; border: 1px dashed var(--brand); border-radius: 8px; padding: 14px; text-align: center; margin: 16px 0; }

.errors { background: #fde8e7; border: 1px solid #eaa9a5; color: var(--ng); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.errors ul { margin: 0; padding-left: 18px; }

/* ===== 管理画面 ===== */
body.admin { background: #eef0f3; }
.admin-header { background: var(--brand-dark); color: #fff; }
.admin-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; max-width: 1200px; }
.admin-nav { display: flex; gap: 4px; flex-wrap: wrap; background: var(--brand); }
.admin-nav .wrap { display: flex; gap: 4px; flex-wrap: wrap; max-width: 1200px; padding: 0 16px; }
.admin-nav a { color: #dbe7f5; padding: 11px 14px; text-decoration: none; font-size: 14px; }
.admin-nav a:hover, .admin-nav a.active { background: var(--brand-dark); color: #fff; }
.admin-main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; }
.admin-main .wrap { max-width: 1200px; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.stat .num { font-size: 28px; font-weight: 800; color: var(--brand-dark); }
.stat .lbl { font-size: 13px; color: var(--muted); }

table.data { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 13px; }
table.data th, table.data td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.data th { background: #f3f5f8; color: var(--muted); font-weight: 600; }
table.data tr:hover td { background: #f9fbfd; }
.table-scroll { overflow-x: auto; }

/* 数値の列：右寄せ＋等幅数字で、桁が縦にそろうようにする */
table.data th.num, table.data td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 長い項目（ジャンル・位置など）：列幅を決めて、あふれは「…」で省略。
   全文はマウスを乗せると表示されます（title属性）。 */
table.data td.trunc > span {
  display: block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 操作列のボタン・選択欄が縦にそろうように */
table.data td form { align-items: center; }

/* マッチング一覧：譲渡希望ごとのまとめ行
   同じ売り手の情報が行ごとに繰り返されるのを避け、
   見出し行に1回だけ出して、その下に買い手候補を並べます。 */
table.data tr.grp td {
  background: #eaf0f7;
  border-top: 2px solid var(--brand);
  padding: 9px 10px;
  white-space: normal;
}
table.data tr.grp .no { font-weight: 700; }
table.data tr.grp .sep { color: var(--muted); margin: 0 7px; }
table.data tr:hover td.sub, table.data tr.grp:hover td { background: inherit; }
table.data td.sub { padding-left: 24px; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.ok { background: #e7f5ec; color: var(--ok); }
.badge.ng { background: #fde8e7; color: var(--ng); }
.badge.review { background: #fff3da; color: var(--review); }
.badge.pending { background: #eceff3; color: var(--muted); }
.badge.info { background: #e9f1fa; color: var(--brand-dark); }

.filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.filterbar label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.filterbar input, .filterbar select { padding: 8px 10px; font-size: 14px; }

.login-box { max-width: 380px; margin: 60px auto; }
a.link { color: var(--brand); }
.cert-img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ============================================================
   読みやすさ・操作しやすさの改善（高齢・非IT層への配慮）
   後から追記しているため、上の指定より優先されます
   ============================================================ */
body { font-size: 18px; line-height: 1.85; }
h1 { font-size: 26px; line-height: 1.5; margin-bottom: 20px; }
h2 { font-size: 21px; }
.small { font-size: 15px; line-height: 1.7; }

/* 入力欄：大きく・押しやすく */
label.field .lbl { font-size: 17px; margin-bottom: 8px; }
input[type=text], input[type=tel], input[type=email], input[type=number],
input[type=password], select, textarea {
  font-size: 18px;
  padding: 14px 12px;
  border-width: 2px;
}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus,
input[type=number]:focus, select:focus, textarea:focus {
  outline: 3px solid #9CC3E8;
  border-color: #1F5FA6;
}
input[type=file] { font-size: 16px; padding: 10px 0; }

/* 任意ラベル */
label.field .opt {
  color: #5B6573; font-size: 13px; margin-left: 6px;
  background: #EFF2F5; border-radius: 10px; padding: 2px 8px; font-weight: 500;
}

/* ボタン：大きく・押し間違えにくく */
.btn {
  font-size: 19px;
  padding: 16px 20px;
  border-radius: 10px;
  font-weight: 700;
}
.btn.block { width: 100%; display: block; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* チェックボックス：タップしやすく */
.check { font-size: 17px; gap: 12px; align-items: flex-start; }
.check input[type=checkbox] { width: 22px; height: 22px; }

/* メッセージ：目立たせる */
.msg { font-size: 18px; padding: 16px; border-radius: 10px; line-height: 1.8; }
.errors { font-size: 17px; line-height: 1.8; }
.errors li { margin-bottom: 6px; }

/* 進捗ステップ：スマホでも読める大きさ */
.step { font-size: 14px; }
.step-name { font-size: 14px; }

/* スマートフォン最適化 */
@media (max-width: 640px) {
  body { font-size: 18px; }
  h1 { font-size: 23px; }
  .wrap { padding-left: 14px; padding-right: 14px; }
  .btn { width: 100%; font-size: 19px; padding: 17px 16px; }
  .btn-row { flex-direction: column; }
  .step-name { display: none; }   /* 番号のみ表示して横スクロールを防ぐ */
  .help-bar { font-size: 16px; }
}

/* ============================================================
   トップページ（ヒーロー・選択肢・流れ）
   見出しのみ明朝体／本文はゴシック体で可読性を確保
   ============================================================ */
:root {
  --ink:   #16324F;
  --paper: #F7F9FB;
  --rule:  #DDE5EC;
}

/* --- ヒーロー --- */
.hero {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 30px 22px 18px;
  margin: 6px 0 26px;
  text-align: center;
}
.hero-eyebrow {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: .16em;
  color: #5B739A;
}
.hero-title {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: 34px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: .02em;
}
.hero-lead {
  font-size: 18px;
  line-height: 1.8;
  color: #33475F;
  margin: 0 0 6px;
}
.slot-figure { margin: 6px 0 0; }
.slot-figure svg { width: 100%; height: auto; max-width: 640px; display: block; margin: 0 auto; }

/* --- セクション見出し --- */
.section-h {
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 6px;
  padding-left: 12px;
  border-left: 5px solid var(--brand);
  line-height: 1.5;
}
.section-note { font-size: 16px; color: #4A5D73; margin: 0 0 16px; }

.choices, .flow, .about { margin: 0 0 26px; }

/* --- 3つの選択肢（順序を持たないため番号は付けない） --- */
/* 収益の仕組みページへのバナー（トップの選択肢セクション内）
   高齢の方が見る前提で、文字は大きめ・余白は広めにしています。 */
.scheme-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 760px;
  margin: 0 auto 20px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #E24A62 0%, #C2185B 100%);
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 2px 10px rgba(194, 24, 91, .22);
  transition: transform .12s ease, box-shadow .12s ease;
}
.scheme-banner .sb-label {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.4;
}
.scheme-banner .sb-label::after { content: " \203A"; font-weight: 700; }
.scheme-banner .sb-sub { font-size: 14px; opacity: .92; }
.scheme-banner:hover, .scheme-banner:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(194, 24, 91, .30);
  color: #fff;
}
.scheme-banner:focus-visible { outline: 3px solid #7a0f38; outline-offset: 2px; }
@media (max-width: 640px) {
  .scheme-banner { padding: 16px 18px; }
  .scheme-banner .sb-label { font-size: 19px; }
}

/* 選択肢は2つ。左右均等に並べ、中央に寄せる。
   ※ 選択肢を増減する場合は、この列数も合わせて変更してください。
      3列のままだと2枚が左に寄り、右に空白が残ります。 */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.choice-card {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  padding: 20px 16px;
  text-align: center;
}
.choice-icon { display: block; margin: 0 auto 12px; width: 48px; height: 48px; }
.choice-icon svg { width: 48px; height: 48px; }
.choice-card h3 { font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.choice-card p { font-size: 15px; line-height: 1.7; color: #4A5D73; margin: 0; }

/* --- 手続きの流れ（実際に順序があるため番号を付ける） --- */
.flow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow-list li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; }
.flow-num {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.flow-text { font-size: 17px; color: var(--ink); }
.flow-time { font-size: 15px; color: #4A5D73; margin: 12px 0 0; text-align: right; }

/* --- 開始ボタンまわり --- */
.start-form { margin-top: 22px; }
.btn-start { font-size: 21px; padding: 20px 16px; }
.start-help { text-align: center; margin: 14px 0 0; font-size: 16px; line-height: 1.8; color: #33475F; }
.start-help .tel { font-size: 22px; color: #12457A; letter-spacing: .02em; }
.sub-links { text-align: center; margin-top: 20px; }
.sub-links p { margin: 6px 0; }

.sp-only { display: none; }

@media (max-width: 640px) {
  .hero { padding: 24px 16px 14px; }
  .hero-title { font-size: 27px; }
  .hero-lead { font-size: 17px; }
  .choice-grid { grid-template-columns: 1fr; }
  .section-h { font-size: 19px; }
  .sp-only { display: inline; }
}

/* ============================================================
   選択肢の詳細説明ページ（option.php）
   「確定」と「予定」を視覚的に明確に分ける
   ============================================================ */
.option-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.option-tab {
  flex: 1 1 auto; text-align: center; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 10px 14px; font-size: 15px; color: #33475F; background: #fff;
}
.option-tab.current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }

.option-title { font-size: 26px; color: var(--ink); margin: 0 0 8px; }
.option-lead { font-size: 18px; color: #33475F; margin: 0 0 22px; }

.option-block { border-radius: 12px; padding: 20px 18px; margin: 0 0 18px; border: 1px solid var(--rule); background: #fff; }
.option-block h2 { font-size: 19px; color: var(--ink); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.option-block ul { margin: 0; padding-left: 22px; }
.option-block li { font-size: 17px; line-height: 1.85; margin-bottom: 10px; }

.blk-mark {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 6px; background: #E7F0F8; color: #12457A;
}
.blk-mark.plan { background: #FFF3DC; color: #8A6100; }

.option-block.confirmed { border-left: 5px solid var(--brand); }
.option-block.planned  { border-left: 5px solid #E0A93B; background: #FFFDF7; }

.planned-note {
  margin: 14px 0 0; padding: 12px 14px;
  background: #FFF7E6; border: 1px solid #F0C869; border-radius: 8px;
  font-size: 15px; line-height: 1.8; color: #6B5310;
}

.option-foot { margin-top: 24px; text-align: center; }
.option-foot .tel { font-size: 20px; color: #12457A; }

/* トップの選択肢カードから詳細へ */
.choice-more { display: inline-block; margin-top: 12px; font-size: 15px; }

@media (max-width: 640px) {
  .option-tab { flex: 1 1 100%; }
  .option-title { font-size: 22px; }
  .option-block li { font-size: 16px; }
}

/* ============================================================
   契約条項の「甲」「乙」の説明（clause.php）
   ============================================================ */
.party-note {
  background: #EAF3FB;
  border: 1px solid #C9DDF0;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 18px;
}
.party-note-h { margin: 0 0 10px; font-weight: 700; color: #12457A; font-size: 17px; }
.party-list { list-style: none; margin: 0 0 8px; padding: 0; }
.party-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.party-key {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px;
  background: #fff; border: 2px solid #1F5FA6; color: #12457A;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700;
}
.party-val { font-size: 17px; color: #16324F; }
.party-note .small { margin: 0; color: #4A5D73; }

/* ============================================================
   選択肢セクションの最適化（3つを一画面で見渡せるように）
   ※ 上の定義より後に置くことで優先されます
   ============================================================ */

/* アイコンが巨大化しないよう明示的に制限 */
.choice-card .choice-icon { display: block; width: 40px; height: 40px; flex: 0 0 40px; }
.choice-card .choice-icon svg { width: 40px !important; height: 40px !important; display: block; }

/* ヒーローを引き締めて、選択肢を早く見せる */
.hero { padding: 22px 20px 14px; margin-bottom: 20px; }
.hero-title { font-size: 30px; margin-bottom: 10px; }
.hero-lead { font-size: 17px; margin-bottom: 2px; }
.slot-figure svg { max-width: 520px; }

/* PC: 3列。高さを揃えて一望できるように */
.choice-grid { gap: 12px; align-items: stretch; }
.choice-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 14px 16px;
}
.choice-card .choice-icon { margin: 0 auto 10px; }
.choice-card h3 { font-size: 17px; margin: 0 0 6px; }
.choice-card p { font-size: 14px; line-height: 1.6; margin: 0 0 auto; }
.choice-more { margin-top: 10px; font-size: 14px; }

.choices { margin-bottom: 22px; }
.section-note { margin-bottom: 12px; }

/* スマホ: 横並びの行にして、3つとも一画面に収める */
@media (max-width: 640px) {
  .hero { padding: 18px 14px 10px; }
  .hero-title { font-size: 24px; }
  .hero-lead { font-size: 16px; }

  .choice-grid { grid-template-columns: 1fr; gap: 10px; }
  .choice-card {
    flex-direction: row; align-items: center; text-align: left;
    padding: 14px 14px; gap: 14px;
  }
  .choice-card .choice-icon { margin: 0; }
  .choice-body { flex: 1 1 auto; min-width: 0; }
  .choice-card h3 { font-size: 17px; margin: 0 0 4px; }
  .choice-card p { font-size: 14px; line-height: 1.55; margin: 0; }
  .choice-more { margin-top: 6px; font-size: 14px; }
}

/* ============================================================
   スマホ: 3つの選択肢すべてを最初の1画面に収める
   ============================================================ */
@media (max-width: 640px) {
  /* 電話バーを1行に圧縮 */
  .help-bar { padding: 7px 10px !important; font-size: 14px !important; line-height: 1.5; }
  .help-bar strong { font-size: 17px !important; }
  .help-bar .small { display: none; }

  /* ヒーローを最小限に */
  .hero { padding: 14px 14px 8px; margin-bottom: 14px; }
  .hero-eyebrow { font-size: 13px; margin-bottom: 6px; }
  .hero-title { font-size: 22px; margin-bottom: 8px; line-height: 1.4; }
  .hero-lead { font-size: 15px; line-height: 1.6; margin-bottom: 0; }
  .slot-figure { margin-top: 4px; }
  .slot-figure svg { max-width: 250px; }

  /* 見出し・注記を圧縮 */
  .section-h { font-size: 17px; }
  .section-note { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }

  /* カードを薄く */
  .choice-grid { gap: 8px; }
  .choice-card { padding: 11px 12px; gap: 12px; }
  .choice-card .choice-icon,
  .choice-card .choice-icon svg { width: 34px !important; height: 34px !important; flex-basis: 34px; }
  .choice-card h3 { font-size: 16px; margin: 0 0 2px; }
  .choice-card p { font-size: 13px; line-height: 1.5; }
  .choice-more { margin-top: 4px; font-size: 13px; }
}
@media (max-width: 640px) {
  .help-bar strong { white-space: nowrap; }
  .help-bar { font-size: 13px !important; }
}

/* ============================================================
   ヘッダー・お問い合わせ導線（電話表示は廃止）
   ============================================================ */
.site-header .logo {
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.site-header .logo:hover,
.site-header .logo:focus {
  text-decoration: underline;
}

.help-bar {
  background: #EAF3FB;
  border-bottom: 1px solid #C9DDF0;
  padding: 10px 12px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}
.help-bar a { color: #12457A; font-weight: 700; }

/* お問い合わせフォーム */
select, textarea {
  width: 100%;
  font-size: 18px;
  padding: 12px;
  border: 2px solid #C9D6E2;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
}
textarea { line-height: 1.7; }

@media (max-width: 640px) {
  .help-bar { font-size: 14px; padding: 8px 10px; }
}

/* ============================================================
   管理画面：ダッシュボードのグラフ／オーナー検索
   ============================================================ */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.chart-card h3 { margin: 0 0 14px; font-size: 17px; color: #16324F; }
.chart-body { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.chart-body svg { flex: 0 0 auto; }

.legend { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; color: #33475F; }
.legend .sw { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.legend strong { margin-left: auto; font-size: 15px; color: #16324F; }

/* 横棒グラフ */
.barlist { display: grid; gap: 10px; }
.barrow { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.barlabel { flex: 0 0 76px; color: #33475F; }
.bartrack { flex: 1 1 auto; height: 18px; background: #EEF2F6; border-radius: 9px; overflow: hidden; }
.barfill { display: block; height: 100%; border-radius: 9px; }
.barval { flex: 0 0 48px; text-align: right; font-weight: 700; color: #16324F; }

/* 日別の縦棒グラフ */
.colchart { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 18px; }
.colchart .col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; height: 100%; position: relative; }
.colchart .colnum { font-size: 12px; color: #16324F; font-weight: 700; margin-bottom: 3px; }
.colchart .colbar { width: 70%; background: #1F5FA6; border-radius: 4px 4px 0 0; margin-top: auto; min-height: 2px; }
.colchart .collabel { font-size: 11px; color: #5B7391; margin-top: 6px; white-space: nowrap; }

/* 絞り込みバー */
.filterbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.filterbar label { display: flex; flex-direction: column; font-size: 13px; color: #4A5D73; gap: 4px; }
.filterbar input, .filterbar select { font-size: 15px; padding: 8px 10px; }

@media (max-width: 900px) {
  .chart-grid { grid-template-columns: 1fr; }
  .colchart .collabel { font-size: 10px; }
}

/* ============================================================
   メール到達の案内（申請完了画面）
   ============================================================ */
.mail-notice {
  background: #FFF7E6;
  border: 1px solid #F0C869;
  border-radius: 10px;
  padding: 18px 20px;
  margin: 18px 0;
}
.mail-notice-h {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 17px;
  color: #7A5C15;
}
.mail-notice p { margin: 0 0 8px; line-height: 1.8; }
.mail-notice p:last-child { margin-bottom: 0; }
.mail-notice a { color: #12457A; font-weight: 700; }

/* ============================================================
   管理画面ナビ：PCでは1行に収める（折り返して2列にならないように）
   ============================================================ */
@media (min-width: 900px) {
  .admin-nav .wrap {
    flex-wrap: nowrap;          /* 折り返さない */
    overflow-x: auto;           /* 収まらない場合のみ横スクロール */
    gap: 0;
  }
  .admin-nav a {
    /* 12項目を1行に収めるための余白。
       11px だと必要幅 1246px となり、.wrap の max-width:1200px を
       どんな画面幅でも超えてしまい、右端が必ず切れます。 */
    padding: 11px 9px;
    font-size: 13px;
    white-space: nowrap;        /* 項目名を途中で折らない */
    flex: 0 0 auto;
  }
  /* 横スクロールできることが分かるよう、細いバーを必ず残す。
     ※ ここを height:0 にすると、幅が足りないPCで右端の項目に
        到達できなくなります（項目数が増えるほど起きやすい）。 */
  .admin-nav .wrap::-webkit-scrollbar { height: 4px; }
  .admin-nav .wrap::-webkit-scrollbar-track { background: transparent; }
  .admin-nav .wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .38);
    border-radius: 2px;
  }
  .admin-nav .wrap { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.38) transparent; }

  /* 右端に隠れている項目があることを示すフェード */
  .admin-nav { position: relative; }
  .admin-nav::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 26px; pointer-events: none;
    background: linear-gradient(to right, rgba(31,95,166,0), var(--brand));
  }
}

/* 幅の狭いノートPC（1152〜1279px）では、もう一段詰めて1行に収める。
   これより狭い場合は横スクロール（上のバーとフェード）で到達できます。 */
@media (min-width: 900px) and (max-width: 1279px) {
  .admin-nav a { padding: 11px 7px; font-size: 12.5px; }
}

/* ============================================================
   スマホでの見出し：2行に折り返さず、できるだけ大きく表示する
   ※ 後方に置くことで、上の指定より優先されます
   ============================================================ */
@media (max-width: 640px) {
  /* トップの大見出し（1行に収める） */
  .hero-title {
    font-size: 22px;
    line-height: 1.35;
    margin-bottom: 10px;
    white-space: nowrap;      /* 折り返さない */
  }
  .hero-lead { font-size: 15px; }

  /* セクション見出し（「お選びいただける3つのご希望」など）を大きく */
  .section-h {
    font-size: 20px;
    line-height: 1.4;
    padding-left: 10px;
    border-left-width: 4px;
    white-space: nowrap;      /* 折り返さない */
  }
  .section-note { font-size: 13px; }

  /* 選択肢カードの見出しを大きく */
  .choice-card h3 {
    font-size: 19px;
    margin: 0 0 4px;
    white-space: nowrap;
  }
  .choice-card p { font-size: 13.5px; }

  /* 各ページの見出し */
  h1 { font-size: 22px; line-height: 1.4; }
}

/* 画面幅が特に狭い端末（iPhone SE など）では少し縮める */
@media (max-width: 374px) {
  .hero-title { font-size: 19px; }
  .section-h { font-size: 18px; }
  .choice-card h3 { font-size: 17px; }
  h1 { font-size: 20px; }
}

/* ============================================================
   管理画面：オーナーへのメール送信フォーム／対応履歴
   ============================================================ */
.mailbox { border-left: 5px solid var(--brand); }
.mailbox h3 { margin: 0 0 12px; font-size: 17px; color: #16324F; }
.mailbox textarea {
  width: 100%; font-family: inherit; font-size: 14px; line-height: 1.7;
  padding: 12px; border: 2px solid #C9D6E2; border-radius: 8px;
}
.mailbox select, .mailbox input[type=text] { font-size: 14px; padding: 9px 10px; }

/* 対応履歴 */
.msg-item { border-left: 4px solid #C9D6E2; padding: 16px 18px; margin-bottom: 12px; }
.msg-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; color: #5B7391; }
.msg-date { font-weight: 700; color: #16324F; }
.msg-cat { background: #EAF3FB; color: #12457A; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.msg-cat.ng { background: #FDECEC; color: #B03A2E; }
.msg-admin { margin-left: auto; }
.msg-to { font-size: 14px; color: #33475F; margin-bottom: 6px; }
.msg-subject { font-size: 16px; font-weight: 700; color: #16324F; margin-bottom: 8px; }
.msg-body {
  white-space: pre-wrap; word-break: break-word;
  background: #F7F9FB; border: 1px solid #DDE5EC; border-radius: 8px;
  padding: 14px; font-size: 13px; line-height: 1.8; font-family: inherit;
  margin: 8px 0 0;
}
.msg-item details summary { cursor: pointer; color: #12457A; }

@media (max-width: 640px) {
  .msg-admin { margin-left: 0; }
}

/* ============================================================
   3つの選択肢カード：色で区別しやすくする
   ※ 3つは対等な選択肢のため、彩度・明度をそろえ、
     「どれかが推奨」に見えないようにしています。
   ============================================================ */

/* ヒーローの図版を削除したことによる余白調整 */
.hero { padding-bottom: 22px; }

.choice-card {
  border-width: 2px;
  border-radius: 14px;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* 保持する ― 青 */
.choice-card.c-hold {
  background: #F2F7FC;
  border-color: #A9C7E8;
  color: #1F5FA6;                 /* アイコンの色 */
}
.choice-card.c-hold h3 { color: #14416F; }

/* 譲渡希望を申請する ― 琥珀 */
.choice-card.c-transfer {
  background: #FDF7EC;
  border-color: #E4C489;
  color: #B5822A;
}
.choice-card.c-transfer h3 { color: #7A5613; }

/* 将来施策を待つ ― 緑 */
.choice-card.c-wait {
  background: #F1F8F4;
  border-color: #A6CEB8;
  color: #4C8A67;
}
.choice-card.c-wait h3 { color: #2F6A4B; }

/* 本文と補足は3枚とも同じ濃さ（差をつけない） */
.choice-card p { color: #4A5D73; }
.choice-card .choice-more { color: #12457A; font-weight: 700; }

/* マウスを乗せたときだけ少し浮かせる（PCのみ） */
@media (hover: hover) {
  .choice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(22, 50, 79, .10);
  }
}

/* ============================================================
   トップの大見出しを際立たせる（太字＋下罫線）
   ※ 明朝体の落ち着きを保ちながら、視線を集める強調にしています
   ============================================================ */
.hero-title {
  font-size: 36px;
  font-weight: 800;
  color: #14416F;
  letter-spacing: .02em;
  line-height: 1.45;
  margin: 0 0 18px;
  display: inline-block;
  border-bottom: 4px solid #1F5FA6;
  padding-bottom: 10px;
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 23px;
    line-height: 1.4;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom-width: 3px;
    white-space: nowrap;
  }
}

@media (max-width: 374px) {
  .hero-title { font-size: 20px; }
}
@media (max-width: 640px) {
  .hero-title { font-size: 21px; }   /* 左右に余白を確保 */
}
@media (max-width: 374px) {
  .hero-title { font-size: 18px; }
}

/* ============================================================
   対応履歴：送信／受信の区別、よく出てくる語
   ============================================================ */
.msg-dir {
  font-size: 12px; font-weight: 700; border-radius: 4px;
  padding: 3px 9px; color: #fff;
}
.msg-dir.out { background: #1F5FA6; }   /* 事務局から送信 */
.msg-dir.in  { background: #4C8A67; }   /* オーナーから受信 */
.msg-item:has(.msg-dir.in) { border-left-color: #A6CEB8; }

/* よく出てくる語 */
.kw-list { display: grid; gap: 8px; }
.kw-row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.kw-word { flex: 0 0 130px; font-weight: 700; color: #12457A; text-decoration: none; }
.kw-word:hover { text-decoration: underline; }
.kw-track { flex: 1 1 auto; height: 16px; background: #EEF2F6; border-radius: 8px; overflow: hidden; }
.kw-fill { display: block; height: 100%; background: #1F5FA6; border-radius: 8px; }
.kw-num { flex: 0 0 46px; text-align: right; font-weight: 700; color: #16324F; }
.kw-doc { flex: 0 0 90px; text-align: right; color: #7A8794; }

@media (max-width: 640px) {
  .kw-word { flex-basis: 90px; font-size: 13px; }
  .kw-doc { display: none; }
}

/* ============================================================
   選択カードのイラスト（2026-08-30 追加）
   ※ 2枚は同一サイズ（360x264）の透過PNGです。表示枠も左右同一に
      してください。片方だけ大きく見せると、資料4-4の
      「文言・色・分量・並び順のいずれにおいても特定の選択肢が
      有利に見えないよう設計する」に反します。
   ============================================================ */
.choice-illust {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto 6px;
}

@media (max-width: 640px) {
  /* 1列になっても2枚のカードの高さを揃える。
     文章の行数が違っても、見た目の分量が偏らないようにするためです。 */
  .choice-grid { grid-auto-rows: 1fr; }

  /* カードが横並びの行になるため、イラストは左の固定幅にする */
  .choice-card .choice-illust {
    flex: 0 0 96px;
    width: 96px;
    max-width: 96px;
    margin: 0;
  }
}

@media (max-width: 380px) {
  .choice-card .choice-illust {
    flex-basis: 78px;
    width: 78px;
    max-width: 78px;
  }
}

/* ============================================================
   選択肢の番号表示（2026-08-31 追加）
   ※ ①②のバッジは、色・大きさ・字数を左右で完全に同一にして
      ください。片方だけ目立たせると、資料4-4 の
      「特定の選択肢が有利に見えないよう設計する」に反します。
      カードごとの色分け（青／琥珀）は既存のままで、
      バッジには適用しません。
   ============================================================ */
.choice-guide {
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: #33475F;
  margin: 0 0 14px;
}
.choice-guide strong { color: #16324F; }

.choice-no {
  display: inline-block;
  background: #16324F;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  padding: 6px 13px;
  border-radius: 999px;
  margin: 0 0 9px;
}

@media (max-width: 640px) {
  .choice-guide { font-size: 13.5px; margin-bottom: 10px; }
  .choice-no { font-size: 12px; padding: 5px 11px; margin-bottom: 6px; }
}

/* ============================================================
   「現在確定していること」「今後予定していること」を
   はっきりした四角で囲む（2026-08-31 追加）
   ※ 見出しを箱の上辺いっぱいの帯にしています。
      負のマージンは .option-block の padding（20px 18px）と
      対になっているので、padding を変える場合は
      こちらも同じ値に合わせてください。
   ============================================================ */
.option-block {
  border: 2px solid #C8D4E0;
  border-left-width: 2px;
  background: #fff;
  overflow: hidden;
}
.option-block > h2 {
  margin: -20px -18px 16px;
  padding: 12px 18px;
  border-bottom: 2px solid #C8D4E0;
  background: #F2F6FA;
  border-radius: 10px 10px 0 0;
  font-size: 18px;
}

/* 確定 ― 青 */
.option-block.confirmed { border-color: #A9C7E8; border-left: 2px solid #A9C7E8; }
.option-block.confirmed > h2 { background: #EAF2FA; border-bottom-color: #A9C7E8; }

/* 予定 ― 琥珀 */
.option-block.planned { border-color: #E4C489; border-left: 2px solid #E4C489; background: #FFFDF7; }
.option-block.planned > h2 { background: #FDF3E0; border-bottom-color: #E4C489; }

/* 帯の中では見出しの下マージンを詰める */
.option-block > h2 + ul { margin-top: 0; }

@media (max-width: 640px) {
  .option-block { padding: 16px 14px; }
  .option-block > h2 { margin: -16px -14px 13px; padding: 10px 14px; font-size: 16.5px; }
}
.option-block li:last-child { margin-bottom: 0; }

/* ============================================================
   保有広告枠情報（slot_info.php）2026-08-31 追加
   ・内訳を3段組
   ・1枠ごとの明細は、PCでは表、スマホではカードに変形
   ============================================================ */
.sec-h {
  font-size: 19px;
  color: var(--ink);
  margin: 26px 0 12px;
  padding-left: 10px;
  border-left: 4px solid var(--brand);
}

.breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bd-col {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
}
.bd-col h3 {
  font-size: 15px;
  color: #33475F;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.bd-list { list-style: none; margin: 0; padding: 0; }
.bd-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  padding: 5px 0;
}
.bd-list li + li { border-top: 1px dotted #E3E9F0; }
.bd-name { color: var(--ink); }
.bd-num {
  flex: 0 0 auto;
  color: #33475F;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- 1枠ごとの明細 --- */
table.slots {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 15px;
}
table.slots th,
table.slots td {
  border: 1px solid var(--rule);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}
table.slots thead th {
  background: #EEF3F9;
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
}
table.slots tbody tr:nth-child(even) { background: #FAFCFE; }
table.slots .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.slots .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
table.slots tfoot th,
table.slots tfoot td {
  background: #EEF3F9;
  font-weight: 700;
}
table.slots tfoot th { text-align: right; }

.note-diff { color: #A33; margin-top: 10px; }

@media (max-width: 900px) {
  .breakdown { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .sec-h { font-size: 17px; margin: 20px 0 10px; }
  .breakdown { grid-template-columns: 1fr; gap: 10px; }
  .bd-list li { font-size: 14px; }

  /* 表をやめて、1枠ずつのカードにする（横スクロールを避ける） */
  .table-scroll { overflow: visible; }
  table.slots, table.slots tbody, table.slots tr, table.slots td { display: block; width: auto; }
  table.slots thead { display: none; }
  table.slots tfoot { display: block; }
  table.slots tfoot tr { display: flex; justify-content: space-between; }
  table.slots tfoot th, table.slots tfoot td { display: block; border: none; }

  table.slots tbody tr {
    border: 1px solid var(--rule);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 4px 12px 8px;
    background: #fff;
  }
  table.slots tbody tr:nth-child(even) { background: #fff; }
  table.slots tbody td {
    border: none;
    border-bottom: 1px dotted #E3E9F0;
    padding: 7px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    text-align: right;
  }
  table.slots tbody td:last-child { border-bottom: none; }
  table.slots tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: #5A6B7F;
    font-size: 13px;
    text-align: left;
  }
}

/* 明細表の折り返しを整える（「焼肉・ホルモ／ン」のような1字残りを防ぐ） */
/* 値は折り返さない。想定外に長い値が来たときだけ
   .table-scroll が横スクロールで受け止めます。 */
table.slots th, table.slots td { white-space: nowrap; }
table.slots th:nth-child(4), table.slots td:nth-child(4) { text-align: center; }

@media (max-width: 640px) {
  /* カード表示に変わるので、折り返し禁止と中央寄せは戻す */
  table.slots th, table.slots td { white-space: normal; }
  table.slots td:nth-child(4) { text-align: right; }
}

/* 枠数が多い方向けの折りたたみ（13枠以上のときだけ出ます） */
.slots-fold { margin: 0; }
.slots-fold > summary {
  cursor: pointer;
  list-style: none;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #12457A;
  display: flex;
  align-items: center;
  gap: 10px;
}
.slots-fold > summary::-webkit-details-marker { display: none; }
.slots-fold > summary::before {
  content: "＋";
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.slots-fold[open] > summary::before { content: "－"; }
.slots-fold[open] > summary { margin-bottom: 12px; }
@media (hover: hover) {
  .slots-fold > summary:hover { background: #F4F8FC; }
}

/* ============================================================
   scheme.php の図版（2026-08-31 追加）
   ※ PCとスマホで別画像を出しています（<picture> の media 切替）。
      JavaScript は使っていません。表示されないほうの画像は
      読み込まれないので、通信量は増えません。
   ============================================================ */
.blk-lead {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 16px;
}

.option-block h3 {
  font-size: 17px;
  color: var(--ink);
  margin: 22px 0 10px;
  padding-left: 9px;
  border-left: 3px solid #C9A227;
}
.option-block.confirmed h3 { border-left-color: var(--brand); }

.scheme-fig { margin: 0 0 18px; }
.scheme-fig img,
.scheme-fig picture {
  display: block;
  width: 100%;
  height: auto;
  max-width: 820px;
  margin: 0 auto;
}
.scheme-fig img {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
}
.scheme-fig figcaption {
  max-width: 820px;
  margin: 10px auto 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: #4A5D73;
}

@media (max-width: 640px) {
  .blk-lead { font-size: 16px; line-height: 1.8; }
  .option-block h3 { font-size: 16px; margin: 18px 0 9px; }
  .scheme-fig img, .scheme-fig picture { max-width: 100%; }
  .scheme-fig figcaption { font-size: 13.5px; line-height: 1.75; }
}

/* 対応履歴：各メッセージの操作リンク（2026-08-31 追加） */
.msg-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dotted #E3E9F0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.btn.small-btn {
  display: inline-block;
  font-size: 14px;
  padding: 7px 14px;
  width: auto;
}

/* 対応履歴：未対応／対応済みの表示（2026-08-31 追加） */
.open-count {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 15px;
  color: #33475F;
}
.open-count.has {
  background: #FFF6F6;
  border-color: #E5B4B4;
  color: #8A2B2B;
}
.open-count strong { font-size: 20px; }
.open-count .link { margin-left: 12px; }

.msg-cat.open {
  background: #FDECEC;
  color: #A32B2B;
  font-weight: 700;
}
.msg-cat.done {
  background: #E8F4EC;
  color: #2F6A4B;
}

/* ============================================================
   対応履歴：やり取り（スレッド）表示　2026-09-08 追加
   ※ 管理画面の対応履歴だけに効きます。
   ------------------------------------------------------------
   複数の管理者が同じ受信箱を見るため、1通ずつ並べると
   「もう誰かが返したのか」が分かりません。
   相手ごとにまとめ、閉じたままでも
     ・未対応が何件残っているか
     ・最後に誰が動いたか
   が分かるようにしています。
   ============================================================ */

.thread-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 10px;
}
.view-switch { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.view-switch a {
  padding: 6px 14px; font-size: 13px; text-decoration: none;
  color: #33475F; background: #fff;
}
.view-switch a.on { background: #1F5FA6; color: #fff; font-weight: 700; }

/* --- やり取り1件（閉じた状態が一覧の行になります） --- */
.thread {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 5px solid #C9D6E2;
  border-radius: 10px;
  margin-bottom: 10px;
}
.thread.has-open { border-left-color: #C0524E; background: #FFFCFC; }

.thread > summary {
  cursor: pointer;
  padding: 12px 16px;
  list-style: none;
}
.thread > summary::-webkit-details-marker { display: none; }
.thread > summary::before {
  content: "▶";
  float: right;
  color: #8A9AAC;
  font-size: 12px;
  margin-left: 10px;
}
.thread[open] > summary::before { content: "▼"; }
.thread > summary:hover { background: #F7FAFD; }

.thread-line1 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.thread-name { font-weight: 700; font-size: 16px; color: #12457A; }
.thread-count { font-size: 12px; color: #6B7A8C; }
.thread-date  { font-size: 13px; color: #33475F; margin-left: auto; }
.thread-line2 { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.thread-actor { font-size: 12px; color: #2F6A4B; background: #EFF6F1; border-radius: 999px; padding: 2px 10px; }
.thread-line3 { margin-top: 6px; font-size: 14px; color: #33475F; }

/* --- 開いたときの中身 --- */
.thread-body { padding: 4px 16px 14px; border-top: 1px dashed var(--rule); }

/* 1通。受信は左寄せ、送信は少し右へ寄せて、会話として読めるようにします。 */
.mail {
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0;
  border: 1px solid var(--rule);
}
.mail.in  { background: #F5FAF7; border-color: #CFE3D7; margin-right: 40px; }
.mail.out { background: #F5F8FC; border-color: #CFDCEA; margin-left: 40px; }

.mail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mail-subject { margin-top: 6px; font-weight: 700; color: #12457A; word-break: break-word; }
.mail-body-wrap { margin-top: 6px; }
.mail-body-wrap summary { cursor: pointer; color: #12457A; }
.mail-actions { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.thread-foot {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule);
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}

@media (max-width: 700px) {
  .mail.in  { margin-right: 0; }
  .mail.out { margin-left: 0; }
  .thread-date { margin-left: 0; }
}

/* ---- 上部の件数タイル ---- */
.counters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.counter {
  display: flex; align-items: baseline; gap: 8px;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 16px; text-decoration: none; color: #33475F;
}
.counter:hover { background: #F7FAFD; }
.counter.on    { border-color: #1F5FA6; box-shadow: inset 0 0 0 1px #1F5FA6; }
.counter.has   { background: #FFF6F6; border-color: #E5B4B4; color: #8A2B2B; }
.counter.bounce{ background: #FFF9F0; border-color: #E8CFA6; color: #7A5320; }
.counter.clear { color: #6B7A8C; }
.counter-num   { font-size: 20px; font-weight: 700; }
.counter-label { font-size: 13px; }

/* ---- 担当 ---- */
.assign-badge {
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px;
  background: #EEF2F7; color: #33475F;
}
.assign-badge.me   { background: #1F5FA6; color: #fff; }
.assign-badge.none { background: #F2F4F7; color: #8A9AAC; font-weight: 400; }
.thread.mine { border-left-color: #1F5FA6; }

.assign-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: #F7FAFD; border: 1px solid var(--rule); border-radius: 8px;
  padding: 8px 12px; margin: 10px 0;
}
.assign-bar select { padding: 6px 10px; font-size: 13px; }

/* ---- エラー通知（不達） ---- */
.msg-dir.bnc { background: #A9761F; }
.msg-cat.bnc { background: #FDF3E3; color: #7A5320; }
.mail.bounce { background: #FFFCF6; border-color: #E8CFA6; margin-right: 40px; }
.bounce-info {
  margin-top: 8px; padding: 10px 12px;
  background: #FFF6E8; border: 1px solid #E8CFA6; border-radius: 8px;
  font-size: 14px; color: #6B4A16; line-height: 1.8;
}
.bounce-info strong { color: #7A2B2B; }

/* ---- ページ送り ---- */
.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 18px 0 6px;
}

@media (max-width: 700px) {
  .mail.bounce { margin-right: 0; }
  .counter { flex: 1 1 46%; }
}

/* ============================================================
   scheme.php「待つ広告枠から、育てるエリアへ。」2026-09-06 追加
   ※ すべて .grow の中だけに効きます。他のページには影響しません。
   ※ 色は改善レジュメ第8章の指定です。変更する場合は
      下の変数だけを直してください。
   ============================================================ */
.grow {
  --g-navy:  #0B1F4D;
  --g-gold:  #C8951F;
  --g-green: #0F5B33;
  --g-lgray: #DDE3EB;
  --g-body:  #1A2230;
  --g-mute:  #6B7688;
}

/* --- ファーストビュー --- */
.grow .g-hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FC 100%);
  border: 1px solid var(--g-lgray);
  border-radius: 14px;
  padding: 34px 26px 30px;
  margin-bottom: 26px;
  text-align: center;
}
.grow .g-eyebrow {
  font-size: 14px; letter-spacing: .08em; color: var(--g-mute);
  margin: 0 0 12px;
}
.grow .g-main {
  font-size: 38px; font-weight: 700; line-height: 1.45;
  color: var(--g-navy); margin: 0 0 16px;
}
.grow .g-sub {
  font-size: 18px; line-height: 1.9; color: #33475F; margin: 0;
}

/* --- セクション --- */
.grow .g-sec { padding: 34px 0 6px; }
.grow .g-sec.alt {
  background: #F4F8FC;
  border-radius: 14px;
  padding: 30px 24px 14px;
  margin: 8px 0;
}
.grow .g-sec > h2 {
  font-size: 27px; font-weight: 700; color: var(--g-navy);
  margin: 0 0 12px; padding-top: 14px; position: relative;
}
.grow .g-sec > h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 48px; height: 4px; border-radius: 2px; background: var(--g-gold);
}
.grow .g-lead {
  font-size: 19px; color: var(--g-mute); margin: 0 0 18px; line-height: 1.8;
}
.grow .g-sec p {
  font-size: 17px; line-height: 1.95; color: var(--g-body);
  margin: 0 0 16px; max-width: 720px;
}
.grow .g-sec p strong { color: var(--g-navy); }
.grow .g-cap {
  font-size: 14.5px !important; color: var(--g-mute) !important;
  line-height: 1.8 !important; margin-top: 14px !important;
}
.grow .g-punch {
  font-size: 23px !important; font-weight: 700; color: var(--g-navy) !important;
  text-align: center; margin: 20px auto 8px !important; max-width: none !important;
}

/* --- 図解1：5段フロー --- */
.grow .g-flow { max-width: 560px; margin: 22px auto 6px; }
.grow .g-flow-row {
  border-radius: 10px; padding: 14px 16px; text-align: center;
  font-size: 17px; font-weight: 700; color: #fff;
  margin: 0 auto;
}
.grow .g-flow-row.lv1 { background: var(--g-green); width: 84%; }
.grow .g-flow-row.lv2 { background: var(--g-navy);  width: 92%; }
.grow .g-flow-row.lv3 { background: var(--g-gold);  width: 100%; }
.grow .g-flow-arrow {
  width: 0; height: 0; margin: 7px auto;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid #9AA7B6;
}

/* --- 街区イメージの差し込み位置（画像が入るまでの仮） --- */
.grow .g-town-todo {
  border: 2px dashed var(--g-lgray); border-radius: 12px;
  padding: 26px 18px; text-align: center; background: #FBFCFE;
  margin: 18px 0 6px;
}
.grow .g-town-todo p { margin: 0 !important; color: var(--g-mute) !important; }

/* --- S4：3者 --- */
.grow .g-three {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin: 20px 0 4px;
}
.grow .g-card {
  background: #fff;
  /* 四方を濃紺でしっかり囲み、上辺だけ各カードの色を太く出します。
     3枚とも枠の色と太さは同じです。上辺の色だけが違います。 */
  border: 2px solid var(--g-navy);
  border-top-width: 7px;
  border-radius: 12px;
  padding: 18px 16px;
  position: relative;
}
.grow .g-card.c-you  { border-top-color: var(--g-gold); }
.grow .g-card.c-peer { border-top-color: var(--g-green); }
.grow .g-card.c-aigh { border-top-color: var(--g-navy); }
.grow .g-card-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%;
  font-size: 15px; font-weight: 700; color: #fff; background: var(--g-navy);
  margin-bottom: 9px;
}
.grow .g-card h3 { font-size: 18px; color: var(--g-navy); margin: 0 0 8px; }
.grow .g-card p { font-size: 15.5px !important; line-height: 1.85 !important; margin: 0 !important; }

/* --- 図解2：3者 → エリア（矢印は一方向のみ） --- */
.grow .g-build { margin: 22px 0 4px; }
.grow .g-build svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; }
/* .grow .g-build svg より詳細度を上げないと効きません（要素セレクタ1つ分の差） */
.grow .g-build svg.g-build-sp { display: none; }

/* --- 図解3：4段階（目盛り・数値は入れない） --- */
.grow .g-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: end; gap: 10px; margin: 24px 0 6px;
}
.grow .g-step {
  border-radius: 10px 10px 0 0; padding: 12px 8px; text-align: center;
  font-size: 14.5px; font-weight: 700; line-height: 1.5;
}
.grow .g-step.s1 { background: var(--g-lgray); color: #4A5769; min-height: 74px; }
.grow .g-step.s2 { background: #B9D6C6; color: #14503A; min-height: 104px; }
.grow .g-step.s3 { background: var(--g-green); color: #fff;  min-height: 134px; }
.grow .g-step.s4 { background: var(--g-gold);  color: #fff;  min-height: 164px; }
.grow .g-step-lbl { display: block; padding-top: 6px; }

/* --- S8：締め --- */
.grow .g-close {
  background: #FFFBF2; border: 1px solid #EBD9AE; border-radius: 14px;
  padding: 30px 24px 24px; margin-top: 14px;
}
.grow .g-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.grow .g-btn {
  display: inline-block; border-radius: 10px; font-weight: 700;
  padding: 15px 22px; font-size: 16.5px; text-decoration: none; text-align: center;
  min-height: 48px; box-sizing: border-box;
}
.grow .g-btn.primary { background: var(--g-gold); color: #fff; }
.grow .g-btn.outline { border: 2px solid var(--g-navy); color: var(--g-navy); background: #fff; }
.grow .g-btn.text    { color: #4A5769; text-decoration: underline; padding: 15px 6px; }

/* --- 前半と後半の区切り --- */
.grow .g-divider {
  font-size: 21px; color: var(--g-navy); text-align: center;
  margin: 40px 0 18px; padding-top: 26px; border-top: 1px solid var(--g-lgray);
}

/* --- ページ下部の注記 --- */
.grow .g-note {
  background: #F7F9FC; border: 1px solid var(--g-lgray); border-radius: 10px;
  padding: 14px 16px; text-align: left; line-height: 1.85;
}

@media (max-width: 900px) {
  .grow .g-three { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .grow .g-hero { padding: 24px 16px 22px; }
  .grow .g-main { font-size: 27px; }
  .grow .g-sub { font-size: 16px; line-height: 1.85; }
  .grow .g-sec { padding: 26px 0 4px; }
  .grow .g-sec.alt { padding: 22px 16px 10px; }
  .grow .g-sec > h2 { font-size: 22px; }
  .grow .g-lead { font-size: 16.5px; }
  .grow .g-sec p { font-size: 16px; line-height: 1.9; }
  .grow .g-punch { font-size: 19px !important; }
  .grow .g-flow-row { font-size: 15.5px; padding: 12px 10px; }

  /* 図解2はPC版を縮めると読めないため、縦積みのSVGに差し替えます */
  .grow .g-build svg.g-build-pc { display: none; }
  .grow .g-build svg.g-build-sp { display: block; max-width: 330px; }

  /* 図解3は横4段だと文字が潰れるため、縦積みにします */
  .grow .g-steps { grid-template-columns: 1fr; align-items: stretch; gap: 8px; }
  .grow .g-step { border-radius: 10px; min-height: 0 !important; padding: 14px 12px; }
  .grow .g-step.s1 { width: 55%; }
  .grow .g-step.s2 { width: 70%; }
  .grow .g-step.s3 { width: 85%; }
  .grow .g-step.s4 { width: 100%; }

  .grow .g-close { padding: 22px 16px 18px; }
  .grow .g-cta { flex-direction: column; align-items: stretch; }
  .grow .g-btn { width: 100%; }
  .grow .g-divider { font-size: 18px; margin: 30px 0 14px; }
}

/* ============================================================
   scheme.php イラスト対応（2026-09-06 追加）
   ※ すべて .grow の中だけに効きます。
   ============================================================ */

/* --- ヒーロー ---
   ※ このサイトの本文カラムは .wrap の 760px（内側728px）です。
      文字を絵に重ねる余裕がないため、縦に積んでいます。 */
.grow .g-hero { padding: 26px 20px 0; overflow: hidden; }
.grow .g-hero-text { padding: 0 0 18px; }
.grow .g-hero-img { display: block; margin: 0 -20px; }
.grow .g-hero-img img { display: block; width: 100%; height: auto; }

/* --- 図版の共通枠 --- */
.grow .g-fig { margin: 22px 0 6px; }
.grow .g-fig img { display: block; width: 100%; height: auto; max-width: 820px; margin: 0 auto; }
.grow .g-fig-wide img { max-width: 100%; }
.grow .g-fig figcaption {
  max-width: 820px; margin: 12px auto 0;
  font-size: 14.5px; line-height: 1.8; color: var(--g-mute);
}

/* --- 街区4段階：重ねて切り替える --- */
.grow .g-town-stack { position: relative; max-width: 820px; margin: 0 auto; }
.grow .g-town-img {
  position: absolute; left: 0; top: 0; width: 100%; height: auto;
  opacity: 0; transition: opacity .55s ease;
}
/* 最終段階だけ position:relative。これが高さを決めます。
   JavaScriptが無効なら、この1枚だけが見えます。 */
.grow .g-town-img.is-last { position: relative; opacity: 1; }
.grow .g-town[data-on] .g-town-img.is-last { opacity: 0; }
.grow .g-town[data-on="1"] .g-town-img[data-step="1"],
.grow .g-town[data-on="2"] .g-town-img[data-step="2"],
.grow .g-town[data-on="3"] .g-town-img[data-step="3"],
.grow .g-town[data-on="4"] .g-town-img[data-step="4"] { opacity: 1; }

.grow .g-town-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.grow .g-town-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--g-lgray); transition: background .3s;
}
.grow .g-town-dots span.on { background: var(--g-gold); }

@media (prefers-reduced-motion: reduce) {
  .grow .g-town-img { transition: none; }
}

@media (max-width: 640px) {
  .grow .g-hero { padding: 22px 16px 0; }
  .grow .g-hero-img { margin: 0 -16px; }
  .grow .g-fig figcaption { font-size: 13.5px; }
}

/* ============================================================
   日本語の折り返し　※ .grow の中だけに効きます
   ============================================================ */

/* 本文は両端そろえ（均等割付）。
   日本語の組版では標準の方法で、行の右端がそろうため、
   途中の行だけが短く終わることがなくなります。
   line-break: strict は、行頭に「、」「。」「っ」などが
   来ないようにする指定です（禁則処理）。 */
.grow .g-lead,
.grow .g-cap,
.grow .g-sec p,
.grow .g-fig figcaption,
.grow .g-card p,
.grow .g-note,
.grow .option-block p,
.grow li {
  text-align: justify;
  line-break: strict;
}

/* 見出しは両端そろえにせず、行の長さをそろえます。 */
.grow h1,
.grow h2,
.grow h3,
.grow .g-punch {
  text-wrap: balance;
}

/* 冒頭のリード文だけ、スマホでの改行位置をこちらで決めています。
   （scheme.php の <br class="g-br-sp">） */
.grow .g-br-sp { display: none; }
@media (max-width: 640px) {
  .grow .g-br-sp { display: inline; }
}