@charset "utf-8";

/* ============================================================
   ランキングページ v3 — ヒーロー / 掲載基準 / 総合ランキング比較表
   担当範囲: hero.php / criteria.php / compare-table.php
   全セレクタ .rankingV3 配下。共通変数は assets-v2/css/ranking-v3.css を使う。
   ============================================================ */

/* ------------------------------------------------------------
   パンくず（site-breadcrumb.php が出力する #breadcrumb.rv3HeroBreadcrumb）
   hero.php が rv3HeroInner の内側・H1の上に通常フローで出力する。
   中身の文言はRankMath側が生成するため、ここでは配置とサイズのみを調整する。
   ------------------------------------------------------------ */
.rankingV3 .rv3HeroInner #breadcrumb.rv3HeroBreadcrumb {
    padding: 0;
    margin: 0 0 12px;
    background: transparent;
}

.rankingV3 .rv3HeroInner #breadcrumb.rv3HeroBreadcrumb .inner {
    max-width: none;
    width: auto;
    padding: 0;
}

.rankingV3 .rv3HeroInner #breadcrumb.rv3HeroBreadcrumb .breadList {
    font-size: 11px;
    font-weight: 350;
    line-height: 16.5px;
}

/* ------------------------------------------------------------
   ヒーロー
   ------------------------------------------------------------ */
.rankingV3 .rv3Hero {
    position: relative;
    overflow: hidden;
}

.rankingV3 .rv3HeroBg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 背景画像はカテゴリごとにACFで差し替わる（rv3_hero_image）。どんな画像が入っても
   テキストが読める下限を、画像側ではなくこの白のかぶせで担保する。
   テキスト塊は本文カラム(1110px)の左端から476px幅に収まるので、1920px幅の画面でも
   その右端は画面の約46%。そこまでは不透明度を落とさない（従来は40%地点で0.5まで
   落ちており、明るい背景画像だと本文が読みづらかった）。
   不透明度の下限は「背景画像が真っ黒でも #40536a の本文が WCAG AA(4.5:1) を満たす」こと。
   その境目は 0.78 前後（0.75 まで下げると 4.29:1 で割る）。テキストが乗る範囲は
   0.84 を下回らない値にしてある（真っ黒な背景でも約 5.3:1）。
   2026-09-17: 白が強すぎて背景イラストが飛んでいたため、ユーザー指示で全体を一段薄くした。 */
.rankingV3 .rv3HeroBg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.84) 46%, rgba(255, 255, 255, 0.48) 62%, rgba(255, 255, 255, 0) 82%);
}

.rankingV3 .rv3HeroBg.sp {
    display: none;
}

/* ヒーローの中身は、ページ本文と同じ中央寄せカラム（--rv3-content-width）に乗せる。
   固定の margin-left にすると、1440pxより広い画面で本文カラムより左へ離れていく
   （1920pxで237pxのずれを実測）。カラム自体は本文幅にし、テキスト塊だけ左半分に収める
   （背景イラストの主役は右側にあるため）。 */
.rankingV3 .rv3HeroInner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--rv3-content-width);
    margin-inline: auto;
    padding: 48px var(--rv3-gutter) 32px;
}

.rankingV3 .rv3HeroInner > * {
    max-width: 476px;
}

.rankingV3 .rv3HeroTitle {
    margin: 0 0 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    font-size: 44px;
    line-height: 1.22;
    color: var(--rv3-ink);
}

.rankingV3 .rv3HeroTitle > span {
    display: block;
}

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

.rankingV3 .rv3HeroChips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.rankingV3 .rv3HeroChips li {
    padding: 4px 12px;
    background: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    color: var(--rv3-ink);
    box-shadow: 0 1px 4px rgba(46, 64, 82, 0.1);
}

.rankingV3 .rv3HeroCriteria {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--rv3-ink);
}

.rankingV3 .rv3HeroCriteria img.sp {
    display: none;
}

.rankingV3 .rv3HeroPriceCard {
    width: 440px;
    max-width: 100%;
    margin: 0 0 20px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(64, 84, 107, 0.16);
}

.rankingV3 .rv3HeroPriceCard .ttl {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 13px;
    color: var(--rv3-ink);
}

.rankingV3 .rv3HeroPriceCard .note {
    margin: 0 0 4px;
    font-size: 11px;
    color: var(--rv3-ink-sub);
}

