:root {
    --accent: #2563eb; /* 鮮やかなブルー(爽やか・知的) */
    --ink: #0f1419; /* 冷たい墨色 */
    --ink-2: #3d4856; /* 副次テキスト(クールグレー) */
    --ink-3: #7e8a99; /* 補足 */
    --paper: #ffffff; /* 純白 */
    --paper-2: #f4f6fa; /* 淡いブルーグレー */
    --rule: #e2e6ec; /* 罫線 */
    --rule-2: #eef1f5;
    --gutter: clamp(20px, 4vw, 56px);
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "palt";
    line-height: 1.9;
    font-weight: 500;
    font-size: 16px;
}
/* 説明文系の <p> は明示的に 500 で底上げ。具体クラス側は font-size を個別に持っているため
   ここでは weight だけ統一する。 */
p {
    font-weight: 500;
}
/* 段落本文中の強調は階層を保つため 700 を全体規定にしておく(個別 override は後段で再設定) */
p strong,
.lede strong,
.sec-sub strong,
.partner-band-lede strong,
.svc-info-lede strong {
    font-weight: 700;
}
::selection {
    background: var(--accent);
    color: #fff;
}

.en,
.num {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-feature-settings: normal;
}
.mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-feature-settings: normal;
}
/* 旧 .serif クラス。日本語は Noto Sans JP に統一する方針のため、明朝は使わず Sans を継承させる(weight でアクセントを付ける) */
.serif {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
}

/* layout */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.container-narrow {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* section spacing — generous */
section {
    position: relative;
}
.sec-pad {
    padding: clamp(96px, 14vw, 180px) 0;
}
.sec-pad-sm {
    padding: clamp(72px, 10vw, 120px) 0;
}

/* headings */
h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5;
    text-wrap: balance;
}

/* eyebrow — minimal, Japanese-style */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}
.eyebrow .jp {
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.18em;
    font-weight: 400;
}

/* section title — refined */
.sec-title {
    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.02em;
    margin-top: 28px;
}
.sec-sub {
    margin-top: 28px;
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 2;
    font-weight: 500;
}

/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 34px;
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    border-radius: 9999px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
}
.btn-primary {
    background: var(--ink);
    color: var(--paper);
}
.btn-primary:hover {
    background: var(--accent);
    color: #fff;
}
.btn-outline-dark {
    color: var(--ink);
    border-color: var(--ink);
}
.btn-outline-dark:hover {
    background: var(--ink);
    color: var(--paper);
}
.btn-outline-light {
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.4);
}
.btn-outline-light:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}
.btn-text {
    padding: 0;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 4px;
}
.btn-arrow svg {
    transition: transform 0.3s ease;
}
.btn:hover .btn-arrow svg {
    transform: translateX(6px);
}

/* reveal — animated via GSAP ScrollTrigger; CSS provides initial state only */
.reveal {
    opacity: 0;
    transform: translateY(24px);
}
.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ───────── Utility bar (Joint Initiative 帯) ─────────
     画面最上部に常時表示。共同事業であることを最初に伝える。 */
.utility-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 110;
    background: #0b1426;
    color: rgba(244, 240, 230, 0.88);
    border-bottom: 1px solid rgba(244, 240, 230, 0.08);
}
.utility-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px var(--gutter);
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.util-tag {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    padding-right: 16px;
    border-right: 1px solid rgba(244, 240, 230, 0.18);
    white-space: nowrap;
}
.util-text {
    flex: 1;
    color: rgba(244, 240, 230, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.util-text strong {
    color: rgba(244, 240, 230, 0.98);
    font-weight: 500;
}
.util-brands {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    vertical-align: middle;
    margin-right: 6px;
}
.util-brands .brand-mark--utility {
    margin-right: 0;
}
.util-x {
    color: rgba(244, 240, 230, 0.55);
    font-weight: 400;
    line-height: 1;
    font-size: 12px;
}
.util-links {
    display: flex;
    align-items: center;
    gap: 20px;
}
.util-link {
    color: rgba(244, 240, 230, 0.92);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.util-link:hover {
    color: var(--accent);
}
.util-link-muted {
    color: rgba(244, 240, 230, 0.55);
}

/* header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition:
        background 0.4s ease,
        border-color 0.4s ease;
    border-bottom: 1px solid transparent;
}
.site-header.scrolled {
    background: rgba(250, 250, 247, 0.85);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom-color: var(--rule);
}
.hd-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--gutter);
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
}
.brand {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--ink);
    text-decoration: none;
}
.brand-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ink);
    text-decoration: none;
    transition: opacity 0.25s ease;
}
.brand-link:hover {
    opacity: 0.65;
}
.brand-role {
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.brand-name {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.brand .sep {
    color: var(--ink-3);
    font-weight: 200;
    padding-top: 12px;
}

/* Brand logo images — 配置場所ごとにサイズだけ調整、見せ方の規律はDESIGN.md準拠 */
.brand-mark {
    display: block;
    width: auto;
    flex: 0 0 auto;
}
.brand-mark--utility {
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}
/* 各ロゴの内側余白の差を吸収して、文字の見かけ高さを揃える。
   fpt_logo.png は内側に上下余白が多い(letters ~60%)ので大きめに、
   white-identity-logo.png は枠ぎりぎりまで詰まっているので小さめに。 */
.brand-mark--utility[src*="FPT_LOGO"] { height: 26px; }
.brand-mark--utility[src*="white-identity-logo"] { height: 14px; }
.brand-mark--header {
    height: 20px;
}
.brand-mark--service {
    /* 横長の CAC identity ワードマークに合わせて視覚高さを調整 */
    height: 24px;
}
.brand-mark--partner {
    height: 30px;
}
.sec-title-logo-w {
    display: inline-block;
    height: 1.35em;
    width: auto;
    vertical-align: -0.28em;
    margin-right: 0.22em;
}
.brand-mark--footer {
    height: 34px;
}
.nav-links {
    display: flex;
    gap: 36px;
}
.nav-links a {
    color: var(--ink);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    position: relative;
    padding: 4px 0;
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.nav-links a:hover::after {
    transform: scaleX(1);
}
.hd-cta {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    box-shadow: 0 6px 18px -8px rgba(37, 99, 235, 0.6);
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}
.hd-cta:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.8);
}

/* ─── FV 上(header に .scrolled が無い間)の特殊状態 ───
   ・サービスロゴを大きく表示
   ・ナビゲーション/CTA は非表示 → スクロールで通常表示 */
.brand-mark--service,
.nav-links,
.hd-cta {
    transition:
        height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.32s ease,
        transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header:not(.scrolled) .brand-mark--service {
    height: clamp(26px, 2.8vw, 40px);
}
.site-header:not(.scrolled) .nav-links,
.site-header:not(.scrolled) .hd-cta {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
}

/* FV — minimal, pale blue tint, breathing */
.fv {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-top: 100px; /* fixed header 分 */
    padding-bottom: 80px;
    overflow: hidden;
    background: #F4F8FC;
}

/* ─ 背景アンビエント:円アニメ ─ */
.fv-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.fv-bubble {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    will-change: transform, opacity;
    background: rgba(37, 99, 235, 0.1);
    filter: blur(0.5px);
}
.fv-bubble--1  { width: 180px; height: 180px; background: rgba(37, 99, 235, 0.20); }
.fv-bubble--2  { width: 300px; height: 300px; background: rgba(96, 165, 250, 0.22); }
.fv-bubble--3  { width: 140px; height: 140px; background: rgba(37, 99, 235, 0.17); }
.fv-bubble--4  { width: 440px; height: 440px; background: rgba(37, 99, 235, 0.14); }
.fv-bubble--5  { width: 240px; height: 240px; background: rgba(147, 197, 253, 0.28); }
.fv-bubble--6  { width: 110px; height: 110px; background: rgba(37, 99, 235, 0.18); }
.fv-bubble--7  { width: 360px; height: 360px; background: rgba(96, 165, 250, 0.16); }
.fv-bubble--8  { width: 210px; height: 210px; background: rgba(37, 99, 235, 0.22); }
.fv-bubble--9  { width: 90px;  height: 90px;  background: rgba(147, 197, 253, 0.24); }
.fv-bubble--10 { width: 270px; height: 270px; background: rgba(37, 99, 235, 0.13); }
.fv-bubble--11 { width: 160px; height: 160px; background: rgba(96, 165, 250, 0.20); }
.fv-bubble--12 { width: 390px; height: 390px; background: rgba(37, 99, 235, 0.10); }
.fv-bubble--13 { width: 120px; height: 120px; background: rgba(147, 197, 253, 0.22); }
.fv-bubble--14 { width: 230px; height: 230px; background: rgba(37, 99, 235, 0.19); }
.fv-bubble--15 { width: 70px;  height: 70px;  background: rgba(37, 99, 235, 0.24); }
.fv-bubble--16 { width: 330px; height: 330px; background: rgba(96, 165, 250, 0.12); }
.fv-bubble--17 { width: 190px; height: 190px; background: rgba(147, 197, 253, 0.18); }
.fv-bubble--18 { width: 100px; height: 100px; background: rgba(37, 99, 235, 0.21); }

/* FV 主要コンテンツは bubbles の上に(.fv-corner / .fv-scroll は
   元から position:absolute なので position 指定は上書きしない) */
.fv > .container {
    position: relative;
    z-index: 1;
}
.fv > .fv-corner,
.fv > .fv-scroll {
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .fv-bubbles { display: none; }
}
.fv > .container {
    position: relative;
    z-index: 1;
}
.fv > .fv-scroll {
    z-index: 2;
}

.fv-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* テキスト領域(左)はワイヤーが透けても可読性を確保するため弱める */
    -webkit-mask-image: radial-gradient(ellipse 45% 50% at 22% 55%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 55%, #fff 90%);
    mask-image: radial-gradient(ellipse 45% 50% at 22% 55%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 55%, #fff 90%);
}
/* FV 下端で背景を白へフェード:pain との境界を柔らかく繋ぐ */
.fv::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 55%,
        var(--paper) 100%
    );
    pointer-events: none;
    z-index: 0; /* .fv-bg(z:0)より DOM 順で後、.container(z:1)より下 */
}
@media (prefers-reduced-motion: reduce) {
    .fv-bg {
        display: none;
    }
}
@media (max-width: 880px) {
    /* モバイルでは KPI と重なるためワイヤフレーム sphere を非表示 */
    .fv-bg {
        display: none;
    }
}

/* FV trust badge — FPTのパワーを即伝える */
.fv-trust {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 56px;
    padding: 18px 24px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    max-width: fit-content;
    flex-wrap: wrap;
}
.fv-trust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0066b3;
    flex: 0 0 auto;
}
.fv-trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 16px;
    border-right: 1px solid var(--rule);
}
.fv-trust-label {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.fv-trust-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.02em;
}
.fv-trust-sep {
    display: none;
}
.fv-trust-meta {
    display: flex;
    gap: 24px;
    font-size: 12px;
    color: var(--ink-2);
    letter-spacing: 0.02em;
}
.fv-trust-meta strong {
    color: var(--ink);
    font-weight: 500;
}
.fv-trust-link {
    margin-left: auto;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 18px;
    border-left: 1px solid var(--rule);
}
.fv-trust-link:hover {
    color: var(--accent);
}
@media (max-width: 720px) {
    .fv-trust-text {
        padding-right: 0;
        border-right: 0;
    }
    .fv-trust-link {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}
.fv-meta {
    position: absolute;
    top: 120px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.fv-meta::before {
    content: "";
    width: 40px;
    height: 1px;
    background: currentColor;
}
.fv h1 {
    font-size: clamp(40px, 5.8vw, 80px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.03em;
    margin: 40px 0 56px;
}
.fv h1 .hl {
    color: var(--accent);
    font-weight: 700;
}
.fv h1 .h1-logo {
    display: inline-block;
    height: 1.5em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.2em;
    position: relative;
    top: -0.08em;
}
.fv .lede {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 2.1;
    color: var(--ink-2);
    margin-bottom: 56px;
    font-weight: 500;
}
.fv .lede strong {
    color: var(--ink);
    font-weight: 700;
}
.fv-cta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}
/* FV 内のボタンは青系へ。他セクションの .btn-primary / .btn-outline-dark は元のまま。 */
.fv .btn-primary {
    /* background-size:200% でグラデを横長に伸ばし、position をずらして hover で滑らかに変化 */
    background-image: linear-gradient(90deg, #1e40af 0%, #2563eb 50%, #38bdf8 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.55);
}
.fv .btn-primary:hover {
    background-position: 100% 0%;
    color: #fff;
    box-shadow: 0 16px 36px -10px rgba(37, 99, 235, 0.75);
    transform: translateY(-2px);
}
.fv .btn-outline-dark {
    color: var(--accent);
    border-color: var(--accent);
}
.fv .btn-outline-dark:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-2px);
}
/* SVG の hit-test が親に伝播しない件への保険(SVG は currentColor で塗られた箇所しか
   ヒットしないことがあるため、ボタン全体で確実に :hover を取れるよう pointer-events を切る) */
.btn > svg {
    pointer-events: none;
}

.fv-corner {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    letter-spacing: 0.5em;
    color: var(--ink-3);
}

.fv-scroll {
    position: absolute;
    bottom: 36px;
    left: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
.fv-scroll .line {
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, var(--ink-3), transparent);
    position: relative;
    overflow: hidden;
    order: 2;
}
.fv-scroll .line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(-100%);
    animation: scrollLine 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scrollLine {
    0% {
        transform: translateY(-100%);
    }
    50%,
    100% {
        transform: translateY(100%);
    }
}

/* ─────────────────────────────────────────────────
   FV redesign — Eyebrow + Headline + KPI strip
   2026-05-21 : 共同事業 × プロジェクト実績の代表値
   ───────────────────────────────────────────────── */

.fv-hero {
    position: relative;
    z-index: 1;
    /* .container の max-width(1240)より広い専用幅 */
    max-width: 1480px;
    padding: clamp(56px, 6.5vw, 96px) clamp(48px, 5vw, 96px);
    /* FV コンテンツ全体を frosted glass で囲う */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 16px;
    box-shadow: 0 12px 40px -16px rgba(15, 30, 70, 0.18);
}

/* 上段 2カラム: 左に headline / 右に EVOLVE サービスロゴ */
.fv-hero-main {
    display: grid;
    /* 左カラムは見出しの最長行(nowrap 設定の .fv-headline-inner)が
       必ず収まる min-content を最小幅に。比率は左右ほぼ均等で重心を中央へ */
    grid-template-columns: minmax(min-content, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 3vw, 56px);
    margin: 0;
}
.fv-hero-left {
    min-width: 0;
}
.fv-hero-right {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* フォームをカラム右端に寄せて視覚バランスを取る */
    min-width: 0;
}

/* サービスロゴ ステージ:正方形比、中央にロゴ、周りに halo + 3 orbits */
.fv-service-stage {
    position: relative;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fv-service-halo {
    display: none;
}
.fv-service-orbit {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    border: 1px dashed rgba(37, 99, 235, 0.22);
    pointer-events: none;
    will-change: transform;
}
.fv-service-orbit--1 {
    width: 82%;
    height: 82%;
    inset: 9%;
}
.fv-service-orbit--2 {
    width: 94%;
    height: 94%;
    inset: 3%;
    border-color: rgba(37, 99, 235, 0.16);
}
.fv-service-orbit--3 {
    width: 106%;
    height: 106%;
    inset: -3%;
    border-color: rgba(37, 99, 235, 0.1);
    border-style: solid;
}
.fv-service-particle {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateX(-50%);
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.18),
        0 0 16px rgba(37, 99, 235, 0.6);
}
.fv-service-orbit--2 .fv-service-particle {
    width: 7px;
    height: 7px;
    top: -3.5px;
    background: #60a5fa;
}
.fv-service-orbit--3 .fv-service-particle {
    width: 6px;
    height: 6px;
    top: -3px;
    background: #93c5fd;
    box-shadow:
        0 0 0 2px rgba(96, 165, 250, 0.18),
        0 0 12px rgba(96, 165, 250, 0.5);
}
.fv-service-logo {
    position: relative;
    z-index: 2;
    display: block;
    width: 84%;
    height: auto;
    max-width: 580px;
    filter: drop-shadow(0 14px 28px rgba(15, 30, 70, 0.2));
    will-change: transform;
}

/* ───────── イラストステージ(FV 右カラム) ───────── */
.fv-media {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 1; /* イラストは正方形を想定。実イラストに合わせて変更 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* 背景は素通し(ガラスカードの色がそのまま見える) */
}
.fv-media-illust {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* イラストを切らずに収める */
    filter: drop-shadow(0 16px 32px rgba(15, 30, 70, 0.18));
}

/* ───────── お問い合わせフォーム(FV 右カラム) ───────── */
.fv-form {
    width: 100%;
    max-width: 460px;
    padding: 28px clamp(20px, 1.8vw, 28px);
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow:
        0 1px 0 rgba(15, 20, 25, 0.04),
        0 18px 40px -20px rgba(15, 30, 70, 0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fv-form-head {
    margin-bottom: 4px;
}
.fv-form-eyebrow {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.fv-form-title {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink);
    line-height: 1.4;
}
.fv-form-lede {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ink-2);
    font-weight: 500;
}
.fv-form-lede strong {
    color: var(--accent);
    font-weight: 700;
}
.fv-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fv-form-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fv-form-req,
.fv-form-opt {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
}
.fv-form-req {
    background: var(--accent);
    color: #fff;
}
.fv-form-opt {
    background: var(--rule-2);
    color: var(--ink-3);
}
.fv-form-field input,
.fv-form-field textarea {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    padding: 11px 12px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}
.fv-form-field input:hover,
.fv-form-field textarea:hover {
    border-color: rgba(37, 99, 235, 0.4);
    background: #fff;
}
.fv-form-field input:focus,
.fv-form-field textarea:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.fv-form-field textarea {
    resize: vertical;
    min-height: 72px;
    font-family: inherit;
}
.fv-form-submit {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow:
        0 8px 18px -6px rgba(37, 99, 235, 0.45),
        0 2px 4px -2px rgba(15, 30, 70, 0.12);
}
.fv-form-submit:hover {
    transform: translateY(-1px);
    background: #1e4fc7;
    box-shadow:
        0 12px 24px -6px rgba(37, 99, 235, 0.55),
        0 4px 8px -2px rgba(15, 30, 70, 0.18);
}
.fv-form-submit:active {
    transform: translateY(0);
}
.fv-form-note {
    margin: 2px 0 0;
    font-size: 10.5px;
    color: var(--ink-3);
    line-height: 1.6;
    letter-spacing: 0.02em;
}
.fv-form-note a {
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.fv-form-note a:hover {
    color: var(--accent);
}

/* ───────── HubSpot フォーム（FV 右カラム） ─────────
   フォームが縦に長く FV が間延びするため、見出しは固定したまま
   フォーム本体だけをカード内でスクロールさせる。 */
.fv-form--hubspot {
    /* head + 内部スクロール領域。カード全体の高さを抑える */
    max-height: min(620px, 82vh);
    overflow: hidden;
}
.fv-hubspot-embed {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(440px, 58vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* スクロールバー分の余白を確保し、内容のガタつきを防ぐ */
    padding-right: 6px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}
.fv-hubspot-embed::-webkit-scrollbar {
    width: 8px;
}
.fv-hubspot-embed::-webkit-scrollbar-thumb {
    background: var(--rule);
    border-radius: 8px;
}
.fv-hubspot-embed::-webkit-scrollbar-track {
    background: transparent;
}
/* スクロール余地があることを示す下端のフェード */
.fv-form--hubspot {
    position: relative;
}
.fv-form--hubspot::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 28px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* 1. Eyebrow ────────────────────────────────────── */
.fv-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin: 0 0 56px;
}
/* footer 用バリアント:FV 下段で中央寄せ表示 */
.fv-eyebrow--footer {
    margin: 72px 0 0;
    justify-content: center;
}
.fv-eyebrow-cred-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
}
.fv-eyebrow-cred-tag {
    font-family: "Noto Sans JP", "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    line-height: 1.4;
}
.fv-eyebrow-cred-logo {
    display: block;
    width: auto;
    flex: 0 0 auto;
}
.fv-eyebrow-cred-logo--cac {
    height: 32px;
}
.fv-eyebrow-cred-logo--fpt {
    height: 44px;
}
.fv-eyebrow-cred-x {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--ink-3);
}

/* 2. Headline ───────────────────────────────────── */
/* 既存 .fv h1 ルール (font-size 80px / weight 700) を上書き */
.fv h1.fv-headline {
    font-size: clamp(30px, 3.8vw, 52px);
    font-weight: 700;
    line-height: 1.85;
    letter-spacing: 0.08em;
    margin: 0 0 32px;
    color: var(--ink);
}
.fv-headline-line {
    display: block;
    overflow: hidden; /* mask reveal の窓 */
    padding-bottom: 0.18em; /* ハイライトの影が下にはみ出る分を見せる */
}
.fv-headline-inner {
    display: inline-block;
    white-space: nowrap; /* 各行(.fv-headline-line)内で折り返さない */
    will-change: transform;
}

/* 「初期移行費 0円」「成果連動型」のハイライト
   ブランドブルー背景・白文字。傾きなし(真っ直ぐ) */
.fv-hl {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    padding: 0.16em 0.42em;
    margin: 0.04em 0.06em;
    line-height: 1.25;
    white-space: nowrap; /* フレーズ内で折り返さない */
    /* ブロックを浮かせる立体感:上側に薄いハイライト、下側に強い影 */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 2px 0 rgba(15, 20, 25, 0.1),
        0 8px 20px -6px rgba(37, 99, 235, 0.45),
        0 18px 36px -14px rgba(15, 30, 70, 0.22);
}
.fv-hl + .fv-hl {
    margin-left: 0.06em;
}

/* 3行目: EVOLVE ロゴ */
.fv-headline-line--logo {
    padding-top: 6px;
}
.fv-headline-logo {
    display: block;
    height: clamp(34px, 4.8vw, 56px);
    width: auto;
}

/* 3. Lede ───────────────────────────────────────── */
.fv-lede {
    font-size: clamp(14.5px, 1.05vw, 16.5px);
    line-height: 2;
    color: var(--ink-2);
    margin: 0 0 40px;
    font-weight: 500;
    max-width: 720px;
}

/* 4. KPI inline ─ ラベル(上) / 大数値(下) を横並びで縦罫線分離 ─
   外側の .fv-hero に glass を適用するので、ここは glass を解除して素通し */
.fv-kpi {
    max-width: 100%;
    margin: 28px 0 36px;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.fv-kpi-list {
    display: flex;
    align-items: stretch;
    gap: clamp(16px, 2vw, 28px);
    margin: 0;
    padding: 0;
}
.fv-kpi-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px; /* 吹き出しの三角分を含めた間隔 */
    padding: 0 clamp(8px, 1.4vw, 16px);
    border-left: 1px solid var(--rule);
    background: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}
.fv-kpi-item:first-child {
    border-left: 0;
}
.fv-kpi-item:hover {
    transform: none;
    box-shadow: none;
}
/* 旧 horizontal-rule/divider は廃止(インライン形式に切替) */
.fv-kpi-rule,
.fv-kpi-divider {
    display: none;
}
.fv-kpi-label {
    /* 吹き出し化:白背景の pill + 下向きの三角ティップ */
    position: relative;
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    line-height: 1;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 10px -6px rgba(15, 30, 70, 0.12);
}
/* 外側の三角(border カラー) */
.fv-kpi-label::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--rule);
    border-bottom: 0;
}
/* 内側の三角(背景カラー)で枠線つき吹き出しを表現 */
.fv-kpi-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -1px);
    border: 6px solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
}
.fv-kpi-num {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-family: "Oswald", "DIN Next", "Bebas Neue", "Impact", "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 3.4vw, 52px);
    color: var(--ink-2); /* グレー(#3D4856 クールグレー) */
    letter-spacing: -0.01em;
    font-feature-settings: "tnum" 1, "lnum" 1;
    line-height: 1;
}
.fv-kpi-sign {
    font-weight: 600;
    margin-right: 0.04em;
    color: inherit; /* num と同じグレーを継承 */
}
.fv-kpi-val {
    display: inline-block;
    min-width: 1.3ch; /* カウント中の桁数変動でレイアウトが暴れないよう */
}
.fv-kpi-unit {
    font-weight: 600;
    font-size: 0.42em;
    margin-left: 0.1em;
    color: var(--ink-3); /* unit は一段薄いグレー */
    letter-spacing: 0;
    transform: translateY(-0.1em);
}
/* 数値の前後に添える小さな日本語注釈(年間 / 削減 / 倍 等) */
.fv-kpi-prefix,
.fv-kpi-suffix {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.3em;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    line-height: 1;
    align-self: flex-end; /* 下寄せ:数字の bottom に揃える */
    padding-bottom: 0.45em; /* 数字の見た目の下端と高さを合わせる微調整 */
    white-space: nowrap;
    flex: 0 0 auto;
}
.fv-kpi-prefix {
    margin-right: 0.55em;
}
.fv-kpi-suffix {
    margin-left: 0.4em;
}
.fv-kpi-note {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin: 14px 0 0;
    line-height: 1.7;
    font-weight: 500;
}

