.care-hero {
    position: relative;
    min-height: 720px;
    height: 92svh;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden
}

.care-hero__media,
.care-hero__shade {
    position: absolute;
    inset: 0
}

.care-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top
}

.care-hero__shade {
    background: linear-gradient(90deg, rgba(7, 40, 55, .73), rgba(7, 40, 55, .18) 62%, transparent)
}

.care-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: 80px
}

.care-hero__brand {
    font-weight: 600;
    letter-spacing: .14em;
    color: #f2d79c
}

.care-hero h1 {
    margin: 14px 0 18px;
    font-size: clamp(5rem, 7.5vw, 6rem);
    line-height: 1.15
}

.care-hero__inner>p:last-of-type {
    font-size: 2rem;
    margin-bottom: 36px
}

.future {
    background: var(--cream)
}

.future-list {
    max-width: 900px;
    margin-inline: auto;
    display: grid;
    gap: 18px
}

.future-list li {
    position: relative;
    padding: 22px 26px 22px 64px;
    background: #fff;
    font-size: 1.8rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(37, 60, 63, .06)
}

.future-list li::before {
    content: "✓";
    position: absolute;
    left: 24px;
    top: 24px;
    color: var(--green);
    font-size: 2rem
}

.concept__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.concept figure img {
    width: 100%;
    aspect-ratio: 1.35;
    object-fit: cover;
    border-radius: 70px 0 0 0;
    box-shadow: var(--shadow)
}

.credential {
    margin-top: 28px;
    padding: 26px;
    background: var(--mist);
    border-left: 4px solid var(--green)
}

.credential strong {
    color: var(--navy)
}

.credential ul {
    margin-top: 14px;
    display: grid;
    gap: 8px;
    font-size: 1.4rem
}

.problems {
    background: var(--mist)
}

.problem-grid,
.change-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.problem-grid article {
    background: #fff;
    padding: 30px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(20, 54, 70, .07)
}

.problem-grid img {
    height: 170px;
    margin: 0 auto 20px
}

.problem-grid p {
    font-weight: 600
}

.changes {
    position: relative;
    background: #e8f3f3;
    color: var(--navy);
}

.changes .section-heading h2 {
    color: var(--navy);
}

.changes .section-heading__en {
    color: var(--gold);
}

.change-grid article {
    position: relative;
    padding: 40px 28px;
    background: #fff;
    border: 1px solid #d8e8e7;
    box-shadow: 0 12px 32px rgba(20, 54, 70, .08);
}

.change-grid span {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold);
    font-size: 7.4rem;
    display: block;
    text-align: center;
    line-height: 1;
}



.change-grid p {
    margin-top: 14px;
    color: var(--navy);
    font-size: 1.8rem;
    font-weight: 600;
}

.voices {
    background: var(--cream)
}

.voice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px
}

.voice-card {
    position: relative;
    background: #fff;
    padding: 48px 38px 38px;
    border: 1px solid #e4eceb;
    box-shadow: 0 14px 38px rgba(20, 54, 70, .08);
}

.voice-card__person {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin: 0 auto 20px
}

.voice-card__profile {
    text-align: center;
    color: var(--green);
    font-weight: 600
}

.voice-card h3 {
    text-align: center;
    margin: 8px 0 24px;
    font-size: 2.2rem;
    color: var(--navy)
}

.voice-card dl {
    display: grid;
    gap: 10px;
    margin-bottom: 20px
}

.voice-card dl div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    padding: 14px 16px;
    background: #f3f9f8;
    border-left: 3px solid #7fb7ae;
}

.voice-card dt {
    font-weight: 700;
    color: #3b8a7f;
}

.flow-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.flow-list li {
    position: relative;
    padding: 34px 28px;
    background: #fff;
    border: 1px solid var(--line)
}

.flow-list li:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -20px;
    top: 50%;
    z-index: 2;
    color: var(--gold);
    font-size: 2.8rem
}

.flow-list span {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: .12em
}

.flow-list h3 {
    margin: 9px 0;
    font-size: 2rem;
    color: var(--navy)
}

.care-price {
    max-width: 720px;
    margin: 54px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
    text-align: center
}

.care-price>div {
    padding: 24px
}

.care-price__trial {
    position: relative;
    background: linear-gradient(135deg, #e1ad37, #f0c95b);
    color: var(--navy);
    background: #d9553f;
    color: #fff;
}

.care-price strong {
    color: var(--navy);
    display: block;
    margin-top: 5px;
    font-size: 3.6rem
}


.care-price__trial strong {
    color: #fff;
}

.care-price small {
    font-size: 1.4rem
}

@media(max-width:900px) {
    .care-hero__media img {
        object-position: 75% center
    }

    .concept__grid {
        grid-template-columns: 1fr
    }

    .problem-grid,
    .change-grid,
    .flow-list {
        grid-template-columns: 1fr
    }

    .voice-grid {
        grid-template-columns: 1fr;
        gap: 90px
    }

    .flow-list li:not(:last-child)::after {
        content: "↓";
        right: auto;
        left: 50%;
        top: auto;
        bottom: -32px
    }

    .care-price {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .care-hero {
        min-height: 670px;
        align-items: flex-end;
        padding-bottom: 60px
    }

    .care-hero__shade {
        background: linear-gradient(0deg, rgba(7, 40, 55, .88), rgba(7, 40, 55, .3) 65%, transparent)
    }

    .care-hero h1 {
        font-size: 3.2rem
    }

    .care-hero__inner>p:last-of-type {
        font-size: 1.6rem
    }

    .future-list li {
        padding-left: 52px;
        font-size: 1.6rem
    }

    .future-list li::before {
        left: 18px
    }

    .concept figure img {
        border-radius: 48px 0 0
    }

    .problem-grid img {
        height: 140px
    }

    .voice-card {
        padding: 42px 24px 28px
    }

    .voice-card dl div {
        grid-template-columns: 1fr
    }

    .care-price strong {
        font-size: 3rem
    }
}

/* ========================================
   修正指示 2・3
   セクション間の流れを示す下向き矢印
======================================== */

.problems,
.changes {
    position: relative;
}

/* お悩み → 目指す変化 */
.problems::after,
/* 目指す変化 → お客さまの声 */
.changes::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -28px;
    z-index: 5;
    width: 56px;
    height: 56px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(20, 54, 70, .14);
    transform: translateX(-50%);
}

/* 下向きのV字 */
.problems::before,
.changes::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    z-index: 6;
    width: 14px;
    height: 14px;
    border-right: 3px solid var(--gold);
    border-bottom: 3px solid var(--gold);
    transform: translateX(-50%) rotate(45deg);
}