@charset "utf-8";

/* ============================================================
   ランキングページ v3 — ページ下部3セクション
   FAQ（rv3Faq） / 事業者選びガイド（rv3Guide） / 安心への取り組み（rv3Safety）

   共通土台 assets-v2/css/ranking-v3.css のCSS変数を使う。
   共通土台は編集しない。全セレクタは .rankingV3 配下。
   ============================================================ */

.rankingV3 .rv3Faq,
.rankingV3 .rv3Guide,
.rankingV3 .rv3Safety {
    --rv3-faq-question-bg: #d9eff6;
    --rv3-guide-badge: #00afef;
    --rv3-safety-blue: #00b0ed;
}

/* ------------------------------------------------------------
   共通: セクション見出しのレインボー区切り線
   ------------------------------------------------------------ */

.rankingV3 .rv3Faq .rv3SectionTitle {
    position: relative;
    padding-bottom: 20px;
}

.rankingV3 .rv3Faq .rv3SectionTitle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 146px;
    height: 4px;
    background: url(../images/ranking-v3/icon-title-divider.svg) no-repeat center / contain;
}

/* ============================================================
   0. 事業者リスト直下CTA（廃止）
   2026-09-15 指示により、事業者カード直後の独自CTA（.rv3RankingListCta）は削除した。
   「事業者を見る」の導線は、ガイド下部CTA帯（.wrapBannerGuide 内 .blockBtnBusiness、
   本ファイル「2. 事業者選びガイド」節）へ統合している。
   ============================================================ */

/* ============================================================
   1. よくある質問（FAQ）
   ============================================================ */

.rankingV3 .rv3Faq {
    padding: 64px 0;
}

.rankingV3 .rv3FaqList {
    max-width: 1031px;
    margin: 0 auto 24px;
    list-style: none;
    padding: 0;
}

.rankingV3 .rv3FaqList .rv3FaqItem {
    border-bottom: 1px solid #fff;
}

/* 質問は全件そのまま並べる（回答はアコーディオンで閉じた状態が既定）。
   旧デザインのCSSは1問目以外を display:none にして「さらに表示する」で開く作りだったが、
   質問が1件しか見えず一覧として機能しないため、その挙動は踏襲しない。 */

.rankingV3 .rv3FaqQuestion {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--rv3-faq-question-bg);
    border: none;
    font-weight: 700;
    padding: 16px 60px 16px 20px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--rv3-ink);
}

.rankingV3 .rv3FaqQLabel {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    margin-right: 8px;
    flex-shrink: 0;
}

.rankingV3 .rv3FaqQText {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.6;
}

.rankingV3 .rv3FaqQuestion::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    background: url(../images/ranking-v3/icon-faq-arrow-open.svg) no-repeat center / contain;
    transition: transform 0.3s;
}

.rankingV3 .rv3FaqItem--open .rv3FaqQuestion::after {
    transform: translateY(-50%) rotate(180deg);
}

.rankingV3 .rv3FaqAnswer {
    display: none;
    width: 100%;
    padding: 16px 20px 22px;
    background: #fff;
}

.rankingV3 .rv3FaqItem--open .rv3FaqAnswer {
    display: block;
}

.rankingV3 .rv3FaqAnswerText {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 2;
    text-align: justify;
    letter-spacing: -0.2px;
    color: var(--rv3-ink);
}

@media (min-width: 769px) {
    .rankingV3 .rv3FaqQuestion:hover {
        opacity: 0.7;
    }

}

/* ============================================================
   2. 事業者選びガイド（area step 4カード）
   ============================================================ */

.rankingV3 .rv3Guide {
    padding: 64px 0;
    background: var(--rv3-bg-tint);
}


