@charset "utf-8";
/* ===========================================================
   スマホ表示補正（PC版HTMLをそのまま端末幅に収める）
   2026-09 追加 / 568px以下でのみ効く。PC表示には影響しません
   =========================================================== */
@media screen and (max-width: 568px) {

  /* 画像は枠内に収める */
  #hpb-main img,
  #hpb-footer img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 固定px幅のテーブルを画面幅に合わせる */
  #hpb-main table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #hpb-main th,
  #hpb-main td {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    word-break: break-word;
  }

  /* 固定px幅のブロック要素（div/p/span）を画面幅に合わせる */
  #hpb-main div,
  #hpb-main p,
  #hpb-main iframe,
  #hpb-main object,
  #hpb-main embed {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 本文の文字サイズが150%〜200%指定で大きすぎる箇所を抑える */
  #hpb-main {
    overflow-wrap: break-word;
  }

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

  /* 入力欄のある行は「項目名の下に入力欄」の縦積みにする */
  #hpb-main tr:has(input):not(:has(input[type="hidden"]:only-child)),
  #hpb-main tr:has(textarea),
  #hpb-main tr:has(select) { display: block !important; }
  #hpb-main tr:has(input) > th,
  #hpb-main tr:has(input) > td,
  #hpb-main tr:has(textarea) > th,
  #hpb-main tr:has(textarea) > td,
  #hpb-main tr:has(select) > th,
  #hpb-main tr:has(select) > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }


  /* --- トップページのスライドショー ---
     高さが280px固定で、スマホでは画像(980x250)が高さ92pxに縮むため
     上下に約190pxの余白が出る。画像の縦横比に合わせて帯を縮める      */
  #hpb-slideshow1,
  #hpb-slideshow1 .camera_fakehover,
  #hpb-slideshow1 .camera_target,
  #hpb-slideshow1 .cameraCont,
  #hpb-slideshow1 .cameraSlide,
  #hpb-slideshow1 .camerarelative,
  #hpb-slideshow1 .camera_overlayer {
    height: 24.5vw !important;   /* 幅の約1/3.92 = 画像の縦横比 */
  }
  #hpb-slideshow1 .cameraSlide img {
    margin-top: 0 !important;
  }

  /* --- トップページのタイトル帯 ---
     スマホ用トップ画像(top_mainimg_01_1R.png)が存在しないため
     160pxの空白になっている。スライドショーがすぐ上にあるので隠す   */
  .hpb-layoutset-01 #hpb-title {
    display: none !important;
  }


  /* --- スマホのヘッダー背景の水色をやめて白にする --- */
  .hpb-layoutset-01 #hpb-header,
  .hpb-layoutset-02 #hpb-header {
    background-color: #ffffff !important;
    padding-bottom: 0 !important;
  }


  /* --- メニューボタンを指で押しやすい大きさに（27x20 → 44x44） --- */
  #hpb-nav h3.hpb-c-index {
    width: 44px !important;
    height: 44px !important;
    background-position: left center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }


  /* --- 写真が並ぶ表：列幅を均等にして写真の大きさを揃える ---
     1枚ごとに固定px（205x153・244x212など）が入っていて
     スマホでは大きさがバラバラになるため、列幅いっぱいに統一する   */
  #hpb-main table:has(> tbody > tr > th > img),
  #hpb-main table:has(> tbody > tr > td > img) {
    table-layout: fixed !important;
  }
  #hpb-main th > img,
  #hpb-main td > img {
    width: 100% !important;
    height: auto !important;
  }


  /* ページ送り（＜前へ 1 2 3 … 次へ＞）が数pxはみ出すのを防ぐ
     区切りが nbsp で連結されていて改行できないため、少しだけ縮める */
  #hpb-main #toppage-news b,
  #hpb-main #toppage-news b span {
    font-size: 90% !important;
  }


  /* --- 写真を1枚ずつ縦に並べる（sp-stack.js が組み替えたセル） --- */
  #hpb-main .sp-stack-cell {
    text-align: left !important;
    padding-right: 0 !important;
    vertical-align: top !important;
  }
  #hpb-main .sp-stack-cell img {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #hpb-main .sp-stack-name {
    margin-top: 4px;
    font-weight: bold;
  }
  #hpb-main .sp-stack-desc {
    margin-top: 4px;
    margin-bottom: 20px;
  }


  /* --- 「試験の種類／試験項目」の表：スマホでは種類を見出しにして縦に積む --- */
  #hpb-main table.ctec-spec tr:first-child {
    display: none !important;          /* 見出し行（種類／項目）は隠す */
  }
  #hpb-main table.ctec-spec tr {
    display: block !important;
  }
  #hpb-main table.ctec-spec td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }
  #hpb-main table.ctec-spec td:first-child {
    background-color: #e3ffff;
    font-weight: bold;
    padding-left: 4px !important;
  }


  /* --- 会社案内スタイルの写真（1項目1枚）はスマホでは全幅 --- */
  #hpb-main img.ctec-photo {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
  }

}


/* ===========================================================
   タブレット・小さめのPCウィンドウ補正（569〜979px）
   2026-09-10 追加
   PC用レイアウトは980px固定幅のため、それより狭い窓では
   横スクロールが出ていた。HPBの1カラム表示（境目を979pxに変更）
   と組み合わせて、はみ出しだけを止める。
   写真の全幅化や表の縦積みはスマホ専用のままにして、
   この幅では写真を引き伸ばさない（画質が落ちるため）。
   =========================================================== */
@media screen and (min-width: 569px) and (max-width: 979px) {

  /* 画像は枠内に収める（拡大はしない） */
  #hpb-main img,
  #hpb-footer img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 固定px幅のテーブルを画面幅に合わせる */
  #hpb-main table {
    max-width: 100% !important;
    table-layout: auto !important;
  }
  #hpb-main th,
  #hpb-main td {
    max-width: 100% !important;
    word-break: break-word;
  }

  /* 固定px幅のブロック要素を画面幅に合わせる */
  #hpb-main div,
  #hpb-main p,
  #hpb-main iframe,
  #hpb-main object,
  #hpb-main embed {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #hpb-main {
    overflow-wrap: break-word;
  }

  /* 入力フォームを画面幅に収める */
  #hpb-main input[type="text"],
  #hpb-main input[type="email"],
  #hpb-main input[type="tel"],
  #hpb-main input[type="number"],
  #hpb-main textarea,
  #hpb-main select {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* トップページのスライドショー：高さ280px固定の余白を画像比率に合わせる */
  #hpb-slideshow1,
  #hpb-slideshow1 .camera_fakehover,
  #hpb-slideshow1 .camera_target,
  #hpb-slideshow1 .cameraCont,
  #hpb-slideshow1 .cameraSlide,
  #hpb-slideshow1 .camerarelative,
  #hpb-slideshow1 .camera_overlayer {
    height: 24.5vw !important;
  }
  #hpb-slideshow1 .cameraSlide img {
    margin-top: 0 !important;
  }

  /* トップ画像 top_mainimg_01_1R.png が存在せず空白になるため隠す */
  .hpb-layoutset-01 #hpb-title {
    display: none !important;
  }

  /* ヘッダー背景の水色をやめて白にする（スマホ時と同じ） */
  .hpb-layoutset-01 #hpb-header,
  .hpb-layoutset-02 #hpb-header {
    background-color: #ffffff !important;
    padding-bottom: 0 !important;
  }

  /* メニューボタンを押しやすい大きさに */
  #hpb-nav h3.hpb-c-index {
    width: 44px !important;
    height: 44px !important;
    background-position: left center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

}