/*
 * しまうナビ 共通スタイル。
 *
 * 配色は docs/02-site-architecture.md の案（仮）。承認後に確定する。
 * SWELLの基本スタイルを尊重し、独自コンポーネント（sn-*）だけを定義する。
 */

:root {
  --sn-color-primary: #1f6b5c;
  --sn-color-primary-dark: #164c42;
  --sn-color-accent: #f59e0b;
  --sn-color-accent-dark: #b45309;
  --sn-color-background: #f5f9f7;
  --sn-color-text: #26332f;
  --sn-color-muted: #52645e;
  --sn-color-border: #dbe8e2;
  --sn-radius: 0;
}

body {
  color: var(--sn-color-text);
}

/* --- 汎用カード・注意書き --- */

.sn-card {
  border: 1px solid var(--sn-color-border);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgb(31 107 92 / 8%);
  padding: clamp(1rem, 3vw, 1.5rem);
}

.sn-notice {
  border-left: 4px solid var(--sn-color-primary);
  border-radius: 0;
  background: var(--sn-color-background);
  padding: 1rem 1.25rem;
}

.sn-notice--pr {
  font-size: 0.85rem;
  color: var(--sn-color-muted);
}

.sn-updated {
  color: var(--sn-color-muted);
  font-size: 0.8rem;
}

.sn-empty {
  color: var(--sn-color-muted);
}

/* 編集者にだけ見せる設定漏れ警告 */
.sn-editor-notice {
  border: 2px dashed #b32d2e;
  border-radius: 0;
  padding: 0.75rem 1rem;
  color: #b32d2e;
  background: #fdf0f0;
  font-size: 0.85rem;
}

/* --- 比較表 --- */

.sn-table-wrap {
  margin-block: 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sn-table-wrap:focus-visible {
  outline: 2px solid var(--sn-color-primary);
  outline-offset: 2px;
}

.sn-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.9rem;
}

.sn-table th,
.sn-table td {
  border: 1px solid var(--sn-color-border);
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
}

.sn-table thead th {
  background: var(--sn-color-background);
  color: var(--sn-color-primary-dark);
  font-weight: 700;
  white-space: nowrap;
}

.sn-table__name a {
  font-weight: 700;
  color: var(--sn-color-primary-dark);
}

.sn-table__summary {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sn-color-muted);
}

.sn-table__evidence {
  font-size: 0.78rem;
  color: var(--sn-color-muted);
  white-space: nowrap;
}

/* --- サービス詳細スペック表 --- */

.sn-spec {
  margin-block: 1.5rem;
}

.sn-spec__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.9rem;
}

.sn-spec__table th,
.sn-spec__table td {
  border: 1px solid var(--sn-color-border);
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.sn-spec__table th {
  width: 10em;
  background: var(--sn-color-background);
  color: var(--sn-color-primary-dark);
  font-weight: 700;
}

@media (max-width: 600px) {
  .sn-spec__table th,
  .sn-spec__table td {
    display: block;
    width: auto;
    border: 0;
  }

  .sn-spec__table th {
    border-radius: 0;
    padding-block: 0.45rem;
  }

  .sn-spec__table td {
    border: 1px solid var(--sn-color-border);
    border-top: 0;
    border-radius: 0;
    margin-bottom: 0.75rem;
  }
}

/* --- 向く人・向かない人 --- */

.sn-fit {
  border: 1px solid var(--sn-color-border);
  border-radius: 0;
  padding: 1rem 1.25rem;
  margin-block: 1rem;
  background: #fff;
}

.sn-fit__title {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.sn-fit--yes {
  border-left: 5px solid var(--sn-color-primary);
}

.sn-fit--yes .sn-fit__title {
  color: var(--sn-color-primary-dark);
}

.sn-fit--no {
  border-left: 5px solid #9ca3af;
}

.sn-fit--no .sn-fit__title {
  color: #4b5563;
}

.sn-fit ul {
  margin: 0;
  padding-left: 1.25rem;
}

.sn-fit li {
  margin-block: 0.2rem;
}

/* --- CTA --- */

.sn-cta {
  border: 1px solid var(--sn-color-border);
  border-radius: 0;
  background: var(--sn-color-background);
  padding: 1.25rem clamp(1rem, 3vw, 1.5rem);
  margin-block: 1.5rem;
  text-align: center;
}

.sn-cta__pr {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  color: var(--sn-color-muted);
}

.sn-cta__button {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: min(320px, 100%);
  padding: 0.9rem 2rem;
  border-radius: 0;
  background: var(--sn-color-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgb(180 83 9 / 30%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sn-cta__button:hover,
.sn-cta__button:focus-visible {
  background: var(--sn-color-accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgb(180 83 9 / 35%);
}

.sn-cta__button:focus-visible {
  outline: 3px solid var(--sn-color-primary);
  outline-offset: 2px;
}

.sn-cta__note {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--sn-color-muted);
}

/* ============================================
   総額シミュレーター
   ============================================ */

.sn-calc {
  border: 1px solid var(--sn-color-border);
  border-radius: 0;
  background: #fff;
  padding: clamp(1rem, 3vw, 1.75rem);
  margin-block: 2rem;
  box-shadow: 0 8px 24px rgb(31 107 92 / 8%);
}

.sn-calc__head {
  border-bottom: 2px solid var(--sn-color-primary);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.sn-calc__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sn-color-primary-dark);
}

.sn-calc__lead {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sn-color-muted);
}

.sn-calc__form {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sn-calc__field {
  display: grid;
  gap: 0.4rem;
}

.sn-calc__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sn-color-text);
}

.sn-calc__control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sn-calc__control input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--sn-color-primary);
  height: 1.5rem;
}

