@charset "utf-8";

/* --------------------------------------------

nav

---------------------------------------------- */

.gNavWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9980;
}

.gNavWrap.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media screen and (max-width:1200px) {
    .gNav {
        position: relative;
        padding: 14rem 0 10rem;
    }
}

@media screen and (max-width:640px) {
    .gNavWrap {
        height: 100svh;
    }
}


/* --------------------------------------------

メニュー

---------------------------------------------- */

.gNavMenu {
    width: 90%;
    max-width: 960px;
    margin: auto;
}

.gNavMenu li {
    border-bottom: 1px solid #c4d7f7;
}

.gNavMenu li a {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding-left: 1em;
    font-size: var(--fz-l);
    line-height: 4.5;
}

.gNavMenu li a::before {
    content: "";
    width: 1em;
    height: 1em;
    flex-shrink: 0;

    clip-path: polygon(
        50% 0%,
        90% 25%,
        90% 75%,
        50% 100%,
        10% 75%,
        10% 25%
    );
}

.gNavMenu li:nth-child(odd) a::before {
    background: var(--c-blue);
}

.gNavMenu li:nth-child(even) a::before {
    background: var(--c-green);
}

@media (hover:hover) {
    .gNavMenu li a:hover {
        color: var(--c-green);
    }
}

@media screen and (max-width:1200px) {
    .gNavMenu li a {
        font-size: var(--fz-xl);
    }
}


/* --------------------------------------------

ハンバーガーメニューボタン

---------------------------------------------- */

.openBtn {
    display: none;
}

@media screen and (max-width:1200px) {
    .openBtn {
        position: fixed;
        top: 2rem;
        right: 2rem;
        display: block;
        width: 6rem;
        height: 6rem;
        background-color: #fff;
        cursor: pointer;
        z-index: 9980;
    }

    .openBtn span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60%;
        height: 2px;
        background-color: var(--c-text);
        transform-origin: center;
        transition: transform 0.4s ease, opacity 0.3s ease;
    }

    .openBtn span:nth-child(1) {
        transform: translate(-50%, -50%) translateY(-6px);
    }

    .openBtn span:nth-child(2) {
        transform: translate(-50%, -50%) translateY(6px);
    }

    .openBtn.is-active span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .openBtn.is-active span:nth-child(2) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
}

@media screen and (max-width:640px) {
    .openBtn {
        width: 5rem;
        height: 5rem;
        top: 1.4rem;
        right: 1.2rem;
    }

    .openBtn span:nth-child(1) {
        transform: translate(-50%, -50%) translateY(-8px);
    }

    .openBtn span:nth-child(2) {
        transform: translate(-50%, -50%) translateY(8px);
    }
}


/* --------------------------------------------

クローズボタン

---------------------------------------------- */

.closeBtnWrap {
    display: none;
}

@media screen and (max-width:1200px) {
    .closeBtnWrap {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9990;
    }

    .closeBtn {
        display: none;
        width: 100px;
        height: 100px;
        cursor: pointer;
    }

    .closeBtn.is-show {
        display: block;
    }
}


/* --------------------------------------------

背景

---------------------------------------------- */

.gNavBg {
    position: fixed;
    inset: 0;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 9970;
}

.gNavBg.is-show {
    opacity: 1;
    visibility: visible;
}


/* --------------------------------------------

#header　印刷時

---------------------------------------------- */

@media print {
    .gNavWrap,
    .closeBtnWrap,
    #openBtn,
    .gNavBg {
    display: none;
    }
}