/* 作品ページのスペック表示
   ──────────────────────────────────────────────
   ジャケットの下 … 要点バー（.spec-hi）
   本文の下       … 3枚のカード（.spec-cards）

   ■ 前の形
   <div class="well2"> の中に9項目を「：」でつないで改行しただけ。
   目が止まる場所がなく、探している項目まで1行ずつ読むことになっていた。
   中身の無い項目も「－」で必ず出していた（監督が分かるのは88本中24本）。

   ■ 開閉はCSSだけでやる
   出演者はオムニバスだと50人を超える。畳まないと表の丈が倍になる。
   チェックボックスを隠して label で切り替えるので、**JavaScriptは要らない。**
   読み込みの順番や他のJSの失敗に左右されない。
*/

/* ====================================== スマホのピンクの帯（作品ページ上部） */
/* テーマはスマホ幅（1100px以下）で #interview_header_bottom_mobile を出し、
   その中を display:flex にしている。中身は3つ。

       .job    単体○作目          font-size:12px
       .title  作品名             font-size:20px  flex:1 1 0
       .info   メーカー           font-size:12px

   横並びなので、**狭い画面では真ん中の作品名だけが細長く折り返す。**
   左右に短い文字が張り付いて、3列に割れて見えていた。

   縦に積む。読む順（種別 → 作品名 → メーカー）とも合う。 */
@media screen and (max-width: 1100px) {
  #interview_header_bottom_mobile .title_area_inner { display: block; }
  #interview_header_bottom_mobile .job,
  #interview_header_bottom_mobile .info { margin: 0; opacity: .9; }
  #interview_header_bottom_mobile .title { margin: 6px 0; }
}

/* ====================================== パンくず（スマホ） */
/* テーマはパンくずを**1行に固定**している。

     #bread_crumb ul { white-space:nowrap; overflow:hidden;
                       text-overflow:ellipsis; }
     #bread_crumb li a { height:69px; line-height:70px; }

   末尾の作品名が長いので、スマホ（335px）では入り切らない。
   実測すると、いちばん長い作品で **771px のうち436pxが枠の外**にいた。
   text-overflow:ellipsis も書いてあるが、li が inline で
   中に inline-block の a が入っているので**効いていない。**
   「…」も出ないまま、ただ途中で消えていた。

   ■ 作品名だけ隠す（パンくずごと消さない）
   作品名は**真下のh1に全文がある。** ここで出す必要はない。

   ただし**パンくずごと消してはいけない。** 実測すると、
   スマホの作品ページから「同じ種別の一覧」へ戻れる場所は、
   画面上でここだけだった。

       #interview_side_category（縦タブ）  スマホでは非表示
       フッターのメニュー                  単体作品へのリンクだけ
       パンくず                            オムニバス一覧へ戻れる

   オムニバスの作品を見ている人が、ほかのオムニバスを見に行く道が
   これしかない。消すと行き止まりになる。

   ■ 区切りの「＞」
   テーマは :last-of-type の「＞」だけ消している。末尾を隠すと、
   その手前の「＞」が宙に浮くので、**うしろから2番目**も消す。 */
@media screen and (max-width: 750px) {
  #bread_crumb li.last { display: none; }
  #bread_crumb li:nth-last-child(2):after { display: none; }
}

/* ============================================ 作品名の見出し（h1） */
/* テーマは .styled_h4 に padding: 3px 0 3px 20px !important を掛けている。
   **この左20pxは中身のない空白。** 実測で確かめた。
     ・背景色なし  ・左の枠線なし（border-left: 0）  ・::before なし
   つまり字下げしているだけで、下の罫線だけが20px左まで伸びていた。

   外すと1行あたり20px広くなり、89本のうち
     /video/50/  3行 → 2行（唯一の3行だった作品）
     /video/27/  2行 → 1行
   が縮む。ほかは行数そのままで、左端が罫線と揃う。

   .styled_h4 側が !important なので、こちらは**より細かい指定**で上書きする。
   h1.styled_h4（0,1,1）> .styled_h4（0,1,0）。 */
