/* ===================================================================
   共通レイアウト・パーツ（全ページ共通）
   - ページ枠 / 本文幅
   - セクション見出し（英文SVG + 和文サブ）
   - 菱形ボタン
   - ヘッダー（コーナーメニュー）/ ドロワー
   - フッター
   - ページトップボタン
=================================================================== */

/* -------------------------------------------------------------------
   ページ枠・本文幅
------------------------------------------------------------------- */
.site-chrome {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.site-chrome__bg {
  position: absolute;
  inset: 0;
  background: url('../images/common/bg.png') no-repeat center center / cover;
}

/* 左右フレームは main より後ろの DOM に置き、site-chrome 外で独立した重ね順にする */
.site-chrome-frames {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.site-chrome__frame {
  position: fixed;
  top: 0;
  height: 100vh;
  width: auto;
  max-width: none;
}

.site-chrome__frame--left {
  left: 0;
}

.site-chrome__frame--right {
  right: 0;
  transform: scaleX(-1);
}

.site-chrome__frame--sp {
  display: none;
}

.l-page {
  position: relative;
  max-width: var(--frame-max);
  margin-inline: auto;
  /* clip は横はみ出しを抑えつつスクロールコンテナを作らない（MV の position:sticky を阻害しない） */
  overflow-x: clip;
}

.home .l-page {
  overflow-x: visible;
}

/* 本文幅 1200/1728 = 69.44% をセンタリング（左右ガター 15.28%） */
.l-inner {
  width: var(--content-ratio);
  margin-inline: auto;
}

/* -------------------------------------------------------------------
   セクション共通見出し（英文SVGは左端まで、和文サブは本文左端 15.28%）
------------------------------------------------------------------- */
.sec-head {
  position: relative;
  width: 100%;
}

.sec-head__en {
  display: block;
  width: auto;
  height: 6.4375rem; /* 既定: 1行見出し（NEWS 411x103 等） */
}

.sec-head__ja {
  position: absolute;
  left: var(--gutter-ratio);
  bottom: -1rem;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 2.1875rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--color-text-main);
}

/* 2行見出し（INTRODUCTION / STAFF&CAST） */
.sec-head--tall .sec-head__en {
  height: 12.5rem;
}

/* -------------------------------------------------------------------
   菱形ボタン（VIEW MORE / COMMENT 等）
   ※ 書き出し済みSVG画像を背景で表示。文字は画像内に内包されるため
     ラベルは視覚的非表示にしてスクリーンリーダー用に残す
------------------------------------------------------------------- */
.btn-diamond {
  position: relative;
  display: block;
  width: 25rem; /* 400px */
  max-width: 100%;
  padding: 0; /* button 要素として使う場合の UA パディング除去 */
  aspect-ratio: 400 / 72;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ラベルは視覚的非表示（スクリーンリーダー用に保持） */
.btn-diamond__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 各ボタンの画像（通常／ホバー） */
.btn-diamond--view-more {
  background-image: url('../images/common/view_more.svg');
}

@media (min-width: 1024px) {
  .btn-diamond--view-more:hover {
    background-image: url('../images/common/view_more_hover.svg');
  }
}

@media (max-width: 1023px) {
  .btn-diamond--view-more {
    background-image: url('../images/common/view_more_sp.svg');
  }
}

.btn-diamond--back-to-top {
  background-image: url('../images/common/back_to_top.svg');
}

@media (min-width: 1024px) {
  .btn-diamond--back-to-top:hover {
    background-image: url('../images/common/back_to_top_hover.svg');
  }
}

@media (max-width: 1023px) {
  .btn-diamond--back-to-top {
    background-image: url('../images/common/back_to_top_sp.svg');
  }
}
.btn-diamond--back-to-list {
  background-image: url('../images/common/back_to_list.svg');
}

@media (min-width: 1024px) {
  .btn-diamond--back-to-list:hover {
    background-image: url('../images/common/back_to_list_hover.svg');
  }
}

@media (max-width: 1023px) {
  .btn-diamond--back-to-list {
    background-image: url('../images/common/back_to_list_sp.svg');
  }
}

/* 小サイズ（CAST の COMMENT ボタン 120×32） */
.btn-diamond--sm {
  width: 7.5rem; /* 120px */
  aspect-ratio: 120 / 32;
}

.btn-diamond--comment {
  background-image: url('../images/common/comment.svg');
}

@media (min-width: 1024px) {
  .btn-diamond--comment:hover {
    background-image: url('../images/common/comment_hover.svg');
  }
}

/* -------------------------------------------------------------------
   ヘッダー（右上コーナーメニュー）
------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 4rem;
  right: 4rem;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 金の刺繍リング（nav_circle.svg）＋2本線（ハンバーガー） */
.menu-btn {
  position: relative;
  width: 6.0625rem; /* Figma: 97px */
  height: 6.0625rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
}

.menu-btn__circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

.menu-btn__lines {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.menu-btn__line {
  display: block;
  width: 2.25rem;
  height: 1px;
  background: var(--color-gold);
}

@media (min-width: 1024px) {
  /*
    ホバーで 2本線を開く。gap のアニメーションは再レイアウト＋整数pxスナップで
    がたつくため、gap は静的（10px）のまま transform で各線を ±2px 動かす
    （中心間隔 11px→15px＝従来の gap 14px と同じ見えだが滑らか）。
  */
  .menu-btn__line {
    transition: transform 0.2s ease;
  }

  .menu-btn:hover .menu-btn__line:first-child {
    transform: translateY(-0.125rem); /* -2px */
  }

  .menu-btn:hover .menu-btn__line:last-child {
    transform: translateY(0.125rem);  /* +2px */
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-btn__line {
    transition: none;
  }
}

/* -------------------------------------------------------------------
   ドロワーメニュー（Figma PC:141-5417 / SP:400-7071）
   右からスライドイン。背景は羊皮紙テクスチャ＋左右端に装飾フレーム。
   ナビは右寄せの明朝系（各項目は menu_{slug}.svg をインライン）。
   現在地は赤（--color-accent）でハイライト。
------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.4s;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(150, 110, 40, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s;
}

.drawer.is-open .drawer__backdrop {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 37.5rem;            /* 600px */
  max-width: 100%;
  height: 100%;
  background: url('../images/common/menu_bg.png') center / cover no-repeat;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

/* 装飾フレーム（左右端） */
.drawer__frame {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
  pointer-events: none;
  z-index: 1;
}

.drawer__frame--left {
  left: 0;
}

.drawer__frame--right {
  right: 0;
  transform: scaleX(-1);
}

.drawer__frame--sp {
  display: none;
}

/* 閉じるボタン（金リング＋×） */
.drawer__close {
  position: absolute;
  top: 2rem;
  right: 3rem;
  z-index: 3;
  width: 6rem;              /* 96px */
  height: 6rem;
  padding: 0;
  background: none;
  border: none;
}

.drawer__close-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.drawer__close-x {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.75rem;
  height: 1.75rem;
  transform: translate(-50%, -50%);
}

.drawer__close-x span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold); /* Figma: ×はロープリングと同じ金色（ハンバーガー2本線と統一） */
  transform-origin: center;
}

.drawer__close-x span:first-child {
  transform: rotate(38.27deg);
}

.drawer__close-x span:last-child {
  transform: rotate(-38.27deg);
}

@media (min-width: 1024px) {
  .drawer__close-x span {
    transition: transform 0.2s ease;
  }

  .drawer__close:hover .drawer__close-x span:first-child {
    transform: rotate(30deg);
  }

  .drawer__close:hover .drawer__close-x span:last-child {
    transform: rotate(-30deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer__close-x span {
    transition: none;
  }
}

/* ナビ（右寄せ縦並び） */
.drawer__nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2.5rem;                          /* 40px */
  padding: 20vh 6rem 2.5rem 2.5rem;     /* Figma top 216/1080≒20vh / right 96px */
}

.drawer__link {
  display: block;
  color: var(--color-text-main);
  transition: opacity 0.2s, color 0.2s;
}

@media (min-width: 1024px) {
  .drawer__link:hover {
    opacity: 0.6;
  }
}

.drawer__link.is-active {
  color: var(--color-accent);
}

/* インライン SVG ラベル（高さで字面サイズを制御。Figma 48px 相当） */
.drawer__link svg {
  display: block;
  width: auto;
  height: 2.25rem;
}

/* SVG 未配置時のテキストフォールバック */
.drawer__label-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 3rem;           /* 48px */
  line-height: 1;
}

/* -------------------------------------------------------------------
   フッター（Figma PC:141-10546 / SP:393-1170）
   背景は金色＋上辺ちぎれテクスチャ画像。画像はほぼ平坦な金地のため
   100% 100% で引き伸ばしても破綻しない（上辺の透明な“ちぎれ”は維持）。
   隅飾りは PC のみ footer_deco.svg、SP は footer_bg_sp.png に焼き込み済み。
------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 11;
  flex-shrink: 0;
  width: 100%;
  margin: 5rem auto 0;
  background: url('../images/common/footer_bg.png') center / 100% 100% no-repeat;
}

.footer__inner {
  position: relative;
  width: var(--content-ratio);   /* 本文幅 1200/1728 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;                     /* 32px */
  padding-top: 2.5625rem;        /* 41px：金地上端からバナーまで */
  padding-bottom: 1.5rem;        /* 24px */
}

/* --- バナー（小説／コミック） --- */
.footer__bnr {
  display: flex;
  justify-content: center;
  gap: 1rem;                     /* 16px */
}

.footer__bnr-link {
  display: block;
  width: 49%;                    /* フレーム 1728px 時に 360px */
  max-width: 22.5rem;
  transition: opacity 0.2s;
}

@media (min-width: 1024px) {
  .footer__bnr-link:hover {
    opacity: 0.85;
  }
}

.footer__bnr-img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- ナビゲーション --- */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;                   /* 24px */
}

