/**
 * SubPro プラットフォーム共通レイアウト
 *
 * 各ページが自前の inline <style> を持っていた結果、ヘッダーの最大幅が
 * 700 / 740 / 1080 / 1100px、フォーム系は全幅と散らばり、ページを移動する
 * たびにロゴの左端が 28 / 187 / 205 / 375px と飛んでいた。横幅の基準を
 * ここ 1 箇所に集約し、新しいページを足しても散らからないようにする。
 *
 * 使い方: 各ページの <head> で inline <style> より **前** に読み込む
 * (後に置くと inline 側が後勝ちして効かない)。ページ固有の見た目は
 * これまでどおり inline <style> に書いてよいが、外枠の幅だけはここが正。
 *
 *   --pf-shell : ヘッダーと「面」ページ (LP / デモ一覧 / ブログ一覧)
 *   --pf-read  : 読み物 (解説・ガイド・記事)。1 行が長くなりすぎない幅
 *   --pf-form  : 1 問 1 答のフォーム (申し込み / 相談)
 *   --pf-gut   : 左右のガター。狭い端末では詰める
 *
 * ⚠ position:fixed の要素にこの外枠を当てるときは当たり判定に注意する。
 * 幅を 1080px まで広げると、見た目は小さな文字 1 行でも透明な箱が画面を
 * 横断し、同じ固定レイヤーにある操作要素のクリックを奪う。実際に
 * apply / talk の左下の注記を外枠に乗せた時、フォームの送信ボタンが
 * 押せなくなった。テキストだけの要素なら pointer-events:none を当て、
 * 操作要素がある場合だけ子側で pointer-events:auto に戻すこと
 * (.top-bar / .top-bar a が既にこの形)。
 */
:root{
  --pf-shell:1080px;
  --pf-read:720px;
  --pf-form:640px;
  --pf-gut:32px;
}
/* lp.html が元々 820px 以下でガターを 18px に詰めていた。全ページを共通化
   するにあたり、その判断をブレークポイントごと引き継ぐ (560px だけにすると
   561-820px でガターが 32px に戻り、意図した詰めが失われる)。 */
@media(max-width:820px){
  :root{--pf-gut:18px}
}

/* スクロールする / しないでビューポート幅が変わると、中央寄せの外枠が
   ページ間で 7px ほど左右にずれる (縦スクロールバーの分)。常にバー分の
   領域を確保して、遷移してもロゴが動かないようにする。 */
html{scrollbar-gutter:stable}

/* 外枠。ヘッダーの中身と面ページの本文はこれに収める。
   ロゴの左端が全ページで一致するのはこの指定による。 */
.pf-shell,
.nav-in,
.top-bar-in{
  width:100%;
  max-width:var(--pf-shell);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pf-gut);
  padding-right:var(--pf-gut);
  box-sizing:border-box;
}

/* 読み物の本文。--pf-shell より狭いので、ヘッダーと左端は揃わないが
   中央線は揃う。1 行が長すぎると読めなくなるため面ページとは分ける。 */
.pf-read{
  width:100%;
  max-width:var(--pf-read);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pf-gut);
  padding-right:var(--pf-gut);
  box-sizing:border-box;
}

/* 左右のガターだけが欲しい要素向け。max-width を持たないので、自前で幅を
   決めている要素 (.card など) に足しても衝突しない。.pf-shell を付けて
   max-width を inline 側で上書きする形にすると <link> と <style> の記述順に
   結果が依存してしまうため、幅とガターは別のクラスに分けている。 */
.pf-gutter{
  padding-left:var(--pf-gut);
  padding-right:var(--pf-gut);
  box-sizing:border-box;
}

/* flowform 系 (apply / talk) の固定ヘッダー。バー自体は全幅のまま、
   中身だけ .top-bar-in で他ページと同じ外枠に収める。 */
.top-bar-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
}