/* CTA spacing ───────────────────────────────────── */
.fv-hero .fv-cta {
    margin-top: 0;
}


/* Responsive ────────────────────────────────────── */
@media (max-width: 880px) {
    /* 2カラム → モバイルは縦積み。フォームは左カラム下に続けて表示 */
    .fv-hero-main {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 40px;
    }
    .fv-hero-right {
        display: block;
    }
    .fv-form {
        max-width: 100%;
    }
    .fv-eyebrow {
        gap: 10px 14px;
        margin-bottom: 36px;
    }
    .fv-eyebrow-cred-item {
        gap: 10px;
    }
    .fv-eyebrow-cred-tag {
        font-size: 9.5px;
        letter-spacing: 0.08em;
    }
    .fv-eyebrow-cred-logo--cac {
        height: 16px;
    }
    .fv-eyebrow-cred-logo--fpt {
        height: 22px;
    }
    .fv-eyebrow-cred-x {
        font-size: 12px;
    }
    .fv h1.fv-headline {
        font-size: clamp(28px, 6.4vw, 44px);
        line-height: 1.5;
        margin-bottom: 28px;
    }
    /* モバイルでは min-content だと右が潰れるので戻す。
       見出し各行は normal で折り返し可に */
    .fv-hero-main {
        grid-template-columns: 1fr;
    }
    .fv-headline-inner {
        white-space: normal;
    }
    .fv-lede {
        font-size: 14px;
        line-height: 1.95;
        margin-bottom: 48px;
    }
    .fv-kpi {
        margin: 20px 0 28px;
    }
    .fv-kpi-list {
        gap: clamp(12px, 3vw, 20px);
    }
    .fv-kpi-item {
        gap: 4px;
        padding: 0 clamp(6px, 2vw, 12px);
    }
    .fv-kpi-num {
        font-size: clamp(28px, 8vw, 40px);
    }
    .fv-kpi-label {
        font-size: 10.5px;
        letter-spacing: 0.04em;
    }
}

/* rule */
.rule {
    height: 1px;
    background: var(--rule);
}

