/*
 * Cosboo Content Fix
 * テーマ設定のカスタム CSS より後ろに出るとは限らないので、セレクタを1段強くしている（body / .cstm-box-sticky を前に付ける）。
 */

/*
 * どこかの要素が画面より広くても、横にはみ出した分は切り落としてページ幅を広げない
 * （ページ幅が広がるとスマホでページ全体が縮小される）。clip はスクロールの器を作らないので固定表示などに影響しない。
 */
body {
  overflow-x: clip;
}

/*
 * 記事の枠（.cstm-box-sticky）の中の文章の箱は inline-block で、中の画像の幅に合わせて広がる。
 * 画面より広い画像があると箱ごと画面からはみ出すので、箱は枠の幅までにする。
 */
body .cstm-box-sticky .text_box {
  max-width: 100%;
}

/*
 * 記事の画像（.text_box_img）は left: 50% + translateX(-50%) で中央に寄せていて、
 * 動かす前の位置がページの幅に数えられて横にはみ出す。margin の auto で中央に寄せ直し、枠の幅を超えないようにする。
 * 画像に直接書いた margin（例 3em 1em）より優先して左右を auto にする。
 */
body .text_box_img {
  display: block;
  left: auto;
  transform: none;
  max-width: 100%;
  height: auto;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* スマホ：画像に直接書いた min-width（例 360px）が画面より広いことがあるので外し、その画像は箱の幅いっぱいにする */
@media (max-width: 600px) {
  body .text_box_img {
    min-width: 0 !important;
  }
  body .text_box_img[style*="min-width"] {
    width: 100% !important;
  }
}

/*
 * TOP の大きな画像：高さを画像の縦横比に合わせて、画像の全体が見えるようにする。
 * 比率は cosboo-content-fix.js が画像の実際の大きさから --cb-hero-ratio に入れ、cb-hero-fit を付ける。
 * テーマの「画面の高さ − 600px」（!important）や JS で直接入れる高さより強くするため、id＋class にしている。
 */
#index_header_type1.cb-hero-fit {
  height: auto !important;
  max-height: none !important;
  aspect-ratio: var(--cb-hero-ratio);
}