/* =========================
   共通設定
========================= */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    line-height: 1.6;
}

.lp-container {
    font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
    line-height: 1.6;
    color: #1e293b;
    scroll-behavior: smooth;
}

/* =========================
   テキスト装飾
========================= */
.text-outline {
    -webkit-text-stroke: 8px #fff;
    paint-order: stroke fill;
    text-shadow: 0px 5px 15px rgba(0,0,0,0.15);
}

.text-outline-sm {
    -webkit-text-stroke: 4px #fff;
    paint-order: stroke fill;
    text-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}

/* =========================
   アニメーション
========================= */
@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* =========================
   ヒーロー画像
========================= */
.hero-slider-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    background-color: #f1f5f9;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

/* =========================
   Office image slider
========================= */
.office-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: officeSlideFade 50s infinite;
}

.office-slide:nth-child(1) {
    animation-delay: 0s;
}

.office-slide:nth-child(2) {
    animation-delay: 10s;
}

.office-slide:nth-child(3) {
    animation-delay: 20s;
}

.office-slide:nth-child(4) {
    animation-delay: 30s;
}

.office-slide:nth-child(5) {
    animation-delay: 40s;
}

@keyframes officeSlideFade {
    0%,
    18% {
        opacity: 1;
    }

    22%,
    100% {
        opacity: 0;
    }
}

/* =========================
   カードアニメーション
========================= */
.service-card img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover img {
    transform: scale(1.1);
}

/* =========================
   registration-service seasonal backgrounds
========================= */
body {
    --season-bg-image: none;
    --season-section-bg-size-pc: 152% auto;
    --season-section-bg-size-sp: 208% auto;
    --season-section-fade-start: rgba(255, 255, 255, 0.44);
    --season-section-fade-mid: rgba(255, 255, 255, 0.56);
    --season-section-fade-strong: rgba(255, 255, 255, 0.82);
    --season-section-fade-end: rgba(255, 255, 255, 0.97);
    --season-section-wash-mix-pc: 84%;
    --season-section-wash-white-pc: 16%;
    --season-section-wash-end-pc: rgba(250, 252, 252, 0.93);
    --season-section-wash-mix-sp: 83%;
    --season-section-wash-white-sp: 17%;
    --season-section-wash-end-sp: rgba(250, 252, 252, 0.95);
}

body.season-spring {
    --season-bg-image: url("images/season/bg-spring.png");
    --season-section-bg-size-pc: 148% auto;
    --season-section-bg-size-sp: 202% auto;
    --season-section-fade-start: rgba(255, 255, 255, 0.4);
    --season-section-fade-mid: rgba(255, 255, 255, 0.52);
    --season-section-fade-strong: rgba(255, 255, 255, 0.8);
    --season-section-fade-end: rgba(255, 255, 255, 0.968);
    --season-section-wash-mix-pc: 80%;
    --season-section-wash-white-pc: 20%;
    --season-section-wash-mix-sp: 79%;
    --season-section-wash-white-sp: 21%;
}

body.season-summer {
    --season-bg-image: url("images/season/bg-summer.png");
    --season-section-bg-size-pc: 150% auto;
    --season-section-bg-size-sp: 204% auto;
    --season-section-fade-start: rgba(255, 255, 255, 0.41);
    --season-section-fade-mid: rgba(255, 255, 255, 0.53);
    --season-section-fade-strong: rgba(255, 255, 255, 0.81);
    --season-section-fade-end: rgba(255, 255, 255, 0.969);
    --season-section-wash-mix-pc: 81%;
    --season-section-wash-white-pc: 19%;
    --season-section-wash-mix-sp: 79%;
    --season-section-wash-white-sp: 21%;
}

body.season-autumn {
    --season-bg-image: url("images/season/bg-autumn.png");
    --season-section-bg-size-pc: 156% auto;
    --season-section-bg-size-sp: 212% auto;
    --season-section-fade-start: rgba(255, 255, 255, 0.45);
    --season-section-fade-mid: rgba(255, 255, 255, 0.58);
    --season-section-fade-strong: rgba(255, 255, 255, 0.84);
    --season-section-fade-end: rgba(255, 255, 255, 0.976);
    --season-section-wash-mix-pc: 77%;
    --season-section-wash-white-pc: 23%;
    --season-section-wash-mix-sp: 74%;
    --season-section-wash-white-sp: 26%;
}

body.season-winter {
    --season-bg-image: url("images/season/bg-winter.png");
    --season-section-bg-size-pc: 168% auto;
    --season-section-bg-size-sp: 228% auto;
    --season-section-fade-start: rgba(255, 255, 255, 0.52);
    --season-section-fade-mid: rgba(255, 255, 255, 0.66);
    --season-section-fade-strong: rgba(255, 255, 255, 0.9);
    --season-section-fade-end: rgba(255, 255, 255, 0.99);
    --season-section-wash-mix-pc: 76%;
    --season-section-wash-white-pc: 24%;
    --season-section-wash-end-pc: rgba(251, 253, 253, 0.965);
    --season-section-wash-mix-sp: 72%;
    --season-section-wash-white-sp: 28%;
    --season-section-wash-end-sp: rgba(252, 253, 253, 0.978);
}

body.season-spring {
    --season-section-bg-size-pc: 152% auto;
    --season-section-bg-size-sp: 208% auto;
    --season-section-fade-start: rgba(255, 255, 255, 0.44);
    --season-section-fade-mid: rgba(255, 255, 255, 0.56);
    --season-section-fade-strong: rgba(255, 255, 255, 0.82);
    --season-section-fade-end: rgba(255, 255, 255, 0.97);
    --season-section-wash-mix-pc: 84%;
    --season-section-wash-white-pc: 16%;
    --season-section-wash-end-pc: rgba(250, 252, 252, 0.93);
    --season-section-wash-mix-sp: 83%;
    --season-section-wash-white-sp: 17%;
    --season-section-wash-end-sp: rgba(250, 252, 252, 0.95);
}

body.season-summer {
    --season-section-bg-size-pc: 152% auto;
    --season-section-bg-size-sp: 208% auto;
    --season-section-fade-start: rgba(255, 255, 255, 0.44);
    --season-section-fade-mid: rgba(255, 255, 255, 0.56);
    --season-section-fade-strong: rgba(255, 255, 255, 0.82);
    --season-section-fade-end: rgba(255, 255, 255, 0.97);
    --season-section-wash-mix-pc: 84%;
    --season-section-wash-white-pc: 16%;
    --season-section-wash-end-pc: rgba(250, 252, 252, 0.93);
    --season-section-wash-mix-sp: 83%;
    --season-section-wash-white-sp: 17%;
    --season-section-wash-end-sp: rgba(250, 252, 252, 0.95);
}

body.season-autumn {
    --season-section-bg-size-pc: 162% auto;
    --season-section-bg-size-sp: 224% auto;
    --season-section-fade-start: rgba(255, 255, 255, 0.6);
    --season-section-fade-mid: rgba(255, 255, 255, 0.74);
    --season-section-fade-strong: rgba(255, 255, 255, 0.93);
    --season-section-fade-end: rgba(255, 255, 255, 0.992);
    --season-section-wash-mix-pc: 64%;
    --season-section-wash-white-pc: 36%;
    --season-section-wash-end-pc: rgba(252, 252, 252, 0.972);
    --season-section-wash-mix-sp: 60%;
    --season-section-wash-white-sp: 40%;
    --season-section-wash-end-sp: rgba(252, 252, 252, 0.98);
}

body.season-winter {
    --season-section-bg-size-pc: 159% auto;
    --season-section-bg-size-sp: 218% auto;
    --season-section-fade-start: rgba(255, 255, 255, 0.55);
    --season-section-fade-mid: rgba(255, 255, 255, 0.69);
    --season-section-fade-strong: rgba(255, 255, 255, 0.91);
    --season-section-fade-end: rgba(255, 255, 255, 0.989);
    --season-section-wash-mix-pc: 69%;
    --season-section-wash-white-pc: 31%;
    --season-section-wash-end-pc: rgba(251, 252, 252, 0.966);
    --season-section-wash-mix-sp: 66%;
    --season-section-wash-white-sp: 34%;
    --season-section-wash-end-sp: rgba(252, 252, 252, 0.975);
}

