@charset "UTF-8";

/* =========================================================
   株式会社髙橋造園土木 様 ご提案専用サンプル（型C）
   現在のホームページを「そのまま」写し、スマートフォンで
   崩れないようにするためだけの追加スタイル。
   ※ 必ず現行CSSの「あと」に読み込ませること
   ========================================================= */

:root {
  color-scheme: only light;
}

/* ---------- ご提案専用の注釈 ---------- */

.mihon-note {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  background: #17321f;
  color: #eaf1ec;
  font-family:
    system-ui,
    -apple-system,
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}

.mihon-note p {
  max-width: 900px;
  margin: 0 auto;
  color: #eaf1ec;
  font-size: 14px;
  line-height: 1.7;
}

.mihon-note .l2 {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.mihon-note-foot {
  position: relative;
  z-index: 5;
  clear: both;
  margin-top: 0;
}

/* ---------- どの幅でも安全な最低限 ---------- */

/* ダークモードで背景が黒く反転しないように、白を明示するだけ（見た目は変わらない） */
body {
  background-color: #fff;
}

/* ---------- 画面が狭いときだけ、固定幅をほどく ---------- */

@media screen and (max-width: 940px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  img,
  video,
  iframe,
  object,
  embed {
    max-width: 100%;
  }

  img {
    height: auto;
  }

  body {
    overflow-wrap: break-word;
  }

  html,
  body,
  #hpb-skip,
  #hpb-container,
  #hpb-header,
  #hpb-headerMain,
  #hpb-headerLogo,
  #hpb-headerExtra1,
  #hpb-inner,
  #hpb-wrapper,
  #hpb-title,
  #hpb-main,
  #hpb-aside,
  #hpb-footer,
  #hpb-footerMain,
  #toppage,
  #toppage-topics,
  #banner {
    box-sizing: border-box;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #hpb-inner,
  #hpb-footerMain {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #hpb-header,
  #hpb-title,
  #hpb-wrapper,
  #hpb-container {
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    overflow: visible !important;
  }

  #hpb-header {
    padding: 8px 12px !important;
  }

  #hpb-title h2 {
    height: auto !important;
    text-indent: 0 !important;
    background-image: none !important;
  }

  /* 上端の帯（body背景・高さ354px固定）は、スマホでは header が高くなって位置が合わなくなるため
     いったん外し、同じ色の帯を見出しに直接つけ直す。灰色の区切り線もヘッダーの下へ移す */
  body {
    background-image: none !important;
  }

  #hpb-header {
    background: #fff !important;
    border-bottom: 1px solid #ccc !important;
  }

  #hpb-headerMain {
    background: #8bcd86 !important;
    margin: 0 -12px 6px !important;
    padding: 5px 12px !important;
  }

  #hpb-headerMain h1 {
    color: #fff !important;
    font-size: 13px !important;
  }

  #hpb-headerLogo,
  #hpb-headerExtra1 {
    position: static !important;
    text-align: center !important;
  }

  #hpb-headerExtra1 {
    margin: 6px 0 4px !important;
    padding-top: 0 !important;
  }

  #hpb-headerExtra1 p.tel {
    font-size: 30px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  #hpb-headerExtra1 p.tel span {
    font-size: 15px !important;
    letter-spacing: 0.12em;
  }

  #hpb-headerExtra1 p.address {
    margin-top: 2px !important;
    font-size: 15px !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }

  #hpb-main {
    margin-bottom: 24px !important;
  }

  /* ヘッダーのロゴ（背景画像）を画面幅に合わせて縮める */
  #hpb-headerLogo a {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 400px;
    height: auto !important;
    aspect-ratio: 400 / 75;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
  }

  /* 見出し（背景画像つきの帯）を画面幅に合わせる */
  h1,
  h2,
  h3,
  h4 {
    box-sizing: border-box;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    background-size: cover !important;
  }

  .hpb-layoutset-02 h2 {
    height: auto !important;
    min-height: 44px;
    padding: 6px 0 !important;
  }

  .hpb-layoutset-02 h2 span.ja {
    line-height: 1.5 !important;
    display: inline-block;
    padding: 4px 12px !important;
  }

  /* 横のナビゲーション（サイドの目次） */
  #hpb-nav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    overflow: visible !important;
    border-left: 0 !important;
    margin-bottom: 16px !important;
  }

  #hpb-nav li {
    height: auto !important;
    line-height: 1.5 !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid #ccc !important;
    font-size: 17px !important;
  }

  #hpb-nav li a {
    height: auto !important;
    padding: 14px 16px 14px 27px !important;
    background-position: left center !important;
  }

  #hpb-nav,
  #hpb-nav ul,
  #hpb-nav li,
  #hpb-nav li a,
  #hpb-aside ul,
  #hpb-aside li,
  #banner ul,
  #banner li {
    box-sizing: border-box;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
  }

  #hpb-nav img,
  #hpb-aside img,
  #banner img {
    max-width: 100%;
    height: auto;
  }

  /* 表組みでレイアウトしている箇所をほどく */
  table {
    box-sizing: border-box;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  /* ひな型を使っていない単独ページ（施工例の詳細など）も、幅を画面に合わせる */
  body > table,
  body > div,
  body > center {
    box-sizing: border-box;
    width: auto !important;
    max-width: 100% !important;
  }

  table[width],
  table[style*="width"] {
    width: 100% !important;
  }

  td[width],
  th[width],
  td[style*="width"],
  th[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
  }

  td,
  th {
    box-sizing: border-box;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* 画像を並べている箇所は、はみ出さずに折り返す */
  img[hspace],
  img[align] {
    margin-left: 4px !important;
    margin-right: 4px !important;
    float: none !important;
  }

  /* 第一画面：スライドショーは隠し、中身の帯を縦に並べて出す */
  .hpb-photomotion {
    display: none !important;
  }

  .mihon-banners {
    margin: 0 0 12px;
  }

  .mihon-banners img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 6px;
  }

  .mihon-photomotion-unused {
    width: auto !important;
    max-width: 100% !important;
  }

  .camera_wrap,
  #hpb-slideshow1 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 文字を読める大きさに */
  body,
  td,
  th,
  p,
  li,
  div {
    font-size: 17px;
    line-height: 1.8;
  }

  #hpb-headerMain h1 {
    font-size: 13px !important;
    line-height: 1.5 !important;
    height: auto !important;
  }

  .mihon-note,
  .mihon-note p {
    font-size: 14px;
  }

  /* 横に長い要素は、その中だけで横に動かす（ページ全体は動かさない） */
  .mihon-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ヘッダーのキャッチ文（背景の帯）を折り返す */
  #hpb-headerMain,
  #hpb-headerMain h1 {
    height: auto !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* 横に長い表・図は、画面の幅に合わせて縮める（横スクロールは高齢の施主に伝わらないため） */
  /* 万一 zoom が効かない環境のための保険（その箱の中だけ横に動く） */
  .mihon-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 料金表のように列が多い表は、文字を詰めて折り返す */
  table.mihon-tight td,
  table.mihon-tight th {
    padding: 4px 3px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    word-break: normal;
  }

  /* 電話をかけるボタン（下に固定） */
  .mihon-telbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    box-sizing: border-box;
    width: auto;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: #17321f;
  }

  .mihon-telbar a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 11px 8px;
    background: #c9a227;
    color: #2b2205 !important;
    font-family:
      system-ui,
      -apple-system,
      "Hiragino Sans",
      "Noto Sans JP",
      sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
  }

  .mihon-telbar .lb {
    margin-right: 8px;
  }

  .mihon-telbar .num {
    font-size: 21px;
    letter-spacing: 0.01em;
  }

  body {
    padding-bottom: 96px;
  }
}

@media screen and (min-width: 941px) {
  .mihon-telbar {
    display: none;
  }
}

@media screen and (max-width: 560px) {
  /* 横並びのメニュー画像などは中央に寄せて折り返す */
  #hpb-nav ul,
  #hpb-aside ul {
    padding-left: 0 !important;
  }

  #hpb-nav li,
  #hpb-aside li {
    list-style: none;
  }
}

@media screen and (max-width: 620px) {
  /* 写真が横に並ぶ表を縦に積む */
  table.mihon-stack,
  table.mihon-stack tbody,
  table.mihon-stack tr,
  table.mihon-stack td,
  table.mihon-stack th {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  table.mihon-stack td,
  table.mihon-stack th {
    padding: 8px 4px !important;
    text-align: center !important;
  }

  table.mihon-stack img {
    width: 100% !important;
    max-width: 420px;
    height: auto !important;
    margin: 0 auto !important;
  }
}