/* おうちリハ — 仮サイト スタイル v2（ブランド強化版）
   スマホ最優先 / 読みやすさ / インパクトのあるヒーロー・装飾 */

:root {
  --bg: #f7f5ef;
  --surface: #ffffff;
  --ink: #232a28;
  --ink-soft: #5c5b55;
  --green: #2f9e8b;
  --green-dark: #1f7a6b;
  --green-deep: #14564c;
  --green-soft: #e7f1ee;
  --coral: #ef7a52;
  --coral-soft: #fbe9e3;
  --gold: #f4b942;
  --warn: #c0492f;
  --warn-soft: #fbe6e1;
  --border: #e4e0d6;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 6px 22px rgba(20,86,76,.08);
  --shadow-lg: 0 18px 48px rgba(20,86,76,.18);
  --maxw: 1080px;
  --readw: 720px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px; line-height: 1.85; color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--green-dark); }
img { max-width: 100%; height: auto; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.wrap-read { max-width: var(--readw); margin: 0 auto; padding: 0 22px; }

/* ---------- ヘッダー ---------- */
.site-header {
  background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark {
  width: 46px; height: 46px; display: grid; place-items: center;
}
.logo-mark svg { width: 46px; height: 46px; }
.logo-text { font-weight: 800; color: var(--ink); font-size: 20px; letter-spacing: .02em; line-height:1.15; }
.logo-text small { display:block; font-weight:600; font-size:10.5px; color:var(--ink-soft); letter-spacing:.06em; }
.header-cta {
  background: var(--green); color:#fff; text-decoration:none; font-weight:700;
  font-size:13.5px; padding:9px 16px; border-radius:999px;
}
.header-cta:hover { background: var(--green-dark); }

/* ---------- ヒーロー ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 85% -10%, #2fae98 0%, transparent 55%),
    linear-gradient(160deg, var(--green-deep) 0%, var(--green-dark) 55%, #186457 100%);
  color: #fff; padding: 64px 0 96px;
}
.hero::before, .hero::after {
  content:""; position:absolute; border-radius:50%; filter: blur(2px); opacity:.16; background:#fff;
}
.hero::before { width: 320px; height:320px; top:-120px; left:-100px; }
.hero::after { width: 200px; height:200px; bottom:10px; right:-60px; opacity:.10; }

.hero-grid { position: relative; z-index:2; display: grid; gap: 26px; align-items:center; }
.hero-copy h1 {
  font-size: 32px; line-height: 1.42; margin: 0 0 16px;
  letter-spacing: .01em; font-weight: 800;
}
.hero-copy h1 .hl {
  background: linear-gradient(transparent 62%, rgba(244,185,66,.55) 62%);
  padding: 0 .1em;
}
.hero-copy .lead { font-size: 16px; color: #d6ece6; margin: 0 0 22px; max-width: 30em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }

.creed {
  position:relative; z-index:2; margin-top: 30px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); border-radius: var(--radius);
  padding: 18px 20px; max-width: 34em;
}
.creed p { margin: 0; font-size: 15px; color:#eafaf5; }
.creed strong { color:#fff; border-bottom:2px solid var(--gold); }

/* ヒーローイラスト */
.hero-art { position: relative; z-index:2; display:flex; justify-content:center; }
.hero-art svg { width: 100%; max-width: 360px; height:auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.22)); }

/* 波形ディバイダ */
.wave { display:block; width:100%; height:auto; margin-top:-1px; }
.wave-top { transform: rotate(180deg); }

/* ---------- 共通セクション ---------- */
section { padding: 56px 0; position: relative; }
.section-title { font-size: 26px; margin: 0 0 8px; text-align: center; font-weight:800; letter-spacing:.01em; }
.section-title .em { color: var(--green-dark); }
.section-sub { text-align:center; color:var(--ink-soft); font-size:14.5px; margin:0 0 32px; }