body.season-spring #about-garage,
body.season-summer #about-garage,
body.season-autumn #about-garage,
body.season-winter #about-garage,
body.season-spring #pricing-guide,
body.season-summer #pricing-guide,
body.season-autumn #pricing-guide,
body.season-winter #pricing-guide,
body.season-spring #scenarios,
body.season-summer #scenarios,
body.season-autumn #scenarios,
body.season-winter #scenarios,
body.season-spring #about-sealing,
body.season-summer #about-sealing,
body.season-autumn #about-sealing,
body.season-winter #about-sealing,
body.season-spring #available-cases,
body.season-summer #available-cases,
body.season-autumn #available-cases,
body.season-winter #available-cases,
body.season-spring #benefits,
body.season-summer #benefits,
body.season-autumn #benefits,
body.season-winter #benefits,
body.season-spring #pricing,
body.season-summer #pricing,
body.season-autumn #pricing,
body.season-winter #pricing,
body.season-spring #area,
body.season-summer #area,
body.season-autumn #area,
body.season-winter #area,
body.season-spring #restrictions,
body.season-summer #restrictions,
body.season-autumn #restrictions,
body.season-winter #restrictions,
body.season-spring #documents,
body.season-summer #documents,
body.season-autumn #documents,
body.season-winter #documents,
body.season-spring #flow,
body.season-summer #flow,
body.season-autumn #flow,
body.season-winter #flow,
body.season-spring #faq,
body.season-summer #faq,
body.season-autumn #faq,
body.season-winter #faq,
body.season-spring #about,
body.season-summer #about,
body.season-autumn #about,
body.season-winter #about,
body.season-spring #contact,
body.season-summer #contact,
body.season-autumn #contact,
body.season-winter #contact,
body.season-spring #final-cta,
body.season-summer #final-cta,
body.season-autumn #final-cta,
body.season-winter #final-cta,
body.season-spring #service-area,
body.season-summer #service-area,
body.season-autumn #service-area,
body.season-winter #service-area {
    background-repeat: no-repeat !important;
    background:
        var(--season-bg-image) left -12rem center / var(--season-section-bg-size-pc) no-repeat,
        linear-gradient(102deg, var(--season-section-fade-start) 0%, var(--season-section-fade-mid) 24%, var(--season-section-fade-strong) 56%, var(--season-section-fade-end) 100%),
        linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--season-section-wash-mix-pc), #ffffff var(--season-section-wash-white-pc)) 0%, var(--season-section-wash-end-pc) 100%) !important;
}

@media (max-width: 767px) {
    body.season-spring #about-garage,
    body.season-summer #about-garage,
    body.season-autumn #about-garage,
    body.season-winter #about-garage,
    body.season-spring #pricing-guide,
    body.season-summer #pricing-guide,
    body.season-autumn #pricing-guide,
    body.season-winter #pricing-guide,
    body.season-spring #scenarios,
    body.season-summer #scenarios,
    body.season-autumn #scenarios,
    body.season-winter #scenarios,
    body.season-spring #about-sealing,
    body.season-summer #about-sealing,
    body.season-autumn #about-sealing,
    body.season-winter #about-sealing,
    body.season-spring #available-cases,
    body.season-summer #available-cases,
    body.season-autumn #available-cases,
    body.season-winter #available-cases,
    body.season-spring #benefits,
    body.season-summer #benefits,
    body.season-autumn #benefits,
    body.season-winter #benefits,
    body.season-spring #pricing,
    body.season-summer #pricing,
    body.season-autumn #pricing,
    body.season-winter #pricing,
    body.season-spring #area,
    body.season-summer #area,
    body.season-autumn #area,
    body.season-winter #area,
    body.season-spring #restrictions,
    body.season-summer #restrictions,
    body.season-autumn #restrictions,
    body.season-winter #restrictions,
    body.season-spring #documents,
    body.season-summer #documents,
    body.season-autumn #documents,
    body.season-winter #documents,
    body.season-spring #flow,
    body.season-summer #flow,
    body.season-autumn #flow,
    body.season-winter #flow,
    body.season-spring #faq,
    body.season-summer #faq,
    body.season-autumn #faq,
    body.season-winter #faq,
    body.season-spring #about,
    body.season-summer #about,
    body.season-autumn #about,
    body.season-winter #about,
    body.season-spring #contact,
    body.season-summer #contact,
    body.season-autumn #contact,
    body.season-winter #contact,
    body.season-spring #final-cta,
    body.season-summer #final-cta,
    body.season-autumn #final-cta,
    body.season-winter #final-cta,
    body.season-spring #service-area,
    body.season-summer #service-area,
    body.season-autumn #service-area,
    body.season-winter #service-area {
        background:
            var(--season-bg-image) left -16rem center / var(--season-section-bg-size-sp) no-repeat,
            linear-gradient(102deg, var(--season-section-fade-start) 0%, var(--season-section-fade-mid) 24%, var(--season-section-fade-strong) 56%, var(--season-section-fade-end) 100%),
            linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--season-section-wash-mix-sp), #ffffff var(--season-section-wash-white-sp)) 0%, var(--season-section-wash-end-sp) 100%) !important;
        background-repeat: no-repeat !important;
    }
}

/* =========================
   index seasonal ambient reset
========================= */
body.season-spring #pricing-guide > .pointer-events-none,
body.season-summer #pricing-guide > .pointer-events-none,
body.season-autumn #pricing-guide > .pointer-events-none,
body.season-winter #pricing-guide > .pointer-events-none,
body.season-spring #scenarios > .pointer-events-none,
body.season-summer #scenarios > .pointer-events-none,
body.season-autumn #scenarios > .pointer-events-none,
body.season-winter #scenarios > .pointer-events-none,
body.season-spring #area > .pointer-events-none,
body.season-summer #area > .pointer-events-none,
body.season-autumn #area > .pointer-events-none,
body.season-winter #area > .pointer-events-none,
body.season-spring #final-cta > .pointer-events-none,
body.season-summer #final-cta > .pointer-events-none,
body.season-autumn #final-cta > .pointer-events-none,
body.season-winter #final-cta > .pointer-events-none {
    display: none;
}

body.season-spring #pricing-guide,
body.season-summer #pricing-guide,
body.season-autumn #pricing-guide,
body.season-winter #pricing-guide,
body.season-spring #scenarios,
body.season-summer #scenarios,
body.season-autumn #scenarios,
body.season-winter #scenarios,
body.season-spring #area,
body.season-summer #area,
body.season-autumn #area,
body.season-winter #area,
body.season-spring #about,
body.season-summer #about,
body.season-autumn #about,
body.season-winter #about,
body.season-spring #final-cta,
body.season-summer #final-cta,
body.season-autumn #final-cta,
body.season-winter #final-cta {
    background-color: #ffffff;
}

/* =========================
   index seasonal image fit
   keep full image width visible
========================= */
body.page-index.season-spring :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta):not(.season-strength-none),
body.page-index.season-summer :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta):not(.season-strength-none),
body.page-index.season-autumn :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta):not(.season-strength-none),
body.page-index.season-winter :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta):not(.season-strength-none) {
    --index-strength-fade-start: var(--season-section-fade-start);
    --index-strength-fade-mid: var(--season-section-fade-mid);
    --index-strength-fade-strong: var(--season-section-fade-strong);
    --index-strength-fade-end: var(--season-section-fade-end);
    --index-strength-wash-mix-pc: var(--season-section-wash-mix-pc);
    --index-strength-wash-white-pc: var(--season-section-wash-white-pc);
    --index-strength-wash-end-pc: var(--season-section-wash-end-pc);
    background:
        var(--season-bg-image) center top / min(1672px, 100vw) auto repeat-y,
        linear-gradient(102deg, var(--index-strength-fade-start) 0%, var(--index-strength-fade-mid) 24%, var(--index-strength-fade-strong) 56%, var(--index-strength-fade-end) 100%),
        linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--index-strength-wash-mix-pc), #ffffff var(--index-strength-wash-white-pc)) 0%, var(--index-strength-wash-end-pc) 100%) !important;
    background-position: center top, center center, center center !important;
    background-repeat: repeat-y, no-repeat, no-repeat !important;
}

