@charset "UTF-8";

/* ========================================
   Staffページ
======================================== */

.staff-main {
    position: relative;
    overflow: hidden;
    background: #050609;
    color: #ffffff;
}


/* ========================================
   Staffページ共通背景
======================================== */

.staff-hero,
.staff-member,
.staff-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.staff-hero-br {
    display: none;
}

/* Grid背景 */

.staff-grid-background {
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image:
        linear-gradient(
            rgb(36 233 255 / 7%) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgb(36 233 255 / 7%) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 15%,
            #000 85%,
            transparent 100%
        );
}


/* 背景のネオン光 */

.staff-hero::before,
.staff-member::before,
.staff-cta::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgb(36 233 255 / 18%) 0%,
            rgb(36 233 255 / 8%) 35%,
            transparent 70%
        );

    filter: blur(15px);

    pointer-events: none;
}

.staff-hero::after,
.staff-member::after,
.staff-cta::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgb(255 143 216 / 14%) 0%,
            rgb(184 156 255 / 7%) 40%,
            transparent 72%
        );

    filter: blur(20px);

    pointer-events: none;
}


/* ========================================
   Hero
======================================== */

.staff-hero {
    display: flex;
    align-items: center;

    min-height: 100svh;

    padding:
        calc(var(--header-height, 90px) + 70px)
        var(--side-space, 40px)
        90px;

    background:
        radial-gradient(
            circle at 18% 32%,
            rgb(36 233 255 / 13%),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 58%,
            rgb(255 143 216 / 11%),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050609 0%,
            #080b12 48%,
            #090712 100%
        );
}

.staff-hero::before {
    top: -180px;
    left: -170px;
}

.staff-hero::after {
    right: -150px;
    bottom: -180px;
}


/* Hero内側 */

.staff-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 80px;

    width: min(1200px, 100%);
    margin: 0 auto;
}


/* Hero文章 */

.staff-hero-content {
    position: relative;
}

