/* ============================================================================
 *  responsive.css — スマートフォン向けの上書き（build_site.py が自動生成）
 *
 *  このファイルは手で編集しない。ビルドのたびに作り直される。
 *  上書きの方針を変えるときは build_site.py の make_responsive() を直す。
 *
 *  なぜ自動生成か
 *    デザインボードはデスクトップ幅で作られ、すべてインラインスタイルで、
 *    メディアクエリを1つも持たない。上書きする値を手で並べると、ボードを
 *    更新したときに必ず漏れる。実際に使われている値を走査して作る。
 *
 *  なぜ !important か
 *    外部CSSはインラインスタイルに負ける。style 属性の値を属性セレクタで
 *    拾って上書きしている。ボード側は一切書き換えない。
 *
 *  直している対象
 *    1. 固定の多段グリッドが縦に積まれない
 *    2. 見出しと数値が大きすぎて折り返しが崩れる
 *    3. 余白がデスクトップ基準のままで、画面の多くを余白が占める
 *
 *  flex のブロックは flex-wrap と基準幅を持つため、放っておいても正しく
 *  折り返す。触らない。
 * ========================================================================== */

@media (max-width: 860px) {
  [style*="grid-template-columns:repeat(2, minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(3, minmax(0,1fr))"] {
    grid-template-columns: 1fr !important;
  }

  [style*="font-size:60px"] { font-size: 37px !important; }
  [style*="font-size:58px"] { font-size: 36px !important; }
  [style*="font-size:44px"] { font-size: 27px !important; }
  [style*="font-size:40px"] { font-size: 25px !important; }
  [style*="font-size:38px"] { font-size: 24px !important; }
  [style*="font-size:36px"] { font-size: 22px !important; }
  [style*="font-size:34px"] { font-size: 22px !important; }

  [style*="padding:86px 24px 96px"] { padding: 52px 18px 58px !important; }
  [style*="padding:86px 24px 92px"] { padding: 52px 18px 55px !important; }
  [style*="padding:76px 24px 92px"] { padding: 46px 18px 55px !important; }
  [style*="padding:48px 24px 80px"] { padding: 29px 18px 48px !important; }
  [style*="padding:56px 24px 80px"] { padding: 34px 18px 48px !important; }
  [style*="padding:66px 48px"] { padding: 40px 18px !important; }
  [style*="padding:56px 24px 44px"] { padding: 34px 18px 26px !important; }
  [style*="padding:36px 40px"] { padding: 22px 18px !important; }
  [style*="padding:36px 24px 40px"] { padding: 22px 18px 24px !important; }
  [style*="padding:30px 36px"] { padding: 18px 18px !important; }
  [style*="padding:30px 34px"] { padding: 18px 18px !important; }
  [style*="padding:34px"] { padding: 24px !important; }
  [style*="padding:28px 30px"] { padding: 17px 18px !important; }
  [style*="padding:30px"] { padding: 22px !important; }
  [style*="padding:26px 30px"] { padding: 16px 18px !important; }
  [style*="padding:15px 28px"] { padding: 12px 18px !important; }
  [style*="padding:26px 28px"] { padding: 16px 18px !important; }
  [style*="padding:14px 26px"] { padding: 12px 18px !important; }
  [style*="padding:22px 26px"] { padding: 13px 18px !important; }
  [style*="padding:26px"] { padding: 19px !important; }
  [style*="padding:24px 26px"] { padding: 14px 18px !important; }
  [style*="padding:14px 24px"] { padding: 12px 18px !important; }
  [style*="padding:22px 24px"] { padding: 13px 18px !important; }
  [style*="padding:18px 24px"] { padding: 12px 18px !important; }

  /* 画面からはみ出す原因になりやすい */
  img { max-width: 100% !important; height: auto !important; }
}

@media (max-width: 420px) {
  [style*="font-size:60px"] { font-size: 33px !important; }
  [style*="font-size:58px"] { font-size: 32px !important; }
  [style*="font-size:44px"] { font-size: 24px !important; }
  [style*="font-size:40px"] { font-size: 22px !important; }
  [style*="font-size:38px"] { font-size: 21px !important; }
  [style*="font-size:36px"] { font-size: 20px !important; }
  [style*="font-size:34px"] { font-size: 20px !important; }
}

/* 横スクロールは1箇所でも原因があると全体が崩れて見える */
html, body { max-width: 100%; overflow-x: hidden; }