/* npc コラム一覧の見た目調整（テーマ style.css の該当2点だけを上書き）
   body 接頭辞でテーマより詳細度を1段上げているため、!important 不要・読み込み順に依存せず確実に効く。 */

/* スマホで画面が左右に揺れる（横スクロールできてしまう）問題の対策。
   原因は Google reCAPTCHA のバッジ（position:fixed）が画面の右外にはみ出しており、
   スマホのタッチ操作で左右に引っぱれてしまうこと。ページ本来のはみ出しは無い（計測済み）ため、
   はみ出し分をクリップするだけで、正しい中身が切れることはない。
   ※このサイトには position:sticky の要素が無いので overflow-x:hidden による副作用は無い。 */
html, body {
  overflow-x: hidden;
}

/* 記事本文の参照リンク（施設リンク・出典リンク＝青いリンク）に下線を付けて、
   リンクだと一目で分かるようにする。テーマが `a { text-decoration:none !important }` で
   下線を消しているため、こちらも !important＋高い詳細度で確実に上書きする。
   対象は記事本文(.page_item_column)の青いリンクだけ＝一覧カードやメニューには付かない。 */
body .page_item_column a.has-vivid-cyan-blue-color {
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}

/* アイキャッチ: 横長(16:9)で表示。もとは aspect-ratio:5/5 の正方形＋object-fit:cover で
   横長画像の左右が切り取られ、絵柄・文字が欠けていた。画像の実比率(16:9)に合わせて切り取りをなくす。 */
body #column .waku .img,
body .page_item_column .waku .img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

/* カテゴリ: 長い名前（例「育児・介護休業法・ワークライフバランス」）が改行されると、
   display:inline の枠線が折り目で分断されて崩れて見えた。inline-block にすると
   2行になっても1つの角丸ボックスで囲まれ、カード幅にも収まる。 */
body #column .waku .cate span,
body .page_item_column .waku .cate span {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 8px;
  line-height: 1.7;
}