* {
    margin: 0;
    padding: 0;

    color: unset;
    background-color: unset;

    font-size: unset;
    font-style: unset;
    font-weight: unset;
    text-decoration: unset;
}


* {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
}

b {
    font-weight: bold;
}

input,
textarea,
button,
select {
    padding: 2px;
}
textarea{
    resize: none;
}

ul {
    list-style: none;
}

table > * > tr > * {
    padding: 2px;
}
table > * > tr > th {
    font-weight: bold;
    text-align: center;
}

.hidden {
    display: none !important;
}

/* font-size */
    * {
        font-family: 14px;
    }
    h1, h1 * {
        font-size: 24px;
    }
    h2, h2 * {
        font-size: 20px
    }
    h3, h3 * {
        font-size: 18px
    }
    h4, h4 * {
        font-size: 17px
    }
    h5, h5 * {
        font-size: 16px
    }
    h6, h6 * {
        font-size: 15px
    }
/* color */
    /* h1 {
        color: #FFFFFF;
        background-color: #5CC0EF;
    }
    footer {
        color: #FFFFFF;
        background-color: #1C75BC;
    }
    body > header {
        background-color: #FFFFFF;
    }
    body > header > *.header-top {
        color: #FFFFFF;
        background-color: #5CC0EF;
    }



    body > main > section:nth-child(odd) {
        color: #FFFFFF;
        background-color: #5CC0EF;
    }
    body > main > section:nth-child(even) {
        background-color: #FFFFFF;
    }

    span.span-membership {
        color: #FF0000;
    } */
/*  design */
    h3 {
        margin-bottom: 5px;
        border-bottom: 1px dotted rgba(0, 0, 0, 1);
    }
    body > main > section:nth-child(odd) h3 {
        border-bottom: 1px dotted rgba(255, 255, 255, 1);
    }
    h4 {
        margin-bottom: 5px;
    }
    h4::before {
        content: "●";
    }
    h4::after {
        content: "●";
    }
    p {
       text-indent: 1em;
    }

    button, input[type=submit] {
        padding: 1px 5px;
        margin: 2px;
        border-width: 1px;
        border-style: outset;
        border-radius: 5px;
        border-color: #000000;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.8);
    }


/* function */
    div#to-the-top {
        position:fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        text-align: center;
        background-color: rgba(255,255,255,0.90);
        width: 50px;
        height: 50px;
        border-radius: 100%;
        bottom: 20px;
        right: 20px;
        cursor: pointer;
    }

/* body */
    body,
    body > header,
    body > main,
    body > footer {
        position: relative;
        width: 100%;
        /* min-width: 1080px; */
    }
    body > header > section,
    body > main > section,
    body > footer > div {
        max-width: 1080px;
        margin: 0 auto;
    }
    body > main > section {
        padding: 50px 0;
    }
    body > main > section > * {
        max-width: 880px;
        margin: 0 auto;
    }
    body > main > section:last-of-type {
        padding: 50px 0 100px 0;
    }


/* header */
    /* header h1 */
        body > header > h1 {
            text-align: center;
        }
        body > header > h1 > a {
            display: inline-block;
            width: 100%;
        }
        body > header > section.header-top {
            width: unset;
            max-width: 100vw;
        }
        body > header > section.header-top > * {
            max-width: 1080px;
            margin: 0 auto;
        }


    /* header  header-user_portal*/
        menu.menu-bar.menu-user_portal > ul {
            justify-content: right;
            width: auto;
        }
        menu.menu-bar.menu-user_portal > ul > li {
            text-align: center;
            width: 100px;
            height: 100%;
        }
        menu.menu-bar.menu-user_portal > ul > li:first-child {
            width: 250px;
            margin-right: auto;
        }
        menu.menu-bar.menu-user_portal > ul > li > a {
            display: flex;
            width: auto;
            height: 100%;
            align-items: center;
            justify-content: center;
        }
    /* header title */
        body > header > section > h2,
        body > header > section > menu#menu-page_transition > ul {
            padding: 5px 10px;
        }
        body > header > section > menu#menu-page_transition > ul {
            display: flex;
            flex-wrap: nowrap;
            justify-content: left;
        }
        body > header > section > menu#menu-page_transition > ul > li::after {
            padding: 0 10px;
            content: "\003E";
        }
        body > header > section > menu#menu-page_transition > ul > li:last-child:after {
            content: unset;
        }