.sn-calc__control output {
  min-width: 2.5em;
  text-align: right;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sn-color-primary-dark);
}

.sn-calc__unit {
  font-size: 0.8rem;
  color: var(--sn-color-muted);
}

.sn-calc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.sn-calc__table th,
.sn-calc__table td {
  border: 1px solid var(--sn-color-border);
  padding: 0.6rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.sn-calc__table thead th {
  background: var(--sn-color-background);
  color: var(--sn-color-primary-dark);
  white-space: nowrap;
}

.sn-calc__best {
  background: #fffbf0;
}

.sn-calc__best td {
  border-color: var(--sn-color-accent);
}

.sn-calc__rank {
  width: 3em;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sn-color-primary-dark);
}

.sn-calc__badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 0;
  background: var(--sn-color-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.sn-calc__diff {
  display: block;
  font-size: 0.72rem;
  color: var(--sn-color-muted);
}

.sn-calc__total {
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--sn-color-primary-dark);
  white-space: nowrap;
}

.sn-calc__note {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: #b45309;
}

.sn-calc__break {
  font-size: 0.75rem;
  color: var(--sn-color-muted);
  line-height: 1.6;
  white-space: nowrap;
}

.sn-calc__free {
  color: var(--sn-color-primary);
  font-weight: 700;
}

.sn-calc__insight {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--sn-color-accent);
  border-radius: 0;
  background: #fffbf0;
  font-size: 0.88rem;
}

.sn-calc__disclaimer {
  margin: 1.25rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--sn-color-border);
  font-size: 0.73rem;
  color: var(--sn-color-muted);
  line-height: 1.7;
}

@media (max-width: 600px) {
  .sn-calc__result {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sn-calc__table {
    min-width: 520px;
  }
}

/* ============================================
   診断ツール
   ============================================ */

.sn-diag {
  border: 2px solid var(--sn-color-primary);
  border-radius: 0;
  background: var(--sn-color-background);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  margin-block: 2rem;
}

.sn-diag__q {
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sn-color-primary-dark);
  line-height: 1.6;
}

.sn-diag__choices {
  display: grid;
  gap: 0.7rem;
}

.sn-diag__btn {
  display: block;
  width: 100%;
  padding: 0.95rem 1.2rem;
  border: 2px solid var(--sn-color-border);
  border-radius: 0;
  background: #fff;
  color: var(--sn-color-text);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.sn-diag__btn:hover,
.sn-diag__btn:focus-visible {
  border-color: var(--sn-color-primary);
  transform: translateY(-1px);
}

.sn-diag__btn:focus-visible {
  outline: 3px solid var(--sn-color-accent);
  outline-offset: 2px;
}

.sn-diag__answer {
  background: #fff;
  border-radius: 0;
  padding: 1.25rem;
}

.sn-diag__result-title {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--sn-color-primary-dark);
}

.sn-diag__result-body {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.85;
}

.sn-diag__links {
  display: grid;
  gap: 0.6rem;
}

