/* ==========================================================
   FILE: ranking-card.css
   SCOPE: ランキングカード全コンポーネント + ジャンル別ブランドカラー
     Base components:
     - カード本体: .card, .card:hover, .card::before, .card::after, .card h2
     - スコア: .score-box, .score-title, .score-num
     - バッジ: .rank-badge, .rank-2, .rank-3, .score-2, .score-3
     - サービス名: .item-name, .catchphrase
     - スペック表: .spec-table, .spec-row, .spec-th, .spec-td
     - 理由: .reason-box, .reason-title, .reason-text
     - ボタン: .btn (ネオン), .btn-primary (ゴールド), .large-btn
     - アクション: .action-area, .action-micro-copy, .bottom-action
     - 詳細: .detail-section, .detail-title, .merit-list, .con-section, .con-text
     - 口コミ: .review-box, .review-title, .review-item, .review-star,
               .review-score, .review-comment
     - FAQ: .faq-title
     - FV/タイトル: .fv-no1-banner, .main-title
     - 結論: .conclusion-area, .conclusion-title, .conclusion-text, .highlight-green
     Brand colors:
     - 証券, 銀行, クレカ, 仮想通貨, FX, カードローン
     - 保険, ロボアド, ビジネスカード, ポイント高還元
     - 学生クレカ, 旅行クレカ, 審査不安, 即日発行, 経済圏
     - 銀行手数料ゼロ, ステータス
   DEPENDS: base.css（CSS変数・リセット）
   NOTE: master.css + finance-style.css から移管・統合（Phase 3）。
         重複定義は後勝ちマージ済み。WCAG AA準拠カラー適用済み。
   CREATED: 2026-03-04
   UPDATED: 2026-03-04（Phase 3: 全ランキングカードCSS統合）
   ========================================================== */

/* ==========================================================
   カード本体
   ========================================================== */

.card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 60px;
    margin-bottom: 120px;
    position: relative;
    transition: var(--anim-speed);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: fadeInUp 1s ease-out forwards;
}

.card:hover {
    background: rgba(201, 168, 76, 0.03);
    border-color: var(--primary-green);
    transform: translateY(-10px);
}

/* カード上部の装飾テキスト */
.card::before {
    content: "OFFICIAL ANALYSIS REPORT";
    position: absolute;
    top: 20px;
    left: 60px;
    font-size: 0.6rem;
    color: #333;
    letter-spacing: 0.5em;
}

/* カード下部の装飾テキスト */
.card::after {
    content: "SPEC DATA VER. 2.6";
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 0.5rem;
    color: #cccccc;
    letter-spacing: 0.2em;
}

