@charset "utf-8";
@layer article;
@layer article {
    #article_top {
        width: 100%;
        #article_top_t {
            position: relative;
            z-index: 100;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            a {
                text-decoration: none;
            }
            #article_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;
                        }
                    }
                }
            }
            #article_top_tc {
                flex: 1 0 100%;
                order: 3;
                text-align: center;
                img {
                    width: 19.8rem;
                    height: auto;
                }
            }
            #article_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) {
                #article_top_tl {
                    flex: 1 0 calc(25% - 0.8rem);
                    padding: 0.4rem;
                    order: 1;
                }
                #article_top_tc {
                    flex: 1 0 50%;
                    order: 2;
                    img {
                        width: 24.75rem;
                    }
                }
                #article_top_tr {
                    flex: 1 0 calc(25% - 0.8rem);
                    padding: 0.4rem;
                    order: 3;
                }
            }
        }
        #article_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) {
            #article_top_b {
                margin-top: -3rem;
            }
        }
    }
    #article_main {
        width: 95%;
        margin: 0 auto;
        background-color: rgba(255, 255, 255, 0.8);
        color: #501f50;
        a {
            color: #1666b6;
        }
        #navi_top {
            display: table;
            width: 100%;
            border-bottom: double 5px #000;
            .navi_top_item {
                display: none;
                width: 4rem;
                vertical-align: bottom;
                svg {
                    width: 4rem;
                    height: auto;
                    fill: #a16790;
                    stroke: #a16790;
                    background-color: rgba(255, 255, 255, 0.2);
                    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
                    border-radius: 4px;
                    margin: 4px 0 0;
                    padding: 4px;
                }
            }
            @media (min-width: 768px) {
                .navi_top_item {
                    display: table-cell;
                }
            }
            #navi_title {
                display: table-cell;
                #navi_title_category {
                    font-weight: bold;
                    color: #745967;
                    font-size: 0.95rem;
                }
                h1 {
                    border: dotted 2px #de9fc9;
                    background-color: #eee3f7;
                    text-align: center;
                    font-size: 1.4rem;
                    font-weight: bold;
                    color: #49313d;
                    padding-top: 0.7rem;
                    padding-bottom: 0.7rem;
                }
            }
        }
        #navi_sub_top {
            display: table;
            width: 100%;
            font-size: 0.8rem;
            margin-bottom: 1rem;
            .navi_sub_prev {
                display: table-cell;
            }
            .navi_sub_next {
                display: table-cell;
                text-align: right;
            }
        }
        @media (min-width: 940px) {
            #article_top_tl {
                padding: 0.4rem;
            }
            #article_top_tc {
                display: table-cell;
            }
            #article_top_tr {
                padding: 0.4rem;
            }
        }
        #msg {
            display: table;
            width: 95%;
            margin: 0 auto;
            border-radius: 6px;
            border: double 3px #877a9a;
            background-color: rgba(255, 255, 255, 0.5);
            padding: 0.4rem;
            box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.04);
            #msg_main {
                display: table-cell;
                width: 100%;
                #msg_info {
                    display: table;
                    width: 100%;
                    #msg_date {
                        display: table-cell;
                        width: 50%;
                        font-size: 0.8rem;
                        font-weight: bold;
                        color: #b3749c;
                    }
                    #msg_name {
                        display: table-cell;
                        width: 50%;
                        text-align: right;
                        font-size: 0.8rem;
                        font-weight: bold;
                        color: #b3749c;
                    }
                }
                hr {
                    border-top: 0;
                    border-bottom: dotted 2px #c1b7ca;
                }
                #msg_brief {
                    font-size: 0.95rem;
                    line-height: 1.4rem;
                    text-indent: 1rem;
                }
            }
            #msg_icon {
                display: table-cell;
                padding-left: 0.2rem;
                img {
                    width: 6.33rem;
                    height: auto;
                }
            }
        }
        @media (min-width: 768px) {
            #msg {
                width: 80%;
            }
        }
        @media (min-width: 1200px) {
            #msg {
                width: 70%;
            }
        }
        article {
            width: 100%;
            min-height: 40rem;
            em {
                background: linear-gradient(transparent 65%, #ffdfe4 65%, #ffdfe4 90%, transparent 90%);
                font-weight: bold;
                font-style: normal;
                color: #9d6565;
            }
            .w {
                font-size: 0.8rem;
                color: #638492;
            }
            .formula {
                padding: 0 0.1rem;
                white-space: nowrap;
                img {
                    width: auto;
                    height: 1.5rem;
                }
            }
            h2 {
                background-color: rgba(192, 174, 196, 0.4);
                border: solid 2px rgba(66, 54, 65, 0.4);
                box-shadow: 0 0 8px 8px rgba(236, 218, 224, 0.3) inset;
                border-radius: 4px;
                margin: 2rem 0;
                color: #222;
                font-weight: normal;
                text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.3), -2px 2px 10px rgba(255, 255, 255, 0.3), 2px -2px 10px rgba(255, 255, 255, 0.3), -2px -2px 10px rgba(255, 255, 255, 0.3);
                border-left: solid 0.8rem rgba(64, 48, 62, 0.75);
                font-size: 1.5rem;
                span {
                    color: #fff;
                    font-weight: bold;
                    text-shadow: 2px 2px 10px rgba(79, 45, 94, 0.25), -2px 2px 10px rgba(79, 45, 94, 0.25), 2px -2px 10px rgba(79, 45, 94, 0.25), -2px -2px 10px rgba(79, 45, 94, 0.25);
                    padding: 0 0.8rem;
                }
                a {
                    color: #222;
                }
            }
            h3 {
                float: left;
                padding: 6px 0;
                color: #222;
                font-weight: normal;
                text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.3), -2px 2px 10px rgba(255, 255, 255, 0.3), 2px -2px 10px rgba(255, 255, 255, 0.3), -2px -2px 10px rgba(255, 255, 255, 0.3);
                margin: 2rem 0;
                font-size: 1.2rem;
                margin-right: 0.5rem;
                span {
                    background-color: rgba(133, 141, 166, 0.8);
                    border: solid 2px rgba(69, 65, 83, 0.5);
                    box-shadow: 0 0 4px 4px rgba(176, 169, 191, 0.7) inset;
                    border-radius: 12px;
                    color: #fff;
                    font-weight: bold;
                    text-shadow: initial;
                    padding: 0 0.4rem;
                    margin-right: 0.5rem;
                }
                a {
                    color: #222;
                }
            }
            .h3line {
                border: 0;
                padding-top: 3rem;
                border-bottom: dotted 6px rgba(63, 74, 111, 0.7);
            }
            .block {
                background-color: rgba(249, 248, 249, 0.7);
                border-radius: 5px;
                border: solid 1px #a0959c;
                padding: 0.3rem 0.8rem;
                text-indent: 1rem;
                font-size: 0.95rem;
                line-height: 1.4rem;
                margin: 0.6rem 0.6rem;
                box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.04);
                text-align: left;
            }
            figure {
                width: 100%;
                text-align: center;
                margin: 1.5rem auto;
                .figure_container {
                    width: 80%;
                    background-color: rgba(249, 248, 249, 0.7);
                    border-radius: 5px;
                    border: solid 1px #a0959c;
                    padding: 0.3rem 0.8rem;
                    font-size: 0.95rem;
                    line-height: 1.4rem;
                    margin: 0 auto;
                    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.04);
                    text-align: left;
                    .figure_subheader {
                        background-color: #bbb2bd;
                        border-radius: 4px;
                        border-left: solid 0.6rem #827c84;
                        border-right: solid 0.6rem #827c84;
                        margin: 1.2rem 0 0.6rem;
                        padding: 0.2rem 0.3rem;
                        color: #fff;
                        font-weight: bold;
                    }
                    ul {
                        margin-left: 0;
                        list-style-type: none;
                        font-size: 1rem;
                        li:before {
                            content: "\a0";
                            background-image: url('/images/article/ul_mark_20250807.webp');
                            background-size: 1.5rem 1.5rem;
                            display: inline-block;
                            width: 1.5rem;
                            height: 1.5rem;
                            text-align: center;
                            margin-right: 0.4rem;
                        }
                        li {
                            margin: 0.2rem 0;
                            line-height: 1.7rem;
                            text-indent: -2rem;
                            margin-left: 2rem;
                            img {
                                margin-top: 0.2rem;
                            }
                        }
                    }
                    ol {
                        margin-left: 0;
                        list-style-type: none;
                        counter-reset: num;
                        font-size: 1rem;
                        li:before {
                            counter-increment: num;
                            content: counter(num, decimal);
                            background-image: url('/images/article/ol_mark_20250807.webp');
                            background-size: 1.5rem 1.5rem;
                            display: inline-block;
                            width: 1.5rem;
                            height: 1.5rem;
                            text-align: center;
                            font-size: 0.8rem;
                            line-height: 1.7rem;
                            color: #fff;
                            text-indent: 0;
                            margin-right: 0.4rem;
                        }
                        li {
                            margin: 0.2rem 0;
                            line-height: 1.7rem;
                            text-indent: -2rem;
                            margin-left: 2rem;
                            img {
                                margin-top: 0.2rem;
                            }
                        }
                    }
                }
                .subheading {
                    background-color: #dadae6;
                    margin: 0.3rem 7rem 0.3rem 0;
                    text-indent: 1rem;
                    font-weight: bold;
                    color: #6a7f99;
                }
                .weak {
                    margin: 1.5rem 0.6rem 1.5rem auto;
                    font-size: 0.8rem;
                    color: #638492;
                }
                figcaption {
                    font-size: 0.8rem;
                }
                .image {
                    width: 33.56rem;
                    height: auto;
                    max-width: 100%;
                    border-radius: 6px;
                    border: solid 2px #ccc4cb;
                    box-shadow: 0 0 6px 6px rgba(219, 214, 221, 0.2);
                }
            }
            table {
                border-collapse: collapse;
                background-color: rgba(255, 255, 255, 0.7);
                margin: 0 auto;
                box-shadow: 0 0 6px 6px rgba(219, 214, 221, 0.2);
                th {
                    border: solid 2px #ccc4cb;
                    background-color: #e4d6e1;
                    padding: 2px 8px;
                    font-weight: bold;
                }
                td {
                    border: solid 2px #ccc4cb;
                    padding: 2px 8px;
                    text-align: left;
                }
            }
        }
        #navi_sub_bottom {
            display: table;
            width: 100%;
            font-size: 0.8rem;
            margin-top: 1rem;
            .navi_sub_prev {
                display: table-cell;
            }
            .navi_sub_next {
                display: table-cell;
                text-align: right;
            }
        }
        #navi_bottom {
            display: table;
            width: 100%;
            border-top: double 5px #000;
            .navi_bottom_item {
                display: table-cell;
                width: 25%;
                text-align: center;
                #bottom_prev {
                    width: 4rem;
                }
                #bottom_menu {
                    width: 4rem;
                }
                #bottom_home {
                    width: 3.59rem;
                }
                #bottom_next {
                    width: 4rem;
                }
                svg {
                    height: auto;
                    fill: #a16790;
                    stroke: #a16790;
                    background-color: rgba(255, 255, 255, 0.6);
                    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
                    border-radius: 4px;
                    margin: 4px 0 0;
                    padding: 4px;
                }
                p {
                    font-size: 0.9rem;
                }
            }
        }
    }
    #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);
    }
}