.sn-diag__link {
  display: block;
  padding: 0.8rem 1.1rem;
  border-radius: 0;
  background: var(--sn-color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  text-align: center;
}

.sn-diag__link:hover,
.sn-diag__link:focus-visible {
  background: var(--sn-color-primary-dark);
  color: #fff;
}

.sn-diag__reset {
  display: block;
  margin: 1rem auto 0;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--sn-color-border);
  border-radius: 0;
  background: #fff;
  color: var(--sn-color-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

/* ============================================
   記事用パーツ
   ============================================ */

.sn-merit,
.sn-caution,
.sn-point {
  border-radius: 0;
  padding: 1.1rem 1.35rem;
  margin-block: 1.5rem;
}

.sn-merit {
  border: 1px solid #cfe7de;
  background: #f2fbf7;
}

.sn-caution {
  border: 1px solid #f3ddb5;
  background: #fffaf0;
}

.sn-point {
  border: 1px solid var(--sn-color-border);
  background: #fff;
  border-left: 5px solid var(--sn-color-primary);
}

.sn-merit__title,
.sn-caution__title,
.sn-point__title {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.sn-merit__title { color: var(--sn-color-primary-dark); }
.sn-caution__title { color: #92610a; }
.sn-point__title { color: var(--sn-color-primary-dark); }

.sn-merit ul,
.sn-caution ul,
.sn-point ul {
  margin: 0;
  padding-left: 1.3rem;
}

.sn-merit li,
.sn-caution li,
.sn-point li {
  margin-block: 0.3rem;
}

/* 重要数値のハイライト */
.sn-mark {
  background: linear-gradient(transparent 62%, #ffe9a8 62%);
  font-weight: 700;
}

.sn-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sn-color-primary-dark);
}

/* 手順（ステップ） */
.sn-steps {
  counter-reset: sn-step;
  margin-block: 1.5rem;
  padding: 0;
  list-style: none;
}

.sn-steps > li {
  position: relative;
  counter-increment: sn-step;
  padding: 0 0 1.35rem 3rem;
  border-left: 2px solid var(--sn-color-border);
  margin-left: 1rem;
}

.sn-steps > li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.sn-steps > li::before {
  content: counter(sn-step);
  position: absolute;
  left: -1rem;
  top: -0.15rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--sn-color-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.sn-steps__title {
  display: block;
  font-weight: 700;
  color: var(--sn-color-primary-dark);
  margin-bottom: 0.25rem;
}

/* 次にやること（記事末尾の回遊ブロック） */
.sn-next {
  border-top: 3px solid var(--sn-color-primary);
  background: var(--sn-color-background);
  border-radius: 0;
  padding: 1.25rem clamp(1rem, 3vw, 1.5rem);
  margin-block: 2rem;
}

.sn-next__title {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sn-color-primary-dark);
}

.sn-next__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-next__list a {
  display: block;
  padding: 0.8rem 1rem;
  border: 1px solid var(--sn-color-border);
  border-radius: 0;
  background: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--sn-color-primary-dark);
}

.sn-next__list a:hover,
.sn-next__list a:focus-visible {
  border-color: var(--sn-color-primary);
}

/* --- サービスカード --- */
.sn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.75rem;
  margin-block: 1.5rem;
}

.sn-card-link {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--sn-color-border);
  border-radius: 0;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.sn-card-link:hover,
.sn-card-link:focus-visible {
  border-color: var(--sn-color-primary);
  transform: translateY(-2px);
}

.sn-card-link__name {
  font-weight: 700;
  color: var(--sn-color-primary-dark);
}

.sn-card-link__price {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sn-color-accent-dark);
}

.sn-card-link__summary {
  font-size: 0.75rem;
  color: var(--sn-color-muted);
  line-height: 1.6;
}

.sn-table__area {
  font-size: 0.78rem;
  color: var(--sn-color-muted);
}

/* ============================================
   トップページの区画
   ============================================ */

/* 記事本文の余白をトップだけ詰め、区画を全幅で見せる */
.home .post_content > .sn-sec,
.home .post_content > .sn-hero {
  margin-inline: 0;
}

.sn-hero {
  text-align: center;
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 4vw, 2rem);
  background: var(--sn-color-primary-dark);
  border-radius: 0;
  margin-block: 0 2rem;
}

.sn-hero__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--sn-color-accent);
}

.sn-hero__title {
  margin: 0 0 0.8rem;
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  border: 0;
  padding: 0;
  background: none;
}

.sn-hero__lead {
  margin: 0 auto;
  max-width: 40em;
  font-size: 0.9rem;
  line-height: 1.85;
  color: rgb(255 255 255 / 82%);
}

