/* ==========================================================================
   YöuGu 中ページ (v23.7)
   detail 外枠 (header / pattern「DESIGN」/ footer / breadcrumb) は共通流用。
   このページ固有: ヒーロー(赤・キャラ) / キャスト名(shuei-light) / Almost here…
   ※ yougu.css は YöuGu ページのみ読み込み → ここでの上書きは当ページ限定
   ========================================================================== */

/* ヒーロー: yougu-top.png をフルブリードで (赤背景込みの画像) */
.yougu-hero {
  width: 100%;
  margin-top: 24px;                 /* DESIGN パターン → hero (PC) */
  background-color: #e64646;        /* 画像の赤 (上下端の保険) */
  overflow: hidden;
}
.yougu-hero__img {
  display: block;
  width: 100%;
  height: auto;
}

/* キャスト名 (DNP秀英アンチック + .shuei-light で細らせ) */
.yougu-cast-sec {
  display: flex;
  justify-content: center;
  padding: 44px 20px 0;             /* hero下端 → cast = 44px */
}
.yougu-cast {
  --shuei-light-color: #f7f6f6;     /* 明色背景で縁取り → 細らせ */
  font-family: var(--font-shuei-anti);
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-wine-typo);
}
.yougu-cast__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 30px;                  /* 名前間 = 60px、区切り線はその中央 */
  line-height: 1.25;
}
/* 区切り線: 2pt × H36px、黄土色 #e1b41f (60pxギャップの中央) */
.yougu-cast__item + .yougu-cast__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 36px;
  background-color: #e1b41f;
}
.yougu-cast__roman { font-size: 17px; letter-spacing: 0.04em; }
.yougu-cast__kana  { font-size: 12px; letter-spacing: 0.1em; }

/* Almost here… (Goudy 48pt) */
.yougu-almost-sec {
  padding: 60px 20px 0;             /* cast → Almost here = 60px */
  text-align: center;
}
.yougu-almost {
  font-family: var(--font-goudy);
  font-size: 48px;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-wine-typo);
  margin: 0;
}

/* Almost here → パンくず(下) = 60px (breadcrumb margin-top を当ページのみ上書き) */
.detail-breadcrumb { margin-top: 60px; }

/* TAB (≤1024) */
@media (max-width: 1024px) {
  .yougu-almost { font-size: 40px; }
  .yougu-cast__item { padding: 0 24px; }
}

/* SP (≤481) — PCに準じて縮小 */
@media (max-width: 481px) {
  .yougu-hero { margin-top: 12px; }            /* DESIGN → hero = 12px */
  .yougu-cast-sec { padding: 28px 20px 0; }    /* hero → cast = 28px */
  .yougu-almost-sec { padding: 40px 20px 0; }  /* cast → Almost = 40px */
  .detail-breadcrumb { margin-top: 40px; }     /* Almost → パンくず = 40px */
  .yougu-cast { flex-wrap: nowrap; }
  .yougu-cast__item { padding: 0 14px; }
  .yougu-cast__item + .yougu-cast__item::before { height: 28px; }
  .yougu-cast__roman { font-size: 15px; }
  .yougu-cast__kana  { font-size: 11px; }
  .yougu-almost { font-size: 31px; }
}