/* 総集編・オムニバスガイド（/guide/）
   ──────────────────────────────────────────────
   62本を「推定出演時間」の長い順に並べたページ。
   数字を隠さず全部出して、読む人が自分で判断できるようにする。

   ■ 横幅（実測して合わせた）
   土台にした /faq/ は .lp_page が 730px の「読み物」用の幅。
   作品ページや一覧は **1030px** なので、ガイドだけ狭くて浮いていた。
   このCSSは /guide/ にしか読み込まれないので、ここで上書きする。

   ■ カバーの大きさ
   62本中58本が縦横比1.42（1035×1468）。
   幅155pxなら高さ220pxになり、右の文章の高さとほぼ揃う。
   **切り抜かない。** 幅を決めて、高さは元の比のまま出す。 */

.lp_page.normal_width { width: 1030px !important; max-width: 100% !important; }

/* 冒頭の説明。ピンクの箱にして、本編の一覧と見た目で切り分ける。
   ここは「読み方の説明」であって作品の情報ではないので、
   同じ地色で続けると本編と混ざる。 */
.gd-intro {
  margin: 0 0 44px;
  background: #fdf3f7;
  border-left: 3px solid #eb6ea0;
  padding: 22px 26px;
  font-size: 15px;
  line-height: 2.0;
}
.gd-intro p { margin: 0 0 18px; }
.gd-intro p:last-child { margin-bottom: 0; }
.gd-intro b { font-weight: 600; }
/* 順位はCSSに数えさせる。**並び替えても勝手に振り直される。**
   HTMLに数字を焼き込むと、JSで並べ替えたときに書き換え漏れが起きる。 */
.gd-list { list-style: none; margin: 0; padding: 0; counter-reset: gd; }
.gd-item { counter-increment: gd; }
.gd-no::before { content: counter(gd); }