body.page-index.season-spring :is(#pricing-guide, #area, #about).season-strength-none,
body.page-index.season-summer :is(#pricing-guide, #area, #about).season-strength-none,
body.page-index.season-autumn :is(#pricing-guide, #area, #about).season-strength-none,
body.page-index.season-winter :is(#pricing-guide, #area, #about).season-strength-none {
    background:
        linear-gradient(102deg, var(--season-section-fade-start) 0%, var(--season-section-fade-mid) 24%, var(--season-section-fade-strong) 56%, var(--season-section-fade-end) 100%),
        linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--season-section-wash-mix-pc), #ffffff var(--season-section-wash-white-pc)) 0%, var(--season-section-wash-end-pc) 100%) !important;
    background-position: center center, center center !important;
    background-repeat: no-repeat, no-repeat !important;
}

@media (max-width: 767px) {
    body.page-index.season-spring :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta):not(.season-strength-none),
    body.page-index.season-summer :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta):not(.season-strength-none),
    body.page-index.season-autumn :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta):not(.season-strength-none),
    body.page-index.season-winter :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta):not(.season-strength-none) {
        --index-strength-wash-mix-sp: var(--season-section-wash-mix-sp);
        --index-strength-wash-white-sp: var(--season-section-wash-white-sp);
        --index-strength-wash-end-sp: var(--season-section-wash-end-sp);
        background:
            var(--season-bg-image) center top / 100vw auto repeat-y,
            linear-gradient(102deg, var(--index-strength-fade-start) 0%, var(--index-strength-fade-mid) 24%, var(--index-strength-fade-strong) 56%, var(--index-strength-fade-end) 100%),
            linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--index-strength-wash-mix-sp), #ffffff var(--index-strength-wash-white-sp)) 0%, var(--index-strength-wash-end-sp) 100%) !important;
        background-position: center top, center center, center center !important;
        background-repeat: repeat-y, no-repeat, no-repeat !important;
    }

    body.page-index.season-spring :is(#pricing-guide, #area, #about).season-strength-none,
    body.page-index.season-summer :is(#pricing-guide, #area, #about).season-strength-none,
    body.page-index.season-autumn :is(#pricing-guide, #area, #about).season-strength-none,
    body.page-index.season-winter :is(#pricing-guide, #area, #about).season-strength-none {
        background:
            linear-gradient(102deg, var(--season-section-fade-start) 0%, var(--season-section-fade-mid) 24%, var(--season-section-fade-strong) 56%, var(--season-section-fade-end) 100%),
            linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--season-section-wash-mix-sp), #ffffff var(--season-section-wash-white-sp)) 0%, var(--season-section-wash-end-sp) 100%) !important;
        background-position: center center, center center !important;
        background-repeat: no-repeat, no-repeat !important;
    }
}

body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-01,
body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-02,
body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-03 {
    --index-strength-fade-start: rgba(255, 255, 255, 0.74);
    --index-strength-fade-mid: rgba(255, 255, 255, 0.86);
    --index-strength-fade-strong: rgba(255, 255, 255, 0.975);
    --index-strength-fade-end: rgba(255, 255, 255, 0.999);
    --index-strength-wash-mix-pc: 34%;
    --index-strength-wash-white-pc: 66%;
    --index-strength-wash-end-pc: rgba(255, 255, 255, 0.998);
    --index-strength-wash-mix-sp: 30%;
    --index-strength-wash-white-sp: 70%;
    --index-strength-wash-end-sp: rgba(255, 255, 255, 0.999);
}

body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-04,
body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-05,
body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-06 {
    --index-strength-fade-start: rgba(255, 255, 255, 0.64);
    --index-strength-fade-mid: rgba(255, 255, 255, 0.78);
    --index-strength-fade-strong: rgba(255, 255, 255, 0.95);
    --index-strength-fade-end: rgba(255, 255, 255, 0.997);
    --index-strength-wash-mix-pc: 46%;
    --index-strength-wash-white-pc: 54%;
    --index-strength-wash-end-pc: rgba(254, 254, 253, 0.994);
    --index-strength-wash-mix-sp: 42%;
    --index-strength-wash-white-sp: 58%;
    --index-strength-wash-end-sp: rgba(254, 254, 253, 0.997);
}

body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-07,
body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-08,
body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-09,
body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-10 {
    --index-strength-fade-start: rgba(255, 255, 255, 0.54);
    --index-strength-fade-mid: rgba(255, 255, 255, 0.68);
    --index-strength-fade-strong: rgba(255, 255, 255, 0.91);
    --index-strength-fade-end: rgba(255, 255, 255, 0.992);
    --index-strength-wash-mix-pc: 58%;
    --index-strength-wash-white-pc: 42%;
    --index-strength-wash-end-pc: rgba(253, 253, 252, 0.986);
    --index-strength-wash-mix-sp: 54%;
    --index-strength-wash-white-sp: 46%;
    --index-strength-wash-end-sp: rgba(253, 253, 252, 0.99);
}

body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-11,
body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-12,
body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-13 {
    --index-strength-fade-start: rgba(255, 255, 255, 0.46);
    --index-strength-fade-mid: rgba(255, 255, 255, 0.58);
    --index-strength-fade-strong: rgba(255, 255, 255, 0.86);
    --index-strength-fade-end: rgba(255, 255, 255, 0.986);
    --index-strength-wash-mix-pc: 70%;
    --index-strength-wash-white-pc: 30%;
    --index-strength-wash-end-pc: rgba(251, 252, 251, 0.972);
    --index-strength-wash-mix-sp: 66%;
    --index-strength-wash-white-sp: 34%;
    --index-strength-wash-end-sp: rgba(251, 252, 251, 0.978);
}

body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-14,
body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).season-strength-level-15 {
    --index-strength-fade-start: rgba(255, 255, 255, 0.38);
    --index-strength-fade-mid: rgba(255, 255, 255, 0.5);
    --index-strength-fade-strong: rgba(255, 255, 255, 0.8);
    --index-strength-fade-end: rgba(255, 255, 255, 0.972);
    --index-strength-wash-mix-pc: 82%;
    --index-strength-wash-white-pc: 18%;
    --index-strength-wash-end-pc: rgba(250, 251, 250, 0.952);
    --index-strength-wash-mix-sp: 78%;
    --index-strength-wash-white-sp: 22%;
    --index-strength-wash-end-sp: rgba(250, 251, 250, 0.962);
}

#about-registration,
#procedures,
#pricing,
#documents,
#faq,
#flow,
#service-area,
#contact {
    background:
        var(--season-bg-image) left -12rem center / var(--season-section-bg-size-pc) no-repeat,
        linear-gradient(102deg, var(--season-section-fade-start) 0%, var(--season-section-fade-mid) 24%, var(--season-section-fade-strong) 56%, var(--season-section-fade-end) 100%),
        linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--season-section-wash-mix-pc), #ffffff var(--season-section-wash-white-pc)) 0%, var(--season-section-wash-end-pc) 100%) !important;
    background-repeat: no-repeat !important;
}

@media (max-width: 767px) {
    #about-registration,
    #procedures,
    #pricing,
    #documents,
    #faq,
    #flow,
    #service-area,
    #contact {
        background:
            var(--season-bg-image) left -9rem center / var(--season-section-bg-size-sp) no-repeat,
            linear-gradient(102deg, var(--season-section-fade-start) 0%, var(--season-section-fade-mid) 24%, var(--season-section-fade-strong) 56%, var(--season-section-fade-end) 100%),
            linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--season-section-wash-mix-sp), #ffffff var(--season-section-wash-white-sp)) 0%, var(--season-section-wash-end-sp) 100%) !important;
        background-repeat: no-repeat !important;
    }
}

/* =========================
   pricing seasonal backgrounds
========================= */
body {
    --pricing-season-bg-size-pc: 220% auto;
    --pricing-season-bg-size-sp: 270% auto;
    --pricing-season-fade-start: rgba(255, 255, 255, 0.46);
    --pricing-season-fade-mid: rgba(255, 255, 255, 0.58);
    --pricing-season-fade-strong: rgba(255, 255, 255, 0.88);
    --pricing-season-fade-end: rgba(255, 255, 255, 0.978);
    --pricing-season-wash-mix-pc: 71%;
    --pricing-season-wash-white-pc: 29%;
    --pricing-season-wash-end-pc: rgba(250, 252, 252, 0.952);
    --pricing-season-wash-mix-sp: 67%;
    --pricing-season-wash-white-sp: 33%;
    --pricing-season-wash-end-sp: rgba(251, 252, 252, 0.965);
}

body.season-autumn {
    --pricing-season-bg-size-pc: 224% auto;
    --pricing-season-bg-size-sp: 276% auto;
    --pricing-season-fade-start: rgba(255, 255, 255, 0.48);
    --pricing-season-fade-mid: rgba(255, 255, 255, 0.6);
    --pricing-season-fade-strong: rgba(255, 255, 255, 0.885);
    --pricing-season-fade-end: rgba(255, 255, 255, 0.98);
    --pricing-season-wash-mix-pc: 70%;
    --pricing-season-wash-white-pc: 30%;
    --pricing-season-wash-end-pc: rgba(250, 252, 252, 0.956);
    --pricing-season-wash-mix-sp: 66%;
    --pricing-season-wash-white-sp: 34%;
    --pricing-season-wash-end-sp: rgba(251, 252, 252, 0.967);
}

body.season-winter {
    --pricing-season-bg-size-pc: 252% auto;
    --pricing-season-bg-size-sp: 308% auto;
    --pricing-season-fade-start: rgba(255, 255, 255, 0.58);
    --pricing-season-fade-mid: rgba(255, 255, 255, 0.7);
    --pricing-season-fade-strong: rgba(255, 255, 255, 0.92);
    --pricing-season-fade-end: rgba(255, 255, 255, 0.992);
    --pricing-season-wash-mix-pc: 58%;
    --pricing-season-wash-white-pc: 42%;
    --pricing-season-wash-end-pc: rgba(251, 253, 253, 0.972);
    --pricing-season-wash-mix-sp: 54%;
    --pricing-season-wash-white-sp: 46%;
    --pricing-season-wash-end-sp: rgba(252, 253, 253, 0.98);
}

body.season-spring {
    --pricing-season-bg-size-pc: 220% auto;
    --pricing-season-bg-size-sp: 270% auto;
    --pricing-season-fade-start: rgba(255, 255, 255, 0.46);
    --pricing-season-fade-mid: rgba(255, 255, 255, 0.58);
    --pricing-season-fade-strong: rgba(255, 255, 255, 0.88);
    --pricing-season-fade-end: rgba(255, 255, 255, 0.978);
    --pricing-season-wash-mix-pc: 71%;
    --pricing-season-wash-white-pc: 29%;
    --pricing-season-wash-end-pc: rgba(250, 252, 252, 0.952);
    --pricing-season-wash-mix-sp: 67%;
    --pricing-season-wash-white-sp: 33%;
    --pricing-season-wash-end-sp: rgba(251, 252, 252, 0.965);
}

