@charset "utf-8";
@layer reset, common, header;
@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;
    }
}
@layer header {
    #header_top {
        width: 100%;
        #header_top_t {
            position: relative;
            z-index: 100;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            a {
                text-decoration: none;
            }
            #header_top_tl {
                flex: 1 0 50%;
                order: 1;
                padding: 0.4rem 0 0.4rem 0.4rem;
                #home_icon_container {
                    display: inline-block;
                    background-color: rgba(255, 255, 255, 0.6);
                    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
                    border-radius: 6px;
                    padding: 0.2rem;
                    #home_icon {
                        width: 2.4rem;
                        fill: #4d496d;
                    }
                    #home_text {
                        width: 4.12rem;
                        fill: #4d496d;
                        stroke: #4d496d;
                    }
                    @media (min-width: 1024px) {
                        #home_icon {
                            width: 3rem;
                        }
                        #home_text {
                            width: 5.15rem;
                        }
                    }
                }
            }
            #header_top_tc {
                flex: 1 0 100%;
                order: 3;
                text-align: center;
                img {
                    width: 19.8rem;
                    height: auto;
                }
            }
            #header_top_tr {
                flex: 1 0 50%;
                order: 2;
                padding: 0.4rem 0.4rem 0.4rem 0;
                text-align: right;
                #language_icon_container {
                    display: inline-block;
                    margin-left: auto;
                    background-color: rgba(255, 255, 255, 0.6);
                    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
                    border-radius: 6px;
                    padding: 0.2rem;
                    #language_icon {
                        width: 2.4rem;
                        fill: #4d496d;
                    }
                    #language_text {
                        width: 6.72rem;
                        fill: #4d496d;
                        stroke: #4d496d;
                    }
                    @media (min-width: 1024px) {
                        #language_icon {
                            width: 3rem;
                        }
                        #language_text {
                            width: 8.4rem;
                        }
                    }
                }
            }
            @media (min-width: 1024px) {
                #header_top_tl {
                    flex: 1 0 calc(25% - 0.8rem);
                    padding: 0.4rem;
                    order: 1;
                }
                #header_top_tc {
                    flex: 1 0 50%;
                    order: 2;
                    img {
                        width: 24.75rem;
                    }
                }
                #header_top_tr {
                    flex: 1 0 calc(25% - 0.8rem);
                    padding: 0.4rem;
                    order: 3;
                }
            }
        }
        #header_top_b {
            position: relative;
            margin-top: -1.5rem;
            overflow: hidden;
            #kuina_chan {
                width: 685px;
                height: 134px;
            }
            @media (min-width: 768px) {
                #kuina_chan {
                    width: 1000px;
                    height: 141px;
                }
            }
            @media (min-width: 1200px) {
                #kuina_chan {
                    width: 1296px;
                    height: 183px;
                }
            }
        }
        @media (min-width: 1024px) {
            #header_top_b {
                margin-top: -3rem;
            }
        }
    }
    #language_dialog {
        min-width: 19rem;
        max-width: 19rem;
        margin: 10rem auto;
        border: solid 2px #6b6878;
        border-radius: 12px;
        background-color: #edeaf4;
        padding: 0.5rem 0.5rem 1rem;
        #language_dialog_cross {
            width: 2rem;
            height: 2rem;
            padding: 0.2rem;
            margin: 0.2rem 0.6rem 0.6rem auto;
            border: 1px solid #424246;
            border-radius: 4px;
            box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.9);
            background-color: #756e7a;
            svg {
                fill: #fff;
            }
        }
        #language_list {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 auto;
        }
        .language_labels {
            width: 8rem;
            margin: 0.2rem 0.4rem;
            padding: 0.6rem 0.4rem 0.2rem;
            border: 1px solid #666;
            border-radius: 4px;
            box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.9);
            svg {
                fill: #fff;
            }
        }
        .language_labels.inactive {
            background-color: rgba(48, 35, 103, 0.6);
        }
        .language_labels.active {
            background-color: rgba(103, 45, 35, 0.6);
        }
    }
    #language_dialog::backdrop {
        background: rgba(0, 0, 0, 0.3);
    }
}