/* ==========================================================================
   base.css  Elarge desktop (width > 1280). Global tokens + header.
   Loaded AFTER legacy style.css so it can override leaky rules.
   ========================================================================== */

/* 1. Design tokens */
:root {
       --header-h: 10rem;
    --color-yellow: #FBE400;
    --color-yellow-pmf: #FED854;
    --color-yellow-alt: #FCE676;
    --color-cyan: #00BAC9;
    --color-logo: #5BA9CE;
    --color-pill-bg: #FFF6F6;
    --color-text: #111111;
    --color-shadow: rgba(0, 0, 0, 0.14);
    --color-shadow-soft: rgba(0, 0, 0, 0.08);

    /* CTA gradient (used on hero "賁E�E��E�請求�EこちめE button) */
    --color-cta-start: #CF6B28;
    --color-cta-end:   #E4A0A0;

    /* News + About section palette */
    --color-cyan-mid:  #3B7CAF; /* NEWS / ABOUT kicker + big titles */
    --color-cyan-card: #4A90A4; /* News card text (wedgewood) */
    --color-text-muted: #555555; /* News excerpt (emperor) */
    --color-card-bg:   #F9F9F9; /* News card bg (alabaster) */

    /* Subpage palette */
    --color-heading-dark: #1D2B36; /* near-black heading on subpages */
    --color-kana-muted:   #4D4D4D; /* kana label on light cards */
    --color-subhero-overlay: rgba(0, 186, 201, 0.639); /* #00BAC9A3 cyan over hero video */

    /* Construction-example category badges */
    --color-cat-port:    #6366F1; /* 港湾  Eindigo */
    --color-cat-private: #22C55E; /* 民間  Egreen */

    /* News category pills */
    --color-news-notice:  #737373; /* お知らせ  Egray */
    --color-news-press:   #00A7B5; /* プレスリリース  Eteal */
    --color-news-recruit: #45A15C; /* 採用  Egreen */
    --color-news-award:   #E29400; /* 受賞�E採抁E Eorange */
    --color-news-media:   #8A45B8; /* メチE�E��E�ア  Epurple */

    --font-sans: "Noto Sans JP", "Noto Sans", system-ui, -apple-system, sans-serif;

    --radius-pill: 0.3125rem;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    --z-header: 100;
    --z-menu: 90;
    --z-backdrop: 80;

    /* Approx rendered header height  Eoverridden per breakpoint. Used for hero calc. */
    --header-h: 8rem;
}

/* 2. Base typography on body  Escoped so legacy resets stay */
/* Site-wide horizontal-overflow lock. Default for every top-level section is
   clamped to the viewport. Override per-element with `overflow-x: visible`
   only when something genuinely needs to bleed (e.g. tooltip, dropdown). */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}
/* ==========================================================================
   GLOBAL TOP GAP FIX  Eremove white strip above sticky header
   ========================================================================== */

html {
    margin-top: 0 !important;
}

body {
    margin: 0;
    padding-top: 0 !important;
}

body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.admin-bar header.siteHeader {
    top: 0;
}

/* Hide WP admin bar only for visual checking.
   Remove this if you need the admin toolbar while editing. */
#wpadminbar {
    display: none !important;
}
header,
main,
footer,
section,
article,
aside,
nav,
div[class*="Section"],
div[class*="section"],
div[class*="Wrap"],
div[class*="wrap"],
div[class*="Container"],
div[class*="container"] {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    font-weight: 400;
}

/* 3. Display utilities (responsive visibility helpers) */
.desktop { display: block; }
.mobile { display: none; }
/* ==========================================================================
   HEADER  Edesktop / base
   Structure:
   .siteHeader
     .headerInner.desktop
       .logoArea
       .pillNav
       .mainNav
   ========================================================================== */

:root {
    --header-h: 8.85rem;
}

header.siteHeader {
    width: 100%;
    margin: 0;
    padding: 0;

    background: var(--color-yellow);
    position: sticky;
    top: 0;
    z-index: var(--z-header);

    box-shadow: none;
    display: block;
}

/* Desktop header grid */
.siteHeader .headerInner.desktop {
    width: 100%;
    max-width: 108rem;
    min-height: var(--header-h);
    margin: 0 auto;
    padding: 1.25rem 2.25rem 1.15rem;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    column-gap: 2.5rem;
    row-gap: 0;

    align-items: stretch;
}

/* Logo  Evertically centered across whole header */
.siteHeader .logoArea {
    grid-column: 1;
    grid-row: 1 / span 2;

    width: 18.75rem;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    align-self: stretch;
    justify-self: start;
}

.siteHeader .logoArea a {
    display: block;
    line-height: 0;
    transition:
        transform 0.2s var(--ease),
        filter 0.2s var(--ease);
}

.siteHeader .logoArea a:hover {
    transform: scale(1.015);
    filter: drop-shadow(0 0.25rem 0.5rem var(--color-shadow-soft));
}

.siteHeader .logoArea img {
    display: block;
    width: 100%;
    height: auto;
}

/* Top utility buttons  Evertically centered in upper half */
.siteHeader .pillNav {
    grid-column: 2;
    grid-row: 1;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: center;

    gap: 1rem;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
    background: transparent;
}

.siteHeader .pillBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;

    min-width: 12rem;
    height: 2.875rem;
    padding: 0 1.375rem;
    box-sizing: border-box;

    background: #e9e9e9;
    color: var(--color-text);
    border-radius: 0.3125rem;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 0.0625rem 0.1875rem var(--color-shadow-soft);

    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        background 0.2s var(--ease);
}

.siteHeader .pillBtn:hover,
.siteHeader .pillBtn.active {
    background: #ffffff;
    transform: translateY(-0.125rem);
    box-shadow:
        0 0.25rem 0.625rem var(--color-shadow),
        0 0.0625rem 0.125rem var(--color-shadow-soft);
}

.siteHeader .pillBtn:active {
    transform: translateY(0);
}

.siteHeader .pillIcon {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
}

/* Main navigation  Evertically centered in lower half */
.siteHeader .mainNav {
    grid-column: 2;
    grid-row: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: center;

    gap: 1.15rem;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
    background: transparent;
}

.siteHeader .navItem {
    position: relative;

    display: inline-flex;
    align-items: center;

    color: var(--color-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;

    padding: 0.25rem 0;

    transition: color 0.2s var(--ease);
}

.siteHeader .navItem::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.25rem;

    height: 0.1875rem;

    background: var(--color-logo);
    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.25s var(--ease);
}

.siteHeader .navItem:hover,
.siteHeader .navItem.active {
    color: var(--color-logo);
}

.siteHeader .navItem:hover::after,
.siteHeader .navItem.active::after {
    transform: scaleX(1);
}

.siteHeader .navItem.active {
    font-weight: 700;
}

/* Desktop hidden mobile parts */
.siteHeader .hamburgerBtn {
    display: none;
}

.siteHeader .mobileMenu {
    display: none;
}/* ==========================================================================
   HERO  Efront page video hero
   Structure:
   #top
     .heroTop
       .heroVideo
       .heroImage
       .heroContent
         .heroTitle
           .heroTitleLg
           .heroTitleSm
         .heroCta
   ========================================================================== */

#top .heroTop {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: clamp(37rem, 43vw, 46rem);
    min-height: 37rem;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

/* Video background  Elowest layer */
#top .heroVideo {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
    margin-top: 0vw;
    pointer-events: none;
}

/* Cyan water wash over video */
#top .heroTop::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background: rgba(0, 186, 201, 0.68);
    pointer-events: none;
}

/* Decorative image: mascots + speech bubble.
   Keep it below real text. */
#top .heroImage {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: block;
       width: 90%;
    height: 100%;
    object-fit: scale-down;
    margin-left: 6vw;
    object-position: center right;

    opacity: 1;
    pointer-events: none;
}

/* Real title + CTA layer */
#top .heroContent {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 78rem;
    margin: 0 auto;
    padding: 5.2rem 2rem 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
margin-top: 7vw;
    margin-left: 18vw;
    text-align: center;
    pointer-events: none;
}

/* Main H1  Evisible again */
#top .heroTitle {
    position: relative;
    z-index: 6;

    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;

    width: auto;
    height: auto;
    margin: 0;
    padding: 0;

    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;

    text-shadow:
        0 0.25rem 0.45rem rgba(0, 0, 0, 0.18),
        0 0.05rem 0.05rem rgba(0, 0, 0, 0.12);
}

#top .heroTitleLg {
    display: inline-block;

    color: #ffffff;
    font-size: clamp(4.9rem, 6.3vw, 7rem);
    font-weight: 900;
    line-height: 1;
}

#top .heroTitleSm {
    display: inline-block;

    color: #ffffff;
    font-size: clamp(2.3rem, 2.9vw, 3.2rem);
    font-weight: 900;
    line-height: 1.05;
}

/* CTA */
#top .heroCta {
    position: relative;
    z-index: 6;
    pointer-events: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    width: 24rem;
    max-width: 90vw;
    height: 4.5rem;
    margin: 2.4rem auto 0;
    padding: 0 2.5rem;
    box-sizing: border-box;

    background: linear-gradient(90deg, #d46f2f 0%, #e99a9a 100%);
    color: #ffffff;
    border: 0.25rem solid #ffffff;
    border-radius: 2rem;

    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 0.5rem 1.1rem rgba(0, 0, 0, 0.16);

    transition:
        transform 0.2s var(--ease),
        filter 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

#top .heroCta:hover {
    transform: translateY(-0.15rem);
    filter: brightness(1.06);
    box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.2);
}

#top .heroCta:active {
    transform: translateY(0);
}

#top .heroCtaLabel {
    display: inline-block;
}

#top .heroCtaArrow {
    display: inline-block;
    width: 0;
    height: 0;

    border-top: 0.65rem solid transparent;
    border-bottom: 0.65rem solid transparent;
    border-left: 0.85rem solid #ffffff;
}


/* ==========================================================================
   NEWS  Efront page carousel
   Structure:
   .newsSection
     .newsHeader
     .newsCarousel
       .newsArrow
       .newsViewport
         .newsTrack
           .newsCard
   ========================================================================== */

#top .newsSection {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 4.4rem 2rem 8.3rem;
    box-sizing: border-box;

    background: #ffffff;
    overflow: hidden;
    z-index: 1;
}

/* Yellow wave at the bottom */
#top .newsSection::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.0625rem;
    z-index: 1;

    width: 100%;
    height: 7.6rem;

    background-image: url("../img/top/Vector25.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;

    pointer-events: none;
}

#top .newsHeader {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    width: fit-content;
    margin: 0 auto 2.4rem;
    padding: 0;

    text-align: center;
    text-decoration: none;
}

#top .newsKicker {
    margin: 0;
    padding: 0;

    color: var(--color-cyan-mid);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
}

#top .newsHeading {
    margin: 0;
    padding: 0;

    color: var(--color-cyan-mid);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: clamp(3.1rem, 3.6vw, 4.2rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0.04em;
}

/* Carousel */
#top .newsCarousel {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 3.5rem minmax(0, 78rem) 3.5rem;
    align-items: center;
    justify-content: center;
    column-gap: 1.25rem;

    width: 100%;
    max-width: 92rem;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

#top .newsViewport {
    width: 100%;
    overflow: hidden;
}

#top .newsTrack {
    display: flex;
    align-items: stretch;
    gap: 1.15rem;

    width: max-content;
    margin: 0;
    padding: 0;

    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

#top .newsCard {
    flex: 0 0 calc((78rem - 1.15rem * 3) / 4);

    width: calc((78rem - 1.15rem * 3) / 4);
    min-height: 14.6rem;
    margin: 0;
    padding: 1.15rem 1rem 1rem;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    background: #f7f8f9;
    border: none;
    border-radius: 0.25rem;
    box-shadow: none;

    overflow: hidden;
}

#top .newsDate {
    margin: 0 0 0.55rem;
    padding: 0;

    color: var(--color-cyan-card);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.35;
}

#top .newsTitle {
    margin: 0 0 0.85rem;
    padding: 0;

    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.35;
}

#top .newsTitle a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;

    color: var(--color-cyan-card);
    text-decoration: none;
}

#top .newsTitle a:hover {
    color: var(--color-cyan-mid);
    text-decoration: underline;
}

#top .newsExcerpt {
    flex: 1 1 auto;

    margin: 0 0 1rem;
    padding: 0;

    color: #4d4d4d;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.01em;

    overflow: hidden;
}

#top .newsReadMore {
    align-self: flex-end;

    margin: auto 0 0;
    padding: 0;

    color: var(--color-cyan-card);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

#top .newsReadMore:hover {
    color: var(--color-cyan-mid);
}

/* Arrows */
#top .newsArrow {
    position: relative;
    z-index: 3;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 3.5rem;
    height: 5.5rem;
    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 0;
    color: #c4c4c4;
    cursor: pointer;

    opacity: 1;
    visibility: visible;

    transition:
        color 0.2s var(--ease),
        transform 0.2s var(--ease),
        opacity 0.2s var(--ease);
}

#top .newsArrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

#top .newsArrow:hover {
    color: var(--color-cyan-mid);
    transform: scale(1.05);
}

#top .newsArrow.isDisabled,
#top .newsArrow:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
.siteHeader .logoArea img {
    margin-top: 2vw;}
/* ==========================================================================
   ABOUT  Eyellow company message
   Structure:
   .aboutSection
     .aboutWave
     .aboutInner
       .aboutKicker
       .aboutLogo
       .aboutHeading
         .aboutWordSm
         .aboutWordLg
       .aboutDescription

   Design notes:
   - ABOUT itself is solid yellow #FBE400.
   - The wave is NOT inside ABOUT now.
   - Existing .aboutWave markup is hidden safely.
   ========================================================================== */

.aboutSection {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 4.2rem 2rem 5.7rem;
    box-sizing: border-box;

    background: #FBE400;
    color: #000000;

    overflow: hidden;
    z-index: 2;
}

/* Existing SVG wave in PHP is no longer visually used */
.aboutSection .aboutWave {
    display: none;
}

.aboutSection .aboutInner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 66rem;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

/* ABOUT US */
.aboutSection .aboutKicker {
    margin: 0 0 0.7rem;
    padding: 0;

    color: var(--color-cyan-mid);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.16em;
}

/* Logo */
.aboutSection .aboutLogo {
    width: 18.5rem;
    max-width: 80%;
    margin: 0 0 1.75rem;
    padding: 0;
}

.aboutSection .aboutLogo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Main copy */
.aboutSection .aboutHeading {
    margin: 0 0 1.6rem;
    padding: 0;

    color: var(--color-cyan-mid);
    font-family: var(--font-sans);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #07364A 0%, #00BAC9 39.42%, #00BAC9 59.13%, #0F505D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.aboutSection .aboutWordSm {
    font-size: clamp(2.35rem, 3.1vw, 3.4rem);
}

.aboutSection .aboutWordLg {
    font-size: clamp(3.35rem, 4.6vw, 5.1rem);
}

/* Description */
.aboutSection .aboutDescription {
    max-width: 48rem;
    margin: 0;
    padding: 0;

    color: #000000;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   VIDEO  Ecompany intro video section
   Structure:
   .videoSection
     .videoSectionBg
     .videoContent
       .videoHeading
         .videoHeadingLarge
         .videoHeadingSmall
       .videoDescription
       .videoCta
         .videoCtaArrow

   Design notes:
   - Video should autoplay muted/playsinline from PHP.
   - CSS makes it full-bleed behind the text.
   - JS can pause/play based on viewport, but CSS is complete without it.
   ========================================================================== */

.videoSection {
    position: relative;
    width: 100%;
    min-height: 45rem;
    margin: 0;
    padding: 0;

    background: #000000;
    color: #ffffff;

    overflow: hidden;
    z-index: 3;
}

/* Video background */
.videoSection .videoSectionBg {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    pointer-events: none;
    opacity: 0.9;
        margin-top: -3vw;
}

/* Readability overlay */
.videoSection::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(0, 0, 0, 0.68) 34%,
            rgba(0, 0, 0, 0.34) 58%,
            rgba(0, 0, 0, 0.55) 100%
        );

    pointer-events: none;
}

/* Text content */
.videoSection .videoContent {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 34rem;
    margin-left: clamp(8rem, 11.5vw, 14rem);
    padding: 10.6rem 0 7rem;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    color: #ffffff;
    text-align: left;
}

/* Heading */
.videoSection .videoHeading {
    margin: 0 0 1.55rem;
    padding: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}

.videoSection .videoHeadingLarge {
    font-size: clamp(4.8rem, 6.1vw, 7rem);
}

.videoSection .videoHeadingSmall {
    margin-left: 0.12rem;
    font-size: clamp(1.9rem, 2.2vw, 2.6rem);
}

/* Description */
.videoSection .videoDescription {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 2.2;
    letter-spacing: 0.08em;
}

/* CTA button */
.videoSection .videoCta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;

    width: 19.5rem;
    height: 4.6rem;
    margin: 3.1rem 0 0;
    padding: 0 2rem;
    box-sizing: border-box;

    background: var(--color-cyan);
    color: #ffffff;
    border-radius: 0.65rem;

    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: none;

    transition:
        transform 0.2s var(--ease),
        filter 0.2s var(--ease);
}

.videoSection .videoCta:hover {
    transform: translateY(-0.125rem);
    filter: brightness(1.08);
}

.videoSection .videoCta:active {
    transform: translateY(0);
}

.videoSection .videoCtaArrow {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
/* ==========================================================================
   SERVICES/PRODUCTS  Ecyan section with yellow top wave + product visual
   Structure:
   .servicesSection
     .servicesTop
       .servicesKicker
       .servicesHeading
       .servicesDescription
     .servicesCta

   Assets:
   - Vector26.png = yellow wave at top
   - 製品サービス.png = product/service visual with white blob + circles
   ========================================================================== */

.servicesSection {
    position: relative;
    width: 100%;
   min-height: 60rem;
    margin: 0;
    padding: 14rem 2rem 3.2rem;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    background-color: var(--color-cyan);
    overflow: hidden;
    text-align: center;
    z-index: 4;
}

/* Yellow wave at top */
.servicesSection::before {
        content: "";
    position: absolute;
    left: 0;
    top: -0.0625rem;
    z-index: 1;
    width: 100%;
    height: 7.2rem;
    background: url(../img/top/Vector26.png) no-repeat center top / 100% 100%;
    pointer-events: none;
}

/* Product/service visual */
.servicesSection::after {
     content: "";
    position: absolute;
    left: 50%;
    top: 56.5%;
    z-index: 1;

    width: min(89rem, 98vw);
    aspect-ratio: 1728 / 760;

    background-image: url("../img/top/製品サービス.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;

    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Text block */
.servicesSection .servicesTop {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    margin-top: -2vw!important;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0;
}

.servicesSection .servicesKicker {
    margin: 0;
    padding: 0;

    color: var(--color-yellow);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.16em;
}

.servicesSection .servicesHeading {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-size: clamp(3rem, 3.9vw, 4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.servicesSection .servicesDescription {
    margin: 0.7rem 0 0;
    padding: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.01em;
}

/* CTA */
.servicesSection .servicesCta {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;

    width: 30rem;
    max-width: 90%;
    height: 4.25rem;
    margin: 0;
    padding: 0 2.75rem;
    box-sizing: border-box;

    background: linear-gradient(to right, var(--color-yellow), #FBEDC1);
    color: var(--color-text);
    border-radius: 3rem;

    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 0.375rem 1rem var(--color-shadow);
    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        filter 0.2s var(--ease);
}

.servicesSection .servicesCta:hover {
    transform: translateY(-0.1875rem);
    box-shadow: 0 0.75rem 1.5rem var(--color-shadow);
    filter: brightness(1.03);
}

.servicesSection .servicesCta:active {
    transform: translateY(0);
    box-shadow: 0 0.25rem 0.5rem var(--color-shadow);
}

.servicesSection .servicesCtaLabel {
    display: inline-block;
}

.servicesSection .servicesCtaArrow {
    display: inline-block;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}

/* ==========================================================================
   CONCEPT  Efront-page water coexistence section
   Structure:
   .conceptSection
     .conceptInner
       .conceptKicker
       .conceptHeading
       .conceptDescription
       .conceptCta

   Asset:
   - conceptTop.png = character + water background
   ========================================================================== */

#top .conceptSection {
    box-sizing: border-box;
    position: relative;

    width: 100%;
    min-height: 31rem;
    margin: 0;
    padding: 3.2rem 9.5% 3rem 49%;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    background-color: #dff6f8;
    background-image: url("../img/top/conceptTop.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    overflow: hidden;
    z-index: 5;
}

/* Keep text readable but do not wash out the character/background */
#top .conceptSection::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.03) 34%,
            rgba(255, 255, 255, 0.16) 52%,
            rgba(255, 255, 255, 0.48) 100%
        );

    pointer-events: none;
}

#top .conceptSection .conceptInner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 25rem) 13.5rem;
    grid-template-areas:
        "kicker kicker"
        "heading heading"
        "desc button";
    column-gap: 2.4rem;
    row-gap: 0.7rem;
    align-items: end;

    width: min(43rem, 100%);
    max-width: 43rem;
    margin: 0;
    padding: 0;

    text-align: left;
}

/* Kicker */
#top .conceptSection .conceptKicker {
    grid-area: kicker;

    margin: 0;
    padding: 0;

    color: var(--color-cyan-mid);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
    
}

/* Heading */
#top .conceptSection .conceptHeading {
    grid-area: heading;

    width: auto;
    margin: 0 0 0.35rem;
    padding: 0;

    color: var(--color-cyan-mid);
    font-family: var(--font-sans);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: left;
        background: linear-gradient(180deg, #07364A 0%, #00BAC9 39.42%, #00BAC9 59.13%, #0F505D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#top .conceptSection .conceptLg {
    font-size: 4rem;
}

#top .conceptSection .conceptSm {
    font-size: 2.65rem;
}

/* Description */
#top .conceptSection .conceptDescription {
    grid-area: desc;

    margin: 0;
    padding: 0;

    color: #000000;
    font-family: var(--font-sans);
    font-weight: 900;
    line-height: 1.72;
    letter-spacing: 0.01em;
    text-align: left;
}

