@charset "utf-8";
@layer contents;
@layer contents {
    h1 {
        position: relative;
        width: 100%;
        padding: 10px;
        text-align: center;
        background-image: url('/images/index/top_back_20250622.webp');
        background-repeat: repeat;
        background-position: center top;
        background-size: 36px 62px;
        background-attachment: scroll;
        background-blend-mode: normal;
        #kuina_chan {
            width: 95%;
            border: solid 2px rgba(0, 0, 0, 0.4);
        }
        @media (min-width: 768px) {
            #kuina_chan {
                width: min(1260px, 90%);
                border: solid 2px rgba(0, 0, 0, 0.4);
            }
        }
        .logo {
            position: absolute;
            left: 6%;
            top: 6%;
            width: 36.94%;
        }
        @media (min-width: 768px) {
            .logo {
                left: 8%;
                width: min(490px, 35%);
            }
        }
        #logo1 {
            opacity: 0.2;
        }
        #logo2 {
            opacity: 0.9;
            mix-blend-mode: overlay;
        }
        .top_msg {
            position: absolute;
            left: 6%;
            top: 62%;
            font-size: 3.67vw;
            text-align: left;
        }
        @media (min-width: 768px) {
            .top_msg {
                left: 8%;
                top: 68%;
                font-size: 2.76vw;
            }
        }
        @media (min-width: 1200px) {
            .top_msg {
                left: 8%;
                top: 68%;
                font-size: min(2.6vw, 43px);
            }
        }
        #top_msg1 {
            color: #4e002a;
            text-shadow: 0 0 0.6vw #fff;
            mix-blend-mode: overlay;
        }
        #top_msg2 {
            color: rgba(38, 0, 20, 0.55);
            text-shadow: 0 0 0.6vw rgba(255, 190, 220, 0.9);
        }
    }
    .contents_locator {
        position: relative;
    }
    .contents {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3)), url("/images/index/contents_back_20250615.webp");
        background-repeat: no-repeat, repeat;
        background-position: center top, center top;
        background-size: cover, 410px 410px;
        background-attachment: scroll, scroll;
        background-blend-mode: overlay, normal;
        min-height: 16rem;
        padding: 4rem 1rem;
        a {
            text-decoration: none;
        }
    }
    .contents_inner {
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        outline: 3px solid rgba(255, 255, 255, 0.5);
        outline-offset: -5px;
        box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.5);
        padding: 0.5rem 1.6rem;
        width: 85%;
        h2 {
            font-size: 1.4em;
            font-weight: bold;
            text-decoration: underline;
        }
        p {
            font-size: 1em;
        }
        .subheader {
            font-size: 1.3em;
            font-weight: bold;
        }
        .subcontents {
            display: inline-block;
            padding: 1rem 2rem;
            border-radius: 4px;
            margin: 0.4rem 0.4rem 1rem;
            text-align: center;
        }
        .under_construction {
            text-decoration: none;
            font-weight: normal;
            color: #ccc;
            span {
                font-size: 1rem;
            }
        }
    }
    .contents_outer1 {
        max-width: min(80rem, 90%);
        background-color: rgba(255, 255, 255, 0.4);
        margin: 0 auto -3rem 1rem;
        clip-path: polygon(0% 0%, 100% calc(0% + 4rem), 100% calc(100% - 4rem), 0% 100%);
        text-align: right;
        .contents {
            clip-path: polygon(calc(0% + 0.4rem) calc(0% + 0.4rem), calc(100% - 0.4rem) calc(0% + 4.4rem), calc(100% - 0.4rem) calc(100% - 4.4rem), calc(0% + 0.4rem) calc(100% - 0.4rem));
            .contents_inner {
                background-color: rgba(47, 43, 44, 0.75);
                margin: 0.2rem auto 0.2rem 0;
                color: #fff;
            }
        }
        .floor {
            margin: -1.1em -0.4em 0 auto;
        }
        h2 {
            color: #b5c6f7;
            text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
        }
        .subcontents {
            background-color: rgba(255, 255, 255, 0.1);
            outline: 3px solid rgba(255, 255, 255, 0.7);
            box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.9);
        }
        .under_construction {
            color: #ccc;
        }
    }
    .contents_outer2 {
        max-width: min(80rem, 90%);
        background-color: rgba(255, 255, 255, 0.4);
        margin: 0 1rem -3rem auto;
        clip-path: polygon(0% calc(0% + 4rem), 100% 0%, 100% 100%, 0% calc(100% - 4rem));
        text-align: left;
        .contents {
            clip-path: polygon(calc(0% + 0.4rem) calc(0% + 4.4rem), calc(100% - 0.4rem) calc(0% + 0.4rem), calc(100% - 0.4rem) calc(100% - 0.4rem), calc(0% + 0.4rem) calc(100% - 4.4rem));
            filter: hue-rotate(180deg);
            .contents_inner {
                background-color: rgba(227, 236, 239, 0.75);
                margin: 0.2rem 0 0.2rem auto;
                color: #000;
                filter: hue-rotate(180deg);
            }
        }
        .floor {
            margin: -1.1em auto 0 -0.4em;
        }
        h2 {
            color: #6652cf;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
        }
        .subcontents {
            background-color: rgba(255, 255, 255, 0.1);
            outline: 3px solid rgba(255, 255, 255, 0.7);
            box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.9);
        }
        .under_construction {
            color: #666;
        }
    }
    .complement {
        font-size: 0.9rem;
    }
    #languages_icon {
        width: 1.5rem;
        svg {
            fill: #fff;
        }
    }
    #language_list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        list-style: none;
    }
    .language_labels {
        width: 6.5rem;
        margin: 0.1rem 0.2rem;
        padding: 0.6rem 0.4rem 0.2rem;
        border: 1px solid #fff;
        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);
    }
    #recent_updates {
        font-size: 1.2rem;
    }
    #recent_updates_list {
        color: #401f58;
        list-style-type: square;
        margin-left: 1.5rem;
    }
    .floor {
        position: relative;
        z-index: 100;
        width: 10.86em;
        height: 3.38em;
        background-image: url("/images/index/floor_20250709.webp");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-attachment: scroll;
        background-blend-mode: normal;
        text-align: center;
        line-height: 3.38em;
        color: #fff;
        font-size: 1.3rem;
    }
    .contents_icon {
        position: absolute;
        top: 0;
        z-index: 100;
        display: none;
        height: auto;
    }
    #contents_about_kuina_chan {
        width: 16rem;
    }
    #contents_illustrations {
        width: 18.34rem;
    }
    #contents_tutorials {
        width: 16.11rem;
    }
    #contents_board_games {
        width: 12.17rem;
    }
    #contents_kuin {
        width: 16.89rem;
    }
    #contents_quick_quiz {
        width: 7.31rem;
    }
    #contents_channel {
        width: 14.78rem;
    }
    @media (min-width: 1070px) {
        .contents_icon {
            display: inline;
        }
        #contents_about_kuina_chan {
            left: 75.5%;
        }
        #contents_illustrations {
            left: calc(25.0% - 18.34rem);
        }
        #contents_tutorials {
            left: 75.5%;
        }
        #contents_board_games {
            left: calc(25.0% - 12.17rem);
        }
        #contents_kuin {
            left: 75.5%;
        }
        #contents_quick_quiz {
            left: calc(25.0% - 7.31rem);
        }
        #contents_channel {
            left: 75.5%;
        }
    }
    .contents_icon_m {
        display: block;
        height: auto;
        margin: 0 auto;
    }
    #contents_about_kuina_chan_m {
        width: 14rem;
    }
    #contents_illustrations_m {
        width: 16.05rem;
    }
    #contents_tutorials_m {
        width: 14.1rem;
    }
    #contents_board_games_m {
        width: 10.65rem;
    }
    #contents_kuin_m {
        width: 14.78rem;
    }
    #contents_quick_quiz_m {
        width: 6.39rem;
    }
    #contents_channel_m {
        width: 12.93rem;
    }
    @media (min-width: 1070px) {
        .contents_icon_m {
            display: none;
        }
    }
    #underground_grad {
        width: 100%;
        height: 30rem;
        background-image: linear-gradient(0deg, #000 0, rgba(0, 0, 0, 0.0) 100%);
    }
    #underground {
        position: relative;
        width: 100%;
        height: 15rem;
        background-color: #000;
        color: #fff;
    }
    #butterfly1_container {
        position: absolute;
        left: -12%;
        top: 0;
        width: 100%;
        pointer-events: none;
    }
    #butterfly1 {
        width: 39.88%;
        mix-blend-mode: overlay;
    }
    @media (min-width: 768px) {
        #butterfly1 {
            width: min(529px, 37.79%);
        }
    }
    #butterfly2_container {
        position: absolute;
        left: 60%;
        top: 43vw;
        width: 100%;
        pointer-events: none;
    }
    @media (min-width: 768px) {
        #butterfly2_container {
            top: 38.25vw;
        }
    }
    @media (min-width: 1200px) {
        #butterfly2_container {
            top: min(36vw, 585px);
        }
    }
    #butterfly2 {
        width: 54.89%;
        mix-blend-mode: overlay;
    }
    @media (min-width: 768px) {
        #butterfly2 {
            width: min(728px, 52%);
        }
    }
}