@font-face {
    font-family: 'JP';
    src:
        local('Source Han Sans JP'),
        local('Source Han Sans'),
        local('Noto Sans CJK JP'),
        local('Hiragino Sans'),
        url(/fonts/SourceHanSansJP-Normal.subset.woff2) format('woff2');
}

@font-face {
    font-family: 'SC';
    src:
        local('Source Han Sans CN'),
        local('Source Han Sans SC'),
        local('Noto Sans CJK SC'),
        local('PingFang SC'),
        url(/fonts/SourceHanSansCN-Normal.subset.woff2) format('woff2');
}

@font-face {
    font-family: 'TC';
    src:
        local('Source Han Sans TW'),
        local('Source Han Sans TC'),
        local('Noto Sans CJK TC'),
        local('PingFang TC'),
        url(/fonts/SourceHanSansTW-Normal.subset.woff2) format('woff2');
}

body {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top;
}

body:not([theme]),
body[theme=light] {
    background-image: url("/images/bg-2k.webp?1924840223178");
}

body[theme=dark] {
    background-image: url("/images/bg-2k-d.webp?1924840223178");
}

@media only screen and (max-width: 1024px) and (max-height: 1024px) and (-webkit-max-device-pixel-ratio: 1) {

    body:not([theme]),
    body[theme=light] {
        background-image: url("/images/bg-1k.webp?1924840223178") !important;
    }

    body[theme=dark] {
        background-image: url("/images/bg-1k-d.webp?1924840223178") !important;
    }
}

@media only screen and (min-width: 2048px) and (-webkit-max-device-pixel-ratio: 1),
only screen and (min-height: 2048px) and (-webkit-max-device-pixel-ratio:1),
only screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-height: 1024px) and (-webkit-min-device-pixel-ratio:2) {

    body:not([theme]),
    body[theme=light] {
        background-image: url("/images/bg-4k.webp?1924840223178") !important;
    }

    body[theme=dark] {
        background-image: url("/images/bg-4k-d.webp?1924840223178") !important;
    }
}


[lang="en"],
[lang="zh-Hans"] {
    font-family: 'SC', sans-serif;
}

[lang="ja"] {
    font-family: 'JP', sans-serif;
}

[lang="zh-Hant"] {
    font-family: 'TC', sans-serif;
}

body[lang=en] .i18n[lang]:not([lang=en]),
body[lang=ja] .i18n[lang]:not([lang=ja]),
body[lang=zh-Hans] .i18n[lang]:not([lang=zh-Hans]),
body[lang=zh-Hant] .i18n[lang]:not([lang=zh-Hant]) {
    display: none;
}

body[lang=en] .navsub {
    visibility: hidden;
}

body .hidden {
    display: none;
}

body[theme=dark] {
    background-color: #000000;
}

body #wrapper {
    display: flex;
    gap: 8px;
}

body #nav {
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.7);
    width: 15vw;
    min-width: 200px;
    padding: 1vmin;
    border-radius: 5px;
}

body[theme=dark] #nav {
    background-color: rgba(18, 18, 18, 0.6);
    color: rgba(255, 255, 255, 0.80);
}

body #nav .mobileicon {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: none;
    padding: 0;
}

body #nav .mobileicon img {
    width: max(22px, 10vw);
    padding: 2vw 0 1vw 1vw;
}

body #nav .mobileicon button {
    padding: 2vw 0 1vw 1vw;
}


body #nav .navsub {
    font-size: 0.8em;
}

body #nav a {
    display: block;
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    text-decoration: none;
    font-size: max(14pt, 1.5vw);
    transition: color 0.1s, background-color 0.1s;
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
}

body[theme=dark] #nav a {
    color: rgba(255, 255, 255, 0.8);
}


body #internav a {
    padding: 14px 14px;
}

body #internav a:hover {
    filter: drop-shadow(0 0 0.7rem rgba(255, 213, 213, 0.5));
    background-image: url("/images/cat-paw-20.svg");
    background-color: rgba(255, 255, 255, 0.5);
}