#top .conceptSection .conceptEmph {
    font-size: 1.95rem;
    font-weight: 900;
}

#top .conceptSection .conceptLite {
    font-size: 1rem;
    font-weight: 900;
}

/* CTA  Ealigned beside the lower copy like the design */
#top .conceptSection .conceptCta {
    grid-area: button;
    align-self: end;
    justify-self: start;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;

    width: 13.5rem;
    height: 3.45rem;
    margin: 0 0 0.3rem;
    padding: 0 1.7rem;
    box-sizing: border-box;

    background: var(--color-cyan);
    color: #ffffff;
    border-radius: 0.42rem;

    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.14);

    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        filter 0.2s var(--ease);
}

#top .conceptSection .conceptCta:hover {
    transform: translateY(-0.125rem);
    filter: brightness(1.08);
    box-shadow: 0 0.65rem 1.25rem rgba(0, 0, 0, 0.18);
}

#top .conceptSection .conceptCta:active {
    transform: translateY(0);
}

#top .conceptSection .conceptCtaLabel {
    display: inline-block;
}

#top .conceptSection .conceptCtaArrow {
    display: inline-block;
    font-size: 0.95em;
    font-weight: 900;
    line-height: 1;
}
/* ==========================================================================
   OTHER WORKS  Esubsidiary / related businesses
   Structure:
   .otherworksSection
     .otherworksInner
       .otherworksKicker
       .otherworksHeading
       .otherworksGrid
         .otherworksCard
           .otherworksLabel
           .otherworksCardBody
           .otherworksCardDesc
           .otherworksCardCta

   Assets:
   - Group29.png = left white/concrete block decoration
   - otherworksch.png = pale character decoration
   - Vector30.png = blue wave at bottom
   ========================================================================== */

.otherworksSection {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 5.3rem 2rem 8.2rem;

    background-color: #ffffff;
    background-image:
        url("../img/top/Group29.png"),
        url("../img/top/otherworksch.png");
    background-repeat: no-repeat, no-repeat;
    background-position:
        left top,
        right 2.5rem top 1rem;
    background-size:contain;
    overflow: hidden;
    z-index: 6;
    min-height: 64vw;
    display: flex;
    align-items: center;
}

.otherworksSection::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: transparent;
    pointer-events: none;
}

/* Blue wave at the bottom of OTHER WORKS */
.otherworksSection::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.0625rem;
    z-index: 1;

    width: 100%;
    height: 9rem;

    background-image: url("../img/top/Vector30.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;

    pointer-events: none;
}

.otherworksSection .otherworksInner {
    position: relative;
    z-index: 2;

    width: min(86rem, 100%);
    max-width: 86rem;
    margin: 0 auto;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-bottom: 5vw;
    text-align: center;
}

.otherworksSection .otherworksKicker {
    margin: 0;
    padding: 0;

    color: var(--color-cyan-mid);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.16em;
}

.otherworksSection .otherworksHeading {
    margin: 0;
    padding: 0;

    color: var(--color-cyan-mid);
    font-family: var(--font-sans);
    font-size: clamp(2.8rem, 3.3vw, 4.2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #07364A 0%, #00BAC9 39.42%, #00BAC9 59.13%, #0F505D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.otherworksSection .otherworksAccent {
    font-size: inherit;
    color: var(--color-cyan);
    font-size: clamp(2.8rem, 4vw, 4.2rem);
}

/* Card grid */
.otherworksSection .otherworksGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;

    width: 100%;
    max-width: 100%;
    margin: 2.4rem 0 0;
    padding: 0;
}

/* Card */
.otherworksSection .otherworksCard {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    margin: 0;
    padding: 0;
}

/* Yellow label with cyan tab */
.otherworksSection .otherworksLabel {
    display: flex;
    align-items: stretch;

    height: 4.75rem;
    margin: 0;
    padding: 0;

    box-shadow: none;
}

.otherworksSection .otherworksLabelTab {
    width: 3.15rem;
    background: var(--color-cyan);
    flex-shrink: 0;
}

.otherworksSection .otherworksLabelText {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 0.75rem;

    background: var(--color-yellow);
    color: var(--color-cyan);

    font-family: var(--font-sans);
    font-size: 1.14rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Image box */
.otherworksSection .otherworksCardBody {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    min-height: 21.5rem;
    margin: 0;
    padding: 1.15rem 1rem 1rem;
    box-sizing: border-box;
    background: #ffffff;
    border: 0.125rem solid #d3d3d3;
    box-shadow: none;
    flex-direction: column;
    border-collapse: separate;
    margin-top: 0.55rem;
}

.otherworksSection .otherworksCardImg {
    display: block;

    width: 100%;
    max-width: 100%;
    height: clamp(8rem, 10.3vw, 10.75rem);
    max-height: none;
    object-fit: contain;
}

/* Card description */
.otherworksSection .otherworksCardDesc {
    min-height: 2.6rem;
    margin: 1rem 0 0.8rem;
    padding: 0;

    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.55;
    text-align: center;
}

/* CLICK HERE button */
.otherworksSection .otherworksCardCta {
    align-self: center;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;

    width: 9.8rem;
    height: 2rem;
    margin: 0;
    padding: 0 1rem;
    box-sizing: border-box;

    background: var(--color-cyan);
    color: #ffffff;
    border-radius: 0.55rem;

    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: none;
    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        filter 0.2s var(--ease);
}

.otherworksSection .otherworksCardCta:hover {
    transform: translateY(-0.125rem);
    filter: brightness(1.08);
    box-shadow: 0 0.375rem 0.875rem var(--color-shadow);
}

.otherworksSection .otherworksCardCta:active {
    transform: translateY(0);
}

.otherworksSection .otherworksCtaLabel {
    display: inline-block;
}

.otherworksSection .otherworksCtaArrow {
    display: inline-block;
    width: 0;
    height: 0;

    border-top: 0.32rem solid transparent;
    border-bottom: 0.32rem solid transparent;
    border-left: 0.45rem solid #ffffff;
}

/* ==========================================================================
   FOOTER  Ebranches / contact / nav / copyright + floating back-to-top
   ========================================================================== */

/* 11. Footer shell */
footer.siteFooter {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    color: var(--color-text);
    font-family: var(--font-sans);
    overflow: hidden;
}

/* ==========================================================================
   FOOTER BRANCHES  Esky/factory background with chess-order address cards
   Structure:
   .siteFooter
     .footerBranches
       .footerBranchesInner
         .footerMainLogo
         .branchGrid
           .branchCard.branchCardHq
           .branchCard.branchCardObihiro
           .branchCard.branchCardKanto
           .branchCard.branchCardKuriyama

   Assets:
   - branchesBg.png = sky/factory background
   - Vector32.png = top cyan/sky wave into branches
   ========================================================================== */

.siteFooter .footerBranches {
    position: relative;
    z-index: 0;

    width: 100%;
    min-height: 51rem;
    margin: 0;
    padding: 0;

    background-image: url("../img/top/branchesBg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}

/* Top wave into branches */
.siteFooter .footerBranches::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.0625rem;
    z-index: 2;

    width: 100%;
    height: 7.2rem;

    background-image: url("../img/top/Vector32.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;

    pointer-events: none;
}

/* Dimming/readability overlay */
.siteFooter .footerBranches::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.48) 0%,
            rgba(255, 255, 255, 0.42) 34%,
            rgba(255, 255, 255, 0.34) 100%
        );

    pointer-events: none;
}

.siteFooter .footerBranchesInner {
    position: relative;
    z-index: 3;

    max-width: 82rem;
  min-height: 55rem;
    margin: 0 auto;
    padding: 8.1rem 2.5rem 4.5rem;
    box-sizing: border-box;
}

/* Center logo */
.siteFooter .footerMainLogo {
    display: block;

    width: 13.25rem;
    margin: 0 auto 2.6rem;

    opacity: 0.9;
}

.siteFooter .footerMainLogo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Chess/staggered layout */
.siteFooter .branchGrid {
    position: relative;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: 3.5rem;
    row-gap: 3.4rem;

    width: 100%;
    max-width: 66rem;
    margin: 0 auto;
    padding: 0;
}

/* Card wrapper */
.siteFooter .branchCard {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Exact chess placement */
.siteFooter .branchCard.branchCardHq {
    grid-column: 1;
    grid-row: 1;
    transform: translateY(0);
}

.siteFooter .branchCard.branchCardObihiro {
    grid-column: 2;
    grid-row: 1;
    transform: translateY(4rem);
}

.siteFooter .branchCard.branchCardKanto {
    grid-column: 1;
    grid-row: 2;
    transform: translateY(-0.2rem);
}

.siteFooter .branchCard.branchCardKuriyama {
    grid-column: 2;
    grid-row: 2;
    transform: translateY(4rem);
        padding-bottom: 5vw;
}

/* Yellow branch label */
.siteFooter .branchLabel {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 14.7rem;
    height: 4.6rem;
    margin: 0 0 -0.35rem;
    padding: 0 2rem;
    box-sizing: border-box;

    background: var(--color-yellow);
    color: var(--color-cyan);

    font-family: var(--font-sans);
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;

    box-shadow: none;
}

/* White translucent details box */
.siteFooter .branchDetails {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 10.3rem;
    margin: 0;
    padding: 1.85rem 1.9rem 1.45rem;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: rgba(255, 255, 255, 0.76);
    color: #000000;

    font-family: var(--font-sans);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.72;
    letter-spacing: 0.035em;

    border-radius: 0;
    box-shadow: none;
}

/* Center logo */
.siteFooter .footerMainLogo {
    display: block;
    width: 13.25rem;
    margin: 0 auto 2.7rem;
    opacity: 0.92;
}

.siteFooter .footerMainLogo img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2x2 grid */
.siteFooter .branchGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.2rem 3.8rem;

    width: 100%;
    max-width: 66rem;
    margin: 0 auto;
}

/* Card wrapper */
.siteFooter .branchCard {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Reset old positional offsets */
.siteFooter .branchCard.branchCardHq,
.siteFooter .branchCard.branchCardObihiro,
.siteFooter .branchCard.branchCardKanto,
.siteFooter .branchCard.branchCardKuriyama {
    margin: 0;
}

/* Stagger lower row slightly like the design */
.siteFooter .branchCard.branchCardKanto,
.siteFooter .branchCard.branchCardKuriyama {
    margin-top: 0.65rem;
}

/* Yellow title label */
.siteFooter .branchLabel {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 15.2rem;
    height: 4.9rem;
    margin: 0 0 -0.45rem;
    padding: 0 2rem;
    box-sizing: border-box;

    background: var(--color-yellow);
    color: var(--color-cyan);

    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;

    box-shadow: none;
}

/* White translucent address box */
.siteFooter .branchDetails {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 10.5rem;
    margin: 0;
    padding: 2rem 2rem 1.5rem;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: rgba(255, 255, 255, 0.78);
    color: #000000;

    font-family: var(--font-sans);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.72;
    letter-spacing: 0.04em;
    transform: translate(4vw, -1vw);
    border-radius: 0;
    box-shadow: none;
}

/* ==========================================================================
   YOUTUBE - PORACON TV channel
   ========================================================================== */

.youtubeSection {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-cyan);
    overflow: hidden;
    z-index: 7;
}

.youtubeSection .youtubeLink {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1728 / 697;
    min-height: 31rem;
    max-height: 43.5rem;
    overflow: hidden;
    background-color: var(--color-cyan);
}

.youtubeSection .youtubeLink::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: url("../img/top/Youtube.png") no-repeat center center;
    background-size: cover;
    pointer-events: none;
}

.youtubeSection .youtubeThumbs {
    position: absolute;
    left: 0;
    right: 0;
    top: 46.2%;
    height: 30%;
    z-index: 3;
    overflow: hidden;
    opacity: 0.42;
    pointer-events: none;
}

.youtubeSection .youtubeThumbsTrack {
    display: flex;
    height: 100%;
    animation: youtubeScroll 28s linear infinite;
    will-change: transform;
}

.youtubeSection .youtubeThumbsTrack img {
    display: block;
    flex: 0 0 auto;
    width: 18rem;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

@keyframes youtubeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.youtubeSection .youtubeText {
    position: relative;
    z-index: 4;
    max-width: 40rem;
    padding: 8.4% 0 0 16.8%;
    box-sizing: border-box;
    color: #fff;
    pointer-events: none;
}

.youtubeSection .youtubeKicker {
    margin: 0 0 0.7rem;
    padding: 0;
    color: var(--color-yellow);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
}

.youtubeSection .youtubeHeading {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.22);
}

.youtubeSection .youtubeHeadingLg {
    display: inline-block;
    font-size: clamp(4.3rem, 5.5vw, 6rem);
    line-height: 1;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

.youtubeSection .youtubeHeadingSm {
    display: inline-block;
    font-size: clamp(1.65rem, 2.2vw, 2.3rem);
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

.youtubeSection .youtubePlayLink {
    position: absolute;
    left: 20.2%;
    top: 58.2%;
    z-index: 5;
    width: 25.4%;
    height: 24.5%;
    border-radius: 2rem;
    background: transparent;
    text-decoration: none !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.2s var(--ease),
        filter 0.2s var(--ease);
}

.youtubeSection .youtubePlayLink:hover,
.youtubeSection .youtubePlayLink:focus,
.youtubeSection .youtubePlayLink:focus-visible {
    text-decoration: none !important;
    outline: none;
    transform: translateY(0.125rem);
    filter: brightness(0.99);
}

.youtubeSection .youtubePlayLink:active {
    text-decoration: none !important;
    transform: translateY(0.1875rem);
    filter: brightness(0.97);
}

/* ==========================================================================
   FOOTER CONTACT  Efinal contact CTA
   Structure:
   .siteFooter
     .footerContact
       .footerContactInner
         .contactKicker
         .contactHeading
         .contactPhone
         .contactCta
       .contactChar
   ========================================================================== */

.siteFooter .footerContact {
    box-sizing: border-box;
    position: relative;

    width: 100%;
    min-height: 30.5rem;
    margin: 0;
    padding: 4.8rem 16rem 4.2rem 16rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    overflow: hidden;
}

/* Left concrete blocks */
.siteFooter .footerContact::before {
    content: "";
    position: absolute;
       left: 0;
    top: -0.6rem;
    z-index: 1;
    width: 27rem;
    height: 35rem;

    background-image: url("../img/top/concreteBlocksContact.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;

    pointer-events: none;
}

/* Center text/button */
.siteFooter .footerContactInner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 45rem;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.siteFooter .contactKicker {
    display: block;

    margin: 0 0 1.35rem;
    padding: 0;

    color: #335878;
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
}

.siteFooter .contactHeading {
    margin: 0 0 1.6rem;
    padding: 0;

    color: #2b7a86;
    font-family: var(--font-sans);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.03em;
}

.siteFooter .contactPhone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;

    margin: 0 0 1.9rem;
    padding: 0;

    color: var(--color-cyan);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: clamp(4.2rem, 4.7vw, 5.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;

    transition:
        transform 0.2s var(--ease),
        filter 0.2s var(--ease);
}

.siteFooter .contactPhone:hover {
    transform: translateY(0.0625rem);
    filter: brightness(1.02);
}

.siteFooter .contactPhoneIcon {
    display: block;
    width: 3.8rem;
    height: auto;
    flex: 0 0 auto;
}

/* Yellow contact CTA */
.siteFooter .contactCta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.7rem;

    width: 41.5rem;
    max-width: 100%;
    height: 6rem;
    margin: 0;
    padding: 0 3rem;
    box-sizing: border-box;

    background: var(--color-yellow);
    color: var(--color-cyan);
    border-radius: 1.75rem;

    font-family: var(--font-sans);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 0.55rem 1.2rem rgba(0, 0, 0, 0.14);

    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        background 0.2s var(--ease);
}

.siteFooter .contactCta span {
    white-space: nowrap;
}

.siteFooter .contactCta:hover {
    transform: translateY(0.125rem);
    background: var(--color-yellow-pmf);
    box-shadow: 0 0.3rem 0.75rem rgba(0, 0, 0, 0.14);
}

.siteFooter .contactCta:active {
    transform: translateY(0.1875rem);
    box-shadow: 0 0.18rem 0.45rem rgba(0, 0, 0, 0.12);
}

.siteFooter .contactCtaIcon {
    display: block;
    width: 1.65rem;
    height: auto;
    flex: 0 0 auto;
}

/* Right character */
.siteFooter .contactChar {
    position: absolute;
    right: 4.9rem;
    bottom: 1.15rem;
    z-index: 2;

    width: 14.75rem;
    height: auto;
    transform: scaleX(-1);
    transform-origin: center center;

    pointer-events: none;
}

/* ==========================================================================
   FOOTER NAV  Egray footer navigation
   Structure:
   .footerNav
     .footerNavInner
       .footerSmallLogo
       .footerLinks
       .footerPrivacy
   ========================================================================== */

.siteFooter .footerNav {
    width: 100%;
    margin: 0;
    padding: 3.1rem 2rem 3.15rem;
    box-sizing: border-box;

    background: #f1f2f2;
}

.siteFooter .footerNavInner {
    width: 100%;
    max-width: 88rem;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: center;
    column-gap: 4.2rem;
}

/* Logo */
.siteFooter .footerSmallLogo {
    display: block;
    width: 8.6rem;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.siteFooter .footerSmallLogo img {
    display: block;
    width: 21%;
        height: auto;
}

/* Desktop link grid */
.siteFooter .footerLinks {
    display: grid;
    grid-template-columns: repeat(6, max-content);
    justify-content: end;
    align-items: center;
    column-gap: 1.95rem;
    row-gap: 1.85rem;

    width: 100%;
    max-width: 62rem;
    margin: 0;
    padding: 0;

    list-style: none;
}

.siteFooter .footerLinks.desktop {
    display: grid;
}

/* Links */
.siteFooter .footerLink {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0 1.45rem 0 0;
    box-sizing: border-box;

    color: var(--color-cyan);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;

    transition:
        color 0.2s var(--ease),
        transform 0.2s var(--ease);
}

/* Yellow dividers */
.siteFooter .footerLink::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;

    width: 0.32rem;
    height: 1.9rem;

    background: var(--color-yellow);
    border-radius: 0.0625rem;

    transform: translateY(-50%);
}

.siteFooter .footerLink:hover {
    color: var(--color-cyan-mid);
    transform: translateY(-0.0625rem);
}

/* Privacy is separate only for mobile */
.siteFooter .footerPrivacy {
    display: none;
}

.siteFooter .footerPrivacy a {
    color: var(--color-text);
    text-decoration: none;
}

/* ==========================================================================
   FOOTER COPYRIGHT  Ecyan bottom bar
   ========================================================================== */

.siteFooter .footerCopyright {
    position: relative;

    width: 100%;
    min-height: 4.15rem;
    margin: 0;
    padding: 1rem 6rem;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--color-cyan);
}

.siteFooter .copyrightText {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-align: center;
    white-space: nowrap;
}


/* ==========================================================================
   BACK TO TOP  Efloating yellow icon
   ========================================================================== */

.backToTopBtn {
    position: fixed;
    right: 2.25rem;
    bottom: 1.45rem;
    z-index: 120;

    display: none;

    width: 4rem;
    height: 4rem;
    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 50%;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    filter: none;

    transition:
        transform 0.2s var(--ease),
        filter 0.2s var(--ease),
        opacity 0.2s var(--ease);
}

.backToTopBtn img {
    display: block;
    width: 100%;
    height: 100%;
}

.backToTopBtn:hover {
    transform: translateY(0.125rem);
    filter: brightness(0.99) drop-shadow(0 0.35rem 0.65rem rgba(0, 0, 0, 0.22));
}

.backToTopBtn:active {
    transform: translateY(0.1875rem);
    filter: brightness(0.97);
}
a.heroCta,
a.videoCta,
a.servicesCta,
a.conceptCta,
a.otherworksCardCta,
a.contactCta,
a.contactPhone,
a.downloadBtn,
a.certCard,
a.footerLink,
a.pillBtn,
a.newsHeader,
a.newsReadMore,
a.youtubeLink {
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

a.heroCta:hover,
a.heroCta:active,
a.heroCta:focus,
a.heroCta:focus-visible,
a.videoCta:hover,
a.videoCta:active,
a.videoCta:focus,
a.videoCta:focus-visible,
a.servicesCta:hover,
a.servicesCta:active,
a.servicesCta:focus,
a.servicesCta:focus-visible,
a.conceptCta:hover,
a.conceptCta:active,
a.conceptCta:focus,
a.conceptCta:focus-visible,
a.otherworksCardCta:hover,
a.otherworksCardCta:active,
a.otherworksCardCta:focus,
a.otherworksCardCta:focus-visible,
a.contactCta:hover,
a.contactCta:active,
a.contactCta:focus,
a.contactCta:focus-visible,
a.contactPhone:hover,
a.contactPhone:active,
a.contactPhone:focus,
a.contactPhone:focus-visible,
a.downloadBtn:hover,
a.downloadBtn:active,
a.downloadBtn:focus,
a.downloadBtn:focus-visible,
a.certCard:hover,
a.certCard:active,
a.certCard:focus,
a.certCard:focus-visible,
a.footerLink:hover,
a.footerLink:active,
a.footerLink:focus,
a.footerLink:focus-visible,
a.pillBtn:hover,
a.pillBtn:active,
a.pillBtn:focus,
a.pillBtn:focus-visible,
a.newsHeader:hover,
a.newsHeader:active,
a.newsHeader:focus,
a.newsHeader:focus-visible,
a.newsReadMore:hover,
a.newsReadMore:active,
a.newsReadMore:focus,
a.newsReadMore:focus-visible,
a.youtubeLink:hover,
a.youtubeLink:active,
a.youtubeLink:focus,
a.youtubeLink:focus-visible {
    text-decoration: none !important;
    outline: none;
}

a.heroCta:hover,
a.videoCta:hover,
a.servicesCta:hover,
a.conceptCta:hover,
a.otherworksCardCta:hover,
a.contactCta:hover,
a.contactPhone:hover,
a.downloadBtn:hover,
a.certCard:hover,
a.pillBtn:hover,
a.newsHeader:hover,
a.newsReadMore:hover,
a.youtubeLink:hover {
    transform: translateY(0.125rem);
    filter: brightness(0.99);
}

a.heroCta:active,
a.videoCta:active,
a.servicesCta:active,
a.conceptCta:active,
a.otherworksCardCta:active,
a.contactCta:active,
a.contactPhone:active,
a.downloadBtn:active,
a.certCard:active,
a.pillBtn:active,
a.newsHeader:active,
a.newsReadMore:active,
a.youtubeLink:active {
    transform: translateY(0.1875rem);
    filter: brightness(0.97);
}/* ==========================================================================
   SUBPAGE HERO  Eshared hero for company/news/etc.
   Structure:
   .subHero
     .subHeroVideo
     .subHeroChar
     .subHeroText
       .subHeroKicker
       .subHeroDivider
       .subHeroTitle
   ========================================================================== */

.subHero {
    position: relative;

    width: 100%;
    height: 28rem;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

 
    overflow: hidden;
}

/* Remove any accidental top white gap from previous section/cascade */
.siteHeader + main#top,
.siteHeader + main#top .heroTop:first-child,
main#top,
main#top > .heroTop:first-child,
.siteHeader + main .subHero:first-child,
main > .subHero:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Video background */
.subHero .subHeroVideo {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
margin-top: 0;
    pointer-events: none;
    filter: saturate(1.02) contrast(1.03);
}

/* Cyan water overlay  Ethis is what was missing */
.subHero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(0, 186, 201, 0.58) 0%,
            rgba(0, 186, 201, 0.5) 48%,
            rgba(0, 186, 201, 0.56) 100%
        );

    pointer-events: none;
}

