/* 4-column metrics layout (default in site.css), 2 columns on small screens */
  .metrics-grid--linked .metric--linked { position: relative; }
  .metrics-grid--linked .metric--linked .k { display: flex; align-items: baseline; gap: 8px; }

  /* Service card thumbnails (typographic) */
  .svc-thumb {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    overflow: hidden;
  }
  .svc-thumb--blue  { background: linear-gradient(180deg, #EAF3F6 0%, #D8E8EE 100%); }
  .svc-thumb--paper { background: linear-gradient(180deg, #F0F3F5 0%, #DDE5E9 100%); }
  .svc-thumb--teal  { background: linear-gradient(180deg, #E6F4F1 0%, #CFE7E1 100%); }
  .svc-thumb--ink   { background: #002938; }
  .svc-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* ============================================================
     Motion — 小さく・ゆっくり・一度だけ
     ============================================================ */
  :root {
    --motion-dur:   700ms;
    --motion-shift: 12px;
  }
  @keyframes cm-rise {
    from { opacity: 0; transform: translateY(var(--motion-shift)); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes cm-draw {
    from { stroke-dashoffset: 1.05; }
    to   { stroke-dashoffset: 0; }
  }

  /* 1. Hero mark: 左円 → 波線 → 右円 の順に描く */
  .hero-mark { opacity: .08; }
  .hero-mark path,
  .hero-mark circle {
    stroke-dasharray: 1 1.1;
    animation: cm-draw .6s var(--ease-in-out) .2s backwards;
  }
  .hero-mark path { animation-duration: .9s; animation-delay: .6s; }
  .hero-mark circle:last-of-type { animation-delay: 1.3s; }

  /* 2. Hero text: 行ごとに順に表示 */
  .hero-jp .line { display: block; }
  .hero .eyebrow,
  .hero-en,
  .hero-jp .line,
  .hero-body,
  .hero-cta,
  .hero-meta {
    animation: cm-rise var(--motion-dur) var(--ease-out) backwards;
  }
  .hero .eyebrow                { animation-delay: .1s; }
  .hero-en                      { animation-delay: .22s; }
  .hero-jp .line:nth-child(1)   { animation-delay: .34s; }
  .hero-jp .line:nth-child(2)   { animation-delay: .46s; }
  .hero-jp .line:nth-child(3)   { animation-delay: .58s; }
  .hero-body                    { animation-delay: .74s; }
  .hero-cta                     { animation-delay: .86s; }
  .hero-meta                    { animation-delay: .98s; }

  /* 3. Approach timeline: 上端の線が伸び、届いた順に番号が点灯 */
  .approach-grid { position: relative; }
  @media (min-width: 981px) {
    .approach-grid::before {
      content: ""; position: absolute; left: 0; right: 0; top: -1px;
      height: 2px; background: var(--brand-blue); z-index: 3;
      transform-origin: left;
    }
    .motion .approach-grid::before { transform: scaleX(0); }
    .motion .approach-grid.is-in::before {
      transform: scaleX(1);
      transition: transform 1.6s var(--ease-in-out) .2s;
    }
  }
  .motion .approach-grid .num {
    color: #B9C6CE;
    transition: color var(--dur-slow) var(--ease-out);
  }
  .motion .approach-grid.is-in .num { color: var(--brand-blue); }
  .motion .approach-grid.is-in .app-step:nth-child(1) .num { transition-delay: .3s; }
  .motion .approach-grid.is-in .app-step:nth-child(2) .num { transition-delay: .7s; }
  .motion .approach-grid.is-in .app-step:nth-child(3) .num { transition-delay: 1.1s; }
  .motion .approach-grid.is-in .app-step:nth-child(4) .num { transition-delay: 1.5s; }

  /* Metrics: 「20社 → うち8社」をつなぐ線の矢印 */
  .metric-link {
    flex: 1 1 auto; min-width: 32px; align-self: center;
    position: relative; z-index: 1;
    height: 9px; margin: 0 -37px 0 12px;
  }
  .metric-link::before {
    content: ""; position: absolute; left: 0; right: 0; top: 4px;
    height: 1px; background: var(--brand-blue);
    transform-origin: left;
  }
  .metric-link::after {
    content: ""; position: absolute; right: 1px; top: 0.5px;
    width: 8px; height: 8px;
    border-top: 1px solid var(--brand-blue);
    border-right: 1px solid var(--brand-blue);
    transform: rotate(45deg);
  }
  .motion .metric-link::before { transform: scaleX(0); }
  .motion .metric-link::after { opacity: 0; }
  .motion .metrics-grid--linked.is-in .metric-link::before {
    transform: scaleX(1);
    transition: transform .9s var(--ease-in-out) .3s;
  }
  .motion .metrics-grid--linked.is-in .metric-link::after {
    opacity: 1;
    transition: opacity var(--dur-slow) var(--ease-out) 1.1s;
  }

  /* Representative: 1カラム時も写真をPCと同じ幅までに抑える */
  @media (max-width: 900px) { .rep-figure { max-width: 360px; } }

  /* Representative: 写真を左から出し、続けてキャプションを表示 */
  .motion .rep-figure img { clip-path: inset(0 100% 0 0); }
  .motion .rep-figure.is-in img {
    clip-path: inset(0);
    transition: clip-path 1.1s var(--ease-in-out) .1s;
  }
  .motion .rep-figure .rep-cap { opacity: 0; }
  .motion .rep-figure.is-in .rep-cap {
    opacity: 1;
    transition: opacity var(--dur-slow) var(--ease-out) 1s;
  }

  /* Representative: 経歴の縦タイムライン */
  .rep-timeline {
    list-style: none; padding: 0; margin: 4px 0 26px;
    max-width: 640px; position: relative;
  }
  .rep-timeline li {
    position: relative;
    display: grid; grid-template-columns: 52px 1fr; gap: 16px;
    padding: 0 0 16px 28px;
  }
  .rep-timeline li:last-child { padding-bottom: 0; }
  .rep-timeline li:not(:last-child)::after {
    content: ""; position: absolute; left: 5px; top: 15px; bottom: -15px;
    width: 1px; background: var(--brand-blue);
    transform-origin: top;
  }
  .rep-timeline li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 11px; height: 11px; border-radius: 50%;
    border: 1px solid var(--brand-blue); background: var(--brand-blue);
    box-sizing: border-box;
  }
  .rep-timeline .yr {
    font-family: var(--ff-serif-en); font-weight: 500;
    font-size: 18px; line-height: 1.6; color: var(--brand-blue-2);
    letter-spacing: 0.02em;
  }
  .rep-timeline p {
    margin: 0;
    font-family: var(--ff-sans-jp); font-size: 15px; line-height: 1.85;
    color: var(--ink-2);
  }
  .rep-timeline strong { color: var(--ink); font-weight: 600; }
  /* 点が灯る → 次の点へ線が伸びる、を上から順に */
  .motion .rep-timeline li::before {
    background: var(--paper-2);
    transition: background var(--dur-slow) var(--ease-out);
  }
  .motion .rep-timeline li::after {
    transform: scaleY(0);
    transition: transform .3s linear;
  }
  .motion .rep-timeline.is-in li::before { background: var(--brand-blue); }
  .motion .rep-timeline.is-in li::after { transform: scaleY(1); }
  .motion .rep-timeline.is-in li:nth-child(1)::before { transition-delay: .15s; }
  .motion .rep-timeline.is-in li:nth-child(1)::after  { transition-delay: .2s; }
  .motion .rep-timeline.is-in li:nth-child(2)::before { transition-delay: .45s; }
  .motion .rep-timeline.is-in li:nth-child(2)::after  { transition-delay: .5s; }
  .motion .rep-timeline.is-in li:nth-child(3)::before { transition-delay: .75s; }
  .motion .rep-timeline.is-in li:nth-child(3)::after  { transition-delay: .8s; }
  .motion .rep-timeline.is-in li:nth-child(4)::before { transition-delay: 1.05s; }
  .motion .rep-timeline.is-in li:nth-child(4)::after  { transition-delay: 1.1s; }
  .motion .rep-timeline.is-in li:nth-child(5)::before { transition-delay: 1.35s; }
  .motion .rep-timeline.is-in li:nth-child(5)::after  { transition-delay: 1.4s; }
  .motion .rep-timeline.is-in li:nth-child(6)::before { transition-delay: 1.65s; }

  /* 4. Scroll reveal (クラスは main_0.js が付与) */
  .motion .reveal:not(.is-in) { opacity: 0; }
  .motion .reveal.is-in {
    animation: cm-rise var(--motion-dur) var(--ease-out) var(--reveal-delay, 0ms) backwards;
  }

  /* 5. Nav current section + anchor offset */
  main section[id] { scroll-margin-top: 88px; }
  .nav a { position: relative; }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 1px; background: var(--brand-blue);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .nav a.is-current { color: var(--ink); }
  .nav a.is-current::after { transform: scaleX(1); }

  /* Contact notice dialog */
  .notice {
    width: min(520px, calc(100% - 32px));
    padding: 0; border: 0; border-radius: var(--r-sm);
    background: var(--white); color: var(--ink);
    box-shadow: 0 24px 60px rgba(0, 41, 56, .18);
  }
  .notice::backdrop { background: rgba(0, 41, 56, .45); }
  .notice[open] { animation: cm-rise 320ms var(--ease-out); }
  .notice[open]::backdrop { animation: cm-fade 320ms var(--ease-out); }
  @keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
  .notice-inner { padding: 40px 32px 32px; text-align: center; }
  .notice-msg {
    margin: 0 0 28px;
    font-family: var(--ff-sans-jp); font-size: 15px; line-height: 1.9;
    color: var(--ink-2);
  }
  .notice-msg span { display: inline-block; }

  /* Reduced motion: 動きを止め、最初から全て表示 */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-mark path,
    .hero-mark circle,
    .hero .eyebrow,
    .hero-en,
    .hero-jp .line,
    .hero-body,
    .hero-cta,
    .hero-meta,
    .notice[open],
    .notice[open]::backdrop { animation: none; }
    .nav a::after { transition: none; }
  }