@charset "utf-8";

@media screen and (max-width:979px) {
    .c-global-menu {
        display: none
    }
}

@media screen and (min-width:980px) {
    .c-global-menu {
        background-color: transparent;
        display: block;
        height: auto;
        opacity: 1;
        position: static;
        visibility: visible;
        width: auto
    }

    .c-global-menu__inner {
        padding: 0
    }

    .c-global-menu__list {
        align-items: center;
        display: flex;
        gap: 2rem;
        list-style: none
    }

    .c-global-menu__item {
        border: none !important
    }

    .c-global-menu__link {
        color: var(--color-black-2);
        display: flex;
        font-size: .875rem;
        line-height: 1.4;
        padding: 0;
        text-decoration: none
    }
}

.c-menu-button.focus-visible {
    outline-color: rgb(var(--color-black-rgb)/50%)
}

@media screen and (max-width:979px) {
    .c-menu-button {
        align-items: center;
        background-color: var(--color-base-02);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        height: 2.5rem;
        justify-content: center;
        position: relative;
        width: 2.5rem
    }
}

@media screen and (min-width:980px) {
    .c-menu-button {
        display: none
    }
}

@media screen and (max-width:979px) {
    .c-menu-button__line {
        background-color: var(--color-black-2);
        height: .125rem;
        position: relative;
        transition: background-color .35s cubic-bezier(.35, .8, .34, 1), opacity .35s cubic-bezier(.35, .8, .34, 1);
        width: 1rem
    }

    .c-menu-button__line:after,
    .c-menu-button__line:before {
        background-color: var(--color-black-2);
        content: "";
        display: inline-block;
        height: .125rem;
        left: 0;
        position: absolute;
        transform-origin: center;
        transition: top .35s cubic-bezier(.35, .8, .34, 1), transform .35s cubic-bezier(.35, .8, .34, 1);
        width: 100%
    }

    .c-menu-button__line:before {
        top: -.4375rem
    }

    .c-menu-button__line:after {
        top: .4375rem
    }

    html[data-open-menu=true] .c-menu-button__line {
        background-color: transparent
    }

    html[data-open-menu=true] .c-menu-button__line:after,
    html[data-open-menu=true] .c-menu-button__line:before {
        top: 0
    }

    html[data-open-menu=true] .c-menu-button__line:before {
        transform: rotate(45deg)
    }

    html[data-open-menu=true] .c-menu-button__line:after {
        transform: rotate(-45deg)
    }
}

.c-header {
    backdrop-filter: blur(60px);
    background: hsla(36, 33%, 97%, .7);
    border-radius: 4px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .09);
    z-index: 40
}

@media screen and (max-width:979px) {
    .c-header {
        border-radius: 0;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .09);
        left: 0;
        right: 0;
        top: 0
    }

    html[data-open-menu=true] .c-header {
        backdrop-filter: blur(0);
        background: #faf8f5
    }
}

.c-header__inner {
    align-items: center;
    display: flex;
    height: 5rem;
    justify-content: space-between;
    padding: 0 1.5vw;
    position: relative;
    width: 100%;
}

@media screen and (max-width:979px) {
    .c-header__inner {
        height: 3.5rem;
        padding: 0 2vw;
    }
}

.c-header__logo-area {
    align-items: center;
    display: flex;
    gap: 1rem
}

@media screen and (max-width:979px) {
    .c-header__logo-area {
        gap: .75rem
    }
}

.c-header__logo {
    align-items: center;
    display: flex;
    height: 3.25rem
}

@media screen and (max-width:979px) {
    .c-header__logo {
        height: 2.5rem
    }
}

.c-header__logo a {
    display: flex;
    height: 100%
}

.c-header__logo img {
    height: 100%;
    width: auto
}

.c-header__site-name {
    color: var(--color-black-2);
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.4
}

@media screen and (max-width:979px) {
    .c-header__site-name {
        font-size: .625rem;
        letter-spacing: .02em;
        line-height: 1.4
    }
}

.c-mobile-menu-wrapper {
    display: none
}

@media screen and (max-width:979px) {
    .c-mobile-menu-wrapper {
        background-color: rgba(0, 0, 0, .5);
        display: flex;
        height: 100%;
        left: 0;
        opacity: 0;
        padding: 6.25rem 1.25rem 1.25rem;
        position: fixed;
        top: 0;
        transition: visibility 415ms cubic-bezier(.35, .8, .34, 1), opacity 415ms cubic-bezier(.35, .8, .34, 1);
        visibility: hidden;
        width: 100%;
        z-index: 30;
        box-sizing: border-box;
    }

    html[data-open-menu=true] .c-mobile-menu-wrapper {
        opacity: 1;
        visibility: visible
    }

    .c-mobile-menu {
        background-color: var(--color-white);
        border-radius: 4px;
        width: 100%
    }

    .c-mobile-menu,
    .c-mobile-menu__inner {
        display: flex;
        flex-direction: column;
        height: 100%
    }

    .c-mobile-menu__inner {
        justify-content: flex-start;
        padding: 0
    }

    .c-mobile-menu__list {
        display: flex;
        flex-direction: column;
        gap: 0;
        list-style: none;
        padding: .25rem 1.25rem
    }

    .c-mobile-menu__item {
        padding: 1.25rem 0
    }

    .c-mobile-menu__item:not(:first-child) {
        border-top: 1px solid var(--color-line-01)
    }

    .c-mobile-menu__link {
        color: var(--color-black-2);
        display: block;
        font-size: .8125rem;
        letter-spacing: .06em;
        line-height: 1.4;
        text-decoration: none
    }
}

@media screen and (min-width:980px) {
    .c-mobile-menu {
        display: none
    }
}

@media (hover:hover) and (pointer:fine) {
    .u-underline:hover .u-underline__target {
        background-size: 100% 1px
    }
}

.u-underline__target {
    background-image: linear-gradient(90deg, currentcolor, currentcolor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    display: inline;
    line-height: 1.4
}

@media (hover:hover) and (pointer:fine) {
    .u-underline__target {
        transition: background-size 415ms cubic-bezier(.35, .8, .34, 1)
    }
}