/* Slight soft highlight behind title */
.subHero::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;

    width: 38rem;
    height: 16rem;

    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.08) 38%,
        rgba(255, 255, 255, 0) 72%
    );

    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Character */
.subHero .subHeroChar {
    position: absolute;
  left: 10.5%;
    top: 50%;
    z-index: 3;

    width: auto;
    height: 74%;
    max-width: 22rem;

    transform: translateY(-50%);
    pointer-events: none;
}

/* Center title */
.subHero .subHeroText {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;

    color: #ffffff;
    text-align: center;
}

.subHero .subHeroKicker {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
}

.subHero .subHeroDivider {
    display: block;

    width: 3.3rem;
    height: 0.22rem;

    background: #ffffff;
    border-radius: 0.125rem;
    opacity: 0.78;
}

.subHero .subHeroTitle {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 4.35rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.07em;

    text-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.22);
}


/* ==========================================================================
   COMPANY PAGE  Esubhero specifics
   ========================================================================== */

#about .subHeroCompany .subHeroChar {
    right: 13.25%;
    height: 76%;
    max-width: 21rem;
}

#about .subHeroCompany .subHeroTitle {
    letter-spacing: 0.06em;
}


/* ==========================================================================
   NEWS PAGE  Esubhero specifics
   ========================================================================== */

#newsTop .subHeroNews .subHeroChar {
    right: 13.6%;
    height: 73%;
    max-width: 22rem;
}

#newsTop .subHeroNews .subHeroTitle {
    letter-spacing: 0.08em;
}
/* ==========================================================================
   COMPANY PAGE  Eshared section title
   Used inside:
   #philosophyS, #greetingS, #profileS, #officersS,
   #historyS, #subsidiesS, #groupCompaniesS, #certificationsS, #downloadS
   ========================================================================== */

#about .secTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;

    margin: 0 auto 4.2rem;
    padding: 0;

    text-align: center;
}

#about .secKicker {
    margin: 0;
    padding: 0;

    color: var(--color-cyan);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
}

#about .secDivider {
    display: block;

    width: 3.25rem;
    height: 0.22rem;

    background: var(--color-cyan);
    border-radius: 0.125rem;
}

#about .secHeading {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.04em;
}



/* ==========================================================================
   COMPANY PAGE  Ephilosophy
   Structure:
   #philosophyS
     .secTitle
     .philosophyCards
       .philosophyCard
   ========================================================================== */

#philosophyS {
    width: 100%;
    margin: 0;
    padding: 5.1rem 2rem 6.1rem;
    box-sizing: border-box;

    background: #ffffff;
    overflow: hidden;
}

#philosophyS .philosophyCards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;

    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0;
}

#philosophyS .philosophyCard {
    min-height: 12.25rem;
    margin: 0;
    padding: 3.1rem 2rem 2.7rem;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    border-radius: 1.375rem;
    box-shadow: 0 1.25rem 3rem rgba(19, 47, 69, 0.08);

    text-align: center;
}

#philosophyS .philosophyCardCyan {
    background: var(--color-cyan);
    color: #ffffff;
}

#philosophyS .philosophyCardYellow {
    background: var(--color-yellow);
    color: var(--color-heading-dark);
}

#philosophyS .philosophyCardEn {
    margin: 0;
    padding: 0;

    color: inherit;
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.14em;
    opacity: 0.95;
}

#philosophyS .philosophyCardKana {
    margin: 0;
    padding: 0;

    color: inherit;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    opacity: 0.95;
}

#philosophyS .philosophyCardTitle {
    margin: 0.15rem 0 0;
    padding: 0;

    color: inherit;
    font-family: var(--font-sans);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0.03em;
}


/* ==========================================================================
   COMPANY PAGE  Egreeting
   Structure:
   #greetingS
     .secTitle
     .greetingBody
       .greetingByline
       .greetingText
   ========================================================================== */

#greetingS {
    width: 100%;
    margin: 0;
    padding: 5.2rem 2rem 5.9rem;
    box-sizing: border-box;

    background: #1c2e3a;
    color: #ffffff;
    overflow: hidden;
}

#greetingS .secTitle {
    margin-bottom: 4rem;
}

#greetingS .secKicker {
    color: var(--color-yellow);
}

#greetingS .secDivider {
    background: var(--color-yellow);
}

#greetingS .secHeading {
    color: #ffffff;
}

#greetingS .greetingBody {
    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
    padding: 3rem 3.25rem 3rem;
    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.035);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
    border-radius: 1.375rem;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.12);
}

#greetingS .greetingByline {
    margin: 0 0 1.6rem;
    padding: 0;

    color: var(--color-yellow);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

#greetingS .greetingText {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 2.15;
    letter-spacing: 0.045em;
}

#greetingS .greetingText p {
    margin: 0 0 1.65rem;
    padding: 0;
}

#greetingS .greetingText p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   COMPANY PAGE  Eprofile
   Structure:
   #profileS
     .profileWatermark
     .secTitle
     .profileList
       .profileRow
     .profileNote
   ========================================================================== */

#profileS {
    position: relative;

    width: 100%;
    margin: 0;
    padding: 5rem 2rem 11.2rem;
    box-sizing: border-box;

    background: #ffffff;
    overflow: hidden;
}

#profileS::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.0625rem;
    z-index: 1;

    width: 100%;
    height: 6.7rem;

    background: url("../img/top/Vector25.png") no-repeat center bottom / 100% 100%;
    pointer-events: none;
}

#profileS .profileWatermark {
    position: absolute;
    right: 1.5rem;
    top: 3rem;
    z-index: 1;

    width: 26rem;
    max-width: 35vw;
    height: auto;

    opacity: 0.08;
    pointer-events: none;
}

#profileS .secTitle,
#profileS .profileList,
#profileS .profileNote {
    position: relative;
    z-index: 2;
}

#profileS .profileList {
    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;

    background: #ffffff;
    border: 0.0625rem solid rgba(51, 120, 134, 0.12);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1.25rem 3rem rgba(19, 47, 69, 0.06);
}

#profileS .profileRow {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: center;
    gap: 2rem;

    min-height: 4.4rem;
    margin: 0;
    padding: 1.15rem 2rem;
    box-sizing: border-box;

    background: #ffffff;
}

#profileS .profileRow:nth-child(odd) {
    background: #f6f6f6;
}

#profileS .profileLabel {
    margin: 0;
    padding: 0;

    color: var(--color-cyan);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

#profileS .profileValue {
    margin: 0;
    padding: 0;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

#profileS .profileNote {
    width: 100%;
    max-width: 74rem;
    margin: 1.6rem auto 0;
    padding: 1.15rem 1.4rem 1.15rem 2.3rem;
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;
    gap: 1rem;

    background: #f8fdff;
    border: 0.0625rem solid rgba(0, 186, 201, 0.22);
    border-radius: 0.85rem;
    box-shadow: 0 0.85rem 2rem rgba(19, 47, 69, 0.04);
}

#profileS .profileNoteAccent {
    display: block;
    flex: 0 0 auto;

    width: 0.25rem;
    min-height: 3.8rem;

    background: var(--color-cyan);
    border-radius: 999px;
}

#profileS .profileNote p {
    margin: 0;
    padding: 0;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   COMPANY PAGE  Eofficers
   Structure:
   #officersS
     .secTitle
     .officersGrid
       .officerCard
   ========================================================================== */

#officersS {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 5rem 2rem 5.9rem;
    box-sizing: border-box;

    background: var(--color-yellow);
    overflow: hidden;
}

#officersS::before,
#officersS::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}

#officersS::before {
    top: -0.0625rem;
    height: 6.7rem;
    background-image: url("../img/top/Vector25.png");
}

#officersS::after {
    bottom: -0.0625rem;
    height: 7.2rem;
    background-image: url("../img/top/Vector26.png");
}

#officersS .secTitle,
#officersS .officersGrid {
    position: relative;
    z-index: 2;
}

#officersS .officersGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.45rem 1.55rem;

    width: 100%;
    max-width: 54rem;
    margin: 0 auto;
    padding: 0;
}

#officersS .officerCard {
    position: relative;

    min-height: 9.8rem;
    margin: 0;
    padding: 2.35rem 2rem 2rem 2.75rem;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(19, 47, 69, 0.07);
}

#officersS .officerCard:last-child {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
}

#officersS .officerAccent {
    position: absolute;
    left: 1.6rem;
    top: 2.35rem;

    width: 0.22rem;
    height: 2.25rem;

    background: var(--color-cyan);
    border-radius: 999px;
}

#officersS .officerRole {
    margin: 0 0 0.4rem;
    padding: 0;

    color: var(--color-cyan);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

#officersS .officerName {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.05em;
}


/* ==========================================================================
   COMPANY PAGE  Ehistory
   Structure:
   #historyS
     .secTitle
     .historyColumns
       .historyColumn
         .historyItem
   ========================================================================== */

#historyS {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 11.1rem 2rem 5.8rem;
    box-sizing: border-box;

    background: #f7f7f7;
    overflow: hidden;
}

#historyS::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.0625rem;
    z-index: 1;

    width: 100%;
    height: 7.2rem;

    background: url("../img/top/Vector26.png") no-repeat center top / 100% 100%;
    pointer-events: none;
}

#historyS .secTitle,
#historyS .historyColumns {
    position: relative;
    z-index: 2;
}

#historyS .historyColumns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;

    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
    padding: 0;
}

#historyS .historyColumn {
    margin: 0;
    padding: 0;
    list-style: none;
}

#historyS .historyItem {
    position: relative;

    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1.1rem;

    margin: 0;
    padding: 0.15rem 0 1.25rem 1.45rem;
    box-sizing: border-box;
}

#historyS .historyItem::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.45rem;

    width: 0.5rem;
    height: 0.5rem;

    background: var(--color-cyan);
    border-radius: 50%;
}

#historyS .historyItem::after {
    content: "";
    position: absolute;
    left: 0.52rem;
    top: 1rem;
    bottom: 0;

    width: 0.0625rem;

    background: rgba(0, 186, 201, 0.25);
}

#historyS .historyItem:last-child::after {
    display: none;
}

#historyS .historyYear {
    color: var(--color-cyan);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

#historyS .historyText {
    margin: 0;
    padding: 0;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   COMPANY PAGE  Esubsidies
   Structure:
   #subsidiesS
     .secTitle
     .subsidiesTable
   ========================================================================== */

#subsidiesS {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 5.1rem 2rem 11rem;
    box-sizing: border-box;

    background: #ffffff;
    overflow: hidden;
}

#subsidiesS::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.0625rem;
    z-index: 1;

    width: 100%;
    height: 6.2rem;

    background: url("../img/top/Vector30.png") no-repeat center bottom / 100% 100%;
    pointer-events: none;
}

#subsidiesS .secTitle,
#subsidiesS .subsidiesTable {
    position: relative;
    z-index: 2;
}

#subsidiesS .subsidiesTable {
    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
    padding: 0;

    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.85rem 2rem rgba(19, 47, 69, 0.04);
}

#subsidiesS .subsidiesHead,
#subsidiesS .subsidiesRow {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) 12rem;
    align-items: center;
    gap: 1.2rem;

    margin: 0;
    padding: 0.85rem 1.25rem;
    box-sizing: border-box;

    font-family: var(--font-sans);
}

#subsidiesS .subsidiesHead {
    background: var(--color-cyan);
    color: #ffffff;

    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.03em;
}

#subsidiesS .subsidiesRow {
    min-height: 3rem;

    background: #ffffff;
    color: #333333;

    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.02em;
}

#subsidiesS .subsidiesRow:nth-child(odd) {
    background: #f7f7f7;
}

#subsidiesS .subsidiesCellYear {
    color: var(--color-cyan);
    font-weight: 900;
}

#subsidiesS .subsidiesHead .subsidiesCellYear {
    color: #ffffff;
}

#subsidiesS .subsidiesCellName,
#subsidiesS .subsidiesCellOrg {
    min-width: 0;
}


/* ==========================================================================
   COMPANY PAGE  Egroup companies
   Structure:
   #groupCompaniesS
     .secTitle
     .groupCompaniesCards
       .groupCompanyCard
   ========================================================================== */

#groupCompaniesS {
    position: relative;

    width: 100%;
    margin: 0;
    padding: 5rem 2rem 5.5rem;
    box-sizing: border-box;

    background: var(--color-cyan);
    color: #ffffff;

    overflow: hidden;
}

#groupCompaniesS::before,
#groupCompaniesS::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 1;

    width: 100%;
    height: 5rem;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    pointer-events: none;
}

#groupCompaniesS::before {
    top: -0.0625rem;
    background-image: url("../img/top/Vector32.png");
}

#groupCompaniesS::after {
    bottom: -0.0625rem;
    background-image: url("../img/top/Vector30.png");
}

#groupCompaniesS .secTitle,
#groupCompaniesS .groupCompaniesCards {
    position: relative;
    z-index: 2;
}

#groupCompaniesS .secKicker,
#groupCompaniesS .secHeading {
    color: #ffffff;
}

#groupCompaniesS .secDivider {
    background: var(--color-yellow);
}

#groupCompaniesS .groupCompaniesCards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;

    width: 100%;
    max-width: 54rem;
    margin: 0 auto;
    padding: 0;
}

#groupCompaniesS .groupCompanyCard {
    position: relative;

    min-height: 9.5rem;
    margin: 0;
    padding: 1.65rem 1.75rem 1.55rem 2rem;
    box-sizing: border-box;

    background: #ffffff;
    color: var(--color-heading-dark);
    border-radius: 0.75rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08);
}

#groupCompaniesS .groupCompanyAccent {
    position: absolute;
    left: 1rem;
    top: 1.65rem;

    width: 0.25rem;
    height: 2.6rem;

    background: var(--color-yellow);
    border-radius: 999px;
}

#groupCompaniesS .groupCompanyName {
    margin: 0 0 0.45rem;
    padding: 0 0 0 0.85rem;

    color: var(--color-cyan);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.4;
}

#groupCompaniesS .groupCompanyYear {
    margin: 0 0 0.6rem;
    padding: 0 0 0 0.85rem;

    color: #666666;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
}

#groupCompaniesS .groupCompanyDesc {
    margin: 0;
    padding: 0 0 0 0.85rem;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.75;
}


/* ==========================================================================
   COMPANY PAGE  Ecertifications
   Structure:
   #certificationsS
     .secTitle
     .certificationsGrid
       .certCard
   ========================================================================== */

#certificationsS {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 10.8rem 2rem 5.1rem;
    box-sizing: border-box;

    background: #ffffff;
    overflow: hidden;
}

#certificationsS::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.0625rem;
    z-index: 1;

    width: 100%;
    height: 6.2rem;

    background: url("../img/top/Vector32.png") no-repeat center top / 100% 100%;
    pointer-events: none;
}

#certificationsS .secTitle,
#certificationsS .certificationsGrid {
    position: relative;
    z-index: 2;
}

#certificationsS .certificationsGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.8rem;

    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0;
}

#certificationsS .certCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    min-height: 8rem;
    margin: 0;
    padding: 1.2rem 1rem;
    box-sizing: border-box;

    background: #ffffff;
    border-radius: 0.75rem;
    color: var(--color-text);
    text-align: center;
    text-decoration: none;

    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

#certificationsS .certCard:hover {
    transform: translateY(-0.1875rem);
    box-shadow: 0 1rem 2rem rgba(19, 47, 69, 0.08);
}

#certificationsS .certLogo {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 3.8rem;
    margin: 0 0 0.75rem;
}

#certificationsS .certLogo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#certificationsS .certCaption {
    margin: 0;
    padding: 0;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.6;
}


/* ==========================================================================
   COMPANY PAGE  Edownload
   Structure:
   #downloadS
     .downloadDecor
     .secTitle
     .downloadBtn
   ========================================================================== */

#downloadS {
    position: relative;

    width: 100%;
    margin: 0;
    padding: 4.35rem 2rem 4.7rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f3f3f3;
    overflow: hidden;
        padding-top: 2vw;
}

#downloadS .downloadDecor {
    position: absolute;
    left: calc(40% - 17.5rem);
    bottom: 1.65rem;
    z-index: 1;

    width: 10rem;
    height: auto;

    pointer-events: none;
}

#downloadS .secTitle,
#downloadS .downloadBtn {
    position: relative;
    z-index: 2;
}

#downloadS .secTitle {
    width: min(40rem, 100%);
    margin: 0 auto 2rem;
}

#downloadS .downloadBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    width: 21.5rem;
    height: 3.55rem;
    margin: 0 auto;
    padding: 0 1.9rem;
    box-sizing: border-box;

    background: var(--color-cyan);
    color: #ffffff;
    border-radius: 0.35rem;

    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 0.6rem 1.35rem rgba(0, 186, 201, 0.22);

    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        filter 0.2s var(--ease);
}

#downloadS .downloadBtn:hover {
    transform: translateY(0.125rem);
    filter: brightness(1.03);
    box-shadow: 0 0.3rem 0.7rem rgba(0, 186, 201, 0.2);
}

