@charset "UTF-8";
/* ===================================================================
   responsive.css  --- スマートフォン対応（追加方式）
   ・このファイルは「最後に」読み込む前提
   ・@media (max-width:768px) の中だけで上書き → PC表示(769px以上)は一切不変
   ・既存CSSへの干渉を避けるため、必要な箇所のみ !important で上書き
=================================================================== */

/* JSが生成する要素はPCでは常に非表示（スマホのみ表示） */
#navToggle { display: none; }
#mobileCallBar { display: none; }


/* =============================================================
   ▼ スマホ（768px以下）でのみ適用
============================================================= */
@media screen and (max-width: 768px) {

  /* 横スクロール防止の保険 */
  html, body { max-width: 100%; overflow-x: hidden; }

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

  /* WOW/animate.css のアニメーションはスマホでは無効化（PCは従来どおり）。
     スマホでは余計な演出・位置ずれになり、要素が透明・ずれて見える原因になるため即表示にする */
  .wow,
  .animated {
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transform: none !important;
    transform: none !important;
  }


  /* ---------------------------------------------------------
     ヘッダー
  --------------------------------------------------------- */
  #header { position: relative; }

  #header h1 {
    width: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 11px !important;
    padding: 7px 56px 7px 10px !important;  /* 右はハンバーガー分の余白 */
  }

  #header #hdLogoWrap {
    width: auto !important;
    height: auto !important;
    padding: 10px 56px 10px 10px !important;
  }
  #header #hdLogo {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  #header #hdLogo img { max-width: 220px; width: 70%; }

  /* 右上の「アクセス／サイトマップ」「電話番号画像」は重なるので非表示
     （電話番号・問い合わせはフッターとナビから到達可能） */
  #header #hdSubWrap { display: none !important; }


  /* ---------------------------------------------------------
     グローバルナビ → ハンバーガー開閉メニュー
     （スプライト画像をやめ、<span>のテキストを表示する）
  --------------------------------------------------------- */
  #navToggle {
    display: block;
    position: fixed;          /* 下スクロールしても常に押せるよう固定 */
    top: 8px;
    right: 8px;
    width: 46px;
    height: 42px;
    padding: 9px 8px;
    margin: 0;
    background: #23306b;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    z-index: 10001;
  }
  #navToggle span {
    display: block;
    height: 3px;
    margin: 4px 0;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
  }
  body.nav-open #navToggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open #navToggle span:nth-child(2) { opacity: 0; }
  body.nav-open #navToggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #gNav {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    position: static !important;
    background: transparent;
  }
  /* メニューはフルスクリーンのオーバーレイ。閉時は画面外に隠す */
  #gNav ul#menu {
    position: fixed !important;
    top: 0; bottom: 0; left: 0; right: 0;
    width: auto !important;
    margin: 0 !important;
    background: #23306b;
    z-index: 10000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 56px 0 24px !important;   /* 上はハンバーガー分の余白 */
    transform: translateY(-100%);
    transition: transform .3s ease;
    visibility: hidden;
  }
  body.nav-open #gNav ul#menu {
    transform: translateY(0) !important;
    visibility: visible !important;
  }

  #gNav li,
  #gNav ul#menu li {
    float: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    border-bottom: 1px solid rgba(255,255,255,.18);
  }

  /* スプライト背景・固定サイズを無効化してテキストリンク化（_on も含めて上書き） */
  #gNav li a,
  #gNav li[id^="nav"] a {
    display: block !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    padding: 14px 18px !important;
    text-decoration: none !important;
  }
  #gNav span {
    display: inline !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: bold;
  }
  /* 現在地（_on）は少し濃く */
  #gNav li[id$="_on"] a { background: rgba(255,255,255,.12) !important; }

  /* プルダウン子メニューはスマホでは展開表示にしない */
  #gNav ul#menu li ul.child { display: none !important; }


  /* ---------------------------------------------------------
     共通コンテナ
  --------------------------------------------------------- */
  #contents {
    width: auto !important;
    padding: 15px 12px !important;
    margin: 10px auto !important;
  }
  #contents img { max-width: 100%; height: auto; }

  /* 埋め込みiframe（予約システム等）を画面幅に収める */
  #contents iframe, #main iframe { width: 100% !important; max-width: 100% !important; }


  /* ---------------------------------------------------------
     トップページ：メインビジュアル＋ボタン群
  --------------------------------------------------------- */
  #mainVs {
    height: auto !important;
    padding: 12px 6px !important;
    background-image: none !important;
    background-color: #f2f2f2 !important;
    display: flex;
    flex-wrap: wrap;
  }
  /* 2つの<ul>(5個ずつ)を display:contents で解除し、全10個を1つの2列グリッドに */
  #mainVs ul {
    display: contents;
    width: auto !important;
    margin: 0 !important;
  }
  #mainVs li {
    float: none !important;
    flex: 0 0 50%;
    max-width: 50%;
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box;
    text-align: center;
    /* WOWアニメーションの残留(透明・位置ずれ)をスマホでは無効化して即表示 */
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  #mainVs li img { width: 100%; max-width: 150px; height: auto; }

  .bnr { width: 90% !important; }
  .square_btn { font-size: 18px !important; }


  /* トップページ：トピックス／お知らせ／下部バナー／アクセス */
  #contents #tpMain { float: none !important; width: auto !important; }
  #contents #tpTopics { float: none !important; width: auto !important; margin-bottom: 25px; }
  #contents #tpTopics ul { text-align: center; }
  #contents #tpTopics li { display: inline-block; width: 47%; margin: 1% !important; }
  #contents #tpTopics li img { width: 100%; }

  #contents #tpNews { float: none !important; width: auto !important; height: auto !important; }
  #contents #tpNews .wrap { width: auto !important; height: auto !important; margin: 0 !important; }

  #contents #tpMainBtm { width: auto !important; text-align: center; }
  #contents #tpMainBtm li { float: none !important; display: inline-block; width: 46%; margin: 2% !important; }
  #contents #tpMainBtm li img { width: 100%; }

  #contents #tpAccess { float: none !important; width: auto !important; }
  #contents .accessBox.tp10 { margin-top: 18px; }


  /* ---------------------------------------------------------
     下層ページ：本文(#main)＋サイドナビ(#sideNav)
  --------------------------------------------------------- */
  /* 業務ページ上部の空白の見出し帯(#mainVsN)はスマホでは意味がないので非表示 */
  #mainVsN { display: none !important; }

  /* パンくず：width:980px固定＋float:rightで画面外に切れていたので可変幅に */
  #topicpath { width: auto !important; padding: 0 4px; }
  #topicpath dl { overflow: visible; }

  #contents #main {
    float: none !important;
    width: auto !important;
    box-shadow: none !important;
  }
  /* タイトルバー（確認検査業務 等）を少しだけ太く（高さを増す） */
  #contents #main h2 { height: auto !important; line-height: 1.3 !important; padding: 16px 12px !important; }
  #contents #main h2 span {
    height: auto !important;
    line-height: 1.35 !important;
    font-size: 140% !important;
    padding: 10px 12px !important;
    display: block !important;
  }
  #contents #main .inner {
    padding: 15px !important;
    min-height: 0 !important;
    overflow-x: auto;            /* 幅広の表は横スクロールで対応 */
    -webkit-overflow-scrolling: touch;
  }

  #contents #sideNav {
    float: none !important;
    width: auto !important;
    margin-top: 30px;
  }
  #contents #sideNav .bnrWrap ul { text-align: center; }
  #contents #sideNav .bnrWrap li { display: inline-block; width: 47%; margin: 1%; }

  /* 2カラム(dl.col2)の段組みを縦積みに */
  .col2 dt, .col2 dd,
  .col2Btn dt, .col2Btn dd {
    float: none !important;
    width: auto !important;
  }

  /* タブ切替ナビ(#main #nav)：画像ボタンなので元サイズを保ったまま縦積み・中央寄せ
     （width/heightをautoにすると中身が空[spanは非表示]で潰れて押せなくなるため固定を維持） */
  #main #nav {
    width: auto !important;
    height: auto !important;
    margin: 13px 0 22px !important;
    text-align: center;
  }
  #main #nav li {
    float: none !important;
    display: block !important;
    width: 167px !important;
    height: 42px !important;
    margin: 0 auto 12px !important;   /* タブ同士がくっついて見えないよう少し間隔を確保 */
    background-size: 167px 42px !important;
  }

  /* 表：はみ出しても潰れないように */
  #main table, table.table { max-width: 100%; }
  /* 見出しセルが極端に縦詰まり(「商号」が縦並び等)にならないよう、語の途中で改行しない */
  #main table th { word-break: keep-all; }
  /* セルが極端に潰れて1〜2文字幅で縦読みになるのを防ぐ（住宅性能評価・省エネ等の表対策）。
     収まらない場合は .inner が横スクロールする（JSが「横スクロール」の案内を表示） */
  #main table.table th, #main table.table td { min-width: 4.5em; }
  /* アイコン列(PDF/WORD/EXCEL)は最小幅の対象外（不要な横スクロールを防ぐ） */
  #main table.table th.ico,
  #main table.table td.pdf,
  #main table.table td.word,
  #main table.table td.excel,
  #main table.table td.link { min-width: 0 !important; }

  /* 業務内容(#niy)の情報表：列幅を固定比率にして画面内に収める。
     自動レイアウトだと長い見出しが幅を独占し、右端の値列が細く縦長になるため、
     table-layout:fixed で見出しを折り返し、内容の多い列にも幅を配分する */
  #niy table.table { table-layout: fixed; width: 100% !important; }
  #niy table.table th,
  #niy table.table td {
    min-width: 0 !important;
    word-break: break-all !important;
    white-space: normal !important;
    vertical-align: top;
  }

  /* commission/flow/reserve/download のPDFリスト(.pdfWrap)は
     固定幅2カラム(dt520px float / dd左558pxパディング)で画面外に崩れるため縦積みに */
  #main .pdfWrap { width: auto !important; }
  #main .pdfWrap dt {
    width: auto !important;
    float: none !important;
    height: auto !important;
    padding: 10px 8px 4px 24px !important;
    background-position: 0 12px !important;
  }
  #main .pdfWrap dd {
    width: auto !important;
    padding: 0 8px 12px 24px !important;
    border-bottom: 1px dotted #aaa;
  }

  /* PDF等のリンク（.icoPdf/.icoBlank）は height/line-height が16px固定のため、
     長いリンク名がスマホで折り返すと次の行と重なる → 高さ可変・行間を確保 */
  .icoPdf, .icoBlank {
    height: auto !important;
    line-height: 1.7 !important;
    background-position: 0 3px !important;
    margin-bottom: 8px;
    display: block;
  }

  /* h3 右上の小さな注記(position:absolute)は本文と重なるので通常配置に戻す */
  #main h3 span {
    position: static !important;
    right: auto !important;
    top: auto !important;
    display: block;
    margin-top: 4px;
  }

  /* 2カラム説明(#businessInfo 等)の固定幅を解除 */
  #businessInfo dt { width: auto !important; float: none !important; }
  /* 業務ページ上部の大きい装飾アイコンはスマホでは邪魔なので非表示（PCは従来どおり表示） */
  #businessInfo dd { display: none !important; }
  #index .col2 dt, #index .col2 dd { width: auto !important; }
  .list li { width: auto !important; float: none !important; }


  /* ---------------------------------------------------------
     お問い合わせフォーム（入力欄を画面幅に）
  --------------------------------------------------------- */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    max-width: 100% !important;
    box-sizing: border-box;
  }


  /* ---------------------------------------------------------
     フッター
  --------------------------------------------------------- */
  /* footerの背景画像(ft_bg.gif)は上端から193px固定のため、スマホで縦長になると
     紺色の帯が中途半端な位置に浮く。背景画像を消し、紺帯は#ftPagetopと最下部で作る */
  #footer { height: auto !important; padding: 0 0 18px !important; background-image: none !important; }
  #ftWrap { width: auto !important; padding: 0 12px !important; }

  /* 「このページの上部へ戻る」を紺色の帯にする（上の紺帯） */
  #ftPagetop {
    background: #23306b !important;
    margin: 0 -12px 14px !important;   /* footer左右端まで広げる full-bleed */
    padding: 12px !important;
    text-align: center !important;
  }

  #ftLogoWrap { position: static !important; height: auto !important; text-align: center; }
  #ftLogoWrap:after { content: ""; display: block; clear: both; }  /* float解除 */
  #ftLogoWrap p.ftLogo,
  #ftLogoWrap #ftTel {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    margin: 12px auto !important;
  }

  /* お問い合わせ／職員専用の画像リンクはフッターでは不要なので非表示 */
  #ftLogoWrap p.ftContact { display: none !important; }

  /* 大阪本社・東京本部を 2列横並び に */
  #ftLogoWrap #ftTel {
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
  }
  #ftLogoWrap #ftTel .posL,
  #ftLogoWrap #ftTel .posR {
    float: none !important;
    clear: none !important;
    width: 50% !important;
    box-sizing: border-box;
    background-position: center top !important;  /* 名称画像(大阪本社/東京本部)を上中央に */
    padding-left: 0 !important;
    padding-top: 34px !important;
    margin: 0 !important;
  }
  #ftLogoWrap #ftTel .posL p,
  #ftLogoWrap #ftTel .posR p { text-align: center; }
  #ftLogoWrap #ftTel .posL img,
  #ftLogoWrap #ftTel .posR img { max-width: 100%; height: auto; }
  #ftLogoWrap .add { text-align: center; font-size: 11px; line-height: 1.5; }

  /* 最下部（ナビリンク＋著作権）は白文字のため、暗色の帯にして見えるようにする
     （PCの下部暗色帯を再現。footerの左右端まで広げる full-bleed） */
  #ftBottomNaviWrap,
  #ftWrap > p.copyright {
    display: block !important;
    width: auto !important;
    background: #23306b !important;
    margin: 14px -12px 0 !important;
    padding: 16px 12px !important;
    text-align: center !important;
  }
  #ftBottomNaviWrap #ftNavi { margin-bottom: 10px; }
  /* リンクのタップ領域を広げて押しやすく */
  #ftBottomNaviWrap #ftNavi a {
    color: #fff !important;
    font-size: 13px !important;
    display: inline-block;
    padding: 8px 6px !important;
  }
  #ftBottomNaviWrap #ftNavi span { color: #9fb2d6 !important; }
  /* 帯の中の著作権(トップページ)は二重背景にしない */
  #ftBottomNaviWrap p.copyright { background: none !important; margin: 0 auto !important; padding: 0 !important; }


  /* ---------------------------------------------------------
     画面下「電話する」バー（JSが生成）
  --------------------------------------------------------- */
  body { padding-bottom: 76px; }   /* 電話バーに隠れない＋下部リンクと十分な間隔 */
  #mobileCallBar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10002;
    box-shadow: 0 -2px 6px rgba(0,0,0,.2);
  }
  #mobileCallBar a {
    flex: 1 1 50%;
    text-align: center;
    padding: 8px 4px;
    text-decoration: none;
    color: #fff;
    background: #2e7d32;            /* 発信を連想する緑 */
    line-height: 1.25;
  }
  #mobileCallBar a:first-child {
    background: #1769aa;            /* 大阪本社=青 */
    border-right: 1px solid rgba(255,255,255,.4);
  }
  #mobileCallBar .cbLabel {
    display: block;
    font-size: 10px;
    opacity: .9;
  }
  #mobileCallBar .cbNum {
    display: block;
    font-size: 15px;
    font-weight: bold;
  }
  #mobileCallBar .cbNum:before {
    content: "\260E";              /* ☎ */
    margin-right: 4px;
    font-weight: normal;
  }

  /* タップで拡大できる大きい画像 */
  #main img.zoomable, #contents .center img.zoomable { cursor: zoom-in; }

  /* 横スクロールできる表の案内 */
  .tableScrollHint {
    margin: 0 0 6px !important;
    padding: 4px 8px;
    font-size: 12px;
    color: #1a5fa0;
    background: #eaf2fa;
    border: 1px dashed #9bc0e0;
    border-radius: 4px;
    text-align: center;
  }
}