body.season-summer {
    --pricing-season-bg-size-pc: 220% auto;
    --pricing-season-bg-size-sp: 270% auto;
    --pricing-season-fade-start: rgba(255, 255, 255, 0.46);
    --pricing-season-fade-mid: rgba(255, 255, 255, 0.58);
    --pricing-season-fade-strong: rgba(255, 255, 255, 0.88);
    --pricing-season-fade-end: rgba(255, 255, 255, 0.978);
    --pricing-season-wash-mix-pc: 71%;
    --pricing-season-wash-white-pc: 29%;
    --pricing-season-wash-end-pc: rgba(250, 252, 252, 0.952);
    --pricing-season-wash-mix-sp: 67%;
    --pricing-season-wash-white-sp: 33%;
    --pricing-season-wash-end-sp: rgba(251, 252, 252, 0.965);
}

body.season-autumn {
    --pricing-season-bg-size-pc: 248% auto;
    --pricing-season-bg-size-sp: 306% auto;
    --pricing-season-fade-start: rgba(255, 255, 255, 0.62);
    --pricing-season-fade-mid: rgba(255, 255, 255, 0.75);
    --pricing-season-fade-strong: rgba(255, 255, 255, 0.935);
    --pricing-season-fade-end: rgba(255, 255, 255, 0.993);
    --pricing-season-wash-mix-pc: 54%;
    --pricing-season-wash-white-pc: 46%;
    --pricing-season-wash-end-pc: rgba(252, 252, 252, 0.975);
    --pricing-season-wash-mix-sp: 50%;
    --pricing-season-wash-white-sp: 50%;
    --pricing-season-wash-end-sp: rgba(252, 252, 252, 0.982);
}

body.season-winter {
    --pricing-season-bg-size-pc: 242% auto;
    --pricing-season-bg-size-sp: 296% auto;
    --pricing-season-fade-start: rgba(255, 255, 255, 0.57);
    --pricing-season-fade-mid: rgba(255, 255, 255, 0.7);
    --pricing-season-fade-strong: rgba(255, 255, 255, 0.92);
    --pricing-season-fade-end: rgba(255, 255, 255, 0.99);
    --pricing-season-wash-mix-pc: 59%;
    --pricing-season-wash-white-pc: 41%;
    --pricing-season-wash-end-pc: rgba(251, 252, 252, 0.97);
    --pricing-season-wash-mix-sp: 55%;
    --pricing-season-wash-white-sp: 45%;
    --pricing-season-wash-end-sp: rgba(252, 252, 252, 0.978);
}

body.season-spring #pricing-table,
body.season-summer #pricing-table,
body.season-autumn #pricing-table,
body.season-winter #pricing-table,
body.season-spring #related-pages,
body.season-summer #related-pages,
body.season-autumn #related-pages,
body.season-winter #related-pages,
body.season-spring #faq,
body.season-summer #faq,
body.season-autumn #faq,
body.season-winter #faq,
body.season-spring #contact,
body.season-summer #contact,
body.season-autumn #contact,
body.season-winter #contact {
    background:
        var(--season-bg-image) left -12rem center / var(--pricing-season-bg-size-pc) no-repeat,
        linear-gradient(102deg, var(--pricing-season-fade-start) 0%, var(--pricing-season-fade-mid) 24%, var(--pricing-season-fade-strong) 56%, var(--pricing-season-fade-end) 100%),
        linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--pricing-season-wash-mix-pc), #ffffff var(--pricing-season-wash-white-pc)) 0%, var(--pricing-season-wash-end-pc) 100%) !important;
    background-repeat: no-repeat !important;
}

@media (max-width: 767px) {
    body.season-spring #pricing-table,
    body.season-summer #pricing-table,
    body.season-autumn #pricing-table,
    body.season-winter #pricing-table,
    body.season-spring #related-pages,
    body.season-summer #related-pages,
    body.season-autumn #related-pages,
    body.season-winter #related-pages,
    body.season-spring #faq,
    body.season-summer #faq,
    body.season-autumn #faq,
    body.season-winter #faq,
    body.season-spring #contact,
    body.season-summer #contact,
    body.season-autumn #contact,
    body.season-winter #contact {
        background:
            var(--season-bg-image) left -15rem center / var(--pricing-season-bg-size-sp) no-repeat,
            linear-gradient(102deg, var(--pricing-season-fade-start) 0%, var(--pricing-season-fade-mid) 24%, var(--pricing-season-fade-strong) 56%, var(--pricing-season-fade-end) 100%),
            linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--pricing-season-wash-mix-sp), #ffffff var(--pricing-season-wash-white-sp)) 0%, var(--pricing-season-wash-end-sp) 100%) !important;
        background-repeat: no-repeat !important;
    }
}

/* =========================
   about-office seasonal backgrounds
========================= */
body {
    --about-season-bg-image: url("images/season/bg-spring.png");
    --about-season-page-wash: rgba(250, 252, 250, 0.9);
    --about-season-section-bg-size-pc: 244% auto;
    --about-season-section-bg-size-sp: 302% auto;
    --about-season-section-fade-start: rgba(255, 255, 255, 0.82);
    --about-season-section-fade-mid: rgba(255, 255, 255, 0.9);
    --about-season-section-fade-strong: rgba(255, 255, 255, 0.96);
    --about-season-section-fade-end: rgba(255, 255, 255, 0.995);
    --about-season-section-wash-mix-pc: 60%;
    --about-season-section-wash-white-pc: 40%;
    --about-season-section-wash-end-pc: rgba(252, 253, 253, 0.985);
    --about-season-section-wash-mix-sp: 56%;
    --about-season-section-wash-white-sp: 44%;
    --about-season-section-wash-end-sp: rgba(252, 253, 253, 0.992);
}

body.season-spring {
    --about-season-bg-image: url("images/season/bg-spring.png");
    --about-season-page-wash: rgba(249, 252, 249, 0.915);
    --about-season-section-bg-size-pc: 256% auto;
    --about-season-section-bg-size-sp: 316% auto;
    --about-season-section-wash-mix-pc: 54%;
    --about-season-section-wash-white-pc: 46%;
    --about-season-section-wash-mix-sp: 50%;
    --about-season-section-wash-white-sp: 50%;
}

body.season-summer {
    --about-season-bg-image: url("images/season/bg-summer.png");
    --about-season-page-wash: rgba(248, 252, 252, 0.93);
    --about-season-section-bg-size-pc: 268% auto;
    --about-season-section-bg-size-sp: 330% auto;
    --about-season-section-wash-mix-pc: 52%;
    --about-season-section-wash-white-pc: 48%;
    --about-season-section-wash-mix-sp: 48%;
    --about-season-section-wash-white-sp: 52%;
}

body.season-autumn {
    --about-season-bg-image: url("images/season/bg-autumn.png");
    --about-season-page-wash: rgba(251, 250, 248, 0.945);
    --about-season-section-bg-size-pc: 286% auto;
    --about-season-section-bg-size-sp: 350% auto;
    --about-season-section-fade-start: rgba(255, 255, 255, 0.86);
    --about-season-section-fade-mid: rgba(255, 255, 255, 0.92);
    --about-season-section-fade-strong: rgba(255, 255, 255, 0.972);
    --about-season-section-fade-end: rgba(255, 255, 255, 0.996);
    --about-season-section-wash-mix-pc: 44%;
    --about-season-section-wash-white-pc: 56%;
    --about-season-section-wash-mix-sp: 40%;
    --about-season-section-wash-white-sp: 60%;
    --about-season-section-wash-end-pc: rgba(253, 253, 252, 0.992);
    --about-season-section-wash-end-sp: rgba(254, 253, 252, 0.996);
}

body.season-winter {
    --about-season-bg-image: url("images/season/bg-winter.png");
    --about-season-page-wash: rgba(250, 252, 254, 0.955);
    --about-season-section-bg-size-pc: 322% auto;
    --about-season-section-bg-size-sp: 388% auto;
    --about-season-section-fade-start: rgba(255, 255, 255, 0.92);
    --about-season-section-fade-mid: rgba(255, 255, 255, 0.962);
    --about-season-section-fade-strong: rgba(255, 255, 255, 0.984);
    --about-season-section-fade-end: rgba(255, 255, 255, 0.998);
    --about-season-section-wash-mix-pc: 30%;
    --about-season-section-wash-white-pc: 70%;
    --about-season-section-wash-end-pc: rgba(255, 255, 255, 0.997);
    --about-season-section-wash-mix-sp: 26%;
    --about-season-section-wash-white-sp: 74%;
    --about-season-section-wash-end-sp: rgba(255, 255, 255, 0.998);
}

