@charset "UTF-8";

/* ==========================================================================
   SEGA SAMMY PHOENIX — Page: NEWS (一覧 / 詳細)
   Figma: Olrvdnxd3NwLbhAQc64Qtl
     ・お知らせ一覧 node 50:15375
     ・お知らせ詳細 node 50:14534
   いずれも PC 基準 1512px。
   HEADER / section-head / tag / news-card / NEWS / MOVIE / CTA / FOOTER は
   components.css の共通実装をそのまま使う。ここには NEWS 固有の
   レイアウトとタイポグラフィだけを置く。
   （統合フェーズで共通化を検討するため components.css へは移さない）
   ========================================================================== */

.page-news {
  /* 見出し「NEWS」の左インセット。Figma の solid NEWS は x = 281。
     共通トークン --head-inset ( 226px ) より広いため、このページだけ別に持つ。 */
  --news-head-inset: min(18.58vw, 281px);
  /* パンくず。Figma: x = 237 */
  --news-crumb-inset: min(15.67vw, 237px);
  /* カードグリッド。Figma: x = 121 〜 1371 ( 幅 1250 = 408 × 3 + 13 × 2 ) */
  --news-grid-inset-s: min(8vw, 121px);
  --news-grid-inset-e: min(9.33vw, 141px);
  /* 詳細ページのコンテナ。Figma: x = 130 〜 1382 ( 幅 1252 ) */
  --news-detail-gutter: min(8.6vw, 130px);
  /* 本文カラム 888 / 余白 59 / サイドカラム 305 */
  --news-detail-gap: min(3.9vw, 59px);
  /* 記事カード ( 白 ) の内側余白。Figma: 50 + 28.151 = 78.151 */
  --news-article-pad-x: clamp(20px, 5.17vw, 78.151px);
  --news-article-pad-t: clamp(32px, 3.72vw, 56.302px);
  --news-article-pad-b: clamp(48px, 6.21vw, 93.837px);
  /* 記事本文の色 ( Figma: #4c4a4a ) */
  --news-article-text: #4c4a4a;
}

/* --------------------------------------------------------------------------
   赤グラデ帯 ( 見出し 〜 一覧グリッド / 記事本文 を包む )
   Figma: Rectangle 120 = 0 〜 1707。角度は書き出し画像の等色線から実測して
   208deg。カラーストップと 9% の黒レイヤーは共通グラデーションと同一。
   -------------------------------------------------------------------------- */
.news-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Figma: header 下端 102 → NEWS ゴースト見出し 133 */
  padding-top: calc(var(--header-h) + 31px);
  /* Figma: グリッド下端 1678 → MOVIE 1863 */
  padding-bottom: clamp(72px, 12.23vw, 185px);
}

.news-band--detail {
  /* Figma: 記事カード下端 1649 → 帯下端 1707 */
  padding-bottom: clamp(40px, 3.84vw, 58px);
}

.news-band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #000;
  background-image: var(--grad-subpage);
  /* グラデーションの落ち方を帯の高さから切り離し、Figma の Rectangle 120
     ( 1512 × 1708 ) と同じ幾何にそろえる。帯が長くなっても赤の減衰位置は
     動かない。--r は共通トークンの 1512 基準スケール。 */
  background-size: 100% max(760px, calc(1708px * var(--r)));
  background-repeat: no-repeat;
}

/* NOISE。TOP / MISSION と同じタイルを等倍で 1 枚だけ敷く。 */
.news-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: var(--noise-tile);
  background-repeat: repeat;
}

/* 一覧ページのカード上まで重なる火の粉 ( Figma: 58:16966 / y = 168 ) */
.news-band__embers {
  top: calc(168 * var(--r));
  z-index: 1;
  height: max(
    calc(1749 * var(--r)),
    calc(100% - 168 * var(--r) + 32px)
  );
}

/* NEWS originally repeated the same rotated artwork as four horizontal
   bands. That made both the repeated motif and the band edges visible near
   the bottom. Use one continuous, naturally oriented image over the whole
   field instead; the extra partial nodes remain hidden for other pages that
   still use the shared component's original Figma composition. */
.news-band__embers .ember-field__tile {
  display: none;
}

.news-band__embers .ember-field__tile--1 {
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
}

.news-band__embers .ember-field__tile--1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: translateX(5%) scale(1.2);
  transform-origin: center bottom;
}

/* --------------------------------------------------------------------------
   ページ見出し ( 共通 section-head を左インセットだけ差し替えて使う )
   -------------------------------------------------------------------------- */