.footer__nav-link {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 1.25rem;            /* 20px */
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text-white);
  transition: opacity 0.2s;
}

@media (min-width: 1024px) {
  .footer__nav-link:hover {
    opacity: 0.7;
  }
}

.footer__nav-dot {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-white);
}

/* --- プライバシーポリシー / 外部送信 --- */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;                     /* 16px */
}

.footer__legal-link {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 0.875rem;           /* 14px */
  line-height: 1;
  color: var(--color-text-white);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

@media (min-width: 1024px) {
  .footer__legal-link:hover {
    opacity: 0.7;
  }
}

/* --- コピーライト --- */
.footer__copyright {
  font-family: var(--font-ja);
  font-weight: 400;
  font-size: 0.75rem;            /* 12px */
  line-height: 1;
  color: var(--color-text-white);
  text-align: center;
}

/* --- PAGE TOP（右上・ちぎれ上辺をまたぐ） --- */
.footer__pagetop {
  position: absolute;
  top: 0;
  right: var(--gutter-ratio);    /* 15.28% */
  width: 6rem;                   /* 96px */
  transform: translateY(-50%);
  transition: opacity 0.2s;
}

@media (min-width: 1024px) {
  .footer__pagetop:hover {
    opacity: 0.8;
  }
}

.footer__pagetop img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- SHARE（PAGE TOP の下・中心を縦に揃える） --- */
.footer__share {
  position: absolute;
  top: 4.6875rem;                /* 75px */
  right: var(--gutter-ratio);
  width: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;                   /* 8px */
}

.footer__share-label {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 1.25rem;            /* 20px */
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text-white);
}