/* big number band — quieter */
.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.stat-cell {
    padding: 80px 40px;
    border-left: 1px solid var(--rule);
    position: relative;
}
.stat-cell:first-child {
    border-left: none;
}
.stat-cell .index {
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 36px;
}
.stat-num {
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: clamp(64px, 8vw, 116px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.stat-num .tilde {
    font-weight: 200;
    color: var(--ink-3);
    margin: 0 6px;
    font-size: 0.5em;
}
.stat-num .unit {
    font-size: 0.32em;
    font-weight: 300;
    margin-left: 8px;
    color: var(--ink-2);
}
.stat-num .accent {
    color: var(--accent);
    font-weight: 300;
}
.stat-label {
    margin-top: 28px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}
.stat-caption {
    margin-top: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

/* partner stripe — 共同事業の「顔」 */
.partner-band {
    background: var(--paper-2);
    position: relative;
    overflow: hidden;
}
.partner-band > .container {
    position: relative;
    z-index: 1;
}

/* FPT brand chip — フルカラーロゴをそのまま表示するため背景なし */
.partner-fpt-mark {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.partner-fpt-mark img {
    height: 40px;
    width: auto;
    display: block;
}
.partner-band-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
}
.partner-band-head {
}
.partner-band-title {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.03em;
    margin: 28px 0 28px;
    position: relative;
    isolation: isolate;
}
.partner-band-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4%;
    width: 115%;
    aspect-ratio: 1370 / 575;
    transform: translateY(-50%);
    background: url("../images/allow_bak.png") no-repeat center / contain;
    opacity: 0.55;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: multiply;
}
@media (max-width: 720px) {
    .partner-band-title::before {
        left: -8%;
        width: 130%;
        opacity: 0.32;
    }
}
.partner-band-lede {
    font-size: 15.5px;
    color: var(--ink-2);
    line-height: 2;
    margin: 0;
    font-weight: 500;
}
.partner-band-lede strong {
    color: var(--ink);
    font-weight: 700;
}

/* 「共同事業」見出し:他セクション(.sec-title)と同じサイズに揃える */
.partner-band-title--xl {
    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.02em;
    margin: 28px 0 28px;
}

.partner-band-logos {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 48px;
    padding: 48px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.partner-logo-v2 {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: var(--ink);
    padding: 12px 0;
    transition: opacity 0.25s ease;
}
.partner-logo-v2:hover {
    opacity: 0.7;
}
.partner-role {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
}
.partner-name {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.partner-name .badge {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.partner-meta-line {
    font-size: 11.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.partner-meta-desc {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--ink-2);
    letter-spacing: 0.02em;
}
.partner-meta-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.partner-meta-list li {
    font-size: 11.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    padding-left: 14px;
    position: relative;
}
.partner-meta-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 6px;
    height: 1px;
    background: var(--ink-3);
}
.partner-x {
    font-weight: 300;
    font-size: 40px;
    color: var(--ink-3);
    align-self: center;
    line-height: 1;
}

.partner-band-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.pbs {
    padding: 8px 24px 8px 0;
    border-right: 1px solid var(--rule);
}
.pbs:last-child {
    border-right: 0;
}
.pbs-v {
    font-weight: 200;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.pbs-plus,
.pbs-u {
    font-size: 0.42em;
    font-weight: 300;
    margin-left: 4px;
    color: var(--ink-2);
}
.pbs-l {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ink-2);
    letter-spacing: 0.04em;
}
@media (max-width: 980px) {
    .partner-band-logos {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 0;
        text-align: left;
    }
    .partner-x {
        font-size: 28px;
    }
    .partner-band-stats {
        grid-template-columns: 1fr 1fr;
        gap: 24px 0;
    }
    .pbs {
        padding: 0 16px 0 0;
    }
    .pbs:nth-child(2) {
        border-right: 0;
    }
}

/* legacy partner styles (他で使う可能性に備えて残す) */
.partner-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: 56px;
    max-width: 980px;
    margin: 0 auto;
}
.partner-logo {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: 0.04em;
}
.partner-logo .badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.partner-x {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 300;
    font-size: 28px;
    color: var(--ink-3);
}
.partner-meta {
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.9;
    letter-spacing: 0.04em;
    text-align: right;
}

/* pains — editorial */
#pain {
    position: relative;
    overflow: hidden;
}
#pain > .container {
    position: relative;
    z-index: 1;
}

/* セクション上部にうっすら配置する英字ラベル(汎用) */
.section-bg-label {
    display: block;
    text-align: center;
    font-size: clamp(44px, 5.4vw, 80px);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    color: rgba(15, 20, 25, 0.08);
    margin-bottom: 4px;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}
.cases-head .section-bg-label,
.cta-band .section-bg-label,
.evo-ba-head .section-bg-label {
    font-size: clamp(32px, 4vw, 60px);
}
/* svc-pin-head は左寄せレイアウトなので、ラベルも左に */
.svc-pin-head .section-bg-label,
.partner-band-head .section-bg-label,
.modules-head .section-bg-label,
.blog-head .section-bg-label,
#news .section-bg-label,
#faq .section-bg-label {
    text-align: left;
    font-size: clamp(32px, 4vw, 60px);
}
/* Blog セクション ─ カルーセル風レイアウト(News とのニュアンス差別化)
   見出し1行 → 中央 featured(横長ヒーロー) → 横並びサムネ列(横スクロール)
   背景は純白で、grey 地の Mid CTA(お問い合わせ)と地色の段差で区切る */
.blog-section {
    background: var(--paper);
}
.blog-section .author-avatar {
    background: var(--paper);
}
.blog-head {
    margin-bottom: clamp(48px, 6vw, 80px);
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(15, 20, 25, 0.12);
}
.blog-headline {
    margin: 0;
}
/* .reveal .sec-title::after の伸長アニメ(0→56px)が blog-head border-bottom と
   重なり「線が太くなったり細くなったり」見えるので、blog-headline では非表示に */
