/* -----------------------------------------------------------------------------
 * フロントエンド（公開サイト）の不具合対策
 * -------------------------------------------------------------------------- */

/*
 * Sticky ヘッダーがウィンドウ幅の変更に追従しない問題の対策。
 *
 * 「Sticky Menu (or Anything!) on Scroll」プラグインは、ヘッダーを固定表示に
 * する際 <header id="site_header"> にインラインで position:fixed と
 * width:XXXXpx（読込時のビューポート幅の実px）を書き込む。この幅が
 * ウィンドウリサイズで更新されないため、ヘッダーと上部メニューが元の幅の
 * まま固定され「リサイズされない」ように見える。
 *
 * インラインの固定px幅を !important で打ち消し、ビューポート相対幅
 * （position:fixed に対する width:100% ＝ 常にウィンドウ幅）にすることで、
 * リサイズ時に正しくリフローさせる。内側の .content / .container は
 * max-width で中央寄せされるため、レイアウトは崩れない。
 */
header#site_header.element-is-sticky {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* プラグインが挿入するスペーサーも固定px幅を持つため、狭い幅での
   横スクロール発生を防ぐためビューポート相対幅にする。 */
.sticky-element-placeholder {
    width: 100% !important;
    max-width: 100% !important;
}

/*
 * コンテナ幅を「流動的」にして、1200px 等のブレークポイントでの段差をなくす。
 *
 * 既定では bootstrap.css が .container を width:750/970/1170px（≥768/992/1200）、
 * responsive.css が max-width:625/750/970/1170px と固定値で段階切替するため、
 * 例えば 1200px を境に 970→1170px と幅が「飛ぶ」。
 *
 * これを width:calc(100% - 30px)（＝左右15pxのゆとりを保ちつつビューポートに
 * 連続追従）＋ max-width:1170px（最大幅は従来どおり）に統一し、段差をなくして
 * シームレスに伸縮させる。padding は足さない（bootstrap の row/col の
 * ネガティブマージンと干渉しないよう、幅の縮小＋中央寄せで内側の余白を作る）。
 */
.content,
.container {
    width: calc(100% - 30px) !important;
    max-width: 1170px !important;
}