.news-hero__head {
  --head-inset: var(--news-head-inset);
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   カテゴリー絞り込み ( 共通 .tag-list / .tag をそのまま使う )
   -------------------------------------------------------------------------- */
.news-list__filter {
  /* Figma: パンくず下端 309 → タグ 351 */
  margin-top: clamp(24px, 2.78vw, 42px);
}

/* --------------------------------------------------------------------------
   一覧グリッド ( 3 カラム )
   共通 .news-card はカルーセル用に固定幅なので、ここでだけ幅を開放する。
   -------------------------------------------------------------------------- */
.news-list__grid {
  --news-card-radius: 7px;
  --news-card-w: 100%;
  --news-card-media-h: calc(var(--news-card-w) * 272.756 / 408);
  --news-card-body-h: clamp(96px, 7.27vw, 110px);
  --news-card-h: calc(var(--news-card-media-h) + var(--news-card-body-h));
  --news-card-hover-lift: 3px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Figma の行ピッチ 427.5 に合わせた実効ギャップ ( カード高が可変のため ) */
  column-gap: min(.86vw, 13px);
  row-gap: clamp(32px, 3.9vw, 59px);
  /* Figma: タグ下端 384.6 → 1 行目 465 */
  margin-top: clamp(32px, 5.32vw, 80.4px);
  padding-inline: var(--news-grid-inset-s) var(--news-grid-inset-e);
}

.news-list__item {
  display: grid;
}

.news-list__empty {
  margin: clamp(44px, 5.3vw, 80px) var(--news-grid-inset-e) 0 var(--news-grid-inset-s);
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.06vw, 16px);
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-white);
}

.news-list__grid .news-card,
.news-side__list .news-card {
  flex: 1 1 auto;
  width: 100%;
  scroll-snap-align: none;
}

/* Pagination -------------------------------------------------------------- */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(48px, 6vw, 88px);
  padding-inline: var(--gutter);
}

.news-pagination__pages {
  display: flex;
  align-items: center;
  gap: 10px;
}

.news-pagination__page,
.news-pagination__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
  transition:
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-premium);
}

.news-pagination__page.is-current {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-red);
}

.news-pagination__arrow.is-disabled {
  opacity: .28;
}

/* --------------------------------------------------------------------------
   詳細 : 本文カラム + サイドカラム
   Figma: コンテナ 1252 / 本文 888 / gap 59 / サイド 305
   -------------------------------------------------------------------------- */
.news-detail {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 888fr) minmax(0, 305fr);
  align-items: start;
  gap: var(--news-detail-gap);
  /* Figma: 「お知らせ」下端 251.7 → 記事カード上端 307 */
  margin-top: clamp(28px, 3.66vw, 55.3px);
  padding-inline: var(--news-detail-gutter);
}

/* --------------------------------------------------------------------------
   記事カード ( 白 )
   Figma: bg rgba(255,255,255,.95) / radius 10
   高さは固定せず、本文量に応じて伸びる通常フロー。
   -------------------------------------------------------------------------- */
.news-article {
  border-radius: 10px;
  background: rgba(255, 255, 255, .95);
  padding: var(--news-article-pad-t) var(--news-article-pad-x) var(--news-article-pad-b);
  color: var(--color-black);
}

.news-article__head {
  padding-top: clamp(28px, 3.1vw, 46.919px);
}

.news-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14.076px;
}

.news-article__cat {
  display: inline-flex;
  align-items: center;
  padding: 2.346px 11.73px;
  border: 1.173px solid var(--color-black);
  border-radius: 999px;
  font-family: var(--font-jp);
  font-size: clamp(11px, .78vw, 11.73px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .025em;
  white-space: nowrap;
}

.news-article__date {
  font-family: var(--font-en);
  font-size: clamp(12px, .93vw, 14.076px);
  font-weight: 400;
  line-height: 1.333;
}

.news-article__title {
  padding-top: clamp(12px, 1.24vw, 18.767px);
  font-family: var(--font-jp);
  font-size: clamp(21px, 1.86vw, 28.189px);
  font-weight: 700;
  line-height: 1.716;
  letter-spacing: -.0312em;
}

/* メインビジュアル ( Figma: 731.929 × 411.71 = 16:9 ) */
.news-article__visual {
  padding-top: clamp(20px, 2.48vw, 37.535px);
}

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

/* 本文 ( note.com 風: line-height 1.8 / 段落間隔は行間とほぼ同幅 ) */
.news-article__body {
  padding-top: clamp(28px, 3.1vw, 46.919px);
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.11vw, 16.7674px);
  font-weight: 500;
  line-height: 1.8;
  color: var(--news-article-text);
}

.news-article__body > * + * {
  margin-top: clamp(24px, 2.2vw, 32px);
}

.news-article__body > :first-child {
  margin-top: 0;
}

/* :where() で詳細度を0にし、p タグ指定子が > * + * の margin-top を
   上書きしないようにする ( 上書きすると段落間の余白が消える ) */
