/* =========================================================
   まなび 記事コンポーネント用CSS（旧 style v4 から移植）
   雛形の :root（緑テーマ）に不足する変数＋独自クラスのみ。
   裸要素セレクタ(article,h2,p...)は雛形の .article-body 側を使うため入れない。
   ========================================================= */
:root{
  --text:#243033; --text-soft:#4a5658; --card:#ffffff;
  --bg:#f6faf9; --bg-2:#eef4f4; --line-soft:#eef2f2;
  --cta:#0ea5e9; --cta-2:#38bdf8; --cta-dark:#0284c7;
  --rank-gold:#c39a2e; --rank-gold-soft:#fbf6e7;
  --hl:linear-gradient(transparent 62%, #cdeef0 62%);
  --r:8px; --r-sm:6px;
  --shadow-sm:0 1px 2px rgba(20,40,45,.05), 0 1px 3px rgba(20,40,45,.05);
  --shadow-md:0 2px 6px rgba(20,40,45,.05), 0 6px 20px rgba(20,40,45,.07);
  --shadow-cta:0 6px 16px rgba(14,165,233,.30);
}

/* PR表記 */
.pr-notice { background: var(--bg-2); border-radius: var(--r-sm); font-size: 12.5px; color: var(--muted); padding: 9px 14px; margin: 16px 0; }

/* 強調ハイライト（記事本文内） */
.article-body strong { background: var(--hl); color: inherit; font-weight: 700; }

/* 共感ボックス */
.empathy { background: linear-gradient(180deg, #f0f8f3, var(--accent-soft)); border: 1px solid #dcefe4; border-radius: var(--r-sm); padding: 16px 18px; margin: 18px 0; font-size: 15px; }
.empathy li { margin-bottom: 4px; }

/* 注意ボックス */
.note { background: #fdf7ee; border: 1px solid #f2e2c8; border-radius: var(--r-sm); padding: 13px 16px; font-size: 14px; margin: 16px 0; }

/* 比較表 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.table-hint { font-size: 12px; color: var(--muted); text-align: right; margin: 0 0 6px; }
table.compare { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13.5px; background: var(--card); }
table.compare th, table.compare td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); padding: 12px 10px; text-align: center; vertical-align: middle; }
table.compare tr td:last-child, table.compare tr th:last-child { border-right: none; }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: none; }
table.compare thead th { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 700; letter-spacing: .02em; border-color: rgba(255,255,255,.18); }
table.compare tbody th { background: #f6f4ee; font-weight: 700; white-space: nowrap; }
table.compare tbody tr:nth-child(even) td { background: #faf9f5; }
table.compare .best th, table.compare .best td { background: var(--rank-gold-soft); font-weight: 700; }
table.compare .best th:first-child { box-shadow: inset 4px 0 0 var(--rank-gold); }

/* 段（ティア）見出し */
.tier-head { font-size: 17px; font-weight: 800; margin: 34px 0 10px; padding: 10px 16px; background: linear-gradient(180deg, #f0f8f3, var(--accent-soft)); border: 1px solid #dcefe4; border-left: 5px solid var(--accent); border-radius: var(--r-sm); color: var(--accent-dark); }
.tier-head.tier-2 { background: var(--bg-2); border-color: var(--line); border-left-color: #b9b5aa; color: #5c584f; }
.tier-note { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }

/* 各社カード */
.service-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; margin: 22px 0; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease; border-top: 3px solid var(--accent); }
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-card.rank-1 { border-color: #ecdca6; border-top-color: var(--rank-gold); background: linear-gradient(180deg, var(--rank-gold-soft), #fff 60%); box-shadow: 0 2px 6px rgba(160,130,40,.08), 0 8px 24px rgba(160,130,40,.10); }
.rank-badge { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(160deg, var(--accent-2), var(--accent-dark)); border-radius: 5px; padding: 4px 11px; margin-bottom: 8px; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(47,143,107,.24); }
.rank-1 .rank-badge { background: linear-gradient(160deg, #d7ac3a, var(--rank-gold)); box-shadow: 0 2px 6px rgba(160,130,40,.3); }
.service-card h3 { border: none; margin-top: 2px; font-size: 19.5px; font-weight: 800; }
.spec { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0 14px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.spec th, .spec td { border-bottom: 1px solid var(--line-soft); padding: 9px 12px; text-align: left; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: none; }
.spec th { background: #f6f4ee; white-space: nowrap; width: 7.5em; font-weight: 700; color: var(--text-soft); }
.good { padding-left: 0; list-style: none; }
.good li { position: relative; padding-left: 1.7em; margin-bottom: 8px; }
.good li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 900; }
.fit { background: var(--accent-soft); border-radius: var(--r-sm); padding: 12px 15px; font-size: 14.5px; margin: 12px 0; border: 1px solid #dcefe4; }
.fit-title { font-weight: 800; color: var(--accent-dark); display: block; margin-bottom: 4px; }

/* CTAボタン */
.cta-btn { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; background: linear-gradient(160deg, var(--cta-2), var(--cta)); color: #fff !important; font-weight: 800; font-size: 16.5px; letter-spacing: .01em; text-decoration: none; border-radius: 999px; padding: 16px 22px; margin: 16px auto 6px; max-width: 440px; box-shadow: var(--shadow-cta); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.cta-btn:not(.pending)::after { content: "→"; font-weight: 700; transition: transform .15s ease; }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(224,112,58,.4); filter: saturate(1.05); }
.cta-btn:hover:not(.pending)::after { transform: translateX(3px); }
.cta-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(224,112,58,.3); }
.cta-sub { text-align: center; font-size: 12px; color: var(--muted); margin: 0; }
.cta-btn.pending { background: #c3bfb4; color: #fff !important; box-shadow: none; pointer-events: none; cursor: default; }
.cta-btn.pending::after { content: ""; }

/* LINE誘導 */
.line-box { background: linear-gradient(180deg, #eefaf0, #e4f6e6); border: 1px solid #bfe6c3; border-radius: var(--r); padding: 22px 20px; margin: 30px 0; text-align: center; box-shadow: var(--shadow-sm); }
.line-box .cta-btn { background: linear-gradient(160deg, #14cf63, #06b752); box-shadow: 0 6px 16px rgba(6,183,82,.32); }
.line-box .cta-btn:hover { box-shadow: 0 10px 24px rgba(6,183,82,.4); }

/* FAQ */
details { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 16px; margin: 10px 0; background: var(--card); box-shadow: var(--shadow-sm); transition: box-shadow .15s ease; }
details[open] { box-shadow: var(--shadow-md); }
summary { font-weight: 700; cursor: pointer; padding: 12px 24px 12px 4px; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 800; font-size: 20px; transition: transform .2s ease; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { margin: 4px 0 12px; font-size: 14.5px; color: var(--text-soft); }

/* 目次 */
.toc { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 20px 16px 18px; font-size: 14.5px; }
.toc-title { font-weight: 800; margin-bottom: 8px; color: var(--text); }
.toc ol { margin: 0; padding-left: 1.4em; }
.toc li { margin-bottom: 4px; }
.toc a { color: var(--accent-dark); text-decoration: none; }
.toc a:hover { text-decoration: underline; }