/* --- 区画 --- */

.sn-sec {
  margin-block: clamp(2.5rem, 7vw, 4rem);
}

.sn-sec__eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sn-color-accent-dark);
}

.sn-sec__title {
  margin: 0 0 0.5rem;
  padding: 0 0 0.6rem;
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  font-weight: 700;
  color: var(--sn-color-primary-dark);
  border: 0;
  border-bottom: 3px solid var(--sn-color-primary);
  background: none;
}

.sn-sec__lead {
  margin: 0 0 1.4rem;
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--sn-color-muted);
}

.sn-sec--dark {
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: 0;
  background: var(--sn-color-background);
}

/* --- 2択カード --- */

.sn-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
}

.sn-choice__card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--sn-color-border);
  border-radius: 0;
  background: #fff;
  padding: clamp(1.2rem, 3vw, 1.6rem);
}

.sn-choice__card--delivery { border-top: 6px solid var(--sn-color-primary); }
.sn-choice__card--store    { border-top: 6px solid var(--sn-color-accent); }

.sn-choice__label {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sn-color-muted);
}

.sn-choice__name {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--sn-color-primary-dark);
}

.sn-choice__price {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sn-color-accent-dark);
  line-height: 1.2;
}

.sn-choice__unit {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--sn-color-muted);
}

.sn-choice__points {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.8;
}

.sn-choice__items {
  margin: 0 0 1.2rem;
  padding: 0.55rem 0.8rem;
  border-radius: 0;
  background: var(--sn-color-background);
  font-size: 0.78rem;
  color: var(--sn-color-muted);
}

.sn-choice__cta {
  margin-top: auto;
  display: block;
  padding: 0.85rem 1rem;
  border-radius: 0;
  background: var(--sn-color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
}

.sn-choice__card--store .sn-choice__cta { background: var(--sn-color-accent-dark); }

.sn-choice__cta:hover,
.sn-choice__cta:focus-visible {
  background: var(--sn-color-primary-dark);
  color: #fff;
}

.sn-choice__card--store .sn-choice__cta:hover,
.sn-choice__card--store .sn-choice__cta:focus-visible { background: #92610a; }

/* --- タイル --- */

.sn-tiles {
  display: grid;
  grid-template-columns: repeat(var(--sn-cols, 4), 1fr);
  gap: 0.7rem;
}

@media (max-width: 900px) { .sn-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .sn-tiles { grid-template-columns: repeat(2, 1fr); } }

.sn-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 5.5rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--sn-color-border);
  border-left: 4px solid var(--sn-color-primary);
  border-radius: 0;
  background: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.sn-tile:hover,
.sn-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--sn-color-accent);
}

.sn-tile__title {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sn-color-text);
}

.sn-tile__more {
  font-size: 0.7rem;
  color: var(--sn-color-accent-dark);
}

/* --- ランキング --- */

.sn-rank {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.sn-rank__item {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 0.2rem 0.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--sn-color-border);
  border-radius: 0;
  background: #fff;
}

.sn-rank__item:first-child {
  border-color: var(--sn-color-accent);
  background: #fffbf0;
}

.sn-rank__no {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0;
  background: var(--sn-color-primary);
  color: #fff;
  font-weight: 700;
}

.sn-rank__item:first-child .sn-rank__no { background: var(--sn-color-accent); }

.sn-rank__name {
  font-weight: 700;
  color: var(--sn-color-primary-dark);
  text-decoration: none;
}

.sn-rank__price {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sn-color-accent-dark);
  white-space: nowrap;
}

.sn-rank__note {
  grid-column: 2 / -1;
  font-size: 0.75rem;
  color: var(--sn-color-muted);
  line-height: 1.6;
}