.reveal .blog-headline::after {
    display: none;
}
/* 中央 featured ─ 画像(左)+ 本文(右) を1枚の白カードに収めて立てる */
.blog-section .blog-feature {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    align-items: stretch;
    margin-bottom: clamp(64px, 8vw, 96px);
    background: var(--paper);
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(15, 20, 25, 0.06),
        0 14px 34px rgba(15, 20, 25, 0.12);
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-section .blog-feature:hover {
    transform: translateY(-3px);
    box-shadow:
        0 4px 8px rgba(15, 20, 25, 0.08),
        0 24px 48px rgba(15, 20, 25, 0.2);
}
.blog-section .blog-feature .blog-thumb {
    margin-bottom: 0;
    height: 100%;
}
/* サムネ画像 ─ wrapper に対して cover で全面充填 */
.blog-thumb img,
.blog-carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-section .blog-feature-body {
    padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* カルーセル本体 ─ 横スクロール + scroll-snap */
.blog-carousel {
    position: relative;
}
.blog-carousel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(15, 20, 25, 0.12);
}
.blog-carousel-label {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.blog-carousel-label .jp {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 400;
    color: var(--ink-2);
}
/* prev/next ナビ ─ 円形ボタン */
.blog-carousel-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.blog-carousel-btn {
    appearance: none;
    -webkit-appearance: none;
    background: var(--paper);
    border: 1px solid var(--rule);
    color: var(--ink);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    padding: 0;
}
.blog-carousel-btn:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.blog-carousel-btn:active {
    transform: scale(0.96);
}
.blog-carousel-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
/* viewport + track ─ 横軸だけクリップして、シャドウは上下に逃がす */
.blog-carousel-viewport {
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
}
.blog-carousel-track {
    display: flex;
    gap: 24px;
    will-change: transform;
}
.blog-carousel-track > .blog-carousel-item {
    flex: 0 0 auto;
    width: 280px; /* JS が responsive に上書き */
}
.blog-carousel-item {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-radius: 4px;
    overflow: hidden;
    /* 白地に白カード ─ 横方向の広がりを抑えた縦長シャドウで viewport 端でも自然に */
    box-shadow:
        0 4px 8px -2px rgba(15, 20, 25, 0.06),
        0 18px 28px -10px rgba(15, 20, 25, 0.18);
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-carousel-item:hover {
    transform: translateY(-6px);
    box-shadow:
        0 6px 12px -3px rgba(15, 20, 25, 0.08),
        0 28px 40px -14px rgba(15, 20, 25, 0.25);
}
.blog-carousel-item:hover .blog-side-title {
    color: var(--accent);
}
.blog-carousel-item:hover .blog-carousel-thumb::after {
    transform: scaleX(1);
}
/* full-bleed サムネイル + カテゴリ pill を画像左上に */
.blog-carousel-thumb {
    position: relative;
    aspect-ratio: 4/3;
    margin: 0;
    overflow: hidden;
}
/* サムネ下端のアクセントバー(hover で左→右に伸びる) */
.blog-carousel-thumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-carousel-item .blog-meta {
    padding: 18px 20px 0;
    font-size: 10.5px;
    margin-bottom: 12px;
}
/* カテゴリは pill 形状でハッキリ(featured + carousel カード共通) */
.blog-carousel-item .blog-cat,
.blog-feature .blog-cat {
    display: inline-block;
    padding: 4px 10px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    letter-spacing: 0.16em;
    font-weight: 600;
    font-size: 10px;
}
.blog-carousel-item .blog-meta .en {
    color: var(--ink-3);
    letter-spacing: 0.06em;
}
.blog-carousel-item .blog-side-title {
    padding: 0 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 16px;
    /* タイトル下にも視覚的アンカー */
    letter-spacing: 0.01em;
}
.blog-carousel-item .blog-author {
    margin-top: auto;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--rule-2);
    font-size: 11.5px;
    color: var(--ink-3);
}
@media (max-width: 980px) {
    .blog-section .blog-feature {
        grid-template-columns: 1fr;
    }
}
/* #why, #process, .final は暗背景なので、ラベルは白系の低透過で */
#why .section-bg-label,
#process .section-bg-label {
    text-align: left;
    font-size: clamp(32px, 4vw, 60px);
    color: rgba(255, 255, 255, 0.1);
}
.final .section-bg-label {
    font-size: clamp(32px, 4vw, 60px);
    color: rgba(255, 255, 255, 0.1);
}
/* cases-head は中央寄せなので、sec-title 下の装飾ラインも中央へ */
.reveal .cases-headline::after {
    left: 50%;
    transform: translateX(-50%);
}

/* メイン見出し全体を中央寄せ + アンダーラインも中央へ */
.pain-title {
    text-align: center;
}
.reveal .pain-title::after {
    left: 50%;
    transform: translateX(-50%);
}
/* メイン見出しの上に乗せる小さな前置きライン */
.pain-title-lead {
    display: block;
    font-size: 0.5em;
    font-weight: 500;
    color: var(--ink-2);
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    line-height: 1.2;
}

/* 「お悩み」マーカー風アンダーライン:文字下半分にうっすら帯を敷く */
.pain-hl {
    display: inline-block;
    background-image: linear-gradient(
        transparent 62%,
        rgba(37, 99, 235, 0.28) 62%,
        rgba(37, 99, 235, 0.28) 94%,
        transparent 94%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left bottom;
    padding: 0 0.1em;
}
/* スクロールで画面に入ったタイミングで左→右に引かれるアニメ(JS が is-drawn を付与) */
.pain-hl.is-drawable {
    background-size: 0% 100%;
    transition: background-size 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.pain-hl.is-drawable.is-drawn {
    background-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
    .pain-hl.is-drawable {
        background-size: 100% 100%;
        transition: none;
    }
}

/* Pains セクション ─ FV と地続きの白背景 */
.pain-section {
    background: var(--paper);
    position: relative;
}

/* ════════════════════════════════════════════════════════════
   EVOLVE Promise ━ pain-stage 内に統合された reveal レイヤー
   (pin 後半でロゴ morph + テキスト/カード フェードイン)
   ──────────────────────────────────────────────────────────── */
.pain-stage-promise {
    /* pain-stage に重ねて配置(pain-grid と同じ container 領域) */
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* ヘッダー(fixed, 約 120px)に隠れないよう上は広めに */
    padding: clamp(130px, 14vw, 160px) 0 clamp(40px, 5vw, 60px);
    z-index: 2; /* pain-grid より上、pain-resolve-core (z:3) より下 */
    opacity: 0;
    pointer-events: none;
}
.pain-stage-promise.is-active {
    pointer-events: auto;
}
.pain-stage-promise > .container {
    width: 100%;
}
.pain-stage-promise-head {
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 64px);
}
.pain-stage-promise-eyebrow {
    justify-content: center;
}
.pain-stage-promise-title {
    font-size: clamp(20px, 2.6vw, 36px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-top: 20px;
    color: var(--ink);
    text-align: center;
}
/* タイトル冒頭の "ロゴ用スロット":pain-resolve-logo が morph してくる視覚位置を確保
   常時 opacity 0 で表示しない(visual には morph 元のロゴが居座る)
   vertical-align: middle で text x-height の中心に揃え、文字と自然に並ぶ位置に */
.pain-stage-promise-logo-slot {
    height: 1.9em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.1em;
    margin-left: -0.05em;
    display: inline-block;
    opacity: 0;
    pointer-events: none;
}
.evolve-promise-em {
    color: var(--accent);
    font-weight: 700;
}

/* 5 つのサービス領域カード(横並びの矩形) */
.pain-stage-promise-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(12px, 1.4vw, 22px);
    max-width: 1080px;
    margin: clamp(24px, 3vw, 40px) auto 0;
}
.evolve-promise-card {
    position: relative;
    padding: clamp(24px, 2.6vw, 36px) clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 28px);
    /* frosted glass card:背景の白に対しても「透けている」感が出るよう、
       やや青みのあるグラデーション + 透明度 + ハイライトで構成 */
    background: linear-gradient(
        135deg,
        rgba(232, 240, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.35) 55%,
        rgba(214, 230, 255, 0.45) 100%
    );
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    isolation: isolate; /* ::after の watermark を card 内に閉じ込める */
    transition:
        background 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(37, 99, 235, 0.1),
        0 12px 32px -16px rgba(15, 30, 70, 0.2),
        0 4px 14px -6px rgba(37, 99, 235, 0.22);
}
/* 数字ウォーターマーク:背景に大きく薄く配置(isolation で card 内に閉じ込めて z:-1) */
.evolve-promise-card::after {
    content: attr(data-card-num);
    position: absolute;
    bottom: -18px;
    right: -8px;
    font-family: "Inter", sans-serif;
    font-size: clamp(72px, 7.5vw, 110px);
    font-weight: 900;
    color: rgba(37, 99, 235, 0.07);
    letter-spacing: -0.05em;
    line-height: 1;
    pointer-events: none;
    z-index: -1;
}
.evolve-promise-card:hover {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(37, 99, 235, 0.5);
    transform: translateY(-6px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 22px 46px -18px rgba(37, 99, 235, 0.42);
}
/* タイトル日本語:大きく太く前面に */
.evolve-promise-card-title {
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
    letter-spacing: 0.06em;
    text-align: center;
}
/* 英ラベル:控えめなアクセント */
.evolve-promise-card-en {
    font-family: "Inter", sans-serif;
    font-size: clamp(10px, 0.85vw, 12px);
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
}

@media (max-width: 880px) {
    .pain-stage-promise-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    /* モバイルでは pin が解除されるので、reveal レイヤーは通常表示にする */
    .pain-stage-promise {
        position: relative;
        inset: auto;
        opacity: 1 !important;
        padding: 60px 0 72px;
        pointer-events: auto;
    }
    .pain-stage-promise-logo-slot {
        opacity: 1 !important;
    }
}
@media (max-width: 480px) {
    .pain-stage-promise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    .pain-stage-promise {
        position: relative;
        inset: auto;
        opacity: 1 !important;
        padding: 60px 0 80px;
        pointer-events: auto;
    }
    .pain-stage-promise-logo-slot {
        opacity: 1 !important;
    }
}

/* ════════════════════════════════════════════════════════════
   Pains pinned section ━ 実カードがロゴへ吸収される演出
   ──────────────────────────────────────────────────────────── */
/* スクロール総距離。pin 期間中に吸収→ロゴmorph→reveal が進行するため長め */
.pain-track {
    position: relative;
    height: 260vh;
}
/* sticky で 100vh を貼り付ける(ScrollTrigger の pin もこの要素に効かせる) */
.pain-stage {
    position: sticky;
    top: 0;
    min-height: 100vh;
    padding: clamp(60px, 8vw, 100px) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* 実 pain-cell の transform を最適化 */
.pain-cell {
    will-change: transform, opacity;
}

/* pain-stage 内部の粒子背景。modules-bg の base 位置に乗せて、container は上に被せる */
.pain-stage > .container {
    position: relative;
    z-index: 1;
}
.pain-resolve-bg {
    opacity: 0; /* タグライン直前に GSAP で 0→1 にフェードイン */
    will-change: opacity;
}

/* 中央のロゴ + タグライン(縦積み) */
.pain-resolve-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 2.4vw, 32px);
    z-index: 3;
    pointer-events: none;
    text-align: center;
}
.pain-resolve-logo {
    height: clamp(72px, 8vw, 128px);
    width: auto;
    opacity: 0;
    will-change: transform, opacity;
}
/* ロゴを廃しテキスト見出しへ差し替えた FV 中央コピー */
.pain-resolve-logo--text {
    height: auto;
    display: block;
    font-size: clamp(17px, 5vw, 44px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--ink);
    white-space: nowrap;
}
.pain-resolve-tagline {
    margin: 0;
    font-size: clamp(22px, 3vw, 44px);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.04em;
    line-height: 1.4;
    opacity: 0;
    will-change: transform, opacity;
}

@media (max-width: 880px) {
    /* モバイルでは pin を解除して自然な縦並びに(吸収演出はスキップ) */
    .pain-track {
        height: auto;
    }
    .pain-stage {
        position: relative;
        top: auto;
        min-height: auto;
        padding: 60px 0 72px;
        overflow: visible;
    }
    .pain-resolve-core {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 48px auto 0;
    }
    .pain-resolve-logo,
    .pain-resolve-tagline {
        opacity: 1 !important;
        transform: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pain-track {
        height: auto;
    }
    .pain-stage {
        position: relative;
        min-height: auto;
        padding: 60px 0 80px;
        overflow: visible;
    }
    .pain-cell,
    .pain-resolve-logo,
    .pain-resolve-tagline,
    .pain-head-wrap {
        opacity: 1 !important;
        transform: none !important;
    }
    .pain-resolve-core {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 48px auto 0;
    }
}

/* カード内のカテゴリタグ */
.pain-cell-tag {
    display: inline-flex;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    padding: 2px 0 2px 10px;
    border-left: 3px solid var(--accent);
}


/* お悩みカード:対等 2×2 グリッド(全カード同じ重み) */
.pain-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2.4vw, 32px);
    background: transparent;
}
.pain-cell {
    padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) clamp(26px, 2.8vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    position: relative;
    /* 青の単色枠線 */
    background: var(--paper);
    border: 3px solid var(--accent);
    border-radius: 8px;
    overflow: hidden;
    /* 立体感のための多層シャドウ:近距離のシャープな陰 + 中距離のソフト陰 + 遠距離の青みを帯びた拡散陰 */
    box-shadow:
        0 1px 2px rgba(15, 20, 25, 0.05),
        0 4px 10px -2px rgba(15, 20, 25, 0.06),
        0 16px 32px -8px rgba(15, 20, 25, 0.12),
        0 36px 80px -24px rgba(37, 99, 235, 0.18);
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pain-cell:hover {
    transform: translateY(-8px);
    box-shadow:
        0 1px 2px rgba(15, 20, 25, 0.06),
        0 8px 20px -4px rgba(15, 20, 25, 0.1),
        0 28px 56px -12px rgba(15, 20, 25, 0.18),
        0 56px 120px -32px rgba(37, 99, 235, 0.28);
}

/* 各カード右上のイラスト ─ ::before で配置(背景はグラデ枠線専用にするため) */
.pain-cell--01::before,
.pain-cell--02::before,
.pain-cell--03::before,
.pain-cell--04::before {
    content: "";
    position: absolute;
    top: clamp(14px, 1.4vw, 22px);
    right: clamp(14px, 1.4vw, 22px);
    width: clamp(64px, 7vw, 96px);
    height: clamp(64px, 7vw, 96px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}
.pain-cell--01::before { background-image: url("../images/pain_01.png"); }
.pain-cell--02::before { background-image: url("../images/pain_02.png"); }
.pain-cell--03::before { background-image: url("../images/pain_03.png"); }
.pain-cell--04::before { background-image: url("../images/pain_04.png"); }

/* 左上の数字とその下線は非表示(右下のウォーターマークだけを残す) */
.pain-num {
    display: none;
}

.pain-body {
    position: relative;
    z-index: 1;
}
.pain-cell h3 {
    font-size: clamp(11px, 1.15vw, 15px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
    letter-spacing: 0;
    /* 必ず 1 行で表示 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 右上イラスト(::before)を避けるための余白 */
    padding-right: clamp(58px, 6.4vw, 96px);
}
/* 強調キーワード(青) */
.pain-em {
    color: var(--accent);
}
.pain-cell p {
    margin: 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 2;
    /* 右上のイラスト分の余白は不要(上に移動したため) */
    padding-right: 0;
    font-weight: 500;
}

/* ───────── Service overview · Before/After (refined) ───────── */
#service {
    position: relative;
    overflow: hidden;
}
#service .container {
    position: relative;
    z-index: 1;
}

/* — bottom-right concentric arcs with orbiting dots — */
.svc-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    color: var(--accent);
    overflow: hidden;
}
.svc-bg-svg {
    display: block;
    width: 100%;
    height: 100%;
}
.svc-arc-rings circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.1;
    opacity: 0.28;
    stroke-dasharray: 2.5 6;
    vector-effect: non-scaling-stroke;
}
.svc-arc-dots circle {
    fill: currentColor;
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.85));
}
/* 各粒子に別々の色 — modules セクションのパレットに合わせて知的な青~紫系で散らす */
.svc-arc-dots circle:nth-child(1) { fill: #2563eb; filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.85)); }
.svc-arc-dots circle:nth-child(2) { fill: #38bdf8; filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.85)); }
.svc-arc-dots circle:nth-child(3) { fill: #8b5cf6; filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.85)); }
.svc-arc-dots circle:nth-child(4) { fill: #0ea5e9; filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.85)); }
.svc-arc-dots circle:nth-child(5) { fill: #6366f1; filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.85)); }
.svc-arc-dots circle:nth-child(6) { fill: #06b6d4; filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.85)); }
.svc-arc-dots circle:nth-child(7) { fill: #a855f7; filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.85)); }
.svc-arc-dots circle:nth-child(8) { fill: #f472b6; filter: drop-shadow(0 0 10px rgba(244, 114, 182, 0.85)); }

@media (prefers-reduced-motion: reduce) {
    .svc-arc-dots {
        display: none;
    }
}

.svc-head {
    margin-bottom: 88px;
}
#service .sec-title .hl {
    color: var(--accent);
    font-weight: 700;
}
#service .sec-sub strong {
    color: var(--ink);
    font-weight: 700;
    border-bottom: 1px solid rgba(37, 99, 235, 0.3);
    padding-bottom: 1px;
}

/* — Hero card: loop diagram + info panel —
     Wrap is OUTSIDE .container so the hero gets its own wider max-width
     while the section header stays aligned to the standard 1240 container. */
.svc-hero-wrap {
    position: relative;
    z-index: 1;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.svc-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(56px, 6vw, 112px);
    align-items: center;
    padding: clamp(40px, 5vw, 80px) clamp(36px, 5vw, 80px);
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow:
        0 1px 0 rgba(15, 20, 25, 0.02),
        0 34px 90px -52px rgba(15, 20, 25, 0.22);
}

/* — Loop diagram — */
.svc-loop {
    position: relative;
    width: 100%;
    max-width: 820px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    color: var(--accent);
}
.svc-loop-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.svc-loop-node {
    position: absolute;
    width: 192px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    text-align: left;
    padding: 20px 20px 18px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 10px 26px -18px rgba(15, 20, 25, 0.22);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}
.svc-loop-node:hover {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 18px 36px -18px rgba(37, 99, 235, 0.42);
    transform: translate(-50%, -50%) translateY(-3px);
}
.svc-loop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.svc-loop-step {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--accent);
    font-weight: 500;
}
.svc-loop-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    opacity: 0.85;
}
.svc-loop-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.svc-loop-desc {
    font-size: 11.5px;
    color: var(--ink-2);
    line-height: 1.75;
    letter-spacing: 0.01em;
}
.svc-loop-tag {
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    color: var(--accent);
    padding-top: 8px;
    border-top: 1px solid var(--rule-2);
}

/* Position nodes around the ring with generous spacing between them. */
.svc-loop-node--n {
    left: 50%;
    top: 12%;
}
.svc-loop-node--ne {
    left: 85%;
    top: 31%;
}
.svc-loop-node--se {
    left: 85%;
    top: 69%;
}
.svc-loop-node--s {
    left: 50%;
    top: 88%;
}
.svc-loop-node--sw {
    left: 15%;
    top: 69%;
}
.svc-loop-node--nw {
    left: 15%;
    top: 31%;
}

.svc-loop-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid rgba(37, 99, 235, 0.35);
    box-shadow: 0 14px 36px -16px rgba(37, 99, 235, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
}
/* ロゴ差し替え時は円形装飾を解除して中央にロゴだけ置く */
.svc-loop-core.svc-loop-core--logo {
    background: transparent;
    border: 0;
    box-shadow: none;
    aspect-ratio: auto;
    border-radius: 0;
    width: auto;
    max-width: 38%;
}
.svc-loop-core-logo {
    display: block;
    width: 100%;
    height: auto;
}
.svc-loop-core-tag {
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
}
.svc-loop-core-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* — Info panel — */
.svc-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 460px;
}
.svc-info .ba-tag {
    align-self: flex-start;
}
.svc-info-title {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.7;
    letter-spacing: 0.02em;
    margin: 0;
}
.svc-info-title-logo {
    display: inline-block;
    height: 1.6em;
    width: auto;
    vertical-align: middle;
    position: relative;
    top: -0.08em;
    margin-right: 0.25em;
}
.svc-info-title-hl {
    display: inline-block;
    background: #1e40af;
    color: var(--paper);
    padding: 4px 18px;
    margin-top: 10px;
    letter-spacing: 0.04em;
    font-weight: 700;
    box-shadow: 0 6px 18px -8px rgba(30, 64, 175, 0.5);
}
.svc-info-lede {
    font-size: 15.5px;
    line-height: 2;
    color: var(--ink-2);
    margin: 20px 0 0;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   Service overview — Pin scroll 6カード順次表示
   旧 .svc-loop(円形ループ)を置換。.svc-pin-track が ScrollTrigger
   のトリガー、.svc-pin-stage が pin される実体。
   ─────────────────────────────────────────────────────────── */
.svc-pin {
    position: relative;
    background: var(--paper);
}
.svc-pin-track {
    position: relative;
}
.svc-pin-stage {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: clamp(80px, 10vw, 140px) 0;
}
.svc-pin-stage .svc-bg {
    z-index: 0;
}
.svc-pin-stage > .container {
    position: relative;
    z-index: 1;
}
.svc-pin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 96px);
    align-items: center;
    width: 100%;
}
.svc-pin-head {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 620px;
}
.svc-pin-head .sec-title {
    /* sec-title 既定の clamp(30, 3.2vw, 46px) は左カラムには大きすぎるので縮める */
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.55;
    margin: 0;
    /* text-wrap: balance がブラウザによって意図しない改行を生むので無効化 */
    text-wrap: pretty;
}
.svc-pin-head .sec-sub {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.95;
}

/* EVOLVE の 6つのライフサイクル サブ見出し + 説明 + 4項目チェックリスト */
.svc-pin-feature {
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.svc-pin-feature-title {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.svc-pin-feature-logo {
    height: 1.7em;
    width: auto;
    vertical-align: middle;
    display: inline-block;
}
.svc-pin-feature-hl {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 2px 12px;
    border-radius: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.svc-pin-feature-lede {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--ink-2);
    font-weight: 500;
}
.svc-pin-feature-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
}
.svc-pin-feature-list li {
    position: relative;
    padding-left: 22px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
    font-weight: 500;
}
.svc-pin-feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid var(--accent);
}
.svc-pin-feature-list li::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.7em;
    width: 6px;
    height: 3px;
    border-left: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
}
.svc-pin-progress {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    width: fit-content;
    font-family: "Inter", sans-serif;
    font-feature-settings: "tnum" 1;
}
.svc-pin-progress-num {
    font-size: 36px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.01em;
    min-width: 1.6ch;
    display: inline-block;
}
.svc-pin-progress-sep {
    font-size: 18px;
    color: var(--ink-3);
    font-weight: 400;
}
.svc-pin-progress-total {
    font-size: 18px;
    color: var(--ink-3);
    font-weight: 500;
}

/* cards: 1枚ずつ入れ替わる stage。前後のカードが上下からうっすら覗く */
.svc-pin-cards {
    position: relative;
    min-height: 360px;
    height: clamp(340px, 38vh, 420px);
    /* peek が上下にはみ出るので overflow は visible(default) */
}
.svc-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 32px clamp(22px, 2vw, 36px) 30px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    /* peek 中も輪郭が見えるよう、ブランドブルー寄りの薄い実線で枠を付与 */
    border: 3px solid rgba(37, 99, 235, 0.5);
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 1px 0 rgba(15, 20, 25, 0.04),
        0 18px 40px -20px rgba(15, 30, 70, 0.24),
        0 6px 14px -6px rgba(37, 99, 235, 0.22);
    transform-origin: center;
    will-change: transform, opacity;
}
.svc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.svc-card-step {
    font-family: "Inter", sans-serif;
    font-size: clamp(28px, 2.8vw, 36px);
    letter-spacing: 0.04em;
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
}
.svc-card-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    opacity: 0.92;
}
.svc-card-name {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    line-height: 1.4;
    background: var(--accent);
    padding: 6px 14px;
    align-self: flex-start;
    width: fit-content;
}
.svc-card-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--ink-2);
    margin: 0 0 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.svc-card-tag {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--accent);
    padding-top: 12px;
    border-top: 1px solid rgba(37, 99, 235, 0.18);
}

/* reduced-motion: アニメ無しで全カード表示 */
@media (prefers-reduced-motion: reduce) {
    .svc-pin-stage {
        padding: clamp(60px, 8vw, 100px) 0;
    }
    .svc-card {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 880px) {
    .svc-pin-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .svc-pin-head {
        max-width: none;
    }
    .svc-pin-stage {
        padding: clamp(60px, 8vw, 100px) 0;
    }
    /* モバイルは絶対配置をやめて縦に並べる(pin なし) */
    .svc-pin-cards {
        position: relative;
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .svc-card {
        position: relative;
        padding: 22px 20px;
    }
    .svc-pin-feature-list {
        grid-template-columns: 1fr;
    }
}

/* — Shared label/list styles (reused) — */
.ba-tag {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 5px 10px;
    border: 1px solid rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.06);
}
.ba-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.ba-list li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-2);
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.7;
}
.ba-list li:last-child {
    border-bottom: none;
}
.ba-list li::before {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.7;
}
.ba-list--plus li::before {
    content: "+";
    color: var(--accent);
    font-weight: 700;
    font-size: 15px;
}

/* image placeholder — refined */
.img-ph {
    width: 100%;
    background: repeating-linear-gradient(135deg, transparent 0 24px, rgba(0, 0, 0, 0.025) 24px 25px), var(--paper-2);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
}

/* ───────── module animations (in-tab visual) ───────── */
.module-anim {
    position: relative;
    width: 100%;
    aspect-ratio: 16/11;
    background: linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
    border: 1px solid var(--rule);
    overflow: hidden;
    padding: 22px 26px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 16px;
    font-family: "Inter", "Noto Sans JP", sans-serif;
}
.module-anim::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(15, 20, 25, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 20, 25, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 80%);
}
.module-anim > * {
    position: relative;
    z-index: 1;
}
.ma-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
}
.ma-label .en:last-child {
    color: var(--accent);
}

