/* ==========================================
   2. グリッドレイアウト（キャスト・スタッフ一覧）
========================================== */
.cast-list,
.staff-list,
.special-cast-list {
    display: grid;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* 4K対応：画面幅に合わせてカード幅も伸縮（最小150px、推奨15vw、最大300px） */
    grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15vw, 300px), 1fr));
    gap: clamp(15px, 2vw, 30px); /* 隙間も動的に変化 */
}

/* ==========================================
   3. キャストカード（子要素）のデザイン
========================================== */
.cast-inf-area {    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* スクロールアニメーション初期状態 */
    opacity: 0;
    transform: translateY(30px); 
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* スクロールして画面に入った時の状態 */
.cast-inf-area.is-fadein {
    opacity: 1;
    transform: translateY(0);
}

.cast-inf {
    color: #eeeeee;
    text-align: center;
}

.cast-inf h2 {
    margin-bottom: 0px;
}

/* 【修正済】サイト全体のh3に影響しないように .cast-inf を付けました */
.cast-inf h2, 
.cast-inf h3 {
    margin-top: 0px;
}

/* 画像の設定 */
.cast-img img {
    width: 100%;
    object-fit: cover; 
    border-radius: 10px;
    margin-bottom: 0px;
}

/* 各種トランジション（滑らかな変化）の準備 */
.cast-inf,
.cast-inf h2,
.cast-inf h3,
.manager,
.advisor,
.amicus,
.serenus,
.victoria,
.seducens,
.specialguest,
.specialcast {
    transition: all 0.3s ease;
}

/* ==========================================
   4. カードのホバーアクション ＆ 役職カラー
========================================== */
.cast-inf-area:hover .cast-img img {    
    filter: brightness(0.8);
    transition: all 0.3s ease;
}

.cast-inf-area:hover h2,
.cast-inf-area:hover h3 {
    color: #ffffff; 
}

/* 役職ごとのテキストカラー */
.cast-inf-area:hover .manager { color: rgb(79, 174, 234); }
.cast-inf-area:hover .advisor { color: rgb(246, 195, 67); }
.cast-inf-area:hover .amicus { color: rgb(183, 38, 102); }
.cast-inf-area:hover .serenus { color: rgb(80, 177, 126); }
.cast-inf-area:hover .victoria { color: rgb(152, 120, 176); }
.cast-inf-area:hover .seducens { color: rgb(152, 120, 176); }
.cast-inf-area:hover .specialguest { color: rgb(226, 190, 64); }
.cast-inf-area:hover .specialcast { color: rgb(105, 226, 252); }

/* ==========================================
   5. スマートフォン版（画面幅768px以下）
========================================== */
@media screen and (max-width: 768px) {
    
    /* スマホ版グリッドの調整（画面を広く使い、必ず2列にする） */
    .member-container {
        width: 95%; 
    }

    .cast-list,
    .staff-list,
    .special-cast-list {
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; 
    }

    /* スマホ画面に合わせて文字を少し小さくし、改行を防ぐ */
    .cast-inf h2 {
        font-size: 16px; 
    }
    
    .cast-inf h3 {
        font-size: 12px; 
    }
}

/* ==========================================
   6. プロフィールテーブル（改行防止・自動幅調整）
========================================== */
table {
    color: white;
    border-collapse: collapse;
    border: none;
    
    /* 4K対応：文字サイズ自動調整（14px〜20px） */
    font-size: clamp(14px, 1.2vw, 20px);
    
    /* 【変更】固定の最大幅を無くし、中身の長さに合わせて自動で広がるようにする */
    width: auto; 
}

th, td {
    border: none;
    /* 4K対応：上下の余白自動調整（8px〜16px） */
    padding-top: clamp(8px, 1vw, 16px);
    padding-bottom: 0px;
}

th {
    text-align: left;
    /* 4K対応：項目と内容の間の隙間（15px〜40px） */
    padding-right: clamp(15px, 2vw, 40px);
    white-space: nowrap; /* 項目名の改行を防ぐ */
}

/* ==========================================
   【新規追加】td（内容側）の改行も絶対に防ぐ
========================================== */
td {
    text-align: left; /* 左寄せにする（お好みで右寄せなら right に） */
    white-space: nowrap; /* 【重要】内容側の文字も絶対に改行させない */
}