/*
 * Shared motion layer for Narahara Ladies Clinic sub pages.
 * The page-specific palette stays in each HTML file; this layer only reuses it.
 */

:root {
    --motion-main: var(--main-color, #3e6e52);
    --motion-accent: var(--accent-color, #d97757);
    --motion-page: var(--page-bg, #fcfdfc);
    --motion-soft: var(--section-bg, #f0f6f3);
    --motion-card: var(--card-bg, #fff);
    --motion-ease: cubic-bezier(.2, .82, .26, 1);
    --cute-sky: #dff4fb;
    --cute-peach: #ffe7dc;
    --cute-lemon: #fff3bd;
}

body.subpage-time-morning {
    --cute-sky: #dff5fb;
    --cute-peach: #ffe8d8;
    --cute-lemon: #fff1ae;
}

body.subpage-time-noon {
    --cute-sky: #d8f2fb;
    --cute-peach: #ffe9e1;
    --cute-lemon: #fff5c9;
}

body.subpage-time-evening {
    --cute-sky: #e7eefb;
    --cute-peach: #ffdfd2;
    --cute-lemon: #ffe9bb;
}

body.subpage-time-night {
    --cute-sky: #e3eff5;
    --cute-peach: #f6e5e6;
    --cute-lemon: #f7edcc;
}

html {
    scroll-padding-top: 116px;
    overflow-x: hidden;
}

body {
    position: relative;
    overflow-x: hidden;
}

.subpage-scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: 3px;
    pointer-events: none;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--motion-main), var(--motion-accent));
    box-shadow: 0 0 14px color-mix(in srgb, var(--motion-main) 32%, transparent);
    will-change: transform;
}

.site-header {
    transition: box-shadow .35s ease, background-color .35s ease, border-color .35s ease;
}

body.is-page-scrolled .site-header {
    box-shadow: 0 12px 32px color-mix(in srgb, var(--motion-main) 12%, transparent);
}

.page-hero {
    --spot-x: 78%;
    --spot-y: 20%;
    position: relative;
    isolation: isolate;
    overflow: clip;
    background-image:
        radial-gradient(circle at var(--spot-x) var(--spot-y), color-mix(in srgb, var(--motion-accent) 16%, transparent) 0, transparent 32%),
        radial-gradient(circle at 10% 88%, color-mix(in srgb, var(--motion-main) 13%, transparent) 0, transparent 31%),
        linear-gradient(135deg, color-mix(in srgb, var(--motion-soft) 92%, #fff), color-mix(in srgb, var(--motion-card) 94%, var(--motion-page)));
}

.page-hero::before,
.page-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.page-hero::before {
    top: -130px;
    right: -90px;
    width: 330px;
    height: 330px;
    background: color-mix(in srgb, var(--motion-main) 10%, transparent);
    animation: subpage-orbit-a 13s ease-in-out infinite alternate;
}

.page-hero::after {
    left: 6%;
    bottom: -120px;
    width: 240px;
    height: 240px;
    background: color-mix(in srgb, var(--motion-accent) 10%, transparent);
    animation: subpage-orbit-b 16s ease-in-out -4s infinite alternate;
}

.page-hero > * {
    position: relative;
    z-index: 1;
}

.subpage-charm-layer {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    overflow: hidden;
    pointer-events: none;
}

.subpage-charm {
    --charm-color: var(--cute-sky);
    position: absolute;
    left: var(--charm-x);
    top: var(--charm-y);
    width: var(--charm-size);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 55% 45% 58% 42% / 48% 58% 42% 52%;
    background: color-mix(in srgb, var(--charm-color) 72%, transparent);
    box-shadow:
        inset 7px 8px 14px rgba(255, 255, 255, .45),
        0 10px 25px color-mix(in srgb, var(--motion-main) 8%, transparent);
    opacity: .76;
    animation: subpage-charm-drift var(--charm-duration) ease-in-out var(--charm-delay) infinite alternate;
}

.subpage-charm:nth-child(3n + 2) {
    --charm-color: var(--cute-peach);
    border-radius: 50%;
}

.subpage-charm:nth-child(3n) {
    --charm-color: var(--cute-lemon);
    border-radius: 30% 70% 62% 38% / 56% 42% 58% 44%;
}

.subpage-charm:nth-child(4n)::after {
    content: "";
    position: absolute;
    left: 26%;
    top: 20%;
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 0 10px rgba(255, 255, 255, .72);
}

.page-title {
    text-wrap: balance;
}

.page-title::after {
    content: "";
    display: block;
    width: min(112px, 24vw);
    height: 3px;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--motion-main), color-mix(in srgb, var(--motion-accent) 68%, #fff));
    transform-origin: left center;
    animation: subpage-line-grow 1.1s var(--motion-ease) .35s both;
}

.hero-badge,
.hero-tag {
    animation: subpage-badge-float 5.5s ease-in-out 1.2s infinite;
}

.hero-photo-wrap {
    position: relative;
    isolation: isolate;
    box-shadow:
        0 22px 52px color-mix(in srgb, var(--motion-main) 14%, transparent),
        0 0 0 1px color-mix(in srgb, var(--motion-main) 10%, transparent);
    border-radius: 34px 34px 78px 34px !important;
}

.hero-photo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(118deg, transparent 24%, rgba(255, 255, 255, .3) 45%, transparent 62%);
    transform: translateX(-135%);
    animation: subpage-photo-light 8.5s ease-in-out 1.5s infinite;
}

.hero-photo-wrap img {
    animation: subpage-photo-breathe 9s ease-in-out infinite alternate;
    transform-origin: 50% 52%;
}

.section-block {
    position: relative;
    isolation: isolate;
}

.section-block.is-tinted {
    background-image:
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--motion-accent) 8%, transparent), transparent 26%),
        radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--motion-main) 7%, transparent), transparent 28%);
}

