@charset "UTF-8";

/*============================
ヘッダー
============================ */
.l-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    position: fixed;
    top: 0;
    z-index: 900;
    width: 100%;
    padding: 16px 40px;
    transition: background-color 0.75s, backdrop-filter 0.75s;
    background-color: transparent;
}

.header_inner {
    position: relative;
    width: 100vw;
    margin-top: -80px;
}

.l-header__navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
}

.nav_items {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 24px;
    font-size: 1.2rem;
}

.edu {
    font-family: var(--figtree);
    font-weight: 600;
    text-decoration: none;
    color: var(--white);
    transition: color 0.75s;
    cursor: pointer;
    letter-spacing: 0.15rem;
    white-space: nowrap;
}

.header__anchor {
    margin-right: 68px;
}

.header-logo {
    fill: var(--white);
    transition: fill 0.75s;
    width: 100px;
    height: auto;
}


.l-header.js-scroll-header {
    background-color: var(--milk-30);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.l-header.js-scroll-header .header-logo {
    fill: var(--marine-blue);
}

.l-header.js-scroll-header .l-header__navigation.pc-only .edu {
    color: var(--marine-blue);
}

body.nav-open {
    overflow: clip;
}

@media (hover:hover) {
    .l-header .header-logo:hover {
        fill: var(--marine-blue);
    }


    .l-header .l-header__navigation.pc-only .edu:hover {
        color: var(--marine-blue);
    }

    .l-header.js-scroll-header .header-logo:hover {
        fill: #87b6c6;
        fill: color-mix(in srgb, var(--marine-blue) 50%, var(--white));
    }

    .l-header.js-scroll-header .l-header__navigation.pc-only .edu:hover {
        color: #87b6c6;
        color: color-mix(in srgb, var(--marine-blue) 50%, var(--white));
    }

    .l-header:not(:has(+.loading)) .l-header__navigation .edu:hover {
        color: #87b6c6;
        color: color-mix(in srgb, var(--marine-blue) 50%, var(--white));
    }

    .l-header.js-scroll-header:has(.header_nav.active) .nav_items .edu:hover {
        color: #87b6c6;
        color: color-mix(in srgb, var(--marine-blue) 50%, var(--white));
    }
}

@media screen and (min-width:1979px) {
    .header__anchor {
        margin-right: 92px;
    }

    .header-logo {
        width: 120px;
    }

    .nav_items {
        font-weight: 500;
        font-size: 1.6rem;
    }

    .edu {
        font-weight: 500;
    }
}

@media screen and (max-width:960px) {
    .header__anchor {
        margin-right: 0;
    }

    .l-header {
        padding: 16px;
    }

    .l-header__navigation.pc-only {
        display: none;
    }

    .nav_items {
        flex-direction: column;
        align-items: baseline;
        margin-left: unset;
    }

    .l-header.js-scroll-header:has(.header_nav.active) {
        background-color: inherit;
        backdrop-filter: inherit;
        transition: background-color 0.75s;
    }

    .l-header.js-scroll-header .header_hamburger.hamburger .l-hamburger-line {
        background-color: var(--marine-blue);
    }

    .l-header.js-scroll-header:has(.header_nav.active) .l-hamburger-line {
        background-color: var(--white);
    }

    .l-header.js-scroll-header:has(.header_nav.active) .nav_items .edu {
        color: var(--white);
    }
}


/*============================
トップページ以外の挙動を記述
============================ */
.l-header:not(:has(+.loading)) .header-logo {
    fill: var(--marine-blue);
}

.l-header:not(:has(+.loading)) .l-header__navigation .edu {
    color: var(--marine-blue);
}

.l-header:not(:has(+.loading)) .c-sns-menu__items>a {
    background-color: var(--marine-blue);
}

.l-header:not(:has(+.loading)) .l-hamburger-line {
    background-color: var(--marine-blue);
}

.l-header:not(:has(+.loading)) .hamburger.active .l-hamburger-line {
    background-color: var(--white);
}

/*============================
ヘッダーsnsメニュー
============================ */
.c-sns-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 24px;
}

@media screen and (max-width:960px) {
    .l-header>.c-sns-menu {
        display: none;
    }

    .header_nav.nav .c-sns-menu {
        width: -webkit-fill-available;
        width: -moz-available;
        justify-content: flex-start;
        width: stretch;
    }
}

