.area-map__fig {
    margin: 0;
    padding: 30px 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.9), transparent 44%),
        linear-gradient(165deg, #e9f3fa, #f4f9fd 55%, #ddebf5);
    border: 1px solid rgba(120, 160, 195, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 24px 50px -30px rgba(54, 86, 115, 0.45);
}

.area-map__fig svg {
    display: block;
    width: 100%;
    height: auto;
}

.area-map__pref {
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.area-map__pref--main {
    fill: #bfd0dc;
    filter: drop-shadow(0 6px 14px rgba(102, 120, 137, 0.18));
}

.area-map__pref--sub {
    fill: #e7edf0;
}

.area-map__pref-name {
    fill: #8a9aab;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.area-map__pref-name--main {
    fill: #526577;
}

.area-map__pin circle {
    fill: #8fa4b5;
    stroke: #fff;
    stroke-width: 2;
}

.area-map__pin text {
    fill: #1f2e3d;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    paint-order: stroke;
    stroke: rgba(247, 251, 254, 0.9);
    stroke-width: 3;
}

.area-map__pin--sub circle {
    fill: #aebfce;
}

.area-map__pin--sub text {
    fill: #5d6f80;
    font-weight: 500;
}

.area-map__pin--base circle {
    fill: #667889;
    stroke-width: 2.5;
}

.area-map__pin--base text {
    font-size: 14.5px;
    fill: #16283a;
}

.area-map__pulse {
    fill: rgba(102, 120, 137, 0.4) !important;
    stroke: none !important;
    transform-box: fill-box;
    transform-origin: center;
    animation: area-pin-pulse 2.1s cubic-bezier(0.2, 0.55, 0.35, 1) infinite;
}

.area-map__pulse--late {
    animation-delay: 0.7s;
}

@keyframes area-pin-pulse {
    0% { transform: scale(0.6); opacity: 0.9; }
    75%, 100% { transform: scale(2.4); opacity: 0; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

/* ---------- prefecture detail sections ---------- */

.area-pref {
    padding: 80px 0 88px;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.area-pref--tint {
    background: linear-gradient(180deg, #eef4f9, #f3f7fb);
}

.area-pref--ishikawa {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(247, 251, 254, 0.94) 38%, rgba(241, 247, 252, 0.98)),
        url("../img/about-film-finished.webp?v=202606191807") left center / auto 100% no-repeat;
}

.area-pref--hokuriku {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(241, 247, 252, 0.98), rgba(247, 251, 254, 0.95) 62%, rgba(255, 255, 255, 0.82)),
        url("../img/about-film-finished.webp?v=202606191807") right center / auto 100% no-repeat;
}

.area-pref--hokuriku::after {
    position: absolute;
    left: -7%;
    bottom: 8%;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 110, 158, 0.1), transparent 68%);
    content: "";
    pointer-events: none;
}

.area-pref--ishikawa::after {
    position: absolute;
    right: -8%;
    top: 16%;
    width: 32%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 110, 158, 0.1), transparent 68%);
    content: "";
    pointer-events: none;
}

.area-pref__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    width: min(1040px, calc(100% - 80px));
    margin: 0 auto;
}

.area-pref__cards--photo {
    position: relative;
    z-index: 1;
    width: min(980px, calc(100% - 80px));
    gap: 24px;
}

.area-pref__card {
    padding: 32px 34px 30px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(33, 56, 82, 0.08);
    box-shadow: 0 16px 36px -22px rgba(18, 32, 47, 0.35);
}

.area-pref__cards--photo .area-pref__card {
    padding: 16px 16px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 18px 38px -24px rgba(18, 32, 47, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.area-pref__card--main {
    border: 1px solid rgba(102, 120, 137, 0.34);
    box-shadow: 0 20px 40px -22px rgba(64, 80, 96, 0.36);
}

.area-pref__thumb {
    position: relative;
    overflow: hidden;
    margin: 0 0 16px;
    border-radius: 12px;
    aspect-ratio: 16 / 7;
    background: #eaf2f7;
}

.area-pref__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.area-pref__card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #16202c;
}

.area-pref__cards--photo .area-pref__card h3 {
    gap: 10px;
    margin-bottom: 10px;
    font-size: 17px;
}

.area-pref__icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2d6e9e, #1d6ad8);
    color: #fff;
    box-shadow: 0 8px 16px -10px rgba(29, 106, 216, 0.55);
}

.area-pref__icon svg {
    width: 18px;
    height: 18px;
}

.area-pref__badge {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, #667889, #3f4f5e);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(63, 79, 94, 0.52);
}

.area-pref__card > p {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: #51606e;
}

.area-pref__cards--photo .area-pref__card > p {
    margin: 0 2px 14px;
    font-size: 12.5px;
    line-height: 1.8;
}

.area-pref__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.area-pref__chips li {
    padding: 7px 15px;
    border-radius: 999px;
    background: #eef4f9;
    border: 1px solid rgba(70, 110, 150, 0.14);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #2c3e4e;
}

.area-pref__cards--photo .area-pref__chips {
    gap: 7px;
}

.area-pref__cards--photo .area-pref__chips li {
    padding: 6px 13px;
    background: #eef5fb;
    color: #2f526f;
    font-size: 12px;
    font-weight: 700;
}

.area-pref__chips li em {
    font-style: normal;
    font-weight: 700;
    color: #4f6274;
}

.area-pref__card--main .area-pref__chips li {
    background: #edf2f5;
    border-color: rgba(102, 120, 137, 0.24);
}

.area-pref__seo {
    width: min(900px, calc(100% - 80px));
    margin: 40px auto 0;
}

.area-pref__seo p {
    margin: 0;
    font-size: 13.5px;
    line-height: 2.1;
    letter-spacing: 0.05em;
    color: #51606e;
    text-align: justify;
}

.area-pref__seo--glass {
    position: relative;
    z-index: 1;
    width: min(980px, calc(100% - 80px));
    margin-top: 28px;
    padding: 20px 26px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 14px 32px -26px rgba(18, 32, 47, 0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@media (max-width: 1023px) {
    .area-hero {
        min-height: auto;
        padding-top: 88px;
    }
    .area-hero::before {
        inset: 118px 28px auto;
        width: auto;
        height: 44%;
        border-radius: 24px;
        background-size: 54px 54px;
    }
    .area-hero::after {
        top: 200px;
        right: -12vw;
        width: 74vw;
    }
    .area-hero__ghost {
        left: 28px;
        bottom: 18px;
        font-size: clamp(112px, 24vw, 210px);
    }
    .area-hero__inner {
        width: min(900px, calc(100% - 56px));
        padding: 142px 0 34px;
    }
    .area-hero h1 {
        font-size: clamp(48px, 9vw, 78px);
    }
    .area-hero__lead,
    .area-hero__chips {
        width: min(620px, 86vw);
    }
    .area-hero__map {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        width: min(760px, 96vw);
        margin: 0 auto 54px;
    }
    .area-hero__pin {
        min-width: auto;
        padding: 9px 12px 9px 10px;
        font-size: 11px;
    }
    .area-map__inner {
        grid-template-columns: none;
        gap: 36px;
    }
}

@media (max-width: 767px) {
    .area-hero__inner {
        width: auto;
        padding: 118px 7.5% 28px;
    }
    .area-hero::before {
        inset: 96px 16px auto;
        height: 360px;
        border-radius: 18px;
        background-size: 42px 42px;
    }
    .area-hero::after {
        top: 220px;
        right: -42vw;
        width: 120vw;
    }
    .area-hero__ghost {
        left: 18px;
        bottom: 14px;
        font-size: clamp(86px, 28vw, 132px);
    }
    .area-hero__kicker {
        margin-bottom: 18px;
        font-size: 11px;
    }
    .area-hero h1 {
        font-size: clamp(42px, 14vw, 58px);
    }
    .area-hero__lead,
    .area-hero__chips {
        width: 100%;
    }
    .area-hero__lead {
        margin-top: 28px;
        font-size: 14px;
        line-height: 2;
    }
    .area-hero__chips {
        gap: 8px;
        margin-top: 26px;
    }
    .area-hero__chips li {
        padding: 7px 12px;
        font-size: 12px;
    }
    .area-hero__head .area-hero__breadcrumb {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .area-hero__map {
        width: min(116vw, 520px);
        margin: 0 -8vw 38px;
    }
    .area-hero__pin {
        gap: 6px;
        padding: 7px 9px;
        font-size: 10px;
        letter-spacing: 0.03em;
    }
    .area-hero__pin i {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 0 5px rgba(102, 120, 137, 0.13);
    }
    .area-hero__pin i::before,
    .area-hero__pin i::after {
        inset: -6px;
    }
    .area-hero__pin b {
        font-size: 8px;
    }
    .area-hero__pin--kanazawa {
        left: 46%;
    }
    .area-hero__pin--toyama {
        right: 5%;
    }
    .area-hero__spot {
        min-width: auto;
        padding: 7px 10px;
        font-size: 10px;
    }
    .area-hero__spot::before {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 0 5px rgba(102, 120, 137, 0.12);
    }
    .area-hero__label {
        font-size: 13px;
    }
    .area-map {
        padding: 56px 0 48px;
    }
    .area-map__inner {
        width: auto;
        padding: 0 7.5%;
    }
    .area-map__fig {
        padding: 18px 8px;
    }
    .area-map__pin text {
        font-size: 15px;
    }
    .area-map__pin--base text {
        font-size: 17px;
    }
    .area-map__pref-name {
        font-size: 16px;
    }
    .area-pref {
        padding: 56px 0 60px;
    }
    .area-pref__cards {
        grid-template-columns: none;
        gap: 16px;
        width: auto;
        margin: 0 5%;
    }
    .area-pref__card {
        padding: 24px 22px 22px;
    }
    .area-pref__seo {
        width: auto;
        margin: 28px 5% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .area-map__pulse,
    .area-map__legend-item--base i::after {
        animation: none;
        opacity: 0;
    }
}

.service-area__more {
    margin: 30px 0 0;
}

@media (max-width: 767px) {
    .service-area__more {
        text-align: center;
    }
}

/* ---------- rebuilt area page ---------- */

.area-page {
    background: #f6f8f9;
}

.area-kv {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.95), transparent 30%),
        linear-gradient(180deg, #f7f4ed 0%, #f0eadf 100%);
    color: #172330;
    font-family: "Zen Kaku Gothic New", var(--font);
    isolation: isolate;
}

.area-kv::before {
    position: absolute;
    inset: 82px 52px 70px auto;
    z-index: 0;
    width: min(58vw, 760px);
    border: 1px solid rgba(102, 120, 137, 0.15);
    border-radius: 34px;
    background:
        linear-gradient(90deg, rgba(102, 120, 137, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(102, 120, 137, 0.07) 1px, transparent 1px);
    background-size: 76px 76px;
    content: "";
}

.area-kv::after {
    position: absolute;
    left: clamp(26px, 4vw, 72px);
    bottom: 28px;
    z-index: 0;
    color: rgba(102, 120, 137, 0.08);
    font-family: "Times New Roman", "Yu Mincho", "YuMincho", serif;
    font-size: clamp(118px, 18vw, 260px);
    font-style: italic;
    line-height: 0.8;
    content: "Area";
    pointer-events: none;
}

.area-kv__copy {
    position: relative;
    z-index: 3;
    width: min(1180px, calc(100% - 88px));
    margin: 0 auto;
    padding: 174px 0 170px;
}

.area-kv__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 28px;
    color: #7b7164;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
}

.area-kv__eyebrow::after {
    width: 58px;
    height: 1px;
    background: currentColor;
    content: "";
    opacity: 0.6;
}

.area-kv h1 {
    margin: 0;
    color: #142231;
    font-family: "Times New Roman", "Yu Mincho", "YuMincho", serif;
    font-size: clamp(58px, 8.8vw, 136px);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: 0.1em;
}

.area-kv__lead {
    width: min(520px, 42vw);
    margin: 44px 0 0;
    color: #344554;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 500;
    line-height: 2.15;
    letter-spacing: 0.08em;
}

.area-kv__breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 56px;
    color: #667889;
    font-size: 12px;
    letter-spacing: 0.12em;
}

.area-kv__breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.area-kv__breadcrumb em {
    color: #253544;
    font-style: normal;
}

.area-kv__map {
    position: absolute;
    top: 76px;
    right: clamp(10px, 4.4vw, 72px);
    z-index: 2;
    width: min(660px, 49vw);
    aspect-ratio: 1200 / 1500;
    filter: drop-shadow(0 28px 52px rgba(80, 88, 92, 0.16));
    animation: area-kv-map-in 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.area-kv__map img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.area-kv__pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 116px;
    padding: 10px 14px 10px 12px;
    border: 1px solid rgba(102, 120, 137, 0.18);
    background: rgba(255, 255, 255, 0.82);
    color: #1f2c38;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    box-shadow: 0 16px 30px -22px rgba(65, 57, 45, 0.42);
    backdrop-filter: blur(10px);
}

.area-kv__pin i {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #667889;
    box-shadow: 0 0 0 6px rgba(102, 120, 137, 0.13);
}

.area-kv__pin i::before,
.area-kv__pin i::after {
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(102, 120, 137, 0.42);
    border-radius: 50%;
    content: "";
    animation: area-kv-pin-pulse 2.2s cubic-bezier(0.2, 0.55, 0.35, 1) infinite;
}

.area-kv__pin i::after {
    animation-delay: 0.72s;
}

.area-kv__pin b {
    color: #667889;
    font-family: "Roboto", var(--font);
    font-size: 9px;
    letter-spacing: 0.16em;
}

.area-kv__pin--hokuriku {
    top: 44%;
    left: 38%;
}

.area-kv__pin--kanazawa {
    top: 42%;
    left: 22%;
}

.area-kv__pin--toyama {
    top: 46%;
    right: 16%;
}

.area-kv__pin--fukui {
    top: 58%;
    left: 18%;
}

.area-kv__bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 5.6vw;
    border-top: 1px solid rgba(102, 120, 137, 0.16);
    background: rgba(255, 255, 255, 0.56);
    color: #243442;
    backdrop-filter: blur(14px);
}

.area-kv__bottom p {
    margin: 0;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.area-kv__bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.area-kv__bottom li {
    padding: 7px 13px;
    border: 1px solid rgba(102, 120, 137, 0.18);
    background: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

@keyframes area-kv-map-in {
    0% {
        opacity: 0;
        transform: translate3d(28px, 34px, 0) scale(0.96);
        filter: blur(8px) drop-shadow(0 28px 52px rgba(80, 88, 92, 0.16));
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) drop-shadow(0 28px 52px rgba(80, 88, 92, 0.16));
    }
}

@keyframes area-kv-pin-pulse {
    0% {
        opacity: 0.82;
        transform: scale(0.35);
    }
    78%, 100% {
        opacity: 0;
        transform: scale(1.85);
    }
}

.area-section {
    padding: 108px 0;
    background: #f7fafc;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.area-section:nth-of-type(even) {
    background: #eef4f8;
}

.area-section__head {
    width: min(1120px, calc(100% - 88px));
    margin: 0 auto 44px;
}

.area-section__head h2,
.area-process__body h2 {
    margin: 16px 0 0;
    color: #162432;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.45;
    letter-spacing: 0.12em;
}

.area-intro__grid,
.area-regions__layout,
.area-process {
    width: min(1120px, calc(100% - 88px));
    margin: 0 auto;
}

.area-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
    gap: 70px;
    align-items: center;
}

.area-intro__text {
    display: grid;
    gap: 18px;
    color: #3c4d5c;
    font-size: 15px;
    font-weight: 500;
    line-height: 2.2;
    letter-spacing: 0.07em;
}

.area-intro__text p {
    margin: 0;
}

.area-intro__photo {
    margin: 0;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 26px 52px -34px rgba(35, 48, 62, 0.42);
}

.area-intro__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.area-regions__layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 18px;
}

.area-region {
    position: relative;
    min-height: 360px;
    padding: 34px 32px 30px;
    border: 1px solid rgba(102, 120, 137, 0.14);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 42px -34px rgba(35, 48, 62, 0.42);
}

.area-region--main {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(238, 245, 248, 0.88)),
        url("../img/town.webp?v=202606191807") right bottom / 54% auto no-repeat;
}

.area-region__num {
    margin: 0 0 42px;
    color: #667889;
    font-family: "Times New Roman", serif;
    font-size: 42px;
    line-height: 1;
}

.area-region h3 {
    margin: 0 0 18px;
    color: #162432;
    font-size: 23px;
    letter-spacing: 0.12em;
}

.area-region p:not(.area-region__num) {
    margin: 0 0 22px;
    color: #47596a;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.06em;
}

.area-region ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.area-region li {
    padding: 7px 12px;
    border: 1px solid rgba(102, 120, 137, 0.18);
    background: rgba(255, 255, 255, 0.78);
    color: #263746;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.area-process {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1fr);
    gap: 70px;
    align-items: center;
}

.area-process__visual {
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 24px 52px -32px rgba(26, 42, 55, 0.44);
}

.area-process__visual img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.area-process__steps {
    display: grid;
    gap: 0;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(102, 120, 137, 0.18);
}

.area-process__steps li {
    display: flex;
    gap: 22px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid rgba(102, 120, 137, 0.18);
    color: #263746;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.area-process__steps span {
    color: #667889;
    font-family: "Times New Roman", serif;
    font-size: 24px;
}

.area-faq__list {
    width: min(900px, calc(100% - 88px));
    margin: 0 auto;
}

.area-contact {
    padding: 98px 0 110px;
    background:
        linear-gradient(180deg, rgba(22, 34, 48, 0.78), rgba(22, 34, 48, 0.82)),
        url("../img/glass-film-hero-01.webp?v=202606191807") center / cover no-repeat;
    color: #fff;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.area-contact__inner {
    width: min(980px, calc(100% - 88px));
    margin: 0 auto;
    text-align: center;
}

.area-contact__kicker {
    margin: 0 0 16px;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    opacity: 0.76;
}

.area-contact h2 {
    margin: 0;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.55;
    letter-spacing: 0.12em;
}

.area-contact p:not(.area-contact__kicker) {
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.area-contact__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 38px;
}

.area-contact__btn {
    min-width: 210px;
    padding: 16px 24px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.area-contact__btn--form {
    background: #ff920f;
}

.area-contact__btn--line {
    background: #05bf46;
}

.area-contact__btn--phone {
    background: #fff;
    color: #1d6fd0;
}

@media (max-width: 1023px) {
    .area-kv {
        min-height: auto;
    }
    .area-kv::before {
        inset: 118px 28px auto;
        width: auto;
        height: 58%;
        border-radius: 24px;
        background-size: 54px 54px;
    }
    .area-kv__copy {
        width: min(900px, calc(100% - 56px));
        padding: 142px 0 32px;
    }
    .area-kv__lead {
        width: min(620px, 86vw);
    }
    .area-kv__map {
        position: relative;
        top: auto;
        right: auto;
        width: min(720px, 90vw);
        margin: 0 auto 86px;
    }
    .area-kv__bottom {
        position: relative;
        align-items: flex-start;
        flex-direction: column;
        padding: 18px 28px;
    }
    .area-intro__grid,
    .area-process,
    .area-regions__layout {
        grid-template-columns: none;
    }
    .area-regions__layout {
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .area-kv__copy {
        width: auto;
        padding: 118px 7.5% 28px;
    }
    .area-kv::before {
        inset: 96px 16px auto;
        height: 430px;
        border-radius: 18px;
        background-size: 42px 42px;
    }
    .area-kv h1 {
        font-size: clamp(42px, 14vw, 58px);
    }
    .area-kv__lead {
        width: 100%;
        margin-top: 28px;
        font-size: 14px;
        line-height: 2;
    }
    .area-kv__breadcrumb {
        margin-top: 34px;
    }
    .area-kv__map {
        width: min(112vw, 480px);
        margin: 0 -6vw 58px;
    }
    .area-kv__pin {
        gap: 6px;
        min-width: auto;
        padding: 7px 9px;
        font-size: 10px;
    }
    .area-kv__pin i {
        width: 8px;
        height: 8px;
    }
    .area-kv__pin i::before,
    .area-kv__pin i::after {
        inset: -6px;
    }
    .area-kv__pin b {
        display: none;
    }
    .area-kv__bottom {
        padding: 16px 7.5%;
    }
    .area-section {
        padding: 64px 0;
    }
    .area-section__head,
    .area-intro__grid,
    .area-regions__layout,
    .area-process,
    .area-faq__list,
    .area-contact__inner {
        width: auto;
        margin-right: 7.5%;
        margin-left: 7.5%;
    }
    .area-section__head {
        margin-bottom: 30px;
    }
    .area-section__head h2,
    .area-process__body h2 {
        font-size: 27px;
    }
    .area-intro__grid,
    .area-process {
        gap: 32px;
    }
    .area-region {
        min-height: auto;
        padding: 26px 22px;
    }
    .area-process__steps li {
        align-items: flex-start;
        font-size: 13px;
        line-height: 1.8;
    }
    .area-contact {
        padding: 70px 0;
    }
    .area-contact__actions {
        flex-direction: column;
    }
    .area-contact__btn {
        width: 100%;
    }
}

/* Area page hero: top-page service-area style (left-anchored photo wipe) */

.area-hero {
    position: relative;
    overflow: hidden;
    padding: 128px 0 84px;
    background: linear-gradient(180deg, #f7fafc 0%, #fff 46%, #eef4f8 100%);
    font-family: "Zen Kaku Gothic New", var(--font);
}

@media (max-width: 1023px) {
    .area-hero {
        padding-top: 64px;
    }
}

@media (max-width: 767px) {
    .area-hero {
        padding: 70px 0 30px;
    }
}

.area-hero__head {
    width: min(1140px, calc(100% - 80px));
    margin: 0 auto 36px;
}

.area-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.area-hero__breadcrumb a {
    color: rgba(68, 88, 107, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.area-hero__breadcrumb a:hover {
    color: #16283a;
    opacity: 1;
}

.area-hero__breadcrumb span {
    color: rgba(138, 154, 171, 0.7);
}

.area-hero__breadcrumb em {
    font-style: normal;
    color: #16283a;
}

.area-hero__kicker {
    margin: 0 0 14px;
    font-family: "Roboto", var(--font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: #2d6e9e;
}

.area-hero__kicker::after {
    display: block;
    width: 34px;
    height: 1px;
    margin-top: 10px;
    background: #2d6e9e;
    content: "";
}

.area-hero h1 {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #16283a;
}

.area-hero__breadcrumb,
.area-hero__kicker,
.area-hero h1 {
    opacity: 0;
    filter: blur(8px);
    translate: 0 16px;
    animation: faq-hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.area-hero__breadcrumb { animation-delay: 0.4s; }
.area-hero__kicker { animation-delay: 0.1s; }
.area-hero h1 { animation-delay: 0.22s; }

/* left-anchored photo band with wipe reveal (same as top page) */
.area-hero__photo {
    position: relative;
    width: calc(100vw - clamp(96px, 12vw, 220px));
    max-width: calc(100vw - clamp(96px, 12vw, 220px));
    height: clamp(260px, 30vw, 470px);
    margin: 0 auto 0 0;
    overflow: visible;
    border-radius: 0 8px 8px 0;
}

.area-hero__photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    filter: drop-shadow(0 20px 30px rgba(49, 71, 90, 0.2));
    transform: scale(1.07);
    clip-path: inset(0 100% 0 0);
    animation: area-hero-photo-wipe 1.05s cubic-bezier(0.12, 0.86, 0.18, 1) 0.46s both;
    will-change: clip-path, transform;
}

@keyframes area-hero-photo-wipe {
    to {
        clip-path: inset(0 0 0 0);
        transform: scale(1);
    }
}

/* floating badge on the photo */
.area-hero__badge {
    position: absolute;
    left: clamp(24px, 5vw, 74px);
    bottom: 20px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 13px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 30px -12px rgba(18, 32, 47, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(12px) scale(0.92);
    animation: area-hero-badge 0.6s cubic-bezier(0.26, 1.5, 0.45, 1) 1.35s both;
}

.area-hero__map-card {
    --area-map-x: 0%;
    position: absolute;
    right: clamp(22px, 5.6vw, 92px);
    bottom: clamp(-220px, -13vw, -118px);
    z-index: 4;
    width: min(560px, 42vw);
    margin: 0;
    padding: clamp(16px, 2.4vw, 28px);
    border: 0;
    border-radius: 26px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 0;
    transform: translateX(var(--area-map-x)) translateY(38px) scale(0.9);
    transform-origin: 50% 78%;
    filter: blur(7px);
    animation: area-hero-map-pop 1150ms cubic-bezier(0.18, 0.9, 0.24, 1) 1.6s both;
    will-change: opacity, transform, filter;
}

@keyframes area-hero-map-pop {
    0% {
        opacity: 0;
        transform: translateX(var(--area-map-x)) translateY(38px) scale(0.9);
        filter: blur(7px);
    }
    55% {
        opacity: 1;
        filter: blur(0);
    }
    72% {
        transform: translateX(var(--area-map-x)) translateY(-9px) scale(1.015);
    }
    100% {
        opacity: 1;
        transform: translateX(var(--area-map-x)) translateY(0) scale(1);
        filter: blur(0);
    }
}

.area-hero__map-card .map3d__scene {
    animation-duration: 8.5s;
}

.area-hero__map-card .map3d__img {
    filter: drop-shadow(0 16px 22px rgba(33, 76, 116, 0.22));
}

@keyframes area-hero-badge {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.area-hero__badge strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1c4f9e;
}

.area-hero__badge span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #51606e;
}

/* content under the photo */
.area-hero__content {
    width: min(1140px, calc(100% - 80px));
    margin: clamp(84px, 9vw, 132px) auto 0;
}

.area-hero__catch {
    margin: 0 0 20px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: #16202c;
}

.area-hero__text {
    max-width: 760px;
    margin: 0 0 26px;
    font-size: 14.5px;
    line-height: 2.05;
    letter-spacing: 0.05em;
    color: #44586b;
    text-align: justify;
}

.area-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.area-hero__chips li {
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(70, 110, 150, 0.18);
    box-shadow: 0 4px 12px -8px rgba(18, 32, 47, 0.3);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #2c3e4e;
}

.area-hero__chips li.is-main {
    background: linear-gradient(135deg, #2e6fd8, #1c4f9e);
    border-color: transparent;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(28, 79, 158, 0.6);
}

/* strengths */
.area-strength {
    padding: 80px 0 96px;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.area-strength__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: min(1140px, calc(100% - 80px));
    margin: 0 auto;
}

.area-strength__card {
    padding: 34px 30px 30px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(33, 56, 82, 0.08);
    box-shadow: 0 16px 36px -22px rgba(18, 32, 47, 0.35);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
}

.area-strength__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 46px -24px rgba(18, 32, 47, 0.5);
}

.area-strength__icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #eaf2f9;
    color: #2d6e9e;
}

.area-strength__icon svg {
    width: 26px;
    height: 26px;
}

.area-strength__card h3 {
    margin: 0 0 12px;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #16202c;
}

.area-strength__card p {
    margin: 0;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #51606e;
    text-align: justify;
}

/* SEO block heading inside pref sections */
.area-pref__seo h3 {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #16202c;
}

@media (max-width: 1023px) {
    .area-strength__grid {
        grid-template-columns: none;
        gap: 16px;
        width: min(640px, calc(100% - 64px));
    }
}

@media (max-width: 767px) {
    .area-hero {
        padding: 70px 0 30px;
    }
    .area-hero__head {
        width: auto;
        margin-bottom: 24px;
        padding: 0 7.5%;
    }
    .area-hero__photo {
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        height: clamp(420px, 112vw, 560px);
    }
    .area-hero__badge {
        left: 16px;
        bottom: auto;
        top: 20px;
        padding: 10px 16px;
    }
    .area-hero__map-card {
        --area-map-x: 0%;
        right: -6%;
        bottom: -74px;
        width: min(115%, 520px);
        padding: 16px 12px 20px;
        border-radius: 20px;
    }
    .area-hero__content {
        width: auto;
        margin-top: 84px;
        padding: 0 7.5%;
    }
    .area-hero__text {
        font-size: 13.5px;
    }
    .area-strength {
        padding: 56px 0 64px;
    }
    .area-strength__grid {
        width: auto;
        margin: 0 5%;
    }
    .area-strength__card {
        padding: 26px 22px 24px;
    }
}

/* Area strength: bright local-service feature section */
.area-strength {
    position: relative;
    overflow: hidden;
    padding: 96px 0 112px;
    background: #eef6fb;
    isolation: isolate;
}

.area-strength__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(242, 248, 252, 0.9) 35%, rgba(242, 248, 252, 0.96) 100%),
        url("../img/about-film-finished.webp?v=202606191807") left center / cover no-repeat;
}

.area-strength__bg::after {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.34);
    content: "";
}

.area-strength__head {
    position: relative;
    z-index: 2;
    width: min(1000px, calc(100% - 80px));
    margin: 0 auto 52px;
    text-align: center;
}

.area-strength__head .section-kicker {
    color: #23456a;
    font-family: "Times New Roman", "Yu Mincho", "YuMincho", serif;
    font-size: 16px;
    letter-spacing: 0.16em;
}

.area-strength__head .section-kicker::after {
    width: 78px;
    height: 2px;
    margin-top: 20px;
    background: #2d6e9e;
}

.area-strength__head .section-title {
    margin-top: 34px;
    color: #102137;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif;
    font-size: clamp(38px, 4vw, 62px);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: center;
}

.area-strength__lead {
    margin: 32px auto 0;
    color: #34485d;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif;
    font-size: clamp(16px, 1.35vw, 20px);
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.08em;
}

.area-strength__badge {
    position: absolute;
    top: 190px;
    right: clamp(42px, 7vw, 140px);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(180, 142, 71, 0.54);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
    color: #b58a39;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.area-strength__badge span,
.area-strength__badge em {
    display: block;
    font-size: 15px;
    font-style: normal;
    letter-spacing: 0.08em;
}

.area-strength__badge strong {
    display: block;
    margin: 4px 0 2px;
    font-size: 48px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
}

.area-strength__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    width: min(1180px, calc(100% - 96px));
    margin: 0 auto;
}

.area-strength__card {
    position: relative;
    min-height: 430px;
    padding: 34px 34px 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow:
        0 24px 50px rgba(45, 79, 110, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.area-strength__icon {
    width: 72px;
    height: 72px;
    margin: 0 0 30px;
    background: #edf3f8;
    color: #143b68;
}

.area-strength__icon svg {
    width: 31px;
    height: 31px;
}

.area-strength__num {
    position: absolute;
    top: 48px;
    right: 34px;
    color: rgba(99, 126, 155, 0.12);
    font-family: "Times New Roman", "Yu Mincho", serif;
    font-size: 58px;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.08em;
}

.area-strength__card h3 {
    position: relative;
    margin: 0 0 24px;
    color: #102137;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.area-strength__card h3::after {
    display: block;
    width: 46px;
    height: 2px;
    margin-top: 20px;
    background: #2d6e9e;
    content: "";
}

.area-strength__card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #3f5265;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.95;
    letter-spacing: 0.06em;
    text-align: left;
}

.area-strength__illust {
    position: absolute;
    right: 26px;
    bottom: 24px;
    left: 26px;
    z-index: 1;
    width: calc(100% - 52px);
    height: 116px;
    object-fit: contain;
    object-position: center bottom;
    opacity: 0.78;
}

.area-strength__quality {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 56px auto 1fr 1fr;
    align-items: center;
    gap: 28px;
    width: min(1180px, calc(100% - 96px));
    margin: 36px auto 0;
    padding: 24px 36px;
    border: 1px solid rgba(168, 202, 235, 0.55);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: 0 16px 36px rgba(45, 79, 110, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.area-strength__quality-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    color: #2d6e9e;
}

.area-strength__quality-icon svg {
    width: 38px;
    height: 38px;
}

.area-strength__quality strong {
    color: #2d5f8a;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
    font-size: 21px;
    letter-spacing: 0.08em;
}

.area-strength__quality p {
    margin: 0;
    color: #3e5266;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.04em;
}

.area-strength__quality p + p {
    padding-left: 28px;
    border-left: 1px solid rgba(102, 120, 137, 0.25);
}

@media (max-width: 1023px) {
    .area-strength {
        padding: 78px 0 86px;
    }
    .area-strength__badge {
        position: static;
        width: 132px;
        height: 132px;
        margin: -22px auto 34px;
    }
    .area-strength__badge strong {
        font-size: 39px;
    }
    .area-strength__grid {
        grid-template-columns: none;
        width: min(620px, calc(100% - 56px));
    }
    .area-strength__card {
        min-height: 350px;
    }
    .area-strength__quality {
        grid-template-columns: 48px 1fr;
        width: min(620px, calc(100% - 56px));
        gap: 12px 20px;
        padding: 22px 24px;
    }
    .area-strength__quality p {
        grid-column: 2;
    }
    .area-strength__quality p + p {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .area-strength {
        padding: 62px 0 70px;
    }
    .area-strength__bg {
        background:
            linear-gradient(180deg, rgba(244, 249, 252, 0.9), rgba(244, 249, 252, 0.98)),
            url("../img/about-film-finished.webp?v=202606191807") left top / auto 100% no-repeat;
    }
    .area-strength__head {
        width: auto;
        margin: 0 7% 34px;
    }
    .area-strength__head .section-title {
        margin-top: 26px;
        font-size: 31px;
        line-height: 1.45;
    }
    .area-strength__lead {
        margin-top: 20px;
        font-size: 14px;
        line-height: 2;
    }
    .area-strength__grid {
        width: auto;
        margin: 0 5%;
        gap: 18px;
    }
    .area-strength__card {
        min-height: 336px;
        padding: 28px 24px 24px;
    }
    .area-strength__icon {
        width: 62px;
        height: 62px;
        margin-bottom: 24px;
    }
    .area-strength__num {
        top: 38px;
        right: 26px;
        font-size: 48px;
    }
    .area-strength__card h3 {
        font-size: 21px;
    }
    .area-strength__card p {
        font-size: 13.5px;
    }
    .area-strength__illust {
        bottom: auto;
        top: 16px;
    }
    .area-strength__quality {
        width: auto;
        margin: 26px 5% 0;
        padding: 20px;
        grid-template-columns: 56px 1fr;
        row-gap: 4px;
    }
    .area-strength__quality strong {
        font-size: 18px;
    }
    .area-strength__quality p {
        grid-column: 1 / -1;
    }
    .area-strength__quality p + p {
        padding-left: 0;
        border-left: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .area-hero__breadcrumb,
    .area-hero__kicker,
    .area-hero h1,
    .area-hero__photo,
    .area-hero__photo img,
    .area-hero__badge,
    .area-hero__map-card {
        animation: none;
        opacity: 1;
        filter: none;
        translate: none;
        clip-path: inset(0 0 0 0);
    }
    .area-hero__photo,
    .area-hero__photo img,
    .area-hero__badge {
        transform: none;
    }
    .area-hero__map-card {
        transform: translateX(var(--area-map-x)) translateY(0) scale(1);
    }
}

/* Area map: 3D interactive image map */

.area-map__fig--3d {
    padding: 44px 36px 52px;
}

.area-hero__photo .area-hero__map-card {
    padding: clamp(16px, 2.4vw, 28px);
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.area-hero__map-card img {
    border-radius: 0;
    animation: none;
}

.map3d {
    perspective: 1100px;
}

.map3d__scene {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, 0deg));
    will-change: transform;
    animation: map3d-float 7s ease-in-out infinite alternate;
}

.map3d.is-active .map3d__scene {
    animation: none;
}

@keyframes map3d-float {
    from { transform: rotateX(9deg) rotateY(-4deg); }
    to { transform: rotateX(13deg) rotateY(5deg); }
}

.map3d__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    transform: translateZ(24px);
    filter: drop-shadow(0 18px 26px rgba(33, 76, 116, 0.28));
}

/* soft ground shadow under the floating map */
.map3d__shadow {
    position: absolute;
    inset: 16% 10% 2%;
    background: radial-gradient(closest-side, rgba(35, 70, 105, 0.30), transparent 72%);
    transform: translateZ(-50px) scale(0.96);
    filter: blur(16px);
}

/* prefecture labels */
.map3d__pref {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 2;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #7d8fa0;
    white-space: nowrap;
    transform: translate(-50%, -50%) translateZ(38px);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

.map3d__pref--main {
    color: #1c4f9e;
    font-size: 15px;
}

/* city pins */
.map3d__pin {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #14283f;
    white-space: nowrap;
    transform: translate(-7px, -50%) translateZ(56px);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 6px rgba(255, 255, 255, 0.95),
        0 0 12px rgba(255, 255, 255, 0.85);
    cursor: default;
    transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.map3d__pin:hover {
    transform: translate(-7px, -50%) translateZ(72px) scale(1.08);
}

.map3d__pin i {
    position: relative;
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #2e6fd8;
    box-shadow: 0 3px 8px rgba(13, 36, 64, 0.4);
    flex-shrink: 0;
}

.map3d__pin--sub {
    font-weight: 700;
    color: #33465a;
}

.map3d__pin--sub i {
    width: 9px;
    height: 9px;
    border-color: #aebfce;
}

.map3d__pin--base {
    font-size: 14px;
    color: #0e2440;
}

.map3d__pin--base i {
    width: 14px;
    height: 14px;
    background: #2e6fd8;
    border-color: #fff;
    box-shadow: 0 4px 10px rgba(13, 36, 64, 0.5), 0 0 0 4px rgba(46, 111, 216, 0.25);
}

.map3d__pin--base i::after {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid rgba(46, 111, 216, 0.6);
    content: "";
    animation: mado-pulse 2.1s cubic-bezier(0.2, 0.55, 0.35, 1) infinite;
}

@media (max-width: 767px) {
    .area-map__fig--3d {
        padding: 26px 14px 34px;
    }
    .map3d__pref {
        font-size: 12px;
    }
    .map3d__pref--main {
        font-size: 13px;
    }
    .map3d__pin {
        font-size: 10.5px;
        gap: 4px;
    }
    .map3d__pin i {
        width: 9px;
        height: 9px;
        border-width: 2.5px;
    }
    .map3d__pin--base {
        font-size: 12px;
    }
    .map3d__pin--base i {
        width: 12px;
        height: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map3d__scene {
        animation: none;
        transform: rotateX(10deg);
    }
    .map3d__pin--base i::after {
        animation: none;
        opacity: 0;
    }
}

/* Glass button (frosted glass / glassmorphism CTA) */

.glass-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 15px 44px;
    border-radius: 999px;
    isolation: isolate;
    overflow: hidden;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #143b68;
    text-decoration: none;
    border: 2px solid rgba(126, 184, 255, 0.72);
    background: radial-gradient(circle at 12% 50%, rgba(244, 250, 255, 0.96), rgba(255, 255, 255, 0.68) 22%, rgba(235, 245, 255, 0.72) 100%), rgba(255, 255, 255, 0.78);
    box-shadow:
        0 24px 58px rgba(48, 104, 171, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -1px 0 rgba(126, 184, 255, 0.18);
    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}

/* top specular highlight (glass shine) */
.glass-btn::before {
    position: absolute;
    inset: 1px 1px 45% 1px;
    z-index: -1;
    border-radius: 999px 999px 60% 60% / 999px 999px 100% 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.05));
    content: "";
    opacity: 0.9;
    pointer-events: none;
}

/* moving light streak swept across on hover */
.glass-btn::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.75) 48%, rgba(214, 235, 250, 0.4) 52%, transparent 70%);
    content: "";
    transform: translateX(-130%) skewX(-16deg);
    transition: transform 0.85s cubic-bezier(0.4, 0.1, 0.2, 1);
    pointer-events: none;
}

.glass-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(74, 152, 247, 0.86);
    background: radial-gradient(circle at 12% 50%, rgba(255, 255, 255, 1), rgba(249, 252, 255, 0.78) 24%, rgba(226, 241, 255, 0.82) 100%), rgba(255, 255, 255, 0.88);
    box-shadow:
        0 28px 66px rgba(48, 104, 171, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(126, 184, 255, 0.24);
}

.glass-btn:hover::after {
    transform: translateX(130%) skewX(-16deg);
}

.glass-btn:active {
    transform: translateY(-1px) scale(0.99);
}

.glass-btn:focus-visible {
    outline: 2px solid #2d6e9e;
    outline-offset: 4px;
}

.glass-btn__label {
    position: relative;
    color: #143b68;
}

.glass-btn:hover .glass-btn__label {
    color: #0e2d56;
}

.glass-btn__arrow {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 3px 8px rgba(70, 100, 140, 0.2);
    font-family: "Roboto", var(--font);
    font-size: 16px;
    color: #2c4564;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s ease, color 0.4s ease;
}

.glass-btn:hover .glass-btn__arrow {
    transform: translateX(4px);
    background: linear-gradient(135deg, #2e6fd8, #1c4f9e);
    color: #fff;
}

@media (max-width: 767px) {
    .glass-btn {
        font-size: 15px;
        padding: 13px 24px;
        gap: 12px;
    }
    .glass-btn__arrow {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .glass-btn,
    .glass-btn::after,
    .glass-btn__arrow {
        transition: none;
    }
    .glass-btn:hover::after {
        transform: translateX(-130%) skewX(-16deg);
    }
}

/* Tablet-only line break (hidden on desktop & narrow phones) */
.tab-br {
    display: none;
}

@media (max-width: 1023px) {
    .tab-br {
        display: inline;
    }
}

/* ─── News Archive Page ─── */
.news-archive {
    padding: 72px 0 96px;
    background: #fff;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.news-archive__inner {
    width: min(860px, calc(100% - 48px));
    margin: 0 auto;
}

.news-archive__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 44px;
}

.news-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    border: 1.5px solid rgba(102, 120, 137, 0.28);
    border-radius: 999px;
    background: transparent;
    color: #667889;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.news-filter:hover {
    border-color: #1767c8;
    color: #1767c8;
}

.news-filter.is-active {
    background: #1767c8;
    border-color: #1767c8;
    color: #fff;
}

.news-archive__list {
    border-top: 1px solid rgba(102, 120, 137, 0.22);
}

.news-archive__list:has(.news-archive__empty) {
    border-top: none;
}

.news-archive__list .news-item {
    grid-template-columns: 132px 104px 1fr;
}

.news-item.is-hidden {
    display: none;
}

.news-archive__empty {
    padding: 8px 0 56px;
    color: #667889;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: 15px;
}

@media (max-width: 767px) {
    .news-archive {
        padding: 48px 0 72px;
    }
    .news-archive__inner {
        width: calc(100% - 30px);
    }
    .news-archive__filters {
        gap: 8px;
        margin-bottom: 30px;
    }
    .news-filter {
        height: 34px;
        padding: 0 14px;
        font-size: 12px;
    }
    .news-archive__list .news-item {
        grid-template-columns: auto auto 1fr;
    }
}

/* ─── News Detail Page ─── */
.news-detail {
    padding: 56px 0 96px;
    background: #fff;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.news-detail__inner {
    width: min(760px, calc(100% - 48px));
    margin: 0 auto;
}

.news-detail__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 28px;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #667889;
}

.news-detail__breadcrumb a {
    color: #667889;
    transition: color 200ms ease;
}

.news-detail__breadcrumb a:hover {
    color: #1767c8;
}

.news-detail__breadcrumb em {
    font-style: normal;
    color: #2a3a4a;
}

.news-detail__eyecatch {
    margin: 0 0 32px;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #eaf1f6;
}

.news-detail__eyecatch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-detail__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.news-detail__meta time {
    color: #667889;
    font-family: "Roboto", var(--font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.news-detail__title {
    margin: 0 0 40px;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: #14213d;
}

.news-detail__body {
    border-top: 1px solid rgba(102, 120, 137, 0.2);
    padding-top: 40px;
    color: #2a3a4a;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.04em;
}

.news-detail__body p {
    margin: 0 0 1.8em;
}

.news-detail__body h2 {
    margin: 2.4em 0 1em;
    font-size: 1.2em;
    font-weight: 700;
    color: #14213d;
    border-left: 3px solid #1767c8;
    padding-left: 14px;
}

.news-detail__body h3 {
    margin: 2em 0 0.8em;
    font-size: 1.05em;
    font-weight: 700;
    color: #14213d;
}

.news-detail__back {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(102, 120, 137, 0.2);
}

.news-detail__back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1767c8;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: gap 200ms ease;
}

.news-detail__back-link:hover {
    gap: 12px;
}

.news-detail__back-link svg {
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .news-detail {
        padding: 36px 0 72px;
    }
    .news-detail__inner {
        width: calc(100% - 30px);
    }
    .news-detail__eyecatch {
        margin-bottom: 24px;
    }
    .news-detail__title {
        font-size: 22px;
        margin-bottom: 32px;
    }
    .news-detail__body {
        font-size: 15px;
    }
    .news-detail__back {
        margin-top: 48px;
    }
}

/* ─── Column Archive Page ─── */
.column-archive {
    padding: 72px 0 100px;
    background:
        radial-gradient(circle at 12% 20%, rgba(190, 211, 229, 0.22), transparent 38%),
        linear-gradient(180deg, #f4f9fc 0%, #ffffff 100%);
    font-family: "Zen Kaku Gothic New", var(--font);
}

.column-archive__inner {
    width: min(1140px, calc(100% - 48px));
    margin: 0 auto;
}

.column-archive__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 52px;
}

.column-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 28px;
}

.column-archive__grid .column-card {
    flex: none;
    min-width: 0;
}

.column-archive__grid .column-card__link {
    background: #fff;
}

.column-card.is-hidden {
    display: none;
}

@media (max-width: 1023px) {
    .column-archive__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
    }
}

