@charset "utf-8";

/***
    The new CSS reset - version 1.8.5 (last updated 14.6.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a,
button {
    cursor: revert;
}

ol,
ul,
menu {
    list-style: none;
}

img {
    max-inline-size: 100%;
    max-block-size: 100%;
}

table {
    border-collapse: collapse;
}

input,
textarea {
    -webkit-user-select: auto;
}

textarea {
    white-space: revert;
}

meter {
    -webkit-appearance: revert;
    appearance: revert;
}

:where(pre) {
    all: revert;
}

::placeholder {
    color: unset;
}

::marker {
    content: initial;
}

:where([hidden]) {
    display: none;
}

:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

:where([draggable="true"]) {
    -webkit-user-drag: element;
}

:where(dialog:modal) {
    all: revert;
}

/**/

@font-face {
    font-family: "icon";
    font-style: normal;
    font-weight: normal;
    font-display: block;
    src: url("../font/icon/fonts/icon.woff") format("woff");
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: "icon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-mail:before {
    content: "\e900";
}

.icon-chevron-right:before {
    content: "\e901";
}

.icon-external-link:before {
    content: "\e902";
}

.icon-play:before {
    content: "\e903";
}

.icon {
    display: inline-flex;
    align-items: baseline;
}

:root {
    --max-width: 79rem;
    --max-width-content-1: 48rem;
    --font-size: 16px;
    --text-color: #4d484c;
    --text-color-2: #404992;
    --logo-color: #006934;
    --body-color: #f1f0ec;
    --color-1: #fff;
    --color-2: #000;
    --color-3: #f1f0ec;
    --color-4: #d95936;
    --background-color-1: #dbf2f5;
    --background-color-2: #e6f1e9;
    --background-color-3: #fdf6e0;
    --border: 0.125rem solid #a5a19d;
    --border-radius: 0.1875rem;
}

html {
    scrollbar-gutter: stable;
    font-size: var(--font-size);
    color: var(--text-color);
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: "Noto Sans JP", sans-serif;
    word-break: break-all;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-color: var(--color-1);
}

.container {
    position: relative;
    width: 100%;
    max-width: calc(var(--max-width) + 8rem);
    margin: auto;
}

.max-width {
    width: 100%;
    max-width: 79rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-right: auto;
    margin-left: auto;
}

.bg-light-gray {
    background-color: var(--body-color);
}

.bg-light-blue {
    background-color: var(--background-color-1);
}

.bg-light-green {
    background-color: var(--background-color-2);
}

.bg-light-yellow {
    background-color: var(--background-color-3);
}

.inline-svg {
    display: none;
}

:where(a) {
    color: var(--text-color-2);
}

