/* ================================
   ISA: PickUp カード（完全版）
   - 小見出し: カード上部（ボックス内で上下中央）
   - 帯: 小見出しのすぐ下（positionしない）
   - PC/SP共通でフローに乗せる
================================ */
.isa-pickup{
    /* PHPから注入されるデフォルト（保険） */
    --ipu-accent:#db6a76;
    --ipu-accent-weak:#f3c9cf;
    --ipu-stroke:#bf5e68;
    --ipu-stroke-rgb:191,94,104;
    --ipu-bg-weak:#fdecef;

    /* レイアウト制御用（必要に応じて数値だけ調整） */
    --band-h:   66px;  /* 帯の「目安」の高さ */
    --band-gap: 18px;  /* 余白などに使いたければ */
    --lead-gap: 14px;
    --lead-lines: 2;   /* 小見出しの最大行数（高さ計算用） */
    --icon-pc:  30px;  /* PC時の矢印アイコンサイズ */

    color:#1f2937;
    background:#fff;
    box-sizing:border-box;
    padding:32px 16px 46px;
}

.isa-pickup .ipu__container{
    max-width:1100px;
    margin:0 auto;
    text-align:center;
}

/* 最上部画像 */
.isa-pickup .ipu__topimg{
    margin:10px 0 8px;
}
.isa-pickup .ipu__topimg img{
    max-width:360px;
    height:auto;
}

/* SVG（Pick UP 文字） */
.isa-pickup .ipu__svg{
    margin:-15px 0 8px;
    color:var(--ipu-stroke);
}
.isa-pickup .ipu__svg svg{
    display:inline-block;
    width:140px;
    height:auto;
}

/* 見出し3行 */
.isa-pickup .ipu__head{
    margin:0 0 20px;
}
.isa-pickup .ipu__h-small{
    font-size:18px;
    letter-spacing:.08em;
    color:#444;
    margin-bottom:8px;
    font-weight:700;
}
.isa-pickup .ipu__h-mid{
    font-size:clamp(20px,2.6vw,30px);
    font-weight:700;
}
.isa-pickup .ipu__h-acc{
    font-size:clamp(24px,3.2vw,36px);
    font-weight:800;
    color:var(--ipu-accent);
}

/* [[...]] 強調 */
.isa-pickup .ipu-strong{
    font-weight:800;
}
.isa-pickup .ipu__h-small .ipu-strong{
    font-size:1.12em;
}
/* ★ リード内は太さだけ変えてサイズは変えない */
.isa-pickup .ipu-card__lead .ipu-strong{
    font-size:1em;
}

/* グリッド */
.isa-pickup .ipu__grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px 28px;
    margin:22px 0 10px;
}
@media (max-width:800px){
    .isa-pickup .ipu__grid{
        grid-template-columns:1fr;
    }
}

/* カード共通 */
.isa-pickup .ipu-card{
    text-decoration:none;
    color:inherit;
}
.isa-pickup .ipu-card__inner{
    position:relative;
    background: var(--ipu-bg-weak);
    border:1px solid var(--ipu-stroke);
    min-height:190px;
    /* 帯と画像・矢印用の余白をまとめて確保（必要なら調整） */
    padding:16px 0 70px;
    overflow:hidden;
    box-shadow:0 4px 0 0 rgba(var(--ipu-stroke-rgb), .35);
    transition:
        transform .15s ease,
        box-shadow .15s ease;
}
.isa-pickup .ipu-card:hover .ipu-card__inner{
    transform:translateY(-2px);
    box-shadow:
        0 6px 16px rgba(0,0,0,.10),
        0 4px 0 0 rgba(var(--ipu-stroke-rgb), .3);
}