.staff-hero-number {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 24px;

    color: var(--neon-blue, #24e9ff);

    font-family: "Orbitron", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.28em;
}

.staff-hero-number::before {
    content: "";

    width: 42px;
    height: 1px;

    background: var(--neon-blue, #24e9ff);

    box-shadow:
        0 0 8px rgb(36 233 255 / 80%);
}

.staff-hero-title {
    margin: 0;

    font-size: clamp(3.7rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #ffffff;

    text-shadow:
        0 0 12px rgb(36 233 255 / 40%),
        0 0 34px rgb(36 233 255 / 18%);
}

.staff-hero-catch {
    margin-top: 32px;

    color: #ffffff;

    font-size: clamp(1.45rem, 2.6vw, 2.3rem);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.staff-hero-catch::first-line {
    color: var(--neon-pink, #ff8fd8);
}

.staff-hero-text {
    max-width: 620px;
    margin-top: 24px;

    color: rgb(255 255 255 / 72%);

    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.04em;
}

.staff-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-width: 260px;
    min-height: 58px;
    margin-top: 38px;
    padding: 14px 30px;

    border: 1px solid rgb(36 233 255 / 65%);
    clip-path:
        polygon(
            14px 0,
            100% 0,
            100% calc(100% - 14px),
            calc(100% - 14px) 100%,
            0 100%,
            0 14px
        );

    color: #071014;
    background:
        linear-gradient(
            90deg,
            var(--neon-blue, #24e9ff),
            #86f6ff
        );

    font-family: "Orbitron", sans-serif;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.14em;

    box-shadow:
        0 0 22px rgb(36 233 255 / 25%);
}

.staff-hero-button::after {
    content: "▶";

    font-size: 0.7rem;
}


/* ========================================
   Hero右側ホログラム
======================================== */

.staff-hero-visual {
    position: relative;

    display: grid;
    place-items: center;

    width: min(520px, 100%);
    aspect-ratio: 1;
    margin-left: auto;
}

.staff-hero-visual::before {
    content: "";

    position: absolute;
    inset: 12%;

    border: 1px solid rgb(36 233 255 / 18%);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgb(36 233 255 / 10%),
            transparent 68%
        );

    box-shadow:
        inset 0 0 50px rgb(36 233 255 / 8%),
        0 0 70px rgb(36 233 255 / 8%);
}

.staff-hero-ring {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.staff-hero-ring-01 {
    width: 82%;
    height: 82%;

    border:
        1px solid
        rgb(36 233 255 / 38%);
}

.staff-hero-ring-02 {
    width: 62%;
    height: 62%;

    border:
        1px dashed
        rgb(255 143 216 / 42%);
}

.staff-hero-ring-03 {
    width: 42%;
    height: 42%;

    border:
        2px solid
        rgb(184 156 255 / 45%);

    box-shadow:
        0 0 30px rgb(184 156 255 / 12%);
}

.staff-hero-core {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 170px;
    height: 170px;

    border:
        1px solid
        rgb(36 233 255 / 65%);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 10%),
            rgb(255 255 255 / 3%)
        );

    backdrop-filter: blur(18px);

    box-shadow:
        inset 0 0 25px rgb(36 233 255 / 10%),
        0 0 32px rgb(36 233 255 / 18%);
}

.staff-hero-core span {
    color: #ffffff;

    font-family: "Orbitron", sans-serif;
    font-size: 4.8rem;
    font-weight: 900;
    line-height: 0.9;

    text-shadow:
        0 0 14px rgb(36 233 255 / 60%);
}

.staff-hero-core small {
    margin-top: 12px;

    color: var(--neon-blue, #24e9ff);

    font-family: "Orbitron", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.25em;
}

.staff-hero-word {
    position: absolute;

    padding: 7px 14px;

    border:
        1px solid
        rgb(255 255 255 / 12%);

    color: rgb(255 255 255 / 65%);
    background: rgb(8 12 20 / 70%);

    font-family: "Orbitron", sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    backdrop-filter: blur(8px);
}

.staff-hero-word-01 {
    top: 17%;
    left: 4%;
}

.staff-hero-word-02 {
    top: 12%;
    right: 0;
}

.staff-hero-word-03 {
    right: 1%;
    bottom: 17%;
}

.staff-hero-word-04 {
    bottom: 12%;
    left: 2%;
}


/* Scroll案内 */

.staff-scroll-guide {
    position: absolute;
    bottom: 28px;
    left: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    transform: translateX(-50%);
}

.staff-scroll-guide span {
    color: rgb(255 255 255 / 42%);

    font-family: "Orbitron", sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.3em;
}

.staff-scroll-line {
    width: 1px;
    height: 45px;

    background:
        linear-gradient(
            to bottom,
            var(--neon-blue, #24e9ff),
            transparent
        );
}


/* ========================================
   スタッフ1名分
======================================== */

.staff-member {
    display: flex;
    align-items: center;

    min-height: 100svh;

    padding:
        calc(var(--header-height, 90px) + 36px)
        var(--side-space, 40px)
        70px;

    scroll-margin-top: var(--header-height, 90px);

    background:
        linear-gradient(
            160deg,
            #050609 0%,
            #080b12 55%,
            #07060d 100%
        );
}

.staff-member:nth-of-type(even) {
    background:
        linear-gradient(
            200deg,
            #050609 0%,
            #0a0812 52%,
            #050a0d 100%
        );
}

.staff-member::before {
    top: 5%;
    left: -250px;
}

.staff-member::after {
    right: -220px;
    bottom: 0;
}


/* 各スタッフのアクセント位置 */

.staff-member-02::before,
.staff-member-04::before {
    top: auto;
    bottom: -100px;
    left: -210px;
}

.staff-member-02::after,
.staff-member-04::after {
    top: -150px;
    right: -170px;
    bottom: auto;
}


/* 内側 */

.staff-member-inner {
    position: relative;
    z-index: 2;

    width: min(1240px, 100%);
    margin: 0 auto;
}


/* ========================================
   キャラクターカード
======================================== */

.character-card {
    position: relative;

    margin-top: 28px;
    padding: 22px;

    border:
        1px solid
        rgb(36 233 255 / 26%);

    clip-path:
        polygon(
            32px 0,
            calc(100% - 18px) 0,
            100% 18px,
            100% calc(100% - 32px),
            calc(100% - 32px) 100%,
            18px 100%,
            0 calc(100% - 18px),
            0 32px
        );

    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 9%),
            rgb(255 255 255 / 3%)
        );

    box-shadow:
        inset 0 0 35px rgb(36 233 255 / 4%),
        0 28px 80px rgb(0 0 0 / 38%);

    backdrop-filter: blur(20px);
}

.character-card::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            120deg,
            rgb(36 233 255 / 7%),
            transparent 35%,
            rgb(255 143 216 / 6%) 72%,
            transparent
        );

    pointer-events: none;
}


/* カード上部 */

.character-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
    padding: 0 5px 16px;

    border-bottom:
        1px solid
        rgb(255 255 255 / 10%);
}

