@charset "utf-8";

/* スマホ・タブレット用（2026-10-25 OMAKASE 追加）
   元の会社案内のページはパソコン用の幅（1020px）だけで作られていて、スマホでは縮めて表示され字が読めなかった。
   パソコンの見た目は変えず、1019px 以下のときだけ、幅を画面に合わせ、横並びを縦に並べ、字を読める大きさにする。
   切り替えを 767px にすると、768〜1019px のタブレットが 1020px のまま表示されて右がはみ出す（viewport を足したため）ので 1019px にしている。
   各ページの <head> で base.css・style.css・c-style.css のあとに読み込む（同じ強さの指定はあとに書いた方が勝つ）。
================================================================ */
@media only screen and (max-width: 1019px) {
  body {
    font-size: 0.9375em; /* 15px（元は 14px） */
  }
  img {
    max-width: 100%;
    height: auto;
  }

  /* 幅 */
  #wrap {
    min-width: 0;
  }
  .inner {
    width: auto;
    padding: 0 16px;
  }

  /* ヘッダー: ロゴを上、メニュー5つを下に横一列で並べる */
  h1 .inner {
    padding: 0.3em 16px;
    text-align: left;
  }
  .logo,
  #globalNavi {
    float: none;
  }
  .logo span {
    display: block;
    height: auto;
    padding-bottom: 0.6em;
  }
  #globalNavi ul {
    display: flex;
  }
  #globalNavi li {
    float: none;
    flex: 1 1 0;
    min-width: 0;
  }
  #globalNavi li a {
    display: block;
    height: auto;
    padding: 0.7em 0.1em;
    font-size: clamp(8.5px, 2.75vw, 10px); /* 「お問い合わせ」が 320px の幅でも1行に入る大きさ */
    line-height: 1.4;
    white-space: nowrap;
  }
  #globalNavi li a span {
    padding-top: 0;
    font-size: clamp(9px, 2.9vw, 12px); /* 「BUSINESS」が 320px の幅でも1行に入る大きさ */
    letter-spacing: 0;
    white-space: nowrap;
  }
  /* 下に動かしたときにメニューがついてくる動き（function.js）は、画面の1割以上をふさぐので止める */
  .fixed h1 {
    padding-bottom: 0;
  }
  .fixed .headerInr {
    position: static;
    padding: 1em 0;
    border-bottom: none;
  }

  /* 本文 */
  .breadclumb {
    padding: 0.6em 0 2em 0;
  }
  h2 {
    margin-bottom: 2em;
  }
  h2 span {
    display: block;
    margin: 0 0 0.1em 0;
    font-size: 2.4em;
    line-height: 1.1;
  }
  h3 {
    margin-bottom: 1.2em;
    padding: 1.1em 0.8em;
  }
  h3 span {
    display: block;
    margin: 0 0 0.2em 0;
    font-size: 1.5em;
    line-height: 1.2;
  }
  h4 {
    font-size: 1.15em;
  }
  .ctsBlock {
    padding-bottom: 2.5em;
  }
  /* 文章の右に浮かせていた写真は、文章の上に幅いっぱいで置く */
  .flRt,
  .flLt {
    float: none;
  }
  .flRt.ml30,
  .flLt.ml30,
  .ml30 {
    margin-left: 0 !important;
  }

  /* 会社概要などの表: 項目名の下に中身を置く */
  .table dt,
  .table.dtSm dt,
  .table.dtLg dt {
    float: none;
    width: auto;
    padding: 0.6em 1em;
    font-weight: bold;
  }
  .table dd,
  .table.dtSm dd,
  .table.dtLg dd {
    margin-left: 0;
    border-left: none;
  }
  .table dl.sbys dt {
    float: none;
    padding: 0;
    font-weight: bold;
  }
  .table dl.sbys dd,
  .table dl.sbys.dt6e dd,
  .table dl.sbys.dt7e dd,
  .table dl.sbys.dt7he dd,
  .table dl.sbys.dt9e dd {
    margin: 0 0 0.6em 0;
  }

  /* タブ（会社情報・取引先・沿革）: 3つを横一列に */
  .tabs {
    display: flex;
  }
  .tabs li {
    float: none;
    flex: 1 1 0;
    min-width: 0;
  }
  .tabs li a {
    width: auto;
    padding: 10px 0.2em;
  }

  /* 横並びのリスト */
  ul.sbys2 li {
    float: none;
    width: auto;
  }

  /* ボタン・入力欄 */
  .w20e,
  .inputL {
    width: 100% !important;
    max-width: 100%;
  }
  /* iPhone は 16px 未満の入力欄を押すと画面を拡大してしまうので、入力欄の字は 16px にする */
  input,
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%; /* 選択肢の長いプルダウン（「求人に関するお問い合わせ・ご応募」）が 320px の幅ではみ出すため */
    box-sizing: border-box;
  }

  /* 会社案内トップ: お知らせの枠とカードの並び（c-style.css は 768〜1229px で幅を 900px に決めていて、はみ出す） */
  .top_list,
  #informationmain .infowrp {
    width: auto;
    max-width: 100%;
  }
  #informationmain,
  #contentsnmain {
    padding-left: 16px;
    padding-right: 16px;
  }
  #informationmain .infohead,
  #contentsnmain .infohead {
    margin: 2.5em auto 1.5em;
  }
  .informationmainContentTitle {
    font-size: 1.1rem;
  }
  #front_newitemwrapper .titlename {
    font-size: 1.5em;
  }

  /* 求人情報: 職種の写真を説明の上に置く（元は写真を左に浮かせ、説明を 230px 右にずらしていた） */
  .jobCategory .img {
    float: none;
    padding: 0 0 0.8em 0;
  }
  .jobCategory dl {
    margin-left: 0;
  }

  /* フッター */
  #footerNavi {
    padding: 28px 0 20px 0;
  }
  #footerNavi li {
    padding: 0.2em 0.6em;
  }

  /* ページの先頭へ戻るボタン: 右下に置く（元は 990px の幅の右端からの位置） */
  .pageTop a {
    right: 12px;
    bottom: 16px;
    margin-left: 0;
  }
}