/* dispatch 093: コンセプト説明ページ (この site について) 専用 CSS。
   about.html の head_extras から常時 <link> (flag なし)。正典 mock:
   design/concept_page_2026-07-05.html。汚染防止: mock の全セレクタを `.about-page`
   配下にスコープ (page-wide の .hero / .num / .step 等と衝突させない)。palette は
   mock の :root を `.about-page` ローカル変数に取り込む (本番トークンと同値)。 */

.about-page{
  --fg:#1a1d24; --fg-muted:#5b6270; --fg-subtle:#8a92a0;
  --bg:#ffffff; --bg-alt:#f7f8fa; --bg-card:#fbfbfd;
  --border:#e3e6ec; --border-strong:#c8cdd6;
  --accent:#2c5b8c; --accent-soft:#e8f0f9;
  --hot:#c54a25; --hot-soft:#fff1ee; --warn:#b06a1f;
  --grp-a:#2c5b8c; --grp-b:#5a3c8c; --grp-c:#2c7a4d;
  --navy:#16243d; --gold:#a37b3e; --gold-soft:#f5ecd9;
  color:var(--fg); line-height:1.8; max-width:960px; margin:0 auto;
}
.about-page *{box-sizing:border-box;}

/* hero */
/* border:0 / margin-bottom:0 は global .hero (main.css) の border+margin leak を打ち消す
   (mock の navy hero は枠なし。次 h2 の margin-top:40px が hero 下余白を担う)。 */
.about-page .hero{background:var(--navy); color:#eef2f9; padding:32px 32px 34px; border-radius:12px; border:0; margin-bottom:0;}
.about-page .hero .k{font-size:12px; letter-spacing:.6px; color:#9fb6d6; font-weight:600;}
.about-page .hero h1{margin:8px 0 14px; font-size:28px; font-weight:700; letter-spacing:.3px; line-height:1.4; color:#eef2f9;}
.about-page .hero .said{background:rgba(255,255,255,.08); border-left:3px solid #7fa8d6; padding:12px 16px; border-radius:6px; font-size:15.5px; margin:0;}
.about-page .hero .said b{color:#fff;}

.about-page h2{font-size:21px; font-weight:700; margin:40px 0 4px;}
.about-page h2 .ic{margin-right:8px;}
.about-page p.lead{color:var(--fg-muted); font-size:14.5px; margin:4px 0 16px;}
.about-page p{font-size:14.5px;}

/* 3つの視点 (先頭) */
.about-page .flow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:16px 0 6px;}
.about-page .flow .step{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:18px 16px; text-align:center;}
.about-page .flow .step .num{font-size:11px; font-weight:800; color:#fff; border-radius:20px; padding:2px 10px;}
.about-page .flow .step .ico{font-size:24px; margin:10px 0 2px;}
.about-page .flow .step .st{font-size:15px; font-weight:700; margin:2px 0 5px;}
.about-page .flow .step .sd{font-size:12.5px; color:var(--fg-muted);}
.about-page .flow .step .sd b{color:var(--fg);}
.about-page .flow .step.s1{border-top:3px solid var(--grp-c);} .about-page .flow .step.s1 .num{background:var(--grp-c);}
.about-page .flow .step.s2{border-top:3px solid var(--accent);} .about-page .flow .step.s2 .num{background:var(--accent);}
.about-page .flow .step.s3{border-top:3px solid var(--gold);} .about-page .flow .step.s3 .num{background:var(--gold);}
.about-page .flow-note{font-size:13px; color:var(--fg-muted); text-align:center; margin:4px 0 0;}

/* 資産カード (〜とは) */
.about-page .def{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:22px 24px; margin:14px 0;}
.about-page .def.time{border-left:5px solid var(--grp-c);}
.about-page .def.story{border-left:5px solid var(--accent);}
.about-page .def.signal{border-left:5px solid var(--gold);}
.about-page .def .h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.about-page .def .h .t{font-size:19px; font-weight:700;}
.about-page .def .h .en{font-size:12px; color:var(--fg-subtle); font-weight:600;}
.about-page .def .one{font-size:15px; font-weight:600; margin:8px 0 12px;}
.about-page .def.time .one{color:var(--grp-c);} .about-page .def.story .one{color:var(--accent);} .about-page .def.signal .one{color:var(--gold);}
.about-page .def .body{font-size:14px; color:var(--fg-muted);}
.about-page .def .feats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:14px;}
.about-page .def .feat{background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:10px 12px;}
.about-page .def .feat .fk{font-size:11px; font-weight:700; color:var(--fg-subtle);}
.about-page .def .feat .fv{font-size:12.5px; color:var(--fg-muted); margin-top:3px;}
.about-page .def .ex{margin-top:14px; border-radius:8px; padding:10px 14px; font-size:12.5px; color:var(--fg-muted);}
.about-page .def.time .ex{background:#e8f4ee;} .about-page .def.story .ex{background:var(--accent-soft);} .about-page .def.signal .ex{background:var(--gold-soft);}
.about-page .def .ex b{color:var(--fg);}
.about-page .conf{font-size:11px; font-weight:700; padding:1px 8px; border-radius:12px;}
.about-page .conf-ok{background:#e8f4ee; color:var(--grp-c);} .about-page .conf-un{background:#fbf0df; color:var(--warn);}

/* この site の特長 (利用者メリット) */
.about-page .perks{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:14px 0;}
.about-page .perk{background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:16px 18px;}
.about-page .perk .pi{font-size:22px;}
.about-page .perk .pt{font-size:14.5px; font-weight:700; margin:6px 0 4px;}
.about-page .perk .pd{font-size:13px; color:var(--fg-muted);}

/* CTA */
.about-page .cta-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:22px 0 0;}
.about-page .cta{display:block; text-decoration:none; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:14px 16px; text-align:center; transition:.15s;}
.about-page .cta:hover{border-color:var(--accent); background:var(--accent-soft);}
.about-page .cta .ci{font-size:20px;} .about-page .cta .cl{font-size:13.5px; font-weight:700; color:var(--fg); margin-top:4px;} .about-page .cta .cs{font-size:11.5px; color:var(--fg-subtle);}
/* dispatch 101 §1-8 (2026-07-11): about の LINE CTA カード (.cta.cta-line) は削除
   (§1-2 / §1-6e 撤回)。LINE 導線は濃紺フッタバンドに一本化、about CTA は元の 3 枚。 */

@media(max-width:720px){
  .about-page .flow{grid-template-columns:1fr;}
  .about-page .def .feats{grid-template-columns:1fr;}
  .about-page .perks{grid-template-columns:1fr;}
  .about-page .cta-row{grid-template-columns:1fr;}
}