/* header.css */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
}

body.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    .site-header-shell {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .site-header {
        position: static;
    }
}

.site-header__notice-badge-break {
    display: none;
}

.site-header__menu-toggle {
    display: none;
}

.site-header__top {
    align-items: center;
    padding: 12px 32px;
    border-bottom: 1px solid #000;
}

.site-header__logo img {
    display: block;
    max-width: none;
}

.site-header__logo-img--desktop {
    width: 176px;
    height: 42px;
}

.site-header__logo img.site-header__logo-img--mobile {
    display: none;
}

.site-header__nav.wp-block-navigation {
    gap: 22px;
}

.site-header__nav .wp-block-navigation-item__label {
    font-size: 15px;
    font-weight: 500;
}

.site-header__nav .wp-block-navigation-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-header__nav .wp-block-navigation-item a:hover {
    color: #17bae5;
}

.site-header__nav .wp-block-navigation-item a::after {
    content: "";
    width: 10px;
    height: 6px;
    background-color: currentColor;
    -webkit-mask-image: url('../../images/header-chevron.svg');
    mask-image: url('../../images/header-chevron.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.site-header__notice-row {
    align-items: center;
    height: 38px;
    gap: 0;
    padding: 0 32px 0 0;
    flex-wrap: nowrap;
}

.site-header__notice-row {
    display: none !important;
}

body.home .site-header__notice-row {
    display: flex !important;
}

body.home .site-header__notice-row:has(.site-header__ticker-empty) {
    display: none !important;
}

.site-header__notice-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 135px;
    height: 38px;
    margin: 0;
    padding: 0;
    background: #d7322e;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.wp-block-query.site-header__ticker {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin-left: 18px;
    overflow: hidden;
}

.site-header__ticker .wp-block-post-template {
    position: absolute;
    top: 50%;
    right: -100%;
    display: flex;
    gap: 48px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    transform: translateY(-50%);
    animation: site-header-ticker-scroll 24s linear infinite;
}

.site-header__ticker:hover .wp-block-post-template,
.site-header__ticker:focus-within .wp-block-post-template {
    animation-play-state: paused;
}

.site-header__ticker .wp-block-post-template:has(> :only-child) {
    position: static;
    animation: none;
    transform: none;
}

.site-header__ticker .wp-block-post-title {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.site-header__ticker .wp-block-post-title a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-header__ticker .wp-block-post-title a:hover {
    color: #17bae5;
}

.site-header__ticker-empty {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

@keyframes site-header-ticker-scroll {
    from {
        right: -100%;
    }
    to {
        right: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header__ticker {
        overflow-x: auto;
    }

    .site-header__ticker .wp-block-post-template {
        position: static;
        animation: none;
        transform: none;
    }
}

@media (max-width: 1279px) {
    .site-header__top {
        padding: 0.878vw 2.343vw;
    }

    .site-header__logo-img--desktop {
        width: 12.884vw;
        height: 3.075vw;
    }

    .site-header__nav.wp-block-navigation {
        gap: 1.611vw;
    }

    .site-header__nav .wp-block-navigation-item__label {
        font-size: 1.098vw;
    }

    .site-header__nav .wp-block-navigation-item a {
        gap: 0.586vw;
    }

    .site-header__nav .wp-block-navigation-item a::after {
        width: 0.732vw;
        height: 0.439vw;
    }

    .site-header__notice-row {
        height: 2.782vw;
        padding-right: 2.343vw;
    }

    .site-header__notice-badge {
        width: 9.883vw;
        height: 2.782vw;
        font-size: 1.098vw;
    }

    .wp-block-query.site-header__ticker {
        margin-left: 1.318vw;
    }

    .site-header__ticker .wp-block-post-template {
        gap: 3.514vw;
    }

    .site-header__ticker .wp-block-post-title,
    .site-header__ticker-empty {
        font-size: 1.098vw;
    }

}

@media (max-width: 782px) {
    .site-header__top {
        padding: 3.6vw 4.267vw;
    }

    .site-header__logo img.site-header__logo-img--desktop {
        display: none;
    }

    .site-header__logo img.site-header__logo-img--mobile {
        display: block;
        width: 37.867vw;
        height: 5.333vw;
    }

    .site-header__nav > .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    .site-header__top {
        position: relative;
        z-index: 5;
    }

    .site-header__logo {
        position: relative;
        z-index: 2;
    }

    .site-header__nav .wp-block-navigation__responsive-container {
        z-index: 1;
    }

    .site-header__nav .wp-block-navigation__responsive-container-open,
    .site-header__nav .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    .site-header__menu-toggle {
        position: relative;
        z-index: 2;
        display: block;
        width: 8.533vw;
        height: 6.4vw;
        padding: 0;
        border: none;
        background: none;
        appearance: none;
        cursor: pointer;
    }

    .site-header__menu-toggle::before,
    .site-header__menu-toggle::after,
    .site-header__menu-toggle-bar {
        content: "";
        position: absolute;
        left: 0;
        width: 8.533vw;
        height: 0.267vw;
        background: #212121;
        transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
    }

    .site-header__menu-toggle-bar {
        display: block;
    }

    .site-header__menu-toggle::before {
        top: 0;
    }

    .site-header__menu-toggle-bar {
        top: 3.067vw;
    }

    .site-header__menu-toggle::after {
        top: 6.133vw;
    }

    .site-header__menu-toggle.is-menu-open::before {
        top: 3.067vw;
        transform: rotate(34.8deg);
    }

    .site-header__menu-toggle.is-menu-open .site-header__menu-toggle-bar {
        opacity: 0;
    }

    .site-header__menu-toggle.is-menu-open::after {
        top: 3.067vw;
        transform: rotate(-34.8deg);
    }

    .site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
        background: #fff;
        padding: 0 !important;
        margin: 0 !important;
    }

    .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        display: block !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: var(--site-header-height, 51px) 6.133vw 0 !important;
    }

    .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: block !important;
        width: 100% !important;
    }

    .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        border-top: 1px solid #000;
    }

    .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
        border-top: none;
    }

    .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 16.267vw;
        padding: 0 !important;
        box-sizing: border-box;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 4.8vw;
        font-weight: 500;
        letter-spacing: 0.24vw;
        color: #212121;
        text-decoration: none;
    }

    .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
        font-size: 4.8vw;
    }

    .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a::after {
        content: none;
    }

    .site-header__nav .wp-block-navigation-item__content:focus {
        outline: none;
    }

    .site-header__nav .wp-block-navigation-item__content:focus-visible {
        outline: 2px solid #212121;
        outline-offset: -2px;
    }

    .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child .wp-block-navigation-item__content:focus-visible {
        outline: none;
    }

    .site-header__notice-row {
        height: 10.133vw;
        padding: 0 4.267vw 0 0;
        flex-wrap: nowrap;
    }

    .site-header__notice-badge-break {
        display: inline;
    }

    .site-header__notice-badge {
        width: 18.667vw;
        height: 10.133vw;
        font-size: 3.2vw;
        line-height: 4vw;
    }

    .wp-block-query.site-header__ticker {
        margin-left: 2.133vw;
    }

    .site-header__ticker .wp-block-post-title,
    .site-header__ticker-empty {
        font-size: 3.2vw;
    }

}