.rankingV3 .rv3HeroPriceCard .amount {
    margin: 0;
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: var(--rv3-accent);
}

.rankingV3 .rv3HeroAreaBox {
    width: 460px;
    max-width: 100%;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(64, 84, 107, 0.12);
}

.rankingV3 .rv3HeroAreaBox .ttl {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 16px;
    color: var(--rv3-ink);
}

.rankingV3 .rv3HeroAreaBox .row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.rankingV3 .rv3HeroAreaBox .lbl {
    flex: none;
    font-weight: 700;
    font-size: 12px;
    color: #4b5563;
}

.rankingV3 .rv3HeroAreaBox .selectWrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.rankingV3 .rv3HeroAreaBox select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    appearance: none;
    padding: 8px 32px 8px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #4b5563;
}

.rankingV3 .rv3HeroAreaBox .selectWrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 12px;
    height: 8px;
    transform: translateY(-50%);
    background: url("../images/ranking-v3/icon-chevron-down.svg") center / contain no-repeat;
    pointer-events: none;
}

.rankingV3 .rv3HeroAreaBtn {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: none;
    border-radius: 6px;
    background: var(--rv3-primary);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

/* ------------------------------------------------------------
   掲載基準セクション
   ------------------------------------------------------------ */
.rankingV3 .rv3Criteria {
    margin: 32px auto;
}

.rankingV3 .rv3Criteria .inner {
    max-width: var(--rv3-content-width);
    padding: 20px;
    background: var(--rv3-bg-tint);
    border-radius: 4px;
}

.rankingV3 .rv3CriteriaTtl {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 16px;
    color: var(--rv3-primary);
}

.rankingV3 .rv3CriteriaLead {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--rv3-ink);
}

.rankingV3 .rv3CriteriaList {
    margin: 0 0 16px;
    padding-top: 12px;
    border-top: 1px solid #ccd1db;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.8;
    color: var(--rv3-ink);
}

.rankingV3 .rv3CriteriaFoot {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #ccd1db;
    font-size: 14px;
    color: #666b7a;
}

/* ------------------------------------------------------------
   総合ランキング比較表
   ------------------------------------------------------------ */
.rankingV3 .rv3Compare {
    margin: 56px auto;
}

.rankingV3 .rv3SectionDivider {
    margin: -20px 0 32px;
    text-align: center;
}

