@charset "utf-8";

/* ============================================================
   ランキングページ カテゴリ最適化デザイン(v3) — 事業者カード（TOP5）

   担当: 事業者カードのPHPテンプレート/CSSのみ。
   全セレクタは .rankingV3 配下。共通土台 ranking-v3.css の変数を使う。
   ============================================================ */

.rankingV3 .rv3Card {
    --rv3-card-border: #a5a3a9;
    --rv3-card-sub-bg: #e9eef1;
    --rv3-card-sub-label: #6b7c88;
    --rv3-card-star-bg: #e0e0e0;
    --rv3-card-star-fill: #ffda12;
    --rv3-card-review-label: #454545;
    --rv3-card-reason-bg: #fffbe8;

    position: relative;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--rv3-bg);
    border: 1px solid var(--rv3-card-border);
    border-radius: 16px;
}

.rankingV3 .rv3Card:last-child {
    margin-bottom: 0;
}

/* ---- 見出し行（順位バッジ＋事業者名／スコア） ---- */
.rankingV3 .rv3CardHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.rankingV3 .rv3CardHeadLeft {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rankingV3 .rv3CardBadge {
    flex: none;
    display: block;
    width: 38px;
}

.rankingV3 .rv3CardBadge img {
    display: block;
    width: 100%;
    height: auto;
}

.rankingV3 .rv3CardName {
    margin: 0;
    color: var(--rv3-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rankingV3 .rv3CardScore {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    padding: 6px 16px;
    background: var(--rv3-primary);
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
}

.rankingV3 .rv3CardScoreLabel {
    font-size: 12px;
    font-weight: 700;
}

.rankingV3 .rv3CardScoreNum {
    font-size: 15px;
    font-weight: 700;
}

/* ---- こんな方におすすめ ---- */
.rankingV3 .rv3CardRecommend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--rv3-bg);
    border: 1px solid var(--rv3-primary);
    border-radius: 8px;
}

.rankingV3 .rv3CardRecommendTag {
    flex: none;
    padding: 4px 10px;
    background: var(--rv3-bg-tint-2);
    border-radius: 999px;
    color: var(--rv3-primary);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.rankingV3 .rv3CardRecommendText {
    flex: 1 1 240px;
    margin: 0;
    color: var(--rv3-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* ---- 主要情報 2カラム ---- */
.rankingV3 .rv3CardMain {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.rankingV3 .rv3CardVisual {
    flex: 0 0 518px;
    max-width: 518px;
    min-width: 0;
}

.rankingV3 .rv3CardInfo {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- バナー・サブ写真 ---- */
.rankingV3 .rv3CardBanner {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.rankingV3 .rv3CardBannerMain {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    aspect-ratio: 393 / 239;
    border-radius: 5px;
    overflow: hidden;
    background: var(--rv3-card-sub-bg);
}

.rankingV3 .rv3CardBannerMain img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* サブ写真が無いときは、アイキャッチを横いっぱいに伸ばさず中央に置く
   （サブ写真がある行と絵の大きさを揃えるため）。 */
.rankingV3 .rv3CardBanner:not(.hasSubPhotos) .rv3CardBannerMain {
    flex: 0 1 400px;
    margin-inline: auto;
}

.rankingV3 .rv3CardSubPhotos {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 110px;
}

.rankingV3 .rv3CardSubPhoto {
    flex: 1 1 0;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--rv3-card-sub-bg);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.rankingV3 .rv3CardSubPhoto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rankingV3 .rv3CardSubPhoto:focus-visible {
    outline: 2px solid var(--rv3-primary);
    outline-offset: 2px;
}

/* 入れ替え中は写真が枠からはみ出して動くので、切り取らずに見せる。
   終わったら JS がクラスを外して元の overflow: hidden に戻る。 */
.rankingV3 .rv3CardBanner.is-swapping .rv3CardBannerMain,
.rankingV3 .rv3CardBanner.is-swapping .rv3CardSubPhoto {
    overflow: visible;
}

.rankingV3 .rv3CardBanner.is-swapping .rv3CardSubPhoto img,
.rankingV3 .rv3CardBanner.is-swapping .rv3CardBannerMain img {
    border-radius: 5px;
    position: relative;
    z-index: 1;
}

/* ---- 口コミ総合評価 ---- */
.rankingV3 .rv3CardReview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.rankingV3 .rv3CardReviewLabel {
    flex: none;
    margin: 0;
    color: var(--rv3-card-review-label);
    font-size: 14px;
    font-weight: 700;
}

.rankingV3 .rv3CardStars {
    position: relative;
    flex: none;
    display: block;
    width: 89px;
    height: 14px;
    background: var(--rv3-card-star-bg);
}

.rankingV3 .rv3CardStarsFill {
    display: block;
    height: 100%;
    background: var(--rv3-card-star-fill);
}

.rankingV3 .rv3CardStars::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../images/ranking-v3/icon-star-rating.svg) no-repeat left top;
    background-size: 100% 100%;
}

.rankingV3 .rv3CardReviewNum {
    flex: none;
    margin: 0;
    color: var(--rv3-accent);
    font-size: 20px;
    font-weight: 700;
}

.rankingV3 .rv3CardReviewCount {
    flex: none;
    margin: 0;
}

.rankingV3 .rv3CardReviewCount a {
    color: var(--rv3-primary);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
}

/* ---- 特徴チップ ---- */
.rankingV3 .rv3CardChips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rankingV3 .rv3CardChip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: var(--rv3-bg-tint);
    border: 1px solid var(--rv3-bg-tint-2);
    border-radius: 999px;
    color: var(--rv3-primary);
    font-size: 12px;
    font-weight: 700;
}

.rankingV3 .rv3CardChip img {
    display: block;
    width: 12px;
    height: 12px;
}

/* ---- overview スペック表 ---- */
.rankingV3 .rv3CardTable {
    margin: 0 0 12px;
}

.rankingV3 .rv3CardTableRow {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--rv3-bg-tint-2);
    border-top: none;
}

.rankingV3 .rv3CardTableRow:first-child {
    border-top: 1px solid var(--rv3-bg-tint-2);
}

/* 幅は一番長いラベル「営業時間・営業日」が1行で収まるように決める。
   全角8文字 × 14px = 112px ＋ 左右padding 24px = 136px。130pxだと
   「営業時間・営業」「日」で改行していた（2026-09-17 ユーザー指摘・実測）。 */
.rankingV3 .rv3CardTableRow dt {
    flex: 0 0 140px;
    width: 140px;
    margin: 0;
    padding: 8px 12px;
    background: var(--rv3-bg-tint);
    color: var(--rv3-ink);
    font-size: 14px;
    font-weight: 700;
}

.rankingV3 .rv3CardTableRow dt a {
    color: var(--rv3-primary);
    text-decoration: underline;
    cursor: pointer;
}

/* 対応エリアは1行で省略する（全国対応だと都道府県が数十件並ぶ）。
   全文は見出し「対応エリア」のポップアップで見られるので情報は失われない。
   親に min-width:0 が要るのは、flexアイテム内で ellipsis を効かせるため。 */
.rankingV3 .rv3CardTableRow dd.rv3CardAreaValue {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rankingV3 .rv3CardTableRow dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 8px 12px;
    background: var(--rv3-bg);
    color: var(--rv3-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    word-break: break-all;
}

/* ---- この順位の理由 ---- */
.rankingV3 .rv3CardReason {
    padding: 14px;
    background: var(--rv3-card-reason-bg);
    border-radius: 10px;
}

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

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

.rankingV3 .rv3CardReasonTags li {
    padding: 4px 12px;
    background: var(--rv3-bg);
    border: 1px solid var(--rv3-primary);
    border-radius: 999px;
    color: var(--rv3-primary);
    font-size: 12px;
    font-weight: 700;
}

/* ネガの注記（「追加費用の言及 0件 ／ 料金が高い 2件」）。
   Figma: 11px / #6b7c88。チップより弱い扱いにする */
.rankingV3 .rv3CardReasonNote {
    margin: 8px 0 0;
    color: var(--rv3-ink-sub);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

/* ---- 区切り線 ---- */
.rankingV3 .rv3CardDivider {
    margin: 16px 0;
    border-top: 1px solid var(--rv3-border-light);
}

/* ---- CTA行 ---- */
.rankingV3 .rv3CardCta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.rankingV3 .rv3CardCta > * {
    flex: 1 1 300px;
    max-width: 340px;
}

.rankingV3 .rv3CardCtaPhone {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.rankingV3 .rv3CtaIcon {
    flex: none;
    width: 33px;
    height: 33px;
}

/* .pc / .sp の表示切替は common.css のサイト共通ルール（max-width:768px）に従う */

.rankingV3 .rv3CardCtaPhoneBody {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rankingV3 .rv3CardCtaPhoneNum {
    color: var(--rv3-warn);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.rankingV3 .rv3CardCtaPhoneNote {
    color: var(--rv3-warn);
    font-size: 14px;
    font-weight: 700;
}

.rankingV3 .rv3CardCtaMail,
.rankingV3 .rv3CardCtaDetail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.rankingV3 .rv3CardCtaMail {
    background: var(--rv3-danger);
    color: #fff;
}

.rankingV3 .rv3CardCtaMail img {
    display: block;
    width: 22px;
    height: 22px;
}

.rankingV3 .rv3CardCtaDetail {
    background: var(--rv3-bg);
    border: 1.5px solid var(--rv3-primary);
    color: var(--rv3-primary);
}

/* ============================================================
   SP（〜768px）
   ============================================================ */
@media screen and (max-width: 768px) {
    .rankingV3 .rv3Card {
        margin-bottom: 16px;
        padding: 12px 14px;
        border: 1px solid #c7c5c9;
        border-radius: 10px;
    }

    .rankingV3 .rv3CardBadge {
        width: 32px;
    }

    .rankingV3 .rv3CardName {
        font-size: 18px;
    }

    .rankingV3 .rv3CardScore {
        padding: 4px 12px;
        background: #1db7f2;
    }

    .rankingV3 .rv3CardScoreLabel {
        font-size: 10px;
    }

    .rankingV3 .rv3CardScoreNum {
        font-size: 13px;
    }

    .rankingV3 .rv3CardRecommend {
        padding: 10px;
    }

    .rankingV3 .rv3CardRecommendTag {
        font-size: 10px;
    }

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

    /* 2カラム→縦積み */
    .rankingV3 .rv3CardMain {
        flex-direction: column;
        gap: 12px;
    }

    /* column方向のflexでは、子が max-content 幅まで伸びてカード外へはみ出す
       （対応エリアが全国表記の事業者で 2,093px まで伸びていた）。カード幅に固定する。 */
    .rankingV3 .rv3CardMain > * {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .rankingV3 .rv3CardVisual {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    .rankingV3 .rv3CardBanner {
        flex-direction: column;
    }

    .rankingV3 .rv3CardBannerMain {
        aspect-ratio: 323.31 / 197.22;
    }

    /* SPは1カラムなので、サブ写真が無くても横いっぱいでよい */
    .rankingV3 .rv3CardBanner:not(.hasSubPhotos) .rv3CardBannerMain {
        flex: 1 1 auto;
        margin-inline: 0;
    }

    .rankingV3 .rv3CardSubPhotos {
        flex-direction: row;
        width: 100%;
        height: 65px;
    }

    .rankingV3 .rv3CardSubPhoto {
        height: 100%;
    }

    /* SPも同じ理由で広げる。全角8文字 × 12px = 96px ＋ 左右padding 16px = 112px。 */
    .rankingV3 .rv3CardTableRow dt {
        flex: 0 0 116px;
        width: 116px;
        padding: 6px 8px;
        font-size: 12px;
    }

    .rankingV3 .rv3CardTableRow dd {
        padding: 6px 8px;
        font-size: 12px;
    }

    .rankingV3 .rv3CardCta {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .rankingV3 .rv3CardCta > * {
        flex: 1 1 0;
        max-width: none;
    }

    .rankingV3 .rv3CardCtaPhone {
        justify-content: center;
        height: 52px;
        padding: 0 8px;
        background: var(--rv3-warn);
        border-radius: 8px;
        color: #fff;
    }

    .rankingV3 .rv3CtaIcon.sp {
        width: 20px;
        height: 20px;
    }

    .rankingV3 .rv3CardCtaPhoneBody {
        flex-direction: row;
        align-items: center;
    }

    .rankingV3 .rv3CardCtaPhoneBody .sp {
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
    }

    .rankingV3 .rv3CardCtaMail,
    .rankingV3 .rv3CardCtaDetail {
        height: 52px;
        font-size: 13px;
        padding: 0 4px;
    }

    .rankingV3 .rv3CardCtaMail img {
        width: 18px;
        height: 18px;
    }
}