@media (max-width: 767px) {
    .column-archive {
        padding: 30px 0;
    }
    .column-archive__inner {
        width: calc(100% - 24px);
    }
    .column-archive__filters {
        gap: 8px;
        margin-bottom: 28px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .column-archive__filters::-webkit-scrollbar {
        display: none;
    }
    .column-archive__filters .news-filter {
        flex-shrink: 0;
    }
    .column-archive__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 10px;
    }
    .column-archive__grid .column-card__image {
        aspect-ratio: 16 / 9;
    }
    .column-archive__grid .column-card__body {
        padding: 12px 14px 16px;
    }
    .column-archive__grid .column-card h3 {
        font-size: 13px;
        letter-spacing: 0.03em;
        line-height: 1.5;
    }
    .column-archive__grid .column-card__meta {
        font-size: 11px;
        gap: 6px;
        margin-bottom: 8px;
    }
    .column-archive__grid .column-card__body > p:last-child {
        display: none;
    }
}

/* ─── Column Detail Page ─── */
.column-detail {
    padding: 72px 0 96px;
    background:
        radial-gradient(circle at 80% 5%, rgba(190, 211, 229, 0.18), transparent 32%),
        #fff;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.column-detail__inner {
    width: min(780px, calc(100% - 48px));
    margin: 0 auto;
}

.column-detail__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.column-detail__meta time {
    color: #667889;
    font-family: "Roboto", var(--font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.column-detail__title {
    margin: 0 0 40px;
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.06em;
    color: #14213d;
}

.column-detail__eyecatch {
    margin: 0 0 48px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #eaf1f6;
}

.column-detail__eyecatch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.column-detail__body {
    color: #2a3a4a;
    font-size: 16px;
    line-height: 2.05;
    letter-spacing: 0.04em;
}

.column-detail__body p {
    margin: 0 0 1.8em;
}

.column-detail__body h2 {
    margin: 2.6em 0 1em;
    padding: 0.8em 1.1em;
    background: linear-gradient(135deg, rgba(23, 103, 200, 0.06), rgba(23, 103, 200, 0.02));
    border-left: 3.5px solid #1767c8;
    border-radius: 0 6px 6px 0;
    font-size: 1.15em;
    font-weight: 700;
    color: #14213d;
    letter-spacing: 0.06em;
    line-height: 1.55;
}

.column-detail__body h3 {
    margin: 2.2em 0 0.8em;
    font-size: 1.05em;
    font-weight: 700;
    color: #14213d;
    letter-spacing: 0.06em;
}

.column-detail__back {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid rgba(102, 120, 137, 0.2);
}

.column-detail__back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1767c8;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: gap 200ms ease;
}

.column-detail__back-link:hover {
    gap: 12px;
}

@media (max-width: 767px) {
    .column-detail {
        padding: 48px 0 72px;
    }
    .column-detail__inner {
        width: calc(100% - 30px);
    }
    .column-detail__title {
        font-size: 22px;
        margin-bottom: 28px;
    }
    .column-detail__eyecatch {
        margin-bottom: 36px;
    }
    .column-detail__body {
        font-size: 15px;
    }
    .column-detail__body h2 {
        font-size: 1.08em;
        padding: 0.7em 1em;
    }
}

/* ─── Article Single Detail ─── */
.article-single {
    background:
        linear-gradient(90deg, rgba(102, 120, 137, 0.06) 1px, transparent 1px) 0 0 / 84px 84px,
        linear-gradient(0deg, rgba(102, 120, 137, 0.045) 1px, transparent 1px) 0 0 / 84px 84px,
        #f6f8f6;
    font-family: "Zen Kaku Gothic New", var(--font);
    color: #172432;
}

/* スマホでは方眼グリッド線が密集して見えるため、下地の単色のみにする */
@media (max-width: 767px) {
    .article-single {
        background: #f6f8f6;
    }
}

.single-article {
    padding: clamp(118px, 12vw, 174px) 0 clamp(94px, 10vw, 150px);
}

.single-article__inner {
    width: min(1180px, calc(100% - 72px));
    margin: 0 auto;
}

.single-article__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    margin-bottom: clamp(46px, 6vw, 82px);
    color: #718090;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.single-article__breadcrumb a {
    color: inherit;
}

.single-article__breadcrumb em {
    max-width: 52ch;
    overflow: hidden;
    color: #1b2b3a;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.single-article__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    column-gap: clamp(32px, 5vw, 74px);
    row-gap: clamp(18px, 2.2vw, 28px);
    align-items: end;
    margin-bottom: clamp(28px, 4vw, 52px);
}

.single-article__label {
    grid-column: 1 / -1;
    margin: 0;
    color: #667889;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.single-article__header h1 {
    margin: 0;
    color: #102033;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: 0.05em;
}

.single-article__lead {
    margin: 0;
    color: #4e6071;
    font-size: 15px;
    font-weight: 700;
    line-height: 2.1;
    letter-spacing: 0.06em;
}

.single-article__visual-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: clamp(24px, 4vw, 56px);
    align-items: stretch;
    margin-bottom: clamp(36px, 4vw, 56px);
}

.single-article__visual-grid:not(:has(.single-article__main-image)) {
    grid-template-columns: 1fr;
}

.single-article__main-image {
    overflow: hidden;
    margin: 0;
    border-radius: 2px;
    aspect-ratio: 16 / 9;
    background: #dfe8ed;
    box-shadow: 0 38px 100px -80px rgba(18, 36, 52, 0.72);
}

.single-article__main-image img,
.single-article__inline-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-article__side-meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
    min-height: 100%;
    padding: clamp(24px, 3vw, 34px);
    border-top: 1px solid rgba(102, 120, 137, 0.28);
    border-bottom: 1px solid rgba(102, 120, 137, 0.28);
}

.single-article__archive {
    margin: 0;
    color: #667889;
    font-family: "Times New Roman", "Yu Mincho", "YuMincho", serif;
    font-size: 18px;
    font-style: italic;
    letter-spacing: 0.05em;
}

.single-article__archive span {
    display: block;
    margin-top: 10px;
    color: #102033;
    font-size: clamp(56px, 7vw, 96px);
    font-style: normal;
    line-height: 0.85;
}

.single-article__side-meta dl {
    display: grid;
    gap: 18px;
    margin: 0;
}

.single-article__side-meta dl div {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 18px;
    align-items: baseline;
}