/* === 01 transition === */
.anim-transition .ma-track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    margin: 14px 0;
    padding: 0 8px;
}
.anim-transition .ma-line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 14px;
    height: 1px;
    background: var(--rule);
}
.anim-transition .ma-line::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: var(--accent);
    animation: trk-fill 6s cubic-bezier(0.6, 0.05, 0.3, 1) infinite;
}
.anim-transition .ma-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--ink-3);
    text-align: center;
}
.anim-transition .ma-step .en {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}
.anim-transition .ma-step em {
    font-style: normal;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.anim-transition .s1 .en {
    animation: step-on 6s steps(1) infinite;
    animation-delay: 0s;
}
.anim-transition .s2 .en {
    animation: step-on 6s steps(1) infinite;
    animation-delay: -4s;
}
.anim-transition .s3 .en {
    animation: step-on 6s steps(1) infinite;
    animation-delay: -2s;
}
.anim-transition .ma-flow {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 14px;
    align-items: center;
    padding-top: 4px;
}
.anim-transition .ma-side {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--rule);
    background: var(--paper);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-2);
}
.anim-transition .ma-side i {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--rule);
}
.anim-transition .ma-from i {
    animation: dim-out 6s ease-in-out infinite;
}
.anim-transition .ma-from i:nth-child(3) {
    animation-delay: 0s;
}
.anim-transition .ma-from i:nth-child(4) {
    animation-delay: 1.5s;
}
.anim-transition .ma-from i:nth-child(5) {
    animation-delay: 3s;
}
.anim-transition .ma-to {
    color: var(--ink);
    border-color: var(--ink);
}
.anim-transition .ma-to i {
    background: var(--rule);
}
.anim-transition .ma-to i {
    animation: light-on 6s ease-in-out infinite;
}
.anim-transition .ma-to i:nth-child(3) {
    animation-delay: 0.6s;
}
.anim-transition .ma-to i:nth-child(4) {
    animation-delay: 2.1s;
}
.anim-transition .ma-to i:nth-child(5) {
    animation-delay: 3.6s;
}
.anim-transition .ma-arrow {
    color: var(--ink-3);
    display: flex;
    justify-content: center;
}
.anim-transition .ma-arrow svg {
    width: 100%;
    height: 12px;
}
.anim-transition .ma-arrow path:first-child {
    stroke-dasharray: 72;
    stroke-dashoffset: 72;
    animation: arrow-draw 6s ease-in-out infinite;
}

@keyframes trk-fill {
    0% {
        width: 0;
    }
    30% {
        width: 50%;
    }
    65% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}
@keyframes step-on {
    0%,
    33% {
        background: var(--paper);
        color: var(--ink-3);
        border-color: var(--rule);
    }
    33%,
    100% {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }
}
@keyframes dim-out {
    0%,
    30% {
        background: var(--ink);
    }
    60%,
    100% {
        background: var(--rule);
    }
}
@keyframes light-on {
    0%,
    30% {
        background: var(--rule);
    }
    60%,
    100% {
        background: var(--accent);
    }
}
@keyframes arrow-draw {
    0% {
        stroke-dashoffset: 72;
    }
    50%,
    100% {
        stroke-dashoffset: 0;
    }
}

/* === 02 helpdesk === */
.anim-helpdesk {
    grid-template-rows: auto auto 1fr auto;
}
.anim-helpdesk .hd-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 80px;
}
.anim-helpdesk .hd-bubble {
    align-self: flex-start;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 8px 14px;
    font-size: 12px;
    color: var(--ink);
    max-width: 78%;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(8px);
    animation: bubble-in 6s ease-in-out infinite;
}
.anim-helpdesk .hd-bubble.me {
    align-self: flex-end;
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.anim-helpdesk .b1 {
    animation-delay: 0s;
}
.anim-helpdesk .b2 {
    animation-delay: 0.7s;
}
.anim-helpdesk .b3 {
    animation-delay: 1.4s;
}
.anim-helpdesk .hd-core {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
}
.anim-helpdesk .hd-node {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 0.12em;
    font-weight: 500;
    z-index: 2;
}
.anim-helpdesk .hd-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--accent);
    opacity: 0;
    animation: ring-out 3s ease-out infinite;
}
.anim-helpdesk .r1 {
    animation-delay: 0s;
}
.anim-helpdesk .r2 {
    animation-delay: 1s;
}
.anim-helpdesk .r3 {
    animation-delay: 2s;
}
.anim-helpdesk .hd-out {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.anim-helpdesk .hd-tag {
    font-size: 11px;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    background: var(--paper);
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(6px);
    animation: tag-in 6s ease-in-out infinite;
}
.anim-helpdesk .hd-tag.ok {
    color: var(--accent);
    border-color: var(--accent);
}
.anim-helpdesk .hd-tag.esc {
    color: var(--ink-2);
}
.anim-helpdesk .hd-out .hd-tag:nth-child(1) {
    animation-delay: 2.6s;
}
.anim-helpdesk .hd-out .hd-tag:nth-child(2) {
    animation-delay: 3.1s;
}
.anim-helpdesk .hd-out .hd-tag:nth-child(3) {
    animation-delay: 3.6s;
}

@keyframes bubble-in {
    0%,
    6% {
        opacity: 0;
        transform: translateY(8px);
    }
    14%,
    60% {
        opacity: 1;
        transform: translateY(0);
    }
    80%,
    100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}
@keyframes ring-out {
    0% {
        opacity: 0.9;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(2.2);
    }
}
@keyframes tag-in {
    0%,
    40% {
        opacity: 0;
        transform: translateY(6px);
    }
    50%,
    90% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* === 03 ops === */
.anim-ops {
    grid-template-rows: auto 1fr auto;
}
.anim-ops .op-grid {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 120px;
}
.anim-ops .op-chart {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.anim-ops .op-line {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: line-draw 6s ease-in-out infinite;
}
.anim-ops .op-area {
    opacity: 0;
    animation: area-in 6s ease-in-out infinite;
}
.anim-ops .op-alert {
    opacity: 0;
    transform-origin: 172px 50px;
    animation: alert-blink 6s ease-in-out infinite;
}
.anim-ops .op-axis line {
    stroke-dasharray: 3 4;
    opacity: 0.6;
}
.anim-ops .op-bars {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
}
.anim-ops .op-bar {
    display: grid;
    grid-template-columns: 28px 1fr 22px;
    gap: 8px;
    align-items: center;
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
}
.anim-ops .op-bar .l {
    color: var(--ink-2);
}
.anim-ops .op-bar .v {
    color: var(--ink);
    text-align: right;
    font-weight: 500;
}
.anim-ops .op-bar .bar {
    display: block;
    height: 4px;
    background: var(--rule);
    overflow: hidden;
    position: relative;
}
.anim-ops .op-bar .bar b {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    animation: bar-fill 6s ease-in-out infinite;
}
.anim-ops .op-bar:nth-child(1) b {
    animation-delay: 0.3s;
}
.anim-ops .op-bar:nth-child(2) b {
    animation-delay: 0.6s;
}
.anim-ops .op-bar:nth-child(3) b {
    animation-delay: 0.9s;
}

@keyframes line-draw {
    0% {
        stroke-dashoffset: 900;
    }
    55%,
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes area-in {
    0%,
    30% {
        opacity: 0;
    }
    65%,
    100% {
        opacity: 1;
    }
}
@keyframes alert-blink {
    0%,
    38% {
        opacity: 0;
        transform: scale(0.4);
    }
    44% {
        opacity: 1;
        transform: scale(1.6);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    62% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    72%,
    100% {
        opacity: 0;
        transform: scale(0.4);
    }
}
@keyframes bar-fill {
    0% {
        width: 0;
    }
    60%,
    100% {
        width: var(--w);
    }
}

/* === 04 dev === */
.anim-dev {
    grid-template-rows: auto 1fr auto;
    padding-bottom: 18px;
}
.anim-dev .dv-status {
    color: var(--accent);
    animation: blink 1.4s ease-in-out infinite;
}
.anim-dev .dv-term {
    background: #0f1419;
    color: #e2e6ec;
    border-radius: 2px;
    padding: 14px 16px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    line-height: 1.9;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.anim-dev .dv-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    animation: row-in 6s ease-out infinite;
}
.anim-dev .dv-prompt {
    color: #7e8a99;
}
.anim-dev .dv-cmd {
    color: #fff;
}
.anim-dev .dv-row em {
    color: #6ea8fe;
    font-style: normal;
}
.anim-dev .dv-row.r2 {
    animation-delay: 0.5s;
}
.anim-dev .dv-row.r3 {
    animation-delay: 1.2s;
}
.anim-dev .dv-row.r4 {
    animation-delay: 1.9s;
}
.anim-dev .dv-tests {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    padding-top: 6px;
}
.anim-dev .dv-test {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 10.5px;
    color: var(--ink-2);
    opacity: 0;
    animation: test-in 6s ease-out infinite;
}
.anim-dev .dv-test .ck {
    width: 12px;
    height: 12px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    position: relative;
}
.anim-dev .dv-test .ck::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 4px;
    width: 6px;
    height: 3px;
    border-left: 1.2px solid var(--accent);
    border-bottom: 1.2px solid var(--accent);
    transform: rotate(-45deg) scale(0);
    transform-origin: left center;
    animation: tick 6s ease-out infinite;
}
.anim-dev .dv-test .t {
    color: var(--ink-3);
    font-size: 10px;
}
.anim-dev .dv-test.t1,
.anim-dev .dv-test.t1 .ck::after {
    animation-delay: 2.4s;
}
.anim-dev .dv-test.t2,
.anim-dev .dv-test.t2 .ck::after {
    animation-delay: 2.8s;
}
.anim-dev .dv-test.t3,
.anim-dev .dv-test.t3 .ck::after {
    animation-delay: 3.2s;
}
.anim-dev .dv-test.t4,
.anim-dev .dv-test.t4 .ck::after {
    animation-delay: 3.6s;
}

@keyframes row-in {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    8%,
    90% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
    }
}
@keyframes test-in {
    0%,
    30% {
        opacity: 0;
        transform: translateX(-4px);
    }
    40%,
    92% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
    }
}
@keyframes tick {
    0%,
    30% {
        transform: rotate(-45deg) scale(0);
    }
    44%,
    100% {
        transform: rotate(-45deg) scale(1);
    }
}
@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .module-anim *,
    .module-anim *::before,
    .module-anim *::after {
        animation: none !important;
        transition: none !important;
    }
    .anim-transition .ma-line::after {
        width: 100%;
    }
    .anim-transition .ma-step .en {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }
    .anim-ops .op-line {
        stroke-dashoffset: 0;
    }
    .anim-ops .op-area {
        opacity: 1;
    }
    .anim-ops .op-bar .bar b {
        width: var(--w);
    }
    .anim-helpdesk .hd-bubble,
    .anim-helpdesk .hd-tag {
        opacity: 1;
        transform: none;
    }
    .anim-dev .dv-row,
    .anim-dev .dv-test {
        opacity: 1;
    }
    .anim-dev .dv-test .ck::after {
        transform: rotate(-45deg) scale(1);
    }
}

/* why — numbered editorial (dark section) */
#why {
    background: #0B1426;
    color: var(--paper);
    /* 中央下端に小さな逆三角形(▼)を出して、次の無料診断セクションへの導線にする */
    position: relative;
}
#why::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 22px solid #0B1426;
    pointer-events: none;
    z-index: 2;
}
#why .eyebrow {
    color: #fff !important;
}
#why .eyebrow .jp {
    color: #fff !important;
}
#why .sec-title {
    color: var(--paper);
}
#why .sec-title .sec-title-logo-w {
    height: 1.8em;
    vertical-align: middle;
    position: relative;
    top: -0.08em;
}
#why .sec-sub {
    color: rgba(250, 250, 247, 0.75);
}
.why-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 56px;
    padding: 80px 0;
    border-top: 1px solid rgba(250, 250, 247, 0.12);
    align-items: start;
}
.why-row:last-child {
    border-bottom: 1px solid rgba(250, 250, 247, 0.12);
}
.why-num {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 68px;
    line-height: 1;
    color: var(--paper);
    letter-spacing: -0.03em;
}
.why-row:hover .why-num {
    color: var(--accent);
    transition: color 0.3s ease;
}
.why-content .tag {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: rgba(250, 250, 247, 0.55);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.why-content .tag::before {
    content: "";
    width: 20px;
    height: 1px;
    background: currentColor;
}
.why-content h3 {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 22px;
    letter-spacing: 0.02em;
    color: var(--paper);
}
.why-content p {
    color: var(--paper);
    font-size: 15.5px;
    line-height: 2;
    margin: 0;
}
.why-content p strong {
    color: var(--paper);
    font-weight: 700;
}

/* tabs — refined */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--paper);
    padding: 0 32px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    background: transparent;
    border: 0;
    padding: 22px 0;
    margin-right: 36px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-3);
    position: relative;
    transition: color 0.3s ease;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}
.tab:last-child {
    margin-right: 0;
}
.tab .tab-num {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    margin-right: 10px;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    font-weight: 500;
}
.tab:hover {
    color: var(--ink);
}
.tab.active {
    color: var(--ink);
}
.tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--ink);
}
.tab .tab-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: var(--accent);
    pointer-events: none;
    z-index: 1;
}
.tab.active .tab-num {
    color: var(--accent);
}

.tab-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "head head"
        "body illust";
    column-gap: 80px;
    row-gap: 48px;
    align-items: start;
    background: var(--paper);
    padding: 48px;
}
.tab-content[hidden] {
    display: none;
}
.tab-content .tab-head {
    grid-area: head;
}
.tab-content .feature-list {
    grid-area: body;
}
.tab-content .tab-illust {
    grid-area: illust;
}
.tab-content h3 {
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.55;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
    text-wrap: normal;
    max-width: none;
}
.tab-content .tab-head p {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 2;
    margin: 0;
}
.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.feature-list li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--rule);
    font-size: 14px;
    line-height: 1.8;
    align-items: baseline;
}
.feature-list li:last-child {
    border-bottom: 1px solid var(--rule);
}
.feature-list .num {
    color: var(--accent);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.1em;
}

/* modules — 旋回パーティクル背景 */
#modules,
#news {
    position: relative;
    overflow: hidden;
}
#news {
    background: var(--paper-2);
}
.modules-bg,
.final-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
#modules > .container,
#news > .container {
    position: relative;
    z-index: 1;
}
.modules-head {
    background: var(--paper);
    padding: 48px;
    margin-bottom: 0;
}
.modules-head .sec-sub {
}

/* タブ右側 — イラスト用プレースホルダ */
.module-illust-ph {
    width: 100%;
    aspect-ratio: 16/11;
    background: repeating-linear-gradient(135deg, transparent 0 24px, rgba(15, 20, 25, 0.025) 24px 25px), var(--paper-2);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
}


