/*
 * Site Frame — 全帯エッジ揃え（2026-09-01・利用者指示）
 * exchange-tech.co.jp 全ページの帯レベルコンテナ（ヘッダー・フッター・
 * セクション・ページヒーロー・パンくず等）の左右エッジを、
 * TOP の額縁フレーム（favre.css のヒーロー/特徴カード/世界地図）と同一の
 * 垂直ラインに揃える。
 *
 * 狭幅（〜1023px）: 従来どおりの流体 padding（px-4 / sm:px-6 相当）
 * 広幅（1024px〜）: clamp(2rem, 5vw, 5rem) の流体余白。上限側は
 *   フレーム幅 112rem（1792px）を超えて広がらない（それ以上は余白が伸びる）
 *
 * 注意: 長文・フォーム等の可読性制約ブロック（max-w-3xl/4xl/5xl/6xl 併用の
 * container）は対象外。帯の外縁のみを揃え、内部の読み物幅は従来どおり中央配置。
 * （fluid breakout パターン: 外枠は揃え、prose は中央に保持）
 *
 * 適用方法: 帯レベルの `container mx-auto px-4 sm:px-6 lg:px-8` を
 * `site-frame` へ置き換える。% 基準は全幅の帯の直接の子で使うこと。
 */

.site-frame {
  /* width:100% 必須: flex コンテナの直接の子（ページ Hero 等）では
     幅指定なしだと shrink-to-fit で内容幅へ潰れ、見出しが不自然に折り返す
     （2026-09-01 実測: 会社概要 h1 が 192px へ潰れ 2 段化）。Tailwind .container と同じく明示する */
  width: 100%;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .site-frame {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .site-frame {
    padding-inline: max(clamp(2rem, 5vw, 5rem), calc((100% - 112rem) / 2));
  }
}