/* PVガイド(template-parts/guide/pv.php)本体のCSSはguide-step.css/guide-step-{prefix}.css
   （inc/add-assets.phpで読み込み済み）が担当する。ここでは、guide-step.cssが
   ポップアップ前提で既定 display:none にしている .areaPopupBoxGuide を、
   v3ページ内でインライン常設セクションとして表示するための上書きのみ行う
   （PV/ECの実アーカイブページで category-new.css が同じ目的で行っている手法を
   .rv3GuideBox スコープに合わせて再現したもの。guide-step.css /
   template-parts/guide/pv.php 自体は変更していない）。 */
.rv3GuideBox .areaGuide {
    background: none;
    padding: 0;
}

.rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .popupGuideOverlay {
    position: static !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    z-index: auto !important;
}

.rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .popupGuideContent {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    background: none !important;
}

.rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .popupGuideInner {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    box-shadow: none !important;
}

.rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .popupGuideClose {
    display: none !important;
}

.rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .wrapPopupGuide .boxGuide {
    width: 100%;
    max-width: 850px;
    margin: 9px auto 15px;
}

/* STEP詳細モーダル(.areaPopupGuideStep)はguide-step.js/guide-step.cssの既定動作
   （カードの「詳細」クリックで開くポップアップ）のまま維持する。ここでは上書きしない。 */

@media screen and (max-width: 768px) {
    /* SPでは guide-step.js が .listGuide に keen-slider を初期化し、スライドを
       transform で動かす。ここで overflow-x:auto や width:max-content を当てると
       スライダーの幅計算と競合し、1枚目が画面外（translateX 397.5px）へ飛んで
       ガイドが真っ白になる（実測）。SPのレイアウトはスライダーに任せ、
       横スクロールの指定は当てない。 */
    .rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .wrapPopupGuide .boxGuide {
        max-width: 100%;
        margin: 9px auto 15px;
    }
}

/* ステップ表示（Step 1〜4）の見た目調整（ユーザー指摘: 数値がクリックできそうに見える／
   背景が目立つ／ステップ間の横線が途切れて見える）。
   原因: guide-step.css側で .wrapStepBadge に cursor:pointer、.numStep に白塗り円
   （z-index:2）が指定されており、これが .listGuide>li の連結線（:before/:after、
   z-index:1・線自体は中心から中心まで連続して伸びている）の上に不透明に重なるため、
   数字だけが独立した押せるボタンのように見え、線もその下で完全に隠れて途切れて見える。
   ここでは .wrapStepBadge の背景と cursor、.numStep の塗りだけを打ち消し、線を素通しにする
   （guide-step.css / template-parts/guide/pv.php 自体は変更していない）。 */
.rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .wrapPopupGuide .boxGuide .listGuide>li .wrapGuideItem .wrapStepBadge {
    cursor: default;
    background: none;
}

/* 円の中を透過にすると連結線が数字の上を横切ってしまう（ユーザー指摘）。
   円の中だけセクション背景色で塗り、線が円の手前で止まって見えるようにする。
   グレーの塗り（guide-step.css の #fafafa）とは違い、背景に溶けるので
   「独立した押せるボタン」には見えない。 */
.rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .wrapPopupGuide .boxGuide .listGuide>li .wrapGuideItem .wrapStepBadge .numStep {
    background-color: var(--rv3-bg-tint);
}

/* ガイド下部CTA帯（.wrapBannerGuide）の「サービスから探す」「事業者を探す」。
   2026-09-15 指示により配置をやり直した:
   - 「サービスから探す」(.blockBtn:not(.blockBtnBusiness)): v3では非表示にする。
   - 「事業者を探す」(.blockBtnBusiness): 表示する。事業者カード直後の独自CTAは廃止し、
     ここへ一本化した。ラベルは「事業者を見る」にJSで差し替え（assets-v2/js/ranking-v3.js。
     表示テキストをCSSのcontentで作ると検索エンジン・スクリーンリーダーに正しく伝わらないため
     採らない）。リンク先も、元の.gotoAreaRank（同ページ内#areaRankへのスクロール用で
     v3ページには#areaRankが無く、そのJSハンドラ自体category-new.jsもv3ページでは
     未読み込みのため元々不発）から、vendor-ranking-template.php 184-197行と同じ組み立て方の
     事業者一覧URL（.rankingV3[data-rv3-trader-url]、template.php側で出力）へJSで上書きする。
   template-parts/guide/pv.php・guide-step.js 自体は変更していない。 */
.rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .wrapPopupGuide .wrapBannerGuide .boxBannerGuide .boxRightCta .wrapCtaButtons {
    justify-content: center;
}

.rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .wrapPopupGuide .wrapBannerGuide .boxBannerGuide .boxRightCta .wrapCtaButtons .blockBtn:not(.blockBtnBusiness) {
    display: none !important;
}

/* ============================================================
   3. セーフリーが安心して使える4つの理由 ＋ CTA

   本番 .areaWhySafely / .areaWhyBtn（template-parts/vendor-ranking-template.php
   234〜291行付近、CSSは ranking-detail.css 3190〜3408行）と同じ見た目・同じ構造になるよう
   値をそのまま移植している。common.cssにも同名クラス .areaWhySafely / .areaWhyBtn が
   別デザインで定義されており、しかもcommon.cssは全ページ共通で読み込まれるため、
   同名クラスを再利用すると意図せず衝突する。そのためクラス名だけ v3スコープの
   rv3Safety* プレフィックスに変えている（安心セクションの外側に別要素として
   CTAボタン（.rv3SafetyBtn）を置く構造＝本番の .areaWhyBtn と同じ位置関係）。
   ============================================================ */

.rankingV3 .rv3Safety {
    position: relative;
    padding: 100px 0 103px;
    clip-path: polygon(0% 0%, 100% 0, 100% 92.5%, 50% 100%, 0 92.5%);
    background: #00AFEC;
    margin-bottom: 0;
}

.rankingV3 .rv3SafetyInner {
    max-width: 999px;
    margin-inline: auto;
    padding-inline: var(--rv3-gutter);
}

.rankingV3 .rv3SafetyHeader {
    margin-bottom: 23px;
    text-align: center;
    color: #fff;
}

.rankingV3 .rv3SafetyTitle {
    padding: 1px 16px 16px 64px;
    border-radius: 8px;
    margin: 0 0 24px;
    font-weight: bold;
    position: relative;
    font-size: 29px;
    color: #40536A;
    background: #fff;
    display: inline-block;
}

.rankingV3 .rv3SafetyTitle::before {
    content: '';
    background: url(../images/index/safely-why-title.svg) center center / 100% no-repeat;
    position: absolute;
    left: 18px;
    width: 39px;
    height: 46px;
    top: 51%;
    transform: translateY(-50%);
}

.rankingV3 .rv3SafetyTitle::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff;
}

.rankingV3 .rv3SafetyEm {
    padding-bottom: 3px;
    color: #00B0ED;
    border-bottom: 6px solid #FAD438;
    font-size: 35px;
}

.rankingV3 .rv3SafetyNum {
    padding-bottom: 5px;
    color: #00B0ED;
    border-bottom: 6px solid #FAD438;
}

.rankingV3 .rv3SafetyNumLarge {
    font-size: 39px;
    line-height: 1;
}

.rankingV3 .rv3SafetyLead {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
}