.tab-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--rule);
    border-top: 0;
}
.tab-stats > div {
    padding: 32px 28px;
    border-top: 1px solid var(--rule);
}
.tab-stats > div:first-child {
    border-right: 1px solid var(--rule);
}
.tab-stats .v {
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.tab-stats .v .u {
    font-size: 16px;
    font-weight: 300;
    margin-left: 4px;
    color: var(--ink-2);
}
.tab-stats .l {
    font-size: 12px;
    color: var(--ink-2);
    margin-top: 14px;
}

/* mid CTA — dark band */
.cta-band {
    text-align: center;
    padding: clamp(96px, 12vw, 140px) 0;
    background: var(--paper-2);
    color: var(--ink);
    border: 0;
    position: relative;
    overflow: hidden;
}
.cta-band > * {
    position: relative;
    z-index: 1;
}
.cta-band > .modules-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.cta-band .eyebrow {
    color: var(--ink-3) !important;
}
.cta-band h2 {
    font-size: clamp(32px, 3.6vw, 52px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin: 24px auto 28px;
    color: var(--ink);
}
.cta-band h2 .hl {
    position: relative;
    isolation: isolate;
    display: inline-block;
    padding: 10px 28px;
    margin: 8px 6px;
    font-weight: 700;
}
/* 白背景に合わせ、チップを accent カラー(青グラデ)に反転 */
.cta-band h2 .hl::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #06b6d4 100%);
    transform: skewX(-12deg);
    border-radius: 0;
    z-index: -1;
}
.cta-band h2 .hl .hl-text {
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.cta-band p {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 2;
    margin: 0 auto 48px;
    font-weight: 500;
}
.cta-band .btn-primary {
    background: var(--accent);
    color: #fff;
}
.cta-band .btn-primary:hover {
    background: #1e40af;
    color: #fff;
}

/* cases */
#cases {
    background: var(--paper-2);
}
.cases-headline-logo {
    display: inline-block;
    height: 1.6em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.12em;
    margin-left: -0.05em;
}
/* 事例カード:横並び 3 枚 */
.cases-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.8vw, 28px);
    margin-top: clamp(40px, 5vw, 64px);
}
.cases-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2.2vw, 30px);
    background: var(--paper);
    border-radius: 14px;
    border: 3px solid var(--accent);
    box-shadow:
        0 1px 2px rgba(15, 20, 25, 0.04),
        0 10px 28px -18px rgba(15, 20, 25, 0.18);
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cases-item:hover {
    transform: translateY(-5px);
    box-shadow:
        0 1px 2px rgba(15, 20, 25, 0.06),
        0 22px 46px -18px rgba(37, 99, 235, 0.3);
}
.cases-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cases-item-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
}
.cases-item-scale {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.08em;
}
.cases-item-title {
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 800;
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.cases-item-em {
    color: var(--accent);
    font-size: 1.18em;
    letter-spacing: -0.02em;
}
.cases-item-summary {
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink-2);
    margin: 0;
    flex-grow: 1;
}
/* お客様の声 — 引用ブロック */
.cases-item-quote {
    position: relative;
    margin: 4px 0 0;
    padding: 18px 18px 16px 22px;
    background: rgba(37, 99, 235, 0.05);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
}
.cases-item-quote::before {
    content: "\201C"; /* 左ダブルクォート */
    position: absolute;
    top: 2px;
    left: 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    line-height: 1;
    color: var(--accent);
    opacity: 0.35;
    pointer-events: none;
}
.cases-item-quote p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.01em;
}
.cases-item-quote-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.cases-item-quote-role {
    font-weight: 600;
    color: var(--ink-2);
}
.cases-item-quote-sep {
    color: var(--ink-3);
    opacity: 0.55;
}
.cases-item-quote-industry {
    font-weight: 500;
}
@media (max-width: 880px) {
    .cases-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/* cases head:中央寄せ + sec-sub */
.cases-head .sec-sub {
    margin-top: 16px;
}
.case-logo-marquee {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 44px 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

#security {
    position: relative;
    overflow: hidden;
}
#security::before {
    content: "";
    position: absolute;
    top: clamp(40px, 5vw, 88px);
    left: clamp(0px, 2vw, 40px);
    width: clamp(240px, 28vw, 400px);
    aspect-ratio: 1 / 1;
    background-image: url("../images/Security.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}
#security > .container {
    position: relative;
    z-index: 1;
}
.case-logo-marquee::before,
.case-logo-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(48px, 8vw, 120px);
    pointer-events: none;
    z-index: 2;
}
.case-logo-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--paper-2), rgba(244, 246, 250, 0));
}
.case-logo-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--paper-2), rgba(244, 246, 250, 0));
}
.case-logo-track {
    display: flex;
    /* 3 セットで構成し -33.333% (= 1 セット幅) だけ動かす。
       これにより常に最低 2 セット分が viewport 外右側にバッファとして待機し、
       ループ瞬間の継ぎ目が完全に同位置の同じ画像に置き換わるため seam が出ない */
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    animation: case-logo-scroll 45s linear infinite;
}
.case-logo-marquee:hover .case-logo-track {
    animation-play-state: paused;
}
.case-logo-set {
    display: flex;
    align-items: center;
    gap: clamp(56px, 8vw, 120px);
    /* セット間の繋ぎ目を内部 gap と同じ大きさにして連続させる */
    padding-right: clamp(56px, 8vw, 120px);
    flex-shrink: 0;
}
.case-logo-set img {
    height: clamp(64px, 7.5vw, 100px);
    width: auto;
    object-fit: contain;
    opacity: 0.85;
    filter: grayscale(15%);
    transition: opacity 0.25s ease, filter 0.25s ease;
    /* 各画像も GPU 合成に乗せる */
    transform: translateZ(0);
}
.case-logo-set img:hover {
    opacity: 1;
    filter: grayscale(0);
}
@keyframes case-logo-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        /* 3 セット中 1 セット分(= -33.3333%) だけ動かす。
           次の loop 開始時には 2 セット目が viewport の 1 セット目位置に来るが
           内容が完全に同一なので seam が出ない */
        transform: translate3d(-33.3333%, 0, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .case-logo-track {
        animation: none;
    }
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}
.case-card {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.case-card:hover {
    transform: translateY(-4px);
}
.case-card .thumb {
    aspect-ratio: 4/3;
    margin-bottom: 24px;
}
.case-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.case-card h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
    margin-bottom: 18px;
}
.case-card .case-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}
.case-card .case-stat .v {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 28px;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1;
}
.case-card .case-stat .l {
    font-size: 11px;
    color: var(--ink-3);
}

/* FPT partner */
.fpt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
}
.fpt-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.fpt-partner-logo img {
    width: 100%;
    max-width: clamp(280px, 32vw, 460px);
    height: auto;
    display: block;
}

/* FPT CTA pair */
.fpt-cta-pair {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* accordion — refined */
.acc-item {
    border-top: 1px solid var(--rule);
}
.acc-item:last-child {
    border-bottom: 1px solid var(--rule);
}
.acc-trig {
    width: 100%;
    background: transparent;
    border: 0;
    display: grid;
    grid-template-columns: 50px 1fr 28px;
    align-items: center;
    text-align: left;
    padding: 32px 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    gap: 16px;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}
.acc-trig:hover {
    color: var(--accent);
}
.acc-trig .qnum {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    font-weight: 400;
    padding-top: 2px;
}
.acc-trig:hover .qnum {
    color: var(--accent);
}
.acc-trig .ico {
    width: 14px;
    height: 14px;
    position: relative;
    justify-self: end;
}
.acc-trig .ico::before,
.acc-trig .ico::after {
    content: "";
    position: absolute;
    background: currentColor;
}
.acc-trig .ico::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
}
.acc-trig .ico::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    transition: transform 0.35s ease;
}
.acc-item.open .acc-trig .ico::after {
    transform: translateX(-50%) rotate(90deg);
}
.acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.acc-content-inner {
    padding: 0 80px 32px 66px;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 2;
}
.acc-content-inner p {
    margin: 0;
}

/* steps */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
/* News と FAQ の境界に区切り線を引く */
#news + #faq {
    position: relative;
}
#news + #faq::before {
    content: "";
    display: block;
    width: min(1200px, calc(100% - 2 * var(--gutter)));
    height: 1px;
    background: var(--rule);
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* #process はダークネイビー背景のため、文字色を明色に上書き */
#process .eyebrow {
    color: rgba(244, 240, 230, 0.55) !important;
}
#process .sec-title {
    color: #E6ECF2 !important;
}
#process .sec-sub {
    color: rgba(244, 240, 230, 0.72) !important;
}
#process .step h3 {
    color: #E6ECF2 !important;
}
#process .step-label {
    color: #E6ECF2 !important;
}
#process .step .period {
    color: rgba(244, 240, 230, 0.55) !important;
}
#process .step p {
    color: rgba(244, 240, 230, 0.72) !important;
}
#process .step {
    border-left-color: rgba(244, 240, 230, 0.18);
}

.step {
    padding: 56px 40px;
    border-left: 1px solid var(--rule);
    position: relative;
}
.step:first-child {
    border-left: 0;
}
.step-label {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: var(--accent);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 28px;
}
.step h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}
.step .period {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    margin-bottom: 24px;
}
.step p {
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.95;
    margin: 0;
}

/* ───────── News (一覧形式) ─────────
     お知らせは、シンプルな1行リスト形式。読みやすさを優先。 */
.news-list {
    border-top: 1px solid var(--rule);
}
/* 「お知らせ一覧へ」ボタンの中央配置ラッパー */
.news-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(48px, 6vw, 80px);
}
.news-row {
    display: grid;
    grid-template-columns: 110px 90px 1fr 24px;
    gap: 32px;
    align-items: center;
    padding: 28px 8px 28px 8px;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink);
    transition:
        background 0.25s ease,
        padding 0.25s ease;
}
.news-row:hover {
    background: rgba(0, 0, 0, 0.02);
    padding-left: 16px;
    padding-right: 0;
}
.news-date {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    font-weight: 400;
}
.news-tag {
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink-2);
    text-align: center;
    width: fit-content;
    line-height: 1;
}
.news-tag.tag-press {
    color: var(--accent);
    border-color: var(--accent);
}
.news-tag.tag-event {
    color: var(--ink);
    border-color: var(--ink);
}
.news-tag.tag-info {
    color: var(--ink-3);
}
.news-title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.7;
}
.news-row:hover .news-title {
    color: var(--accent);
}
.news-arrow {
    color: var(--ink-3);
    transition:
        transform 0.25s ease,
        color 0.25s ease;
}
.news-row:hover .news-arrow {
    color: var(--accent);
    transform: translateX(4px);
}

/* ───────── Blog (Featured + Carousel) ─────────
     ヒーロー featured(横並び)+ 横スクロール カルーセル。 */
.blog-feature {
    text-decoration: none;
    color: inherit;
    display: block;
}
.blog-thumb {
    margin-bottom: 32px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-feature:hover .blog-thumb {
    transform: scale(1.01);
}
.blog-feature-body {
    padding: 0 8px;
}
.blog-meta {
    display: flex;
    gap: 14px;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.blog-meta > span:nth-child(2) {
    letter-spacing: 0.04em;
}
.blog-cat {
    color: var(--accent);
    font-weight: 500;
    letter-spacing: 0.18em;
}
.blog-feature-title {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
    letter-spacing: 0.02em;
}
.blog-feature:hover .blog-feature-title {
    color: var(--accent);
}
.blog-excerpt {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 2;
    margin: 0 0 24px;
}
.blog-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-3);
    font-family: inherit;
    letter-spacing: 0.02em;
}
.author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--paper-2);
    border: 1px solid var(--rule);
}

.blog-side-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}

@media (max-width: 980px) {
    .news-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 24px 0;
    }
}

/* final CTA — navy gradient hero */
.final {
    position: relative;
    overflow: hidden;
    color: var(--paper);
    padding: clamp(120px, 18vw, 200px) 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(56, 189, 248, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 82% 78%, rgba(139, 92, 246, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, #0B1426 0%, #1a2b5e 50%, #0B1426 100%);
}
.final > .container-narrow {
    position: relative;
    z-index: 1;
}
.final .eyebrow {
    color: var(--paper) !important;
}
.final-logo {
    display: block;
    height: clamp(40px, 5vw, 64px);
    width: auto;
    margin: 36px auto 40px;
}
.final h2 {
    font-size: clamp(34px, 4.2vw, 56px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.02em;
    margin: 0 auto 56px;
    color: var(--paper);
}

.btn-final-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #1e40af 100%);
    color: #fff;
    padding: 22px 48px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    border: 0;
    border-radius: 9999px;
    transition: transform 0.25s ease, background 0.25s ease;
}
.btn-final-cta:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #2563eb 100%);
}
.btn-final-cta svg {
    flex: 0 0 auto;
}

/* footer brand layout — 「Presented by」x「Powered by」でヒエラルキーを表現 */
.footer-brand-col {
    padding-right: 48px;
}
.footer-brand {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.footer-brand-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.footer-brand-role {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.45);
}
.footer-brand-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--paper);
    letter-spacing: 0.04em;
    text-decoration: none;
}
.footer-brand-link:hover {
    color: var(--accent);
}
.footer-brand-x {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: rgba(250, 250, 247, 0.4);
    padding-bottom: 2px;
}

/* footer */
.site-footer {
    background: var(--ink);
    color: rgba(250, 250, 247, 0.55);
    padding: 88px 0 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 40px;
}
.footer-grid h4 {
    color: var(--paper);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    margin-bottom: 22px;
    text-transform: uppercase;
}
.footer-grid a {
    color: rgba(250, 250, 247, 0.55);
    text-decoration: none;
    font-size: 12.5px;
    display: block;
    padding: 6px 0;
    transition: color 0.25s ease;
}
.footer-grid a:hover {
    color: var(--accent);
}
.footer-bottom {
    margin-top: 80px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: rgba(250, 250, 247, 0.35);
    letter-spacing: 0.04em;
}

/* FAB — image CTA */
.fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    display: block;
    line-height: 0;
    width: 180px;
    box-shadow: 0 10px 30px -10px rgba(26, 25, 22, 0.25);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    border-radius: 4px;
    overflow: hidden;
}
.fab img {
    display: block;
    width: 100%;
    height: auto;
}
.fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px -10px rgba(26, 25, 22, 0.35);
}
@media (max-width: 640px) {
    .fab {
        width: 128px;
        right: 16px;
        bottom: 16px;
    }
}

/* logo box */
.logo-box {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    border: 1px solid var(--rule);
}