#downloadS .downloadBtn:active {
    transform: translateY(0.1875rem);
    box-shadow: 0 0.15rem 0.4rem rgba(0, 186, 201, 0.18);
}

#downloadS .downloadBtnArrow,
#downloadS .downloadBtnLabel {
    display: inline-block;
}
/* ==========================================================================
   Reusable modifier  Eleft-aligned variant of .secTitle
   ========================================================================== */

.secTitleLeft {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}


/* ==========================================================================
   PRODUCT PAGE  Ehero character shift (right side)
   ========================================================================== */

.subHero.subHeroProducts .subHeroChar {
    left: auto;
    right: 20%;
    transform: translate(50%, -50%);
}

/* ==========================================================================
   PRODUCT PAGE  Eshared section title
   Structure:
   #services
     .secTitle
       .secKicker
       .secDivider
       .secHeading
   ========================================================================== */

#services .secTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;

    margin: 0 auto 3.8rem;
    padding: 0;

    text-align: center;
}

#services .secTitleLeft {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

#services .secKicker {
    margin: 0;
    padding: 0;

    color: var(--color-cyan);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
}

#services .secDivider {
    display: block;

    width: 3.25rem;
    height: 0.22rem;

    background: var(--color-cyan);
    border-radius: 0.125rem;
}

#services .secHeading {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   PRODUCT PAGE  Eshared section title
   ========================================================================== */

#services .secTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;

    margin: 0 auto 2.5rem;
    padding: 0;

    text-align: center;
}

#services .secTitleLeft {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

#services .secKicker {
    margin: 0;
    padding: 0;

    color: var(--color-cyan);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
}

#services .secDivider {
    display: block;

    width: 3.25rem;
    height: 0.22rem;

    background: var(--color-cyan);
    border-radius: 0.125rem;
}

#services .secHeading {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 2.15rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.04em;
}


/* ==========================================================================
   PRODUCT PAGE  Eintro
   Structure:
   #introS.introSection
     .secTitle
     .introLead
   ========================================================================== */

#introS {
    width: 100%;
    margin: 0;
    padding: 4.8rem 2rem 4.5rem;
    box-sizing: border-box;

    background: #ffffff;
    overflow: hidden;
}

#introS .secTitle {
    width: 100%;
    max-width: 86rem;
    margin: 0 auto 2.8rem;
}

#introS .introLead {
    width: 100%;
    max-width: 86rem;
    margin: 0 auto;
    padding: 0;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   PRODUCT PAGE  Ecategories
   Structure:
   #categoriesS.categoriesSection
     .secTitle
     .categoriesGrid
       .catCard
         .catCardBar
         .catCardImg
         .catCardName
         .catCardCount
   ========================================================================== */

#categoriesS {
    width: 100%;
    margin: 0;
    padding: 4.6rem 2rem 6.2rem;
    box-sizing: border-box;

    background: #f7fbfc;
    overflow: hidden;
}

#categoriesS .secTitle {
    width: 100%;
    max-width: 86rem;
    margin: 0 auto 3.2rem;
}

#categoriesS .categoriesGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.55rem 1.65rem;

    width: 100%;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0;
}

#categoriesS .catCard {
    position: relative;

    min-height: 17.1rem;
    margin: 0;
    padding: 2.15rem 1.25rem 1.55rem;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    background: #ffffff;
    border: 0.0625rem solid rgba(51, 120, 134, 0.12);
    border-radius: 0.25rem;
    color: var(--color-heading-dark);
    text-align: center;
    text-decoration: none;

    box-shadow: 0 1.1rem 2.4rem rgba(19, 47, 69, 0.04);
    overflow: hidden;

    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        border-color 0.2s var(--ease);
}

#categoriesS .catCard:hover {
    transform: translateY(-0.2rem);
    border-color: rgba(0, 186, 201, 0.35);
    box-shadow: 0 1.35rem 2.7rem rgba(19, 47, 69, 0.08);
}

#categoriesS .catCardBar {
    position: absolute;
    left: 0;
    top: 0;

    display: block;
    width: 100%;
    height: 0.25rem;

    background: var(--color-cyan);
}

#categoriesS .catCardImg {
    width: 9.3rem;
    height: 9.3rem;
    margin: 0 0 1.25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;
}

#categoriesS .catCardImg img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: 50%;
}

#categoriesS .catCardName {
    margin: 0 0 0.45rem;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

#categoriesS .catCardCount {
    margin: 0;
    padding: 0;

    color: #9a9a9a;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
}


/* ==========================================================================
   PRODUCT PAGE  Eall products
   Structure:
   #productsS.productsSection
     .secTitle
     .prodCat
       .prodCatImg
       .prodCatBody
         .prodCatKicker
         .prodCatDivider
         .prodCatHeading
         .prodCatDesc
         .prodList
   ========================================================================== */

#productsS {
    width: 100%;
    margin: 0;
    padding: 5rem 2rem 0;
    box-sizing: border-box;

    background: #ffffff;
    overflow: hidden;
}

#productsS > .secTitle {
    width: 100%;
    max-width: 92rem;
    margin: 0 auto 4.8rem;
}

#productsS .prodCat {
    width: calc(100% + 4rem);
    margin: 0 -2rem;
    padding: 5rem 2rem;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: minmax(16rem, 26rem) minmax(0, 34rem);
    align-items: center;
    justify-content: center;
    gap: 7rem;

    background: #ffffff;
}

#productsS .prodCat:nth-of-type(even) {
    background: #f6f6f6;
}

#productsS .prodCatImgRight {
    grid-template-columns: minmax(0, 34rem) minmax(16rem, 26rem);
}

#productsS .prodCatImgLeft .prodCatImg {
    order: 1;
}

#productsS .prodCatImgLeft .prodCatBody {
    order: 2;
}

#productsS .prodCatImgRight .prodCatImg {
    order: 2;
}

#productsS .prodCatImgRight .prodCatBody {
    order: 1;
}

#productsS .prodCatImg {
    width: 26rem;
    height: 26rem;
    max-width: 100%;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;
}

#productsS .prodCatImg img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: 50%;
}

#productsS .prodCatBody {
    width: 100%;
    max-width: 34rem;
    margin: 0;
    padding: 0;
}

#productsS .prodCatKicker {
    margin: 0;
    padding: 0;

    color: var(--color-cyan);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
}

#productsS .prodCatDivider {
    display: block;

    width: 2.8rem;
    height: 0.18rem;
    margin: 0.55rem 0 0.8rem;

    background: var(--color-cyan);
    border-radius: 0.125rem;
}

#productsS .prodCatHeading {
    margin: 0 0 0.55rem;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0.03em;
}

#productsS .prodCatDesc {
    margin: 0 0 1.2rem;
    padding: 0;

    color: #555555;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.75;
}

#productsS .prodList {
    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
}

#productsS .prodRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    min-height: 2.45rem;
    margin: 0;
    padding: 0.55rem 0;
    box-sizing: border-box;

    border-bottom: 0.0625rem solid #d9d9d9;
}

#productsS .prodName {
    min-width: 0;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
}

#productsS .prodLink {
    flex: 0 0 auto;

    color: var(--color-cyan);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        color 0.2s var(--ease),
        transform 0.2s var(--ease);
}

#productsS .prodLink:hover {
    color: var(--color-cyan-mid);
    transform: translateX(0.125rem);
}


/* ==========================================================================
   PRODUCT PAGE  Eservice cards
   Structure:
   #productServicesS.productServicesSection
     .secTitle
     .pServicesRow
       .pServiceCard
   ========================================================================== */

#productServicesS {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 5.5rem 2rem 10.8rem;
    box-sizing: border-box;

    background: #ffffff;
    overflow: hidden;
}

#productServicesS::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.0625rem;
    z-index: 1;

    width: 100%;
    height: 6.2rem;

    background: url("../img/top/Vector30.png") no-repeat center bottom / 100% 100%;
    pointer-events: none;
}

#productServicesS .secTitle,
#productServicesS .pServicesRow {
    position: relative;
    z-index: 2;
}

#productServicesS .secTitle {
    width: 100%;
    max-width: 92rem;
    margin: 0 auto 5.1rem;
}

#productServicesS .pServicesRow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;

    width: 100%;
    max-width: 66rem;
    margin: 0 auto;
    padding: 0;
}

#productServicesS .pServiceCard {
    min-height: 16.5rem;
    margin: 0;
    padding: 2.4rem 2rem;
    box-sizing: border-box;

    background: #ffffff;
    border: 0.0625rem solid rgba(51, 120, 134, 0.16);
    border-radius: 1rem;
    box-shadow: 0 1rem 2.4rem rgba(19, 47, 69, 0.05);
}

#productServicesS .pServiceCard:nth-child(4) {
    grid-column: 1 / -1;
    min-height: 11rem;
}

#productServicesS .pServiceNumber {
    display: block;

    margin: 0 0 0.55rem;

    color: var(--color-cyan);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
}

#productServicesS .pServiceDivider {
    display: block;

    width: 1.8rem;
    height: 0.16rem;
    margin: 0 0 1.25rem;

    background: var(--color-cyan);
    border-radius: 0.125rem;
}

#productServicesS .pServiceName {
    margin: 0 0 1.1rem;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0.03em;
}

#productServicesS .pServiceDesc {
    margin: 0;
    padding: 0;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.02em;
}
/* ==========================================================================
   SHARED INQUIRY CTA  Erendered by poracon_inquiry_cta() via footer.
   Skipped on front page and company page.
   ========================================================================== */

#inquiryCtaS {
    width: 100%;
    padding: 4rem 2rem 5rem;
    background: var(--color-cyan);
}

#inquiryCtaS .inquiryCtaInner {
    max-width: 36rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

#inquiryCtaS .inquiryCtaHeading {
    margin: 0;
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

#inquiryCtaS .inquiryCtaDesc {
    margin: 0 0 1.5rem;
    color: #ffffff;
    font-size: 0.8125rem;
    line-height: 1.75;
    opacity: 0.95;
}

#inquiryCtaS .inquiryCtaButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

#inquiryCtaS .inquiryCtaBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0 2rem;
    width: 13.75rem;
    height: 3.25rem;
    border-radius: 1.625rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.18);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease), background 0.2s var(--ease);
}

#inquiryCtaS .inquiryCtaBtnPrimary {
    background: #ffffff;
    color: var(--color-cyan);
}

#inquiryCtaS .inquiryCtaBtnSecondary {
    background: transparent;
    color: #ffffff;
    border: 0.125rem solid #ffffff;
    box-shadow: none;
}

#inquiryCtaS .inquiryCtaBtn:hover {
    transform: translateY(-0.125rem);
    filter: brightness(1.06);
    box-shadow: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.22);
}

#inquiryCtaS .inquiryCtaBtnSecondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

#inquiryCtaS .inquiryCtaBtn:active {
    transform: translateY(0);
}


/* ==========================================================================
   CONSTRUCTION EXAMPLE PAGE  E2ÁE case cards with category badge
   ========================================================================== */

#casesS {
    width: 100%;
    padding: 4rem 2rem 5rem;
    background: #ffffff;
}

#casesS .casesGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 100rem;
    margin: 0 auto;
    justify-content: center;
}

#casesS .caseCard {
    flex: 1 1 40%;
    min-width: 22rem;
    max-width: 46.875rem;
    background: #ffffff;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

#casesS .caseCardMedia {
    position: relative;
    aspect-ratio: 750 / 280;
    overflow: hidden;
    border-bottom: 0.125rem solid rgba(0, 186, 201, 0.4);
}

#casesS .caseCardMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#casesS .caseBadge {
    position: absolute;
    top: 1.125rem;
    left: 1.125rem;
    padding: 0.4375rem 1rem;
    border-radius: 1.25rem;
    background: var(--color-cyan);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 700;
    min-width: 6rem;
    text-align: center;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
}

#casesS .caseCardBody {
    padding: 1.5rem 2.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

#casesS .caseAccent {
    display: block;
    width: 2.5rem;
    height: 0.1875rem;
    background: var(--color-cyan);
    border-radius: 0.0625rem;
    margin: 0.125rem 0 0.375rem;
}

#casesS .caseTitle {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
}

#casesS .caseSubtitle {
    margin: 0;
    color: #808080;
    font-size: 0.9375rem;
    font-weight: 400;
}

#casesS .caseCta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    align-self: flex-end;
    margin-top: auto;
    padding: 0.6875rem 2rem;
    min-width: 13.5rem;
    background: var(--color-cyan);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 1.375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 102, 115, 0.25);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}

#casesS .caseCta:hover {
    transform: translateY(-0.125rem);
    filter: brightness(1.08);
    box-shadow: 0 0.5rem 1.125rem rgba(0, 102, 115, 0.35);
}

#casesS .caseCta:active { transform: translateY(0); }

/* Per-category badge + accent colours (modifier classes) */
#casesS .caseCardPark .caseBadge,
#casesS .caseCardPark .caseAccent    { background: var(--color-cyan); }

#casesS .caseCardRoad .caseBadge,
#casesS .caseCardRoad .caseAccent    { background: var(--color-cyan-mid); }

#casesS .caseCardPort .caseBadge,
#casesS .caseCardPort .caseAccent    { background: var(--color-cat-port); }

#casesS .caseCardPrivate .caseBadge,
#casesS .caseCardPrivate .caseAccent { background: var(--color-cat-private); }


/* ==========================================================================
   CASE DETAIL subpages (example_muroran / _bihoro / _otsu / _sapporo)
   ========================================================================== */

/* Hero character  Eright-stance variant shifts to right edge */
.subHero.subHeroExampleDetail .subHeroChar[src*="Right"] {
    left: auto;
    right: 15%;
    transform: translate(50%, -50%);
}

/* Case head  Ebadge + title + subtitle + accent */
#caseHeadS {
    width: 100%;
    padding: 2.5rem 2rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

#caseHeadS .caseHeadBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    min-width: 12rem;
    background: var(--color-cyan);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 1.25rem;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
}

#caseHeadS .caseHeadTitle {
    margin: 0.5rem 0 0;
    color: var(--color-heading-dark);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

#caseHeadS .caseHeadSubtitle {
    margin: 0;
    color: var(--color-kana-muted);
    font-size: 1rem;
    font-weight: 400;
}

#caseHeadS .caseHeadAccent {
    display: block;
    width: 3.75rem;
    height: 0.25rem;
    background: var(--color-cyan);
    border-radius: 0.125rem;
    margin-top: 0.5rem;
}

/* Gallery  Eflex wrap, 4-col on desktop */
#caseGalleryS {
    width: 100%;
    padding: 3.75rem 2rem;
    background: #f7f7f7;
}

#caseGalleryS .caseGalleryGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    max-width: 100rem;
    margin: 0 auto;
    justify-content: flex-start;
}

#caseGalleryS .caseGalleryItem {
    flex: 1 1 22%;
    min-width: 15rem;
    max-width: 23.75rem;
    margin: 0;
    aspect-ratio: 380 / 280;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #e8e8e8;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.06);
}

#caseGalleryS .caseGalleryItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Used product section */
#caseProductS {
    width: 100%;
    padding: 3.75rem 2rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

#caseProductS .caseProductPill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2rem;
    min-width: 21.25rem;
    background: #d6c302;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 2.5rem;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.12);
}

#caseProductS .caseProductCard {
    width: min(100%, 47.5rem);
    padding: 2.25rem;
    background: #ffffff;
    border: 0.1875rem solid #e6e6e6;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.04);
}

/* Wide variant  Efor bihoro's 2-image product card */
#caseProductS .caseProductCardWide {
    width: min(100%, 56.25rem);
}

#caseProductS .caseProductImages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-height: 15rem;
}

#caseProductS .caseProductImages img {
    flex: 1 1 15rem;
    max-width: 100%;
    max-height: 15rem;
    object-fit: contain;
    border-radius: 0.75rem;
    display: block;
}

#caseProductS .caseProductBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    min-width: 15rem;
    background: var(--color-cyan);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 1.875rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 102, 115, 0.25);
    transition: transform 0.2s var(--ease), filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

#caseProductS .caseProductBtn:hover {
    transform: translateY(-0.125rem);
    filter: brightness(1.08);
    box-shadow: 0 0.5rem 1.125rem rgba(0, 102, 115, 0.35);
}

#caseProductS .caseProductBtn:active { transform: translateY(0); }

#caseProductS .caseProductBtnArrow {
    font-size: 1rem;
    font-weight: 900;
}

/* Bottom nav  Eback to list + next case */
#caseBottomnavS {
    width: 100%;
    padding: 2.5rem 2rem;
    background: #f7f7f7;
}

#caseBottomnavS .caseBottomnavInner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    max-width: 80rem;
    margin: 0 auto;
}

#caseBottomnavS .caseBottomBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    flex: 0 1 22.5rem;
    padding: 1.25rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 2.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
    transition: transform 0.2s var(--ease), filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

#caseBottomnavS .caseBottomBtnBack {
    background: #ffffff;
    color: var(--color-cyan);
    border: 0.125rem solid var(--color-cyan);
}

#caseBottomnavS .caseBottomBtnNext {
    background: var(--color-cyan);
    color: #ffffff;
}

#caseBottomnavS .caseBottomBtn:hover {
    transform: translateY(-0.125rem);
    filter: brightness(1.06);
    box-shadow: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.15);
}

#caseBottomnavS .caseBottomBtn:active { transform: translateY(0); }

#caseBottomnavS .caseBottomBtnArrow {
    font-size: 0.9375rem;
    font-weight: 900;
}

/* ==========================================================================
   NEWS TOP PAGE  Esub hero
   Structure from page-news_top.php:
   #newsTop
     .subHero.subHeroNews
       .subHeroVideo
       .subHeroChar
       .subHeroText
         .subHeroKicker
         .subHeroDivider
         .subHeroTitle
   ========================================================================== */

#newsTop .subHero.subHeroNews {
    position: relative;
    width: 100%;
    height: 28rem;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #3fc5c9;
    overflow: hidden;
}

#newsTop .subHero.subHeroNews .subHeroVideo {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    pointer-events: none;
}

#newsTop .subHero.subHeroNews::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background: rgba(0, 186, 201, 0.58);

    pointer-events: none;
}

#newsTop .subHero.subHeroNews .subHeroChar {
    position: absolute;
    right: 13.6%;
    top: 50%;
    z-index: 3;

    width: auto;
    height: 73%;
    max-width: 22rem;

    transform: translateY(-50%);
    pointer-events: none;
}

#newsTop .subHero.subHeroNews .subHeroText {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;

    color: #ffffff;
    text-align: center;
}

#newsTop .subHero.subHeroNews .subHeroKicker {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
}

#newsTop .subHero.subHeroNews .subHeroDivider {
    display: block;

    width: 3.3rem;
    height: 0.22rem;

    background: #ffffff;
    border-radius: 0.125rem;
    opacity: 0.78;
}

#newsTop .subHero.subHeroNews .subHeroTitle {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 4.35rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.08em;

    text-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.18);
}


/* ==========================================================================
   NEWS TOP PAGE  Ebreadcrumbs
   Keep scoped so other subpages are not accidentally changed.
   ========================================================================== */

#newsTop + .breadcrumbs,
body .breadcrumbs {
    width: 100%;
    margin: 0;
    background: #ffffff;
    border-bottom: 0.0625rem solid #e8e8e8;
}
/* ==========================================================================
   BREADCRUMBS  Eleft aligned under subhero
   ========================================================================== */

.breadcrumbs {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #ffffff;
    border-bottom: 0.0625rem solid #e8e8e8;
}

.breadcrumbs .breadcrumbsList {
    width: 100%;
    max-width: 108rem;
    min-height: 4.85rem;
    margin: 0 auto;
    padding: 0 2rem 0 clamp(3rem, 8vw, 9rem);
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;

    color: #4d4d4d;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    list-style: none;
    text-align: left;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin: 0;
    padding: 0;
}

.breadcrumbs a {
    color: #4d4d4d;
    text-decoration: none;

    transition: color 0.2s var(--ease);
}

.breadcrumbs a:hover {
    color: var(--color-cyan);
    text-decoration: underline;
}

.breadcrumbs .breadcrumbsSep {
    color: #9b9b9b;
    font-weight: 400;
}

.breadcrumbs .breadcrumbsCurrent {
    color: var(--color-text);
    font-weight: 700;
}

/* ==========================================================================
   NEWS TOP PAGE  Earticle list
   Structure:
   #newsListS.newsListSection
     .secTitle
       .secKicker
       .secDivider
       .secHeading
     .newsList
       .newsRow
         .newsRowDate
         .newsRowCategory
         .newsRowTitle
   ========================================================================== */

#newsListS {
    width: 100%;
    margin: 0;
    padding: 4.55rem 2rem 5.1rem;
    box-sizing: border-box;

    background: #ffffff;
}

/* Section title */
#newsListS > .secTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    margin: 0 auto 4.4rem;
    padding: 0;

    text-align: center;
}

#newsListS .secKicker {
    margin: 0;
    padding: 0;

    color: var(--color-cyan);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.13em;
}

