/*
 * 既存のツール・記事ページを、新しいデザインの決まり(/shell.css の --sp-*)に合わせるための上書き。
 * 見出し=Zen Kaku Gothic New、色の面(薄い藍・薄いグレー・黄色)、角丸のカード(14〜20px)、丸い端のボタン(999px・高さ44px以上)、
 * 線のアイコンを角丸10pxの薄い色の下地に置く見出し。影・矢印・絵文字は使わない。広告(.affiliate-*)の見た目は変えない。
 * 各ページの <head> で、/shell.css のあとに読み込む。
 */
:root {
  --u-icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4F8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E");
  --u-icon-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4F8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --u-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4F8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
  --u-icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4F8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}

/* ===== 見出し ===== */
h1, h2:not(.affiliate-heading), h3 { font-family: var(--sp-font-head); color: var(--sp-heading); }
h1 { font-weight: 900; }
h2:not(.affiliate-heading), h3 { font-weight: 700; }

/* アイコン付きの見出し(角丸10pxの薄い藍の下地+線のアイコン) */
.article-body h2:not(.affiliate-heading), .guide-heading h2, .about-section h2, .planner h2, .result h2, .planner-card h2, .result-heading h2, .block-title, .result-title, .section h2, .exam-date-box h2 {
  display: flex; align-items: center; gap: 12px; border-bottom: 0; padding-bottom: 0; letter-spacing: 0;
}
.article-body h2:not(.affiliate-heading)::before, .guide-heading h2::before, .about-section h2::before, .planner h2::before, .result h2::before, .planner-card h2::before, .result-heading h2::before, .block-title::before, .result-title::before, .section h2::before, .exam-date-box h2::before {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: var(--sp-r-icon); background: var(--sp-icon-bg) var(--u-icon-doc) center / 22px 22px no-repeat;
}
.planner h2::before, .planner-card h2::before, .block-title::before { background-image: var(--u-icon-sliders); }
.result h2::before, .result-heading h2::before, .result-title::before { background-image: var(--u-icon-check); }
.exam-date-box h2::before { background-image: var(--u-icon-cal); }
.cta-card h2::before, .sources h2::before, .related h2::before, .about-article h2::before { display: none; }
.article-body h2:not(.affiliate-heading) { font-size: 1.4rem; line-height: 1.45; }