.single-article__side-meta dt {
    color: #8a98a6;
    font-family: "Roboto", var(--font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.single-article__side-meta dd {
    margin: 0;
    color: #1f2f3e;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.7;
}

.single-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.single-article__tags li {
    padding: 6px 12px;
    border: 1px solid rgba(102, 120, 137, 0.24);
    border-radius: 999px;
    color: #667889;
    background: rgba(255, 255, 255, 0.54);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* 本文が左、目次が右のサイドバー。HTML では目次が先に来るため、
   読み上げ順は変えずに配置だけ入れ替えている。
   列幅と gap は上の visual-grid（写真＋記事情報）と同じ値にして、
   写真と本文、記事情報と目次の縦のラインをそろえる。 */
.single-article__content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}

.single-article__content-grid--full {
    display: block;
}

/* リード文も本文と同じ左の列に置き、写真の左右幅にそろえる */
.single-article__content-intro {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin: 0 0 clamp(8px, 1.5vw, 18px);
}

.single-article__body-col {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

.single-article__index {
    position: sticky;
    top: 120px;
    grid-column: 2;
    grid-row: 2;
    display: grid;
    gap: 18px;
    padding-top: 8px;
    color: #667889;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.single-article__index span {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    color: #102033;
    font-family: "Times New Roman", "Yu Mincho", "YuMincho", serif;
    font-size: 28px;
    font-style: italic;
    font-weight: 400;
}

/* 「Index」の横に添える日本語ラベル（モダンなエディトリアル調） */
.single-article__index span i {
    align-self: center;
    transform: translateY(3px);
    padding-left: 12px;
    border-left: 1px solid rgba(102, 120, 137, 0.35);
    color: #7c8fa1;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.28em;
}

.single-article__index a {
    color: #667889;
}

.single-article__body {
    color: #26394b;
    font-size: 16px;
    font-weight: 700;
    line-height: 2.15;
    letter-spacing: 0.05em;
}

.single-article__body p {
    margin: 0 0 2em;
}

.single-article__body a {
    color: #1767c8;
    border-bottom: 1.5px solid rgba(23, 103, 200, 0.35);
    transition: color 180ms ease, border-color 180ms ease;
}

.single-article__body a:hover {
    color: #0f4fa0;
    border-bottom-color: #0f4fa0;
}

.single-article__body h2 {
    margin: 2.9em 0 1em;
    color: #102033;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.06em;
}

/* 見出しの上に置く短い線。グレー一本だと本文の区切りに埋もれるため、
   ブランドカラーの実線と淡いグレーをつないで方向性を出している。 */
.single-article__body h2::before {
    display: block;
    width: 56px;
    height: 2px;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #1767c8 0 26px, rgba(102, 120, 137, 0.32) 26px 100%);
    content: "";
}

.single-article__body h3 {
    margin: 2.2em 0 0.7em;
    color: #102033;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

/* 記事本文の先頭が見出しでも、上に余白が二重に入らないようにする。 */
.single-article__body > *:first-child {
    margin-top: 0;
}

.single-article__inline-image {
    overflow: hidden;
    margin: clamp(36px, 5vw, 58px) 0;
    border-radius: 2px;
    aspect-ratio: 16 / 9;
    background: #dfe8ed;
}

.column-inline-visual {
    overflow: hidden;
    margin: clamp(42px, 6vw, 72px) 0 clamp(52px, 7vw, 84px);
    border: 1px solid rgba(102, 120, 137, 0.16);
    border-radius: 10px;
    background: #f3f6f7;
    box-shadow: 0 26px 60px -48px rgba(18, 36, 52, 0.72);
}

.column-inline-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.column-inline-visual figcaption {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 18px 22px 20px;
    color: #516476;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.04em;
}

.column-inline-visual figcaption span {
    padding-top: 0.15em;
    color: #1767c8;
    font-family: "Roboto", var(--font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

.single-article__author {
    width: 100%;
    margin: clamp(52px, 7vw, 84px) 0 0;
    padding-top: clamp(32px, 4vw, 46px);
    border-top: 1px solid rgba(102, 120, 137, 0.18);
}

.single-article__author-kicker {
    margin: 0 0 10px;
    color: #667889;
    font-family: "Roboto", var(--font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.28em;
}

.single-article__author h2 {
    margin: 0 0 22px;
    color: #102033;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

.single-article__author-card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid rgba(102, 120, 137, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(239, 247, 252, 0.62)),
        rgba(255, 255, 255, 0.76);
    box-shadow: 0 30px 80px -70px rgba(16, 32, 51, 0.55);
}

.single-article__author-logo {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border: 1px solid rgba(102, 120, 137, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
}

.single-article__author-logo img {
    width: 72px;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(16, 32, 51, 0.12));
}

.single-article__author-name {
    margin: 0;
    color: #102033;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.single-article__author-role {
    margin: 8px 0 0;
    color: #667889;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.single-article__author-body p:last-child {
    margin: 14px 0 0;
    color: #405267;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.9;
    letter-spacing: 0.05em;
}

.single-article__pager {
    display: flex;
    justify-content: center;
    margin-top: clamp(52px, 7vw, 88px);
    padding-top: 42px;
    border-top: 1px solid rgba(102, 120, 137, 0.18);
}

.single-article__pager a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: 54px;
    padding: 0 28px;
    border: 1px solid rgba(102, 120, 137, 0.28);
    border-radius: 999px;
    color: #102033;
    background: rgba(255, 255, 255, 0.64);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.article-single__contact {
    padding: 0 0 clamp(88px, 10vw, 140px);
}

@media (max-width: 1023px) {
    .single-article {
        padding-top: 104px;
    }

    .single-article__header,
    .single-article__visual-grid,
    .single-article__content-grid {
        grid-template-columns: 1fr;
    }

    /* 1カラムに畳むので、PC 用に指定した配置を戻して DOM 順に並べる */
    .single-article__index,
    .single-article__body-col {
        grid-column: auto;
        grid-row: auto;
    }

    .single-article__index {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 18px;
        padding: 4px 0 18px;
    }

    .single-article__index span {
        width: 100%;
        margin: 0;
    }
}

@media (max-width: 767px) {
    .single-article {
        padding: 88px 0 88px;
    }

    .single-article__inner {
        width: calc(100% - 30px);
    }

    .single-article__breadcrumb {
        margin-bottom: 22px;
    }

    .single-article__breadcrumb em {
        max-width: 26ch;
    }

    .single-article__header {
        gap: 22px;
        margin-bottom: 26px;
    }

    .single-article__header h1 {
        font-size: 24px;
        line-height: 1.45;
    }

    .single-article__lead {
        font-size: 14px;
        line-height: 1.9;
    }

    .single-article__content-intro {
        width: 100%;
        margin: 0;
    }

    .single-article__visual-grid {
        gap: 20px;
        margin-bottom: 36px;
    }

    .single-article__main-image {
        aspect-ratio: 16 / 9;
    }

    .single-article__side-meta {
        padding: 22px 0;
    }

    .single-article__archive span {
        font-size: 58px;
    }

    .single-article__content-grid {
        gap: 34px;
    }

    .single-article__body {
        font-size: 15px;
        line-height: 2;
    }

    .single-article__body h2 {
        font-size: 23px;
    }

    .single-article__body h2::before {
        width: 44px;
        margin-bottom: 16px;
        background: linear-gradient(90deg, #1767c8 0 20px, rgba(102, 120, 137, 0.32) 20px 100%);
    }

    .single-article__body h3 {
        font-size: 17px;
    }

    .column-inline-visual {
        margin: 34px 0 50px;
        border-radius: 8px;
    }

    .column-inline-visual figcaption {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 15px 16px 17px;
        font-size: 12px;
        line-height: 1.75;
    }

    .single-article__author-card {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .single-article__author-logo {
        width: 84px;
        height: 84px;
    }

    .single-article__pager a {
        width: 100%;
    }
}

/* ─── Page Top Button ─── */
.page-top-btn {
    position: fixed;
    right: 22px;
    bottom: 36px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: none;
    background: none;
    color: #1b1e29;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 400ms ease, transform 400ms ease, visibility 0s linear 400ms;
}

.page-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.page-top-btn:hover {
    opacity: 0.6;
}

.page-top-btn__line {
    display: block;
    width: 1px;
    height: 52px;
    background: currentColor;
    transform-origin: top center;
    transition: height 300ms ease;
}

.page-top-btn:hover .page-top-btn__line {
    height: 64px;
}

.page-top-btn__text {
    display: block;
    writing-mode: vertical-rl;
    font-family: "Roboto", var(--font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: inherit;
}

@media (max-width: 767px) {
    .page-top-btn {
        right: 14px;
        bottom: 104px;
        z-index: 35;
        gap: 8px;
        color: #17304a;
    }

    .page-top-btn__line {
        height: 42px;
    }

    .page-top-btn__text {
        font-size: 9px;
        letter-spacing: 0.18em;
    }
}


/* ============================================================
   Privacy Policy page
   ============================================================ */

.policy-hero {
    padding: 160px 0 72px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.7), transparent 46%),
        linear-gradient(160deg, #daedf8 0%, #eef7fd 55%, #d2e9f5 100%);
    color: #1f2e3d;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.policy-hero__inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 60px);
}

.policy-hero__kicker {
    display: block;
    margin: 0 0 16px;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: #738391;
}

.policy-hero__kicker::after {
    display: block;
    width: 28px;
    height: 1px;
    margin-top: 10px;
    background: #738391;
    content: "";
}

.policy-hero h1 {
    margin: 0 0 20px;
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    color: #1a2c3e;
}

.policy-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    color: #7899b4;
    letter-spacing: 0.02em;
}

.policy-hero__breadcrumb a {
    color: #7899b4;
    text-decoration: none;
    transition: color 0.2s;
}

.policy-hero__breadcrumb a:hover {
    color: #3a7ebc;
}

.policy-hero__breadcrumb span {
    color: #adc4d8;
}

.policy-hero__breadcrumb em {
    font-style: normal;
    color: #4a6e88;
}

/* content */

.not-found {
    max-width: 720px;
    margin: 0 auto;
    padding: 80px clamp(20px, 5vw, 60px) 120px;
    color: #1b2430;
    font-family: "Zen Kaku Gothic New", var(--font);
    text-align: center;
}

.not-found__lead {
    margin: 0 0 20px;
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #0d2237;
}

.not-found__text {
    margin: 0 0 48px;
    font-size: 15px;
    line-height: 2;
    color: #5a6a7a;
    letter-spacing: 0.06em;
}

.not-found__actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 64px;
}

.not-found__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 50px;
    background: #0b263f;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: opacity 0.2s;
}

.not-found__btn svg {
    width: 18px;
    height: 18px;
}

.not-found__btn:hover {
    opacity: 0.8;
}

.not-found__btn--contact {
    background: transparent;
    border: 2px solid #0b263f;
    color: #0b263f;
}

.not-found__links {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 48px;
}

.not-found__links-title {
    margin: 0 0 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #8a9aaa;
    text-transform: uppercase;
}

.not-found__links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.not-found__links a {
    font-size: 14px;
    font-weight: 700;
    color: #0d2237;
    letter-spacing: 0.06em;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.not-found__links a:hover {
    color: #4a7fa5;
}

.policy {
    max-width: 860px;
    margin: 0 auto;
    padding: 80px clamp(20px, 5vw, 60px) 120px;
    color: #1b2430;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.policy__lead {
    margin: 0 0 64px;
    font-size: 15px;
    line-height: 2;
    color: #3a4e60;
}

.policy__section {
    margin: 0 0 52px;
}

.policy__section:last-child {
    margin-bottom: 0;
}

.policy__section h2 {
    position: relative;
    margin: 0 0 20px;
    padding: 0 0 0 18px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #1a2c3e;
}

.policy__section h2::before {
    position: absolute;
    top: 0.2em;
    left: 0;
    width: 3px;
    height: 1.1em;
    background: #5aabf0;
    border-radius: 2px;
    content: "";
}

.policy__section p,
.policy__section li {
    font-size: 14px;
    line-height: 2;
    color: #3a4e60;
}

.policy__section ul {
    margin: 0;
    padding: 0 0 0 1.4em;
}

.policy__section ul li {
    margin-bottom: 4px;
}

.policy__section address {
    margin: 0;
    font-style: normal;
    font-size: 14px;
    line-height: 2;
    color: #3a4e60;
}

.policy__updated {
    margin-top: 72px;
    padding-top: 28px;
    border-top: 1px solid rgba(100, 140, 170, 0.2);
    font-family: "Roboto", var(--font);
    font-size: 12px;
    color: #8fa8bc;
    letter-spacing: 0.06em;
    text-align: right;
}

@media (max-width: 767px) {
    .policy-hero {
        padding: 120px 0 56px;
    }

    .policy-hero h1 {
        font-size: 24px;
    }

    .policy {
        padding-top: 56px;
        padding-bottom: 88px;
    }

    .policy__lead {
        margin-bottom: 48px;
        font-size: 14px;
    }

    .policy__section h2 {
        font-size: 15px;
    }
}


/* ============================================================
   404 page
   ============================================================ */

.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding: 120px clamp(24px, 6vw, 80px) 80px;
    text-align: center;
    background:
        radial-gradient(circle at 70% 20%, rgba(90, 171, 240, 0.10), transparent 52%),
        radial-gradient(circle at 20% 80%, rgba(90, 171, 240, 0.07), transparent 44%),
        #f4f7fa;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.not-found__num {
    position: relative;
    display: inline-block;
    margin: 0 0 32px;
    font-family: "Roboto", var(--font);
    font-size: clamp(100px, 22vw, 180px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(90, 171, 240, 0.5);
    user-select: none;
}

.not-found__num::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(100px, 22vw, 180px);
    color: rgba(90, 171, 240, 0.08);
    -webkit-text-stroke: 0;
    content: "404";
    transform: translateY(6px);
    filter: blur(2px);
}

.not-found__title {
    margin: 0 0 16px;
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #1a2c3e;
}

.not-found__lead {
    margin: 0 0 48px;
    font-size: 14px;
    line-height: 2;
    color: #5a7080;
}

.not-found__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 56px;
}

.not-found__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid rgba(90, 171, 240, 0.4);
    border-radius: 100px;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: 13px;
    font-weight: 500;
    color: #2a4a6a;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(6px);
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.not-found__link:hover {
    border-color: #5aabf0;
    background: rgba(90, 171, 240, 0.08);
    color: #1a6aaa;
}

.not-found__link--primary {
    background: #5aabf0;
    border-color: #5aabf0;
    color: #fff;
}

.not-found__link--primary:hover {
    background: #3a96e0;
    border-color: #3a96e0;
    color: #fff;
}

.not-found__home-arrow {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 767px) {
    .not-found__num {
        margin-bottom: 24px;
    }

    .not-found__links {
        flex-direction: column;
        align-items: center;
    }

    .not-found__link {
        width: min(280px, 100%);
        justify-content: center;
    }
}


/* ============================================================
   Sitemap page
   ============================================================ */

.sitemap {
    max-width: 860px;
    margin: 0 auto;
    padding: 80px clamp(20px, 5vw, 60px) 120px;
}

.sitemap__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 52px 40px;
}

.sitemap__group h2 {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(90, 171, 240, 0.35);
    font-family: "Roboto", var(--font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: #5aabf0;
}

.sitemap__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sitemap__list li {
    position: relative;
}

.sitemap__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: 14px;
    font-weight: 400;
    color: #2a3d50;
    text-decoration: none;
    transition: color 0.18s, gap 0.18s;
}

.sitemap__list a::before {
    flex-shrink: 0;
    width: 16px;
    height: 1px;
    background: #b0cfe6;
    content: "";
    transition: width 0.18s, background 0.18s;
}

.sitemap__list a:hover {
    color: #3a7ebc;
    gap: 14px;
}

.sitemap__list a:hover::before {
    width: 20px;
    background: #5aabf0;
}

.sitemap__list--sub {
    margin-top: 4px;
    padding-left: 16px;
}

.sitemap__list--sub a {
    font-size: 13px;
    color: #4a6880;
    padding: 5px 0;
}

.sitemap__list--sub a::before {
    width: 10px;
    background: #c8dff0;
}

@media (max-width: 767px) {
    .sitemap {
        padding-top: 56px;
        padding-bottom: 88px;
    }

    .sitemap__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 24px;
    }
}

@media (max-width: 480px) {
    .sitemap__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* ─── Inner Page Banner ─── */
.page-banner {
    padding: 170px 0 60px;
    background: var(--base);
    color: var(--white);
    overflow: hidden;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.page-banner__inner {
    width: min(1060px, calc(100% - 48px));
    margin: 0 auto;
}

.page-banner__kicker {
    display: block;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.4);
    font-family: "Roboto", var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.page-banner h1 {
    margin: 0;
    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .page-banner {
        padding: 136px 0 44px;
    }
    .page-banner__inner {
        width: calc(100% - 36px);
    }
    .page-banner h1 {
        font-size: 26px;
    }
}


/* Pagination */
.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 52px;
    font-family: "Roboto", var(--font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid rgba(102, 120, 137, 0.28);
    border-radius: 6px;
    color: #667889;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.nav-links .page-numbers:hover {
    border-color: #1767c8;
    color: #1767c8;
}

.nav-links .page-numbers.current {
    background: #1767c8;
    border-color: #1767c8;
    color: #fff;
}

.nav-links .dots {
    border: none;
}


/* =========================================================
   モバイル パフォーマンス最適化レイヤー（2026-07 追加）
   低性能モバイルGPUで重い視覚効果を軽量化しFCP/LCPを改善。
   デスクトップ（768px以上）には一切影響しない。
   ========================================================= */
@media (max-width: 767px) {
    /* すりガラス効果を無効化（backdrop-filterは毎フレーム背景をぼかすため最も高負荷）。
       各要素は元々 rgba 背景を持つので単色半透明として問題なく表示される。 */
    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 全画面ヒーローの無限クロスフェード/ズームを停止（ビューポート全体を常時再描画するため）。
       先頭スライドを静止表示にする。 */
    .hero-media,
    .hero-media img {
        animation: none !important;
    }
    .hero-media {
        opacity: 0 !important;
    }
    .hero-media.is-active {
        opacity: 1 !important;
    }
    .hero-media img {
        transform: none !important;
    }

    /* 半透明バーの視認性を確保（ぼかしが消えるぶん背景を少し濃く） */
    .mobile-floating-cta {
        background: rgba(255, 255, 255, 0.97) !important;
    }
}

/* 低速端末・省電力設定では装飾的な無限アニメと重いぼかしを停止 */
@media (prefers-reduced-motion: reduce) {
    .hero-media,
    .hero-media img {
        animation: none !important;
    }
    /* アニメ停止時も先頭スライドは必ず表示する（真っ黒防止） */
    .hero-media.is-active,
    .hero-media:first-child {
        opacity: 1 !important;
    }
}

/* =========================================================
   対応エリア個別ページ: LPスタイルKV（2026-07 リニューアル）
   参考: 訴求型LPのヒーロー構成（写真コラージュ＋中央白抜き＋
   ボックス見出し＋マーカー強調＋実績バッジ）
   ========================================================= */
.area-lp-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(132px, 13vw, 184px) 24px clamp(52px, 6vw, 80px);
    background: #eef4f9;
    font-family: "Zen Kaku Gothic New", var(--font);
    text-align: center;
}

/* 全面のぼかし背景: 4枚の丸写真が浮いて見えるよう、淡く・ぼかして敷く */
.area-lp-hero::before {
    position: absolute;
    inset: -3%;
    z-index: 0;
    background:
        linear-gradient(rgba(240, 246, 251, 0.78), rgba(240, 246, 251, 0.78)),
        url("../img/glass-film-hero-01.webp") center / cover no-repeat;
    filter: blur(9px);
    content: "";
}

.area-lp-hero__bg { z-index: 0; }

.area-lp-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.area-lp-hero__tile {
    position: absolute;
    background-position: center;
    background-size: cover;
    opacity: 1;
}

/* 外側の角を起点に、中央へ向かってやわらかく溶けるマスク（カンプ再現） */
.area-lp-hero__tile--l1 { top: 0; left: 0; width: 37%; height: 70%;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 46%, transparent 80%);
    mask-image: radial-gradient(120% 120% at 0% 0%, #000 46%, transparent 80%); }
.area-lp-hero__tile--l2 { bottom: 0; left: 0; width: 39%; height: 66%;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 100%, #000 46%, transparent 80%);
    mask-image: radial-gradient(120% 120% at 0% 100%, #000 46%, transparent 80%); }
.area-lp-hero__tile--r1 { top: 0; right: 0; width: 41%; height: 66%;
    -webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000 46%, transparent 80%);
    mask-image: radial-gradient(120% 120% at 100% 0%, #000 46%, transparent 80%); }
.area-lp-hero__tile--r2 { right: 0; bottom: 0; width: 41%; height: 70%;
    -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 46%, transparent 80%);
    mask-image: radial-gradient(120% 120% at 100% 100%, #000 46%, transparent 80%); }

.area-lp-hero__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 44% 62% at 50% 46%,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.7) 55%,
        rgba(255, 255, 255, 0) 80%);
}

/* ヒーロー下端の青いグラデーションライン */
.area-lp-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: clamp(10px, 1.3vw, 16px);
    background: linear-gradient(90deg, #a7d4f3, #2f8bdd 45%, #1767c8);
    content: "";
}

.area-lp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
}

/* 背景写真は最初から見せ、中央のコピーを順番に立ち上げる */
.area-lp-hero__line1,
.area-lp-hero__line2,
.area-lp-hero__line3,
.area-lp-hero__badges li,
.area-lp-hero__pill {
    opacity: 0;
    animation: area-lp-copy-in 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.area-lp-hero__line1 { animation-delay: 0.12s; }
.area-lp-hero__line2 { animation-delay: 0.28s; }
.area-lp-hero__line3 { animation-delay: 0.42s; }
.area-lp-hero__badges li:nth-child(1) { animation-delay: 0.62s; }
.area-lp-hero__badges li:nth-child(2) { animation-delay: 0.72s; }
.area-lp-hero__badges li:nth-child(3) { animation-delay: 0.82s; }
.area-lp-hero__pill { animation-delay: 0.98s; }

@keyframes area-lp-copy-in {
    0% { opacity: 0; transform: translateY(18px) scale(0.97); }
    65% { opacity: 1; transform: translateY(-2px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .area-lp-hero__line1,
    .area-lp-hero__line2,
    .area-lp-hero__line3,
    .area-lp-hero__badges li,
    .area-lp-hero__pill {
        opacity: 1;
        animation: none;
    }
}

.area-lp-hero__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: clamp(22px, 3vw, 34px);
    color: #6d8093;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.area-lp-hero__breadcrumb a { color: #6d8093; }
.area-lp-hero__breadcrumb em { font-style: normal; color: #2a3c4f; }

.area-lp-hero__line1 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px 10px;
    margin: 0 0 14px;
    color: #17263a;
    font-size: clamp(26px, 3.6vw, 46px);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.area-lp-hero__city {
    display: inline-block;
    padding: 2px 20px 6px;
    border-radius: 12px;
    background: linear-gradient(180deg, #2f8bdd, #1767c8);
    color: #fff;
    font-size: clamp(30px, 4.2vw, 54px);
    box-shadow: 0 8px 20px rgba(23, 103, 200, 0.28);
}

.area-lp-hero__line2 {
    position: relative;
    display: inline-block;
    margin: 0 0 4px;
    color: #17263a;
    font-size: clamp(19px, 2.6vw, 31px);
    font-weight: 900;
    letter-spacing: 0.06em;
}

.area-lp-hero__line2::before,
.area-lp-hero__line2::after {
    position: absolute;
    top: 50%;
    width: 3px;
    height: 1.25em;
    border-radius: 2px;
    background: #17263a;
    content: "";
}

.area-lp-hero__line2::before { left: -1.1em; transform: translateY(-50%) rotate(-24deg); }
.area-lp-hero__line2::after  { right: -1.1em; transform: translateY(-50%) rotate(24deg); }

.area-lp-hero__line3 {
    margin: 0 0 22px;
}

.area-lp-hero__line3 em {
    position: relative;
    display: inline-block;
    padding: 0 6px;
    color: #1767c8;
    font-size: clamp(40px, 6.4vw, 78px);
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.25;
}

/* 黄色いマーカー: メインコピーに続いて左から伸びる */
.area-lp-hero__line3 em::after {
    position: absolute;
    right: 0;
    bottom: 0.04em;
    left: 0;
    z-index: -1;
    height: 0.42em;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 222, 120, 0) 0%, rgba(255, 226, 130, 0.9) 55%, #ffd76a 100%);
    box-shadow: 0 6px 18px rgba(255, 205, 80, 0.4);
    transform: scaleX(0);
    transform-origin: left center;
    animation: area-lp-underline 800ms cubic-bezier(0.22, 0.61, 0.36, 1) 0.82s forwards;
    content: "";
}

@keyframes area-lp-underline {
    0%   { transform: scaleX(0); }
    55%  { transform: scaleX(1.12); }
    75%  { transform: scaleX(0.94); }
    88%  { transform: scaleX(1.04); }
    100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .area-lp-hero__line3 em::after {
        transform: scaleX(1);
        animation: none;
    }
}

.area-lp-hero__pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: clamp(32px, 4vw, 52px) 0 14px;
    padding: clamp(13px, 1.8vw, 18px) clamp(28px, 4vw, 52px);
    border-radius: 999px;
    background: linear-gradient(90deg, #0d3a8a 0%, #1767c8 50%, #3fa0e8 100%);
    color: #fff;
    font-size: clamp(14px, 1.7vw, 19px);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(23, 103, 200, 0.4);
    transition: opacity 0.2s, box-shadow 0.2s;
    isolation: isolate;
}

.area-lp-hero__pill::before,
.area-lp-hero__pill::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 3px solid rgba(47, 145, 225, 0.68);
    border-radius: inherit;
    pointer-events: none;
    content: "";
    box-shadow: 0 0 18px rgba(47, 145, 225, 0.28);
    animation: area-lp-pill-ripple 2.35s ease-out infinite;
}

.area-lp-hero__pill::after {
    animation-delay: 1.175s;
}

@keyframes area-lp-pill-ripple {
    0% {
        opacity: 0.68;
        transform: scale(1);
    }
    78%, 100% {
        opacity: 0;
        transform: scale(1.22, 1.62);
    }
}

.area-lp-hero__pill:hover {
    opacity: 0.88;
    box-shadow: 0 12px 30px rgba(23, 103, 200, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .area-lp-hero__pill::before,
    .area-lp-hero__pill::after {
        animation: none;
    }
}

.area-lp-hero__pill-arrow {
    font-size: 1.3em;
    line-height: 1;
    font-weight: 400;
}

.area-lp-hero__brand {
    margin: 0;
    color: #17263a;
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 800;
    letter-spacing: 0.12em;
}

.area-lp-hero__brand span {
    display: block;
}

.area-lp-hero__brand b {
    display: block;
    margin-top: 2px;
    font-family: "Roboto", var(--font);
    font-size: clamp(22px, 2.6vw, 30px);
    letter-spacing: 0.08em;
    color: #1767c8;
}

.area-lp-hero__brand-logo {
    display: block;
    margin: 4px auto 0;
    width: clamp(80px, 10vw, 120px);
    height: auto;
}

.area-lp-hero__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 20px);
    margin: clamp(20px, 3vw, 34px) 0 0;
    padding: 0;
    list-style: none;
}

.area-lp-hero__badges li {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 14px);
    padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2.2vw, 26px);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(23, 103, 200, 0.16);
}

.area-lp-hero__badge-icon {
    display: block;
    width: clamp(30px, 3.4vw, 44px);
    height: clamp(30px, 3.4vw, 44px);
    color: #1767c8;
}

.area-lp-hero__badge-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.area-lp-hero__badge-icon img {
    display: block;
    width: 34px;
    height: auto;
}

.area-lp-hero__badge-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.area-lp-hero__badge-text span {
    color: #43596d;
    font-size: clamp(10px, 1.1vw, 13px);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.area-lp-hero__badge-text b {
    color: #1767c8;
    font-size: clamp(17px, 2.1vw, 25px);
    font-weight: 900;
    letter-spacing: 0.06em;
}

/* 手書きの「お任せください！」: コピーの後にサインのように現れる */
.area-lp-hero__sign {
    position: absolute;
    top: -5.5em;
    right: clamp(-56px, -4vw, 6px);
    width: clamp(180px, 20vw, 252px);
    height: auto;
    transform: rotate(-6deg);
    transform-origin: center bottom;
    opacity: 0;
    animation: area-lp-sign-in 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 1.12s forwards;
}

@keyframes area-lp-sign-in {
    0%   { opacity: 0; transform: rotate(-6deg) scale(0.8) translateY(8px); }
    60%  { opacity: 1; transform: rotate(-6deg) scale(1.06); }
    100% { opacity: 1; transform: rotate(-6deg) scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .area-lp-hero__sign {
        opacity: 1;
        animation: none;
    }
}

@media (max-width: 767px) {
    .area-lp-hero {
        padding: 108px 18px 44px;
    }
    .area-lp-hero--hakusan::before {
        background: #eef4f9;
        filter: none;
    }
    .area-lp-hero--hakusan .area-lp-hero__bg {
        background-color: #dceaf2;
        background-image:
            url("../img/hakusan-hero-mobile-composite.webp?v=202607202201"),
            url("data:image/webp;base64,UklGRsABAABXRUJQVlA4ILQBAADQCwCdASowAEQAP2WUxVmzKSejrvbcAmAsiUAYHDggQPnWVXU6WzfSXRFcHh4fpaaC4otIrNv1XaodtNR9DtRhXBaJ8P+zh/3yHfpwYhyLOcB+ztfidspmp8uUekBwurnGrI+MdUiAAP7DdLYUPOZu+G0S0tEV5LfF98D+fWX2VWaeXDUEnAZmaHGfm1asnf7uXjlHdjQJKWi6dBAhpekt5HDlojNmbmbuVuEQ3jArofGgPOXOJzsjEb2dAGeXwbXISx6NZp463RmIRFgMTmx4oCDNN5qlnM4mhSjjIe/5vp9YMr67HDuXvzIpyqo3tnvRRTwF627XPicqTUfs9w3XdFiZ53LN3RPmMWj3NdMPAgtR+bN6oAXCiWfZVBcVw9PxH4kUmsJGljMk3swER2n67Ov/aQiqRAu6sUWCu0Ci6PQILraz2HWWp/TlamKlsOnevUutZnGz2YNHoBOfMA1Zau266moQtxDT8Z0dDqp0sroa/exi2fd7jr+Akn/xCm9R5h9Cb7uIGoFBhR7GRUdE9PTAp0mjPBB43Fh3IAVuUD/YhCAPyYkw4KiKSZUEMO0MhYAA=");
        background-position: center, center;
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
    }
    .area-lp-hero--hakusan .area-lp-hero__tile {
        display: none;
        background-image: none !important;
    }
    .area-lp-hero__tile--l1 { top: 0; left: 0; width: 62%; height: 52%; }
    .area-lp-hero__tile--l2 { bottom: 0; left: 0; width: 58%; height: 48%; }
    .area-lp-hero__tile--r1 { top: 0; right: 0; width: 62%; height: 52%; }
    .area-lp-hero__tile--r2 { right: 0; bottom: 0; width: 58%; height: 48%; }
    .area-lp-hero__glow {
        background: radial-gradient(ellipse 78% 56% at 50% 44%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.65) 55%,
            rgba(255, 255, 255, 0) 82%);
    }
    .area-lp-hero__line1 { margin-bottom: 7px; }
    .area-lp-hero__line2::before { left: -0.9em; }
    .area-lp-hero__line2::after { right: -0.9em; }
    /* お任せください！を右上に浮かせる（レイアウトを押し下げない絶対配置） */
    .area-lp-hero__sign {
        top: -3.6em;
        right: -2px;
        width: 150px;
    }
    .area-lp-hero__badges { gap: 8px; }
    .area-lp-hero__badges li {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 8px;
        gap: 6px;
        border-radius: 14px;
        width: 100px;
        height: 100px;
        text-align: center;
        box-sizing: border-box;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
    }
    .area-lp-hero__badge-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
    .area-lp-hero__badge-text { align-items: center; }
    .area-lp-hero__badge-text span { font-size: 11px; }
    .area-lp-hero__badge-text b { font-size: 18px; }
}

/* ============================================
   エリアLP：お任せくださいセクション
   ============================================ */
/* 白山市: 参考LPを踏襲した「こんなお悩みありませんか？」 */
.hakusan-window-worries {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #071a31;
    color: #fff;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.hakusan-window-worries__visual,
.hakusan-window-worries__shade {
    position: absolute;
    inset: 0 0 142px;
    z-index: -2;
}

.hakusan-window-worries__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    filter: saturate(0.94) contrast(1.02);
}

.hakusan-window-worries__shade {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(3, 15, 31, 0.68) 0%, rgba(3, 15, 31, 0.18) 38%, rgba(3, 15, 31, 0.56) 100%),
        linear-gradient(90deg, rgba(3, 15, 31, 0.24) 0%, rgba(3, 15, 31, 0.04) 58%, rgba(3, 15, 31, 0.18) 100%);
    pointer-events: none;
}

.hakusan-window-worries__inner {
    position: relative;
    width: min(100%, 1080px);
    min-height: 900px;
    margin: 0 auto;
    padding: 74px 28px 42px;
}

.hakusan-window-worries__head {
    position: relative;
    z-index: 3;
    text-align: center;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

.hakusan-window-worries__head p {
    margin: 0 0 2px;
    font-size: clamp(28px, 4.7vw, 58px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.035em;
}

.hakusan-window-worries__head p span,
.hakusan-window-worries__head h2 span,
.hakusan-window-worries__bubble strong {
    color: #f6dfbb;
}

.hakusan-window-worries__head h2 {
    margin: 0;
    font-size: clamp(31px, 4.4vw, 54px);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.045em;
}

.hakusan-window-worries__bubbles {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hakusan-window-worries__bubble {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: 270px;
    min-height: 112px;
    padding: 24px 34px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 48% 52% 46% 54% / 55% 44% 56% 45%;
    background: rgba(0, 3, 10, 0.79);
    color: #fff;
    font-size: clamp(16px, 1.9vw, 23px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.025em;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.64);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(2px);
}

.hakusan-window-worries__bubble::before,
.hakusan-window-worries__bubble::after {
    position: absolute;
    border-radius: 50%;
    background: inherit;
    content: "";
}

.hakusan-window-worries__bubble::before {
    width: 23px;
    height: 18px;
}

.hakusan-window-worries__bubble::after {
    width: 11px;
    height: 9px;
}

.hakusan-window-worries__bubble--heat {
    top: 252px;
    left: 8%;
    transform: rotate(-1deg);
}

.hakusan-window-worries__bubble--heat::before {
    right: -17px;
    bottom: 8px;
}

.hakusan-window-worries__bubble--heat::after {
    right: -34px;
    bottom: -3px;
}

.hakusan-window-worries__bubble--cold {
    top: 430px;
    left: 2%;
    border-radius: 54% 46% 52% 48% / 49% 55% 45% 51%;
}

.hakusan-window-worries__bubble--cold::before {
    right: -16px;
    bottom: 2px;
}

.hakusan-window-worries__bubble--cold::after {
    right: -35px;
    bottom: -10px;
}

.hakusan-window-worries__bubble--privacy {
    top: 390px;
    right: 2%;
    border-radius: 46% 54% 56% 44% / 53% 45% 55% 47%;
}

.hakusan-window-worries__bubble--privacy::before {
    bottom: -13px;
    left: 34px;
}

.hakusan-window-worries__bubble--privacy::after {
    bottom: -29px;
    left: 16px;
}

.hakusan-window-worries__bubble--safety {
    right: 8%;
    bottom: 62px;
    min-width: 320px;
    border-radius: 52% 48% 45% 55% / 48% 55% 45% 52%;
}

.hakusan-window-worries__bubble--safety::before {
    top: -15px;
    left: 44px;
}

.hakusan-window-worries__bubble--safety::after {
    top: -31px;
    left: 29px;
}

.hakusan-window-worries__cta {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: auto minmax(300px, 500px);
    align-items: center;
    justify-content: center;
    gap: 26px;
    min-height: 142px;
    padding: 20px 28px;
    background: linear-gradient(135deg, #063bcf 0%, #0757ed 100%);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);
}

.hakusan-window-worries__cta p {
    margin: 0;
    text-align: center;
    line-height: 1.25;
}

.hakusan-window-worries__cta p span {
    display: block;
    color: #dfff48;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hakusan-window-worries__cta p strong {
    display: block;
    margin-top: 3px;
    font-size: clamp(20px, 2.3vw, 30px);
    font-weight: 900;
}

.hakusan-window-worries__cta a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    padding: 14px 54px 15px 28px;
    border-radius: 9px;
    background: linear-gradient(180deg, #efff28 0%, #ccea25 100%);
    color: #132039;
    font-size: clamp(17px, 2vw, 23px);
    font-weight: 900;
    letter-spacing: 0.035em;
    text-decoration: none;
    box-shadow: 0 6px 0 rgba(1, 25, 91, 0.32), 0 10px 22px rgba(0, 0, 0, 0.2);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.hakusan-window-worries__cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 rgba(1, 25, 91, 0.28), 0 14px 24px rgba(0, 0, 0, 0.24);
}

.hakusan-window-worries__cta a span {
    position: absolute;
    top: 50%;
    right: 22px;
    font-size: 30px;
    line-height: 1;
    transform: translateY(-53%);
}

@media (max-width: 767px) {
    .hakusan-window-worries__visual,
    .hakusan-window-worries__shade {
        bottom: 154px;
    }

    .hakusan-window-worries__visual img {
        object-position: 63% top;
    }

    .hakusan-window-worries__inner {
        min-height: 940px;
        padding: 43px 14px 28px;
    }

    .hakusan-window-worries__head p {
        margin-bottom: 5px;
        font-size: 34px;
    }

    .hakusan-window-worries__head h2 {
        font-size: 28px;
        line-height: 1.32;
        letter-spacing: 0.03em;
    }

    .hakusan-window-worries__bubble {
        min-width: 0;
        min-height: 0;
        width: max-content;
        max-width: calc(100% - 34px);
        padding: 17px 24px 18px;
        font-size: 16px;
        line-height: 1.48;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .hakusan-window-worries__bubble--heat {
        top: 205px;
        left: 15px;
    }

    .hakusan-window-worries__bubble--cold {
        top: 337px;
        left: 12px;
    }

    .hakusan-window-worries__bubble--privacy {
        top: 505px;
        right: 11px;
    }

    .hakusan-window-worries__bubble--safety {
        right: 16px;
        bottom: 44px;
        min-width: 0;
    }

    .hakusan-window-worries__bubble::before {
        width: 18px;
        height: 14px;
    }

    .hakusan-window-worries__bubble::after {
        width: 9px;
        height: 7px;
    }

    .hakusan-window-worries__cta {
        display: block;
        min-height: 154px;
        padding: 13px 18px 18px;
    }

    .hakusan-window-worries__cta p span {
        display: inline;
        margin-right: 5px;
        font-size: 12px;
    }

    .hakusan-window-worries__cta p strong {
        display: inline;
        font-size: 18px;
    }

    .hakusan-window-worries__cta a {
        min-height: 60px;
        margin-top: 11px;
        padding: 12px 46px 13px 22px;
        font-size: 17px;
    }
}

/* 白山市「お悩み」: シンプルな住まい手の吹き出し */
.hakusan-window-worries__inner {
    width: min(100%, 1120px);
    min-height: 0;
    padding: 64px 28px 60px;
}

.hakusan-window-worries__dialogues {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 42px 0 0;
    padding: 0;
    list-style: none;
}

.hakusan-window-worries__dialogue {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    min-width: 0;
    margin: 0;
    padding: 24px 26px 24px 22px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 22px 50px rgba(1, 16, 35, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    color: #173454;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hakusan-window-worries__dialogue:nth-child(2) {
    transition-delay: 160ms;
}

.hakusan-window-worries__dialogue:nth-child(3) {
    transition-delay: 240ms;
}

.hakusan-window-worries__dialogue:nth-child(4) {
    transition-delay: 320ms;
}

.hakusan-window-worries__dialogue:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 124px;
    padding: 24px 22px 24px 26px;
}

.hakusan-window-worries__dialogue:nth-child(even) .hakusan-window-worries__person {
    order: 2;
}

.hakusan-window-worries__dialogue:nth-child(even) p {
    order: 1;
}

.hakusan-window-worries__person {
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    overflow: visible;
}

.hakusan-window-worries__person img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.hakusan-window-worries__dialogue > p {
    position: relative;
    margin: 0;
    padding: 19px 22px;
    border-radius: 20px;
    background: #edf5fb;
    color: #203a57;
    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.025em;
    text-shadow: none;
}

.hakusan-window-worries__dialogue > p::before {
    position: absolute;
    top: 50%;
    left: -13px;
    width: 24px;
    height: 24px;
    background: inherit;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    content: "";
    transform: translateY(-50%);
}

.hakusan-window-worries__dialogue:nth-child(even) > p::before {
    right: -13px;
    left: auto;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.hakusan-window-worries__dialogue > p strong {
    color: #075fbd;
    font-weight: 900;
}

@media (max-width: 767px) {
    .hakusan-window-worries__inner {
        padding: 40px 12px 30px;
    }

    .hakusan-window-worries__dialogues {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 28px;
    }

    .hakusan-window-worries__dialogue {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 8px;
        padding: 16px 14px 16px 12px;
        border-radius: 23px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .hakusan-window-worries__dialogue:nth-child(even) {
        grid-template-columns: minmax(0, 1fr) 88px;
        padding: 16px 12px 16px 14px;
    }

    .hakusan-window-worries__dialogue > p {
        padding: 14px 15px;
        border-radius: 15px;
        font-size: 13px;
        line-height: 1.7;
    }

    .hakusan-window-worries__dialogue > p::before {
        left: -9px;
        width: 17px;
        height: 18px;
    }

    .hakusan-window-worries__dialogue:nth-child(even) > p::before {
        right: -9px;
        left: auto;
    }
}

.area-lp-worry {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 8vw, 110px) 24px;
    background: #e8eef6;
}

.area-lp-worry__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.area-lp-worry__corner {
    position: absolute;
    display: block;
    overflow: hidden;
    width: clamp(190px, 24vw, 350px);
    aspect-ratio: 1;
    opacity: 0.82;
    isolation: isolate;
}

.area-lp-worry__corner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.area-lp-worry__corner::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(216, 235, 252, 0.18), rgba(255, 255, 255, 0.28));
    content: "";
}

.area-lp-worry__corner::after {
    position: absolute;
    z-index: 2;
    width: 82%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.28),
        0 0 0 16px rgba(255, 255, 255, 0.2);
    content: "";
}

.area-lp-worry__corner--tr {
    top: 0;
    right: 0;
    clip-path: ellipse(96% 88% at 100% 0);
}

.area-lp-worry__corner--tr::after {
    bottom: -38%;
    left: -36%;
}

.area-lp-worry__corner--bl {
    bottom: 0;
    left: 0;
    clip-path: ellipse(96% 88% at 0 100%);
}

.area-lp-worry__corner--bl::after {
    top: -38%;
    right: -36%;
}

.area-lp-worry__circle {
    position: absolute;
    border-radius: 50%;
}

.area-lp-worry__circle--navy {
    top: clamp(-90px, -7vw, -50px);
    right: clamp(-60px, -4vw, -20px);
    width: clamp(120px, 16vw, 220px);
    height: clamp(120px, 16vw, 220px);
    background: #1d4e9e;
    opacity: 0.9;
}

.area-lp-worry__circle--pale {
    top: 18%;
    left: clamp(-80px, -5vw, -30px);
    width: clamp(90px, 12vw, 170px);
    height: clamp(90px, 12vw, 170px);
    background: #ffffff;
    opacity: 0.55;
}

.area-lp-worry__circle--dot {
    bottom: -34px;
    right: 16%;
    width: clamp(46px, 6vw, 80px);
    height: clamp(46px, 6vw, 80px);
    background: #bcd2ea;
    opacity: 0.8;
}

.area-lp-worry__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(30px, 4vw, 56px) clamp(20px, 3.5vw, 48px);
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(0, 1.9fr) minmax(160px, 1fr);
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    text-align: center;
    background: #fff;
    border-radius: clamp(18px, 2.6vw, 30px);
    box-shadow: 0 14px 36px rgba(23, 103, 200, 0.14);
}

.area-lp-worry__inner::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 24px 20px 0 20px;
    border-color: #fff transparent transparent transparent;
}

.area-lp-worry__lead {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 clamp(14px, 2vw, 22px);
}

.area-lp-worry__tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 6px;
    background: #1767c8;
    color: #fff;
    font-size: clamp(11px, 1.2vw, 14px);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.area-lp-worry__who {
    margin: 0 0 clamp(8px, 1.2vw, 14px);
    color: #17263a;
    font-size: clamp(17px, 2.2vw, 26px);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.area-lp-worry__who b {
    color: #1767c8;
    font-size: 1.4em;
    letter-spacing: 0.04em;
}

.area-lp-worry__title {
    margin: 0;
    color: #17263a;
    font-size: clamp(22px, 3.4vw, 40px);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

.area-lp-worry__title em {
    position: relative;
    font-style: normal;
    white-space: nowrap;
}

.area-lp-worry__title em b {
    font-family: "Roboto", var(--font);
    color: #1767c8;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.area-lp-worry__title em::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: -0.28em;
    height: 0.32em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 16 2 30 7 T 60 7 T 90 7 T 118 6' fill='none' stroke='%236aa9e0' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* 左右カラム（写真＋イラスト／写真＋特徴） */
.area-lp-worry__col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2vw, 26px);
}

.area-lp-worry__photo {
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(23, 103, 200, 0.18);
}

.area-lp-worry__photo--left { --worry-rot: -4deg; transform: rotate(-4deg); }
.area-lp-worry__photo--right { --worry-rot: 3deg; transform: rotate(3deg); }

.area-lp-worry__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 実際の施工写真は、横長の枠内でも代表者の顔が入る位置で表示 */
.area-lp-worry__photo--left.area-lp-worry__photo--actual img {
    object-position: center 14%;
}

/* スクロールで「ポン」と飛び出す */
.area-lp-worry__photo {
    opacity: 0;
    transform: rotate(var(--worry-rot, 0deg)) scale(0.5);
    transform-origin: center center;
}

.area-lp-worry__inner.is-visible .area-lp-worry__photo {
    animation: area-lp-worry-pop 640ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.area-lp-worry__inner.is-visible .area-lp-worry__photo--left { animation-delay: 140ms; }
.area-lp-worry__inner.is-visible .area-lp-worry__photo--right { animation-delay: 340ms; }

@keyframes area-lp-worry-pop {
    0% {
        opacity: 0;
        transform: rotate(var(--worry-rot, 0deg)) scale(0.5);
    }
    55% {
        opacity: 1;
        transform: rotate(var(--worry-rot, 0deg)) scale(1.08);
    }
    75% {
        transform: rotate(var(--worry-rot, 0deg)) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: rotate(var(--worry-rot, 0deg)) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .area-lp-worry__photo {
        opacity: 1;
        transform: rotate(var(--worry-rot, 0deg));
    }
    .area-lp-worry__inner.is-visible .area-lp-worry__photo {
        animation: none;
    }
}

.area-lp-worry__house {
    width: clamp(120px, 12vw, 180px);
    height: auto;
}

.area-lp-worry__window-watercolor {
    display: none;
    width: clamp(120px, 12vw, 170px);
    height: auto;
    margin-top: -10px;
    mix-blend-mode: multiply;
}

.area-lp-worry__features {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.area-lp-worry__features li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 clamp(8px, 1vw, 14px);
    color: #17263a;
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.area-lp-worry__features li + li {
    border-left: 1px solid #c9d8ea;
}

.area-lp-worry__feature-icon {
    display: block;
    width: clamp(30px, 3vw, 40px);
    height: clamp(30px, 3vw, 40px);
    color: #1d4e9e;
}

.area-lp-worry__feature-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.area-lp-worry__accent {
    position: absolute;
    z-index: 3;
    display: block;
    width: clamp(70px, 7vw, 96px);
    pointer-events: none;
}

.area-lp-worry__accent img {
    display: block;
    width: 100%;
    height: auto;
}

.area-lp-worry__accent--rays {
    top: clamp(-62px, -4vw, -38px);
    left: clamp(-46px, -3vw, -24px);
    transform: rotate(-8deg);
}

.area-lp-worry__accent--sparkles {
    top: clamp(-48px, -3vw, -28px);
    right: clamp(-52px, -3vw, -26px);
    transform: rotate(4deg);
}

@media (max-width: 900px) {
    .area-lp-worry__inner {
        grid-template-columns: 1fr 1fr;
    }
    .area-lp-worry__main {
        grid-column: 1 / -1;
        order: -1;
    }
}

@media (max-width: 767px) {
    .area-lp-worry {
        padding: 46px 18px 60px;
    }
    .area-lp-worry__inner {
        padding: 28px 18px 34px;
        gap: 20px;
    }
    .area-lp-worry__lead {
        gap: 8px;
    }
    .area-lp-worry__title {
        line-height: 1.7;
    }
    .area-lp-worry__house {
        width: 110px;
    }
    .area-lp-worry__features li {
        font-size: 10px;
        padding: 0 6px;
    }
}

/* 対応エリア個別ページ: 添付カンプに合わせたスマートフォンレイアウト */
@media (max-width: 767px) {
    .area-lp-worry {
        padding: 72px 27px 82px;
        background: #eaf1fb;
    }

    .area-lp-worry__corner {
        width: clamp(118px, 42vw, 178px);
        opacity: 0.7;
    }

    .area-lp-worry__corner--tr {
        top: 0;
    }

    .area-lp-worry__corner--bl {
        bottom: 0;
    }

    .area-lp-worry__circle--navy {
        top: -35px;
        right: -43px;
        width: 112px;
        height: 112px;
        opacity: 0.68;
    }

    .area-lp-worry__circle--pale {
        top: -22px;
        left: -34px;
        width: 88px;
        height: 88px;
        opacity: 0.42;
    }

    .area-lp-worry__circle--dot {
        right: auto;
        bottom: -28px;
        left: -23px;
        width: 82px;
        height: 82px;
        background: #8cb9ec;
        opacity: 0.48;
    }

    .area-lp-worry__inner {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        gap: 0;
        min-height: 490px;
        padding: 0 16px 28px;
        border-radius: 22px;
        box-shadow: 0 13px 30px rgba(49, 98, 157, 0.09);
    }

    .area-lp-worry__inner::after {
        bottom: -19px;
        border-width: 20px 17px 0;
    }

    .area-lp-worry__col {
        display: contents;
    }

    .area-lp-worry__photo--left {
        grid-column: 2 / 8;
        grid-row: 1;
        z-index: 2;
        align-self: start;
        width: calc(100% + 12px);
        margin: -31px 0 0 -5px;
        aspect-ratio: 1.12 / 1;
        border: 5px solid #fff;
        border-radius: 16px;
        --worry-rot: -7deg;
        transform: rotate(-7deg);
        box-shadow: 0 8px 20px rgba(30, 67, 111, 0.17);
    }

    .area-lp-worry__photo--left::before {
        content: none;
    }

    .area-lp-worry__photo--left img {
        object-position: 24% 45%;
    }

    .area-lp-worry__main {
        grid-column: 1 / -1;
        grid-row: 2;
        z-index: 1;
        margin-top: 7px;
    }

    .area-lp-worry__lead {
        gap: 7px;
        margin-bottom: 15px;
    }

    .area-lp-worry__tag {
        min-width: 72px;
        padding: 5px 10px 6px;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0.04em;
        box-shadow: 0 3px 8px rgba(23, 103, 200, 0.16);
    }

    .area-lp-worry__who {
        margin-bottom: 0;
        font-size: 21px;
        line-height: 1.5;
        letter-spacing: 0.03em;
    }

    .area-lp-worry__who b {
        font-size: 1.45em;
    }

    .area-lp-worry__title {
        font-size: clamp(22px, 6.4vw, 27px);
        line-height: 1.5;
        letter-spacing: 0.02em;
    }

    .area-lp-worry__title em {
        display: inline-block;
        padding: 0 2px;
    }

    .area-lp-worry__title em b {
        font-size: 1.24em;
    }

    .area-lp-worry__title em::after {
        right: 0;
        bottom: -0.19em;
        left: 0;
        height: 0.28em;
    }

    .area-lp-worry__house {
        grid-column: 1 / 6;
        grid-row: 3;
        align-self: end;
        justify-self: center;
        width: 112px;
        margin: 32px -7px 4px 0;
    }

    .area-lp-worry__window-watercolor {
        display: block;
        grid-column: 1 / 6;
        grid-row: 3;
        align-self: end;
        justify-self: center;
        width: 112px;
        margin: 24px -4px -4px 0;
        opacity: 0;
        transform: scale(0.5);
        transform-origin: center center;
    }

    .area-lp-worry__inner.is-visible .area-lp-worry__window-watercolor {
        animation: area-lp-worry-pop 640ms cubic-bezier(0.22, 0.61, 0.36, 1) 240ms both;
    }

    @media (prefers-reduced-motion: reduce) {
        .area-lp-worry__window-watercolor {
            opacity: 1;
            transform: none;
        }

        .area-lp-worry__inner.is-visible .area-lp-worry__window-watercolor {
            animation: none;
        }
    }

    .area-lp-worry__photo--right {
        grid-column: 6 / 13;
        grid-row: 3;
        z-index: 1;
        align-self: end;
        width: calc(100% + 15px);
        margin: 38px 0 0 -4px;
        aspect-ratio: 1.5 / 1;
        border: 5px solid #fff;
        border-radius: 15px;
        --worry-rot: 4deg;
        transform: rotate(4deg);
        box-shadow: 0 8px 20px rgba(30, 67, 111, 0.14);
    }

    .area-lp-worry__photo--right img {
        object-position: center 40%;
    }

    .area-lp-worry__accent {
        position: static;
        display: block;
        z-index: 3;
        align-self: start;
        pointer-events: none;
    }

    .area-lp-worry__accent img {
        display: block;
        width: 100%;
        height: auto;
    }

    .area-lp-worry__accent--rays {
        grid-column: 1 / 4;
        grid-row: 1;
        justify-self: start;
        width: 58px;
        margin: -54px 0 0 -19px;
        transform: rotate(-28deg);
    }

    .area-lp-worry__accent--sparkles {
        grid-column: 10 / 13;
        grid-row: 3;
        justify-self: end;
        width: 66px;
        margin: 3px -24px 0 0;
        transform: rotate(4deg);
    }

    .area-lp-worry__features {
        grid-column: 1 / -1;
        grid-row: 4;
        width: 100%;
        margin-top: 29px;
    }

    .area-lp-worry__features li {
        flex: 1 1 0;
        gap: 7px;
        min-width: 0;
        padding: 0 7px;
        font-size: 10px;
        line-height: 1.55;
        letter-spacing: 0;
    }

    .area-lp-worry__features li + li {
        border-left: 1px dashed #72ace3;
    }

    .area-lp-worry__feature-icon {
        width: 39px;
        height: 39px;
        color: #1c4c91;
    }
}

/* ============================================
   エリアLP：地域固有コンテンツ（気候・住宅事情）
   ============================================ */
.area-local-note__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.4vw, 28px);
    max-width: 1100px;
    margin: 0 auto;
}

.area-local-note__card {
    position: relative;
    padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 28px) clamp(22px, 2.8vw, 32px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(23, 103, 200, 0.10);
    border-top: 3px solid #1767c8;
}

.area-local-note__num {
    margin: 0 0 6px;
    font-family: "Roboto", var(--font);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    line-height: 1;
    color: rgba(23, 103, 200, 0.18);
    letter-spacing: 0.02em;
}

.area-local-note__card h3 {
    margin: 0 0 12px;
    color: #17263a;
    font-size: clamp(16px, 1.6vw, 19px);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

.area-local-note__text {
    margin: 0;
    color: #34465a;
    font-size: 14px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.02em;
}

@media (max-width: 900px) {
    .area-local-note__grid {
        grid-template-columns: 1fr;
        max-width: 640px;
    }
}

@media (max-width: 767px) {
    .area-local-note__grid {
        gap: 20px;
    }

    .area-local-note__card {
        padding: 24px 20px 26px;
    }
}

/* 白山市：住宅統計から見る窓ガラスフィルムの必要性 */
.hakusan-reasons {
    width: min(1100px, calc(100% - 80px));
    max-width: 1100px;
    margin: 0 auto;
}

.hakusan-reasons__banner {
    position: relative;
    z-index: 2;
    padding: clamp(25px, 3.6vw, 42px) 24px;
    border-radius: 24px;
    background: linear-gradient(120deg, #1bc0d8 0%, #168bc9 50%, #1767c8 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 16px 38px rgba(23, 103, 200, 0.2);
}

.hakusan-reasons__banner::after {
    position: absolute;
    left: 50%;
    bottom: -18px;
    width: 36px;
    height: 36px;
    background: #168bc9;
    transform: translateX(-50%) rotate(45deg);
    content: "";
}

.hakusan-reasons__banner p {
    margin: 0 0 8px;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    opacity: 0.82;
}

.hakusan-reasons__banner h3 {
    margin: 0;
    font-size: clamp(23px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.07em;
}

.hakusan-reasons__facts {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(920px, calc(100% - 40px));
    margin: clamp(38px, 5vw, 56px) auto 0;
    overflow: hidden;
    border: 1px solid #d9eaf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(23, 103, 200, 0.14);
}

.hakusan-reasons__facts article {
    padding: clamp(20px, 2.8vw, 30px) 14px;
    text-align: center;
}

.hakusan-reasons__facts article + article {
    border-left: 1px solid #d9eaf5;
}

.hakusan-reasons__fact-label {
    margin: 0 0 7px;
    color: #58758d;
    font-size: 12px;
    font-weight: 700;
}

.hakusan-reasons__fact-value {
    margin: 0;
    color: #1767c8;
    font-family: "Roboto", var(--font);
    line-height: 1;
}

.hakusan-reasons__fact-value b {
    font-size: clamp(30px, 4.2vw, 48px);
    font-weight: 800;
}

.hakusan-reasons__fact-value span {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 700;
}

.hakusan-reasons__facts article > p:last-child {
    margin: 9px 0 0;
    color: #7b8e9e;
    font-size: 11px;
    font-weight: 500;
}

.hakusan-reasons__comparison {
    max-width: 820px;
    margin: clamp(38px, 5vw, 56px) auto 0;
    padding: clamp(22px, 3.4vw, 34px);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(23, 103, 200, 0.1);
}

.hakusan-reasons__comparison-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.hakusan-reasons__comparison-head p {
    margin: 0;
    color: #17304a;
    font-size: clamp(16px, 2vw, 21px);
    font-weight: 800;
}

.hakusan-reasons__comparison-head span {
    color: #8091a0;
    font-size: 10px;
    font-weight: 500;
}

.hakusan-reasons__comparison-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 76px;
    align-items: center;
    gap: 12px;
}

.hakusan-reasons__comparison-row + .hakusan-reasons__comparison-row {
    margin-top: 14px;
}

.hakusan-reasons__comparison-row > span {
    color: #536b80;
    font-size: 12px;
    font-weight: 700;
}

.hakusan-reasons__comparison-row > i {
    display: block;
    height: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8f1f7;
}

.hakusan-reasons__comparison-row > i b {
    display: block;
    width: var(--compare-width);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8fc9de 0%, #4a9dca 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hakusan-reasons__comparison.is-animated .hakusan-reasons__comparison-row > i b {
    transform: scaleX(1);
}

.hakusan-reasons__comparison.is-animated .hakusan-reasons__comparison-row:nth-of-type(3) > i b {
    transition-delay: 140ms;
}

.hakusan-reasons__comparison.is-animated .hakusan-reasons__comparison-row:nth-of-type(4) > i b {
    transition-delay: 280ms;
}

@media (prefers-reduced-motion: reduce) {
    .hakusan-reasons__comparison-row > i b {
        transform: scaleX(1);
        transition: none;
    }
}

.hakusan-reasons__comparison-row.is-hakusan > i b {
    background: linear-gradient(90deg, #22c3bc 0%, #1767c8 100%);
}

.hakusan-reasons__comparison-row.is-local > i b {
    background: linear-gradient(90deg, #22c3bc 0%, #1767c8 100%);
}

.hakusan-reasons__comparison-row em {
    color: #536b80;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    text-align: right;
}

.hakusan-reasons__comparison-row.is-hakusan > span,
.hakusan-reasons__comparison-row.is-hakusan em,
.hakusan-reasons__comparison-row.is-local > span,
.hakusan-reasons__comparison-row.is-local em {
    color: #1767c8;
}

.hakusan-reasons__copy {
    max-width: 900px;
    margin: clamp(52px, 7vw, 78px) auto clamp(34px, 5vw, 54px);
    text-align: center;
}

.hakusan-reasons__copy h3 {
    margin: 0;
    color: #12639b;
    font-size: clamp(22px, 3vw, 35px);
    font-weight: 800;
    line-height: 1.65;
    letter-spacing: 0.06em;
}

.hakusan-reasons__copy h3 em {
    color: #178bc9;
    font-style: normal;
    background: linear-gradient(transparent 68%, rgba(32, 192, 199, 0.2) 68%);
}

.hakusan-reasons__copy p {
    margin: 22px auto 0;
    color: #34465a;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 500;
    line-height: 2.1;
    letter-spacing: 0.035em;
    text-align: left;
}

.hakusan-reasons__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(15px, 2.2vw, 24px);
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

.hakusan-reasons__cards article {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(23, 103, 200, 0.14);
}

.hakusan-reasons__card-head {
    position: relative;
    min-height: 210px;
    padding: clamp(24px, 3vw, 32px) clamp(18px, 2.4vw, 27px) 28px;
    background: linear-gradient(135deg, #1bbbd8 0%, #1689c9 52%, #1767c8 100%);
    color: #fff;
}

.hakusan-reasons__card-head::after {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -13px;
    width: 26px;
    height: 26px;
    background: #1689c9;
    transform: translateX(-50%) rotate(45deg);
    content: "";
}

.hakusan-reasons__card-num {
    position: absolute;
    top: 15px;
    right: 17px;
    color: rgba(255, 255, 255, 0.2);
    font-family: "Roboto", var(--font);
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
}

.hakusan-reasons__card-stat-label {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.045em;
}

.hakusan-reasons__card-stat {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    color: #fff;
    font-family: "Roboto", var(--font);
    line-height: 1;
}

.hakusan-reasons__card-stat b {
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 800;
}

.hakusan-reasons__card-stat span {
    margin-left: 4px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 700;
}

.hakusan-reasons__card-head h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-size: clamp(16px, 1.7vw, 20px);
    font-weight: 800;
    line-height: 1.65;
    letter-spacing: 0.035em;
}

.hakusan-reasons__card-visual {
    position: relative;
    height: auto;
    aspect-ratio: 864 / 530;
    margin: 0;
    overflow: hidden;
    background: #eaf5fb;
}

.hakusan-reasons__card-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: initial;
}

.hakusan-reasons__card-visual--security img {
    transform: translateY(-37.35%);
}

.hakusan-reasons__card-visual--privacy img {
    transform: translateY(-2.2%);
}

.hakusan-reasons__card-visual--safety img {
    transform: translateY(-69.75%);
}

.hakusan-reasons__card-visual--standalone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
}

.hakusan-reasons__glass-annotation {
    position: absolute;
    z-index: 2;
    top: 9%;
    left: 6%;
    padding: 7px 12px 8px;
    border: 2px solid #fff;
    border-radius: 10px;
    background: linear-gradient(135deg, #19b9d4, #1767c8);
    color: #fff;
    font-size: clamp(10px, 1.1vw, 13px);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.04em;
    text-align: left;
    box-shadow: 0 5px 14px rgba(16, 66, 116, 0.28);
}

.hakusan-reasons__glass-arrow {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.hakusan-reasons__glass-arrow-halo,
.hakusan-reasons__glass-arrow-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.hakusan-reasons__glass-arrow-halo {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 6;
}

.hakusan-reasons__glass-arrow-line {
    stroke: #087dcc;
    stroke-width: 3;
}

.hakusan-reasons__glass-arrow-head {
    fill: #087dcc;
    stroke: #fff;
    stroke-width: 0.6;
}

.hakusan-reasons__card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(24px, 3vw, 31px) clamp(18px, 2.4vw, 27px) 26px;
}

.hakusan-reasons__card-body > p:not(.hakusan-reasons__card-tag) {
    margin: 0;
    color: #40556a;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.95;
}

.hakusan-reasons__card-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    margin: 18px 0 0;
    padding: 0;
    color: #178bc9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color 180ms ease, transform 180ms ease;
}

.hakusan-reasons__card-tag::before {
    margin-right: 6px;
    content: "→";
}

.hakusan-reasons__card-tag:hover {
    color: #075fc8;
    transform: translateX(3px);
}

.hakusan-reasons__card-tag--cta {
    align-self: stretch;
    justify-content: center;
    min-height: 48px;
    margin-top: 24px;
    padding: 12px 18px;
    border-radius: 999px;
    background: linear-gradient(105deg, #18b5d4 0%, #168bc9 48%, #1767c8 100%);
    box-shadow: 0 9px 20px rgba(23, 103, 200, 0.24);
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.hakusan-reasons__card-tag--cta::before {
    margin-right: 8px;
    font-size: 15px;
}

.hakusan-reasons__card-tag--cta:hover {
    box-shadow: 0 12px 24px rgba(23, 103, 200, 0.3);
    color: #fff;
    transform: translateY(-2px);
}

.hakusan-reasons__card-tag--cta:focus-visible {
    outline: 3px solid rgba(23, 139, 201, 0.28);
    outline-offset: 4px;
}

.film-lineup__item[id] {
    scroll-margin-top: 110px;
}

.hakusan-reasons__sources {
    margin: 22px 0 0;
    color: #718394;
    font-size: 10px;
    line-height: 1.8;
    text-align: right;
}

.hakusan-reasons__sources a {
    color: #1767c8;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kanazawa-points {
    margin-top: clamp(70px, 9vw, 110px);
}

.kanazawa-points__head {
    max-width: 820px;
    margin: 0 auto clamp(30px, 4vw, 44px);
    text-align: center;
}

.kanazawa-points__head > p {
    margin: 0 0 10px;
    color: #178bc9;
    font-family: "Roboto", var(--font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.kanazawa-points__head h3 {
    margin: 0;
    color: #17304a;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: 0.055em;
}

.kanazawa-points__head > span {
    display: block;
    margin-top: 16px;
    color: #536b80;
    font-size: 14px;
    font-weight: 500;
    line-height: 2;
}

.kanazawa-points__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 24px);
}

.kanazawa-point-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(23, 103, 200, 0.14);
}

.kanazawa-point-card__image {
    aspect-ratio: 3 / 2;
    margin: 0;
    overflow: hidden;
    background: #eaf5fb;
}

.kanazawa-point-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.kanazawa-point-card:hover .kanazawa-point-card__image img {
    transform: scale(1.035);
}

.kanazawa-point-card__body {
    position: relative;
    padding: clamp(25px, 3vw, 32px) clamp(20px, 2.4vw, 27px) 30px;
    border-top: 4px solid #178bc9;
}

.kanazawa-point-card__num {
    position: absolute;
    top: 17px;
    right: 20px;
    margin: 0;
    color: rgba(23, 103, 200, 0.12);
    font-family: "Roboto", var(--font);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
}

.kanazawa-point-card__body h3 {
    position: relative;
    z-index: 1;
    min-height: 3.2em;
    margin: 0 44px 14px 0;
    color: #17304a;
    font-size: clamp(16px, 1.7vw, 20px);
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.025em;
}

.kanazawa-point-card__body > p:last-child {
    margin: 0;
    color: #40556a;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.95;
}

.kanazawa-points--window {
    position: relative;
    padding: clamp(48px, 6vw, 76px) clamp(18px, 4vw, 46px);
    border-radius: 40px;
    background:
        radial-gradient(circle at 0 28%, rgba(64, 183, 235, 0.13) 0 2px, transparent 2.5px) 0 0 / 14px 14px,
        radial-gradient(circle at 100% 8%, rgba(52, 158, 226, 0.15), transparent 32%),
        linear-gradient(145deg, #fff 0%, #f1f9fe 56%, #e8f5fc 100%);
    box-shadow: inset 0 0 0 1px rgba(127, 192, 232, 0.16);
}

.kanazawa-points--window::before {
    position: absolute;
    top: -34px;
    right: -18px;
    width: 48%;
    height: 150px;
    border: 22px solid rgba(64, 161, 226, 0.08);
    border-bottom: 0;
    border-left-color: transparent;
    border-radius: 50% 50% 0 0;
    content: "";
    pointer-events: none;
    transform: rotate(-9deg);
}

/* スマホでは上の装飾（right: -18px）がセクションの右端をはみ出し、
   ページ全体に18pxの横スクロールが発生する。
   セクション幅が画面幅いっぱいになるスマホでのみ、内側に収める。 */
@media (max-width: 767px) {
    .kanazawa-points--window::before {
        right: 0;
    }
}

.kanazawa-points--window .kanazawa-points__head {
    position: relative;
    z-index: 1;
}

.kanazawa-points--window .kanazawa-points__grid {
    position: relative;
    z-index: 1;
}

.kanazawa-points--window .kanazawa-point-card {
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.kanazawa-points--window .kanazawa-point-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 2px solid #a5d8f4;
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 48% 48% 0 0;
    box-shadow: 0 16px 34px rgba(34, 111, 164, 0.12);
}

.kanazawa-points--window .kanazawa-point-card__image::after {
    position: absolute;
    inset: 10px 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.66);
    border-bottom: 0;
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.kanazawa-points--window .kanazawa-point-card__body {
    min-height: 290px;
    margin-top: -2px;
    padding: 30px 24px 28px;
    border: 0;
    border-radius: 24px 24px 20px 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 40px rgba(23, 103, 200, 0.14);
}

.kanazawa-points--window .kanazawa-point-card__icon {
    position: absolute;
    top: 30px;
    left: 22px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg, #18bfd1, #1475d4);
    color: #fff;
    box-shadow: 0 9px 20px rgba(20, 122, 204, 0.24);
}

.kanazawa-points--window .kanazawa-point-card__icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.kanazawa-points--window .kanazawa-point-card__num {
    display: none;
}

.kanazawa-points--window .kanazawa-point-card__body h3 {
    display: flex;
    align-items: center;
    min-height: 52px;
    margin: 0 0 24px 56px;
    font-size: clamp(15px, 1.55vw, 18px);
    line-height: 1.55;
}

.kanazawa-points--window .kanazawa-point-card__body > p:last-of-type {
    padding-top: 22px;
    border-top: 1px dashed rgba(37, 129, 188, 0.24);
}

.kanazawa-point-card__film-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    margin-top: 22px;
    padding: 11px 12px 11px 17px;
    border: 1px solid rgba(21, 139, 210, 0.22);
    border-radius: 999px;
    background: linear-gradient(135deg, #f0fbff, #e8f4ff);
    color: #0878c9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.4;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.kanazawa-point-card__film-link i {
    display: grid;
    place-items: center;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: linear-gradient(145deg, #18bfd1, #1475d4);
    color: #fff;
    font-size: 14px;
    font-style: normal;
    line-height: 1;
}

@media (hover: hover) {
    .kanazawa-point-card__film-link:hover {
        background: linear-gradient(135deg, #e4f9ff, #dceeff);
        box-shadow: 0 9px 20px rgba(20, 122, 204, .14);
        transform: translateY(-2px);
    }
}

@media (max-width: 900px) {
    .hakusan-reasons {
        width: calc(100% - 48px);
    }

    .hakusan-reasons__cards {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 640px;
        margin-right: auto;
        margin-left: auto;
    }

    .kanazawa-points__grid {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin-inline: auto;
    }

    .kanazawa-points--window .kanazawa-point-card__body {
        min-height: 0;
    }

}

@media (max-width: 767px) {
    .hakusan-reasons {
        width: calc(100% - 36px);
    }

    .hakusan-reasons__cards {
        gap: 44px;
    }

    .kanazawa-points {
        margin-top: 68px;
    }

    .kanazawa-points__head {
        margin-bottom: 26px;
    }

    .kanazawa-points__head > span {
        font-size: 13px;
        line-height: 1.9;
        text-align: left;
    }

    .kanazawa-points__grid {
        gap: 65px;
    }

    .kanazawa-points--window {
        width: calc(100% + 12px);
        margin-left: -6px;
        padding: 48px 12px 26px;
        border-radius: 28px;
    }

    .kanazawa-points--window .kanazawa-points__head {
        padding-inline: 8px;
    }

    .kanazawa-points--window .kanazawa-points__head > span {
        text-align: center;
    }

    .kanazawa-points--window .kanazawa-point-card__image {
        aspect-ratio: 1 / 0.86;
        border-radius: 50% 50% 0 0 / 46% 46% 0 0;
    }

    .kanazawa-points--window .kanazawa-point-card__body {
        padding: 22px 14px 25px;
        border-radius: 22px 22px 18px 18px;
    }

    .kanazawa-points--window .kanazawa-point-card__icon {
        top: 25px;
        left: 14px;
        width: 42px;
        height: 42px;
    }

    .kanazawa-points--window .kanazawa-point-card__icon svg {
        width: 26px;
        height: 26px;
    }

    .kanazawa-points--window .kanazawa-point-card__num {
        top: 20px;
        right: 16px;
        font-size: 44px;
    }

    .kanazawa-points--window .kanazawa-point-card__body h3 {
        min-height: 48px;
        margin: 0 0 14px 52px;
        font-size: clamp(15.5px, 4vw, 16px);
        white-space: nowrap;
    }

    .kanazawa-point-card__body h3 {
        min-height: 0;
    }

    .hakusan-reasons__banner {
        padding: 23px 14px 25px;
        border-radius: 18px;
    }

    .hakusan-reasons__banner::after {
        bottom: -13px;
        width: 26px;
        height: 26px;
    }

    .hakusan-reasons__banner h3 {
        font-size: clamp(19px, 5.3vw, 22px);
        line-height: 1.65;
        letter-spacing: 0.035em;
    }

    .hakusan-reasons__facts {
        grid-template-columns: repeat(3, 1fr);
        width: calc(100% - 18px);
        margin-top: 32px;
        border-radius: 14px;
    }

    .hakusan-reasons__facts article {
        padding: 17px 4px;
    }

    /* スマホは3カラムなので区切りは縦線に戻す */
    .hakusan-reasons__facts article + article {
        border-top: 0;
        border-left: 1px solid #d9eaf5;
    }

    .hakusan-reasons__fact-label {
        min-height: 2.8em;
        padding: 0 3px;
        font-size: 10px;
        line-height: 1.4;
    }

    .hakusan-reasons__fact-value b {
        font-size: clamp(22px, 7vw, 28px);
    }

    .hakusan-reasons__facts article:nth-child(3) .hakusan-reasons__fact-value b {
        font-size: clamp(19px, 6vw, 24px);
    }

    .hakusan-reasons__fact-value span {
        display: inline-block;
        margin: 0 0 0 3px;
        font-size: 10px;
        vertical-align: baseline;
    }

    .hakusan-reasons__facts article > p:last-child {
        padding: 0 3px;
        font-size: 9px;
        line-height: 1.45;
    }

    .hakusan-reasons__comparison {
        margin-top: 30px;
        padding: 20px 13px;
    }

    .hakusan-reasons__comparison-head {
        display: block;
        margin-bottom: 20px;
    }

    .hakusan-reasons__comparison-head span {
        display: block;
        margin-top: 5px;
    }

    .hakusan-reasons__comparison-row {
        grid-template-columns: 52px minmax(0, 1fr) 66px;
        gap: 8px;
    }

    .hakusan-reasons__copy {
        margin-top: 46px;
        padding-inline: 8px;
        text-align: left;
    }

    .hakusan-reasons__copy h3 {
        font-size: 20px;
        line-height: 1.75;
        overflow-wrap: anywhere;
    }

    .hakusan-reasons__copy h3 > span {
        white-space: normal;
    }

    .hakusan-reasons__copy p {
        margin-top: 18px;
        font-size: 13px;
        line-height: 2;
    }

    .hakusan-reasons__cards article {
        border-radius: 18px;
    }

    .hakusan-reasons__card-head {
        min-height: 0;
        padding: 25px 20px 29px;
    }

    .hakusan-reasons__card-head h3 {
        font-size: 24px;
    }

    .hakusan-reasons__card-visual {
        height: auto;
    }

    .hakusan-reasons__card-body {
        min-height: 0;
        padding: 25px 20px 24px;
    }

    .hakusan-reasons__card-body > p:not(.hakusan-reasons__card-tag) {
        font-size: 13px;
        line-height: 2;
    }

    .hakusan-reasons__sources {
        font-size: 9px;
        text-align: left;
    }
}

/* ============================================
   エリアLP：窓ガラスフィルムでできること
   ============================================ */
.area-film-about__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 24px);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.area-film-about__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(24px, 3vw, 34px) clamp(18px, 2.2vw, 26px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(23, 103, 200, 0.10);
}

.area-film-about__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(52px, 5.4vw, 64px);
    height: clamp(52px, 5.4vw, 64px);
    margin-bottom: 14px;
    border-radius: 50%;
    background: #eaf3fc;
    color: #1767c8;
}

.area-film-about__icon svg {
    display: block;
    width: 58%;
    height: 58%;
}

.area-film-about__card h3 {
    margin: 0 0 10px;
    color: #17263a;
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.area-film-about__card p {
    margin: 0;
    color: #34465a;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

@media (max-width: 900px) {
    .area-film-about__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .area-film-about__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .area-film-about__card {
        padding: 18px 12px 16px;
        border-radius: 13px;
    }
    .area-film-about__card p {
        font-size: 11.5px;
        line-height: 1.8;
    }
}

/* ============================================
   エリアLP：できることセクション クラフト紙風デザイン
   ============================================ */
.area-film-about--craft {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(rgba(23, 103, 200, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, #eef4f9, #f3f7fb);
    background-size: 5px 5px, 100% 100%;
}

/* 円形スタンプ風の装飾（破線サークル） */
.area-film-about__stamp {
    position: absolute;
    border: 1.5px dashed rgba(23, 103, 200, 0.22);
    border-radius: 50%;
    pointer-events: none;
}

.area-film-about__stamp::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1.5px dashed rgba(23, 103, 200, 0.14);
    border-radius: 50%;
}

.area-film-about__stamp--tl {
    top: -60px;
    left: -60px;
    width: clamp(140px, 16vw, 220px);
    height: clamp(140px, 16vw, 220px);
}

.area-film-about__stamp--br {
    right: -70px;
    bottom: -70px;
    width: clamp(160px, 18vw, 250px);
    height: clamp(160px, 18vw, 250px);
}

/* 見出し: 大きな数字＋黄色マーカー */
.area-film-about__title b {
    display: inline-block;
    margin: 0 2px;
    font-family: "Roboto", var(--font);
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1;
    color: #1767c8;
    vertical-align: -0.08em;
}

.area-film-about__title em {
    position: relative;
    font-style: normal;
    padding: 0 2px;
    background: linear-gradient(transparent 62%, #f7d64c 62%, #f7d64c 92%, transparent 92%);
}

/* ブロブ形のメインビジュアル */
.area-film-about__visual {
    position: relative;
    max-width: 720px;
    margin: 0 auto clamp(36px, 5vw, 56px);
    padding: 0 16px;
}

.area-film-about__blob {
    margin: 0;
    overflow: hidden;
    border-radius: 58% 42% 55% 45% / 52% 48% 55% 45%;
    box-shadow: 0 18px 40px rgba(23, 38, 58, 0.14);
    transform: rotate(-1.5deg);
}

.area-film-about__blob img {
    display: block;
    width: 100%;
    height: clamp(240px, 34vw, 400px);
    object-fit: cover;
}

/* POINTバッジ＋吹き出しラベル */
.area-film-about__point {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.area-film-about__point--1 {
    top: clamp(-28px, -2vw, -16px);
    right: clamp(-8px, 2vw, 36px);
    align-items: flex-end;
}

.area-film-about__point--2 {
    bottom: clamp(-20px, -1.4vw, -10px);
    left: clamp(-6px, 1.6vw, 30px);
}

.area-film-about__point-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(46px, 4.6vw, 58px);
    height: clamp(46px, 4.6vw, 58px);
    border-radius: 50%;
    background: #f7d64c;
    color: #17263a;
    font-family: "Roboto", var(--font);
    font-size: clamp(9px, 0.9vw, 11px);
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: 0 6px 14px rgba(23, 38, 58, 0.16);
}

.area-film-about__point-label {
    display: inline-block;
    padding: 10px 16px;
    background: #fff;
    border-radius: 12px;
    color: #17263a;
    font-size: clamp(11px, 1.1vw, 13px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 22px rgba(23, 38, 58, 0.14);
}

/* クラフト背景上のカード調整 */
.area-film-about--craft .area-film-about__card {
    box-shadow: 0 10px 24px rgba(23, 38, 58, 0.08);
}

.area-film-about--craft .area-film-about__icon {
    background: #fdf3d2;
    color: #1767c8;
}

@media (max-width: 767px) {
    .area-film-about__visual {
        padding: 0 6px;
        margin-bottom: 30px;
    }
    .area-film-about__blob img {
        height: 230px;
    }
    .area-film-about__point--1 {
        top: -20px;
        right: -2px;
    }
    .area-film-about__point--2 {
        bottom: -14px;
        left: -2px;
    }
    .area-film-about__point-label {
        padding: 8px 12px;
        font-size: 11px;
        border-radius: 10px;
    }
    .area-film-about__stamp--tl {
        top: -50px;
        left: -50px;
    }
    .area-film-about__stamp--br {
        right: -60px;
        bottom: -60px;
    }
}

/* ============================================
   エリアLP：6つの効果 ブロブ写真＋POINTシール＋ネイビー箱
   ============================================ */
.area-film-about__points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(44px, 5vw, 60px) clamp(24px, 3vw, 40px);
    max-width: 1148px;
    margin: 30px auto 4px;
    padding: 26px clamp(24px, 4vw, 48px) 4px;
    list-style: none;
}

.area-film-about__poi {
    position: relative;
}

.area-film-about__poi-blob {
    position: relative;
    margin: 0;
    overflow: hidden;
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.95),
        0 16px 30px rgba(23, 38, 58, 0.13);
    transform: rotate(-1.5deg);
}

.area-film-about__poi-blob--a { border-radius: 58% 42% 55% 45% / 52% 48% 55% 45%; }
.area-film-about__poi-blob--b { border-radius: 45% 55% 48% 52% / 55% 45% 52% 48%; transform: rotate(1.5deg); }
.area-film-about__poi-blob--c { border-radius: 52% 48% 44% 56% / 48% 55% 45% 52%; transform: rotate(-0.8deg); }

.area-film-about__poi-blob img {
    display: block;
    width: 100%;
    height: clamp(170px, 16vw, 210px);
    object-fit: cover;
}

/* 黄色いPOINTシール（ゆがんだ円） */
.area-film-about__poi-seal {
    position: absolute;
    top: -20px;
    left: -8px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(56px, 5.4vw, 66px);
    height: clamp(56px, 5.4vw, 66px);
    background: #f7d64c;
    border-radius: 48% 52% 45% 55% / 55% 46% 54% 45%;
    transform: rotate(-8deg);
    color: #17263a;
    font-family: "Roboto", var(--font);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.05em;
    box-shadow: 0 8px 16px rgba(23, 38, 58, 0.18);
}

.area-film-about__poi-seal b {
    font-size: 17px;
    font-weight: 700;
}

.area-film-about__poi:nth-child(even) .area-film-about__poi-seal {
    left: auto;
    right: -8px;
    transform: rotate(8deg);
}

/* ネイビーの説明箱（内側に白フレーム＋吹き出しの三角） */
.area-film-about__poi-box {
    position: relative;
    z-index: 2;
    width: calc(100% - 20px);
    margin: -24px 0 0 auto;
    padding: 20px 18px 18px;
    background: #1d4e9e;
    color: #fff;
    box-shadow: 0 14px 26px rgba(13, 58, 138, 0.24);
}

.area-film-about__poi:nth-child(even) .area-film-about__poi-box {
    margin: -24px auto 0 0;
}

.area-film-about__poi-box::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1.6px solid rgba(255, 255, 255, 0.72);
    pointer-events: none;
}

.area-film-about__poi-box::after {
    content: "";
    position: absolute;
    top: -13px;
    left: 30px;
    border-style: solid;
    border-width: 0 9px 14px 9px;
    border-color: transparent transparent #1d4e9e transparent;
}

.area-film-about__poi:nth-child(even) .area-film-about__poi-box::after {
    left: auto;
    right: 30px;
}

.area-film-about__poi-box h3 {
    margin: 0 0 8px;
    font-size: clamp(14px, 1.4vw, 16px);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: center;
}

.area-film-about__poi-box p {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.85;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 900px) {
    .area-film-about__points {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .area-film-about__points {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 400px;
        padding-top: 30px;
    }
    .area-film-about__poi-blob img {
        height: 190px;
    }
    .area-film-about__poi-seal {
        top: -18px;
        width: 56px;
        height: 56px;
    }
    .area-film-about__poi-box {
        width: calc(100% - 14px);
        padding: 17px 15px 15px;
    }
    .area-film-about__poi-box p {
        font-size: 11.5px;
        line-height: 1.8;
    }
}

/* ============================================
   エリアLP：できること 簡易版（大ブロブ＋POINT×2）
   ============================================ */
.area-film-about__duo {
    position: relative;
    max-width: 760px;
    margin: clamp(40px, 5vw, 56px) auto 4px;
    padding: 40px 24px 52px;
}

.area-film-about__duo-blob {
    margin: 0;
    overflow: hidden;
    border-radius: 52% 48% 45% 55% / 58% 52% 48% 42%;
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.95),
        0 18px 36px rgba(23, 38, 58, 0.14);
    transform: rotate(-1deg);
}

.area-film-about__duo-blob img {
    display: block;
    width: 100%;
    height: clamp(240px, 34vw, 380px);
    object-fit: cover;
}

.area-film-about__duo-point {
    position: absolute;
    z-index: 3;
}

.area-film-about__duo-point .area-film-about__poi-seal {
    position: absolute;
    top: -24px;
    left: -18px;
    z-index: 2;
}

.area-film-about__duo-point .area-film-about__poi-box {
    position: relative;
    width: auto;
    margin: 0;
    padding: 16px 20px 15px;
}

.area-film-about__duo-point .area-film-about__poi-box p {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.05em;
    text-align: center;
    color: #fff;
}

/* POINT 1: 右上（しっぽは下向き＝写真を指す） */
.area-film-about__duo-point--1 {
    top: -6px;
    right: 12px;
}

.area-film-about__duo-point--1 .area-film-about__poi-box::after {
    top: auto;
    bottom: -13px;
    left: 26px;
    right: auto;
    border-width: 14px 9px 0 9px;
    border-color: #1d4e9e transparent transparent transparent;
}

/* POINT 2: 左下（しっぽは上向き＝写真を指す） */
.area-film-about__duo-point--2 {
    bottom: -2px;
    left: 12px;
}

.area-film-about__duo-point--2 .area-film-about__poi-box::after {
    top: -13px;
    left: auto;
    right: 34px;
    border-width: 0 9px 14px 9px;
    border-color: transparent transparent #1d4e9e transparent;
}

.area-film-about__duo-note {
    margin: 16px 4px 0 0;
    text-align: right;
    color: #6b7a8d;
    font-size: 12px;
    letter-spacing: 0.06em;
}

@media (max-width: 767px) {
    .area-film-about__duo {
        margin-top: 34px;
        padding: 36px 10px 48px;
    }
    .area-film-about__duo-blob img {
        height: 240px;
    }
    .area-film-about__duo-point .area-film-about__poi-seal {
        top: -20px;
        left: -12px;
    }
    .area-film-about__duo-point .area-film-about__poi-box {
        padding: 12px 14px 11px;
    }
    .area-film-about__duo-point .area-film-about__poi-box p {
        font-size: 11.5px;
        line-height: 1.7;
    }
    .area-film-about__duo-point--1 {
        top: -10px;
        right: 2px;
    }
    .area-film-about__duo-point--2 {
        bottom: -6px;
        left: 2px;
    }
    .area-film-about__duo-note {
        margin-top: 12px;
        font-size: 11px;
    }
}

/* ============================================
   エリアLP：6つの効果 吹き出し2個スタイル
   ============================================ */
.area-film-about__poi {
    padding: 30px 0 34px;
}

/* ネイビーの吹き出し（黄色い円が角から覗く） */
.area-film-about__poi-bub {
    position: absolute;
    z-index: 3;
    background: #1d4e9e;
    padding: 12px 16px 11px;
    box-shadow: 0 12px 24px rgba(13, 58, 138, 0.22);
}

.area-film-about__poi-bub::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    z-index: -1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f7d64c;
}

.area-film-about__poi-bub p {
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0.05em;
    text-align: center;
}

/* 上の吹き出し（効果名）: 右上・しっぽ下向き */
.area-film-about__poi-bub--t {
    top: 6px;
    right: -4px;
}

.area-film-about__poi-bub--t p {
    font-size: 13px;
    letter-spacing: 0.08em;
}

.area-film-about__poi-bub--t::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 22px;
    border-style: solid;
    border-width: 13px 8px 0 8px;
    border-color: #1d4e9e transparent transparent transparent;
}

/* 下の吹き出し（ポイント）: 左下・しっぽ上向き */
.area-film-about__poi-bub--b {
    bottom: 4px;
    left: -4px;
}

.area-film-about__poi-bub--b::after {
    content: "";
    position: absolute;
    top: -12px;
    right: 26px;
    border-style: solid;
    border-width: 0 8px 13px 8px;
    border-color: transparent transparent #1d4e9e transparent;
}

/* シールは吹き出しと重ならないよう左上固定・番号入りのまま */
.area-film-about__poi .area-film-about__poi-seal {
    top: 8px;
    left: -10px;
}

.area-film-about__poi:nth-child(even) .area-film-about__poi-seal {
    left: -10px;
    right: auto;
    transform: rotate(-8deg);
}

@media (max-width: 767px) {
    .area-film-about__poi {
        padding: 26px 0 30px;
    }
    .area-film-about__poi-bub {
        padding: 10px 13px 9px;
    }
    .area-film-about__poi-bub p {
        font-size: 11.5px;
    }
    .area-film-about__poi-bub--t p {
        font-size: 12.5px;
    }
    .area-film-about__poi-bub--t {
        top: 2px;
        right: 0;
    }
    .area-film-about__poi-bub--b {
        bottom: 0;
        left: 0;
    }
    .area-film-about__poi-bub::before {
        width: 32px;
        height: 32px;
        top: -12px;
        left: -12px;
    }
}

/* ============================================
   エリアLP：6つの効果 ガラスデザインカード
   ============================================ */
.area-film-about__points--glass {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.6vw, 32px);
    max-width: 1080px;
}

.area-film-glass {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    min-height: 480px;
    padding: 170px 14px 14px;
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(13, 58, 138, 0.16);
    isolation: isolate;
}

.area-film-glass__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
}

.area-film-glass__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 左上の斜めネイビー帯 */
.area-film-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, #1b3f7e, #102a54);
    clip-path: polygon(0 0, 40% 0, 12% 58%, 0 58%);
    opacity: 0.94;
}

/* 斜めストライプ装飾 */
.area-film-glass__stripes {
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 84px;
    background: repeating-linear-gradient(115deg,
        rgba(173, 205, 240, 0.75) 0 9px,
        transparent 9px 20px);
    pointer-events: none;
}

.area-film-glass__stripes--tl {
    top: -18px;
    left: -26px;
}

.area-film-glass__stripes--br {
    right: -26px;
    bottom: -14px;
}

/* POINT番号バッジ */
.area-film-glass__badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    margin: 0;
    color: #fff;
    line-height: 1;
}

.area-film-glass__badge span {
    display: block;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
}

.area-film-glass__badge b {
    display: block;
    margin-top: 6px;
    font-family: "Roboto", var(--font);
    font-size: 44px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.02em;
}

.area-film-glass__badge i {
    display: block;
    width: 38px;
    height: 11px;
    margin-top: 10px;
    background: repeating-linear-gradient(115deg,
        #7fb1e8 0 3px,
        transparent 3px 8px);
}

/* すりガラスパネル */
.area-film-glass__panel {
    position: relative;
    z-index: 2;
    padding: clamp(20px, 2.4vw, 26px) clamp(16px, 2vw, 22px) clamp(14px, 1.8vw, 18px);
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 16px;
}

.area-film-glass__panel h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 10px rgba(10, 30, 60, 0.45);
}

.area-film-glass__panel > p {
    margin: 0 0 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 8px rgba(10, 30, 60, 0.5);
}

/* 白いベネフィットチップ3個 */
.area-film-glass__chips {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 12px 4px;
    list-style: none;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(10, 30, 60, 0.18);
}

.area-film-glass__chips li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 9px;
    color: #17263a;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.area-film-glass__chips li + li {
    border-left: 1px solid #d8e2ee;
}

.area-film-glass__chip-icon {
    display: block;
    flex: none;
    width: 26px;
    height: 26px;
    color: #1d4e9e;
}

.area-film-glass__chip-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 900px) {
    .area-film-about__points--glass {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
}

@media (max-width: 767px) {
    .area-film-about__points--glass {
        gap: 18px;
    }
    .area-film-glass {
        min-height: 440px;
        padding: 150px 10px 10px;
        border-radius: 15px;
    }
    /* モバイルはbackdrop-filter無効化のため、パネルを半透明ネイビーで可読性確保 */
    .area-film-glass__panel {
        background: rgba(16, 42, 84, 0.62);
        border-color: rgba(255, 255, 255, 0.3);
    }
    .area-film-glass__badge b {
        font-size: 38px;
    }
    .area-film-glass__chips li {
        font-size: 10px;
        padding: 2px 7px;
        gap: 6px;
    }
    .area-film-glass__chip-icon {
        width: 22px;
        height: 22px;
    }
}

/* ============================================
   施工事例 拡大モーダルのスライダー化
   ============================================ */
.works-modal__dialog {
    width: min(1080px, calc(100vw - 48px));
}

.works-modal__viewport {
    overflow: hidden;
    background: #1d2029;
    touch-action: none;
}

.works-modal__track {
    display: flex;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.works-modal__slide {
    flex: 0 0 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.works-modal__slide img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 64px);
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    will-change: transform;
}

.works-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 18, 26, 0.7);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 200ms ease, opacity 200ms ease;
}

.works-modal__nav:hover {
    background: rgba(15, 18, 26, 0.92);
}

.works-modal__nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.works-modal__nav--prev { left: 10px; }
.works-modal__nav--next { right: 10px; }

.works-modal__nav[hidden],
.works-modal__counter[hidden] {
    display: none;
}

.works-modal__counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(15, 18, 26, 0.7);
    color: #fff;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    letter-spacing: 0.14em;
}

@media (max-width: 767px) {
    .works-modal__nav {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
    .works-modal__nav--prev { left: 6px; }
    .works-modal__nav--next { right: 6px; }
}

/* 拡大モーダル: 紺色の余白が出ないよう背景を透明化し、スライド高さを統一 */
.works-modal__dialog {
    background: transparent;
    box-shadow: none;
}

.works-modal__viewport {
    background: transparent;
}

.works-modal__slide {
    height: min(calc(100vh - 120px), 760px);
}

.works-modal__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 50px rgba(8, 12, 22, 0.45));
}

@media (max-width: 767px) {
    .works-modal__slide {
        height: min(calc(100vh - 140px), 560px);
    }
}

/* ============================================================
   選べる6つの効果：施工前後ビジュアル（film-change）
   ============================================================ */
.film-change {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 16% 7%, rgba(255,255,255,.96) 0 7%, transparent 31%),
        linear-gradient(162deg, #f7fcff 0%, #d8edfa 38%, #eef8fd 74%, #cbe5f4 100%);
}

.film-change .price-sec__head .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0879bd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    box-shadow: none;
}

.film-change .price-sec__head .section-kicker::before,
.film-change .price-sec__head .section-kicker::after {
    width: 28px;
    height: 2px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #20bfd4, #1670ce);
    content: "";
}

.film-change .price-sec__head .section-kicker::before {
    background: linear-gradient(90deg, #1670ce, #20bfd4);
}

@media (max-width: 767px) {
    .film-change .price-sec__head .section-kicker {
        gap: 8px;
        padding: 0;
        font-size: 10.5px;
        letter-spacing: 0.12em;
    }

    .film-change .price-sec__head .section-kicker::before,
    .film-change .price-sec__head .section-kicker::after {
        width: 16px;
    }
}

.film-change::before,
.film-change::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.film-change::before {
    content: none;
}

.film-change::after {
    content: none;
}

.film-change__decor {
    position: absolute;
    z-index: 0;
    width: clamp(280px, 27vw, 420px);
    aspect-ratio: 2 / 3;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .28;
    filter: saturate(.82);
    pointer-events: none;
}

.film-change__decor--a {
    top: 9%;
    left: clamp(-150px, -8vw, -72px);
    background-image: url("../img/film-change-decor-01-generated.webp");
}

.film-change__decor--b {
    top: 32%;
    right: clamp(-150px, -8vw, -72px);
    background-image: url("../img/film-change-decor-02-generated.webp");
}

.film-change__decor--c {
    top: 55%;
    left: clamp(-150px, -8vw, -72px);
    background-image: url("../img/film-change-decor-03-generated.webp");
}

.film-change__decor--d {
    top: 78%;
    right: clamp(-150px, -8vw, -72px);
    background-image: url("../img/film-change-decor-04-generated.webp");
}

.film-change__bub {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.78);
    background: radial-gradient(circle at 30% 25%, #fff 0 6%, rgba(255,255,255,.42) 18%, rgba(141,204,238,.08) 66%, rgba(255,255,255,.32));
    box-shadow: inset -8px -10px 18px rgba(113,190,231,.14), 0 10px 24px rgba(80,151,196,.12);
    pointer-events: none;
}
.film-change__bub--a { width: 132px; height: 132px; top: 23%; right: 4%; }
.film-change__bub--b { width: 58px; height: 58px; top: 42%; left: 7%; }
.film-change__bub--c { width: 92px; height: 92px; bottom: 23%; right: 10%; }
.film-change__bub--d { width: 46px; height: 46px; bottom: 8%; left: 12%; }

.film-change__list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(72px, 9vw, 112px);
    max-width: 920px;
    margin: clamp(44px, 6vw, 72px) auto clamp(52px, 7vw, 84px);
    padding: 96px 76px 0 32px;
}

.film-change__message {
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 4;
    width: 150px;
    height: 500px;
    color: #0758b6;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    letter-spacing: .1em;
    text-shadow: 0 2px 8px rgba(255,255,255,.96);
}

.film-change__message span {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: clamp(17px, 2vw, 24px);
    font-weight: 700;
}

.film-change__message strong {
    position: absolute;
    top: 0;
    right: 38px;
    display: block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #263b5a;
    font-size: clamp(36px, 4.5vw, 50px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: .08em;
}

.film-change__message em {
    color: #075fc8;
    font-size: 1.12em;
    font-style: normal;
}

.film-change__item {
    position: relative;
    width: 100%;
    min-height: 690px;
}

.film-change__ph {
    position: relative;
    margin: 0;
    z-index: 1;
    isolation: isolate;
}

.film-change__ph::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 12px -14px -14px 12px;
    background: rgba(67, 92, 118, .16);
    box-shadow: 10px 14px 28px rgba(31, 63, 94, .18);
}

.film-change__ph--before::after {
    content: "";
    position: absolute;
    right: -56px;
    bottom: -82px;
    z-index: 3;
    width: 86px;
    height: 86px;
    background: url("../img/film-change-arrow-generated.webp") center / contain no-repeat;
    filter: drop-shadow(0 7px 9px rgba(16, 86, 175, .2));
    pointer-events: none;
}

.film-change__ph picture {
    display: block;
    width: 100%;
    height: 100%;
}

.film-change__ph img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 5px solid rgba(255,255,255,.96);
    box-shadow: 0 10px 20px rgba(37,91,135,.16);
}