.section-en {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 13px;
    border: 1px solid color-mix(in srgb, var(--motion-main) 12%, transparent);
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cute-sky) 72%, #fff), color-mix(in srgb, var(--cute-peach) 52%, #fff));
    letter-spacing: .12em;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--motion-main) 6%, transparent);
    transform: rotate(-.7deg);
}

.section-h2 {
    text-wrap: balance;
}

.section-head::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin: 15px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--motion-main), var(--motion-accent));
    opacity: .72;
    transform: scaleX(.25);
    transition: transform .9s var(--motion-ease);
}

.section-block.is-visible .section-head::after {
    transform: scaleX(1);
}

.card,
.care-card,
.class-card,
.meal-card,
.checkup-card,
.facility-card,
.step-card,
.policy-card,
.feature-card,
.merit-card,
.access-card,
.gallery-item,
.timeline-item,
.quick-nav-item,
.reserve-box,
.message-card,
.staff-card {
    --card-tilt: -.45deg;
    transition:
        transform .38s var(--motion-ease),
        box-shadow .38s ease,
        border-color .38s ease,
        background-color .38s ease;
    border-top-width: 4px !important;
    border-top-color: color-mix(in srgb, var(--motion-main) 42%, var(--cute-sky)) !important;
    border-radius: 28px 28px 28px 12px !important;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--motion-main) 8%, transparent);
}

:where(
    .card,
    .care-card,
    .class-card,
    .meal-card,
    .checkup-card,
    .facility-card,
    .step-card,
    .policy-card,
    .feature-card,
    .merit-card,
    .access-card,
    .gallery-item,
    .quick-nav-item,
    .reserve-box,
    .message-card,
    .staff-card
):nth-child(3n + 2) {
    --card-tilt: .45deg;
    border-top-color: color-mix(in srgb, var(--motion-accent) 38%, var(--cute-peach)) !important;
    border-radius: 28px 12px 28px 28px !important;
}

:where(
    .card,
    .care-card,
    .class-card,
    .meal-card,
    .checkup-card,
    .facility-card,
    .step-card,
    .policy-card,
    .feature-card,
    .merit-card,
    .access-card,
    .gallery-item,
    .quick-nav-item,
    .reserve-box,
    .message-card,
    .staff-card
):nth-child(3n) {
    --card-tilt: -.2deg;
    border-top-color: color-mix(in srgb, #e5c85e 42%, var(--cute-lemon)) !important;
    border-radius: 18px 30px 20px 30px !important;
}

@media (hover: hover) and (pointer: fine) {
    .card:hover,
    .care-card:hover,
    .class-card:hover,
    .meal-card:hover,
    .checkup-card:hover,
    .facility-card:hover,
    .step-card:hover,
    .policy-card:hover,
    .feature-card:hover,
    .merit-card:hover,
    .access-card:hover,
    .gallery-item:hover,
    .quick-nav-item:hover {
        transform: translateY(-7px) rotate(var(--card-tilt));
        border-color: color-mix(in srgb, var(--motion-main) 28%, transparent);
        box-shadow: 0 22px 45px color-mix(in srgb, var(--motion-main) 13%, transparent);
    }

    .card:hover img,
    .care-card:hover img,
    .class-card:hover img,
    .meal-card:hover img,
    .facility-card:hover img,
    .gallery-item:hover img {
        transform: scale(1.045);
    }
}

.quick-nav-num,
.step-num,
.policy-num,
.merit-num {
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--cute-sky) 52%, transparent),
        0 9px 20px color-mix(in srgb, var(--motion-main) 10%, transparent);
    transition: transform .35s var(--motion-ease), box-shadow .35s ease;
}

@media (hover: hover) and (pointer: fine) {
    :where(.quick-nav-item, .step-card, .policy-card, .merit-card):hover :where(.quick-nav-num, .step-num, .policy-num, .merit-num) {
        transform: rotate(7deg) scale(1.08);
        box-shadow:
            0 0 0 7px color-mix(in srgb, var(--cute-peach) 56%, transparent),
            0 12px 24px color-mix(in srgb, var(--motion-main) 13%, transparent);
    }
}

.motion-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .28s var(--motion-ease), box-shadow .28s ease, filter .28s ease !important;
}

.motion-button:hover {
    transform: translateY(-3px) scale(1.015);
    filter: saturate(1.06) brightness(1.02);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--motion-main) 17%, transparent);
}

.subpage-ripple {
    position: absolute;
    z-index: -1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .54);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: subpage-ripple-pop .72s ease-out forwards;
}

.card img,
.care-card img,
.class-card img,
.meal-card img,
.facility-card img,
.gallery-item img {
    transition: transform .8s var(--motion-ease), filter .5s ease;
}

.subpage-motion-ready .motion-reveal {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 34px, 0);
    transition:
        opacity .85s ease,
        filter .9s ease,
        transform .9s var(--motion-ease);
    transition-delay: calc(var(--motion-order, 0) * 70ms);
    will-change: opacity, filter, transform;
}

.subpage-motion-ready .motion-reveal.motion-from-left {
    transform: translate3d(-36px, 16px, 0);
}