#post_content h1.styled_h4,
h1.styled_h4 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================ 前の作品／次の作品 */
/* テーマはこう書いてある。

     #interview_next_prev_post          { display: flex; }
     #interview_next_prev_post .item    { width: calc(50% - 15px); }
     #interview_next_prev_post .item:last-child { margin-left: auto; }

   最後の1つを右へ寄せる指定で、**2つ並ぶときの「次の作品」**を
   右端へ送るためのもの。ところが最新作のページには「次の作品」が無く、
   残った「前の作品」が :last-child になるので、**同じ指定で右へ飛ぶ。**

   「前の作品」は常に左。だから prev_post だけ、その指定を打ち消す。
   2つ並ぶときは、余りの30pxが15pxずつに分かれるだけで見た目は変わらない
   （左端と右端に着く位置は同じ）。 */
#interview_next_prev_post .item.prev_post {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ============================================ 要点バー（ジャケットの下） */
/* 幅はジャケットと同じ（親が post_col-2 なので何もしなければ揃う）。
   線は「1pxの隙間＋下地の灰色」で描く。枠線を1本ずつ引くと、
   折り返したときに二重線になる場所ができる。 */
.spec-hi {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: #e6e6e6;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 14px;
}
/* 1行に入る数は**中身の数で変える。**
       3つ … 3列（30%）
       4つ … 2列×2段（45%）。3列にすると4つ目が単独で横いっぱいに伸び、
              間延びした帯が1本できてしまう
       5つ … 3列＋2列（30%）。下段の2つが伸びて収まる
   評価が分かるのは88本中64本、再生数は86本なので、
   作品によって3〜5個に変わる。 */
.spec-hi > div {
  flex: 1 1 30%;
  background: #fff;
  padding: 13px 6px;
  text-align: center;
}
.spec-hi.n4 > div { flex: 1 1 45%; }
/* 並びは **ラベルが上、値が下**。
   何の数字かを読んでから数字を見る順になる。
   （値が上だと、数字を見てから下の小さい字で意味を確かめることになる） */