body.season-spring {
    --about-season-page-wash: rgba(250, 252, 250, 0.9);
    --about-season-section-bg-size-pc: 244% auto;
    --about-season-section-bg-size-sp: 302% auto;
    --about-season-section-fade-start: rgba(255, 255, 255, 0.82);
    --about-season-section-fade-mid: rgba(255, 255, 255, 0.9);
    --about-season-section-fade-strong: rgba(255, 255, 255, 0.96);
    --about-season-section-fade-end: rgba(255, 255, 255, 0.995);
    --about-season-section-wash-mix-pc: 60%;
    --about-season-section-wash-white-pc: 40%;
    --about-season-section-wash-end-pc: rgba(252, 253, 253, 0.985);
    --about-season-section-wash-mix-sp: 56%;
    --about-season-section-wash-white-sp: 44%;
    --about-season-section-wash-end-sp: rgba(252, 253, 253, 0.992);
}

body.season-summer {
    --about-season-page-wash: rgba(250, 252, 250, 0.9);
    --about-season-section-bg-size-pc: 244% auto;
    --about-season-section-bg-size-sp: 302% auto;
    --about-season-section-fade-start: rgba(255, 255, 255, 0.82);
    --about-season-section-fade-mid: rgba(255, 255, 255, 0.9);
    --about-season-section-fade-strong: rgba(255, 255, 255, 0.96);
    --about-season-section-fade-end: rgba(255, 255, 255, 0.995);
    --about-season-section-wash-mix-pc: 60%;
    --about-season-section-wash-white-pc: 40%;
    --about-season-section-wash-end-pc: rgba(252, 253, 253, 0.985);
    --about-season-section-wash-mix-sp: 56%;
    --about-season-section-wash-white-sp: 44%;
    --about-season-section-wash-end-sp: rgba(252, 253, 253, 0.992);
}

body.season-autumn {
    --about-season-page-wash: rgba(252, 251, 249, 0.958);
    --about-season-section-bg-size-pc: 300% auto;
    --about-season-section-bg-size-sp: 368% auto;
    --about-season-section-fade-start: rgba(255, 255, 255, 0.92);
    --about-season-section-fade-mid: rgba(255, 255, 255, 0.968);
    --about-season-section-fade-strong: rgba(255, 255, 255, 0.986);
    --about-season-section-fade-end: rgba(255, 255, 255, 0.998);
    --about-season-section-wash-mix-pc: 34%;
    --about-season-section-wash-white-pc: 66%;
    --about-season-section-wash-end-pc: rgba(254, 253, 252, 0.996);
    --about-season-section-wash-mix-sp: 30%;
    --about-season-section-wash-white-sp: 70%;
    --about-season-section-wash-end-sp: rgba(255, 253, 252, 0.998);
}

body.season-winter {
    --about-season-page-wash: rgba(250, 252, 254, 0.948);
    --about-season-section-bg-size-pc: 284% auto;
    --about-season-section-bg-size-sp: 346% auto;
    --about-season-section-fade-start: rgba(255, 255, 255, 0.89);
    --about-season-section-fade-mid: rgba(255, 255, 255, 0.952);
    --about-season-section-fade-strong: rgba(255, 255, 255, 0.98);
    --about-season-section-fade-end: rgba(255, 255, 255, 0.997);
    --about-season-section-wash-mix-pc: 40%;
    --about-season-section-wash-white-pc: 60%;
    --about-season-section-wash-end-pc: rgba(253, 253, 253, 0.994);
    --about-season-section-wash-mix-sp: 36%;
    --about-season-section-wash-white-sp: 64%;
    --about-season-section-wash-end-sp: rgba(253, 253, 253, 0.997);
}

.about-profile-scope,
.about-access-scope,
.about-office-cta-scope > section {
    background-repeat: no-repeat !important;
    background:
        var(--about-season-bg-image) left -20rem center / var(--about-season-section-bg-size-pc) no-repeat,
        linear-gradient(104deg, var(--about-season-section-fade-start) 0%, var(--about-season-section-fade-mid) 22%, var(--about-season-section-fade-strong) 56%, var(--about-season-section-fade-end) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--about-season-page-wash) var(--about-season-section-wash-mix-pc), #ffffff var(--about-season-section-wash-white-pc)) 0%, var(--about-season-section-wash-end-pc) 100%) !important;
}

@media (max-width: 767px) {
    .about-profile-scope,
    .about-access-scope,
    .about-office-cta-scope > section {
        background:
            var(--about-season-bg-image) left -16rem center / var(--about-season-section-bg-size-sp) no-repeat,
            linear-gradient(104deg, var(--about-season-section-fade-start) 0%, var(--about-season-section-fade-mid) 22%, var(--about-season-section-fade-strong) 56%, var(--about-season-section-fade-end) 100%),
            linear-gradient(180deg, color-mix(in srgb, var(--about-season-page-wash) var(--about-season-section-wash-mix-sp), #ffffff var(--about-season-section-wash-white-sp)) 0%, var(--about-season-section-wash-end-sp) 100%) !important;
        background-repeat: no-repeat !important;
    }
}

/* =========================
   seasonal image fit rollout
   keep full image width visible
========================= */
body.page-garage-certificate:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-garage, #pricing, #documents, #area, #flow, #faq, #contact),
body.page-registration-service:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-registration, #procedures, #pricing, #service-area, #documents, #flow, #faq, #contact),
body.page-shuccho-fuin:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-sealing, #available-cases, #benefits, #pricing, #area, #restrictions, #documents, #flow, #faq, #contact),
body.page-himeji-pricing:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#pricing-table, #related-pages, #faq, #contact),
body.page-kobe-pricing:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#pricing-table, #related-pages, #faq, #contact) {
    background:
        var(--season-bg-image) center top / min(1672px, 100vw) auto repeat-y,
        linear-gradient(102deg, var(--season-section-fade-start) 0%, var(--season-section-fade-mid) 24%, var(--season-section-fade-strong) 56%, var(--season-section-fade-end) 100%),
        linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--season-section-wash-mix-pc), #ffffff var(--season-section-wash-white-pc)) 0%, var(--season-section-wash-end-pc) 100%) !important;
    background-position: center top, center center, center center !important;
    background-repeat: repeat-y, no-repeat, no-repeat !important;
}

body.page-about-office:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(.about-profile-scope, .about-access-scope, .about-office-cta-scope > section) {
    background:
        var(--about-season-bg-image) center top / min(1672px, 100vw) auto repeat-y,
        linear-gradient(104deg, var(--about-season-section-fade-start) 0%, var(--about-season-section-fade-mid) 22%, var(--about-season-section-fade-strong) 56%, var(--about-season-section-fade-end) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--about-season-page-wash) var(--about-season-section-wash-mix-pc), #ffffff var(--about-season-section-wash-white-pc)) 0%, var(--about-season-section-wash-end-pc) 100%) !important;
    background-position: center top, center center, center center !important;
    background-repeat: repeat-y, no-repeat, no-repeat !important;
}