.gd-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #ececec;
}
.gd-item:first-child { border-top: 1px solid #ececec; }

/* 順位。数字は Jost でロゴと揃える */
.gd-no {
  flex: 0 0 46px;
  font-family: "Jost", "Century Gothic", "Futura", "Hiragino Sans",
               "Noto Sans JP", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: #c9c9c9;
  text-align: right;
  padding-top: 2px;
  letter-spacing: .02em;
}
/* もとは「一覧の1番目」をピンクで強調していたが、やめた。
   **1番目でもパッケージに別の人が写っている作品が実際にある**ため、
   「看板」という意味づけを外した。意味の無い色分けは混乱のもと。 */

.gd-cover { flex: 0 0 155px; display: block; line-height: 0; }
.gd-cover img {
  width: 155px; height: auto; display: block; border-radius: 2px;
  background: #f4f4f5;
}

.gd-body { flex: 1 1 auto; min-width: 0; }

.gd-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.gd-kind {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: #eb6ea0;
  color: #fff;
  font-size: 11px;
  line-height: 1.7;
}
.gd-code {
  font-family: "Jost", "Century Gothic", sans-serif;
  font-size: 12px;
  color: #8a8a8a;
  letter-spacing: .04em;
}

.gd-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
  color: #2b2b2b;
  text-decoration: none;
  margin-bottom: 7px;
}
.gd-title:hover { color: #eb6ea0; }

.gd-note {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.85;
  color: #666;
}

/* 数字は横並び。根拠を隠さないための行 */
.gd-num {
  display: flex;
  /* **折り返させない。** 25%で4つ並べても、余白と線のぶんで
     100%を超えて4つ目が次の行へ落ちる。基準を0にして等分させる。 */
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  border: 1px solid #ececec;
  border-radius: 3px;
  overflow: hidden;
}
/* 4つとも1行に並べる。25%ずつで固定し、折り返させない。
   「掲載順」は文が長いので、幅が足りないと2行になって行が揃わなくなる。 */
/* 5列。枠は793px（実測）なので1列あたり158px。
   いちばん幅の要る「掲載順（24番目 / 31人中）」が、太字になったときで
   約115px。左右の余白を10pxずつにすれば135pxで収まる。
   **1行に収まることは実測して確かめる。**折り返すと行の高さが揃わない。 */
.gd-num > div {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
  border-left: 1px solid #ececec;
}
.gd-num dd { white-space: nowrap; }
.gd-num > div:first-child { border-left: 0; }
.gd-num dt {
  font-size: 11px;
  color: #8a8a8a;
  margin: 0 0 3px;
  line-height: 1.6;
}
.gd-num dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #2b2b2b;
}
/* 推定出演時間がこのページの主役 */
.gd-num .gd-big {
  font-family: "Jost", "Century Gothic", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---- スマホ（750px以下）は1カラムにする ----
   横並びのままだと、カバー72px＋順位30pxを引いた**249pxに5項目を押し込む**
   ことになり、数字の欄が縦に伸びて画面の端まで文字が届いていた。
   左右の余白も無く、テーブルが見切れて見える。

   カバーを横幅いっぱいに置き、その下に文字を全部並べる。
   数字は「項目名 左／値 右」の1行ずつにする。表より読みやすい。 */
@media screen and (max-width: 750px) {
  /* 画面の端に文字が触れないように、内側に余白を作る */
  .lp_page.normal_width { width: auto !important; padding: 0 16px; }

  .gd-item { display: block; position: relative; padding: 22px 0; }

  /* 順位はカバーの左上に重ねる。1行ぶんの高さを使わずに済む */
  .gd-no {
    position: absolute; top: 34px; left: 12px; z-index: 2;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; padding: 0; text-align: center;
  }

  .gd-cover { display: block; }
  /* 幅を決めて高さは元の比のまま。**切り抜かない。** */
  .gd-cover img { width: 100%; height: auto; }

  .gd-body { margin-top: 14px; }
  .gd-title { font-size: 15px; }

  /* 数字は1行ずつ。項目名を左、値を右に置く */
  .gd-num { display: block; }
  .gd-num > div {
    display: flex; align-items: baseline; justify-content: space-between;
    border-left: 0; border-top: 1px solid #ececec;
    padding: 9px 12px;
  }
  .gd-num > div:first-child { border-top: 0; }
  .gd-num dt { margin: 0; }
  .gd-num dd { text-align: right; }
}


/* ---- 並び替えのタブ ----
   「出演時間の長い順」という見出しはやめた。
   **並びが変わるページで、見出しに順番を書くと押した瞬間に嘘になる。** */
.gd-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid #ececec;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 26px;
}
.gd-sort-btn {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  border: 0;
  border-left: 1px solid #ececec;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  padding: 13px 8px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.gd-sort-btn:first-child { border-left: 0; }
.gd-sort-btn:hover { color: #eb6ea0; }
.gd-sort-btn.is-on { background: #eb6ea0; color: #fff; font-weight: 600; }

/* ---- 「FANZAで見る」 ----
   数字の行の下、左に寄せて置く。
   タイトルとカバーは作品ページへ、ここは店へ、と役割を分ける。
   小さく置くのは、**まだ迷っている人の邪魔をしない**ため。 */
.gd-go { margin-top: 10px; }
.gd-go a {
  display: inline-block;
  padding: 7px 20px;
  border: 1px solid #eb6ea0;
  border-radius: 3px;
  color: #eb6ea0;
  background: #fff;
  font-size: 12.5px;
  line-height: 1.6;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.gd-go a:hover { background: #eb6ea0; color: #fff; }

@media screen and (max-width: 750px) {
  .gd-sort { flex-wrap: wrap; }
  .gd-sort-btn { flex: 1 1 50%; }
  /* 2つずつ折り返す。**タブの本数を決め打ちしない。**
     以前は3番目・4番目だけを名指ししていたので、5つ目を足した日に
     枠線が抜けていた。奇数番＝行の左端、3番目以降＝2行目より下、で書く。 */
  .gd-sort-btn:nth-child(odd) { border-left: 0; }
  .gd-sort-btn:nth-child(n+3) { border-top: 1px solid #ececec; }
}