@charset "UTF-8";
/*!
 * framing.css — WEBCM 案件のファーストビュー基準
 *
 * 正本: shared/framing/webcm.css （配布は `sh tools/sync-shared.sh`）
 * 各サイトからは同じ名前 framing.css で読む。style.css より "前" に置くこと。
 *
 * 劇中で切り出す画面は 1080 x 1080px。**この数値をサイト側の CSS に書かない。**
 * 高さが要るときは var(--fv-h)、幅は var(--fv-w) を使う。
 *
 * 使い方:
 *   <div class="fv">              1画面ぶんの高さで止まる縦フレックス
 *     <header>…</header>
 *     <div class="fv-grow">…</div>  余りを埋めて縮む要素(写真など)
 *     <nav class="fv-clip">…</nav>  はみ出しを切る要素(目次など)
 *   </div>
 */
:root{
  --fv-w: 1080px;   /* 切り出し幅 */
  --fv-h: 1080px;   /* 切り出し高さ */
}

/* 想定フレームより狭い窓では通常のレスポンシブに任せる(1001px 未満)。
   CSS 変数はメディアクエリの条件には使えないため、この閾値だけは直値で持つ */
@media (min-width: 1001px){
  /* --shoot-vh は shoot.js が実画面の高さをステージ座標に読み替えて入れる。
     未使用のサイトでは 100vh にフォールバックする */
  .fv      { height: min(var(--shoot-vh, 100vh), var(--fv-h)); display: flex; flex-direction: column; }
  .fv > *  { width: 100%; }          /* margin:0 auto の内側ラッパが縮まないように */
  .fv-grow { flex: 1 1 auto; min-height: 0; }
  .fv-clip { overflow: hidden; }
}

/* 窓が想定より低いとき(ブラウザUI込みで 1080px の窓など)の詰め用フック。
   サイト側は @media (min-width:1001px) and (max-height:1040px) で余白を詰める */