/*
  このファイルは、既存の style.css に追加して表示を調整するためのものです。
  ここでの変更は、主に画面幅が768px以下（スマートフォン）のときだけ有効です。
  数値を変える場合は、変更前のファイルを別名で保存しておくと元に戻せます。
*/

/* ===== PC・スマホ共通：画像が画面からはみ出さないようにする設定 ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img, iframe { max-width: 100%; height: auto; }
.service-area { font-size: 100%; }
.mobile-only-bottom-info { display: none; }
.mobile-last-block { display: none; }

/* ===== PC表示（画面幅769px以上）のみ ===== */
@media screen and (min-width: 769px) {
  /* ヘッダーと、その直後のメニューとの間隔 */
  #header { margin-bottom: 1em; }
}

/*
  ===== スマホ表示（画面幅768px以下）のみ =====
  PC版のレイアウトには影響しません。
*/
@media screen and (max-width: 768px) {
  /* ページ全体：横スクロールを防ぎ、文字を読みやすい大きさ・行間にする */
  body { min-width: 0; margin: 0; font-size: 16px; line-height: 1.75; text-align: left; overflow-x: hidden; }

  /* ページ全体の左右余白。12pxを変えると左右の空きが変わります */
  #container { display: flex; flex-wrap: wrap; width: 100%; max-width: none; margin: 0; padding: 0 12px; }

  /* 旧式ヘッダー用の設定（下の「スマホ用画像ヘッダー」で上書きされます） */
  #header { order: 0; display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 8px 12px; height: auto; min-height: 0; padding: 8px 0 14px; background: none; }
  #header h1 { position: static; order: -1; width: 100%; height: auto; margin: 0; font-size: 12px; line-height: 1.5; text-align: left; }
  #header #logo, #header #oisogi, #header #lala { position: static; max-width: 100%; height: auto; }
  #header #logo { width: min(58vw, 259px); }
  #header #oisogi { width: min(37vw, 420px); }
  #header #lala { width: min(37vw, 300px); }

  /* スマホ用ヘッダー：images/main.jpg を表示し、PC用ロゴなどは隠す */
  #header { display: block; aspect-ratio: 700 / 164; height: auto; margin-bottom: 1em; padding: 0; background: url("images/main.jpg") center / 100% 100% no-repeat; }
  #header > a, #header #logo, #header #oisogi, #header #lala { display: none; }
  #header h1 { display: none !important; }

  /* 本文とメニューを横並びではなく縦に並べ、メニューを本文より先に表示する */
  #main, #sub { float: none; width: 100%; }
  #main { order: 2; line-height: 1.75; }
  #main.mobile-info-reorder .mobile-bottom-info, #main.mobile-info-reorder .mobile-bottom-info + br { display: none; }

  /* 本文内の見出し・段落・表をスマホ幅に合わせる */
  #main h1 { width: auto; height: auto; font-size: 1.25rem; line-height: 1.45; }
  #main h2 { padding: 7px 10px; font-size: 1.08rem; line-height: 1.55; background-size: cover; }
  #main p { padding: .5em 0; }
  #main .new, #main .new dl, #main .new dt, #main .new dd { width: 100%; height: auto; float: none; }
  #main .new { overflow: visible; padding: 0; }
  #main table, #main tbody, #main tr, #main td, #main th { display: block; width: 100% !important; max-width: 100%; }
  #main td, #main th { padding: 8px !important; }
  #main table { margin: 0 0 12px; }
  #main .ta1, #main .ta1 td, #main .ta1 th { width: 100% !important; }
  #main font[size='5'] { font-size: 1.2rem; }

  /* 上部に表示する8個のメニューボタン。2列で中央に並べる */
  #sub { order: 1; margin: 0; }
  .mobile-only-bottom-info { display: none; }
  ul.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  ul.menu li { width: 42%; margin: 0; }
  ul.menu li a { display: block; }
  ul.menu img { display: block; width: 100%; height: auto; }
  ul.menu br { display: none; }
  ul.submenu li a { width: 100%; }

  /* 通常フッターはスマホでは隠し、必要な情報は mobile-last-block 側に表示する */
  #footer { display: none; }
  .mobile-last-block { display: block; margin: 28px 12px 18px; text-align: center; font-size: .82rem; line-height: 1.6; }
  .mobile-last-block h1 { margin: 10px 0; font-size: 1.25rem; line-height: 1.45; }
}

/* ===== 小さいスマホ（幅420px以下）だけの微調整 ===== */
@media screen and (max-width: 420px) {
  #container { padding: 0 8px; }
  #header #logo { width: 100%; max-width: 259px; }
  #header #oisogi, #header #lala { width: 100%; max-width: 300px; }
  ul.menu li { width: 42%; }
  #main h1 { font-size: 1.15rem; }
}


/*
  ===== スマホだけ：メニューボタンの下の電話案内 =====
  HTML側の class="mobile-call-now" に対する設定です。
  PCでは非表示、スマホでは中央に表示します。
*/
.mobile-call-now { display: none; }
@media screen and (max-width: 768px) {
  /* ボタンの直後は1行、電話案内の後は本文まで1行の間隔にする */
  ul.menu { margin-bottom: 0; }
  /* HTML内に残っている改行タグをスマホでは表示せず、余白が増えるのを防ぐ */
  #sub > br { display: none; }
  /* margin の「1em」は文字1行分の余白。前がボタン側、後ろが本文側です */
  .mobile-call-now { display: block; width: 100%; margin: 1em 0 1em; clear: both; text-align: center; font-size: 1.1rem; font-weight: bold; }
  .mobile-call-now a { color: #ac3608; }
}