#newsListS .secDivider {
    display: block;

    width: 3rem;
    height: 0.2rem;

    background: var(--color-cyan);
    border-radius: 0.125rem;
}

#newsListS .secHeading {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 2.65rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.04em;
}

/* List wrapper */
#newsListS .newsList {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* One row */
#newsListS .newsRow {
    width: 100%;
    min-height: 5.25rem;
    margin: 0;
    padding: 1.35rem 1.65rem;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 6.3rem 8.2rem minmax(0, 1fr);
    align-items: center;
    gap: 1.35rem;

    background: #f7f8f9;
    border: 0.0625rem solid rgba(51, 120, 134, 0.08);
    border-radius: 0.625rem;
    box-shadow: none;

    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        background 0.2s var(--ease);
}

#newsListS .newsRow:nth-child(even) {
    background: #f7f8f9;
}

#newsListS .newsRow:hover {
    background: #ffffff;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.625rem 1.5rem rgba(19, 47, 69, 0.08);
}

/* Date */
#newsListS .newsRowDate {
    min-width: 0;
    margin: 0;
    padding: 0;

    color: #707070;
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Category pill */
#newsListS .newsRowCategory {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 7.7rem;
    height: 2.05rem;
    margin: 0;
    padding: 0 0.75rem;
    box-sizing: border-box;

    background: var(--color-news-notice);
    color: #ffffff;
    border-radius: 0.25rem;

    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Per-category colours */
#newsListS .newsCatNotice {
    background: var(--color-news-notice);
}

#newsListS .newsCatPress {
    background: var(--color-news-press);
}

#newsListS .newsCatRecruit {
    background: var(--color-news-recruit);
}

#newsListS .newsCatAward {
    background: var(--color-news-award);
}

#newsListS .newsCatMedia {
    background: var(--color-news-media);
}

/* Title */
#newsListS .newsRowTitle {
    min-width: 0;
    margin: 0;
    padding: 0;

    color: #335878;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.55;
    text-decoration: none;

    transition:
        color 0.2s var(--ease),
        transform 0.2s var(--ease);
}

#newsListS a.newsRowTitle:hover {
    color: var(--color-cyan);
    transform: translateX(0.125rem);
}

/* Placeholder fallback rows */
#newsListS .newsRowPlaceholder {
    background: #f7f8f9;
}

#newsListS .newsRowPlaceholder:hover {
    background: #f7f8f9;
    transform: none;
    box-shadow: none;
}

#newsListS .newsRowPlaceholder .newsRowTitle {
    color: #4c6d85;
}

/* Empty message */
#newsListS .newsListEmpty {
    max-width: 42rem;
    margin: 2rem auto 0;
    padding: 0;

    color: var(--color-kana-muted);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.8;
    text-align: center;
}


/* ==========================================================================
   NEWS TOP PAGE  Eshared inquiry CTA
   Rendered after main content through footer hook.
   ========================================================================== */

#inquiryCtaS {
    position: relative;

    width: 100%;
    margin: 0;
    padding: 4.6rem 2rem 5.4rem;
    box-sizing: border-box;

    background: var(--color-cyan);
    color: #ffffff;
    overflow: hidden;
}

/* Optional bottom wave if next section starts with sky/footer visual */
#inquiryCtaS::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.0625rem;
    z-index: 1;

    width: 100%;
    height: 5.8rem;

    background-image: url("../img/top/Vector30.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;

    pointer-events: none;
}

#inquiryCtaS .inquiryCtaInner {
    position: relative;
    z-index: 2;

    max-width: 42rem;
    margin: 0 auto;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;

    text-align: center;
}

#inquiryCtaS .inquiryCtaHeading {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.03em;
}

#inquiryCtaS .inquiryCtaDesc {
    margin: 0 0 1.55rem;
    padding: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.02em;
    opacity: 0.95;
}

#inquiryCtaS .inquiryCtaButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    width: 100%;
    margin: 0;
    padding: 0;
}

#inquiryCtaS .inquiryCtaBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;

    width: 14.5rem;
    height: 3.25rem;
    margin: 0;
    padding: 0 2rem;
    box-sizing: border-box;

    border-radius: 1.75rem;

    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        filter 0.2s var(--ease),
        background 0.2s var(--ease);
}

#inquiryCtaS .inquiryCtaBtnPrimary {
    background: #ffffff;
    color: var(--color-cyan);
    border: 0.125rem solid #ffffff;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.18);
}

#inquiryCtaS .inquiryCtaBtnSecondary {
    background: transparent;
    color: #ffffff;
    border: 0.125rem solid #ffffff;
    box-shadow: none;
}

#inquiryCtaS .inquiryCtaBtn:hover {
    transform: translateY(-0.125rem);
    filter: brightness(1.06);
    box-shadow: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.22);
}

#inquiryCtaS .inquiryCtaBtnSecondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

#inquiryCtaS .inquiryCtaBtn:active {
    transform: translateY(0);
}
/* ==========================================================================
   SINGLE NEWS POST (single.php)  Earticle + share + post nav
   ========================================================================== */

/* Article body */
#articleS {
    width: 100%;
    max-width: 72rem;
    margin: 2.25rem auto 0;
    padding: 3.5rem 3rem 4rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
    border: 0.0625rem solid #e8eef1;
    border-radius: 2rem;
    box-shadow: 0 1.25rem 2.75rem rgba(53, 75, 88, 0.08);
}

#articleS .articleHeader {
    margin-bottom: 1.5rem;
}

#articleS .articleMeta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

#articleS .articleCategory {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3125rem 0.75rem;
    min-width: 7.5rem;
    height: 1.75rem;
    background: var(--color-news-notice);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 0.375rem;
    text-align: center;
    line-height: 1;
}

/* Per-category colours  Ereused from news list */
#articleS .newsCatNotice  { background: var(--color-news-notice); }
#articleS .newsCatPress   { background: var(--color-news-press); }
#articleS .newsCatRecruit { background: var(--color-news-recruit); }
#articleS .newsCatAward   { background: var(--color-news-award); }
#articleS .newsCatMedia   { background: var(--color-news-media); }

#articleS .articleDate {
    color: #808080;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

#articleS .articleTitle {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.02em;
    padding-bottom: 1.75rem;
    border-bottom: 0.0625rem solid #dfe7eb;
}

#articleS .articleEyecatch {
    width: 100%;
    margin: 2.25rem 0;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #f7f7f7;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08);
}

#articleS .articleEyecatch img {
    width: 100%;
    height: auto;
    display: block;
}

#articleS .articleEyecatchPlaceholder {
    aspect-ratio: 900 / 420;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
    font-size: 1rem;
    font-weight: 700;
}

#articleS .articleBody {
    color: var(--color-kana-muted);
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 2;
}

#articleS .articleBody p {
    margin: 0 0 1.625rem;
}

#articleS .articleBody a {
    color: var(--color-cyan);
    text-decoration: underline;
}

#articleS .articleBody h2,
#articleS .articleBody h3,
#articleS .articleBody h4 {
    color: var(--color-heading-dark);
    font-weight: 700;
    margin: 2.5rem 0 1rem;
    line-height: 1.5;
}

#articleS .articleBody h2 {
    font-size: 1.5rem;
    padding-left: 1rem;
    border-left: 0.375rem solid var(--color-cyan);
}

#articleS .articleBody h3 { font-size: 1.25rem; }
#articleS .articleBody h4 { font-size: 1.0625rem; }

#articleS .articleBody ul,
#articleS .articleBody ol {
    margin: 0 0 1.5rem 1.5rem;
    padding: 0;
}

#articleS .articleBody li {
    margin-bottom: 0.5rem;
}

#articleS .articleBody img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 1.25rem 0;
}

#articleS .articleBody blockquote {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    background: #f4fbfd;
    border-left: 0.375rem solid var(--color-cyan);
    border-radius: 1rem;
    color: var(--color-heading-dark);
}

#articleS .articleBody table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 0 0 0.0625rem #dde5e9;
}

#articleS .articleBody th,
#articleS .articleBody td {
    padding: 0.875rem 1rem;
    border: 0.0625rem solid #dde5e9;
    text-align: left;
}

#articleS .articleBody th {
    background: #f4fbfd;
    color: var(--color-heading-dark);
    font-weight: 700;
}


/* Share section */
#shareS {
    width: 100%;
    padding: 2.75rem 2rem 2.25rem;
    background: transparent;
    border: 0;
}

#shareS .shareInner {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 2.25rem;
    background: #f7fafb;
    border: 0.0625rem solid #e1eaee;
    border-radius: 1.75rem;
}

#shareS .shareLabel {
    margin: 0;
    color: var(--color-kana-muted);
    font-size: 0.8125rem;
    font-weight: 700;
}

#shareS .shareButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

#shareS .shareBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.6875rem 1.25rem;
    min-width: 10rem;
    height: 2.75rem;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
    transition: transform 0.2s var(--ease), filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

#shareS .shareBtn:hover {
    transform: translateY(-0.125rem);
    filter: brightness(1.08);
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.2);
}

#shareS .shareBtn:active { transform: translateY(0); }

#shareS .shareBtnX    { background: #000000; }
#shareS .shareBtnFb   { background: #1877f2; }
#shareS .shareBtnLine { background: #00b900; }

#shareS .shareBtnIcon {
    font-size: 0.9375rem;
    font-weight: 900;
}


/* Post navigation (prev / list / next) */
#postNavS {
    width: 100%;
    padding: 2.5rem 2rem 0;
    background: transparent;
}

#postNavS .postNavInner {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
}

#postNavS .postNavBtn {
    flex: 1 1 25rem;
    max-width: 25rem;
    padding: 1.125rem 1.375rem;
    border-radius: 1.25rem;
    text-decoration: none;
    box-shadow: 0 0.625rem 1.5rem rgba(36, 60, 72, 0.08);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}

#postNavS .postNavBtn:hover {
    transform: translateY(-0.125rem);
    filter: brightness(1.05);
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.12);
}

#postNavS .postNavBtn:active { transform: translateY(0); }

#postNavS .postNavBtnPrev,
#postNavS .postNavBtnNext {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 5rem;
    justify-content: center;
    border: 0.0625rem solid #e2e9ed;
}

#postNavS .postNavBtnNext {
    text-align: right;
}

#postNavS .postNavLabel {
    display: block;
    color: #808080;
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1;
}

#postNavS .postNavTitle {
    display: block;
    color: var(--color-heading-dark);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

#postNavS .postNavBtnList {
    background: var(--color-cyan);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    flex: 0 0 auto;
    min-width: 13.5rem;
}

#postNavS .postNavBtnEmpty {
    visibility: hidden;
}

/* ==========================================================================
   WITHWATER page  Ecycle + solution (2 pill-banner sections)
   ========================================================================== */
/* ==========================================================================
   WITHWATER PAGE  Eremove gap between header and hero
   ========================================================================== */

#withwater {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#withwater .subHeroWithwater {
    margin-top: 0 !important;
    border-top: none;
}

/* Defensive: remove accidental top spacing from first child hero */
.siteHeader + #withwater,
.siteHeader + main#withwater,
body > main#withwater {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body > main#withwater > .subHero:first-child {
    margin-top: 0 !important;
}

/* If the gap is caused by a previous generic subpage rule */
#withwater .subHero {
    margin-top: 0 !important;
}
/* Shared banner pill + card pattern */
#cycleS,
#solutionS {
    width: 100%;
    padding: 4.5rem 2rem 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    box-sizing: border-box;
}

#cycleS {
    background: linear-gradient(180deg, #ffffff 0%, #f7fdff 100%);
}

#solutionS {
    background: linear-gradient(180deg, #f7f8f9 0%, #edf8fb 100%);
}

.cycleBanner,
.solutionBanner {
    width: 100%;
    max-width: 68rem;
    padding: 1.125rem 2rem;
    background: var(--color-cyan);
    border-radius: 999px;
    text-align: center;
    box-shadow: 0 0.625rem 1.5rem rgba(32, 115, 136, 0.2);
}

.cycleBannerTitle,
.solutionBannerTitle {
    margin: 0;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* Card  Ecentered content with drop-char decoration + copy + figure */
.cycleCard,
.solutionCard {
    position: relative;
    width: 100%;
    max-width: 68rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2.75rem 2.5rem 3rem;
    background: rgba(255, 255, 255, 0.96);
    border: 0.0625rem solid #dce8ee;
    border-radius: 2rem;
    box-shadow: 0 1rem 2.5rem rgba(39, 75, 91, 0.08);
    box-sizing: border-box;
}

.cycleDecor,
.solutionDecor {
    position: absolute;
    top: 2.5rem;
   left: 2.5rem;
    width: 5.75rem;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
}

.cycleCardTitle,
.solutionCardTitle {
    margin: 0;
    color: var(--color-cyan);
    font-size: 1.875rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

.cycleCardSubtitle,
.solutionCardSubtitle {
    margin: 0;
    color: var(--color-cyan);
    font-size: 1.0625rem;
    font-weight: 400;
    text-align: center;
    line-height: 1.7;
}

.solutionCardSubtitle {
    font-weight: 700;
    font-size: 1.1875rem;
}

.cycleCardCopy,
.solutionCardCopy {
    width: 100%;
    max-width: 56rem;
    text-align: left;
    color: var(--color-kana-muted);
    font-size: 0.98rem;
    line-height: 2.05;
}

.cycleCardCopy p,
.solutionCardCopy p {
    margin: 0 0 0.625rem;
}

.cycleCardCopy p:last-child,
.solutionCardCopy p:last-child {
    margin-bottom: 0;
}

.cycleFigure,
.solutionFigure {
    width: 100%;
    max-width: 58rem;
    margin: 0.5rem 0 0;
    border-radius: 1.5rem;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f4fbfd 100%);
    border: 0.0625rem solid #dfe9ed;
    box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.7);
}

.solutionFigure {
    max-width: 100%;
    padding: 2rem;
}

.cycleFigure img,
.solutionFigure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ==========================================================================
   PERMEABILITY TEST page  Eintro + pill-banner sections
   Reusable .pillBanner / .pillCard patterns with gold variant scoped per section.
   ========================================================================== */

/* Add gold token for pill variant (used by #otherMethodsS + #otherTestsS) */
:root {
    --color-gold: #E2CD06;
}

/* Intro  Ecentered heading + underline + multi-line copy */
#permtestIntroS {
    width: 100%;
    padding: 4.25rem 2rem 3rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    text-align: center;
}

#permtestIntroS .permtestIntroTitle {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

#permtestIntroS .permtestIntroAccent {
    display: block;
    width: 3.75rem;
    height: 0.25rem;
    background: var(--color-cyan);
    border-radius: 0.125rem;
    margin: 0.5rem 0 1.25rem;
}

#permtestIntroS .permtestIntroCopy {
    max-width: 68rem;
    color: var(--color-kana-muted);
    font-size: 0.98rem;
    line-height: 2;
}

#permtestIntroS .permtestIntroCopy p {
    margin: 0 0 0.5rem;
}

#permtestIntroS .permtestIntroCopy p:last-child {
    margin-bottom: 0;
}


/* Shared pill-banner section pattern */
.pillBannerSection {
    width: 100%;
    padding: 4rem 2rem 4.25rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    box-sizing: border-box;
}

.pillBannerSection.pillBannerSectionGray {
    background: linear-gradient(180deg, #f7f8f9 0%, #f2f6f8 100%);
}

/* Pill banner  Erounded cyan by default */
.pillBanner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24rem;
    max-width: min(100%, 42rem);
    padding: 1rem 2.5rem;
    background: var(--color-cyan);
    border-radius: 999px;
    box-shadow: 0 0.625rem 1.5rem rgba(32, 115, 136, 0.2);
}

.pillBanner .pillBannerTitle {
    margin: 0;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* Gold pill variant  Escoped via section IDs (no modifier class on base) */
#otherMethodsS .pillBanner,
#otherTestsS .pillBanner {
    background: var(--color-gold);
}

/* Card  Eshared wrapper for content under the banner */
.pillCard {
    width: 100%;
    max-width: 68rem;
    padding: 2.5rem 2.75rem;
    background: rgba(255, 255, 255, 0.97);
    border: 0.0625rem solid #dfe7eb;
    border-radius: 1.75rem;
    box-shadow: 0 1rem 2.5rem rgba(39, 75, 91, 0.08);
    box-sizing: border-box;
}

.pillCard.pillCardGray {
    background: linear-gradient(180deg, #ffffff 0%, #f7fafb 100%);
}

/* Variant: image-left + text-right */
.pillCardImageText {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.pillCardImageText .pillCardMedia {
    flex: 0 0 23rem;
    aspect-ratio: 1;
    border: 0.0625rem solid #d6e0e5;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #ffffff;
    margin: 0;
    box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.7);
}

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

.pillCardImageText .pillCardBody {
    flex: 1 1 24rem;
    min-width: 0;
}

.pillCardImageText .pillCardHeading {
    margin: 0 0 1rem;
    color: var(--color-cyan);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.7;
}

.pillCardImageText .pillCardList {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 1.95;
}

.pillCardImageText .pillCardList li { margin: 0 0 0.375rem; }

/* Variant: text-only centered */
.pillCardTextOnly {
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 2;
    padding: 2.5rem 2.75rem;
}

.pillCardTextOnly p {
    margin: 0;
}

/* Variant: text at top + 3-image row below */
.pillCardTextImages {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.pillCardTextImages .pillCardCopy {
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 2;
}

.pillCardTextImages .pillCardCopy p { margin: 0 0 0.5rem; }
.pillCardTextImages .pillCardCopy p:last-child { margin: 0; }

.pillCardTextImages .pillCardImages {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.pillCardTextImages .pillCardImg {
    flex: 1 1 22%;
    min-width: 16rem;
    max-width: 22.5rem;
    aspect-ratio: 360 / 270;
    margin: 0;
    border: 0.0625rem solid #d6e0e5;
    border-radius: 1.125rem;
    overflow: hidden;
    background: #ffffff;
}

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

/* Variant: small sub-card (image left + title+text right) */
.pillSubCard {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    padding: 2rem 2.25rem;
}

.pillSubCard .pillSubMedia {
    flex: 0 0 17.5rem;
    aspect-ratio: 280 / 210;
    margin: 0;
    border: 0.0625rem solid #d6e0e5;
    border-radius: 1.125rem;
    overflow: hidden;
    background: #ffffff;
}

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

.pillSubCard .pillSubBody {
    flex: 1 1 28rem;
    min-width: 0;
}

.pillSubCard .pillSubHeading {
    margin: 0 0 0.75rem;
    color: var(--color-cyan);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.5;
}

.pillSubCard .pillSubList {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 1.95;
}

.pillSubCard .pillSubList li { margin: 0; }

.pillSubCard .pillSubCopy {
    margin: 0;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 1.95;
}

/* ==========================================================================
   METHOD page  Eintro + 8-step list + maintenance tables/boxes + inspection
   Reuses .pillBannerSection + .pillBanner from permtest.
   Promotes generic .pageIntroSection for shared intro pattern.
   ========================================================================== */

/* Reusable intro block (also used by permtest via separate #permtestIntroS rules) */
.pageIntroSection {
    width: 100%;
    padding: 4.5rem 2rem 3.25rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.pageIntroSection .pageIntroTitle {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pageIntroSection .pageIntroAccent {
    display: block;
    width: 3.75rem;
    height: 0.25rem;
    background: var(--color-cyan);
    border-radius: 0.125rem;
    margin: 0.5rem 0 1.25rem;
}

.pageIntroSection .pageIntroCopy {
    max-width: 68rem;
    color: var(--color-kana-muted);
    font-size: 0.98rem;
    line-height: 2;
}

.pageIntroSection .pageIntroCopy p { margin: 0; }


/* Steps  Eeach step has a head (number + title) + card (image + body) */
#stepsS .methodStep {
    width: 100%;
    max-width: 68rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#stepsS .methodStepHead {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

#stepsS .methodStepNum {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    background: var(--color-gold);
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    border-radius: 50%;
    line-height: 1;
}

#stepsS .methodStepTitle {
    margin: 0;
    color: var(--color-cyan);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

#stepsS .methodStepCard {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2.25rem 2.25rem;
    background: rgba(255,255,255,0.97);
    border: 0.0625rem solid #dfe7eb;
    border-radius: 1.75rem;
    box-shadow: 0 1rem 2.5rem rgba(39, 75, 91, 0.08);
}

#stepsS .methodStepMedia {
    flex: 0 0 23.75rem;
    aspect-ratio: 380 / 260;
    margin: 0;
    border: 0.0625rem solid #d6e0e5;
    border-radius: 1.125rem;
    overflow: hidden;
    background: #ffffff;
}

#stepsS .methodStepMedia img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#stepsS .methodStepBody {
    flex: 1 1 24rem;
    min-width: 0;
}

#stepsS .methodStepEmph {
    margin: 0 0 0.75rem;
    color: var(--color-cyan);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.6;
}

