/* ============================================================
   株式会社野川造園様 スマートフォン表示の改善CSS
   （見本で追加したのは このファイルと mihon.css の2枚だけ）

   現行サイトはスマホ対応そのものは入っている（レスポンシブのテーマ）。
   デザイン・配置・色は一切変えず、
   「スマホで読みにくい」原因だけをつぶす。

   ・640px以下（スマホ）＝ 文字の大きさを読める大きさに直す
   ・641px以上（タブレット・パソコン）＝ 現行のまま
   ============================================================ */
@media only screen and (max-width: 640px) {
  /* --- 直し③ 本文が12pxで小さい ---
     現行は body に 12px が指定されていて、スマホでもそのまま12pxで出る。
     紙に印刷するなら十分だが、手に持つ画面では小さい。15pxに上げる。 */
  body {
    font-size: 15px;
    line-height: 1.7;
  }

  #contents p,
  #contents li,
  #contents dd,
  #contents dt,
  #contents td,
  #contents th,
  #contents span,
  #contents strong,
  #contents a,
  #wrapper p,
  #wrapper li,
  #wrapper dd,
  #wrapper dt,
  #wrapper td,
  #wrapper th {
    font-size: 15px;
    line-height: 1.7;
  }

  /* --- 直し④ 見出しが本文より小さい（9.6px）---
     現行は見出しに 80% の指定があり、12px × 80% = 9.6px になっていた。
     見出しが本文より小さいという逆転が起きているので、順番どおりに戻す。
     ※メイン写真に重ねているキャッチ（.slogan）だけは対象外にする。
       ここを大きくすると写真を覆ってしまうため（下で別に指定）。 */
  #wrapper h2:not(.slogan h2),
  #contents h2 {
    font-size: 19px;
    line-height: 1.5;
  }

  #wrapper h3:not(.slogan h3),
  #contents h3 {
    font-size: 17px;
    line-height: 1.5;
  }

  /* --- メイン写真のキャッチ ---
     現行は写真の上に重ねていて、文字は9.6px。
     小さい画面では「読める大きさにすると写真が隠れる」「写真を見せると読めない」の
     どちらかになってしまうので、スマホのときだけ写真の下に置く。
     写真は100%見えるようになり、文字も読める大きさにできる。
     （パソコンでは今までどおり写真の上に重ねたまま） */
  #mainBanner .slogan {
    position: static !important;
    max-width: none;
    margin: 0;
    padding: 8px 10px 10px;
  }

  #mainBanner .slogan h2 {
    font-size: 16px !important;
    line-height: 1.4;
    padding-bottom: 3px;
  }

  #mainBanner .slogan h3 {
    font-size: 13px !important;
    line-height: 1.5;
  }

  #wrapper h4,
  #contents h4 {
    font-size: 16px;
    line-height: 1.5;
  }

  /* 小さすぎるリンク・注記を底上げ（12px未満をなくす） */
  #wrapper a,
  #footer a,
  #footer li,
  #footer p,
  #slogan p,
  #header p {
    font-size: 14px;
  }

  /* --- ヘッダー：社名と電話番号を中央に、ゆったり --- */
  #header {
    text-align: center;
  }

  #header .logo {
    float: none !important;
    padding: 12px 0 6px !important;
  }

  #header .tel,
  #header .info {
    float: none !important;
    text-align: center;
  }

  /* 電話番号は現行でも大きく出ているので、そのまま活かす */
  #header strong {
    font-size: 22px;
  }

  /* --- メニュー：現行の開閉式をそのまま使う。文字だけ読める大きさに --- */
  nav#mainNav a.menu {
    font-size: 16px;
  }

  nav#mainNav .panel li a {
    font-size: 15px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* --- 画像がはみ出さないように --- */
  #wrapper img,
  #contents img {
    max-width: 100%;
    height: auto;
  }

  /* --- 表：画面幅に収める ---
     料金表は各セルに width:407px / 136px が直接書き込まれていて、
     合計543pxとなりスマホの画面からはみ出す。スマホのときだけ解除して割合で並べる。
     （パソコンでは現行の数値のまま） */
  #wrapper table,
  #contents table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  #wrapper table td,
  #wrapper table th,
  #contents table td,
  #contents table th {
    width: auto !important;
    word-break: break-word;
    /* 現行は見出しセルに「折り返さない」指定があり、
       画面幅に収めると「剪定（樹木の形を整えたり…）」の後ろが切れる。
       スマホのときだけ折り返せるようにする */
    white-space: normal !important;
  }

  #wrapper table tr > td:first-child,
  #contents table tr > td:first-child {
    width: 58% !important;
  }

  #wrapper table tr > td:first-child + td,
  #contents table tr > td:first-child + td {
    width: 42% !important;
  }

  /* --- お問い合わせフォーム：入力欄を画面幅に --- */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* 16px以上にすると、iPhoneでタップしたときの勝手な拡大を防げる */
    padding: 6px;
  }

  input[type="submit"],
  input[type="button"] {
    font-size: 16px;
    padding: 10px 18px;
  }

  /* --- 画面下の電話バーに文章が隠れないように --- */
  body {
    padding-bottom: 58px;
  }

  /* --- スマホ用：タップで電話（見本で追加した導線） --- */
  .sp-call {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background: #4a7a1f;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 13px 8px;
  }
}