@charset "UTF-8";

/* 文字75％版を基準に、ヘッダーの寸法も約75％にする比較用スタイル。 */
.site-header {
    height: 3.825vw;
    min-height: 51px;
    padding-right: 14.625vw;
}

.site-header .brand {
    width: 17.25vw;
    height: 13.05vw;
    padding: 1.65vw 3.9vw 0 2.025vw;
    border-right-width: 5.25px;
    box-shadow: 2.25px 3px 3.75px #0003;
}

.site-header .brand .care-brand-logo {
    gap: .15vw;
}

.site-header .brand .care-brand-logo img {
    width: 4.125vw;
}

.site-header .brand .care-brand-catch {
    margin-top: .75vw;
}

.site-header .desktop-nav {
    gap: 1.125vw;
}

.site-header .recruit {
    width: 9.825vw;
    height: 8.625vw;
    padding: 1.5vw .825vw 0 2.325vw;
    border-bottom-width: 9px;
    border-left-width: 9px;
}

.site-header .recruit span {
    margin-top: .3vw;
}

@media (max-width: 991.98px) {
    .site-header {
        height: 57px;
        min-height: 57px;
        padding: 0;
    }

    .site-header .brand {
        width: 180px;
        height: 112.5px;
        padding: 11.25px 41.25px 0 15px;
        border-right-width: 3.75px;
    }

    .site-header .brand .care-brand-logo {
        gap: 1.5px;
    }

    .site-header .brand .care-brand-logo img {
        width: 36px;
    }

    .site-header .brand .care-brand-catch {
        margin-top: 6px;
    }

    .site-header .menu-toggle {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 4.5px;
        padding: 12px;
        margin-right: 12px;
    }

    .site-header .menu-toggle span {
        width: 19px;
    }

    .site-header .mobile-nav {
        top: 57px;
    }
}

/* ページ本文の文字設定を継承させず、共通メニュー内で完結させる。 */
.site-header {
    --gray: #62544b;
    font-family: 'BIZ UDPGothic', sans-serif;
    font-size: .7875vw;
    font-weight: 600;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-align: left;
}

.site-header * {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
}

.site-header .brand .care-brand-name {
    font-weight: 500;
}

.site-header .brand .care-brand-sub {
    font-size: .825vw;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.5;
}

.site-header .brand .care-brand-title {
    font-size: 2.175vw;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.1;
}

.site-header .brand .care-brand-catch {
    font-size: .7875vw;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.5;
}

.site-header .desktop-nav {
    font-size: .7875vw;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.45;
}

.site-header .desktop-nav a,
.site-header .mobile-nav a {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-decoration: none;
}

.site-header .recruit strong {
    font-size: 1.425vw;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.45;
}

.site-header .recruit span {
    font-size: .75vw;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.4;
}

@media (max-width: 991.98px) {
    .site-header {
        font-size: 12px;
    }

    .site-header .brand .care-brand-sub {
        font-size: 8.25px;
        letter-spacing: .06em;
    }

    .site-header .brand .care-brand-title {
        font-size: 21px;
    }

    .site-header .brand .care-brand-catch {
        font-size: 8.25px;
    }

    .site-header .mobile-nav {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: normal;
        line-height: 1.5;
    }
}

/* 共通ヘッダーを使うページで、スクロールバー分の幅を統一する。 */
@supports (scrollbar-gutter: stable) {
    html:has(body > .site-header),
    html:has(body.top-page > .top-scroll-header > .site-header) {
        scrollbar-gutter: stable;
    }

    body:has(> .site-header).modal-open,
    body.top-page:has(> .top-scroll-header > .site-header).modal-open {
        /* Bootstrapのインライン補正との二重適用を防ぐ。 */
        padding-right: 0 !important;
    }
}