body[theme=dark] #internav a:hover {
    filter: drop-shadow(0 0 0.7rem rgba(255, 213, 213, 0.2));
    background-color: rgba(255, 255, 255, 0.2);
}

body #externav {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0;
}

body #externav a {
    padding: 5px;
}

body #externav img {
    display: block;
    width: max(20px, 2vw);
    height: auto;
}

body #externav a:hover {
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.5));
    transition: filter 0.1s;
}

body[theme=dark] #nav>#externav a:hover {
    filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.5));
}

body #nav hr {
    width: 90%;
    opacity: 0.9;
    margin: 0 auto;
}

body #nav .mobileicon a:hover,
body #nav .mobileicon button:hover {
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.4));
    transition: color 0.1s;
}

body #nav .copyright {
    font-size: 0.8em;
    text-align: center;
    margin: 0;
    padding-top: 1vh;
}

body #nav .background-credit > a {
    font-size: 0.8em;
    text-align: center;
    margin: 0;
}

body #nav #langbar {
    padding: 4px 4px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

body #nav #langbar img {
    display: block;
    width: max(22px, 1.5vw);
    height: auto;
    margin: auto 4px;
    transition: filter 0.1s;
}

body[theme=dark] #nav #langbar img {
    filter: invert(100%) hue-rotate(180deg) brightness(80%);
}

body #nav button {
    background-color: #ffffff00;
    border: none;
    font-size: max(12pt, 1.5vw);
    cursor: pointer;
    transition: color 0.1s, background-color 0.1s, filter 0.1s;
    border-radius: 5px;
}

body[theme=dark] #nav .mobileicon {
    filter: invert(100%) hue-rotate(180deg) brightness(80%);
}

body[theme=dark] #nav button {
    color: rgba(255, 255, 255, 0.8);
}

body #nav #langbar button:hover {
    background-color: rgb(80, 182, 246, 0.8);
}

body[lang=en] #nav #btn-lang-en {
    background-color: rgb(80, 182, 246, 0.5);
}

body[lang=ja] #nav #btn-lang-ja {
    background-color: rgb(80, 182, 246, 0.5);
}

body[lang=zh-Hans] #nav #btn-lang-zh-hans {
    background-color: rgb(80, 182, 246, 0.5);
}

body[lang=zh-Hant] #nav #btn-lang-zh-hant {
    background-color: rgb(80, 182, 246, 0.5);
}

body #theme-selector {
    display: flex;
    justify-content: center;
    align-items: center;
}

body #theme-selector img {
    height: 100%;
    width: 4vw;
    min-width: 50px;
}

body[theme=light] #theme-selector img {
    content: url("/images/light-mode-toggle.svg");
}

body[theme=dark] #theme-selector img {
    content: url("/images/dark-mode-toggle.svg");
}

body a {
    text-decoration: none;
    font-style: normal;
    color: rgb(187, 72, 99);
    word-wrap: break-word;
    word-break: break-all;
}

body #content {
    flex-grow: 1;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2vmin;
    border-radius: 5px;
}

body[theme=dark] #content {
    background-color: rgba(18, 18, 18, 0.6);
    color: rgba(255, 255, 255, 0.80);
}

body #content .character .char-details {
    display: flex;
    justify-content: center;
    align-items: center;
}

body #content .character h1 {
    text-align: center;
}

body #content .character .char-design {
    flex-shrink: 0;
    width: 15vw;
    min-width: 300px;
}

body #content .character img {
    max-width: 100%;
    max-height: 100%;
}

body #content .char-tab tr > td:first-child {
    white-space: nowrap;
    vertical-align: top;
}

body #content .sticker {
    display: flex;
    justify-content: center;
    align-items: center;
}