/* スクロール出現アニメ */
.reveal { opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---------- 2本の柱 ---------- */
.pillars { display: grid; gap: 18px; }
.pillar {
  position:relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px 24px; box-shadow: var(--shadow);
  overflow:hidden;
}
.pillar::after {
  content: attr(data-n); position:absolute; right: 14px; top: -10px;
  font-size: 84px; font-weight: 900; color: var(--green-soft); z-index:0; line-height:1;
}
.pillar > * { position: relative; z-index:1; }
.pillar .picon {
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font-size:26px; margin-bottom:14px;
  background: linear-gradient(135deg, var(--green-soft), #d4ebe5);
}
.pillar .tag { display:inline-block; color: var(--green-dark); font-weight:800; font-size:12.5px; letter-spacing:.05em; margin-bottom:6px; }
.pillar h3 { margin: 0 0 8px; font-size: 19px; }
.pillar p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ---------- 困りごと絞り込み ---------- */
.tools-section { background: var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.filter-bar { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:26px; }
.filter-bar button {
  border: 1.5px solid var(--border); background: var(--bg); color: var(--ink);
  border-radius: 999px; padding: 9px 17px; font-size: 14px; cursor: pointer;
  font-family: inherit; font-weight:600; transition: .15s;
}
.filter-bar button:hover { border-color: var(--green); color: var(--green-dark); }
.filter-bar button.active { background: var(--green); color:#fff; border-color: var(--green); box-shadow:0 4px 12px rgba(47,158,139,.35); }

/* ---------- 動作カード ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card {
  position:relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 18px; text-decoration: none;
  color: var(--ink); box-shadow: var(--shadow); transition: .18s; display:block;
}
.card:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: var(--shadow-lg); }
.card .emoji {
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:28px; background: var(--green-soft); margin-bottom:10px;
}
.card h3 { margin: 0 0 4px; font-size: 16px; }
.card p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height:1.6; }
.card.hidden { display:none; }
.badge-soon {
  font-size:11px; color:var(--ink-soft); background:var(--bg);
  border:1px solid var(--border); border-radius:999px; padding:1px 9px; margin-left:6px; display:inline-block;
}

/* ---------- 読みもの：本のUI ---------- */
.book { position:relative; display:grid; grid-template-columns:1fr; background:#f6f1e3; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; }
.book-toc { background:#efe9d8; padding:20px 16px; border-bottom:1px solid #e3dcc7; display:flex; flex-direction:column; min-height:0; }
.book-toc-head { font-weight:800; font-size:12px; letter-spacing:.14em; color:var(--ink-soft); margin:0 0 10px; flex-shrink:0; text-align:center; }
.book-toc ul { list-style:none; margin:0; padding:0; }
.bt-pager { display:none; align-items:center; justify-content:center; gap:14px; padding-top:12px; margin-top:auto; border-top:1px solid #e3dcc7; flex-shrink:0; }
.bt-pager.on { display:flex; }
.pg-btn { width:30px; height:30px; border-radius:50%; border:1px solid #d8cfb8; background:#fdfaf1; color:var(--green-dark); font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.12s; padding:0; }
.pg-btn:hover:not(:disabled) { background:var(--green); color:#fff; border-color:var(--green); }
.pg-btn:disabled { opacity:.32; cursor:default; }
.pg-num { font-size:12px; font-weight:800; color:var(--ink-soft); letter-spacing:.05em; min-width:46px; text-align:center; }
.bt-item { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:10px; cursor:pointer; transition:.12s; }
.bt-item .ic { font-size:18px; flex-shrink:0; line-height:1.5; }
.bt-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.bt-t { font-size:14px; font-weight:700; color:var(--ink); line-height:1.4; }
.bt-sub { font-size:11.5px; font-weight:600; color:var(--ink-soft); line-height:1.4; margin-top:3px; }
.bt-item:hover { background:rgba(0,0,0,.045); }
.bt-item.active { background:#fdfaf1; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.bt-item.active .bt-t { color:var(--green-dark); }
.bt-item.soon .bt-t { color:var(--ink-soft); }
.bt-item .soon-tag { align-self:center; font-size:10px; background:#e0d9c4; color:var(--ink-soft); border-radius:999px; padding:1px 8px; flex-shrink:0; }
.note-col { background:#fdfaf1; padding:28px 24px; display:flex; flex-direction:column; }
.book-page { display:flex; flex-direction:column; min-height:300px; }
.book-page .bp-emoji { font-size:36px; }
.book-page h3 { font-size:19px; margin:8px 0 11px; line-height:1.55; }
.book-page .bp-excerpt { color:var(--ink-soft); font-size:14px; line-height:1.9; margin:0; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.book-page .bp-btn { margin-top:18px; }
.book-page .bp-btn a { display:inline-flex; align-items:center; gap:8px; background:var(--green); color:#fff; text-decoration:none; font-weight:800; padding:12px 24px; border-radius:999px; font-size:15px; box-shadow:0 6px 16px rgba(47,158,139,.32); transition:.15s; }
.book-page .bp-btn a:hover { background:var(--green-dark); transform:translateY(-2px); }
.book-page .bp-btn .disabled { display:inline-block; background:#d8d1bf; color:#fff; font-weight:800; padding:12px 24px; border-radius:999px; font-size:15px; }
/* ノート下：他の2動線を統合（3択化） */
.note-cta { margin-top:auto; padding-top:20px; }
.note-or { text-align:center; font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--ink-soft); margin:8px 0 12px; }
.ncta { display:flex; align-items:center; gap:12px; text-decoration:none; border-radius:14px; padding:12px 15px; margin-bottom:10px; border:1.5px solid var(--border); background:#fff; transition:.15s; }
.ncta:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.ncta .nc-ic { font-size:21px; flex-shrink:0; }
.ncta .nc-tx { flex:1; display:flex; flex-direction:column; line-height:1.4; min-width:0; }
.ncta .nc-tx b { font-size:14px; color:var(--ink); }
.ncta .nc-tx small { font-size:11px; color:var(--ink-soft); }
.ncta .nc-arw { font-weight:800; flex-shrink:0; font-size:15px; }
.ncta.find { border-color:#f3c4b2; background:var(--coral-soft); }
.ncta.find .nc-arw, .ncta.find .nc-tx b { color:var(--coral); }
.ncta.find:hover { border-color:var(--coral); }
.ncta.think { border-color:#bfe0d8; background:var(--green-soft); }
.ncta.think .nc-arw, .ncta.think .nc-tx b { color:var(--green-dark); }
.ncta.think:hover { border-color:var(--green); }
.ncta.sodan { border-color:#bcd9ec; background:#ecf4fb; }
.ncta.sodan .nc-arw, .ncta.sodan .nc-tx b { color:#2f74a3; }
.ncta.sodan:hover { border-color:#3a8fbf; }

/* 3つの入口カード */
.entry-cards { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:720px){ .entry-cards { grid-template-columns:repeat(3,1fr); } }
@media (min-width:760px){
  .book { grid-template-columns:1fr 1fr; min-height:520px; }
  .book-toc { border-bottom:0; border-right:1px solid #e3dcc7; box-shadow: inset -10px 0 18px -12px rgba(0,0,0,.14); }
  .book-toc ul { max-height:none; }
  .note-col { box-shadow: inset 10px 0 18px -12px rgba(0,0,0,.10); padding:34px 32px; }
  .book-page { min-height:330px; }
}

/* ---------- 看板記事CTA ---------- */
.flagship {
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--green-dark), var(--green-deep));
  color:#fff; border-radius: var(--radius-lg); padding: 40px 28px; text-align:center;
  box-shadow: var(--shadow-lg);
}
.flagship::before {
  content:""; position:absolute; width:240px; height:240px; border-radius:50%;
  background:rgba(255,255,255,.07); top:-80px; right:-60px;
}
.flagship > * { position:relative; z-index:1; }
.flagship .eyebrow { color: var(--gold); font-weight:800; font-size:13px; letter-spacing:.1em; }
.flagship h2 { margin:8px 0 12px; font-size:24px; line-height:1.5; color:#fff; }
.flagship p { margin:0 0 20px; color: #d9ece7; font-size:15px; }

.btn {
  display:inline-flex; align-items:center; gap:8px; background: var(--coral); color:#fff;
  text-decoration:none; font-weight:800; padding: 14px 28px; border-radius: 999px;
  font-size:15.5px; box-shadow: 0 8px 20px rgba(239,122,82,.45); transition:.15s;
}
.btn:hover { background:#e16a40; transform: translateY(-2px); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.4); color:#fff; text-decoration:none;
  font-weight:700; padding: 13px 24px; border-radius:999px; font-size:15px;
}
.btn-ghost:hover { background: rgba(255,255,255,.24); }

/* ---------- プロフィール ---------- */
.profile {
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow);
  display:flex; gap:20px; align-items:flex-start;
}
.profile .avatar {
  width:72px; height:72px; border-radius:50%;
  background: linear-gradient(135deg, var(--green-soft), #d4ebe5);
  display:grid; place-items:center; font-size:34px; flex-shrink:0;
  overflow:hidden; border:2px solid var(--green-soft);
}
.profile .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.profile h3 { margin:0 0 2px; font-size:18px; }
.profile .role { color:var(--green-dark); font-weight:800; font-size:13px; margin-bottom:8px; }
.profile p { margin:0; font-size:14px; color:var(--ink-soft); }

/* ---------- フッター ---------- */
.site-footer { background:#1c2321; color:#a9b3af; padding:40px 0; font-size:13px; }
.site-footer .wrap { text-align:center; }
.site-footer .disclaimer {
  background:rgba(255,255,255,.05); border-radius:14px; padding:16px 18px;
  margin-bottom:18px; line-height:1.7; text-align:left; max-width:var(--readw); margin-left:auto; margin-right:auto;
}
.site-footer a { color:#7fd3c4; }

/* ===================================================
   記事ページ
   =================================================== */
.article { background: var(--surface); }
.breadcrumb { font-size:13px; color:var(--ink-soft); padding:16px 0; }
.breadcrumb a { text-decoration:none; }
.article-head { padding: 8px 0 22px; border-bottom:1px solid var(--border); }
.article-head h1 { font-size:27px; line-height:1.5; margin:0 0 14px; font-weight:800; }
.article-meta { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); }
.article-meta .author { font-weight:800; color:var(--green-dark); }

.article-body { padding: 26px 0 10px; }
.article-body h2 {
  font-size:22px; margin:40px 0 16px; padding-left:14px;
  border-left:6px solid var(--green); line-height:1.5; font-weight:800;
}
.article-body h3 { font-size:17.5px; margin:26px 0 8px; color:var(--green-dark); }
.article-body p { margin: 0 0 19px; }
/* 本文の太字：真っ黒をやめ深緑に＝「黒線」の硬さを和らげ、ブランドと調和 */
.article-body p strong,
.lead-quote strong,
.saykake strong,
.hitokoto strong { color: var(--green-deep); font-weight: 700; }

.lead-quote {
  background: var(--green-soft); border-radius: var(--radius);
  padding: 20px 22px; font-size:15.5px; margin: 0 0 26px; border-left:6px solid var(--green);
}

.steps { counter-reset: step; padding:0; margin: 0 0 22px; list-style:none; }
.steps li {
  position:relative; background:var(--bg); border:1px solid var(--border);
  border-radius:14px; padding:15px 16px 15px 56px; margin-bottom:11px;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position:absolute; left:15px; top:14px; width:28px; height:28px;
  background:var(--green); color:#fff; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:14px;
}
.steps li strong { color: var(--green-dark); }

table.tbl { width:100%; border-collapse:collapse; margin:0 0 22px; font-size:14.5px; }
table.tbl th, table.tbl td { border:1px solid var(--border); padding:11px 13px; text-align:left; }
table.tbl th { background: var(--green-soft); }

.note {
  background: var(--coral-soft); border-left:6px solid var(--coral);
  border-radius:0 14px 14px 0; padding:15px 17px; margin:0 0 22px; font-size:14.5px;
}
.danger {
  background: var(--warn-soft); border-left:6px solid var(--warn);
  border-radius:0 14px 14px 0; padding:15px 17px; margin:0 0 22px; font-size:14.5px;
}
.danger strong { color: var(--warn); }

/* 声かけ例ボックス */
.saykake { background: var(--green-soft); border-radius:14px; padding:15px 17px; margin:0 0 22px; font-size:14.5px; }
.saykake .lbl { display:block; font-weight:800; color:var(--green-dark); font-size:13px; margin-bottom:5px; }
/* りはすけのひとこと（実話・体温） */
.hitokoto { background:#fbf7ee; border:1px solid #ece3cf; border-left:5px solid var(--gold); border-radius:0 14px 14px 0; padding:16px 18px; margin:0 0 22px; font-size:14.5px; line-height:1.85; }
.hitokoto .lbl { display:block; font-weight:800; color:var(--ink); font-size:13.5px; margin-bottom:6px; }

/* ⚠️ 商品PR枠：商品の精査が完了するまで全サイト非表示（2026-06-11）
   精査・ASP登録後、この1ブロックを削除すれば全PR枠が復活する */
.product-box, .result-card h3, .result-card .aff-grid, .result-card .aff-note { display: none !important; }

/* 強調の序列：通常＜太字（段落の要点・1段落1つ）＜マーカー（記事の主張・1〜2か所だけ） */
.article-body .mark {
  background: linear-gradient(transparent 56%, rgba(244,185,66,.5) 56%);
  font-weight: 800; padding: 0 .06em;
}

/* 選び方のめやす（OT視点の選定条件ボックス＝設計書6.5「選ぶ目を渡す」） */
.meyasu {
  background:#f3faf7; border:1.5px solid var(--green);
  border-radius:14px; padding:16px 18px; margin:0 0 22px; font-size:14.5px;
}
.meyasu .lbl { display:block; font-weight:800; color:var(--green-dark); font-size:13px; margin-bottom:9px; }
.meyasu ul { margin:0; padding-left:20px; }
.meyasu li { margin-bottom:7px; line-height:1.75; }
.meyasu li strong { color: var(--green-deep); }

.product-box {
  border:2px dashed var(--green); border-radius: var(--radius);
  background: var(--green-soft); padding:20px; margin: 28px 0;
}
.product-box .label { font-weight:800; color:var(--green-dark); font-size:13px; margin-bottom:10px; }
.product-box .placeholder {
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:16px; color:var(--ink-soft); font-size:13.5px; text-align:center;
}

.summary-box {
  background: var(--bg); border:1px solid var(--border); border-radius: var(--radius);
  padding:20px 22px; margin: 28px 0;
}
.summary-box h3 { margin:0 0 12px; color:var(--ink); border:0; padding:0; }
.summary-box ul { margin:0; padding-left:20px; }
.summary-box li { margin-bottom:7px; }

.article-disclaimer {
  font-size:13px; color:var(--ink-soft); border-top:1px solid var(--border);
  padding-top:20px; margin-top:32px; line-height:1.7;
}
.byline { font-weight:800; color:var(--green-dark); margin-top:8px; }
.refs { font-size:12px; color:var(--ink-soft); background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:13px 15px; margin:26px 0 0; line-height:1.75; }
.refs b { color:var(--ink); }
.refs a { color:var(--green-dark); word-break:break-all; }
.related { padding: 36px 0; }
.related h3 { font-size:17px; margin:0 0 14px; }

/* ---------- ヒーロー：ストーリー動画パネル ---------- */
.story-panel {
  position:relative; width:100%; max-width:620px; aspect-ratio: 16/10;
  border-radius:22px; overflow:hidden; box-shadow: var(--shadow-lg);
  background: linear-gradient(140deg,#1f7a6b,#0f4a41); margin:0 auto;
}
.story-panel::before {
  content:""; position:absolute; inset:-35%;
  background: radial-gradient(closest-side, rgba(47,174,152,.75), transparent 70%);
  animation: drift 16s ease-in-out infinite;
}
@keyframes drift {
  0%   { transform: translate(-8%,-6%) scale(1); }
  50%  { transform: translate(10%,9%) scale(1.18); }
  100% { transform: translate(-8%,-6%) scale(1); }
}
.story { position:absolute; inset:0; display:grid; place-items:center; padding:26px; text-align:center; }
.story-line {
  position:absolute; max-width:88%; color:#eafaf5; font-weight:800; line-height:1.65;
  font-size: clamp(17px, 4.4vw, 23px); opacity:0; transform: translateY(10px);
  animation: storyline 18s infinite;
}
.story-line.turn { color:#fff; }
.story-line.turn b { background: linear-gradient(transparent 58%, rgba(244,185,66,.55) 58%); padding:0 .08em; }
.story-line.resolve { font-size: clamp(22px, 6.2vw, 31px); color:#fff; }
.story-line.resolve b { color: var(--gold); }
.story-line:nth-child(1){ animation-delay:0s; }
.story-line:nth-child(2){ animation-delay:3s; }
.story-line:nth-child(3){ animation-delay:6s; }
.story-line:nth-child(4){ animation-delay:9s; }
.story-line:nth-child(5){ animation-delay:12s; }
.story-line:nth-child(6){ animation-delay:15s; }
@keyframes storyline {
  0%   { opacity:0; transform: translateY(10px); }
  3%   { opacity:1; transform: translateY(0); }
  14%  { opacity:1; transform: translateY(0); }
  17%  { opacity:0; transform: translateY(-8px); }
  100% { opacity:0; }
}
.story-progress { position:absolute; bottom:14px; left:0; right:0; display:flex; gap:6px; justify-content:center; z-index:2; }
.story-progress i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); }
.story-cap { margin:12px 0 0; font-size:12px; color:#cfe6df; text-align:center; }
@media (prefers-reduced-motion: reduce) {
  .story-line { animation:none; }
  .story-line.resolve { opacity:1; transform:none; }
  .story-panel::before { animation:none; }
}

/* ---------- モード切替（よむ / さがす） ---------- */
.mode-switch {
  display:inline-flex; background: var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:3px; gap:2px;
}
.mode-switch a {
  display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  color:var(--ink-soft); font-weight:800; font-size:13px; padding:7px 14px;
  border-radius:999px; white-space:nowrap; transition:.15s;
}
.mode-switch a.active { color:#fff; }
.mode-switch a.m-read.active { background: var(--green); }
.mode-switch a.m-find.active { background: var(--coral); }
.mode-switch a.m-sodan.active { background: #2f74a3; }
.mode-switch a.m-kurashi.active { background:#e23e86; }
.nav-logo { flex:0 0 auto; }
.mode-switch a.active .nav-logo path { stroke:#fff; }
.mode-switch a.active .nav-logo .nl-house { fill:#fff; }
.nav-plus { font-size:.72em; vertical-align:super; font-weight:900; color:#e23e86; -webkit-text-stroke:.5px #e23e86; margin-left:1px; }
.mode-switch a.active .nav-plus { color:#fff; -webkit-text-stroke-color:#fff; }
.mode-switch a.m-find::after,
.mode-switch a.m-sodan::after,
.mode-switch a.m-kurashi::after { content:"改装中"; font-size:11px; font-weight:600; opacity:.55; white-space:nowrap; }
.mode-switch a.active::after { opacity:.85; }
@media (max-width: 560px) {
  .logo-text small { display:none; }
  .logo-text { font-size:17px; }
  .logo-mark { width:40px; height:40px; }
  .logo-mark svg { width:40px; height:40px; }
  .mode-switch a { padding:6px 8px; font-size:11px; gap:2px; }
  .site-header .wrap { padding:0 12px; }
}
@media (max-width: 420px) {
  .logo-text { display:none; } /* 3モード時の幅確保。マークがロゴの役を果たす */
  .mode-switch a { padding:6px 9px; font-size:11.5px; }
}

/* ルビ（フリガナ）：高齢の読者にも読める大きさに */
ruby rt { font-size: .58em; color: var(--ink-soft); letter-spacing: .08em; }

/* 電話のじゅんび（そうだんリハ：さがす→整理する→かける） */
.denwa-prep { background:#f2f8fc; border:1.5px solid #3a8fbf; border-radius:18px; padding:20px 18px; margin:6px 0 26px; }
/* 今すぐ電話したい人への緊急ブロック（最上部・即効性） */
.dp-urgent { background:linear-gradient(160deg,#3a8fbf,#2f74a3); color:#fff; border-radius:16px; padding:18px 18px 20px; margin-bottom:18px; box-shadow:0 8px 22px rgba(47,116,163,.28); }
.dp-urgent .u-head { font-weight:800; font-size:17px; margin-bottom:6px; display:flex; align-items:center; gap:7px; }
.dp-urgent .u-sub { font-size:13.5px; color:#eaf4fa; margin:0 0 12px; line-height:1.7; }
.dp-urgent .u-say { background:#fff; color:var(--ink); border-radius:11px; padding:12px 14px; font-size:14px; line-height:1.7; margin:0 0 12px; }
.dp-urgent .u-say b { color:#2f74a3; }
.dp-urgent .dp-search input { border-color:rgba(255,255,255,.5); }
.dp-urgent .u-btn { background:#fff; color:#2f74a3; border:0; border-radius:999px; padding:11px 18px; font-family:inherit; font-weight:800; font-size:14px; cursor:pointer; white-space:nowrap; }
.dp-urgent .u-btn:hover { background:#eaf4fa; }
.dp-urgent .u-note { font-size:12px; color:#dcebf4; margin:10px 0 0; }
.dp-divider { text-align:center; font-size:12.5px; font-weight:700; color:var(--ink-soft); letter-spacing:.05em; margin:4px 0 14px; }
/* 相談先＝包括／市役所 の同列2カード */
.dp-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 4px; }
/* subgrid で左右カードの行高を共有し、選択欄とボタンの高さを揃える */
.dp-card { background:#fff; border:1.5px solid #cfe0ec; border-radius:14px; padding:14px 14px 16px; display:grid; grid-template-rows:subgrid; grid-row:span 6; align-content:start; }
.dp-card-h { font-weight:800; font-size:15px; color:#2f74a3; margin-bottom:4px; }
.dp-card-tag { font-size:11px; font-weight:700; color:#fff; background:#3a8fbf; border-radius:999px; padding:2px 9px; justify-self:start; align-self:start; margin-bottom:8px; }
.dp-card-d { font-size:13px; color:var(--ink-soft); line-height:1.65; margin:0 0 11px; }
.dp-card select, .dp-card input { width:100%; font-family:inherit; font-size:14px; border:1.5px solid var(--border); border-radius:10px; padding:9px 11px; background:#fdfdfb; color:var(--ink); margin-bottom:8px; }
.dp-card .dp-btn { width:100%; }
.dp-card .dp-note { margin:8px 0 0; }
.dp-safe { background:#fffaf0; border:1.5px solid #f0d9a8; border-radius:12px; padding:13px 15px; font-size:13.5px; line-height:1.75; margin:0 0 14px; color:var(--ink); }
.dp-safe strong { color:#b07a18; }
.dp-sayline { background:#fff; border-radius:11px; padding:12px 14px; font-size:14px; line-height:1.7; margin:12px 0 0; }
.dp-sayline b { color:#2f74a3; }
@media (max-width:560px){ .dp-2col { grid-template-columns:1fr; } }
.denwa-prep .dp-head { font-weight:800; color:#2f74a3; font-size:16px; margin-bottom:14px; }
.dp-step { background:#fff; border:1px solid #d8e6f0; border-radius:14px; padding:15px 16px; margin-bottom:12px; }
.dp-step h3 { margin:0 0 8px; font-size:15px; color:#2f74a3; border:0; padding:0; }
.dp-step p { font-size:14px; margin:0 0 10px; }
.dp-search { display:flex; flex-wrap:wrap; gap:8px; }
.dp-search input, .dp-grid input, .dp-grid select, .dp-free, .dp-out {
  font-family:inherit; font-size:14.5px; border:1.5px solid var(--border); border-radius:10px;
  padding:9px 12px; background:#fdfdfb; color:var(--ink);
}
.dp-search input { flex:1; min-width:150px; }
.dp-btn { background:#2f74a3; color:#fff; border:0; border-radius:999px; padding:10px 16px;
  font-family:inherit; font-weight:800; font-size:13.5px; cursor:pointer; }
.dp-btn:hover { background:#255f87; }
.dp-btn.ghost { background:#fff; color:#2f74a3; border:1.5px solid #3a8fbf; }
.dp-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.dp-grid label { font-size:12.5px; font-weight:700; color:var(--ink-soft); display:block; margin-bottom:3px; }
.dp-checks { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.dp-checks label { display:inline-flex; align-items:center; gap:5px; background:#fdfdfb; border:1.5px solid var(--border);
  border-radius:999px; padding:7px 13px; font-size:13px; cursor:pointer; user-select:none; }
.dp-checks label:has(input:checked) { background:#e7f1f8; border-color:#3a8fbf; color:#2f74a3; font-weight:700; }
.dp-checks input { accent-color:#2f74a3; }
.dp-free { width:100%; min-height:54px; resize:vertical; margin-bottom:10px; }
.dp-out { width:100%; min-height:150px; resize:vertical; margin:10px 0 8px; line-height:1.8; }
.dp-note { font-size:12px; color:var(--ink-soft); margin:8px 0 0; }
.dp-privacy { font-size:11.5px; color:var(--ink-soft); margin-top:10px; text-align:center; }
@media (max-width:560px){ .dp-grid { grid-template-columns:1fr; } }

/* ---------- アフィリエイト商品カード ---------- */
.aff-grid {
  display:grid; gap:10px; grid-template-columns:repeat(3, 1fr);
  align-items:stretch; margin: 6px 0 4px;
}
@media (max-width:480px) { .aff-grid { grid-template-columns:1fr 1fr; } }
.aff-card {
  display:flex; flex-direction:column; min-width:0;
  background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:10px; box-shadow: var(--shadow); transition:.15s;
}
.aff-card:hover { border-color: var(--coral); transform: translateY(-2px); }
.aff-card .thumb {
  width:100%; aspect-ratio:4/3; border-radius:10px; background: var(--green-soft);
  display:grid; place-items:center; font-size:40px; margin-bottom:8px;
}
.aff-card .info { flex:1; min-width:0; display:flex; flex-direction:column; }
.aff-card .nm { font-weight:800; font-size:13px; margin:0 0 3px; line-height:1.45; }
.aff-card .ds { font-size:11.5px; color:var(--ink-soft); margin:0 0 7px; line-height:1.55; }
.aff-card .price { font-weight:800; color:var(--coral); font-size:13px; margin-top:auto; }
.aff-card .price small { color:var(--ink-soft); font-weight:600; font-size:10.5px; }
.btn-aff {
  display:block; text-align:center; margin-top:7px; background:var(--coral); color:#fff;
  text-decoration:none; font-weight:800; font-size:11px; padding:7px 6px; border-radius:999px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.btn-aff:hover { background:#e16a40; }
.aff-note { font-size:11.5px; color:var(--ink-soft); margin:12px 0 0; line-height:1.6; }

/* ---------- さがすリハ（ファインダー） ---------- */
.finder-hero {
  position:relative; overflow:hidden; color:#fff; text-align:center;
  padding: 56px 0 88px;
  background:
    radial-gradient(820px 460px at 85% -12%, #f4956f 0%, transparent 55%),
    linear-gradient(160deg, #ef7a52 0%, #d4562f 60%, #bf4525 100%);
}
.finder-hero::before, .finder-hero::after { content:""; position:absolute; border-radius:50%; background:#fff; }
.finder-hero::before { width:300px; height:300px; top:-120px; left:-90px; opacity:.13; }
.finder-hero::after { width:180px; height:180px; bottom:34px; right:-50px; opacity:.10; }
.finder-hero .wrap { position:relative; z-index:2; }
.finder-hero h1 { font-size: clamp(30px, 6vw, 42px); margin:0 0 12px; font-weight:800; letter-spacing:.01em; }
.finder-hero p { margin:0 auto; color:#ffe7df; font-size:16px; max-width:30em; }
.finder { padding: 34px 0 60px; }
.finder-step .q { font-size:18px; font-weight:800; margin:0 0 14px; text-align:center; }
.finder-chips { display:flex; flex-wrap:wrap; gap:11px; justify-content:center; }
.finder-chips button {
  border:1.5px solid var(--border); background:#fff; color:var(--ink);
  border-radius:14px; padding:14px 18px; font-size:15px; font-weight:700;
  cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:9px; transition:.15s;
}
.finder-chips button:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--shadow); }
.finder-chips button .ic { font-size:22px; }

/* 困りごとチップ：単色アイコンのカード型グリッド */
#chipsProblem { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#chipsProblem button {
  flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:20px 12px; border-radius:16px; font-size:14px; line-height:1.45; color:var(--ink);
}
#chipsProblem button:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
#chipsProblem .ci {
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--coral-soft); color:var(--coral); transition:.15s;
  font-size:28px; line-height:1;
}
#chipsProblem button:hover .ci { background:var(--coral); color:#fff; }
#chipsProblem .ci svg { width:30px; height:30px; display:block; }
#chipsProblem .cl { display:block; font-weight:700; }
@media (min-width:600px){ #chipsProblem { grid-template-columns:repeat(3,1fr); } }

.finder-result { margin-top: 30px; }
.finder-result.hidden { display:none; }
.finder-step.hidden { display:none; }
.result-card {
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow);
}
.result-card .rc-head { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.result-card .rc-emoji { font-size:30px; }
.result-card h2 { margin:0; font-size:20px; border:0; padding:0; }
.result-card .why {
  background: var(--green-soft); border-radius:14px; padding:14px 16px;
  font-size:14.5px; margin:14px 0 18px;
}
.result-card .why b { color: var(--green-dark); }
.result-card h3 { font-size:15px; margin:0 0 10px; color:var(--ink); }
.result-more { margin-top:18px; text-align:center; }

/* ---------- さがすリハ：レベル質問・レベルマップ ---------- */
.lvq-chips { display: flex; flex-direction: column; gap: 8px; }
.lvq-chips button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.55;
  background: #fff; border: 1.5px solid var(--border); border-radius: 13px;
  padding: 11px 14px; transition: border-color .15s, box-shadow .15s;
  border-left: 7px solid var(--lvc, var(--border));
}
.lvq-chips button:hover { border-color: var(--green); box-shadow: 0 4px 14px rgba(20,86,76,.12); }
.lvq-chips .lvn {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-deep);
  font-size: 12.5px; font-weight: 800; display: grid; place-items: center;
}
.lvq-skip { text-align: center; margin: 14px 0 0; font-size: 13px; }
.lvq-skip a { color: var(--ink-soft); }

/* ヒヤリ・チェック（5段階の画面内トグル） */
.lv-hiyari {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--warn); line-height: 1.55;
  background: #fff; border: 1.5px dashed var(--warn);
  border-radius: 13px; padding: 10px 14px; margin-top: 10px;
  transition: background .15s;
}
.lv-hiyari .lvn {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  background: #fff; border: 1.5px solid var(--warn); color: var(--warn);
  font-size: 14px; font-weight: 800; display: grid; place-items: center;
}
.lv-hiyari.on { background: var(--warn-soft); border-style: solid; }
.lv-hiyari.on .lvn { background: var(--warn); color: #fff; }
.lvmap .lv-hiyari { font-size: 12.5px; padding: 8px 11px; }

/* 項目右の道具サムネ（実物写真プレースホルダ・ASP後に商品画像へ） */
.lv-thumbs { margin-left: auto; display: flex; gap: 4px; flex: none; }
.lv-thumbs span {
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.07);
  display: grid; place-items: center; font-size: 15px;
}
.lvq-chips .lv-thumbs span { background: var(--green-soft); border: none; }
.lvmap-row .lv-thumbs span { width: 22px; height: 22px; font-size: 13px; }
.lvq-chips button .lvtext, .lvmap-row .lvtext { flex: 1; min-width: 0; }

.lvmap { margin: 18px 0 6px; }
.lvmap-title { font-size: 15px; font-weight: 800; color: var(--green-deep); margin: 0 0 4px; }
.lvmap-sub { font-size: 12px; color: var(--ink-soft); margin: 0 0 10px; }
.lvmap-row {
  position: relative;
  display: flex; align-items: center; gap: 9px; width: 100%;
  text-align: left; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.5;
  background: #fcfbf7; border: 1.5px solid var(--border); border-radius: 11px;
  border-left: 7px solid var(--lvc, var(--border));
  padding: 8px 11px; margin: 4px 0; transition: border-color .15s;
}
.lvmap-row:hover { border-color: var(--green); }
.lvmap-row.here {
  background: #fff; border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(244,185,66,.3); font-weight: 700;
}
.lvmap-row .lvn {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-deep);
  font-size: 12px; font-weight: 800; display: grid; place-items: center;
}
.lvmap-here-pill {
  position: absolute; top: -10px; right: 10px;
  font-size: 10.5px; font-weight: 800; color: #fff;
  background: var(--coral); border-radius: 999px; padding: 1px 9px;
  box-shadow: 0 2px 8px rgba(239,122,82,.45);
}
.lv-note {
  background: var(--green-soft); border-radius: 11px;
  padding: 10px 13px; font-size: 13px; line-height: 1.75; margin: 10px 0 0;
}
.lv-note b { color: var(--green-deep); }
.lv-note.warn { background: var(--warn-soft); }
.lv-note.warn b { color: var(--warn); }
.lv-summary {
  display: inline-block; font-size: 12.5px; font-weight: 800;
  color: var(--green-deep); background: var(--green-soft);
  border-radius: 999px; padding: 3px 13px; margin: 0 0 8px;
}
.lv-summary .hiyari { color: var(--warn); }

/* レベルバー（横ドット＋吹き出し。旧・縦リスト .lvmap-row は LV_UI='list' で復帰可 */
.lvbar-caption { display:flex; justify-content:space-between; font-size:10px; color:var(--ink-soft); margin:0 6px; }
.lvbar { display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin:6px 2px 0; position:relative; }
.lvbar::before {
  content:''; position:absolute; left:8%; right:8%; top:18px; height:4px; border-radius:2px;
  background:linear-gradient(90deg,#2f9e8b,#8db35e,#d9a93e,#e58a55,#cf5f43); transform:translateY(-50%);
  opacity:.22;
}
.lvbar-dot {
  position:relative; z-index:1; flex:1; min-width:0; padding:0; border:0; background:transparent;
  font-family:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px;
}
.lvbar-num {
  width:36px; height:36px; border-radius:50%; border:2px solid var(--border); background:#fff; color:var(--ink-soft);
  font-size:14px; font-weight:800; display:grid; place-items:center;
  transition:transform .15s, border-color .15s, background .15s, color .15s;
}
.lvbar-name { font-size:10.5px; font-weight:700; color:var(--ink-soft); text-align:center; line-height:1.25; transition:color .15s; }
.lvbar-dot:hover .lvbar-num { border-color:var(--lvc); color:var(--lvc); }
.lvbar-dot:active .lvbar-num { transform:scale(.9); }
.lvbar-dot.here .lvbar-num { background:var(--lvc); border-color:var(--lvc); color:#fff; transform:scale(1.16); box-shadow:0 4px 12px rgba(0,0,0,.22); }
.lvbar-dot.here .lvbar-name { color:var(--lvc); font-weight:800; }
/* 未選択のあいだ、左から右へ順番にぽよんと波打って「押せる」ことを知らせる */
.lvbar.unset .lvbar-num {
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  animation: lvNudge 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * .16s);
}
@keyframes lvNudge {
  0%, 16%, 100% { transform:scale(1); }
  8% { transform:scale(1.16); border-color:var(--lvc); }
}
@media (prefers-reduced-motion: reduce) { .lvbar.unset .lvbar-num { animation:none; } }
@media (max-width:560px){ .lvbar-name{ font-size:9.5px; } .lvbar-num{ width:32px; height:32px; font-size:13px; } }
.lvbar-bubble {
  position:relative; font-size:13.5px; font-weight:700; line-height:1.7; margin:12px 0 0;
  background:#fff; border:1.5px solid var(--lvc); border-radius:11px; padding:8px 12px; text-align:left;
}
.lvbar-bubble::before {
  content:''; position:absolute; top:-7px; left:var(--tail); width:11px; height:11px;
  background:#fff; border-left:1.5px solid var(--lvc); border-top:1.5px solid var(--lvc);
  transform:translateX(-50%) rotate(45deg);
}
.lvbar-bubble .nm {
  display:table; font-size:10.5px; font-weight:800; color:#fff; background:var(--lvc);
  border-radius:999px; padding:2px 10px; margin:0 0 3px; white-space:nowrap; line-height:1.6;
}
.lvbar-bubble .tx { display:block; }
.lvbar-bubble small { display:block; font-weight:600; font-size:11.5px; color:var(--ink-soft); }
.lvbar-bubble.notail::before { display:none; }
.lvbar-hint { display:block; font-weight:600; font-size:12.5px; color:var(--ink-soft); text-align:center; }
.lvbar-warn {
  font-size:12px; font-weight:600; color:var(--warn); line-height:1.6;
  background:var(--warn-soft); border-radius:9px; padding:7px 11px; margin:8px 0 0;
}
.lvbar-warn b { font-weight:800; }
.lvbar-why {
  margin-top:9px; padding-top:9px; border-top:1px dashed var(--border);
  font-weight:600; font-size:12.5px; line-height:1.75;
}
.lvbar-why b { color:var(--green-deep); }
.lvbar-foot { display:block; margin-top:8px; font-size:10.5px; font-weight:600; color:var(--ink-soft); }
.sit-chip.hy { border-style:dashed; color:var(--ink-soft); }
.sit-chip.hy.on {
  background:var(--warn-soft); border:1.5px solid var(--warn); color:var(--warn);
  box-shadow:0 3px 10px rgba(192,73,47,.18);
}

/* 統合「いまの様子」枠（場面チップ＋段階バー） */
.yousu { margin:14px 0 4px; }
.yousu-q { font-size:13.5px; font-weight:800; color:var(--ink); margin:14px 0 7px; line-height:1.6; }
.yousu-q small { font-weight:600; font-size:11.5px; color:var(--ink-soft); }
.sit-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sit-chip {
  font-family:inherit; cursor:pointer; font-size:13px; font-weight:700; color:var(--ink);
  background:#fcfbf7; border:1.5px solid var(--border); border-radius:999px; padding:7px 14px;
  transition:border-color .15s;
}
.sit-chip:hover { border-color:var(--green); }
.sit-chip.on {
  background:var(--green-soft); border-color:var(--green); color:var(--green-deep);
  box-shadow:0 3px 10px rgba(47,158,139,.18);
}
.sit-hint {
  text-align:center; font-size:13px; color:var(--ink-soft); background:var(--bg);
  border:1.5px dashed var(--border); border-radius:12px; padding:14px; margin:14px 0 0;
}
.renov {
  text-align:center; font-size:13px; color:var(--ink); line-height:1.8;
  background:var(--bg); border:1.5px dashed var(--border); border-radius:12px;
  padding:14px 16px; margin:14px 0 0;
}
.renov b { color:var(--green-deep); }
.renov small { display:block; margin-top:6px; font-size:11.5px; color:var(--ink-soft); }
.result-more a { font-weight:800; text-decoration:none; color:var(--green-dark); }
.finder-back { display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:var(--ink-soft); font-weight:700; font-size:14px; cursor:pointer; margin-bottom:14px; font-family:inherit; }

/* さがすリハ ランディング用セクション（オレンジ基調） */
.sec-coral { background: linear-gradient(180deg,#fbe9e3,#f7f5ef); border-top:1px solid var(--border); }
.feat-grid { display:grid; gap:16px; grid-template-columns:1fr; }
.feat { background:#fff; border:1px solid var(--border); border-radius:18px; padding:26px 20px; box-shadow:var(--shadow); text-align:center; }
.feat .n { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#ef7a52,#d4562f); color:#fff; display:grid; place-items:center; font-weight:800; font-size:19px; margin:0 auto 14px; box-shadow:0 6px 16px rgba(224,122,95,.4); }
.feat h3 { margin:0 0 6px; font-size:16.5px; }
.feat p { margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
.trust { background:#fff; border:1px solid var(--border); border-radius:22px; padding:24px 26px; box-shadow:var(--shadow); max-width:620px; margin:0 auto; }
.trust ul { list-style:none; margin:0; padding:0; }
.trust li { position:relative; padding:11px 0 11px 36px; border-bottom:1px solid var(--border); font-size:14.5px; }
.trust li:last-child { border-bottom:0; }
.trust li::before { content:"✓"; position:absolute; left:2px; top:11px; width:24px; height:24px; background:var(--coral); color:#fff; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; }
.trust b { color: var(--ink); }
@media (min-width:700px){ .feat-grid { grid-template-columns:repeat(3,1fr); } }

/* ステップインジケータ */
.steps-indicator { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 28px; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; }
.steps-indicator .si { display:inline-flex; align-items:center; gap:7px; }
.steps-indicator .si .n { width:24px; height:24px; border-radius:50%; background:#cfcabb; color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; }
.steps-indicator .si.active { color:var(--ink); font-weight:800; }
.steps-indicator .si.active .n { background:var(--coral); }
.steps-indicator .si.done .n { background: var(--green); }
.steps-indicator .sep { opacity:.4; }

/* コーラル版CTA（さがすリハ誘導） */
.flagship.find { background: linear-gradient(135deg,#ef7a52,#d4562f); }
.flagship.find .eyebrow { color:#fff; opacity:.92; }
.flagship.find .btn { background:#fff; color: var(--coral); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.flagship.find .btn:hover { background:#fff5f1; }

/* 状況選択ボタン（少し小さめ・左寄せ可） */
.finder-chips.sub button { font-size:14.5px; padding:13px 17px; }

/* ---------- レスポンシブ（PC幅） ---------- */
@media (min-width: 760px) {
  .hero { padding: 80px 0 120px; }
  .hero-grid { grid-template-columns: .9fr 1.1fr; gap: 44px; }
  .hero-copy h1 { font-size: 44px; line-height:1.35; }
  .hero-copy .lead { font-size: 17px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .section-title { font-size: 30px; }
  .article-head h1 { font-size:32px; }
}