/* ==========================================================================
   E-T-A.DESIGN — style.css

   - 色・余白・文字サイズ・線の太さ・角の丸み・動きの速さは、すべて :root の変数で管理する
     （下のルールに値を直書きしない）
   - ★ 現在の値はすべて「仮」。色・書体はデザインシステムの段階で 2〜3 案から選んで確定する
     （CLAUDE.md 第3章・第7章）
   - モバイルファースト：狭い画面を基本に書き、min-width で広げる
     ブレークポイント：768px（タブレット）／1024px（ヘッダーのメニューを横並びに）／1280px（PC）
   ========================================================================== */

:root {
  /* --- 色（仮） ------------------------------------------------------- */
  --color-bg: #f6f6f3;          /* 仮：地の色 */
  --color-surface: #ffffff;     /* 仮：カードなど */
  --color-ink: #1d1d1b;         /* 仮：文字。純黒 #000 は使わない */
  --color-ink-muted: #5f5f5a;   /* 仮：補足の文字 */
  --color-line: #d6d6d0;        /* 仮：区切り線 */
  --color-accent: #2b63d9;      /* 仮：アクセント */
  --color-accent-ink: #ffffff;  /* 仮：アクセントの上に載る文字 */
  --color-focus: var(--color-accent);

  /* --- 書体（仮） ----------------------------------------------------- */
  /* 本文は OS 標準フォント。見出し用の日本語 Web フォントはデザインシステムで決める */
  --font-body: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-heading: var(--font-body); /* 仮 */
  --font-en: var(--font-body);      /* 仮：英語ラベル */
  --weight-bold: 700;

  /* --- 文字サイズ（仮・画面幅に応じて伸縮） ------------------------------- */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-display: clamp(2rem, 0.9rem + 5.6vw, 6rem);
  --fs-glyph: clamp(4.5rem, 2.5rem + 10vw, 12rem);
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-snug: 1.5;
  --lh-base: 1.85;
  --ls-label: 0.14em;

  /* --- 余白（仮） ----------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --gutter: clamp(1rem, 4vw, 3rem);            /* 画面の左右の余白（320px で 16px） */
  --section-space: clamp(4rem, 2rem + 9vw, 10rem);
  --content-max: 72rem;
  --text-max: 40rem;

  /* --- 線（仮） ------------------------------------------------------- */
  /* ロゴの線の太さは、ロゴの高さのおよそ 0.21 倍（T の横線 140 ／ 全体 694）。
     デザインシステムの段階で、ここから --stroke を決める */
  --logo-stroke-ratio: 0.21;
  --stroke: 4px;        /* 仮：ロゴ由来の太い線 */
  --line: 1px;          /* 仮：細い区切り線 */
  --underline-offset: 0.25em;
  --focus-ring: 3px;
  --focus-offset: 3px;

  /* --- 角の丸み（仮） ------------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px; /* ロゴの丸い線端 */

  /* --- 動き（仮） ----------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- 大きさ・配置 --------------------------------------------------- */
  --tap-min: 44px;                 /* タップできる要素の最小サイズ */
  --tap-large: 3.5rem;             /* 大きいボタンの高さ */
  --header-h: 3.75rem;
  --logo-h-header: 1.5rem;
  --logo-w-hero: min(100%, 26rem);
  --logo-w-footer: 6rem;
  --dot-size: clamp(3rem, 2rem + 5vw, 6rem);   /* ⑧ 到着点「.」 */
  --card-w: min(78vw, 20rem);                  /* ④ スマホで横に送るカードの幅 */
  --card-min: 15rem;                           /* ④ タブレット以上のカードの最小幅 */
  --thumb-min: 8.5rem;                         /* ⑥ サムネイルの最小幅 */
  --thumb-ratio: 4 / 3;
  --dt-width: 8rem;                            /* 会社情報などの見出し列 */
  --date-width: 7rem;                          /* お知らせの日付列 */
  --track-length-eta: 250svh;                  /* ③ スマホは画面 2.5 枚分 */
  --z-header: 100;
  --z-loading: 1000;
}

