@charset "UTF-8";

/* 拠点個別ページ。共通の見出し・ボタン・連絡先は page-hcss.css を利用。 */
.bl-care-detail {
    color: #333;
    font-size: 16px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    & * { box-sizing: border-box; }
}

.bl-care-breadcrumb {
    width: 88%;
    max-width: 1120px;
    margin: 24px auto;
    > ol {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 13px;
    }
    > ol > li + li::before { content: "/"; margin-right: 16px; color: #999; }
    a { color: #555; text-decoration: underline; }
}

.sec-care-office-hero {
    padding: 48px 0 64px;
    background: rgba(237, 129, 158, .08);
    > .st-inner {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        align-items: center;
        gap: 48px;
        width: 88%;
        max-width: 1120px;
        margin: auto;
    }
    .st-label { margin: 0 0 12px; color: #ed819e; font-size: 20px; }
    h1 { margin: 0 0 24px; color: #ed819e; font-size: 44px; font-weight: 600; line-height: 1.4; }
    .st-lead { margin: 0 0 28px; font-size: 16px; }
    .st-img { display: block; width: 100%; height: auto; border-radius: 16px; }
    .el-care-button { max-width: 320px; }
    @media (max-width: 768px) {
        padding: 32px 0 40px;
        > .st-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
        h1 { font-size: 32px; }
        .st-label { font-size: 16px; }
    }
}

.bl-care-office-nav {
    width: 88%;
    max-width: 1024px;
    margin: 36px auto 0;
    > ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
    a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 12px 8px;
        border-bottom: 2px solid #ed819e;
        color: #333;
        text-align: center;
        font-size: 16px;
        &:hover { color: #ed819e; }
    }
    @media (max-width: 768px) {
        > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
}

.sec-care-office-detail {
    padding: 88px 6%;
    scroll-margin-top: 160px;
    > .el-care-heading { margin-bottom: 56px; }
    > .bl-care-office-overview, > .bl-care-office-note, > .bl-care-office-access, > .bl-care-documents {
        max-width: 1024px;
        margin-inline: auto;
    }
    &.is-tinted { background: rgba(237, 129, 158, .06); }
    @media (max-width: 768px) {
        padding-block: 60px;
        scroll-margin-top: 60px;
        > .el-care-heading { margin-bottom: 40px; }
    }
}

.bl-care-office-overview {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
    align-items: start;
    > * { min-width: 0; }
    @media (max-width: 1000px) { grid-template-columns: minmax(0, 1fr); }
}

.bl-care-office-facts {
    margin: 0;
    > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(237, 129, 158, .25); }
    dt { font-weight: 500; }
    dd { margin: 0; }
    @media (max-width: 768px) {
        > div { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
    }
}

.bl-care-office-inquiry {
    padding: 28px;
    border-radius: 12px;
    background: #fff;
    filter: drop-shadow(0 0 5px rgba(237, 129, 158, .35));
    scroll-margin-top: 160px;
    > .st-ttl { margin: 0 0 16px; color: #ed819e; font-size: 22px; line-height: 1.5; }
    > p { margin: 0; font-size: 16px; }
    > .bl-care-contact { margin-bottom: 0; }
    @media (max-width: 768px) { padding: 24px 16px; scroll-margin-top: 60px; }
}

.bl-care-office-note {
    padding: 32px;
    border-radius: 12px;
    background: #fff;
    > p { margin: 0; }
}

.bl-care-office-access {
    > p { margin: 0 0 12px; }
    > .st-map {
        display: grid;
        place-items: center;
        min-height: 320px;
        margin-top: 24px;
        border: 1px dashed #bbb;
        border-radius: 12px;
        background: #f6f6f6;
        color: #666;
        > p { margin: 0; }
    }
    @media (max-width: 768px) { > .st-map { min-height: 220px; } }
}

.bl-care-office-back {
    padding: 48px 6% 72px;
    > .el-care-button { max-width: 360px; margin: auto; }
}