@charset "utf-8";

/* ============================================================
   ランキングページ カテゴリ最適化デザイン(v3) — 共通土台

   このページでは既存の ranking-detail.css（5,499行）を読み込まない
   （inc/add-assets.php で分岐）。詳細度の競合を最初から発生させないため、
   v3 は独立したCSSだけで完結させる。

   セクション別のスタイルは ranking-v3-*.css に分かれている:
     ranking-v3-head.css   ヒーロー / 掲載基準 / 比較表
     ranking-v3-card.css   事業者カード
     ranking-v3-price.css  料金相場 / 口コミ
     ranking-v3-foot.css   FAQ / 事業者選びガイド / 安心への取り組み

   全セレクタは .rankingV3 配下に書くこと。
   ============================================================ */

.rankingV3 {
    /* 色 */
    --rv3-ink: #40536a;          /* 基本文字色 */
    --rv3-ink-sub: #6b7c88;      /* 補助文字 */
    --rv3-ink-muted: #8493a9;    /* 区切り・弱い文字 */
    --rv3-primary: #00afec;      /* プライマリ（見出し強調・チップ） */
    --rv3-primary-dark: #0092c0; /* リンク */
    --rv3-accent: #f76969;       /* 強調数値 */
    --rv3-danger: #ef4646;       /* CTA（メール相談） */
    --rv3-warn: #ff6e01;
    --rv3-bg: #ffffff;
    --rv3-bg-tint: #f1faff;      /* セクション背景 */
    --rv3-bg-tint-2: #d7f5ff;    /* 表ヘッダなど */
    --rv3-bg-note: #fffde1;      /* 注記ボックス */
    --rv3-border: #cfe3ee;
    --rv3-border-light: #e0e0e0;

    /* レイアウト */
    --rv3-content-width: 1110px;
    --rv3-gutter: 20px;
    --rv3-radius: 8px;
    --rv3-radius-lg: 12px;

    color: var(--rv3-ink);
    font-family: "Noto Sans JP", sans-serif;
}

.rankingV3 *,
.rankingV3 *::before,
.rankingV3 *::after {
    box-sizing: border-box;
}

/* SPでの横スクロール事故を防ぐ安全策。
   各セクション側の幅指定が壊れても、ページ本体が横スクロールしないようにする。
   意図的な内部横スクロール（.rv3CompareScroll等）はネストした overflow-x:auto なので影響しない。 */
.rankingV3 {
    max-width: 100%;
    overflow-x: hidden;
}

.rankingV3 .inner {
    width: 100%;
    max-width: var(--rv3-content-width);
    margin-inline: auto;
    padding-inline: var(--rv3-gutter);
}

.rankingV3 a {
    color: var(--rv3-primary-dark);
}

/* セクション見出し（中央寄せ＋下のマルチカラー区切り） */
.rankingV3 .rv3SectionTitle {
    margin: 0 0 32px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.rankingV3 .rv3SectionTitle .em {
    color: var(--rv3-primary);
}

/* データ未入力セル */
.rankingV3 .rv3Empty {
    color: var(--rv3-ink-muted);
}

@media screen and (max-width: 768px) {
    .rankingV3 {
        --rv3-gutter: 15px;
    }

    .rankingV3 .rv3SectionTitle {
        font-size: 20px;
        margin-bottom: 20px;
    }
}