@charset "UTF-8";
/* 介護ページ共通のヘッダー・フッター */
.site-header {
    height: 5.1vw;
    min-height: 68px;
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    box-shadow: 0 4px 5px #0005;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 19.5vw;
}

.brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 23vw;
    height: 17.4vw;
    padding: 2.2vw 5.2vw 0 2.7vw;
    background: #fff;
    border-right: 7px solid #ffd1b1;
    border-bottom-right-radius: 100%;
    box-shadow: 3px 4px 5px #0003;
    color: var(--gray);
}

.brand .care-brand-logo {
    display: flex;
    align-items: center;
    gap: .2vw;
}

.brand .care-brand-logo img {
    width: 5.5vw;
    height: auto;
    flex-shrink: 0;
}

.site-header .brand .care-brand-logo img.care-brand-image {
    width: 85%;
    height: auto;
}

.brand .care-brand-name {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    font-weight: 500;
}

.brand .care-brand-sub {
    font-size: 1.1vw;
    letter-spacing: .12em;
    line-height: 1.5;
}

.brand .care-brand-title {
    font-size: 2.9vw;
    letter-spacing: .04em;
    line-height: 1.1;
}

.brand .care-brand-catch {
    display: block;
    font-size: 1.05vw;
    line-height: 1.5;
    margin-top: 1vw;
}

.desktop-nav {
    display: flex;
    align-items: flex-end;
    gap: 1.5vw;
    font-size: 1.05vw;
    line-height: 1.45;
    color: var(--gray);
}

.desktop-nav div {
    display: flex;
    flex-direction: column;
}

.desktop-nav [aria-current] {
    color: #f79871;
}

.top-header-instagram {
    display: block;
    align-self: center;
    flex: 0 0 auto;
    width: clamp(26px, 2vw, 36px);
    margin-left: .5vw;
}

.top-header-instagram img {
    display: block;
    width: 100%;
    height: auto;
}

.recruit {
    position: absolute;
    right: 0;
    top: 0;
    width: 13.1vw;
    height: 11.5vw;
    background: linear-gradient(120deg,#ffb06e,#f3890c);
    border-radius: 0 0 0 100%;
    border-bottom: 7px solid rgb(255 255 255 / 65%);
    border-left: 7px solid rgb(255 255 255 / 65%);
    color: white;
    padding: 2vw 1.1vw 0 3.1vw;
    text-align: right;
    background-clip: padding-box;
}

.recruit:hover {
    color: white;
}

/* 背景は保持し、文字・ロゴだけを往復ともゆっくり透過する。 */
.site-header .brand:hover,
.site-header .recruit:hover {
    opacity: 1;
    filter: none;
}

.site-header .brand:hover {
    color: var(--gray);
}

.site-header .brand > span,
.site-header .recruit > strong,
.site-header .recruit > span,
.top-mobile-brand > span {
    opacity: 1;
    transition: opacity .5s ease;
}

.site-header .brand:hover > span,
.site-header .recruit:hover > strong,
.site-header .recruit:hover > span,
.top-mobile-brand:hover > span {
    opacity: .5;
}

.recruit strong {
    font-size: 1.9vw;
    letter-spacing: .15em;
    white-space: nowrap;
}

.recruit span {
    display: block;
    font-size: 1vw;
    line-height: 1.4;
    margin-top: .4vw;
}

.site-header .recruit .recruit-caption,
.top-page .top-recruit-link .recruit-caption {
    position: relative;
    padding-right: 1.8em;
}

.site-header .recruit .recruit-arrow,
.top-page .top-recruit-link .recruit-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.4em;
    height: 1.4em;
    padding: .15em;
    border-radius: .2em;
    background: #fff;
    color: #f3890c;
    transform: translateY(-50%);
}

.site-header .mobile-nav-close {
    position: absolute;
    top: 4px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: #774617;
    cursor: pointer;
}

.mobile-nav-close svg {
    width: 24px;
    height: 24px;
}

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

.menu-toggle,.mobile-nav {
    display: none;
}

.site-footer {
    position: relative;
    color: var(--gray);
    background: white;
}

.footer-content {
    padding: 5.5vw 6.5vw 3vw;
}

.footer-logo {
    width: 20vw;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3vw;
    margin: 0 auto;
}

.footer-logo img {
    width: 7.2vw;
    height: auto;
    flex-shrink: 0;
}

.footer-logo img.footer-logo-image {
    width: 85%;
    height: auto;
}

.care-footer-name {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    font-weight: 500;
}

.care-footer-sub {
    font-size: 1.45vw;
    letter-spacing: .12em;
    line-height: 1.5;
}

.care-footer-title {
    font-size: 3.8vw;
    letter-spacing: .04em;
    line-height: 1.1;
}

.footer-tagline {
    width: 80%;
    text-align: center;
    font-size: 1.05vw;
    font-weight: 400;
    margin: 1.3vw auto .9vw;
    border-bottom: 1px solid #bdb4ad;
    padding-bottom: 1vw;
}

.footer-brand address {
    font-size: .95vw;
    line-height: 1.2;
    font-weight: 400;
    padding-left: 1.8vw;
}

