@charset "UTF-8";

.js_header {
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 100;
}

.bl_headerNav {
    align-items: center;
    background-color: var(--recruit-color-base);
    box-shadow: 1px 1px 4px 2px rgba(var(--recruit-color-text1-rgb), 0.3);
    display: flex;
    height: var(--recruit-header-fixed-height);
    justify-content: space-between;
    opacity: 0.975;
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    position: fixed;
    z-index: 999;
    left: var(--recruit-header-fixed-offset--sp);
    right: var(--recruit-header-fixed-offset--sp);
    top: var(--recruit-header-fixed-offset--sp);

    @media screen and (min-width: 768px) {
        border-radius: 999rem;
        padding-left: 1.5rem;
        padding-right: 0.5rem;
        left: var(--recruit-header-fixed-offset--pc);
        right: var(--recruit-header-fixed-offset--pc);
        top: var(--recruit-header-fixed-offset--pc);
    }

    @media screen and (min-width: 768px) {
        height: var(--recruit-header-fixed-height--pc-s);
    }

    @media screen and (min-width: 1024px) {
        height: var(--recruit-header-fixed-height--pc-m);
    }

    @media screen and (min-width: 1280px) {
        height: var(--recruit-header-fixed-height--pc-l);
    }

    @media screen and (min-width: 1600px) {
        height: var(--recruit-header-fixed-height--pc-ll);
    }

    .bl_headerLogo {
        align-items: center;
        display: flex;

        img {
            display: block;
            height: var(--recruit-header-logo-height--sp);
            width: auto;

            @media screen and (min-width: 768px) {
                height: var(--recruit-header-logo-height--pc);
            }
        }

        a:hover {
            opacity: 0.5;
            transition: 0.3s;
        }

        /* リクルートサイトテキスト */
        .bl_headerRecruitSiteText {
            color: var(--recruit-color-accent005);
            font-size: 2.0rem;
            font-weight: var(--font-weight-bold);
            line-height: 1.0;
            margin-left: 0.75rem;
            text-decoration: none;
            letter-spacing: 0.0001em;

            @media screen and (min-width: 768px) {
                font-size: clamp(1.6rem, 2.0vw, 1.8rem);
            }

            a:hover {
                opacity: 0.5;
                transition: 0.3s;
            }
        }
    }
}