/* ============================================================================
   図版: 事業の工程を表す抽象図（SVG）／実在の見本画面を入れるブラウザ枠／事例カード
   ============================================================================ */

.fig {
  position: relative; color: var(--ink); aspect-ratio: 400 / 260;
  background: linear-gradient(160deg, var(--c-tint) 0%, var(--bg-peach) 100%);
  border-radius: 4px; overflow: hidden;
}
.fig__svg { width: 100%; height: 100%; display: block; }
/* 水引と同じ一本の朱華の線。pathLength=1000 に正規化してある */
.fig__cord { stroke: var(--c-deep); stroke-width: 1.8; }
.fig__label { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.08em; fill: var(--ink-sub); }
.fig--lg { border-radius: 6px; }
.fig--lg .fig__label { font-size: 11px; }

/* 画面に入ったとき、線が一筆で描かれていく（.is-in は IntersectionObserver が付ける） */
.reveal .fig__cord, .biz-visual .fig__cord { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.reveal.is-in .fig__cord, .biz-visual.is-active .fig__cord, .biz-visual:first-child .fig__cord {
  animation: fig-draw 2.6s cubic-bezier(0.3, 0, 0.2, 1) 0.15s forwards;
}
@keyframes fig-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fig__cord { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ---- ブラウザ枠 ---- */
.browser {
  margin: 0; border-radius: 6px; overflow: hidden; background: #fff;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  box-shadow: 0 18px 40px -18px rgba(var(--ink-rgb), 0.22), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.browser__bar {
  height: 22px; background: linear-gradient(180deg, #faf8f4, #f0ece3); border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
  display: flex; align-items: center; padding: 0 10px; }
.browser__bar span { display: block; width: 38%; height: 7px; border-radius: 4px; background: rgba(var(--ink-rgb), 0.12); }
.browser img { width: 100%; display: block; }
.browser--soft img { filter: saturate(0.55) contrast(0.96); }
.browser--inset { margin: 8% 8% 0; border-radius: 6px 6px 0 0; }

/* 見本画面を朱華の淡い面に載せる */
.plate {
  position: relative; overflow: hidden; border-radius: 6px;
  background: linear-gradient(160deg, var(--c-tint) 0%, var(--bg-peach) 60%, var(--bg-lav) 100%);
  padding: clamp(20px, 4vw, 48px) clamp(20px, 4vw, 48px) 0;
}
.plate .browser { border-radius: 6px 6px 0 0; box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.5) inset; }
.plate--pad { padding-bottom: clamp(20px, 4vw, 48px); }
.plate--pad .browser { border-radius: 6px; }
.plate--duo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(14px, 2.5vw, 32px); align-items: end; }
.plate--duo .browser:last-child { margin-bottom: 12%; }
@media (max-width: 640px) {
  .plate--duo { grid-template-columns: 1fr; } .plate--duo .browser:last-child { display: none; };
}

/* ---- 事例カード（/works） ---- */
.case {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule); }
.case:first-of-type { border-top: 0; padding-top: 0; }
.case__media { position: sticky; top: calc(var(--header-h) + 24px); }
.case__num { font-family: var(--font-serif); font-size: var(--fs-pillar); line-height: 1; color: var(--c-hanezu-text); }
.case__meta { margin-top: 1rem; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--ink-sub); }
.case h3 { margin-top: 0.4rem; font-size: var(--fs-h2); line-height: 1.3; }
.case__role {
  display: inline-block; margin-top: 1rem; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--c-deepest);
  border: 1px solid var(--c-hanezu); padding: 3px 10px; border-radius: 2px; }
.case__body { margin-top: 1.4rem; }
.case__body p + p { margin-top: 0.9rem; }
.case__cap { margin-top: 10px; font-size: 0.78rem; color: var(--ink-sub); }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } .case__media { position: static; } }

/* ---- 事業ページの図版セクション ---- */
.fig-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
}
@media (max-width: 860px) { .fig-row { grid-template-columns: 1fr; } }