.care-footer-contact-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 80%;
    margin-inline: auto;
    padding-right: 1.8vw;
}

.care-footer-instagram {
    display: block;
    flex-shrink: 0;
    width: clamp(34px, 3vw, 48px);
    color: #62544b;
}

.care-footer-instagram svg {
    display: block;
    width: 100%;
    height: auto;
}

.badges {
    display: flex;
    gap: 3vw;
    padding: 2.7vw 2vw 0;
}

.badges img {
    width: 7.2vw;
    object-fit: contain;
}

.footer-mobile-badges {
    display: none;
}

.footer-sitemap>div,.footer-bottom>div {
    border-left: 1px solid #b9aea7;
    padding: 0 1.6vw;
}

.footer-sitemap h2 {
    font-size: 1.3vw;
    white-space: nowrap;
    margin: 0 0 1.4vw;
    font-weight: 600;
}

.footer-sitemap a {
    display: block;
    font-size: 1vw;
    font-weight: 400;
    padding-left: 1.3vw;
}

.footer-sitemap a span {
    float: right;
}

.footer-sitemap>div:not(:first-child) a {
    margin-bottom: 1.6vw;
}

.footer-bottom {
    margin-top: 4.5vw;
    font-size: 1.2vw;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .footer-sitemap > div {
        padding-bottom: 0;
    }

    .footer-sitemap > div:not(:first-child) a:last-child {
        margin-bottom: .6vw;
    }

    .footer-bottom > div {
        width: 25%;
        padding-top: .5vw;
        padding-bottom: .5vw;
    }
}

.copyright {
    background: #5c4b40;
    color: #d3c8c0;
    padding: 1.6vw 8.5vw;
    font-size: .85vw;
    font-weight: 400;
}

.back-top {
    position: absolute;
    right: 3.8vw;
    bottom: 6vw;
    display: grid;
    place-items: center;
    border-radius: 50%;
    width: 4.5vw;
    height: 4.5vw;
    background: linear-gradient(135deg,#ffdf67,#f6a999);
    box-shadow: 0 2px 7px #0003;
    color: #fff;
    font-size: 4vw;
    line-height: 1;
    padding-top: 0;
}

.back-top svg {
    display: block;
    width: 55%;
    height: 55%;
}

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

    .brand {
        width: 240px;
        height: 150px;
        padding: 15px 55px 0 20px;
        border-right-width: 5px;
    }

    .brand .care-brand-logo {
        gap: 2px;
    }

    .brand .care-brand-logo img {
        width: 48px;
    }

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

    .brand .care-brand-title {
        font-size: 28px;
    }

    .brand .care-brand-catch {
        font-size: 11px;
        margin-top: 8px;
    }

    .desktop-nav,.recruit {
        display: none;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 6px;
        background: var(--orange);
        padding: 18px;
        margin-right: 16px;
    }

    .menu-toggle span {
        display: block;
        background: white;
        height: 2px;
        width: 25px;
    }

    .mobile-nav {
        position: absolute;
        top: 76px;
        right: 0;
        width: min(100%,380px);
        background: #fff8eb;
        padding: 20px;
        box-shadow: 0 5px 10px #0002;
    }

    .mobile-nav.show,.mobile-nav.collapsing {
        display: block;
    }

    .mobile-nav a {
        display: block;
        padding: 12px;
        border-bottom: 1px solid #eedcc7;
    }

    .footer-logo {
        width: 260px;
    }

    .footer-logo img {
        width: 94px;
    }

    .care-footer-sub {
        font-size: 18px;
    }

    .care-footer-title {
        font-size: 48px;
    }

    .footer-tagline {
        font-size: 13px;
    }

    .footer-brand address {
        font-size: 13px;
        text-align: center;
    }

    .badges {
        justify-content: center;
        padding: 16px;
    }

    .badges img {
        width: 80px;
    }

    .footer-sitemap h2 {
        font-size: 15px;
    }

    .footer-sitemap a {
        font-size: 12px;
    }

    .footer-bottom {
        font-size: 13px;
        margin: 35px 0;
    }

    .copyright {
        font-size: 11px;
        padding: 20px;
    }

    .footer-content {
        padding-top: 35px;
    }

}

@media (max-width:767.98px) {
    .brand {
        width: 210px;
        height: 132px;
    }

    .footer-content {
        padding: 30px 24px;
    }

    .footer-sitemap>div {
        padding: 0 15px;
        margin-bottom: 28px;
    }

    .footer-sitemap h2 {
        font-size: 14px;
    }

    .footer-sitemap a {
        font-size: 12px;
        line-height: 2;
    }

    .footer-bottom {
        font-size: 11px;
        white-space: normal;
        margin: 0 0 40px;
    }

    .back-top {
        width: 44px;
        height: 44px;
        right: 20px;
        bottom: 75px;
        font-size: 38px;
        padding-top: 0;
    }

    .copyright {
        font-size: 10px;
    }

}

.mobile-nav.collapse:not(.show) {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-nav {
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
    }

}

