/* サイト全体にかかる、こちらで足した指定
   ──────────────────────────────────────────────
   テーマの style.css には**書き足さない。**
   どこを自分が足したのか分からなくなり、直すときに探せなくなる。
   全ページに効かせたいものだけ、ここに置く。
   （作品ページだけのものは spec.css / gallery.css、
     ガイドは guide.css、ランキングは ranking.css） */

/* ============================================ 見出しの折り返し */
/* ■ 何が起きていたか
   作品名が長いので、スマホでは見出しが3〜4行になる。そのとき
   ブラウザは**文字数だけを見て折る**ので、語の途中で割れていた。

       【新提案ズリネタ】現実では絶対見られ
       ないチンしゃぶ＆揺れパイ同時堪能！爆
       乳限定！見上げフェラチオ88射精ラッシ
       ュ

   「見られ／ない」「爆／乳限定」「ラッシ／ュ」。
   日本語には英語のような単語の切れ目（空白）が無いので、
   ブラウザは**どこで折ってよいか分からない。**

   ■ word-break: auto-phrase
   ブラウザに文節を判定させて、その切れ目で折らせる指定。
   同じ見出しがこうなる。

       【新提案ズリネタ】現実では絶対
       見られないチンしゃぶ＆
       揺れパイ同時堪能！爆乳限定！
       見上げフェラチオ88射精ラッシュ

   ■ 対応していないブラウザで困らないか
   困らない。CSSは**知らない値を書いても、その1行を読み飛ばすだけ。**
   折り返しは今までどおり（文字数で折る）になる。
   古いiPhoneやFirefoxでは効かないが、悪くなることはない。

   ■ なぜ見出しだけか
   本文にも掛けると、1行に入る量が減って**右端がガタガタになる。**
   本文は行数が多いので、そのガタつきのほうが読みにくい。
   1〜4行で終わる見出しは、語が割れないほうが読みやすい。 */
h1, h2, h3, h4,
.catch, .catch_bottom, .catch_area,
/* 作品ページ上のピンクの帯。ここも作品名が出るので、
   スマホでは4行になる（実測112px）。 */
.title_area .title,
#bread_crumb li.last,
.gd-title,
#header_category_button li,
.q_custom_button {
  word-break: auto-phrase;
}

/* ■ 一覧のカードだけは、元のままにする
   カードの作品名は**枠に収まらないぶんを切って**見せている。

       .catch_bottom p   幅138px・overflow:hidden
       その中の span     inline-block

   文節で折ろうとすると、1つの文節（「ベストコレクション」など）が
   138pxに収まらず、**span が187pxまで伸びて右が切れる。**
   実測で5枚のカードが切れていた。ここは文字数で折るほうが収まる。 */
.interview_list .catch,
.interview_list .catch_bottom,
.interview_list .catch_bottom * {
  word-break: normal;
}