.footer__x {
  display: block;
  width: 2.5rem;                 /* 40px */
  transition: opacity 0.2s;
}

@media (min-width: 1024px) {
  .footer__x:hover {
    opacity: 0.8;
  }
}

.footer__x img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 隅飾り（PCのみ） --- */
.footer__deco {
  position: absolute;
  bottom: 1rem;                  /* 16px */
  width: 6.1875rem;              /* 99px */
  height: 6.25rem;               /* 100px */
}

.footer__deco--left {
  left: 0.93%;
}

.footer__deco--right {
  right: 0.93%;
  transform: scaleX(-1);
}

/* 1024px 直後の中間幅では、右上の PAGE TOP / SHARE の固定要素が
   バナー列に食い込みやすいため、右側に退避用の余白を確保する。 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .footer__inner {
    box-sizing: border-box;
    padding-right: 9rem;
  }

  .footer__bnr {
    width: 100%;
  }
}

/* -------------------------------------------------------------------
   NEWS カード（トップ NEWS セクション・一覧ページ共通）
------------------------------------------------------------------- */
.news__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3.125rem;
}
@media (max-width: 1023px) {
  .news__list {
    margin-top: 2.4rem;
    gap: 0.5rem;
  }
  .news__list--archive {
    margin-top: 1.5rem;
  }
}

