/* =========================================================
   SLOT 記事ページ用：モバイル最適化（PCは変更しない）
   対象：#container / #contents / main / section / h2.c / p / img
   目的：タイトル縮小 + 左右余白復活 + 画像のはみ出し防止
========================================================= */
@media (max-width: 768px){

  /* 画面の左右に余白が無い問題を潰す */
  body{
    overflow-x:hidden;
  }
  #container{
    width:100%;
    padding:0;
  }
  #contents{
    width:100%;
    padding:0;
  }

  /* 本文エリアに“スマホ用の左右余白”を作る（見やすさの本丸） */
  main{
    padding: 14px 12px 24px;
  }

  /* セクションが全幅ベタ付きを起こすテンプレが多いので保険 */
  main section{
    margin:0 auto;
    max-width: 720px;
  }

  /* ロゴ周り（必要最低限） */
  header{
    padding: 10px 12px;
  }
  #logo img{
    max-width: 170px;
    height:auto;
    display:block;
  }

  /* ===== タイトルがデカすぎ問題 ===== */
  h2.c{
    margin: 10px 0 14px;
    padding: 10px 10px;
    font-size: 28px;          /* ←デカすぎるのを抑える */
    line-height: 1.15;
    letter-spacing: .02em;
    word-break: break-word;
  }
  h2.c span{
    display:block;
    margin-top: 6px;
    font-size: 12px;          /* Data を小さく */
    opacity:.7;
  }

  /* 年表示とかの p.c も、スマホで整うように */
  p.c{
    margin: 10px 0 12px;
    font-size: 14px;
    line-height: 1.5;
  }

  /* 左寄せ本文の可読性 */
  p[align="left"]{
    margin: 10px 0 16px;
    font-size: 14px;
    line-height: 1.85;
  }

  /* 画像：width=900 でもスマホで必ず収まるようにする */
    main .blur img,
    main p img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }

  /* blur の余計な余白や崩れを抑える */
  .blur{
    margin: 0 0 14px;
  }

  /* 画像が連続するページなので、間隔を統一 */
  .blur + p.c{
    margin-top: 8px;
  }

  /* ハンバーガーが画面端ギリギリで窮屈になりがちなので少し余白 */
  #menubar_hdr{
    right: 10px;
    top: 10px;
  }

  /* メニュー（開いた時）も左右余白を確保 */
  #menubar nav{
    padding: 10px 12px;
  }
  #menubar ul{
    padding: 0;
    margin: 0;
  }
  #menubar li a{
    display:block;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 1.3;
  }
}
/* ===== ヘッダーロゴは本文ルールから除外 ===== */
header #logo {
    text-align: left;
}

    header #logo img {
        max-width: 170px !important; /* ← 2枚目と同等サイズ */
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        display: inline-block;
    }