/* 左上 小見出し（2行ぶん＋少し余裕の高さの中で上下中央） */
.isa-pickup .ipu-card__lead{
    text-align:left;
    color:#3b3b3b;
    margin: 0 18px 0;
    font-size:14px;
    line-height:1.6;

    /* ★ 2行ぶん＋太字用の余裕を固定 */
    height: calc(1em * 1.8 * var(--lead-lines));

    /* 1～2行を上下中央に */
    display:flex;
    align-items:center;

    /* 3行目以降はカット */
    overflow:hidden;
}

/* ★ 中身は1つの箱にまとめて、その中で普通に複数行テキスト扱い */
.isa-pickup .ipu-card__lead-inner{
    display:block;
}

/* 帯：小見出しのすぐ下（positionしない） */
.isa-pickup .ipu-card__band{
    background: linear-gradient(90deg, var(--ipu-accent) 0%, var(--ipu-bg-weak) 100%);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 16px;
    margin: 10px 0 12px;    /* 小見出しとの距離・下のコンテンツとの距離 */
    min-height: var(--band-h);
}
.isa-pickup .ipu-card__title{
    color:#fff;
    font-weight:800;
    font-size:clamp(18px, 2.2vw, 24px);
    text-align:left;
}

/* 右イラスト（右下固定） */
.isa-pickup .ipu-card__img{
    position:absolute;
    right:14px;
    bottom: 57px;
    width:160px;
    height:auto;
}
@media (max-width:480px){
    .isa-pickup .ipu-card__img{
        width:120px;
    }
}

/* 右下 矢印（カード右下固定） */
.isa-pickup .ipu-card__arrow{
    position:absolute;
    right:14px;
    display:inline-flex;
    transition:
        transform .12s ease,
        opacity .12s ease,
        bottom .2s ease,
        top .2s ease;
    bottom: 18px;
}
.isa-pickup .ipu-card__arrow svg{
    width:30px;
    height:30px;
    transition:
        width .2s ease,
        height .2s ease;
}
.isa-pickup .ipu-card:hover .ipu-card__arrow{
    transform:translateX(2px);
}

/* =========================
   タブレット/SP
========================= */
@media (max-width:1024px){
    .isa-pickup .ipu__topimg img{
        max-width:330px;
    }

    /* 小見出し：フォントだけSP向けに調整（高さロジックは同じ） */
    .isa-pickup .ipu-card__lead{
        font-size: clamp(14px, 2.5vw, 21px);
        line-height:1.6;
        /* ★ SP側も同じ高さロジックにしておく */
        height: calc(1em * 1.8 * var(--lead-lines));
        display:flex;
        align-items:center;
        overflow:hidden;
    }


    /* 画像は可変 */
    .isa-pickup .ipu-card__img{
        bottom: clamp(21px, 1vw, 22px);
        width: clamp(106px, 16vw, 141px);
        height:auto;
        right: 28px;
    }

    /* 矢印の位置を微調整したければここで */
    .isa-pickup .ipu-card__arrow{
        bottom: 14px;
    }

    .isa-pickup .ipu__grid{
        grid-template-columns:1fr;
    }
    .isa-pickup .ipu-card__inner{
        position:relative;
        background: var(--ipu-bg-weak);
        border:1px solid var(--ipu-stroke);
        min-height: auto;
        /* 帯と画像・矢印用の余白をまとめて確保（必要なら調整） */
        padding: 16px 0 0;
        overflow:hidden;
        box-shadow:0 4px 0 0 rgba(var(--ipu-stroke-rgb), .35);
        transition:
                transform .15s ease,
                box-shadow .15s ease;
    }
    .isa-pickup .ipu-card__band {
        background: linear-gradient(90deg, var(--ipu-accent) 0%, var(--ipu-bg-weak) 100%);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 16px;
        margin: 10px 0 0;
        min-height: var(--band-h);
    }
}

/* =========================
   PC
========================= */
@media (min-width:1025px){
    .isa-pickup .ipu-card__arrow svg{
        width:var(--icon-pc);
        height:var(--icon-pc);
    }
}