/* ===== 背景 & ラッパー ===== */
.isa-cta-duo {
    --isa-cta-bg: none;
    background-image: var(--isa-cta-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px 16px;
}
@media (max-width: 767px){
    .isa-cta-duo { background-attachment: scroll; }
}

.isa-cta-duo__inner {
    margin: 0 auto;
    background: #fff;
    border-radius: 30px;
    padding: 22px 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    max-width: 1220px;
    display: grid;
    justify-content: center;
}

/* ===== 2カラム（SPで1カラム） ===== */
.isa-cta-duo__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
}
@media (max-width: 1024px){
    .isa-cta-duo__cols { grid-template-columns: 1fr; }
}

/* ===== 列コンテナ ===== */
.isa-cta-duo__col {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 中央寄せ */
    gap: 10px;             /* 最終指定に合わせて 10px を採用 */
    max-width: 453px;      /* 右寄せ指定時も崩れない幅制御 */
    overflow: visible;     /* ボタンの床影や::beforeが切れないように */
}

/* ===== 見出し/説明 ===== */
.isa-cta-duo__texts { text-align: center; }
.isa-cta-duo__heading { font-size: 1.25rem; font-weight: 700; color: #222; margin: 0 0 6px; }
.isa-cta-duo__desc { font-size: 1rem; color: #333; margin: 0; }

/* ===== ボタン（基礎） ===== */
.isa-cta-duo__btn {
    /* カラー変数（PHPから上書き） */
    --btn-icon: none;
    --btn-bg: #0a66c2;
    --btn-bg-hover: #095caf;
    --btn-shadow-rgb: 0,0,0;

    position: relative;
    z-index: 0; /* 床影を下に回すための基準 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em; /* ラベルと矢印や余白の間隔 */
    width: min(100%, 448px); /* 列幅が広くても 448px 以内 */
    max-width: 448px;
    min-height: 100px;
    padding: 16px 24px 16px 56px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;

    background: var(--btn-bg);
    box-shadow: 0 5px 1px -2px rgba(var(--btn-shadow-rgb), .55),
    3px 0 1px -2px rgba(var(--btn-shadow-rgb), .55);

    transition:
            transform .12s ease,
            box-shadow .12s ease,
            opacity .12s ease,
            background-color .12s ease;
    margin-left: auto;      /* 列内で中央配置 */
    margin-right: auto;
}

/* 床影（楕円のドロップシャドウ） */
.isa-cta-duo__btn::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: 78%;
    max-width: 430px;
    height: 18px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--btn-shadow-rgb), .32) 0%,
    rgba(var(--btn-shadow-rgb), .22) 35%,
    rgba(var(--btn-shadow-rgb), 0) 70%);
    filter: blur(6px);
    transition: opacity .15s ease, transform .15s ease, height .15s ease;
    opacity: .95;
}

/* アイコン（左の飾り画像） */
.isa-cta-duo__btn::before {
    content: "";
    position: absolute;
    background-image: var(--btn-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15));
}

/* 列ごとのアイコンサイズ/位置 */
.isa-cta-duo__col--1 .isa-cta-duo__btn::before {
    left: -82px;
    top: -36px;
    width: 124px;
    height: 166px;
}
.isa-cta-duo__col--2 .isa-cta-duo__btn::before {
    left: -7px;
    top: -31px;
    width: 160px;
    height: 160px;
}

/* 右列のラベル整列（必要なら右寄せ） */
.isa-cta-duo__col--2 .isa-cta-duo__btn .isa-cta-duo__btn-label{
    margin-left: auto;
    text-align: right;
    line-height: 1.2;
}

/* ボタンのラベル */
.isa-cta-duo__btn-label {
    display: inline-block;
    word-break: keep-all;
    font-size: 24px;
}

/* ホバー/アクティブ（統合） */
.isa-cta-duo__btn:hover {
    background: var(--btn-bg-hover);
    box-shadow: 0 7px 2px -2px rgba(var(--btn-shadow-rgb), .62),  /* 下を少し深く＆濃く */
    4px 0 2px -2px rgba(var(--btn-shadow-rgb), .58);  /* 右も少しだけ強め */
    opacity: .98;
}
.isa-cta-duo__btn:hover::after {
    height: 22px;
    opacity: 1;
    transform: translateX(-50%) translateY(1px);
}
.isa-cta-duo__btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(var(--btn-shadow-rgb), .35);
}
.isa-cta-duo__btn:active::after {
    height: 16px;
    opacity: .9;
    transform: translateX(-50%) translateY(2px);
}

