/* ========== ISA: おすすめ（テーマ連動・最終版） ========== */
.isa-reco {
    /* PHPから入る保険（未設定時） */
    --theme: #db6a76;
    --theme-rgb: 219,106,118;

    /* 見出し帯の薄め係数（0〜1）。#E36B72→#F7DAD6 相当は ≈0.285 */
    --reco-band-strength: 0.285;

    /* アクセント（アイコン/箇条書き三角） */
    --reco-accent: var(--theme);

    /* Fallback: RGBAで薄め（古いブラウザ向け） */
    --reco-band-bg: rgba(var(--theme-rgb), var(--reco-band-strength));

    --reco-title-color: #222;
    --reco-text-color: #232a31;
    --reco-gap: 10px;

    margin: 0 0 40px;
}

/* 近代ブラウザ：知覚色空間で白とブレンドしてより自然に薄める */
@supports (background: color-mix(in oklab, white, black)) {
    .isa-reco {
        /* theme 28.5% + white 71.5% */
        --reco-band-bg: color-mix(in oklab,
        var(--theme) calc(var(--reco-band-strength) * 100%),
        white);
    }
}

.isa-reco__head {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--reco-band-bg);
    padding: 11px 16px;
    margin-bottom: 25px;
}

/* ★ inline SVG を currentColor で着色（= var(--reco-accent)） */
.isa-reco__icon {
    display: inline-block;
    width: 25px;
    height: 29px;
    color: var(--reco-accent);
}

.isa-reco__title {
    font-size: 18.43px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--reco-title-color);
}

.isa-reco__list { list-style: none; margin-left: 30px; }

.isa-reco__item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--reco-gap);
    color: var(--reco-text-color);
    font-size: 17px;
}

/* 先頭の小さな三角（アクセント色） */
.isa-reco__bullet {
    flex: 0 0 auto;
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--reco-accent);
}

.isa-reco__text { display: inline-block; font-weight: 700; }

.isa-reco__notice {
    font-size: 14px;
    color: #888;
    margin: 10px 0 0;
    font-weight: 700;
}

.isa-reco.is-center { text-align: center; }
.isa-reco.is-center .isa-reco__item { justify-content: center; }

<<<<<<< HEAD
/* 外部SVGのまま使う場合のマスク着色（任意） */
.isa-reco__icon.--mask {
    display: inline-block;
    width: 25px;
    height: 29px;
    background-color: var(--reco-accent);
    -webkit-mask: url('thumb-up.svg') no-repeat center / contain;
    mask: url('thumb-up.svg') no-repeat center / contain;
}
=======
@media (max-width: 1024px){
    .isa-reco__text {font-size:clamp(14px, 2.4vw, 20px);}
}
>>>>>>> dev-yoshino