@media (max-width: 767px) {
    body.page-garage-certificate:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-garage, #pricing, #documents, #area, #flow, #faq, #contact),
    body.page-registration-service:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-registration, #procedures, #pricing, #service-area, #documents, #flow, #faq, #contact),
    body.page-shuccho-fuin:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-sealing, #available-cases, #benefits, #pricing, #area, #restrictions, #documents, #flow, #faq, #contact),
    body.page-himeji-pricing:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#pricing-table, #related-pages, #faq, #contact),
    body.page-kobe-pricing:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#pricing-table, #related-pages, #faq, #contact) {
        background:
            var(--season-bg-image) center top / 100vw auto repeat-y,
            linear-gradient(102deg, var(--season-section-fade-start) 0%, var(--season-section-fade-mid) 24%, var(--season-section-fade-strong) 56%, var(--season-section-fade-end) 100%),
            linear-gradient(180deg, color-mix(in srgb, rgba(246, 251, 248, 0.88) var(--season-section-wash-mix-sp), #ffffff var(--season-section-wash-white-sp)) 0%, var(--season-section-wash-end-sp) 100%) !important;
        background-position: center top, center center, center center !important;
        background-repeat: repeat-y, no-repeat, no-repeat !important;
    }

    body.page-about-office:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(.about-profile-scope, .about-access-scope, .about-office-cta-scope > section) {
        background:
            var(--about-season-bg-image) center top / 100vw auto repeat-y,
            linear-gradient(104deg, var(--about-season-section-fade-start) 0%, var(--about-season-section-fade-mid) 22%, var(--about-season-section-fade-strong) 56%, var(--about-season-section-fade-end) 100%),
            linear-gradient(180deg, color-mix(in srgb, var(--about-season-page-wash) var(--about-season-section-wash-mix-sp), #ffffff var(--about-season-section-wash-white-sp)) 0%, var(--about-season-section-wash-end-sp) 100%) !important;
        background-position: center top, center center, center center !important;
        background-repeat: repeat-y, no-repeat, no-repeat !important;
    }
}

/* =========================
   seasonal vertical guide rails
========================= */
body.season-spring {
    --season-guide-line: rgba(214, 167, 190, 0.34);
}

body.season-summer {
    --season-guide-line: rgba(120, 183, 174, 0.32);
}

body.season-autumn {
    --season-guide-line: rgba(198, 157, 120, 0.34);
}

body.season-winter {
    --season-guide-line: rgba(160, 188, 214, 0.32);
}

body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta),
body.page-garage-certificate:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-garage, #pricing, #documents, #area, #flow, #faq, #contact),
body.page-registration-service:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-registration, #procedures, #pricing, #service-area, #documents, #flow, #faq, #contact),
body.page-shuccho-fuin:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-sealing, #available-cases, #benefits, #pricing, #area, #restrictions, #documents, #flow, #faq, #contact),
body.page-himeji-pricing:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#pricing-table, #related-pages, #faq, #contact),
body.page-kobe-pricing:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#pricing-table, #related-pages, #faq, #contact),
body.page-about-office:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(.about-profile-scope, .about-access-scope, .about-office-cta-scope > section) {
    position: relative;
}

body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta)::before,
body.page-garage-certificate:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-garage, #pricing, #documents, #area, #flow, #faq, #contact)::before,
body.page-registration-service:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-registration, #procedures, #pricing, #service-area, #documents, #flow, #faq, #contact)::before,
body.page-shuccho-fuin:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-sealing, #available-cases, #benefits, #pricing, #area, #restrictions, #documents, #flow, #faq, #contact)::before,
body.page-himeji-pricing:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#pricing-table, #related-pages, #faq, #contact)::before,
body.page-kobe-pricing:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#pricing-table, #related-pages, #faq, #contact)::before,
body.page-about-office:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(.about-profile-scope, .about-access-scope, .about-office-cta-scope > section)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(1672px, 100vw);
    max-width: 100%;
    transform: translateX(-50%);
    border-left: 1px solid var(--season-guide-line);
    border-right: 1px solid var(--season-guide-line);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 767px) {
    body.page-index :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta)::before,
    body.page-garage-certificate:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-garage, #pricing, #documents, #area, #flow, #faq, #contact)::before,
    body.page-registration-service:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-registration, #procedures, #pricing, #service-area, #documents, #flow, #faq, #contact)::before,
    body.page-shuccho-fuin:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#about-sealing, #available-cases, #benefits, #pricing, #area, #restrictions, #documents, #flow, #faq, #contact)::before,
    body.page-himeji-pricing:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#pricing-table, #related-pages, #faq, #contact)::before,
    body.page-kobe-pricing:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(#pricing-table, #related-pages, #faq, #contact)::before,
    body.page-about-office:is(.season-spring, .season-summer, .season-autumn, .season-winter) :is(.about-profile-scope, .about-access-scope, .about-office-cta-scope > section)::before {
        width: 100vw;
    }
}

/* =========================
   registration-service fixed background mode
========================= */
body.page-registration-service.fixed-bg-mode :is(#about-registration, #procedures, #pricing, #service-area, #documents, #flow, #faq, #contact).fixed-bg-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.page-registration-service.fixed-bg-mode :is(#about-registration, #procedures, #pricing, #service-area, #documents, #flow, #faq, #contact).fixed-bg-section::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 0;
    width: auto;
    max-width: none;
    transform: none;
    background: rgba(255, 255, 255, 0.20);
    border: 0;
    pointer-events: none;
    z-index: 0;
}

body.page-registration-service.fixed-bg-mode :is(#about-registration, #procedures, #pricing, #service-area, #documents, #flow, #faq, #contact).fixed-bg-section::after {
    content: "";
    position: absolute;
    inset: 0;
    width: min(1672px, 100vw);
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid rgba(179, 188, 194, 0.18);
    border-right: 1px solid rgba(179, 188, 194, 0.18);
    pointer-events: none;
    z-index: 1;
}

body.page-registration-service.fixed-bg-mode :is(#about-registration, #procedures, #pricing, #service-area, #documents, #flow, #faq, #contact).fixed-bg-section > * {
    position: relative;
    z-index: 2;
}