.subpage-motion-ready .motion-reveal.motion-from-right {
    transform: translate3d(36px, 16px, 0);
}

.subpage-motion-ready .motion-reveal.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.subpage-motion-ready .page-hero .hero-badge,
.subpage-motion-ready .page-hero .hero-tag,
.subpage-motion-ready .page-hero .page-title,
.subpage-motion-ready .page-hero .page-lead {
    opacity: 0;
    transform: translateY(22px);
    animation: subpage-hero-copy .9s var(--motion-ease) forwards;
}

.subpage-motion-ready .page-hero .page-title {
    animation-delay: .08s;
}

.subpage-motion-ready .page-hero .page-lead {
    animation-delay: .2s;
}

.subpage-motion-ready .page-hero .hero-tag {
    animation-delay: .32s;
}

.subpage-motion-ready .page-hero .hero-photo-wrap {
    animation: subpage-hero-photo-in 1.05s var(--motion-ease) .12s both;
}

@keyframes subpage-hero-copy {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subpage-hero-photo-in {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0 round 28px);
        transform: translateX(34px) scale(.98);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 28px);
        transform: translateX(0) scale(1);
    }
}

@keyframes subpage-line-grow {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

@keyframes subpage-photo-breathe {
    from { transform: scale(1); }
    to { transform: scale(1.035); }
}

@keyframes subpage-photo-light {
    0%, 62%, 100% { transform: translateX(-135%); opacity: 0; }
    70% { opacity: .8; }
    82% { transform: translateX(135%); opacity: 0; }
}

@keyframes subpage-badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes subpage-orbit-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-38px, 24px, 0) scale(1.08); }
}

@keyframes subpage-orbit-b {
    from { transform: translate3d(0, 0, 0) scale(.96); }
    to { transform: translate3d(46px, -24px, 0) scale(1.08); }
}

@keyframes subpage-charm-drift {
    from {
        transform: translate3d(-5px, 5px, 0) rotate(-8deg) scale(.94);
    }
    to {
        transform: translate3d(15px, -18px, 0) rotate(14deg) scale(1.08);
    }
}

@keyframes subpage-ripple-pop {
    0% { opacity: .8; transform: translate(-50%, -50%) scale(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 82px;
    }

    .subpage-scroll-progress {
        height: 2px;
    }

    .page-hero::before {
        width: 220px;
        height: 220px;
    }

    .page-hero::after {
        width: 170px;
        height: 170px;
    }

    .subpage-charm:nth-child(n + 6) {
        display: none;
    }

    .hero-photo-wrap {
        border-radius: 26px 26px 54px 26px !important;
    }

    .subpage-motion-ready .motion-reveal,
    .subpage-motion-ready .motion-reveal.motion-from-left,
    .subpage-motion-ready .motion-reveal.motion-from-right {
        transform: translate3d(0, 22px, 0);
    }

    .subpage-motion-ready .motion-reveal.is-visible {
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .subpage-motion-ready .motion-reveal {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

/* =========================================================
   Index-aligned visual system
   Typography, palette, sections and cards follow index.html.
   ========================================================= */

:root {
    --page-bg: #f7fbfa;
    --section-bg: #eaf7f1;
    --card-bg: #fff;
    --main-color: #1c9c8d;
    --main-dark: #087b72;
    --accent-color: #7dccd2;
    --text-main: #385452;
    --text-muted: #667d7a;
    --border-color: rgba(190, 221, 216, .62);
    --shadow-subtle: 0 14px 34px rgba(52, 115, 110, .08);
    --shadow-card: 0 18px 42px rgba(28, 156, 141, .12);
    --radius-lg: 30px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --font-gothic: "Hiragino Maru Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
    --font-mincho: "Hiragino Mincho ProN", "Yu Mincho", serif;
    --motion-main: #1c9c8d;
    --motion-accent: #7dccd2;
    --motion-page: #f7fbfa;
    --motion-soft: #eaf7f1;
    --motion-card: #fff;
}

body {
    color: var(--text-main);
    background:
        linear-gradient(180deg,
            #e7f8fc 0%,
            #fff0b9 34%,
            #ffe1c8 68%,
            #6f99a5 100%);
    background-attachment: fixed;
    font-family: var(--font-gothic);
    font-size: 16px;
    line-height: 1.85;
    letter-spacing: 0;
}

button,
input,
select,
textarea {
    font: inherit;
}

.top-note {
    color: #fff;
    background: var(--main-color);
    font-family: var(--font-gothic);
}

.top-note-inner,
.header-inner {
    width: min(1180px, calc(100% - 48px));
    max-width: none;
}

.site-header {
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px);
}

.header-inner {
    min-height: 88px;
    padding-block: 0;
    gap: 28px;
}

.logo img {
    width: 257px;
    height: auto;
}

.nav {
    gap: 8px;
    color: #456865;
    font-family: var(--font-gothic);
    font-size: 12px;
}

.nav .nav-item {
    padding: 9px 10px;
    border-radius: 14px;
}

.nav .nav-item:hover,
.nav .nav-item:focus-visible,
.nav-group:hover .nav-item,
.nav-group:focus-within .nav-item {
    color: var(--main-dark);
    background: rgba(234, 247, 241, .92);
}

.nav-ja {
    font-size: 12px;
    font-weight: 800;
}

.nav-en {
    color: var(--main-color);
    font-size: 10px;
    font-weight: 700;
}

.nav-panel,
.nav-panel::before {
    border-color: rgba(190, 221, 216, .78);
    background: rgba(255, 255, 255, .98);
}

.nav-panel {
    border-radius: 18px;
    box-shadow: 0 22px 48px rgba(28, 156, 141, .18);
}

.nav-panel strong,
.nav-panel a:hover {
    color: #1f665f;
}

.nav-panel p {
    color: var(--text-muted);
}

.nav-panel a {
    border-top-color: rgba(190, 221, 216, .58);
    color: #365f5b;
}

.tel-button,
.btn-primary,
.btn-tel,
.cta-button,
.reserve-button {
    color: #fff;
    border-color: var(--main-color);
    border-radius: 999px;
    background: var(--main-color);
    box-shadow: 0 10px 22px rgba(28, 156, 141, .18);
}

.menu-toggle {
    color: var(--main-dark);
    border-color: var(--border-color);
    background: #fff;
}

.breadcrumb {
    color: var(--text-muted);
    font-size: 13px;
}

.breadcrumb a {
    color: var(--main-dark);
}

.page-hero {
    margin-top: 20px;
    margin-bottom: 52px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 36px;
    background-image:
        radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(125, 204, 210, .2), transparent 31%),
        radial-gradient(circle at 12% 88%, rgba(255, 240, 184, .34), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 246, 234, .72));
    box-shadow: 0 18px 42px rgba(28, 156, 141, .1);
}

.page-hero::before {
    background: rgba(125, 204, 210, .14);
}

.page-hero::after {
    background: rgba(255, 240, 184, .22);
}

.subpage-charm {
    --charm-color: rgba(28, 156, 141, .2);
    border: 0;
    border-radius: 80% 0 80% 0;
    background: var(--charm-color);
    box-shadow: none;
    opacity: .42;
    filter: none;
}

.subpage-charm:nth-child(3n + 2) {
    --charm-color: rgba(125, 204, 210, .24);
    border-radius: 80% 0 80% 0;
}

.subpage-charm:nth-child(3n) {
    --charm-color: rgba(154, 168, 166, .2);
    border-radius: 80% 0 80% 0;
}

.subpage-charm:nth-child(4n)::after {
    display: none;
}

.hero-badge,
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--main-dark);
    background: transparent;
    box-shadow: none;
    font-family: var(--font-gothic);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
}