/* SWELLの見出し装飾を打ち消す（トップの区画見出しのみ） */
.sn-hero .sn-hero__title,
.sn-sec > .sn-sec__title {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.sn-hero .sn-hero__title::before,
.sn-hero .sn-hero__title::after,
.sn-sec > .sn-sec__title::before,
.sn-sec > .sn-sec__title::after {
  display: none !important;
  content: none !important;
}

.sn-sec > .sn-sec__title {
  padding-bottom: 0.6rem !important;
  border-bottom: 3px solid var(--sn-color-primary) !important;
}

/* 区画見出しの文字色をSWELLの上書きから守る */
.sn-sec > .sn-sec__title,
.sn-sec > .sn-sec__title * {
  color: var(--sn-color-primary-dark) !important;
  -webkit-text-fill-color: var(--sn-color-primary-dark) !important;
}

.sn-hero .sn-hero__title,
.sn-hero .sn-hero__title * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ============================================
   デザイン刷新：直角・面で見せる
   ============================================ */

:root {
  --sn-ink: #10221d;
  --sn-line: #d5e2dc;
  --sn-line-strong: #1f6b5c;
}

/* ランキングの番号だけは円を維持 */
.sn-rank__no { border-radius: 50% !important; }

/* --- ヒーロー：全幅の色面 --- */

.sn-hero {
  position: relative;
  background: var(--sn-ink);
  padding: clamp(2.5rem, 8vw, 5rem) clamp(1.2rem, 5vw, 3rem);
  margin-block: 0 3rem;
  overflow: hidden;
}

/* 画像を入れるときはここに背景を指定する（例: --sn-hero-image: url(...)） */
.sn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sn-hero-image, none);
  background-size: cover;
  background-position: center;
  opacity: 0.28;
}

.sn-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--sn-color-primary) 0 60%, var(--sn-color-accent) 60% 100%);
}

.sn-hero > * { position: relative; }

.sn-hero__eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgb(245 158 11 / 55%);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--sn-color-accent);
}

.sn-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.sn-hero__lead {
  max-width: 44em;
  margin-inline: auto;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
}

/* --- 区画見出し：左のバーで揃える --- */

.sn-sec { margin-block: clamp(3rem, 8vw, 4.5rem); }

.sn-sec__eyebrow {
  margin: 0 0 0.35rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--sn-color-accent);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.sn-sec > .sn-sec__title {
  margin: 0 0 0.6rem !important;
  padding: 0 0 0.7rem 0.9rem !important;
  border: 0 !important;
  border-left: 4px solid var(--sn-color-primary) !important;
  border-bottom: 1px solid var(--sn-line) !important;
  font-size: clamp(1.2rem, 3.4vw, 1.65rem) !important;
  letter-spacing: 0.01em;
}

.sn-sec__lead { padding-left: 0.9rem; }

.sn-sec--dark {
  padding: clamp(1.6rem, 5vw, 2.8rem);
  background: var(--sn-color-background);
  border-top: 3px solid var(--sn-color-primary);
}

/* --- 2択カード：面で見せる --- */

.sn-choice { gap: 1px; background: var(--sn-line); border: 1px solid var(--sn-line); }

.sn-choice__card {
  border: 0;
  border-top: 5px solid var(--sn-color-primary);
  padding: clamp(1.4rem, 3.5vw, 2rem);
}

.sn-choice__card--store { border-top-color: var(--sn-color-accent); }

/* 画像を入れる枠（未設定なら表示しない） */
.sn-choice__card::before {
  content: "";
  display: var(--sn-choice-visual, none);
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  background: var(--sn-color-background) var(--sn-choice-image, none) center / cover;
}

.sn-choice__price { font-size: clamp(1.8rem, 5vw, 2.3rem); }

.sn-choice__items {
  border-left: 3px solid var(--sn-line-strong);
  background: var(--sn-color-background);
}

.sn-choice__cta { letter-spacing: 0.03em; }

/* --- タイル：枠線を共有して面にする --- */

.sn-tiles {
  gap: 1px;
  background: var(--sn-line);
  border: 1px solid var(--sn-line);
}

.sn-tile {
  border: 0;
  border-left: 3px solid var(--sn-color-primary);
  background: #fff;
  padding: 1rem 1.1rem;
  min-height: 6rem;
}

.sn-tile:hover,
.sn-tile:focus-visible {
  transform: none;
  border-left-color: var(--sn-color-accent);
  background: var(--sn-color-background);
}

.sn-tile__more::after { content: " →"; }

/* --- ランキング：番号を大きく --- */

.sn-rank { gap: 1px; background: var(--sn-line); border: 1px solid var(--sn-line); }

.sn-rank__item { border: 0; padding: 1rem 1.2rem; }

.sn-rank__item:first-child {
  border-left: 4px solid var(--sn-color-accent);
  background: #fffdf5;
}

/* --- 表：枠を細く、見出しを濃く --- */

.sn-table thead th,
.sn-calc__table thead th,
.sn-spec__table th {
  background: var(--sn-color-primary-dark);
  color: #fff;
}

