/* ===== mobile_fit.css (2025-09) =====
   スマホ幅で本文がはみ出す問題を強制的に解消するパッチ。
   既存の fixed 幅や float の影響を上書きします。
*/

/* 画像が横幅をはみ出さない */
img { max-width: 100% !important; height: auto !important; display: block; }

/* 段落や長い英数字（URL等）でのはみ出し対策 */
#main, #sub, p, li, td, th, div {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ベースのパディング（端がくっつかないように） */
body { padding-left: 12px; padding-right: 12px; }

/* スマホ（縦持ち）での強制上書き */
@media (max-width: 768px) {
  /* 固定幅を全面解除して100%に */
  #top, #header, #menu, #contents, #footer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* 2カラムを縦並びに、固定幅とfloat解除 */
  #contents {
    display: block !important;
  }
  #main, #sub {
    width: 100% !important;
    float: none !important;
    display: block !important;
  }

  /* メニューを折り返し可能にしてタップしやすく */
  #menu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  #menu li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: 1 1 50% !important; /* 2列相当 */
    text-align: center !important;
  }
  #menu li a {
    display: block !important;
    padding: 14px 10px !important;
  }

  /* 余白の微調整 */
  #icatch { margin: 8px 0 !important; }
  #main h2, #sub h2 { margin-top: 8px !important; }
}

/* 小型スマホ（〜480px）：メニュー1列に */
@media (max-width: 480px) {
  #menu li { flex: 1 1 100% !important; }
}
/* ===== ハンバーガーメニュー用 ===== */
#menuToggle {
  display: none;
  background: #7B8200;
  color: #fff;
  border: none;
  font-size: 20px;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

@media (max-width: 768px) {
  #menu ul {
    display: none;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #menu li { flex: none; text-align: left; }
  #menuToggle { display: block; }
  #menu ul.is-open { display: flex; }
}