.hero-badge::before,
.hero-tag::before {
    content: "";
    width: 32px;
    height: 2px;
    border-radius: 999px;
    background: var(--main-color);
}

.page-title {
    color: #1e6660;
    font-family: var(--font-gothic);
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 800;
    line-height: 1.34;
    letter-spacing: .02em;
}

.page-title::after {
    display: none;
}

.page-lead {
    color: var(--text-muted);
    font-family: var(--font-gothic);
    font-size: 16px;
    line-height: 1.85;
}

.hero-photo-wrap {
    overflow: hidden;
    border: 7px solid rgba(255, 255, 255, .78);
    border-radius: 42% 58% 36% 64% / 34% 32% 68% 66% !important;
    background: #fff;
    box-shadow:
        -8px 10px 0 rgba(234, 247, 241, .82),
        8px -8px 0 rgba(233, 247, 251, .82),
        0 18px 42px rgba(28, 156, 141, .12);
}

.main-content {
    background: transparent;
}

.section-block {
    padding: 68px 44px;
    margin-bottom: 38px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .64);
    border-radius: 30px;
    background:
        radial-gradient(circle at 88% 10%, rgba(125, 204, 210, .16), transparent 28%),
        linear-gradient(180deg, rgba(233, 247, 251, .88), rgba(255, 255, 255, .66) 50%, rgba(234, 247, 241, .76));
    box-shadow: 0 16px 40px rgba(52, 115, 110, .08);
}

.section-block.is-tinted {
    background:
        radial-gradient(circle at 10% 90%, rgba(255, 240, 184, .2), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 246, 234, .72));
}

.section-head {
    margin-bottom: 32px;
    padding-bottom: 0;
    border-bottom: 0;
}

.section-head::after {
    display: none;
}

.section-en {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--main-color);
    background: transparent;
    box-shadow: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.6px;
    line-height: 1.4;
    transform: none;
}

.section-h2 {
    margin-top: 4px;
    color: #225f5a;
    font-family: var(--font-mincho);
    font-size: clamp(27px, 3.4vw, 40px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .02em;
}

.section-lead {
    max-width: 780px;
    margin-top: 12px;
    color: var(--text-muted);
    font-family: var(--font-gothic);
    font-size: 14px;
    line-height: 1.85;
}

:where(
    .card,
    .care-card,
    .class-card,
    .meal-card,
    .checkup-card,
    .facility-card,
    .step-card,
    .policy-card,
    .feature-card,
    .merit-card,
    .access-card,
    .gallery-item,
    .timeline-item,
    .quick-nav-item,
    .reserve-box,
    .message-card,
    .staff-card,
    .highlight-banner,
    .feature-box,
    .hours-box,
    .info-box
) {
    --card-tilt: 0deg;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 246, 234, .46)) !important;
    box-shadow: 0 14px 34px rgba(52, 115, 110, .08) !important;
}