:where(.news-article__body p) {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* WordPressエディタの空行で生成される空段落を非表示にし、二重の余白を防ぐ */
.news-article__body p:empty {
  display: none;
}

.news-article__body a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}

.news-article__body h1,
.news-article__body h2,
.news-article__body h3,
.news-article__body h4,
.news-article__heading {
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--color-black);
  text-wrap: pretty;
}

.news-article__body h1 {
  margin-top: clamp(42px, 4.96vw, 75px);
  padding-bottom: clamp(12px, 1.06vw, 16px);
  border-bottom: 2px solid rgba(185, 0, 12, .72);
  font-size: clamp(24px, 2.12vw, 32px);
  line-height: 1.52;
}

.news-article__body h2,
.news-article__heading {
  margin-top: clamp(36px, 4.4vw, 64px);
  padding-bottom: clamp(9px, .66vw, 10px);
  border-bottom: 1px solid rgba(76, 74, 74, .28);
  font-size: clamp(20px, 1.55vw, 23px);
  line-height: 1.65;
}

.news-article__body h3 {
  position: relative;
  margin-top: clamp(32px, 3.44vw, 52px);
  padding-left: 16px;
  font-size: clamp(18px, 1.35vw, 20.5px);
  line-height: 1.7;
}

.news-article__body h3::before {
  content: "";
  position: absolute;
  top: .58em;
  left: 0;
  width: 6px;
  height: 1.1em;
  border-radius: 999px;
  background: var(--color-red);
}

.news-article__body h4 {
  margin-top: clamp(28px, 2.65vw, 40px);
  font-size: clamp(16.5px, 1.22vw, 18.5px);
  line-height: 1.8;
}

.news-article__body :is(ul, ol) {
  margin-left: 0;
  padding-left: 1.5em;
}

.news-article__body ul {
  list-style: disc;
}

.news-article__body ol {
  list-style: decimal;
}

.news-article__body li {
  padding-left: .2em;
}

.news-article__body li::marker {
  color: var(--color-red);
  font-weight: 700;
}

.news-article__body li + li {
  margin-top: 10px;
}

.news-article__body blockquote {
  margin-inline: 0;
  padding: clamp(18px, 2.12vw, 32px) clamp(20px, 2.38vw, 36px);
  border-left: 4px solid var(--color-red);
  background: rgba(185, 0, 12, .055);
  color: #3a3838;
}

.news-article__body blockquote > * + * {
  margin-top: 12px;
}

.news-article__body figcaption,
.news-article__body .wp-element-caption {
  margin-top: 10px;
  font-size: clamp(12px, .93vw, 14px);
  line-height: 1.7;
  color: #686868;
}

.news-article__body hr {
  height: 1px;
  margin-block: clamp(36px, 4.23vw, 64px);
  border: 0;
  background: rgba(76, 74, 74, .22);
}

.news-article__section {
  margin-top: clamp(34px, 4vw, 58px);
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: 8px;
  background: rgba(185, 0, 12, .055);
}

.news-article__section .news-article__heading {
  margin-top: 0;
}

.news-article__section > * + * {
  margin-top: 12px;
}

.news-article__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 760px;
  object-fit: contain;
}

.news-article__body figure {
  margin-inline: 0;
}

/* 画像はキャプションと一体の区切りとして、段落より広めの余白にする */
.news-article__body > figure {
  margin-top: clamp(32px, 3.2vw, 48px);
}

.news-article__body > figure + * {
  margin-top: clamp(32px, 3.2vw, 48px);
}

.news-article__body img {
  max-width: 100%;
  height: auto;
}

.news-article__table-scroll,
.news-article__body > div {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.news-article__body table,
.news-article__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .9em;
  line-height: 1.75;
}

.news-article__body th,
.news-article__body td,
.news-article__table th,
.news-article__table td {
  padding: 12px 14px;
  border: 1px solid rgba(76, 74, 74, .22);
  vertical-align: top;
}

.news-article__body th,
.news-article__body td:first-child,
.news-article__table td:first-child {
  background: rgba(185, 0, 12, .05);
  font-weight: 700;
}

.news-article__body td:first-child,
.news-article__table td:first-child {
  width: 26%;
}

.news-article__back {
  margin-top: clamp(36px, 4.04vw, 61px);
}

.news-article__back-link {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.55vw, 23px);
  width: fit-content;
  font-family: var(--font-jp);
  font-size: clamp(13px, .93vw, 14px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-red);
  letter-spacing: .06em;
  white-space: nowrap;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-premium);
}

.news-article__back-icon {
  flex: 0 0 auto;
  width: clamp(44px, 3.51vw, 53px);
  height: clamp(44px, 3.51vw, 53px);
  transform: rotate(180deg);
}

