/* ============================================================
   安中造園様 スマートフォン対応CSS（追加したのはこのファイルだけ）
   既存のデザイン・HTML・画像には一切手を入れず、
   画面幅768px以下のときだけ表示を組み替える
   ============================================================ */
@media screen and (max-width: 768px) {

  /* --- 全体：固定幅の解除 --- */
  body{min-width:0 !important;overflow-x:hidden}
  img{max-width:100%;height:auto}
  #header, #mainwrapper, #wrapper, #container, #copyrights{
    width:auto !important; min-width:0 !important; float:none !important;
  }

  /* --- ヘッダー：絶対配置を解除して縦積みに --- */
  #header{height:auto !important;padding:8px 10px;box-sizing:border-box}
  #header h1{position:static !important;padding:6px 4px;font-size:10px;line-height:1.5}
  /* 社名ロゴ */
  #header > div[style*="float: left"]{float:none !important;margin:4px 0 !important;text-align:center}
  /* お問合せボックス（絶対配置とスクロール追尾を解除して通常の流れに） */
  #rightbox{position:static !important;margin-top:0 !important;width:auto !important;height:auto !important}
  .contactbox{width:auto !important;height:auto !important;text-align:center}
  .contactbox img{max-width:100%;height:auto}
  .contactbox2{display:none !important} /* 中身は現行サイトでも非表示（コメントアウト）のため */

  /* --- メニュー：横1000pxの絶対配置 → 4列の折り返しに --- */
  #header > div[style*="bottom: 5px"]{
    position:static !important;width:auto !important;height:auto !important;
    display:flex;flex-wrap:wrap;margin-top:6px;
  }
  #header > div[style*="bottom: 5px"] > div{
    float:none !important;width:25% !important;box-sizing:border-box;
  }
  #header > div[style*="bottom: 5px"] img{width:100%;height:auto;display:block}

  /* --- ロゴの吹き出し（スライダー重ね）→ スライダー上の小型重ねに --- */
  div[style*="top: 200px"][style*="z-index: 2000"]{
    top:auto !important;left:0 !important;right:0 !important;
    width:170px !important;height:auto !important;
    position:absolute !important;margin:8px auto !important;
  }

  /* --- メインスライダー：JSが幅追従（minWidth:320）のため高さだけ調整 --- */
  .wideslider{height:auto !important;min-height:180px}
  .wideslider ul li img{width:100% !important;height:auto !important}

  /* --- 本文の固定幅ブロックを解除 --- */
  #container div[style]{max-width:100% !important;box-sizing:border-box}

  /* はじめまして：背景画像を上部に全幅表示し、文章はその下に流す */
  div[style*="bg_hazimemasite2"]{
    width:auto !important;height:auto !important;float:none !important;
    background-size:100% auto !important;background-position:top center !important;
    padding:40% 0 10px 0 !important;margin:20px 0 0 0 !important;
  }
  div[style*="bg_hazimemasite2"] div[title]{
    margin:8px 14px !important;width:auto !important;
  }

  /* 年間サポート：同じく背景を上部全幅＋文章は下に */
  div[style*="bg_nenkansapo2"]{
    clear:both;width:auto !important;height:auto !important;float:none !important;
    background-size:100% auto !important;background-position:top center !important;
    padding:38% 0 10px 0 !important;
  }
  div[style*="bg_nenkansapo2"] div[title]{
    margin:8px 14px !important;width:auto !important;
  }

  /* 施工事例の帯画像（純装飾）：縦横比を保って縮小 */
  div[style*="sekouzirei"]{
    width:auto !important;height:0 !important;float:none !important;
    padding:0 0 20.6% 0 !important;margin:20px 0 0 0 !important;
    background-size:contain !important;background-position:center !important;
  }

  /* 「こんな事までやってます」4枚カード（.rect2）：2列に
     ※カードの親はリンク（a）のため、幅はaに与える */
  div[style*="width: 600px"][style*="height: 600px"]{
    width:auto !important;height:auto !important;float:none !important;
    margin:10px 0 0 0 !important;display:flex;flex-wrap:wrap;
  }
  div[style*="width: 600px"][style*="height: 600px"] > a{
    display:block;width:48%;margin:1%;aspect-ratio:269/277;
  }
  .rect2{width:100% !important;height:100% !important;margin:0 !important}

  /* 幅広テキスト・画像ブロック */
  div[style*="line-height: 40px"]{
    width:auto !important;height:auto !important;float:none !important;
    margin:14px 14px 0 14px !important;font-size:15px !important;line-height:1.9 !important;
  }
  div[style*="width: 234px"]{float:none !important;margin:10px auto !important;text-align:center}

  /* 施工事例4枚（.rect）：2列に。高さは縦横比で確保 */
  .rect{width:50% !important;aspect-ratio:627/470;height:auto !important}
  .rect h2{font-size:12px !important}

  /* 施工例一覧ボタン（写真の回り込みを解除してから中央へ） */
  div[style*="width: 250px"][style*="float: right"]{
    clear:both;float:none !important;margin:10px auto !important;
  }

  /* TOPICS見出しなどの単独img はそのまま縮小（img全体ルールで対応） */

  /* --- フッター --- */
  #footer{height:auto !important;padding-bottom:70px}
  #copyrights > div{
    float:none !important;width:auto !important;height:auto !important;
    margin:10px 14px !important;
  }
  #copyrights iframe{width:100% !important;max-width:100%}

  /* --- サブページ（外構エクステリア等）--- */
  .catdesc{padding:12px 10px !important}
  .contenttitle h2{font-size:18px;line-height:1.5;padding:8px 10px;box-sizing:border-box}
  .contentbody2{padding:10px 12px !important}
  /* 表組みレイアウトを縦積みに */
  .contentbody2 table, .contentbody2 tbody, .contentbody2 tr, .contentbody2 td{
    display:block;width:100% !important;box-sizing:border-box;
  }
  .contentbody2 td{padding:0 !important;margin:0 0 16px}
  .contentbody2 img{max-width:100%;height:auto}

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

  /* --- 固定要素の重なり調整 ---
     電話バーが最下部の注釈を隠さないよう余白を確保し、
     「このページのトップへ」は小さな丸ボタンにして上へ退避 */
  body{padding-bottom:56px !important}
  .pagetop{right:10px !important;bottom:160px !important;width:44px !important}
  .pagetop a{
    font-size:0 !important;padding:0 !important;display:block;
    width:44px;height:44px;line-height:44px;text-align:center;
    border-radius:50% !important;
  }
  .pagetop a::before{content:"▲";font-size:16px;color:#fff}
}