.c-sns-menu__items>a {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.75s;
}

.l-header.js-scroll-header>.c-sns-menu .c-sns-menu__items>a {
    background-color: var(--marine-blue);
}

.c-sns-menu__items a::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5em;
    height: 1.5em;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--white);
}

.c-sns-menu__items:nth-child(1)>a::before {
    mask-image: url(../images/common/icon/icon-instagram.svg);
    -webkit-mask-image: url(../images/common/icon/icon-instagram.svg);
}

.c-sns-menu__items:nth-child(2)>a::before {
    mask-image: url(../images/common/icon/icon-x.svg);
    -webkit-mask-image: url(../images/common/icon/icon-x.svg);
}

.c-sns-menu__items:nth-child(3)>a::before {
    mask-image: url(../images/common/icon/icon-youtube.svg);
    -webkit-mask-image: url(../images/common/icon/icon-youtube.svg);
}

@media screen and (min-width: 1979px) {
    .c-sns-menu__items>a {
        width: 48px;
        height: 48px;
    }

    .c-sns-menu__items a::before {
        width: 2em;
        height: 2em;
    }
}

@media screen and (max-width: 960px) {
    .header_inner.sp-only {
        position: static;
        display: block;
    }

    .header_nav {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 901;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100dvw;
        height: 100dvh;
        padding: 72px 36px 40px;
        background-color: rgba(15, 32, 48, 0.50);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        visibility: hidden;
        transform: translateX(100%);
        transition: transform 0.75s, visibility 0.75s;
    }

    .header_nav.active .c-sns-menu__items>a {
        background-color: var(--smoky-blue, #89A4AE);
    }

    /* ハンバーガーメニュー */
    .hamburger {
        position: absolute;
        top: 20px;
        right: 16px;
        background-color: transparent;
        border-color: transparent;
        cursor: pointer;
        z-index: 902;
    }

    .header_hamburger {
        width: 40px;
        height: 40px;
        transition: transform 0.75s;
    }

    .l-hamburger-line:last-of-type {
        margin-top: 8px;
    }

    .hamburger .l-hamburger-line {
        position: relative;
        display: block;
        width: 100%;
        height: 1px;
        transition: ease .4s;
        background-color: var(--white);
        top: 0;
        left: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    .nav_items_item {
        width: -webkit-fill-available;
        width: -moz-available;
        width: stretch;
    }

    .nav_items_item>a {
        display: block;
        width: -webkit-fill-available;
        width: -moz-available;
        width: stretch;
        font-size: clamp(1.8rem, 5.4vw, 2.4rem);
        font-weight: 300;
        transition: color 0.75s;
    }

    .bnn_item {
        width: 80%;
    }

    /* ハンバーガーメニュークリック後のスタイル */
    .header_nav.active {
        transform: translateX(0);
        will-change: backdrop-filter;
        visibility: visible;
        transition: transform 0.75s;
    }

    .hamburger.active .l-hamburger-line:nth-child(1) {
        transform: rotate(30deg);
    }

    .hamburger.active .l-hamburger-line:nth-child(2) {
        margin: 0;
        transform: rotate(-30deg);
    }

}

@media (hover:hover) {

    .nav_items_item a:hover {
        color: color-mix(in srgb, var(--marine-blue) 50%, var(--white));
    }

    .l-header .c-sns-menu__items>a:hover,
    .l-header.js-scroll-header .c-sns-menu__items>a:hover {
        background-color: var(--smoky-blue, #89A4AE);
    }

    .header_nav.active .c-sns-menu__items>a:hover {
        background-color: transparent;
    }

    .hamburger:hover .l-hamburger-line:nth-child(2) {
        margin-top: 0;
    }

    .hamburger.active:hover .l-hamburger-line:nth-child(1) {
        transform: rotate(30deg);
    }

    .hamburger.active:hover .l-hamburger-line:nth-child(2) {
        margin-top: 0;
        transform: rotate(-30deg);
    }

    .hamburger.active:hover .l-hamburger-line:nth-child(1) {
        transform: rotate(0);
    }

    .hamburger.active:hover .l-hamburger-line:nth-child(2) {
        transform: rotate(0);
    }
}