.isa-exam-btn {
    --btn-text: #fff;
    /* ここで --btn-bg / --btn-bg-hover / --btn-icon は PHP から上書き */
    padding: 40px 0;
}

.isa-exam-btn__inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 中央テキスト・右アイコン（左右42pxのダミーカラムで視覚中心を担保） */
.isa-exam-btn__link{
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    justify-items: center;       /* ← セル内を中央寄せ */
    width: 100%;
    min-height: 88px;
    background: var(--btn-bg);
    color: var(--btn-text);
    text-decoration: none;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,.14);
    padding: 18px 24px;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}

.isa-exam-btn__label{
    grid-column: 2;              /* 真ん中のセル */
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    justify-self: center;        /* ← セル内でも中央に固定 */
}

.isa-exam-btn__icon.--mask{
    grid-column: 3;
    width: 42px; height: 42px;
    background: #fff;
    border-radius: 50%;
    position: relative;
}

/* ← ドット抜けのタイプミス修正！ */
.isa-exam-btn__icon.--mask::before{
    content: "";
    width: 40px; height: 40px;   /* ご希望サイズ */
    background: var(--btn-icon); /* テーマカラー由来 */
    -webkit-mask: var(--arrow-url) no-repeat center / contain;
    mask: var(--arrow-url) no-repeat center / contain;
    display: block;
    margin: auto;
}

/* ホバー時：背景色は --btn-bg-hover（PHPで算出 or 下のcolor-mixフォールバック） */
.isa-exam-btn__link:hover{
    background: var(--btn-bg-hover);
}

/* 円の反転（任意） */
.isa-exam-btn__link:hover .isa-exam-btn__icon::before{ background: var(--btn-bg-hover); }

/* レスポンシブ微調整（任意） */

@media (max-width: 1024px){
    .isa-exam-btn__label {
        font-size: clamp(17px, 3vw, 37px);
    }
    .isa-exam-btn__icon.--mask::before {
        width: clamp(24px, 6vw, 40px);
        height: clamp(24px, 6vw, 40px);
    }
    .isa-exam-btn__icon.--mask {
        width: clamp(23px, 6vw, 42px);
        height: clamp(23px, 6vw, 42px);
    }

    .isa-exam-btn__link {
        display: grid;
        grid-template-columns: clamp(28px, 6vw, 42px) 1fr clamp(28px, 6vw, 42px);
        align-items: center;
        justify-items: center;
        width: 100%;
        min-height: 88px;
        background: var(--btn-bg);
        color: var(--btn-text);
        text-decoration: none;
        border-radius: 20px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
        padding: clamp(10px, 3vw, 18px) clamp(14px, 4vw, 24px);
        transition: transform .18s 
    ease, box-shadow .18s 
    ease, background-color .18s 
    ease, opacity .18s 
    ease;
    }
}