.email {
    background-color: #494949;
    background-image: url('/images/email-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.matrix {
    background-color: #949697;
    background-image: url('/images/matrix-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.twitter {
    background-color: #1D9BF0;
    background-image: url('/images/twitter-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.youtube {
    background-color: #3d3d3d;
    background-image: url('/images/youtube-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.homesite {
    background-color: #c56dff;
    background-image: url('/images/homesite-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.mastodon {
    background-color: #2b90d9;
    background-image: url('/images/mastodon-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.weibo {
    background-color: #ffe061;
    background-image: url('/images/weibo-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FF0000;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.telegram {
    background-color: #37aee2;
    background-image: url('/images/telegram-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.pixiv {
    background-color: #009cff;
    background-image: url('/images/pixiv-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.fanbox {
    background-color: #fbf38a;
    background-image: url('/images/fanbox-inline.webp');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #000000;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.booth {
    background-color: #fc4d50;
    background-image: url('/images/booth-inline.webp');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.fantia {
    background-color: #FFFFFF;
    background-image: url('/images/fantia-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #000000;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.deviantart {
    background-color: #000000;
    background-image: url('/images/deviantart-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #05cc47;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}

.pgp {
    background-color: #e83a46;
    background-image: url('/images/pgp-inline.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    font-style: normal;
    display: inline-block;
}


body #content .character #char-design-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

body #content .character #char-design-selector a {
    display: block;
    background-color: rgba(255, 233, 192, 0.8);
    padding: 1vmin;
    margin: 1vmin;
    text-decoration: none;
    font-style: normal;
    border-radius: 5px;
    color: #000000;
}

body #content .character #regular,
body #content .character #miko,
body #content .character #ocsd {
    display: none;
}

body #content .character #regular:target {
    display: flex;
}

body #content .character #miko:target {
    display: flex;
}

body #content .character #ocsd:target {
    display: flex;
}

body #content .image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

body #content .image-grid>a {
    display: block;
    max-width: 25vw;
    min-width: 150px;
    text-align: center;
    text-decoration: none;
    font-style: normal;
    margin: 2vmin;
}

body[theme=dark] #content .image-grid h1 {
    color: rgba(255, 255, 255, 0.80);
}

body #content .image-grid a img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

body #content .image-grid h1 {
    margin: 0;
    color: rgba(0, 0, 0, 0.8);
}

body #content .video-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
}

body #content .video-grid>div {
    display: block;
    text-align: center;
    text-decoration: none;
    font-style: normal;
    padding: 10px;
}


body #content .gallery h1 {
    text-align: center;
}
body #content .gallery .gallery-img {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

body #content .gallery .gallery-img > img {
    max-height: 80vh;
}


body #content .gallery img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-height: 90vh;
    border-radius: 5px;
    padding: 2vmin;
}

body .tab {
    margin-left: 40px;
}

body .icon-allowed {
    background-image: url('/images/Yes_Check_Circle.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px;
    padding-left: 30px;
}

body .icon-prohibited {
    background-image: url('/images/No_Cross.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px;
    padding-left: 30px;
}

body .icon-attention {
    background-image: url('/images/Exclamation.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px;
    padding-left: 30px;
}

body .icon-warning {
    background-image: url('/images/Exclamation_Circle_Red.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px;
    padding-left: 30px;
}

body .icon-question {
    background-image: url('/images/Question_Circle.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px;
    padding-left: 30px;
}

body .icon-download {
    background-image: url("/images/download.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    background-size: 24px;
    padding-left: 30px;
    padding-top: 1vh;
    padding-bottom: 1vh;
    cursor: pointer;
}

body .close-pop-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 4vmax;
    overflow: visible;
    cursor: pointer;
}

body .close-pop-button img {
    width: 100%;
    height: 100%;
}

body #downloadPop {
    position: fixed;
    top: 2vh;
    left: 15vw;
    width: 70vw;
    height: 90vh;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 100;
    padding: 2vmin;
    border-radius: 5px;
}

body[theme=dark] #downloadPop {
    background-color: rgba(18, 18, 18, 0.98);
    color: rgba(255, 255, 255, 0.8);
}

body #downloadPop .download-content {
    height: 100%;
    overflow-y: scroll;
}

body #downloadPop #agreement-countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 1vmin;
}

body #downloadPop .agreement-checkbox {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: larger;
}

body #downloadPop .agreement-checkbox input[type=checkbox] {
    transform: scale(1.5);
}

body #downloadPop .download-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vmin;
}

