/* 金利みはり計算機 — 共通スタイル
   規約：色・間隔は :root トークンのみ使用。ページ固有の微調整は各ページ<head>内<style>に書く。 */

:root {
  --c-navy: #132A43;
  --c-bg: #F4F7FB;
  --c-card: #FFFFFF;
  --c-ink: #1B2A3A;
  --c-sub: #5A6B7E;
  --c-accent: #1656B8;
  --c-good: #0E7A5F;
  --c-warn: #B45309;
  --c-danger: #B0322C;
  --c-line: #DCE5EF;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(19, 42, 67, .08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: "Noto Sans JP", -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

a { color: var(--c-accent); }
a:hover { text-decoration: none; }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* === レイアウト === */

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

header.site-header {
  background: var(--c-navy);
  color: #fff;
  padding: 14px 0;
}

header.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.logo {
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: .01em;
}

/* === ナビ === */

nav.global {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  font-size: .92rem;
}

nav.global a {
  color: #DCE5EF;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}

nav.global a:hover,
nav.global a:focus-visible {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* === 告知帯 === */

.notice {
  background: #FFF3E0;
  border-bottom: 1px solid #F3D9AE;
  color: #7A4A12;
  font-size: .88rem;
  padding: 10px 0;
}

.notice .wrap { padding: 0 20px; }
.notice a { color: #7A4A12; font-weight: 700; }

/* === 本文見出し === */

main { padding: 28px 0 56px; }

h1 {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 8px 0 6px;
  color: var(--c-navy);
}

h2 {
  font-size: 1.2rem;
  color: var(--c-navy);
  margin: 2.2em 0 .7em;
  border-left: 4px solid var(--c-accent);
  padding-left: 10px;
}

h3 { font-size: 1.05rem; color: var(--c-navy); margin: 1.4em 0 .5em; }

.lead {
  color: var(--c-sub);
  font-size: .96rem;
  margin: 0 0 20px;
}

/* === カード === */

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

.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* === フォーム === */

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 6px;
}

.field .hint {
  display: block;
  font-size: .78rem;
  color: var(--c-sub);
  font-weight: 400;
  margin-top: 2px;
}

.field input[type="number"] {
  width: 100%;
  font-size: 1.15rem;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: #FBFDFF;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.field input[type="number"]:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.field input[type="range"] {
  width: 100%;
  margin-top: 8px;
  accent-color: var(--c-accent);
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chip {
  font-size: .78rem;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: #fff;
  color: var(--c-accent);
  cursor: pointer;
}

.chip:hover { background: #EEF3FB; }

/* === ボタン === */

.btn {
  display: inline-block;
  font-size: .95rem;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn-primary { background: var(--c-accent); color: #fff; }
.btn-primary:hover { background: #0F4494; }

.btn-outline {
  background: #fff;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
}

.btn-share {
  background: #0F1419;
  color: #fff;
}

/* === 結果表示 === */

.result-big {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--c-navy);
}

.result-big .unit { font-size: 1rem; font-weight: 400; color: var(--c-sub); }

.result-diff-up { color: var(--c-danger); font-weight: 700; }
.result-diff-down { color: var(--c-good); font-weight: 700; }

/* === ストレス表 === */

table.stress-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.stress-table th, .stress-table td {
  padding: 9px 6px;
  border-bottom: 1px solid var(--c-line);
  text-align: right;
}

.stress-table th:first-child, .stress-table td:first-child { text-align: left; }

.stress-table thead th {
  color: var(--c-sub);
  font-weight: 700;
  font-size: .8rem;
}

.bar-row { position: relative; }

.bar-track {
  background: #EEF3FB;
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
  margin-top: 4px;
}

.bar {
  height: 100%;
  background: var(--c-accent);
  border-radius: 6px;
}

/* === 告知/警戒カード === */

.notice-card {
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: .92rem;
  margin: 16px 0;
}

.notice-card.warn {
  background: #FFF7ED;
  border: 1px solid #F3D9AE;
  color: #7A4A12;
}

.notice-card.danger {
  background: #FDEEEC;
  border: 1px solid #F0BDB6;
  color: #7A2A22;
}

.notice-card.good {
  background: #ECF7F3;
  border: 1px solid #B9E2D2;
  color: #0E5A44;
}

/* === 選択肢カード === */

.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0;
}

@media (min-width: 640px) {
  .choice-grid { grid-template-columns: repeat(3, 1fr); }
}

.choice-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 16px;
  font-size: .88rem;
}

.choice-card h3 { margin-top: 0; font-size: .98rem; }

/* === FAQ === */

details.faq-item {
  border-bottom: 1px solid var(--c-line);
  padding: 12px 0;
}

details.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--c-navy);
}

details.faq-item p { color: var(--c-sub); margin: 8px 0 0; }

/* === 出典 === */

.sources {
  font-size: .82rem;
  color: var(--c-sub);
}

.sources li { margin-bottom: 4px; }

/* === アフィリエイト枠 === */

.affiliate-slot { margin: 18px 0; }
.affiliate-slot[hidden] { display: none; }

.affiliate-slot .ad-notice {
  font-size: .75rem;
  color: var(--c-sub);
  margin-bottom: 6px;
}

.affiliate-slot .ad-card {
  display: block;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--c-ink);
  position: relative;
  background: #fff;
}

.affiliate-slot .ad-badge {
  display: inline-block;
  font-size: .68rem;
  background: #EEF3FB;
  color: var(--c-sub);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
}

/* ASP発行タグをそのまま掲載する枠（.ad-card-tag） */
.affiliate-slot .ad-card-tag { display: block; }
.affiliate-slot .ad-tag-body a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.affiliate-slot .ad-tag-body img { max-width: 100%; height: auto; border: 0; }
.affiliate-slot .ad-card-note {
  display: block;
  font-size: .7rem;
  line-height: 1.7;
  color: var(--c-sub);
  margin-top: 8px;
}

/* === コラム一覧・カード === */

.column-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .column-grid { grid-template-columns: repeat(2, 1fr); }
}

.column-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 16px;
  display: block;
  text-decoration: none;
  color: var(--c-ink);
}

.column-card time { font-size: .78rem; color: var(--c-sub); }
.column-card h3 { margin: .4em 0; font-size: 1rem; color: var(--c-navy); }
.column-card p { font-size: .86rem; color: var(--c-sub); margin: 0; }

.related-tool-box {
  background: #EEF3FB;
  border-radius: var(--radius);
  padding: 16px;
  margin: 24px 0;
}

/* === フッター === */

footer.site-footer {
  background: var(--c-navy);
  color: #C9D6E4;
  font-size: .82rem;
  padding: 22px 0 30px;
}

footer.site-footer .wrap > p { margin: 0 0 10px; }

footer.site-footer nav a { color: #DCE5EF; }

footer.site-footer p:last-child { color: #7E92A8; margin-top: 12px; }

/* === レスポンシブ最低幅対応 === */

@media (max-width: 400px) {
  h1 { font-size: 1.3rem; }
  .result-big { font-size: 1.7rem; }
}