.rankingV3 .rv3SafetyGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.rankingV3 .rv3SafetyCard {
    width: calc((100% / 2) - 15px);
    padding: 12px 21px;
    min-height: 226px;
    margin-bottom: 28px;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.rankingV3 .rv3SafetyCardBody {
    padding-right: 150px;
    flex: 1;
}

.rankingV3 .rv3SafetyCardTitle {
    margin: 0 0 11px;
    font-size: 22px;
    padding: 0 10px 0 32px;
    text-align: center;
    letter-spacing: -1px;
    font-weight: bold;
    color: #00AFEC;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rankingV3 .rv3SafetyCardBadge {
    left: 1px;
    width: 35px;
    top: 53%;
    min-width: 35px;
    height: auto;
    flex-shrink: 0;
    position: absolute;
    transform: translateY(-50%);
}

.rankingV3 .rv3SafetyCardText {
    margin: 0;
    line-height: 1.65;
    text-align: justify;
    font-size: 16px;
    color: var(--rv3-ink);
}

.rankingV3 .rv3SafetyCardPhoto {
    width: 160px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    margin: 0;
}

.rankingV3 .rv3SafetyCardPhoto--screening {
    background-color: #C8DDE8;
    background-image: url(../images/ranking/screening.png);
}
.rankingV3 .rv3SafetyCardPhoto--monitoring {
    background-color: #C8D9C8;
    background-image: url(../images/ranking/monitoring.png);
}
.rankingV3 .rv3SafetyCardPhoto--support {
    background-color: #C8CCDF;
    background-image: url(../images/ranking/support.png);
}
.rankingV3 .rv3SafetyCardPhoto--future {
    background-color: #DDD8D8;
    background-image: url(../images/ranking/future.png);
}

/* .rv3SafetyBtn = 本番 .areaWhyBtn。.rv3Safety（水色ブロック）の外側の別要素で、
   背景は透明（ページの白背景がそのまま見える）。ボタン自体は水色地に白文字。 */
.rankingV3 .rv3SafetyBtn {
    background: transparent;
    padding: 40px 0 0;
    position: relative;
    text-align: center;
    margin-bottom: 81px;
}

.rankingV3 .rv3SafetyBtnInner {
    max-width: 900px;
    margin-inline: auto;
    padding-inline: var(--rv3-gutter);
}

.rankingV3 .rv3SafetyCta {
    margin: 0 auto;
    max-width: 379px;
    width: 100%;
}

.rankingV3 .rv3SafetyCtaBtn {
    font-weight: 800;
    padding: 11px 0 13px;
    line-height: 1.35;
    letter-spacing: 0px;
    display: inline-block;
    background: #00AFEC;
    color: #fff;
    font-size: 17px;
    width: 100%;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    text-align: center;
}

@media (min-width: 769px) {
    .rankingV3 .rv3SafetyCtaBtn:hover {
        opacity: 0.85;
    }
}

/* ============================================================
   SP（<=768px）
   ============================================================ */

@media screen and (max-width: 768px) {
    .rankingV3 .rv3Faq {
        padding: 40px 0;
    }

    .rankingV3 .rv3Faq .rv3SectionTitle {
        font-size: 20px;
        padding-bottom: 14px;
    }

    .rankingV3 .rv3FaqList {
        margin-bottom: 16px;
    }

    .rankingV3 .rv3FaqQuestion {
        padding: 13px 46px 13px 14px;
        align-items: flex-start;
    }

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

    .rankingV3 .rv3FaqQText {
        font-size: 14px;
    }

    .rankingV3 .rv3FaqQuestion::after {
        width: 18px;
        height: 18px;
        right: 14px;
        background-image: url(../images/ranking-v3/icon-faq-arrow-open-sp.svg);
    }

    .rankingV3 .rv3FaqAnswer {
        padding: 13px 14px 17px;
    }

    .rankingV3 .rv3FaqAnswerText {
        font-size: 14px;
        line-height: 1.7;
    }

    .rankingV3 .rv3Guide {
        padding: 40px 0;
    }


    .rankingV3 .rv3Safety {
        padding: 69px 0 70px;
        clip-path: polygon(0% 0%, 100% 0, 100% 95.3%, 50% 100%, 0 95.3%);
    }

    .rankingV3 .rv3SafetyInner {
        max-width: 950px;
        padding: 0 5%;
    }

    .rankingV3 .rv3SafetyHeader {
        margin-bottom: 25px;
    }

    .rankingV3 .rv3SafetyTitle {
        padding: 49px 10px 32px;
        width: 354px;
        max-width: 100%;
        margin: 0 auto 33px;
        line-height: 1.1;
        text-align: center;
    }

    .rankingV3 .rv3SafetyTitle::before {
        width: 39px;
        height: 46px;
        top: 6px;
        left: 49.7%;
        transform: translateX(-50%);
    }

    .rankingV3 .rv3SafetyEm {
        padding-bottom: 0;
        font-size: 33px;
        border-bottom: none;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-thickness: 6px;
        text-decoration-color: #FAD438;
    }

    .rankingV3 .rv3SafetyNum {
        padding-bottom: 0;
        border-bottom: none;
        text-decoration: underline;
        text-underline-offset: 1px;
        text-decoration-thickness: 6px;
        text-decoration-color: #FAD438;
    }

    .rankingV3 .rv3SafetyNumLarge {
        font-size: 37px;
        line-height: 1;
    }

    .rankingV3 .rv3SafetyLead {
        font-size: 18px;
        text-align: center;
    }

    .rankingV3 .rv3SafetyCard {
        width: 100%;
        padding: 16px 21px 15px;
        min-height: 210px;
        margin-bottom: 20px;
    }

    .rankingV3 .rv3SafetyCardBody {
        padding-right: 130px;
        padding-left: 0;
    }

    .rankingV3 .rv3SafetyCard:nth-child(even) .rv3SafetyCardBody {
        padding-right: 0;
        padding-left: 132px;
    }

    .rankingV3 .rv3SafetyCardTitle {
        margin-bottom: 9px;
        font-size: 18px;
        padding: 0 10px 0 42px;
        text-align: left;
        letter-spacing: 0;
        justify-content: flex-start;
    }

    .rankingV3 .rv3SafetyCardBadge {
        left: 0px;
        width: 34px;
        top: 54%;
        min-width: 34px;
    }

    .rankingV3 .rv3SafetyCardText {
        line-height: 1.71;
        font-size: 14px;
        text-align: justify;
        letter-spacing: -0.42px;
    }

    .rankingV3 .rv3SafetyCardPhoto {
        width: 132px;
    }

    .rankingV3 .rv3SafetyCard:nth-child(2n) .rv3SafetyCardPhoto {
        right: unset;
        left: 0;
    }

    .rankingV3 .rv3SafetyBtn {
        padding: 21px 0 60px;
        max-width: 692px;
        margin: 0 auto;
    }

    .rankingV3 .rv3SafetyBtnInner {
        padding: 0 1.4%;
    }

    .rankingV3 .rv3SafetyCtaBtn {
        font-weight: 800;
        padding: 11px 0 13px;
        line-height: 1.35;
        letter-spacing: 0px;
    }
}

/* ガイド各ステップの見出し。guide-step.css の既定は PC 18px / SP 20px。
   PCで1行に収まらず窮屈に見えるため、ランキングv3のガイドだけ17pxにする
   （2026-09-17 レビュー指摘）。事業者一覧ページなど他のPVガイドには影響させないよう
   .rankingV3 でスコープし、SPの20pxは変えないよう min-width で囲う。 */
@media screen and (min-width: 769px) {
    .rankingV3 .rv3GuideBox .titleGuideItem {
        font-size: 17px;
    }
}

/* 「事業者を見る」の矢印。guide-step.css は上向き三角を rotate(180deg) で下向きにしている
   （元の導線が下方向の #areaRank へのスクロールだったため）。v3ではリンク先を
   ページ内の掲載事業者リスト（#rv3RankingList、ガイドより上）に変えたので、
   回転を戻して上向きにする（2026-09-17 ユーザー指示）。
   guide-step.css 自体は共用のため変更しない。 */
.rv3GuideBox .areaPopupGuide.areaPopupBoxGuide .wrapPopupGuide .wrapBannerGuide .boxBannerGuide .boxRightCta .wrapCtaButtons .blockBtnBusiness a .txtBlockBtn:after {
    transform: translateY(-50%);
}