body #downloadPop #download-button {
    background-image: url("/images/download.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 8vmax;
    text-align: left;
    justify-content: center;
    align-items: center;
    font-size: 4vmax;
}

body #downloadPop #download-button:not(#download-button[href]) {
    filter: grayscale(100%);
}

body #downloadPop #download-button img {
    width: 100%;
    height: 100%;
}

body #content .character .char-details .char-2d > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 77vh;
}

body #content .sticker > img {
    display: block;
    margin-left: 2vw;
    margin-right: 2vw;
    max-height: 90vh;
    max-width: 80vw;
}

@media only screen and (max-aspect-ratio: 1/1) {
    body #content .character .char-details {
        flex-wrap: wrap;
        align-items: stretch;
    }

    body #content .character .char-design {
        width: 100%;
    }
}


@media only screen and (max-width: 600px) and (-webkit-max-device-pixel-ratio: 1),
only screen and (max-aspect-ratio: 2/3) {
    body #nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 12vw;
        align-items: center !important;
        padding: 0 !important;
        background-color: rgba(255, 255, 255, 0.9);
    }

    body[theme=dark] #nav {
        background-color: rgba(18, 18, 18, 0.9);
    }

    body #nav hr {
        display: none !important;
    }

    body #nav>#internav {
        display: none !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        flex-wrap: wrap !important;
        width: 90vw !important;
        left: 4vw !important;
        bottom: 16vw !important;
        position: fixed !important;
        padding: 1vw !important;
        border-radius: 5px;
        align-items: center !important;
        justify-content: center;
        transition: color 0.1s, background-color 0.1s;
    }

    body[theme=dark] #nav>#internav {
        background-color: rgba(18, 18, 18, 0.9) !important;
    }

    body #nav>#internav.show {
        display: flex !important;
    }

    body #nav>#internav.show a {
        background-image: none;
        font-size: max(14pt, 5vw);
        width: 35vw !important;
    }

    body #nav>#externav a {
        padding: 1vw 0 1vw 1vw !important;
    }

    body #nav>#externav img {
        width: 9.5vw !important;
        display: block !important;
    }

    body #nav .mobileicon {
        display: flex !important;
    }

    body #nav .desktopicon {
        display: none !important;
    }

    body #nav .copyright {
        display: none !important;
    }

    body #nav .background-credit{
        display: none !important;
    }

    body #nav #langbar {
        display: none !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        position: fixed !important;
        left: 4vw !important;
        bottom: 16vw !important;
        width: 90vw !important;
        align-items: center !important;
        justify-content: center;
        border-radius: 5px;
        transition: color 0.1s, background-color 0.1s,filter 0.1s;
    }

    body[theme=dark] #nav #langbar {
        background-color: rgba(18, 18, 18, 0.9) !important;
    }

    body #nav #langbar button {
        font-size: max(14pt, 5vw) !important;
        width: 20vw !important;
    }

    body #nav #langbar.show {
        display: block !important;
    }

    body #langbar img {
        width: 9.5vw !important;
    }

    body #nav #theme-selector {
        display: none !important;
        position: fixed;
        background-color: rgba(255, 255, 255, 0.5);
        width: 40vw !important;
        height: 10vh !important;
        top: 5vw !important;
        right: 5vw !important;
        padding: 2vw !important;
        border-radius: 5px;
        align-items: center !important;
        justify-content: center !important;
    }

    body[theme=dark] #nav #theme-selector {
        background-color: rgba(255, 255, 255, 0.1);
    }

    body #nav #theme-selector img {
        width: 30vw !important;
    }

    body #nav>#theme-selector.show {
        display: flex !important;
    }

    body #content {
        margin-bottom: 6vmax;
    }

    body #content .character .char-details {
        flex-wrap: wrap;
    }

    body #content .character .char-design {
        width: 100%;
    }

    body #content .sticker {
        width: 100%;
    }


    body #content .sticker {
        flex-wrap: wrap;
    }


    body #downloadPop {
        top: 5vh !important;
        left: 4vw !important;
        width: 88vw !important;
        height: 80vh !important;
    }
}


body #content .x1ea6679b {
    display: none;
}