@charset "UTF-8";
/* ============================================================
   文字を、線の内側に収める（2026-09-19 ご指摘）
   ------------------------------------------------------------
     「ボタンデザインなどの罫線で囲ってあるデザインで、
       文字が線を突き抜けて横長になるものが多くみられました。
       基本的にはスクロールは極力出さない様に収める方針にしてください。
       デザインが崩れないくらいであれば、少し縦長にして、
       長くなる様ならば文字の大きさを調整してください。」

     ここには「どのページでも当てはまる、安全な決まり」だけを書きます。
     1つ1つの箱を測って直すのは js/fit.js のしごとです。

     ■ なぜ2つに分けるか
       文字の長さは、中身しだいで変わります。
       「ページ送りの 25463」のように、数が増えてはじめて
       はみ出すものもあります。
       CSS だけでは「長いときだけ小さくする」ができないので、
       measure（測る）は JavaScript 側でやります。
   ============================================================ */

/* ------------------------------------------------------------
   1. 長い語も、途中で折り返せるようにする
   ------------------------------------------------------------
     日本語は好きなところで折り返せますが、
     英数字の続き（URL・施設名・ID）は1つの語とみなされ、
     折り返せずに線を突き抜けます。
     囲みのある部品では、途中でも折り返してよいことにします。
   ------------------------------------------------------------ */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
[class*="btn-"],
.badge,
.chip,
.tag,
.pill,
.nav-link,
.page-link,
.form-control,
.form-select,
.form-label,
.alert,
.card-title,
.list-group-item,
.dropdown-item,
th, td {
	overflow-wrap: anywhere;
	word-break: normal;
}

/* ------------------------------------------------------------
   2. 横ならびの中で、文字の箱がつぶれない・押し出さない
   ------------------------------------------------------------
     flex の中身は、はじめ min-width: auto です。
     「中身より小さくならない」という意味なので、
     長い文字が入ると、箱ごと外へ押し出します。
     囲みの中の横ならびだけ、0 まで縮められるようにします。
   ------------------------------------------------------------ */
.btn > *,
.badge > *,
.nav-link > *,
.list-group-item > *,
.alert > *,
.dropdown-item > * {
	min-width: 0;
}

/* ------------------------------------------------------------
   3. ページそのものに、横スクロールを出さない
   ------------------------------------------------------------
     clip であって hidden ではありません。
       hidden … その要素が「スクロールする箱」になります。
                 上に貼り付く見出し（position: sticky）が
                 効かなくなることがあります。
       clip   … はみ出したぶんを切るだけで、箱の性質は変えません。
     いまの並びでは、閉じているスマホ用メニュー（#sp_menu）が
     画面の外に置かれていて、その分だけ横スクロールが出ていました。
     （2026-09-19 実測：/faq で 426px ／ 画面は 375px）

     ※ 中身そのものを収める役目は js/fit.js が持ちます。
       ここは「取りこぼしを、見た目に出さない」ための最後の砦です。
   ------------------------------------------------------------ */
html {
	overflow-x: clip;
}

/* ------------------------------------------------------------
   4. js/fit.js が付ける印
   ------------------------------------------------------------ */
/* 折り返しを許したもの（もとは white-space: nowrap でした） */
[data-jyfit-wrap] {
	white-space: normal !important;
	overflow-wrap: anywhere;
}
/* 折り返せない長い語（URL・英字の施設名）を、途中でも折り返してよいことにしたもの */
[data-jyfit-break] {
	overflow-wrap: anywhere;
}
/* 最後の行が1〜2文字だけにならないように、ブラウザに任せたもの
     （2026-09-19 ご指摘「のこり一文字、二文字で改行しているところ」）
     text-wrap: pretty は「最後の行が短くなる折り返しを避ける」しくみです。
     字の大きさも字間も変わらないので、いちばん見た目に響きません。 */
[data-jyfit-pretty] {
	text-wrap: pretty;
}
/* 高さが決まっている箱で、折り返したぶんが縦にはみ出さないように */
[data-jyfit-wrap][data-jyfit-tight] {
	line-height: 1.25;
}