@charset "UTF-8";

/*

    Yone Website

    Copyright (C) よね/Yone

    No modification or reproduction of any kind is permitted.
    改変や複製を一切禁じます。

*/

: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: "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);
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--page-font-size);
}

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);
}

/* 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;
}

.header-menu-button:hover {
    background-color: #ddd;
    border-radius: 0.5em;
    cursor: pointer;
}

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

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

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

.header-menu {
    --padding-top-bottom: 4rem;
    --padding-left-right: 2rem;

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

    width: calc(100vw - var(--padding-left-right) * 2);
    height: calc(100vh - var(--padding-top-bottom) * 2 - var(--header-height));

    display: flex;
    flex-direction: column;
    align-items: center;
    
    background-color: #ddd;

    padding: var(--padding-top-bottom) var(--padding-left-right);
    gap: 4rem;

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

.header-menu>* {
    max-width: 1024px;
}

.header-menu .navLinks__item a {
    color: #202020;
}

.header-menu .navLinks__item a::after {
    background-color: #202020;
}

.header-menu.enabled {
    left: 0%;
}

.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;
}

.header-menu__item>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);
}

.header-menu .navLinks {
    width: 100%;
    height: auto;
}

/* main */

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

/* footer */

footer {
    --footer-width: calc(var(var(--footer-width)) - 4rem)

    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;
}

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

footer .navLinks {
    width: 100%;
    height: auto;

}

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

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}



/* 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;
}

.button: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;
}

.button-control:hover {
    background-color: #00000020;
}

.button-control: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;
}

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

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

.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 {
    --padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: calc(100% - var(--padding) * 2);
    max-width: 512px;
    height: calc(256px - var(--padding) * 2);
    border-radius: 1rem;
    gap: 1rem;
    padding: var(--padding);
    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;
}

.navLinks__item 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;
}

.navLinks__item a::after {
    position: absolute;
    bottom: -0.2em;

    margin: auto;

    width: 0;
    height: 1px;

    display: block;

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

    transition: all 0.3s;
}

.navLinks__item a:hover::after {
    width: 100%;
}