/* 2026-08-24 スタッフ指摘の修正（担当 k）。
   このファイルは担当ごとに分けている。他の担当のファイルは触らないこと。 */

/* ③ /staff/entry/form/ SPで希望部門・希望職種の選択肢が右にはみ出す。
   原因はページ内 <style> の input[type="text"]{width:360px}。
   パーセント指定の max-width は表の「最小内容幅」の計算では無視されるため、
   table が 360px から縮まず、SP幅の枠（375px時 335px）を 25px はみ出して
   選択肢が画面の右端に貼り付いていた。SPでは入力欄を枠いっぱいに戻す。
   PCは表の幅のほうが 360px より広く元から影響しないので、SP限定にする。
   ※このページは staff/asset/css/ の別CSS一式を読んでおり、そちらのSP切替は
     800px なので、ここも 800px に合わせる（1000px にすると 801〜1000px の
     PCレイアウトのときに効いてしまう）。 */
@media screen and (max-width:800px){
  body.page-staff-entry-form .mailform table{
    width: 100%;
    table-layout: fixed;      /* 中身の都合で表が広がらないようにする */
  }
  body.page-staff-entry-form .mailform input[type="text"]:not(.w30),
  body.page-staff-entry-form .mailform input[type="tel"],
  body.page-staff-entry-form .mailform input[type="email"],
  body.page-staff-entry-form .mailform textarea{
    width: 100% !important;
    max-width: 100%;          /* calc(100% - 85px) だと右に無駄な余白が残る */
  }
  /* チェックボックス／ラジオと文字が行またぎでちぎれないよう1かたまりにする */
  body.page-staff-entry-form .mailform .mwform-radio-field.vertical-item{
    display: inline-block;
    white-space: nowrap;
    margin: 0 14px 8px 0;
  }
  body.page-staff-entry-form .mailform .mwform-radio-field.vertical-item label{
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
}

/* ② /fertility/howto/ SPで「洗浄濃縮による人工授精」だけ左右の余白がずれる。
   この h4 だけ .layout-picTxt .txt の中にあり、SP用の
   .layout-picTxt{margin:25px 15px 35px} と h4{margin:25px 15px} が二重に効いて
   左右 30px（他の h4 と本文は 15px）になっていた。入れ子のときは h4 の
   左右マージンを打ち消す。本番も同じ崩れ方をしている（引き継いだ不具合）。 */
@media screen and (max-width:1000px){
  body.page-id-417 .layout-picTxt h4{
    margin-left: 0;
    margin-right: 0;
  }
}

/* ① /class/obsterics/ SPで教室の表が横に長いスライドになって読めない。
   原因は共通の .free-table{white-space:nowrap; overflow:auto}（本番も同じ）。
   時刻表のような短いセル向けの指定だが、このページの表は
   「日時／対象／持ち物／その他」の長い文章なので、幅 1331px の帯になり
   375px の枠を 3.5画面ぶん横スクロールしないと読めなかった。
   このページの表は2列（項目名＋説明）だけなので、折り返して縦に伸ばせば
   情報を落とさずそのまま画面内に収まる。PCは元から折り返し不要なのでSP限定。 */
@media screen and (max-width:1000px){
  body.page-id-634 .free-table{
    overflow: visible;
    white-space: normal;
    margin: 15px 15px;        /* 右マージンが0で画面端に貼り付いていたので揃える */
  }
  body.page-id-634 .free-table table{
    width: 100%;
    table-layout: fixed;      /* 長い文章で表が広がらないようにする */
  }
  body.page-id-634 .free-table table tbody tr th{
    width: 90px;              /* 「予約方法」4文字が1行に収まる最小幅 */
    white-space: nowrap;
  }
  body.page-id-634 .free-table table tbody tr td{
    white-space: normal;
    word-break: break-word;
    line-height: 1.8;
  }
}