/* Certifications grid — accepts <img> with text fallback */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 80px;
    border: 1px solid var(--rule);
    background: var(--paper);
}
.cert-cell {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-left: 1px solid var(--rule);
}
.cert-cell:first-child {
    border-left: 0;
}
.cert-img {
    max-height: 70px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    /* slight desaturation for visual harmony with the muted palette;
       remove if official guidelines require full color */
    filter: grayscale(0.15);
    transition: filter 0.3s ease;
}
.cert-cell:hover .cert-img {
    filter: grayscale(0);
}
.cert-label {
    display: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    text-align: center;
}
@media (max-width: 980px) {
    .cert-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .cert-cell:nth-child(4) {
        border-left: 0;
        border-top: 1px solid var(--rule);
    }
    .cert-cell:nth-child(n + 4) {
        border-top: 1px solid var(--rule);
    }
    .cert-cell {
        height: 90px;
        padding: 14px;
    }
    .cert-img {
        max-height: 56px;
    }
}
@media (max-width: 560px) {
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cert-cell {
        border-left: 1px solid var(--rule);
        border-top: 1px solid var(--rule);
    }
    .cert-cell:nth-child(odd) {
        border-left: 0;
    }
    .cert-cell:nth-child(-n + 2) {
        border-top: 0;
    }
}

/* responsive */
@media (max-width: 980px) {
    .nav-links {
        display: none;
    }
    .fv-corner,
    .fv-meta {
        display: none;
    }
    .stat-row,
    .pain-grid,
    .case-grid,
    .news-grid,
    .steps,
    .tab-content,
    .fpt-grid,
    .partner-inner,
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .tab-content {
        grid-template-areas:
            "head"
            "body"
            "illust";
        padding: 32px 24px;
    }
    .tabs {
        padding: 0 24px;
    }
    .modules-head {
        padding: 32px 24px;
    }
    .svc-hero {
        grid-template-columns: 1fr;
        gap: 56px;
        padding: 32px 24px;
    }
    .svc-info {
        max-width: none;
    }
    /* On narrow screens, the circular layout no longer fits the rich cards.
       Switch to a 2-column grid and tuck the AI Core in as the first cell. */
    .svc-loop {
        max-width: 560px;
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .svc-loop-svg {
        display: none;
    }
    .svc-loop-node {
        position: static;
        width: auto;
        transform: none;
        padding: 16px 14px;
    }
    .svc-loop-node:hover {
        transform: translateY(-2px);
    }
    .svc-loop-core {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        width: 100%;
        aspect-ratio: auto;
        border-radius: 6px;
        border: 1px solid rgba(37, 99, 235, 0.35);
        background: rgba(37, 99, 235, 0.05);
        padding: 18px 14px;
        grid-column: 1 / -1;
        grid-row: 1;
        flex-direction: row;
        gap: 12px;
        justify-content: center;
        align-items: center;
    }
    .svc-loop-core-text {
        font-size: 13px;
    }
    .stat-cell {
        border-left: 0;
        border-top: 1px solid var(--rule);
    }
    .stat-cell:first-child {
        border-top: 0;
    }
    .why-row {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 56px 0;
    }
    .why-num {
        font-size: 36px;
    }
    .pain-grid {
        grid-template-columns: 1fr;
    }
    .pain-cell {
        padding: 40px 28px 48px;
        border-radius: 6px;
    }
    .pain-cell h3 {
        font-size: 14px;
        padding-right: 60px;
    }
    .pain-cell-tag {
        font-size: 10px;
    }
    #pain::after {
        font-size: clamp(120px, 30vw, 200px);
    }
    .ba-col.before {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }
    .step {
        border-left: 0;
        border-top: 1px solid var(--rule);
    }
    .step:first-child {
        border-top: 0;
    }
    .tab {
        margin-right: 24px;
    }
    .case-logo-set {
        gap: 48px;
        padding-right: 48px;
    }
    .acc-content-inner {
        padding: 0 0 32px 50px;
    }
}

/* ────────────────────────────────────────────
     Site loader — intro overlay
     ──────────────────────────────────────────── */
.site-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #F4F8FC;
    /* ローダーは「見た目」だけで覆い、hit-test は最初から素通りさせる。
       これをしないと loaderExit 完了時の pointer-events:auto→none の切替で、
       カーソルがたまたま FV ボタン上にあった場合に Chrome が :hover を
       再評価せず、初回ホバーが効かなくなる。 */
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: loaderExit 0.7s cubic-bezier(0.4, 0, 0.2, 1) 4.5s forwards;
}
.site-loader.is-done {
    display: none;
}
/* FV と同じバブル背景アンビエント */
.loader-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.loader-bubbles .fv-bubble {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    will-change: transform, opacity;
    filter: blur(0.5px);
    animation: loaderBubbleFloat 9s ease-in-out infinite;
}
.loader-bubbles .fv-bubble--1  { animation-delay: 0s;   margin: -38vh -34vw 0 0; }
.loader-bubbles .fv-bubble--2  { animation-delay: 0.6s; margin: 24vh 28vw 0 0; }
.loader-bubbles .fv-bubble--3  { animation-delay: 1.1s; margin: -18vh 38vw 0 0; }
.loader-bubbles .fv-bubble--4  { animation-delay: 1.7s; margin: 30vh -32vw 0 0; }
.loader-bubbles .fv-bubble--5  { animation-delay: 2.2s; margin: -32vh 14vw 0 0; }
.loader-bubbles .fv-bubble--6  { animation-delay: 2.7s; margin: 18vh -22vw 0 0; }
.loader-bubbles .fv-bubble--7  { animation-delay: 3.3s; margin: 36vh 6vw 0 0; }
.loader-bubbles .fv-bubble--8  { animation-delay: 3.8s; margin: -26vh -22vw 0 0; }
.loader-bubbles .fv-bubble--9  { animation-delay: 4.4s; margin: -10vh 26vw 0 0; }
.loader-bubbles .fv-bubble--10 { animation-delay: 4.9s; margin: 12vh 34vw 0 0; }
.loader-bubbles .fv-bubble--11 { animation-delay: 5.4s; margin: 28vh -10vw 0 0; }
.loader-bubbles .fv-bubble--12 { animation-delay: 5.9s; margin: -30vh -4vw 0 0; }
@keyframes loaderBubbleFloat {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    30%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    65%  { opacity: 0.85; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
    .loader-bubbles { display: none; }
}
.loader-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 720px;
    padding: 0 var(--gutter);
    color: var(--ink);
}
.loader-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-3);
    opacity: 0;
    animation: loaderFadeIn 0.6s ease-out 0.1s forwards;
}
.loader-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}
.loader-brands {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(18px, 3vw, 32px);
    margin-top: 36px;
}
.loader-brand--cac {
    justify-self: end;
    max-height: clamp(26px, 2.8vw, 34px);
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: translateX(-18px);
    animation: loaderSlideRight 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.35s forwards;
}
.loader-x {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(20px, 2.2vw, 28px);
    color: #2563eb;
    font-weight: 400;
    opacity: 0;
    transform: scale(0.6);
    animation: loaderPop 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}
.loader-brand--fpt {
    justify-self: start;
    max-height: clamp(48px, 5.4vw, 66px);
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: translateX(18px);
    animation: loaderSlideLeft 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}
.loader-rule {
    width: 0;
    height: 1px;
    background: rgba(15, 20, 25, 0.18);
    margin: 44px auto 32px;
    animation: loaderRuleGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.05s forwards;
}
.loader-service {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: 0.06em;
    color: var(--ink);
    opacity: 0;
    transform: translateY(10px);
    margin: 0 0 56px;
    animation: loaderFadeUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) 1.25s forwards;
}
.loader-service--logo {
    display: block;
    margin: 0 auto 56px;
    height: clamp(36px, 4.6vw, 56px);
    width: auto;
}
.loader-progress {
    width: clamp(180px, 22vw, 280px);
    height: 1px;
    background: rgba(15, 20, 25, 0.10);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: loaderFadeIn 0.5s ease 1.45s forwards;
}
.loader-progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
    background: linear-gradient(90deg, transparent, #2563eb 50%, transparent);
    transform: translateX(-150%);
    animation: loaderProgress 1.3s cubic-bezier(0.4, 0, 0.2, 1) 1.55s infinite;
}
@keyframes loaderFadeIn {
    to {
        opacity: 1;
    }
}
@keyframes loaderFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes loaderSlideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes loaderSlideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes loaderPop {
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes loaderRuleGrow {
    to {
        width: 88px;
    }
}
@keyframes loaderProgress {
    from {
        transform: translateX(-150%);
    }
    to {
        transform: translateX(400%);
    }
}
@keyframes loaderExit {
    to {
        opacity: 0;
        visibility: hidden;
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-loader {
        animation: loaderExit 0.3s ease 0.2s forwards;
    }
    .loader-eyebrow,
    .loader-brand--cac,
    .loader-x,
    .loader-brand--fpt,
    .loader-service,
    .loader-progress {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .loader-rule {
        animation: none;
        width: 88px;
    }
    .loader-progress-bar {
        animation: none;
        transform: none;
        width: 100%;
        opacity: 0.5;
    }
}

/* ────────────────────────────────────────────
     Staggered reveal — animated via GSAP; CSS provides initial state
     ──────────────────────────────────────────── */
.reveal[data-stagger] {
    opacity: 1;
    transform: none;
}
.reveal[data-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
}
.reveal[data-stagger].is-in > * {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal[data-stagger] > * {
        opacity: 1;
        transform: none;
    }
}

/* ────────────────────────────────────────────
     Heading rule draw-in
     ──────────────────────────────────────────── */
.reveal .eyebrow::before {
    width: 0;
    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.reveal.is-in .eyebrow::before {
    width: 28px;
}
.reveal .sec-title {
    position: relative;
}
.reveal .sec-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -18px;
    width: 0;
    height: 1px;
    background: var(--ink-3);
    opacity: 0.5;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}
.reveal.is-in .sec-title::after {
    width: 56px;
}
@media (prefers-reduced-motion: reduce) {
    .reveal .eyebrow::before {
        width: 28px;
        transition: none;
    }
    .reveal .sec-title::after {
        width: 56px;
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════
   02 Featured Strip  ━ FV 直下の事例 + ブログ予告
   ──────────────────────────────────────────────────────────── */
.evo-feat-strip {
    padding: clamp(56px, 8vw, 96px) 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.evo-feat-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: stretch;
}
.evo-feat-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.evo-feat-eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
    margin-right: 12px;
}

.evo-feat-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    text-decoration: none;
    color: inherit;
    position: relative;
    padding-right: clamp(32px, 5vw, 80px);
    border-right: 1px solid var(--rule);
    transition: color 0.3s ease;
}
.evo-feat-main:hover {
    color: var(--accent);
}
.evo-feat-main-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.evo-feat-cust {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    font-weight: 500;
}
.evo-feat-main-title {
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.45;
    font-weight: 500;
    margin: 8px 0 0;
    letter-spacing: 0.02em;
    color: var(--ink);
    transition: color 0.3s ease;
}
.evo-feat-main:hover .evo-feat-main-title {
    color: var(--accent);
}
.evo-feat-main-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-top: 28px;
    border-top: 4px solid var(--ink);
}
.evo-feat-main-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.evo-feat-stat-num {
    font-family: "Inter", sans-serif;
    font-size: clamp(48px, 6vw, 88px);
    font-weight: 200;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--ink);
    display: flex;
    align-items: baseline;
}
.evo-feat-stat-num small {
    font-size: 0.5em;
    font-weight: 300;
    margin-left: 2px;
}
.evo-feat-stat-l {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--ink-2);
}
.evo-feat-main-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}

.evo-feat-side {
    display: flex;
    flex-direction: column;
}
.evo-feat-side-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rule);
}
.evo-feat-more {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ink-2);
    text-decoration: none;
    transition: color 0.3s ease;
}
.evo-feat-more:hover {
    color: var(--accent);
}
.evo-feat-link {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule-2);
    text-decoration: none;
    color: inherit;
    align-items: baseline;
    transition: padding 0.3s ease, color 0.3s ease;
}
.evo-feat-link:hover {
    color: var(--accent);
    padding-left: 6px;
}
.evo-feat-link:last-child {
    border-bottom: 0;
}
.evo-feat-cat {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.evo-feat-link-title {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 500;
    color: var(--ink);
    transition: color 0.3s ease;
}
.evo-feat-link:hover .evo-feat-link-title {
    color: var(--accent);
}
.evo-feat-link-date {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    white-space: nowrap;
}

@media (max-width: 880px) {
    .evo-feat-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .evo-feat-main {
        border-right: 0;
        padding-right: 0;
        padding-bottom: 40px;
        border-bottom: 1px solid var(--rule);
    }
    .evo-feat-link {
        grid-template-columns: 72px 1fr;
    }
    .evo-feat-link-date {
        grid-column: 2;
        margin-top: 4px;
    }
    .evo-feat-main-meta {
        flex-wrap: wrap;
    }
    .evo-feat-main-arrow {
        order: -1;
        align-self: flex-start;
    }
}

/* ════════════════════════════════════════════════════════════
   06 Before / After  ━ corede-i.com 流の左右対比 + 巨大数値
   ──────────────────────────────────────────────────────────── */
.evo-ba-section {
    position: relative;
    background: var(--paper);
    overflow: hidden;
}
.evo-ba-section::before,
.evo-ba-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--ink);
    z-index: 3;
    pointer-events: none;
}
.evo-ba-section::before { top: 0; }
.evo-ba-section::after { bottom: 0; }

/* 縦組み英字ラベル(背景の装飾) */
.evo-ba-axis {
    position: absolute;
    top: 50%;
    font-family: "Inter", sans-serif;
    font-size: clamp(80px, 13vw, 200px);
    font-weight: 100;
    letter-spacing: 0.06em;
    color: rgba(15, 20, 25, 0.04);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    line-height: 1;
    white-space: nowrap;
}
.evo-ba-axis--before { left: 16px; }
.evo-ba-axis--after { right: 16px; }

/* ヘッダー */
.evo-ba-head {
    margin: 0 auto clamp(64px, 9vw, 128px);
    text-align: center;
    position: relative;
    z-index: 2;
}
.evo-ba-head .eyebrow {
    justify-content: center;
}
.evo-ba-title {
    font-size: clamp(30px, 4.2vw, 56px);
    line-height: 1.4;
    font-weight: 500;
    margin-top: 24px;
    letter-spacing: 0.01em;
}
/* グローバルの sec-title::after(左下 56px の細線)をセンタータイトルでは中央寄せ */
.evo-ba-head .sec-title::after {
    left: 50%;
    transform: translateX(-50%);
}
/* "AI 駆動型運用へ" を控えめにアクセント(青の極細下線のみ。z-index 不要) */
.evo-ba-title-hl {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 4px;
}

