/* =============================
AI TALENT — Risa & Lilia
============================= */
.ai-section {
    position: relative;
    padding: clamp(48px, 7vw, 96px) min(4vw, 32px);
    background: #0f0f10; /* 単色化 */
    overflow: hidden;
}

.ai-head {
    max-width: 1120px;
    margin: 0 auto clamp(28px, 5vw, 56px);
    text-align: center;
}

.ai-head .eyebrow {
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.5rem;
}

.ai-title {
    font-size: clamp(28px, 5.6vw, 52px);
    line-height: 1.15;
    color: #fff;
    text-shadow:
        0 0 12px rgba(255,255,255,0.12),
        0 0 26px rgba(255,180,250,0.25);
}

.ai-sub {
    margin-top: 0.6rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(0.92rem, 1.7vw, 1.05rem);
    font-style: italic;
}

/* グリッド配置 */
.ai-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(16px, 3vw, 36px);
    align-items: start;
}

/* Risa / Lilia */
.risa img, .lilia-item img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    filter: brightness(1.05);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.5),
        0 0 80px rgba(255,180,250,0.1);
    transition: transform .6s ease, filter .6s ease;
}

.risa img:hover, .lilia-item img:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
}

/* ===========================
    AI TALENT — mobile layout
   =========================== */
@media (max-width: 768px) {
    .ai-grid {
        display: grid;
        grid-template-columns: 1fr;              /* 1カラム化 */
        gap: clamp(14px, 3.5vw, 20px);           /* 余白は控えめに */
        align-items: start;
    }

    /* 並び順：上にRisa、下にLilia（必要なら入れ替えてOK） */
    .ai-grid .risa   { order: 1; }
    .ai-grid .lilia  { order: 2; }

    /* 画像の見栄えをモバイル寄せ（縦で大きく） */
    .risa img,
    .lilia-item img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 14px;
        object-fit: cover;
        /* 端末ごとに統一感を出すならアスペクト比を指定（任意） */
        /* aspect-ratio: 4 / 5; */
        /* モバイルでは影を少し控えめにすると締まる */
        box-shadow:
            0 18px 48px rgba(0,0,0,0.45),
            0 0 48px rgba(0,0,0,0.12);
    }

    /* タイトルと説明の余白・サイズ感を微調整 */
    .ai-title {
        font-size: clamp(24px, 6.2vw, 32px);
        line-height: 1.18;
        text-shadow:
            0 0 8px rgba(255,255,255,0.10),
            0 0 18px rgba(255,255,255,0.12);
    }

    .ai-sub {
        margin-top: 0.5rem;
        font-size: clamp(0.9rem, 1.6vw, 1rem);
        opacity: 0.9;
    }
}

/* 画像はブロック化＆フィット（ここを最終形に集約） */
.risa img,
.lilia-item img {
    display: block;
    width: 100%;
    height: 100%;              /* ← ここで統一。前半にあった height:auto は削除 */
    object-fit: cover;
    border-radius: 16px;
    filter: brightness(1.05);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.5),
        0 0 80px rgba(255,180,250,0.1);
    transition: transform .6s ease, filter .6s ease;
    backface-visibility: hidden;
    transform: translateZ(0);  /* GPUヒント */
}

/* hover はそのままでOK */
.risa img:hover, .lilia-item img:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
}

/* 動きを抑えたい環境向け（アニメを最小化） */
@media (prefers-reduced-motion: reduce) {
    .risa img, .lilia-item img,
    .ai-head {
        transition: none !important;
    }
}

/* ---- Risa caption spacing adjust ---- */
.risa {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.risa img {
    display: block;
}

/* Risa のキャプション距離を Lilia に合わせる（画像のサイズには影響なし） */
.risa .cap {
    margin-top: clamp(12px, 1.8vw, 20px); /* ← 距離だけ調整 */
    text-align: center;
    font-size: clamp(0.86rem, 1.4vw, 0.98rem);
    line-height: 1.35;
    color: rgba(255,255,255,0.78);
    font-style: italic;
}

.cap--lilia {
    text-align: center;       /* ← これだけで画像中央下に整列 */
    display: block;
    width: 100%;
    margin-top: clamp(12px, 1.8vw, 20px); /* Risaとの距離統一 */
}

.cap small {
    opacity: 0.85;
}