#stepsS .methodStepSubHeading {
    margin: 1rem 0 0.375rem;
    color: var(--color-cyan);
    font-size: 1.125rem;
    font-weight: 700;
}
#stepsS .methodStepSubHeading:first-child { margin-top: 0; }

#stepsS .methodStepList {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--color-kana-muted);
    font-size: 0.9rem;
    line-height: 1.95;
}

#stepsS .methodStepList li { margin: 0; }

#stepsS .methodStepNote {
    margin: 0.5rem 0 0;
    color: var(--color-kana-muted);
    font-size: 0.9rem;
    line-height: 1.95;
}


/* Maintenance  Eintro + tables + clog boxes + flow boxes */
#maintenanceS .maintenanceContent {
    width: 100%;
    max-width: 68rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#maintenanceS .maintenanceIntro {
    margin: 0;
    color: var(--color-kana-muted);
    font-size: 0.95rem;
    line-height: 2;
}

#maintenanceS .maintenanceH3 {
    margin: 1.5rem 0 0;
    color: var(--color-heading-dark);
    font-size: 1.125rem;
    font-weight: 700;
}

#maintenanceS .maintenanceH4 {
    margin: 1.5rem 0 0;
    color: var(--color-cyan);
    font-size: 1rem;
    font-weight: 700;
}

#maintenanceS .maintenanceNote,
#maintenanceS .maintenanceSource {
    margin: 0;
    color: var(--color-kana-muted);
    font-size: 0.8125rem;
    line-height: 1.8;
}

#maintenanceS .maintenanceSource { font-size: 0.75rem; }

/* Tables  Ecyan header row, alternating rows */
#maintenanceS .maintenanceTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 0.0625rem solid #dfe7eb;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #ffffff;
    font-size: 0.875rem;
    box-shadow: 0 0.75rem 1.75rem rgba(39, 75, 91, 0.06);
}

#maintenanceS .maintenanceTable thead th {
    background: var(--color-cyan);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: left;
    padding: 0.75rem 1.25rem;
}

#maintenanceS .maintenanceTable tbody td {
    padding: 0.75rem 1.25rem;
    color: var(--color-kana-muted);
    border-top: 0.0625rem solid #e6e6e6;
    line-height: 1.6;
}

#maintenanceS .maintenanceTable tbody td:first-child {
    font-weight: 700;
    color: var(--color-heading-dark);
    width: 25%;
}

#maintenanceS .maintenanceTable tbody tr:nth-child(even) td {
    background: #f7f7f7;
}

#maintenanceS .maintenanceTable3 tbody td:nth-child(2) {
    width: 25%;
    color: var(--color-kana-muted);
    font-weight: 400;
}

/* Clog-occurrence boxes (A / B) */
#maintenanceS .maintenanceBoxRow,
#maintenanceS .maintenanceFlowRow {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

#maintenanceS .maintenanceBox {
    flex: 1 1 22rem;
    min-width: 0;
    position: relative;
    padding: 1.25rem 1.5rem 1.25rem 5rem;
    background: #ffffff;
    border: 0.125rem solid var(--color-cyan);
    border-radius: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-height: 15rem;
    justify-content: center;
}

#maintenanceS .maintenanceBoxLetter {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    width: 3.75rem;
    height: 3.75rem;
    background: var(--color-gold);
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#maintenanceS .maintenanceBoxTop {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.8;
}

#maintenanceS .maintenanceBoxArrow {
    margin: 0;
    color: var(--color-cyan);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

#maintenanceS .maintenanceBoxConcl {
    margin: 0;
    color: var(--color-cyan);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.8;
}

#maintenanceS .maintenanceMethodCopy {
    color: var(--color-kana-muted);
    font-size: 0.8125rem;
    line-height: 2.1;
}

#maintenanceS .maintenanceMethodCopy p { margin: 0; }

/* Flow boxes (A ↁE①②③④, B ↁE①②) */
#maintenanceS .maintenanceFlow {
    flex: 1 1 22rem;
    min-width: 0;
    padding: 0.875rem 1.25rem;
    background: #f7f7f7;
    border: 0.0625rem solid #dfe7eb;
    border-radius: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

#maintenanceS .maintenanceFlowLabel {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 0.875rem;
    font-weight: 700;
}

#maintenanceS .maintenanceFlowSteps {
    margin: 0;
    color: var(--color-cyan);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}


/* Inspection */
#inspectionS .inspectionCopy {
    width: 100%;
    max-width: 60rem;
    color: var(--color-kana-muted);
    font-size: 0.95rem;
    line-height: 2;
}

#inspectionS .inspectionCopy p { margin: 0 0 0.5rem; }

#inspectionS .inspectionH {
    margin: 1rem 0 0.375rem;
    color: var(--color-heading-dark);
    font-size: 1rem;
    font-weight: 700;
}


/* ==========================================================================
   FAQ PAGE  Etabs + category headings + Q/A cards
   ========================================================================== */

/* Hero  EFAQ character (right side per Figma) */
.subHero.subHeroFaq .subHeroChar {
    height: 78%;
}

/* Category tabs  Esticky row of pills */
#faqTabsS {
    width: 100%;
    padding: 2.5rem 2rem 1.25rem;
    background: #ffffff;
    display: flex;
    justify-content: center;
}

#faqTabsS .faqTabsInner {
    width: 100%;
    max-width: 70rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

#faqTabsS .faqTab {
    min-width: 11rem;
    padding: 0.875rem 1.5rem;
    border: 0.125rem solid var(--color-cyan);
    border-radius: 2rem;
    background: #ffffff;
    color: var(--color-cyan);
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#faqTabsS .faqTab:hover {
    background: var(--color-cyan);
    color: #ffffff;
    box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.12);
    transform: translateY(-0.0625rem);
}

#faqTabsS .faqTab.isActive {
    background: var(--color-cyan);
    color: #ffffff;
    box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.15);
}

/* FAQ list section */
#faqListS {
    width: 100%;
    padding: 1.5rem 2rem 4rem;
    background: #ffffff;
    display: flex;
    justify-content: center;
}

#faqListS .faqList {
    width: 100%;
    max-width: 70rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Category heading  Ecyan bar + large kana */
#faqListS .faqCatHead {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 0.5rem;
}

#faqListS .faqCatHead:first-child {
    margin-top: 0;
}

#faqListS .faqCatBar {
    width: 0.375rem;
    height: 2rem;
    background: var(--color-cyan);
    border-radius: 0.1875rem;
}

#faqListS .faqCatHeading {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* FAQ item card */
#faqListS .faqItem {
    width: 100%;
    padding: 1.5rem 1.75rem;
    background: #F5F7F8;
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Q/A row  Ebadge + text */
#faqListS .faqRow {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

#faqListS .faqBadge {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}

#faqListS .faqBadgeQ {
    background: var(--color-cyan);
}

#faqListS .faqBadgeA {
    background: var(--color-gold, #E2CD06);
}

#faqListS .faqQuestion {
    margin: 0;
    padding-top: 0.375rem;
    color: var(--color-cyan);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.6;
}

#faqListS .faqDivider {
    display: block;
    width: 100%;
    height: 0.0625rem;
    background: #D6DCDF;
}

#faqListS .faqAnswer {
    flex: 1 1 auto;
    padding-top: 0.375rem;
    color: var(--color-heading-dark);
    font-size: 1rem;
    line-height: 1.9;
}

#faqListS .faqAnswer p {
    margin: 0 0 0.375rem;
}

#faqListS .faqAnswer p:last-child {
    margin-bottom: 0;
}

/* Filtered state  Ehide items/headings not matching the active category */
#faqListS .faqList.isFiltered .faqCatHead,
#faqListS .faqList.isFiltered .faqItem {
    display: none;
}

#faqListS .faqList.isFiltered .faqCatHead.isActive,
#faqListS .faqList.isFiltered .faqItem.isActive {
    display: flex;
}


/* ==========================================================================
   SDGS PAGE  Eremove gap between header and hero
   ========================================================================== */

#sdgs {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#sdgs .subHeroSdgs {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Defensive: kill accidental spacing between header and first hero */
.siteHeader + main#sdgs,
body > main#sdgs {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body > main#sdgs > .subHero:first-child,
#sdgs > .subHero:first-child {
    margin-top: 0 !important;
}

/* If a generic page/subpage rule is adding top space */
#sdgs.subpage,
#sdgs.pageMain,
#sdgs main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Intro  Ebig SDGs poster + JAPAN SDGs Action Platform banner + copy */
#sdgsIntroS {
    gap: 2.5rem;
}

#sdgsIntroS .sdgsIntroMedia {
    width: 100%;
    max-width: 45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

#sdgsIntroS .sdgsIntroPoster {
    width: 100%;
    max-width: 45rem;
    height: auto;
    border-radius: 0.75rem;
    display: block;
}

#sdgsIntroS .sdgsIntroPlatform {
    width: 100%;
    max-width: 26.25rem;
    height: auto;
    border-radius: 0.75rem;
    display: block;
}

#sdgsIntroS .sdgsIntroCopy {
    width: 100%;
    max-width: 75rem;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 2;
}

#sdgsIntroS .sdgsIntroCopy p {
    margin: 0 0 1.25rem;
}

#sdgsIntroS .sdgsIntroCopy p:last-child {
    margin-bottom: 0;
}

#sdgsIntroS .sdgsIntroEmph {
    font-weight: 700;
    color: var(--color-heading-dark);
}

/* Goals  Ewhite cards on gray section */
#sdgsGoalsS {
    gap: 1.5rem;
}

#sdgsGoalsS .sdgsGoalCard {
    width: 100%;
    max-width: 75rem;
    padding: 2rem 2.25rem;
    background: #ffffff;
    border: 0.0625rem solid #e6e6e6;
    border-radius: 1rem;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

#sdgsGoalsS .sdgsGoalMedia {
    flex: 0 0 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sdgsGoalsS .sdgsGoalMedia img {
    width: 100%;
    height: auto;
    display: block;
}

#sdgsGoalsS .sdgsGoalMediaStack {
    flex-direction: column;
    gap: 0.75rem;
}

#sdgsGoalsS .sdgsGoalMediaStack img {
    width: 100%;
    max-height: 7.1875rem;
    object-fit: contain;
}

#sdgsGoalsS .sdgsGoalBody {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#sdgsGoalsS .sdgsGoalBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 7.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--color-cyan);
    border-radius: 1.375rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

#sdgsGoalsS .sdgsGoalTitle {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.5;
}

#sdgsGoalsS .sdgsGoalDesc {
    margin: 0;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 2;
}
/* ==========================================================================
   SDGS PAGE  Eforce hero media to start at the very top
   ========================================================================== */

#sdgs .subHeroSdgs {
    background: var(--color-cyan);
    overflow: hidden;
}

#sdgs .subHeroSdgs .subHeroVideo {
    top: 0 !important;
    bottom: auto;
    height: 100% !important;
    margin-top: 0 !important;
}

#sdgs .subHeroSdgs::before,
#sdgs .subHeroSdgs::after {
    top: 0;
}

/* ==========================================================================
   TECH GUIDELINES PAGE  Edesign flow steps + field test CTA
   ========================================================================== */

/* Hero  Echaracter on the right */
.subHero.subHeroTechguide .subHeroChar {
    left: auto;
    right: 18%;
    height: 70%;
    transform: translate(50%, -50%);
}

/* Design flow  Eyellow numbered steps */
#designFlowS {
    gap: 1.25rem;
}

#designFlowS .designFlowNote {
    margin: -0.75rem 0 0.5rem;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    text-align: center;
}

#designFlowS .designFlowStep {
    width: 100%;
    max-width: 75rem;
    padding: 1.5rem 1.75rem;
    background: #f7f7f7;
    border: 0.0625rem solid #e6e6e6;
    border-radius: 1rem;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

#designFlowS .designFlowNum {
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gold);
    color: var(--color-heading-dark);
    border-radius: 50%;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

#designFlowS .designFlowBody {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.375rem;
}

#designFlowS .designFlowTitle {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
}

#designFlowS .designFlowList {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 1.9;
}

#designFlowS .designFlowList li {
    padding-left: 1rem;
    position: relative;
}

#designFlowS .designFlowList li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

/* Field test  Egray section + gold CTA button */
#fieldTestS {
    gap: 2rem;
}

#fieldTestS .fieldTestDesc {
    width: 100%;
    max-width: 75rem;
    margin: 0;
    color: var(--color-kana-muted);
    font-size: 1rem;
    line-height: 2;
}

#fieldTestS .fieldTestCta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 30rem;
    padding: 1.375rem 2rem;
    background: var(--color-gold);
    border-radius: 2rem;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
}

#fieldTestS .fieldTestCta:hover {
    background: #c9b800;
    box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.15);
    transform: translateY(-0.0625rem);
}

#fieldTestS .fieldTestCtaArrow {
    font-size: 1.25rem;
    line-height: 1;
}

/* ==========================================================================
   TERMINOLOGY PAGE  Eterms
   Structure:
   #terminologyS
     .pillBanner
     .termCard
       .termHead
         .termBar
         .termTitle
       .termDesc
         p
         .termSubList
         .termFigure
   ========================================================================== */

#terminologyS {
    width: 100%;
    margin: 0;
    padding: 4.1rem 2rem 5.5rem;
    box-sizing: border-box;

    background: #ffffff;
    overflow: hidden;
}

/* Top pill title */
#terminologyS .pillBanner {
    width: min(28rem, 90%);
    min-height: 4.25rem;
    margin: 0 auto 2.3rem;
    padding: 0 2rem;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--color-cyan);
    border-radius: 999px;
    box-shadow: 0 0.85rem 2rem rgba(0, 186, 201, 0.12);
}

#terminologyS .pillBannerTitle {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.04em;
}

/* Card */
#terminologyS .termCard {
    width: 100%;
    max-width: 70rem;
    margin: 0 auto 0.9rem;
    padding: 1.35rem 1.55rem 1.3rem;
    box-sizing: border-box;

    background: #f7f7f7;
    border: 0.0625rem solid rgba(51, 120, 134, 0.1);
    border-radius: 0.55rem;
    box-shadow: none;
}

/* Header */
#terminologyS .termHead {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    margin: 0 0 0.75rem;
    padding: 0;
}

#terminologyS .termBar {
    display: block;
    flex: 0 0 auto;

    width: 0.26rem;
    height: 1.65rem;

    background: var(--color-cyan);
    border-radius: 999px;
}

#terminologyS .termTitle {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.03em;
}

/* Body text */
#terminologyS .termDesc {
    margin: 0;
    padding: 0;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.015em;
}

#terminologyS .termDesc p {
    margin: 0 0 0.55rem;
    padding: 0;
}

#terminologyS .termDesc p:last-child {
    margin-bottom: 0;
}

/* Sub-list inside term card */
#terminologyS .termSubList {
    margin: 0.75rem 0 0;
    padding: 0;

    list-style: none;
}

#terminologyS .termSubList li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;

    margin: 0;
    padding: 0.45rem 0;

    border-top: 0.0625rem solid rgba(51, 120, 134, 0.12);
}

#terminologyS .termSubHead {
    color: #333333;
    font-weight: 700;
}

#terminologyS .termSubUnit {
    color: var(--color-cyan);
    font-weight: 700;
    white-space: nowrap;
}

/* Figure */
#terminologyS .termFigure {
    width: min(30rem, 100%);
    margin: 1rem auto 0;
    padding: 0;

    text-align: center;
}

#terminologyS .termFigure img {
    display: block;
    width: 100%;
    height: auto;

    border: 0.0625rem solid rgba(51, 120, 134, 0.14);
    border-radius: 0.4rem;
}

/* ==========================================================================
   PRIVACY PAGE  Eprivacy policy items + contact block
   ========================================================================== */

/* Hero  Echaracter on the left */
.subHero.subHeroPrivacy .subHeroChar {
    left: 22%;
    height: 75%;
}

#privacyS {
    gap: 1rem;
}

#privacyS .privacySubtitle {
    margin: 1rem 0 0;
    color: var(--color-heading-dark);
    font-size: 1.375rem;
    font-weight: 700;
    text-align: center;
}

#privacyS .privacyIntro {
    width: 100%;
    max-width: 75rem;
    margin: 0 0 1rem;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 2;
    text-align: center;
}

/* Policy item card */
#privacyS .privacyItem {
    width: 100%;
    max-width: 75rem;
    padding: 1.5rem 1.75rem;
    background: #f7f7f7;
    border: 0.0625rem solid #e6e6e6;
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04);
}

#privacyS .privacyItemHead {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
}

#privacyS .privacyItemBar {
    flex: 0 0 auto;
    width: 0.375rem;
    height: 1.75rem;
    background: var(--color-cyan);
    border-radius: 0.1875rem;
}

#privacyS .privacyItemTitle {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}

#privacyS .privacyItemDesc {
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 2;
}

#privacyS .privacyItemDesc p {
    margin: 0 0 0.5rem;
}

#privacyS .privacyItemDesc p:last-child {
    margin-bottom: 0;
}

#privacyS .privacyNote {
    margin: 1.5rem 0 0;
    color: var(--color-kana-muted);
    font-size: 0.875rem;
    text-align: center;
}

/* Contact block  Ecentered title + phone */
#privacyS .privacyContact {
    width: 100%;
    max-width: 75rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 0.0625rem solid #e6e6e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    text-align: center;
}

#privacyS .privacyContactTitle {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 1.375rem;
    font-weight: 700;
}

#privacyS .privacyContactDesc {
    margin: 0.25rem 0 0.5rem;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 2;
}

#privacyS .privacyContactCo {
    margin: 0;
    color: var(--color-heading-dark);
    font-size: 1.125rem;
    font-weight: 700;
}

#privacyS .privacyContactTel {
    color: var(--color-cyan);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: opacity 0.2s ease;
}

#privacyS .privacyContactTel:hover {
    opacity: 0.8;
}


/* ==========================================================================
   PRODUCT DETAIL PAGES (.productPage)  Eoverview, specs tables, accessories,
   related products grid, installations table, back button. Shared across all
   product detail pages (p10p10, trench, well, permeate_gutter, etc).
   ========================================================================== */

/* Hero  Eproduct detail uses character on the LEFT (like FAQ/SDGs) */
/* ==========================================================================
   PRODUCT DETAIL PAGES  Eshared layout
   Used by:
   main.productPage
     .subHeroProductDetail
     .productOverview
     .productSpecs
     .productAcc
     .productInstallations
     .productRelated
     .productBackWrap
   ========================================================================== */

.productPage {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
    overflow: hidden;
}

/* Remove accidental gap above product detail hero */
.productPage .subHeroProductDetail {
    margin-top: 0 !important;
}

.siteHeader + main.productPage,
body > main.productPage {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Product detail hero character */
.productPage .subHeroProductDetail .subHeroChar {
    right: 13.5%;
    height: 76%;
    max-width: 22rem;
}

.productPage .subHeroProductDetail .subHeroTitle {
    letter-spacing: 0.06em;
}


/* ==========================================================================
   PRODUCT DETAIL  Eoverview
   Structure:
   .productOverview
     .productOverviewMedia
       .productOverviewMain
       .productOverviewSub
     .productOverviewBody
   ========================================================================== */

.productOverview {
    width: 100%;
    max-width: 86rem;
    margin: 0 auto;
    padding: 5.1rem 2rem 4.7rem;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: minmax(0, 36rem) minmax(0, 42rem);
    align-items: center;
    gap: 4.2rem;

    background: #ffffff;
}

.productOverviewMedia {
    width: 100%;
    margin: 0;
    padding: 0;
}

.productOverviewMain,
.productOverviewSub {
    margin: 0;
    padding: 0;
}

.productOverviewMain {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: 100%;
    min-height: 17rem;
    margin-bottom: 0.6rem;

    background: #ffffff;
    border: 0.0625rem solid rgba(51, 120, 134, 0.16);
    border-radius: 0.4rem;
    overflow: hidden;
}

.productOverviewMain img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.productOverviewSub {
    width: 100%;

    background: #ffffff;
    border: 0.0625rem solid rgba(51, 120, 134, 0.16);
    border-radius: 0.4rem;
    overflow: hidden;
}

.productOverviewSub img {
    display: block;
    width: 100%;
    height: auto;
}

.productOverviewBody {
    width: 100%;
    max-width: 42rem;
    margin: 0;
    padding: 0;
}

.productOverviewKicker {
    margin: 0 0 0.65rem;
    padding: 0;

    color: var(--color-cyan);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
}

.productOverviewTitle {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 2.35rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.03em;
}

.productOverviewDivider {
    display: block;

    width: 3rem;
    height: 0.22rem;
    margin: 0.85rem 0 1.4rem;

    background: var(--color-cyan);
    border-radius: 999px;
}

.productOverviewDesc {
    margin: 0;
    padding: 0;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   PRODUCT DETAIL  Espec tables
   Structure:
   .productSpecs
     .productSpecsHead
     .productSpecTable
   ========================================================================== */

.productSpecs {
    width: 100%;
    max-width: 86rem;
    margin: 0 auto;
    padding: 2.1rem 2rem 3.4rem;
    box-sizing: border-box;

    background: #ffffff;
}

.productSpecsHead {
    width: 100%;
    margin: 0 0 1.35rem;
    padding: 0;
}

.productSpecsTitle {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.03em;
}

.productSpecsDivider {
    display: block;

    width: 3rem;
    height: 0.2rem;
    margin: 0.55rem 0 0;

    background: var(--color-cyan);
    border-radius: 999px;
}

.productSpecTable {
    width: 100%;
    margin: 0;
    padding: 0;

    border-collapse: collapse;
    table-layout: fixed;

    background: #ffffff;
    overflow: hidden;
}
#trench > section.productOverview > div.productOverviewMedia > figure.productOverviewMain{
    display: flex;}
    #trench > section.productOverview > div.productOverviewMedia > figure.productOverviewMain > img{
object-fit: contain;
    }