/* サービス名のグラデーション効果 */
.card h2 {
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1a1a1a 0%, #555555 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================
   スコア表示
   ========================================================== */

.score-box {
    position: absolute;
    top: 40px;
    right: 40px;
    text-align: right;
    background: rgba(0, 0, 0, 0.02);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
}

.score-title {
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.2em;
}

.score-num {
    font-size: 4rem;
    font-weight: 900;
    color: var(--primary-green);
    line-height: 1;
    text-shadow: none;
    font-family: 'Inter', sans-serif;
    letter-spacing: -2px;
}

/* ==========================================================
   ランクバッジ
   ========================================================== */

.rank-badge {
    display: inline-block;
    background: linear-gradient(135deg, #d4af37, #aa8623);
    color: #000000;
    font-weight: 900;
    padding: 6px 20px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
    max-width: calc(100% - 100px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #808080);
    color: #ffffff;
}

.score-2 {
    color: #777777;
}

.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #8b5a2b);
    color: #ffffff;
}

.score-3 {
    color: #cd7f32;
}

/* ==========================================================
   サービス名・キャッチフレーズ
   ========================================================== */

.item-name {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.catchphrase {
    font-size: 0.95rem;
    color: #555555;
    margin-bottom: 25px;
}

/* ==========================================================
   スペック比較表
   ========================================================== */

.spec-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.spec-row {
    display: flex;
    background-color: #fafafa;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
}

.spec-th {
    background-color: #f0f0f0;
    padding: 12px 10px;
    font-size: 0.85rem;
    color: #666666;
    width: 35%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spec-td {
    padding: 12px 10px;
    font-size: 0.95rem;
    color: #333333;
    width: 65%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spec-td.highlight {
    color: #c9a84c;
    font-weight: bold;
}

/* ==========================================================
   理由ボックス
   ========================================================== */

.reason-box {
    border-left: 4px solid #d4af37;
    background-color: rgba(212, 175, 55, 0.05);
    padding: 20px;
    border-radius: 0 4px 4px 0;
}

.reason-title {
    font-size: 1.1rem;
    color: #d4af37;
    margin-bottom: 10px;
    font-weight: bold;
}

.reason-text {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
}

/* ==========================================================
   ネオンボタン（.btn）― FXページ等で使用
   ========================================================== */

.btn {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 40px auto 0;
    padding: 22px;
    background: transparent;
    color: var(--primary-green);
    border: 1px solid var(--primary-green);
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 168, 76, 0.2),
        transparent
    );
    transition: all 0.6s;
    z-index: -1;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    color: #000;
    background: var(--primary-green);
    box-shadow: 0 0 30px var(--primary-green);
    transform: scale(1.02);
}

/* ==========================================================
   アクションボタン（.btn-primary）― ゴールドCTAボタン
   ========================================================== */

.action-area {
    text-align: center;
    margin: 40px 0;
    padding: 30px;
    background: rgba(201, 168, 76, 0.05);
    border: 1px dashed #c9a84c;
    border-radius: 8px;
}

.btn-primary {
    display: inline-block;
    background: linear-gradient(135deg, #c9a84c, #a88a30);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 900;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(201, 168, 76, 0.3);
    border: 2px solid transparent;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #b8963f, #8b6914);
    color: #ffffff;
    border-color: #c9a84c;
    box-shadow: 0 8px 25px rgba(201, 168, 76, 0.4);
    transform: translateY(-3px);
}

.action-micro-copy {
    font-size: 0.8rem;
    color: #555555;
    margin-top: 10px;
}

/* ==========================================================
   詳細セクション（メリット・デメリット）
   ========================================================== */

.detail-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed #e0e0e0;
}

.detail-title {
    font-size: 1.3rem;
    color: #8b6914;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

.detail-title::before {
    content: "■";
    color: #c9a84c;
    margin-right: 10px;
    font-size: 1.5rem;
}

.merit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.merit-list li {
    background-color: #fafafa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid #c9a84c;
}

.merit-list strong {
    display: block;
    font-size: 1.1rem;
    color: #333333;
    margin-bottom: 10px;
}

.merit-list p {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
}

/* デメリット専用 */
.con-section .detail-title {
    color: #d32f2f;
}

.con-section .detail-title::before {
    color: #d32f2f;
}

.con-text {
    background-color: rgba(211, 47, 47, 0.04);
    padding: 20px;
    border-radius: 0 8px 8px 0;
    border-left: 4px solid #d32f2f;
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
}

/* ==========================================================
   口コミボックス
   ========================================================== */

.review-box {
    margin-top: 40px;
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    padding: 30px;
    border-radius: 8px;
}

.review-title {
    font-size: 1.2rem;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}

.review-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.01);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.review-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 引用符の装飾 */
.review-item::before {
    content: "\201C";
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 4rem;
    color: rgba(0, 0, 0, 0.05);
    font-family: serif;
}

.review-star {
    color: #d4af37;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.review-score {
    color: #666666;
    font-size: 0.9rem;
}

.review-comment {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.5;
    font-style: italic;
}

/* ==========================================================
   FAQ
   ========================================================== */

.faq-title {
    font-size: 1.3rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    text-align: center;
}

/* ==========================================================
   ボトムアクション
   ========================================================== */

.bottom-action {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 2px solid #e0e0e0;
}

.large-btn {
    font-size: 1.3rem;
    padding: 20px 50px;
    width: 100%;
    max-width: 600px;
    display: block;
    margin: 0 auto;
}

/* ==========================================================
   レスポンシブ: タブレット（1024px以下）
   ========================================================== */

@media (max-width: 1024px) {
    .card {
        padding: 40px 25px;
    }
}

/* スペック表のタブレット対応（縦積み化） */
@media screen and (max-width: 1024px) {
    .spec-table {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .spec-row {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .spec-th, .spec-td {
        width: 100% !important;
        display: block !important;
        height: auto !important;
        padding: 5px 10px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        box-sizing: border-box !important;
        line-height: 1.6 !important;
    }

    .spec-th {
        border-right: none !important;
        color: #555555 !important;
        font-weight: bold !important;
    }
}

/* ==========================================================
   レスポンシブ: スマホ（768px以下）
   ========================================================== */

@media screen and (max-width: 768px) {
    /* ファーストビューの調整 */
    .fv-no1-banner {
        padding: 20px 15px !important;
    }
    .fv-no1-banner div[style*="font-size: 8rem"] {
        font-size: 5rem !important;
        top: -10px !important;
        right: -10px !important;
    }

    /* ボタンを押しやすく */
    /* !important: 各ページのインライン<style>を上書きするため維持 */
    .btn-primary {
        width: 100%;
        display: block !important;
        padding: 15px 0 !important;
    }
}

/* スペック表のスマホ対応（文字被り防止） */
@media screen and (max-width: 768px) {
    .spec-table {
        display: block !important;
        width: 100% !important;
    }

    .spec-row {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .spec-th, .spec-td {
        width: 100% !important;
        display: block !important;
        height: auto !important;
        padding: 5px 10px !important;
        white-space: normal !important;
        word-break: break-all !important;
        box-sizing: border-box !important;
        line-height: 1.6 !important;
    }

    .spec-th {
        border-right: none !important;
        color: #555555 !important;
        font-weight: bold !important;
        padding-bottom: 2px !important;
    }

    .spec-td {
        padding-top: 2px !important;
    }
}

/* ランキングバッジのスマホ制約解除 */
@media screen and (max-width: 767px) {
    .rank-badge {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
}

/* ==========================================================
   レスポンシブ: スマホ（600px以下）
   ========================================================== */

@media (max-width: 600px) {
    .score-box {
        position: static;
        text-align: center;
        margin-bottom: 20px;
        background: rgba(201, 168, 76, 0.05);
    }

    .score-num {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.2rem !important;
        text-align: center;
    }

    .btn {
        padding: 18px;
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .review-item {
        padding: 15px;
    }

    .review-meta {
        flex-direction: column;
        gap: 5px;
    }
}

/* ==========================================================
   レスポンシブ: 小型スマホ（480px以下）
   ========================================================== */

@media screen and (max-width: 480px) {
    .main-title {
        font-size: 1.3rem !important;
        line-height: 1.4;
    }
}

/* ==========================================================
   結論エリア
   ========================================================== */

.conclusion-area {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 2px dashed #e0e0e0;
    text-align: center;
}

.conclusion-title {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    text-shadow: none;
}

.conclusion-text {
    font-size: 1.1rem;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 40px;
}

.highlight-green {
    color: #8b6914;
    font-size: 1.3rem;
    font-weight: bold;
    border-bottom: 2px solid #c9a84c;
}

/* ==========================================================
   証券ページ専用：第2位（楽天）・第3位（マネックス）のカラー設定
   ※ .rank-2/.rank-3/.score-2/.score-3 は上部のベースセクションに統合済み
   ========================================================== */

/* --- 第2位：楽天証券（シルバー＆レッド） --- */
.btn-rakuten {
    background: linear-gradient(135deg, #bf0000, #8a0000);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(191, 0, 0, 0.3);
}
.btn-rakuten:hover {
    box-shadow: 0 8px 25px rgba(191, 0, 0, 0.5);
}
.rakuten-reason {
    border-color: #666666;
    background-color: rgba(192, 192, 192, 0.05);
}
.rakuten-reason .reason-title {
    color: #666666;
}
.rakuten-title {
    color: #cc0000;
}
.rakuten-merit li {
    border-left-color: #bf0000;
}
.rakuten-merit strong {
    color: #cc0000;
}

/* --- 第3位：マネックス証券（ブロンズ＆ブルー） --- */
.btn-monex {
    background: linear-gradient(135deg, #0055ff, #0033aa);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 85, 255, 0.3);
}
.btn-monex:hover {
    box-shadow: 0 8px 25px rgba(0, 85, 255, 0.5);
}
.monex-reason {
    border-color: #8a5a1e;
    background-color: rgba(205, 127, 50, 0.05);
}
.monex-reason .reason-title {
    color: #8a5a1e;
}
.monex-title {
    color: #2255bb;
}
.monex-merit li {
    border-left-color: #0055ff;
}
.monex-merit strong {
    color: #2255bb;
}

/* ==========================================================
   ネット銀行ページ専用：第3位（auじぶん銀行）のカラー設定
   ========================================================== */

/* --- 第3位：auじぶん銀行（auオレンジ） --- */
.btn-au {
    background: linear-gradient(135deg, #ff6a00, #cc5500);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(255, 106, 0, 0.3);
}
.btn-au:hover {
    box-shadow: 0 8px 25px rgba(255, 106, 0, 0.5);
    transform: translateY(-3px);
}
.au-reason {
    border-color: #ff6a00;
    background-color: rgba(255, 106, 0, 0.05);
}
.au-reason .reason-title {
    color: #ff6a00;
}
.au-title {
    color: #b36200;
}
.au-merit li {
    border-left-color: #ff6a00;
}
.au-merit strong {
    color: #b36200;
}

/* ==========================================================
   クレジットカードページ専用：第2位（楽天）・第3位（JCB）のカラー設定
   ========================================================== */

/* --- クレカ第2位：楽天カード（楽天レッド＆シルバー） --- */
.rakuten-card .btn-rakuten {
    background: linear-gradient(135deg, #bf0000, #ff3333);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(191, 0, 0, 0.3);
}
.rakuten-card .btn-rakuten:hover {
    box-shadow: 0 8px 25px rgba(191, 0, 0, 0.5);
    transform: translateY(-3px);
}
.rakuten-card .rakuten-reason {
    border-color: #666666;
    background-color: rgba(192, 192, 192, 0.05);
}
.rakuten-card .rakuten-reason .reason-title {
    color: #666666;
}
.rakuten-card .rakuten-title {
    color: #cc0000;
}
.rakuten-card .rakuten-merit li {
    border-left-color: #bf0000;
}
.rakuten-card .rakuten-merit strong {
    color: #cc0000;
}

/* --- クレカ第3位：JCB CARD W（JCBブルー＆ブロンズ） --- */
.jcb-card .btn-jcb {
    background: linear-gradient(135deg, #0055ff, #00aaff);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 85, 255, 0.3);
}
.jcb-card .btn-jcb:hover {
    box-shadow: 0 8px 25px rgba(0, 85, 255, 0.5);
    transform: translateY(-3px);
}
.jcb-card .jcb-reason {
    border-color: #8a5a1e;
    background-color: rgba(205, 127, 50, 0.05);
}
.jcb-card .jcb-reason .reason-title {
    color: #8a5a1e;
}
.jcb-card .jcb-title {
    color: #2255bb;
}
.jcb-card .jcb-merit li {
    border-left-color: #0055ff;
}
.jcb-card .jcb-merit strong {
    color: #2255bb;
}

/* ==========================================================
   仮想通貨ページ専用：第2位（bitFlyer）・第3位（GMOコイン）のカラー設定
   ========================================================== */

/* --- 仮想通貨第2位：bitFlyer（クリムゾンレッド） --- */
.bitflyer-card .btn-bitflyer {
    background: linear-gradient(135deg, #d3002b, #99001b);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(211, 0, 43, 0.3);
}
.bitflyer-card .btn-bitflyer:hover {
    box-shadow: 0 8px 25px rgba(211, 0, 43, 0.5);
    transform: translateY(-3px);
}
.bitflyer-card .bitflyer-reason {
    border-color: #d3002b;
    background-color: rgba(211, 0, 43, 0.05);
}
.bitflyer-card .bitflyer-reason .reason-title {
    color: #ff3366;
}
.bitflyer-card .bitflyer-title {
    color: #ff3366;
}
.bitflyer-card .bitflyer-merit li {
    border-left-color: #d3002b;
}
.bitflyer-card .bitflyer-merit strong {
    color: #ff3366;
}

/* --- 仮想通貨第3位：GMOコイン（サイバーブルー） --- */
.gmo-card .btn-gmo {
    background: linear-gradient(135deg, #0077ff, #0044cc);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 119, 255, 0.3);
}
.gmo-card .btn-gmo:hover {
    box-shadow: 0 8px 25px rgba(0, 119, 255, 0.5);
    transform: translateY(-3px);
}
.gmo-card .gmo-reason {
    border-color: #0077ff;
    background-color: rgba(0, 119, 255, 0.05);
}
.gmo-card .gmo-reason .reason-title {
    color: #1a6daa;
}
.gmo-card .gmo-title {
    color: #1a6daa;
}
.gmo-card .gmo-merit li {
    border-left-color: #0077ff;
}
.gmo-card .gmo-merit strong {
    color: #1a6daa;
}

/* ==========================================================
   FXページ専用：第2位（GMOクリック証券）・第3位（松井証券）のカラー設定
   ========================================================== */

/* --- FX第2位：GMOクリック証券（メタリックブルー＆シルバー） --- */
.gmofx-card .btn-gmofx {
    background: linear-gradient(135deg, #0055a4, #003366);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 85, 164, 0.3);
}
.gmofx-card .btn-gmofx:hover {
    box-shadow: 0 8px 25px rgba(0, 85, 164, 0.5);
    transform: translateY(-3px);
}
.gmofx-card .gmofx-reason {
    border-color: #0055a4;
    background-color: rgba(0, 85, 164, 0.05);
}
.gmofx-card .gmofx-reason .reason-title {
    color: #1a5e99;
}
.gmofx-card .gmofx-title {
    color: #1a5e99;
}
.gmofx-card .gmofx-merit li {
    border-left-color: #0055a4;
}
.gmofx-card .gmofx-merit strong {
    color: #1a5e99;
}

/* --- FX第3位：松井証券（トラッドグリーン＆ゴールド） --- */
.matsui-card .btn-matsui {
    background: linear-gradient(135deg, #006633, #004422);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 102, 51, 0.3);
}
.matsui-card .btn-matsui:hover {
    box-shadow: 0 8px 25px rgba(0, 102, 51, 0.5);
    transform: translateY(-3px);
}
.matsui-card .matsui-reason {
    border-color: #006633;
    background-color: rgba(0, 102, 51, 0.05);
}
.matsui-card .matsui-reason .reason-title {
    color: #33aa66;
}
.matsui-card .matsui-title {
    color: #33aa66;
}
.matsui-card .matsui-merit li {
    border-left-color: #006633;
}
.matsui-card .matsui-merit strong {
    color: #33aa66;
}

/* ==========================================================
   カードローンページ専用：第2位（アコム）・第3位（SMBCモビット）のカラー設定
   ========================================================== */

/* --- 第2位：アコム（アコムレッド） --- */
.acom-card .btn-acom {
    background: linear-gradient(135deg, #e60012, #b3000e);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(230, 0, 18, 0.3);
}
.acom-card .btn-acom:hover {
    box-shadow: 0 8px 25px rgba(230, 0, 18, 0.5);
    transform: translateY(-3px);
}
.acom-card .acom-reason {
    border-color: #e60012;
    background-color: rgba(230, 0, 18, 0.05);
}
.acom-card .acom-reason .reason-title {
    color: #ff4d5c;
}
.acom-card .acom-title {
    color: #ff4d5c;
}
.acom-card .acom-merit li {
    border-left-color: #e60012;
}
.acom-card .acom-merit strong {
    color: #ff4d5c;
}

/* --- 第3位：SMBCモビット（モビットブルー） --- */
.mobit-card .btn-mobit {
    background: linear-gradient(135deg, #007bb5, #005a87);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 123, 181, 0.3);
}
.mobit-card .btn-mobit:hover {
    box-shadow: 0 8px 25px rgba(0, 123, 181, 0.5);
    transform: translateY(-3px);
}
.mobit-card .mobit-reason {
    border-color: #007bb5;
    background-color: rgba(0, 123, 181, 0.05);
}
.mobit-card .mobit-reason .reason-title {
    color: #1a7799;
}
.mobit-card .mobit-title {
    color: #1a7799;
}
.mobit-card .mobit-merit li {
    border-left-color: #007bb5;
}
.mobit-card .mobit-merit strong {
    color: #1a7799;
}

/* ==========================================================
   保険ページ専用：第2位（ライフネット）・第3位（ソニー損保）のカラー設定
   ========================================================== */

/* --- 保険第2位：ライフネット生命（スカイブルー） --- */
.lifenet-card .btn-lifenet {
    background: linear-gradient(135deg, #00bfff, #0088cc);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 191, 255, 0.3);
}
.lifenet-card .btn-lifenet:hover {
    box-shadow: 0 8px 25px rgba(0, 191, 255, 0.5);
    transform: translateY(-3px);
}
.lifenet-card .lifenet-reason {
    border-color: #00bfff;
    background-color: rgba(0, 191, 255, 0.05);
}
.lifenet-card .lifenet-reason .reason-title {
    color: #1a7799;
}
.lifenet-card .lifenet-title {
    color: #1a7799;
}
.lifenet-card .lifenet-merit li {
    border-left-color: #00bfff;
}
.lifenet-card .lifenet-merit strong {
    color: #1a7799;
}

/* --- 保険第3位：ソニー損保（ディープパープル） --- */
.sony-card .btn-sony {
    background: linear-gradient(135deg, #6600cc, #440099);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(102, 0, 204, 0.3);
}
.sony-card .btn-sony:hover {
    box-shadow: 0 8px 25px rgba(102, 0, 204, 0.5);
    transform: translateY(-3px);
}
.sony-card .sony-reason {
    border-color: #6600cc;
    background-color: rgba(102, 0, 204, 0.05);
}
.sony-card .sony-reason .reason-title {
    color: #9933ff;
}
.sony-card .sony-title {
    color: #9933ff;
}
.sony-card .sony-merit li {
    border-left-color: #6600cc;
}
.sony-card .sony-merit strong {
    color: #9933ff;
}

/* ==========================================================
   ロボアドページ専用：第2位（THEO+ docomo）・第3位（ROBO PRO）のカラー設定
   ========================================================== */

/* --- ロボアド第2位：THEO+ docomo（ドコモレッド） --- */
.theo-card .btn-theo {
    background: linear-gradient(135deg, #e6004c, #b3003b);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(230, 0, 76, 0.3);
}
.theo-card .btn-theo:hover {
    box-shadow: 0 8px 25px rgba(230, 0, 76, 0.5);
    transform: translateY(-3px);
}
.theo-card .theo-reason {
    border-color: #e6004c;
    background-color: rgba(230, 0, 76, 0.05);
}
.theo-card .theo-reason .reason-title {
    color: #ff3377;
}
.theo-card .theo-title {
    color: #ff3377;
}
.theo-card .theo-merit li {
    border-left-color: #e6004c;
}
.theo-card .theo-merit strong {
    color: #ff3377;
}

/* --- ロボアド第3位：FOLIO ROBO PRO（サイバーシアン） --- */
.robo-card .btn-robo {
    background: linear-gradient(135deg, #00b8d9, #0088aa);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 184, 217, 0.3);
}
.robo-card .btn-robo:hover {
    box-shadow: 0 8px 25px rgba(0, 184, 217, 0.5);
    transform: translateY(-3px);
}
.robo-card .robo-reason {
    border-color: #00b8d9;
    background-color: rgba(0, 184, 217, 0.05);
}
.robo-card .robo-reason .reason-title {
    color: #1a7799;
}
.robo-card .robo-title {
    color: #1a7799;
}
.robo-card .robo-merit li {
    border-left-color: #00b8d9;
}
.robo-card .robo-merit strong {
    color: #1a7799;
}

/* ==========================================================
   ビジネスカード専用：第2位（マネフォ）・第3位（セゾン）のカラー設定
   ========================================================== */

/* --- ビジネス第2位：マネーフォワード（ビビッドオレンジ） --- */
.mf-card .btn-mf {
    background: linear-gradient(135deg, #ff6600, #cc5200);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.3);
}
.mf-card .btn-mf:hover {
    box-shadow: 0 8px 25px rgba(255, 102, 0, 0.5);
    transform: translateY(-3px);
}
.mf-card .mf-reason {
    border-color: #ff6600;
    background-color: rgba(255, 102, 0, 0.05);
}
.mf-card .mf-reason .reason-title {
    color: #ff8533;
}
.mf-card .mf-title {
    color: #ff8533;
}
.mf-card .mf-merit li {
    border-left-color: #ff6600;
}
.mf-card .mf-merit strong {
    color: #ff8533;
}

/* --- ビジネス第3位：セゾンプラチナ（プラチナシルバー＆ブラック） --- */
.saison-card .btn-saison {
    background: linear-gradient(135deg, #a6b1b8, #5e6b73);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(166, 177, 184, 0.3);
}
.saison-card .btn-saison:hover {
    box-shadow: 0 8px 25px rgba(166, 177, 184, 0.5);
    transform: translateY(-3px);
}
.saison-card .saison-reason {
    border-color: #a6b1b8;
    background-color: rgba(166, 177, 184, 0.05);
}
.saison-card .saison-reason .reason-title {
    color: #4a6070;
}
.saison-card .saison-title {
    color: #4a6070;
}
.saison-card .saison-merit li {
    border-left-color: #a6b1b8;
}
.saison-card .saison-merit strong {
    color: #4a6070;
}

/* ==========================================================
   ポイント高還元クレカ専用：第2位（楽天）・第3位（PayPay）のカラー設定
   ========================================================== */

/* --- 高還元第2位：楽天カード（楽天クリムゾンレッド） --- */
.rakuten-card .btn-rakuten {
    background: linear-gradient(135deg, #bf0000, #8c0000);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(191, 0, 0, 0.3);
}
.rakuten-card .btn-rakuten:hover {
    box-shadow: 0 8px 25px rgba(191, 0, 0, 0.5);
    transform: translateY(-3px);
}
.rakuten-card .rakuten-reason {
    border-color: #bf0000;
    background-color: rgba(191, 0, 0, 0.05);
}
.rakuten-card .rakuten-reason .reason-title {
    color: #ff3333;
}
.rakuten-card .rakuten-title {
    color: #ff3333;
}
.rakuten-card .rakuten-merit li {
    border-left-color: #bf0000;
}
.rakuten-card .rakuten-merit strong {
    color: #ff3333;
}

/* --- 高還元第3位：PayPayカード（PayPayビビッドレッド） --- */
.paypay-card .btn-paypay {
    background: linear-gradient(135deg, #ff0033, #cc0029);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(255, 0, 51, 0.3);
}
.paypay-card .btn-paypay:hover {
    box-shadow: 0 8px 25px rgba(255, 0, 51, 0.5);
    transform: translateY(-3px);
}
.paypay-card .paypay-reason {
    border-color: #ff0033;
    background-color: rgba(255, 0, 51, 0.05);
}
.paypay-card .paypay-reason .reason-title {
    color: #ff4d79;
}
.paypay-card .paypay-title {
    color: #ff4d79;
}
.paypay-card .paypay-merit li {
    border-left-color: #ff0033;
}
.paypay-card .paypay-merit strong {
    color: #ff4d79;
}

/* ==========================================================
   学生クレカ専用：第2位（三井住友NL）・第3位（エポス）のカラー設定
   ========================================================== */

/* --- 学生クレカ第2位：三井住友カード（NL）（フォレストグリーン） --- */
.smcc-nl-card .btn-smcc-nl {
    background: linear-gradient(135deg, #007042, #004d2e);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 112, 66, 0.3);
}
.smcc-nl-card .btn-smcc-nl:hover {
    box-shadow: 0 8px 25px rgba(0, 112, 66, 0.5);
    transform: translateY(-3px);
}
.smcc-nl-card .smcc-nl-reason {
    border-color: #007042;
    background-color: rgba(0, 112, 66, 0.05);
}
.smcc-nl-card .smcc-nl-reason .reason-title {
    color: #00b36b;
}
.smcc-nl-card .smcc-nl-title {
    color: #00b36b;
}
.smcc-nl-card .smcc-nl-merit li {
    border-left-color: #007042;
}
.smcc-nl-card .smcc-nl-merit strong {
    color: #00b36b;
}

/* --- 学生クレカ第3位：エポスカード（ルージュレッド） --- */
.epos-card .btn-epos {
    background: linear-gradient(135deg, #e6002d, #b30023);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(230, 0, 45, 0.3);
}
.epos-card .btn-epos:hover {
    box-shadow: 0 8px 25px rgba(230, 0, 45, 0.5);
    transform: translateY(-3px);
}
.epos-card .epos-reason {
    border-color: #e6002d;
    background-color: rgba(230, 0, 45, 0.05);
}
.epos-card .epos-reason .reason-title {
    color: #ff335e;
}
.epos-card .epos-title {
    color: #ff335e;
}
.epos-card .epos-merit li {
    border-left-color: #e6002d;
}
.epos-card .epos-merit strong {
    color: #ff335e;
}

/* ==========================================================
   旅行クレカ専用：第2位（ANAアメックスG）・第3位（マイレージプラス）のカラー設定
   ========================================================== */

/* --- 旅行クレカ第2位：ANAアメックス・ゴールド（ゴールド＆ANAブルー） --- */
.ana-amex-card .btn-ana-amex {
    background: linear-gradient(135deg, #d4af37, #b58500);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}
.ana-amex-card .btn-ana-amex:hover {
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
    transform: translateY(-3px);
}
.ana-amex-card .ana-amex-reason {
    border-color: #d4af37;
    background-color: rgba(212, 175, 55, 0.05);
}
.ana-amex-card .ana-amex-reason .reason-title {
    color: #8a7020;
}
.ana-amex-card .ana-amex-title {
    color: #8a7020;
}
.ana-amex-card .ana-amex-merit li {
    border-left-color: #d4af37;
}
.ana-amex-card .ana-amex-merit strong {
    color: #8a7020;
}

/* --- 旅行クレカ第3位：MileagePlusセゾン（ユナイテッド・ディープブルー） --- */
.united-saison-card .btn-united-saison {
    background: linear-gradient(135deg, #002244, #003366);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 51, 102, 0.4);
    border: 1px solid #0055a4;
}
.united-saison-card .btn-united-saison:hover {
    box-shadow: 0 8px 25px rgba(0, 51, 102, 0.6);
    transform: translateY(-3px);
    background: linear-gradient(135deg, #003366, #004488);
}
.united-saison-card .united-saison-reason {
    border-color: #004488;
    background-color: rgba(0, 51, 102, 0.1);
}
.united-saison-card .united-saison-reason .reason-title {
    color: #4d94ff;
}
.united-saison-card .united-saison-title {
    color: #4d94ff;
}
.united-saison-card .united-saison-merit li {
    border-left-color: #004488;
}
.united-saison-card .united-saison-merit strong {
    color: #4d94ff;
}

/* ==========================================================
   審査不安クレカ専用：第2位（ライフカードCh）・第3位（メルカード）のカラー設定
   ========================================================== */

/* --- 審査不安第2位：ライフカード（Ch）（トラストブルー） --- */
.lifecard-ch .btn-lifecard {
    background: linear-gradient(135deg, #0055a4, #003366);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 85, 164, 0.3);
}
.lifecard-ch .btn-lifecard:hover {
    box-shadow: 0 8px 25px rgba(0, 85, 164, 0.5);
    transform: translateY(-3px);
}
.lifecard-ch .lifecard-reason {
    border-color: #0055a4;
    background-color: rgba(0, 85, 164, 0.05);
}
.lifecard-ch .lifecard-reason .reason-title {
    color: #3388ff;
}
.lifecard-ch .lifecard-title {
    color: #3388ff;
}
.lifecard-ch .lifecard-merit li {
    border-left-color: #0055a4;
}
.lifecard-ch .lifecard-merit strong {
    color: #3388ff;
}

/* --- 審査不安第3位：メルカード（メルカリレッド） --- */
.mercard .btn-mercard {
    background: linear-gradient(135deg, #e32c36, #b31e26);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(227, 44, 54, 0.3);
}
.mercard .btn-mercard:hover {
    box-shadow: 0 8px 25px rgba(227, 44, 54, 0.5);
    transform: translateY(-3px);
}
.mercard .mercard-reason {
    border-color: #e32c36;
    background-color: rgba(227, 44, 54, 0.05);
}
.mercard .mercard-reason .reason-title {
    color: #ff4d58;
}
.mercard .mercard-title {
    color: #ff4d58;
}
.mercard .mercard-merit li {
    border-left-color: #e32c36;
}
.mercard .mercard-merit strong {
    color: #ff4d58;
}

/* ==========================================================
   即日発行クレカ専用：第3位（JCB CARD W）のカラー設定
   ========================================================== */

/* --- 即日発行第3位：JCB CARD W（JCBソリッドブルー） --- */
.jcbw-card .btn-jcbw {
    background: linear-gradient(135deg, #005b9f, #004070);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 91, 159, 0.3);
}
.jcbw-card .btn-jcbw:hover {
    box-shadow: 0 8px 25px rgba(0, 91, 159, 0.5);
    transform: translateY(-3px);
}
.jcbw-card .jcbw-reason {
    border-color: #005b9f;
    background-color: rgba(0, 91, 159, 0.05);
}
.jcbw-card .jcbw-reason .reason-title {
    color: #1a8cff;
}
.jcbw-card .jcbw-title {
    color: #1a8cff;
}
.jcbw-card .jcbw-merit li {
    border-left-color: #005b9f;
}
.jcbw-card .jcbw-merit strong {
    color: #1a8cff;
}

/* ==========================================================
   特定経済圏クレカ専用：第1位（Amazon）・第2位（イオン）・第3位（楽天）
   ========================================================== */

/* --- 経済圏第1位：Amazonカード（ダーク＆オレンジ） --- */
.amazon-card .btn-primary {
    background: linear-gradient(135deg, #232f3e, #131a22);
    color: #ff9900;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid #ff9900;
}
.amazon-card .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(255, 153, 0, 0.4);
    transform: translateY(-3px);
    background: linear-gradient(135deg, #131a22, #000000);
}

/* --- 経済圏第2位：イオンカードセレクト（イオンマゼンタ） --- */
.aeon-card .btn-aeon {
    background: linear-gradient(135deg, #b5007d, #800058);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(181, 0, 125, 0.3);
}
.aeon-card .btn-aeon:hover {
    box-shadow: 0 8px 25px rgba(181, 0, 125, 0.5);
    transform: translateY(-3px);
}
.aeon-card .aeon-reason {
    border-color: #b5007d;
    background-color: rgba(181, 0, 125, 0.05);
}
.aeon-card .aeon-reason .reason-title {
    color: #ff33b5;
}
.aeon-card .aeon-title {
    color: #ff33b5;
}
.aeon-card .aeon-merit li {
    border-left-color: #b5007d;
}
.aeon-card .aeon-merit strong {
    color: #ff33b5;
}

/* --- 経済圏第3位：楽天カード（楽天クリムゾンレッド） --- */
.rakuten-eco-card .btn-rakuten {
    background: linear-gradient(135deg, #bf0000, #8c0000);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(191, 0, 0, 0.3);
}
.rakuten-eco-card .btn-rakuten:hover {
    box-shadow: 0 8px 25px rgba(191, 0, 0, 0.5);
    transform: translateY(-3px);
}
.rakuten-eco-card .rakuten-eco-reason {
    border-color: #bf0000;
    background-color: rgba(191, 0, 0, 0.05);
}
.rakuten-eco-card .rakuten-eco-reason .reason-title {
    color: #ff3333;
}
.rakuten-eco-card .rakuten-eco-title {
    color: #ff3333;
}
.rakuten-eco-card .rakuten-eco-merit li {
    border-left-color: #bf0000;
}
.rakuten-eco-card .rakuten-eco-merit strong {
    color: #ff3333;
}

/* ==========================================================
   ネット銀行・手数料ゼロ決定戦：各銀行の専用ブランドカラー
   ========================================================== */

/* --- 第1位：住信SBIネット銀行（スマート・ブルー） --- */
.sbi-netbank .btn-primary {
    background: linear-gradient(135deg, #0066cc, #004c99);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
    border: none;
}
.sbi-netbank .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.5);
    transform: translateY(-3px);
    background: linear-gradient(135deg, #005bb5, #003366);
}
.sbi-netbank .reason-box {
    border-color: #0066cc;
    background-color: rgba(0, 102, 204, 0.05);
}
.sbi-netbank .reason-box .reason-title {
    color: #005bb5;
}
.sbi-netbank .detail-title {
    color: #005bb5;
    border-bottom: 2px solid #0066cc;
}
.sbi-netbank .merit-list li {
    border-left-color: #0066cc;
}
.sbi-netbank .merit-list strong {
    color: #005bb5;
}

/* --- 第2位：SBI新生銀行（新生ティール・グリーン） --- */
.shinsei-bank .btn-primary {
    background: linear-gradient(135deg, #009988, #007766);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 153, 136, 0.3);
    border: none;
}
.shinsei-bank .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(0, 153, 136, 0.5);
    transform: translateY(-3px);
    background: linear-gradient(135deg, #008877, #005544);
}
.shinsei-bank .reason-box {
    border-color: #009988;
    background-color: rgba(0, 153, 136, 0.05);
}
.shinsei-bank .reason-box .reason-title {
    color: #008877;
}
.shinsei-bank .detail-title {
    color: #008877;
    border-bottom: 2px solid #009988;
}
.shinsei-bank .merit-list li {
    border-left-color: #009988;
}
.shinsei-bank .merit-list strong {
    color: #008877;
}

/* --- 第3位：auじぶん銀行（auオレンジ） --- */
.au-jibun .btn-primary {
    background: linear-gradient(135deg, #e54300, #cc3c00);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(229, 67, 0, 0.3);
    border: none;
}
.au-jibun .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(229, 67, 0, 0.5);
    transform: translateY(-3px);
    background: linear-gradient(135deg, #d33e00, #b33400);
}
.au-jibun .reason-box {
    border-color: #e54300;
    background-color: rgba(229, 67, 0, 0.05);
}
.au-jibun .reason-box .reason-title {
    color: #d33e00;
}
.au-jibun .detail-title {
    color: #d33e00;
    border-bottom: 2px solid #e54300;
}
.au-jibun .merit-list li {
    border-left-color: #e54300;
}
.au-jibun .merit-list strong {
    color: #d33e00;
}

/* ==========================================================
   ステータス・モテる（ゴールド・プレミアム）専用スタイル
   ========================================================== */

/* --- 第2位：JCBゴールド（シャンパンゴールド） --- */
.jcb-gold {
    border-top: 5px solid #d4af37 !important;
    background: linear-gradient(to bottom, #fffdf5, #ffffff) !important;
}
.jcb-gold .rank-badge {
    background: linear-gradient(135deg, #d4af37, #aa8529) !important;
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}
.jcb-gold .score-number {
    color: #d4af37 !important;
}

/* --- 第3位：マリオット・アメックス（マットブラック） --- */
.marriott-amex {
    border-top: 5px solid #1a1a1a !important;
    background: linear-gradient(to bottom, #fafcfd, #ffffff) !important;
}
.marriott-amex .rank-badge {
    background: linear-gradient(135deg, #2c3e50, #000000) !important;
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.3) !important;
}
.marriott-amex .score-number {
    color: #1a1a1a !important;
}

/* --- 結論セクションの装飾 --- */
.conclusion-section {
    margin-top: 50px !important;
    padding: 30px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border: 2px solid #e0e0e0 !important;
}
.conclusion-section .conclusion-title {
    font-size: 1.5rem !important;
    color: #333 !important;
    border-bottom: 3px solid #ffd700 !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}
.conclusion-list li {
    margin-bottom: 15px !important;
    padding-left: 1.5em !important;
    text-indent: -1.5em !important;
    line-height: 1.6 !important;
}
.conclusion-list li::before {
    content: "\1F451" !important;
    margin-right: 5px !important;
}