.sn-table th,
.sn-table td,
.sn-calc__table th,
.sn-calc__table td,
.sn-spec__table th,
.sn-spec__table td {
  border-color: var(--sn-line);
}

/* --- CTAボタン：角丸をやめて幅広に --- */

.sn-cta__button,
.sn-choice__cta,
.sn-diag__link,
.sn-diag__btn {
  border-radius: 0 !important;
}

.sn-cta__button {
  min-width: min(380px, 100%);
  letter-spacing: 0.04em;
}

/* ============================================
   サイドバーを消して1カラムにする
   ============================================ */

.sn-wide #sidebar,
.sn-wide .l-sidebar,
.sn-wide .c-sidebar,
.sn-wide .p-sidebar {
  display: none !important;
}

.sn-wide .l-content,
.sn-wide .l-mainContent,
.sn-wide #main_content,
.sn-wide .l-container {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

.sn-wide .l-mainContent__inner,
.sn-wide .post_content {
  max-width: 1080px;
  margin-inline: auto;
}

/* トップはヒーローを全幅で見せる */
.home .sn-hero {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.2rem, calc(50vw - 540px));
  width: 100vw;
  text-align: center;
}

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

.sn-footer {
  margin-top: 4rem;
  background: var(--sn-ink);
  color: rgb(255 255 255 / 78%);
  font-size: 0.85rem;
}

.sn-footer a {
  color: rgb(255 255 255 / 78%);
  text-decoration: none;
}

.sn-footer a:hover,
.sn-footer a:focus-visible {
  color: var(--sn-color-accent);
  text-decoration: underline;
}

.sn-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(5, 1fr);
  gap: 2rem 1.5rem;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.2rem, 4vw, 2rem);
}

@media (max-width: 1100px) {
  .sn-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
  .sn-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .sn-footer__inner { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
}

.sn-footer__logo {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

.sn-footer__tagline {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  line-height: 1.9;
  color: rgb(255 255 255 / 62%);
}

.sn-footer__research a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgb(245 158 11 / 55%);
  font-size: 0.75rem;
  color: var(--sn-color-accent);
}

.sn-footer__head {
  margin: 0 0 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 15%);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.sn-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-footer__col li { margin-bottom: 0.45rem; }
.sn-footer__col a { font-size: 0.78rem; line-height: 1.6; }

.sn-footer__bottom {
  border-top: 1px solid rgb(255 255 255 / 12%);
  padding: 1.4rem clamp(1.2rem, 4vw, 2rem);
}

.sn-footer__bottom > * {
  max-width: 1180px;
  margin-inline: auto;
}

.sn-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
}

.sn-footer__legal a { font-size: 0.78rem; }

.sn-footer__note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.8;
  color: rgb(255 255 255 / 45%);
}

/* ============================================
   グローバルメニュー（SWELLのヘッダーを引き締める）
   ============================================ */

.l-header,
.l-header__inner {
  border-bottom: 1px solid var(--sn-line);
}

.c-gnav > li > a,
.p-gnav > li > a {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

/* 現在地とホバーを下線で示す */
.c-gnav > li > a::after,
.p-gnav > li > a::after {
  background: var(--sn-color-accent) !important;
  height: 3px !important;
}

/* ドロップダウンを直角に */
.c-gnav .sub-menu,
.p-gnav .sub-menu {
  border-radius: 0 !important;
  border-top: 3px solid var(--sn-color-primary);
}

/* ============================================
   サイドバーを全ページで廃止し、SWELLの旧フッターを隠す
   比較表が主役のサイトなので、本文幅を最大限に使う
   ============================================ */

#sidebar,
.l-sidebar,
.c-sidebar,
.p-sidebar,
.w-beforeSidebar,
.w-afterSidebar {
  display: none !important;
}

.l-content,
.l-mainContent,
#main_content,
.l-container__inner {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  margin-inline: auto !important;
}

/* 本文の読みやすい幅は保つ */
.l-mainContent__inner,
.post_content,
.c-postTitle,
.p-articleThumb,
.c-postAuthor,
.l-articleBottom {
  max-width: 1080px;
  margin-inline: auto;
}

/* SWELLの旧フッターは自作フッターと二重になるので隠す */
.l-footer {
  display: none !important;
}

/* 記事ページのSNSシェアバーが本文に重なるのを防ぐ */
@media (min-width: 1200px) {
  .p-fixSidemenu { left: 0.5rem; }
}