/* footer */
    /* footer-copyright */
    body > footer > div#footer-copyright {
        font-size: 12px;
        text-align: center;
    }
/* menu */
menu.menu-bar > ul {
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
}
menu.menu-bar > ul > li {
    width: 100%;
}
menu.menu-bar > ul > li > a {
    display: inline-block;
    width: 100%;
}

/* article (single, multiple-article)*/
    body > main article img {
        display: block;
        margin: 0 auto;
        max-width: 65%;
        object-fit: contain;
    }


    body > main > section#article-header > * {
        max-width: 880px;
        margin: 0 auto;
        padding: 0 100px;
    }
    body > main > section#article-header > p.article-header-start_date,
    body > main > section#article-header > p.article-header-updated_at,
    body > main > section#article-header > p.article-header-end_date {
        font-size: 12px;
        text-align: right;
    }

    body > main > section#article-content > article,
    body > main > section#article-content > div {
        max-width: 780px;
        margin: 0 auto;
        padding: 0 50px;
    }
    body > main > section#article-content > article > * {
        margin-bottom: 10px;
    }
    body > main > section#article-content > div#article-content-reaction-like > form > div {
        text-align: right;
    }
    body > main > section#article-content > div#article-content-reaction-like > form > div > span {
        cursor: pointer;
        user-select: none;
    }
    body > main > section#article-content > div#article-content-reaction-comment-form > form > div {
        text-align: center;
    }
    body > main > section#article-content > div#article-content-reaction-comment-form > form > div > textarea {
        width: 100%;
        max-width: 600px;
        min-height: 10em;
        margin: 0 auto;
    }

/* multiples */
    /* multiples-index */

/* menus */
    /* menus-index */
        body > main > section#menus-index > article {
            text-align: center;
        }



/* layouts */
    body#home > * > section h1,
    body#home > * > section h2,
    body#home > * > section h3,
    body#home > * > section h4,
    body#home > * > section h5,
    body#home > * > section h6,
    body#home > * > section p {
        text-align: center;
    }
    body#home > * > section p {
        text-indent: unset;
    }

    /* layouts-page */
        /* layouts-page-single */
            body > * > section.layouts-page-single > * ,
            body > * > section.layouts-page-single > * > * {
                margin-bottom: 30px;
            }
            body > * > section.layouts-page-single > *:last-child ,
            body > * > section.layouts-page-single > * > *:last-child {
                margin-bottom: unset;
            }
            body > * > section.layouts-page-single p {
                text-indent: unset;
            }

            /* layouts-page-single-content */

        /* layouts-page-multiple */
            p.layouts-page-multiple-all::before {
                content: ">>";
            }
            p.layouts-page-multiple-all::after {
                content: "<<";
            }


            /* layouts-page-multiple-list */
                table.layouts-page-multiple-list > tbody > tr {
                    padding: 5px 0;
                }
                table.layouts-page-multiple-list > tbody > tr > td.layouts-page-multiple-list-start_date {
                    width: 200px;
                    text-align: center;
                    margin: 0 10px;
                }
                table.layouts-page-multiple-list > tbody > tr > td.layouts-page-multiple-list-title {
                    width: 400px;
                    text-align: left;
                    margin: 0 10px;
                }
                table.layouts-page-multiple-list > tbody > tr > td.layouts-page-multiple-list-title > a {
                    display: inline-block;
                    width: 100%;
                }
            /* layouts-page-multiple-card */
                ul.layouts-page-multiple-card {
                    margin: 0 auto;
                    display: flex;
                    justify-content: space-evenly;
                    flex-wrap: wrap;
                }
                ul.layouts-page-multiple-card > li {
                    display: flex;
                    flex-direction: column;
                    margin: 5px;
                    width: 250px;
                    height: 150px;
                    position: relative;
                }
                ul.layouts-page-multiple-card > li:hover {
                    cursor: pointer;
                }
                ul.layouts-page-multiple-card > li > img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    object-fit: cover;
                }
                ul.layouts-page-multiple-card > li > span {
                    padding: 5px 10px;
                    color: #000000;;
                    background-color: rgba(255,255,255,0.75);
                    width: 200px;
                    text-align: center;
                    border-radius: 10px;
                    position: absolute;
                    bottom: 20px;
                    left: 50%;
                    transform: translateX(-50%);
                }

        /* layouts-page-image */
            /* layouts-page-image-single */
            div.layouts-page-image-single {
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            div.layouts-page-image-single > img {
                margin: 100px auto;
                object-fit: cover;
            }