/* ==========================================================================
   Site Topbar
   ========================================================================== */

.site_topbar {
    width: 100%;
    background-color: #047cc2;
    position: sticky;
    top: 0;
    z-index: 101;

    & .site_topbar_inner {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        max-width: 1400px;
        height: 34px;
        margin: 0 auto;
        padding: 0 40px;

        @media screen and (max-width: 1024px) {
            padding: 0 20px;
        }

        @media screen and (max-width: 768px) {
            padding: 0 16px;
        }
    }

    & .site_topbar_link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.78rem;
        font-weight: 500;
        text-decoration: none;
        letter-spacing: 0.02em;
        transition: color 0.2s ease;

        &:hover {
            color: #ffffff;

            & .site_topbar_arrow {
                transform: translateX(3px);
            }
        }
    }

    & .site_topbar_arrow {
        display: inline-block;
        transition: transform 0.2s ease;
        font-style: normal;
    }
}

/* ==========================================================================
   Site Header
   ========================================================================== */

.site_header {
    position: sticky;
    top: 34px;
    z-index: 100;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;

    & .site_header_inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1400px;
        height: 72px;
        margin: 0 auto;
        padding: 0 40px;
        z-index: 2;

        @media screen and (max-width: 1024px) {
            padding: 0 20px;
        }

        @media screen and (max-width: 768px) {
            height: 60px;
            padding: 0 16px;
        }
    }

    & .site_header_left {
        display: flex;
        align-items: center;
        gap: 48px;
    }

    & .site_header_logo {
        display: inline-flex;
        align-items: center;

        & img {
            display: block;
            height: 32px;
            width: auto;

            @media screen and (max-width: 768px) {
                height: 26px;
            }
        }
    }

    /* PC ナビ */
    & .site_header_nav {
        @media screen and (max-width: 1024px) {
            display: none;
        }

        & ul {
            display: flex;
            align-items: center;
            gap: 28px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        & a {
            display: inline-block;
            padding: 8px 0;
            color: #333333;
            font-size: 0.9rem;
            font-weight: 500;
            text-decoration: none;
            transition: color 0.2s ease;

            &:hover {
                color: #0486b1;
            }
        }
    }

    /* PC アクション */
    & .site_header_actions {
        display: flex;
        align-items: center;
        gap: 12px;

        @media screen and (max-width: 1024px) {
            display: none;
        }
    }

    /* ボタン共通 */
    & .site_header_btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        padding: 0 20px;
        border-radius: 24px;
        font-size: 0.85rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
        transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;

        &:hover {
            opacity: 0.85;
        }

        &.site_header_btn_outline {
            color: #0486b1;
            background-color: #ffffff;
            border: 1px solid #0486b1;
        }

        &.site_header_btn_primary {
            color: #ffffff;
            background-color: #05ace4;
            border: 1px solid #05ace4;
        }
    }

    /* ハンバーガーボタン */
    & .site_header_menu_btn {
        display: none;
        position: relative;
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 30;

        @media screen and (max-width: 1024px) {
            display: block;
        }

        & span {
            position: absolute;
            left: 50%;
            display: block;
            width: 24px;
            height: 2px;
            margin-left: -12px;
            background-color: #333333;
            border-radius: 2px;
            transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
        }

        & span:nth-child(1) { top: 12px; }
        & span:nth-child(2) { top: 19px; }
        & span:nth-child(3) { top: 26px; }
    }

    /* ドロワー */
    & .site_header_drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: min(320px, 86vw);
        height: 100svh;
        padding: 88px 24px 32px;
        background-color: #ffffff;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
        transform: translateX(100%);
        transition: transform 0.3s ease, visibility 0.3s ease;
        overflow-y: auto;
        z-index: 20;
        visibility: hidden;

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

        & .site_header_drawer_nav {
            & ul {
                margin: 0 0 28px;
                padding: 0;
                list-style: none;
            }

            & li {
                border-bottom: 1px solid #e9ecef;
            }

            & a {
                display: block;
                padding: 16px 4px;
                color: #333333;
                font-size: 1rem;
                font-weight: 500;
                text-decoration: none;

                &:hover {
                    color: #0486b1;
                }
            }
        }

        & .site_header_drawer_actions {
            display: flex;
            flex-direction: column;
            gap: 12px;

            & .site_header_btn {
                width: 100%;
                height: 48px;
                font-size: 0.9rem;
            }
        }
    }

    /* オーバーレイ */
    & .site_header_drawer_overlay {
        display: none;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 10;
        visibility: hidden;

        @media screen and (max-width: 1024px) {
            display: block;
        }
    }

    /* オープン状態 */
    &.is_open {
        & .site_header_drawer {
            transform: translateX(0);
            visibility: visible;
        }

        & .site_header_drawer_overlay {
            opacity: 1;
            visibility: visible;
        }

        & .site_header_menu_btn {
            & span:nth-child(1) {
                top: 19px;
                transform: rotate(45deg);
            }

            & span:nth-child(2) {
                opacity: 0;
            }

            & span:nth-child(3) {
                top: 19px;
                transform: rotate(-45deg);
            }
        }
    }
}