.rankingV3 .rv3CompareScroll {
    /* 横スクロールヒント(.rv3CompareScrollHint)が position:absolute なので、
       ここを位置の基準にする。指定が無いと祖先まで遡ってヒーローの上に出る（実際に出た）。 */
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 一度横スクロールしたらヒントを消す（表を覆い続けないように）。JSが is-scrolled を付ける。 */
.rankingV3 .rv3CompareScroll.is-scrolled .rv3CompareScrollHint {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.rankingV3 .rv3CompareTable {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--rv3-border);
}

.rankingV3 .rv3CompareTable th,
.rankingV3 .rv3CompareTable td {
    padding: 12px 10px;
    border: 1px solid var(--rv3-border);
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    /* 長い値は列を広げず折り返す。項目名（保証・現地調査など）は行ごとに文字数が
       まちまちで、折り返さないと1列だけ極端に広がって列幅が揃わない。 */
    overflow-wrap: anywhere;
}

/* PCでは列幅を固定して等分する。table-layout:auto のままだと中身の文字数で
   列幅が決まり、事業者ごとに列の広さが変わって比較しづらい（2026-09-17 指摘）。
   ラベル列だけ幅を決めれば、残りは fixed レイアウトが均等に割り振る。
   SPは横スクロール＋min-width（下部のSPブロック）で既に幅が揃っているので触らない。 */
@media screen and (min-width: 769px) {
    .rankingV3 .rv3CompareTable {
        table-layout: fixed;
    }

    .rankingV3 .rv3CompareTable .rv3CompareLabelCol {
        width: 160px;
    }
}

.rankingV3 .rv3CompareTable thead th {
    background: var(--rv3-primary);
    color: #fff;
    font-weight: 700;
}

.rankingV3 .rv3CompareTable tbody th {
    background: var(--rv3-bg-tint);
    color: var(--rv3-ink);
    font-weight: 700;
    text-align: left;
}

.rankingV3 .rv3CompareTable tbody tr:nth-child(even) td {
    background: var(--rv3-bg-tint);
}

.rankingV3 .rv3CompareTable td {
    color: var(--rv3-ink);
    font-weight: 400;
}

/* 値が取れていないセル（「要問合せ」）。実データと同じ強さで並べると、
   どれが確認できた条件なのか読み取れなくなるため弱く見せる */
.rankingV3 .rv3CompareTable td.isUnknown {
    color: var(--rv3-ink-sub);
    font-size: 11px;
}

.rankingV3 .rv3CompareTable td.isEmphasis {
    color: var(--rv3-primary);
    font-weight: 700;
}

.rankingV3 .rv3CompareVendorCell a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.rankingV3 .rv3CompareVendorCell .thumbWrap {
    display: block;
    width: 74px;
    height: 45px;
    overflow: hidden;
    border-radius: 4px;
}

.rankingV3 .rv3CompareVendorCell .thumbWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rankingV3 .rv3CompareVendorCell .name {
    color: var(--rv3-primary-dark);
    font-weight: 700;
    text-decoration: underline;
}

.rankingV3 .rv3CompareScrollHint {
    display: none;
}

/* ============================================================
   SP（既存テーマの慣習に合わせ max-width: 768px）
   ============================================================ */
@media screen and (max-width: 768px) {
    .rankingV3 .rv3HeroInner #breadcrumb.rv3HeroBreadcrumb {
        margin-bottom: 10px;
    }

    .rankingV3 .rv3HeroInner #breadcrumb.rv3HeroBreadcrumb .breadList {
        font-size: 10px;
    }

    /* ヒーロー */
    .rankingV3 .rv3HeroBg.pc {
        display: none;
    }

    .rankingV3 .rv3HeroBg.sp {
        display: block;
    }

    .rankingV3 .rv3HeroBg.sp::after {
        /* SPも同じ考え方。テキストはヒーロー上半分に乗るので、そこまでは不透明度を保つ。 */
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.84) 45%, rgba(255, 255, 255, 0.30) 72%, rgba(255, 255, 255, 0) 100%);
    }

    .rankingV3 .rv3HeroInner {
        width: 100%;
        max-width: none;
        margin-left: 0;
        padding: 40px 16px 24px;
    }

    /* SPは1カラムなので、PCで掛けている左半分の制限を外す */
    .rankingV3 .rv3HeroInner > * {
        max-width: none;
    }

    .rankingV3 .rv3HeroTitle {
        font-size: 22px;
        line-height: 1.28;
    }

    .rankingV3 .rv3HeroChips li {
        font-size: 10px;
        box-shadow: 0 1px 4px rgba(46, 64, 82, 0.1);
    }

    .rankingV3 .rv3HeroCriteria {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        font-size: 11px;
    }

    .rankingV3 .rv3HeroCriteria img.sp {
        display: block;
        width: 14px;
        height: 14px;
        flex: none;
        margin-top: 2px;
    }

    .rankingV3 .rv3HeroPriceCard {
        width: 100%;
    }

    .rankingV3 .rv3HeroPriceCard .amount {
        font-size: 26px;
    }

    .rankingV3 .rv3HeroAreaBox {
        width: 100%;
    }

    /* 掲載基準 */
    .rankingV3 .rv3Criteria .inner {
        padding: 20px;
    }

    .rankingV3 .rv3CriteriaTtl {
        font-size: 16px;
    }

    .rankingV3 .rv3CriteriaLead {
        font-size: 12px;
    }

    .rankingV3 .rv3CriteriaList {
        font-size: 11px;
        color: #333340;
    }

    .rankingV3 .rv3CriteriaFoot {
        font-size: 11px;
    }

    /* 比較表 */
    .rankingV3 .rv3SectionTitle {
        font-size: 22px;
    }

    .rankingV3 .rv3CompareTable th,
    .rankingV3 .rv3CompareTable td {
        min-width: 130px;
    }

    .rankingV3 .rv3CompareTable .rv3CompareLabelCol {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 100px;
        background: var(--rv3-bg-tint);
    }

    .rankingV3 .rv3CompareTable thead .rv3CompareLabelCol {
        background: var(--rv3-primary);
    }

    .rankingV3 .rv3CompareScrollHint {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .rankingV3 .rv3CompareScrollHint img {
        max-width: 160px;
    }
}