/* =========================================================
   ブログ調整CSS（2026/09/03 作成）
   目的：ブログのページ（一覧・記事・カテゴリ）に
         確定版のヘッダー／サイドバー／フッターを入れるための、
         ごく小さな上書き。
   ★元の style.css は1行も書き換えていない。ここで上から重ねるだけ。
      困ったときは、このファイルの読み込みを外せば元に戻る。
   ========================================================= */

/* --- 1. 旧ヘッダー用に空けていた上の余白を消す -------------
   旧ヘッダーは position:absolute で浮いていたため、
   #container に padding-top:185px で場所を空けていた。
   確定ヘッダーは流れの中に入る（sticky）ので、この余白は不要。 */
/* ★!important が要る理由（実測して判明・2026/09/03）：
   共通のJS（js/common.js 48行目）が
     $('#container').css('padding-top', $('header').outerHeight());
   でヘッダーの高さぶんの余白を「その場で直接」書き込んでいる。
   旧ヘッダーは浮いていた（position:absolute）ので必要だったが、
   確定ヘッダーは流れの中に入る（sticky）ので、この余白はまるごと余分になる。
   JSは共通ファイルなので触らず、CSS側で打ち消す。 */
#container{ padding-top:0 !important; }

/* --- 2. サイドバーの枠を確定サイドバーの幅（276px）に合わせる ---
   旧：265px。確定サイドバーは276pxなので11px足りず、はみ出していた。 */
#sideBar{ width:276px; }

/* --- 3. ブログのカテゴリー一覧を、確定サイドバーと同じ幅にそろえる --- */
#sideBar .category-widget{ width:276px; box-sizing:border-box; margin-bottom:16px; }

/* =========================================================
   スマホ（768px以下）
   ★ブログには元々スマホ対応が1つも無かった（メディアクエリ0件・viewport無し）。
     確定ヘッダー／フッターをスマホで正しく出すために viewport を入れたので、
     ブログ本文が横にはみ出さないよう、最小限だけ整える。
     PCの見た目は1pxも変えていない。
   ========================================================= */
@media (max-width:768px){

  /* 旧CSSの body{min-width:1280px} を解除。これが横スクロールの元凶。 */
  body{ min-width:0; }

  /* 本文とサイドバーの横並び（flex）を、縦積みにする */
  .mainBox{ display:block; width:auto; max-width:none; padding:0 12px; }
  #conts{ width:auto; margin-left:0; }

  /* 確定サイドバーはスマホでは出さない（フッターの中に入る・全ページ共通ルール）。
     ブログのカテゴリー一覧だけは、記事を探すのに要るので残して横幅いっぱいにする。 */
  #sideBar{ width:auto; padding-bottom:24px; }
  #sideBar .category-widget{ width:auto; }

  /* 画像・表がはみ出さないようにする */
  #conts img{ max-width:100%; height:auto; }
  #conts table{ max-width:100%; }

  /* 記事一覧のカード（画像＋本文の横並び）を縦積みに */
  .news-item{ display:block; }
  .news-image{ width:auto; }
  .news-image img{ width:100%; height:auto; }

  /* 内側の余白を詰める */
  #conts .contsBox,
  #conts .single-contents{ padding:20px 16px; }

  /* --- 月別アーカイブ／タグページ（archive.php）2026/09/06 追加 -------
     ここだけテンプレートが別で、骨格のクラス名が違う
     （.blog-layout / .sidebar / .main-content）。
     そのため上のスマホ指定が1つも届かず、記事本体が画面の外へ
     押し出されていた（375pxで left:330〜right:551 ＝ 全部画面外）。
     やることは「横並びをやめて縦積みにする」だけ。
     ★対象は .blog-layout の直下だけに限定している。
       ブログ一覧側にも .main-content があるので、巻き込まないため。
     ★PCの見た目は1pxも変えない（768px以下だけの指定）。 */

  /* 左右の余白を詰めて、本文の幅をかせぐ */
  .blog-container{ padding:20px 12px; }

  /* 横並び（flex）をやめて縦積みにする ＝ ここが今回の本丸 */
  .blog-layout{ display:block; }

  /* カテゴリー一覧：280px固定をやめて横幅いっぱいに */
  .blog-layout > aside.sidebar{ width:auto; margin-bottom:24px; }

  /* 記事本体：PCの内側余白（45px 41px）はスマホには広すぎるので詰める */
  .blog-layout > main.main-content{ padding:20px 16px; }

  /* 画像がはみ出さないようにする */
  .blog-layout img{ max-width:100%; height:auto; }
}