.color-orange {
    color: var(--color-4);
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

:is(label, button) {
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    :where(a, label) {
        transition: opacity 0.5s ease;
    }
    :where(a, label):hover {
        opacity: 0.7;
    }
}

@media only screen and (min-width: 1025px) {
    .container .display-mobile {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    .max-width {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .container .display-pc {
        display: none;
    }
}

/* header */

header {
    & .header-main {
        & .content-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            padding-block: 2rem;
            margin-inline-end: 5rem;

            & .content-01 {
                flex-shrink: 0;

                & img {
                    width: 100%;
                    max-height: 4.5rem;
                }
            }

            & .content-02 {
                & .header-menu-list {
                    & ul {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 0.5rem 1rem;
                        font-weight: bold;

                        & img {
                            width: 100%;
                            max-height: 2.75rem;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 1024px) {
    header {
        & .header-main {
            & .content-box {
                padding-block: 1.5rem 1rem;

                & .content-01 {
                    flex-shrink: unset;
                }
            }
        }
    }
}

/* hamburger menu */

body:has(#menu-toggle-checkbox:checked) {
    overflow: hidden;
}

#hamburger-button {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    height: 0;

    & > * {
        pointer-events: all;
    }
}

#menu-toggle-checkbox {
    display: none;
}

#menu-toggle-label {
    position: absolute;
    top: 2.5rem;
    right: 2rem;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: var(--logo-color);
    outline: 0.25rem solid var(--color-1);
    border-radius: var(--border-radius);
    transform: rotate(0deg);
    transition:
        opacity 0.5s ease,
        border-radius 0.5s ease,
        transform 0.5s ease;

    & span {
        display: block;
        width: 32px;
        height: 2px;
        margin: 4px 0;
        background-color: var(--color-1);
        transform: translateY(0px) rotate(0deg);
        transition: transform 0.5s ease;
    }

    #menu-toggle-checkbox:checked ~ & {
        border-radius: 50%;
        transform: rotate(180deg);

        & span {
            &:nth-of-type(1) {
                transform: translateY(10px) rotate(-45deg);
            }
            &:nth-of-type(2) {
                background-color: rgba(255, 255, 255, 0);
            }
            &:nth-of-type(3) {
                transform: translateY(-10px) rotate(45deg);
            }
        }
    }
}

#full-screen-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    overscroll-behavior-y: contain;
    visibility: hidden;
    width: 100vw;
    height: 100%;
    margin-left: calc(50% - 50vw);
    background-color: color-mix(in srgb, var(--color-1) 98%, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;

    #hamburger-button:has(#menu-toggle-checkbox:checked) ~ & {
        z-index: 99;
        visibility: visible;
        opacity: 1;
    }

    & .content-box {
        position: relative;
        overflow-y: auto;
        width: 100%;
        height: 100%;
        max-height: 100svh;

        & .content-box-inner {
            display: flex;
            gap: 4rem 4rem;
            padding-block: 8rem;

            & .content-01 {
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2rem;

                & .title {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 1rem;
                    font-weight: bold;

                    & img {
                        width: 100%;
                        max-height: 8rem;
                    }
                }

                & .menu-list {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    width: 100%;
                    gap: 1rem;

                    & .content-01-01 {
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        font-size: 1.125rem;
                        font-weight: bold;

                        & li {
                            display: flex;
                            align-items: baseline;
                            gap: 0.25rem;

                            &:before {
                                content: "";
                                position: relative;
                                inset-block-start: 0.125rem;
                                display: inline-block;
                                height: 1em;
                                aspect-ratio: cos(30deg);
                                clip-path: polygon(0 0, 100% 50%, 0 100%);
                                background-color: var(--text-color);
                            }
                        }
                    }

                    & .content-01-02 {
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        margin-block-start: 1rem;

                        & img {
                            width: 100%;
                            max-width: 16rem;
                        }
                    }
                }
            }

            & .content-02 {
                flex: 1;
                display: flex;
                gap: 2rem;

                & .menu-list {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;

                    & .heading-01 {
                        display: flex;
                        justify-content: center;
                        padding: 0.5rem 1rem;
                        margin-block-end: 0.25rem;
                        background-color: var(--logo-color);
                        border-radius: var(--border-radius);
                        color: var(--color-1);
                        font-size: 1.125rem;
                        font-weight: bold;
                    }

                    & .heading-02 {
                        display: flex;
                        align-items: baseline;
                        gap: 0.25rem;
                        font-size: 1.125rem;
                        font-weight: bold;

                        &::before {
                            content: "";
                            position: relative;
                            inset-block-start: 0.125rem;
                            display: inline-block;
                            width: 1em;
                            height: 1em;
                            background-color: var(--text-color);
                            border-radius: var(--border-radius);
                        }
                    }

                    & ul {
                        display: flex;
                        flex-direction: column;
                        gap: 0.5rem;
                        margin-inline-start: calc(1.125rem + 0.25rem);

                        .heading-02 + & {
                            margin-block-start: -0.5rem;
                        }

                        & li {
                            display: flex;
                            gap: 0.25rem;

                            &::before {
                                position: relative;
                                top: 0.75rem;
                                content: "";
                                display: block;
                                width: 0.75rem;
                                height: 1px;
                                background-color: var(--text-color);
                            }
                        }
                    }
                }
            }
        }

        & .background-logo {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            overflow: hidden;
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;

            & img {
                position: fixed;
                transform: rotate(-20deg);
                opacity: 0.1;
                width: 100%;
                max-width: min(100%, 40rem);
            }
        }
    }
}

@media only screen and (max-width: 1024px) {
    #hamburger-button {
        position: fixed;
    }

    #menu-toggle-label {
        top: 1.5rem;
        right: 1rem;
    }

    #full-screen-menu {
        & .content-box {
            & .content-box-inner {
                flex-direction: column;
                padding-block: 6rem;

                & .content-01 {
                    img {
                        max-height: 6rem;
                    }
                }

                & .content-02 {
                    flex-direction: column;
                }
            }

            & .background-logo {
                align-items: flex-start;
                justify-content: center;
                padding-block-start: 12rem;

                & img {
                    position: relative;
                    max-width: min(100%, 20rem);
                }
            }
        }
    }
}