@media (min-width: 768px) {
  :root {
    --track-length-eta: 300svh;                /* ③ PC は画面 3 枚分 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* ==========================================================================
   基本
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  overflow-wrap: anywhere;
  line-break: strict;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  word-break: auto-phrase;
  text-wrap: balance;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: var(--line);
  text-underline-offset: var(--underline-offset);
}

:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink);
  color: var(--color-bg);
}

.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  width: min(100% - var(--gutter) * 2, var(--content-max));
  margin-inline: auto;
}

/* 英語ラベル（装飾として日本語に併記する） */
.label {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font-weight: var(--weight-bold);
}

/* ロゴ（build.py が images/logo/eta-logo.svg を埋め込む。塗りは currentColor） */
.logo {
  display: block;
  width: auto;
  height: 100%;
  color: var(--color-ink);
}

/* ==========================================================================
   ボタン
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding-inline: var(--space-5);
  border: var(--line) solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.button--primary {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-bg);
}

.button--primary:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.button--large {
  min-height: var(--tap-large);
  padding-inline: var(--space-6);
  font-size: var(--fs-md);
}

/* ==========================================================================
   ヘッダー（全ページ共通）
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: var(--line) solid var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(100% - var(--gutter) * 2, var(--content-max));
  min-height: var(--header-h);
  margin-inline: auto;
}

.site-header__logo {
  display: flex;
  align-items: center;
  height: var(--tap-min);
  margin-right: auto;
  padding-block: calc((var(--tap-min) - var(--logo-h-header)) / 2);
}

.eta-display {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.site-header__menu {
  padding-inline: var(--space-4);
  border-color: var(--color-line);
}

.site-header__contact {
  padding-inline: var(--space-4);
}

/* メニュー：スマホは popover（JS なしで開閉できる）。1024px 以上は横並び */
.site-nav[popover] {
  inset: var(--header-h) 0 auto 0;
  width: auto;
  height: auto;
  max-height: calc(100dvh - var(--header-h));
  margin: 0;
  padding: var(--space-4) var(--gutter) var(--space-6);
  overflow: auto;
  border: 0;
  border-bottom: var(--line) solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-ink);
}

.site-nav__list {
  display: grid;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.site-nav__list a:hover {
  text-decoration: underline;
}

/* popover に未対応のブラウザ：メニューを2段目に並べて常に表示する */
@supports not selector(:popover-open) {
  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-header__menu {
    display: none;
  }

  .site-nav[popover] {
    order: 10;
    flex-basis: 100%;
    padding: 0 0 var(--space-2);
    border: 0;
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    gap: var(--space-5);
  }

  .site-header__menu {
    display: none;
  }

  .site-nav[popover] {
    display: block;
    position: static;
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-5);
  }
}

/* ==========================================================================
   セクション共通
   ========================================================================== */

.section {
  padding-block: var(--section-space);
}

.section + .section {
  border-top: var(--line) solid var(--color-line);
}

.section__head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}

.section__title {
  font-size: var(--fs-xl);
}

.section__foot {
  margin-top: var(--space-6);
}

/* ==========================================================================
   トップ ① ローディング（本番の演出は第7章で作る。今は着地点の枠だけ）
   ========================================================================== */

.loading {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading);
  background: var(--color-bg);
}

/* ==========================================================================
   トップ ② ヒーロー／コンセプト
   ========================================================================== */

.hero {
  display: grid;
  align-content: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--space-8);
}

.hero__inner {
  display: grid;
  gap: var(--space-6);
}

.hero__logo {
  width: var(--logo-w-hero);
}

.hero__logo .logo {
  width: 100%;
  height: auto;
}

.hero__title {
  display: grid;
  gap: var(--space-4);
}

.hero__title-en {
  font-family: var(--font-en);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  overflow-wrap: break-word;
}

.hero__title-ja {
  font-size: var(--fs-lg);
}

.hero__lead {
  max-width: var(--text-max);
  font-size: var(--fs-md);
}

