/* スマホ表示の応急処置。
 *
 * LPは制作ツールの書き出しで、レイアウトが全部インラインstyleで入っている。
 * そのうち2箇所がスマホ幅で破綻していたので、ここで上書きする（インラインstyleに
 * 勝つ必要があるので !important が要る）。
 *
 * 🔴 本来は制作ツール側で直すのが正。再書き出しすると index.html の <link> が
 *    消えるので、その時はこのファイルの読み込みを入れ直すこと（sim.js と同じ扱い）。
 *
 * ① グリッドの最小幅が画面より広い
 *    ヒーローが grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)) で、
 *    390px幅の端末では列が画面からはみ出す。親に overflow-x: hidden が掛かって
 *    いるため、はみ出した分は**切り落とされて読めない**（見出しも本文も右端が消える）。
 *    正しくは minmax(min(430px, 100%), 1fr)。ここでは幅の狭い端末で1列に畳む。
 *    120px/150px のような小さいグリッド（チップ類）は畳むと間延びするので除外。
 */
@media (max-width: 560px) {
  [style*="repeat(auto-fit"]:not([style*="minmax(120px"]):not([style*="minmax(150px"]) {
    grid-template-columns: 1fr !important;
  }

  /* 1列に畳んでも、グリッドの子は既定で min-width: auto（＝中身の最小幅より
   * 縮まない）なので、42pxの見出しなどが列を押し広げて結局はみ出す。
   * 縮めるように明示する。 */
  [style*="repeat(auto-fit"] > * {
    min-width: 0 !important;
  }
}

/* ② ヘッダーのナビが畳めない
 *    nav が white-space: nowrap の横並びで 549px ある。ロゴとCTAを足すと900px級で、
 *    スマホ・タブレットでははみ出す。狭い画面ではナビを隠し、ロゴとCTAだけ残す
 *    （ページ内リンクなので、消えても本文をスクロールすれば全部たどれる）。
 */
@media (max-width: 900px) {
  header nav {
    display: none !important;
  }
}

/* ── ヘッダーが固定されない ───────────────────────────────────
   header は position: sticky; top: 0 が付いているのに、実際には一緒に流れて
   消える。原因は祖先の `overflow-x: hidden`（`width:100%` のラッパー）。
   overflow が hidden だとその要素がスクロールコンテナになり、sticky は
   ビューポートではなく**そのコンテナ**に対して張り付くため効かなくなる。
   `clip` はスクロールコンテナを作らないので、横方向のはみ出しを隠したまま
   sticky が生きる。実測：スクロール1400px時点で header の top が 0 のまま。 */
[style*="overflow-x: hidden"] {
  overflow-x: clip !important;
}

/* ── ヒーローは実画面の録画1つに絞る ─────────────────────────────
   作り込んだ静止モックと動画を縦に並べると、似た箱が2つ続いて視線が散り、
   下の動画は文字が小さすぎて読めなかった（実機で確認）。モックは隠して
   動画だけを見せる。HTMLからは消さない（制作ツール側の書き出しを壊さない）。 */
[data-hero-mock] { display: none; }

/* ── 試算結果が更新されたときの合図 ─────────────────────────────
   「試算する」ボタンを外して入力即反映にしたので、数字が入れ替わったことが
   分かるように一瞬だけ色を差す。値が変わった時だけ sim.js が属性を付ける。 */
[data-sim-flash] {
  animation: sim-flash 520ms ease-out;
}
@keyframes sim-flash {
  0% { background: rgba(181, 84, 31, 0.18); }
  100% { background: transparent; }
}

/* ヒーローは動画が主役。2列が並ぶ幅では動画側に55%を渡して縦幅を稼ぐ
   （等分だと動画が文字列より低く、狭苦しい・オーナー指摘 2026-07-31）。 */
@media (min-width: 1000px) {
  [data-hero-grid] { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr) !important; }
}