/* 施工前後を1枚の比較スライダーで見せるパターン。
   中身はトップページと同じ .choose-item__ba-* を再利用しているため、
   スライダーの挙動用CSS・JSは style.css / main.js の既存分がそのまま効く。 */
.film-change__ph--compare {
    width: 100%;
    margin-inline: auto;
}

.film-change__ph--compare .choose-item__image--before-after {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    border: 5px solid rgba(255, 255, 255, .96);
    box-shadow: 0 10px 20px rgba(37, 91, 135, .16);
}

/* 上部を「施工前 ｜ POINT ｜ 施工後」の横一列にする。
   POINT吹き出しは元が右上固定で施工後ラベルと重なるため、中央寄せに変更する。 */
/* transform は登場アニメーション（scale）が使っているので、
   中央寄せには left/right + margin auto を使う。transform を奪わないこと。 */
.film-change__ph--compare .film-change__note {
    top: 14px;
    left: 0;
    right: 0;
    width: fit-content;
    min-width: 0;
    margin-inline: auto;
}

/* ラベルはエリアページのタグに合わせ、書体と太さを本文系に寄せる */
.film-change__ph--compare .choose-item__ba-label {
    top: 14px;
    padding: 7px 16px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
}

/* 施工後は青。施工前後の色分けを他のセクションと揃える */
.film-change__ph--compare .choose-item__ba-label--after {
    background: linear-gradient(135deg, #46bce7 0%, #218dce 100%);
}

/* min-height は写真2枚を縦に積む構成の高さ。1枚構成では余白になるので解除する */
.film-change__item:has(.film-change__ph--compare) {
    min-height: 0;
}

.film-change__ph--before {
    width: 58%;
    height: auto;
    aspect-ratio: 3 / 2;
}

.film-change__ph--after {
    width: 86%;
    height: auto;
    aspect-ratio: 3 / 2;
    margin: 92px 0 0 10%;
    z-index: 2;
    opacity: 0;
    transform: scale(0.48);
    transform-origin: center center;
    will-change: opacity, transform;
}

.film-change__item.is-visible .film-change__ph--after {
    animation: film-change-after-pop 720ms cubic-bezier(0.22, 0.61, 0.36, 1) 420ms both;
}

@keyframes film-change-after-pop {
    0% {
        opacity: 0;
        transform: scale(0.48);
    }
    58% {
        opacity: 1;
        transform: scale(1.08);
    }
    78% {
        opacity: 1;
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .film-change__ph--after {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    .film-change__item.is-visible .film-change__ph--after {
        animation: none;
    }
}

.film-change__note {
    position: absolute;
    top: 22px;
    right: -26px;
    z-index: 4;
    min-width: 230px;
    max-width: 290px;
    padding: 18px 24px 17px 56px;
    background: linear-gradient(135deg, #ef8fa7 0%, #dd6f91 100%);
    border: 3px solid rgba(255, 255, 255, .98);
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(202, 83, 121, .36),
        7px 9px 0 rgba(180, 109, 137, .12),
        0 14px 25px rgba(116, 72, 122, .2),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .1em;
    white-space: nowrap;
    text-align: center;
    text-shadow: 0 1px 3px rgba(132, 48, 79, .22);
}

.film-change__note::before {
    content: "POINT";
    position: absolute;
    top: -23px;
    left: -31px;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    background: linear-gradient(145deg, #ffe278 0%, #ffc94d 100%);
    clip-path: polygon(50% 0, 61% 6%, 73% 4%, 81% 13%, 93% 17%, 96% 30%, 100% 40%, 95% 51%, 97% 64%, 87% 72%, 83% 85%, 70% 88%, 60% 97%, 48% 93%, 36% 100%, 26% 92%, 13% 89%, 10% 76%, 1% 67%, 5% 54%, 0 43%, 7% 33%, 7% 20%, 19% 14%, 27% 4%, 40% 7%);
    color: #1c76aa;
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .12em;
    text-shadow: none;
    filter: drop-shadow(0 5px 6px rgba(130, 95, 29, .18));
}

.film-change__note--after {
    background: linear-gradient(135deg, #46bce7 0%, #218dce 100%);
    box-shadow:
        0 0 0 1px rgba(34, 135, 192, .38),
        7px 9px 0 rgba(72, 158, 207, .12),
        0 14px 25px rgba(43, 106, 166, .22),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    color: #fff;
    text-shadow: 0 1px 3px rgba(17, 91, 143, .26);
}

.film-change__note--after::before {
    color: #1779ad;
}

.film-change__damage-note {
    position: absolute;
    top: 31%;
    left: 68%;
    z-index: 5;
    width: 28%;
    height: 32%;
    color: #e43d32;
    filter: drop-shadow(0 3px 4px rgba(93, 29, 24, .28));
    pointer-events: none;
}

.film-change__damage-note--after {
    top: 14%;
    left: 52%;
    z-index: 3;
    width: 34%;
    height: 62%;
    color: #087dd2;
}

.film-change__damage-note.film-change__damage-note--after path {
    stroke-width: 4;
}

.film-change__damage-note--shatter {
    top: 16%;
    left: 52%;
    z-index: 3;
    width: 18%;
    height: 35%;
    color: #087dd2;
}

.film-change__damage-note.film-change__damage-note--shatter path {
    stroke-width: 5;
}

.film-change__damage-note svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.film-change__damage-note path {
    fill: none;
    stroke: currentColor;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 画像自体はフェードさせず、吹き出しだけポンと弾ませる */
.film-change__item[data-reveal-item] {
    opacity: 1;
    transform: none;
    transition: none;
}

.film-change__note {
    opacity: 0;
    transform: scale(.3);
}

/* 施工前（ネガティブ）：上から重く落ちて、不安げに小刻みに揺れる */
.film-change__note.is-visible {
    animation: film-note-drop-shake 820ms ease-out 120ms both;
}

/* 施工後（ポジティブ）：ポンと弾む */
.film-change__note--after.is-visible {
    animation: film-note-pop 620ms cubic-bezier(.3, 1.4, .5, 1) 120ms both;
}

@keyframes film-note-pop {
    0%   { opacity: 0; transform: scale(.3); }
    55%  { opacity: 1; transform: scale(1.14); }
    75%  { transform: scale(.94); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes film-note-drop-shake {
    0%   { opacity: 0; transform: translateY(-30px); }
    30%  { opacity: 1; transform: translateY(0); }
    42%  { transform: translateY(-6px); }
    52%  { transform: translateY(0); }
    62%  { transform: translateX(-3px) rotate(-1.1deg); }
    72%  { transform: translateX(3px) rotate(1deg); }
    82%  { transform: translateX(-2px) rotate(-0.6deg); }
    91%  { transform: translateX(1px) rotate(0.3deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .film-change__note { opacity: 1; transform: none; }
    .film-change__note.is-visible,
    .film-change__note--after.is-visible { animation: none; }
}

.film-change__tag {
    position: absolute;
    top: -12px;
    left: -12px;
    z-index: 3;
    min-width: 150px;
    padding: 14px 34px 14px 27px;
    color: #174a7c;
    background: linear-gradient(115deg, rgba(255,255,255,1) 0%, #f7fcff 58%, #dcefff 100%);
    clip-path: polygon(0 0, 100% 0, 87% 100%, 0 100%);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    filter: drop-shadow(0 7px 9px rgba(28, 78, 121, .2));
}

.film-change__tag--after {
    color: #fff;
    background: linear-gradient(110deg, #075fc7 0%, #1188e2 58%, #55b9ee 100%);
    clip-path: polygon(8% 0, 100% 0, 88% 100%, 0 100%);
    text-shadow: 0 1px 3px rgba(8, 75, 150, .45);
    filter: drop-shadow(0 8px 10px rgba(7, 84, 166, .28));
}

.film-change__copy {
    position: absolute;
    right: 0;
    bottom: 38px;
    z-index: 3;
    width: min(56%, 440px);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.film-change__point {
    display: flex;
    align-items: baseline;
    gap: 7px;
    width: fit-content;
    margin: 0 0 9px;
    padding: 8px 18px 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0b63c7, #1687db);
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 9px 18px rgba(12, 100, 199, .24);
}

.film-change__point span {
    font-size: 12px;
    letter-spacing: .08em;
}

.film-change__point b {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.film-change__copy-body {
    position: relative;
    min-height: 118px;
    padding: 15px 98px 16px 19px;
    overflow: hidden;
    background: rgba(255, 255, 255, .97);
    border-left: 4px solid #1687db;
    border-image: linear-gradient(180deg, #3fa0e8 0%, #0b63c7 100%) 1;
    box-shadow: 7px 8px 18px rgba(8, 38, 73, .16);
}

.film-change__copy-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 0;
    width: 82px;
    height: 82px;
    object-fit: contain;
    transform: translateY(-50%);
    filter: drop-shadow(0 6px 8px rgba(14, 91, 160, .16));
}

.film-change__copy h3,
.film-change__copy p {
    position: relative;
    z-index: 1;
}

.film-change__copy h3 {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin: 0 0 4px;
    color: #17263a;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: clamp(21px, 2.15vw, 28px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .03em;
}

.film-change__copy h3 span {
    position: relative;
    display: inline-block;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* POINTピルと白い説明カードを、それぞれひとまとまりでポップ表示する */
.film-change__point {
    opacity: 0;
    transform: scale(.4);
    transform-origin: left bottom;
}

.film-change__copy.is-visible .film-change__point {
    animation: film-note-pop 560ms cubic-bezier(.3, 1.4, .5, 1) 80ms both;
}

.film-change__copy-body {
    opacity: 0;
    transform: translateY(18px) scale(.9);
    transform-origin: center bottom;
}

.film-change__copy.is-visible .film-change__copy-body {
    animation: film-copy-pop 560ms cubic-bezier(.2, 1.35, .4, 1) 220ms both;
}

.film-change__copy h3,
.film-change__copy p > span,
.film-change__copy p > b {
    opacity: 1;
    transform: none;
}

@keyframes film-copy-pop {
    0%   { opacity: 0; transform: translateY(18px) scale(.9); }
    72%  { opacity: 1; transform: translateY(-3px) scale(1.025); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.film-change__copy p {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #315277;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: .08em;
}

.film-change__copy p > span,
.film-change__copy p > b {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .film-change__point,
    .film-change__copy-body,
    .film-change__copy h3,
    .film-change__copy p > span,
    .film-change__copy p > b { opacity: 1; transform: none; }
    .film-change__copy.is-visible .film-change__point,
    .film-change__copy.is-visible .film-change__copy-body,
    .film-change__copy.is-visible h3,
    .film-change__copy.is-visible p > span,
    .film-change__copy.is-visible p > b { animation: none; }
}

.film-change__copy p > b {
    color: #075fc8;
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 700;
    letter-spacing: .07em;
}

.film-change .price-sec__more {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .film-change {
        padding-bottom: 58px;
    }

    .film-change__decor {
        display: none;
    }

    .film-change__bub--a { width: 48px; height: 48px; top: 35%; right: 3%; }
    .film-change__bub--b { width: 30px; height: 30px; top: 48%; left: 3%; }
    .film-change__bub--c { width: 42px; height: 42px; bottom: 21%; right: 15%; }
    .film-change__bub--d { width: 28px; height: 28px; bottom: 8%; left: 4%; }

    .film-change__list {
        width: 100%;
        max-width: 480px;
        margin: 30px auto 40px;
        padding: 24px 12px 0;
        gap: 72px;
    }

    .film-change__message {
        display: none;
    }

    .film-change__message strong {
        right: 27px;
    }

    .film-change__message span {
        font-size: clamp(12px, 3.6vw, 16px);
        letter-spacing: .06em;
    }

    .film-change__message strong {
        font-size: clamp(29px, 8.4vw, 37px);
        line-height: 1;
        letter-spacing: .05em;
    }

    .film-change__message em {
        font-size: 1.08em;
    }

    .film-change__item {
        min-height: 0;
    }

    .film-change__ph--before {
        width: 74%;
        height: auto;
        aspect-ratio: 3 / 2;
        margin-left: 2%;
    }

    .film-change__ph--after {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        margin: 48px 0 0;
    }

    .film-change__ph img {
        border-width: 3px;
        box-shadow: 0 7px 14px rgba(37,91,135,.15);
    }

    .film-change__ph::before {
        inset: 8px -9px -10px 8px;
        box-shadow: 7px 9px 18px rgba(31, 63, 94, .16);
    }

    .film-change__ph--before::after {
        right: -20px;
        bottom: -40px;
        width: 56px;
        height: 56px;
        filter: drop-shadow(0 5px 7px rgba(16, 86, 175, .18));
    }

    .film-change__note {
        top: 22px;
        right: 6px;
        min-width: 0;
        max-width: 210px;
        padding: 13px 14px 12px 42px;
        border-width: 2px;
        font-size: 12px;
        letter-spacing: .05em;
    }

    .film-change__note::before {
        top: -15px;
        left: -22px;
        width: 56px;
        height: 56px;
        font-size: 9px;
    }

    .film-change__damage-note path {
        stroke-width: 7;
    }

    .film-change__damage-note.film-change__damage-note--after path {
        stroke-width: 5;
    }

    .film-change__tag {
        top: -8px;
        left: -7px;
        min-width: 122px;
        padding: 12px 24px 12px 18px;
        font-size: 14px;
        letter-spacing: .14em;
    }

    .film-change__copy {
        position: relative;
        z-index: 5;
        right: auto;
        bottom: auto;
        width: min(84%, 320px);
        margin: -68px 0 0 8px;
        padding: 0;
    }

    .film-change__copy h3 {
        margin-bottom: 3px;
        font-size: clamp(18px, 5.2vw, 23px);
    }

    .film-change__copy h3 span {
        padding: 0;
        border: 0;
    }

    .film-change__point {
        margin-bottom: 7px;
        padding: 7px 13px 8px;
    }

    .film-change__point span {
        font-size: 10px;
    }

    .film-change__point b {
        font-size: 16px;
    }

    .film-change__copy p {
        gap: 4px;
        padding: 0;
        font-size: clamp(10px, 2.8vw, 12px);
        line-height: 1.55;
    }

    .film-change__copy p > span,
    .film-change__copy p > b {
        padding: 0;
        border: 0;
    }

    .film-change__copy-body {
        min-height: 102px;
        padding: 12px 76px 13px 12px;
        border-left-width: 3px;
    }

    .film-change__copy-icon {
        right: 7px;
        width: 66px;
        height: 66px;
    }

    .film-change__copy p > b {
        font-size: clamp(14px, 4vw, 18px);
    }

    .film-change .price-sec__more {
        margin-top: 0;
    }
}

@media (max-width: 380px) {
    .film-change__list { padding-inline: 10px; }
}

/* ============================================
   対応エリア個別ページ：施工事例のトーン調整
   レイアウトは共通の施工事例スライダーを維持する
   ============================================ */
.works--area {
    background:
        radial-gradient(circle at 8% 18%, rgba(27, 192, 216, 0.14), transparent 28%),
        radial-gradient(circle at 92% 82%, rgba(23, 103, 200, 0.15), transparent 31%),
        linear-gradient(180deg, #f7fbfe 0%, #eaf3fa 52%, #f5f9fc 100%);
    color: #17263a;
}

.works--area::before {
    background:
        radial-gradient(rgba(23, 103, 200, 0.055) 1px, transparent 1px),
        linear-gradient(120deg, rgba(255, 255, 255, 0.7), transparent 46%, rgba(255, 255, 255, 0.38));
    background-size: 7px 7px, 100% 100%;
}

.works--area .works__head .section-kicker {
    color: #178bc9;
}

.works--area .works__head .section-kicker::after {
    background: linear-gradient(90deg, #1bc0d8, #1767c8);
}

.works--area .works__head .section-title {
    color: #17263a;
}

.works--area .works__head .section-lead {
    color: #51697d;
}

.works--area .work-card__link {
    border: 1px solid rgba(23, 103, 200, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    filter: drop-shadow(0 18px 34px rgba(13, 83, 153, 0.14));
}

.works--area .work-card__image {
    background: #dcecf7;
}

.works--area .work-card__zoom-hint {
    border-color: rgba(23, 139, 201, 0.25);
    background: rgba(255, 255, 255, 0.9);
    color: #12639b;
    box-shadow: 0 10px 24px rgba(13, 83, 153, 0.16);
}

.works--area .work-card__panel {
    border-radius: 0 0 17px 17px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
        inset 0 3px 0 #1ab2d3,
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.works--area .work-card__title {
    color: #17304a;
}

.works--area .work-card__desc {
    color: #40586d;
}

.works--area .work-card__category {
    color: #1767c8;
}

.works--area .work-card__category span {
    border: 1px solid rgba(23, 103, 200, 0.08);
    background: #eaf4fb;
}

.works--area .work-card__arrow {
    border-color: transparent;
    background: linear-gradient(135deg, #1bc0d8, #1767c8);
    color: #fff;
    box-shadow: 0 9px 20px rgba(23, 103, 200, 0.22);
}

.works--area .work-card__link:hover .work-card__arrow {
    background: #173f77;
    color: #fff;
}

.works--area .works__nav-button {
    border: 1px solid rgba(23, 103, 200, 0.14);
    background: rgba(255, 255, 255, 0.94);
    color: #1767c8;
    box-shadow: 0 10px 24px rgba(13, 83, 153, 0.14);
}

.works--area .works__nav-button:hover {
    border-color: transparent;
    background: linear-gradient(135deg, #1bc0d8, #1767c8);
    color: #fff;
}

.works--area .works__line {
    background: #d5e5f0;
}

.works--area .works__line span {
    background: linear-gradient(90deg, #1bc0d8, #1767c8);
}

.works--area .works__counter {
    color: #1767c8;
    font-weight: 700;
}

.works--area .works__hint {
    color: #70879a;
}

/* 対応エリア個別ページ：ご依頼からの流れ */
.area-flow-section,
.area-price-section {
    position: relative;
    overflow: hidden;
    color: #17263a;
}

.area-flow-section {
    background:
        radial-gradient(circle at 92% 14%, rgba(27, 192, 216, 0.12), transparent 26%),
        radial-gradient(rgba(23, 103, 200, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, #ffffff 0%, #f1f8fc 100%);
    background-size: auto, 8px 8px, auto;
}

.area-price-section {
    background:
        radial-gradient(circle at 8% 18%, rgba(27, 192, 216, 0.13), transparent 28%),
        radial-gradient(circle at 94% 88%, rgba(23, 103, 200, 0.13), transparent 30%),
        linear-gradient(180deg, #edf6fb 0%, #f8fbfd 50%, #eaf3fa 100%);
}

.area-price-section .area-window-price {
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 767px) {
    .area-price-section .area-window-price {
        margin-top: 34px;
    }
}

.area-flow-section::after,
.area-price-section::after {
    position: absolute;
    width: clamp(150px, 20vw, 290px);
    aspect-ratio: 1;
    border: 1px dashed rgba(23, 103, 200, 0.14);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.area-flow-section::after {
    top: -90px;
    left: -74px;
}

.area-price-section::after {
    right: -88px;
    bottom: -110px;
}

.area-flow-section > *,
.area-price-section > * {
    position: relative;
    z-index: 1;
}

.area-flow-section .section-kicker,
.area-price-section .section-kicker {
    color: #178bc9;
}

.area-flow-section .section-kicker::after,
.area-price-section .section-kicker::after {
    background: linear-gradient(90deg, #1bc0d8, #1767c8);
}

.area-flow-section .section-title,
.area-price-section .section-title {
    color: #17263a;
}

.area-flow-section .price-sec__lead,
.area-price-section .price-sec__lead {
    color: #51697d;
}

.area-flow-section .price-flow::before {
    height: 3px;
    background: linear-gradient(90deg, #1bc0d8 0%, #168bc9 52%, #1767c8 100%);
}

.area-flow-section .price-flow__node {
    border-color: #168bc9;
    box-shadow: 0 0 0 5px rgba(23, 139, 201, 0.14);
}

.area-flow-section .price-flow__card {
    border-color: rgba(23, 103, 200, 0.13);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.99), rgba(241, 249, 253, 0.97));
    box-shadow: 0 18px 38px -24px rgba(13, 83, 153, 0.42);
}

.area-flow-section .price-flow__card::before {
    height: 4px;
    background: linear-gradient(90deg, #1bc0d8, #1767c8);
    opacity: 1;
}

.area-flow-section .price-flow__ghost {
    top: 14px;
    right: 14px;
    color: rgba(23, 103, 200, 0.09);
}

.area-flow-section .price-flow__icon {
    width: 82px;
    height: 82px;
    margin-top: -1px;
    margin-bottom: 12px;
    background: radial-gradient(circle, #fff 54%, #e6f4fb 100%);
    box-shadow: 0 10px 24px rgba(13, 83, 153, 0.13);
}

.area-flow-section .price-flow__icon img,
.area-price-section .pricing-table__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.area-flow-section .price-flow__step:hover .price-flow__icon {
    background: radial-gradient(circle, #fff 54%, #dceff9 100%);
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 16px 28px -12px rgba(13, 83, 153, 0.45);
}

.area-flow-section .price-flow__step h3 {
    color: #17304a;
}

.area-flow-section .price-flow__step h3 em {
    background: linear-gradient(135deg, #1bc0d8, #1767c8);
}

.area-flow-section .price-flow__meta {
    background: #e6f3fa;
    color: #37627f;
}

.area-flow-section .price-flow__meta::before {
    background: #178bc9;
}

/* 対応エリア個別ページ：料金の目安 */
.area-price-section .pricing-table {
    border: 1px solid rgba(23, 103, 200, 0.14);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 22px 48px rgba(13, 83, 153, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.area-price-section .pricing-table__title {
    color: #17304a;
}

.area-price-section .pricing-table__note {
    color: #70879a;
}

.area-price-section .pricing-table__row {
    border-color: rgba(23, 103, 200, 0.11);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(13, 83, 153, 0.09);
}

.area-price-section .pricing-table__row[data-reveal-item] {
    --pricing-reveal-delay: 0ms;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    backface-visibility: hidden;
    transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.area-price-section .pricing-table__row[data-reveal-item]:nth-child(2) {
    --pricing-reveal-delay: 60ms;
}

.area-price-section .pricing-table__row[data-reveal-item]:nth-child(3) {
    --pricing-reveal-delay: 120ms;
}

.area-price-section .pricing-table__row[data-reveal-item]:nth-child(4) {
    --pricing-reveal-delay: 180ms;
}

.area-price-section .pricing-table__row[data-reveal-item]:nth-child(5) {
    --pricing-reveal-delay: 240ms;
}

.area-price-section .pricing-table__row[data-reveal-item].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation: area-pricing-row-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--pricing-reveal-delay) backwards;
}

@keyframes area-pricing-row-reveal {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.area-price-section .pricing-table__row[data-reveal-item].is-visible:hover {
    border-color: rgba(23, 139, 201, 0.3);
    box-shadow: 0 16px 30px rgba(13, 83, 153, 0.14);
    transform: translate3d(0, -2px, 0);
}

.area-price-section .pricing-table__icon {
    width: 68px;
    height: 68px;
    background: radial-gradient(circle, #fff 52%, #e5f3fa 100%);
    box-shadow: 0 9px 20px rgba(13, 83, 153, 0.12);
}

.area-price-section .pricing-table__name {
    color: #17304a;
    font-weight: 700;
}

.area-price-section .pricing-table__desc {
    color: #4f687c;
}

.area-price-section .pricing-table__price {
    color: #1767c8;
}

.area-price-section .pricing-table__amount {
    font-weight: 700;
}

.area-price-section .pricing-table__unit {
    color: #5f7b91;
}

.area-price-section .price-sec__note {
    color: #60798d;
}

@media (max-width: 767px) {
    .area-flow-section .price-flow::before {
        width: 3px;
        height: calc(var(--flow-progress, 0) * (100% - 16px));
        background: linear-gradient(180deg, #1bc0d8, #1767c8);
    }

    .area-flow-section .price-flow__icon {
        width: 66px;
        height: 66px;
        margin-bottom: 10px;
    }

    .area-price-section .pricing-table {
        border-radius: 18px;
    }

    .area-price-section .pricing-table__row {
        border-radius: 14px;
    }

    .area-price-section .pricing-table__icon {
        width: 56px;
        height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .area-price-section .pricing-table__row[data-reveal-item] {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
}

/* 対応エリア個別ページ：LINE写真見積もり */
.area-line-estimate-section {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 8vw, 112px) 20px;
    background:
        radial-gradient(circle at 7% 18%, rgba(27, 192, 216, 0.14), transparent 28%),
        radial-gradient(circle at 94% 84%, rgba(23, 103, 200, 0.13), transparent 30%),
        radial-gradient(rgba(23, 103, 200, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, #f7fbfe 0%, #eaf4fa 100%);
    background-size: auto, auto, 8px 8px, auto;
}

.area-line-estimate-section .area-line-estimate {
    width: min(1120px, 100%);
    margin: 0 auto;
    margin-left: auto;
    padding: clamp(38px, 4.2vw, 54px);
    translate: none;
    border-color: rgba(23, 139, 201, 0.2);
    background:
        radial-gradient(circle at 92% 12%, rgba(27, 192, 216, 0.15), transparent 31%),
        radial-gradient(circle at 4% 92%, rgba(23, 103, 200, 0.1), transparent 29%),
        linear-gradient(145deg, #ffffff 0%, #f8fcff 58%, #edf7fc 100%);
    box-shadow: 0 28px 70px -34px rgba(13, 83, 153, 0.42);
}

.area-line-estimate-section .area-line-estimate::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    height: 5px;
    background: linear-gradient(90deg, #1bc0d8, #168bc9 52%, #1767c8 100%);
    content: "";
}

.area-line-estimate-section .line-estimate__hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
    gap: clamp(38px, 5vw, 68px);
}

.area-line-estimate-section .line-estimate__badge {
    margin-bottom: 38px;
}

.area-line-estimate-section .line-estimate__icon {
    top: 62px;
    left: -30px;
    width: 84px;
}

.area-line-estimate-section .line-estimate__copy h2 {
    max-width: 780px;
    margin: 0;
    padding-left: clamp(28px, 2.8vw, 40px);
    color: #17304a;
    font-size: clamp(27px, 2.2vw, 35px);
    font-weight: 900;
    line-height: 1.32;
    letter-spacing: 0.045em;
}

.area-line-estimate-section .line-estimate__copy h2 span {
    color: #1767c8;
}

.area-line-estimate-section .line-estimate__checks {
    gap: 10px;
    margin-top: 26px;
    padding: 18px 22px;
    border-color: rgba(23, 139, 201, 0.23);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 30px -24px rgba(13, 83, 153, 0.35);
}

.area-line-estimate-section .line-estimate__checks li {
    color: #29445d;
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.65;
}

.area-line-estimate-section .line-estimate__checks li::before {
    border-color: #168bc9;
    color: #1767c8;
}

.area-line-estimate-section .line-estimate__visual {
    padding: 18px;
    border: 1px solid rgba(23, 139, 201, 0.15);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 24px 46px -30px rgba(13, 83, 153, 0.48);
}

.area-line-estimate-section .line-estimate__visual img {
    border-radius: 18px;
}

.area-line-estimate-section .line-estimate__micro {
    margin-top: 20px;
}

.area-line-estimate-section .line-estimate__privacy {
    color: #60798d;
}

.area-line-estimate.is-visible .line-estimate__copy h2 {
    opacity: 1;
    transform: none;
    transition-delay: 180ms;
}

.area-line-estimate .line-estimate__copy h2 {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 767px) {
    .area-line-estimate-section {
        padding: 64px 20px 72px;
    }

    .area-line-estimate-section .area-line-estimate {
        width: 100%;
        margin-inline: auto;
        padding: 30px 14px 26px;
    }

    .area-line-estimate-section .line-estimate__hero {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .area-line-estimate-section .line-estimate__copy h2 {
        padding-left: 0;
        font-size: clamp(21px, 5.8vw, 28px);
        text-align: center;
    }

    .area-line-estimate-section .line-estimate__icon {
        top: 50px;
        left: 4px;
        width: 48px;
    }

    .area-line-estimate-section .line-estimate__checks {
        padding: 16px 14px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .area-line-estimate-section .line-estimate__hero {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   対応エリア個別ページ：地域案内セクション
   ============================================ */
.service-area--local {
    padding: 0 0 clamp(90px, 9vw, 126px);
    background:
        radial-gradient(circle at 8% 12%, rgba(27, 192, 216, 0.12), transparent 27%),
        radial-gradient(circle at 94% 86%, rgba(23, 103, 200, 0.14), transparent 30%),
        radial-gradient(rgba(23, 103, 200, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, #f7fbfe 0%, #eaf4fa 100%);
    background-size: auto, auto, 8px 8px, auto;
}

.service-area--local .service-area__content {
    max-width: 610px;
    padding: clamp(36px, 4.5vw, 54px);
    border: 1px solid rgba(23, 103, 200, 0.13);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.91);
    box-shadow:
        0 24px 52px rgba(13, 83, 153, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px) saturate(1.08);
}

.service-area--local .service-area__map {
    z-index: 3;
}

.service-area--local .section-kicker {
    color: #178bc9;
}

.service-area--local .section-kicker::after {
    background: linear-gradient(90deg, #1bc0d8, #1767c8);
}

.service-area--local .section-title {
    color: #17263a;
    font-weight: 700;
}

.service-area--local .service-area__catch {
    padding-left: 18px;
    border-left: 4px solid #1ab2d3;
    color: #17304a;
    font-weight: 700;
}

.service-area--local .service-area__text {
    color: #40586d;
}

.service-area--local .service-area__list li {
    gap: 7px;
    border-color: rgba(23, 139, 201, 0.22);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(229, 244, 251, 0.94));
    color: #1767c8;
    box-shadow: 0 7px 16px rgba(13, 83, 153, 0.08);
}

.service-area--local .service-area__list li::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1bc0d8, #1767c8);
    content: "";
}

@media (min-width: 768px) {
    .service-area--local .service-area__content {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }
}

@media (max-width: 960px) {
    .service-area--local .service-area__content {
        max-width: 560px;
    }
}

@media (max-width: 767px) {
    .service-area--local {
        padding: 0 0 72px;
    }

    .service-area--local .service-area__content {
        z-index: auto;
        max-width: none;
        padding: 28px 22px;
        border-radius: 22px;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .service-area--local .service-area__content > * {
        position: relative;
        z-index: 4;
    }

    .service-area--local .section-title {
        margin-top: 17px;
        font-size: 29px;
    }

    .service-area--local .service-area__catch {
        margin-top: 22px;
        padding-left: 14px;
        font-size: 19px;
        font-weight: 700;
    }

    .service-area--local .service-area__text {
        font-size: 13px;
        line-height: 1.95;
    }

    .service-area--local .service-area__list {
        gap: 8px 7px;
    }

    .service-area--local .service-area__list li {
        min-height: 34px;
        padding: 7px 12px;
        font-size: 11px;
        letter-spacing: 0.08em;
    }
}

/* ============================================
   対応エリア個別ページ：FAQのトーン調整
   ============================================ */
.area-faq-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 14%, rgba(27, 192, 216, 0.14), transparent 28%),
        radial-gradient(circle at 92% 84%, rgba(23, 103, 200, 0.14), transparent 30%),
        radial-gradient(rgba(23, 103, 200, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, #f7fcff 0%, #eaf4fa 100%);
    background-size: auto, auto, 8px 8px, auto;
}

.area-faq-section .section-kicker {
    color: #178bc9;
}

.area-faq-section .section-kicker::after {
    background: linear-gradient(90deg, #1bc0d8, #1767c8);
}

.area-faq-section .section-title {
    color: #17263a;
    font-weight: 700;
}

.area-faq-section .price-sec__lead {
    color: #40586d;
}

.area-faq-section .price-sec__faq-list {
    width: min(920px, calc(100% - 80px));
}

.area-faq-section .faq-item {
    margin-bottom: 14px;
    border-color: rgba(23, 139, 201, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(13, 83, 153, 0.1);
}

.area-faq-section .faq-item:hover {
    border-color: rgba(27, 192, 216, 0.48);
    box-shadow: 0 18px 40px rgba(13, 83, 153, 0.15);
}

.area-faq-section .faq-item.is-open,
.area-faq-section .faq-item[open] {
    border-color: rgba(23, 103, 200, 0.42);
    background: #fff;
    box-shadow: 0 20px 44px rgba(13, 83, 153, 0.16);
}

.area-faq-section .faq-item summary {
    color: #17304a;
}

.area-faq-section .faq-item__label {
    background: linear-gradient(135deg, #1bc0d8, #1767c8);
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 103, 200, 0.2);
}

.area-faq-section .faq-item__icon {
    background: rgba(27, 192, 216, 0.12);
}

.area-faq-section .faq-item__icon::before,
.area-faq-section .faq-item__icon::after {
    background: #1687db;
}

.area-faq-section .faq-item.is-open .faq-item__icon,
.area-faq-section .faq-item[open] .faq-item__icon {
    background: linear-gradient(135deg, #1bc0d8, #1767c8);
}

.area-faq-section .faq-item.is-open .faq-item__icon::before,
.area-faq-section .faq-item.is-open .faq-item__icon::after,
.area-faq-section .faq-item[open] .faq-item__icon::before,
.area-faq-section .faq-item[open] .faq-item__icon::after {
    background: #fff;
}

.area-faq-section .faq-item__answer p {
    border-top-color: rgba(27, 192, 216, 0.22);
    color: #40586d;
}

@media (max-width: 767px) {
    .area-faq-section .price-sec__faq-list {
        width: auto;
    }

    .area-faq-section .faq-item {
        border-radius: 14px;
    }
}

/* ============================================
   対応エリア個別ページ：お問い合わせCTA
   ============================================ */
.area-contact-cta {
    position: relative;
    padding: clamp(72px, 8vw, 108px) 0 clamp(84px, 9vw, 120px);
    background:
        radial-gradient(circle at 12% 18%, rgba(27, 192, 216, 0.13), transparent 27%),
        radial-gradient(circle at 88% 82%, rgba(23, 103, 200, 0.12), transparent 29%),
        radial-gradient(rgba(23, 103, 200, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, #f7fcff 0%, #eaf4fa 100%);
    background-size: auto, auto, 8px 8px, auto;
}

.area-contact-cta .faq-cta__inner {
    overflow: hidden;
    border: 1px solid rgba(23, 139, 201, 0.2);
    background:
        radial-gradient(circle at 88% 10%, rgba(27, 192, 216, 0.14), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 247, 252, 0.96));
    color: #17304a;
    box-shadow: 0 28px 60px -30px rgba(13, 83, 153, 0.32);
}

.area-contact-cta .faq-cta__inner::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, #1bc0d8, #168bc9 52%, #1767c8);
    content: "";
}

.area-contact-cta__decor {
    position: absolute;
    z-index: 0;
    right: -82px;
    bottom: -128px;
    width: 390px;
    aspect-ratio: 1;
    background: url("../img/area-contact-window-generated.webp") center / contain no-repeat;
    opacity: .24;
    filter: saturate(.82);
    pointer-events: none;
}

.area-contact-cta .faq-cta__kicker {
    color: #178bc9;
    font-weight: 700;
}

.area-contact-cta h2 {
    color: #17304a;
}

.area-contact-cta .faq-cta__lead {
    color: #51697d;
}

.area-contact-cta .faq-cta__btn--form {
    background: linear-gradient(135deg, #1bc0d8, #1767c8);
    box-shadow: 0 14px 28px -12px rgba(23, 103, 200, 0.48);
}

.area-contact-cta .faq-cta__btn--line {
    background: linear-gradient(135deg, #28c75c, #18a94a);
    box-shadow: 0 14px 28px -12px rgba(22, 122, 56, 0.46);
}

.area-contact-cta .faq-cta__btn--phone {
    border: 1px solid rgba(23, 103, 200, 0.28);
    background: rgba(255, 255, 255, 0.78);
    color: #1767c8;
    box-shadow: 0 12px 24px -16px rgba(13, 83, 153, 0.35);
}

.area-contact-cta .faq-cta__note {
    color: #71899c;
}

@media (max-width: 767px) {
    .area-contact-cta {
        padding: 64px 0 76px;
    }

    .area-contact-cta .faq-cta__inner {
        padding: 44px 22px 38px;
        border-radius: 22px;
    }

    .area-contact-cta__decor {
        top: -48px;
        right: -78px;
        bottom: auto;
        width: 230px;
        opacity: .13;
    }
}

/* 白山市ページ：トップページのお客様の声を地域LP向けに再構成 */
.area-voice {
    position: relative;
    padding: clamp(82px, 9vw, 128px) 0 clamp(88px, 10vw, 138px);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .92) 0 5%, transparent 28%),
        radial-gradient(circle at 88% 78%, rgba(91, 193, 226, .18), transparent 30%),
        linear-gradient(145deg, #eef9fd 0%, #d8eef8 48%, #edf7fc 100%);
    color: #17304a;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.area-voice::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(23, 103, 200, .12) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .26;
    content: "";
}

.area-voice__circle {
    position: absolute;
    z-index: -1;
    display: block;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
    box-shadow: inset 0 0 34px rgba(75, 176, 221, .14);
    pointer-events: none;
}

.area-voice__circle--left {
    top: 19%;
    left: -76px;
    width: 190px;
    height: 190px;
}

.area-voice__circle--right {
    right: -54px;
    bottom: 9%;
    width: 140px;
    height: 140px;
}

.area-voice__inner {
    position: relative;
    z-index: 1;
    width: min(1100px, calc(100% - 80px));
    margin: 0 auto;
}

.area-voice__head {
    text-align: center;
}

.area-voice__kicker {
    margin: 0;
}

.area-voice__head .section-title {
    margin-top: 28px;
    color: #17304a;
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 900;
    letter-spacing: .08em;
}

.area-voice__lead.section-lead {
    max-width: 680px;
    margin: 20px auto 0;
    color: #526d82;
    font-size: clamp(14px, 1.45vw, 16px);
    line-height: 1.9;
    letter-spacing: .05em;
    text-align: center;
}

.area-voice__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 26px);
    margin-top: clamp(44px, 6vw, 68px);
}

.area-voice__cards--single {
    grid-template-columns: minmax(0, 350px);
    justify-content: center;
}

.area-voice__cards--two {
    grid-template-columns: repeat(2, minmax(0, 350px));
    justify-content: center;
}

.area-voice-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(44, 142, 196, .2);
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 22px 52px -26px rgba(13, 83, 153, .42), inset 0 1px 0 rgba(255, 255, 255, .98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform .25s ease, box-shadow .25s ease;
}

.area-voice-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    height: 5px;
    background: linear-gradient(90deg, #1bc0d8, #168bc9 52%, #1767c8);
    content: "";
}

@media (hover: hover) {
    .area-voice-card:hover {
        box-shadow: 0 28px 58px -24px rgba(13, 83, 153, .5), inset 0 1px 0 #fff;
        transform: translateY(-6px);
    }
}

.area-voice-card__image {
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
    background: #dcecf4;
}

.area-voice-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.area-voice-card__body {
    position: relative;
    min-height: 240px;
    padding: 34px 28px 26px;
}

.area-voice-card__quote {
    position: absolute;
    top: 13px;
    left: 21px;
    color: rgba(23, 139, 201, .16);
    font-family: Georgia, serif;
    font-size: 82px;
    line-height: 1;
}

.area-voice-card__illustration {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 78px;
    height: auto;
    opacity: .18;
    pointer-events: none;
}

.area-voice-card__text {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #29445d;
    font-size: 14px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: .045em;
}

.area-voice-card__name {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin: 24px 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    background: #edf7fc;
    color: #1767c8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
}

@media (max-width: 900px) {
    .area-voice__cards,
    .area-voice__cards--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .area-voice {
        padding: 60px 0 78px;
    }

    .area-voice__inner {
        width: calc(100% - 40px);
    }

    .area-voice__head .section-title {
        margin-top: 22px;
        font-size: 30px;
    }

    .area-voice__lead.section-lead {
        margin-top: 16px;
        font-size: 13.5px;
        line-height: 1.85;
    }

    .area-voice__cards,
    .area-voice__cards--single,
    .area-voice__cards--two {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 38px;
    }

    .area-voice-card {
        border-radius: 20px;
    }

    .area-voice-card__body {
        min-height: 0;
        padding: 30px 22px 24px;
    }

    .area-voice-card__text {
        font-size: 13.5px;
        line-height: 1.95;
    }

    .area-voice__circle--left {
        left: -96px;
    }
}

/* 対応エリア詳細：スマホ固定CTA */
@media (max-width: 767px) {
    .mobile-floating-cta.mobile-floating-cta--area-pop {
        right: 16px;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 62px;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 8px;
        background: transparent !important;
        box-shadow: 0 10px 28px rgba(22, 43, 64, .24);
    }

    .mobile-floating-cta--area-pop .mobile-floating-cta__item {
        gap: 7px;
        min-width: 0;
        min-height: 62px;
        padding: 7px 8px;
        letter-spacing: .02em;
    }

    .mobile-floating-cta--area-pop .mobile-floating-cta__item + .mobile-floating-cta__item::before {
        display: none;
    }

    .mobile-floating-cta__item--self-check {
        display: flex;
        gap: 4px;
        justify-content: center;
        padding-right: 4px;
        padding-left: 4px;
        border: 2px solid #159ad7;
        border-right: 0;
        border-radius: 8px 0 0 8px;
        background: linear-gradient(135deg, #fff 0 64%, #e4f8fd 100%);
        color: #0878d1;
    }

    .mobile-floating-cta__item--self-check .mobile-floating-cta__copy strong {
        font-size: 14px;
        line-height: 1.05;
        letter-spacing: -.06em;
        white-space: nowrap;
    }

    .mobile-floating-cta__item--line-add {
        gap: 4px;
        justify-content: center;
        padding-right: 4px;
        padding-left: 4px;
        border-radius: 0 8px 8px 0;
        background: linear-gradient(135deg, #05d35d, #00bc4f);
        color: #fff;
    }

    .mobile-floating-cta__item--line-add .mobile-floating-cta__copy small {
        font-size: clamp(10.5px, 3.2vw, 12.5px);
    }

    .mobile-floating-cta__mascot {
        position: absolute;
        z-index: 2;
        top: -10px;
        left: -2px;
        display: block;
        width: 34px;
        height: 34px;
        transform: rotate(-5deg);
        filter: drop-shadow(0 4px 5px rgba(8, 120, 209, .2));
    }

    .mobile-floating-cta__mascot svg,
    .mobile-floating-cta__person-add svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .mobile-floating-cta__copy {
        display: grid;
        gap: 1px;
        line-height: 1.05;
        white-space: nowrap;
    }

    .mobile-floating-cta__copy small {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .05em;
    }

    .mobile-floating-cta__copy strong {
        font-size: clamp(12px, 3.45vw, 15px);
        font-weight: 900;
        letter-spacing: 0;
    }

    .mobile-floating-cta__round-arrow {
        display: grid;
        place-items: center;
        flex: 0 0 18px;
        min-width: 18px;
        width: 18px;
        height: 18px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: linear-gradient(135deg, #18b8d1, #0878d1);
        color: #fff;
    }

    .mobile-floating-cta__round-arrow svg {
        display: block;
        width: 7px;
        height: 11px;
    }

    .mobile-floating-cta__person-add {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        color: #fff;
    }
}

/* nett stylesheet sync checkpoint: 2026-07-27 20:17 */

/* トップページ「お客様の声」センターカード型スライダー */
.voice .voice__inner {
    width: min(1100px, calc(100% - 48px));
}

.voice-slider {
    --voice-card-width: min(480px, calc(100vw - 120px));
    --voice-card-half: min(240px, calc((100vw - 120px) / 2));
    position: relative;
    width: min(1240px, calc(100vw - 32px));
    margin: 52px 0 0 50%;
    transform: translateX(-50%);
}

.voice-slider[data-reveal-item] {
    transform: translate(-50%, 40px);
}

.voice-slider[data-reveal-item].is-visible {
    transform: translate(-50%, 0);
}

.voice-slider__viewport {
    overflow: hidden;
    padding: 10px 0 16px;
    cursor: grab;
    touch-action: pan-y;
}

.voice-slider__viewport.is-dragging {
    cursor: grabbing;
}

.voice .voice__cards {
    display: flex;
    align-items: stretch;
    gap: 28px;
    width: max-content;
    margin: 0;
    transition: transform 620ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.voice-slider.is-jumping .voice__cards,
.voice-slider.is-jumping .voice-card {
    transition: none !important;
}

.voice .voice-card {
    flex: 0 0 var(--voice-card-width);
    min-width: 0;
    opacity: .52;
    transform: scale(.94);
    transform-origin: center;
    transition:
        opacity 460ms ease,
        transform 620ms cubic-bezier(.22, 1, .36, 1);
}

.voice .voice-card.is-active {
    z-index: 2;
    opacity: 1;
    transform: scale(1);
}

.voice .voice-card__body {
    height: 100%;
    padding: 22px 22px 28px;
    border-radius: 26px;
    box-shadow: 0 24px 54px rgba(32, 48, 64, .15);
}

.voice .voice-card__image {
    border-radius: 19px;
}

.voice-slider__bottom {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    align-items: center;
    gap: clamp(28px, 5vw, 70px);
    width: min(980px, calc(100% - 80px));
    margin: 34px auto 0;
}

.voice-slider__nav {
    display: flex;
    gap: 24px;
}

.voice-slider__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1b1e29;
    box-shadow: 0 12px 24px rgba(20, 28, 40, .12);
    cursor: pointer;
    transition:
        background 200ms ease,
        color 200ms ease,
        box-shadow 200ms ease;
}

.voice-slider__button svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (hover: hover) {
    .voice-slider__button:hover {
        background: #1b1e29;
        color: #fff;
        box-shadow: 0 14px 30px rgba(33, 58, 82, .24);
    }
}

.voice-slider__button:focus-visible {
    outline: 3px solid rgba(36, 131, 204, .32);
    outline-offset: 4px;
}

.voice-slider__line {
    position: relative;
    display: block;
    height: 3px;
    border-radius: 999px;
    background: #dfe2e4;
}

.voice-slider__line span {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: #1b1e29;
    transform: translateY(-50%);
    transition: width 420ms ease, left 420ms ease;
}

.voice-slider__counter {
    margin: 0;
    color: #1b1e29;
    font-family: "Roboto", var(--font);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .1em;
    white-space: nowrap;
}

.voice-slider__hint {
    grid-column: 1 / -1;
    margin: -12px 0 0;
    color: rgba(27, 30, 41, .42);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .12em;
    text-align: center;
}

.voice-slider--single {
    width: min(520px, calc(100vw - 40px));
}

.voice-slider--single .voice-slider__viewport {
    padding-bottom: 12px;
}

.voice-slider--single .voice-card {
    opacity: 1;
    transform: none;
}

@media (max-width: 767px) {
    .voice .voice__inner {
        width: calc(100% - 24px);
    }

    .voice-slider {
        --voice-card-width: calc(100vw - 88px);
        width: calc(100vw - 16px);
        margin-top: 34px;
    }

    .voice-slider__viewport {
        padding: 8px 0 12px;
    }

    .voice .voice__cards {
        gap: 14px;
    }

    .voice .voice-card {
        opacity: .4;
        transform: scale(.96);
    }

    .voice .voice-card__body {
        padding: 14px 14px 20px;
        border-radius: 22px;
    }

    .voice .voice-card__image {
        border-radius: 15px;
    }

    .voice .voice-card__illustration {
        right: 4px;
        width: min(88px, 31%);
    }

    .voice-slider__bottom {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 18px;
        width: calc(100% - 32px);
        margin-top: 18px;
    }

    .voice-slider__nav {
        gap: 12px;
    }

    .voice-slider__button {
        width: 46px;
        height: 46px;
    }

    .voice-slider__button svg {
        width: 20px;
        height: 20px;
    }

    .voice-slider__counter {
        font-size: 16px;
    }

    .voice-slider__hint {
        margin-top: 0;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .voice .voice__cards,
    .voice .voice-card,
    .voice-slider__button {
        transition-duration: 1ms;
    }
}

/* お客様の声：トップ3件＋専用一覧ページ */
.voice {
    min-height: 0;
}

.voice .voice__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: auto;
    margin: 60px 0 0;
    transform: none !important;
    transition: none;
}

.voice .voice__cards--single {
    grid-template-columns: minmax(0, 1fr);
    width: calc((100% - 48px) / 3);
    margin-right: auto;
    margin-left: auto;
}

.voice .voice__cards--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(66.666% - 8px);
    margin-right: auto;
    margin-left: auto;
}

/* 旧スライダー時代の opacity:.52 / scale(.94) を打ち消す指定。
   ただし data-reveal-item が付いたカードは登場アニメーションに任せるため、
   :not() で除外する。ここを外すとフェードインが効かなくなる。 */
.voice .voice-card:not([data-reveal-item]) {
    display: block;
    min-width: 0;
    opacity: 1;
    transform: none;
}

/* 登場アニメーション対象のカード。上の旧スライダー用ルール（9959行あたり）より
   詳細度を上げるため、.voice__cards を挟んだセレクタで指定している。 */
.voice .voice__cards .voice-card[data-reveal-item] {
    display: block;
    min-width: 0;
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 1100ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.voice .voice__cards .voice-card[data-reveal-item].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .voice .voice__cards .voice-card[data-reveal-item] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.voice .voice-card__body {
    height: 100%;
}

.voice__more-wrap {
    margin: 46px 0 0;
    text-align: center;
}

.voice-hero {
    position: relative;
    display: grid;
    min-height: clamp(680px, 78vh, 840px);
    overflow: hidden;
    background: #756b5f;
    color: #fff;
    font-family: "Zen Kaku Gothic New", var(--font);
    isolation: isolate;
}

.voice-hero__backdrop {
    --voice-backdrop-blur: 22px;
    --voice-backdrop-scale: 1.1;
    position: absolute;
    z-index: -2;
    inset: -30px;
    background: url("../img/glass-film-hero-01.webp") center 52% / cover no-repeat;
    filter: blur(var(--voice-backdrop-blur));
    transform: scale(var(--voice-backdrop-scale));
    animation: voice-hero-backdrop-fade 1.25s ease-out both;
    will-change: opacity;
}

.voice-hero::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(28, 28, 26, .55) 0%, rgba(31, 31, 28, .18) 45%, rgba(28, 27, 24, .45) 100%),
        linear-gradient(180deg, rgba(22, 21, 19, .28) 0%, transparent 36%, rgba(23, 22, 19, .34) 100%);
    content: "";
    animation: voice-hero-fade 1s ease-out both;
}

.voice-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(360px, 460px) minmax(200px, 1fr);
    align-items: center;
    gap: clamp(34px, 5vw, 84px);
    width: min(1440px, 100%);
    min-height: inherit;
    margin: 0 auto;
    padding: 128px clamp(38px, 5vw, 84px) 60px;
}

.voice-hero__window {
    position: relative;
    grid-column: 2;
    align-self: center;
    justify-self: center;
    width: clamp(300px, 20vw, 360px);
    aspect-ratio: 307 / 408;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px 999px 6px 6px;
    background: rgba(255, 255, 255, .08);
    box-shadow:
        0 28px 64px rgba(16, 17, 15, .28),
        inset 0 0 0 1px rgba(255, 255, 255, .1);
    animation: voice-hero-window-fade 1.05s cubic-bezier(.22, .61, .36, 1) .12s both;
    will-change: opacity, transform;
}

.voice-hero__window img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: 43% 50%;
}

.voice-hero__message {
    grid-column: 1;
    justify-self: end;
    margin: 0;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(18px, 1.45vw, 23px);
    font-weight: 500;
    line-height: 2.15;
    letter-spacing: .18em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .34);
    writing-mode: vertical-rl;
    animation: voice-hero-text-pop .4s cubic-bezier(.2, .8, .25, 1) .9s both;
}

@media (min-width: 961px) {
    .voice-hero {
        min-height: clamp(650px, 66vh, 700px);
    }

    .voice-hero__inner {
        padding-top: 96px;
        padding-bottom: 36px;
    }

    .voice-hero__window {
        width: clamp(340px, 25vw, 420px);
    }

    .voice-hero__message {
        font-size: clamp(24px, 1.85vw, 30px);
    }
}

.voice-hero__title {
    grid-column: 3;
    align-self: end;
    margin-bottom: clamp(68px, 10vh, 120px);
    text-shadow: 0 2px 20px rgba(0, 0, 0, .28);
}

.voice-hero__kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    animation: voice-hero-text-pop .36s cubic-bezier(.2, .8, .25, 1) 1.02s both;
}

.voice-hero__kicker::after {
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, .76);
    content: "";
}

.voice-hero__title h1 {
    margin: 0;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(34px, 3vw, 52px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .1em;
    animation: voice-hero-text-pop .38s cubic-bezier(.2, .8, .25, 1) 1.14s both;
}

.voice-hero__sub {
    margin: 28px 0 0;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 2;
    letter-spacing: .1em;
    animation: voice-hero-text-pop .34s cubic-bezier(.2, .8, .25, 1) 1.22s both;
}

.voice-hero__breadcrumb {
    position: absolute;
    right: clamp(38px, 5vw, 84px);
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .08em;
    animation: voice-hero-text-pop .32s cubic-bezier(.2, .8, .25, 1) 1.3s both;
}

@keyframes voice-hero-backdrop-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes voice-hero-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes voice-hero-window-fade {
    from {
        opacity: 0;
        filter: blur(3px);
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        filter: none;
        transform: translateY(0);
    }
}

@keyframes voice-hero-text-pop {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: translateY(7px) scale(.97);
    }
    to {
        opacity: 1;
        filter: none;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .voice-hero::after,
    .voice-hero__window,
    .voice-hero__message,
    .voice-hero__kicker,
    .voice-hero__title h1,
    .voice-hero__sub,
    .voice-hero__breadcrumb {
        animation: none !important;
        filter: none;
        opacity: 1;
        transform: none;
    }

    .voice-hero__backdrop {
        animation: none !important;
        filter: blur(var(--voice-backdrop-blur));
        opacity: 1;
        transform: scale(var(--voice-backdrop-scale));
    }
}

.voice-hero__breadcrumb a {
    transition: opacity .2s ease;
}

.voice-hero__breadcrumb a:hover {
    opacity: .65;
}

.voice-hero__breadcrumb em {
    font-style: normal;
    opacity: .7;
}

.post-type-archive-voice .site-header {
    color: #fff;
}

.voice-archive {
    position: relative;
    padding: clamp(72px, 8vw, 112px) 24px clamp(88px, 9vw, 128px);
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(247, 250, 252, .92)),
        url("../img/voice-bg.webp?v=202606191807") center / cover fixed;
    color: #262a32;
    font-family: "Zen Kaku Gothic New", var(--font);
}

.voice-archive__inner {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    margin: 0 auto;
}

.voice-archive__marquee {
    position: absolute;
    z-index: 0;
    top: 14px;
    left: 0;
    width: 100%;
    overflow: hidden;
    color: rgba(99, 109, 117, .065);
    font-family: "Times New Roman", "Noto Serif JP", serif;
    font-size: clamp(112px, 14vw, 210px);
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.045em;
    pointer-events: none;
    white-space: nowrap;
}

.voice-archive__marquee-track {
    display: flex;
    width: max-content;
    animation: voice-archive-marquee 34s linear infinite;
    will-change: transform;
}

.voice-archive__marquee-track span {
    display: block;
    flex: none;
}

@keyframes voice-archive-marquee {
    to {
        transform: translateX(-50%);
    }
}

.voice-archive__head {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr);
    align-items: center;
    gap: 24px 42px;
    margin-bottom: 68px;
    padding: 26px 0 8px;
    text-align: left;
}

.voice-archive__head .section-kicker {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    color: #606a72;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
}

.voice-archive__head .section-kicker::after {
    width: 56px;
    height: 1px;
    margin: 0;
    background: rgba(87, 97, 105, .58);
}

.voice-archive__head .section-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: #303139;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(40px, 4.1vw, 58px);
    font-weight: 400;
    line-height: 1.32;
    letter-spacing: .09em;
}

.voice-archive__head .section-lead {
    grid-column: 1 / -1;
    margin: 0;
    color: #4d555c;
    font-size: 15px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: .11em;
}

.voice-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 30px 24px;
}

.voice-archive-card {
    min-width: 0;
}

.voice-archive-card .voice-card__body {
    height: 100%;
}

.voice-archive__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 42px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    color: #667889;
    text-align: center;
}

.voice-archive .navigation.pagination {
    margin-top: 58px;
}

@media (max-width: 960px) {
    .voice-hero__inner {
        grid-template-columns: minmax(120px, .65fr) minmax(250px, 300px) minmax(160px, .8fr);
        gap: 28px;
        padding-right: 32px;
        padding-left: 32px;
    }

    .voice-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    /* 620pxだと画面の9割を占め、本文までスクロールが必要になるため低くする */
    .voice-hero {
        min-height: 460px;
    }

	.voice-hero__backdrop {
		--voice-backdrop-blur: 14px;
		--voice-backdrop-scale: 1.12;
		inset: -18px;
	}

    .voice-hero::after {
        background:
            linear-gradient(180deg, rgba(29, 27, 24, .5) 0%, rgba(30, 29, 25, .12) 38%, rgba(25, 24, 21, .52) 100%);
    }

    .voice-hero__inner {
        display: block;
        min-height: 460px;
        padding: 72px 18px 30px;
    }

    /* ヒーローを低くしたぶん、画像も縦を詰めてパンくずと重ならないようにする。
       上マージンは「お客様の声」の見出しと重ならない位置まで下げること。 */
    .voice-hero__window {
        width: min(50vw, 196px);
        aspect-ratio: 307 / 372;
        height: auto;
        min-height: 0;
        margin: 92px auto 0;
        border-radius: 999px 999px 5px 5px;
    }

    .voice-hero__window img {
        object-position: 43% 50%;
    }

    .voice-hero__message {
        position: absolute;
        z-index: 2;
        top: 178px;
        left: 18px;
        justify-self: auto;
        font-size: 13px;
        line-height: 1.85;
        letter-spacing: .14em;
    }

    .voice-hero__title {
        position: absolute;
        z-index: 2;
        top: 90px;
        right: 18px;
        left: 18px;
        margin: 0;
    }

    .voice-hero__kicker {
        margin-bottom: 10px;
        font-size: 9px;
    }

    .voice-hero__title h1 {
        font-size: 30px;
        letter-spacing: .08em;
    }

    .voice-hero__sub {
        position: absolute;
        right: 0;
        top: 472px;
        margin: 0;
        font-size: 12px;
        line-height: 1.8;
        text-align: right;
    }

    .voice-hero__breadcrumb {
        right: auto;
        bottom: 20px;
        left: 18px;
        font-size: 10px;
    }

    .voice {
        padding-top: 64px;
        padding-bottom: 68px;
    }

    .voice .voice__cards,
    .voice .voice__cards--single,
    .voice .voice__cards--two {
        grid-template-columns: 1fr;
        gap: 28px;
        width: 100%;
        margin-top: 44px;
    }

    .voice__more-wrap {
        margin-top: 42px;
    }

    .voice-archive {
        padding: 72px 16px 92px;
        background-attachment: scroll;
    }

    .voice-archive__head {
        display: block;
        margin-bottom: 48px;
        padding-top: 16px;
        text-align: left;
    }

    .voice-archive__marquee {
        top: 24px;
        font-size: 92px;
    }

    .voice-archive__marquee-track {
        animation-duration: 26s;
    }

    .voice-archive__head .section-kicker {
        margin-bottom: 18px;
        font-size: 9px;
    }

    .voice-archive__head .section-kicker::after {
        width: 42px;
    }

    .voice-archive__head .section-title {
        font-size: 34px;
        letter-spacing: .08em;
    }

    .voice-archive__head .section-lead {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.9;
    }

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

    .voice-archive-card .voice-card__body {
        padding: 18px 18px 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .voice-archive__marquee-track {
        animation: none;
    }
}

/* ============================================================
   対応エリア詳細：トップページ基調デザイン
   通常URLのみ。/blue/ の旧デザインには影響させない。
   ============================================================ */

.area-home-design {
    background: #f7f9fa;
    color: #262a32;
}

.area-home-design .site-header {
    background: transparent;
    color: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.area-home-design:not(.is-menu-open):not(.is-menu-closing) .header-logo span {
    color: #fff;
    opacity: 1;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

.area-detail-main--home {
    /* overflow: hidden だと内側の position: sticky（sky-seat）が効かなくなるため、
       横方向のはみ出し対策だけを clip で行う。縦は visible のままにすること。 */
    overflow-x: clip;
    background: #f7f9fa;
    color: #262a32;
}

.area-home-hero__copy {
    font-family: "Noto Serif JP", serif;
}

/* 1枚だけの地域KVは3枚用フェードを止め、透明化による黒画面を防ぐ。 */
.area-home-hero .hero-media {
    background-position: center;
    background-size: cover;
}

.area-home-hero .hero-slider--single .hero-media,
.area-home-hero .hero-slider--single .hero-media img {
    opacity: 1;
    animation: none;
}

/* 白山市KV：窓のパースをトップページと同じ向きにそろえる */
.area-home-hero--hakusan .hero-media:first-child {
    transform: scaleX(-1);
}

.area-home-concerns {
    padding-top: clamp(88px, 9vw, 132px);
    padding-bottom: clamp(92px, 10vw, 146px);
    font-family: "Zen Kaku Gothic New", var(--font);
}

.area-home-concerns .concerns-inner {
    width: min(1100px, calc(100% - 48px));
}

.area-home-concerns .section-title {
    font-family: "Zen Kaku Gothic New", var(--font);
    font-weight: 500;
}

.area-home-concerns .section-kicker,
.area-home-concerns .section-lead,
.area-home-concerns .concern-text {
    font-family: "Zen Kaku Gothic New", var(--font);
}

.area-home-concern-icon img {
    display: block;
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.area-home-intro {
    position: relative;
    padding: clamp(92px, 10vw, 150px) 24px;
    overflow: hidden;
    background: #f2f0ec;
    color: #25272a;
}

.area-home-intro::before {
    position: absolute;
    top: -55px;
    right: -30px;
    color: rgba(61, 62, 59, .045);
    content: "LOCAL WINDOW";
    font-family: "Times New Roman", serif;
    font-size: clamp(100px, 15vw, 220px);
    font-style: italic;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.area-home-intro__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    align-items: center;
    gap: clamp(52px, 7vw, 106px);
    width: min(1120px, 100%);
    margin: 0 auto;
}

.area-home-intro__image {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 30px 68px rgba(35, 35, 31, .14);
}

.area-home-intro__image::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .26);
    content: "";
    pointer-events: none;
}

.area-home-intro__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.area-home-intro__copy .section-kicker {
    color: #7d858b;
    font-size: 11px;
}

.area-home-intro__copy .section-kicker::after {
    margin-left: 0;
    background: #90979b;
}

.area-home-intro__copy h2 {
    margin: 34px 0 0;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(31px, 3.2vw, 46px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: .1em;
}

.area-home-intro__copy > p:not(.section-kicker) {
    margin: 30px 0 0;
    color: #4d5357;
    font-size: 15px;
    line-height: 2.15;
    letter-spacing: .08em;
}

.area-home-intro__copy ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.area-home-intro__copy li {
    padding: 8px 15px 9px;
    border: 1px solid rgba(67, 75, 80, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .42);
    color: #4c555b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
}

.area-home-solutions {
    padding-top: 86px;
}

.area-home-solutions .choose__head h2 {
    font-family: "Zen Kaku Gothic New", var(--font);
}

/* トップページの同セクションは <br> で改行位置を決めているため white-space: nowrap だが、
   対応エリアページの本文は地域ごとに長さが変わるので折り返しを許可する。 */
.area-home-solutions .choose-item__body p {
    white-space: normal;
}

.area-home-solutions .choose-item__image img {
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

.area-home-solutions .choose-item:hover .choose-item__image img {
    transform: scale(1.025);
}

.works--area-home {
    padding-top: clamp(92px, 9vw, 132px);
    padding-bottom: clamp(88px, 9vw, 126px);
}

.area-home-voice {
    min-height: 0;
}

.area-home-voice .voice__vertical {
    font-family: "Noto Serif JP", serif;
}

/* 縦書きの下に伸びる装飾線は、文字だけのほうがすっきり見えるため消す */
.area-home-voice .voice__vertical::after {
    content: none;
}

/* 通常の対応エリアページでは、Blue版のフローをページ全体のニュートラル配色に合わせる */
.area-home-design .area-flow-section {
    color: #2c3033;
    background:
        radial-gradient(circle at 92% 14%, rgba(116, 126, 116, .1), transparent 27%),
        radial-gradient(rgba(91, 98, 94, .045) 1px, transparent 1px),
        linear-gradient(180deg, #faf9f6 0%, #f1efea 100%);
    background-size: auto, 8px 8px, auto;
}

.area-home-design .area-flow-section::after {
    border-color: rgba(102, 110, 104, .14);
}

.area-home-design .area-flow-section .section-kicker {
    color: #7d8581;
}

.area-home-design .area-flow-section .section-kicker::before,
.area-home-design .area-flow-section .section-kicker::after {
    background: linear-gradient(90deg, #1bc0d8, #1767c8);
}

.area-home-design .area-flow-section .section-title {
    color: #292d2f;
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
}

.area-home-design .area-flow-section .price-sec__lead {
    color: #5c6463;
}

.area-home-design .area-flow-section .price-flow::before {
    background: linear-gradient(90deg, #1bc0d8 0%, #168bc9 52%, #1767c8 100%);
}

.area-home-design .area-flow-section .price-flow__node {
    border-color: #168bc9;
    background: #faf9f6;
    box-shadow: 0 0 0 5px rgba(23, 139, 201, .14);
}

.area-home-design .area-flow-section .price-flow__step--free .price-flow__node::after {
    border-color: rgba(23, 139, 201, .5);
}

.area-home-design .area-flow-section .price-flow__card {
    border-color: rgba(97, 101, 97, .13);
    background: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(243, 241, 236, .97));
    box-shadow: 0 18px 38px -24px rgba(48, 50, 47, .32);
}

.area-home-design .area-flow-section .price-flow__step:hover .price-flow__card {
    border-color: rgba(111, 126, 115, .3);
    box-shadow: 0 26px 44px -24px rgba(48, 50, 47, .42);
}

.area-home-design .area-flow-section .price-flow__card::before {
    display: none;
}

.area-home-design .area-flow-section .price-flow__ghost {
    color: rgba(90, 99, 93, .085);
}

.area-home-design .area-flow-section .price-flow__icon {
    background: radial-gradient(circle, #fff 54%, #e9e6df 100%);
    box-shadow: 0 10px 24px rgba(56, 61, 57, .1);
}

.area-home-design .area-flow-section .price-flow__icon img {
    filter: grayscale(.72) saturate(.58) contrast(.96);
}

.area-home-design .area-flow-section .price-flow__step:hover .price-flow__icon {
    background: radial-gradient(circle, #fff 54%, #dfddd5 100%);
    box-shadow: 0 16px 28px -12px rgba(56, 61, 57, .34);
}

.area-home-design .area-flow-section .price-flow__step h3 {
    color: #303534;
}

.area-home-design .area-flow-section .price-flow__step h3 em {
    background: linear-gradient(135deg, #929c94, #66736a);
    box-shadow: 0 6px 14px -6px rgba(65, 75, 68, .42);
}

.area-home-design .area-flow-section .price-flow__meta {
    background: #ebe9e3;
    color: #606965;
}

.area-home-design .area-flow-section .price-flow__meta::before {
    background: #7d8a80;
}

/* 料金・対応エリアも通常ページのアイボリー／チャコール基調へそろえる */
.area-home-design .area-home-pricing {
    background: #f3f1ec;
    color: #292d2f;
}

.area-home-design .area-home-pricing::before {
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .82), rgba(255, 255, 255, .22) 44%, rgba(225, 221, 213, .22) 100%),
        linear-gradient(180deg, rgba(250, 249, 246, .78), rgba(240, 237, 231, .58));
}

.area-home-design .area-home-pricing .pricing__head .section-kicker {
    color: #7d8581;
}

.area-home-design .area-home-pricing .pricing__head .section-kicker::after {
    background: #8f9792;
}

.area-home-design .area-home-pricing .pricing__head .section-title,
.area-home-design .area-home-pricing .pricing-mado__title {
    color: #292d2f;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-weight: 500;
}

.area-home-design .area-home-pricing .pricing-table {
    border-color: rgba(91, 94, 90, .1);
    background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(247, 245, 240, .64));
    box-shadow: 0 22px 45px rgba(60, 62, 58, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.area-home-design .area-home-pricing .pricing-table__row {
    border-color: rgba(91, 94, 90, .08);
    background: rgba(255, 255, 255, .76);
}

.area-home-design .area-home-pricing .pricing-table__title {
    color: #303433;
}

.area-home-design .area-home-pricing .pricing-table__note,
.area-home-design .area-home-pricing .pricing-table__desc,
.area-home-design .area-home-pricing .pricing-mado__lead,
.area-home-design .area-home-pricing .pricing-mado__note {
    color: #626967;
}

.area-home-design .area-home-service-area {
    background:
        radial-gradient(circle at 8% 12%, rgba(121, 131, 122, .08), transparent 28%),
        radial-gradient(circle at 94% 86%, rgba(99, 108, 101, .08), transparent 31%),
        radial-gradient(rgba(91, 98, 94, .035) 1px, transparent 1px),
        linear-gradient(180deg, #faf9f6 0%, #efede7 100%);
    background-size: auto, auto, 8px 8px, auto;
}

.area-home-design .area-home-service-area .service-area__photo {
    box-shadow: 0 22px 48px rgba(48, 50, 47, .12);
}

.area-home-design .area-home-service-area .service-area__content {
    border-color: rgba(91, 94, 90, .11);
    background: rgba(252, 251, 248, .92);
    box-shadow: 0 24px 52px rgba(48, 50, 47, .1), inset 0 1px 0 rgba(255, 255, 255, .98);
}

.area-home-design .area-home-service-area .section-kicker {
    color: #7d8581;
}

.area-home-design .area-home-service-area .section-kicker::after {
    background: #8f9792;
}

.area-home-design .area-home-service-area .section-title {
    color: #292d2f;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-weight: 500;
}

.area-home-design .area-home-service-area .service-area__catch {
    border-left-color: #168bc9;
    color: #303433;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-weight: 700;
}

.area-home-design .area-home-service-area .service-area__text {
    color: #5b6361;
}

.area-home-design .area-home-service-area .service-area__map::before {
    background: rgba(91, 101, 94, .08);
}

@media (min-width: 768px) {
    .area-home-design .area-home-service-area .service-area__content {
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}

.area-home-guide {
    position: relative;
    padding: clamp(86px, 8vw, 124px) 24px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(248, 248, 247, .82), rgba(255, 255, 255, .58) 52%, rgba(247, 248, 247, .78)),
        url("../img/area-guide-glass-bg-generated.webp") center / cover no-repeat;
    color: #242a30;
    isolation: isolate;
}

.area-home-guide::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, .46) 38%, transparent 55%),
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .76), transparent 48%);
    pointer-events: none;
    content: "";
}

.area-home-guide__inner {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    margin: 0 auto;
}

.area-home-guide__header {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 12px;
    text-align: center;
}

.area-home-guide__header::after {
    content: none;
}

.area-home-guide__head-icon {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
}

.area-home-guide__head-icon img,
.area-home-guide__icon img,
.area-home-guide__assurance img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
    opacity: 1;
}

.area-home-guide__header .section-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #69747d;
    font-family: "Roboto", var(--font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
}

.area-home-guide__header .section-kicker::before,
.area-home-guide__header .section-kicker::after {
    width: 64px;
    height: 1px;
    margin: 0;
    background: rgba(88, 99, 108, .42);
    content: "";
}

.area-home-guide__header .section-title {
    margin-top: 24px;
    color: #242a30;
    font-size: clamp(34px, 3.2vw, 44px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .08em;
}

.area-home-guide__header .section-lead {
    margin: 18px 0 0;
    color: #566069;
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: .1em;
}

.area-home-guide__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.area-home-guide__cards article {
    position: relative;
    min-height: 300px;
    padding: 32px clamp(24px, 2.4vw, 32px) 34px;
    border: 1px solid rgba(48, 56, 63, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 14px 34px rgba(35, 42, 48, .07);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-align: center;
}

.area-home-guide__cards article::before,
.area-home-guide__cards article::after {
    content: none;
}

.area-home-guide__card-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 58px 1fr 58px;
    align-items: center;
    min-height: 76px;
}

.area-home-guide__number {
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding-top: 0;
    color: #356f9f;
    font-family: "Roboto", var(--font);
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .04em;
}

.area-home-guide__number::before {
    order: 2;
    width: 24px;
    height: 1px;
    background: rgba(53, 111, 159, .48);
    content: "";
}

.area-home-guide__icon {
    grid-column: 2;
    justify-self: center;
    display: block;
    width: 72px;
    height: 72px;
    filter: none;
}

.area-home-guide__cards h3 {
    position: relative;
    z-index: 1;
    margin: 20px 0 0;
    color: #242a30;
    font-size: clamp(18px, 1.55vw, 21px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .04em;
}

.area-home-guide__rule {
    position: relative;
    z-index: 1;
    display: block;
    width: 36px;
    height: 1px;
    margin: 16px auto 0;
    background: rgba(84, 95, 103, .34);
}

.area-home-guide__cards p {
    position: relative;
    z-index: 1;
    max-width: 25em;
    margin: 20px auto 0;
    color: #566069;
    font-size: 14px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: .02em;
    line-break: strict;
    text-wrap: balance;
    word-break: auto-phrase;
}

.area-home-guide__assurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: min(760px, calc(100% - 40px));
    min-height: 0;
    margin: 34px auto 0;
    padding: 22px 20px 0;
    border-top: 1px solid rgba(57, 66, 73, .2);
    color: #3e4850;
}

.area-home-guide__assurance::before {
    content: none;
}

.area-home-guide__assurance > span {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
}

.area-home-guide__assurance strong {
    position: relative;
    z-index: 1;
    font-size: clamp(14px, 1.3vw, 17px);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .08em;
}

.area-home-faq {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(247, 249, 250, .92)),
        url("../img/voice-bg.webp?v=202606191807") center / cover no-repeat;
}

.area-home-faq .section-title {
    font-family: "Noto Serif JP", serif;
    letter-spacing: .12em;
}

/* 「もっと見る」で開く6問目以降。hidden 解除後にこのクラスを外してフェードインさせる */
.faq-item--hidden {
    opacity: 0;
    transform: translateY(12px);
}

.faq-item {
    transition: opacity .45s ease, transform .45s ease;
}

.faq__more {
    margin: 40px 0 0;
    text-align: center;
}

.faq__more .glass-btn {
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .faq-item {
        transition: none;
    }
    .faq-item--hidden {
        opacity: 1;
        transform: none;
    }
}

.area-home-nearby {
    padding: clamp(88px, 9vw, 130px) 24px;
    background: #f2f0ec;
    color: #262a32;
}

.area-home-nearby__inner {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.area-home-nearby__inner > header {
    margin-bottom: 52px;
    text-align: center;
}

.area-home-nearby__inner > header .section-kicker::after {
    margin-right: auto;
    margin-left: auto;
}

.area-home-nearby__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.area-home-nearby__grid > a {
    overflow: hidden;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 20px 46px rgba(38, 42, 46, .07);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}

.area-home-nearby__grid > a:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 58px rgba(38, 42, 46, .12);
}

.area-home-nearby__grid figure {
    aspect-ratio: 16 / 10;
    margin: 0;
    overflow: hidden;
    background: #e3e6e7;
}

.area-home-nearby__grid figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.area-home-nearby__grid > a:hover figure img {
    transform: scale(1.035);
}

.area-home-nearby__grid > a > div {
    position: relative;
    min-height: 118px;
    padding: 25px 62px 24px 25px;
}

.area-home-nearby__grid span {
    color: #8c99a2;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .18em;
}

.area-home-nearby__grid h3 {
    margin: 10px 0 0;
    font-family: "Noto Serif JP", serif;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: .08em;
}

.area-home-nearby__grid i {
    position: absolute;
    right: 25px;
    bottom: 27px;
    color: #6f7c85;
    font-style: normal;
    font-size: 20px;
}

.area-home-contact {
    position: relative;
    min-height: 620px;
    display: grid;
    place-items: center;
    padding: 92px 24px;
    overflow: hidden;
    color: #fff;
}

.area-home-contact__backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-position: center;
    background-size: cover;
}

.area-home-contact::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(26, 27, 27, .66), rgba(29, 29, 27, .28) 52%, rgba(23, 24, 23, .58)),
        linear-gradient(0deg, rgba(21, 22, 21, .5), transparent 58%);
    content: "";
}

.area-home-contact__inner {
    position: relative;
    z-index: 2;
    width: min(720px, 100%);
    text-align: center;
}

.area-home-contact__inner > p {
    margin: 0;
    font-family: "Roboto", var(--font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .25em;
}

.area-home-contact__inner h2 {
    margin: 30px 0 0;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(31px, 4vw, 50px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: .1em;
}

.area-home-contact__inner > span {
    display: block;
    margin-top: 20px;
    font-size: 14px;
    letter-spacing: .1em;
}

.area-home-contact__inner > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: min(620px, 100%);
    margin: 42px auto 0;
}

.area-home-contact__inner a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    padding: 0 22px 0 26px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.area-home-contact__inner a:hover {
    background: #fff;
    color: #272b2f;
    transform: translateY(-2px);
}

.area-home-contact__inner i {
    font-style: normal;
    font-size: 20px;
}

/* 対応エリア詳細の見出し書体をトップページと同じ角ゴシックへ統一 */
.area-home-design .area-detail-main--home h1,
.area-home-design .area-detail-main--home h2,
.area-home-design .area-detail-main--home h3,
.area-home-design .area-detail-main--home h4,
.area-home-design .area-detail-main--home h5,
.area-home-design .area-detail-main--home h6 {
    font-family: "Zen Kaku Gothic New", var(--font) !important;
}

.area-home-design .area-detail-main--home .area-home-hero__copy {
    font-family: "Noto Serif JP", serif !important;
}

@media (max-width: 960px) {
    .area-home-intro__inner {
        grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
        gap: 42px;
    }

    .area-home-guide__cards,
    .area-home-nearby__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .area-home-guide__cards {
        grid-template-columns: 1fr;
        width: min(620px, 100%);
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 767px) {
    .sky-seat + .choose {
        padding-top: 36px;
    }

    .area-home-hero .hero-media:first-child img {
        object-position: var(--area-hero-position, 58%) center;
    }

    .area-home-concerns {
        padding: 50px 0 72px;
    }

    .area-home-concerns .concerns-inner {
        width: min(100% - 30px, 620px);
    }

    .area-home-concerns .section-title {
        margin-top: 15px;
        font-size: clamp(20px, 6vw, 26px);
        font-weight: 400;
        line-height: 1.55;
        letter-spacing: .04em;
    }

    .area-home-intro {
        padding: 78px 16px 84px;
    }

    .area-home-intro::before {
        top: 5px;
        font-size: 72px;
    }

    .area-home-intro__inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .area-home-intro__image {
        aspect-ratio: 4 / 3;
    }

    .area-home-intro__copy h2 {
        margin-top: 28px;
        font-size: 29px;
        line-height: 1.65;
    }

    .area-home-intro__copy > p:not(.section-kicker) {
        margin-top: 24px;
        font-size: 14px;
        line-height: 2;
    }

    /* ボタンの下で背景色が切り替わるため、余白がそのまま空白帯に見える。
       次セクション側にも上余白（56px）があるので、こちらはやや控えめにする。 */
    .area-home-solutions {
        padding-top: 36px;
        padding-bottom: 34px;
    }

    .area-home-solutions .choose__side,
    .area-home-solutions .choose__ghost {
        display: none;
    }

    .area-home-solutions .choose__head h2 {
        font-size: 26px;
    }

    /* この境目も背景色が切り替わるため、両側の余白がそのまま空白帯に見える。
       合計が他セクション間（90px前後）に収まるよう詰める。 */
    .works--area-home {
        padding-top: 48px;
        padding-bottom: 40px;
    }

    .area-home-voice {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .area-home-voice .voice__cards,
    .area-home-voice .voice__cards--single,
    .area-home-voice .voice__cards--two {
        gap: 40px;
        margin-top: 48px;
    }

    /* 他セクションの上下余白は44〜72pxのため、ここだけ広くならないよう揃える */
    .area-home-guide {
        padding: 56px 16px 56px;
    }

    .area-home-guide__header {
        padding: 0 0 10px;
    }

    .area-home-guide__head-icon {
        width: 46px;
        height: 46px;
    }

    .area-home-guide__header .section-kicker {
        gap: 10px;
        font-size: 10px;
        letter-spacing: .18em;
    }

    .area-home-guide__header .section-kicker::before,
    .area-home-guide__header .section-kicker::after {
        width: 28px;
    }

    .area-home-guide__header .section-title {
        margin-top: 22px;
        font-size: 29px;
        line-height: 1.5;
    }

    .area-home-guide__header .section-lead {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.9;
    }

    .area-home-guide__cards {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 16px;
    }

    .area-home-guide__cards article {
        min-height: 0;
        padding: 24px 20px 30px;
    }

    .area-home-guide__card-top {
        grid-template-columns: 50px 1fr 50px;
        min-height: 68px;
    }

    .area-home-guide__number {
        width: auto;
        height: auto;
        padding-top: 0;
        font-size: 27px;
    }

    .area-home-guide__icon {
        width: 64px;
        height: 64px;
    }

    .area-home-guide__cards h3 {
        margin-top: 18px;
        font-size: 19px;
    }

    .area-home-guide__cards p {
        margin-top: 20px;
        font-size: 14px;
    }

    /* スマホでは区切り線が画面幅いっぱいに伸びて浮いて見えるため消し、
       カードとの間隔だけで区切りを表現する。 */
    .area-home-guide__assurance {
        gap: 12px;
        width: 100%;
        margin-top: 28px;
        padding: 0 8px;
        border-top: 0;
    }

    .area-home-guide__assurance > span {
        width: 36px;
        height: 36px;
    }

    .area-home-guide__assurance strong {
        font-size: 13px;
        letter-spacing: .04em;
    }

    .area-home-faq .section-title {
        font-size: 29px;
        line-height: 1.55;
    }

    .area-home-nearby {
        padding: 76px 16px 84px;
    }

    .area-home-nearby__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .area-home-contact-form .contact__inner {
        width: min(720px, calc(100% - 24px));
    }

    .area-home-contact-form .contact__form {
        padding: 20px 18px 26px;
    }

    .area-home-contact-form .contact__row input,
    .area-home-contact-form .contact__row select,
    .area-home-contact-form .contact__row textarea,
    .area-home-contact-form .contact__form input.wpcf7-form-control,
    .area-home-contact-form .contact__form select.wpcf7-form-control,
    .area-home-contact-form .contact__form textarea.wpcf7-form-control {
        min-height: 54px;
    }

    .area-home-contact-form .contact__row textarea,
    .area-home-contact-form .contact__form textarea.wpcf7-form-control {
        min-height: 160px;
    }

    .area-home-contact-form .contact__submit {
        min-height: 64px;
    }

    .area-home-contact {
        min-height: 560px;
        padding: 78px 18px;
    }

    .area-home-contact__inner h2 {
        font-size: 29px;
        line-height: 1.7;
    }

    .area-home-contact__inner > div {
        grid-template-columns: 1fr;
        width: min(330px, 100%);
        margin-top: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .area-home-solutions .choose-item__image img,
    .area-home-nearby__grid figure img,
    .area-home-nearby__grid > a {
        transition: none;
    }
}

/* 対応エリア詳細：省エネ効果の注釈とサーモグラフィー */
.area-home-solutions .choose-item__image--energy {
    position: relative;
    isolation: isolate;
}

.energy-callouts {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
}

.energy-visual,
.energy-effect-thermal {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}

.area-home-solutions .energy-visual > img,
.area-home-solutions .choose-item:hover .energy-visual > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
}

.energy-callouts > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 1px 2px rgba(8, 20, 31, .3));
}

.energy-callouts > svg path {
    fill: none;
    stroke: rgba(255, 255, 255, .96);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.energy-callouts > svg circle {
    fill: #fff;
    stroke: #2498cf;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.energy-callout {
    position: absolute;
    min-width: 150px;
    margin: 0;
    padding: 11px 15px 12px;
    border-left: 3px solid #2498cf;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(9, 24, 35, .16);
    color: #172a3a;
    backdrop-filter: blur(7px);
}

.energy-callout--window {
    top: 6%;
    left: 3%;
}

.energy-callout--aircon {
    right: 3%;
    bottom: 7%;
}

.energy-callout small {
    display: block;
    margin-bottom: 4px;
    color: #168dca;
    font-family: "Roboto", sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .16em;
}

.energy-callout strong {
    display: block;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: clamp(12px, 1.15vw, 16px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
}

.energy-effect-thermal {
    display: block;
    background: #071a2b;
}

.area-home-solutions .energy-effect-thermal > img,
.area-home-solutions .choose-item:hover .energy-effect-thermal > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: none;
    transform: none;
    transition: none;
}

/* 対応エリア詳細：防犯フィルムの効果を画像内で明確に伝える */
.area-home-solutions .choose-item__image--security {
    position: relative;
    isolation: isolate;
}

.area-home-solutions .choose-item__image--security::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(13, 25, 36, .04) 52%, rgba(13, 25, 36, .24) 100%);
    pointer-events: none;
}

.security-callouts {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
}

.security-callouts svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 1px 2px rgba(8, 20, 31, .28));
}

.security-callouts svg path {
    fill: none;
    stroke: rgba(255, 255, 255, .95);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.security-callouts svg circle {
    fill: #fff;
    stroke: #2498cf;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.security-callout {
    position: absolute;
    min-width: 180px;
    margin: 0;
    padding: 12px 16px 13px;
    border-left: 3px solid #2498cf;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(9, 24, 35, .16);
    color: #172a3a;
    backdrop-filter: blur(7px);
}

.security-callout--hold {
    top: 8%;
    right: 3.5%;
}

.security-callout--delay {
    right: 3.5%;
    bottom: 7%;
}

.security-callout small {
    display: block;
    margin-bottom: 4px;
    color: #168dca;
    font-family: "Roboto", sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .16em;
}

.security-callout strong {
    display: block;
    font-family: "Zen Kaku Gothic New", var(--font);
    font-size: clamp(12px, 1.15vw, 16px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .08em;
}

@media (max-width: 767px) {
    .energy-callout {
        min-width: 0;
        width: 35%;
        padding: 6px 8px 7px;
        border-left-width: 2px;
        box-shadow: 0 6px 16px rgba(9, 24, 35, .18);
        backdrop-filter: blur(4px);
    }

    .energy-callout--window {
        top: 4%;
        left: 3%;
    }

    .energy-callout--aircon {
        right: 3%;
        bottom: 5%;
    }

    .energy-callout small {
        margin-bottom: 2px;
        font-size: 7px;
        letter-spacing: .12em;
    }

    .energy-callout strong {
        font-size: clamp(9px, 2.8vw, 12px);
        line-height: 1.4;
        letter-spacing: .03em;
    }

    .energy-callouts > svg path {
        stroke-width: 1.4;
    }

    .energy-callouts > svg circle {
        stroke-width: 2;
    }

    .security-callout {
        min-width: 0;
        width: 42%;
        padding: 7px 9px 8px;
        border-left-width: 2px;
        box-shadow: 0 6px 16px rgba(9, 24, 35, .18);
        backdrop-filter: blur(4px);
    }

    .security-callout--hold {
        top: 5%;
        right: 3%;
    }

    .security-callout--delay {
        right: 3%;
        bottom: 5%;
    }

    .security-callout small {
        margin-bottom: 2px;
        font-size: 7px;
        letter-spacing: .12em;
    }

    .security-callout strong {
        font-size: clamp(9px, 2.8vw, 12px);
        line-height: 1.45;
        letter-spacing: .03em;
    }

    .security-callouts svg path {
        stroke-width: 1.4;
    }

    .security-callouts svg circle {
        stroke-width: 2;
    }
}

/* ===== 対応エリアページ：スマホのセクション余白を詰める ===== */
/* PCの見た目は変えず、SPだけ上下の間延びを解消する。 */
@media (max-width: 767px) {
    .area-page .area-hero__content {
        margin-top: 52px;
    }

    .area-page .area-pref {
        padding: 40px 0 42px;
    }

    .area-page .area-pref__seo {
        margin-top: 20px;
    }

    .area-page .area-strength {
        padding: 44px 0 50px;
    }

    .area-page .price-sec__head {
        margin-bottom: 22px;
    }
}

/* 地域密着セクション：スマホのカード同士の余白を広げる */
@media (max-width: 767px) {
    .area-strength__grid {
        gap: 30px;
    }
}

/* ===== 対応エリア：見出しを背景写真の上に重ねる ===== */
/* パンくず・SERVICE AREA・h1 を写真の左上へ absolute で浮かせる。
   写真の開始位置＝セクションの padding-top なので、ブレークポイントごとに
   変数で揃えておき、そこへ inset ぶんだけ下げて配置する。 */
.area-page .area-hero {
    --area-hero-pad-top: 128px;
    --area-hero-head-inset: 40px;
    padding-top: var(--area-hero-pad-top);
}

.area-page .area-hero__head {
    position: absolute;
    top: calc(var(--area-hero-pad-top) + var(--area-hero-head-inset));
    left: 50%;
    z-index: 6;
    translate: -50% 0;
    margin-bottom: 0;
    /* 見出しの余白部分が写真のホバーやマップ操作を邪魔しないようにする */
    pointer-events: none;
}

.area-page .area-hero__head a {
    pointer-events: auto;
}

/* 空の明るい部分に濃い文字が乗るため、上部だけ白をかぶせて可読性を確保する */
.area-page .area-hero__photo::before {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    height: 66%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.74) 40%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    content: "";
}

@media (max-width: 1023px) {
    .area-page .area-hero {
        --area-hero-pad-top: 64px;
        --area-hero-head-inset: 30px;
    }
}

@media (max-width: 767px) {
    .area-page .area-hero {
        --area-hero-pad-top: 70px;
        --area-hero-head-inset: 22px;
    }

    .area-page .area-hero__head {
        left: 0;
        right: 0;
        width: auto;
        margin: 0;
        translate: none;
    }

    .area-page .area-hero__photo::before {
        height: 54%;
    }
}

/* 「北陸三県対応」バッジの左端を、見出しブロックの左端に揃える。
   見出しは min(1140px, 100% - 80px) を中央寄せしているので、
   その左の余白ぶんだけバッジも右へずらす。
   バッジの基準は写真、見出しの基準はセクションだが、
   どちらも左端は同じ x=0 から始まるため同じ計算式で揃う。 */
@media (min-width: 768px) {
    .area-page .area-hero__badge {
        left: calc((100vw - min(1140px, 100vw - 80px)) / 2);
    }
}

/* タブレットは写真の高さが最小260pxまで縮み、
   上に浮かせた見出しと下のバッジが重なってしまう。
   両方が余裕をもって収まる高さを確保する。 */
@media (min-width: 768px) and (max-width: 1023px) {
    .area-page .area-hero__photo {
        height: clamp(340px, 42vw, 470px);
    }
}

/* スマホは見出しを写真の左上へ浮かせたため、左上にあったバッジと重なる。
   バッジは写真の右下へ逃がす。 */
@media (max-width: 767px) {
    .area-page .area-hero__badge {
        top: auto;
        left: auto;
        right: 14px;
        bottom: 14px;
    }
}

/* 対応エリアページ：スマホの最上部は明るい写真が背景になるため、
   白いままのロゴ下テキストとハンバーガーが読めない。
   スクロール（is-header-dark）を待たず、最初から濃色にする。
   メニューを開いている間は暗いオーバーレイになるので基本の白に戻す。 */
@media (max-width: 767px) {
    .area-page:not(.is-menu-open):not(.is-menu-closing) .header-logo {
        color: #1b2735;
    }

    .area-page:not(.is-menu-open):not(.is-menu-closing) .header-logo span {
        opacity: 1;
        text-shadow: 0 1px 3px rgba(255, 255, 255, 0.75), 0 0 2px rgba(255, 255, 255, 0.5);
    }

    .area-page:not(.is-menu-open):not(.is-menu-closing) .menu-button:not([aria-expanded="true"]) {
        color: #1b2735;
    }

    .area-page:not(.is-menu-open):not(.is-menu-closing) .menu-button:not([aria-expanded="true"]) span {
        background: #1b2735;
    }
}

/* スマホの対応エリアページはパンくずを出さない。
   写真に重ねた見出しの上に小さな文字が乗ると窮屈になるため。
   検索結果のパンくず表示は BreadcrumbList の構造化データが担っており、
   そちらは wp_head から別に出力しているので影響はない。
   パンくずぶんの高さが減るので、その分だけ見出しの位置を下げて元の見え方に戻す。 */
@media (max-width: 767px) {
    .area-page .area-hero__breadcrumb {
        display: none;
    }

    .area-page .area-hero {
        --area-hero-head-inset: 56px;
    }
}

/* ===== エリア詳細ページ：ヒーローの見出し構造 ===== */
/* 縦書きのキャッチコピーは <p> にし、ページの主題は CTA 上の h1 が担う。
   h1 は「〇〇市の窓ガラスフィルム施工」で、既存の注記と同じ見た目に揃える。 */
.hero-cta__title {
    /* 「宝達志水町の窓ガラスフィルム施工」でも折り返さないよう1行に固定する */
    font-size: 13px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .hero-cta__title {
        font-size: 11px;
    }

}

/* エリア詳細ページ：見出し内の固定フレーズを途中で折り返さない。
   「宝達志水町の対応エリア」が「…対応エ / リア」のように
   単語の途中で割れるのを防ぎ、市町村名の直後で改行させる。 */
.area-kw {
    white-space: nowrap;
}

/* 統計の出典リンク。本文に埋まっているので主張しすぎない見た目にする。 */
.stat-source {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(28, 94, 150, 0.45);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.stat-source:hover,
.stat-source:focus-visible {
    color: #1c5e96;
    text-decoration-color: #1c5e96;
}

/* 別タブで開くことを示す小さな印 */
.stat-source::after {
    margin-left: 2px;
    font-size: 0.85em;
    content: "↗";
}

/* ===== ヒーロースライダー：画像が1枚のときの黒画面を防ぐ ===== */
/* .hero-media は 15秒周期の hero-fade-1 で 50%〜84% が opacity:0 になる。
   3枚あれば他の画像が入れ替わりで表示されるが、1枚しかないページでは
   その約5秒間なにも表示されず、背景の黒が見えてしまう。
   1枚のときは切り替える相手がいないので、アニメーションを止めて出しっぱなしにする。 */
.hero-slider .hero-media:only-child {
    opacity: 1;
    animation: none;
}

/* 2枚のときも hero-fade-1 の空白時間に hero-fade-2 が追いつかないため、
   2枚目を遅らせた2段階の切り替えにする。 */
.hero-slider .hero-media:first-child:nth-last-child(2),
.hero-slider .hero-media:first-child:nth-last-child(2) ~ .hero-media {
    animation-name: hero-fade-pair;
    animation-duration: 12s;
}

.hero-slider .hero-media:first-child:nth-last-child(2) ~ .hero-media {
    animation-delay: -6s;
}

@keyframes hero-fade-pair {
    0%,
    42% {
        opacity: 1;
    }
    50%,
    92% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 対応エリアページ：スマホのセクション間をさらに詰める。
   ヒーロー下30px＋石川県セクション上40px＝70px 空いていた。 */
@media (max-width: 767px) {
    .area-page .area-hero {
        padding-bottom: 14px;
    }

    .area-page .area-pref {
        padding: 26px 0 30px;
    }

    .area-page .area-strength {
        padding: 32px 0 40px;
    }
}

/* ===== エリア詳細ページ：近隣エリア ===== */
/* 同じ都道府県の他ページへの導線。対応エリア（地区名）の直後に置いている。 */
.area-home-nearby {
    padding: 64px 16px 72px;
    background: #f2f6f9;
}

.area-home-nearby__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 900px;
    margin: 30px auto 0;
    padding: 0;
    list-style: none;
}

.area-home-nearby__list li > a {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(70, 110, 150, 0.2);
    color: #1c5e96;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    box-shadow: 0 6px 16px -10px rgba(35, 70, 105, 0.35);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.area-home-nearby__list li > a:hover,
.area-home-nearby__list li > a:focus-visible {
    background: #1c5e96;
    border-color: #1c5e96;
    color: #fff;
}

.area-home-nearby__more {
    margin: 32px 0 0;
    text-align: center;
}

@media (max-width: 767px) {
    .area-home-nearby {
        padding: 44px 14px 50px;
    }

    .area-home-nearby__list {
        gap: 8px;
        margin-top: 22px;
    }

    .area-home-nearby__list li > a {
        padding: 9px 17px;
        font-size: 13px;
    }

    .area-home-nearby__more {
        margin-top: 24px;
    }
}

/* 近隣エリアの見出し：スマホでは語のまとまりで折り返す。
   1行が長いと画面幅を超えるため、文字サイズも少し抑える。 */
@media (max-width: 767px) {
    .area-home-nearby .section-title {
        font-size: clamp(20px, 5.6vw, 26px);
        line-height: 1.55;
    }

    .area-home-nearby .area-kw {
        display: inline-block;
    }
}

/* コラムのリード文。the_excerpt() が内側に <p> を出すので、
   その <p> にも同じ見た目を効かせ、余計な上下マージンを消す。 */
.single-article__lead > p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.single-article__lead > p + p {
    margin-top: 0.9em;
}

/* コラムのリード文：本文と同じ文字色にし、前後の余白を詰める。 */
.single-article__lead {
    color: #26394b;
}

.single-article__content-intro {
    margin-bottom: 6px;
}

/* リード文と目次・本文の間隔。既定の gap が広く空きすぎていた。 */
.single-article__content-grid {
    row-gap: clamp(20px, 2.2vw, 30px);
}

@media (max-width: 767px) {
    .single-article__content-grid {
        row-gap: 18px;
    }

    .single-article__content-intro {
        margin-bottom: 4px;
    }
}

/* コラム本文：句読点の位置だけで折り返す。
   keep-all で文字単位の改行を止め、PHP 側で入れた <wbr> のみを改行点にする。
   句読点の無い長い文は行に収まらないため、overflow-wrap で逃がす。 */
.single-article__body p,
.single-article__body li,
.single-article__lead,
.single-article__lead p {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* コラム本文のリスト。
   ブラウザ既定の padding-left: 40px で本文より内側に寄っていたため、
   行頭を本文とそろえ、点は外側に出す。項目同士の間隔も広げる。 */
.single-article__body ul,
.single-article__body ol {
    margin: 22px 0;
    padding-left: 1.4em;
}

.single-article__body li + li {
    margin-top: 14px;
}

.single-article__body li::marker {
    color: #8aa0b4;
}

/* 悩み解決コラム：読者の悩みを示す吹き出し */
.single-article__body p.column-problem-bubble {
    display: grid;
    grid-template-columns: clamp(64px, 7vw, 76px) minmax(0, 1fr);
    gap: clamp(14px, 2vw, 22px);
    align-items: center;
    margin: clamp(18px, 2.6vw, 34px) 0 clamp(42px, 4vw, 58px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #20364a;
    font-size: clamp(17px, 1.55vw, 20px);
    font-weight: 800;
    line-height: 1.75;
    letter-spacing: 0.055em;
}

.column-problem-bubble__avatar {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(105, 129, 146, 0.2);
    border-radius: 50%;
    background: #e5edf2;
    box-shadow: 0 12px 28px -20px rgba(35, 73, 101, 0.65);
}

.column-problem-bubble__avatar svg {
    width: 56%;
    height: 56%;
    stroke: #fff;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.column-problem-bubble__text {
    position: relative;
    z-index: 1;
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: clamp(16px, 2vw, 22px) clamp(18px, 2.8vw, 28px);
    border: 1px solid rgba(114, 142, 165, 0.32);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 46px -34px rgba(28, 57, 80, 0.55);
}

.column-problem-bubble__text::before,
.column-problem-bubble__text::after {
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    content: "";
    transform: translateY(-50%);
}

.column-problem-bubble__text::before {
    left: -14px;
    border-right: 14px solid rgba(114, 142, 165, 0.32);
}

.column-problem-bubble__text::after {
    left: -12px;
    border-right: 13px solid #fff;
}

@media (max-width: 767px) {
    .single-article__body ul,
    .single-article__body ol {
        margin: 18px 0;
        padding-left: 1.25em;
    }

    .single-article__body li + li {
        margin-top: 12px;
    }

    .single-article__body p.column-problem-bubble {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
        margin: 14px 0 38px;
        padding: 0;
        font-size: clamp(16px, 4.4vw, 18px);
        line-height: 1.75;
        letter-spacing: 0.035em;
    }

    .column-problem-bubble__text {
        padding: 13px 14px 14px;
        border-radius: 13px;
    }

    .column-problem-bubble__text::before,
    .column-problem-bubble__text::after {
        border-top-width: 10px;
        border-bottom-width: 10px;
    }

    .column-problem-bubble__text::before {
        left: -12px;
        border-right-width: 12px;
    }

    .column-problem-bubble__text::after {
        left: -10px;
        border-right-width: 11px;
    }
}

/* ------------------------------------------------------------------
   施工前後を1枚に並べた比較写真のカード
   カード枠は 16:9、写真は 1093×714（およそ 3:2）。幅を合わせると
   縦が約14%はみ出す。初期値の center だと上下から約7%ずつ切られ、
   上端の「施工前／施工後」のラベルが欠ける。
   top に寄せて上を切らず、余りをすべて下（ソファ側）で吸収させる。
   nth-child で当たっている色調整と切り抜き位置も打ち消す。
------------------------------------------------------------------ */
.works-slider__track .work-card[data-work="clinic-waiting-room-sunlight"] .work-card__image img {
    object-fit: cover;
    object-position: center top;
    filter: none;
}

.works-slider__track .work-card[data-work="clinic-waiting-room-sunlight"] .work-card__image:hover img {
    filter: none;
}

.works-slider__track .work-card[data-work="clinic-waiting-room-sunlight"] .work-card__image {
    background: #f0f4f7;
}

/* ------------------------------------------------------------------
   施工事例カードの屋号
   タイトルの上に小さく置く。主役はあくまで施工内容なので、
   文字を小さく・色を薄くして見出しより手前に出ないようにしている。
------------------------------------------------------------------ */
.work-card__client {
    margin: 0 0 10px;
    color: #5a6a7a;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

@media (max-width: 767px) {
    .work-card__client {
        margin-bottom: 8px;
        font-size: 14px;
    }
}

.works--area .work-card__client {
    color: #5b7d99;
}

/* スマホで本文の中に移動した目次。前後を空けて本文と区別する。 */
.single-article__index--inline {
    margin: 34px 0 38px;
    padding: 22px 20px 24px;
    border-radius: 10px;
    background: #f2f5f8;
}

.single-article__index--inline span {
    margin-bottom: 2px;
}