/* ============================================================
   レンタルWiFi比較 — スタイル
   モバイルファースト / 比較表・結論即答型のユーティリティデザイン
   ============================================================ */
:root {
  --c-primary: #0f6bb8;
  --c-primary-dark: #0a4d85;
  /* CTA・最安強調のアクセント。白文字4.59:1でAA(1.4.3)を満たす範囲で最も鮮やかなオレンジ
     (色相25°・彩度100%。#ad5600 は明度68%で黄土色寄りだったため78%へ引き上げ) */
  --c-accent: #c65100;
  /* 枠線・リングなど非テキストUI用。1.4.11の3:1でよいためさらに鮮やかにできる */
  --c-accent-line: #e06000;
  /* 可否マーク色: 偶数行背景#f2f7fb上でも4.5:1以上(WCAG 1.4.3 AA) */
  --c-ok: #157a41;
  --c-ng: #c62828;
  --c-partial: #96590a;
  --c-text: #23303b;
  --c-text-sub: #5b6b78;
  --c-bg: #ffffff;
  --c-bg-soft: #f2f7fb;
  --c-border: #d8e2ea;
  --radius: 10px;
  --maxw: 960px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
h2[id^="sec"] { scroll-margin-top: 16px; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, system-ui, sans-serif;
  color: var(--c-text); background: var(--c-bg);
  line-height: 1.75; font-size: 16px;
}
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
img { max-width: 100%; height: auto; }
a { color: var(--c-primary); }

/* ---------- ヘッダー ---------- */
.site-header { border-bottom: 1px solid var(--c-border); background: #fff; }
.header-inner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
/* 親サイトロゴ → 本体トップへ。右にサブサイト名を区切り線付きで並べる */
.parent-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.parent-logo img { display: block; width: auto; height: 26px; }
.site-logo {
  display: inline-flex; align-items: center; min-width: 0;
  font-weight: 700; font-size: 1rem; color: var(--c-text); text-decoration: none;
  padding-left: 10px; border-left: 1px solid var(--c-border);
}
.global-nav { background: var(--c-primary); }
.global-nav .container { display: flex; overflow-x: auto; white-space: nowrap; }
.global-nav a { color: #fff; text-decoration: none; font-size: 0.82rem; padding: 8px 12px; flex-shrink: 0; }
.global-nav a:hover { background: var(--c-primary-dark); }

/* ---------- PR表記 / 鮮度帯 ---------- */
.page-pr-notice { background: #f6f6f6; color: #666; font-size: 0.72rem; padding: 3px 0; }
.freshness-banner { background: #fff6e5; border-bottom: 1px solid #f0d9a8; color: #8a6100; font-size: 0.8rem; padding: 8px 0; }

/* ---------- パンくず(フッター直前に密着配置・装飾なし) ---------- */
.breadcrumb { font-size: 0.72rem; padding: 0 0 12px; color: var(--c-text-sub); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb li + li::before { content: "›"; margin-right: 4px; color: #aab6c0; }
.breadcrumb a { color: var(--c-text-sub); }

/* ---------- 本文 ---------- */
.main-content { padding: 20px 0 48px; }
.main-content h1 { font-size: 1.45rem; line-height: 1.45; margin-bottom: 14px; }
.main-content h2 { font-size: 1.2rem; margin: 40px 0 14px; padding: 8px 12px; background: var(--c-bg-soft); border-left: 4px solid var(--c-primary); border-radius: 4px; }
.main-content h3 { font-size: 1.05rem; margin: 26px 0 10px; }
/* 本文段落の下マージン。クラス付きの <p>(コンポーネント部品)は対象外にする。
   .main-content p (詳細度0,1,1) は .verdict-head 等 (0,1,0) に勝ってしまい、
   部品側の margin 指定が無効化されて余分な余白が残るため */
.main-content p:not([class]) { margin-bottom: 14px; }
.main-content section > p:first-of-type { margin-top: 4px; }
.main-content ul, .main-content ol { padding-left: 1.4em; margin-bottom: 14px; }
.lead { color: var(--c-text-sub); font-size: 0.95rem; margin-bottom: 14px; }

/* ---------- 用語—説明型のリスト(dl) ----------
   用語を独立した行にして、説明を次行に置く。罫線や囲みは使わない
   (左罫は引用に見えるため)。太さと余白だけで階層を出す */
.term-list { margin: 14px 0; }
.term-list dt {
  font-weight: 700; line-height: 1.55;
  margin-top: 14px;
}
.term-list dt:first-of-type { margin-top: 0; }
.term-list dd { margin: 1px 0 0; font-size: 0.94rem; }
/* 手順リストは番号を残したまま、項目内をラベル/説明に分ける */
.step-list > .step-item { margin-bottom: 12px; }
.step-list > .step-item:last-child { margin-bottom: 0; }
.step-label { display: block; font-weight: 700; line-height: 1.55; }
.step-desc { display: block; font-size: 0.94rem; margin-top: 1px; }

/* ---------- 結論ボックス(色帯ヘッダーで本文から明確に分離) ---------- */
.conclusion-box {
  border: 1px solid; border-radius: var(--radius);
  margin: 18px 0 28px; padding: 14px; box-shadow: 0 2px 10px rgba(35, 48, 59, 0.08);
}
.conclusion-ok      { border-color: #b9d9c6; background: #f4faf6; }
.conclusion-ng      { border-color: #f0c4c4; background: #fdf5f5; }
.conclusion-partial { border-color: #e6cfa8; background: #fdf9f2; }
/* 結論はBOXの見出し帯ではなく、BOX内に置く独立カード(可否色ベタ+白抜き文字) */
.conclusion-verdict {
  margin: 0 0 12px; padding: 12px 14px;
  border-radius: 8px; box-shadow: 0 1px 3px rgba(35, 48, 59, 0.10);
  color: #fff; font-size: 1.06rem; font-weight: 700; line-height: 1.5;
}
.verdict-head { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
/* 条件分岐のある結論: 条件をチップ、答えを次行に置いて2段で読ませる */
.verdict-branches { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.verdict-branches li {
  /* 白14%重ねでも白文字は4.57〜4.97:1(AA)を維持する濃度 */
  background: rgba(255, 255, 255, 0.14); border-radius: 6px; padding: 8px 10px;
}
.vb-cond {
  display: inline-block; margin-bottom: 3px; padding: 1px 9px;
  background: #fff; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; line-height: 1.7;
}
.conclusion-ok .vb-cond      { color: #14683a; }
.conclusion-ng .vb-cond      { color: #c62828; }
.conclusion-partial .vb-cond { color: #8a5200; }
.vb-ans { display: block; font-size: 0.95rem; line-height: 1.5; }
/* 条件・答えとも短い場合は横並び(バッジ 金額 を1行に) */
.verdict-branches.is-inline li { display: flex; align-items: center; gap: 9px; }
.verdict-branches.is-inline .vb-cond { margin-bottom: 0; flex-shrink: 0; }
.verdict-branches.is-inline .vb-ans { display: block; min-width: 0; }
/* 白抜き文字のコントラスト比(ok 6.84 / ng 5.62 / partial 6.39) */
.conclusion-ok .conclusion-verdict      { background: #14683a; }
.conclusion-ng .conclusion-verdict      { background: #c62828; }
.conclusion-partial .conclusion-verdict { background: #8a5200; }
.verdict-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; flex-shrink: 0;
  border-radius: 50%; background: rgba(255, 255, 255, 0.22);
  font-size: 0.92em; line-height: 1;
}
.verdict-text { flex: 1; }
.conclusion-body { padding: 0 2px; }
.conclusion-lead p { margin-bottom: 8px; }
.conclusion-lead p:last-child { margin-bottom: 0; }
.conclusion-routes { background: #fff; border: 1px solid var(--c-border); border-radius: 8px; padding: 10px 12px; margin-top: 12px; }
.routes-label { font-size: 0.8rem; font-weight: 700; color: var(--c-text-sub); margin-bottom: 4px; }
.conclusion-routes ul { list-style: none; padding: 0; margin: 0; }
.conclusion-routes li { padding: 3px 0; }
.verified-date { font-size: 0.72rem; color: var(--c-text-sub); margin: 10px 0 0; text-align: right; }

/* ---------- 比較表 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0 4px; border: 1px solid var(--c-border); border-radius: 8px; }
/* 横スクロール可能であることを示すヒント(ボタンに見えないよう背景・枠線なし。スクロール開始で消える) */
.scroll-hint {
  display: none;
  font-size: 0.72rem; color: var(--c-text-sub);
  background: none; border: none; padding: 0;
  margin: 10px 2px 0; text-align: right; letter-spacing: 0.02em;
}
/* .main-content p の margin-bottom:14px を上書きするため詳細度を上げる */
.scroll-hint.is-visible { display: block; margin-bottom: 0; transition: opacity 0.35s; }
/* スクロール後: 消さずに主張だけ弱める(DOMから消すとレイアウトが跳ねる) */
.scroll-hint.is-scrolled { opacity: 0.45; }
.scroll-hint.is-scrolled .hint-arrow { animation: none; opacity: 1; }
/* ヒント直後の表は上マージンを詰めてヒントと近接させる */
.scroll-hint + .table-scroll { margin-top: 6px; }
/* 矢印は文字(→)だと端末でフォントが変わるためCSSの枠線で描画する */
.scroll-hint .hint-arrow {
  display: inline-block; width: 6px; height: 6px;
  margin: 0 3px 0 6px; vertical-align: 1px;
  border-top: 2px solid var(--c-primary); border-right: 2px solid var(--c-primary);
  transform: rotate(45deg);
  animation: hintFloat 1.9s ease-in-out infinite;
}
@keyframes hintFloat {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.45; }
  50%      { transform: rotate(45deg) translate(3px, -3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint .hint-arrow { animation: none; opacity: 0.9; }
}
.rental-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 700px; }
.rental-table th, .rental-table td { padding: 9px 10px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
/* 列が潰れて1〜2文字ずつ折り返すのを防ぐ最小幅(SP実機375pxで検証) */
.rental-table th { min-width: 64px; white-space: nowrap; }
.cell-name { min-width: 136px; }
.cell-cap { min-width: 152px; }
.cell-cap-plain { min-width: 100px; }
.cell-price { min-width: 86px; white-space: nowrap; }
.cell-receive { min-width: 104px; }
.cell-terms { min-width: 172px; }
.cell-what { min-width: 152px; }
.cell-mark { min-width: 112px; }
.cell-cta { min-width: 104px; }
.rental-table thead th { background: var(--c-primary); color: #fff; font-size: 0.8rem; white-space: nowrap; position: sticky; top: 0; }
.rental-table tbody tr:nth-child(even) { background: var(--c-bg-soft); }
.rental-table tbody tr:last-child td { border-bottom: none; }
.row-highlight { background: #fff8ec !important; }
/* 先頭列固定(横スクロール時もサービス名が見える) */
.rental-table th:first-child, .rental-table td:first-child { position: sticky; left: 0; z-index: 1; }
.rental-table td:first-child { background: #fff; box-shadow: 1px 0 0 var(--c-border); }
.rental-table tbody tr:nth-child(even) td:first-child { background: var(--c-bg-soft); }
.row-highlight td:first-child { background: #fff8ec !important; }
.rental-table th:first-child { z-index: 2; }
.cell-name { font-weight: 700; white-space: nowrap; }
.cell-plan { display: block; font-weight: 400; font-size: 0.72rem; color: var(--c-text-sub); }
.cell-notice {
  display: block; font-weight: 600; font-size: 0.68rem; line-height: 1.45;
  color: var(--c-ng); white-space: normal; max-width: 190px; margin-top: 3px;
}
.cell-price { white-space: nowrap; font-weight: 600; }
.cell-price-na { color: var(--c-text-sub); font-weight: 400; }
.cell-price-na .price-na-note { display: block; font-size: 0.66rem; line-height: 1.4; white-space: nowrap; }
/* スクリーンリーダー専用テキスト(視覚的に非表示・読み上げ対象) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* スキップリンク(フォーカス時のみ表示) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-primary); color: #fff; padding: 8px 14px;
  border-radius: 0 0 6px 0; text-decoration: none; font-size: 0.85rem;
}
.skip-link:focus { left: 0; }
/* 最短受取/締切列 */
.cell-sameday { min-width: 150px; font-size: 0.76rem; white-space: normal; }
/* 店舗クロスリンク(チップ型) */
.store-crosslinks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip-link {
  color: var(--c-primary); text-decoration: none; font-size: 0.8rem;
  background: #fff; border: 1px solid var(--c-border); border-radius: 999px;
  padding: 4px 12px; line-height: 1.6;
}
.chip-link:hover { background: var(--c-bg-soft); }
.cell-receive { font-size: 0.78rem; }
.chip {
  display: inline-block; background: #eef4f9; color: var(--c-text-sub);
  border: 1px solid var(--c-border); border-radius: 4px;
  font-size: 0.68rem; line-height: 1.5; padding: 1px 6px;
  margin: 0 3px 3px 0; white-space: nowrap;
}
.tbl-link { font-size: 0.78rem; white-space: nowrap; }
.btn-mini {
  display: inline-block; background: var(--c-accent); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 0.75rem; padding: 6px 12px; border-radius: 999px;
  white-space: nowrap; transition: opacity 0.15s;
}
.btn-mini:hover { opacity: 0.85; }
.table-note { font-size: 0.72rem; color: var(--c-text-sub); margin: 6px 0 18px; }

/* ---------- 目次 ---------- */
.toc { border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; padding: 14px 16px; margin: 22px 0; }
.toc-title { font-weight: 700; font-size: 0.85rem; color: var(--c-text-sub); margin-bottom: 8px; }
.toc ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 20px; counter-reset: toc; }
.toc li { break-inside: avoid; font-size: 0.85rem; margin-bottom: 2px; counter-increment: toc; }
/* クリック可能であることを示す: 連番バッジ + 下線 + ホバー背景 */
.toc a {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 6px; border-radius: 6px;
  text-decoration: none; line-height: 1.5;
  transition: background 0.12s;
}
.toc a::before {
  content: counter(toc);
  flex-shrink: 0; width: 1.5em; height: 1.5em; margin-top: 0.15em;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: #fff; border-radius: 50%;
  font-size: 0.72rem; font-weight: 700;
}
.toc a span { text-decoration: underline; text-decoration-color: rgba(15, 107, 184, 0.35); text-underline-offset: 3px; }
.toc a:hover { background: var(--c-bg-soft); }
.toc a:hover span { text-decoration-color: var(--c-primary); }
@media (max-width: 600px) {
  .toc ol { columns: 1; }
  /* タップ領域を確保(1行の項目でも約40px) */
  .toc a { padding: 10px 6px; }
  .toc li { margin-bottom: 0; }
  .toc li + li { border-top: 1px solid #eef2f5; }
}

/* ---------- CTA(小型LOW統一) ---------- */
.cta-low {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent-line);
  border-radius: 8px; padding: 12px 14px; margin: 18px 0; background: #fffdf9;
  position: relative;
}
.cta-body { flex: 1 1 240px; }
.cta-title { font-size: 0.82rem; color: var(--c-text-sub); font-weight: 600; margin-bottom: 2px; }
.cta-service { font-weight: 700; font-size: 1.05rem; line-height: 1.35; margin: 0 0 3px; color: var(--c-text); }
.cta-text { font-size: 0.8rem; color: var(--c-text-sub); margin: 0; }
.cta-btn {
  display: inline-block; background: var(--c-accent); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 0.88rem; padding: 10px 18px; border-radius: 999px;
  flex-shrink: 0; transition: opacity 0.15s;
}
.cta-btn:hover { opacity: 0.85; }

/* ---------- 容量帯バッジ・フィルタ ---------- */
.tier-badge { display: inline-block; font-size: 0.66rem; font-weight: 700; border-radius: 4px; padding: 1px 6px; white-space: nowrap; margin-right: 4px; vertical-align: middle; }
.tier-unlimited { background: #e3f0fb; color: var(--c-primary-dark); border: 1px solid #b9d7f0; }
.tier-standard  { background: #eaf7ee; color: #14683a; border: 1px solid #bfe3cc; }
.tier-light     { background: #f4f1fa; color: #5b4a8a; border: 1px solid #d7cdec; }
.tier-na        { background: #f0f0f0; color: #6b6b6b; }
.cell-cap { font-size: 0.78rem; }
.cap-note { display: block; color: var(--c-text-sub); font-size: 0.7rem; margin-top: 2px; }
.tier-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.tier-filter-btn { border: 1px solid var(--c-border); background: #fff; color: var(--c-text-sub); border-radius: 999px; padding: 5px 14px; font-size: 0.78rem; cursor: pointer; }
.tier-filter-btn.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }

/* ---------- 計算ウィジェット ---------- */
.calc-widget { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px; margin: 22px 0; background: var(--c-bg-soft); }
.calc-widget h2 { margin: 0 0 12px; background: none; border: none; padding: 0; font-size: 1.05rem; }
.calc-field-label { font-size: 0.9rem; font-weight: 600; margin: 14px 0 6px; }
.calc-tier { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 0 0 12px; }
.calc-tier-opt { display: flex; align-items: flex-start; gap: 6px; background: #fff; border: 1px solid var(--c-border); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 0.82rem; }
.calc-tier-opt:has(input:checked) { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.calc-tier-opt input { margin-top: 3px; accent-color: var(--c-primary); }
.calc-tier-opt small { display: block; color: var(--c-text-sub); font-size: 0.68rem; font-weight: 400; line-height: 1.4; }
.calc-days-label { font-size: 0.9rem; font-weight: 600; display: block; }
.calc-controls label { font-size: 0.9rem; font-weight: 600; }
.calc-controls output { font-size: 1.2rem; color: var(--c-primary); font-weight: 700; }
.calc-controls input[type="range"] { width: 100%; margin-top: 6px; accent-color: var(--c-primary); }
.calc-results { margin-top: 12px; }
/* SP: 2段グリッド(1段目=順位+サービス名 / 2段目=総額+CTA)、PC: 1行 */
.calc-row {
  display: grid;
  grid-template-columns: 1.5em auto minmax(0, 1fr) auto;
  grid-template-areas:
    "rank logo name  name"
    "rank logo total cta";
  align-items: center;
  gap: 6px 8px;
  background: #fff; border: 1px solid var(--c-border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px; font-size: 0.9rem;
}
/* サービスロゴ: 縦横比が異なるロゴを同じ枠に収めて一覧の視線を揃える */
.calc-logo {
  grid-area: logo; align-self: center;
  width: 68px; height: 26px; object-fit: contain; object-position: center;
}
.calc-logo-none { display: block; }
.calc-row-stopped .calc-logo { opacity: 0.55; }
/* 小型端末対策: 5桁料金(約29,238円など)はnowrapでセル幅を超えるため、
   ロゴ・余白・ボタンを詰めてCTAとの重なりを防ぐ */
@media (max-width: 420px) {
  .calc-row { gap: 6px; }
  .calc-logo { width: 54px; height: 24px; }
  .calc-go { padding: 7px 10px; font-size: 0.72rem; }
}
/* iPhone SE(第1世代)級の320px幅では横並びが入りきらないためCTAを次の行へ下ろす */
@media (max-width: 360px) {
  .calc-row {
    grid-template-areas:
      "rank logo name  name"
      "rank logo total total"
      "rank logo cta   cta";
  }
  .calc-go { justify-self: start; margin-top: 2px; }
}
.calc-cheapest { border-color: var(--c-accent-line); box-shadow: 0 0 0 1px var(--c-accent-line); }
.calc-cheapest .calc-total { color: var(--c-accent); }
.calc-rank { grid-area: rank; font-weight: 700; color: var(--c-text-sub); text-align: center; align-self: center; }
.calc-name { grid-area: name; font-weight: 600; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.calc-name small { display: block; font-weight: 400; color: var(--c-text-sub); font-size: 0.72rem; line-height: 1.4; margin-top: 1px; }
.calc-name .tier-badge { margin-left: 4px; vertical-align: 1px; }
.calc-total { grid-area: total; font-weight: 700; white-space: nowrap; font-size: 1.02rem; }
.calc-ship-note { display: block; font-weight: 400; color: var(--c-text-sub); font-size: 0.66rem; white-space: nowrap; }
.calc-row-stopped .calc-name, .calc-row-stopped .calc-rank { color: var(--c-text-sub); }
.calc-stopped { font-size: 0.76rem; font-weight: 700; color: var(--c-ng); white-space: normal; }
.calc-stopped small { display: block; font-weight: 400; color: var(--c-text-sub); font-size: 0.66rem; }
.calc-ship { display: block; font-size: 0.82rem; margin-top: 10px; cursor: pointer; }
.calc-ship input { accent-color: var(--c-primary); margin-right: 4px; }
.calc-go {
  grid-area: cta; justify-self: end;
  display: inline-block; background: var(--c-accent); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 0.75rem; padding: 7px 14px; border-radius: 999px;
  white-space: nowrap; transition: opacity 0.15s;
}
.calc-go:hover { opacity: 0.85; }

/* ---------- 切替提案 ---------- */
.switch-proposal { border-top: 2px dashed var(--c-border); margin-top: 34px; padding-top: 8px; }

/* ---------- FAQ ---------- */
.faq-section { margin-top: 34px; }
.faq-item { border: 1px solid var(--c-border); border-radius: 8px; margin-bottom: 8px; background: #fff; }
.faq-item summary { padding: 12px 14px; font-weight: 600; cursor: pointer; font-size: 0.92rem; list-style: none; position: relative; padding-right: 34px; }
.faq-item summary::before { content: "Q."; color: var(--c-primary); font-weight: 700; margin-right: 6px; }
.faq-item summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--c-text-sub); font-size: 1.1rem; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 14px 12px; font-size: 0.88rem; color: var(--c-text); }

/* ---------- ページ末の注意書き(出典の下・フッター直前) ---------- */
.page-disclaimer {
  font-size: 0.72rem; color: var(--c-text-sub); line-height: 1.7;
  margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--c-border);
}

/* ---------- 出典 ---------- */
.sources-block { margin-top: 36px; border-top: 1px solid var(--c-border); padding-top: 14px; }
.sources-title { font-size: 0.85rem !important; background: none !important; border: none !important; padding: 0 !important; margin: 0 0 8px !important; color: var(--c-text-sub); }
.sources-block ul { list-style: none; padding: 0; }
.sources-block li { font-size: 0.75rem; color: var(--c-text-sub); padding: 2px 0; }
.sources-block a { color: var(--c-text-sub); }

/* ---------- ハブカード ---------- */
.hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 14px 0 8px; }
/* カード全体がリンクであることを示すシェブロンを右端に置く。
   絵文字・記号フォントは端末で字形が変わるため、CSSの枠線で描画する */
.hub-card {
  display: block; position: relative; padding: 14px 32px 14px 14px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  text-decoration: none; color: var(--c-text); background: #fff; transition: box-shadow 0.15s;
}
.hub-card::after {
  content: ""; position: absolute; right: 15px; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid var(--c-primary); border-right: 2px solid var(--c-primary);
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.15s;
}
.hub-card:hover { box-shadow: 0 2px 10px rgba(15, 107, 184, 0.15); }
.hub-card:hover::after { right: 11px; }
.hub-card .hc-title { font-weight: 700; color: var(--c-primary); margin-bottom: 4px; display: block; }
.hub-card:hover .hc-title { text-decoration: underline; text-underline-offset: 3px; }
.hub-card .hc-desc { font-size: 0.78rem; color: var(--c-text-sub); }

.matrix-more { font-size: 0.82rem; margin: 6px 0 0; }
.matrix-more a { font-weight: 600; }

/* ---------- 可否マトリクス ---------- */
.avail-table td.mark-ok { color: var(--c-ok); font-weight: 700; }
.avail-table td.mark-ng { color: var(--c-ng); font-weight: 700; }
.avail-table td.mark-partial { color: var(--c-partial); font-weight: 700; }

/* ---------- フッター ---------- */
.site-footer { background: #223440; color: #cfdbe4; padding: 28px 0 34px; margin-top: 0; font-size: 0.82rem; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.footer-title { font-weight: 700; color: #fff; margin-bottom: 6px; }
.footer-links a { display: block; color: #cfdbe4; text-decoration: none; padding: 2px 0; }
.footer-links a:hover { text-decoration: underline; }
/* ---------- 運営者表記(本体サイトと統一) ---------- */
.footer-operator { text-align: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid #3a4d5a; }
.operator-note { font-size: 0.72rem; color: #9fb2bf; line-height: 1.8; margin-bottom: 14px; }
.operator-note a { color: #c9d6e0; text-decoration: underline; }
.operator-note a:hover { color: #ffffff; }
.footer-corp-nav { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.footer-corp-nav a {
  color: #cfdbe4; text-decoration: none; font-size: 0.78rem;
  padding: 4px 16px; border-left: 1px solid #4a5d6a;
}
.footer-corp-nav a:last-child { border-right: 1px solid #4a5d6a; }
.footer-corp-nav a:hover { text-decoration: underline; }
.copyright { font-size: 0.72rem; color: #9fb2bf; }

@media (min-width: 720px) {
  .main-content h1 { font-size: 1.7rem; }
  .parent-logo img { height: 30px; }
  .site-logo { font-size: 1.08rem; }
  .global-nav a { font-size: 0.88rem; padding: 10px 16px; }
  /* PC: 計算結果カードは1行に戻す */
  .calc-row {
    grid-template-columns: 1.7em auto minmax(0, 1fr) auto auto;
    grid-template-areas: "rank logo name total cta";
    gap: 12px;
  }
  .calc-logo { width: 84px; height: 30px; }
  .calc-total { text-align: right; }
}
/* ---------- SP: 横スクロール表の可読性 ----------
   固定1列目が nowrap のため188px(画面の55%)を占め、肝心の比較データが155pxしか
   見えていなかった。折り返しを許可して1列目を圧縮し、データ側の表示面積を広げる */
@media (max-width: 720px) {
  /* 700px固定をやめ、下のセル別min-widthに任せる(列が不必要に広がるのを防ぐ) */
  .rental-table { font-size: 0.8rem; min-width: 0; }
  .rental-table th, .rental-table td { padding: 8px 8px; }
  .rental-table th { min-width: 0; }
  .rental-table .cell-name {
    white-space: normal; overflow-wrap: anywhere;
    min-width: 0; max-width: 108px; line-height: 1.35;
  }
  .rental-table .cell-cap { min-width: 112px; }
  .rental-table .cell-price { min-width: 68px; }
  .rental-table .cell-receive { min-width: 84px; }
  .rental-table .cell-sameday { min-width: 116px; }
  .rental-table .cell-cta { min-width: 84px; }
  .rental-table .cell-terms, .rental-table .cell-what { min-width: 128px; }
  .rental-table .cell-mark { min-width: 96px; }
  .cell-notice { max-width: 108px; }
  /* 固定列の右の仕切りは実線ボーダーで引く。
     iOS Safari は border-collapse:collapse の td に box-shadow を描画しないため、
     影で線を代用すると実機だけ消える(PCのデバイスエミュレーションでは見えてしまう)。
     border-collapse:separate にしてボーダーをセル側に持たせると sticky と一緒に動くので、
     スクロール中も固定列の左右の罫線が残る */
  .rental-table { border: 0; border-collapse: separate; border-spacing: 0; }
  .rental-table th:first-child, .rental-table td:first-child {
    border-left: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
  }
  .rental-table th:last-child, .rental-table td:last-child { border-right: 1px solid var(--c-border); }
  .rental-table tbody tr:last-child td { border-bottom: 1px solid var(--c-border); }
  /* 影は「まだ右に列がある」ことを示す補助として残す(線はボーダーが担保) */
  .rental-table td:first-child { box-shadow: 4px 0 5px rgba(35, 48, 59, 0.06); }
  /* 表だけ画面幅いっぱいに逃がす(.container の左右padding 16px を打ち消す)。
     ただし padding-left で本文と同じ左余白を内側に持たせるため、初期表示は本文と揃い、
     横スクロールするとその余白ごと送られて画面端まで使える(固定列は left:0 = 画面左端に貼り付く) */
  .table-scroll {
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
    border: 0; border-radius: 0;
  }
  /* sticky の left は padding 後のコンテンツ辺が基準になるため、そのままだと
     固定列が16px手前で止まり余白が残る。padding分だけ負に振って画面左端まで送る */
  .rental-table th:first-child, .rental-table td:first-child { left: -16px; }
  /* 上端はヘッダーの色帯が担うため、四辺の枠は上記のセル側ボーダーで閉じている */
  /* 1列目が名称(店舗名・サービス名)の表は下限を上げる。
     自動レイアウトだと66pxまで詰まり「WiFiレンタ/ルどっとこ/む」と細切れに折れるため。
     日数が1列目の表(入院日数・レンタル日数)は対象外にして狭いまま使う */
  .avail-table .cell-name { min-width: 104px; max-width: 132px; }
  .rental-table.name-col .cell-name { min-width: 116px; max-width: 150px; }
  /* 表の前後の注記は読み物なので本文カラムのまま維持する */
  .scroll-hint, .table-note { margin-left: 0; margin-right: 0; }
}
@media (max-width: 400px) {
  /* 極小画面: 容量帯カードの説明文を圧縮して4枚の高さを揃える */
  .calc-tier { grid-template-columns: 1fr 1fr; }
  .calc-tier-opt { padding: 7px 8px; font-size: 0.78rem; }
  .calc-tier-opt small { font-size: 0.64rem; }
  .calc-go { padding: 7px 10px; font-size: 0.72rem; }
}