/* メイン比較 */
.evo-ba-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    margin-bottom: clamp(80px, 12vw, 160px);
    position: relative;
    z-index: 2;
}
.evo-ba-col {
    padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
    border: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
}
.evo-ba-col--before {
    background: var(--paper-2);
    border-right: 0;
}
.evo-ba-col--after {
    background: #000;
    color: #e6ecf2;
    border-left: 0;
    border-color: #000;
}
.evo-ba-col-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 4px solid currentColor;
    width: fit-content;
    max-width: 100%;
}
.evo-ba-col-tag {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.55;
}
.evo-ba-col--after .evo-ba-col-tag {
    color: rgba(230, 236, 242, 0.8);
    opacity: 1;
}
.evo-ba-col-name {
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.02em;
}
.evo-ba-points {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    flex: 1;
}
.evo-ba-points li {
    position: relative;
    padding: 14px 0 14px 32px;
    font-size: 14.5px;
    line-height: 1.8;
    border-bottom: 1px solid rgba(15, 20, 25, 0.08);
}
.evo-ba-col--after .evo-ba-points li {
    border-bottom-color: rgba(230, 236, 242, 0.12);
}
.evo-ba-points li:last-child {
    border-bottom: 0;
}
.evo-ba-points li::before {
    content: "−";
    position: absolute;
    left: 0;
    top: 14px;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink-3);
}
.evo-ba-points--after li::before {
    content: "+";
    color: var(--accent);
    font-weight: 400;
    font-size: 22px;
}
.evo-ba-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 28px;
    border-top: 1px solid rgba(15, 20, 25, 0.1);
}
.evo-ba-col--after .evo-ba-stat {
    border-top-color: rgba(230, 236, 242, 0.18);
}
.evo-ba-stat-label {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.evo-ba-col--after .evo-ba-stat-label {
    color: rgba(230, 236, 242, 0.6);
}
.evo-ba-stat-num {
    font-family: "Inter", sans-serif;
    font-size: clamp(56px, 8.5vw, 112px);
    font-weight: 200;
    line-height: 1.05;
    letter-spacing: -0.03em;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--ink);
}
.evo-ba-col--after .evo-ba-stat-num {
    color: var(--accent);
    font-weight: 300;
}
.evo-ba-stat-unit {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.34em;
    font-weight: 500;
    color: var(--ink-2);
    letter-spacing: 0.02em;
    line-height: 1;
}
.evo-ba-col--after .evo-ba-stat-unit {
    color: rgba(230, 236, 242, 0.75);
}
.evo-ba-stat-foot {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-top: 6px;
}
.evo-ba-col--after .evo-ba-stat-foot {
    color: rgba(230, 236, 242, 0.55);
}

/* ピボット ／ */
.evo-ba-pivot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(20px, 3vw, 40px);
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    position: relative;
}
.evo-ba-pivot-mark {
    font-size: clamp(72px, 10vw, 140px);
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.05em;
    display: block;
}
.evo-ba-pivot-text {
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 24px;
    writing-mode: vertical-rl;
}

/* 比較サマリ */
.evo-ba-summary {
    position: relative;
    z-index: 2;
    border-top: 12px solid var(--ink);
    padding-top: clamp(48px, 6vw, 80px);
}
.evo-ba-summary-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: clamp(40px, 5vw, 64px);
}
.evo-ba-summary-title {
    font-size: clamp(26px, 3.2vw, 44px);
    font-weight: 500;
    line-height: 1.4;
    margin: 16px 0 0;
    letter-spacing: 0.02em;
}
.evo-ba-metric {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(40px, 6vw, 96px);
    padding: clamp(40px, 6vw, 80px) 0;
    border-top: 1px solid var(--rule);
    align-items: center;
}
.evo-ba-metric:last-of-type {
    border-bottom: 1px solid var(--rule);
}
.evo-ba-metric-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.evo-ba-metric-label {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.evo-ba-metric-label .jp {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: none;
    color: var(--ink-2);
}
.evo-ba-metric-headline {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: "Inter", sans-serif;
    line-height: 0.9;
    color: var(--ink);
    margin: 8px 0;
}
.evo-ba-metric-sign {
    font-size: clamp(72px, 10vw, 160px);
    font-weight: 100;
    letter-spacing: -0.06em;
}
.evo-ba-metric-num {
    font-size: clamp(96px, 14vw, 220px);
    font-weight: 100;
    letter-spacing: -0.04em;
}
.evo-ba-metric-unit {
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 300;
    letter-spacing: -0.02em;
}
.evo-ba-metric-desc {
    font-size: 14.5px;
    line-height: 2;
    color: var(--ink-2);
    margin: 0;
}

/* 横棒グラフ */
.evo-ba-bar {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.evo-ba-bar-row {
    display: grid;
    grid-template-columns: 72px 1fr 110px;
    align-items: center;
    gap: 18px;
}
.evo-ba-bar-tag {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.evo-ba-bar-row--after .evo-ba-bar-tag {
    color: var(--accent);
}
.evo-ba-bar-track {
    position: relative;
    height: 36px;
    background: var(--rule-2);
    overflow: hidden;
}
.evo-ba-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--ink);
    transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.evo-ba-bar-row--after .evo-ba-bar-fill {
    background: var(--accent);
}
.evo-ba-bar-val {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: right;
    color: var(--ink);
}
.evo-ba-bar-row--after .evo-ba-bar-val {
    color: var(--accent);
    font-weight: 700;
}

.evo-ba-disclaimer {
    margin: clamp(40px, 5vw, 64px) 0 0;
    font-size: 12px;
    line-height: 1.9;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

/* レスポンシブ */
@media (max-width: 880px) {
    .evo-ba-compare {
        grid-template-columns: 1fr;
    }
    .evo-ba-col {
        border: 1px solid var(--rule);
    }
    .evo-ba-col--before {
        border-bottom: 0;
    }
    .evo-ba-col--after {
        border-top: 0;
        border-color: #000;
    }
    .evo-ba-pivot {
        flex-direction: row;
        padding: 16px 0;
        border-top: 0;
        border-bottom: 0;
        border-left: 1px solid var(--rule);
        border-right: 1px solid var(--rule);
        background: var(--paper);
    }
    .evo-ba-pivot-mark {
        font-size: 56px;
        transform: rotate(90deg);
    }
    .evo-ba-pivot-text {
        writing-mode: horizontal-tb;
        margin: 0 0 0 24px;
    }
    .evo-ba-metric {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .evo-ba-axis {
        display: none;
    }
    .evo-ba-summary-head {
        align-items: flex-start;
    }
    .evo-ba-bar-row {
        grid-template-columns: 56px 1fr 80px;
        gap: 12px;
    }
    .evo-ba-bar-track {
        height: 28px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .evo-ba-bar-fill {
        transition: none;
    }
}

/* ════════════════════════════════════════════════
   先方修正 (2026-06)
   ① Service Areas — 5領域の詳細(切替タブ)
   ② Security & Governance — エンタープライズ4階層
   ③ Cases — 4事例レイアウト
   ════════════════════════════════════════════════ */

/* ── ① Service Areas ── 既存 .tabs / .tab-content / .feature-list を流用(ダークテーマ) */
#service-areas {
    position: relative;
    background:
        radial-gradient(120% 90% at 18% 0%, #16264a 0%, rgba(22, 38, 74, 0) 55%),
        linear-gradient(165deg, #0b1424 0%, #0e1a30 55%, #0a1322 100%);
    color: #eef3fb;
}
/* 上のティザー(サービス領域 5カード)から、この詳細(5領域)へ漏斗状につなぐ▼。
   上セクションの白い逆三角を、この詳細セクション上端に被せる */
#service-areas::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 20px solid var(--paper);
    pointer-events: none;
    z-index: 2;
}
/* 見出し回り */
#service-areas .section-bg-label {
    color: rgba(255, 255, 255, 0.07);
}
#service-areas .eyebrow {
    color: rgba(255, 255, 255, 0.55);
}
#service-areas .eyebrow .jp {
    color: rgba(255, 255, 255, 0.72);
}
#service-areas .sec-title {
    color: #fff;
}
#service-areas .sec-title .hl {
    color: #7eb0ff;
    font-weight: 700;
}
#service-areas .sec-sub {
    color: rgba(231, 238, 250, 0.72);
}
/* タブ */
#service-areas .tabs {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
#service-areas .tab {
    color: rgba(231, 238, 250, 0.55);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    padding: 28px 0;
    margin-right: clamp(32px, 3.4vw, 52px);
}
#service-areas .tab:hover,
#service-areas .tab.active {
    color: #fff;
}
#service-areas .tab .tab-num {
    color: rgba(231, 238, 250, 0.5);
    font-size: 14px;
    margin-right: 13px;
}
#service-areas .tab.active .tab-num {
    color: #7eb0ff;
}
#service-areas .tab.active::after {
    background: #fff;
}
#service-areas .tab .tab-progress {
    background: #7eb0ff;
}
/* パネル — 枠線・背景なし(ダーク地に直接) */
.tab-content--area {
    background: transparent;
    border: 0;
    padding: clamp(28px, 3vw, 44px) 0 0;
}
.tab-content--area .area-aside {
    grid-area: illust;
}
.tab-content--area h3 {
    color: #fff;
}
.tab-content--area .tab-head p {
    color: rgba(231, 238, 250, 0.74);
    font-size: 16.5px;
    line-height: 1.95;
}
.tab-content--area .feature-list li {
    border-top-color: rgba(255, 255, 255, 0.12);
    color: rgba(231, 238, 250, 0.82);
    font-size: 15px;
    line-height: 1.95;
}
.tab-content--area .feature-list li:last-child {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
.tab-content--area .feature-list .num {
    color: #7eb0ff;
}
.area-en {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #7eb0ff;
    margin-bottom: 14px;
}
.area-aside {
    background: linear-gradient(180deg, rgba(126, 176, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 42%);
    border: 1px solid rgba(126, 176, 255, 0.38);
    border-radius: 16px;
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
}
.area-aside-head {
    display: flex;
    align-items: center;
    gap: 12px 14px;
    flex-wrap: wrap;
}
.area-aside-module-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    align-self: center;
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d6e6ff;
    background: rgba(126, 176, 255, 0.18);
    border: 1px solid rgba(126, 176, 255, 0.5);
    border-radius: 999px;
    padding: 6px 13px;
}
.area-aside-module {
    font-size: clamp(21px, 1.9vw, 25px);
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
    line-height: 1.3;
}
.area-aside-module small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgba(231, 238, 250, 0.7);
    letter-spacing: 0;
    margin-top: 4px;
    text-shadow: none;
}
.area-aside-effect-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(231, 238, 250, 0.82);
    letter-spacing: 0.08em;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.area-aside-effect-label small {
    font-weight: 500;
    color: rgba(231, 238, 250, 0.55);
    margin-left: 4px;
}
.area-effect-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 6px 0 0;
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.area-effect-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.area-effect-list li:first-child {
    border-top: 0;
}
.area-effect-cap {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(231, 238, 250, 0.86);
    font-weight: 600;
}
.area-effect-num {
    flex-shrink: 0;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    font-family: "Oswald", "DIN Next", "Helvetica Neue", sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 2.5vw, 36px);
    line-height: 1;
    letter-spacing: 0.01em;
    font-feature-settings: "tnum" 1, "lnum" 1;
    color: #7eb0ff;
}
.area-effect-num small {
    font-size: 0.5em;
    font-weight: 600;
    margin-left: 2px;
}
.area-effect-num .area-effect-pre {
    margin-left: 0;
    margin-right: 1px;
}
.area-effect-num--text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #cfe0ff;
}

/* ── ② Security & Governance ── ダークセクション */
.security-sec {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 10vw, 132px) 0;
    background:
        radial-gradient(120% 90% at 82% 0%, #16264a 0%, rgba(22, 38, 74, 0) 55%),
        linear-gradient(165deg, #0b1424 0%, #0e1a30 55%, #0a1322 100%);
    color: #eef3fb;
}
.security-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
}
/* セキュリティアイコン — ダーク地に薄く重ねるウォーターマーク */
.security-sec::before {
    content: "";
    position: absolute;
    top: clamp(16px, 3.5vw, 56px);
    left: clamp(-40px, 0.5vw, 24px);
    width: clamp(220px, 26vw, 380px);
    aspect-ratio: 1 / 1;
    background: url("../images/Security.png") no-repeat center / contain;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}
.security-sec > .container {
    position: relative;
    z-index: 1;
}
.security-head .section-bg-label {
    text-align: left;
    font-size: clamp(32px, 4vw, 60px);
    color: rgba(255, 255, 255, 0.07);
}
.security-eyebrow {
    color: rgba(255, 255, 255, 0.55);
}
.security-eyebrow .jp {
    color: rgba(255, 255, 255, 0.72);
}
.security-title {
    color: #fff;
}
.security-title .hl {
    color: #7eb0ff;
    font-weight: 700;
}
.security-sub {
    color: rgba(231, 238, 250, 0.72);
}
.security-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
    margin-top: clamp(40px, 5vw, 60px);
}
.security-card {
    position: relative;
    padding: 28px 24px 30px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        background 0.4s ease;
}
.security-card:hover {
    transform: translateY(-5px);
    border-color: rgba(126, 176, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
}
.security-card-num {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #7eb0ff;
}
.security-card-title {
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 800;
    color: #fff;
    margin: 14px 0 12px;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.security-card-desc {
    font-size: 13px;
    line-height: 1.85;
    color: rgba(231, 238, 250, 0.74);
    margin: 0;
}
.security-certs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: clamp(36px, 4vw, 52px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.security-certs-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}
/* 全ロゴを画面幅いっぱいの白帯に横一列で並べる(白地をつなげる) */
.security-certs-list {
    list-style: none;
    margin: 0;
    /* full-bleed: コンテナ余白に関係なく画面幅いっぱいへ */
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: clamp(22px, 2.4vw, 34px) clamp(24px, 5vw, 80px);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 1.8vw, 36px);
    background: #fff;
}
/* 各ロゴを同じ高さ枠に収めて視覚的な大きさを揃える(統一感) */
.security-cert {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(58px, 6vw, 88px);
}
.security-cert img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
/* 狭い画面では横一列が窮屈なので折り返し */
@media (max-width: 900px) {
    .security-certs-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 22px 28px;
        padding: 26px clamp(20px, 6vw, 40px);
    }
    .security-cert {
        flex: 0 0 auto;
        width: clamp(110px, 26vw, 150px);
        height: 64px;
    }
}
.security-certs-note {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(231, 238, 250, 0.6);
}

/* ── ③ Cases — 4事例(2×2)レイアウト ── */
.cases-list--4 {
    grid-template-columns: repeat(2, 1fr);
}
.cases-list--4 .cases-item-title {
    white-space: normal;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.55;
}
.cases-list--4 .cases-item-summary {
    font-size: 13.5px;
}

/* ── 先方修正分のレスポンシブ ── */
@media (max-width: 980px) {
    .security-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 880px) {
    .cases-list--4 {
        grid-template-columns: 1fr;
    }
    .area-effect-num {
        min-width: 86px;
        font-size: 26px;
    }
}
@media (max-width: 560px) {
    .security-grid {
        grid-template-columns: 1fr;
    }
}