#trench .subHero .subHeroChar {
    left: 69.5% !important;
    height: 76%;
    max-width: 22rem;
}
#treeCircle .subHero .subHeroChar {
    left: 69.5% !important;
}
#permInterlockingBlock .subHero .subHeroChar {
    left: 69.5% !important;

}
#drainage .subHero .subHeroChar {
    left: 69.5% !important;

}
#well .productOverviewMain{
    display: flex;}
#well .subHero .subHeroChar {
    left: 69.5% !important;

}
#greenChevron .subHero .subHeroChar {
    left: 69.5% !important;

}
.productOverviewMain{
    display: flex;}
    section.productOverview > div.productOverviewMedia > figure.productOverviewMain > img{
object-fit: contain;
    }
.productSpecTable thead {
    background: var(--color-cyan);
}

.productSpecTable th,
.productSpecTable td {
    padding: 0.95rem 1rem;
    box-sizing: border-box;

    border-bottom: 0.0625rem solid #e5e5e5;

    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: center;
    vertical-align: middle;
}

.productSpecTable thead th {
    color: #ffffff;
    font-weight: 900;
}

.productSpecTable tbody th {
    color: var(--color-heading-dark);
    font-weight: 800;
}

.productSpecTable tbody td {
    color: #333333;
    font-weight: 400;
}

.productSpecTable tbody tr:nth-child(even) {
    background: #f7f7f7;
}


/* ==========================================================================
   PRODUCT DETAIL  Eaccessory block
   ========================================================================== */

.productAcc {
    width: 100%;
    max-width: 86rem;
    margin: 0 auto;
    padding: 3.4rem 2rem;
    box-sizing: border-box;

    background: #ffffff;
}

.productAccHeading {
    margin: 0 0 1.35rem;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.03em;
}

.productAccHeading::after {
    content: "";
    display: block;

    width: 3rem;
    height: 0.2rem;
    margin-top: 0.55rem;

    background: var(--color-cyan);
    border-radius: 999px;
}

.productAccBody {
    display: grid;
    grid-template-columns: minmax(14rem, 24rem) minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem;

    width: 100%;
}

.productAccMedia {
    margin: 0;
    padding: 0;

    background: #ffffff;
    border: 0.0625rem solid rgba(51, 120, 134, 0.16);
    border-radius: 0.4rem;
    overflow: hidden;
}

.productAccMedia img {
    display: block;
    width: 100%;
    height: auto;
}

.productAccTable {
    min-width: 0;
}


/* ==========================================================================
   PRODUCT DETAIL  Einstallation table
   ========================================================================== */

.productInstallations {
    width: 100%;
    max-width: 86rem;
    margin: 0 auto;
    padding: 3.8rem 2rem;
    box-sizing: border-box;

    background: #ffffff;
}

.productInstallationsTitle {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.04em;
}

.productInstallationsDivider {
    display: block;

    width: 3rem;
    height: 0.2rem;
    margin: 0.65rem auto 1.75rem;

    background: var(--color-cyan);
    border-radius: 999px;
}

.productInstallationsTable {
    width: 100%;
    margin: 0;
    padding: 0;

    border-collapse: collapse;
    table-layout: fixed;
}

.productInstallationsTable thead {
    background: var(--color-cyan);
}

.productInstallationsTable th,
.productInstallationsTable td {
    padding: 0.95rem 1rem;
    border-bottom: 0.0625rem solid #e5e5e5;

    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.55;
    text-align: left;
}

.productInstallationsTable thead th {
    color: #ffffff;
    font-weight: 900;
}

.productInstallationsTable tbody td {
    color: #333333;
}

.productInstallationsTable tbody tr:nth-child(even) {
    background: #f7f7f7;
}


/* ==========================================================================
   PRODUCT DETAIL  Erelated products
   ========================================================================== */

.productRelated {
    width: 100%;
    margin: 0;
    padding: 4.6rem 2rem 4.2rem;
    box-sizing: border-box;

    background: #f7fbfc;
    text-align: center;
}

.productRelatedKicker {
    margin: 0 0 0.5rem;
    padding: 0;

    color: var(--color-cyan);
    font-family: "Helvetica Neue", "Noto Sans", var(--font-sans);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.14em;
}

.productRelatedTitle {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.3;
}

.productRelatedDivider {
    display: block;

    width: 3rem;
    height: 0.2rem;
    margin: 0.75rem auto 2rem;

    background: var(--color-cyan);
    border-radius: 999px;
}

.productRelatedGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;

    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0;
}

.productRelatedCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;

    min-height: 8rem;
    padding: 1.6rem 1.5rem;
    box-sizing: border-box;

    background: #ffffff;
    border: 0.0625rem solid rgba(51, 120, 134, 0.12);
    border-radius: 0.75rem;

    color: var(--color-heading-dark);
    text-align: left;
    text-decoration: none;

    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        border-color 0.2s var(--ease);
}

.productRelatedCard:hover {
    transform: translateY(-0.2rem);
    border-color: rgba(0, 186, 201, 0.35);
    box-shadow: 0 1rem 2rem rgba(19, 47, 69, 0.08);
}

.productRelatedCardKicker {
    color: var(--color-cyan);
    font-size: 0.78rem;
    font-weight: 900;
}

.productRelatedCardTitle {
    color: var(--color-heading-dark);
    font-size: 1.1rem;
    font-weight: 900;
}

.productRelatedCardLink {
    margin-top: auto;
    color: var(--color-cyan);
    font-size: 0.82rem;
    font-weight: 800;
}


/* ==========================================================================
   PRODUCT DETAIL  Eback button
   ========================================================================== */

.productBackWrap {
    width: 100%;
    margin: 0;
    padding: 3rem 2rem 5rem;
    box-sizing: border-box;

    background: #ffffff;
    text-align: center;
}

.productBack {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 18rem;
    height: 3.4rem;
    padding: 0 2rem;
    box-sizing: border-box;

    background: var(--color-cyan);
    color: #ffffff;
    border-radius: 999px;

    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;

    box-shadow: 0 0.75rem 1.5rem rgba(0, 186, 201, 0.18);

    transition:
        transform 0.2s var(--ease),
        filter 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

.productBack:hover {
    transform: translateY(-0.15rem);
    filter: brightness(1.06);
    box-shadow: 0 1rem 2rem rgba(0, 186, 201, 0.24);
}
/* ==========================================================================
   P10P10 PAGE  Eaccessory sections custom layout
   Page:
   main#p10p10.productPage

   Fixes:
   - ゴミ除去裁E�E��E�: images left, table right, PDF buttons underneath
   - 透水シーチE large product image left, specs table right
   ========================================================================== */


/* ==========================================================================
   P10P10  Eshared accessory spacing
   ========================================================================== */

#p10p10 .productAcc {
    width: 100%;
    max-width: 86rem;
    margin: 0 auto;
    padding: 4.2rem 2rem;
    box-sizing: border-box;

    border-top: 0.0625rem solid #e5e5e5;
    background: #ffffff;
}

#p10p10 .productAccHeading {
    margin: 0 0 1.4rem;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.03em;
}

#p10p10 .productAccHeading::after {
    content: "";
    display: block;

    width: 3rem;
    height: 0.2rem;
    margin-top: 0.55rem;

    background: var(--color-cyan);
    border-radius: 999px;
}

#p10p10 .productAccLead {
    margin: 0 0 1.8rem;
    padding: 0;

    color: #333333;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   P10P10  Eゴミ除去裁E�E��E�
   Current PHP:
   section.productAcc[aria-label="ゴミ除去裁E�E��E�"]
     .productImageRow
       figure.productImageLabeled
     .productAccBody.productAccBodyTableOnly
     .productPdfRow
   ========================================================================== */

#p10p10 .productAcc[aria-label="ゴミ除去裁E�E��E�"] {
    display: grid;
    grid-template-columns: minmax(20rem, 34rem) minmax(0, 1fr);
    grid-template-areas:
        "heading heading"
        "lead lead"
        "images table"
        "pdf pdf";
    column-gap: 3.5rem;
    row-gap: 1.7rem;
    align-items: start;
}

#p10p10 .productAcc[aria-label="ゴミ除去裁E�E��E�"] .productAccHeading {
    grid-area: heading;
    margin-bottom: 0;
}

#p10p10 .productAcc[aria-label="ゴミ除去裁E�E��E�"] .productAccLead {
    grid-area: lead;
    margin-bottom: 0;
}

#p10p10 .productImageRow {
    grid-area: images;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;

    width: 100%;
    margin: 0;
    padding: 0;
}

#p10p10 .productImageLabeled {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

#p10p10 .productImageLabeled img {
    display: block;
    width: 100%;
    height: 13.5rem;

    object-fit: cover;
    object-position: center center;

    border-radius: 0.35rem;
}

#p10p10 .productImageLabeledLabel {
    margin: 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
}

#p10p10 .productAccBodyTableOnly {
    grid-area: table;

    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

#p10p10 .productAccBodyTableOnly .productAccTable {
    width: 100%;
    min-width: 0;
}

#p10p10 .productAccBodyTableOnly .productSpecTable {
    width: 100%;
    table-layout: fixed;
}

/* Special darker table header like design */
#p10p10 .productAcc[aria-label="ゴミ除去裁E�E��E�"] .productSpecTable thead {
    background: var(--color-heading-dark);
}

#p10p10 .productAcc[aria-label="ゴミ除去裁E�E��E�"] .productSpecTable th,
#p10p10 .productAcc[aria-label="ゴミ除去裁E�E��E�"] .productSpecTable td {
    padding: 1rem 1.2rem;

    font-size: 0.88rem;
    line-height: 1.55;
    text-align: center;
}

#p10p10 .productAcc[aria-label="ゴミ除去裁E�E��E�"] .productSpecTable tbody tr:nth-child(even) {
    background: rgba(0, 186, 201, 0.1);
}

#p10p10 .productPdfRow {
    grid-area: pdf;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;

    width: 100%;
    margin: 1.2rem 0 0;
    padding: 0;
}

#p10p10 .productPdfBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 12rem;
    height: 3.2rem;
    padding: 0 1.6rem;
    box-sizing: border-box;

    background: var(--color-cyan);
    color: #ffffff;
    border-radius: 0.42rem;

    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 0.65rem 1.4rem rgba(0, 186, 201, 0.16);

    transition:
        transform 0.2s var(--ease),
        filter 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

#p10p10 .productPdfBtn::before {
    content: "📄";
    margin-right: 0.4rem;
    font-size: 0.9em;
}

#p10p10 .productPdfBtn:hover {
    transform: translateY(-0.12rem);
    filter: brightness(1.06);
    box-shadow: 0 0.9rem 1.8rem rgba(0, 186, 201, 0.22);
}


/* ==========================================================================
   P10P10 - 透水シーチE  Current PHP:
   P10P10 - 透水シーチE   Current PHP:
   section.productAcc[aria-label="透水シーチE"]
     .productAccBody
       figure.productAccMedia
       .productAccTable
   ========================================================================== */

#p10p10 .productAcc[aria-label="透水シーチE"] .productAccBody {
    display: grid;
    grid-template-columns: minmax(20rem, 34rem) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;

    width: 100%;
    margin: 2rem 0 0;
    padding: 0;
}

#p10p10 .productAcc[aria-label="透水シーチE"] .productAccMedia {
    width: 100%;
    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

#p10p10 .productAcc[aria-label="透水シーチE"] .productAccMedia img {
    display: block;
    width: 100%;
    height: auto;

    object-fit: contain;
}

#p10p10 .productAcc[aria-label="透水シーチE"] .productAccTable {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}
#p10p10 .productSpecTableSheet {
    width: 100%;
    min-width: 48rem;
    table-layout: auto;
}

#p10p10 .productSpecTableSheet thead {
    background: transparent;
}

#p10p10 .productSpecTableSheet thead th {
    color: var(--color-heading-dark);
    background: transparent;
    border-bottom: 0.18rem solid var(--color-cyan);
}

#p10p10 .productSpecTableSheet th,
#p10p10 .productSpecTableSheet td {
    padding: 0.85rem 0.75rem;

    font-size: 0.82rem;
    line-height: 1.45;
    text-align: center;
}

#p10p10 .productSpecTableSheet tbody tr:nth-child(even) {
    background: transparent;
}

#p10p10 .productSpecTableSheet tbody tr {
    border-bottom: 0.0625rem solid #e5e5e5;
}
/* ==========================================================================
   CONTACT / BROCHURE PAGES  Ephone banner, step bar, form, privacy, thanks
   Used by: page-contact, page-confirm, page-contact-submitted,
            page-brochure, page-confirm-request, page-brochure-submitted
   ========================================================================== */

/* Hero  Echaracter on the left, like other subpages */
.subHero.subHeroContact .subHeroChar,
.subHero.subHeroBrochure .subHeroChar {
    left: 22%;
    height: 78%;
}

/* ---------- Yellow phone banner ---------- */
.contactPage .phoneBanner {
    width: 100%;
    padding: 1.75rem 2rem;
    background: var(--color-yellow);
    text-align: center;
}

.contactPage .phoneBannerLabel {
    margin: 0 0 0.375rem;
    color: var(--color-heading-dark);
    font-size: 0.9375rem;
    font-weight: 700;
}

.contactPage .phoneBannerNumber {
    display: inline-block;
    color: var(--color-heading-dark);
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-decoration: none;
    line-height: 1.2;
}

.contactPage .phoneBannerHours {
    margin: 0.375rem 0 0;
    color: var(--color-heading-dark);
    font-size: 0.875rem;
}

/* ---------- Pill banner section override (smaller for contact) ---------- */
.contactPage .pillBannerSection {
    padding: 2.5rem 2rem 1.25rem;
}

/* ---------- Step bar (入劁EↁE入力�E容の確誁EↁE送信完亁E ---------- */
.contactPage .stepBar {
    width: 100%;
    max-width: 70rem;
    margin: 0 auto 1.5rem;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.contactPage .stepBarItem {
    flex: 0 1 14rem;
    min-width: 8rem;
    padding: 0.875rem 1rem;
    border-radius: 0.375rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.contactPage .stepBarItem.isActive {
    background: var(--color-cyan);
    color: #ffffff;
}

.contactPage .stepBarItem.isDone {
    background: #d6dcdf;
    color: #6f7e87;
}

.contactPage .stepBarItem.isPending {
    background: #f0f3f5;
    color: #9aa6ad;
}

.contactPage .stepBarArrow {
    color: var(--color-cyan);
    font-size: 1.25rem;
    font-weight: 700;
}

/* ---------- Form section ---------- */
.contactPage .contactFormSection {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
    padding: 1rem 2rem 3rem;
}

.contactPage .contactFormIntro {
    margin: 0 0 2rem;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 2;
    text-align: center;
}

.contactPage .contactFormFields {
    width: 100%;
    max-width: 62.5rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contactPage .contactFormField {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contactPage .contactFormLabel {
    color: var(--color-heading-dark);
    font-size: 0.9375rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.contactPage .contactFormRequired {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    background: #e74c3c;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 0.1875rem;
    letter-spacing: 0.04em;
}

/* CF7 form controls  Einput/select/textarea styling */
.contactPage .contactFormInput .wpcf7-form-control,
.contactPage input[type="text"]:not(.wpcf7-submit),
.contactPage input[type="email"]:not(.wpcf7-submit),
.contactPage input[type="tel"]:not(.wpcf7-submit),
.contactPage select,
.contactPage textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: #ffffff;
    border: 0.0625rem solid #d6dcdf;
    border-radius: 0.375rem;
    color: var(--color-heading-dark);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contactPage input[type="text"]:focus:not(.wpcf7-submit),
.contactPage input[type="email"]:focus:not(.wpcf7-submit),
.contactPage input[type="tel"]:focus:not(.wpcf7-submit),
.contactPage select:focus,
.contactPage textarea:focus {
    outline: none;
    border-color: var(--color-cyan);
    box-shadow: 0 0 0 0.1875rem rgba(0, 186, 201, 0.15);
}

.contactPage textarea {
    resize: vertical;
    min-height: 9rem;
}

/* Postcode field  Enarrower inputs side-by-side */
.contactPage .contactFormPostcode {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.contactPage .contactFormPostcode input[type="text"] {
    width: 9rem;
}

.contactPage .contactFormPostcode .contactFormPostcodeSep {
    color: var(--color-kana-muted);
    font-weight: 700;
}

/* ---------- Privacy block ---------- */
.contactPage .contactFormPrivacy {
    width: 100%;
    max-width: 62.5rem;
    margin: 2.5rem auto 0;
}

.contactPage .contactFormPrivacyHeading {
    margin: 0 0 0.625rem;
    color: var(--color-heading-dark);
    font-size: 1rem;
    font-weight: 700;
}

.contactPage .contactFormPrivacyIntro {
    margin: 0 0 1rem;
    color: var(--color-kana-muted);
    font-size: 0.875rem;
    line-height: 1.85;
}

.contactPage .contactFormPrivacyBox {
    padding: 1.5rem 1.75rem;
    background: #f7f7f7;
    border: 0.0625rem solid #e6e6e6;
    border-radius: 0.5rem;
}

.contactPage .contactFormPrivacyBox p {
    margin: 0 0 1rem;
    color: var(--color-kana-muted);
    font-size: 0.8125rem;
    line-height: 1.85;
}

.contactPage .contactFormPrivacyBox p:last-child {
    margin-bottom: 0;
}

.contactPage .contactFormPrivacyBox strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-heading-dark);
    font-size: 0.875rem;
    font-weight: 700;
}

/* ---------- Submit / back buttons ---------- */
.contactPage .contactFormButtons {
    width: 100%;
    max-width: 62.5rem;
    margin: 2.5rem auto 0;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.contactPage .contactFormButtons input[type="submit"],
.contactPage .contactFormButtons input[type="button"],
.contactPage .contactFormButtons .wpcf7-submit {
    min-width: 20rem;
    padding: 1.125rem 2rem;
    background: var(--color-cyan);
    color: #ffffff;
    border: 0;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.contactPage .contactFormButtons input[type="submit"]:hover,
.contactPage .contactFormButtons input[type="button"]:hover,
.contactPage .contactFormButtons .wpcf7-submit:hover {
    background: var(--color-cyan-mid);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.15);
}

/* "Back" button (outlined variant  Econfirmation page) */
.contactPage .contactFormButtons input[type="button"].contactFormBack,
.contactPage .contactFormButtons .contactFormBack {
    background: #ffffff;
    color: var(--color-cyan);
    border: 0.125rem solid var(--color-cyan);
}

.contactPage .contactFormButtons input[type="button"].contactFormBack:hover,
.contactPage .contactFormButtons .contactFormBack:hover {
    background: #f5fbfb;
}

/* ---------- Confirmation page  Eread-only field display ---------- */
.contactPage .contactFormReview .contactFormField {
    border-bottom: 0.0625rem solid #e6e6e6;
    padding-bottom: 1rem;
}

.contactPage .contactFormReview .contactFormValue {
    color: var(--color-heading-dark);
    font-size: 0.9375rem;
    line-height: 1.7;
    padding: 0.5rem 0;
    min-height: 1.5rem;
}

/* ---------- Thank-you (submitted) page ---------- */
.contactPage .thanksSection {
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    padding: 2.5rem 2rem 3rem;
    text-align: center;
}

.contactPage .thanksHeading {
    margin: 0 0 1.25rem;
    color: var(--color-heading-dark);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.5;
}

.contactPage .thanksDesc {
    margin: 0 0 0.75rem;
    color: var(--color-kana-muted);
    font-size: 0.9375rem;
    line-height: 2;
}

.contactPage .thanksPhoneBox {
    width: 100%;
    max-width: 36rem;
    margin: 2rem auto 0;
    padding: 1.5rem 2rem;
    background: var(--color-cyan);
    color: #ffffff;
    border-radius: 0.75rem;
    text-align: center;
}

.contactPage .thanksPhoneBox a {
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
}

.contactPage .thanksPhoneNumber {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.contactPage .thanksPhoneHours {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    font-weight: 700;
}

/* ---------- Brochure download buttons ---------- */
.contactPage .downloadGrid {
    width: 100%;
    max-width: 56rem;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contactPage .downloadCard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-gold);
    color: #ffffff;
    border-radius: 0.625rem;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contactPage .downloadCard:hover {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.15);
}

.contactPage .downloadCardLabel {
    flex: 1 1 auto;
    line-height: 1.5;
    text-align: left;
}

.contactPage .downloadCardLabel span {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0.9;
}

.contactPage .downloadCardIcon {
    flex: 0 0 auto;
    font-size: 1.25rem;
}

.contactPage .thanksBackBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0.875rem 2rem;
    color: var(--color-cyan);
    border: 0.125rem solid var(--color-cyan);
    border-radius: 2rem;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.contactPage .thanksBackBtn:hover {
    background: var(--color-cyan);
    color: #ffffff;
}
/* ==========================================================================
   PERMEATE GUTTER PAGE  Ecustom layout fixes
   Page:
   main#permeateGutter.productPage

   Fixes:
   - section width and spacing
   - 皿型�E溁E table above, large image centered, two product images below
   - 冁E�E��E�側溁E diagram/image layout controlled
   - installation table readable and centered
   - related products section spacing
   ========================================================================== */


/* ==========================================================================
   PERMEATE GUTTER  Eshared section base
   ========================================================================== */
/* ==========================================================================
   PERMEATE GUTTER  E浸透皿型�E溁Eexact design order/layout
   ========================================================================== */

#permeateGutter .permeateDishSection {
    max-width: 86rem;
    margin: 0 auto;
    padding: 4.2rem 2rem 4.8rem;
    box-sizing: border-box;

    display: block;

    background: #ffffff;
    border-top: 0.0625rem solid #e5e5e5;
}

#permeateGutter .permeateDishSection .productAccHeading {
    margin-bottom: 1.15rem;
}

#permeateGutter .permeateDishSection .productAccLead {
    margin-bottom: 3.2rem;
}

/* Plain design table  Enot cyan product-table style */
#permeateGutter .productSpecTablePlain {
    width: 100%;
    margin: 0 auto 4.6rem;
    border-collapse: collapse;
    table-layout: fixed;

    background: #ffffff;
}

#permeateGutter .productSpecTablePlain thead {
    background: transparent;
}

