:root {
    --color-597164: #597164;
    --color-718c69: #718c69;
    --color-e5ebdf: #e5ebdf;
    --color-eef2e7: #eef2e7;
    --color-dce4d3: #dce4d3;
    --color-47634f: #47634f;
    --color-173c32: #173c32;
    --color-edf1e6: #edf1e6;
    --color-f4eae3: #f4eae3;
    --color-e0e9d5: #e0e9d5;
    --color-52654b: #52654b;
    --color-e6eadd: #e6eadd;
    --color-58705a: #58705a;
    --color-87a077: #87a077;
    --color-e1eacd: #e1eacd;
    --color-54654f: #54654f;
    --color-dce8bf: #dce8bf;
    --color-9cac88: #9cac88;
    --color-8da77a: #8da77a;
    --color-f0f3eb: #f0f3eb;
    --color-dbe6ca: #dbe6ca;
    --color-e2e5dd: #e2e5dd;
    --color-5b6459: #5b6459;
    --color-c4cdbb: #c4cdbb;
    --color-fff: #fff;
    --color-66844f: #66844f;
    --color-55684b: #55684b;
    --color-fcfcf8: #fcfcf8;
    --color-365841: #365841;
    --color-fff1ed: #fff1ed;
    --color-aa675c: #aa675c;
    --color-702f25: #702f25;
    --color-547346: #547346;
    --color-52694d: #52694d;
    --color-a6b99a: #a6b99a;
    --space-side: calc(100vw * var(--my-side-margin) / var(--my-width));
} /* Full-site pages share the OHANA visual system. */
.desktop-nav [aria-current] {
    color: var(--color-718c69);
}
.inner-main {
    /* .site-header is position: fixed (home.css), so content needs an explicit
       offset to clear it — it no longer reserves space in normal document flow. */
    padding-top: 110px;
}


.page-hero {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 72px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 6vw;
    align-items: center;
}
.page-hero-copy {
    padding: 20px 0;
    min-width: 0;
}
.page-kicker {
    font: 500 clamp(1rem, 2vw, 20px) / 1.05 'Noto Sans';
    margin: 0;
    color: var(--color-718c69);
    overflow-wrap: anywhere;
}
.page-kicker::first-letter {
    text-transform: uppercase;
}
.page-hero h1 {
    font: 700 clamp(1.75rem, 4vw, 45px) / 1.8 var(--sans);
    margin: 0 0 25px;
    overflow-wrap: anywhere;
}
.page-lead {
    max-width: 620px;
    margin: 0;
}
.page-hero-image {
    overflow: hidden;
    background: var(--color-e5ebdf);
}
.page-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-hero.no-image {
    display: block;
    padding-top: 0;
    padding-bottom: 30px;
}
.page-hero.no-image .page-hero-copy {

}
.article-date {
    font: 500 11px/1.5 var(--sans);
    display: block;
    margin: 0 0 18px;
}



/* .page-content: reusable "standard 1200px centered content box" utility.
   Used both as a plain class on arbitrary elements throughout page-*.php
   templates (e.g. .about-more-inner.page-content, .page-cta.page-content)
   AND, historically, as the single outer wrapper for an entire page's body.
   That outer-wrapper role now belongs to .page-sections instead (below),
   so this rule's box-model is left exactly as it was for every other
   (nested) usage to keep working unchanged. */
.archive-content{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 120px;

}

.page-content > :first-child {
    margin-top: 0;
}
/* .page-sections: the actual outer wrapper emitted by acw_page_chrome_top()/
   acw_page_chrome_bottom() around every fixed-page/archive/single body.
   Horizontal padding stays on this parent (var(--pad)), same as the old
   .page-content box, because every existing section component (.about-intro,
   .company-feature-row, .philosophy-row, etc.) already assumes an
   ambient-padded parent and only centers itself with max-width + margin:auto
   — it does not re-pad itself horizontally. The 120px rhythm between
   sections is flexbox `gap` rather than a child margin-top default:
   gap is set on this container and cannot be silently zeroed out by a
   section's own `margin` shorthand (several components, e.g. .philosophy-row,
   already declare their own margin/padding), so it stays robust regardless
   of what any individual section class declares. A full-bleed band (the
   .about-more/.company-feature/.concept-band/.advisor-band/
   .laka-services-band bands, which set width:100vw + their own margins and
   must add max-width:none) or kind-based rule (.kind-article/.kind-job/
   .kind-report below) can still override width/spacing per section without
   fighting specificity or source-order, since the shared default below is
   zero-specificity. */
.page-sections {
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding: 70px var(--pad) 80px;
}
:where(.page-sections) > :where(*) {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .page-sections {
        gap: 72px;
    }
}
@media (max-width: 600px) {
    .page-sections {
        gap: 56px;
    }
}
.content-section {
    margin: 64px 0 30px;
}
/* /business/* sub-brand pages (page-reair.php, page-leaf-bean.php,
   page-neighborfit.php, page-m8.php, page-laka-creative.php, page-media.php,
   page-real-estate.php): every top-level block is a <section>, alternating
   white/light-green background, with a single .content-band-inner div
   wrapping everything inside it to cap that content at 1200px. Mirrors
   .company-feature's existing band+is-tinted mechanics (below) so all
   section types share one consistent rhythm; .company-feature/.about-intro
   are reused as-is (just gained a .content-band-inner wrapper around their
   existing single child, with their own now-redundant max-width handed off
   to it — see .page-business-detail overrides further down) and
   .company-feature just gets .is-tinted added where the sequence needs it. */
.content-band {
    padding: 120px var(--pad);
}
.content-band.is-tinted {
    background: #f3f8ef;
}
.content-band-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.content-band-inner h2 {
    font: 500 clamp(24px, 2.5vw, 33px) / 1.65 var(--sans-en);
    margin: 0 0 20px;
}
.content-band-inner > p:not(.eyebrow) {
    margin: 0 0 18px;
}
/* Colored card components read better in white when the band they sit on is
   already tinted (avoids a green-on-green box). .page-cta-photo is excluded:
   it supplies its own background (a photo + dark mask, 2026-10-06), and this
   rule's higher specificity would otherwise stomp on it. */