/* お問い合わせ欄の装飾円：全下層ページで揺れ幅・速度を統一 */
.contact .bubble,
.about-contact .about-bubble,
.process-contact .process-bubble {
    --bubble-drift-x: 6vw;
    --bubble-drift-y: -7.5vw;
    pointer-events: none;
    animation: contact-bubble-drift 4s ease-in-out infinite alternate;
}

.contact .bubble-pink,
.about-contact .bubble-pink,
.process-contact .bubble-pink {
    --bubble-drift-x: 9vw;
    --bubble-drift-y: 6vw;
    animation-duration: 5s;
    animation-delay: -6s;
}

.contact .bubble-green,
.about-contact .bubble-green,
.process-contact .bubble-green {
    --bubble-drift-x: -7.2vw;
    --bubble-drift-y: -9vw;
    animation-duration: 6s;
    animation-delay: -10s;
}

@keyframes contact-bubble-drift {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(var(--bubble-drift-x), var(--bubble-drift-y));
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact .bubble,
    .about-contact .about-bubble,
    .process-contact .process-bubble {
        animation: none;
    }
}

/* トップと下層ページで共有するハンバーガーメニュー。 */
body .site-hamburger,
body .site-mobile-menu {
    display: none;
}

@keyframes site-menu-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes site-menu-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@media (max-width: 991.98px) {
    body .site-hamburger {
        position: fixed;
        z-index: 1043;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 22vw;
        height: 20vw;
        padding: 0 0 5vw 5vw;
        border: 0;
        border-left: 3px solid #fff5cf;
        border-bottom: 3px solid #fff5cf;
        border-radius: 0 0 0 100%;
        background: #ff921a;
        cursor: pointer;
    }

    body .site-hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
    }

    body .site-hamburger[aria-expanded="true"] span:first-child {
        transform: translateY(7px) rotate(45deg);
    }

    body .site-hamburger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    body .site-hamburger[aria-expanded="true"] span:last-child {
        transform: translateY(-7px) rotate(-45deg);
    }

    body .site-mobile-menu:not([hidden]) {
        position: fixed;
        z-index: 1042;
        inset: 22px 20px auto auto;
        display: flex;
        flex-direction: column;
        width: min(76vw, 300px);
        max-height: calc(100dvh - 44px);
        padding: 64px 24px 24px;
        border-radius: 8px;
        background: #fff8eb;
        box-shadow: 0 0 0 100vmax #0006;
        overflow-y: auto;
        animation: site-menu-in .3s ease-out both;
    }

    body .site-mobile-menu a {
        flex-shrink: 0;
        padding: 14px 0;
        color: #62544b;
        font-size: 13px;
        text-align: center;
        text-decoration: none;
    }

    body .site-mobile-menu a:hover {
        background: #ffb72e;
        color: #fff;
    }

    body .site-mobile-menu.is-closing {
        animation: site-menu-out .3s ease-out both;
        pointer-events: none;
    }
}

@media (min-width: 768px) {
    body.top-page .site-hamburger,
    body.top-page .site-mobile-menu {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .site-mobile-menu:not([hidden]) {
        animation: none;
    }
}
/* 新デザインの法人情報とサイトマップの配置。 */
footer.site-footer.footer-layout .footer-content {
    max-width: 1600px;
    margin-inline: auto;
    padding: 64px 40px 48px;
}

footer.site-footer.footer-layout .footer-content > .row {
    display: grid;
    grid-template-columns: minmax(220px, 22%) minmax(0, 1fr);
    gap: 40px;
    margin: 0;
}

footer.site-footer.footer-layout .footer-content > .row > div {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

footer.site-footer.footer-layout .footer-brand {
    max-width: 280px;
}

footer.site-footer.footer-layout .footer-logo {
    width: 220px;
    max-width: 100%;
    margin: 0 auto;
}

footer.site-footer.footer-layout .footer-logo-image {
    width: 100%;
    height: auto;
}

footer.site-footer.footer-layout .footer-tagline {
    width: 100%;
    margin: 14px 0 8px;
    padding-bottom: 10px;
    font-size: 12px;
    line-height: 1.6;
}

footer.site-footer.footer-layout .care-footer-contact-row {
    width: 100%;
    padding: 0 16px;
    gap: 16px;
}

footer.site-footer.footer-layout .footer-brand address {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.8;
    text-align: left;
}

footer.site-footer.footer-layout .care-footer-instagram {
    width: 48px;
}

footer.site-footer.footer-layout .footer-brand .badges {
    gap: 16px;
    justify-content: flex-start;
    padding: 0;
    margin-top: 48px;
}

footer.site-footer.footer-layout .badges img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    footer.site-footer.footer-layout .footer-content {
        padding: 40px 24px;
    }

    footer.site-footer.footer-layout .footer-content > .row {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    footer.site-footer.footer-layout .footer-content > .row > .footer-brand {
        width: 100%;
        margin-inline: auto;
    }

    footer.site-footer.footer-layout .footer-brand .badges {
        justify-content: center;
        margin-top: 28px;
    }

    footer.site-footer.footer-layout .footer-mobile-badges {
        justify-content: center;
        gap: 16px;
    }
}

/* モーダルの背面でも上部メニューの表示位置を維持する。 */
body .site-header.site-header-modal-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}