/* ============================================================
   株式会社奥富電気工事様 スマートフォン対応CSS
   （見本で追加したのはこのファイルとmihon.cssだけ）
   既存のデザイン・HTML・画像には手を入れず、
   画面幅768px以下のときだけ表示を組み替える
   ============================================================ */
@media screen and (max-width: 768px) {

  /* --- 全体：固定幅910pxの解除 --- */
  body {
    background-size: auto 140px;
    padding-bottom: 56px !important;
  }

  #wrapper {
    width: auto !important;
    padding: 0 10px !important;
  }

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

  /* --- ヘッダー：ロゴの下に電話番号の帯を置く --- */
  /* 電話番号は背景画像(header.png)なので、右上ではなく下に回して重なりを防ぐ */
  #header {
    height: auto !important;
    background-position: center bottom !important;
    padding-bottom: 84px;
    text-align: center;
  }

  #header h1 {
    font-size: 11px;
    line-height: 1.6;
    text-align: left;
    padding: 8px 0 6px;
  }

  /* --- トップナビ：横1列7個 → 3列の折り返しに --- */
  ul#topnav {
    width: auto !important;
    height: auto !important;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
  }

  ul#topnav li {
    float: none !important;
    width: 33.333% !important;
  }

  ul#topnav a {
    width: auto !important;
    height: auto !important;
  }

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

  /* --- 2カラム（メイン618px＋サイド265px）を縦積みに --- */
  #main,
  #sidebar {
    float: none !important;
    width: auto !important;
    display: block !important;
    padding: 10px 0;
  }

  /* --- 見出し：背景画像の幅が618px固定なので伸縮させる --- */
  #main h2 {
    background-size: cover !important;
    line-height: 1.5;
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  #main h3 {
    background-size: auto 100%;
    line-height: 1.5;
    padding: 4px 0 8px 15px;
  }

  #sidebar h3 {
    background-size: cover !important;
    line-height: 1.5;
    padding: 10px 10px 10px 33px;
  }

  #main p {
    padding: 10px 12px;
  }

  /* 文章と画像の回り込み（598px固定）を解除 */
  #main p.withImage {
    width: auto !important;
    margin: 12px 0 !important;
  }

  #main p.withImage img {
    float: none !important;
    display: block;
    margin: 10px auto !important;
  }

  /* 回り込み指定の画像は中央に置き直す（狭い画面で文章が痩せるのを防ぐ） */
  #main img[style*="float"],
  #main img.alignright,
  #main img.alignleft {
    float: none !important;
    display: block;
    margin: 12px auto !important;
  }

  /* バナー画像の並び：3列 → 縦積み（中央そろえ） */
  #main .bannerM {
    text-align: center;
  }

  #main .bannerM img {
    padding-right: 0;
    padding-bottom: 10px;
  }

  /* フッター側の3枚組（取り扱いメーカー等） */
  .box img.box_img,
  .pbox img.pbox_img {
    display: block;
    margin: 0 auto 8px;
  }

  /* --- メインスライダー：910×200を画面幅に追従させる --- */
  #meteor-slideshow,
  .meteor-slides {
    width: 100% !important;
    height: auto !important;
  }

  .meteor-clip {
    position: relative;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 21.98% !important; /* 910:200の比率を保つ */
    overflow: hidden;
  }

  .meteor-clip .mslide {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }

  .mslide img,
  .meteor-shim {
    width: 100% !important;
    height: auto !important;
  }

  /* --- 会社概要の表：ラベルと中身を縦積みに --- */
  .ta1 {
    width: 100% !important;
  }

  .ta1 > tbody > tr,
  .ta1 > tbody > tr > td {
    display: block;
    width: auto !important;
    box-sizing: border-box;
  }

  /* 沿革は「年号｜出来事」の対応が崩れるため2列のまま幅だけ調整 */
  .ta1 .td1 table {
    width: 100% !important;
  }

  .ta1 .td1 table td:first-child {
    width: 42% !important;
    white-space: nowrap;
  }

  .ta1 .td1 table td + td {
    width: 58% !important;
  }

  .ta1 .td1 table td {
    display: table-cell !important;
    vertical-align: top;
  }

  /* 出来事が2行になっても年号とずれないよう、1項目の高さをそろえる */
  .ta1 .td1 table {
    font-size: 13px;
  }

  .ta1 .td1 table li {
    min-height: 2.6em;
    line-height: 1.3;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* --- お問い合わせフォーム：入力欄を画面幅に --- */
  #main input[type="text"],
  #main input[type="email"],
  #main input[type="tel"],
  #main textarea,
  #main select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 18px; /* 16px以上でiPhoneのタップ時自動ズームも防げる */
    padding: 8px;
  }

  #main input[type="submit"] {
    width: 100%;
    font-size: 18px;
    padding: 12px;
  }

  /* --- ボタン --- */
  p.button a {
    margin: 0 !important;
    background-size: cover;
  }

  /* --- フッター --- */
  .box,
  .pbox {
    float: none !important;
    width: auto !important;
    margin: 14px 0 !important;
  }

  #footer #logo {
    float: none !important;
    width: auto !important;
    text-align: center;
  }

  address {
    font-size: 11px;
    line-height: 1.6;
  }

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