.isa-popular3{
    --ip3-accent:#db6a76;        /* 「ベスト3」の色（page_theme_color） */
    --ip3-section-bg:#e7f3fd;
    --ip3-card-bg:#fff;
    --ip3-text:#1f2937;
    --ip3-muted:#6b7280;
    --ip3-gold-1:#bf8b30;
    --ip3-gold-2:#f0d498;

    color:var(--ip3-text);
    background:var(--ip3-section-bg);
    box-sizing:border-box;
    padding:54px 16px 64px;
}
.isa-popular3 .ip3__inner{ max-width:1100px; margin:0 auto; }

/* 上部：王冠＋左右の星（画像） */
.isa-popular3 .ip3__deco{ text-align:center; margin-bottom:6px; }
.isa-popular3 .ip3__deco-img{
    width:120px; height:auto; display:inline-block;
}

/* 見出し */
.isa-popular3 .ip3__head{ text-align:center; margin-bottom:28px; }
.isa-popular3 .ip3__sub{
    color:#1f2c32; font-size:16px; letter-spacing:.02em; margin: 24px 0 48px;
}
.isa-popular3 .ip3__title{
    font-size:clamp(26px,3.4vw,34px); font-weight:800; margin:0;
}
.isa-popular3 .ip3__title-best{ color:var(--ip3-accent); }

/* グリッド */
.isa-popular3 .ip3__grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap: 15px;
}
@media (max-width:980px){ .isa-popular3 .ip3__grid{ grid-template-columns:1fr; } }

/* カード */
/* カード本体：縦並び＋中央寄せ */
.isa-popular3 .ip3-card{
    background:var(--ip3-card-bg);
    box-shadow:0 12px 28px rgba(0,0,0,.08);
    padding:26px 26px 24px;

    /* 追加・変更 */
    display:flex;
    flex-direction:column;
    align-items:center;     /* 横中央 */
    justify-content:center; /* 縦中央 */
    text-align:center;      /* テキスト中央 */
}

/* ヘッダー（王冠だけを中央に） */
.isa-popular3 .ip3-card__head{
    display:flex;
    align-items:center;
    justify-content:center; /* ← 左右中央 */
    margin-bottom:10px;
}

/* 数字は画像内なので rank 用のスタイルは不要（念のため無効化） */
.isa-popular3 .ip3-card__rank{ display:none; }

/* 王冠サイズはお好みで */
.isa-popular3 .ip3-card__crown{ width:92px; height:auto; }

/* ★4つ画像も中央 */
.isa-popular3 .ip3-card__stars{ margin:8px 0 12px; }
.isa-popular3 .ip3-card__stars-img{ width:120px; height:auto; display:block; }

/* タイトル・説明も中央寄せ */
.isa-popular3 .ip3-card__title{
    font-weight:800; font-size:clamp(20px,2.4vw,26px);
    margin:6px 0 14px;
}
.isa-popular3 .ip3-card__desc{
    font-size:16px; line-height:1.9; color:#111; margin:0 0 18px;
}

/* 区切り線（中央寄せでも全幅でOK。幅を少し絞りたいなら max-width 指定） */
.isa-popular3 .ip3-card__rule{
    border:none; height:2px; width:100%;
    background:#1f2937; opacity:.3; margin:0 0 14px;
}

/* CTA ボタンは中央・幅はお好みで */
.isa-popular3 .ip3-card__cta{ width:100%; margin:0; }
.isa-popular3 .ip3-btn{
    display:flex; align-items:center; justify-content:center; gap:12px;
    width:100%;                    /* 80%にしたい場合は 80% に変更 */
    min-height:58px; border-radius:10px;
    background:linear-gradient(90deg,var(--ip3-gold-1),var(--ip3-gold-2));
    color:#fff; text-decoration:none; font-weight:800; font-size:18px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.isa-popular3 .ip3-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(0,0,0,.12);
}
/* グリッドの子（カード）を等高さにして中を縦レイアウト */
.isa-popular3 .ip3__grid > .ip3-card{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;   /* 中身を中央寄せ */
    text-align: center;
}

/* ボタン行を最下部へ押し下げる */
.isa-popular3 .ip3-card__cta{
    margin-top: auto;   /* ← これでボタンがカード下端に来る */
    width: 100%;
}