/* =========================
   registration-service fixed background enforce
   keep fixed backgrounds winning over seasonal page backgrounds
========================= */
body.page-registration-service.fixed-bg-mode #about-registration.fixed-bg-section.fixed-bg-1,
body.page-registration-service.fixed-bg-mode #flow.fixed-bg-section.fixed-bg-1 {
    background-image: url("images/fixed-bg/fixed-bg-1.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-registration-service.fixed-bg-mode #procedures.fixed-bg-section.fixed-bg-2,
body.page-registration-service.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-2 {
    background-image: url("images/fixed-bg/fixed-bg-2.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-registration-service.fixed-bg-mode #pricing.fixed-bg-section.fixed-bg-3,
body.page-registration-service.fixed-bg-mode #contact.fixed-bg-section.fixed-bg-3 {
    background-image: url("images/fixed-bg/fixed-bg-3.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-registration-service.fixed-bg-mode #service-area.fixed-bg-section.fixed-bg-4 {
    background-image: url("images/fixed-bg/fixed-bg-4.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-registration-service.fixed-bg-mode #documents.fixed-bg-section.fixed-bg-5 {
    background-image: url("images/fixed-bg/fixed-bg-5.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

@media (max-width: 767px) {
    body.page-registration-service.fixed-bg-mode #about-registration.fixed-bg-section.fixed-bg-1,
    body.page-registration-service.fixed-bg-mode #flow.fixed-bg-section.fixed-bg-1 {
        background-size: 100vw auto !important;
    }

    body.page-registration-service.fixed-bg-mode #procedures.fixed-bg-section.fixed-bg-2,
    body.page-registration-service.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-2 {
        background-size: 100vw auto !important;
    }

    body.page-registration-service.fixed-bg-mode #pricing.fixed-bg-section.fixed-bg-3,
    body.page-registration-service.fixed-bg-mode #contact.fixed-bg-section.fixed-bg-3 {
        background-size: 100vw auto !important;
    }

    body.page-registration-service.fixed-bg-mode #service-area.fixed-bg-section.fixed-bg-4 {
        background-size: 100vw auto !important;
    }

    body.page-registration-service.fixed-bg-mode #documents.fixed-bg-section.fixed-bg-5 {
        background-size: 100vw auto !important;
    }
}

/* =========================
   garage-certificate fixed background mode
========================= */
body.page-garage-certificate.fixed-bg-mode :is(#about-garage, #pricing, #documents, #area, #problems, #flow, #faq, #contact).fixed-bg-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.page-garage-certificate.fixed-bg-mode :is(#about-garage, #pricing, #documents, #area, #problems, #flow, #faq, #contact).fixed-bg-section::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 0;
    width: auto;
    max-width: none;
    transform: none;
    background: rgba(255, 255, 255, 0.20);
    border: 0;
    pointer-events: none;
    z-index: 0;
}

body.page-garage-certificate.fixed-bg-mode :is(#about-garage, #pricing, #documents, #area, #problems, #flow, #faq, #contact).fixed-bg-section::after {
    content: "";
    position: absolute;
    inset: 0;
    width: min(1672px, 100vw);
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid rgba(179, 188, 194, 0.18);
    border-right: 1px solid rgba(179, 188, 194, 0.18);
    pointer-events: none;
    z-index: 1;
}

body.page-garage-certificate.fixed-bg-mode :is(#about-garage, #pricing, #documents, #area, #problems, #flow, #faq, #contact).fixed-bg-section > * {
    position: relative;
    z-index: 2;
}

/* =========================
   garage-certificate fixed background enforce
   keep fixed backgrounds winning over seasonal page backgrounds
========================= */
body.page-garage-certificate.fixed-bg-mode #about-garage.fixed-bg-section.fixed-bg-1,
body.page-garage-certificate.fixed-bg-mode #flow.fixed-bg-section.fixed-bg-1 {
    background-image: url("images/fixed-bg/fixed-bg-1.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-garage-certificate.fixed-bg-mode #pricing.fixed-bg-section.fixed-bg-2,
body.page-garage-certificate.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-2 {
    background-image: url("images/fixed-bg/fixed-bg-2.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-garage-certificate.fixed-bg-mode #documents.fixed-bg-section.fixed-bg-3,
body.page-garage-certificate.fixed-bg-mode #contact.fixed-bg-section.fixed-bg-3 {
    background-image: url("images/fixed-bg/fixed-bg-3.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-garage-certificate.fixed-bg-mode #area.fixed-bg-section.fixed-bg-4 {
    background-image: url("images/fixed-bg/fixed-bg-4.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-garage-certificate.fixed-bg-mode #problems.fixed-bg-section.fixed-bg-5 {
    background-image: url("images/fixed-bg/fixed-bg-5.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

@media (max-width: 767px) {
    body.page-garage-certificate.fixed-bg-mode :is(#about-garage, #pricing, #documents, #area, #problems, #flow, #faq, #contact).fixed-bg-section::after {
        width: 100vw;
    }

    body.page-garage-certificate.fixed-bg-mode #about-garage.fixed-bg-section.fixed-bg-1,
    body.page-garage-certificate.fixed-bg-mode #flow.fixed-bg-section.fixed-bg-1 {
        background-size: 100vw auto !important;
    }

    body.page-garage-certificate.fixed-bg-mode #pricing.fixed-bg-section.fixed-bg-2,
    body.page-garage-certificate.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-2 {
        background-size: 100vw auto !important;
    }

    body.page-garage-certificate.fixed-bg-mode #documents.fixed-bg-section.fixed-bg-3,
    body.page-garage-certificate.fixed-bg-mode #contact.fixed-bg-section.fixed-bg-3 {
        background-size: 100vw auto !important;
    }

    body.page-garage-certificate.fixed-bg-mode #area.fixed-bg-section.fixed-bg-4 {
        background-size: 100vw auto !important;
    }

    body.page-garage-certificate.fixed-bg-mode #problems.fixed-bg-section.fixed-bg-5 {
        background-size: 100vw auto !important;
    }
}

/* =========================
   shuccho-fuin fixed background mode
========================= */
body.page-shuccho-fuin.fixed-bg-mode :is(#about-sealing, #available-cases, #benefits, #pricing, #area, #restrictions, #documents, #flow, #faq, #contact).fixed-bg-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.page-shuccho-fuin.fixed-bg-mode :is(#about-sealing, #available-cases, #benefits, #pricing, #area, #restrictions, #documents, #flow, #faq, #contact).fixed-bg-section::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 0;
    width: auto;
    max-width: none;
    transform: none;
    background: rgba(255, 255, 255, 0.20);
    border: 0;
    pointer-events: none;
    z-index: 0;
}

body.page-shuccho-fuin.fixed-bg-mode :is(#about-sealing, #available-cases, #benefits, #pricing, #area, #restrictions, #documents, #flow, #faq, #contact).fixed-bg-section::after {
    content: "";
    position: absolute;
    inset: 0;
    width: min(1672px, 100vw);
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid rgba(179, 188, 194, 0.18);
    border-right: 1px solid rgba(179, 188, 194, 0.18);
    pointer-events: none;
    z-index: 1;
}

body.page-shuccho-fuin.fixed-bg-mode :is(#about-sealing, #available-cases, #benefits, #pricing, #area, #restrictions, #documents, #flow, #faq, #contact).fixed-bg-section > * {
    position: relative;
    z-index: 2;
}

/* =========================
   shuccho-fuin fixed background enforce
   keep fixed backgrounds winning over seasonal page backgrounds
========================= */
body.page-shuccho-fuin.fixed-bg-mode #about-sealing.fixed-bg-section.fixed-bg-1,
body.page-shuccho-fuin.fixed-bg-mode #restrictions.fixed-bg-section.fixed-bg-1 {
    background-image: url("images/fixed-bg/fixed-bg-1.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-shuccho-fuin.fixed-bg-mode #available-cases.fixed-bg-section.fixed-bg-2,
body.page-shuccho-fuin.fixed-bg-mode #documents.fixed-bg-section.fixed-bg-2 {
    background-image: url("images/fixed-bg/fixed-bg-2.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-shuccho-fuin.fixed-bg-mode #benefits.fixed-bg-section.fixed-bg-3,
body.page-shuccho-fuin.fixed-bg-mode #flow.fixed-bg-section.fixed-bg-3 {
    background-image: url("images/fixed-bg/fixed-bg-3.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-shuccho-fuin.fixed-bg-mode #pricing.fixed-bg-section.fixed-bg-4,
body.page-shuccho-fuin.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-4 {
    background-image: url("images/fixed-bg/fixed-bg-4.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-shuccho-fuin.fixed-bg-mode #area.fixed-bg-section.fixed-bg-5,
body.page-shuccho-fuin.fixed-bg-mode #contact.fixed-bg-section.fixed-bg-5 {
    background-image: url("images/fixed-bg/fixed-bg-5.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

@media (max-width: 767px) {
    body.page-shuccho-fuin.fixed-bg-mode :is(#about-sealing, #available-cases, #benefits, #pricing, #area, #restrictions, #documents, #flow, #faq, #contact).fixed-bg-section::after {
        width: 100vw;
    }

    body.page-shuccho-fuin.fixed-bg-mode #about-sealing.fixed-bg-section.fixed-bg-1,
    body.page-shuccho-fuin.fixed-bg-mode #restrictions.fixed-bg-section.fixed-bg-1 {
        background-size: 100vw auto !important;
    }

    body.page-shuccho-fuin.fixed-bg-mode #available-cases.fixed-bg-section.fixed-bg-2,
    body.page-shuccho-fuin.fixed-bg-mode #documents.fixed-bg-section.fixed-bg-2 {
        background-size: 100vw auto !important;
    }

    body.page-shuccho-fuin.fixed-bg-mode #benefits.fixed-bg-section.fixed-bg-3,
    body.page-shuccho-fuin.fixed-bg-mode #flow.fixed-bg-section.fixed-bg-3 {
        background-size: 100vw auto !important;
    }

    body.page-shuccho-fuin.fixed-bg-mode #pricing.fixed-bg-section.fixed-bg-4,
    body.page-shuccho-fuin.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-4 {
        background-size: 100vw auto !important;
    }

    body.page-shuccho-fuin.fixed-bg-mode #area.fixed-bg-section.fixed-bg-5,
    body.page-shuccho-fuin.fixed-bg-mode #contact.fixed-bg-section.fixed-bg-5 {
        background-size: 100vw auto !important;
    }
}

@media (max-width: 767px) {
    body.page-shuccho-fuin #pricing .overflow-x-auto {
        overflow-x: visible;
    }

    body.page-shuccho-fuin #pricing table {
        min-width: 0 !important;
        table-layout: fixed;
    }

    body.page-shuccho-fuin #pricing th,
    body.page-shuccho-fuin #pricing td {
        padding: 0.875rem 0.75rem;
        font-size: 0.875rem;
        line-height: 1.6;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    body.page-shuccho-fuin #pricing th:nth-child(1),
    body.page-shuccho-fuin #pricing td:nth-child(1) {
        width: 31%;
    }

    body.page-shuccho-fuin #pricing th:nth-child(2),
    body.page-shuccho-fuin #pricing td:nth-child(2) {
        width: 5.75rem;
        min-width: 5.75rem;
        white-space: nowrap;
        text-align: center;
    }

    body.page-shuccho-fuin #pricing td.text-lg {
        font-size: 1rem;
        line-height: 1.4;
    }
}

/* =========================
   himeji-pricing fixed background mode
========================= */
body.page-himeji-pricing.fixed-bg-mode :is(#pricing-table, #related-pages, #faq, #contact).fixed-bg-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.page-himeji-pricing.fixed-bg-mode :is(#pricing-table, #related-pages, #faq, #contact).fixed-bg-section::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 0;
    width: auto;
    max-width: none;
    transform: none;
    background: rgba(255, 255, 255, 0.20);
    border: 0;
    pointer-events: none;
    z-index: 0;
}

body.page-himeji-pricing.fixed-bg-mode :is(#pricing-table, #related-pages, #faq, #contact).fixed-bg-section::after {
    content: "";
    position: absolute;
    inset: 0;
    width: min(1672px, 100vw);
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid rgba(179, 188, 194, 0.18);
    border-right: 1px solid rgba(179, 188, 194, 0.18);
    pointer-events: none;
    z-index: 1;
}

body.page-himeji-pricing.fixed-bg-mode :is(#pricing-table, #related-pages, #faq, #contact).fixed-bg-section > * {
    position: relative;
    z-index: 2;
}

/* =========================
   himeji-pricing fixed background enforce
   keep fixed backgrounds winning over seasonal page backgrounds
========================= */
body.page-himeji-pricing.fixed-bg-mode #pricing-table.fixed-bg-section.fixed-bg-1 {
    background-image: url("images/fixed-bg/fixed-bg-1.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-himeji-pricing.fixed-bg-mode #related-pages.fixed-bg-section.fixed-bg-2 {
    background-image: url("images/fixed-bg/fixed-bg-2.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-himeji-pricing.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-3 {
    background-image: url("images/fixed-bg/fixed-bg-3.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-himeji-pricing.fixed-bg-mode #contact.fixed-bg-section.fixed-bg-4 {
    background-image: url("images/fixed-bg/fixed-bg-4.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

@media (max-width: 767px) {
    body.page-himeji-pricing.fixed-bg-mode :is(#pricing-table, #related-pages, #faq, #contact).fixed-bg-section::after {
        width: 100vw;
    }

    body.page-himeji-pricing.fixed-bg-mode #pricing-table.fixed-bg-section.fixed-bg-1,
    body.page-himeji-pricing.fixed-bg-mode #related-pages.fixed-bg-section.fixed-bg-2,
    body.page-himeji-pricing.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-3,
    body.page-himeji-pricing.fixed-bg-mode #contact.fixed-bg-section.fixed-bg-4 {
        background-size: 100vw auto !important;
    }
}

/*
   kobe-pricing fixed background mode
*/
body.page-kobe-pricing.fixed-bg-mode :is(#pricing-table, #related-pages, #faq, #contact).fixed-bg-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.page-kobe-pricing.fixed-bg-mode :is(#pricing-table, #related-pages, #faq, #contact).fixed-bg-section::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 0;
    width: auto;
    max-width: none;
    transform: none;
    background: rgba(255, 255, 255, 0.20);
    border: 0;
    pointer-events: none;
    z-index: 0;
}

body.page-kobe-pricing.fixed-bg-mode :is(#pricing-table, #related-pages, #faq, #contact).fixed-bg-section::after {
    content: "";
    position: absolute;
    inset: 0;
    width: min(1672px, 100vw);
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid rgba(179, 188, 194, 0.18);
    border-right: 1px solid rgba(179, 188, 194, 0.18);
    pointer-events: none;
    z-index: 1;
}

body.page-kobe-pricing.fixed-bg-mode :is(#pricing-table, #related-pages, #faq, #contact).fixed-bg-section > * {
    position: relative;
    z-index: 2;
}

body.page-kobe-pricing.fixed-bg-mode #pricing-table.fixed-bg-section.fixed-bg-1 {
    background-image: url("images/fixed-bg/fixed-bg-1.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-kobe-pricing.fixed-bg-mode #related-pages.fixed-bg-section.fixed-bg-2 {
    background-image: url("images/fixed-bg/fixed-bg-2.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-kobe-pricing.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-3 {
    background-image: url("images/fixed-bg/fixed-bg-3.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-kobe-pricing.fixed-bg-mode #contact.fixed-bg-section.fixed-bg-4 {
    background-image: url("images/fixed-bg/fixed-bg-4.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

@media (max-width: 767px) {
    body.page-kobe-pricing.fixed-bg-mode :is(#pricing-table, #related-pages, #faq, #contact).fixed-bg-section::after {
        width: 100vw;
    }

    body.page-kobe-pricing.fixed-bg-mode #pricing-table.fixed-bg-section.fixed-bg-1,
    body.page-kobe-pricing.fixed-bg-mode #related-pages.fixed-bg-section.fixed-bg-2,
    body.page-kobe-pricing.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-3,
    body.page-kobe-pricing.fixed-bg-mode #contact.fixed-bg-section.fixed-bg-4 {
        background-size: 100vw auto !important;
    }
}

/* =========================
   index fixed background mode
========================= */
body.page-index.fixed-bg-mode :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).fixed-bg-section {
    overflow: hidden;
    isolation: isolate;
    background: transparent !important;
}

body.page-index.fixed-bg-mode :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).fixed-bg-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
    z-index: 1;
}

body.page-index.fixed-bg-mode :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).fixed-bg-section > * {
    position: relative;
    z-index: 2;
}

body.page-index.fixed-bg-mode :is(#pricing-guide, #scenarios, #area, #final-cta).fixed-bg-section > .pointer-events-none {
    display: none !important;
}

body.page-index.fixed-bg-mode #services.fixed-bg-section.fixed-bg-1 {
    background-image: url("images/fixed-bg/fixed-bg-1.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-index.fixed-bg-mode #pricing-guide.fixed-bg-section.fixed-bg-2,
body.page-index.fixed-bg-mode #about.fixed-bg-section.fixed-bg-2 {
    background-image: url("images/fixed-bg/fixed-bg-2.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-index.fixed-bg-mode #scenarios.fixed-bg-section.fixed-bg-3,
body.page-index.fixed-bg-mode #final-cta.fixed-bg-section.fixed-bg-3 {
    background-image: url("images/fixed-bg/fixed-bg-3.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-index.fixed-bg-mode #area.fixed-bg-section.fixed-bg-4 {
    background-image: url("images/fixed-bg/fixed-bg-4.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-index.fixed-bg-mode #faq.fixed-bg-section.fixed-bg-5 {
    background-image: url("images/fixed-bg/fixed-bg-5.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

@media (max-width: 767px) {
    body.page-index.fixed-bg-mode :is(#services, #pricing-guide, #scenarios, #area, #faq, #about, #final-cta).fixed-bg-section {
        background-size: 100vw auto !important;
    }
}

/* =========================
   pricing fixed background mode
========================= */
body.page-pricing.fixed-bg-mode :is(#pricing-intro, #pricing-notes, #regional-pricing, #registration-pricing, #sealing-pricing).fixed-bg-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: transparent !important;
}

body.page-pricing.fixed-bg-mode :is(#pricing-intro, #pricing-notes, #regional-pricing, #registration-pricing, #sealing-pricing).fixed-bg-section::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 0;
    width: auto;
    max-width: none;
    transform: none;
    background: rgba(255, 255, 255, 0.20);
    border: 0;
    pointer-events: none;
    z-index: 0;
}

body.page-pricing.fixed-bg-mode :is(#pricing-intro, #pricing-notes, #regional-pricing, #registration-pricing, #sealing-pricing).fixed-bg-section::after {
    content: "";
    position: absolute;
    inset: 0;
    width: min(1672px, 100vw);
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid rgba(179, 188, 194, 0.18);
    border-right: 1px solid rgba(179, 188, 194, 0.18);
    pointer-events: none;
    z-index: 1;
}

body.page-pricing.fixed-bg-mode :is(#pricing-intro, #pricing-notes, #regional-pricing, #registration-pricing, #sealing-pricing).fixed-bg-section > * {
    position: relative;
    z-index: 2;
}

body.page-pricing.fixed-bg-mode #pricing-intro.fixed-bg-section.fixed-bg-1,
body.page-pricing.fixed-bg-mode #pricing-notes.fixed-bg-section.fixed-bg-1,
body.page-pricing.fixed-bg-mode #regional-pricing.fixed-bg-section.fixed-bg-1 {
    background-image: url("images/fixed-bg/fixed-bg-1.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-pricing.fixed-bg-mode #registration-pricing.fixed-bg-section.fixed-bg-2 {
    background-image: url("images/fixed-bg/fixed-bg-2.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-pricing.fixed-bg-mode #sealing-pricing.fixed-bg-section.fixed-bg-3 {
    background-image: url("images/fixed-bg/fixed-bg-3.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

@media (max-width: 767px) {
    body.page-pricing.fixed-bg-mode :is(#pricing-intro, #pricing-notes, #regional-pricing, #registration-pricing, #sealing-pricing).fixed-bg-section::after {
        width: 100vw;
    }

    body.page-pricing.fixed-bg-mode #pricing-intro.fixed-bg-section.fixed-bg-1,
    body.page-pricing.fixed-bg-mode #pricing-notes.fixed-bg-section.fixed-bg-1,
    body.page-pricing.fixed-bg-mode #regional-pricing.fixed-bg-section.fixed-bg-1,
    body.page-pricing.fixed-bg-mode #registration-pricing.fixed-bg-section.fixed-bg-2,
    body.page-pricing.fixed-bg-mode #sealing-pricing.fixed-bg-section.fixed-bg-3 {
        background-size: 100vw auto !important;
    }
}

/*
   about-office fixed background mode
*/
body.page-about-office.fixed-bg-mode :is(.about-profile-scope, .about-access-scope, .about-office-cta-scope).fixed-bg-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.page-about-office.fixed-bg-mode :is(.about-profile-scope, .about-access-scope, .about-office-cta-scope).fixed-bg-section::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 0;
    width: auto;
    max-width: none;
    transform: none;
    background: rgba(255, 255, 255, 0.20);
    border: 0;
    pointer-events: none;
    z-index: 0;
}

body.page-about-office.fixed-bg-mode :is(.about-profile-scope, .about-access-scope, .about-office-cta-scope).fixed-bg-section::after {
    content: "";
    position: absolute;
    inset: 0;
    width: min(1672px, 100vw);
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid rgba(179, 188, 194, 0.18);
    border-right: 1px solid rgba(179, 188, 194, 0.18);
    pointer-events: none;
    z-index: 1;
}

body.page-about-office.fixed-bg-mode :is(.about-profile-scope, .about-access-scope, .about-office-cta-scope).fixed-bg-section > * {
    position: relative;
    z-index: 2;
}

body.page-about-office.fixed-bg-mode .about-office-cta-scope > section {
    background-image: none !important;
    background-color: transparent !important;
}

body.page-about-office.fixed-bg-mode .about-office-cta-scope > section::before {
    content: none !important;
    border: 0 !important;
}

body.page-about-office.fixed-bg-mode .about-profile-scope.fixed-bg-section.fixed-bg-1 {
    background-image: url("images/fixed-bg/fixed-bg-1.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-about-office.fixed-bg-mode .about-access-scope.fixed-bg-section.fixed-bg-2 {
    background-image: url("images/fixed-bg/fixed-bg-2.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

body.page-about-office.fixed-bg-mode .about-office-cta-scope.fixed-bg-section.fixed-bg-3 {
    background-image: url("images/fixed-bg/fixed-bg-3.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: min(1672px, 100vw) auto !important;
}

@media (max-width: 767px) {
    body.page-about-office.fixed-bg-mode :is(.about-profile-scope, .about-access-scope, .about-office-cta-scope).fixed-bg-section::after {
        width: 100vw;
    }

    body.page-about-office.fixed-bg-mode .about-profile-scope.fixed-bg-section.fixed-bg-1,
    body.page-about-office.fixed-bg-mode .about-access-scope.fixed-bg-section.fixed-bg-2,
    body.page-about-office.fixed-bg-mode .about-office-cta-scope.fixed-bg-section.fixed-bg-3 {
        background-size: 100vw auto !important;
    }
}