@charset "utf-8";

/* ══════════════════════════════════════════
   PROVITY — 費用比較ページ専用スタイル
   (cost-comparison.css)
   common.css の後に読み込む。
   既存の #id ルールと衝突しないよう、
   すべて .cc-* 接頭辞でスコープする。
   navy はブランドカラー #1a3374 を使用。
   ══════════════════════════════════════════ */

/* ─── ヒーロー（H1バナー） ───────────────── */
/* common.css の header{position:fixed} を上書き */
header.cc-hero {
  position:   static;
  height:     auto;
  width:      100%;
  padding:    0;
  box-shadow: none;
  background: linear-gradient(135deg, #14264f 0%, #1a3374 55%, #2a4bb5 100%);
}
.cc-hero-inner {
  max-width: 84.0rem;
  margin:    0 auto;
  padding:   5.0rem 3.0rem 4.5rem;
  box-sizing: border-box;
}
.cc-hero .cc-back {
  display:         inline-block;
  color:           rgba(255,255,255,.8);
  font-size:       1.4rem;
  text-decoration: none;
  margin-bottom:   2.4rem;
  transition:      var(--transition);
}
.cc-hero .cc-back:hover { color: #fff; }
.cc-hero .cc-eyebrow {
  color:         rgba(255,255,255,.75);
  font-size:     1.4rem;
  line-height:   1.6;
  margin-bottom: 1.4rem;
}
.cc-hero h1 {
  color:       #fff;
  font-size:   3.2rem;
  font-weight: 700;
  line-height: 1.45;
}

/* ─── 本文コンテナ ───────────────────────── */
.cc-page {
  max-width:  84.0rem;
  margin:     0 auto;
  padding:    5.0rem 3.0rem 2.0rem;
  box-sizing: border-box;
}
.cc-page p,
.cc-page li,
.cc-page dd,
.cc-page dt {
  font-size:   1.6rem;
  line-height: 1.9;
  color:       var(--color-text);
}
.cc-page > section p { margin-bottom: 1.6rem; }
.cc-page a {
  color:           var(--color-primary);
  text-decoration: underline;
}
.cc-page a:hover { opacity: 0.7; }

/* ─── リード文 ───────────────────────────── */
.cc-lead {
  background:    #eef1f8;
  border-left:   4px solid #1a3374;
  border-radius: 8px;
  padding:       2.4rem 2.8rem;
  margin-bottom: 5.0rem;
  font-size:     1.6rem !important;
  line-height:   1.95 !important;
}

/* ─── セクション見出し ───────────────────── */
.cc-page > section { margin-bottom: 5.5rem; }
.cc-page h2 {
  font-size:      2.8rem;
  font-weight:    700;
  color:          #1a3374;
  line-height:    1.4;
  margin-bottom:  2.6rem;
  padding-bottom: 1.4rem;
  border-bottom:  3px solid #1a3374;
}
.cc-page h2::after {
  content:       '';
  display:       block;
  width:         6.0rem;
  height:        0.5rem;
  background:    var(--color-accent);
  border-radius: 1.0rem;
  margin-top:    1.4rem;
  margin-bottom: -1.65rem;
}

/* ─── 前提条件ブロック（セクション2） ─────── */
.cc-premise {
  background:    #f7f8fb;
  border:        1px solid #e2e6ef;
  border-radius: 8px;
  padding:       2.4rem 2.8rem;
  margin-bottom: 2.4rem;
}
.cc-premise .cc-premise-title {
  font-size:     1.9rem !important;
  font-weight:   700;
  color:         #1a3374;
  margin-bottom: 1.4rem !important;
}
.cc-premise ul {
  list-style:  none;
  padding:     0;
  margin:      0;
}
.cc-premise ul > li {
  position:      relative;
  padding-left:  2.0rem;
  margin-bottom: 1.2rem;
  line-height:   1.9;
}
.cc-premise ul > li::before {
  content:  '';
  position: absolute;
  left:     0;
  top:      1.0rem;
  width:    0.8rem;
  height:   0.8rem;
  border-radius: 50%;
  background: #1a3374;
}
.cc-premise ul > li:last-child { margin-bottom: 0; }
/* ※注記の行はマーカーを消す */
.cc-premise ul > li.cc-li-note::before { display: none; }
.cc-premise ul > li.cc-li-note {
  padding-left: 0;
  font-size:    1.35rem;
  color:        var(--color-text-muted);
  line-height:  1.75;
}

/* ─── 箇条書き（本文中の補足リスト） ──────── */
.cc-page ul.cc-bullets {
  list-style:    none;
  padding:       0;
  margin:        0 0 1.6rem;
}
.cc-page ul.cc-bullets > li {
  position:      relative;
  padding-left:  2.0rem;
  margin-bottom: 1.2rem;
  line-height:   1.9;
}
.cc-page ul.cc-bullets > li::before {
  content:   '';
  position:  absolute;
  left:      0;
  top:       1.0rem;
  width:     0.8rem;
  height:    0.8rem;
  border-radius: 50%;
  background: #1a3374;
}

/* ─── 表組み（PC:通常 / SP:横スクロール） ─── */
.cc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin:     0 0 2.4rem;
}
.cc-table {
  width:           100%;
  min-width:       520px;      /* SPでは横スクロール */
  border-collapse: collapse;
  font-size:       1.5rem;
}
.cc-table th,
.cc-table td {
  border:      1px solid #d9dee8;
  padding:     1.3rem 1.4rem;
  line-height: 1.7;
  text-align:  left;
  vertical-align: top;
}
.cc-table thead th {
  background:  #1a3374;
  color:       #fff;
  font-weight: 700;
  text-align:  center;
  white-space: nowrap;
}
.cc-table tbody th {
  background:  #eef1f8;
  color:       #1a3374;
  font-weight: 700;
  white-space: nowrap;
}
.cc-table tbody tr:nth-child(odd) td { background: #f7f8fb; }
.cc-table td.cc-num {
  text-align:  right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* 数値比較表（経過年数×2列）：SPでも収まるので横スクロール解除・2データ列を等幅に */
/* .cc-table.cc-table--fit の複合セレクタで SP メディアクエリの min-width も上書き */
.cc-table.cc-table--fit {
  min-width:    0;
  table-layout: fixed;
}
.cc-table.cc-table--fit th:first-child,
.cc-table.cc-table--fit td:first-child { width: 26%; }
.cc-table.cc-table--fit th:nth-child(2),
.cc-table.cc-table--fit td:nth-child(2),
.cc-table.cc-table--fit th:nth-child(3),
.cc-table.cc-table--fit td:nth-child(3) { width: 37%; }
/* セル内テキストはすべて中央揃え（.cc-num の右揃えより高い詳細度で上書き） */
.cc-table.cc-table--fit th,
.cc-table.cc-table--fit td,
.cc-table.cc-table--fit td.cc-num { text-align: center; }

/* ─── 累積費用グラフ ─────────────────────── */
.cc-graph {
  margin: 1.0rem 0 2.6rem;
}
.cc-graph svg {
  display:   block;
  width:     100%;
  max-width: 66.0rem;
  height:    auto;
  margin:    0 auto;
}
.cc-graph figcaption {
  text-align: center;
  font-size:  1.3rem;
  color:      var(--color-text-muted);
  margin-top: 1.0rem;
}

/* ─── 注記（※） ─────────────────────────── */
.cc-notes {
  list-style: none;
  padding:    0;
  margin:     1.0rem 0 0;
}
.cc-notes > li {
  font-size:     1.35rem !important;
  color:         var(--color-text-muted);
  line-height:   1.75 !important;
  margin-bottom: 0.8rem;
}

/* ─── 結論セクションのケース ─────────────── */
.cc-case { margin-bottom: 1.6rem; }
.cc-case strong { color: #1a3374; }

/* ─── よくあるご質問 ─────────────────────── */
.cc-faq dl { margin: 0; }
.cc-faq dt {
  font-size:     1.7rem !important;
  font-weight:   700;
  color:         #1a3374;
  line-height:   1.6;
  margin-top:    2.8rem;
  padding-top:   2.4rem;
  border-top:    1px solid #e2e6ef;
}
.cc-faq dl:first-child dt { border-top: none; padding-top: 0; margin-top: 0; }
.cc-faq dd {
  margin-top: 1.0rem;
  line-height: 1.9;
}

/* ─── CTA（結び） ────────────────────────── */
.cc-cta {
  background: #1a3374;
  text-align: center;
  padding:    5.5rem 3.0rem;
  margin-top: 3.0rem;
}
.cc-cta h2 {
  color:         #fff;
  font-size:     2.8rem;
  font-weight:   700;
  line-height:   1.5;
  margin-bottom: 3.2rem;
}
.cc-cta-btns {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     center;
  gap:             2.0rem;
}
/* common.css .btn-primary を流用（黄色CTA）。flex内の margin:auto を無効化 */
.cc-cta-btns .btn-primary { margin: 0; }
/* 副ボタン：白地・navy文字 */
.cc-btn-secondary {
  display:       block;
  background:    #fff;
  color:         #1a3374;
  font-size:     2.4rem;
  font-weight:   700;
  font-family:   var(--font-body);
  line-height:   1;
  text-align:    center;
  border:        none;
  border-radius: var(--radius-btn);
  border-bottom: 4px solid #b9c4de;
  padding:       2.0rem;
  width:         45.0rem;
  height:        7.0rem;
  box-sizing:    border-box;
  cursor:        pointer;
  transition:    var(--transition);
}
.cc-btn-secondary:hover { opacity: 0.82; }

/* ─── ページ下部ナビ ─────────────────────── */
.cc-pagenav {
  text-align: center;
  padding:    3.6rem 2.0rem;
  border-top: 1px solid #e2e6ef;
}
.cc-pagenav a {
  color:           #1a3374;
  font-size:       1.5rem;
  font-weight:     700;
  text-decoration: underline;
}
.cc-pagenav a:hover { opacity: 0.7; }

/* ════════════════════════════════════════════
   レスポンシブ: スマートフォン (〜750px)
   common.css で 1rem≒1.333vw に縮むため文字を拡大
   ════════════════════════════════════════════ */
@media only screen and (max-width: 750px) {
  .cc-hero-inner { padding: 6.0rem 3.0rem 5.0rem; }
  .cc-hero h1 { font-size: 4.4rem; }
  .cc-hero .cc-eyebrow,
  .cc-hero .cc-back { font-size: 2.2rem; }

  .cc-page { padding: 6.0rem 3.0rem 2.0rem; }
  .cc-page p,
  .cc-page li,
  .cc-page dd,
  .cc-page dt { font-size: 2.4rem; }
  .cc-lead { font-size: 2.4rem !important; }

  .cc-page h2 { font-size: 3.6rem; }
  .cc-premise .cc-premise-title { font-size: 2.9rem !important; }
  .cc-premise ul > li.cc-li-note { font-size: 2.0rem; }

  .cc-table { font-size: 2.2rem; min-width: 620px; }
  .cc-notes > li { font-size: 2.0rem !important; }
  .cc-graph figcaption { font-size: 2.0rem; }

  .cc-faq dt { font-size: 2.7rem !important; }

  .cc-cta h2 { font-size: 3.6rem; }
  .cc-btn-secondary {
    font-size:   3.4rem;
    line-height: 4.6rem;
    width:       65.0rem;
    height:      10.0rem;
  }
  .cc-pagenav a { font-size: 2.4rem; }
}