@charset "utf-8";
@layer reset, common;
@layer reset {
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
    }
}
@layer common {
    a:hover {
        opacity: 0.5;
    }
    a.void {
        cursor: pointer;
    }
    div {
        vertical-align: top;
    }
    p {
        white-space: pre-wrap;
    }
    img {
        border-style: none;
        vertical-align: top;
    }
    br.clear {
        clear: both;
    }
    html {
        box-sizing: border-box;
        scroll-behavior: smooth;
        overflow-y: scroll;
        min-width: 320px;
        font-size: 14px;
    }
    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }
    @media (min-width: 1200px) {
        html {
            font-size: 18px;
        }
    }
    body {
        overflow: hidden;
        letter-spacing: 0.03rem;
        background-image: url("/images/common/vertical_left_20250601.webp"), url("/images/common/vertical_right_20250601.webp"), url("/images/common/back_20250601.webp");
        background-repeat: repeat-y, repeat-y, repeat;
        background-position: calc(5% - 18px) top, calc(95% + 18px) top, center top;
        background-size: 18px 444px, 18px 497px, 1600px 1600px;
        background-attachment: scroll, scroll, scroll;
        background-blend-mode: normal, normal, normal;
    }
    @media (min-width: 768px) {
        body {
            background-position: calc(7.5% - 27px) top, calc(92.5% + 27px) top, center top;
            background-size: 27px 666px, 27px 745px, 1600px 1600px;
        }
    }
    @media (min-width: 1200px) {
        body {
            background-position: max(50% - 36rem - 18px, calc(10% - 36px)) top, min(50% + 36rem + 18px, calc(90% + 36px)) top, center top;
            background-size: 36px 888px, 36px 994px, 1600px 1600px;
        }
    }
    body:lang(ja) {
        font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
    }
    body:lang(en) {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    body:lang(es) {
        font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    body:lang(zh-Hans) {
        font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    body:lang(zh-Hant) {
        font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    }
    body:lang(fr) {
        font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    body:lang(pt) {
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    body:lang(ru) {
        font-family: "Noto Sans", "Roboto", "PT Sans", "Helvetica Neue", Arial, sans-serif;
    }
    body:lang(de) {
        font-family: "Open Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    body:lang(ko) {
        font-family: "Noto Sans KR", "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    }
    #black_top {
        width: 100%;
        height: 14px;
        background-color: #5f4b6f;
    }
    #container {
        position: relative;
        max-width: 72rem;
        width: calc(90% + 8px);
        margin: 0 auto;
        background-color: rgba(255, 255, 255, 0.9);
    }
    @media (min-width: 768px) {
        #container {
            width: calc(85% + 8px);
        }
    }
    @media (min-width: 1200px) {
        #container {
            width: calc(80% + 8px);
        }
    }
    #main {
        min-height: 100dvh;
        background-image: url("/images/common/main_back_20250607.webp");
        background-repeat: repeat;
        background-position: center top;
        background-size: 1740px 100px;
        background-attachment: scroll;
        background-blend-mode: normal;
    }
    #to_top {
        position: fixed;
        bottom: 2rem;
        right: 1rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        div {
            width: 4rem;
            height: 4rem;
        }
    }
    #to_top.show {
        opacity: 1;
        visibility: visible;
    }
    #black_bottom {
        width: 100%;
        height: 1.5rem;
        background-color: #5f4b6f;
        color: #5f4b6f;
    }
}