.spec-hi i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #8a8a8a;
  margin-bottom: 4px;
  letter-spacing: .04em;
}
.spec-hi b {
  display: block;
  font-family: "Jost", "Century Gothic", "Futura", "Hiragino Sans",
               "Noto Sans JP", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .02em;
  color: #2b2b2b;
}
/* 評価の星 */
.spec-hi .star { color: #eb6ea0; font-size: 15px; margin-right: 1px; }
.spec-hi .sub { font-size: 12px; color: #8a8a8a; font-weight: 400; }

@media screen and (max-width: 750px) {
  .spec-hi > div { padding: 11px 4px; }
  .spec-hi b { font-size: 15px; }
}

/* ======================= サンプル動画と「フル動画はこちら」の間 =======================
   ■ 直す前（実測 /video/38/）
       画像一覧 → 動画   6px
       動画 → ボタン    50px
   下だけ8倍以上あいていた。

   ■ 50pxの出どころ
   動画とボタンは**別々の入れ物**に入っている。
       .interview_free_space.num1  … 画像一覧＋サンプル動画
       .interview_free_space.num2  … 「フル動画はこちら」
   この入れ物がテーマ側で上下50pxのマージンを持っていて、
   隣り合う2つが重なって（相殺されて）50pxになっていた。
   動画自身の margin-bottom:24px はこの中に吸収されて効いていない。

   ■ 直し方
   上と同じ6pxにそろえる。相殺されるので、**両方を抑えないと効かない。**
   num2 の中のボタン枠も32px持っているので、これも0にする
   （でないと相殺後の最大値が32pxになってしまう）。

   このCSSは作品ページにしか読み込まれないので、
   トップや他のページのボタンには影響しない。

   ■ 動画自身の24pxも消す
   入れ物の50pxを縮めたら、それまで吸収されていた
   .samplemovie の margin-bottom:24px が表に出てきた。
   **抑える場所は3つではなく4つ。** 一段ずつ実測して確かめること。

   ■ 「入れ物の底」で測ってはいけない（一度これで間違えた）
   一覧の入れ物（.post_row.gal）の底は、**画像の下端より14px下**にある。
   入れ物どうしの隙間を測ると6pxだが、**目に見える隙間は20px。**
   14pxぶん、入れ物の中の余りを数え落としていた。

   合わせるのは**画像の下端から動画まで**の見た目の隙間＝20px。
   だから num1 の margin-bottom も20pxにする。
   測るときは必ず img の下端から測ること。 */
.samplemovie { margin-bottom: 0 !important; }
.interview_free_space.num1 { margin-bottom: 20px !important; }
.interview_free_space.num2 { margin-top: 0 !important; }
.interview_free_space.num2 .q_button_wrap { margin-top: 0 !important; }

/* ============================================ 3枚のカード */
/* 性格の違う情報を1つの箱に押し込んでいたのが読みにくさの元。
     作品データ … 数字と固有名詞（拾う）
     出演者     … 人の名前（探す）
     ジャンル   … 内容の手がかり（眺める）
   箱を分けると、探しているものがどこにあるか目で分かる。
   出演者が何十人いても、伸びるのはその箱だけで済む。 */
.spec-cards { margin: 0 0 30px; }
.spec-cards section {
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  padding: 14px 16px;
  margin-bottom: 11px;
  background: #fff;
}
.spec-cards section:last-child { margin-bottom: 0; }

/* 見出しは小さく。中身より目立つと本末転倒になる。
   テーマ側の h2 が大きいので、ここだけ強く指定する。 */
.spec-cards .spec-h {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .08em;
  color: #2b2b2b;
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
}
.spec-cards .spec-h::before {
  content: "";
  width: 3px;
  height: 12px;
  background: #eb6ea0;
  border-radius: 2px;
  flex: 0 0 3px;
}
.spec-cards .spec-h em {
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  color: #8a8a8a;
  letter-spacing: 0;
}

/* 2列。ラベルの幅をそろえると、値の頭もそろって上から目でなぞれる。 */
.spec-cards dl {
  display: grid;
  grid-template-columns: 76px 1fr;
  margin: 0;
  font-size: 13px;
}
.spec-cards dt {
  color: #8a8a8a;
  font-size: 12px;
  padding: 4px 0;
  line-height: 1.75;
  margin: 0;
}
.spec-cards dd { margin: 0; padding: 4px 0; line-height: 1.75; }

@media screen and (max-width: 750px) {
  .spec-cards dl { grid-template-columns: 68px 1fr; }
}

/* ============================================ バッジ */
.spec-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.spec-pills span {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f3f3f4;
  font-size: 12px;
  line-height: 1.75;
  color: #444;
}
/* 本人だけピンクにして、共演者の中から一目で見つかるようにする */
.spec-pills .star { background: #eb6ea0; color: #fff; font-weight: 500; }

/* ---- 「ほか○人」の開閉。CSSだけで動く ---- */
.spec-cb { display: none; }
.spec-more, .spec-less {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px dashed #cdcdcd;
  font-size: 12px;
  line-height: 1.75;
  color: #8a8a8a;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s, color .2s;
}
.spec-more:hover, .spec-less:hover { border-color: #eb6ea0; color: #eb6ea0; }

/* 「閉じる」は開いているときだけ出す。
   置き場所は**余りの後ろ**（列の末尾）。前に置くと、
   開いたあと上へ戻らないと閉じられない。 */
.spec-less { display: none; }
.spec-cb:checked ~ .spec-less { display: inline-block; }
/* 余りのバッジ。1つずつ隠す。
   はじめは1枚の span で包んで display:contents にしていたが、
   **親が flex なので contents が block に化け、畳めなかった。**
   包まずに印を付ければ、どれも普通の flex の子なので none がそのまま効く。 */
.spec-pills .spec-x { display: none; }
.spec-cb:checked ~ .spec-x { display: inline-block; }
.spec-cb:checked ~ .spec-more { display: none; }