/* 矢印などのインラインアイコンがある場合の共通クラス */
.isa-cta-duo__chev{
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    display: block;
    transition: transform .18s ease, opacity .18s ease;
}
.isa-cta-duo__btn:hover .isa-cta-duo__chev{
    transform: translateX(2px);
}

/* お知らせ */
.isa-cta-duo__notice {
    padding: 12px;
    border: 1px dashed #ccc;
    background: #fff;
    text-align: center;
}

/* アクセシビリティ */
.isa-cta-duo__btn:focus-visible {
    outline: 3px solid #111;
    outline-offset: 2px;
}

/* 共通ガター */
:root{
    --rail-pc: clamp(20px, 6vw, 48px);   /* 左右の外側余白（PC） */
    --gap-pc:  52px;                     /* 2カラムの間隔 */
    --rail-sp: clamp(12px, 5vw, 24px);   /* 左右の外側余白（SP≤1024） */
}

/* ====== PC（2カラム同幅＋左右は padding で確保） ====== */
@media (min-width:1025px){
    /* 外側余白はインナーの padding で作る */
    .isa-cta-duo__inner{
        padding-inline: var(--rail-pc);
    }

    /* 2カラムは完全 1fr/1fr（同幅） */
    .isa-cta-duo__cols{
        display:grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--gap-pc);
    }

    /* カラム側のmax-width制限を外す（同幅化の邪魔をしない） */
    .isa-cta-duo__col{
        max-width: none;
        width: 100%;
        align-items: stretch;
    }

    /* ボタンはカラム幅いっぱい＝常に2つ同じ幅 */
    .isa-cta-duo__btn{
        width: 100%;
        max-width: none;
        margin: 0;                /* 幅はpadding管理のため margin は不要 */
        box-sizing: border-box;
    }
}

/* ====== 1024px以下（1カラム・左右は padding で見せ幅） ====== */
@media (max-width:1024px){
    .isa-cta-duo{
        padding: 0;
        overflow-x: hidden;
        background-attachment: scroll;
    }
    .isa-cta-duo__col {
        gap: 0px;
    }

    .isa-cta-duo__inner{
        /* 左右のレール余白は変数で維持しつつ、上下/左右も流体化 */
        padding-inline: var(--rail-sp);
        padding: clamp(19px, 4.2vw, 50px) clamp(35px, 14.7vw, 160px);
        max-width: 100%;
        background: unset; border-radius: 0; box-shadow: none; display: block;
    }

    .isa-cta-duo__cols{
        gap: 30px;
    }

    .isa-cta-duo__col{ max-width:none; width:100%; align-items:stretch; }

    /* ボタンは“親paddingで狭めた内容幅”に自動フィット */
    .isa-cta-duo__btn{
        display: grid;
        grid-template-columns: clamp(10px, 1.2vw + 8px, 24px) 1fr clamp(10px, 1.2vw + 8px, 24px);
        align-items: center;
        width: auto; max-width:none; margin:0; box-sizing:border-box;
        padding: clamp(0px, 0.8vw + 4px, 12px);
        gap:0; text-align:center; line-height:1.3;
        height: clamp(60px, 12.8vw, 164px);
        min-height: unset;
        border-radius: clamp(10px, 2.8vw, 20px);
    }

    /* PC用デコ ::before は“左ダミー”に転用（左右対称で中央がブレない） */
    .isa-cta-duo__btn::before{
        content:""; display:block !important; position:static !important;
        grid-column:1;
        width: clamp(18px, 1.2vw + 8px, 24px) !important;
        height: clamp(18px, 1.2vw + 8px, 24px) !important;
        background:none !important; filter:none !important; visibility:hidden;
    }

    /* テキストは完全中央 */
    .isa-cta-duo__btn-label{
        grid-column:2; justify-self:center; text-align:center; margin:0;
        overflow-wrap:anywhere; word-break:break-word;
    }
    .isa-cta-duo__col--2 .isa-cta-duo__btn .isa-cta-duo__btn-label{
        margin:0 !important; text-align:center !important; justify-self:center !important;
    }

    /* 矢印は右端固定＆流体サイズ */
    .isa-cta-duo__chev{
        grid-column:3; justify-self:end; align-self:center;
        width: clamp(18px, 1.2vw + 8px, 24px);
        height: clamp(18px, 1.2vw + 8px, 24px);
        display:block;
    }

    /* 床影は内側に（%はそのまま） */
    .isa-cta-duo__btn::after{ width:70%; max-width:380px; }

    /* タイポを流体化（最大は元サイズ） */
    .isa-cta-duo__heading{
        font-size: clamp(14px, 3.8vw, 63px);
    }
    .isa-cta-duo__btn-label{
        font-size: clamp(14px, 3.5vw, 63px);
    }
}