.concept__body {
  display: grid;
  gap: var(--space-5);
  max-width: var(--text-max);
}

.concept__title-ja {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-md);
  color: var(--color-ink-muted);
}

/* ==========================================================================
   トップ ③ E・T・A
   ========================================================================== */

.eta-letters {
  display: grid;
  gap: var(--space-8);
  padding: 0;
  list-style: none;
}

.eta-letter {
  display: grid;
  gap: var(--space-2);
}

.eta-letter__glyph {
  font-family: var(--font-en);
  font-size: var(--fs-glyph);
  font-weight: var(--weight-bold);
  line-height: var(--lh-none);
}

.eta-letter__title {
  font-size: var(--fs-xl);
}

.eta-closing {
  margin-top: var(--space-8);
  font-size: var(--fs-xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
}

/* ==========================================================================
   スクロール固定（sticky）の枠：③④で使う
   演出部品が mount されたとき（data-fx-state="mounted"）だけ固定する。
   JS なし・reduced-motion・読み込み失敗のときは、普通に縦に並んだ静的な表示になる
   ========================================================================== */

.sticky-track {
  position: relative;
}

.sticky-track:has(> .sticky-stage[data-fx-state="mounted"]) {
  height: var(--track-length, 300svh);
}

.sticky-stage[data-fx-state="mounted"] {
  position: sticky;
  top: var(--header-h);
  display: grid;
  align-content: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--space-6);
}

.section--eta .sticky-track {
  --track-length: var(--track-length-eta);
}

/* ③ に演出が載っている間は、文字を小さめにして下に寄せ、画面1枚に収める
   （eta-letters ができたら、data-active の1文字だけを見せる形に置き換える） */
.section--eta .sticky-stage[data-fx-state="mounted"] {
  align-content: end;
}

.section--eta .sticky-stage[data-fx-state="mounted"] .eta-letters {
  gap: var(--space-4);
}

.section--eta .sticky-stage[data-fx-state="mounted"] .eta-letter__glyph {
  font-size: var(--fs-xl);
}

@media (min-width: 768px) {
  .section--eta .sticky-stage[data-fx-state="mounted"] .eta-letters {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   トップ ④ できること
   ========================================================================== */

/* スマホ：横スワイプ（scroll-snap）で 1 枚ずつ送る。縦スクロールは奪わない */
.service-list {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0 var(--gutter) var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  list-style: none;
}

.service-card {
  display: grid;
  flex: 0 0 var(--card-w);
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--line) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  scroll-snap-align: start;
}

.service-card__title {
  font-size: var(--fs-lg);
}

.service-card__detail {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}

.service-card .more-link {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .service-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
    width: min(100% - var(--gutter) * 2, var(--content-max));
    margin-inline: auto;
    padding: 0;
    overflow: visible;
  }
}

.service-ai {
  margin-top: var(--space-7);
}

.service-ai a {
  display: inline-block;
  padding-block: var(--space-1);
  font-size: var(--fs-lg);
  font-weight: var(--weight-bold);
}

/* ==========================================================================
   トップ ⑤ 制作フロー（ルートの線は、静的な表示では最初から描かれた状態）
   ========================================================================== */

.flow {
  display: grid;
  gap: var(--space-7);
  padding: 0;
  list-style: none;
}

.flow__phase {
  display: grid;
  gap: var(--space-4);
}

.flow__steps {
  display: grid;
  gap: var(--space-5);
  padding: 0 0 0 var(--space-5);
  border-left: var(--stroke) solid var(--color-line);
  list-style: none;
}

.flow__step {
  display: grid;
  gap: var(--space-1);
}

.flow__step-num {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

.flow__step-title {
  font-size: var(--fs-lg);
}

/* ==========================================================================
   トップ ⑥ 実績／/works/（静的な代替表示：サムネイルのグリッド）
   ========================================================================== */

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--thumb-min)), 1fr));
  gap: var(--space-5) var(--space-4);
  padding: 0;
  list-style: none;
}