:where(
    .card,
    .care-card,
    .class-card,
    .meal-card,
    .checkup-card,
    .facility-card,
    .step-card,
    .policy-card,
    .feature-card,
    .merit-card,
    .access-card,
    .gallery-item,
    .quick-nav-item,
    .reserve-box,
    .message-card,
    .staff-card
):nth-child(3n + 2),
:where(
    .card,
    .care-card,
    .class-card,
    .meal-card,
    .checkup-card,
    .facility-card,
    .step-card,
    .policy-card,
    .feature-card,
    .merit-card,
    .access-card,
    .gallery-item,
    .quick-nav-item,
    .reserve-box,
    .message-card,
    .staff-card
):nth-child(3n) {
    --card-tilt: 0deg;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: 18px !important;
}

.card-title,
.care-card-title,
.class-card-title,
.meal-card-title,
.checkup-title,
.facility-card-title,
.step-title,
.policy-title,
.feature-title,
.merit-title,
.access-card h3,
.timeline-item h3,
.reserve-box h3,
.message-card h3,
.staff-card h3 {
    color: #245f5a;
    font-family: var(--font-gothic);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
}

.card-body,
.care-card-desc,
.class-card-desc,
.meal-card-desc,
.checkup-desc,
.facility-card-desc,
.step-desc,
.policy-desc,
.feature-desc,
.merit-desc,
.timeline-desc,
.message-card p,
.staff-card p,
.staff-card li {
    color: var(--text-muted);
    font-family: var(--font-gothic);
    font-size: 14px;
    line-height: 1.85;
}

.card-photo,
.meal-card-img,
.facility-card-img,
.gallery-item {
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

.quick-nav-num,
.step-num,
.policy-num,
.merit-num,
.mark-circle {
    color: var(--main-dark);
    background: linear-gradient(135deg, rgba(233, 247, 251, .98), rgba(255, 246, 234, .96));
    box-shadow: inset 0 0 0 1px rgba(28, 156, 141, .2), 0 10px 20px rgba(28, 156, 141, .08);
}

.quick-nav-item:hover,
.card:hover,
.care-card:hover,
.class-card:hover,
.meal-card:hover,
.checkup-card:hover,
.facility-card:hover,
.step-card:hover,
.policy-card:hover,
.feature-card:hover,
.merit-card:hover,
.access-card:hover,
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(28, 156, 141, .13) !important;
}

table {
    color: var(--text-main);
    font-family: var(--font-gothic);
}

th,
td {
    border-bottom-color: #dcecea;
}

th {
    color: #1f625c;
    background: #f0fbf9;
}

.site-footer {
    color: rgba(255, 255, 255, .9);
    border-top: 0;
    background:
        radial-gradient(circle at 86% 0%, rgba(129, 204, 212, .28), transparent 28%),
        linear-gradient(135deg, rgba(87, 130, 143, .96), rgba(50, 90, 101, .94));
}

.site-footer h3,
.site-footer h4,
.site-footer a,
.site-footer p,
.site-footer li,
.copyright {
    color: rgba(255, 255, 255, .9);
}

.site-footer a:hover {
    color: #fff;
}

@media (max-width: 980px) {
    .top-note-inner,
    .header-inner {
        width: min(100% - 28px, 1180px);
    }

    .nav {
        border-color: var(--border-color);
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 18px 42px rgba(28, 156, 141, .12);
    }
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }

    .header-inner {
        min-height: 74px;
    }

    .logo img {
        width: 214px;
    }

    .page-hero {
        border-radius: 28px;
    }

    .hero-photo-wrap {
        border-radius: 34% 66% 32% 68% / 34% 30% 70% 66% !important;
    }

    .section-block {
        padding: 48px 24px;
        border-radius: 24px;
    }

    .section-h2 {
        font-size: 28px;
    }
}

@media (max-width: 430px) {
    .top-note-inner,
    .header-inner {
        width: min(100% - 16px, 1180px);
    }

    .header-inner {
        padding: 8px 6px;
        gap: 4px;
    }

    .top-note {
        font-size: 10px;
    }

    .logo {
        flex-shrink: 1;
        min-width: 80px;
    }

    .logo img {
        width: 100%;
        max-width: 130px;
        height: auto;
    }

    .header-mobile-actions {
        gap: 4px;
        flex-shrink: 1;
    }

    .mobile-news-button {
        padding: 4px 8px;
        font-size: 9px;
    }

    .mobile-news-button:not(:has(.new-badge)) {
        padding: 6px 10px;
        font-size: 11px;
    }

    .menu-toggle {
        width: 38px;
        height: 38px;
    }

    .page-title {
        font-size: 30px;
    }

    .section-block {
        padding: 42px 20px;
    }

    .section-h2 {
        font-size: 26px;
    }

    /* Natural line breaking for Japanese on modern mobile browsers */
    h1, h2, h3, p, .lead, .section-title, .page-title, .hero-card h2 {
        word-break: auto-phrase;
    }

    br.pc-br {
        display: none;
    }
}

/* =========================================================
   Flat category themes
   Each page uses one background, one surface and one accent.
   ========================================================= */

body.theme-gynecology {
    --theme-bg: #ffffff;
    --theme-surface: #f4f8f7;
    --theme-accent: #2d8c83;
    --theme-ink: #405e5a;
}

body.theme-obstetrics {
    --theme-bg: #fdf5ef;
    --theme-surface: #fffaf5;
    --theme-accent: #c8693c;
    --theme-ink: #4f3328;
}

body.theme-obstetrics.page-obstetrics[data-page-theme] {
    --theme-accent: #c8693c;
    --theme-ink: #4f3328;
    --text-main: #4a2f25;
    --text-muted: #7d594c;
    --main-color: #c8693c;
    --main-dark: #9e4620;
    --accent-color: #e59169;
}