/* footer */

footer {
    margin-block-start: 8rem;
    padding-block-start: 4rem;
    border-block-start: 2px solid var(--logo-color);

    & .footer-main {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        & .content-box-01 {
            display: flex;
            flex-direction: column;
            gap: 2rem;

            & .content-01 {
                display: flex;
                gap: 2rem 4rem;

                & .menu-list-01 {
                    flex-shrink: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 1rem;

                    & .content-01-01 {
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        font-size: 1.125rem;
                        font-weight: bold;

                        & li {
                            display: flex;
                            align-items: baseline;
                            gap: 0.25rem;

                            &:before {
                                content: "";
                                position: relative;
                                inset-block-start: 0.125rem;
                                display: inline-block;
                                height: 1em;
                                aspect-ratio: cos(30deg);
                                clip-path: polygon(0 0, 100% 50%, 0 100%);
                                background-color: var(--text-color);
                            }
                        }
                    }

                    & .content-01-02 {
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        margin-block-start: 1rem;

                        & img {
                            width: 100%;
                            max-width: 16rem;
                        }
                    }
                }

                & .menu-list-02 {
                    flex-grow: 1;
                    display: flex;
                    gap: 2rem;

                    & .content-01-01 {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;

                        & .heading-01 {
                            display: flex;
                            justify-content: center;
                            padding: 0.5rem 1rem;
                            margin-block-end: 0.25rem;
                            background-color: var(--logo-color);
                            border-radius: var(--border-radius);
                            color: var(--color-1);
                            font-size: 1.125rem;
                            font-weight: bold;
                        }

                        & .heading-02 {
                            display: flex;
                            align-items: baseline;
                            gap: 0.25rem;
                            font-size: 1.125rem;
                            font-weight: bold;

                            &::before {
                                content: "";
                                position: relative;
                                inset-block-start: 0.125rem;
                                display: inline-block;
                                width: 1em;
                                height: 1em;
                                background-color: var(--text-color);
                                border-radius: var(--border-radius);
                            }
                        }

                        & ul {
                            display: flex;
                            flex-direction: column;
                            gap: 0.5rem;
                            margin-inline-start: calc(1.125rem + 0.25rem);

                            .heading-02 + & {
                                margin-block-start: -0.5rem;
                            }

                            & li {
                                display: flex;
                                gap: 0.25rem;

                                &::before {
                                    position: relative;
                                    top: 0.75rem;
                                    content: "";
                                    display: block;
                                    width: 0.75rem;
                                    height: 1px;
                                    background-color: var(--text-color);
                                }
                            }
                        }
                    }
                }
            }

            & .content-02 {
                & .content-02-01 {
                    display: flex;
                    gap: 0.5rem 1rem;
                    flex-wrap: wrap;
                }
            }
        }

        & .content-box-02 {
            & .inner-content-box {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                gap: 2rem;
                padding-block: 2rem;

                & .content-01 {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 1rem;

                    & .content-01-01 {
                        & img {
                            width: 100%;
                            max-height: 4rem;
                        }
                    }

                    & .content-01-02 {
                        & .text-01,
                        & .text-02 {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0 0.5rem;
                        }
                    }
                }

                & .content-02 {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    font-size: 0.875rem;

                    & img {
                        width: 2.5rem;
                    }
                }
            }
        }
    }
}

#copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: var(--color-1);
    background-color: var(--logo-color);
    padding: 1rem;
}

@media only screen and (max-width: 1024px) {
    footer {
        & .footer-main {
            & .content-box-01 {
                & .content-01 {
                    flex-direction: column;

                    & .menu-list-02 {
                        flex-direction: column;
                    }
                }

                & .content-02 {
                    & .content-02-01 {
                        flex-direction: column;
                    }
                }
            }

            & .content-box-02 {
                & .inner-content-box {
                    flex-direction: column;
                    align-items: flex-start;
                }
            }
        }
    }
}