/* ===== ボタン(丸い端・高さ44px以上・矢印なし) ===== */
.cta-button, .primary-button, .secondary-button, .btn, .adjust-button {
  min-height: var(--sp-btn-h); border-radius: var(--sp-r-btn); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transform: none;
}
.cta-button, .primary-button, .btn { border: 1px solid var(--sp-indigo); background: var(--sp-indigo); color: #fff; padding: 0 26px; font-weight: 700; }
.cta-button:hover, .primary-button:hover, .btn:hover { background: var(--sp-indigo-dark); color: #fff; }
.primary-button { width: 100%; }
.secondary-button, .btn.ghost, .adjust-button { border: 2px solid var(--sp-indigo); background: #fff; color: var(--sp-indigo); padding: 0 20px; font-weight: 700; }
.secondary-button:hover, .btn.ghost:hover, .adjust-button:hover { background: var(--sp-indigo-bg); color: var(--sp-indigo-dark); }
.text-button { min-height: var(--sp-btn-h); }
.article-entry .cta-button { border-radius: var(--sp-r-btn); padding: 0 26px; min-height: 48px; }
input, select, textarea { border-radius: var(--sp-r-icon); }
input[type=checkbox], input[type=radio] { border-radius: revert; }

/* ===== 記事 ===== */
.article-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.45; letter-spacing: 0; }
.answer-box { padding: 20px 24px; border: 2px solid #D5DEEC; border-radius: var(--sp-r-card); background: var(--sp-indigo-bg); }
.answer-box .answer-label { color: var(--sp-indigo); font-weight: 700; }
.note-box, .method-box { padding: 14px 18px; border: 1px solid var(--sp-rule); border-left: 1px solid var(--sp-rule); border-radius: var(--sp-r-card); background: var(--sp-gray-bg); color: var(--sp-text); }
.warning-box { padding: 14px 18px; border: 1px solid #F0DC8A; border-left: 1px solid #F0DC8A; border-radius: var(--sp-r-card); background: var(--sp-yellow-bg-soft); }
.table-wrap { border: 1px solid var(--sp-rule); border-radius: var(--sp-r-card); }
.data-table thead th { background: var(--sp-gray-bg); }
.formula { border: 2px solid #D5DEEC; border-radius: var(--sp-r-card); background: var(--sp-indigo-bg); color: var(--sp-heading); }
.step-list li::before { border: 0; border-radius: 50%; background: var(--sp-indigo); color: #fff; }
.cta-card { padding: 22px 26px; border: 2px solid #D5DEEC; border-left: 2px solid #D5DEEC; border-radius: var(--sp-r-card-lg); background: var(--sp-indigo-bg); }
.cta-card h2 { font-size: 1.2rem; }
.related-card, .side-nav { border-radius: var(--sp-r-card); }
.related-card:hover { border-color: var(--sp-indigo); }
.side-nav { border: 1px solid var(--sp-rule); border-left: 1px solid var(--sp-rule); background: #fff; padding: 16px 18px; }
.breadcrumbs a { color: var(--sp-muted); }

/* 休止の案内など(exam-status.js が挿入する枠) */
.exam-notice { border-radius: var(--sp-r-card); background: var(--sp-yellow-bg-soft); border: 1px solid #F0DC8A; border-left-width: 1px; }
.tool-form, .calc-box, .tool-warning, .switch-note { border-radius: var(--sp-r-card); }
.tool-form { background: var(--sp-gray-bg); }
.tool-result .verdict { border-radius: var(--sp-r-card); }
.calc-result { border-radius: var(--sp-r-icon); background: var(--sp-yellow-bg); border-left: 0; }

/* ===== 計画ツール(宅建・簿記)・ITパスポート・引っ越し: 入力・結果のカード ===== */
.planner, .result, .planner-card, .result-section, .exam-date-box, .share-box, .share-block { border-radius: var(--sp-r-card-lg); }
.planner, .planner-card { border: 2px solid #D5DEEC; background: #fff; }
.exam-date-box { border: 1px solid #D5DEEC; border-left: 1px solid #D5DEEC; background: var(--sp-indigo-bg); }
.result, .result-section { border: 2px solid #D5DEEC; }
.today-box, .today-card { border: 0; border-radius: var(--sp-r-card); background: var(--sp-yellow-bg); }
.today-box .today-task, .today-card h3 { background: var(--sp-highlight); border-radius: 4px; }
.today-label { color: #7A5C00; }
.verdict-box { border-radius: var(--sp-r-card); border: 1px solid var(--sp-rule); background: var(--sp-gray-bg); }
.verdict-ok { background: #EAF5EF; border-color: #B9DEC9; }
.verdict-ng { background: #FDECEA; border-color: #F2B8B3; }
.stat, .stat-card { border-radius: var(--sp-r-card); background: var(--sp-gray-bg); border: 1px solid var(--sp-rule); }
.stat-card.recommended-date { background: var(--sp-indigo-bg); border-color: var(--sp-indigo); }
.panel, .notice, .adjustment-card { border-radius: var(--sp-r-card); }
.feasibility-badge { border-radius: var(--sp-r-btn); }
.calendar-controls button, .calendar-day, .selected-date-chip { border-radius: var(--sp-r-icon); }
.guide-card { border: 1px solid var(--sp-rule); border-radius: var(--sp-r-card); background: #fff; padding: 16px 20px; }
.guide-card:hover { border-color: var(--sp-indigo); background: #fff; }

/* 引っ越し */
.answer { padding: 18px 22px; border: 2px solid #D5DEEC; border-left: 2px solid #D5DEEC; border-radius: var(--sp-r-card); background: var(--sp-indigo-bg); }
.note { padding: 12px 18px; border: 1px solid var(--sp-rule); border-left: 1px solid var(--sp-rule); border-radius: var(--sp-r-card); background: var(--sp-gray-bg); }
.today-box.moving, #today-box { border-radius: var(--sp-r-card); }
.deadline-box { border: 1px solid #F0DC8A; border-radius: var(--sp-r-card); background: var(--sp-yellow-bg-soft); }
.bucket h3 { border-bottom: 0; padding: 8px 14px; border-radius: var(--sp-r-icon); background: var(--sp-icon-bg); color: var(--sp-indigo-dark); }
.task-official { border-left: 3px solid var(--sp-indigo); }
table.grid { border-radius: var(--sp-r-card); }
.pr-tag, .ad-line, .ad-disclosure { border-radius: var(--sp-r-btn); }
.control, .share-row input { border-radius: var(--sp-r-icon); }
.choice input { accent-color: var(--sp-indigo); }

@media (max-width: 640px) {
  .cta-card { padding: 18px 16px; }
}

/* planner.css(.planner-shell 配下)の、より強い指定を上書きする */
.planner-shell .exam-date-box, .planner-shell .planner, .planner-shell .result, .planner-shell .share-box { border-radius: var(--sp-r-card-lg); }
.planner-shell .stat, .planner-shell .table-wrap, .planner-shell .switch-note { border-radius: var(--sp-r-card); }
.planner-shell .exam-date-box { border: 1px solid #D5DEEC; background: var(--sp-indigo-bg); }
.planner-shell .planner, .planner-shell .result { border: 2px solid #D5DEEC; }
.planner-shell .stat { background: var(--sp-gray-bg); }
.planner-shell .data-table thead th { background: var(--sp-gray-bg); }
/* 見出しの中に、文字を分ける要素(確認日など)があるときは、横並びにしない */
.exam-date-box h2 { display: block; }
.exam-date-box h2::before { display: inline-block; vertical-align: middle; margin-right: 10px; }