/* 訴求漫画の独立ページ（/report/manga/）。
   紙面そのものを主役にするので、周りは徹底して静かにする。 */

.manga { max-width: 980px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 20px 104px; }

.manga__eyebrow { margin: 0 0 10px; color: var(--p); font: 700 13px/1.5 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.manga h1 { margin: 0; color: var(--fg); font-size: clamp(34px, 5.5vw, 56px); line-height: 1.12; letter-spacing: -.03em; }
.manga__episode { margin: 12px 0 0; color: var(--fg-2); font-size: clamp(16px, 2vw, 19px); font-weight: 700; }
.manga__lead { max-width: 680px; margin: 20px 0 0; color: var(--fg-2); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.95; }

.manga__breadcrumb { display: flex; align-items: center; gap: 6px; margin: 0 0 28px; color: var(--fg-2); font-size: 13px; }
.manga__breadcrumb a { color: var(--fg-2); text-decoration: none; }
.manga__breadcrumb a:hover { color: var(--p); }
.manga__breadcrumb .mi { font-size: 16px; }

.manga__head { padding-bottom: 32px; border-bottom: 1px solid var(--line); }

.manga__meta { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 28px 0 0; }
.manga__meta div { margin: 0; }
.manga__meta dt { margin: 0 0 4px; color: var(--fg-3, var(--fg-2)); font-size: 12px; letter-spacing: .04em; }
.manga__meta dd { margin: 0; color: var(--fg); font-size: 15px; font-weight: 700; }

.manga__note,
.manga__wip { display: flex; align-items: flex-start; gap: 8px; margin: 28px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--fg-2); font-size: 13px; line-height: 1.8; background: #fbfbfa; }
.manga__note .mi,
.manga__wip .mi { flex: none; font-size: 18px; }

/* 紙面 */
.manga__pages { display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 5vw, 56px); margin-top: clamp(36px, 5vw, 60px); }
.manga-page { margin: 0; width: 100%; max-width: 760px; scroll-margin-top: 24px; }
.manga-page img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; background: #fff; box-shadow: 0 18px 44px rgba(15, 23, 42, .10); }
.manga-page figcaption { margin: 10px 0 0; color: var(--fg-2); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }

.manga__related { margin: 44px 0 0; padding-top: 28px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: 14px; line-height: 1.9; }

/* 一覧 */
.manga__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 48px; }
.manga-card { display: block; padding: 26px; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.manga-card:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(15, 23, 42, .09); }
.manga-card__tag { display: inline-flex; padding: 5px 10px; border-radius: 999px; color: #0f6f77; background: #ddf3f5; font-size: 12px; font-weight: 700; }
.manga-card h2 { margin: 18px 0 6px; font-size: 24px; line-height: 1.3; }
.manga-card__episode { margin: 0 0 12px; color: var(--fg-2); font-size: 13px; font-weight: 700; }
.manga-card p { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.85; }
.manga-card__meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--p); font-size: 13px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .manga-card { transition: none; }
  .manga-card:hover { transform: none; }
}

/* モバイルは section-menu__trigger（ページメニュー起動ボタン）が position: fixed で
   画面上部に重なる。.manga__content の先頭要素（パンくず）には report-menu.css の
   `.manga__content > :first-child { padding-top: var(--space-6) }`（24px、PC向けの
   余白）しか効いておらず、ボタン下端（約120px）より上に食い込んでいた。
   tax-firm/enterprise-readiness など .fund-page__content > .pg-breadcrumb が
   同じ場面で使っている var(--space-20) まで押し下げて重なりを解消する。 */
@media (max-width: 980px) {
  main.manga .manga__content > .pg-breadcrumb {
    padding-block-start: var(--space-20);
  }
}