/* HPv7 recruit.css (S0061 Q24 Step 1 抽出・SC-188 founding 候補適用) */
/* ============================================================
   TABLE OF CONTENTS · CSS 構造目次 (S0059 C8 案 b 採用・ご担当者承認)

   [@media (prefers-reduced-motion: reduce)] アクセシビリティ対応 6 箇所:
     1. line 3327: V5.0 系 reveal / hero-visual / btn-primary / hero-badge / biz-chart / scroll-behavior
     2. line 4327: 浮遊エントリー泡 (.canvas-orb-bg .bubble)
     3. line 4389: アイリス画面切替演出 (.final-iris-overlay)
     4. line 4406: CTA pre-reveal (.cta-section.is-pre-reveal) ← F1 関連
     5. line 4432: P4 系 group-tree / numbers / hero-deco / hero-kicker / hero h1 / hero-lead / hero-actions / message-quote-mark / btn-primary::after
     6. line 4735: DC simulation card (.dc-sim-card.pulse-glow / pulse-done)

   ※ 修正方針: 機能セクション直下に置く現状方式を維持 (V1.1 code-architect 推奨案 b)
   ※ 該当機能と一緒に見える方が修正時の可読性が高いため
   ============================================================ */

  :root {
    --c-forest: #2F5D50;
    --c-forest-dark: #1E3F36;
    --c-forest-light: #4A7A6C;
    --c-terracotta: #D97757;
    --c-terracotta-dark: #B85E3F;
    --c-sage: #859B82;
    --c-ivory: #F5F1E8;
    --c-ivory-light: #FAF7EF;
    --c-slate: #1F2937;
    --c-slate-light: #4B5563;
    --c-muted: #6B7280;
    --c-line: #E5DFD0;
    --c-line-dark: #C9C1AB;
    --c-white: #FFFFFF;

    /* V7 TCS Editorial Manifesto additions */
    --c-charcoal: #1A1F2C;       /* 制御技術の硬質さ */
    --c-brass: #B8956A;           /* 機械の温度・accent */
    --c-paper: #FBF8F0;           /* 紙の白 (ivory より暖かい) */

    --f-mincho: 'Shippori Mincho', 'Yu Mincho', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
    --f-gothic: 'Noto Sans JP', 'Yu Gothic', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;
    --f-display: 'Cormorant Garamond', Georgia, serif;
    --f-sans: 'Inter', sans-serif;
    --f-handwrite: 'Yuji Syuku', 'Shippori Mincho', serif;  /* V7: 手書き感・大型 quote */
    --f-mono: 'JetBrains Mono', 'Space Mono', 'Courier New', monospace;  /* V7: 制御技術・spec */

    --max-w: 1200px;
    --gutter: 24px;
  }

  /* V7 frontend-design: Grain overlay (subtle texture for editorial feel) */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.06;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* V7 frontend-design: Blueprint grid background (subtle control-tech pattern) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
    background-image:
      linear-gradient(to right, var(--c-forest-dark) 1px, transparent 1px),
      linear-gradient(to bottom, var(--c-forest-dark) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  /* V7 frontend-design: Hand-drawn underline for emphasis */
  .hand-underline {
    position: relative;
    display: inline;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q 50 1, 100 4 T 198 4' stroke='%23D97757' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 8px;
    padding-bottom: 6px;
  }
  .hand-underline-thick {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 50 2, 100 5 T 198 5' stroke='%23D97757' stroke-width='4' fill='none' stroke-linecap='round' opacity='0.78'/%3E%3C/svg%3E");
    background-size: 100% 10px;
    padding-bottom: 8px;
  }

  /* V7 frontend-design: Editorial pull quote */
  .pull-quote {
    position: relative;
    padding: 40px 24px 32px 96px;
    margin: 56px 0;
    font-family: var(--f-mincho);
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.85;
    color: var(--c-forest-dark);
  }
  .pull-quote::before {
    content: """;
    position: absolute;
    top: -28px;
    left: 0;
    font-family: var(--f-handwrite);
    font-size: 220px;
    line-height: 1;
    color: var(--c-terracotta);
    opacity: 0.55;
  }
  .pull-quote cite {
    display: block;
    margin-top: 18px;
    font-family: var(--f-mono);
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.18em;
    color: var(--c-muted);
    text-transform: uppercase;
  }

  /* V7 frontend-design: Wire/Circuit divider between sections */
  .wire-divider {
    height: 32px;
    margin: 0 auto;
    max-width: var(--max-w);
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
  }
  .wire-divider svg {
    width: 100%;
    height: 24px;
    color: var(--c-sage);
    opacity: 0.65;
  }

  /* V7 frontend-design: Section number cap (large mono) */
  .num-cap {
    font-family: var(--f-mono);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--c-terracotta);
  }

  /* V7 frontend-design: Spec label (mono, uppercase, kerning) */
  .spec-label {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-muted);
    font-weight: 500;
  }

  /* V7 frontend-design: Editorial hover underline (terracotta sweep) */
  .editorial-link {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
  }
  .editorial-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--c-terracotta);
    transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .editorial-link:hover::after { width: 100%; }
  .editorial-link:hover { opacity: 1; }

  /* V7 ensure body content stays above background patterns */
  .site-header, main, footer { position: relative; z-index: 1; }

  /* V7 frontend-design: The Five Pillars (PDF P10 取込・装置の一生に寄り添う) */
  .section.pillars {
    background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-ivory-light) 100%);
    padding: 100px 0 110px;
  }
  .pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
    margin: 56px 0 40px;
  }
  .pillar-card {
    position: relative;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    padding: 36px 28px 30px;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
  }
  .pillar-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 0;
    background: var(--c-terracotta);
    transition: height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .pillar-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(31, 41, 55, 0.08);
    border-color: var(--c-terracotta);
  }
  .pillar-card:hover::before { height: 100%; }
  .pillar-num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 56px;
    font-weight: 500;
    color: var(--c-terracotta);
    line-height: 1;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    opacity: 0.92;
  }
  .pillar-card .spec-label { display: block; margin-bottom: 12px; }
  .pillar-card h3 {
    font-family: var(--f-mincho);
    font-size: 19px;
    color: var(--c-forest-dark);
    font-weight: 600;
    line-height: 1.55;
    margin: 0 0 16px;
    letter-spacing: 0.02em;
  }
  .pillar-card p {
    font-size: 14px;
    color: var(--c-slate-light);
    line-height: 1.95;
    margin: 0 0 18px;
  }
  .pillar-effect {
    padding-top: 14px;
    border-top: 1px dashed var(--c-line-dark);
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--c-forest);
    letter-spacing: 0.04em;
  }
  .pillar-footnote {
    margin-top: 24px;
    font-size: 12px;
    color: var(--c-muted);
    line-height: 1.85;
    text-align: center;
  }

  /* V7 frontend-design: Mindset (求める人物像 6 つ・PDF P13 取込) */
  .section.mindset {
    background:
      linear-gradient(180deg, var(--c-ivory-light) 0%, var(--c-paper) 100%);
    padding: 100px 0 110px;
  }
  .mindset-intro {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
  }
  .mindset-intro .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 26px 0 0;
  }
  .mindset-tag {
    padding: 8px 18px;
    background: var(--c-white);
    border: 1px dashed var(--c-line-dark);
    border-radius: 999px;
    font-family: var(--f-mincho);
    font-size: 13px;
    color: var(--c-forest);
    letter-spacing: 0.04em;
  }
  .mindset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    margin: 0 0 56px;
  }
  .mindset-card {
    position: relative;
    padding: 32px 28px 30px;
    background: var(--c-white);
    border-top: 3px solid var(--c-forest);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .mindset-card:nth-child(2) { border-top-color: var(--c-terracotta); }
  .mindset-card:nth-child(3) { border-top-color: var(--c-brass); }
  .mindset-card:nth-child(4) { border-top-color: var(--c-sage); }
  .mindset-card:nth-child(5) { border-top-color: var(--c-forest-light); }
  .mindset-card:nth-child(6) { border-top-color: var(--c-terracotta-dark); }
  .mindset-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(31, 41, 55, 0.07);
  }
  .mindset-num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
    color: var(--c-terracotta);
    margin-bottom: 14px;
    letter-spacing: 0.02em;
    opacity: 0.92;
  }
  .mindset-card h3 {
    font-family: var(--f-mincho);
    font-size: 19px;
    font-weight: 600;
    color: var(--c-forest-dark);
    line-height: 1.55;
    margin: 0 0 16px;
    letter-spacing: 0.02em;
  }
  .mindset-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mindset-card ul li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    color: var(--c-slate-light);
    line-height: 1.85;
    margin-bottom: 10px;
  }
  .mindset-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 1.5px;
    background: var(--c-terracotta);
  }
  .mindset-closing {
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 32px;
    background: var(--c-forest-dark);
    color: var(--c-paper);
    text-align: center;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }
  .mindset-closing::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .mindset-closing h4 {
    position: relative;
    font-family: var(--f-mincho);
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.6;
    letter-spacing: 0.02em;
  }
  .mindset-closing p {
    position: relative;
    font-size: 14px;
    line-height: 1.95;
    margin: 0;
    color: rgba(251, 248, 240, 0.85);
  }
  .mindset-closing .accent-line {
    color: var(--c-terracotta);
    font-weight: 600;
  }

  /* V7 frontend-design: Selection · 選考フロー / 初任給 / エントリー (PDF P29 取込) */
  .section.selection {
    background: var(--c-paper);
    padding: 100px 0 110px;
  }
  .selection-block-title {
    font-family: var(--f-mincho);
    font-size: 22px;
    font-weight: 600;
    color: var(--c-forest-dark);
    letter-spacing: 0.04em;
    margin: 0 0 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-line-dark);
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
  .selection-block-title .label-en {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-terracotta);
    font-weight: 500;
  }
  .selection-grid-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin-bottom: 72px;
  }
  @media (max-width: 1024px) {
    .selection-grid-top { grid-template-columns: 1fr; gap: 56px; }
  }

  .salary-table {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    overflow: hidden;
  }
  .salary-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--c-line);
  }
  .salary-row:last-child { border-bottom: none; }
  .salary-row.head {
    background: var(--c-forest-dark);
    color: var(--c-paper);
  }
  .salary-row.head .salary-cell {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .salary-cell {
    padding: 16px 14px;
    font-size: 14px;
    text-align: center;
    border-right: 1px solid var(--c-line);
  }
  .salary-cell:last-child { border-right: none; }
  .salary-cell.label {
    font-family: var(--f-mincho);
    font-size: 15px;
    font-weight: 500;
    color: var(--c-forest-dark);
    background: var(--c-ivory-light);
    text-align: left;
    padding-left: 22px;
  }
  .salary-row.head .salary-cell { border-right-color: rgba(255,255,255,0.18); }
  .salary-amount {
    font-family: var(--f-mono);
    font-weight: 600;
    color: var(--c-charcoal);
  }
  .salary-notes {
    margin-top: 18px;
    font-size: 13px;
    color: var(--c-slate-light);
    line-height: 1.95;
  }
  .salary-notes ul { padding-left: 20px; margin: 8px 0 0; }

  .housing-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
  }
  .housing-tier {
    text-align: center;
    padding: 16px 10px;
    background: var(--c-ivory-light);
    border: 1px dashed var(--c-line-dark);
  }
  .housing-tier-label {
    font-family: var(--f-mincho);
    font-size: 13px;
    color: var(--c-forest);
    margin-bottom: 6px;
  }
  .housing-tier-value {
    font-family: var(--f-mono);
    font-size: 18px;
    color: var(--c-terracotta);
    font-weight: 600;
  }

  .selection-flow {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
  }
  .flow-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding: 18px 22px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    align-items: center;
    position: relative;
    transition: border-color 0.4s ease, transform 0.4s ease;
  }
  .flow-step:hover {
    border-color: var(--c-terracotta);
    transform: translateX(3px);
  }
  .flow-step-num {
    font-family: var(--f-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--c-terracotta);
    line-height: 1;
    text-align: center;
    border-right: 1px solid var(--c-line-dark);
    padding-right: 18px;
  }
  .flow-step-content h5 {
    margin: 0 0 4px;
    font-family: var(--f-mincho);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-forest-dark);
  }
  .flow-step-content p {
    margin: 0;
    font-size: 13px;
    color: var(--c-slate-light);
    line-height: 1.7;
  }

  .selection-grid-bottom {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: start;
  }
  @media (max-width: 1024px) {
    .selection-grid-bottom { grid-template-columns: 1fr; gap: 48px; }
  }
  .doc-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .doc-list li {
    padding: 14px 0;
    border-bottom: 1px dashed var(--c-line-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--c-slate);
  }
  .doc-list li:last-child { border-bottom: none; }
  .doc-list .doc-name {
    font-family: var(--f-mincho);
    font-weight: 500;
  }
  .doc-list .doc-spec {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--c-muted);
    letter-spacing: 0.04em;
  }

  .first-step-call {
    margin-top: 64px;
    text-align: center;
    padding: 42px 32px;
    background: var(--c-forest-dark);
    color: var(--c-paper);
    position: relative;
    overflow: hidden;
  }
  .first-step-call::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(217, 119, 87, 0.08) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(217, 119, 87, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .first-step-call h3 {
    position: relative;
    font-family: var(--f-mincho);
    font-size: clamp(22px, 2.6vw, 28px);
    margin: 0 0 14px;
    color: var(--c-paper);
    letter-spacing: 0.04em;
  }
  .first-step-call p {
    position: relative;
    font-size: 14px;
    line-height: 1.95;
    margin: 0 0 24px;
    color: rgba(251, 248, 240, 0.85);
  }
  .first-step-call a {
    position: relative;
    display: inline-block;
    padding: 14px 36px;
    background: var(--c-terracotta);
    color: var(--c-paper);
    font-family: var(--f-mincho);
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .first-step-call a:hover {
    background: var(--c-terracotta-dark);
    transform: translateY(-2px);
    opacity: 1;
  }

  /* V7 frontend-design: Visit · 対面誘導セクション (主軸③) */
  .section.visit {
    background:
      radial-gradient(circle at 20% 30%, rgba(217, 119, 87, 0.06) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(47, 93, 80, 0.05) 0%, transparent 50%),
      var(--c-paper);
    padding: 100px 0 110px;
    position: relative;
  }
  .visit-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
  }
  .visit-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 980px;
    margin: 0 auto 64px;
  }
  @media (max-width: 768px) {
    .visit-compare { grid-template-columns: 1fr; }
  }
  .visit-card {
    padding: 42px 36px 36px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    position: relative;
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.5s ease;
  }
  .visit-card.recommended {
    border: 2px solid var(--c-forest);
    background: var(--c-ivory-light);
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(31, 41, 55, 0.10);
  }
  .visit-card.recommended::before {
    content: "Recommended";
    position: absolute;
    top: -14px;
    left: 28px;
    padding: 4px 14px;
    background: var(--c-terracotta);
    color: var(--c-paper);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .visit-card-mode {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--c-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .visit-card.recommended .visit-card-mode { color: var(--c-terracotta); }
  .visit-card h3 {
    font-family: var(--f-mincho);
    font-size: 26px;
    color: var(--c-forest-dark);
    font-weight: 600;
    margin: 0 0 22px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
  .visit-attr {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px dashed var(--c-line-dark);
    align-items: baseline;
  }
  .visit-attr:first-of-type { border-top: none; padding-top: 0; }
  .visit-attr-key {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--c-muted);
    text-transform: uppercase;
  }
  .visit-attr-val {
    font-size: 14px;
    color: var(--c-slate);
    line-height: 1.85;
  }
  .visit-card.recommended .visit-attr-val strong {
    color: var(--c-forest-dark);
    font-weight: 600;
  }
  .visit-merit-list {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--c-line);
    list-style: none;
    padding-left: 0;
  }
  .visit-merit-list li {
    position: relative;
    padding-left: 22px;
    font-size: 13.5px;
    color: var(--c-slate-light);
    line-height: 1.85;
    margin-bottom: 8px;
  }
  .visit-merit-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--c-terracotta);
    font-weight: 700;
  }

  .visit-access {
    max-width: 980px;
    margin: 0 auto;
    padding: 36px 32px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 36px;
    align-items: center;
  }
  @media (max-width: 768px) {
    .visit-access { grid-template-columns: 1fr; }
  }
  .visit-access-info h4 {
    font-family: var(--f-mincho);
    font-size: 20px;
    color: var(--c-forest-dark);
    margin: 0 0 16px;
    font-weight: 600;
  }
  .visit-access-info dl {
    margin: 0;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 8px 14px;
    font-size: 13.5px;
    color: var(--c-slate);
    line-height: 1.85;
  }
  .visit-access-info dt {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--c-muted);
    text-transform: uppercase;
    align-self: baseline;
    padding-top: 3px;
  }
  .visit-access-info dd { margin: 0; }
  .visit-map-frame {
    aspect-ratio: 5 / 3;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid var(--c-line);
    background: var(--c-ivory-light);
  }
  .visit-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(0.9) contrast(0.95);
  }
  .visit-map-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 18px;
    background: var(--c-white);
    border: 1px solid var(--c-line-dark);
    color: var(--c-forest-dark);
    font-family: var(--f-mincho);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  }
  .visit-map-link:hover {
    background: var(--c-forest);
    color: var(--c-paper);
    border-color: var(--c-forest);
    transform: translateY(-2px);
    opacity: 1;
  }
  .visit-map-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--f-gothic);
    font-weight: 400;
    color: var(--c-slate);
    background: var(--c-ivory-light);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
  a:hover { opacity: 0.7; }
  h1, h2, h3, h4 { margin: 0; line-height: 1.4; font-weight: 500; }

  /* ==== Header ==== */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(245, 241, 232, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--c-line);
  }
  .header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 16px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logo {
    /* S0060: Header に TCS ロゴ画像追加 (ご担当者ご提供) のため inline-flex 化 */
    /* V8 S0062: nav 圧迫対策で max-width 制限 + font-size 適正化 */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mincho);
    font-size: 17px;
    font-weight: 600;
    color: var(--c-forest-dark);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .logo-mark {
    /* S0060: TCS ロゴマーク (青いリング + TS + 赤い 3D 球体)・36x36 px・ご担当者 2026-04-28 ご提供 */
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: block;
  }
  .logo small {
    display: block;
    font-family: var(--f-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--c-terracotta);
    margin-bottom: 2px;
  }
  .nav { display: flex; gap: 24px; align-items: center; flex-wrap: nowrap; }
  .nav a {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-slate);
    letter-spacing: 0.05em;
    white-space: nowrap;  /* V8 S0062: 改行禁止 (「会社紹介」等の 2 行折返し対策) */
  }
  .nav a.cta {
    background: var(--c-forest);
    color: var(--c-white);
    padding: 10px 20px;
    border-radius: 2px;
    font-weight: 600;
  }
  .nav a.cta:hover { background: var(--c-forest-dark); opacity: 1; }
  /* V7-6: 新卒/キャリア分離 CTA */
  .nav a.cta.cta-newgrad { background: var(--c-terracotta); margin-left: 4px; }
  .nav a.cta.cta-newgrad:hover { background: var(--c-terracotta-dark); }
  .nav a.cta.cta-career { background: var(--c-forest); color: var(--c-white); margin-left: 4px; }
  .nav a.cta.cta-career:hover { background: var(--c-forest-dark); }
  @media (max-width: 1024px) {
    .nav a.cta.cta-newgrad, .nav a.cta.cta-career { font-size: 11px; padding: 6px 10px; }
  }
  @media (max-width: 768px) {
    .nav { gap: 16px; }
    .nav a:not(.cta) { display: none; }
  }

  /* ==== Hero ==== */
  .hero {
    padding-top: 72px;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: var(--c-ivory);
  }
  .hero-text {
    padding: 80px 48px 80px 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  .hero-kicker {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 19px;
    font-weight: 500;
    color: var(--c-terracotta);
    letter-spacing: 0.22em;
    margin-bottom: 28px;
    text-transform: uppercase;
  }
  .hero-kicker::before {
    content: '— ';
    color: var(--c-terracotta);
  }
  .hero h1 {
    font-family: var(--f-mincho);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-forest-dark);
    letter-spacing: 0.02em;
    margin-bottom: 32px;
  }
  .hero h1 .accent { color: var(--c-terracotta); }
  .hero-lead {
    font-size: 16px;
    line-height: 2;
    color: var(--c-slate-light);
    max-width: 480px;
    margin-bottom: 48px;
  }
  .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
  .btn-primary {
    background: var(--c-forest);
    color: var(--c-white);
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .btn-primary:hover { background: var(--c-forest-dark); opacity: 1; transform: translateX(4px); }
  .btn-primary::after { content: '→'; font-size: 18px; }
  .btn-secondary {
    border: 1px solid var(--c-forest);
    color: var(--c-forest);
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: transparent;
    cursor: pointer;
  }
  .btn-secondary:hover { background: var(--c-forest); color: var(--c-white); opacity: 1; }

  .hero-visual {
    background-image: url('images/kaigi001.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(47, 93, 80, 0.18), rgba(31, 63, 54, 0.08));
  }
  .hero-badge {
    position: absolute;
    bottom: 40px;
    right: 40px;
    background: var(--c-white);
    padding: 20px 24px;
    font-family: var(--f-display);
    z-index: 2;
    max-width: 220px;
  }
  .hero-badge .num {
    font-size: 40px;
    font-weight: 500;
    color: var(--c-forest);
    line-height: 1;
    margin-bottom: 8px;
  }
  .hero-badge .label {
    font-family: var(--f-gothic);
    font-size: 13px;
    color: var(--c-slate-light);
    letter-spacing: 0.1em;
  }
  @media (max-width: 1024px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-text { padding: 48px 24px 40px; }
    .hero-visual { min-height: 50vh; }
  }

  /* ==== Common Section ==== */
  .section { padding: 120px var(--gutter); }
  .section-inner { max-width: var(--max-w); margin: 0 auto; }
  .section-label {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.28em;
    color: var(--c-terracotta);
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .section-label .num {
    display: inline-block;
    font-weight: 700;
    font-size: 22px;
    margin-right: 14px;
    color: var(--c-forest);
    font-style: normal;
    letter-spacing: 0.02em;
  }
  .section-title {
    font-family: var(--f-mincho);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    color: var(--c-forest-dark);
    line-height: 1.5;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
  }
  .section-lead {
    font-size: 16px;
    color: var(--c-slate-light);
    max-width: 680px;
    line-height: 2;
    margin-bottom: 64px;
  }
  @media (max-width: 768px) {
    .section { padding: 80px var(--gutter); }
  }

  /* ==== Reasons (4 cards) ==== */
  .reasons { background: var(--c-white); }
  .reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--c-line);
    border: 1px solid var(--c-line);
  }
  .reason {
    background: var(--c-white);
    padding: 48px 40px;
    position: relative;
    transition: background 0.3s ease;
  }
  .reason:hover { background: var(--c-ivory-light); }
  .reason-num {
    font-family: var(--f-display);
    font-size: 14px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 24px;
    font-weight: 600;
  }
  .reason-title {
    font-family: var(--f-mincho);
    font-size: 22px;
    color: var(--c-forest-dark);
    margin-bottom: 16px;
    line-height: 1.5;
  }
  .reason-desc { font-size: 14px; line-height: 2; color: var(--c-slate-light); }
  @media (max-width: 768px) {
    .reasons-grid { grid-template-columns: 1fr; }
    .reason { padding: 32px 24px; }
  }

  /* ==== Business (事業・仕事) ==== */
  .business { background: var(--c-ivory); }
  .business-cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .case-card {
    background: var(--c-white);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
  }
  .case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(31, 41, 55, 0.12);
  }
  /* V7 frontend-design: 写真を魅せる磨き (Editorial Magazine 風) */
  .business-cases { counter-reset: business-case; }
  .business-cases .case-card { counter-increment: business-case; }
  .business-cases .case-card::before {
    content: counter(business-case, decimal-leading-zero);
    position: absolute;
    top: 18px;
    left: 22px;
    z-index: 2;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 46px;
    font-weight: 600;
    color: var(--c-paper);
    text-shadow: 0 2px 16px rgba(31, 41, 55, 0.55), 0 0 1px rgba(31, 41, 55, 0.4);
    letter-spacing: 0.02em;
    line-height: 1;
    opacity: 0.95;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .business-cases .case-card:hover::before {
    transform: translateY(-3px);
  }
  .case-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    transform-origin: center center;
  }
  .case-card:hover .case-img {
    transform: scale(1.04);
  }
  /* 写真下部の subtle gradient で雑誌風コントラスト演出 */
  .case-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(31, 41, 55, 0.32) 100%);
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.5s ease;
  }
  .case-card:hover .case-img::after { opacity: 1; }
  .case-body { padding: 32px 24px; }
  .case-tag {
    display: inline-block;
    font-family: var(--f-display);
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
  }
  .case-title {
    font-family: var(--f-mincho);
    font-size: 20px;
    color: var(--c-forest-dark);
    margin-bottom: 16px;
    line-height: 1.6;
  }
  .case-desc { font-size: 14px; color: var(--c-slate-light); line-height: 2; }
  @media (max-width: 1024px) {
    .business-cases { grid-template-columns: 1fr; gap: 24px; }
  }

  /* ==== DC (目玉) ==== */
  .dc {
    background: var(--c-forest);
    color: var(--c-white);
    position: relative;
    overflow: hidden;
  }
  .dc::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
  }
  .dc::after {
    content: '';
    position: absolute;
    bottom: -150px; left: -50px;
    width: 300px; height: 300px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
  }
  .dc .section-label { color: var(--c-terracotta); }
  .dc .section-label .num { color: var(--c-ivory); }
  .dc .section-title { color: var(--c-white); }
  .dc .section-lead { color: rgba(255,255,255,0.85); }
  .dc-main {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .dc-highlight {
    font-family: var(--f-display);
    font-size: clamp(64px, 10vw, 120px);
    font-weight: 500;
    line-height: 0.9;
    color: var(--c-terracotta);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
  }
  .dc-highlight-sub {
    font-family: var(--f-mincho);
    font-size: 24px;
    color: var(--c-white);
    margin-bottom: 32px;
  }
  .dc-start-date {
    display: inline-block;
    font-family: var(--f-display);
    font-size: 14px;
    letter-spacing: 0.3em;
    color: var(--c-ivory);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 10px 20px;
    text-transform: uppercase;
  }
  .dc-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .dc-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .dc-row:last-child { border-bottom: none; }
  .dc-row-label {
    font-family: var(--f-mincho);
    font-size: 14px;
    color: rgba(255,255,255,0.9);
  }
  .dc-row-value {
    font-family: var(--f-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--c-white);
  }
  .dc-row-value .unit {
    font-size: 13px;
    font-family: var(--f-gothic);
    color: rgba(255,255,255,0.85);
    margin-left: 6px;
  }
  .dc-note {
    margin-top: 40px;
    padding: 24px;
    background: rgba(255,255,255,0.06);
    border-left: 2px solid var(--c-terracotta);
    font-size: 13px;
    line-height: 2;
    color: rgba(255,255,255,0.9);
  }
  @media (max-width: 1024px) {
    .dc-main { grid-template-columns: 1fr; gap: 48px; }
  }

  /* ==== Welfare (福利厚生アイコン) ==== */
  .welfare { background: var(--c-white); }
  .welfare-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--c-line);
    border-left: 1px solid var(--c-line);
  }
  .welfare-item {
    padding: 40px 28px;
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    transition: background 0.3s ease;
  }
  .welfare-item:hover { background: var(--c-ivory-light); }
  .welfare-icon {
    width: 40px; height: 40px;
    margin-bottom: 20px;
    color: var(--c-terracotta);
  }
  .welfare-item h4 {
    font-family: var(--f-mincho);
    font-size: 17px;
    color: var(--c-forest-dark);
    margin-bottom: 12px;
    line-height: 1.5;
  }
  .welfare-item p { font-size: 13px; color: var(--c-slate-light); line-height: 1.9; margin: 0; }
  @media (max-width: 1024px) {
    .welfare-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .welfare-grid { grid-template-columns: 1fr; }
  }

  /* ==== Numbers ==== */
  .numbers { background: var(--c-ivory); }
  .numbers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 32px;
  }
  .num-block { text-align: left; }
  .num-label {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.15em;
    margin-bottom: 12px;
    text-transform: uppercase;
  }
  .num-value {
    font-family: var(--f-display);
    font-size: clamp(48px, 7vw, 80px);
    font-weight: 500;
    color: var(--c-forest-dark);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }
  .num-value .unit {
    font-size: 20px;
    font-family: var(--f-mincho);
    color: var(--c-forest);
    margin-left: 6px;
  }
  .num-desc {
    font-size: 13px;
    color: var(--c-slate-light);
    line-height: 1.8;
    border-top: 1px solid var(--c-line-dark);
    padding-top: 12px;
  }
  @media (max-width: 768px) {
    .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  }

  /* ==== Work (仕事) ==== */
  .work { background: var(--c-white); }
  .work-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .work-item-img {
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
  }
  .work-item-body { padding-top: 24px; }
  .work-item-role {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 14px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 12px;
    text-transform: uppercase;
  }
  .work-item-title {
    font-family: var(--f-mincho);
    font-size: 28px;
    color: var(--c-forest-dark);
    margin-bottom: 16px;
    line-height: 1.5;
  }
  .work-item-desc { font-size: 15px; line-height: 2; color: var(--c-slate-light); margin-bottom: 24px; }
  .work-item-meta {
    font-size: 13px;
    color: var(--c-muted);
    border-top: 1px solid var(--c-line);
    padding-top: 16px;
  }
  @media (max-width: 1024px) {
    .work-grid { grid-template-columns: 1fr; gap: 48px; }
  }

  /* ==== Group (グループ会社) ==== */
  .group { background: var(--c-ivory); }
  .group-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 32px;
  }
  .group-panel {
    background: var(--c-white);
    padding: 48px 40px;
    border-left: 3px solid var(--c-forest);
    position: relative;
  }
  .group-panel.group-panel--alt { border-left-color: var(--c-terracotta); }
  .group-panel-tag {
    font-family: var(--f-display);
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 12px;
    text-transform: uppercase;
  }
  .group-panel h3 {
    font-family: var(--f-mincho);
    font-size: 22px;
    color: var(--c-forest-dark);
    margin-bottom: 16px;
    line-height: 1.5;
  }
  .group-panel p { font-size: 14px; line-height: 2; color: var(--c-slate-light); margin: 0; }
  @media (max-width: 768px) {
    .group-panels { grid-template-columns: 1fr; gap: 24px; }
    .group-panel { padding: 32px 24px; }
  }

  /* ==== Certifications ==== */
  .certs {
    background: var(--c-white);
    padding: 80px var(--gutter);
    border-top: 1px solid var(--c-line);
  }
  .certs-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 64px;
    align-items: center;
  }
  .certs-label {
    font-family: var(--f-mincho);
    font-size: 18px;
    color: var(--c-forest-dark);
    line-height: 1.8;
    max-width: 260px;
  }
  .certs-label .en {
    display: block;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .certs-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .certs-images img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    border: 1px solid var(--c-line);
  }
  @media (max-width: 768px) {
    .certs-inner { grid-template-columns: 1fr; gap: 32px; }
    .certs-images { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  }

  /* ==== CTA Section ==== */
  .cta-section {
    background: var(--c-forest-dark);
    color: var(--c-white);
    padding: 100px var(--gutter);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('images/gaikan002.jpg') center/cover;
    opacity: 0.12;
  }
  .cta-inner {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
  }
  .cta-kicker {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 14px;
    color: var(--c-terracotta);
    letter-spacing: 0.3em;
    margin-bottom: 24px;
    text-transform: uppercase;
  }
  .cta-title {
    font-family: var(--f-mincho);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .cta-lead {
    font-size: 15px;
    line-height: 2;
    color: rgba(255,255,255,0.85);
    margin-bottom: 40px;
  }
  .cta-section .btn-primary {
    background: var(--c-terracotta);
    padding: 20px 48px;
    font-size: 15px;
  }
  .cta-section .btn-primary:hover { background: var(--c-terracotta-dark); }

  /* ==== Footer ==== */
  .site-footer {
    background: var(--c-slate);
    color: rgba(255,255,255,0.9);
    padding: 80px var(--gutter) 32px;
  }
  .footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 64px;
  }
  .footer-brand .logo { color: var(--c-white); }
  .footer-brand p { font-size: 13px; line-height: 2; margin: 16px 0 0; }
  .footer-col h5 {
    font-family: var(--f-display);
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--c-terracotta);
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .footer-col ul { list-style: none; padding: 0; margin: 0; }
  .footer-col li { margin-bottom: 10px; font-size: 13px; }
  .footer-col a { color: rgba(255,255,255,0.9); }
  .footer-bottom {
    max-width: var(--max-w);
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    font-family: var(--f-display);
    letter-spacing: 0.1em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }
  @media (max-width: 768px) {
    .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  }

  /* ==== AMR (新規事業) ==== */
  .amr {
    background: var(--c-ivory-light);
    position: relative;
    overflow: hidden;
  }
  .amr-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .amr-visual {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    padding: 48px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .amr-visual svg { width: 100%; height: auto; }
  .amr-chances { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
  .amr-chance {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    align-items: start;
    padding: 20px 0;
    border-top: 1px solid var(--c-line-dark);
  }
  .amr-chance:last-child { border-bottom: 1px solid var(--c-line-dark); }
  .amr-chance-num {
    font-family: var(--f-display);
    font-size: 26px;
    font-weight: 500;
    color: var(--c-terracotta);
    line-height: 1;
    font-style: italic;
  }
  .amr-chance-title {
    font-family: var(--f-mincho);
    font-size: 17px;
    color: var(--c-forest-dark);
    margin-bottom: 6px;
    line-height: 1.5;
  }
  .amr-chance-desc { font-size: 13px; color: var(--c-slate-light); line-height: 1.9; margin: 0; }
  @media (max-width: 1024px) {
    .amr-main { grid-template-columns: 1fr; gap: 48px; }
  }

  /* ==== DC Simulation ==== */
  .dc-sim {
    margin-top: 64px;
    position: relative;
    z-index: 2;
  }
  .dc-sim-title {
    font-family: var(--f-mincho);
    font-size: 22px;
    color: var(--c-white);
    margin-bottom: 16px;
    text-align: center;
  }
  .dc-sim-sub {
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 40px;
  }
  .dc-sim-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .dc-sim-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 32px 24px;
    text-align: center;
  }
  .dc-sim-card.highlight {
    /* S0037 ご担当者様ご指示: オレンジバック削除・オレンジ枠のみで強調 */
    background: transparent;
    border: 2px solid var(--c-terracotta);
  }
  .dc-sim-label {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.15em;
    margin-bottom: 12px;
    text-transform: uppercase;
  }
  .dc-sim-case {
    font-family: var(--f-mincho);
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 20px;
    line-height: 1.6;
  }
  .dc-sim-value {
    font-family: var(--f-display);
    font-size: 44px;
    font-weight: 500;
    color: var(--c-white);
    line-height: 1;
    margin-bottom: 8px;
  }
  .dc-sim-value .unit { font-size: 16px; font-family: var(--f-mincho); color: rgba(255,255,255,0.9); margin-left: 4px; }
  .dc-sim-origin { font-size: 13px; color: rgba(255,255,255,0.85); font-family: var(--f-gothic); }
  @media (max-width: 1024px) {
    .dc-sim-grid { grid-template-columns: 1fr; gap: 16px; }
  }

  /* ==== Career (1日の流れ + 3年成長) ==== */
  .career { background: var(--c-white); }
  .career-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 48px;
  }
  .career-block h3 {
    font-family: var(--f-mincho);
    font-size: 22px;
    color: var(--c-forest-dark);
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-line-dark);
  }
  .career-block h3 .en {
    display: block;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 6px;
    text-transform: uppercase;
  }

  .timeline { display: flex; flex-direction: column; gap: 0; }
  .timeline-item {
    display: grid;
    grid-template-columns: 80px 32px 1fr;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 0;
    position: relative;
  }
  .timeline-time {
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--c-terracotta);
    letter-spacing: 0.05em;
    padding-top: 2px;
  }
  .timeline-dot {
    width: 14px;
    height: 14px;
    border: 2px solid var(--c-forest);
    border-radius: 50%;
    background: var(--c-white);
    margin: 4px auto 0;
    position: relative;
    z-index: 2;
  }
  .timeline-item:not(:last-child) .timeline-dot::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 48px;
    background: var(--c-line-dark);
  }
  .timeline-body h4 {
    font-family: var(--f-mincho);
    font-size: 16px;
    color: var(--c-forest-dark);
    margin-bottom: 4px;
  }
  .timeline-body p { font-size: 13px; color: var(--c-slate-light); line-height: 1.8; margin: 0; }

  .growth-steps { display: flex; flex-direction: column; gap: 12px; }
  .growth-step {
    background: var(--c-ivory);
    padding: 24px 28px;
    border-left: 3px solid var(--c-sage);
    transition: border-color 0.3s ease;
  }
  .growth-step:nth-child(2) { border-left-color: var(--c-forest); margin-left: 24px; }
  .growth-step:nth-child(3) { border-left-color: var(--c-terracotta); margin-left: 48px; }
  .growth-year {
    font-family: var(--f-display);
    font-size: 13px;
    font-style: italic;
    color: var(--c-terracotta);
    letter-spacing: 0.15em;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 600;
  }
  .growth-title {
    font-family: var(--f-mincho);
    font-size: 17px;
    color: var(--c-forest-dark);
    margin-bottom: 8px;
  }
  .growth-desc { font-size: 13px; color: var(--c-slate-light); line-height: 1.8; margin: 0; }
  @media (max-width: 1024px) {
    .career-double { grid-template-columns: 1fr; gap: 64px; }
    .growth-step:nth-child(2), .growth-step:nth-child(3) { margin-left: 0; }
  }

  /* ==== Wanted Person ==== */
  .wanted { background: var(--c-ivory); }
  .wanted-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
  }
  .wanted-item {
    background: var(--c-white);
    padding: 32px 28px;
    position: relative;
  }
  .wanted-num {
    position: absolute;
    top: 24px; right: 24px;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 44px;
    color: var(--c-line-dark);
    line-height: 1;
    font-weight: 500;
  }
  .wanted-title {
    font-family: var(--f-mincho);
    font-size: 17px;
    color: var(--c-forest-dark);
    margin-bottom: 12px;
    line-height: 1.5;
    position: relative;
    z-index: 1;
    max-width: 80%;
  }
  .wanted-desc { font-size: 13px; color: var(--c-slate-light); line-height: 1.9; margin: 0; }
  .wanted-bottom {
    margin-top: 48px;
    background: var(--c-forest);
    color: var(--c-white);
    padding: 32px 40px;
    text-align: center;
    font-family: var(--f-mincho);
    font-size: 17px;
    line-height: 1.8;
  }
  .wanted-bottom strong { color: var(--c-terracotta); font-weight: 500; }
  @media (max-width: 768px) {
    .wanted-grid { grid-template-columns: 1fr; }
  }

  /* ==== Voices (社員の声) ==== */
  .voices { background: var(--c-ivory-light); }
  .voices-intro { max-width: 720px; }
  .voices-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
  }
  .voice-card {
    background: var(--c-white);
    padding: 36px 28px 32px;
    position: relative;
    border-top: 2px solid var(--c-forest);
    display: flex;
    flex-direction: column;
  }
  .voice-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c-line);
    margin-bottom: 22px;
  }
  /* [C10 統合済 S0059] voice-avatar ベース + V7 追加 (position/overflow) を 1 つに統合 */
  .voice-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-forest) 0%, var(--c-forest-light) 100%);
    color: var(--c-ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-size: 28px;
    font-style: italic;
    font-weight: 500;
    flex-shrink: 0;
    letter-spacing: 0;
    position: relative;
    overflow: hidden;
  }
  .voice-avatar.accent {
    background: linear-gradient(135deg, var(--c-terracotta) 0%, var(--c-terracotta-dark) 100%);
  }
  .voice-avatar::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border: 1px solid var(--c-ivory);
    border-radius: 50%;
    opacity: 0.55;
  }
  .voice-avatar svg {
    width: 38px;
    height: 38px;
    stroke: var(--c-ivory);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: relative;
    z-index: 1;
  }
  .voice-avatar svg text {
    fill: var(--c-ivory);
    stroke: none;
    font-family: var(--f-mono);
    font-weight: 600;
  }
  .voice-avatar svg .accent-fill {
    fill: var(--c-ivory);
    stroke: none;
    opacity: 0.8;
  }

  /* V7 frontend-design: Product Lineup → 導入事例 動的展開 */
  .product-item {
    cursor: pointer;
    user-select: none;
    transition: background 0.35s cubic-bezier(0.65, 0, 0.35, 1),
                transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
                color 0.35s ease,
                border-color 0.35s ease;
    position: relative;
  }
  .product-item:hover {
    background: var(--c-paper);
    transform: translateY(-2px);
  }
  .product-item:focus-visible {
    outline: 2px solid var(--c-terracotta);
    outline-offset: 2px;
  }
  .product-item.is-active {
    background: var(--c-forest);
    color: var(--c-paper);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(47, 93, 80, 0.22);
  }
  .product-item.is-active .product-num {
    color: var(--c-terracotta);
  }
  .product-item::after {
    content: "+";
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--c-terracotta);
    opacity: 0.4;
    transition: transform 0.4s ease, opacity 0.4s ease;
  }
  .product-item:hover::after { opacity: 1; transform: rotate(45deg); }
  .product-item.is-active::after {
    content: "−";
    transform: none;
    opacity: 1;
    color: var(--c-terracotta);
  }

  .case-display {
    margin-top: 36px;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.5s ease,
                margin 0.4s ease;
    max-height: 0;
    opacity: 0;
  }
  .case-display.is-open {
    max-height: 1200px;
    opacity: 1;
    margin-top: 36px;
  }
  .case-pl-card {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--c-terracotta);
    padding: 40px 44px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 32px;
    animation: case-pl-burst 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
  }
  @keyframes case-pl-burst {
    0% { opacity: 0; transform: scale(0.94) translateY(24px); }
    60% { opacity: 1; transform: scale(1.02) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
  .case-pl-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(217, 119, 87, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(60px, -60px);
    pointer-events: none;
  }
  .case-pl-num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 64px;
    font-weight: 500;
    color: var(--c-terracotta);
    line-height: 1;
    letter-spacing: 0.02em;
    opacity: 0.92;
  }
  .case-pl-content {
    position: relative;
  }
  .case-pl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--c-line-dark);
  }
  .case-pl-industry {
    padding: 4px 12px;
    background: rgba(47, 93, 80, 0.1);
    color: var(--c-forest);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .case-pl-tag {
    padding: 4px 12px;
    background: var(--c-ivory-light);
    border: 1px dashed var(--c-line-dark);
    color: var(--c-slate);
    font-family: var(--f-mincho);
    font-size: 12px;
  }
  .case-pl-card h3 {
    font-family: var(--f-mincho);
    font-size: 24px;
    color: var(--c-forest-dark);
    font-weight: 600;
    margin: 0 0 16px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
  .case-pl-section {
    margin-bottom: 22px;
    font-size: 14.5px;
    color: var(--c-slate);
    line-height: 2.0;
    position: relative;
  }
  .case-pl-section + .case-pl-section {
    padding-top: 18px;
    border-top: 1px dashed var(--c-line);
  }
  .case-pl-section strong.label {
    display: block;
    margin-right: 0;
    margin-bottom: 10px;
    padding: 4px 12px;
    background: var(--c-charcoal);
    color: var(--c-paper);
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    width: fit-content;
    border-radius: 1px;
  }
  .case-pl-section:nth-of-type(2) strong.label {
    background: var(--c-forest);
  }
  .case-pl-section:nth-of-type(3) strong.label {
    background: var(--c-terracotta);
  }
  .case-pl-cta {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--c-line-dark);
    font-size: 13.5px;
    color: var(--c-slate);
    line-height: 1.85;
  }
  .case-pl-cta a {
    color: var(--c-terracotta);
    border-bottom: 1px solid var(--c-terracotta);
    font-weight: 600;
    padding-bottom: 1px;
  }
  @media (max-width: 768px) {
    .case-pl-card { grid-template-columns: 1fr; padding: 32px 28px; gap: 16px; }
    .case-pl-num { font-size: 40px; }
  }
  .products-hint {
    text-align: center;
    margin-top: 22px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--c-muted);
    text-transform: uppercase;
  }

  /* V7 frontend-design: Why SME · 中小 × 大手のいいとこ取り (Group Synergy 内拡張) */
  .why-sme {
    margin: 56px auto 48px;
    max-width: 1080px;
  }
  .why-sme-question {
    padding: 32px 36px;
    background: var(--c-charcoal);
    color: var(--c-paper);
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
  }
  .why-sme-question::before {
    content: "?";
    position: absolute;
    top: -28px;
    right: 24px;
    font-family: var(--f-handwrite);
    font-size: 220px;
    line-height: 1;
    color: var(--c-terracotta);
    opacity: 0.18;
  }
  .why-sme-question .why-sme-q-label {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--c-terracotta);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .why-sme-question h3 {
    font-family: var(--f-mincho);
    font-size: clamp(20px, 2.4vw, 26px);
    color: var(--c-paper);
    font-weight: 500;
    margin: 0 0 6px;
    line-height: 1.55;
    letter-spacing: 0.02em;
    position: relative;
  }
  .why-sme-question .why-sme-q-sub {
    font-size: 13.5px;
    color: rgba(251, 248, 240, 0.72);
    line-height: 1.85;
    position: relative;
  }

  .why-sme-answer {
    padding: 36px 36px 32px;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--c-forest);
    margin-bottom: 32px;
  }
  .why-sme-answer .why-sme-a-label {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--c-forest);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .why-sme-answer h3 {
    font-family: var(--f-mincho);
    font-size: clamp(22px, 2.6vw, 28px);
    color: var(--c-forest-dark);
    font-weight: 600;
    margin: 0 0 18px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
  .why-sme-answer p {
    font-size: 14.5px;
    color: var(--c-slate);
    line-height: 1.95;
    margin: 0 0 12px;
  }

  .sme-merits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 28px;
  }
  .sme-merit {
    padding: 22px 22px 20px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  }
  .sme-merit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(31, 41, 55, 0.07);
    border-color: var(--c-terracotta);
  }
  .sme-merit-num {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--c-terracotta);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .sme-merit h4 {
    font-family: var(--f-mincho);
    font-size: 16px;
    color: var(--c-forest-dark);
    font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
  .sme-merit p {
    font-size: 13px;
    color: var(--c-slate-light);
    line-height: 1.85;
    margin: 0;
  }

  .nadex-sectors {
    margin-top: 32px;
    padding: 24px 28px;
    background: rgba(47, 93, 80, 0.04);
    border-left: 3px solid var(--c-sage);
  }
  .nadex-sectors-label {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--c-forest);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .nadex-sectors-title {
    font-family: var(--f-mincho);
    font-size: 16px;
    color: var(--c-forest-dark);
    font-weight: 600;
    margin: 0 0 14px;
    line-height: 1.55;
  }
  .nadex-sectors ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .nadex-sectors li {
    padding: 6px 14px;
    background: var(--c-white);
    border: 1px solid var(--c-line-dark);
    font-family: var(--f-mincho);
    font-size: 13px;
    color: var(--c-forest);
    letter-spacing: 0.02em;
  }
  .nadex-sectors-note {
    margin-top: 14px;
    font-size: 12px;
    color: var(--c-muted);
    line-height: 1.85;
  }
  .nadex-sectors-note a {
    color: var(--c-terracotta);
    border-bottom: 1px solid var(--c-terracotta);
    font-weight: 500;
  }

  /* V7 frontend-design: AMR セクション デザイン強化 (主軸④ + Editorial Manifesto) */
  .amr-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-line-dark);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .amr-eyebrow-label {
    color: var(--c-terracotta);
    font-weight: 600;
  }
  .amr-eyebrow-year {
    color: var(--c-muted);
    font-weight: 500;
  }

  .amr-pull-message {
    position: relative;
    margin: 48px 0;
    padding: 44px 52px 38px 100px;
    background: linear-gradient(135deg, var(--c-charcoal) 0%, var(--c-forest-dark) 100%);
    color: var(--c-paper);
    border-left: 4px solid var(--c-terracotta);
    overflow: hidden;
  }
  .amr-pull-message::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(217, 119, 87, 0.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(217, 119, 87, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .amr-pull-mark {
    position: absolute;
    top: -6px;
    left: 22px;
    font-family: var(--f-handwrite);
    font-size: 180px;
    line-height: 1;
    color: var(--c-terracotta);
    opacity: 0.32;
    pointer-events: none;
  }
  .amr-pull-text {
    position: relative;
    margin: 0;
    font-family: var(--f-mincho);
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 2;
    letter-spacing: 0.02em;
    color: rgba(251, 248, 240, 0.95);
  }
  .amr-pull-text strong {
    color: var(--c-paper);
    font-weight: 600;
  }
  .amr-pull-text .hand-underline {
    color: var(--c-paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q 50 1, 100 4 T 198 4' stroke='%23D97757' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  @media (max-width: 768px) {
    .amr-pull-message {
      padding: 36px 28px 32px 28px;
    }
    .amr-pull-mark {
      font-size: 120px;
      top: -4px;
      left: 14px;
    }
  }
  .voice-meta { flex: 1; min-width: 0; }
  .voice-role {
    display: inline-block;
    font-family: var(--f-display);
    font-size: 13px;
    font-style: italic;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 4px;
  }
  .voice-name {
    font-family: var(--f-mincho);
    font-size: 18px;
    font-weight: 500;
    color: var(--c-forest-dark);
    line-height: 1.3;
    margin: 0 0 4px;
  }
  .voice-year {
    font-size: 13px;
    color: var(--c-muted);
    letter-spacing: 0.03em;
  }
  .voice-qa { margin-bottom: 18px; }
  .voice-qa:last-child { margin-bottom: 0; }
  .voice-q {
    font-family: var(--f-mincho);
    font-size: 13px;
    color: var(--c-terracotta);
    font-weight: 500;
    margin: 0 0 6px;
    line-height: 1.5;
  }
  .voice-q::before {
    content: 'Q. ';
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .voice-a {
    font-size: 13px;
    line-height: 1.85;
    color: var(--c-slate);
    margin: 0;
  }
  .voices-note {
    margin-top: 48px;
    padding: 20px 28px;
    background: var(--c-ivory);
    border-left: 3px solid var(--c-sage);
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-slate-light);
  }
  .voices-note strong { color: var(--c-forest-dark); font-weight: 600; }
  @media (max-width: 1024px) {
    .voices-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .voices-grid { grid-template-columns: 1fr; gap: 20px; }
    .voice-card { padding: 28px 24px; }
  }

  /* ==== 大手直接取引 ビジュアル ==== */
  .biz-base { background: var(--c-white); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 80px var(--gutter); }
  .biz-base-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 64px;
    align-items: center;
  }
  .biz-chart { text-align: center; }
  .biz-chart svg { width: 100%; max-width: 300px; height: auto; }
  .biz-chart-label {
    font-family: var(--f-mincho);
    font-size: 15px;
    color: var(--c-forest-dark);
    margin-top: 16px;
  }
  .biz-base-text h3 {
    font-family: var(--f-mincho);
    font-size: 26px;
    color: var(--c-forest-dark);
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .biz-base-text h3 .en {
    display: block;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .biz-base-text p { font-size: 14px; color: var(--c-slate-light); line-height: 2; margin: 0; }
  @media (max-width: 1024px) {
    .biz-base-inner { grid-template-columns: 1fr; gap: 48px; }
  }

  /* ==== About (会社紹介) ==== */
  .about { background: var(--c-white); }
  .about-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .about-text .section-title { margin-bottom: 32px; }
  .about-pull {
    font-family: var(--f-mincho);
    font-size: 20px;
    font-weight: 500;
    color: var(--c-forest-dark);
    line-height: 1.9;
    padding: 24px 0;
    border-top: 1px solid var(--c-line-dark);
    border-bottom: 1px solid var(--c-line-dark);
    margin: 32px 0;
  }
  .about-desc { font-size: 15px; color: var(--c-slate-light); line-height: 2.1; }
  .about-image {
    position: relative;
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
  }
  .about-image-tag {
    position: absolute;
    bottom: -24px; left: -24px;
    background: var(--c-forest);
    color: var(--c-white);
    padding: 20px 28px;
    font-family: var(--f-mincho);
    font-size: 14px;
    line-height: 1.7;
    max-width: 240px;
  }
  .about-image-tag .en {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 6px;
    text-transform: uppercase;
    display: block;
  }
  .about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--c-line);
  }
  .about-stat {
    text-align: left;
  }
  .about-stat-label {
    font-family: var(--f-display);
    font-size: 13px;
    font-style: italic;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .about-stat-value {
    font-family: var(--f-mincho);
    font-size: 18px;
    color: var(--c-forest-dark);
    line-height: 1.6;
  }
  @media (max-width: 1024px) {
    .about-grid { grid-template-columns: 1fr; gap: 48px; }
    .about-stats { grid-template-columns: 1fr; gap: 16px; }
    .about-image-tag { bottom: -16px; left: 0; right: 0; max-width: none; }
  }

  /* About Banner (外観ワイド) */
  .about-banner {
    margin-top: 120px;
    position: relative;
    aspect-ratio: 21/6;
    background-image: url('images/gaikan001.jpg');
    background-size: cover;
    background-position: center 70%;
  }
  .about-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(47,93,80,0.85) 0%, rgba(47,93,80,0.3) 50%, transparent 100%);
  }
  .about-banner-text {
    position: absolute;
    top: 50%; left: 8%;
    transform: translateY(-50%);
    color: var(--c-white);
    z-index: 2;
    max-width: 420px;
  }
  .about-banner-text .en {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.3em;
    margin-bottom: 12px;
    text-transform: uppercase;
  }
  .about-banner-text h3 {
    font-family: var(--f-mincho);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 500;
    line-height: 1.6;
  }
  @media (max-width: 768px) {
    .about-banner { aspect-ratio: 4/3; margin-top: 80px; }
    .about-banner-text { left: 24px; right: 24px; max-width: none; }
  }

  /* ==== Message (代表/顧問メッセージ) ==== */
  .message {
    background: var(--c-ivory);
    padding: 120px var(--gutter);
    position: relative;
  }
  .message-inner {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
  }
  .message-quote-mark {
    font-family: var(--f-display);
    font-size: 160px;
    line-height: 0.8;
    color: var(--c-terracotta);
    opacity: 0.25;
    position: absolute;
    top: -20px; left: -40px;
    font-style: italic;
    font-weight: 500;
  }
  .message-body {
    position: relative;
    z-index: 2;
    padding-left: 24px;
  }
  .message-lead {
    font-family: var(--f-mincho);
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: 500;
    color: var(--c-forest-dark);
    line-height: 1.9;
    margin-bottom: 40px;
    letter-spacing: 0.02em;
  }
  .message-text {
    font-size: 15px;
    color: var(--c-slate-light);
    line-height: 2.2;
    margin-bottom: 48px;
  }
  .message-author {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
    border-top: 1px solid var(--c-line-dark);
  }
  .message-author-role {
    font-family: var(--f-display);
    font-size: 13px;
    font-style: italic;
    color: var(--c-terracotta);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .message-author-name {
    font-family: var(--f-mincho);
    font-size: 18px;
    color: var(--c-forest-dark);
  }

  /* ==== Mynavi Links ==== */
  .mynavi-block {
    margin-top: 56px;
    padding: 32px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    text-align: center;
  }
  .mynavi-block-label {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .mynavi-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .mynavi-btn {
    background: var(--c-white);
    color: var(--c-forest-dark);
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    justify-content: center;
  }
  .mynavi-btn:hover { background: var(--c-terracotta); color: var(--c-white); opacity: 1; transform: translateY(-2px); }
  .mynavi-btn::after { content: '↗'; font-size: 14px; opacity: 0.6; }
  .mynavi-btn.coming { background: transparent; color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.3); }
  .mynavi-btn.coming::after { content: '◦'; }
  .mynavi-btn .small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 2px;
    font-family: var(--f-display);
    font-style: italic;
    text-transform: uppercase;
  }
  .mynavi-btn.coming .small { color: rgba(255,255,255,0.5); }

  /* ==== Hero decoration ==== */
  .hero-text { position: relative; }
  .hero-deco {
    position: absolute;
    bottom: 48px; left: 8vw;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--c-sage);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .hero-deco::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--c-sage);
  }

  /* [C4 削除済 S0059] section-divider 旧定義 + 新定義 + 関連 class すべて HTML 内未使用デッドコード
     V1.1 code-explorer 検証: HTML body 内 class="section-divider" / .section-divider-line / .section-divider-text 全て使用ゼロ確認済 */

  /* ==== Products (取扱製品一覧) ==== */
  .products { background: var(--c-white); }
  .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--c-line);
    border: 1px solid var(--c-line);
    margin-top: 48px;
  }
  .product-item {
    background: var(--c-white);
    padding: 28px 24px;
    transition: background 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .product-item:hover { background: var(--c-ivory-light); }
  .product-num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    font-weight: 600;
  }
  .product-name {
    font-family: var(--f-mincho);
    font-size: 15px;
    color: var(--c-forest-dark);
    line-height: 1.6;
  }
  @media (max-width: 1024px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr; }
  }

  /* ==== History (沿革) ==== */
  .history { background: var(--c-ivory); }
  .history-timeline {
    margin-top: 48px;
    position: relative;
    padding-left: 0;
  }
  /* [C5 統合済 S0059] 標準スタイル + V5.2 アニメーション (元 ==== History タイムライン縦線 ==== ブロック) を 1 つに統合 */
  .history-timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 150px;
    width: 1px;
    background: var(--c-line-dark);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .history-item {
    display: grid;
    grid-template-columns: 150px 32px 1fr;
    gap: 0;
    padding: 18px 0;
    align-items: flex-start;
    position: relative;
  }
  .history-date {
    font-family: var(--f-mincho);
    font-size: 14px;
    color: var(--c-forest-dark);
    font-weight: 500;
    padding-top: 2px;
    padding-right: 24px;
    text-align: right;
  }
  .history-dot {
    width: 12px;
    height: 12px;
    border: 2px solid var(--c-forest);
    border-radius: 50%;
    background: var(--c-ivory);
    margin: 6px auto 0;
    position: relative;
    z-index: 2;
  }
  .history-item.milestone .history-dot {
    background: var(--c-terracotta);
    border-color: var(--c-terracotta);
    width: 14px;
    height: 14px;
    margin-top: 5px;
  }
  .history-item.milestone .history-date {
    color: var(--c-terracotta);
    font-weight: 600;
  }
  .history-body {
    padding-left: 24px;
    font-size: 14px;
    color: var(--c-slate);
    line-height: 1.9;
  }
  .history-item.milestone .history-body {
    font-family: var(--f-mincho);
    font-size: 15px;
    color: var(--c-forest-dark);
    font-weight: 500;
  }
  @media (max-width: 768px) {
    .history-timeline::before { left: 100px; }
    .history-item { grid-template-columns: 100px 24px 1fr; }
    .history-date { font-size: 13px; padding-right: 12px; }
    .history-body { padding-left: 16px; font-size: 13px; }
  }

  /* ==== Company Profile (会社概要) ==== */
  .company { background: var(--c-white); }
  .company-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-top: 48px;
  }
  .company-table {
    width: 100%;
    border-collapse: collapse;
  }
  .company-table tr { border-bottom: 1px solid var(--c-line); }
  .company-table tr:first-child { border-top: 1px solid var(--c-line); }
  .company-table th {
    font-family: var(--f-mincho);
    font-weight: 500;
    font-size: 13px;
    color: var(--c-forest-dark);
    text-align: left;
    padding: 16px 16px 16px 0;
    width: 130px;
    vertical-align: top;
  }
  .company-table td {
    padding: 16px 0;
    font-size: 14px;
    color: var(--c-slate);
    line-height: 1.9;
  }
  .clients-block h4, .bank-block h4 {
    font-family: var(--f-mincho);
    font-size: 17px;
    color: var(--c-forest-dark);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-line-dark);
  }
  .clients-block h4 .en, .bank-block h4 .en {
    display: block;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 600;
  }
  .clients-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .client-chip {
    font-size: 13px;
    color: var(--c-forest-dark);
    background: var(--c-ivory-light);
    padding: 8px 14px;
    border: 1px solid var(--c-line-dark);
    font-family: var(--f-gothic);
  }
  .clients-note {
    margin-top: 20px;
    font-size: 13px;
    color: var(--c-muted);
    font-style: italic;
  }
  .bank-block { margin-top: 40px; }
  .bank-list {
    font-size: 14px;
    color: var(--c-slate);
    line-height: 2;
  }
  @media (max-width: 1024px) {
    .company-split { grid-template-columns: 1fr; gap: 48px; }
  }

  /* ==== マイナビバナー画像 ==== */
  .mynavi-banner-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  .mynavi-banner-wrap img {
    display: block;
    height: 45px;
    width: auto;
    transition: opacity 0.25s ease;
    border: 1px solid rgba(255,255,255,0.2);
  }
  .mynavi-banner-wrap a:hover img { opacity: 0.85; }
  .mynavi-banner-caption {
    text-align: center;
    font-family: var(--f-gothic);
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    margin-top: 10px;
    letter-spacing: 0.05em;
  }
  .mynavi-banner-caption .small {
    display: block;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-top: 2px;
    text-transform: uppercase;
  }

  /* [C7 削除済 S0059] .fade-in 旧実装は HTML 不使用 (現在は .reveal が使用中) */

  /* ==== Premium Animations (V5.1) ==== */
  @keyframes kenBurns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes subtleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }
  @keyframes drawLine {
    from { stroke-dashoffset: 600; }
    to   { stroke-dashoffset: 0; }
  }

  /* Generic scroll reveal */
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-d1 { transition-delay: 0.10s; }
  .reveal-d2 { transition-delay: 0.20s; }
  .reveal-d3 { transition-delay: 0.30s; }

  /* Hero Ken Burns (gentle slow zoom) */
  .hero-visual { overflow: hidden; position: relative; }
  .hero-visual.animated {
    background-image: none !important;
  }
  .hero-visual.animated::before {
    content: '';
    position: absolute;
    inset: -6%;
    background-image: url('images/kaigi001.jpg');
    background-size: cover;
    background-position: center;
    animation: kenBurns 24s ease-in-out infinite alternate;
    z-index: 0;
  }
  .hero-visual.animated::after {
    z-index: 1;
  }
  .hero-visual.animated .hero-badge { z-index: 3; }

  /* Hero badge subtle float */
  .hero-badge { animation: subtleFloat 6s ease-in-out infinite; }

  /* Card hover lift (work, voice, wanted, reason, dc-card) */
  .work-item, .voice-card, .wanted-item, .reason-item,
  .dc-card, .amr-chance, .group-card, .benefit-item,
  .product-chip, .client-chip {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.35s ease;
  }
  .work-item:hover {
    transform: translateY(-8px);
  }
  .voice-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -18px rgba(47, 93, 80, 0.22);
  }
  .wanted-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px -12px rgba(47, 93, 80, 0.15);
  }
  .reason-item:hover, .dc-card:hover, .amr-chance:hover, .group-card:hover {
    transform: translateY(-6px);
  }
  .client-chip:hover {
    border-color: var(--c-forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -8px rgba(47, 93, 80, 0.25);
  }

  /* Work item image zoom on hover */
  .work-item-img {
    overflow: hidden;
    position: relative;
  }
  .work-item-img img {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .work-item:hover .work-item-img img {
    transform: scale(1.06);
  }

  /* Button shine effect */
  .btn-primary {
    position: relative;
    overflow: hidden;
  }
  .btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
    transition: left 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .btn-primary:hover::before { left: 120%; }

  /* SVG line draw animation (on the bizChart circle) */
  .biz-chart svg circle:nth-of-type(2) {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
  }
  .biz-chart.animated svg circle:nth-of-type(2) {
    animation: drawLine 2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
  }

  /* [C4 削除済 S0059] section-divider V5.1 新定義もデッドコード (HTML 未使用・上記削除箇所と同根) */

  /* Voices gallery (新: 職場風景ギャラリー) */
  .voices-gallery {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 16px;
    margin-top: 56px;
    max-height: 380px;
  }
  .voices-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    background: var(--c-forest);
  }
  .voices-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s ease;
    display: block;
  }
  .voices-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(31, 63, 54, 0.55) 100%);
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .voices-gallery-item .gallery-caption {
    position: absolute;
    bottom: 16px;
    left: 20px;
    color: var(--c-white);
    z-index: 2;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 16px;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .voices-gallery-item .gallery-caption .label {
    display: block;
    font-family: var(--f-gothic);
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.2em;
    color: var(--c-terracotta);
    margin-bottom: 4px;
    text-transform: uppercase;
  }
  .voices-gallery-item:hover img {
    transform: scale(1.05);
  }
  .voices-gallery-item:hover .gallery-caption {
    opacity: 1;
    transform: translateY(0);
  }
  @media (max-width: 768px) {
    .voices-gallery { grid-template-columns: 1fr; max-height: none; }
    .voices-gallery-item { aspect-ratio: 16/10; }
    .voices-gallery-item .gallery-caption { opacity: 1; transform: none; }
  }

  /* Decorative quote ornament for Message section */
  .message-mark {
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-terracotta);
    opacity: 0.25;
    font-size: 140px;
    line-height: 0.5;
    position: absolute;
    top: 40px;
    left: -10px;
    user-select: none;
    pointer-events: none;
  }

  /* Accessibility: respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
    .hero-visual.animated::before { animation: none; }
    .btn-primary::before { display: none; }
    .hero-badge { animation: none; }
    .biz-chart.animated svg circle:nth-of-type(2) { animation: none; stroke-dasharray: 339.3 226.2; stroke-dashoffset: 0; }
    * { scroll-behavior: auto !important; }
  }

  /* ==== Improve 5つの柱 (V5.2) ==== */
  .improve-block {
    margin-top: 96px;
    padding-top: 72px;
    border-top: 1px solid var(--c-line);
  }
  .improve-intro { max-width: 720px; margin-bottom: 48px; }
  .improve-intro .en {
    display: block;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 14px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 12px;
    text-transform: uppercase;
  }
  .improve-intro h3 {
    font-family: var(--f-mincho);
    font-size: 28px;
    font-weight: 500;
    color: var(--c-forest-dark);
    line-height: 1.55;
    margin: 0 0 20px;
  }
  .improve-intro p {
    font-size: 15px;
    line-height: 2;
    color: var(--c-slate-light);
    margin: 0;
  }
  .improve-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
  .improve-item {
    background: var(--c-ivory);
    padding: 28px 22px 32px;
    border-top: 2px solid var(--c-terracotta);
    position: relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s ease;
  }
  .improve-item:hover {
    background: var(--c-white);
    transform: translateY(-5px);
    box-shadow: 0 14px 28px -14px rgba(47,93,80,0.18);
  }
  .improve-num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 30px;
    color: var(--c-line-dark);
    line-height: 1;
    margin-bottom: 18px;
    font-weight: 500;
  }
  .improve-title {
    font-family: var(--f-gothic);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-forest-dark);
    line-height: 1.5;
    margin-bottom: 6px;
  }
  .improve-arrow {
    font-family: var(--f-display);
    color: var(--c-terracotta);
    font-size: 14px;
    margin: 4px 0 8px;
    font-style: italic;
  }
  .improve-desc {
    font-size: 13px;
    color: var(--c-slate-light);
    line-height: 1.8;
    margin: 0;
  }
  @media (max-width: 1024px) {
    .improve-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 768px) {
    .improve-grid { grid-template-columns: repeat(2, 1fr); }
    .improve-intro h3 { font-size: 22px; }
  }

  /* ==== Safety バナー (V5.2) ==== */
  .safety-banner {
    margin-top: 80px;
    padding: 56px 48px;
    background: var(--c-forest);
    color: var(--c-ivory);
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 56px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .safety-banner::before {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(217,119,87,0.22) 0%, transparent 70%);
    pointer-events: none;
  }
  .safety-banner::after {
    content: '';
    position: absolute;
    left: -30px; bottom: -30px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(133,155,130,0.12) 0%, transparent 70%);
    pointer-events: none;
  }
  .safety-title { position: relative; z-index: 1; }
  .safety-title .en {
    display: block;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 14px;
    color: var(--c-terracotta);
    letter-spacing: 0.22em;
    margin-bottom: 10px;
    text-transform: uppercase;
  }
  .safety-title h3 {
    font-family: var(--f-mincho);
    font-size: 24px;
    font-weight: 500;
    color: var(--c-white);
    line-height: 1.5;
    margin: 0;
  }
  .safety-principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
    z-index: 1;
  }
  .safety-principle {
    padding-left: 20px;
    border-left: 2px solid var(--c-terracotta);
  }
  .safety-principle-num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .safety-principle-text {
    font-family: var(--f-mincho);
    font-size: 17px;
    color: var(--c-white);
    line-height: 1.5;
    margin: 0;
  }
  @media (max-width: 1024px) {
    .safety-banner { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
    .safety-principles { grid-template-columns: 1fr; gap: 20px; }
  }

  /* ==== AMR SVG アニメーション (V5.2) ==== */
  .amr-visual svg path[stroke-dasharray="4 4"] {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
  }
  .amr-main.animated .amr-visual svg path[stroke-dasharray="4 4"] {
    stroke-dashoffset: 0;
  }
  .amr-main.animated .amr-visual svg circle[cx="40"][cy="260"] {
    animation: amrPulseStart 2.4s ease-in-out infinite 0.8s;
  }
  .amr-main.animated .amr-visual svg circle[cx="280"][cy="120"] {
    animation: amrPulseGoal 2.4s ease-in-out infinite 1.4s;
  }
  @keyframes amrPulseStart {
    0%, 100% { r: 6; opacity: 1; }
    50%      { r: 9; opacity: 0.6; }
  }
  @keyframes amrPulseGoal {
    0%, 100% { r: 6; opacity: 1; }
    50%      { r: 9; opacity: 0.6; }
  }
  /* AMR本体が浮遊するアニメーション */
  .amr-main.animated .amr-visual svg g[transform="translate(160 160)"] {
    animation: amrBob 4s ease-in-out infinite 1.2s;
    transform-origin: 160px 160px;
  }
  @keyframes amrBob {
    0%, 100% { transform: translate(160px, 160px); }
    50%      { transform: translate(160px, 155px); }
  }
  /* センサー波が脈動 */
  .amr-main.animated .amr-visual svg g[transform="translate(160 160)"] path[opacity="0.7"],
  .amr-main.animated .amr-visual svg g[transform="translate(160 160)"] path[opacity="0.4"] {
    animation: amrSensor 2s ease-in-out infinite;
  }
  @keyframes amrSensor {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 0.2; }
  }

  /* ==== Numbers 背景パターン (V5.2) ==== */
  .numbers {
    position: relative;
    overflow: hidden;
  }
  .numbers::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(47, 93, 80, 0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(47, 93, 80, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    z-index: 0;
  }
  .numbers::after {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(217,119,87,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .numbers .section-inner { position: relative; z-index: 1; }

  /* 数字カードの左上に小さな装飾装置 */
  .num-block {
    position: relative;
  }
  .num-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 28px; height: 2px;
    background: var(--c-terracotta);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  }
  .num-block.reveal.visible::before {
    width: 48px;
  }

  /* [C5 統合済 S0059] V5.2 history-timeline::before アニメーションは標準スタイル (line 2938) に統合済 */
  .history-timeline.animated::before {
    transform: scaleY(1);
  }

  /* ==== DC 比較ブロック (V5.2 / S0037 ご担当者様ご指示でバック透明化・緑との相性改善) ==== */
  .dc-compare {
    margin-top: 64px;
    padding: 40px 44px 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
  }
  .dc-compare-sub {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .dc-compare-title {
    font-family: var(--f-mincho);
    font-size: 22px;
    color: var(--c-white);
    margin: 0 0 32px;
    line-height: 1.5;
    font-weight: 500;
  }
  .dc-compare-grid {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .dc-compare-col {
    padding: 24px 24px 28px;
    border-top: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.08);
  }
  .dc-compare-col.tcs {
    /* S0037 ご担当者様ご指示: オレンジバック→オレンジ枠囲み + 背景透明化で緑との可読性改善 */
    border: 2px solid var(--c-terracotta);
    border-top-width: 3px;
    background: transparent;
    position: relative;
    box-shadow: 0 0 18px rgba(217, 119, 87, 0.22), inset 0 0 24px rgba(217, 119, 87, 0.03);
  }
  .dc-compare-col.tcs::before {
    content: 'TCS';
    position: absolute;
    top: -14px; right: 16px;
    background: var(--c-terracotta);
    color: var(--c-white);
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    padding: 4px 10px;
    letter-spacing: 0.2em;
  }
  .dc-compare-col-label {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 6px;
    text-transform: uppercase;
  }
  .dc-compare-col-title {
    font-family: var(--f-mincho);
    font-size: 17px;
    color: var(--c-white);
    margin: 0 0 18px;
    line-height: 1.5;
    font-weight: 700;
  }
  .dc-compare-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .dc-compare-col li {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--c-white);
    padding: 7px 0 7px 18px;
    position: relative;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .dc-compare-col li::before {
    content: '';
    position: absolute;
    left: 0; top: 16px;
    width: 10px; height: 1px;
    background: rgba(255, 255, 255, 0.4);
  }
  .dc-compare-col.tcs li::before {
    background: var(--c-terracotta);
  }
  .dc-compare-vs {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 26px;
    color: var(--c-terracotta);
    align-self: center;
    justify-self: center;
    font-weight: 500;
  }
  .dc-compare-conclusion {
    /* S0037 ご担当者様ご指示: オレンジバック削除・左 border のみで強調 */
    margin-top: 28px;
    padding: 22px 26px 22px 30px;
    background: transparent;
    border-left: 4px solid var(--c-terracotta);
    font-family: var(--f-mincho);
    font-size: 15.5px;
    color: var(--c-white);
    line-height: 1.9;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .dc-compare-conclusion strong {
    color: var(--c-terracotta);
    font-weight: 700;
  }
  @media (max-width: 1024px) {
    .dc-compare { padding: 28px 24px 24px; }
    .dc-compare-grid { grid-template-columns: 1fr; gap: 16px; }
    .dc-compare-vs { justify-self: start; font-size: 20px; padding-left: 8px; }
  }

  /* ==== Training Programs (V5.3) ==== */
  .training { background: var(--c-ivory); position: relative; overflow: hidden; }
  .training::before {
    content: '';
    position: absolute;
    right: -100px; top: 60px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(217,119,87,0.06) 0%, transparent 70%);
    pointer-events: none;
  }
  .training .section-inner { position: relative; z-index: 1; }

  /* 研修プログラムの3ステップ表示 */
  .training-flow {
    display: grid;
    grid-template-columns: 1fr 40px 1.4fr 40px 1fr;
    gap: 0;
    margin-top: 56px;
    align-items: stretch;
  }
  .training-step {
    background: var(--c-white);
    padding: 32px 28px;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .training-step.featured {
    background: var(--c-forest);
    color: var(--c-ivory);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -18px rgba(47,93,80,0.3);
  }
  .training-step-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-line);
  }
  .training-step.featured .training-step-head {
    border-bottom-color: rgba(255,255,255,0.18);
  }
  .training-step-num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 28px;
    color: var(--c-terracotta);
    line-height: 1;
    font-weight: 500;
  }
  .training-step-date {
    font-family: var(--f-gothic);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-forest-dark);
    letter-spacing: 0.04em;
  }
  .training-step.featured .training-step-date {
    color: var(--c-white);
  }
  .training-step-title {
    font-family: var(--f-mincho);
    font-size: 18px;
    font-weight: 500;
    color: var(--c-forest-dark);
    line-height: 1.5;
    margin: 0 0 6px;
  }
  .training-step.featured .training-step-title {
    color: var(--c-white);
    font-size: 20px;
  }
  .training-step-location {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-muted);
    letter-spacing: 0.1em;
    margin-bottom: 18px;
  }
  .training-step.featured .training-step-location {
    color: var(--c-terracotta);
  }
  .training-step ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
  }
  .training-step li {
    font-size: 13px;
    line-height: 1.7;
    color: var(--c-slate-light);
    padding: 6px 0 6px 18px;
    position: relative;
  }
  .training-step.featured li {
    color: rgba(255,255,255,0.88);
  }
  .training-step li::before {
    content: '';
    position: absolute;
    left: 0; top: 14px;
    width: 10px; height: 1px;
    background: var(--c-line-dark);
  }
  .training-step.featured li::before {
    background: var(--c-terracotta);
  }
  .training-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-line-dark);
    font-size: 20px;
  }
  @media (max-width: 1024px) {
    .training-flow {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .training-step.featured { transform: none; }
    .training-arrow {
      transform: rotate(90deg);
      padding: 4px 0;
      font-size: 16px;
    }
  }

  /* 方広寺の詳細カード */
  .houkouji-detail {
    margin-top: 72px;
    padding: 48px;
    background: var(--c-white);
    border-top: 3px solid var(--c-terracotta);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: start;
  }
  .houkouji-header {
    margin-bottom: 28px;
  }
  .houkouji-label {
    display: inline-block;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .houkouji-title {
    font-family: var(--f-mincho);
    font-size: 26px;
    color: var(--c-forest-dark);
    line-height: 1.5;
    margin: 0 0 16px;
    font-weight: 500;
  }
  .houkouji-lead {
    font-size: 14px;
    line-height: 2;
    color: var(--c-slate-light);
    margin: 0;
  }
  /* 7つの学び */
  .learning-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
    margin-top: 24px;
  }
  .learning-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--c-ivory);
    border-left: 2px solid var(--c-terracotta);
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .learning-item:hover {
    background: var(--c-ivory-light);
    transform: translateX(4px);
  }
  .learning-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    color: var(--c-forest);
  }
  .learning-text {
    font-family: var(--f-gothic);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-forest-dark);
    line-height: 1.4;
  }
  .learning-text small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--c-muted);
    margin-top: 2px;
    font-family: var(--f-display);
    font-style: italic;
    letter-spacing: 0.1em;
  }

  /* 方広寺SVGイラスト領域 */
  .houkouji-visual {
    background: linear-gradient(180deg, #E8F0ED 0%, #F5F1E8 100%);
    padding: 24px;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .houkouji-visual svg {
    width: 100%; height: auto;
  }

  /* 研修ハイライト：ユニーク体験 */
  .training-unique {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .unique-card {
    padding: 28px 20px 24px;
    background: var(--c-white);
    text-align: center;
    border-top: 2px solid var(--c-forest);
    position: relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  }
  .unique-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px -14px rgba(47,93,80,0.18);
  }
  .unique-icon {
    width: 48px; height: 48px;
    margin: 0 auto 14px;
    color: var(--c-terracotta);
  }
  .unique-title {
    font-family: var(--f-mincho);
    font-size: 15px;
    font-weight: 500;
    color: var(--c-forest-dark);
    margin-bottom: 8px;
    line-height: 1.5;
  }
  .unique-desc {
    font-size: 13px;
    line-height: 1.75;
    color: var(--c-slate-light);
    margin: 0;
  }
  @media (max-width: 1024px) {
    .training-unique { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 1024px) {
    .houkouji-detail { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
    .learning-grid { grid-template-columns: 1fr; }
  }

  /* 新入社員の声（研修報告書）引用ブロック */
  .training-quote {
    margin-top: 72px;
    padding: 48px 56px;
    background: var(--c-forest);
    color: var(--c-ivory);
    position: relative;
    overflow: hidden;
  }
  .training-quote::before {
    content: '"';
    position: absolute;
    left: 24px; top: -20px;
    font-family: var(--f-display);
    font-size: 180px;
    color: var(--c-terracotta);
    opacity: 0.3;
    line-height: 1;
    font-style: italic;
  }
  .training-quote-label {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.2em;
    margin-bottom: 12px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
  }
  .training-quote-text {
    font-family: var(--f-mincho);
    font-size: 19px;
    line-height: 2;
    color: var(--c-white);
    margin: 0 0 24px;
    position: relative;
    z-index: 1;
    font-weight: 400;
  }
  .training-quote-text strong {
    color: var(--c-terracotta);
    font-weight: 500;
  }
  .training-quote-author {
    font-family: var(--f-gothic);
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
  }
  .training-quote-author .role {
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-terracotta);
    letter-spacing: 0.15em;
    font-size: 13px;
    margin-bottom: 4px;
  }
  @media (max-width: 768px) {
    .training-quote { padding: 32px 24px; }
    .training-quote-text { font-size: 16px; }
  }

  /* 横地常務からの言葉 small banner */
  .training-endorsement {
    margin-top: 40px;
    padding: 24px 32px;
    background: var(--c-ivory-light);
    border-left: 3px solid var(--c-terracotta);
    font-family: var(--f-mincho);
    font-size: 15px;
    line-height: 1.9;
    color: var(--c-slate);
  }
  .training-endorsement strong { color: var(--c-terracotta); font-weight: 500; }
  .training-endorsement .source {
    display: block;
    margin-top: 10px;
    font-family: var(--f-gothic);
    font-size: 13px;
    color: var(--c-muted);
    letter-spacing: 0.05em;
  }

  /* ==== P4 Group Tree SVG 登場アニメーション（V6 S0036 追加） ==== */
  .group-tree svg rect,
  .group-tree svg text,
  .group-tree svg line {
    opacity: 0;
    animation: treeNodeAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .group-tree svg rect:nth-of-type(1),
  .group-tree svg text:nth-of-type(1),
  .group-tree svg text:nth-of-type(2) { animation-delay: 0.3s; }
  .group-tree svg line:nth-of-type(1) { animation-delay: 0.75s; }
  .group-tree svg rect:nth-of-type(2),
  .group-tree svg text:nth-of-type(3),
  .group-tree svg text:nth-of-type(4) { animation-delay: 0.95s; }
  .group-tree svg line:nth-of-type(2) { animation-delay: 1.4s; }
  .group-tree svg rect:nth-of-type(3),
  .group-tree svg text:nth-of-type(5),
  .group-tree svg text:nth-of-type(6) { animation-delay: 1.6s; }

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

  /* ==== P4 Hero SVG パターン overlay（V6 S0036 追加・制御技術のニュアンス） ==== */
  .hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F5F1E8' stroke-width='0.8' opacity='0.35'%3E%3Ccircle cx='20' cy='20' r='2.5'/%3E%3Ccircle cx='60' cy='40' r='1.5'/%3E%3Ccircle cx='100' cy='20' r='2.5'/%3E%3Ccircle cx='40' cy='80' r='1.5'/%3E%3Ccircle cx='80' cy='100' r='2.5'/%3E%3Cpath d='M20 20 L60 40 L100 20 M60 40 L40 80 M100 20 L80 100 L40 80'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 180px;
    background-repeat: repeat;
    opacity: 0.4;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
  }

  /* ==== P4 Numbers セクション 背景装飾強化（V6 S0036 追加） ==== */
  .section.numbers .num-block {
    position: relative;
    overflow: hidden;
  }
  .section.numbers .num-block::before {
    content: '';
    position: absolute;
    right: -20px;
    top: -20px;
    width: 80px;
    height: 80px;
    border: 1px solid var(--c-terracotta);
    opacity: 0.12;
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.5s ease;
  }
  .section.numbers .num-block:hover::before {
    opacity: 0.25;
    transform: scale(1.2) rotate(10deg);
  }

  /* ==== P4 スクロールバー スタイリング（V6 S0036 追加） ==== */
  html { scroll-padding-top: 80px; }

  /* ==== P4 Hero マイクロアニメーション（V6 S0036 追加） ==== */
  @keyframes heroBounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(6px); opacity: 1; }
  }
  .hero-deco {
    animation: heroBounce 2.4s ease-in-out infinite;
  }
  .hero-deco::after {
    content: ' ↓';
    display: inline-block;
    margin-left: 8px;
    font-weight: 600;
  }

  @keyframes kickerFadeSlide {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .hero-kicker {
    animation: kickerFadeSlide 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  }

  @keyframes heroTitleRise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero h1 {
    animation: heroTitleRise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
  }
  .hero-lead {
    animation: heroTitleRise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
  }
  .hero-actions {
    animation: heroTitleRise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
  }

  /* ==== P4 Top Message 引用符の微アニメーション（V6 S0036 追加） ==== */
  @keyframes quoteMarkRise {
    from { opacity: 0; transform: translateY(20px) scale(0.8); }
    to { opacity: 0.18; transform: translateY(0) scale(1); }
  }
  .message-quote-mark {
    animation: quoteMarkRise 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* ==== P4 多業界チップ hover（V6 S0036 追加） ==== */
  .business [style*="Industries We Serve"] ~ div span,
  .business div > span[style*="border-radius: 30px"] {
    will-change: transform;
  }

  /* ==== P4 CTA ボタン拡張（V6 S0036 追加・hover 時の矢印動き） ==== */
  .btn-primary::after {
    transition: transform 0.3s ease;
  }
  .btn-primary:hover::after {
    transform: translateX(4px);
  }

  /* ==== 装飾英字ラベル 網羅底上げ · 意図的な集約設計 ====
     V6 S0036 でご担当者様ご指摘「目で見て全体」を反映した一括 font-size 底上げ。
     14 セレクタを 1 箇所に集約することで、保守性 (新たな底上げ対象追加時の容易さ) と
     読みやすさ (意図が一目でわかる) を確保。!important は CSS specificity を意図的に
     コントロールするための戦略であり、排除しない (S0059 案 a 改良版 v2 承認)。
     新たに底上げ対象を追加したい時はこのブロックに class 名を追加するだけで OK。 ==== */
  .logo small,
  .num-label,
  .group-panel-tag,
  .footer-col h5,
  .dc-sim-label,
  .voice-year,
  .growth-year,
  .about-image-tag .en,
  .about-stat-label,
  .about-banner-text .en,
  .training-step-date,
  .training-quote-label,
  .voice-role {
    font-size: 15px !important;
    font-weight: 500 !important;
  }
  .reason-num,
  .dc-start-date,
  .work-item-role,
  .cta-kicker {
    font-size: 17px !important;
    font-weight: 500 !important;
  }
  /* 個別タグ微調整 */
  .group-panel-tag { letter-spacing: 0.25em !important; }
  .num-label { letter-spacing: 0.22em !important; }

  /* ==== Claude Design 水泡 (S0058・ふわふわゆっくり変形・優しい泡・色を持たせて視認確保版) ==== */
  .canvas-orb-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;  /* 全画面はクリック透過 (内部の bubble だけクリック可能) */
    z-index: 9999;
    overflow: hidden;
    text-decoration: none;
    display: block;
  }
  .canvas-orb-bg .bubble {
    position: absolute;
    /* 泡の領域だけクリック可能 (a タグの hit area) */
    pointer-events: auto;
    cursor: pointer;
    /* テキスト中央配置 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    /* ミントグリーン基調・大幅に色を濃く (paper 背景に対して確実にコントラスト出る) */
    background: radial-gradient(
      circle at 30% 28%,
      rgba(248, 255, 250, 0.92) 0%,
      rgba(220, 248, 232, 0.85) 10%,
      rgba(180, 235, 205, 0.78) 24%,
      rgba(140, 220, 175, 0.68) 44%,
      rgba(105, 200, 148, 0.55) 66%,
      rgba(80, 185, 130, 0.38) 88%,
      rgba(65, 175, 115, 0.18) 100%
    );
    /* 内側の白い光 + ミントの影 + 外側の柔らかいミント光 (色強め) */
    box-shadow:
      inset 0 0 55px rgba(255, 255, 255, 0.70),
      inset -16px -20px 40px rgba(70, 175, 120, 0.50),
      inset 22px 26px 36px rgba(255, 255, 255, 0.60),
      0 18px 54px rgba(110, 200, 150, 0.55);
    /* 縁取り (ミント色を強めに) */
    border: 2px solid rgba(160, 220, 185, 0.70);
    /* 水のレンズ効果 (背景を屈折・明るく) */
    backdrop-filter: blur(3.5px) saturate(1.20) brightness(1.06);
    -webkit-backdrop-filter: blur(3.5px) saturate(1.20) brightness(1.06);
    /* JS 物理シミュレーション制御 (壁衝突 + squash & stretch + 形状揺らぎ・animation 不要) */
    will-change: transform, border-radius;
    transform-origin: center center;
    transition: none;
    /* 水っぽさ + テキスト邪魔しない (薄め) */
    opacity: 0.55;
  }
  /* 5 つの異なる水泡 (サイズ・位置・初期形状・delay バラバラで自然に) */
  .canvas-orb-bg .bubble1 {
    width: 160px; height: 160px;  /* 230 → 160 (ご担当者ご指示「二回り小さく」) */
    top: 12%; left: 5%;
    animation-delay: -3s, -1s;
    border-radius: 50% 48% 52% 50% / 48% 52% 50% 50%;
  }
  /* 浮遊エントリー泡内部テキスト (S0058・160px 内に 3 行収まるサイズ) */
  .canvas-orb-bg .bubble-cta-eyebrow {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 9.5px;
    color: var(--c-terracotta);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.2;
  }
  .canvas-orb-bg .bubble-cta-main {
    font-family: var(--f-mincho);
    font-size: 22px;
    color: var(--c-forest-dark);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    line-height: 1.1;
  }
  .canvas-orb-bg .bubble-cta-sub {
    font-family: var(--f-mincho);
    font-size: 10.5px;
    color: var(--c-forest-dark);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    white-space: nowrap;
  }
  /* [C1+C2 削除済 S0059] bubble2-5 + @keyframes bubble-float/morph
     - bubble2-5 は S0058 で 5→1 統合の取り残し (HTML 不使用)
     - keyframes は JS 物理シミュレーション (line 10227 LiveBubble) に置換済 */
  @media (prefers-reduced-motion: reduce) {
    .canvas-orb-bg .bubble { animation: none; }
  }

  /* ==== Final Slide Overlay (S0058・斜めカット下→上スライド・Claude Design 進化版・ご担当者ご指示「下からブルーが斜めに上がる + 真ん中から広がる」) ==== */
  .final-iris-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    /* forest 緑の濃淡対角グラデで動きの方向性を強調 (Claude Design) */
    background: linear-gradient(135deg, var(--c-forest) 0%, #1E3F36 45%, var(--c-forest) 100%);
    pointer-events: none;
    opacity: 0;
    /* 初期: 画面外下 (見えない・斜めカット待機) */
    clip-path: polygon(-10% 105%, 110% 110%, 110% 115%, -10% 115%);
    transition: opacity 0.5s ease-out, clip-path 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .final-iris-overlay.is-active {
    opacity: 0.97;
    /* 斜めカットで下から上へせり上がり + わずかに右上に傾斜 (動きの勢い) */
    clip-path: polygon(-5% -8%, 105% 4%, 105% 105%, -5% 105%);
  }
  .final-iris-overlay.is-fading {
    opacity: 0;
    /* 上に抜けて消える (連続する画面切替感) */
    clip-path: polygon(-10% -15%, 110% -10%, 110% -5%, -10% 0%);
    transition: opacity 0.7s ease-in, clip-path 0.85s cubic-bezier(0.55, 0, 0.55, 0.2);
  }
  .final-iris-overlay-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--c-paper);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease-out, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .final-iris-overlay.is-active .final-iris-overlay-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
  }
  .final-iris-eyebrow {
    font-family: var(--f-display);
    font-style: italic;
    letter-spacing: 0.42em;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 22px;
    opacity: 0.85;
  }
  .final-iris-main {
    font-family: var(--f-mincho);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
  }
  @media (prefers-reduced-motion: reduce) {
    .final-iris-overlay { display: none; }
  }
  @media (max-width: 768px) {
    .final-iris-eyebrow { font-size: 11px; letter-spacing: 0.3em; margin-bottom: 16px; }
    .final-iris-main { font-size: 24px; letter-spacing: 0.06em; }
  }
  /* CTA セクション pre-reveal (S0058 起点・S0060 Q23 F1 シナリオ A 採用で classList ベース化・CSS と JS の責務分離達成・LM-198 系譜「動作 ok ≠ 実装目的達成」対応) */
  .cta-section.is-pre-reveal {
    animation: none !important;  /* S0060: 既存 CSS animation の override を CSS 側で完結 */
    opacity: 0 !important;
    transform: translateY(48px) !important;
    transition: opacity 0.95s ease-out, transform 1.0s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .cta-section.is-pre-reveal.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .cta-section.is-pre-reveal { opacity: 1 !important; transform: none !important; }
  }

  /* ==== P4 Special セクション「TCS の『実は』」（V6 S0036 追加・快活フロンティア参考） ==== */
  .special-card {
    position: relative;
  }
  .special-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 2px;
    background: var(--c-terracotta);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .special-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(47, 93, 80, 0.1);
    border-color: var(--c-terracotta);  /* [C9-03 修正済 S0059] !important 排除 (CSS specificity で確実に動作) */
  }
  .special-card:hover::before {
    width: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    .group-tree svg rect,
    .group-tree svg text,
    .group-tree svg line { animation: none; opacity: 1; }
    .section.numbers .num-block::before { transition: none; }
    .hero-deco,
    .hero-kicker,
    .hero h1,
    .hero-lead,
    .hero-actions,
    .message-quote-mark { animation: none !important; opacity: 1 !important; transform: none !important; }
    .message-quote-mark { opacity: 0.18 !important; }
    .btn-primary::after { transition: none; }
  }

  /* ===========================================================
     Hero Eyebrow (S0037 追加・V7-1・学生第一印象強化)
     =========================================================== */
  .hero-eyebrow {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
    padding-left: 14px;
    border-left: 3px solid var(--c-terracotta);
  }
  .hero-eyebrow-en {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.26em;
    color: var(--c-terracotta);
    text-transform: uppercase;
    font-weight: 600;
  }
  .hero-eyebrow-ja {
    font-family: var(--f-mincho);
    font-size: 15px;
    color: var(--c-forest-dark);
    letter-spacing: 0.05em;
    font-weight: 500;
  }
  @media (max-width: 1024px) {
    .hero-eyebrow-en { font-size: 11px; }
    .hero-eyebrow-ja { font-size: 13px; }
  }
  /* V7.5 Why Hamamatsu (S0037 深化版提案06・土地の豊かさ) */
  .why-hamamatsu { background: linear-gradient(135deg, #FAF7EF 0%, #F5F1E8 100%); position: relative; overflow: hidden; }
  .why-hamamatsu::before {
    content: '浜松';
    position: absolute;
    top: -30px; right: -20px;
    font-family: var(--f-mincho);
    font-size: 280px;
    font-weight: 700;
    color: rgba(47,93,80,0.04);
    line-height: 1;
    user-select: none;
    pointer-events: none;
    letter-spacing: -0.04em;
  }
  .wh-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 44px;
    position: relative;
  }
  .wh-card {
    background: var(--c-white);
    padding: 36px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(47,93,80,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
  }
  .wh-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(47,93,80,0.15);
  }
  .wh-card-label {
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-terracotta);
    letter-spacing: 0.28em;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
  }
  .wh-card-title {
    font-family: var(--f-mincho);
    font-size: 22px;
    color: var(--c-forest-dark);
    font-weight: 700;
    margin: 0 0 18px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
  .wh-card-desc {
    font-size: 14.5px;
    line-height: 2;
    color: var(--c-slate-light);
    margin: 0;
    letter-spacing: 0.02em;
  }
  .wh-card-desc strong { color: var(--c-forest-dark); font-weight: 600; }
  .wh-card-desc .accent { color: var(--c-terracotta); font-weight: 700; }
  .wh-card-stat {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed rgba(47,93,80,0.2);
    font-family: var(--f-display);
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.15em;
    font-style: italic;
    font-weight: 600;
  }
  .wh-closing {
    margin-top: 44px;
    padding: 32px 40px;
    background: var(--c-forest);
    color: var(--c-white);
    border-radius: 8px;
    text-align: center;
    font-family: var(--f-mincho);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.85;
    letter-spacing: 0.03em;
  }
  .wh-closing-sub {
    display: block;
    margin-top: 12px;
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-terracotta);
    font-size: 14px;
    letter-spacing: 0.22em;
    font-weight: 600;
    text-transform: uppercase;
  }
  @media (max-width: 1024px) {
    .wh-grid { grid-template-columns: 1fr; }
    .why-hamamatsu::before { font-size: 160px; }
    .wh-closing { font-size: 15px; padding: 24px 20px; }
  }

  /* V7.5 Honest Talk (S0037 深化版提案04・本音 Q&A・公式 FAQ とは別区画) */
  .honest-talk { background: linear-gradient(180deg, var(--c-ivory-light) 0%, var(--c-ivory) 100%); position: relative; }
  .honest-talk::before {
    content: '';
    position: absolute;
    top: 40px; right: 5%;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(217,119,87,0.08) 0%, transparent 70%);
    pointer-events: none;
  }
  .honest-hero-line {
    font-family: var(--f-mincho);
    font-size: 17px;
    color: var(--c-forest-dark);
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.03em;
    padding: 20px 28px;
    background: var(--c-white);
    border-left: 4px solid var(--c-terracotta);
    border-radius: 0 6px 6px 0;
    margin: 28px 0 36px;
  }
  .honest-list { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .honest-item {
    background: var(--c-white);
    border: 1px solid rgba(47,93,80,0.1);
    border-left: 3px solid var(--c-forest);
    border-radius: 4px;
    transition: all 0.3s ease;
  }
  .honest-item[open] {
    border-left-color: var(--c-terracotta);
    box-shadow: 0 6px 24px rgba(47,93,80,0.1);
  }
  .honest-item summary {
    font-family: var(--f-mincho);
    font-size: 16px;
    color: var(--c-forest-dark);
    font-weight: 600;
    padding: 20px 26px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    line-height: 1.6;
    letter-spacing: 0.02em;
  }
  .honest-item summary::-webkit-details-marker { display: none; }
  .honest-item summary::before {
    content: '── Off';
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    color: var(--c-terracotta);
    letter-spacing: 0.22em;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
    padding-top: 4px;
    white-space: nowrap;
  }
  .honest-item summary::after {
    content: '+';
    margin-left: auto;
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--c-terracotta);
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  .honest-item[open] summary::after { transform: rotate(45deg); }
  .honest-answer {
    /* S0037 ご担当者様ご指示: 「── 現場より」重複ラベル削除・左 padding を Q と同じ感覚に調整 */
    padding: 8px 26px 24px 58px;
    font-size: 14.5px;
    line-height: 2.05;
    color: var(--c-slate);
    letter-spacing: 0.02em;
    position: relative;
  }
  .honest-answer strong { color: var(--c-forest-dark); font-weight: 600; }

  /* V7.5 Numbers Story (S0037 深化版提案19・数字に物語を添える) */
  .num-story {
    font-family: var(--f-mincho);
    font-size: 15px;
    color: var(--c-terracotta);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.7;
    margin: 8px 0 12px;
    padding-left: 10px;
    border-left: 2px solid var(--c-terracotta);
  }
  @media (max-width: 1024px) {
    .num-story { font-size: 13.5px; }
  }

  /* V7.5 Hero sub-tagline (S0037 深化版・旧コピーを副タイトル化) */
  .hero-sub-tagline {
    font-family: var(--f-mincho);
    font-size: 17px;
    color: var(--c-terracotta);
    font-weight: 500;
    letter-spacing: 0.06em;
    margin: 10px 0 22px;
    opacity: 0.9;
    line-height: 1.8;
  }
  @media (max-width: 1024px) {
    .hero-sub-tagline { font-size: 14px; }
  }

  /* ===========================================================
     DC Count-up Animation (S0037 追加・ご担当者様ご提案「数字でえっと驚かせる」演出)
     =========================================================== */
  .dc-sim-value, .dc-sim-origin {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .dc-sim-card.counting .dc-sim-value {
    color: var(--c-white);
    text-shadow: 0 0 12px rgba(217,119,87,0.3);
  }
  @keyframes dc-pulse-glow {
    0%   { transform: scale(1);     box-shadow: 0 10px 30px rgba(217,119,87,0.2); }
    30%  { transform: scale(1.035); box-shadow: 0 16px 48px rgba(217,119,87,0.6); }
    60%  { transform: scale(1.02);  box-shadow: 0 14px 42px rgba(217,119,87,0.45); }
    100% { transform: scale(1);     box-shadow: 0 10px 30px rgba(217,119,87,0.2); }
  }
  .dc-sim-card.pulse-done {
    animation: dc-pulse-glow 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  /* S0037 ご担当者様ご指示: DC 金額部分に黄色グロウ点滅(gantt_checker V2.15 glowChip 参考・控えめ版) */
  @keyframes dcValuePulseGlow {
    0%, 100% {
      box-shadow: 0 0 10px 3px rgba(255, 220, 40, 0.48),
                  0 0 22px 6px rgba(255, 200, 30, 0.20);
    }
    50% {
      box-shadow: 0 0 2px 0px rgba(255, 210, 40, 0.08),
                  0 0 5px 1px rgba(255, 200, 30, 0.03);
    }
  }
  .dc-sim-card.pulse-glow {
    /* S0037 ご担当者様ご指示: 左→中→右ウェーブ伝播・点滅間隔統一(3 秒周期・1 秒刻み) */
    animation: dcValuePulseGlow 3s ease-in-out infinite;
  }
  .dc-sim-card:nth-child(1).pulse-glow { animation-delay: 0s; }
  .dc-sim-card:nth-child(2).pulse-glow { animation-delay: -2s; }
  .dc-sim-card:nth-child(3).pulse-glow { animation-delay: -1s; }
  @media (prefers-reduced-motion: reduce) {
    .dc-sim-card.pulse-done,
    .dc-sim-card.pulse-glow { animation: none; }
  }

  /* [C3 完全削除済 S0059] floating-cta CSS は浮遊エントリー泡 (S0058・LiveBubble) に役割統合済
     復元が必要なら git 履歴 (commit 7f83528 等) から取得可能 */

  /* ===========================================================
     HR Message (S0037 追加・採用担当から学生へのメッセージ・V7-2)
     =========================================================== */
  .hr-message {
    background: linear-gradient(180deg, var(--c-ivory-light) 0%, var(--c-ivory) 100%);
    padding: 96px 24px;
    position: relative;
    overflow: hidden;
  }
  .hr-message::before {
    content: '';
    position: absolute;
    top: 40px; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(217,119,87,0.06) 0%, transparent 70%);
    pointer-events: none;
  }
  .hr-inner {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .hr-label {
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-terracotta);
    letter-spacing: 0.3em;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 18px;
    display: block;
  }
  .hr-title {
    font-family: var(--f-mincho);
    font-size: 30px;
    color: var(--c-forest-dark);
    font-weight: 600;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.04em;
    margin: 0 0 48px;
  }
  .hr-opening {
    font-family: var(--f-mincho);
    font-size: 17px;
    line-height: 2.2;
    color: var(--c-slate);
    letter-spacing: 0.04em;
    margin-bottom: 40px;
  }
  .hr-three {
    display: grid;
    gap: 28px;
    margin: 48px 0;
  }
  .hr-point {
    background: var(--c-white);
    padding: 32px 36px;
    border-left: 4px solid var(--c-terracotta);
    border-radius: 0 6px 6px 0;
    box-shadow: 0 2px 16px rgba(47,93,80,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hr-point:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 24px rgba(47,93,80,0.1);
  }
  .hr-point-num {
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-terracotta);
    font-size: 15px;
    letter-spacing: 0.2em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
  }
  .hr-point-title {
    font-family: var(--f-mincho);
    font-size: 21px;
    color: var(--c-forest-dark);
    font-weight: 600;
    margin: 0 0 14px;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }
  .hr-point-desc {
    font-size: 14.5px;
    line-height: 2;
    color: var(--c-slate-light);
    letter-spacing: 0.02em;
    margin: 0;
  }
  .hr-closing {
    font-family: var(--f-mincho);
    font-size: 17px;
    line-height: 2.2;
    color: var(--c-slate);
    letter-spacing: 0.04em;
    margin-top: 40px;
  }
  .hr-signature {
    margin-top: 32px;
    text-align: right;
    font-family: var(--f-mincho);
    font-size: 15px;
    color: var(--c-forest-dark);
    font-weight: 500;
    letter-spacing: 0.1em;
  }
  .hr-signature-sub {
    display: block;
    font-family: var(--f-display);
    font-size: 12px;
    color: var(--c-slate-light);
    letter-spacing: 0.22em;
    margin-top: 4px;
    font-style: italic;
    text-transform: uppercase;
    opacity: 0.8;
  }
  @media (max-width: 1024px) {
    .hr-message { padding: 64px 20px; }
    .hr-title { font-size: 22px; }
    .hr-opening, .hr-closing { font-size: 15px; }
    .hr-point { padding: 24px 20px; }
    .hr-point-title { font-size: 18px; }
  }

  /* ===========================================================
     New Graduates Welcome Banner (S0037 追加・Hero 直下・学生向け)
     =========================================================== */
  .nw-welcome {
    background: linear-gradient(135deg, var(--c-forest) 0%, var(--c-forest-dark) 100%);
    color: var(--c-white);
    padding: 36px 24px;
    position: relative;
    overflow: hidden;
  }
  .nw-welcome::before {
    content: '';
    position: absolute;
    top: 0; left: -10%;
    width: 120%; height: 100%;
    background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(217,119,87,0.14) 0%, transparent 70%);
    pointer-events: none;
  }
  .nw-welcome-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
    position: relative;
  }
  .nw-badge {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.28em;
    color: var(--c-terracotta);
    text-transform: uppercase;
    writing-mode: horizontal-tb;
    padding: 12px 20px;
    border: 1px solid rgba(217,119,87,0.5);
    border-radius: 2px;
    white-space: nowrap;
    font-weight: 500;
  }
  .nw-message {
    font-family: var(--f-mincho);
    font-size: 18px;
    line-height: 1.9;
    color: var(--c-white);
    letter-spacing: 0.02em;
  }
  .nw-message strong {
    color: var(--c-terracotta);
    font-weight: 600;
  }
  .nw-message-sub {
    display: block;
    font-family: var(--f-display);
    font-size: 13px;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.75);
    margin-top: 8px;
    font-style: italic;
    text-transform: uppercase;
  }
  .nw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }
  .nw-tag {
    font-size: 13px;
    color: var(--c-white);
    padding: 6px 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 18px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
  @media (max-width: 1024px) {
    .nw-welcome-inner { grid-template-columns: 1fr; gap: 20px; }
    .nw-tags { justify-content: flex-start; }
    .nw-message { font-size: 16px; }
  }

  /* ===========================================================
     Selection Flow Diagram (S0037 追加・選考フロー視覚化・学生の不安解消)
     =========================================================== */
  .selection-flow { background: var(--c-ivory); }
  .sf-lead-emph {
    font-family: var(--f-mincho);
    font-size: 17px;
    color: var(--c-forest-dark);
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0.03em;
    margin-bottom: 28px;
  }
  .sf-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
    margin: 48px 0 56px;
  }
  .sf-step {
    background: var(--c-white);
    padding: 28px 20px 24px;
    position: relative;
    border-top: 3px solid var(--c-forest);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .sf-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(47,93,80,0.12);
  }
  .sf-step.featured {
    border-top-color: var(--c-terracotta);
    background: linear-gradient(180deg, #FFFBF5 0%, var(--c-white) 100%);
  }
  .sf-step-num {
    font-family: var(--f-display);
    font-size: 34px;
    font-weight: 500;
    color: var(--c-terracotta);
    letter-spacing: 0.04em;
    line-height: 1;
    font-style: italic;
    margin-bottom: 10px;
  }
  .sf-step-en {
    font-family: var(--f-display);
    font-size: 13px;
    color: var(--c-slate-light);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 500;
  }
  .sf-step-title {
    font-family: var(--f-mincho);
    font-size: 18px;
    color: var(--c-forest-dark);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
  }
  .sf-step-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--c-slate-light);
    margin-bottom: 14px;
  }
  .sf-step-time {
    font-size: 13px;
    color: var(--c-terracotta);
    font-weight: 600;
    letter-spacing: 0.06em;
    padding-top: 10px;
    border-top: 1px dashed rgba(47,93,80,0.2);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .sf-step-time::before {
    content: '⏱';
    font-size: 14px;
  }
  .sf-arrow {
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: var(--c-terracotta);
    border-radius: 50%;
    color: var(--c-white);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-weight: 700;
  }
  .sf-step:last-child .sf-arrow { display: none; }
  .sf-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 32px;
    background: var(--c-white);
    border-left: 4px solid var(--c-terracotta);
  }
  .sf-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .sf-feature-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    background: rgba(217,119,87,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-terracotta);
    font-size: 18px;
    font-weight: 700;
  }
  .sf-feature-title {
    font-family: var(--f-mincho);
    font-size: 15px;
    color: var(--c-forest-dark);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.03em;
  }
  .sf-feature-desc {
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-slate-light);
  }
  @media (max-width: 1024px) {
    .sf-steps { grid-template-columns: 1fr; gap: 12px; }
    .sf-arrow { display: none !important; }
    .sf-features { grid-template-columns: 1fr; padding: 20px; }
  }

  /* ===========================================================
     FAQ Section (S0037 追加・学生の疑問先回り 10 問・アコーディオン)
     =========================================================== */
  .faq { background: var(--c-white); }
  .faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
    margin-top: 32px;
  }
  .faq-item {
    background: var(--c-ivory-light);
    border-left: 3px solid var(--c-forest);
    padding: 0;
    transition: border-color 0.3s ease;
  }
  .faq-item[open] {
    border-left-color: var(--c-terracotta);
    background: var(--c-white);
    box-shadow: 0 2px 12px rgba(47,93,80,0.08);
  }
  .faq-item summary {
    font-family: var(--f-mincho);
    font-size: 15px;
    color: var(--c-forest-dark);
    font-weight: 600;
    padding: 18px 24px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::before {
    content: 'Q';
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-terracotta);
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
  }
  .faq-item summary::after {
    content: '+';
    margin-left: auto;
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--c-terracotta);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
  }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-item summary:hover { color: var(--c-terracotta); }
  .faq-item-answer {
    padding: 4px 24px 22px 58px;
    font-size: 14px;
    line-height: 2;
    color: var(--c-slate-light);
    position: relative;
  }
  .faq-item-answer::before {
    content: 'A';
    position: absolute;
    left: 24px;
    top: 6px;
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-forest);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
  }
  .faq-item-answer strong {
    color: var(--c-forest-dark);
    font-weight: 600;
  }
  .faq-item-answer .highlight {
    color: var(--c-terracotta);
    font-weight: 600;
  }
  .faq-bottom {
    margin-top: 40px;
    padding: 28px 36px;
    background: linear-gradient(135deg, var(--c-ivory) 0%, var(--c-ivory-light) 100%);
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    line-height: 2;
    color: var(--c-slate);
    border: 1px dashed rgba(217,119,87,0.4);
  }
  .faq-bottom strong {
    font-family: var(--f-mincho);
    color: var(--c-forest-dark);
    font-weight: 600;
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
    letter-spacing: 0.03em;
  }
  @media (max-width: 1024px) {
    .faq-list { grid-template-columns: 1fr; }
  }

  /* ===========================================================
     Voices Q4: 学生時代の学び Q 追加 (S0037・わずかなスペース調整)
     =========================================================== */
  .voice-qa.qa-university {
    background: rgba(217,119,87,0.04);
    padding: 10px 12px;
    border-radius: 3px;
    margin-top: 10px;
  }
  .voice-qa.qa-university .voice-q { color: var(--c-terracotta); }

  /* ===========================================================
     S0056 Compensation Storyteller
     年収・賞与・住宅手当を公的データと並べる Editorial データジャーナリズム
     futureinn 参考のクリーン比較バー × TCS Editorial Manifesto
     =========================================================== */
  .section.compensation {
    background: var(--c-paper);
    padding: 96px 0 88px;
    position: relative;
    border-top: 1px solid rgba(217,119,87,0.10);
  }
  .section.compensation .section-lede {
    font-family: var(--f-mincho);
    font-size: 16px;
    line-height: 2.0;
    color: var(--c-slate-light);
    margin: 16px 0 44px;
    max-width: 720px;
    letter-spacing: 0.02em;
  }
  .section.compensation .section-lede strong {
    color: var(--c-terracotta);
    font-weight: 600;
  }
  .compare-block {
    margin: 32px 0;
    padding: 40px 38px;
    background: var(--c-ivory-light);
    border-left: 4px solid var(--c-terracotta);
    position: relative;
  }
  .compare-block + .compare-block {
    margin-top: 28px;
  }
  /* S0056 ご指摘 (人間目線): eyebrow / unit / source の最小文字サイズ底上げ
     スタイルは維持・font-size のみ可読性確保レベル(13px+)へ統一 */
  .compare-eyebrow {
    display: block;
    font-family: var(--f-display);
    letter-spacing: 0.22em;
    font-size: 14px;
    color: var(--c-terracotta);
    font-weight: 600;
    margin-bottom: 14px;
    text-transform: uppercase;
  }
  .compare-title {
    font-family: var(--f-mincho);
    font-size: 26px;
    line-height: 1.55;
    color: var(--c-charcoal);
    margin: 0 0 30px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .compare-title em {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 40px;
    font-weight: 600;
    color: var(--c-terracotta);
    letter-spacing: -0.01em;
    margin: 0 4px;
  }
  .compare-bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 22px;
  }
  .bar-row {
    display: grid;
    grid-template-columns: 140px 1fr 160px;
    align-items: center;
    gap: 18px;
    font-size: 14px;
  }
  .bar-label {
    font-family: var(--f-sans);
    color: var(--c-slate-light);
    font-weight: 500;
    text-align: right;
    letter-spacing: 0.02em;
  }
  .bar-row--us .bar-label {
    color: var(--c-charcoal);
    font-weight: 600;
  }
  .bar-track {
    position: relative;
    height: 24px;
    background: rgba(0,0,0,0.045);
    border-radius: 1px;
    overflow: hidden;
  }
  .bar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    border-radius: 1px;
    width: 0;
    transition: width 2.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* 平均バー: 0.20s 後から伸び始め / TCS バー: 1.10s 遅れて伸び始める = 対比演出 */
  .bar-row .bar-fill--avg {
    transition-delay: 0.20s;
  }
  .bar-row--us .bar-fill--us {
    transition-delay: 1.10s;
  }
  .bar-fill--avg {
    background: linear-gradient(90deg, #C9C2B5 0%, #B8AF9E 100%);
  }
  .bar-fill--us {
    background: linear-gradient(90deg, var(--c-terracotta) 0%, var(--c-brass) 100%);
    box-shadow: 0 0 0 1px rgba(217,119,87,0.25);
  }
  /* バーの末端に光るエッジ (TCS 側のみ・伸びきった瞬間を強調) */
  .bar-row--us .bar-fill--us::after {
    content: "";
    position: absolute;
    top: 0; right: -2px; bottom: 0;
    width: 3px;
    background: var(--c-brass);
    box-shadow: 0 0 10px rgba(184,149,106,0.95);
    opacity: 0;
    transition: opacity 0.55s ease 4.0s;
  }
  .bar-fill[data-fill] {
    /* 初期値 0 (CSS で width: 0)・JS が data-fill 値を style.width に書き込む */
  }
  /* セクションが visible になったら、TCS バーの末端ハイライトも発動 */
  .compare-block.is-revealed .bar-row--us .bar-fill--us::after {
    opacity: 1;
  }
  .bar-value {
    font-family: var(--f-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--c-charcoal);
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .bar-row--us .bar-value {
    color: var(--c-terracotta);
    font-size: 28px;
    font-style: italic;
  }
  .bar-unit {
    font-family: var(--f-mincho);
    font-size: 14px;
    color: var(--c-slate-light);
    margin-left: 5px;
    font-weight: 500;
    font-style: normal;
  }
  .bar-row--us .bar-unit {
    color: var(--c-terracotta);
  }
  .compare-story {
    margin: 18px 0 0;
    font-family: var(--f-mincho);
    font-size: 16px;
    line-height: 2.0;
    color: var(--c-charcoal);
    letter-spacing: 0.02em;
  }
  .compare-story em {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 22px;
    color: var(--c-terracotta);
    font-weight: 600;
    margin: 0 4px;
    letter-spacing: -0.005em;
    line-height: 1.1;
    vertical-align: -0.04em;
  }
  .compare-source {
    font-size: 13px;
    color: var(--c-slate-light);
    font-style: italic;
    letter-spacing: 0.02em;
    border-top: 1px dashed rgba(0,0,0,0.12);
    padding-top: 14px;
    margin: 18px 0 0;
    line-height: 1.85;
  }
  /* 三段階対応タグ */
  .compare-tier {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    padding: 14px 18px;
    background: rgba(255,255,255,0.6);
    border: 1px dashed rgba(217,119,87,0.22);
  }
  .tier-tag {
    font-family: var(--f-mincho);
    letter-spacing: 0.14em;
    font-size: 14px;
    background: var(--c-charcoal);
    color: var(--c-paper);
    padding: 7px 14px;
    border-radius: 1px;
    text-transform: none;
    font-weight: 600;
  }
  .tier-tag strong {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 18px;
    color: var(--c-brass);
    margin-right: 2px;
    font-weight: 600;
    letter-spacing: -0.01em;
    vertical-align: -0.05em;
  }
  .tier-item {
    font-family: var(--f-mincho);
    color: var(--c-charcoal);
    font-size: 13.5px;
    letter-spacing: 0.02em;
  }
  .tier-item em {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 21px;
    color: var(--c-terracotta);
    font-weight: 600;
    margin-left: 6px;
    letter-spacing: -0.005em;
  }
  .tier-unit {
    font-family: var(--f-mincho);
    font-size: 13px;
    color: var(--c-slate-light);
    margin-left: 3px;
    font-weight: 500;
    font-style: normal;
  }
  .tier-item-sep {
    color: rgba(0,0,0,0.18);
    font-size: 14px;
  }
  /* ===========================================================
     S0056 Loan Storyteller (黒背景・大型イタリック・SVG 家イラスト)
     30 年勤続 = 1,080 万円 という長期視点を Editorial で語る
     =========================================================== */
  .loan-block {
    margin: 56px 0 0;
    padding: 0;
    position: relative;
    background: var(--c-charcoal);
    color: var(--c-paper);
    overflow: hidden;
  }
  /* トップに細い金線 (terracotta → brass) */
  .loan-block::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-terracotta) 0%, var(--c-brass) 60%, transparent 100%);
  }
  /* 背景の薄いブループリント (定規目盛り風) */
  .loan-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(184,149,106,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(184,149,106,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    opacity: 0.6;
  }
  .loan-overline {
    padding: 28px 38px 0;
    position: relative;
    z-index: 1;
  }
  .loan-eyebrow {
    display: inline-block;
    font-family: var(--f-display);
    letter-spacing: 0.22em;
    font-size: 16px;
    color: var(--c-brass);
    font-weight: 600;
    text-transform: uppercase;
  }
  /* loan-eyebrow 内の日本語部分(For 30 Years の右の "30 年の応援")を Mincho で読みやすく */
  .loan-eyebrow .ja {
    font-family: var(--f-mincho);
    font-style: normal;
    font-size: 15px;
    color: var(--c-paper);
    letter-spacing: 0.08em;
    margin-left: 12px;
    padding-left: 14px;
    border-left: 1px solid rgba(184,149,106,0.4);
    font-weight: 500;
  }
  .loan-grid {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 36px;
    padding: 28px 38px 40px;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .loan-illustration {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loan-illustration svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .loan-text {
    display: flex;
    flex-direction: column;
  }
  .loan-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    align-items: baseline;
  }
  .loan-figure {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 84px;
    font-weight: 600;
    color: var(--c-brass);
    line-height: 1;
    letter-spacing: -0.025em;
    text-align: right;
    white-space: nowrap;
  }
  .loan-num {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 1.6em;
    text-align: right;
  }
  .loan-figure .loan-unit {
    font-family: var(--f-mincho);
    font-style: normal;
    font-size: 20px;
    color: var(--c-paper);
    margin-left: 6px;
    font-weight: 400;
    letter-spacing: 0.02em;
  }
  .loan-text-body {
    padding-bottom: 6px;
  }
  .loan-text-eyebrow {
    font-family: var(--f-display);
    letter-spacing: 0.18em;
    font-size: 14px;
    color: var(--c-terracotta);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
  }
  .loan-text-eyebrow .ja {
    font-family: var(--f-mincho);
    font-style: normal;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.06em;
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1px solid rgba(217,119,87,0.4);
    font-weight: 500;
  }
  .loan-text-desc {
    font-family: var(--f-mincho);
    font-size: 16px;
    color: rgba(255,255,255,0.92);
    line-height: 1.95;
    letter-spacing: 0.02em;
  }
  .loan-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(184,149,106,0.4) 30%, rgba(184,149,106,0.4) 70%, transparent 100%);
    margin: 28px 0;
  }
  .loan-story {
    margin: 32px 0 0;
    padding: 22px 0 0;
    border-top: 1px dashed rgba(255,255,255,0.18);
    font-family: var(--f-mincho);
    font-size: 15.5px;
    line-height: 2.0;
    color: var(--c-paper);
    letter-spacing: 0.03em;
  }
  .loan-story em {
    font-family: var(--f-mincho);
    font-style: italic;
    color: var(--c-brass);
    font-weight: 500;
    margin: 0 2px;
  }
  /* 家のイラスト (SVG) のアニメーション */
  .loan-house-roof,
  .loan-house-body,
  .loan-house-door,
  .loan-house-window,
  .loan-house-chimney,
  .loan-house-ground {
    stroke: var(--c-brass);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .loan-house-window {
    fill: rgba(184,149,106,0.15);
  }
  .loan-house-door {
    fill: rgba(217,119,87,0.18);
  }
  .loan-house-sun {
    fill: var(--c-terracotta);
    opacity: 0.85;
  }
  .loan-house-coin {
    fill: var(--c-brass);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .loan-block.is-counted .loan-house-coin {
    opacity: 0.85;
    transform: translateY(0);
  }
  .loan-house-coin.coin-1 { transition-delay: 0.4s; }
  .loan-house-coin.coin-2 { transition-delay: 0.7s; }
  .loan-house-coin.coin-3 { transition-delay: 1.0s; }
  /* path のスケッチ風描画アニメーション */
  .loan-house-roof,
  .loan-house-body,
  .loan-house-door,
  .loan-house-window,
  .loan-house-chimney,
  .loan-house-ground {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.6s ease;
  }
  .loan-block.is-counted .loan-house-roof    { transition-delay: 0.0s; stroke-dashoffset: 0; }
  .loan-block.is-counted .loan-house-body    { transition-delay: 0.4s; stroke-dashoffset: 0; }
  .loan-block.is-counted .loan-house-chimney { transition-delay: 0.7s; stroke-dashoffset: 0; }
  .loan-block.is-counted .loan-house-window  { transition-delay: 1.0s; stroke-dashoffset: 0; }
  .loan-block.is-counted .loan-house-door    { transition-delay: 1.2s; stroke-dashoffset: 0; }
  .loan-block.is-counted .loan-house-ground  { transition-delay: 1.5s; stroke-dashoffset: 0; }
  .loan-house-sun {
    opacity: 0;
    transition: opacity 0.6s ease 1.7s;
  }
  .loan-block.is-counted .loan-house-sun { opacity: 0.85; }

  /* ===========================================================
     S0056 Career Growth Chart (育つ年収カーブ・折れ線 SVG)
     1年→3年→6年→15年→28年で年収が育つ Editorial データジャーナリズム
     線描画(stroke-dashoffset) + ドットポップ(scale) + 数字カウントアップ
     =========================================================== */
  .growth-block {
    margin: 56px 0 0;
    padding: 44px 38px 40px;
    background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-ivory-light) 100%);
    border-left: 4px solid var(--c-brass);
    position: relative;
    overflow: hidden;
  }
  /* 背景に薄い水平グリッド (方眼紙風) */
  .growth-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(184,149,106,0.05) 1px, transparent 1px);
    background-size: 100% 40px;
    pointer-events: none;
    opacity: 0.7;
  }
  .growth-block > * { position: relative; z-index: 1; }
  .growth-chart-wrap {
    margin: 28px 0 8px;
    padding: 0;
    position: relative;
  }
  .growth-chart-wrap svg {
    width: 100%;
    height: auto;
    overflow: visible;
    display: block;
  }
  /* 軸とグリッド */
  .growth-axis {
    stroke: rgba(0,0,0,0.22);
    stroke-width: 1;
    fill: none;
  }
  .growth-grid {
    stroke: rgba(0,0,0,0.07);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    fill: none;
  }
  .growth-y-label {
    fill: var(--c-slate-light);
    font-family: var(--f-display);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .growth-x-label {
    fill: var(--c-charcoal);
    font-family: var(--f-mincho);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
  }
  /* x軸 サブラベル (N=サンプル数) */
  .growth-x-sub {
    fill: var(--c-slate-light);
    font-family: var(--f-display);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  /* === ローソク足 (Candle Stick) === */
  .candle-wick {
    stroke: var(--c-charcoal);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .candle-body {
    fill: url(#candle-up);
    stroke: var(--c-charcoal);
    stroke-width: 0.8;
    opacity: 0;
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .growth-block.is-revealed .candle-wick { opacity: 0.7; }
  .growth-block.is-revealed .candle-body { opacity: 0.92; transform: scaleY(1); }
  /* ローソク足の出現タイミング: 鉛筆が次のポイントに進み始めた瞬間に表示 (一貫性ある統一ルール) */
  .candle-1 .candle-wick, .candle-1 .candle-body { transition-delay: 0.6s; }    /* 1 年目 (鉛筆スタート) */
  .candle-2 .candle-wick, .candle-2 .candle-body { transition-delay: 0.6s; }    /* 3 年目 (1→3 進み始め) */
  .candle-3 .candle-wick, .candle-3 .candle-body { transition-delay: 2.49s; }   /* 5 年目 (3→5 進み始め) */
  .candle-4 .candle-wick, .candle-4 .candle-body { transition-delay: 4.65s; }   /* 10 年目 (5→10 進み始め) */
  .candle-5 .candle-wick, .candle-5 .candle-body { transition-delay: 6.81s; }   /* 15 年目 (10→15 進み始め) */
  .candle-6 .candle-wick, .candle-6 .candle-body { transition-delay: 8.97s; }   /* 20 年目 (15→20 進み始め) */
  .candle-7 .candle-wick, .candle-7 .candle-body { transition-delay: 11.27s; }  /* 30 年目 (20→30 進み始め) */
  /* 凡例マーカー追加 (ローソク足風) */
  .legend-wick {
    display: inline-block;
    width: 2px; height: 18px;
    background: var(--c-charcoal);
    border-radius: 1px;
    margin-right: 4px;
    vertical-align: middle;
  }
  .legend-body {
    display: inline-block;
    width: 14px; height: 12px;
    background: linear-gradient(180deg, var(--c-brass) 0%, var(--c-terracotta) 100%);
    border: 0.8px solid var(--c-charcoal);
    margin-right: 4px;
    vertical-align: middle;
  }
  /* エリア (折れ線下の薄塗り) */
  /* エリア塗り: 鉛筆が線を描き終わった後にゆっくり現れる (白紙→書く→塗る) */
  .growth-area {
    fill: var(--c-brass);
    opacity: 0;
    transition: opacity 2.0s ease 13.5s;
  }
  .growth-block.is-revealed .growth-area { opacity: 0.10; }
  /* 折れ線本体 (6 セグメント分割・各セグメント順次描画) */
  .growth-line {
    stroke: var(--c-brass);
    stroke-width: 3.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(184,149,106,0.25));
  }
  /* 実線セグメント: pathLength=100 で線分長を正規化 (dasharray>線分長 問題対策) */
  /* 鉛筆 keyframes 時刻: 0.6s(1年目)→2.49s(3年目)→4.65s(5年目)→6.81s(10年目)→8.97s(15年目)→11.27s(20年目)→14.1s(30年目) */
  .growth-line.growth-line-solid {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }
  .growth-line.growth-line-solid.seg-1 { transition: stroke-dashoffset 1.89s cubic-bezier(0.5, 0, 0.5, 1) 0.6s; }   /* 1→3年目 */
  .growth-line.growth-line-solid.seg-2 { transition: stroke-dashoffset 2.16s cubic-bezier(0.5, 0, 0.5, 1) 2.49s; }  /* 3→5年目 */
  .growth-line.growth-line-solid.seg-3 { transition: stroke-dashoffset 2.16s cubic-bezier(0.5, 0, 0.5, 1) 4.65s; }  /* 5→10年目 */
  .growth-line.growth-line-solid.seg-4 { transition: stroke-dashoffset 2.16s cubic-bezier(0.5, 0, 0.5, 1) 6.81s; }  /* 10→15年目 (延長線) */
  .growth-line.growth-line-solid.seg-5 { transition: stroke-dashoffset 2.30s cubic-bezier(0.5, 0, 0.5, 1) 8.97s; }  /* 15→20年目 (延長線) */
  .growth-line.growth-line-solid.seg-6 { transition: stroke-dashoffset 2.83s cubic-bezier(0.5, 0, 0.5, 1) 11.27s; } /* 20→30年目 (延長線) */
  .growth-block.is-revealed .growth-line.growth-line-solid { stroke-dashoffset: 0; }
  /* dashed 関連スタイル: S0057 で全セグメント実線統一に伴い、参照対象なくなったが互換性維持のため宣言は残す (要素なし) */
  .growth-line.growth-line-dashed {
    stroke-width: 2.2;
    stroke-dasharray: 4 5;
    opacity: 0.55;
    filter: none;
  }
  .growth-block.is-revealed .growth-line.growth-line-dashed { stroke-dashoffset: 0; }
  /* 後方互換 */
  .growth-line:not(.growth-line-solid):not(.growth-line-dashed) {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    transition: stroke-dashoffset 3.0s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
  }
  .growth-block.is-revealed .growth-line:not(.growth-line-solid):not(.growth-line-dashed) { stroke-dashoffset: 0; }
  /* === 鉛筆 (大型 SVG・線を描いていく演出 + 書いている振動感) === */
  .pencil-group {
    opacity: 0;
    transform: translate(100px, 364px);
    transition: opacity 0.5s ease 0.5s;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.22));
  }
  .pencil-halo {
    fill: rgba(184,149,106,0.25);
  }
  .pencil-tilt {
    /* 右利き手書き: 左下のペン先 → 右上に本体が伸びる (約 -32 度・自然な書き角度) */
    transform: rotate(-32deg);
    transform-origin: 0 0;
  }
  .growth-block.is-revealed .pencil-group {
    opacity: 1;
    animation: pencil-walk 13.5s cubic-bezier(0.45, 0, 0.55, 1) 0.6s forwards;
  }
  .growth-block.is-revealed .pencil-tilt {
    animation: pencil-write 0.35s ease-in-out 0.6s infinite alternate;
  }
  /* 鉛筆の軌道 (各ポイントを通過・線描画と同期・ゆっくり魅せる・倍遅く) */
  @keyframes pencil-walk {
    0%   { transform: translate(100px, 364px); }
    14%  { transform: translate(240px, 348px); }   /* → 3 年目 (2.0s 後) */
    30%  { transform: translate(400px, 332px); }   /* → 5 年目 (4.0s 後) */
    46%  { transform: translate(580px, 320px); }   /* → 10 年目 (6.2s 後・主任) */
    62%  { transform: translate(800px, 272px); }   /* → 15 年目 (8.4s 後) */
    79%  { transform: translate(1020px, 180px); }  /* → 20 年目 (10.7s 後) */
    100% { transform: translate(1340px, 60px); }   /* → 30 年目 (13.5s 後・ピーク) */
  }
  /* 書いている振動感 (微小揺れ・往復) */
  @keyframes pencil-write {
    0%   { transform: rotate(-32deg) translateY(0); }
    100% { transform: rotate(-29deg) translateY(-1.5px); }
  }
  /* [C6 削除済 S0059] growth-line 後方互換 transition 完全重複は 1 回目 (line 5914) に統合済 */
  /* ドット (ベースの輪) */
  .growth-dot-ring {
    fill: var(--c-paper);
    stroke: var(--c-terracotta);
    stroke-width: 2.5;
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .growth-block.is-revealed .growth-dot-ring {
    opacity: 1;
    transform: scale(1);
  }
  /* ドット (中心の dot): ring と fill の transform duration を同一化 (0.7s) */
  .growth-dot-fill {
    fill: var(--c-terracotta);
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .growth-block.is-revealed .growth-dot-fill {
    opacity: 1;
    transform: scale(1);
  }
  /* 最終 (28 年目) はブラス色で強調 */
  .growth-dot-fill.is-final { fill: var(--c-brass); }
  .growth-dot-ring.is-final {
    stroke: var(--c-brass);
    filter: drop-shadow(0 0 8px rgba(184,149,106,0.5));
  }
  /* ドット出現タイミング: 鉛筆到達時刻に二重丸表示 (candle/num とは別ルール) */
  .growth-dot-1 { transition-delay: 0.6s; }     /* 1 年目 (鉛筆到達 = スタート) */
  .growth-dot-2 { transition-delay: 2.49s; }    /* 3 年目 (鉛筆到達) */
  .growth-dot-3 { transition-delay: 4.65s; }    /* 5 年目 (鉛筆到達) */
  .growth-dot-4 { transition-delay: 6.81s; }    /* 10 年目 (鉛筆到達) */
  .growth-dot-5 { transition-delay: 8.97s; }    /* 15 年目 (鉛筆到達) */
  .growth-dot-6 { transition-delay: 11.27s; }   /* 20 年目 (鉛筆到達) */
  .growth-dot-7 { transition-delay: 14.10s; }   /* 30 年目 (鉛筆到達) */
  /* ホロードット (秘匿部・控えめ・主役は左の実線部) */
  .growth-dot-hollow {
    fill: transparent;
    stroke: var(--c-brass);
    stroke-width: 1.6;
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .growth-block.is-revealed .growth-dot-hollow {
    opacity: 0.7;
    transform: scale(0.8);
    animation: dot-halo 4s ease-in-out infinite;
    animation-delay: 14s;
  }
  /* ホロードット 3 つの出現タイミング (S0057 根本修正: 固有 class 個別制御) */
  /* :nth-of-type は「親内のタグ位置」で判定するため、SVG 内 circle 11 個ある中で */
  /* class フィルタ後の N 番目という意味にはならない (LM-198 系譜の落とし穴) */
  .dot-hollow-15y { transition-delay: 8.97s; }    /* 15年目 (鉛筆到達) */
  .dot-hollow-20y { transition-delay: 11.27s; }   /* 20年目 (鉛筆到達) */
  .dot-hollow-30y { transition-delay: 14.1s; }    /* 30年目 (鉛筆到達) */
  @keyframes dot-halo {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(184,149,106,0.3)); }
    50% { filter: drop-shadow(0 0 6px rgba(184,149,106,0.55)); }
  }
  /* 各ポイントの数字ラベル (ドットの上) */
  .growth-num {
    fill: var(--c-charcoal);
    font-family: var(--f-display);
    font-style: italic;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .growth-num.is-final {
    fill: var(--c-brass);
    font-size: 28px;
  }
  .growth-block.is-revealed .growth-num { opacity: 1; }
  /* 数字ラベル opacity 出現タイミング: 進み始め時刻 (統一ルール) */
  .growth-num.num-1 { transition-delay: 0.6s; }    /* 380 万 (1年目) */
  .growth-num.num-2 { transition-delay: 0.6s; }    /* 460 万 (1→3 進み始め) */
  .growth-num.num-3 { transition-delay: 2.49s; }   /* 540 万 (3→5 進み始め) */
  .growth-num.num-4 { transition-delay: 4.65s; }   /* 600 万 (5→10 進み始め) */
  .growth-num.num-5 { transition-delay: 6.81s; }   /* 15 年目 (10→15 進み始め・全桁動く) */
  .growth-num.num-6 { transition-delay: 8.97s; }   /* 20 年目 (15→20 進み始め・全桁動く) */
  .growth-num.num-7 { transition-delay: 11.27s; }  /* 30 年目 (20→30 進み始め・全桁動く) */
  /* 秘匿数字 (+α/+α+β/+α+β+γ) = animation 単独で制御 (ベース transform 削除で出発位置表示を解消) */
  .growth-num.growth-num-secret {
    opacity: 0;
    transform: translate(0, 0);
    fill: var(--c-brass);
    font-style: italic;
    font-family: var(--f-display);
    font-weight: 600;
    letter-spacing: 0.04em;
    filter: drop-shadow(0 0 6px rgba(184,149,106,0.35));
  }
  /* 上書きルール削除済: animation の 0% opacity 0 を保護・初期表示問題を根治 */
  /* 旧: .growth-block.is-revealed .growth-num.growth-num-secret { opacity: 1; transform: ...; } */
  /* 秘匿数字: push-out duration = 鉛筆セグメント時間と同期・到達時刻で完了 */
  .growth-block.is-revealed .num-5 { animation: num-flash-pushout 2.16s cubic-bezier(0.4, 0, 0.6, 1) 6.81s forwards; }
  .growth-block.is-revealed .num-6 { animation: num-flash-pushout 2.30s cubic-bezier(0.4, 0, 0.6, 1) 8.97s forwards; }
  .growth-block.is-revealed .num-7 { animation: num-flash-pushout 2.83s cubic-bezier(0.4, 0, 0.6, 1) 11.27s forwards; }
  @keyframes num-flash-pushout {
    0%   { opacity: 0; transform: translateX(0); }
    15%  { opacity: 0.5; transform: translateX(0); }     /* T=0.18s ぼんやり表示・カウント中 */
    50%  { opacity: 0.5; transform: translateX(8px); }   /* T=0.60s ゆらぎ始め */
    100% { opacity: 0; transform: translateX(50px); }    /* T=1.20s 完全押し出し */
  }
  /* +α 系: 600 万 (is-final 28px) と同じ font-size で一貫性 */
  .growth-num-secret.secret-15y { font-size: 28px; }
  .growth-num-secret.secret-20y { font-size: 28px; }
  .growth-num-secret.secret-30y { font-size: 28px; }
  /* +α 着地時刻 = 鉛筆到達時刻 (15→8.97s / 20→11.27s / 30→14.10s) */
  .growth-block.is-revealed .secret-15y { animation: alpha-slide-in 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 7.97s both; }
  .growth-block.is-revealed .secret-20y { animation: alpha-slide-in 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 10.27s both; }
  .growth-block.is-revealed .secret-30y { animation: alpha-slide-in 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 13.10s both; }
  /* both = animation 開始前から keyframes 0% 状態を保持 (出発位置表示を防ぐ) */
  @keyframes alpha-slide-in {
    0%   { opacity: 0; transform: translate(-40px, 0); }
    70%  { opacity: 0; transform: translate(-12px, 0); }   /* 70% まで完全透明・着地直前まで見えない */
    100% { opacity: 0.8; transform: translate(0, 0); }     /* 着地時に opacity 上昇 */
  }
  /* 数字横の "万円" 単位 */
  .growth-num-unit {
    fill: var(--c-slate-light);
    font-family: var(--f-mincho);
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
  }
  /* 凡例・補足 */
  .growth-legend {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: flex-end;
    font-family: var(--f-mincho);
    font-size: 13px;
    color: var(--c-slate-light);
    padding: 12px 0 0;
    border-top: 1px dashed rgba(0,0,0,0.10);
  }
  .growth-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .growth-legend-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--c-terracotta);
    display: inline-block;
  }
  .growth-legend-dot.is-final {
    background: var(--c-brass);
    box-shadow: 0 0 6px rgba(184,149,106,0.5);
  }
  /* キャプション・注記 */
  .growth-callout {
    margin: 28px 0 0;
    padding: 22px 24px;
    background: rgba(255,255,255,0.55);
    border-left: 3px solid var(--c-brass);
    font-family: var(--f-mincho);
    font-size: 15.5px;
    line-height: 2.0;
    color: var(--c-charcoal);
    letter-spacing: 0.02em;
  }
  .growth-callout em {
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-brass);
    font-size: 19px;
    font-weight: 600;
    margin: 0 3px;
  }
  .growth-callout strong {
    color: var(--c-terracotta);
    font-weight: 600;
  }

  @media (max-width: 768px) {
    .section.compensation { padding: 72px 0 56px; }
    .compare-block { padding: 28px 22px; }
    .compare-title { font-size: 21px; }
    .compare-title em { font-size: 30px; }
    .bar-row {
      grid-template-columns: 80px 1fr 110px;
      gap: 10px;
      font-size: 12px;
    }
    .bar-value { font-size: 17px; }
    .bar-row--us .bar-value { font-size: 22px; }
    .loan-grid {
      grid-template-columns: 1fr;
      padding: 22px 22px 32px;
      gap: 24px;
    }
    .loan-illustration {
      max-width: 180px;
      margin: 0 auto;
    }
    .loan-row {
      grid-template-columns: 1fr;
      gap: 8px;
      text-align: center;
    }
    .loan-figure {
      font-size: 64px;
      text-align: center;
    }
    .loan-text-eyebrow,
    .loan-text-desc {
      text-align: center;
    }
  }


/* === S0061 Q24 Step 2 inline style → class 化 (SC-188 founding 候補初実装) === */
/* 生成時刻: 2026-04-28 (Tue) S0061 / 全 384 件 / 162 ユニークパターン */

/* --- semantic classes (高/中頻度・意味的命名) --- */
/* count=23 */
.text-forest-bold { color: var(--c-forest); font-weight: 600; }
/* count=21 */
.text-terracotta { color: var(--c-terracotta); }
/* count=20 */
.text-terracotta-bold { color: var(--c-terracotta); font-weight: 700; }
/* count=14 */
.text-terracotta-medium { color: var(--c-terracotta); font-weight: 600; }
/* count=12 */
.text-forest-dark-bold { color: var(--c-forest-dark); font-weight: 600; }
/* count=8 */
.text-terracotta-tight { color:var(--c-terracotta); }
/* count=8 */
.text-forest-tight { color:var(--c-forest); }
/* count=7 */
.text-forest-dark { color: var(--c-forest-dark); }
/* count=5 */
.text-terracotta-tight-medium-light { color:var(--c-terracotta);font-weight:500; }
/* count=5 */
.text-center { text-align: center; }
/* count=4 */
.text-brass-bold { color: var(--c-brass); font-weight: 600; }
/* count=4 */
.mb-18 { margin: 0 0 18px; }
/* count=4 */
.text-forest { color: var(--c-forest); }
/* count=3 */
.text-terracotta-tight-medium { color:var(--c-terracotta);font-weight:600; }
/* count=3 */
.text-forest-dark-bold-strong { color: var(--c-forest-dark); font-weight: 700; }

/* --- auto-named classes (低頻度・hash 命名) --- */
/* count=11 */
.istyle-858f3044 { font-family: var(--f-display); font-style: italic; font-size: 15px; color: var(--c-terracotta); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 12px; font-weight: 500; }
/* count=11 */
.istyle-5d016e86 { font-family: var(--f-mincho); font-size: 19px; color: var(--c-forest-dark); font-weight: 600; margin: 0 0 14px; letter-spacing: 0.02em; line-height: 1.55; }
/* count=9 */
.istyle-d0254d30 { font-size: 13.5px; color: var(--c-slate-light); line-height: 1.95; margin: 0; }
/* count=8 */
.istyle-9936a97e { padding: 12px 22px; background: var(--c-white); border: 1px solid var(--c-line-dark); border-radius: 30px; font-size: 14px; color: var(--c-forest); font-family: var(--f-mincho); font-weight: 500; transition: all 0.25s ease; }
/* count=6 */
.istyle-3ee3ed5c { padding: 32px 28px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
/* count=5 */
.istyle-acca25f8 { padding: 32px 28px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; }
/* count=4 */
.istyle-2b23a1c8 { font-family: var(--f-display); font-size: 28px; font-weight: 700; color: var(--c-forest); line-height: 1; letter-spacing: 0.02em; }
/* count=4 */
.istyle-6cdde0d3 { font-size: 15px; font-weight: 500; color: var(--c-muted); margin-left: 2px; }
/* count=4 */
.istyle-0ad7014d { font-size: 13px; color: var(--c-slate-light); margin-top: 8px; line-height: 1.5; }
/* count=3 */
.istyle-5d4d3535 { font-size:13px; color:var(--c-slate-light); }
/* count=3 */
.istyle-4fbdfe62 { color:var(--c-paper); font-weight:600; }
/* count=3 */
.istyle-e5fe9e93 { font-size: 20px; font-weight: 500; color: var(--c-slate-light); margin-left: 2px; }
/* count=3 */
.istyle-36c42758 { font-family: var(--f-mincho); font-size: 16px; color: var(--c-forest-dark); font-weight: 600; margin-bottom: 16px; letter-spacing: 0.02em; }
/* count=3 */
.istyle-e8b51d03 { font-size: 13.5px; color: var(--c-slate); line-height: 2.1; padding-left: 18px; margin: 0; letter-spacing: 0.02em; }
/* count=3 */
.istyle-7145f256 { color:var(--c-terracotta);font-size:11px;letter-spacing:0.04em; }
/* count=3 */
.istyle-365c1767 { color: var(--c-ivory); font-weight: 700; }
/* count=3 */
.istyle-48c6804b { font-family: var(--f-display); color: var(--c-terracotta); letter-spacing: 0.24em; margin-bottom: 14px; font-size: 16px; font-weight: 500; }
/* count=3 */
.istyle-dd02e480 { font-family: var(--f-mincho); font-size: 17px; color: var(--c-white); margin-bottom: 8px; }
/* count=3 */
.istyle-e5b971f3 { line-height: 1.9; }
/* count=3 */
.istyle-352312d8 { color: var(--c-white); }
/* count=3 */
.istyle-2dd3376c { font-size: 13px; color: rgba(255,255,255,0.9); margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.2); }
/* count=2 */
.istyle-a90e99dc { font-size: 19px; color: var(--c-terracotta); font-weight: 600; }
/* count=2 */
.istyle-8c8c8ac9 { color:var(--c-forest-dark); }
/* count=2 */
.istyle-9e88344e { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
/* count=2 */
.istyle-2fe0f2ed { font-family: var(--f-display); font-size: 34px; font-weight: 700; color: var(--c-terracotta); line-height: 1; }
/* count=2 */
.istyle-6e2918e9 { font-family: var(--f-mincho); font-size: 19px; color: var(--c-white); margin: 0; font-weight: 700; letter-spacing: 0.02em; }
/* count=2 */
.istyle-3d74def5 { font-size: 14.5px; color: var(--c-white); line-height: 2; margin: 0; font-weight: 500; letter-spacing: 0.02em; }
/* count=2 */
.istyle-596f4fcf { color:var(--c-forest); font-weight:600; }
/* count=2 */
.istyle-e2b74ba6 { margin: 0; }
/* count=2 */
.istyle-ac81b620 { position: absolute; top: -14px; right: 20px; background: var(--c-terracotta); color: var(--c-white); font-family: var(--f-display); font-size: 12px; letter-spacing: 0.18em; padding: 4px 12px; border-radius: 14px; font-weight: 600; text-transform: uppercase; }
/* count=2 */
.istyle-e18578ee { font-size: 13.5px; color: var(--c-slate-light); line-height: 1.95; margin: 0 0 12px; }
/* count=2 */
.istyle-a4663592 { font-size: 12px; color: var(--c-slate-light); line-height: 1.8; padding-top: 12px; border-top: 1px dashed rgba(47,93,80,0.15); letter-spacing: 0.02em; }
/* count=2 */
.istyle-37bd40ae { position: absolute; top: -14px; right: 20px; background: var(--c-forest); color: var(--c-white); font-family: var(--f-display); font-size: 12px; letter-spacing: 0.18em; padding: 4px 12px; border-radius: 14px; font-weight: 600; text-transform: uppercase; }
/* count=2 */
.istyle-ca7d538a { color:var(--c-forest-dark);font-weight:600; }
/* count=2 */
.istyle-d243a786 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 20px; padding: 18px 16px; background: rgba(47,93,80,0.05); border: 1px solid rgba(47,93,80,0.1); border-radius: 8px; }
/* count=2 */
.istyle-64fd8233 { text-align: center; border-left: 1px dashed rgba(47,93,80,0.18); }
/* count=2 */
.istyle-95ad8c75 { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 8px; }
/* count=2 */
.istyle-af63190a { padding: 6px 14px; background: rgba(47,93,80,0.1); color: var(--c-forest); border-radius: 16px; font-weight: 600; letter-spacing: 0.04em; }
/* count=2 */
.istyle-f7178cf7 { opacity: 0.55; cursor: default; }
/* count=2 */
.istyle-b2820e2d { font-size: 10px; letter-spacing: 0.1em; margin-left: 4px; }
/* count=1 */
.istyle-249bf020 { font-size: 22px; }
/* count=1 */
.istyle-7edef5e4 { background-image: url('images/gaikan002.jpg'); }
/* count=1 */
.istyle-bfde7fc4 { display: flex; align-items: center; gap: 18px; }
/* count=1 */
.istyle-ebe4a5fc { width: 72px; height: 94px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 12px rgba(47,93,80,0.15); flex-shrink: 0; }
/* count=1 */
.istyle-e4753976 { margin: 36px 0; padding: 28px 36px; background: var(--c-white); border-left: 4px solid var(--c-terracotta); border-radius: 0 8px 8px 0; font-family: var(--f-mincho); line-height: 2.1; color: var(--c-slate); font-size: 16px; letter-spacing: 0.03em; }
/* count=1 */
.istyle-74292e7e { margin-top: 36px; }
/* count=1 */
.istyle-bcc3ed34 { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.15em; font-size: 15px; }
/* count=1 */
.istyle-108dd5fb { background-image: url('images/sagyou_c_001.jpg'); }
/* count=1 */
.istyle-a2633c21 { background-image: url('images/sagyou_c_004.jpg'); }
/* count=1 */
.istyle-35d99b40 { background-image: url('images/sagyou_c_002.jpg'); }
/* count=1 */
.istyle-9830d278 { margin-top: 56px; padding: 44px 32px; background: linear-gradient(180deg, rgba(245,241,232,0.45) 0%, rgba(245,241,232,1) 100%); border-radius: 12px; }
/* count=1 */
.istyle-c19f7fdf { text-align: center; margin-bottom: 32px; }
/* count=1 */
.istyle-5db5ae72 { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.28em; font-size: 16px; font-weight: 500; text-transform: uppercase; margin-bottom: 14px; }
/* count=1 */
.istyle-2e4c8463 { font-family: var(--f-mincho); font-size: 24px; color: var(--c-forest-dark); font-weight: 600; margin: 0 0 18px; letter-spacing: 0.02em; line-height: 1.5; }
/* count=1 */
.istyle-6ba3c92a { font-size: 14px; color: var(--c-slate-light); max-width: 640px; margin: 0 auto; line-height: 1.95; }
/* count=1 */
.istyle-844ca600 { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 880px; margin: 0 auto; }
/* count=1 */
.istyle-ffb5fd32 { display:block; margin-top:14px; font-size:14px; color:var(--c-muted); }
/* count=1 */
.istyle-084141f3 { font-size: 0.5em; }
/* count=1 */
.istyle-73bde011 { margin: 48px 0 24px; padding: 40px 44px; background: rgba(255,255,255,0.1); border-left: 4px solid var(--c-terracotta); border-radius: 0 12px 12px 0; }
/* count=1 */
.istyle-234257ea { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.3em; font-size: 15px; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }
/* count=1 */
.istyle-faaf6a8e { font-family: var(--f-mincho); font-size: 24px; color: var(--c-white); font-weight: 700; margin: 0 0 28px; line-height: 1.5; letter-spacing: 0.02em; }
/* count=1 */
.istyle-92227251 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 36px; }
/* count=1 */
.istyle-68a09f73 { margin-top: 8px; }
/* count=1 */
.istyle-14712d80 { background-image: url('images/kaigi001.jpg'); }
/* count=1 */
.istyle-b9393a08 { background-image: url('images/sagyou_a_001.jpg'); }
/* count=1 */
.istyle-195884f9 { max-width: 760px; margin: 28px auto 0; padding: 28px 32px; background: var(--c-white); border: 1px solid var(--c-line); border-left: 4px solid var(--c-terracotta); position: relative; }
/* count=1 */
.istyle-00fe04da { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--c-terracotta); text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
/* count=1 */
.istyle-19e3ad4f { font-family: var(--f-mincho); font-size: clamp(18px, 2.2vw, 22px); color: var(--c-forest-dark); font-weight: 600; margin: 0 0 14px; line-height: 1.6; letter-spacing: 0.02em; }
/* count=1 */
.istyle-dfb17b8d { font-size: 14px; color: var(--c-slate); line-height: 1.95; margin: 0; }
/* count=1 */
.istyle-be654a49 { border-top: 2px dashed var(--c-terracotta); padding-top: 20px; margin-top: 8px; }
/* count=1 */
.istyle-11779ecf { margin-top: 56px; display: grid; grid-template-columns: minmax(360px, 440px) 1fr; gap: 40px; align-items: center; padding: 36px 40px; background: linear-gradient(135deg, var(--c-ivory-light) 0%, var(--c-ivory) 100%); border-radius: 8px; border-left: 4px solid var(--c-terracotta); box-shadow: 0 4px 20px rgba(47,93,80,0.08); }
/* count=1 */
.istyle-91a38f6e { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 22px rgba(47,93,80,0.22); display: block; }
/* count=1 */
.istyle-193c3dd7 { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.28em; font-size: 14px; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
/* count=1 */
.istyle-005cb0f6 { font-family: var(--f-mincho); font-size: 24px; color: var(--c-forest-dark); font-weight: 700; margin: 0 0 16px; line-height: 1.5; letter-spacing: 0.02em; }
/* count=1 */
.istyle-fc9a9e4f { font-size: 15px; color: var(--c-slate); line-height: 2.05; margin: 0; letter-spacing: 0.02em; font-weight: 500; }
/* count=1 */
.istyle-ded1fe93 { margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(47,93,80,0.12); }
/* count=1 */
.istyle-c873e967 { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.3em; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 12px; text-align: center; }
/* count=1 */
.istyle-0adb2c29 { font-family: var(--f-mincho); font-size: 26px; color: var(--c-forest-dark); font-weight: 700; margin: 0 0 14px; text-align: center; letter-spacing: 0.03em; }
/* count=1 */
.istyle-1415427b { font-size: 15px; color: var(--c-slate-light); line-height: 1.95; text-align: center; margin: 0 0 32px; letter-spacing: 0.02em; }
/* count=1 */
.istyle-8515c205 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* count=1 */
.istyle-7f3f5326 { background: var(--c-white); padding: 32px 28px; border-radius: 8px; box-shadow: 0 4px 18px rgba(47,93,80,0.08); border-top: 4px solid var(--c-terracotta); transition: transform 0.3s ease; }
/* count=1 */
.istyle-96b52c95 { font-family: var(--f-display); font-size: 48px; font-weight: 700; color: var(--c-terracotta); line-height: 1; letter-spacing: 0.02em; margin-bottom: 8px; }
/* count=1 */
.istyle-bb0eb9fb { background: var(--c-white); padding: 32px 28px; border-radius: 8px; box-shadow: 0 4px 18px rgba(47,93,80,0.08); border-top: 4px solid var(--c-forest); transition: transform 0.3s ease; }
/* count=1 */
.istyle-d9ec8d25 { font-family: var(--f-display); font-size: 48px; font-weight: 700; color: var(--c-forest); line-height: 1; letter-spacing: 0.02em; margin-bottom: 8px; }
/* count=1 */
.istyle-646c57ab { background: var(--c-white); padding: 32px 28px; border-radius: 8px; box-shadow: 0 4px 18px rgba(47,93,80,0.08); border-top: 4px solid var(--c-forest-dark); transition: transform 0.3s ease; }
/* count=1 */
.istyle-02c951b8 { font-family: var(--f-display); font-size: 48px; font-weight: 700; color: var(--c-forest-dark); line-height: 1; letter-spacing: 0.02em; margin-bottom: 8px; }
/* count=1 */
.istyle-9c810c96 { margin-top: 28px; text-align: center; font-family: var(--f-mincho); font-size: 14.5px; color: var(--c-slate); line-height: 1.9; letter-spacing: 0.02em; }
/* count=1 */
.istyle-8803b09b { color:var(--c-muted);font-size:11px;letter-spacing:0.04em; }
/* count=1 */
.istyle-8107c247 { grid-column: span 2; }
/* count=1 */
.istyle-2760ce13 { color:var(--c-terracotta);font-weight:500;font-size:13px; }
/* count=1 */
.istyle-c6af75a4 { margin-top: 64px; padding: 48px 56px; background: linear-gradient(135deg, var(--c-forest) 0%, var(--c-forest-dark) 100%); border-radius: 8px; position: relative; overflow: hidden; }
/* count=1 */
.istyle-9bb645e0 { position: absolute; top: -20px; right: 30px; font-family: var(--f-display); font-size: 180px; color: rgba(217,119,87,0.12); font-style: italic; line-height: 1; user-select: none; pointer-events: none; }
/* count=1 */
.istyle-8fab0c16 { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.3em; font-size: 15px; text-transform: uppercase; margin-bottom: 14px; font-weight: 600; }
/* count=1 */
.istyle-6473b5f6 { font-family: var(--f-mincho); font-size: 24px; color: var(--c-white); font-weight: 700; margin: 0 0 28px; line-height: 1.5; }
/* count=1 */
.istyle-5d53fa56 { font-family: var(--f-mincho); font-size: 15.5px; line-height: 2.15; color: var(--c-white); font-weight: 500; letter-spacing: 0.03em; max-width: 780px; }
/* count=1 */
.istyle-2d529e99 { margin: 0 0 18px; padding: 16px 20px; background: rgba(217,119,87,0.1); border-left: 3px solid var(--c-terracotta); border-radius: 0 4px 4px 0; }
/* count=1 */
.istyle-085dc237 { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); font-family: var(--f-display); font-style: italic; color: rgba(255,255,255,0.85); letter-spacing: 0.18em; font-size: 13px; text-align: right; }
/* count=1 */
.istyle-c6d74091 { margin-top: 20px; padding: 18px 20px; background: rgba(255,255,255,0.08); border-left: 3px solid var(--c-terracotta); border-radius: 0 4px 4px 0; font-size: 13.5px; color: rgba(255,255,255,0.9); line-height: 1.95; letter-spacing: 0.03em; }
/* count=1 */
.istyle-fb1864a3 { background: linear-gradient(180deg, var(--c-ivory-light) 0%, var(--c-ivory) 100%); }
/* count=1 */
.istyle-3228a0b1 { color: var(--c-terracotta); font-style: italic; }
/* count=1 */
.istyle-ef536fe8 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; margin-top: 52px; }
/* count=1 */
.istyle-c3d8c22b { position: absolute; top: -14px; right: 20px; background: var(--c-brass); color: var(--c-white); font-family: var(--f-display); font-size: 12px; letter-spacing: 0.18em; padding: 4px 12px; border-radius: 14px; font-weight: 600; text-transform: uppercase; }
/* count=1 */
.istyle-0fa5dc6d { color: var(--c-terracotta); border-bottom: 1px solid var(--c-terracotta); font-weight: 500; }
/* count=1 */
.istyle-fa7ff483 { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--c-slate-light); }
/* count=1 */
.istyle-269a73a5 { display:block;font-size:13px;color:var(--c-terracotta);font-weight:500;letter-spacing:0.1em;margin-top:4px; }
/* count=1 */
.istyle-c276a846 { color:var(--c-terracotta);border-bottom:1px dashed var(--c-terracotta);font-weight:500; }
/* count=1 */
.istyle-21d29131 { color:var(--c-terracotta);font-weight:700; }
/* count=1 */
.istyle-7a1ce158 { margin-top: 32px; }
/* count=1 */
.istyle-bdd25e20 { color:var(--c-forest-dark);font-weight:600;border-bottom:1px solid var(--c-terracotta); }
/* count=1 */
.istyle-7b28ae42 { border-top: 3px solid var(--c-forest); }
/* count=1 */
.istyle-0e49a1d8 { width: 100%; height: auto; max-width: 760px; display: block; margin: 40px auto 8px; }
/* count=1 */
.istyle-f70861e2 { text-align: center; font-size: 13px; color: var(--c-muted); margin: 4px 0 40px; font-family: var(--f-gothic); }
/* count=1 */
.istyle-255ada32 { font-family: var(--f-gothic); font-size: 13px; color: var(--c-slate-light); line-height: 1.9; margin: 16px 0 0; font-weight: 400; }
/* count=1 */
.istyle-eb9d8bec { margin: 32px 0 40px; position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 32px rgba(47,93,80,0.15); }
/* count=1 */
.istyle-90c77c71 { width: 100%; height: auto; display: block; }
/* count=1 */
.istyle-0066916b { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 28px; background: linear-gradient(180deg, transparent 0%, rgba(47,93,80,0.85) 100%); color: var(--c-white); }
/* count=1 */
.istyle-b6f5c391 { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.2em; font-size: 13px; font-weight: 600; text-transform: uppercase; margin-bottom: 6px; }
/* count=1 */
.istyle-a561d9b7 { font-family: var(--f-mincho); font-size: 17px; font-weight: 600; letter-spacing: 0.02em; }
/* count=1 */
.istyle-79ce2079 { font-size:13px; color:var(--c-muted); }
/* count=1 */
.istyle-76674537 { font-size: 13px; }
/* count=1 */
.istyle-95f7f0d8 { justify-content: center; }
/* count=1 */
.istyle-5c291832 { margin-top: 24px; }
/* count=1 */
.istyle-cfd37ee8 { color: var(--c-forest); border-bottom: 1px solid var(--c-terracotta); }
/* count=1 */
.istyle-d8842486 { text-align: center; padding: 50px 24px 32px; max-width: 760px; margin: 56px auto 0; }
/* count=1 */
.istyle-2def8f89 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 560px; margin: 0 auto 40px; font-size: 13px; color: rgba(255,255,255,0.9); letter-spacing: 0.1em; }
/* count=1 */
.istyle-9259ca9b { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 13px; color: rgba(255,255,255,0.85); text-align: center; }
/* count=1 */
.istyle-ed27111e { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.28em; font-size: 15px; font-weight: 500; margin-bottom: 12px; text-transform: uppercase; }
/* count=1 */
.istyle-88e639bd { color: var(--c-white); border-bottom: 1px solid var(--c-terracotta); padding-bottom: 2px; }
/* count=1 */
.istyle-b35be082 { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; font-size: 13px; color: rgba(255,255,255,0.85); }
/* count=1 */
.istyle-57484419 { max-width: 880px; margin: 56px auto 0; padding: 32px 36px; background: rgba(255,255,255,0.07); border-left: 3px solid var(--c-terracotta); border-radius: 0 10px 10px 0; text-align: left; }
/* count=1 */
.istyle-c85e3b94 { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.3em; font-size: 15px; font-weight: 500; margin-bottom: 12px; text-transform: uppercase; }
/* count=1 */
.istyle-d1ef275e { font-family: var(--f-mincho); font-size: 22px; color: var(--c-white); font-weight: 700; margin: 0 0 18px; letter-spacing: 0.02em; line-height: 1.5; }
/* count=1 */
.istyle-f2e1eece { font-size: 15px; color: var(--c-white); line-height: 2.05; margin: 0; letter-spacing: 0.02em; font-weight: 500; }
/* count=1 */
.istyle-4b88b0ac { max-width: 880px; margin: 32px auto 0; padding: 32px 36px; background: var(--c-white); border-radius: 10px; text-align: left; box-shadow: 0 10px 36px rgba(47,93,80,0.25); }
/* count=1 */
.istyle-f3712f4e { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.3em; font-size: 14px; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; }
/* count=1 */
.istyle-5dc3b162 { font-family: var(--f-mincho); font-size: 22px; color: var(--c-forest-dark); font-weight: 700; margin: 0 0 16px; letter-spacing: 0.02em; line-height: 1.5; }
/* count=1 */
.istyle-d77a6ed1 { font-size: 14.5px; color: var(--c-slate); line-height: 2; margin: 0 0 18px; letter-spacing: 0.02em; font-weight: 500; }
/* count=1 */
.istyle-ed35e683 { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; }
/* count=1 */
.istyle-b55560c8 { padding: 6px 14px; background: rgba(217,119,87,0.12); color: var(--c-terracotta); border-radius: 16px; font-weight: 600; letter-spacing: 0.04em; }
/* count=1 */
.istyle-c5219fd5 { margin-top: 20px; padding: 16px 20px; background: rgba(47,93,80,0.04); border-left: 3px solid var(--c-forest); border-radius: 0 6px 6px 0; font-size: 13.5px; color: var(--c-slate); line-height: 1.95; }
/* count=1 */
.istyle-e7214460 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--c-forest); text-transform: uppercase; display: block; margin-bottom: 6px; }
/* count=1 */
.istyle-98127c13 { margin-top: 20px; padding-top: 18px; border-top: 1px dashed rgba(47,93,80,0.2); font-size: 14px; color: var(--c-slate-light); line-height: 1.9; }
/* count=1 */
.istyle-a961b378 { color: var(--c-terracotta); font-weight: 700; border-bottom: 1px solid var(--c-terracotta); }
/* count=1 */
.istyle-f95a4f43 { max-width: 880px; margin: 32px auto 0; padding: 28px 36px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; text-align: left; }
/* count=1 */
.istyle-fb83ee3a { font-family: var(--f-display); font-style: italic; color: var(--c-terracotta); letter-spacing: 0.3em; font-size: 13px; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; }
/* count=1 */
.istyle-3d89a0e1 { font-family: var(--f-mincho); font-size: 20px; color: var(--c-white); font-weight: 700; margin: 0 0 16px; letter-spacing: 0.02em; line-height: 1.55; }
/* count=1 */
.istyle-2b720b15 { font-size: 14.5px; color: var(--c-white); line-height: 2.05; margin: 0; letter-spacing: 0.02em; font-weight: 500; }

/* ====================================================================== */
/* V8 NEW (S0062) — HPv7 → HPv8 後継・発展形 (Phase B + Phase C 実装分)        */
/* SC-188 founding 候補「モジュール化原則」継承 (HTML/CSS/JS 分離維持)           */
/* ====================================================================== */

/* === V8 Phase B-1+B-2: Hero 呼びかけ型 + アイデンティティ転換訴求 === */
.hero-sub-tagline {
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--c-forest-dark);
  margin: 18px 0 8px;
  font-weight: 500;
}
.hero-sub-tagline strong {
  color: var(--c-terracotta);
  font-weight: 700;
}
.hero-sub-tagline-2 {
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--c-slate);
  margin: 0 0 16px;
  font-style: italic;
  font-family: var(--f-display);
}
.hero-transition-from {
  color: var(--c-slate-light);
  text-decoration: line-through;
  text-decoration-color: var(--c-terracotta);
  text-decoration-thickness: 2px;
}
.hero-transition-to {
  color: var(--c-forest-dark);
  font-weight: 700;
  font-style: normal;
  font-family: var(--f-mincho, var(--f-display));
}
@media (max-width: 768px) {
  .hero-sub-tagline { font-size: 18px; }
  .hero-sub-tagline-2 { font-size: 14px; }
}

/* === V8 Phase B-3: 「実は」ティーザー (快活フロンティア参考) === */
.hero-teaser {
  background: linear-gradient(135deg, var(--c-paper, #f4ede2), var(--c-ivory, #faf6ee));
  padding: 36px 24px;
  border-top: 1px solid var(--c-line-soft, rgba(0,0,0,0.06));
  border-bottom: 1px solid var(--c-line-soft, rgba(0,0,0,0.06));
}
.hero-teaser-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.hero-teaser-label {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-terracotta);
  margin-bottom: 14px;
  padding: 5px 18px;
  background: rgba(217, 119, 87, 0.1);
  border-radius: 18px;
  font-weight: 600;
}
.hero-teaser-content {
  font-size: 19px;
  line-height: 1.85;
  color: var(--c-forest-dark);
  margin: 14px 0 22px;
  font-weight: 500;
}
.hero-teaser-note {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--c-slate);
  font-weight: 400;
  letter-spacing: 0.05em;
  font-style: italic;
}
.hero-teaser-link {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--c-forest);
  text-decoration: none;
  border-bottom: 1px solid var(--c-forest-light, var(--c-forest));
  padding-bottom: 3px;
  transition: all 0.25s ease;
  font-weight: 600;
}
.hero-teaser-link:hover {
  color: var(--c-forest-dark);
  border-bottom-color: var(--c-forest-dark);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .hero-teaser { padding: 24px 16px; }
  .hero-teaser-content { font-size: 15px; line-height: 1.75; }
  .hero-teaser-label { font-size: 11px; padding: 4px 14px; }
}

/* === V8 Phase B-4: 心理的転換訴求 (Training・フューチャーイン参考) === */
.training-transition {
  text-align: center;
  font-size: 17px;
  line-height: 1.95;
  color: var(--c-forest-dark);
  margin: 28px auto 36px;
  padding: 22px 28px;
  max-width: 720px;
  background: rgba(217, 119, 87, 0.05);
  border-left: 3px solid var(--c-terracotta);
  border-right: 3px solid var(--c-forest);
  border-radius: 4px;
  font-weight: 500;
}
.training-transition strong {
  font-weight: 700;
}
.training-transition-sub {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-style: italic;
  color: var(--c-slate);
  font-family: var(--f-display);
}
@media (max-width: 768px) {
  .training-transition { font-size: 14px; padding: 16px 18px; }
}

/* === V8 Phase B-5: 文理多様性明示 (Voices・フューチャーイン参考) === */
.voices-diversity {
  text-align: center;
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-forest-dark);
  margin: 20px auto 36px;
  padding: 20px 28px;
  max-width: 720px;
  background: rgba(47, 93, 80, 0.05);
  border-radius: 8px;
}
.voices-diversity strong {
  font-weight: 700;
}
.voices-diversity-sub {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-style: italic;
  color: var(--c-slate);
  font-family: var(--f-display);
}
@media (max-width: 768px) {
  .voices-diversity { font-size: 14px; padding: 16px 18px; }
}

/* === V8 Phase C: Hero 大型スライドショー (フューチャーイン参考・ご担当者明示) === */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.hero-slideshow .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.hero-slideshow .slide.is-active {
  opacity: 1;
}
.hero-slideshow .slide-1 { background-image: url('images/gaikan001.jpg'); }
.hero-slideshow .slide-2 { background-image: url('images/control_panel_work.jpg'); }
.hero-slideshow .slide-3 { background-image: url('images/kaigi001.jpg'); }
.hero-slideshow .slide-4 { background-image: url('images/oscilloscope_testing.jpg'); }
.hero-slideshow .slide-5.claude-design {
  background: radial-gradient(ellipse at center, var(--c-forest-dark) 0%, #0e2520 80%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slide-svg {
  width: 92%;
  max-width: 720px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(217,119,87,0.3));
}

/* スライド進行インジケーター (オプション・絵文字回避でドット) */
.hero-slideshow::after {
  content: "";
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow .slide {
    transition: none;
  }
  /* prefers-reduced-motion 時は最初のスライドのみ表示 (JS 側でローテーション停止) */
}

@media (max-width: 768px) {
  .hero-slideshow {
    min-height: 320px;
    border-radius: 10px;
  }
  .hero-slide-svg {
    width: 88%;
  }
}

/* ====================================================================== */
/* V8 NEW (S0062・ご担当者明示「シュッシュッ早め」): 職場風景ギャラリー横スクロール    */
/* 4 voices-gallery-item → JS で複製計 8 枚 → translateX(-50%) シームレスループ */
/* hover で一時停止・prefers-reduced-motion 時は静止 (flex-wrap で全表示)        */
/* ====================================================================== */
.gallery-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 48px;
  padding: 8px 0;
  /* 左右エッジで微 fade-out (3% に縮小・「途切れ」感を最小化) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}
.gallery-track {
  display: flex;
  gap: 0;
  width: max-content;
  /* V8 S0062 改: CSS-only Marquee (JS 依存ゼロ・HTML に 4 セット直書き) */
  /* translateX(-25%) で 1 セット分 (4 セット中 1 セット = 25%) 移動・完全シームレス */
  animation: galleryCssMarquee 22s linear infinite;
}
@keyframes galleryCssMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}
.gallery-marquee:hover .gallery-track {
  animation-play-state: paused;
}
.gallery-track .voices-gallery-item {
  flex: 0 0 380px;
  min-width: 380px;
  width: 380px;
  height: 280px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin: 0 18px 0 0;  /* 全アイテムに右マージン (シームレスループ補正) */
}
.gallery-track .voices-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.gallery-track .voices-gallery-item:hover img {
  transform: scale(1.04);
}
/* @keyframes galleryMarqueeScroll は line 6612 に CSS variable 版を定義済 (S0062 改) */
@media (max-width: 768px) {
  .gallery-track .voices-gallery-item {
    flex: 0 0 280px;
    min-width: 280px;
    width: 280px;
    height: 200px;
    margin: 0 14px 0 0;  /* モバイル用 margin-right (シームレスループ補正) */
  }
  .gallery-track {
    gap: 0;
  }
  .gallery-marquee {
    margin-top: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .gallery-track .voices-gallery-item {
    flex: 1 1 320px;
    max-width: 380px;
  }
}

/* ====================================================================== */
/* V8 S0063 D-1 NEW: メタファーキャッチ展開 (快活フロンティア参考)            */
/* section-title の直前に「Aを、Bにしよう」型の副題を配置 (7 セクション)    */
/* 既存 section-title の良いコピーを保持・累積追加方式 (S0058/S0062 候補3)  */
/* ====================================================================== */
.section-metaphor {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--c-terracotta);
  letter-spacing: 0.04em;
  margin: 0 0 14px 0;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  padding-left: 28px;
}
.section-metaphor::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--c-terracotta);
  opacity: 0.6;
}
@media (max-width: 768px) {
  .section-metaphor {
    padding-left: 22px;
    margin-bottom: 12px;
  }
  .section-metaphor::before {
    width: 14px;
  }
}

/* ====================================================================== */
/* V8 S0063 D-4 NEW: グレースケール部分適用 (フューチャーイン参考)         */
/* History (35 年の歩み) セクション・時間の流れ演出・hover で色復活        */
/* ====================================================================== */
.history.filter-grayscale img,
.history .filter-grayscale img {
  filter: grayscale(85%) contrast(1.05);
  transition: filter 0.7s ease;
}
.history.filter-grayscale img:hover,
.history .filter-grayscale img:hover {
  filter: grayscale(0) contrast(1);
}
@media (prefers-reduced-motion: reduce) {
  .history.filter-grayscale img,
  .history .filter-grayscale img {
    transition: none;
  }
}

/* ====================================================================== */
/* V8 S0063 D-2 NEW: 直球カルチャー訴求 (横浜銀行参考)                       */
/* 短文・大字・余白で目立たせる・既存セクションに挿入可能                   */
/* ====================================================================== */
.culture-statement {
  background: var(--c-paper);
  padding: 80px var(--gutter);
  text-align: center;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.culture-statement-inner {
  max-width: 720px;
  margin: 0 auto;
}
.culture-statement-headline {
  font-family: var(--f-mincho);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  color: var(--c-forest-dark);
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin: 0 0 20px 0;
}
.culture-statement-headline .accent {
  color: var(--c-terracotta);
}
.culture-statement-lead {
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--c-slate-light);
  line-height: 1.9;
  margin: 0;
}
@media (max-width: 768px) {
  .culture-statement {
    padding: 60px var(--gutter);
  }
}

/* ====================================================================== */
/* V8 S0063 D-5 + D-12 改 NEW: 大型ビジュアル中心セクション (フューチャーイン参考) */
/* 水の泡 = 不規則ブロブ形状の有機的マスク + ゆっくり morph アニメーション   */
/* (ご担当者 2026-04-28 S0063 ご指摘・スクリーンショットご提示)               */
/* ====================================================================== */
.visual-statement {
  position: relative;
  width: 100%;
  background: var(--c-white);
  padding: 80px var(--gutter) 0;
  overflow: hidden;
}
.visual-statement-image {
  width: 88%;
  max-width: 1040px;
  margin: 0 auto;
  aspect-ratio: 16 / 11;
  background-size: cover;
  background-position: center 35%;
  background-color: var(--c-ivory-light);
  position: relative;
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  overflow: hidden;
  /* 「生きているみたいに動く」(ご担当者 2026-04-28 S0063 ご指示)・morph + breath の 2 重アニメ */
  animation: blobMorph 14s ease-in-out infinite, blobBreath 9s ease-in-out infinite;
  box-shadow: 0 14px 48px rgba(31, 41, 55, 0.12);
  will-change: border-radius, transform;
}
.visual-statement-image::after {
  /* V8 S0063: ブロブ形状に切り替えで gradient overlay は削除 */
  display: none;
}
/* 形状の morph (ゆっくりした生命感・5 段階で滑らか) */
@keyframes blobMorph {
  0%, 100% {
    border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  }
  20% {
    border-radius: 52% 48% 62% 38% / 55% 48% 52% 45%;
  }
  40% {
    border-radius: 45% 55% 48% 52% / 60% 50% 42% 50%;
  }
  60% {
    border-radius: 55% 45% 42% 58% / 48% 60% 40% 52%;
  }
  80% {
    border-radius: 65% 35% 55% 45% / 45% 52% 48% 55%;
  }
}
/* 呼吸 (微妙な拡縮 + ふわっとした位置ずれ・生命感の決め手) */
@keyframes blobBreath {
  0%, 100% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.018) translate(3px, -4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .visual-statement-image {
    animation: none;
    border-radius: 50% 50% 50% 50% / 55% 45% 55% 45%;
  }
}
.visual-statement-caption {
  max-width: 920px;
  margin: 0 auto;
  padding: 60px var(--gutter) 80px;
  text-align: center;
}
.visual-statement-caption-en {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: 0.32em;
  color: var(--c-terracotta);
  text-transform: uppercase;
  margin: 0 0 14px 0;
  font-weight: 500;
}
.visual-statement-headline {
  font-family: var(--f-mincho);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 500;
  color: var(--c-forest-dark);
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin: 0 0 18px 0;
}
.visual-statement-lead {
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--c-slate-light);
  line-height: 1.9;
  max-width: 680px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .visual-statement-image {
    aspect-ratio: 4 / 3;
  }
  .visual-statement-caption {
    padding: 40px var(--gutter) 60px;
  }
}

/* ====================================================================== */
/* V8 S0063 D-3 NEW: 二言語見出し subtitle (フューチャーイン+快活 参考)      */
/* 一部 section-title の英文 subtitle・section-label と階層を分離           */
/* ====================================================================== */
.section-subtitle-en {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 16px);
  letter-spacing: 0.18em;
  color: var(--c-sage);
  font-weight: 400;
  margin-top: 10px;
  text-transform: none;
  line-height: 1.4;
}

/* ====================================================================== */
/* V8 S0063 D-8 NEW: design-critique 反映・視覚階層格上げ                   */
/* visual-statement と culture-statement の "弾け感" 強化                   */
/* ====================================================================== */

/* visual-headline を 40px → 48px / 500 → 600 で section-title より上の階層に */
.visual-statement-headline {
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ====================================================================== */
/* V8 S0063 D-12 [DEPRECATED]: 旧「小さな水の泡 7 個」(浮遊円) は削除         */
/* ご担当者 2026-04-28 ご指摘により blobMorph (有機的マスク) に置換              */
/* 既存 .vs-bubbles HTML 残置時の display 抑制のみ残す                        */
/* ====================================================================== */
.vs-bubbles { display: none !important; }

/* ====================================================================== */
/* V8 S0063 D-13 NEW: A 案 "Living Circuit" → About TCS                       */
/* 制御回路 (PLC ラダー風配線 + ノード + 中核) + 流れる光の粒子 (3 路線)        */
/* about-image の上に SVG オーバーレイ・mix-blend-mode: screen で発光的に重なる */
/* TCS 制御技術らしさを「工場の頭脳・産業の血流」visual で焼き付ける             */
/* ====================================================================== */
.about-image {
  position: relative;
  overflow: hidden;
}
.about-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.82;
  z-index: 1;
}
.about-image-tag {
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .about-circuit { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .about-circuit { opacity: 0.4; }
  .about-circuit > circle[r="5"]:not([cx]),
  .about-circuit > circle[r="4"]:not([cx]) {
    visibility: hidden;
  }
}

/* ====================================================================== */
/* V8 S0063 D-14 NEW: B 案 "Breathing Aperture" → Wanted Person               */
/* 同心円状の半透明レイヤーがゆっくり呼吸 (大小 2 円・位相差で生命感)            */
/* section 背景に配置・「眼差し」のメタファーで Wanted Person テーマと合致      */
/* ====================================================================== */
.wanted {
  position: relative;
  overflow: hidden;
}
.wanted::before,
.wanted::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
  will-change: transform, opacity;
}
.wanted::before {
  width: 540px;
  height: 540px;
  top: -120px;
  right: -180px;
  background: radial-gradient(circle at 35% 35%,
    rgba(217, 119, 87, 0.13) 0%,
    rgba(217, 119, 87, 0.07) 35%,
    rgba(217, 119, 87, 0.02) 65%,
    transparent 80%);
  animation: wantedAperturePulse 11s ease-in-out infinite;
}
.wanted::after {
  width: 420px;
  height: 420px;
  bottom: -110px;
  left: -150px;
  background: radial-gradient(circle at 60% 40%,
    rgba(46, 93, 80, 0.12) 0%,
    rgba(46, 93, 80, 0.06) 35%,
    rgba(46, 93, 80, 0.02) 65%,
    transparent 80%);
  animation: wantedAperturePulse 14s ease-in-out infinite reverse;
  animation-delay: -3s;
}
.wanted .section-inner {
  position: relative;
  z-index: 1;
}
@keyframes wantedAperturePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.7;
  }
}
@media (max-width: 768px) {
  .wanted::before { width: 320px; height: 320px; right: -100px; }
  .wanted::after { width: 260px; height: 260px; left: -90px; }
}
@media (prefers-reduced-motion: reduce) {
  .wanted::before, .wanted::after {
    animation: none;
  }
}

/* ====================================================================== */
/* V8 S0063 D-15 NEW (強化版・ご担当者 2026-04-28「C がわからない」反映):       */
/* C 案 "Fluid Specimen" → AMR セクション全体                                 */
/* (a) amr-pull-message に分かる濃さの背景揺らぎ                               */
/* (b) amr-visual の SVG (AMR ロボット概念図) 自体を揺らがせる = 本旨実現      */
/* モバイルは GPU 負荷回避のため無効化                                         */
/* ====================================================================== */
.amr-pull-message {
  position: relative;
  overflow: hidden;
}
.amr-pull-message::before {
  content: "";
  position: absolute;
  inset: -10%;
  /* グラデーション演出のみ維持 (ご担当者 2026-04-28「これはこれでありだな」評価採用) */
  /* filter (水中揺らぎ) は Hero 5 枚目 Claude Design SVG に移植 (D-15-fluid-relocate) */
  background:
    radial-gradient(circle at 22% 28%, rgba(217, 119, 87, 0.65) 0%, transparent 38%),
    radial-gradient(circle at 78% 68%, rgba(184, 149, 106, 0.55) 0%, transparent 44%),
    radial-gradient(circle at 50% 92%, rgba(245, 200, 160, 0.50) 0%, transparent 46%),
    radial-gradient(circle at 8% 80%, rgba(133, 155, 130, 0.48) 0%, transparent 42%),
    radial-gradient(circle at 92% 18%, rgba(217, 119, 87, 0.42) 0%, transparent 40%),
    radial-gradient(circle 6px at 18% 35%, rgba(255, 230, 200, 0.95) 0%, rgba(255, 230, 200, 0.4) 50%, transparent 100%),
    radial-gradient(circle 8px at 42% 55%, rgba(255, 220, 180, 0.9) 0%, rgba(255, 220, 180, 0.3) 50%, transparent 100%),
    radial-gradient(circle 5px at 70% 30%, rgba(255, 240, 220, 1) 0%, rgba(255, 240, 220, 0.5) 50%, transparent 100%),
    radial-gradient(circle 7px at 85% 75%, rgba(255, 215, 175, 0.92) 0%, rgba(255, 215, 175, 0.35) 50%, transparent 100%),
    radial-gradient(circle 4px at 32% 80%, rgba(255, 245, 230, 1) 0%, rgba(255, 245, 230, 0.55) 50%, transparent 100%),
    radial-gradient(circle 6px at 60% 88%, rgba(255, 225, 195, 0.88) 0%, rgba(255, 225, 195, 0.3) 50%, transparent 100%),
    radial-gradient(circle 5px at 92% 45%, rgba(255, 235, 205, 0.95) 0%, rgba(255, 235, 205, 0.4) 50%, transparent 100%),
    radial-gradient(circle 7px at 12% 65%, rgba(255, 220, 180, 0.85) 0%, rgba(255, 220, 180, 0.3) 50%, transparent 100%),
    radial-gradient(circle 4px at 50% 18%, rgba(255, 240, 220, 0.95) 0%, rgba(255, 240, 220, 0.4) 50%, transparent 100%),
    repeating-linear-gradient(38deg, transparent 0, transparent 14px, rgba(255, 220, 190, 0.05) 15px, transparent 17px),
    linear-gradient(135deg, rgba(217, 119, 87, 0.32) 0%, rgba(184, 149, 106, 0.24) 100%);
  background-size: 160% 160%;
  z-index: 0;
  opacity: 1;
  mix-blend-mode: screen;
  animation: amrFluidDrift 13s ease-in-out infinite;
  will-change: background-position;
}

/* ====================================================================== */
/* V8 S0063 D-15-relocate-v2: 水中 fluid filter を Hero 5 枚目 Claude Design SVG に移植 */
/* 「TCS の頭脳が水中で思考している」= 制御回路 (5 nodes + 5 paths) が水中で揺らぐ      */
/* ご担当者 2026-04-28 ご指示: SVG は揺らぎ・テキストは HTML 化して filter 外に           */
/* ====================================================================== */
/* slide-5 は既存 Hero スライドショーで absolute 配置済 (S0063 v2 削除済の position:relative 上書き禁止) */
.hero-slideshow .slide-5 .hero-slide-svg {
  filter: url(#amr-fluid-filter);
  will-change: filter;
}
.hero-slideshow .slide-5 .hero-slide-caption {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(16px, 2vw, 26px);
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 24px rgba(217, 119, 87, 0.18);
  /* filter 適用なし = 揺らがず安定表示 */
}
@media (max-width: 1024px) {
  /* モバイル + タブレット: GPU 負荷回避 */
  .hero-slideshow .slide-5 .hero-slide-svg { filter: none; }
}
@media (max-width: 768px) {
  .hero-slideshow .slide-5 .hero-slide-caption {
    font-size: 13px;
    letter-spacing: 0.1em;
    bottom: 12%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow .slide-5 .hero-slide-svg { filter: none; }
}
@keyframes amrFluidDrift {
  0%, 100% { background-position: 0% 0%; }
  25%      { background-position: 60% 30%; }
  50%      { background-position: 100% 70%; }
  75%      { background-position: 30% 100%; }
}
.amr-pull-message > * {
  position: relative;
  z-index: 1;
  /* 文字側は揺らがない (ご担当者 2026-04-28 ご指示「文字は揺らぎなく見せる」) */
}

/* AMR ロボット概念図 SVG への filter は撤去 (ご担当者 2026-04-28 ご指示「迷子になる」) */
/* C 案 Fluid Specimen は amr-pull-message の背景のみで完結 = 文字は安定 + 背景が揺らぐ */

@media (max-width: 1024px) {
  /* モバイル + タブレット: feTurbulence 無効化 (GPU 負荷回避) */
  .amr-pull-message::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .amr-pull-message::before {
    filter: none;
    animation: none;
  }
}

/* visual-statement モバイル調整 (S0063 改) */
@media (max-width: 768px) {
  .visual-statement {
    padding: 60px var(--gutter) 0;
  }
  .visual-statement-image {
    width: 92%;
    aspect-ratio: 4/3;
    box-shadow: 0 8px 28px rgba(31, 41, 55, 0.1);
  }
}

/* culture-statement に大型クォート演出 + headline 格上げ */
.culture-statement {
  position: relative;
  overflow: hidden;
}
.culture-statement::before {
  content: "\201C";  /* " 装飾用 */
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: clamp(80px, 12vw, 160px);
  color: var(--c-terracotta);
  opacity: 0.16;
  font-style: italic;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
.culture-statement-inner {
  position: relative;
  z-index: 1;
}
.culture-statement-headline {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ====================================================================== */
/* V8 S0063 D-9 NEW: 顧客体験延長線 (快活フロンティア参考・学生に刺さる)     */
/* 「あなたの日常 = TCS の仕事」訴求・nw-welcome → visual → touch-points    */
/* ====================================================================== */
.touch-points {
  background: var(--c-ivory-light);
  padding: 100px var(--gutter);
}
.touch-points-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.touch-points-en {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: 0.32em;
  color: var(--c-terracotta);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px 0;
  font-weight: 500;
}
.touch-points-headline {
  font-family: var(--f-mincho);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  color: var(--c-forest-dark);
  text-align: center;
  line-height: 1.5;
  margin: 0 auto 32px;
  max-width: 820px;
  letter-spacing: 0.04em;
}
.touch-points-headline .accent {
  color: var(--c-terracotta);
}
.touch-points-lead {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--c-slate-light);
  line-height: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.touch-points-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
.tp-item {
  background: var(--c-white);
  padding: 36px 28px;
  border: 1px solid var(--c-line);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tp-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(217, 119, 87, 0.12);
}
.tp-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--c-terracotta);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.18em;
  opacity: 0.7;
}
/* V8 S0063 D-16 NEW: Claude Design SVG イラスト用 (6 アイコン共通) */
.tp-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: block;
  transition: transform 0.4s ease;
}
.tp-item:hover .tp-icon {
  transform: scale(1.08) translateY(-2px);
}
.tp-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tp-label {
  font-family: var(--f-mincho);
  font-size: 16px;
  color: var(--c-forest-dark);
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  min-height: 48px;
}
.tp-meta {
  font-size: 13px;
  color: var(--c-slate-light);
  line-height: 1.75;
  text-align: left;
}
.tp-meta strong {
  color: var(--c-forest-dark);
  font-weight: 600;
}
@media (max-width: 768px) {
  .tp-icon { width: 60px; height: 60px; margin-bottom: 12px; }
  .tp-label { font-size: 15px; min-height: auto; }
}
.touch-points-closing {
  text-align: center;
  font-family: var(--f-mincho);
  font-size: clamp(17px, 2vw, 22px);
  color: var(--c-forest-dark);
  line-height: 2;
  letter-spacing: 0.04em;
  margin: 0 auto;
  max-width: 680px;
}
.touch-points-closing .accent-strong {
  color: var(--c-terracotta);
  font-weight: 700;
}
@media (max-width: 1024px) {
  .touch-points-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .touch-points {
    padding: 70px var(--gutter);
  }
  .touch-points-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 40px;
  }
  .tp-item {
    padding: 24px 16px;
  }
  .tp-num {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .tp-label {
    font-size: 16px;
  }
}

/* ====================================================================== */
/* V8 S0063 D-10 削除済 (ご担当者 2026-04-28 ご指示):                            */
/* 既存「浮遊エントリー泡 (canvas-orb-bg floating-entry-bubble)」と          */
/* 役割重複のため sticky-cta は撤去                                           */
/* ====================================================================== */

/* ====================================================================== */
/* V8 S0063 D-11 NEW: Numbers count-up animation 強化                       */
/* IntersectionObserver で 0 → 値・easeOutCubic                            */
/* ====================================================================== */
.num-block .num-value {
  transition: opacity 0.3s ease;
  font-variant-numeric: tabular-nums;  /* 数字の幅を等幅化 */
}
.num-block.is-counting .num-value {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .num-block.is-counting .num-value {
    transition: none;
  }
}