:root {
    --character-hover-anim-duration: 0.4s;

    --character-button-text-color-sylphy: rgb(79, 255, 182);
    --character-button-text-color-igni: rgb(255, 175, 88);
    --character-button-text-color-neve: rgb(79, 246, 255);
    --character-button-text-color-riona: rgb(246, 255, 79);
    --character-button-text-color-luque: rgb(108, 79, 255);
    --character-button-text-color-kalmia: rgb(255, 79, 220);

    --character-button-text-shadow: rgba(0, 0, 0, 0.9);
}


.WinsRits_Character_LinkButtons .sylphy span{
    color: rgb(255, 255, 255) !important;

    text-shadow:
        /* 縁取り */
        0 0 4px var(--character-button-text-shadow),

        0 0 6px #fff,
        0 0 10px #fff,
        0 0 16px var(--character-button-text-color-sylphy),
        0 0 32px var(--character-button-text-color-sylphy);
}
.WinsRits_Character_LinkButtons .sylphy::before{
    background-image: url('images/characters/introduction/sylphy_character_introduction_entrance_btn.png')  !important;
}

.WinsRits_Character_LinkButtons .igni span{
    color: rgb(255, 255, 255) !important;

    text-shadow:
        /* 縁取り */
        0 0 4px var(--character-button-text-shadow),

        0 0 6px #fff,
        0 0 10px #fff,
        0 0 16px var(--character-button-text-color-igni),
        0 0 32px var(--character-button-text-color-igni);
}
.WinsRits_Character_LinkButtons .igni::before{
    background-image: url('images/characters/introduction/igni_character_introduction_entrance_btn.png')  !important;
}


.WinsRits_Character_LinkButtons .neve span{
    color: rgb(255, 255, 255) !important;

    text-shadow:
        /* 縁取り */
        0 0 4px var(--character-button-text-shadow),

        0 0 6px #fff,
        0 0 10px #fff,
        0 0 16px var(--character-button-text-color-neve),
        0 0 32px var(--character-button-text-color-neve);
}
.WinsRits_Character_LinkButtons .neve::before{
    background-image: url('images/characters/introduction/neve_character_introduction_entrance_btn.png')  !important;
}


.WinsRits_Character_LinkButtons .riona span{
    color: rgb(255, 255, 255) !important;

    text-shadow:
        /* 縁取り */
        0 0 4px var(--character-button-text-shadow),

        0 0 6px #fff,
        0 0 10px #fff,
        0 0 16px var(--character-button-text-color-riona),
        0 0 32px var(--character-button-text-color-riona);
}
.WinsRits_Character_LinkButtons .riona::before{
    background-image: url('images/characters/introduction/riona_character_introduction_entrance_btn.png')  !important;
}


.WinsRits_Character_LinkButtons .luque span{
    color: rgb(255, 255, 255) !important;

    text-shadow:
        /* 縁取り */
        0 0 4px var(--character-button-text-shadow),

        0 0 6px #fff,
        0 0 10px #fff,
        0 0 16px var(--character-button-text-color-luque),
        0 0 32px var(--character-button-text-color-luque);
}
.WinsRits_Character_LinkButtons .luque::before{
    background-image: url('images/characters/introduction/luque_character_introduction_entrance_btn.png')  !important;
}

.WinsRits_Character_LinkButtons .kalmia span{
    color: rgb(255, 255, 255) !important;

    text-shadow:
        /* 縁取り */
        0 0 4px var(--character-button-text-shadow),

        0 0 6px #fff,
        0 0 10px #fff,
        0 0 16px var(--character-button-text-color-kalmia),
        0 0 32px var(--character-button-text-color-kalmia);
}
.WinsRits_Character_LinkButtons .kalmia::before{
    background-image: url('images/characters/introduction/kalmia_character_introduction_entrance_btn.png')  !important;
}


/* ボタン共通 */
.WinsRits_Character_LinkButtons .character_btn{
    aspect-ratio: 5 / 2;

    position: relative;
    overflow: hidden;
}

/* ボタン背景 */
.WinsRits_Character_LinkButtons .character_btn::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none; 

    background-size: cover;
    background-position: center;

    overflow: hidden; /* はみ出し防止 */
    transform: scale(1);

    transition: transform var(--character-hover-anim-duration) ease;
}

/* 白レイヤー */
.WinsRits_Character_LinkButtons .character_btn::after {
    /* before 要素生成 */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none; 

    background: rgba(255, 255, 255, 0.2); /* 初期は薄く */
    transition: background var(--character-hover-anim-duration) ease;
}


/* ホバー */
.WinsRits_Character_LinkButtons .character_btn:hover::before {
    z-index: 1; 
    transform: scale(1.1);
}

.WinsRits_Character_LinkButtons .character_btn:hover::after {
    background: rgba(255, 255, 255, 0.4); /* 白を強める */
    z-index: 2;
}

/* 文字 */
.WinsRits_Character_LinkButtons span{
    position: absolute;
    top: auto;
    left: auto;
    right: 30px;
    bottom: 30px;

    width: fit-content !important;
    white-space: nowrap;

    color: #ffffff;
    font-size: xxx-large;
    font-style: italic;

    z-index: 3; 

    transform: translate(0, 0);
    transition: all var(--character-hover-anim-duration) ease;
}
@media (max-width: 500px) {
    .WinsRits_Character_LinkButtons span {
        font-size: x-large; /* 好きなサイズに調整 */
    }
}
@media (max-width: 250px) {
    .WinsRits_Character_LinkButtons span {
        font-size: medium; /* 好きなサイズに調整 */

        right: 5px;
        bottom: 5px;
    }
    .WinsRits_Character_LinkButtons .character_btn:hover span{
        transform: translate(-50%, -50%);
        right: 0px;
        bottom: 0px;
    }
}


.WinsRits_Character_LinkButtons .character_btn:hover span{
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;

    
    transform: translate(-50%, -50%);
}