.news-article__source {
  flex-basis: 100%;
  margin-top: 6px;
  font-family: var(--font-jp);
  font-size: 11px;
  color: #686868;
}

.news-article__source a {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* --------------------------------------------------------------------------
   サイドカラム ( 関連記事 )
   Figma: カード幅 305 = 共通カード 408 の 0.7475 倍
   -------------------------------------------------------------------------- */
.news-side__title {
  font-family: var(--font-jp);
  font-size: clamp(18px, 1.44vw, 21.767px);
  font-weight: 700;
  line-height: 1.724;
}

.news-side__list {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.14vw, 17.19px);
  /* Figma: 「関連記事」下端 344.5 → 1 枚目 366 */
  margin-top: clamp(12px, 1.42vw, 21.5px);
}

.news-side__empty {
  margin-top: clamp(12px, 1.42vw, 21.5px);
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
  color: rgba(255, 255, 255, .76);
}

.news-related-band {
  padding-top: clamp(72px, 8.4vw, 127px);
  padding-bottom: clamp(64px, 6.6vw, 100px);
}

.news-related-band .tag-list {
  margin-top: clamp(24px, 2.78vw, 42px);
}

.news-related-band .news__carousel {
  margin-top: clamp(32px, 3.9vw, 59px);
  padding-left: var(--news-grid-inset-s);
}

.news-related-band .news__list {
  padding-left: 0;
}

.news-card--sm .news-card__body {
  gap: 9.602px;
  padding: 16.944px 11.296px;
}

.news-side__list .news-card--sm {
  --news-card-radius: 13px;
}

.news-side__list .news-card--sm .news-card__link,
.news-side__list .news-card--sm .news-card__media {
  overflow: hidden;
  border-radius: 13px;
  clip-path: inset(0 round 13px);
}

.news-side__list .news-card--sm .news-card__media img {
  display: block;
  border-radius: inherit;
}

.news-card--sm .news-card__title {
  font-size: clamp(12px, .92vw, 13.961px);
  letter-spacing: -.0126em;
}

.news-card--sm .news-card__date {
  font-size: max(9.037px, .6vw);
}

/* --------------------------------------------------------------------------
   HOVER ( 指定デバイスのみ )
   カードの hover は components.css の .news-card__link に実装済みのものを
   そのまま利用する。ここではこのページ固有の要素だけ足す。
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .news-pagination a:hover {
    border-color: var(--color-white);
    background: var(--color-white);
    color: var(--color-red);
    transform: translateY(-2px);
  }

  .news-article__back-link:hover {
    opacity: .82;
    transform: translateX(-3px);
  }
}

.news-article__back-link:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

/* 〜 1024px : サイドカラムを本文の下へ。一覧は 2 カラム。 */
@media (max-width: 1024px) {
  .page-news {
    --news-detail-gutter: min(6.5vw, 64px);
  }

  .news-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(12px, 1.6vw, 16px);
    /* タイトル2行分の高さを確保し、2行目が見切れるのを防ぐ。 */
    --news-card-body-h: 124px;
  }

  .news-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 5vw, 56px);
  }

  .news-side__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 20px);
  }

  .news-card--sm .news-card__body {
    gap: 12.844px;
    padding: 18px 14px;
  }

  .news-card--sm .news-card__title {
    font-size: clamp(13px, 1.5vw, 15px);
  }

  .news-card--sm .news-card__date {
    font-size: 11px;
  }
}

/* 〜 768px : 共通トークンに合わせて左右余白を 24px に揃える */
@media (max-width: 768px) {
  .page-news {
    --news-head-inset: var(--head-inset);
    --news-crumb-inset: var(--gutter);
    --news-grid-inset-s: var(--gutter);
    --news-grid-inset-e: var(--gutter);
    --news-detail-gutter: var(--gutter);
    --news-article-pad-x: clamp(18px, 4.6vw, 32px);
    --news-article-pad-t: 28px;
    --news-article-pad-b: 36px;
  }

  .news-band {
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: clamp(56px, 12vw, 96px);
  }

  .news-band--detail {
    padding-bottom: 40px;
  }

  .news-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
    /* .news__carousel の 768px 以下と同じ値。タイトル2行分の高さを確保し、
       2行目が body の overflow: hidden で見切れるのを防ぐ。 */
    --news-card-body-h: 124px;
  }

  .news-side__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-article__head,
  .news-article__body {
    padding-top: 24px;
  }

  .news-article__title {
    line-height: 1.55;
  }

  .news-article__body {
    line-height: 2;
  }

  .news-article__back {
    margin-top: 32px;
  }

  .news-article__body table,
  .news-article__table {
    min-width: 100%;
  }
}

/* 〜 560px : 1 カラム */
@media (max-width: 560px) {
  .news-list__grid,
  .news-side__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .news-article__back-link:hover {
    transform: none;
  }
}