.news__card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 9.375rem;
  padding: 1.8125rem 3.5625rem 1.9375rem;
  border-radius: 0.3125rem;
  background: url('../images/common/news_bg.png') no-repeat center / 100% 100%;
  transition: filter 0.2s;
  overflow: hidden;
}

.news__card::before,
.news__card::after {
  content: '';
  position: absolute;
  top: 1.5rem;
  width: 1.0625rem;
  height: 6.3125rem;
  background: url('../images/common/news_bg_divider.svg') no-repeat center / contain;
  pointer-events: none;
}

.news__card::before {
  left: 1.5rem;
}

.news__card::after {
  right: 1.5rem;
  transform: scaleX(-1);
}

@media (min-width: 1024px) {
  .news__card:hover {
    filter: brightness(1.03);
  }

  /* カードホバーでタイトルに下線をフェードイン（PC のみ）。
     2行クランプ（-webkit-box）でも各行に下線が付く text-decoration 方式を採用し、
     色を transparent → currentColor へトランジションして滑らかに表示する。 */
  .news__card-title {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.15em;
    transition: text-decoration-color 0.3s ease;
  }

  .news__card:hover .news__card-title {
    text-decoration-color: currentColor;
  }
}

.news__date {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.news__card-title {
  margin-top: 0.5rem;
  font-family: var(--font-ja);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-main);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news__empty {
  margin-top: 2.5rem;
  text-align: center;
  color: var(--color-gold);
}

/* -------------------------------------------------------------------
   NEWS 見出し帯（一覧 / 詳細 共通）
   ※ .news-archive__head は l-inner の外（ページ全幅）に置く。
     大「NEWS」をページ左端起点で全文字表示し、「新着情報」を
     本文左端（gutter）に重ねる（Figma 構造を再現）。
------------------------------------------------------------------- */
.news-archive__head {
  position: relative;
}

/* タイトル帯：子は絶対配置 */
.news-archive__title {
  position: relative;
  height: 8.75rem; /* 140px（見出し帯の高さ） */
}

/* 大「NEWS」：ページ左端起点（左右の金枠裏に少し回り込む） */
.news-archive__title-en {
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  height: 6.375rem;
}

/* 「新着情報」：本文左端（gutter）に配置 → NEWS の右側に重なる */
.news-archive__title-ja {
  position: absolute;
  left: var(--gutter-ratio); /* 15.28%（本文左端） */
  bottom: 0.1875rem; /* 3px */
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 2.1875rem; /* 35px */
  line-height: 1;
  color: var(--color-text-main);
}

/* -------------------------------------------------------------------
   パンくず（一覧 / 詳細 共通）
------------------------------------------------------------------- */
.breadcrumb {
  position: absolute;
  right: var(--gutter-ratio); /* 15.28%（本文右端） */
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem; /* 16px */
  line-height: 1;
}

.breadcrumb__link {
  color: var(--color-beige);
  transition: color 0.2s;
}

@media (min-width: 1024px) {
  .breadcrumb__link:hover {
    color: var(--color-gold);
  }
}

.breadcrumb__current {
  color: var(--color-gold);
}

/* 区切り（右向きシェブロン）= 線アイコンを mask で描画し、色は背景色で制御する。
   既定は親リンクの文字色（beige）。親が2つ以上ある場合、親同士をつなぐ矢印は
   この beige になり、子（現在ページ）へつながる矢印だけ金色を維持する。 */
.breadcrumb__sep {
  width: 7px;
  height: 9px;
  background-color: var(--color-beige);
  -webkit-mask: url('../images/common/breadcrumb_arrow.svg') no-repeat center / contain;
  mask: url('../images/common/breadcrumb_arrow.svg') no-repeat center / contain;
}

/* 現在ページ（子）の直前の矢印だけ金色（= 現在ページの文字色）にする */
.breadcrumb__sep:has(+ .breadcrumb__current) {
  background-color: var(--color-gold);
}

/* -------------------------------------------------------------------
   サブページの上部余白（fixed header 分の確保）
------------------------------------------------------------------- */
.site-main--sub {
  padding-top: calc(var(--header-h) + 1.25rem);
}

/* ===================================================================
   レスポンシブ（SP: ≤1023px）
=================================================================== */
@media (max-width: 1023px) {
  .site-chrome__bg {
    background-image: url('../images/common/bg_sp.png');
  }

  .site-chrome__frame {
    height: 100vh;
  }

  .site-chrome__frame--pc {
    display: none;
  }

  .site-chrome__frame--sp {
    display: block;
  }

  .l-inner {
    width: auto;
    padding-inline: 1.25rem;
  }

  .sec-head__en {
    height: 2.6rem;
  }

  .sec-head--tall .sec-head__en {
    height: 7.5rem;
  }

  .sec-head__ja {
    left: 1.25rem;
    font-size: 1.5rem;
  }

  /*
    SP: nav フレーム(73px)を画面右上コーナーに密着させ、48px の円ボタンを
    フレーム左下に寄せて Figma の inset（画面端から上・右とも 25px）に一致させる。
  */
  .header {
    top: 0;
    right: 0;
    width: var(--header-h-sp);
    height: var(--header-h-sp);
    justify-content: flex-start;
    align-items: flex-end;
  }

  .menu-btn {
    width: 3rem; /* Figma SP 円ボタン 48px */
    height: 3rem;
  }

  .menu-btn__lines {
    gap: 0.3125rem; /* 5px（PC 10px を円サイズ比 48/97 で換算） */
  }

  .menu-btn__line {
    width: 1.125rem; /* 18px（PC 線36px / 円97px=37% を円48px に適用） */
  }

  .btn-diamond {
    width: 15rem;
    aspect-ratio: 240 / 48;
  }

  /* --- NEWS カード（SP） --- */
  .news__card {
    min-height: 6.25rem;
    padding: 0.5625rem 1.625rem .875rem;
    border-radius: 0.1875rem;
    background-image: url('../images/common/news_bg_sp.png');
  }

  .news__card::before,
  .news__card::after {
    top: 1.375rem;
    width: 0.625rem;
    height: 3.5rem;
  }

  .news__card::before {
    left: 0.5rem;
  }

  .news__card::after {
    right: 0.5rem;
  }

  /* --- NEWS 日付・タイトル（SP）：Figma 393:2515 / 393:2516 ---
     line-height は PC と共通（日付 normal・タイトル 1.6）で Figma と一致。
     SP は文字サイズのみ縮小（日付 18px・タイトル 16px）。 */
  .news__date {
    font-size: 1.125rem; /* 18px */
    line-height: 1.4;
  }

  .news__card-title {
    margin-top: 0.25rem; /* 4px（Figma: 日付ボックス約22px + 余白4px → 上端26px） */
    font-size: 1rem; /* 16px */
  }

  /* --- NEWS 見出し帯（SP）：NEWS 56px。パンくずはタイトル下に通常フロー --- */
  .news-archive__title {
    height: 3.5rem; /* 56px */
  }

  .news-archive__title-en {
    height: 3.5rem; /* 56px */
  }

  .news-archive__title-ja {
    left: 1.25rem; /* SP 本文左端（l-inner padding） */
    bottom: 0;
    font-size: 1rem; /* 16px */
  }

  .breadcrumb {
    position: static;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-right: 1.25rem; /* 本文右端に合わせる */
    font-size: 0.75rem; /* 12px */
  }

  .breadcrumb__sep {
    width: 5px;
    height: 6px;
  }

  /* --- ドロワー（SP: Figma 400-7071 / 390px 基準） --- */
  .drawer__panel {
    width: 82.05%;           /* Figma パネル 320/390。左の背景帯 70px・左装飾フレーム x70 に一致 */
  }

  .drawer__frame--pc {
    display: none;
  }

  .drawer__frame--sp {
    display: block;
  }

  /* 閉じるボタン: Figma 400-8817 は 48px の円を画面端から上・右 25px に配置（ハンバーガーと同一） */
  .drawer__close {
    top: 1.5625rem;          /* 25px */
    right: 1.5625rem;        /* 25px */
    width: 3rem;             /* 円48px */
    height: 3rem;
  }

  .drawer__close-x {
    width: 1.25rem;
    height: 1.25rem;
  }

  .drawer__nav {
    gap: 2rem;                               /* 32px */
    /* Figma: 上 113px固定 / 右 42px(390−348) / 下 40px / 左 24px */
    padding: 7.0625rem 2.625rem 2.5rem 1.5rem;
  }

  .drawer__link svg {
    height: 1.3125rem;       /* Figma 28px 相当（36px×28/48=21px） */
  }

  .drawer__label-text {
    font-size: 1.75rem;      /* 28px */
  }

  /* --- フッター（SP: Figma 393-1170 / 390px 基準） --- */
  .footer {
    margin-top: 6.25rem;
    background-image: url('../images/common/footer_bg_sp.png');
  }

  .footer__inner {
    width: auto;
    padding-inline: 7.18%;       /* SP 左右マージン 28/390 */
    padding-top: 1.25rem;
    padding-bottom: 1.75rem;
    gap: 1.25rem;
  }

  /* バナーは縦積み・左寄せ */
  .footer__bnr {
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    gap: 0.5rem;
    width: 74.3%;                /* 248/(390-56) */
    max-width: 15.5rem;          /* 248px */
  }

  .footer__bnr-link {
    width: 100%;
    max-width: none;
  }

  /* ナビは左揃え・2行固定（Figma 388:4718：左 7.18% 起点で wrap、行内のみドット）。
     1行目: TOP・NEWS・INTRODUCTION ／ 2行目: CHARACTER・STAFF&CAST・BOOKS。
     INTRODUCTION と CHARACTER の間（3番目のドット）を全幅・不可視にして
     強制改行に転用し、Figma の行構成とドット数（各行2個・計4個）を再現する。 */
  .footer__nav {
    justify-content: flex-start;
    /* 行間は 4px。強制改行用ドット（高さ0の中間行）を挟むため行間が2回分入り、
       1行目と2行目の可視間隔が Figma 通り 8px になる。列間は 16px。 */
    gap: 0.25rem 1rem;
  }

  .footer__nav-dot:nth-of-type(3) {
    flex-basis: 100%;
    width: 0;
    height: 0;
    background: none;
  }

  .footer__nav-link,
  .footer__share-label {
    font-size: 1rem;            /* 16px */
  }

  /* コピーライト（Figma 388:4717：9px）。text-align は既存の中央を維持 */
  .footer__copyright {
    font-size: 0.5625rem;       /* 9px */
  }

  /* PAGE TOP / SHARE は右上（中心を縦に揃える） */
  .footer__pagetop {
    width: 4.5rem;              /* 72px */
    right: 7.18%;
  }

  .footer__share {
    top: 5.9375rem;            /* 95px */
    right: 12.31%;
    width: 2rem;
    gap: 0.375rem;
  }

  .footer__x {
    width: 2rem;              /* 32px */
  }

  /* 隅飾りは背景画像に焼き込み済み */
  .footer__deco {
    display: none;
  }

  .site-main--sub {
    padding-top: calc(var(--header-h-sp) + 1.25rem);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer {
    margin-top: 5rem;
    background-image: url('../images/common/footer_bg.png');
  }

  .footer__inner {
    width: min(88%, 52rem);
    padding-inline: 0;
    padding-top: 2.25rem;
    padding-right: 7rem;
    padding-bottom: 1.5rem;
    box-sizing: border-box;
    gap: 1.5rem;
  }

  .footer__bnr {
    flex-direction: row;
    align-items: center;
    align-self: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    gap: 0.75rem;
  }

  .footer__bnr-link {
    flex: 1 1 0;
    width: auto;
    max-width: 21rem;
  }

  .footer__nav {
    justify-content: center;
    gap: 0.75rem 1.25rem;
  }

  .footer__nav-dot:nth-of-type(3) {
    flex-basis: auto;
    width: 4px;
    height: 4px;
    background: var(--color-text-white);
  }

  .footer__legal {
    justify-content: center;
  }

  .footer__copyright {
    font-size: 0.6875rem;
  }

  .footer__pagetop {
    width: 5rem;
    right: max(2rem, calc((100% - min(88%, 52rem)) / 2));
  }

  .footer__share {
    top: 5.125rem;
    right: max(3.5rem, calc((100% - min(88%, 52rem)) / 2 + 1.5rem));
    width: 3rem;
  }

  .footer__share-label {
    font-size: 1rem;
  }
}