@charset "UTF-8";

/*!

    Yone Website

    Copyright (C) よね/Yone

*/

:root {
    /* page */
    --page-main-color: #ffffffff;
    --font-color-black: #404040ff;
    --font-color-bule: #40a0f0ff;
    --page-font-size: 14px;
    --page-font-weight: 400;
    --page-main-font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;

    /* header */
    --header-height: 4.5em;

    /* footer */
    --footer-width: 100%;
    --footer-height: auto;

    /* main */
    --main-min-height: calc(100dvh - var(--header-height) * 2);


    font-size: var(--page-font-size);
    font-weight: var(--page-font-weight);
    font-family: var(--page-main-font-family);
}

body {
    font-size: var(--page-font-size);
    font-weight: var(--page-font-weight);
    font-family: var(--page-main-font-family);
    background-color: var(--page-main-color);
    color: var(--font-color-black);
    margin: 0;
    padding: 0;

    & * {
        margin: 0;
        padding: 0;
    }
}

/* header */

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 199;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--header-height);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 2px;
    overflow: hidden;
    background-color: #f0f0f0;
    user-select: none;
}

.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: 1024px;
    height: calc(100%);

    padding: 0 2em;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 1em;
    height: 100%;
}

.header-logo-image {
    height: 80%;
    border-radius: calc(20%);
}

.header-title {
    text-align: center;
    font-size: 1.2em;
}

/* header-menu */

.header-menu-button {
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5em;

    &:hover {
        background-color: #ddd;
        border-radius: 0.5em;
        cursor: pointer;
    }

    & .header-menu-button-icon--close {
        display: none;
    }

    &.enabled .header-menu-button-icon--open {
        display: none;
    }

    &.enabled .header-menu-button-icon--close {
        display: block;
    }
}

.header-menu {
    position: fixed;
    top: calc(0% + var(--header-height));
    left: 100%;

    box-sizing: border-box;
    width: calc(100dvw);
    height: calc(100dvh - var(--header-height));

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #ddd;

    padding: 4rem 2rem;
    gap: 4rem;

    z-index: 100;
    transition: left 0.3s;

    &>* {
        max-width: 1024px;
    }

    & .navLinks__item {
        & a {
            color: #202020;

            &::after {
                background-color: #202020;
            }
        }
    }

    &.enabled {
        left: 0%;
    }

    & .navLinks {
        width: 100%;
        height: auto;
    }
}

.header-menu__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 512px;
    gap: 2em;
}

.header-menu__item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 2em);
    background-color: #f0f0f0;
    border-radius: 0.5em;

    &>a {
        display: inline-block;
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(100% - 2em);
        height: calc(100% - 2em);
        padding: 1em;
        text-decoration: none;
        color: var(--font-color-black);
    }
}

/* main */

main {
    margin-top: var(--header-height);
    width: 100%;
    min-height: var(--main-min-height);
}

/* footer */

footer {
    box-sizing: border-box;
    width: var(--footer-width);
    height: var(--footer-height);

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 4rem 2rem;
    gap: 4rem;

    background-color: #202020;
    color: #f0f0f0;
    user-select: none;

    &>* {
        max-width: 1024px;
    }

    & .navLinks {
        width: 100%;
        height: auto;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: unset;
    font-weight: unset;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* footer */

.footer-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.footer-copyright {
    text-align: center;
    color: #ffffff;
}

/* button */

.button {
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: 1.4em;
    border: none;

    padding: 0.7em 1.4em;
    background-color: #404040;
    font-size: 1.2em;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    user-select: none;

    &:hover {
        background-color: #f0f0f0ff;
        color: var(--font-color-black);
        cursor: pointer;
    }
}

/* button-control */

.button-control {
    display: inline-block;
    border-radius: 50%;
    padding: 0.2em;
    background-color: #00000000;
    color: var(--font-color-black);
    text-decoration: none;

    transition: all 0.2s;
    cursor: pointer;

    &:hover {
        background-color: #00000020;
    }

    &:active {
        background-color: #00000040;
    }
}


/* errors-page */

.errors-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.errors-page__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    min-height: calc(var(--main-min-height) - var(--footer-height));
}

.errors-page__title {
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
}

/* section */

.section {
    gap: 2rem;

    &:nth-of-type(odd) {
        background-color: var(--section-odd-background-color);
    }
}

.section--padding-top-bottom {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.section__content {
    --padding: 1rem;
    width: calc(100% - var(--padding) * 2);
    height: calc(100% - var(--padding) * 2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section__title {
    border-bottom: 2px solid #c0c0c0;
    padding: 0.5em;
    font-size: 1.5rem;
    text-align: center;
    color: var(--font-color-bule);
}

/* flex */

.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

/* gap */

.gap-4rem {
    gap: 4rem;
}

.gap-2rem {
    gap: 2rem;
}

.gap-1rem {
    gap: 1rem;
}

.gap-half {
    gap: 0.5em;
}

/* adsense */

.adsense {
    display: flex;
    box-sizing: border-box;

    width: min(100%, 1025px);
    height: min(auto, 256px);
    border-radius: 1rem;

    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;

    background-color: #00000020;
    text-align: center;
}


/* navLinks */

.navLinks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.navLinks__list {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 1rem;
    list-style: none;
}

.navLinks__item {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: row;
    align-items: center;

    & a {
        position: relative;

        display: flex;
        flex-direction: row;
        align-items: center;

        padding: 0.5rem;

        /* gap: 0.5em; */
        font-size: 1.2rem;
        text-decoration: none;
        color: #f0f0f0;

        user-select: none;

        &::after {
            position: absolute;
            bottom: -0.2em;

            margin: auto;

            width: 0;
            height: 1px;

            display: block;

            background-color: #f0f0f0;
            content: "";

            transition: all 0.3s;
        }

        &:hover::after {
            width: 100%;
        }
    }
}