#permeateGutter .productSpecTablePlain th,
#permeateGutter .productSpecTablePlain td {
    padding: 1rem 1.2rem;
    box-sizing: border-box;

    border-bottom: 0.0625rem solid #dcdcdc;

    color: #1c2e3a;
    background: transparent;

    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
}

#permeateGutter .productSpecTablePlain thead th {
    color: #1c2e3a;
    background: transparent;
    font-weight: 900;
}

#permeateGutter .productSpecTablePlain tbody th {
    color: #1c2e3a;
    background: transparent;
    font-weight: 900;
}

#permeateGutter .productSpecTablePlain tbody tr:nth-child(even) {
    background: transparent;
}

/* Big field image directly under table */
#permeateGutter .permeateDishMainImage {
    width: 100%;
    max-width: 58rem;
    margin: 0 auto 3.2rem;
    padding: 0;
}

#permeateGutter .permeateDishMainImage img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 25.5rem;

    object-fit: cover;
    object-position: center center;

    border-radius: 1rem;
}

/* Two product images under the field image */
#permeateGutter .permeateDishVariants {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 25rem));
    justify-content: center;
    align-items: end;
    gap: 4.2rem;

    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#permeateGutter .permeateDishVariants .productVariant {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

#permeateGutter .permeateDishVariants .productVariant img {
    display: block;
    width: 100%;
    height: 13.5rem;

    object-fit: contain;
    object-position: center center;
}

#permeateGutter .permeateDishVariants .productVariantTitle {
    order: 2;

    margin: 0.85rem 0 0;
    padding: 0;

    color: var(--color-heading-dark);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.5;
}
/* ==========================================================================
   DRAINAGE PAGE  Eoverview image/text layout
   Page: main#drainage.productPage
   ========================================================================== */

#drainage .productOverview {
    max-width: 86rem;
    padding: 4.8rem 2rem 5rem;
    grid-template-columns: minmax(0, 36rem) minmax(0, 34rem);
    gap: 5rem;
    align-items: center;
}

#drainage .productOverviewMedia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2rem;
    align-items: end;
}

#drainage .productOverviewMain {
    grid-column: 1 / -1;

    display: block;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;

    background: #ffffff;
    border: 0.0625rem solid rgba(51, 120, 134, 0.14);
    border-radius: 0.35rem;
    overflow: hidden;
}

#drainage .productOverviewMain img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

#drainage .productImageRow {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.2rem;

    width: 100%;
    margin: 0;
    padding: 0;
}

#drainage .productImageLabeled {
    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
}

#drainage .productImageLabeled img {
    display: block;
    width: 100%;
    height: 17rem;

    object-fit: contain;
    object-position: center center;
}

#drainage .productOverviewBody {
    align-self: center;
    max-width: 34rem;
}

#drainage .productOverviewTitle {
    font-size: 2.35rem;
}

#drainage .productOverviewDesc {
    max-width: 34rem;
}
/* ==========================================================================
   PAVEMENT PAGE  Eoverview layout
   Page: main#pavement.productPage
   ========================================================================== */

#pavement .productOverview {
    max-width: 86rem;
    padding: 4.8rem 2rem 5rem;
    grid-template-columns: minmax(0, 36rem) minmax(0, 34rem);
    gap: 5rem;
    align-items: center;
}

#pavement .productOverviewMedia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2rem;
    align-items: end;
}

#pavement .productOverviewMain {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
}

#pavement .productOverviewMain img {
    display: block;
    width: 100%;
    height: 15.5rem;
    object-fit: cover;
    object-position: center center;
    border-radius: 0.5rem;
}

#pavement .productImageRow {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.2rem;
    width: 100%;
    margin: 0;
    padding: 0;
}

#pavement .productImageLabeled {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

#pavement .productImageLabeled img {
    display: block;
    width: 100%;
    height: 12rem;
    object-fit: contain;
    object-position: center center;
}

#pavement .productImageLabeledLabel {
    margin: 0.6rem 0 0;
    color: var(--color-heading-dark);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.4;
}

#pavement .productOverviewBody {
    align-self: center;
    max-width: 34rem;
}

/* table/header: match dark design screenshot */
#pavement .productSpecs,
#pavement .productInstallations {
    background: #f7f8f9;
}

#pavement .productSpecs {
    padding-top: 3.8rem;
}

#pavement .productSpecTable thead,
#pavement .productInstallationsTable thead {
    background: var(--color-heading-dark);
}
/* === 2x2 image grid (flex version) === */
.productGrid2x2 {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 32px;
}

.productGrid2x2 figure {
    width: calc(50% - 12px); /* 2 columns */
    margin: 0;
}

.productGrid2x2 img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}
.productGrid2x2 figure:empty {
    display: none;
}
.productGrid2x2 {
    max-width: 1100px;
    margin: 40px auto 0;
}
/* ==========================================================================
   GLASS PAVER PAGE  Eoverview layout
   Page: main#glassPaver.productPage
   ========================================================================== */

#glassPaver .productOverview {
    max-width: 86rem;
    padding: 4.8rem 2rem 5rem;
    grid-template-columns: minmax(0, 44rem) minmax(0, 34rem);
    gap: 4.6rem;
    align-items: center;
}

#glassPaver .productOverviewMedia {
    display: flex;
    flex-direction: column;
    gap: 3rem;

    width: 100%;
    margin: 0;
    padding: 0;
}

#glassPaver .productImageRow {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;

    width: 100%;
    margin: 0;
    padding: 0;
}

#glassPaver .productImageRow .productImageLabeled {
    margin: 0;
    padding: 0;
}

#glassPaver .productImageRow .productImageLabeled:first-child {
    flex: 1 1 66%;
}

#glassPaver .productImageRow .productImageLabeled:last-child {
    flex: 1 1 34%;
}

#glassPaver .productImageRow img {
    display: block;
    width: 100%;
    height: 20.5rem;

    object-fit: cover;
    object-position: center center;

    border-radius: 0.55rem;
}

#glassPaver .productImageRow .productImageLabeled:last-child img {
    object-fit: contain;
    background: #ffffff;
}

#glassPaver .productOverviewSub {
    width: 100%;
    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

#glassPaver .productOverviewSub img {
    display: block;
    width: min(39rem, 100%);
    height: auto;
    margin: 0 auto;

    object-fit: contain;
    object-position: center center;
}

#glassPaver .productOverviewBody {
    align-self: center;
    max-width: 34rem;
}

#glassPaver .productOverviewTitle {
    max-width: 34rem;
    font-size: 2.2rem;
    line-height: 1.35;
}

#glassPaver .productOverviewDesc {
    max-width: 34rem;
}
/* ==========================================================================
   PRODUCT OVERVIEW  Estacked layout variant
   Used when overview text should be above media, not side-by-side.
   Structure:
   .productOverview.productOverviewStacked
     .productOverviewBody
     .productGrid2x2 / .productGrid3x1
   ========================================================================== */

.productOverview.productOverviewStacked {
    display: block;
    max-width: 86rem;
    margin: 0 auto;
    padding: 4.8rem 2rem 5rem;
    box-sizing: border-box;
}

.productOverview.productOverviewStacked .productOverviewBody {
    max-width: 100%;
    margin: 0 0 2.8rem;
    padding: 0;
}

.productOverview.productOverviewStacked .productOverviewTitle {
    max-width: 100%;
}

.productOverview.productOverviewStacked .productOverviewDesc {
    max-width: 100%;
}


/* ==========================================================================
   PRODUCT IMAGE FLEX GRIDS  Eglobal
   ========================================================================== */

.productGrid2x2,
.productGrid3x1 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.5rem;

    width: 100%;
    margin: 0;
    padding: 0;
}

.productGrid2x2 figure,
.productGrid3x1 figure {
    margin: 0;
    padding: 0;
}

/* Default 2x2 */
.productGrid2x2 figure {
    flex: 0 0 calc(50% - 0.75rem);
}

/* 3 image row layout */
.productGrid3x1 figure {
    flex: 1 1 0;
    min-width: 0;
}

/* First two installation photos larger, product/spec image narrower */
.productGrid3x1 figure:nth-child(1),
.productGrid3x1 figure:nth-child(2) {
    flex-basis: calc(36% - 1rem);
}

.productGrid3x1 figure:nth-child(3) {
    flex-basis: calc(28% - 1rem);
}

.productGrid2x2 img,
.productGrid3x1 img {
    display: block;
    width: 100%;
    height: 17rem;

    object-fit: cover;
    object-position: center center;

    border-radius: 0.55rem;
}

.productGrid3x1 figure:nth-child(3) img {
    object-fit: contain;
    background: #ffffff;
}
/* ==========================================================================
   LINE RANGE PAGE  Elayout fixes
   Page: main#lineRange.productPage
   ========================================================================== */

#lineRange .productOverview.productOverviewStacked {
    display: grid;
    grid-template-columns: minmax(0, 38rem) minmax(0, 50rem);
    gap: 4.5rem;
    align-items: center;
    max-width: 92rem;
    padding: 4.8rem 2rem 5.4rem;
}

#lineRange .productOverview.productOverviewStacked .productOverviewBody {
    margin: 0;
}

#lineRange .productOverview.productOverviewStacked .productMediaWide {
    margin: 0;
}

#lineRange .productOverview.productOverviewStacked .productMediaWide img {
    display: block;
    width: 100%;
    height: 18rem;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
}

/* Feature block */
#lineRange .productAcc[aria-label="ラインレンジの特長"] {
    max-width: 76rem;
    margin: 0 auto;
    padding: 4.2rem 2rem 5rem;
    background: #ffffff;
}

#lineRange .productAcc[aria-label="ラインレンジの特長"] .productAccHeading {
    margin: 0 0 0.85rem;
}

#lineRange .productAcc[aria-label="ラインレンジの特長"] .productAccLead {
    margin: 0 0 1.75rem;
    max-width: 100%;
}

/* Two explanation image/text cards */
#lineRange .productAcc[aria-label="ラインレンジの特長"] .productGrid2x2 {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin: 2.2rem 0 2.4rem;
}

#lineRange .productAcc[aria-label="ラインレンジの特長"] .productGrid2x2 figure {
    width: 100%;
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #dfe8eb;
    border-radius: 0.65rem;
}

#lineRange .productAcc[aria-label="ラインレンジの特長"] .productGrid2x2 img {
    display: block;
    width: 22rem;
    max-width: 48%;
    height: 12rem;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
}

/* Pattern examples */
#lineRange .productAcc[aria-label="ラインレンジの特長"] .productVariants {
    display: flex;
    gap: 1.6rem;
    margin: 2.4rem 0 3rem;
}

#lineRange .productAcc[aria-label="ラインレンジの特長"] .productVariant {
    flex: 1 1 0;
    margin: 0;
    text-align: center;
}

#lineRange .productAcc[aria-label="ラインレンジの特長"] .productVariant img {
    width: 100%;
    height: auto;
    display: block;
}

#lineRange .productAcc[aria-label="ラインレンジの特長"] .productVariantTitle {
    margin: 0.75rem 0 0;
    font-weight: 800;
}

/* Accessory body */
#lineRange .productAccBody {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

#lineRange .productAccMedia img {
    width: 100%;
    height: auto;
    display: block;
}
/* ==========================================================================
   PERM INTERLOCKING BLOCK  Eoverview layout
   Page: main#permInterlockingBlock
   ========================================================================== */

#permInterlockingBlock .permInterlockingOverview {
    display: block;
    max-width: 76rem;
    margin: 0 auto;
    padding: 4.8rem 2rem 5rem;
    box-sizing: border-box;
}

#permInterlockingBlock .permInterlockingOverview .productOverviewBody {
    max-width: 100%;
    margin: 0 0 2.5rem;
}

#permInterlockingBlock .permInterlockingOverview .productOverviewDesc {
    max-width: 100%;
}

#permInterlockingBlock .permInterlockingMedia {
    display: flex;
    align-items: stretch;
    gap: 1.35rem;
    width: 100%;
}

#permInterlockingBlock .permInterlockingMedia figure {
    margin: 0;
    padding: 0;
}

#permInterlockingBlock .permInterlockingMain {
    flex: 0 0 32%;
}

#permInterlockingBlock .permInterlockingColors {
    flex: 0 0 12%;
}

#permInterlockingBlock .permInterlockingWorks {
    flex: 1;
    display: flex;
    gap: 1.35rem;
}

#permInterlockingBlock .permInterlockingWorks figure {
    flex: 1;
}

#permInterlockingBlock .permInterlockingMedia img {
    display: block;
    width: 100%;
    height: 15.5rem;
    object-fit: cover;
    object-position: center;
    border-radius: 0.55rem;
}

#permInterlockingBlock .permInterlockingColors img {
    object-fit: contain;
    background: #ffffff;
}

#permInterlockingBlock .permInterlockingMain img {
    object-fit: contain;
    background: #ffffff;
}
/* Logo link  Eno underline ever */
.siteLogo a,
.headerLogo a,
.footerLogo a {
    text-decoration: none !important;
}

/* kill all interaction states */
.siteLogo a:hover,
.siteLogo a:focus,
.siteLogo a:active,
.headerLogo a:hover,
.headerLogo a:focus,
.headerLogo a:active,
.footerLogo a:hover,
.footerLogo a:focus,
.footerLogo a:active {
    text-decoration: none !important;
}

/* if image is inside anchor */
.siteLogo a img,
.headerLogo a img,
.footerLogo a img {
    display: block;
}
header .siteLogo a:hover,
footer .footerLogo a:hover {
    text-decoration: none !important;
}


/* ==========================================================================
   POLISH PASS — micro-interactions, hover lifts, button-push, page fade-in.
   Animates only transform / opacity / box-shadow / background-color
   (no width/height/margin/padding -> zero layout impact).
   Respects prefers-reduced-motion.
   ASCII-only rules; no Japanese strings -> no mojibake risk.
   ========================================================================== */

/* 1. Smooth in-page anchor scrolling */
html { scroll-behavior: smooth; }

/* 2. Whole-page fade-in on initial load (one-shot, fast) */
@keyframes poracon-page-fade-in {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0,    0); }
}

body > main {
    animation: poracon-page-fade-in 420ms ease-out both;
    will-change: opacity, transform;
}

body > footer {
    animation: poracon-page-fade-in 420ms ease-out 80ms both;
    will-change: opacity, transform;
}

/* 3. Default transition for anchors and form controls */
a,
button,
input,
select,
textarea,
label {
    transition:
        color           0.18s ease,
        background      0.18s ease,
        background-color 0.18s ease,
        border-color    0.18s ease,
        box-shadow      0.20s ease,
        transform       0.18s ease,
        opacity         0.18s ease;
}

/* 4. Generic link hover — gentle opacity dim (skip if a more specific rule wins) */
a:hover { text-decoration: none; }

/* 5. Button-style and CTA elements — push-down on :active */
button:active,
input[type="submit"]:active,
input[type="button"]:active,
.wpcf7-submit:active,
.heroCta:active,
.servicesCta:active,
.fieldTestCta:active,
.inquiryCtaBtn:active,
.thanksBackBtn:active,
.productBack:active,
.faqTab:active,
.contactFormBack:active,
.downloadCard:active,
.bluebutton:active,
.pillBtn:active {
    transform: translate3d(0, 1px, 0);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.10);
}

/* 6. Card-style hover lift — only for cards that are clickable (wrapped in <a>) */
a.newsCard,
a.productCard,
a.caseCard,
a.exampleCard,
a.exampleSubCard,
a.serviceCard,
a.productRelatedCard,
a.otherworksCard,
a.aboutCard {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    will-change: transform;
}

a.newsCard:hover,
a.productCard:hover,
a.caseCard:hover,
a.exampleCard:hover,
a.exampleSubCard:hover,
a.serviceCard:hover,
a.productRelatedCard:hover,
a.otherworksCard:hover,
a.aboutCard:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow:
        0 0.625rem 1.25rem rgba(0, 0, 0, 0.10),
        0 0.125rem 0.375rem rgba(0, 0, 0, 0.06);
}

/* 7. Non-clickable cards — softer shadow on hover so the surface feels alive */
.featureCard,
.termCard,
.faqItem,
.privacyItem,
.designFlowStep,
.methodStepCard,
.branchCard,
.pillSubCard,
.pillCard,
.productAcc,
.sdgsGoalCard {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.featureCard:hover,
.termCard:hover,
.faqItem:hover,
.privacyItem:hover,
.designFlowStep:hover,
.methodStepCard:hover,
.branchCard:hover,
.pillSubCard:hover,
.pillCard:hover,
.sdgsGoalCard:hover {
    box-shadow:
        0 0.5rem 1rem rgba(0, 0, 0, 0.08),
        0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
}

/* 8. Image inside clickable anchors — subtle zoom in place (overflow on parent already clips it) */
a.newsCard img,
a.productCard img,
a.caseCard img,
a.exampleCard img,
a.exampleSubCard img,
a.otherworksCard img,
.hoverZoom img {
    transition: transform 0.45s ease;
    will-change: transform;
}

a.newsCard:hover img,
a.productCard:hover img,
a.caseCard:hover img,
a.exampleCard:hover img,
a.exampleSubCard:hover img,
a.otherworksCard:hover img,
.hoverZoom:hover img {
    transform: scale(1.04);
}

/* 9. FAQ tab pill — soft pop on hover */
.faqTab {
    transition:
        background-color 0.20s ease,
        color            0.20s ease,
        box-shadow       0.20s ease,
        transform        0.20s ease;
}

.faqTab:hover {
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.10);
}

/* 10. Form inputs — gentle focus ring with cyan halo */
.contactPage input[type="text"]:not(.wpcf7-submit):focus,
.contactPage input[type="email"]:not(.wpcf7-submit):focus,
.contactPage input[type="tel"]:not(.wpcf7-submit):focus,
.contactPage select:focus,
.contactPage textarea:focus {
    box-shadow: 0 0 0 0.1875rem rgba(0, 186, 201, 0.18);
}

/* 11. Header pill buttons — already have hover bump in section 7 of base.css; reinforce :active */
.siteHeader .pillBtn:active {
    transform: translate3d(0, 1px, 0);
}

/* 12. Logo link — already has hover scale; harden the timing */
.siteHeader .logoArea a {
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* 13. PDF download cards on brochure-submitted — gold pop on hover */
.contactPage .downloadCard {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}

.contactPage .downloadCard:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 0.5rem 0.875rem rgba(0, 0, 0, 0.14);
}

/* 14. Inquiry CTA buttons (used in footer-injected CTA) */
.inquiryCtaBtn {
    transition:
        background-color 0.20s ease,
        color            0.20s ease,
        transform        0.20s ease,
        box-shadow       0.20s ease;
}

.inquiryCtaBtn:hover {
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.12);
}

/* 15. Accessibility — honour users who request reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:     0.001ms !important;
        animation-delay:        0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:    0.001ms !important;
        transition-delay:       0ms !important;
        scroll-behavior:        auto !important;
    }
}