.content-band.is-tinted .page-cta:not(.page-cta-photo),
.content-band.is-tinted .office-promo {
    background: #fff;
}
/* .about-intro/.company-feature-row already center themselves at 1200px for
   every OTHER page that uses them — on the /business/* sub-pages specifically
   they now sit one level inside the shared .content-band-inner wrapper
   instead, so their own width/max-width/margin would just double up on top
   of it and are neutralized here (page-root-business body class, fullsite.php). */
.page-business-detail .about-intro {
    /* width: 100%;
    max-width: none;
    margin: 0; */
}
.page-business-detail .company-feature-row {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
/* /about/ and its children: keep every section's content width consistent
   at the standard .page-content 1200px, instead of .content-section's
   usual 820px reading-width default. Scoped to this page family only via
   the body_class filter in fullsite.php. */
.content-section h2 {
    font: 500 clamp(24px, 2.5vw, 33px) / 1.65 var(--sans);
    margin: 0 0 20px;
}
.content-section p {
    margin: 0 0 18px;
}

.l-grid{
    display: grid;
    grid-template-columns: repeat(12, minmax(0px, 1fr));
    gap: 1.5rem;
}
.wrap{
    padding-inline: var(--space-side);
}
.about-intro {
    width: 90%;
    /* display: grid;
    grid-template-columns: minmax(0, 460fr) minmax(0, 640fr); */
    /* gap: 56px; */
    /* align-items: center; */
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 120px;
}

.about-intro-copy{
    grid-column: 1 / 6;
}
.about-intro-copy h2 {
    font: 700 clamp(24px, 2.5vw, 28px) / 1.65 var(--sans);
    padding-bottom: 30px;
}

@media (max-width: 900px){
    .about-intro-copy h2`
    padding-bottom: 0;

}
/* Brand-name intro variant (ReAir/LEAF&BEAN/NEIGHBORFIT/LAKA/OHANA STREET):
   h2 wraps a logo image instead of text so the heading still carries the
   brand name for accessibility/SEO (alt text) while rendering the real logo
   mark. Each brand's logo file has a very different aspect ratio (LAKA's
   wordmark alone is ~5:1 vs. OHANA STREET's ~2.8:1), so capping only the
   height (as before) made the wider logos render much bigger than the
   others. Capping both height and width and letting the image scale to fit
   keeps their on-page footprint visually consistent (2026-10-06). */
.about-intro-copy h2 .brand-logo {
    display: block;
    max-height: 86px;
    max-width: 270px;
    height: auto;
    width: auto;
}
/* Brand-name intro variant (ReAir/LEAF&BEAN/etc.): h2 holds just the brand
   name, .intro-tagline is the actual headline sentence beneath it. */
.about-intro-copy h2 + .intro-tagline {
    font-weight: 700;
    margin-top: -12px;
    color: var(--ink);
}
.intro-tagline {
    font: 500 clamp(19px, 2vw, 25px) / 1.5 var(--sans);
    margin: 0 0 18px;
}
.about-intro-copy p {
    margin: 0 0 18px;
}
.about-intro-film {
    grid-column: 7 / 13;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.about-intro-film .film-preview {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
/* page-research.php hero only: .research-hero-media is a dedicated div
   wrapping the hero image, with room around it for two soft green circles
   that float behind the photo. Reference: Figma "研究開発ページ" (node
   138:942, 138:943, "背景の円"). The shared .about-intro/.about-intro-film
   component used on other pages is untouched — this wrapper sits around it
   and takes over the grid-column placement instead. */
.research-top{
    position: relative;
    overflow: hidden;
}
.page-root-research .about-intro-film {
    /* position: relative; */
    z-index: 1;
}

.research-hero{
    z-index: 1;
    position: relative;
}
/* .page-root-research .research-top:before,
.page-root-research .research-top:after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: var(--color-eef2e7);
    animation: research-hero-float 9s ease-in-out infinite;
}
.page-root-research .research-top:before {
    width: 43%;
    height: 80%;
    right: 20%;
    top: 0;
    animation-delay: 0s;
}
.page-root-research .research-top::after {
    width: 80%;
    height: 43%;
    right: -18%;
    bottom: -30%;
    animation-delay: -4.5s;
} */
@keyframes research-hero-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3%, -4%); }
}
@media (prefers-reduced-motion: reduce) {
    .research-hero-media:before,
    .research-hero-media:after {
        animation: none;
    }
}
/* related-companies.php: alternating image/text rows introducing each
   partner company, plus the "主な領域" icon grid and the ACW×LAKA connection
   diagram. Reference: Figma "related-companies" (node 84:1320). */
.company-feature {
    width: 100%;
    max-width: none;
    padding-block: 120px;
}

.l-grid.row-reverse .copy,
 .l-grid .media {
    grid-column: 7 / 13;
    order: 2;
}
.l-grid.row-reverse .media,
.l-grid .copy{
    grid-column: 1 / 6;
    order: 1;
}

@media (max-width: 900px){
    .company-feature {
        padding-block: 80px;
    }
    .l-grid .copy{
      order: 2;
    }
    .l-grid .media{
       order: 1;
    }

}

/* .company-feature-copy{
    grid-column: 1 / 6;
}

.l-grid.row-reverse .company-feature-copy{
    grid-column: 7 / 13;
}

.company-feature-media{
    grid-column: 7 / 13;
}
.l-grid.row-reverse .company-feature-media{
    grid-column: 1 / 6;
} */

.company-feature.is-tinted {
    background: #f3f8ef;
}
.company-feature-row {
    max-width: 1200px;
    margin: 0 auto;
}
/* Text-only row (no .company-feature-media sibling), e.g. related-companies'
   OUR ROLES section which just needs the full 1200px width for itself. */
.company-feature-row.is-single {
    grid-template-columns: minmax(0, 1fr);
}
.company-feature-media {
    border-radius: 12px;
    overflow: hidden;
}
.company-feature-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.company-feature-media.is-triptych {
    display: flex;
    gap: 8px;
    aspect-ratio: auto;
    height: 220px;
}
.company-feature-media.is-triptych img {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 100%;
    border-radius: 12px;
}
.company-feature-copy h2 {
    color: var(--muted);
    font: 700 clamp(21px, 2.2vw, 26px) / 1.45 var(--sans);
    margin: 0 0 14px;
}

.company-feature-text{
    line-height: 1.9;

}
.company-feature-text p {

    margin: 0 0 14px;
}
.company-feature-text p:last-child {
    margin-bottom: 0;
}
.advisor-band-inner .company-feature-text p {
    color: var(--color-white);
}
.domain-label {
    font-size: 14px;
    font-weight: 700;
    margin: 28px 0 16px;
}
.domain-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
}
.domain-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.domain-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #edf4e7;
}
.domain-icon img {
    width: 20px;
    height: 20px;
}
.domain-item h4 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
}
.domain-item p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
}
.connection-diagram {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
    flex-wrap: wrap;
}
.connection-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    text-align: center;
}
.connection-badge strong {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}
.connection-badge span {
    display: block;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.4;
}
.connection-times {
    font-size: 26px;
    font-weight: 300;
    color: var(--muted);
}
.connection-arrow {
    width: 28px;
    height: 28px;
    color: var(--ink);
    flex-shrink: 0;
}
.connection-result {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .company-feature-row {
        grid-template-columns: 1fr;
        padding-left: var(--pad);
        padding-right: var(--pad);
    }
    .company-feature-copy,
    .l-grid.row-reverse .company-feature-copy,
    .company-feature-media,
    .l-grid.row-reverse .company-feature-media,
    .l-grid .copy,
    .l-grid .media,
    .l-grid.row-reverse .copy,
    .l-grid.row-reverse .media {
        grid-column: 1 / -1;
    }
    .domain-grid {
        grid-template-columns: 1fr;
    }
    .company-feature-media.is-triptych {
        height: 160px;
    }
}
.about-more {
    background: var(--paper);
    /* Full-bleed band: break out of .page-content's horizontal padding to span the
       full viewport width, then re-apply --pad so .about-more-inner still lines up
       with the heading/breadcrumb above it. */
    /*
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 70px var(--pad) 8px; */
}
.about-more-inner {
    padding-bottom: 40px;
}
.about-more .eyebrow {
    color: var(--color-52654b);
}
.about-more h2 {
    font: 500 clamp(24px, 2.5vw, 33px) / 1.65 var(--sans-en);
    margin: 0 0 14px;
}
.about-more p {
    margin: 0;
}
.photo-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.photo-card.page-card {
    background: #fff;
}
.photo-card {
    padding-top: 0;
    overflow: hidden;
}
.photo-card .card-media {
    display: block;
    aspect-ratio: 4/3;
    margin: 0 -36px 20px;
    width: calc(100% + 72px);
    overflow: hidden;
}
.photo-card .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
/* Override .page-card's lift + tinted-background hover with the zoom + dimmed
   text pattern used for photo cards elsewhere on the site. */
.about-more .photo-card:hover {
    background: #fff;
    transform: none;
}
.about-more .photo-card:hover .card-media img {
    transform: scale(1.05);
}
.photo-card .eyebrow,
.photo-card h3,
.photo-card p {
    transition: opacity 0.25s ease;
}
.about-more .photo-card:hover .eyebrow,
.about-more .photo-card:hover h3,
.about-more .photo-card:hover p {
    opacity: 0.8;
}
/* related-companies card: LAKA is a wordmark logo, not a photo, so it sits
   centered on a white plate instead of being cropped like the other cards. */
.photo-card .card-media.card-media-logo {
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-card .card-media.card-media-logo img {
    width: 60%;
    height: auto;
    object-fit: contain;
}
/* about.php's closing CTA: the whole card is now the link (.page-cta is an <a>),
   so "詳しく見る" is a non-interactive <span> styled with the same pill+arrow-badge
   button design used elsewhere (.curated-home / .inner-connect .text-link). */
.about-more .page-cta .text-link {
    gap: 16px;
    background: var(--color-white);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 4px 4px 24px;
    min-height: 52px;
    justify-content: space-between;
    width: 240px;
    transition: background 0.2s;
}
.about-more .page-cta:hover .text-link {
    background: var(--line);
}
.about-more .page-cta .text-link .link-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--ink);
    color: transparent;
    font-size: 0;
    overflow: hidden;
}
.about-more .page-cta .text-link .link-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.32184 0L5.0928 1.32279L8.60499 4.99905H0V6.87233H8.60499L5.0928 10.5423L6.32184 11.8714L12 5.93598L6.32184 0Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}
.about-more .page-cta:hover .text-link .link-arrow::before {
    animation: acw-arrow-slide 0.3s ease-in-out;
}
@media (max-width: 1120px) {
    .photo-card .card-media {
        margin: 0 -28px 20px;
        width: calc(100% + 56px);
    }
}
@media (max-width: 900px) {
    .about-intro {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .about-intro-copy,
    .about-intro-film,
    .research-hero-media {
        grid-column: 1 / -1;
    }

    .about-intro-film{
       order: 1;
    }
    .about-intro-copy {
        order: 2;
    }
    .photo-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .photo-card .card-media {
        margin: 0 -24px 20px;
        width: calc(100% + 48px);
    }
}
@media (max-width: 600px) {
    .photo-cards {
        grid-template-columns: 1fr;
    }
}
/* Plain inline links (e.g. tel: numbers) still get an animated underline on
   hover; arrow/button-style links (.text-link / .pill-link) are excluded —
   those use the pill-button hover treatment instead, never an underline.
   .underline-link (below) is also excluded — it always shows its underline
   and uses its own hover animation instead of this grow-from-0 one. */
.page-sections a:not(.page-card):not(.news-item):not(.text-link):not(.pill-link):not(.underline-link) {
    position: relative;
}
.page-sections a:not(.page-card):not(.news-item):not(.text-link):not(.pill-link):not(.underline-link):after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s;
}
.page-sections a:not(.page-card):not(.news-item):not(.text-link):not(.pill-link):not(.underline-link):hover:after {
    width: 100%;
}
/* .underline-link: the underline is always visible (company.php's "株式会社
   LAKA" link). On hover, a second accent-colored underline sweeps in over it
   left-to-right, so the underline visibly "moves" instead of just sitting
   there — rather than growing from nothing like the generic link above. */
.underline-link {
    position: relative;
    display: inline-block;
    text-decoration: underline;
    /* border-bottom: 1px solid var(--line); */
    padding-bottom: 2px;
}
.underline-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: var(--ink);
    transition: width 0.3s;
}
.underline-link .link-arrow {
    margin-left: 4px;
    font-size: 0.85em;
}
.underline-link:hover .link-arrow {
    transform: translate(2px, -2px);
}
.underline-link:hover:after {
    width: 100%;
}







.card-arrow {
    position: absolute;
    right: 28px;
    bottom: 22px;
    font-size: 22px;
    display: inline-block;
    transition: transform 0.2s;
}
.page-card:hover .card-arrow {
    transform: translate(3px, -3px);
}


























.page-note {
    color: var(--color-54654f);
    line-height: 2;
    margin: 20px 0;
}
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 40px 0;
}
.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
}
.pagination .page-numbers.current {
    background: var(--ink);
    color: var(--color-white);
    border-color: var(--ink);
}
.pagination .page-numbers.dots {
    border: 0;
}
/* archive-news.php / taxonomy-news_category.php: prev/next page links,
   styled as an icon-only circular arrow button (no visible label — the
   page label stays available to screen readers via .sr-only; not the
   numbered .pagination component above). */
.page-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 40px 0 0;
    margin-top: 20px;
}
.page-pager-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ink);
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
}
/* Arrow is drawn as a pseudo-element SVG (same icon as .text-link/.pill-link's
   .link-arrow), not the literal "↗" text — the span's text is kept in markup
   for consistency with the rest of the site but visually hidden here. The
   icon art is a plain rightward arrow, so .page-pager-prev mirrors it
   horizontally to point left; hover slides each button toward the page it
   links to instead of sharing one diagonal direction. */
.page-pager-arrow .link-arrow {
    position: relative;
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: transparent;
    font-size: 0;
    overflow: hidden;
}
.page-pager-arrow .link-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.32184 0L5.0928 1.32279L8.60499 4.99905H0V6.87233H8.60499L5.0928 10.5423L6.32184 11.8714L12 5.93598L6.32184 0Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}
.page-pager-prev .link-arrow::before {
    transform: scaleX(-1);
}
.page-pager-prev {
    margin-right: auto;
}
.page-pager-next {
    margin-left: auto;
}
.page-pager-prev:hover {
    transform: translate(-3px, 0);
}
.page-pager-next:hover {
    transform: translate(3px, 0);
}
.detail-back {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--pad) 60px;
    font-size: 13px;
}
/* Footer-wide CTA band (footer-acw.php, every page). Two tiles: a solid-color
   "CONTACT" tile and a photo-backed stack of two tiles ("WORK WITH US" /
   "VISIT OHANA"), each a whole-card link using the shared .text-link.on-dark
   pill button (readable on both the tinted solid tile and the photo tiles). */
.inner-connect {
    position: relative;
    overflow: hidden;
    background: var(--paper);
}
/* Soft, slowly-drifting mesh-gradient backdrop in the 3 brand accent hues
   (green / teal / pink), paled toward white. Reference: the blurred moving
   gradient on https://authority-air.co.jp/anniversary/ — same technique
   (animated CSS custom properties driving stacked radial-gradient "blobs",
   registered via @property so the browser can interpolate color/position/
   size smoothly). */
.inner-connect::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #fff;
    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2));
    animation: connect-gradient-drift 16s linear infinite alternate;
}
@keyframes connect-gradient-drift {
    0% {
        --x-0: 15%; --y-0: 20%; --c-0: hsla(87.5, 38%, 86%, 0.9);
        --x-1: 75%; --y-1: 30%; --c-1: hsla(181.6, 38%, 86%, 0.9);
        --x-2: 40%; --y-2: 88%; --c-2: hsla(351.3, 45%, 88%, 0.85);
        --s-start-0: 5%; --s-end-0: 60%;
        --s-start-1: 5%; --s-end-1: 65%;
        --s-start-2: 5%; --s-end-2: 55%;
    }
    100% {
        --x-0: 70%; --y-0: 75%; --c-0: hsla(87.5, 42%, 89%, 0.9);
        --x-1: 20%; --y-1: 82%; --c-1: hsla(181.6, 42%, 89%, 0.9);
        --x-2: 85%; --y-2: 18%; --c-2: hsla(351.3, 48%, 90%, 0.85);
        --s-start-0: 5%; --s-end-0: 60%;
        --s-start-1: 5%; --s-end-1: 65%;
        --s-start-2: 5%; --s-end-2: 55%;
    }
}
@property --x-0 { syntax: '<percentage>'; inherits: false; initial-value: 15%; }
@property --y-0 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --c-0 { syntax: '<color>'; inherits: false; initial-value: hsla(87.5, 38%, 86%, 0.9); }
@property --s-start-0 { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --s-end-0 { syntax: '<percentage>'; inherits: false; initial-value: 60%; }
@property --x-1 { syntax: '<percentage>'; inherits: false; initial-value: 75%; }
@property --y-1 { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --c-1 { syntax: '<color>'; inherits: false; initial-value: hsla(181.6, 38%, 86%, 0.9); }
@property --s-start-1 { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --s-end-1 { syntax: '<percentage>'; inherits: false; initial-value: 65%; }
@property --x-2 { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
@property --y-2 { syntax: '<percentage>'; inherits: false; initial-value: 88%; }
@property --c-2 { syntax: '<color>'; inherits: false; initial-value: hsla(351.3, 45%, 88%, 0.85); }
@property --s-start-2 { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --s-end-2 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@media (prefers-reduced-motion: reduce) {
    .inner-connect::before {
        animation: none;
    }
}
.connect-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    min-height: 520px;
}
.connect-tile {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 16px;
    padding: 40px;
    overflow: hidden;
}
.connect-tile-solid {
    background: var(--color-main);
    color: var(--ink);
}
.connect-tile-solid .connect-tile-text {
    color: var(--muted);
}
.connect-tile-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.connect-tile-photo {
    flex: 1;
    color: #fff;
}
.connect-tile-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.connect-tile-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(26, 58, 46, 0.15), rgba(26, 58, 46, 0.75));
}
.connect-tile-title {
    font: 700 clamp(26px, 3vw, 40px) / 1.2 var(--sans);
    letter-spacing: 0.02em;
}
.connect-tile-subtitle {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin-top: 6px;
}
.connect-tile-text {
    font-size: 14px;
    line-height: 1.9;
    margin-top: 18px;
    max-width: 320px;
}
.site-footer nav {
    gap: 30px 25px;
}
.sitemap-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px;
}
.sitemap-groups section {
    min-width: 0;
}
.sitemap-groups section:first-child {
    grid-column: 1/-1;
}
.sitemap-groups h2 {
    font-size: 23px;
    font-weight: 500;
    margin: 0 0 20px;
}
.sitemap-groups ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sitemap-groups li a,
.sitemap-groups li span {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    font-size: 14px;
    line-height: 1.8;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
}
.sitemap-groups li span{
    border-bottom: none;
}
.sitemap-groups li.depth-1 {
    padding-left: 16px;
}
.sitemap-groups li.depth-2 {
    padding-left: 32px;
}
/* page-history.php / page-sitemap.php: these two pages have no .page-content
   wrapper of their own, so their body content was rendering edge-to-edge.
   Requested (2026-10-05) to cap and center it like the rest of the site. */
.p-history-inner,
.sitemap-groups {
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
}
/* privacy / site-policy / contact-thanks / careers-thanks: narrower reading
   column requested (2026-10-05). Scoped via the bare-slug body classes
   (fullsite.php body_class filter) since these pages also lack a
   .page-content wrapper. */
.privacy-sections,
.site-policy-sections,
.contact-section,
.p-history-inner, .sitemap-groups{
    padding-bottom: 120px;
}
.privacy .content-section,
.site-policy .content-section,
.thanks .content-section,
.thanks .page-cards {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}


.error-number {
    font: 500 clamp(90px, 15vw, 180px) / 1 var(--sans);
    color: var(--color-8da77a);
    margin: 0 0 30px;
}
.phone-link {
    font: 500 32px/1.6 var(--sans);
}

@media (max-width: 600px) {
    .content-section h2{
        font-size: 18px;
        font-weight: 700;
        line-height: normal;


    }


}




.form-field small.optional {
    background: var(--color-e2e5dd);
    color: var(--color-5b6459);
}















.kind-report .page-sections > * {
    max-width: 1100px;
}
/* Custom-post-type article pages (news/people articles via kind-article,
   job postings via kind-job): 1-column layout capped at 700px, reference:
   https://j-security.co.jp/news/20260924sotd/ (title/meta/image/body all
   share one narrow centered column instead of the default 2-col hero). */
.kind-article .page-sections > *,
.kind-job .page-sections > * {
    max-width: 700px;
}
.kind-article .page-hero {
    display: block;
    max-width: 700px;
    padding-bottom: 40px;
}
.kind-article .page-hero-image {
    margin-top: 28px;
}
.kind-article .page-lead {
    max-width: none;
}
/* single-news.php: article detail layout (title / date+category / thumbnail /
   body in one 900px-wide centered column), replaces the shared .page-hero
   for this template (acw_page_chrome_top($meta, false, false)). */
.news-detail {
    max-width: 900px;
    margin: 0 auto;
}
.news-detail-title {
    font: 700 clamp(1.5rem, 3.4vw, 38px) / 1.5 var(--sans);
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}
.news-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}
.news-detail-date {
    font: 500 13px/1.5 var(--sans);
    color: var(--muted);
}
.news-detail-category {
    font: 500 13px/1.5 var(--sans);
    letter-spacing: 0.08em;
    color: var(--color-718c69);
}
.news-detail-thumb {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 36px;
    background: var(--color-e5ebdf);
}
.news-detail-thumb img {
    display: block;
    width: 100%;
    height: auto;
}
/* Overrides the shared .detail-back (max-width:1240px + side padding, meant
   for a full-width direct main child) since here it sits flush inside the
   900px .news-detail column instead. */
.news-detail .detail-back {
    max-width: none;
    margin: 0;
    padding: 24px 0 0;
}
.related-news {
    max-width: 900px;
    margin: 56px auto 120px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}
.related-news h2 {
    font: 500 clamp(20px, 2.2vw, 26px) / 1.5 var(--sans);
    margin: 0 0 24px;
}
/* related-companies.php OUR ROLES section's nested "連携の事例" row
   (.works-together): 3-column grid of photo cards. Also still used
   standalone by business.php-style 2-up layouts elsewhere if needed. */
.works-together {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid var(--line);
}
.business-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.business-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(26, 58, 46, 0.07);
}
.business-card .card-media {
    display: block;
    aspect-ratio: 16/9;
}
.business-card .card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.business-card-body {
    padding: 22px 24px 26px;
}
.business-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: var(--color-eaf0e2);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 10px;
}
.business-card-body h3 {
    font-size: 20px;
    margin: 0 0 4px;
}
.business-card-body .eyebrow {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
}
.business-card-body p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0 0 16px;
}
@media (max-width: 900px) {
    .business-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .business-cards {
        grid-template-columns: 1fr;
    }
}
/* reair/leaf-bean/neighborfit/m8/media/real-estate.php: service list cards.
   Plain eyebrow+h3+p; .step-number variant adds a big numeral above (ReAir's
   numbered SERVICE steps). Reference: Figma nodes 101:2435, 103:1552,
   105:1402, 107:824, 107:964, 107:2727. */
.service-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.service-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px -8px rgba(22, 72, 60, 0.1);
}

.__white .service-card{
    background: #f3f8ef;

}
.service-card .card-media {
    display: block;
    aspect-ratio: 16/10;
}
.service-card .card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-card-body {
    padding: 20px 20px 24px;
}
.service-card-body .step-number {
    display: block;
    font: 500 19px var(--sans);
    color: var(--color-main);
    margin-bottom: 4px;
}
.service-card-body .eyebrow {
    font-size: 13px;
    margin-bottom: 4px;
}
.service-card-body h3 {
    font-size: 20px;
    margin: 0 0 8px;
    font-weight: 700;
}
.service-card-body p {
    margin: 0;
}
@media (max-width: 900px) {
    .service-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .service-cards {
        grid-template-columns: 1fr;
    }
}
/* ReAir's SPACE section: plain photo cards, no button. */
.space-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}
.space-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f3f8ef;
    border-radius: 8px;
    overflow: hidden;
}
.space-card .card-media {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
}
.space-card .card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.space-card-body {
    padding: 14px 8px 18px;
    text-align: center;
}
.space-card-body .eyebrow {
    font-size: 14px;
    margin-bottom: 2px;
}
.space-card-body h4 {
    font-size: 16px;
    margin: 0;
    font-weight: 700;
}
@media (max-width: 900px) {
    .space-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .space-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* ReAir's FLOW section: numbered icon-circle process diagram. Steps share the
   row evenly (flex: 1 1 0) instead of a fixed width, so 7 steps + 6 arrows
   always sit in one clean row regardless of container width -- the old fixed
   108px steps + flex-wrap let the row break unevenly. The arrow's margin-top
   is sized to land on the icon-circle's vertical center (step-number line-
   height 16px + 6px gap + half the 64px icon, minus half the 18px arrow),
   so it stays aligned to the icon even though each step's caption text wraps
   to a different number of lines (2026-10-06). */
.flow-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
}
.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.flow-step .step-number {
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: var(--color-main);
}
.flow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    flex-shrink: 0;
}
.flow-icon img {
    width: 22px;
    height: 22px;
}
.flow-step p {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}
.flow-arrow {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
    margin-top: 45px;
}
@media (max-width: 900px) {
    .flow-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px 8px;
    }
    .flow-step {
        flex: unset;
        width: auto;
    }
    .flow-arrow {
        display: none;
    }
}
@media (max-width: 480px) {
    .flow-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Compact colored box with a small photo strip (M8/real-estate STATUS bands). */
.office-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--color-eaf0e2);
    border-radius: 10px;
    padding: 36px 44px;
}
.office-promo-copy .chapter {
    margin-bottom: 10px;
}
.office-promo-copy h2 {
    font: 700 clamp(22px, 2.5vw, 30px) / 1.3 var(--sans);
    margin: 0 0 12px;
}
.office-promo-copy p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0;
    max-width: 480px;
}
.office-promo-media {
    width: 220px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.office-promo-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 700px) {
    .office-promo {
        flex-direction: column;
        align-items: flex-start;
    }
    .office-promo-media {
        width: 100%;
    }
}
/* Flex row (text/heading + 1-2 pill buttons), e.g. "関連する事業もご覧いただけます。" */
.related-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 40px 0;
    border-top: 1px solid var(--line);
    margin-top: 20px;
}
.related-links-heading {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.related-links-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
/* related-companies.php: LAKA's 3 service areas, as icon cards on a
   full-bleed tinted band. Reference: Figma "related-companies" (node
   148:174). Icons are temporary placeholders (section 7 rule): pen-tool
   (Web/graphic), house (store operation), newspaper (media). */
.laka-services-band {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    background: var(--color-fff1ed);
    padding: 48px var(--pad) 64px;
}
.laka-services-band-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.laka-services-band-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 32px;
}
.laka-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.laka-service-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
}
.laka-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--color-eaf0e2);
}
.laka-service-icon img {
    width: 28px;
    height: 28px;
}
.laka-service-item h3 {
    font-size: 17px;
    margin: 0 0 10px;
}
.laka-service-item p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    text-align: left;
    margin: 0;
}
/* related-companies.php SECTION 03: two role cards ("ACW" / "LAKA") side by
   side with a × between, then a ↓ pointing down to the combined outcome. */
.roles-compare {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-top: 24px;
}
.roles-compare-card {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 24px;
}
.roles-compare-card h3 {
    font-size: 15px;
    margin: 0 0 8px;
}
.roles-compare-tags {
    font-size: 14px;
    color: var(--color-52654b);
    margin: 0 0 10px;
}
.roles-compare-card p:last-child {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}
.roles-compare-op {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 300;
    color: var(--muted);
    flex-shrink: 0;
}
.roles-compare-result {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}
.roles-compare-result span {
    font-size: 22px;
    color: var(--color-main);
    flex-shrink: 0;
}
.roles-compare-result p {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
/* research.php: Figma "research" (node 138:913). LABORATORY's media column
   stacks a wide exterior photo + a 2-across row + a compact facility-info
   card, instead of the single aspect-ratio image .company-feature-media
   normally holds. */
/* .company-feature-media.is-stack {
    aspect-ratio: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 10px;
} */
.lab-photos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lab-photos-wide {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3/2;
}
.lab-photos-wide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lab-photos-row {
    display: flex;
    gap: 10px;
}
.lab-photos-row img {
    flex: 1 1 0;
    min-width: 0;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
}
.lab-info-card {
    display: flex;
    background: #fff;
    border-radius: 10px;
    padding: 18px 20px;
    gap: 18px;
}
.lab-info-card > div {
    flex: 1;
    min-width: 0;
    padding-left: 18px;
    border-left: 1px solid var(--line);
}
.lab-info-card > div:first-child {
    padding-left: 0;
    border-left: none;
}
.lab-info-card dt {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px;
}
.lab-info-card dd {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 700px) {
    .lab-photos-row {
        flex-direction: column;
    }
    .lab-info-card {
        flex-direction: column;
        gap: 14px;
    }
    .lab-info-card > div {
        padding-left: 0;
        border-left: none;
    }
}
/* research.php SECTION 03 "ADVISOR": full-bleed dark band (Figma node
   138:982), no real headshot available so the photo slot stays an icon
   placeholder (assets/images/SVG/user-circle.svg). */
.advisor-band {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    padding: 56px var(--pad);
    background: linear-gradient(155deg, #123a33, #52695f);
    color: #fff;
}

.advisor-band-inner {
    max-width: 1200px;
    margin: 0 auto;
    /* display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap; */
}
.advisor-band-intro {
    /* flex: 1 1 260px; */
}
.advisor-band-intro .chapter {
    color: var(--color-white);
}
.advisor-band-intro h2 {
    color: var(--color-white);
    font: 500 clamp(22px, 2.4vw, 28px)/1.4 var(--sans);
    margin: 0 0 14px;
}

.advisor-band-photo {
    /* flex: 0 0 140px;
    width: 140px;
    height: 160px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center; */
}
.advisor-band-photo img {
    width: 40px;
    height: 40px;
    opacity: 0.85;
}
.advisor-band-profile {
    border-top: 1px solid var(--color-white);
    padding-top: 20px;
    margin-top: 20px;
}
.advisor-band-profile .advisor-role {
    font-size: 14px;
    /* opacity: 0.75; */
    margin: 0 0 6px;
}
.advisor-band-profile .advisor-name {
    font: 500 24px/1.3 var(--sans);
    margin: 0 0 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.advisor-band-profile .advisor-name span {
    font-size: 14px;
    font-weight: 600;
}
.advisor-band-profile .advisor-affil {
    font-size: 14px;
    margin: 0 0 16px;
}
.advisor-band-profile .advisor-quote {
    margin: 16px 0 0;
}
.advisor-quote .quote-mark {
    font-size: 20px;
    font-weight: 700;
    color: #a6cc73;
}
@media (max-width: 900px) {
    .advisor-band{
        padding-block: 80px;
    }
    .advisor-band-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .advisor-band-profile {
        border-left: none;
        padding-left: 0;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }
}
/* research.php: "FROM RESEARCH TO COMFORT" (Figma node 138:1029) — Figma's
   absolute-positioned overlapping circles are translated into a simple
   icon-row + arrow + result pill rather than replicated pixel-for-pixel. */
.research-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.research-outcome-items {
    display: flex;
    gap: 20px;
}
.research-outcome-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100px;
}
.research-outcome-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
}
.research-outcome-icon img {
    width: 24px;
    height: 24px;
    color: var(--ink);
}
.research-outcome-item p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}
.research-outcome-arrow {
    font-size: 18px;
    color: var(--color-main);
}
.research-outcome-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-main);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 28px;
    border-radius: 999px;
    margin: 0;
}
@media (max-width: 600px) {
    .research-outcome-items {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* research.php RELATED LINKS (Figma node 138:1058): thumbnail + 2-line copy
   + arrow, replacing the plain .related-links pill-button band for this
   page only (.related-links itself stays in use elsewhere). */
.link-strip {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    padding: 28px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: 20px;
}
.link-strip-label {
    flex-shrink: 0;
}
.link-strip-label .chapter {
    margin: 0 0 6px;
}
.link-strip-label p:last-child {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}
.link-strip-items {
    display: flex;
    flex: 1;
    gap: 24px;
    flex-wrap: wrap;
}
.link-strip-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 10px;
    transition: background 0.2s;
}
.link-strip-item:hover {
    background: var(--color-eaf0e2);
    text-decoration: none;
}
.link-strip-media {
    flex-shrink: 0;
    width: 72px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
}
.link-strip-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.link-strip-media.card-media-logo {
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
.link-strip-media.card-media-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.link-strip-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.link-strip-body strong {
    font-size: 14px;
}
.link-strip-body span {
    font-size: 14px;
    color: var(--muted);
}
/* Circle stays fixed on hover; only the glyph slides, matching the
   .text-link/.pill-link button hover (reuses the acw-arrow-slide keyframe
   from components.css) instead of translating the whole circle. */
.link-strip-item .link-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--ink);
    color: transparent;
    font-size: 0;
    overflow: hidden;
    flex-shrink: 0;
}
.link-strip-item .link-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.32184 0L5.0928 1.32279L8.60499 4.99905H0V6.87233H8.60499L5.0928 10.5423L6.32184 11.8714L12 5.93598L6.32184 0Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}
.link-strip-item:hover .link-arrow::before {
    animation: acw-arrow-slide 0.3s ease-in-out;
}
/* page-contact.php: whole-page 2-column layout. Reference: Figma "contact"
   (node 140:3) — left: quick-link list, right: intro text + phone + the CF7
   form, all stacked together. Replaces the old top page-cards grid and the
   form-panel's own internal 2-split. */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 56px;
    align-items: start;
    padding-bottom: 120px;
    max-width: 1200px;
    margin:  0 auto;
}
.contact-links {
    display: flex;
    flex-direction: column;
    width: 78%;
}

@media (max-width: 800px){
    .contact-links{
        order: 2;
        width: 100%;
    }

}


/* Reuses .link-strip-item/.link-strip-body/.link-arrow (built for
   research.php's RELATED LINKS) without the thumbnail, just adding the
   row dividers this list needs. */
.contact-links .link-strip-item {
    padding: 22px 4px;
    border-top: 1px solid var(--line);
}
.contact-links .link-strip-item:last-child {
    border-bottom: 1px solid var(--line);
}
.contact-main > p {
    line-height: 2;
}
/* The CF7 field grid (name+company, email+phone side by side) is tuned for
   a full-width panel; force it to stack in this narrower right column
   regardless of viewport width. */
.contact-main .form-grid {
    grid-template-columns: 1fr;
}
@media (max-width: 800px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 80px;
        padding-left: var(--pad);
        padding-right: var(--pad);
    }
}
.form-phone {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 28px 0;
}
.form-phone-label {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    flex-shrink: 0;
}
.form-phone-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-phone .phone-link {
    text-decoration: underline;
}
.form-phone-hours {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 700px) {
    .laka-services {
        grid-template-columns: 1fr;
    }
    .roles-compare {
        flex-direction: column;
    }
    .roles-compare-op {
        justify-content: center;
    }
}
a,
button {
    -webkit-tap-highlight-color: transparent;
}
@media (max-width: 1120px) {
    .page-hero {
        gap: 4vw;
    }
    .page-hero h1 {
        font-size: 33px;
    }



}
@media (max-width: 900px) {
    .page-hero {
        grid-template-columns: 1fr 1fr;
    }
    .page-hero h1 {
        font-size: 28px;
    }
    .page-sections {
        padding-top: 50px;
    }





}
@media (max-width: 600px) {
    .inner-main {
        padding-top: 96px;
    }

    .page-hero {
        display: flex;
        padding-top: 18px;
        padding-bottom: 36px;
        gap: 28px;
        align-items: stretch;
    }
    .page-hero-copy {
        padding: 0;
    }
    .page-hero h1 {
        font-size: 28px;
        margin-bottom: 19px;
    }
    .page-hero.no-image {
        padding-bottom: 18px;
    }


    .page-sections {
        padding-top: 42px;
        padding-bottom: 55px;
    }
    .content-section {
        margin-top: 42px;
    }
    .content-section h2 {
        font-size: 24px;
        line-height: 1.65;
    }
















    .connect-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .connect-tile {
        padding: 28px;
        min-height: 220px;
    }
    .sitemap-groups {
        display: block;
    }
    .sitemap-groups section {
        margin-bottom: 35px;
    }
    .sitemap-groups li a,
    .sitemap-groups li span {
        font-size: 14px;
    }







    .phone-link {
        font-size: 29px;
    }
    .site-footer nav {
        gap: 30px;
    }
}


.research-page-links {
    display: flex;
    gap: 18px 28px;
    flex-wrap: wrap;
    margin-top: 35px;
    font-size: 14px;
}
.research-page-links a {
    border-bottom: 1px solid var(--color-a6b99a);
    padding: 12px 0;
}
.page-hero-image img[src*="lab-sign"] {
    object-fit: contain;
}
.page-sections .poster-button {
    border-radius: 10px;
}
/* page-philosophy.php CONCEPT band: full-bleed video background with a dark
   tint for legible white text. Reference: Figma "philosophy" (node 144:126);
   the video itself is layout-only per the design, so is-tinted uses the
   site's own --ink tone rather than Figma's exact #123f35. */
.concept-band {
    position: relative;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    padding: 80px var(--pad);
    box-sizing: border-box;
}
.concept-band-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.concept-band-media .film-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* .concept-band sits on a dark photo/video band; base.css's global
   h1-h4{color:var(--ink)} rule otherwise wins over the inherited white from
   .concept-band, so this h2 needs its own explicit white. (Was previously
   scoped under a ".page-sections" ancestor that doesn't exist in any
   template, so it never applied -- fixed 2026-10-05.) */
.concept-band-copy,
.concept-band-copy h2 {
    color: var(--color-white);
}


.concept-band-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(23, 59, 49, 0.88), rgba(23, 59, 49, 0.8));
}
.concept-band-copy {
    position: relative;
    z-index: 1;
    max-width: 820px;
}
.concept-band-copy .eyebrow {
    font-size: 20px;
}
.concept-band-kicker {
    font: 700 clamp(20px, 2.2vw, 30px) / 1.6 var(--sans);
    margin: 0 0 14px;
}
.concept-band-copy h2 {
    font: 700 clamp(24px, 2.6vw, 30px) / 1.6 var(--sans);
    margin: 0 0 32px;
}
.concept-band-copy p:last-child {
    font-size: 16px;
    line-height: 2;
    opacity: 0.92;
    margin: 0;
}
.concept-band-text {
    font-size: 24px;
}
/* page-philosophy.php MISSION/VISION/VALUE: label-beside-content rows,
   reused as a generic pattern if another page needs it later. */
.philosophy-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 0;
    width: 90%;
}
.philosophy-row-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink);
    margin: 0;
    padding-top: 4px;
}
.philosophy-row-body h2 {
    font: 700 clamp(20px, 2vw, 24px) / 1.6 var(--sans);
    color: var(--text-body);
    margin: 0 0 20px;
}
.philosophy-row-body > p {
    font-size: 15px;
    line-height: 2.2;
    color: var(--text-body);
    margin: 0;
}
.philosophy-values {
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.philosophy-values dt {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-body);
    margin: 0 0 6px;
}
.philosophy-values dd {
    font-size: 14px;
    line-height: 1.9;
    color: #000;
    margin: 0;
}
@media (max-width: 700px) {
    .philosophy-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .concept-band {
        min-height: 0;
        padding: 56px var(--pad);
    }
}
/* page-message.php: layout reference https://trail-inc.jp/company/ "Message"
   section (layout only — text/photo are ours). Wide text column + a
   narrower portrait with the signature stacked underneath it, rather than
   the site's usual .page-feature 50/50 image+text split. */
.message-feature {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 60px;
    width: 90%;
}
.message-feature-tag {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    border-radius: 3px;
    margin-bottom: 20px;
}
.message-feature-en {
    font: 500 44px/1.2 var(--sans);
    color: var(--color-8da77a);
    margin: 0 0 18px;
    letter-spacing: 0.02em;
}
.message-feature-head h2 {
    font: 700 clamp(22px, 2.4vw, 28px) / 1.7 var(--sans);
    margin: 0 0 48px;
}
.message-feature-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
}
.message-feature-text p {
    font-size: 15px;
    line-height: 2.2;
    margin: 0 0 28px;
}
.message-feature-text p:last-child {
    margin-bottom: 0;
}
.message-feature-portrait img {
    display: block;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 4px;
}
.message-feature-sign {
    text-align: right;
    line-height: 1.9;
    margin: 16px 0 0;
}
.message-feature-sign strong {
    display: block;
    font-size: 18px;
    margin-top: 4px;
}
@media (max-width: 900px) {
    .message-feature-body {
        grid-template-columns: 1fr;
    }
    .message-feature-portrait {
        max-width: 280px;
        margin-left: auto;
    }
    .message-feature-en {
        font-size: 34px;
    }
    /* The <br>s in page-message.php's h2 are tuned for desktop line length;
       at mobile widths they force extra wraps that leave 1-2 character
       orphan lines, so let the heading reflow naturally instead. */
    .message-feature-head h2 br {
        display: none;
    }
}

@media (max-width: 1050px) {
    .desktop-nav,
    .header-contact {
        display: none;
    }
}