/* visuals.css — 図解・製品画面・AI社員・音声デモの見た目（2026-10-15）。色・余白・角丸は site.css のトークンだけを使う。 */

/* ---- 図解（VisualsDiagrams）：<figure class="diagram"> ---- */
/* 図は横長版（幅720）と縦長版（幅300）の2枚を置き、図の枠の幅で片方だけ見せる。
   横長版は幅630px未満だと文字が14px未満になるため、そこから縦長版に切り替える。
   container query に未対応の古いブラウザでは、横長版だけが縮小表示される。 */
.diagram{container:diagram/inline-size;max-width:960px;margin:32px auto;padding:20px;background:var(--white);border:1px solid var(--line-200);border-radius:var(--r-card)}
.diagram__img{display:block;width:100%;height:auto;margin:0 auto}
.diagram__img--wide{max-width:720px}
.diagram__img--narrow{display:none;max-width:360px}
@container diagram (max-width:629px){
  .diagram__img--wide{display:none}
  .diagram__img--narrow{display:block}
}
@media (max-width:640px){.diagram{padding:16px;margin:24px 0}}
/* 図の文字による説明（スクリーンリーダー・検索向けの代替テキストを兼ねる） */
.diagram .diagram__cap{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line-200);color:var(--ink-600);font-size:14px;line-height:1.7}
.diagram .diagram__lead{margin:0 0 4px;font-weight:700;color:var(--ink-800)}
.diagram .diagram__sub{margin:8px 0 2px;font-weight:700;color:var(--ink-800)}
.diagram .diagram__cap ol{max-width:35em;margin:0 0 4px;padding-left:1.6em}
.diagram .diagram__cap li{margin:2px 0}

/* ---- 製品画面（VisualsShots）：<figure class="shot"> ----
   画像は paper-50 の台紙の上にブラウザ窓のモックを置いたもの。台紙の縁は枠線と影で見せる（画像の幅・高さ属性でレイアウトのずれを防ぐ） */
.shot{margin:32px 0}
.shot img{display:block;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line-200);box-shadow:var(--shadow)}
.shot figcaption{margin:12px 0 0;color:var(--ink-600);font-size:14px;line-height:1.7}