/* ============================================================
   株式会社操栄造園土木様 スマートフォン対応CSS
   （見本で追加したのは このファイルと mihon.css の2枚だけ）

   既存のデザイン・HTML・画像には手を入れず、
   画面が狭いときだけ表示を組み替える。

   現行サイトは横900px固定で作られているため、
   ・930px以上（パソコン・タブレット横）＝ 現行のデザインをそのまま表示
   ・929px以下（スマホ・タブレット縦）＝ 縦積みに組み替え
   ============================================================ */
@media screen and (max-width: 929px) {
  /* --- 全体：固定幅900pxの解除 --- */
  body {
    padding-bottom: 58px; /* 画面下の電話バーに文章が隠れないように */
  }

  #wrap #container,
  #content,
  #global,
  #flash,
  #header,
  #footer {
    width: auto !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* --- ヘッダー：ロゴと電話の重ね置き（絶対配置）をやめて縦に並べる --- */
  #header {
    height: auto !important;
    padding: 0 12px !important;
    text-align: center;
  }

  #header h1 {
    height: auto !important;
    line-height: 1.5 !important;
    padding: 6px 0;
  }

  /* ロゴは画像を背景で敷いているので、幅に合わせて縮める */
  #header h2 {
    width: 100% !important;
    max-width: 330px;
    height: auto !important;
    aspect-ratio: 330 / 52;
    margin: 0 auto;
    background-size: contain !important;
    background-position: center !important;
  }

  #header h2 a {
    width: 100% !important;
    height: 100% !important;
  }

  #header #tell {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 10px auto 12px;
  }

  /* --- メインの大きな写真 --- */
  #flash {
    height: auto !important;
  }

  #flash img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* --- メニュー：横1列7個 → 折り返し --- */
  /* 項目ごとに画像の切り出し位置を持っているので、折り返しても絵柄は崩れない。
     土台に敷いてある900px幅の背景だけを外す */
  #global {
    height: auto !important;
    background-image: none !important;
    background-color: #f4f2e9;
  }

  #global ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 !important;
  }

  #global li {
    float: none !important;
  }

  /* --- 本文と右カラムを縦積みに --- */
  #content #contentLeft,
  #content #contentRight {
    width: auto !important;
    float: none !important;
    margin: 0 12px 20px !important;
  }

  #content #contentRight {
    margin-top: 20px !important;
  }

  /* --- トップページの丸ボタン5つ：600px固定 → 折り返し --- */
  #content #contentLeft #navi {
    width: auto !important;
    height: auto !important;
  }

  #content #contentLeft #navi ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #content #contentLeft #navi li {
    float: none !important;
  }

  /* --- 本文まわりの600px固定をまとめて解除 --- */
  p#pankuz,
  #content #contentLeft .call,
  #content #contentLeft .box1,
  #company .box1,
  #company table.table01,
  #company table.table02,
  #company table.table01 tr.tr_t,
  #company table.table01 tr.tr_b,
  #company table.table02 tr.tr_t,
  #company table.table02 tr.tr_b,
  #inquiry table.table01,
  #inquiry table.table02 {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
  }

  /* --- 見出しは画像なので、縦横比を保ったまま画面幅に合わせる --- */
  #top h2#h2_01 {
    width: 100% !important;
    max-width: 600px;
    height: auto !important;
    aspect-ratio: 600 / 50;
    background-size: contain !important;
  }

  #company h2#h2_01,
  #inquiry h2#h2_01 {
    width: 100% !important;
    max-width: 600px;
    height: auto !important;
    aspect-ratio: 600 / 173;
    background-size: contain !important;
  }

  /* --- トップの「Message」枠：高さ固定だと文章がはみ出す --- */
  #content #contentLeft .message {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    min-height: 210px;
    background-size: 100% 100% !important;
    padding-bottom: 14px;
    box-sizing: border-box;
  }

  /* --- 表：ラベルと中身を縦積みに（会社概要） --- */
  #company table.table01,
  #company table.table02,
  #company table.table01 tbody,
  #company table.table02 tbody,
  #company table.table01 tr,
  #company table.table02 tr {
    display: block;
    width: 100% !important;
  }

  #company table.table01 th,
  #company table.table02 th,
  #company table.table01 td,
  #company table.table02 td {
    display: block;
    width: auto !important;
    box-sizing: border-box;
    background-size: cover !important;
  }

  /* --- お問い合せの表：縦積みにすると入力欄の組が崩れるので、幅だけ可変にする --- */
  #inquiry table.table01 th,
  #inquiry table.table02 th {
    width: 30% !important;
    background-size: cover !important;
  }

  #inquiry table.table02 td.w_370px,
  #inquiry table.table02 td.w_100px,
  #inquiry table.table02 td.w_90px,
  #inquiry table.table02 td.w_60px,
  #inquiry table.table02 td.w_50px {
    width: auto !important;
  }

  /* --- フッターの850px固定 --- */
  #footer p,
  #footer address {
    width: auto !important;
  }

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

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

  /* --- フッター --- */
  #footer {
    height: auto !important;
    background-size: cover !important;
    padding: 14px 0;
  }

  #footer #boxA {
    width: auto !important;
    padding: 0 12px !important;
  }

  #footer address {
    padding: 0 12px;
    font-size: 11px;
    line-height: 1.7;
  }

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