/* スマホ用ヘッダーはページ固有CSSではなく、ここで一括管理する。 */
@media (max-width: 767.98px) {
    body .site-header {
        height: 0;
        min-height: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }





    body .site-header .menu-toggle {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        display: flex;
        width: 22vw;
        height: 20vw;
        margin: 0;
        padding: 0 0 5vw 7vw;
        gap: 1.2vw;
        border: 0;
        border-bottom: 1vw solid #ffe3c0;
        border-radius: 0 0 0 100%;
        background: linear-gradient(120deg, #ffb06e, #f3890c);
    }

    body .site-header .menu-toggle span {
        width: 6vw;
        height: 1vw;
    }

    body .site-header .mobile-nav {
        top: 0;
        z-index: 3;
        max-height: 100dvh;
        padding: 52px 20px 20px;
        overflow-y: auto;
    }

    body .site-header .brand {
        width: max(34vw, 175px);
        height: max(19vw, 100px);
        border-right-width: 1vw;
        min-width: 0;
        min-height: 0;
        padding: 14px 20px 0 14px;
    }

    body .site-header .brand .care-brand-sub {
        font-size: max(14px, 1.7vw);
    }

    body .site-header .brand .care-brand-title {
        font-size: max(14px, 4.4vw);
    }

    body .site-header .brand .care-brand-catch {
        display: none;
        margin-top: 1vw;
        font-size: max(14px, 1.5vw);
    }

    body .site-header .mobile-nav {
        font-size: 14px;
    }
}


/* トップ・下層ページ共通のスマホ用ロゴ。 */
@media (max-width: 767.98px) {
    body .site-header .brand,
    body .top-mobile-brand {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 34vw;
        height: 24vw;
        min-width: 0;
        min-height: 0;
        padding: 2.5vw 8.5vw 4.3vw 3.5vw;
        border: 0;
        border-right: 4px solid #e6c2a0;
        border-radius: 0 0 100% 0;
        background: #fff;
        box-shadow: 2px 3px 5px #0003;
        isolation: isolate;
        transform: translateZ(0);
    }

    body .site-header .brand .care-brand-logo,
    body .top-mobile-brand .care-brand-logo {
        display: block;
        width: 100%;
        margin: 0;
    }

    body .site-header .brand .care-brand-logo img.care-brand-image,
    body .top-mobile-brand .care-brand-logo img.care-brand-image {
        display: block;
        width: 100%;
        height: auto;
    }

    body .site-header .brand .care-brand-catch {
        display: none;
    }

    body .top-mobile-brand:hover {
        opacity: 1;
    }
}

/* メニューを開くときだけ、短くフェードインする。 */
@keyframes mobile-menu-appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 991.98px) {
    body .site-header .mobile-nav {
        z-index: 10;
    }

    body .site-header .mobile-nav.collapsing {
        height: auto !important;
    }

    .site-header .mobile-nav.is-opening {
        animation: mobile-menu-appear .3s ease-out both;
    }
}

@media (max-width: 767.98px) {
    .top-page .top-navigation.is-open {
        z-index: 1042;
        animation: mobile-menu-appear .3s ease-out both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .mobile-nav.is-opening,
    .top-page .top-navigation.is-open {
        animation: none;
    }
}

@keyframes mobile-menu-disappear {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@media (max-width: 991.98px) {
    .site-header .mobile-nav.is-closing {
        animation: mobile-menu-disappear .3s ease-out both;
        pointer-events: none;
    }
}

@media (max-width: 767.98px) {
    .top-page .top-navigation.is-open.is-closing {
        animation: mobile-menu-disappear .3s ease-out both;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .mobile-nav.is-closing,
    .top-page .top-navigation.is-open.is-closing {
        animation: none;
    }
}

/* 採用案内の補足文とアイコンはトップ・下層で共通化する。 */
.site-header .recruit .recruit-caption,
.top-page .top-recruit-link .recruit-caption {
    margin-top: .2vw;
    font-size: .65vw;
    line-height: 1.4;
    text-align: right;
    padding-right: 2em;
}

.site-header .recruit .recruit-arrow,
.top-page .top-recruit-link .recruit-arrow {
    width: 1.6em;
    height: 1.6em;
}