/* 産科ページの診療時間表：環境依存の「○」グリフ背景を使わずCSSで円を描画 */
body.theme-obstetrics.page-obstetrics .hours-table .mark-circle {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: 2px solid var(--main-color) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    outline: 0 !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.theme-obstetrics.page-obstetrics .hours-table .mark-circle::before,
body.theme-obstetrics.page-obstetrics .hours-table .mark-circle::after {
    display: none !important;
    content: none !important;
}

body.theme-meal {
    --theme-bg: #fcfaf7;
    --theme-surface: #f8f4f0;
    --theme-accent: #c47d5a;
    --theme-ink: #3c2e28;
}

body.theme-first {
    --theme-bg: #fcf7f3;
    --theme-surface: #fff9f5;
    --theme-accent: #d28c60;
    --theme-ink: #543f33;
}

body.theme-clinic {
    --theme-bg: #f4fafc;
    --theme-surface: #f8fcfd;
    --theme-accent: #4f8fa1;
    --theme-ink: #47616a;
}

body.theme-life {
    --theme-bg: #fff2e8;
    --theme-surface: #fff8f4;
    --theme-accent: #cf7c6c;
    --theme-ink: #4a3630;
}

body.theme-family {
    --theme-bg: #faf6f0;
    --theme-surface: #fffaf5;
    --theme-accent: #a77a59;
    --theme-ink: #685548;
}

body.theme-support {
    --theme-bg: #fff8f7;
    --theme-surface: #fff9f7;
    --theme-accent: #bd746a;
    --theme-ink: #6a514e;
}

body.theme-access {
    --theme-bg: #f6faf9;
    --theme-surface: #fafcfc;
    --theme-accent: #668a83;
    --theme-ink: #4d615d;
}

/* Base body backgrounds with gradients */
body.theme-first[data-page-theme] {
    background: linear-gradient(180deg, #fdf6f0 0%, #fffbf8 100%) !important;
}
body.theme-gynecology[data-page-theme] {
    background: linear-gradient(180deg, #f4fafc 0%, #f7fcf9 100%) !important;
}
body.theme-obstetrics[data-page-theme] {
    background: linear-gradient(180deg, #fdf3eb 0%, #fffbf8 100%) !important;
}
body.theme-meal[data-page-theme] {
    background: linear-gradient(180deg, #fcfaf7 0%, #ffffff 100%) !important;
}
body.theme-life[data-page-theme] {
    background: linear-gradient(180deg, #fff2e8 0%, #fffbf8 100%) !important;
}
body.theme-support[data-page-theme] {
    background: linear-gradient(180deg, #fff8f7 0%, #ffffff 100%) !important;
}
body.theme-family[data-page-theme] {
    background: linear-gradient(180deg, #fff2e8 0%, #fffcf8 100%) !important;
}
body.theme-access[data-page-theme] {
    background: linear-gradient(180deg, #f6f9f8 0%, #fafcfc 100%) !important;
}
body.theme-clinic[data-page-theme] {
    background: linear-gradient(180deg, #f3fafc 0%, #fafdfd 100%) !important;
}

body[data-page-theme] {
    --page-bg: var(--theme-bg);
    --section-bg: var(--theme-bg);
    --card-bg: #fff;
    --main-color: var(--theme-accent);
    --main-dark: var(--theme-ink);
    --accent-color: var(--theme-accent);
    --text-main: var(--theme-ink);
    --text-muted: color-mix(in srgb, var(--theme-ink) 78%, #fff);
    --border-color: color-mix(in srgb, var(--theme-accent) 22%, transparent);
    --motion-main: var(--theme-accent);
    --motion-accent: var(--theme-accent);
    --motion-page: var(--theme-bg);
    --motion-soft: var(--theme-surface);
    --motion-card: #fff;
    color: var(--theme-ink);
    background: var(--theme-bg) !important;
    background-image: none !important;
    background-attachment: scroll;
}

body[data-page-theme] .subpage-scroll-progress {
    background: var(--theme-accent);
    box-shadow: none;
}

body[data-page-theme] .top-note {
    color: #fff;
    background: var(--theme-accent);
}

body[data-page-theme] .site-header {
    border-bottom-color: var(--border-color);
    background: rgba(255, 255, 255, .96);
}

body[data-page-theme] .nav-en,
body[data-page-theme] .nav-panel a::after,
body[data-page-theme] .breadcrumb a,
body[data-page-theme] .section-en {
    color: var(--theme-accent);
}

body[data-page-theme] .nav,
body[data-page-theme] .nav-ja,
body[data-page-theme] .nav-panel strong,
body[data-page-theme] .nav-panel a,
body[data-page-theme] .page-title,
body[data-page-theme] .section-h2,
body[data-page-theme] .card-title,
body[data-page-theme] .care-card-title,
body[data-page-theme] .class-card-title,
body[data-page-theme] .meal-card-title,
body[data-page-theme] .checkup-title,
body[data-page-theme] .facility-card-title,
body[data-page-theme] .step-title,
body[data-page-theme] .policy-title,
body[data-page-theme] .feature-title,
body[data-page-theme] .merit-title,
body[data-page-theme] .access-card h3,
body[data-page-theme] .reserve-box h3,
body[data-page-theme] .message-card h3,
body[data-page-theme] .staff-card h3 {
    color: var(--theme-ink);
}

body[data-page-theme] .page-lead,
body[data-page-theme] .section-lead,
body[data-page-theme] .card-body,
body[data-page-theme] .care-card-desc,
body[data-page-theme] .class-card-desc,
body[data-page-theme] .meal-card-desc,
body[data-page-theme] .checkup-desc,
body[data-page-theme] .facility-card-desc,
body[data-page-theme] .step-desc,
body[data-page-theme] .policy-desc,
body[data-page-theme] .feature-desc,
body[data-page-theme] .merit-desc,
body[data-page-theme] .timeline-desc,
body[data-page-theme] .breadcrumb,
body[data-page-theme] .section-block p,
body[data-page-theme] .section-block li,
body[data-page-theme] .section-block td {
    color: var(--text-muted);
}

body[data-page-theme] .page-hero {
    border-color: var(--border-color);
    background: var(--theme-surface) !important;
    background-image: none !important;
    box-shadow: 0 16px 36px color-mix(in srgb, var(--theme-accent) 10%, transparent);
}

body[data-page-theme] .page-hero::before,
body[data-page-theme] .page-hero::after,
body[data-page-theme] .subpage-charm-layer,
body[data-page-theme] .hero-photo-wrap::after {
    display: none;
}

body[data-page-theme] .hero-badge,
body[data-page-theme] .hero-tag {
    color: var(--theme-accent);
}

body[data-page-theme] .hero-badge::before,
body[data-page-theme] .hero-tag::before {
    background: var(--theme-accent);
}

body[data-page-theme] .hero-photo-wrap {
    border-color: #fff;
    background: #fff;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}

body[data-page-theme] .hero-photo-wrap img {
    animation: none !important;
}

body[data-page-theme] .main-content {
    background: transparent !important;
}

body[data-page-theme] .section-block {
    border-color: var(--border-color);
    background: var(--theme-surface) !important;
    background-image: none !important;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--theme-accent) 8%, transparent);
}

body[data-page-theme] .section-block.is-tinted {
    background: var(--theme-bg) !important;
    background-image: none !important;
}

body[data-page-theme] :where(
    .card,
    .care-card,
    .class-card,
    .meal-card,
    .checkup-card,
    .facility-card,
    .step-card,
    .policy-card,
    .feature-card,
    .merit-card,
    .access-card,
    .gallery-item,
    .timeline-item,
    .quick-nav-item,
    .reserve-box,
    .message-card,
    .staff-card,
    .highlight-banner,
    .feature-box,
    .hours-box,
    .info-box
) {
    border-color: var(--border-color) !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--theme-accent) 8%, transparent) !important;
}

body[data-page-theme] .quick-nav-num,
body[data-page-theme] .step-num,
body[data-page-theme] .policy-num,
body[data-page-theme] .merit-num,
body[data-page-theme] .mark-circle,
body[data-page-theme] th,
body[data-page-theme] .support-photo img,
body[data-page-theme] .care-illustration,
body[data-page-theme] .care-mark {
    color: var(--theme-ink);
    border-color: var(--border-color);
    background: var(--theme-surface) !important;
    background-image: none !important;
}

body[data-page-theme] .tel-button,
body[data-page-theme] .btn-primary,
body[data-page-theme] .btn-tel,
body[data-page-theme] .cta-button,
body[data-page-theme] .reserve-button {
    color: #fff;
    border-color: var(--theme-accent);
    background: var(--theme-accent) !important;
    background-image: none !important;
}

body[data-page-theme] .site-footer {
    color: #543f33 !important;
    background: #eddcd0 !important;
    background-image: none !important;
    border-top: 1px solid rgba(210, 140, 96, 0.25) !important;
}

body[data-page-theme] .site-footer h3,
body[data-page-theme] .site-footer h4,
body[data-page-theme] .site-footer a,
body[data-page-theme] .site-footer p,
body[data-page-theme] .site-footer li,
body[data-page-theme] .site-footer .copyright {
    color: #543f33 !important;
}

body[data-page-theme] .site-footer a:hover {
    color: #d28c60 !important;
}

body[data-page-theme] .site-footer .footer-inner {
    border-bottom: 1px solid rgba(210, 140, 96, 0.22) !important;
}

/* お部屋ページ（hospitalization.html）：ピンクの上にブルーの白抜きなしで、そのまま写真 */
body.theme-life[data-page-theme] .section-block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px 0 !important;
}

body.theme-life[data-page-theme] .facility-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.theme-life[data-page-theme] .facility-card-img {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(180, 100, 90, 0.12) !important;
    border: none !important;
}

body.theme-life[data-page-theme] .facility-card-body {
    padding: 16px 4px !important;
}

body.theme-life[data-page-theme] .hero-photo-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: 0 14px 32px rgba(180, 100, 90, 0.14) !important;
}

body[data-page-theme] .subpage-motion-ready .motion-reveal,
body[data-page-theme].subpage-motion-ready .motion-reveal {
    opacity: 0;
    filter: none !important;
    transform: translate3d(0, 26px, 0);
    transition: opacity .72s ease, transform .78s var(--motion-ease);
}

body[data-page-theme].subpage-motion-ready .motion-reveal.motion-from-left,
body[data-page-theme].subpage-motion-ready .motion-reveal.motion-from-right {
    filter: none !important;
    transform: translate3d(0, 26px, 0);
}

body[data-page-theme].subpage-motion-ready .motion-reveal.is-visible,
body[data-page-theme].subpage-motion-ready .motion-reveal.motion-from-left.is-visible,
body[data-page-theme].subpage-motion-ready .motion-reveal.motion-from-right.is-visible {
    opacity: 1;
    filter: none !important;
    transform: translate3d(0, 0, 0);
}

body[data-page-theme].subpage-motion-ready .page-hero .hero-photo-wrap {
    animation: subpage-simple-enter .82s var(--motion-ease) .12s both;
}

@keyframes subpage-simple-enter {
    from {
        opacity: 0;
        clip-path: none;
        transform: translate3d(0, 24px, 0);
    }
    to {
        opacity: 1;
        clip-path: none;
        transform: translate3d(0, 0, 0);
    }
}

/* Shared smartphone screen optimizations */
@media (max-width: 980px) {
    .header-inner {
        padding: 10px 14px !important;
    }

    .logo {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .logo img {
        height: 42px !important;
        width: auto !important;
        display: block !important;
    }

    .header-mobile-actions {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .menu-toggle {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }

    .mobile-news-button {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 4px 12px !important;
        border-radius: 22px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .mobile-news-button:not(:has(.new-badge)) {
        flex-direction: row !important;
        font-size: 12px !important;
        padding: 10px 14px !important;
    }

    .mobile-news-button .new-badge {
        position: static !important;
        transform: none !important;
        color: #e53935 !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        margin-bottom: 1px !important;
        display: block !important;
        animation: newsJump 0.82s ease-in-out infinite;
    }
}

/* Final smartphone hero sizing: keep portrait Safari from stretching the photo. */
@media (min-width: 390px) and (max-width: 980px) {
    body[data-page-theme] .page-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        width: calc(100% - 32px) !important;
        max-width: 760px !important;
        min-height: 0 !important;
        margin: 16px auto 30px !important;
        padding: 28px 22px !important;
        gap: 22px !important;
        overflow: hidden !important;
    }

    body[data-page-theme] .page-hero > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body[data-page-theme] .page-hero .hero-photo-wrap {
        width: 100% !important;
        max-width: 100% !important;
        height: clamp(210px, 42vw, 280px) !important;
        min-height: 0 !important;
        max-height: 280px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        clip-path: none !important;
        transform: none !important;
    }

    body[data-page-theme] .page-hero .hero-photo-wrap img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center 25% !important;
        transform: none !important;
        animation: none !important;
    }

    body[data-page-theme] .main-content {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    body[data-page-theme] .section-block {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 24px 15px !important;
        overflow: hidden !important;
    }

    body[data-page-theme] .section-h2,
    body[data-page-theme] .section-lead {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page-theme] .section-h2 {
        font-size: 22px !important;
        line-height: 1.5 !important;
    }

    body[data-page-theme] .table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body[data-page-theme] .table-wrap .schedule-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border: 0 !important;
        background: transparent !important;
    }

    body[data-page-theme] .schedule-table tbody,
    body[data-page-theme] .schedule-table tr,
    body[data-page-theme] .schedule-table th,
    body[data-page-theme] .schedule-table td {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body[data-page-theme] .schedule-table tr {
        margin-bottom: 12px !important;
        overflow: hidden !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 14px !important;
        background: #fff !important;
    }

    body[data-page-theme] .schedule-table th,
    body[data-page-theme] .schedule-table td {
        padding: 12px 13px !important;
        border-right: 0 !important;
        border-left: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page-theme] .schedule-table td {
        border-top: 1px solid var(--border-color) !important;
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    body[data-page-theme] :where(.card-grid, .care-cards-grid, .feature-grid, .checkup-grid) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-page-theme] :where(
        .card-photo,
        .care-card-photo,
        .checkup-card-photo,
        .feature-box-photo,
        .facility-card-img,
        .class-card-img,
        .meal-card-img
    ) {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    body[data-page-theme] :where(
        .card-photo,
        .care-card-photo,
        .checkup-card-photo,
        .feature-box-photo,
        .facility-card-img,
        .class-card-img,
        .meal-card-img
    ) img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        transform: none !important;
        animation: none !important;
    }
}

@media (max-width: 767px) {
    body[data-page-theme] .page-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        box-sizing: border-box !important;
        width: calc(100% - 20px) !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 10px auto 22px !important;
        padding: 22px 15px !important;
        gap: 16px !important;
        overflow: hidden !important;
        border-radius: 20px !important;
    }

    body[data-page-theme] .page-hero > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body[data-page-theme] .page-title {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
        font-size: 24px !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page-theme] .page-title br {
        display: none !important;
    }

    body[data-page-theme] .page-lead {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 14px !important;
        font-size: 13px !important;
        line-height: 1.8 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page-theme] .page-hero .hero-photo-wrap {
        position: relative !important;
        display: block !important;
        width: 240px !important;
        max-width: 240px !important;
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        justify-self: center !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        border-width: 4px !important;
        border-radius: 18px !important;
        clip-path: none !important;
        transform: none !important;
    }

    body[data-page-theme] .page-hero .hero-photo-wrap img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center 25% !important;
        transform: none !important;
        animation: none !important;
    }
}

@media (max-width: 374px) {
    body[data-page-theme] .page-hero .hero-photo-wrap {
        width: 220px !important;
        max-width: 220px !important;
        height: 138px !important;
        min-height: 138px !important;
        max-height: 138px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        aspect-ratio: auto !important;
        border-radius: 16px !important;
    }

    body[data-page-theme] .page-hero .hero-photo-wrap img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: none !important;
        animation: none !important;
    }
}