.character-card-id {
    color: var(--neon-blue, #24e9ff);

    font-family: "Orbitron", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.character-card-status {
    display: flex;
    align-items: center;
    gap: 8px;

    color: rgb(255 255 255 / 58%);

    font-family: "Orbitron", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.status-light {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--neon-blue, #24e9ff);

    box-shadow:
        0 0 9px rgb(36 233 255 / 90%);
}


/* カードレイアウト */

.character-card-layout {
    display: grid;
    grid-template-columns: minmax(330px, 0.88fr) 1.35fr;
    align-items: stretch;
    gap: 38px;
}


/* ========================================
   写真エリア
======================================== */

.character-visual {
    position: relative;

    display: flex;
    flex-direction: column;
}

.character-image-frame {
    position: relative;

    flex: 1;

    min-height: 460px;

    overflow: hidden;

    border:
        1px solid
        rgb(36 233 255 / 32%);

    clip-path:
        polygon(
            28px 0,
            100% 0,
            100% calc(100% - 28px),
            calc(100% - 28px) 100%,
            0 100%,
            0 28px
        );

    background:
        linear-gradient(
            160deg,
            rgb(36 233 255 / 13%),
            rgb(9 12 20 / 90%) 48%,
            rgb(255 143 216 / 8%)
        );
}

.character-image {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;
    min-height: 460px;

    object-fit: cover;
    object-position: center top;
}

.character-image-frame::after {
    content: "";

    position: absolute;
    inset: auto 0 0;
    z-index: 2;

    height: 42%;

    background:
        linear-gradient(
            to top,
            rgb(4 6 10 / 85%),
            transparent
        );

    pointer-events: none;
}


/* 写真上のGrid */

.character-image-grid {
    position: absolute;
    inset: 0;
    z-index: 3;

    background-image:
        linear-gradient(
            rgb(36 233 255 / 8%) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgb(36 233 255 / 8%) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    mix-blend-mode: screen;

    pointer-events: none;
}


/* スキャン線の土台 */

.character-image-scan {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--neon-blue, #24e9ff),
            transparent
        );

    box-shadow:
        0 0 14px rgb(36 233 255 / 65%);

    pointer-events: none;
}


/* レベル表示 */

.character-level {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 12px;
    padding: 13px 16px;

    border:
        1px solid
        rgb(255 143 216 / 25%);

    background:
        linear-gradient(
            90deg,
            rgb(255 143 216 / 10%),
            rgb(184 156 255 / 5%)
        );
}

.character-level span {
    color: var(--neon-pink, #ff8fd8);

    font-family: "Orbitron", sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.character-level strong {
    color: #ffffff;

    font-family: "Orbitron", sans-serif;
    font-size: 0.84rem;
    letter-spacing: 0.12em;
}


/* ========================================
   プロフィール情報
======================================== */

.character-profile {
    display: flex;
    flex-direction: column;

    min-width: 0;
    padding: 8px 10px 8px 0;
}


/* 名前 */

.character-name-area {
    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgb(255 255 255 / 10%);
}

.character-name-en {
    margin-bottom: 5px;

    color: var(--neon-blue, #7ea0ff);

    font-family: "Orbitron", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
}

.character-name-ja {
    margin: 0;

    color: #ffffff;

    font-size: clamp(2.6rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.08em;

    text-shadow:
        0 0 16px rgb(36 233 255 / 20%);
}

.character-role {
    margin-top: 10px;

    color: rgb(255 255 255 / 62%);

    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}


/* 誕生日・MBTI */

.character-data-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;

    margin: 18px 0 0;
}

.character-data-item {
    padding: 14px 16px;

    border:
        1px solid
        rgb(36 233 255 / 17%);

    background:
        linear-gradient(
            135deg,
            rgb(36 233 255 / 7%),
            rgb(255 255 255 / 2%)
        );
}

.character-data-item dt {
    color: var(--neon-blue, #24e9ff);

    font-family: "Orbitron", sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.character-data-item dd {
    margin-top: 7px;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}


/* 共通小見出し */

.character-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;

    color: var(--neon-pink, #ff8fd8);

    font-family: "Orbitron", sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.character-subtitle::before {
    content: "";

    width: 22px;
    height: 1px;

    background: var(--neon-pink, #ff8fd8);

    box-shadow:
        0 0 6px rgb(255 143 216 / 60%);
}
/* AI担当のMESSAGE */
.character-comment-ai {
    white-space: nowrap;
}

.character-comment-ai .ai-sp-br {
    display: none;
}
/* ゲーム担当のMESSAGE */
.character-comment-game {
    white-space: nowrap;
}

.character-comment-game .game-sp-br {
    display: none;
}
/* AさんのMESSAGE */
.character-comment-kai {
    white-space: nowrap;
}

.character-comment-kai .kai-sp-br {
    display: none;
}
/* ========================================
   使用ソフト
======================================== */

.character-software {
    margin-top: 18px;
}

.software-icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.software-icon-item {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 44px;
    padding: 8px 11px;

    border:
        1px solid
        rgb(255 255 255 / 11%);
    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            rgb(255 255 255 / 7%),
            rgb(255 255 255 / 2%)
        );
}

.software-icon-item img {
    width: 26px;
    height: 26px;

    object-fit: contain;
}

.software-icon-item span {
    color: rgb(255 255 255 / 75%);

    font-size: 0.7rem;
    font-weight: 700;
}


/* ========================================
   好きなこと
======================================== */

.character-favorite {
    margin-top: 18px;
}

.favorite-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.favorite-tag-list li {
    padding: 7px 13px;

    border:
        1px solid
        rgb(184 156 255 / 25%);
    border-radius: 50px;

    color: rgb(255 255 255 / 75%);
    background:
        rgb(184 156 255 / 7%);

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.favorite-tag-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ========================================
   コメント
======================================== */

.character-comment {
    margin-top: 18px;
    padding: 16px 18px;

    border-left:
        3px solid
        var(--neon-blue, #24e9ff);

    background:
        linear-gradient(
            90deg,
            rgb(36 233 255 / 8%),
            transparent
        );
}

.character-comment .character-subtitle {
    margin-bottom: 8px;
}

.character-comment-text {
    color: rgb(255 255 255 / 72%);

    font-size: 0.9rem;
    line-height: 1.9;
    letter-spacing: 0.04em;
}
.ai-sp-br {
    display: none;
}

.ai-pc-br {
    display: inline;
}

/* ========================================
   カード角の装飾
======================================== */

.character-corner {
    position: absolute;

    width: 55px;
    height: 55px;

    pointer-events: none;
}

.character-corner-top {
    top: 7px;
    left: 7px;

    border-top:
        2px solid
        var(--neon-blue, #24e9ff);
    border-left:
        2px solid
        var(--neon-blue, #24e9ff);
}

.character-corner-bottom {
    right: 7px;
    bottom: 7px;

    border-right:
        2px solid
        var(--neon-pink, #ff8fd8);
    border-bottom:
        2px solid
        var(--neon-pink, #ff8fd8);
}


/* ========================================
   ページ内ナビゲーション
======================================== */

.staff-member-navigation {
    position: fixed;
    top: 50%;
    right: 24px;
    z-index: 30;

    display: flex;
    flex-direction: column;
    gap: 12px;

    transform: translateY(-50%);
}

.staff-navigation-dot {
    position: relative;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgb(255 255 255 / 15%);

    color: rgb(255 255 255 / 42%);
    background:
        rgb(7 9 14 / 75%);

    font-family: "Orbitron", sans-serif;
    font-size: 0.6rem;
    font-weight: 700;

    backdrop-filter: blur(10px);
}

.staff-navigation-dot.is-current {
    border-color:
        rgb(36 233 255 / 75%);

    color: var(--neon-blue, #24e9ff);

    box-shadow:
        0 0 16px rgb(36 233 255 / 18%);
}


/* ========================================
   CTA
======================================== */

.staff-cta {
    display: flex;
    align-items: center;

    min-height: 78svh;

    padding:
        110px
        var(--side-space, 40px);

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgb(36 233 255 / 12%),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #050609,
            #0a0710
        );
}

.staff-cta::before {
    top: -170px;
    left: -180px;
}

.staff-cta::after {
    right: -140px;
    bottom: -180px;
}

.staff-cta-inner {
    position: relative;
    z-index: 2;

    width: min(900px, 100%);
    margin: 0 auto;
    padding: 70px 60px;

    border:
        1px solid
        rgb(36 233 255 / 24%);

    clip-path:
        polygon(
            28px 0,
            calc(100% - 28px) 0,
            100% 28px,
            100% calc(100% - 28px),
            calc(100% - 28px) 100%,
            28px 100%,
            0 calc(100% - 28px),
            0 28px
        );

    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 9%),
            rgb(255 255 255 / 3%)
        );

    box-shadow:
        inset 0 0 35px rgb(36 233 255 / 5%),
        0 25px 70px rgb(0 0 0 / 35%);

    backdrop-filter: blur(20px);
}

.staff-cta-label {
    color: var(--neon-blue, #24e9ff);

    font-family: "Orbitron", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
}

.staff-cta-title {
    margin-top: 22px;

    color: #ffffff;

    font-size: clamp(2.4rem, 5vw, 4.6rem);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.05em;
    white-space: nowrap;

    text-shadow:
        0 0 20px rgb(36 233 255 / 18%);
}
.staff-cta-text {
    max-width: 620px;
    margin: 24px auto 0;

    color: rgb(255 255 255 / 70%);

    font-size: 1rem;
    line-height: 2;
}

.staff-cta-button-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 36px;
}

.staff-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 250px;
    min-height: 58px;
    padding: 14px 26px;

    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.staff-cta-button-primary {
    border:
        1px solid
        var(--neon-blue, #24e9ff);

    color: #071014;
    background:
        var(--neon-blue, #24e9ff);

    box-shadow:
        0 0 22px rgb(36 233 255 / 20%);
}

.staff-cta-button-secondary {
    border:
        1px solid
        rgb(255 143 216 / 65%);

    color: #ffffff;
    background:
        rgb(255 143 216 / 7%);
}


/* ========================================
   ページごとのアクセントカラー
======================================== */

.staff-member-02 .character-card {
    border-color:
        rgb(255 143 216 / 28%);
}

.staff-member-02 .character-name-en,
.staff-member-02 .character-card-id,
.staff-member-02 .character-subtitle {
    color: var(--neon-pink, #ff8fd8);
}

.staff-member-02 .character-comment {
    border-left-color:
        var(--neon-pink, #ff8fd8);

    background:
        linear-gradient(
            90deg,
            rgb(255 143 216 / 8%),
            transparent
        );
}


.staff-member-03 .character-card {
    border-color:
        rgb(184 156 255 / 30%);
}

.staff-member-03 .character-name-en,
.staff-member-03 .character-card-id,
.staff-member-03 .character-subtitle {
    color: var(--neon-purple, #b89cff);
}

.staff-member-03 .character-comment {
    border-left-color:
        var(--neon-purple, #b89cff);

    background:
        linear-gradient(
            90deg,
            rgb(184 156 255 / 9%),
            transparent
        );
}


.staff-member-04 .character-card {
    border-color:
        rgb(36 233 255 / 28%);
}


/* ========================================
   スクロール位置
======================================== */

html {
    scroll-behavior: smooth;
}