/* ボタン幅などはお好みで（共通） */
.isa-popular3 .ip3-btn{
    display:flex; align-items:center; justify-content:center; gap:12px;
    width:100%;              /* 必要なら 80% 等に変更可 */
    min-height:58px; border-radius:10px;
    background: linear-gradient(60deg, var(--ip3-gold-1) 0%, var(--ip3-gold-1) 25%, var(--ip3-gold-2) 50%, var(--ip3-gold-1) 75%, var(--ip3-gold-1) 100%);
    color:#fff; text-decoration:none; font-weight:800; font-size:18px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

/* 中央寄せを崩さない周辺要素（お好みで） */
.isa-popular3 .ip3-card__head{
    display:flex; align-items:center; justify-content:center;
    margin-bottom:10px;
}
.isa-popular3 .ip3-card__stars{ margin:8px 0 12px; }
.isa-popular3 .ip3-card__rule{
    width:100%; height:2px; border:none; background:#1f2937; opacity:.3; margin:0 0 14px;
}


@media (max-width:1024px){
    .isa-popular3 {
        padding: 2.5rem 16px 2.5rem;
    }

    /* --- カード上部（王冠＋星＋タイトル） --- */
    .isa-popular3 .ip3-card__top{
        display: flex;
        align-items: center;      /* 縦位置中央 */
        justify-content: flex-start; /* ← 左カラム基準で並べる */
        gap: 18px;
        margin-bottom: 14px;
        width: 100%;
        position: relative;       /* ★ right を中央に配置するために基準化 */
    }

    /* 左カラム（王冠）→ 左寄せ */
    .isa-popular3 .ip3-card__head{
        display: flex;
        align-items: center;
        justify-content: flex-start;  /* ★ 左寄せ */
        flex-shrink: 0;               /* サイズ維持 */
    }
    .isa-popular3 .ip3__sub {
        color: #1f2c32;
        font-size: 16px;
        letter-spacing: .02em;
        margin: 24px 0 2rem;
    }

    .isa-popular3 .ip3-card__crown{
        width: clamp(65px, 25vw, 150px);
        height: auto;
    }

    /* 右カラム（星＋タイトル）→ カード中央へ */
    .isa-popular3 .ip3-card__right{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;       /* ★ 中央に固定配置 */
        left: 61%;          /* ★ 親基準の中央 */
        transform: translateX(-50%); /* ★ 完全中央揃え */
        width: 100%;
    }

    .isa-popular3 .ip3-card__stars{
        margin: 0 0 6px;
    }

    .isa-popular3 .ip3-card__stars-img{
        width: clamp(70px, 8vw, 120px);
        height: auto;
        display: block;
    }

    .isa-popular3 .ip3-card__title{
        font-size: clamp(21px, 2.8vw, 38px);
        font-weight: 800;
        margin: 4px 0 0;
        line-height: 1.3;
    }

    /* 以下はそのまま全幅要素 */
    .isa-popular3 .ip3-card__rule,
    .isa-popular3 .ip3-card__desc,
    .isa-popular3 .ip3-card__cta{
        width: 100%;
    }

    /* カード全体の整列 */
    .isa-popular3 .ip3__grid > .ip3-card{
        align-items: flex-start;   /* 左寄せに統一 */
        position: relative;        /* right中央配置の基準にする */
    }
    .isa-popular3 .ip3-card__cta{
        width: 100%;
        display: flex;
        justify-content: end;
    }

    /* ボタン本体 */
    .isa-popular3 .ip3-btn{
        width: clamp(200px, 45vw, 303px); /* ★ ベース303px・可変幅 */
        min-height: 58px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background: linear-gradient(
                60deg,
                var(--ip3-gold-1) 0%,
                var(--ip3-gold-1) 25%,
                var(--ip3-gold-2) 50%,
                var(--ip3-gold-1) 75%,
                var(--ip3-gold-1) 100%
        );
        color: #fff;
        text-decoration: none;
        font-weight: 800;
        font-size: 18px;
        box-shadow: 0 6px 16px rgba(0,0,0,.08);
        transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    }

    .isa-popular3 .ip3__grid > .ip3-card {
        text-align: left;
    }
    .isa-popular3 .ip3-card__desc{
        font-size: clamp(16px, 2.2vw, 23px);
    }
}