@charset "utf-8";

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

   現行サイトは横842px固定・2カラム（本文610px＋サイド220px）で、
   画面幅に合わせる仕組み（メディアクエリ）が1つもない。
   デザイン・配置・色・文章は変えず、狭い画面のときだけ組み替える。

   ・881px以上（パソコン）＝ 現行のまま
   ・880px以下（スマホ・タブレット）＝ 画面幅に合わせて縦積みに
   ============================================================ */
@media screen and (max-width: 880px) {
  /* --- 全体：固定幅842pxの解除 --- */
  body {
    padding-bottom: 58px; /* 画面下の電話バーに文章が隠れないように */
  }

  #wrapper,
  #container,
  #contents,
  #header,
  #footer,
  #bottom {
    width: auto !important;
  }

  #contents {
    margin-left: 0 !important;
  }

  /* 2カラムの区切り線（縦に伸びる背景画像）は、縦積みでは不要 */
  #container {
    background: none !important;
  }

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

  /* --- ヘッダー：842×135の1枚画像を、比率のまま画面幅に合わせる ---
     文字もボタンも画像の中に描かれているため、
     画像を縮めたうえで、透明なリンク領域を同じ割合で置き直す。
     （位置はパソコン表示を実測して%に直したもの） */
  /* ヘッダーは画像の比率だけの箱にする（リンク位置の基準をぶらさないため）。
     会社の一言は、その箱の上にはみ出させて置く。 */
  #wrapper {
    padding-top: 24px;
  }

  #header {
    position: relative;
    height: 0 !important;
    padding-top: 16.03%; /* 135 ÷ 842 */
    background-size: 100% auto !important;
  }

  #header h1 {
    position: absolute;
    left: 12px;
    right: 12px;
    top: -22px;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
  }

  /* 透明なリンク領域。パソコン表示を実測した割合をそのまま使う */
  #header a.left {
    position: absolute;
    left: 2.7%; /* 1.78% × 1.52 */
    top: 6.7%; /* 画像を1.52倍にした分の位置合わせ */
    width: 41.5%; /* 27.32% × 1.52 */
    height: 14.5%;
    margin: 0 !important;
    line-height: 0;
    overflow: hidden;
  }

  #header .right li a {
    position: absolute;
    top: 48.15%;
    height: 17.04% !important;
    margin: 0 !important;
    line-height: 0; /* 中の文字の行送りで箱が膨らむのを防ぐ */
    overflow: hidden;
  }

  #header .right {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100%; /* これが無いと、中のリンクの%指定が計算できずズレる */
    margin: 0 !important;
  }

  #header .right li {
    float: none !important;
  }

  #header .right li a.bt1 {
    left: 59.03%;
    width: 10.69% !important;
  }

  #header .right li a.bt2 {
    left: 71.38%;
    width: 8.67% !important;
  }

  #header .right li a.bt3 {
    left: 81.71%;
    width: 16.03% !important;
  }

  /* --- 2カラム（本文610px＋サイド220px）を縦積みに --- */
  #main,
  #side {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #main {
    padding: 0 12px;
  }

  #side {
    padding: 0 12px 10px;
  }

  /* --- 中身の固定幅をまとめて解除 ---
     現行は本文の内側にも 590px・533px などの固定幅が入っている。
     狭い画面でははみ出すので、画面幅を超えないようにする。 */
  #main .inner,
  #side .inner {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hr1 {
    width: auto !important;
  }

  #main *,
  #side * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 写真と文章の左右の回り込みは、狭い画面では解除して縦に並べる */
  #main .left,
  #main .right,
  #side .left,
  #side .right {
    float: none !important;
  }

  /* --- あいさつ文の枠（高さ46px固定）---
     文字を大きくすると行数が増えて、枠から溢れて切れてしまう。高さを自動にする。 */
  #para1 {
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    background-size: 100% 100% !important;
    padding: 10px 12px;
  }

  #para1 p {
    margin-top: 0 !important;
    text-align: left;
  }

  /* --- 法人／個人の2枚のカード（290×210の1枚画像）---
     文字はすべて画像の中に描かれている（HTMLの文章は読み上げ用に隠してある）。
     ヘッダーと同じく、比率のまま縮めてリンク領域を割合で置き直す。
     ※ここで隠し文字を表示させると、画像の文字と二重になるので触らない。 */
  #para2 {
    width: auto !important;
    margin-left: 0 !important;
  }

  #para2 .left,
  #para2 .right {
    position: relative;
    float: none !important;
    width: auto !important;
    max-width: 340px;
    height: 0 !important;
    padding-top: 72.41%; /* 210 ÷ 290 */
    background-size: 100% auto !important;
    margin: 0 auto 16px !important;
  }

  #para2 .left a.bt1,
  #para2 .right a.bt1,
  #para2 .left a.bt2,
  #para2 .right a.bt2 {
    width: 43.1% !important; /* 125 ÷ 290 */
    height: 13.33% !important; /* 28 ÷ 210 */
    bottom: 6.19% !important; /* 13 ÷ 210 */
  }

  #para2 .left a.bt1,
  #para2 .right a.bt1 {
    left: 4.48% !important; /* 13 ÷ 290 */
  }

  #para2 .left a.bt2,
  #para2 .right a.bt2 {
    left: 52.41% !important; /* 152 ÷ 290 */
  }

  /* --- 本文中のバナー（590×120の1枚画像＋透明なリンク領域）---
     ヘッダーと同じ作り。比率のまま縮め、リンク領域も同じ割合で置き直す。 */
  #individual_banner,
  #item_banner {
    position: relative;
    width: auto !important;
    height: 0 !important;
    padding-top: 20.34%; /* 120 ÷ 590 */
    background-size: 100% auto !important;
  }

  #individual_banner a,
  #item_banner a {
    position: absolute;
    left: 54.24%; /* 320 ÷ 590 */
    top: 41.67%; /* 50 ÷ 120 */
    width: 42.37% !important; /* 250 ÷ 590 */
    height: 33.33% !important; /* 40 ÷ 120 */
    margin: 0 !important;
  }

  /* --- 下部の帯（815×62）---
     この帯は飾りではなく、「会社案内」ボタンと本社・営業所の住所／電話が入っている。
     帯の画像には文字が焼き込まれているため、狭い画面でそのまま重ねると読めない。
     スマホでは画像をやめ、同じ色の背景に文字を置き直す（内容は変えない）。 */
  #bottom {
    height: auto !important;
    min-height: 0 !important;
    background-image: none !important;
    background-color: #dddddd !important;
    padding: 12px !important;
    position: static !important;
  }

  #bottom a.left {
    /* 画像で表していた「会社案内」を、文字として出す */
    display: block !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 8px !important;
    text-indent: 0 !important;
    font-size: 16px !important;
    font-weight: bold;
    color: #303030 !important;
  }

  #bottom div.left,
  #bottom div.right,
  #bottom p {
    float: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
  }

  #bottom span {
    color: #a7a7a7;
  }

  /* --- フッター（842×91）---
     ここもリンクと著作権表記が入っている。帯の画像に重ねると読めないため、
     スマホでは画像をやめ、下側の緑を背景色として引き継ぐ。 */
  #footer {
    height: auto !important;
    background-image: none !important;
    background-color: #ffffff !important;
    border-bottom: 6px solid rgb(96, 179, 0);
    padding: 10px 12px 12px !important;
    position: static !important;
    overflow: visible !important;
  }

  #foot {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
  }

  #foot .left,
  #foot .right,
  #foot p {
    float: none !important;
    width: auto !important;
    margin: 0 0 6px !important;
    line-height: 2 !important;
  }

  #foot .right {
    text-align: right;
  }

  /* --- 文字：現行は本文12px（一部10px）。手に持つ画面では小さい --- */
  #main,
  #main p,
  #main li,
  #main dd,
  #main dt,
  #main td,
  #main th,
  #side,
  #side p,
  #side li {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

  /* サイドバー（新着情報の表など）が10pxで小さい */
  #side *,
  #side td,
  #side th,
  #side span,
  #side a {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* フッターの表記 */
  #foot,
  #foot * {
    font-size: 12px !important;
  }

  /* 緑の下線つき見出し。箱の高さが文字より低く、線が文字を横切っていた */
  #main strong.deco1,
  #main .deco1 {
    display: block;
    font-size: 16px !important;
    line-height: 1.6 !important;
    height: auto !important;
    padding-bottom: 5px;
    margin-bottom: 8px;
  }

  #main .txt_c,
  #main .caption,
  #main small {
    font-size: 14px !important;
  }

  /* --- 見出しを「画像」から「本物の文字」に入れ替える ---
     現行は見出しが画像なので、縮めると小さくて読めない。
     画像の説明文（alt）を文字として出し、画像のほうを隠す。
     文言は画像に書かれているものと同じ。 */
  #main h2 img.pc-only,
  #main h3 img.pc-only,
  #main h4 img.pc-only,
  #main h5 img.pc-only,
  #side h2 img.pc-only,
  #side h3 img.pc-only {
    display: none !important;
  }

  .sp-heading {
    display: block !important;
    color: #303030;
    font-weight: bold;
    line-height: 1.5;
    background: #f2f8e4;
    border-left: 6px solid rgb(96, 179, 0);
    padding: 10px 12px;
    margin: 0 0 12px;
  }

  #main h2 .sp-heading {
    font-size: 22px;
  }

  #main h3 .sp-heading {
    font-size: 20px;
  }

  #main h4 .sp-heading,
  #main h5 .sp-heading {
    font-size: 18px;
  }

  #side .sp-heading {
    font-size: 17px;
  }

  /* --- 施工管理の図：横並び1枚 → 縦並び2枚に差し替え --- */
  #main img.pc-only {
    display: none !important;
  }

  #main .sp-split {
    display: block !important;
  }

  #main .sp-split img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto 12px;
  }

  /* --- 表：画面幅に収める --- */
  #main table,
  #side table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  #main table td,
  #main table th {
    width: auto !important;
    word-break: break-word;
    white-space: normal !important;
  }

  /* --- 施工実績：290pxの写真を並べる（引き伸ばさない） --- */
  #main .left,
  #main .right {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
  }

  #main .left img,
  #main .right img {
    max-width: 290px;
    width: 100%;
    height: auto;
  }

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

  /* 郵便番号・電話番号のように、細かく分かれた入力欄は横に並べる */
  #main input.mini,
  #main input[size="4"],
  #main input[size="5"],
  #main input[size="6"] {
    width: 30% !important;
    display: inline-block;
  }

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

  /* --- スマホ用：タップで電話（見本で追加した導線） --- */
  .sp-call {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    /* 提案注釈（濃紺）とすぐ隣り合うので、このサイトの緑にして見分けをつける */
    background: rgb(45, 100, 0) !important;
    color: #ffffff !important;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
    padding: 13px 8px;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.25);
  }
}