@charset "UTF-8";

/* ========================================
   1200px
======================================== */

@media (max-width:1200px){

    .staff-hero-inner{
        gap:50px;
    }

    .character-card-layout{
        grid-template-columns:320px 1fr;
        gap:30px;
    }

}


/* ========================================
   992px
======================================== */

@media (max-width:992px){

    /* Hero */

    .staff-hero{
        padding:
            calc(var(--header-height) + 40px)
            30px
            80px;
    }

    .staff-hero-inner{

        grid-template-columns:1fr;

        text-align:center;

    }

    .staff-hero-content{

        order:2;

    }

    .staff-hero-visual{

        order:1;

        margin:auto;

        width:400px;

    }

    .staff-hero-button{

        margin-inline:auto;

    }



    /* Character */

    .staff-member{

        padding:
            calc(var(--header-height) + 40px)
            30px
            80px;

    }

    .character-card{

        padding:20px;

    }

    .character-card-layout{

        grid-template-columns:1fr;

    }

    .character-image-frame{

        max-width:420px;

        margin:auto;

    }

    .character-level{

        max-width:420px;

        margin:
            15px auto 0;

    }

    .character-profile{

        padding:0;

    }

    .character-name-area{

        text-align:center;

    }

    .character-data-list{

        grid-template-columns:1fr 1fr;

    }

    .software-icon-list{

        justify-content:center;

    }

    .favorite-tag-list{

        justify-content:center;

    }

    .staff-member-navigation{

        display:none;

    }

}


/* ========================================
   768px
======================================== */

@media (max-width:768px){
    /* ヒーロー説明文を指定した3行で表示 */
    .staff-hero-sp-line {
        display: block;
        white-space: nowrap;
    }
    .staff-hero{

        padding-inline:20px;

    }
    .staff-hero-br {
        display: block;
    }

    /* SCROLL表示がヒーロー説明文へ重ならないようにする */
    .staff-scroll-guide {
        bottom: 14px;
        gap: 6px;
    }

    .staff-scroll-line {
        height: 28px;
    }

    .staff-member{

        padding-inline:20px;

    }

    .staff-cta{

        padding-inline:20px;

    }



    .staff-hero-title{

        font-size:3rem;

    }

    .staff-hero-catch{

        font-size:1.4rem;

    }

    .staff-hero-text{

        font-size:.95rem;

    }



    .staff-hero-visual{

        width:320px;

    }

    .staff-hero-core{

        width:140px;
        height:140px;

    }

    .staff-hero-core span{

        font-size:3.8rem;

    }



    .character-image-frame{

        min-height:350px;

    }

    .character-image{

        min-height:350px;

    }

    .character-name-ja{

        font-size:2.3rem;

    }

    .character-data-list{

        grid-template-columns:1fr;

    }

    .software-icon-item{

        flex-direction:column;

        justify-content:center;

        width:85px;
        height:85px;

        gap:6px;

    }

    .software-icon-item span{

        font-size:.6rem;

        text-align:center;

    }

    .character-comment{

        padding:15px;

    }

    .staff-cta-inner{

        padding:50px 30px;

    }

    .staff-cta-title{

        font-size:2rem;

    }

    .staff-cta-button-list{

        flex-direction:column;

    }

    .staff-cta-button{

        width:100%;

    }
    /* コメントを指定した2行で表示 */
.character-comment-sp-line {
    display: inline-block;
    white-space: nowrap;
}

.character-comment-text {
    font-size: clamp(0.58rem, 2.4vw, 1rem);
}

.character-comment-sp-line {
    letter-spacing: -0.04em;
}
/* AI担当のMESSAGEをスマホでは7行にする */
.character-comment-text.character-comment-ai {
    font-size: clamp(0.5rem, 2.35vw, 0.9rem);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.character-comment-ai .ai-sp-br {
    display: inline;
}
.character-comment-ai span {
    display: block;
    white-space: nowrap;
}
/* ゲーム担当のMESSAGEをスマホでは4行にする */
.character-comment-text.character-comment-game {
    font-size: clamp(0.58rem, 2.4vw, 0.9rem);
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.character-comment-game .game-sp-br {
    display: inline;
}
/* AさんのMESSAGEをスマホでは6行にする */
.character-comment-text.character-comment-kai {
    white-space: nowrap;
}

.character-comment-kai .kai-sp-br {
    display: inline;
}
/* 見学・体験の説明文を2行で表示 */
.staff-cta-text-sp span {
    display: block;
    white-space: nowrap;
}

.staff-cta-text-sp {
    font-size: clamp(0.75rem, 3.6vw, 1rem);
}
}


/* ========================================
   576px
======================================== */

@media (max-width:576px){

    .staff-hero{

        min-height:auto;

        padding-top:
            calc(var(--header-height) + 30px);

    }

    .staff-member{

        min-height:auto;

    }

    .character-card{

        padding:15px;

    }

    .character-card-header{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .character-image-frame{

        min-height:300px;

    }

    .character-image{

        min-height:300px;

    }

    .character-name-ja{

        font-size:1.9rem;

    }

    .character-role{

        font-size:.8rem;

    }

    .character-data-item{

        padding:12px;

    }

    .character-comment-text{

        font-size:.85rem;

    }

    .staff-hero-word{

        display:none;

    }

}


/* ========================================
   420px
======================================== */

@media (max-width:420px){

    .staff-hero{

        padding-inline:15px;

    }

    .staff-member{

        padding-inline:15px;

    }

    .staff-cta{

        padding-inline:15px;

    }

    .staff-hero-title{

        font-size:2.5rem;

    }

    .staff-hero-catch{

        font-size:1.2rem;

    }

    .staff-hero-visual{

        width:260px;

    }

    .staff-hero-core{

        width:120px;
        height:120px;

    }

    .staff-hero-core span{

        font-size:3rem;

    }

    .character-image-frame{

        min-height:250px;

    }

    .character-image{

        min-height:250px;

    }

    .software-icon-item{

        width:75px;
        height:75px;

    }

    .software-icon-item img{

        width:24px;
        height:24px;

    }

}