.work-card a {
  display: grid;
  gap: var(--space-2);
  text-decoration: none;
}

.work-card img {
  width: 100%;
  aspect-ratio: var(--thumb-ratio);
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-line);
}

.work-card__title {
  font-size: var(--fs-sm);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
}

.work-card a:hover .work-card__title {
  text-decoration: underline;
}

.works-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
  padding: 0;
  list-style: none;
}

.works-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-4);
  border: var(--line) solid var(--color-line);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.works-group + .works-group {
  margin-top: var(--space-8);
}

.works-group__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-lg);
}

/* ==========================================================================
   トップ ⑦ ブログ・新着情報／/news/
   ========================================================================== */

.news-list {
  padding: 0;
  border-top: var(--line) solid var(--color-line);
  list-style: none;
}

.news-item a {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: var(--line) solid var(--color-line);
  text-decoration: none;
}

.news-item a:hover .news-item__title {
  text-decoration: underline;
}

.news-item time {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

@media (min-width: 768px) {
  .news-item a {
    grid-template-columns: var(--date-width) 1fr;
    align-items: baseline;
  }
}

/* ==========================================================================
   トップ ⑧ 到着点：問い合わせ・会社情報
   ========================================================================== */

.arrival {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}

.arrival__dot {
  width: var(--dot-size);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
}

.arrival__title {
  font-size: var(--fs-2xl);
}

.company-block {
  margin-top: var(--space-9);
}

.company-block__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-lg);
}

.company {
  border-top: var(--line) solid var(--color-line);
}

.company__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: var(--line) solid var(--color-line);
}

.company__row dt {
  font-size: var(--fs-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink-muted);
}

@media (min-width: 768px) {
  .company__row {
    grid-template-columns: var(--dt-width) 1fr;
    gap: var(--space-5);
  }
}

/* ==========================================================================
   フッター（全ページ共通）
   ========================================================================== */

.site-footer {
  padding-block: var(--space-8) var(--space-6);
  border-top: var(--line) solid var(--color-line);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-6);
}

.site-footer__logo {
  display: block;
  width: var(--logo-w-footer);
}

.site-footer__logo .logo {
  width: 100%;
  height: auto;
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
  padding: 0;
  list-style: none;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.site-footer__copy {
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}

/* ==========================================================================
   下層ページ共通
   ========================================================================== */

.page-hero {
  padding-block: var(--space-8) var(--space-6);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-3);
}

.page-hero__title {
  font-size: var(--fs-2xl);
}

.page-hero__lead {
  max-width: var(--text-max);
}

.prose {
  max-width: var(--text-max);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  margin-top: var(--space-7);
  font-size: var(--fs-lg);
}

.prose ul {
  padding-left: var(--space-5);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  font-size: var(--fs-sm);
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-ink-muted);
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.card-list > li {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  border: var(--line) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.card-list h3 {
  font-size: var(--fs-lg);
}

.timeline {
  border-top: var(--line) solid var(--color-line);
}

.timeline__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: var(--line) solid var(--color-line);
}

.timeline__row dt {
  font-family: var(--font-en);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .timeline__row {
    grid-template-columns: var(--dt-width) 1fr;
    gap: var(--space-5);
  }
}

.about-logo {
  width: var(--logo-w-hero);
  margin-block: var(--space-6);
}

.about-logo .logo {
  width: 100%;
  height: auto;
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}

.work-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--color-line);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: var(--space-1) var(--space-3);
  border: var(--line) solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
}

.contact-methods {
  display: grid;
  gap: var(--space-4);
}

.contact-methods a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-lg);
  font-weight: var(--weight-bold);
}

.placeholder-box {
  padding: var(--space-6);
  border: var(--line) dashed var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
}

/* ==========================================================================
   演出部品の枠（js/core/fx-loader.js が data-fx-state を付ける）
   - 部品は el の中だけに描画する。背景に描く部品は z-index: -1 を使う
   ========================================================================== */

:where([data-fx]) {
  position: relative;
  isolation: isolate;
}