/* ============================================
   場面の中身 — 10種のブロック（しらべたら、ちがった 第2回）
   骨は第1回と同じ。中身だけ差し替えてある。
   ============================================
   共通の作り:
     .card        白いカード。紙が1枚のっている見た目（縁＋下に影）
     .card > .no  左肩に飛び出す番号タブ（色は .is-coral / .is-blue / .is-plain）
     .card .band  色のついた帯。見出しが入る
     .card .body  白い中身
     .bubble      吹き出し。中に台詞。しっぽは左につく
     .ct          SVG キャラクターの入れ物（中身は js/cast.js が入れる）

   🚨 ナレーターは中身より前（z-index 5）に出る。下に潜らせない。
      大きいとき x348..538 / y571..856、小さいとき（real・cards・versus・story）x396..544 / y633..856。
      詰まっている場面は justify-content: flex-start ＋ padding-top で上に固める。
   ============================================ */

/* ── 共通：白いカードと番号タブ ───────────────────────────────────────── */
.card {
  position: relative;
  margin-left: 12px;              /* 番号タブが左へ飛び出すぶんを空けておく */
  border: 2px solid var(--card-line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 5px 0 rgba(90, 70, 40, .07), 0 14px 26px rgba(90, 70, 40, .09);

  .no {
    position: absolute;
    left: -20px;
    top: -6px;
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 56px;
    padding: 0 10px;
    border-radius: 12px 4px 4px 14px;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    box-shadow: 0 4px 0 rgba(90, 70, 40, .16);
  }

  .band {
    padding: 9px 16px 9px 48px;
    border-radius: 15px 15px 0 0;

    b {
      display: block;
      font-size: 25px;
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: -.035em;
    }
  }

  .body { padding: 12px 16px 14px }

  &.is-coral { .no { background: var(--coral) } .band { background: var(--coral-tint) } }
  &.is-blue { .no { background: var(--blue) } .band { background: var(--blue-tint) } }
  &.is-plain { .no { background: #8d8375 } .band { background: #e7e0d2 } }
}

/* ── 共通：吹き出し ───────────────────────────────────────────────────── */
.bubble {
  position: relative;
  display: inline-block;
  padding: 12px 16px;
  border: 2px solid var(--card-line);
  border-radius: 18px;
  background: var(--card);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: -.03em;
  box-shadow: 0 4px 0 rgba(90, 70, 40, .07);
}

/* ── 共通：SVG キャラクターの入れ物 ───────────────────────────────────── */
.ct {
  flex: none;
  &.is-flip .ct-svg { scale: -1 1 }
}

/* ============================================
   ① hook — 同じ1人が、場面で口数を変えている絵を先に見せる
   ============================================ */
.bk-hook {
  justify-content: flex-start;
  padding-top: 104px;
}

.hk-line {
  position: relative;
  margin: 0 0 24px;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -.045em;

  em {
    position: relative;
    color: var(--coral);
    font-style: normal;

    /* 黄色い蛍光ペン。文字の下半分に敷く */
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -6px;
      right: -6px;
      bottom: 6px;
      height: 22px;
      border-radius: 6px;
      background: var(--yellow);
      opacity: .85;
    }
  }
}

/* 左右に同じ人。吹き出しの大きさだけが違う */
.hk-two {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.hk-side {
  flex: 1;
  text-align: center;

  b {
    display: block;
    margin-top: 6px;
    color: var(--ink-mid);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.02em;
  }
}

.hk-man { width: 124px; margin: 0 auto }

.hk-b {
  display: block;
  margin-bottom: 8px;
  text-align: center;
}

/* 口数が少ないほう。点3つだけ */
.hk-b-sm {
  padding: 10px 14px;
  color: var(--ink-soft);
  font-size: 30px;
  letter-spacing: .1em;
}

/* よく喋るほう。中身の無い「言葉の量」を線で見せる */
.hk-b-lg {
  padding: 13px 14px;

  i {
    display: block;
    height: 9px;
    margin: 7px 0;
    border-radius: 999px;
    background: #ded2ba;

    &:nth-of-type(1) { width: 92% }
    &:nth-of-type(2) { width: 100% }
    &:nth-of-type(3) { width: 66% }
  }
}

/* ============================================
   ② title — 呼び名の出どころ。星の並びに神話の名前が付いただけ
   ============================================ */
.bk-title {
  justify-content: flex-start;
  padding-top: 100px;
}

.ti-eyebrow {
  margin: 0 0 8px;
  color: var(--coral);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .02em;
}

.ti-name {
  margin: 0 0 24px;
  font-size: 46px;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -.045em;
}

/* 2人のあいだに星の並びを置く */
.ti-scene {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.ti-p {
  flex: 0 0 132px;
  text-align: center;

  b {
    display: block;
    margin-top: 4px;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.03em;
  }

  small {
    display: block;
    color: var(--ink-mid);
    font-size: 15px;
    font-weight: 700;
  }
}

.ti-stars {
  flex: 0 0 132px;
  height: 118px;
  overflow: visible;
}

.ti-line line {
  stroke: #c5b79c;
  stroke-width: 2;
  stroke-linecap: round;
}

.ti-star {
  fill: var(--yellow-deep);
  transform-box: fill-box;
  transform-origin: center;
  animation: ti-twinkle 3.2s ease-in-out infinite;

  &:nth-of-type(2n) { animation-delay: -1.1s }
  &:nth-of-type(3n) { animation-delay: -2.2s }
  &.is-big { fill: var(--coral); animation-duration: 2.4s }
}

@keyframes ti-twinkle {
  0%, 100% { scale: 1; opacity: .85 }
  50% { scale: 1.22; opacity: 1 }
}

.ti-turn {
  margin: 0;
  width: 420px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: -.03em;

  em {
    color: var(--coral);
    font-style: normal;
  }
}

/* ============================================
   ③ real — 星座そのものは否定して、すぐ本題へ渡す
   ============================================ */
.bk-real {
  justify-content: flex-start;
  padding-top: 96px;
}

.rl-head { font-size: 42px; margin-bottom: 26px }

.rl-card {
  margin-bottom: 14px;
  width: 360px;                   /* ナレーター（小）の手前で止める */

  small {
    display: block;
    margin-top: 4px;
    color: var(--ink-mid);
    font-size: 15px;
    font-weight: 700;
  }
}

.rl-num {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.03em;

  em {
    color: var(--coral);
    font-size: 40px;
    font-style: normal;
    letter-spacing: -.05em;
  }
}

.rl-none {
  margin: 0;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.rl-turn {
  margin: 8px 0 12px;
  width: 360px;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: -.035em;

  em {
    position: relative;
    font-style: normal;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -5px;
      right: -5px;
      bottom: 2px;
      height: 18px;
      border-radius: 6px;
      background: var(--yellow);
      opacity: .85;
    }
  }
}

.rl-src {
  margin: 0;
  width: 356px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* ============================================
   ④ cards — 測り方の細かさを見せてから、結論を出す
   ============================================ */
.bk-cards {
  justify-content: flex-start;
  padding-top: 92px;
}

.cd-head { font-size: 40px; margin-bottom: 26px }

.cd-nums {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  width: 400px;

  li {
    flex: 1;
    padding: 10px 4px 8px;
    border: 2px solid var(--card-line);
    border-radius: 14px;
    background: var(--card);
    text-align: center;
  }

  b {
    display: block;
    color: var(--coral);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.05em;
  }

  span {
    color: var(--ink-mid);
    font-size: 15px;
    font-weight: 700;
  }
}

.cd-ask {
  margin: 0 0 16px;
  width: 400px;
  padding: 11px 14px;
  border-left: 7px solid var(--navy);
  border-radius: 4px 12px 12px 4px;
  background: #e9eef3;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.cd-card {
  width: 360px;
  margin-bottom: 14px;

  p {
    margin: 0;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.36;
    letter-spacing: -.03em;
  }

  em {
    position: relative;
    font-style: normal;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -4px;
      right: -4px;
      bottom: 1px;
      height: 16px;
      border-radius: 6px;
      background: var(--yellow);
    }
  }
}

.cd-src {
  margin: 0;
  width: 356px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* ============================================
   ⑤ versus — 棒2本がほぼ同じ高さで立つ。この回でいちばん強い絵
   ============================================ */
.bk-versus {
  justify-content: flex-start;
  padding-top: 96px;
}

.vs-head { font-size: 42px; margin-bottom: 28px }

.vs-row {
  display: flex;
  gap: 22px;
  width: 380px;                   /* ナレーター（小）の手前で止める */
  margin-bottom: 18px;
}

.vs-col {
  flex: 1;
  text-align: center;

  b {
    display: block;
    margin-top: 8px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
  }
}

.vs-bar {
  position: relative;
  width: 100%;
  height: 190px;
  border-radius: 14px;
  background: var(--track);
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--h) * 100%);
    background: var(--navy);
  }
}

.vs-col.is-me .vs-bar::after { background: var(--coral) }

.vs-gap {
  margin: 0 0 12px;
  width: 380px;
  font-size: 34px;
  font-weight: 900;
  text-align: center;
  letter-spacing: -.04em;

  em {
    position: relative;
    font-style: normal;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -6px;
      right: -6px;
      bottom: 4px;
      height: 20px;
      border-radius: 6px;
      background: var(--yellow);
    }
  }
}

.vs-note {
  margin: 0;
  width: 360px;
  color: var(--ink-mid);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;

  b { color: var(--ink) }
}

/* ============================================
   ⑥ numbers — 現象に名前を与える
   ============================================ */
.bk-numbers {
  justify-content: flex-start;
  padding-top: 100px;
}

.nm-kicker {
  margin: 0 0 10px;
  width: 400px;
  color: var(--coral);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.nm-name {
  margin: 0 0 8px;
  font-size: 50px;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.05em;

  &::after {
    content: "";
    display: block;
    width: 200px;
    height: 7px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--coral);
    rotate: -.5deg;
  }
}

.nm-since {
  margin: 14px 0 20px;
  color: var(--ink-mid);
  font-size: 19px;
  font-weight: 900;
}

.nm-pair {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  width: 340px;                   /* ナレーター（大）の手前で止める */

  li {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 0 12px;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 14px 8px 8px;
    border: 2px solid var(--card-line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 4px 0 rgba(90, 70, 40, .07);
  }

  b {
    font-size: 23px;
    font-weight: 900;
    letter-spacing: -.03em;
  }

  small {
    grid-column: 2;
    color: var(--ink-mid);
    font-size: 16px;
    font-weight: 700;
  }
}

/* 顔だけ見せる。肩から下は丸く切り落とす */
.nm-face {
  grid-row: span 2;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border-radius: 50%;
  background: #efe6d3;

  .ct-svg { translate: 0 5px }
}

.nm-src {
  margin: 0;
  width: 310px;                   /* ナレーターの手前で折り返す */
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* ============================================
   ⑦ caution — 正直な注意点。シリーズの芯。削らない
   ============================================ */
.bk-caution {
  justify-content: flex-start;
  padding-top: 70px;              /* 引用の箱がナレーターの頭（y571）より上で終わる高さ */
  padding-bottom: 176px;
}

.cu-q { font-size: 38px; margin-bottom: 16px }

.cu-half {
  margin: 0 0 12px;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.cu-list {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  width: 400px;

  li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 9px 14px;
    border: 2px solid var(--card-line);
    border-radius: 14px;
    background: var(--card);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.03em;
  }

  i {
    color: var(--teal);
    font-size: 19px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
  }
}

.cu-x {
  margin: 4px 0 2px;
  width: 400px;
  color: var(--coral);
  font-size: 62px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.cu-quote {
  margin-bottom: 12px;
  width: 400px;
  padding: 14px 18px;
  border-left: 8px solid var(--coral);
  border-radius: 4px 16px 16px 4px;
  background: var(--card);
  box-shadow: 0 5px 0 rgba(90, 70, 40, .07);

  p {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.36;
    letter-spacing: -.035em;
  }

  em {
    color: var(--coral);
    font-style: normal;
  }

  small {
    color: var(--ink-mid);
    font-size: 15px;
    font-weight: 700;
  }
}

.cu-src {
  margin: 0;
  width: 310px;                   /* ナレーターの手前で切る */
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}

/* ============================================
   ⑧ ryuichi — 私見の枠。🚨 この回はここが結論そのもの
   ============================================ */
.bk-ryuichi {
  justify-content: flex-start;
  padding-top: 150px;
  padding-bottom: 200px;
}

.ry-note {
  position: relative;
  padding: 32px 26px 28px;
  border-radius: 6px;
  background: #fdf3cf;
  box-shadow: 0 6px 0 rgba(120, 90, 20, .13), 0 18px 34px rgba(90, 70, 40, .12);
  rotate: -1.4deg;
}

/* 上辺に貼ったマスキングテープ */
.ry-tape {
  position: absolute;
  left: 50%;
  top: -18px;
  width: 132px;
  height: 36px;
  translate: -50% 0;
  background: rgba(221, 92, 60, .38);
  rotate: -2.4deg;
  box-shadow: inset 0 0 0 1px rgba(221, 92, 60, .22);
}

.ry-tag {
  margin: 0 0 14px;
  color: var(--coral);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .04em;
}

.ry-body {
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.38;
  letter-spacing: -.04em;

  em {
    position: relative;
    font-style: normal;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -6px;
      right: -6px;
      bottom: 2px;
      height: 22px;
      border-radius: 6px;
      background: rgba(221, 92, 60, .3);
    }
  }
}

.ry-punch {
  margin: 0;
  color: #5c4f3d;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -.03em;
}

/* ============================================
   ⑨ story — オチ。職業の話にここで着地させる
   ============================================ */
.bk-story {
  justify-content: flex-start;
  padding-top: 96px;
}

.st-q {
  margin: 0 0 20px;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -.04em;

  &::after {
    content: "";
    display: block;
    width: 124px;
    height: 7px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--coral);
    rotate: -.5deg;
  }
}

.st-track {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 400px;
  margin-bottom: 20px;
}

.st-man { width: 110px }

.st-bubble {
  flex: 1;
  margin-top: 8px;
  padding: 13px 15px;
  border: 2px solid var(--card-line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 4px 0 rgba(90, 70, 40, .07);

  p {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.34;
    letter-spacing: -.03em;
  }

  b { color: var(--coral); font-size: 25px; letter-spacing: -.05em }

  .st-hit em {
    position: relative;
    font-style: normal;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -4px;
      right: -4px;
      bottom: 1px;
      height: 14px;
      border-radius: 6px;
      background: var(--yellow);
    }
  }

  small {
    color: var(--ink-mid);
    font-size: 14px;
    font-weight: 700;
  }
}

.st-jobs {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  width: 400px;

  li {
    position: relative;
    margin-bottom: 9px;
    padding: 9px 14px 9px 38px;
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 3px 0 rgba(90, 70, 40, .07);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.03em;

    &::before {
      content: "";
      position: absolute;
      left: 14px;
      top: 50%;
      width: 13px;
      height: 13px;
      translate: 0 -50%;
      border-radius: 50%;
      background: var(--teal);
    }
  }
}

.st-src {
  margin: 0;
  width: 400px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* ============================================
   ⑩ end — 着地。責めずに返す。CTAは置かない
   ============================================ */
.bk-end {
  justify-content: flex-start;
  padding-top: 118px;
  padding-bottom: 196px;
}

.en-lead {
  margin: 0 0 22px;
  font-size: 31px;
  font-weight: 900;
  line-height: 1.36;
  letter-spacing: -.04em;
}

.en-punch {
  margin: 0 0 22px;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.26;
  letter-spacing: -.05em;

  em {
    position: relative;
    color: var(--coral);
    font-style: normal;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -6px;
      right: -6px;
      bottom: 6px;
      height: 26px;
      border-radius: 6px;
      background: var(--yellow);
      opacity: .85;
    }
  }
}

.en-last {
  margin: 0;
  width: 330px;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -.03em;
}