/* =========================================================
   Character Viewer  (character.html 専用)
   ========================================================= */

/* ---- セクション上部の余白を詰める ----------------------- */
#char-view.section-default {
    padding-top: 0; /* global の 40px → 0 */
}

/* ---- 表示ステージ ------------------------------------- */
.char-stage {
    position: relative;
    height: 80vh; /* 画面高の 80% */
    overflow: hidden;
    margin-bottom: 40px;
}

/* 動画 / 静止画共通：ステージ全面に敷く */
.char-media,
.char-media video,
.char-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 黒帯を付けずに全体を表示 */
    background: #000;
    z-index: 1;
}
    /* 動画だけ軽くブラーを掛けて奥行きを演出 (好みで調整) */
    .char-media video {
        filter: opacity(1) blur(1px)
    }

/* ---- テキストボックス --------------------------------- */
.char-info {
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translateY(-50%);
    width: 28%; /* 右側に細長く配置 */
    min-width: 250px;
    background: rgba(0,0,0,.7);
    padding: 1.2rem;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
    color: #fff;
    z-index: 2;
}

.char-name {
    margin: 0 0 .5rem;
    font-size: 1.6rem;
    text-align: center;
}

.char-desc {
    font-size: .95rem;
    line-height: 1.55;
}

/* ---- サムネイル --------------------------------------- */
.char-thumbs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    justify-content: center; /* PC では中央揃え */
    flex-wrap: wrap; /* 幅が足りなければ折返す */
}

.thumb {
    border: none;
    background: none;
    cursor: pointer;
}

    .thumb img {
        width: 90px;
        aspect-ratio: 1/1.3;
        object-fit: cover;
        border-radius: 6px;
        filter: brightness(.7);
        transition: .3s;
    }

    .thumb.active img,
    .thumb:hover img {
        filter: brightness(1);
    }

/* ---- スマホ (～767px) レスポンシブ --------------------- */
@media(max-width:767px) {

    /* 1) ステージを通常フローに戻す */
    .char-stage {
        position: static;
        height: auto;
        margin: 0 0 24px;
    }

    /* 2) メディアも通常フローでリサイズされるように */
    .char-media,
    .char-media video,
    .char-media img {
        position: static;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* 3) 説明ボックスを映像の下に配置 */
    .char-info {
        position: static;
        width: 90%;
        margin: 24px auto 0;
        transform: none;
        text-align: center;
    }
}

/* ========================================================= */