@charset "UTF-8";

/* ==========================================================================
   SEGA SAMMY PHOENIX — Page: PARTNER
   Figma: Olrvdnxd3NwLbhAQc64Qtl / node 50:14951 (PC base 1512px)
   PARTNER ページ固有のセクションのみ。
   HEADER / section-head / NEWS / MOVIE / CTA / FOOTER は components.css を参照。
   ========================================================================== */

.page-partner {
  /* Figma: 白カード x52 / w1404 → 左右余白 54px */
  --partner-card-w: 1404px;
  --partner-card-gutter: clamp(16px, 3.57vw, 54px);
  /* カード内側。左右 88 / 上 82 / 下 93 ( コンテンツ幅 1228 = --container ) */
  --partner-card-pad-x: clamp(20px, 5.82vw, 88px);
  --partner-card-pad-t: clamp(40px, 5.42vw, 82px);
  --partner-card-pad-b: clamp(44px, 6.15vw, 93px);
  /* グループ間。Figma は 82 / 122 と不揃いなので、
     カード全高 1013px が一致する平均値 102px に揃えている。 */
  --partner-group-gap: clamp(48px, 6.75vw, 102px);

  /* Figma 50:14952 の背景は共通下層Gradientより約1.2deg異なるため、
     Visual fidelityを優先してページ固有値を維持する。 */
  --grad-partner:
    linear-gradient(90deg, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, .09) 100%),
    linear-gradient(206.9471deg, #ff0d00 2.4748%, #b74b1a 32.296%, #000 67.066%);
}

/* --------------------------------------------------------------------------
   PARTNER 上部（赤グラデ帯）: 見出し / パンくず / スポンサーカード
   -------------------------------------------------------------------------- */
.partner-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Figma: header 下端 102 → 見出し上端 135 */
  padding-top: calc(var(--header-h) + 33px);
  /* Project追加後のFigmaでは、最後のカード下端 2175px → NEWS開始 2254px。 */
  padding-bottom: clamp(48px, 5.22vw, 79px);
}

.partner-hero__bg {
  position: absolute;
  /* Figma 50:14952 のグラデーション矩形は y0 → 1678 で、帯そのもの ( 〜1492 )
     より縦に長い。同じ色の出方にするため矩形の高さを Figma に合わせて伸ばし、
     はみ出した分は .partner-hero の overflow: hidden で切る。 */
  inset: 0 0 auto;
  height: max(calc(1678 * var(--r)), 100%);
  z-index: -2;
  background: var(--grad-partner);
}

/* TOP / MISSION と同じ Figma NOISE タイルを等倍で敷く。 */
.partner-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-repeat: repeat;
  background-size: var(--noise-tile);
  pointer-events: none;
}

.partner-hero__heading .section-head__ghost--svg img {
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   火の粉レイヤー
   CONTACT と同じ素材・4帯配置・スクロール連動量を使用する。
   -------------------------------------------------------------------------- */
.partner-hero__embers {
  /* The four-strip artwork ends at 1408px in the CONTACT composition.
     Anchor that edge to the PARTNER / NEWS boundary and keep 32px below the
     clipping edge so scroll translation and sub-pixel rounding cannot expose
     an undecorated strip. */
  --partner-embers-bottom-shift: max(
    0px,
    calc(100% - 1408 * var(--r) + 32px)
  );
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--ember-scroll-x, 0px), var(--ember-scroll-y, 0px), 0);
}

.partner-hero.is-ember-scroll-in-view .partner-hero__embers {
  will-change: transform;
}

.partner-embers__strip {
  position: absolute;
  display: grid;
  place-items: center;
  left: calc(var(--sx) * var(--r));
  top: calc(var(--sy) * var(--r) + var(--partner-embers-bottom-shift));
  width: calc(var(--sw) * var(--r));
  height: calc(var(--sh) * var(--r));
}

.partner-embers__strip img {
  width: calc(var(--sh) * var(--r));
  height: calc(var(--sw) * var(--r));
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  transform: rotate(90deg);
}

.partner-embers__strip--a { --sx: -5;  --sy: -341; --sw: 1538; --sh: 436; }
.partner-embers__strip--b { --sx: -5;  --sy: 95;   --sw: 1538; --sh: 437; }
.partner-embers__strip--c { --sx: -5;  --sy: 972;  --sw: 1538; --sh: 436; }
.partner-embers__strip--d { --sx: -43; --sy: 391;  --sw: 1614; --sh: 458; }

/* --------------------------------------------------------------------------
   スポンサーカード（白の角丸パネル）
   -------------------------------------------------------------------------- */
.partner-card {
  /* Figma: パンくず下端 309 → カード上端 337 */
  margin: clamp(18px, 1.85vw, 28px) auto 0;
  width: min(var(--partner-card-w), 100% - 2 * var(--partner-card-gutter));
  padding: var(--partner-card-pad-t) var(--partner-card-pad-x) var(--partner-card-pad-b);
  border-radius: 12px;
  background: var(--color-white);
}

.partner__group + .partner__group {
  margin-top: var(--partner-group-gap);
}

.partner__label {
  font-family: var(--font-jp);
  font-size: clamp(13px, 1.06vw, 16px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.0195em;
  color: #000;
}

.partner__count {
  margin-left: 8px;
  font-size: clamp(10px, .79vw, 12px);
  line-height: 1.5;
  color: var(--color-gray-400);
  vertical-align: 2px;
}

/* 実ロゴ画像は 1125 x 525 前後の比率。枠も近い比率にして視覚サイズを確保する。 */
.partner__logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: min(2.12vw, 32px);
  row-gap: min(2.91vw, 44px);
  margin-top: 12px;
}

.partner__logos li {
  display: grid;
  place-items: center;
  aspect-ratio: 1125 / 525;
  padding: 0;
}

/* Partner / Sponsor ロゴはリンクでもクリック要素でもない。
   企業情報として常に静止表示させるため、hover / transition / cursor は一切付けない。
   透明余白の広いロゴでも比率は崩さず、object-fit: contain で視覚サイズだけを合わせる。 */
.partner__logos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity var(--motion-fast) var(--ease-premium);
}

/* --------------------------------------------------------------------------
   PROJECT（パートナー様との取り組み）
   Figma: node 26:533–26:550 / PC base 1512px
   -------------------------------------------------------------------------- */

.partner-project {
  position: relative;
  z-index: 1;
  /* partner-card下端 1350px → PROJECT見出し上端 1527px */
  margin-top: clamp(80px, 11.71vw, 177px);
}

/* FigmaではPARTNER見出しよりPROJECT見出しが約49px右寄り。 */
.partner-project__heading,
.partner-project__sub {
  position: relative;
  left: clamp(0px, 3.24vw, 49px);
}

.partner-project__carousel {
  margin-top: clamp(48px, 4.53vw, 68.5px);
  padding-left: min(8.86vw, 134px);
}

.partner-project__list {
  padding-left: 0;
}

.partner-project__empty {
  margin-top: clamp(48px, 4.53vw, 68.5px);
  margin-inline: var(--partner-card-gutter);
  color: var(--color-white);
}

.partner-project__more {
  margin-top: clamp(24px, 1.98vw, 30px);
  margin-inline: var(--partner-card-gutter);
}

/* 日本語サブ見出し上端 1621.54px → カード画像上端 1714px。
   section-subの24px line-heightを差し引いた実余白は約68.5px。 */
.partner-project__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 408px));
  justify-content: center;
  gap: 24px;
  width: min(1272px, calc(100% - 2 * var(--partner-card-gutter)));
  margin: clamp(48px, 4.53vw, 68.5px) auto 0;
  position: relative;
  /* Figma: x134 / 566 / 998。中央配置から約14px右に寄っている。 */
  left: 14px;
}

.partner-project__card {
  min-width: 0;
  overflow: hidden;
  background: var(--color-white);
}

.partner-project__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 408 / 272.756;
  margin: 0;
  background: #e5e5e5;
}

/* Figmaの画像ノード: 596 x 447 / left -94 / top -60。 */
.partner-project__media img {
  position: absolute;
  left: -23.04%;
  top: -22%;
  width: 146.08%;
  height: 163.88%;
  max-width: none;
  object-fit: cover;
}

.partner-project__body {
  min-height: 188px;
  padding: 22px 15px 16px;
  background: var(--color-white);
}

.partner-project__title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(17px, 1.32vw, 20px);
  font-weight: 700;
  line-height: 1.055;
  letter-spacing: -.0118em;
  color: #d8270c;
}

.partner-project__text {
  margin: 10px 0 0;
  font-family: var(--font-jp);
  font-size: clamp(13px, .99vw, 15px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -.0157em;
  color: #535353;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* ~1100px : small laptop / tablet ------------------------------------------ */
@media (max-width: 1100px) {
  .partner__logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .partner-project__heading,
  .partner-project__sub {
    left: 0;
  }

  .partner-project__grid {
    grid-template-columns: repeat(2, minmax(0, 408px));
    left: 0;
  }
}

/* ~768px : large phone / small tablet -------------------------------------- */
@media (max-width: 768px) {
  .page-partner {
    --partner-card-gutter: 16px;
    --partner-card-pad-x: 20px;
  }

  .partner__logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 24px;
  }

  .partner-project {
    margin-top: 80px;
  }

  .partner-project__grid {
    grid-template-columns: minmax(0, 408px);
    gap: 24px;
    width: calc(100% - 32px);
    margin-top: 48px;
  }

  .partner-project__body {
    min-height: 0;
  }
}

/* ~560px : phone ----------------------------------------------------------- */
@media (max-width: 560px) {
  .page-partner {
    --partner-card-pad-x: 16px;
  }

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

  .partner-project__grid {
    width: calc(100% - 32px);
  }

  .partner-project__body {
    padding: 18px 14px 20px;
  }

  .partner-project__title {
    font-size: 17px;
    line-height: 1.3;
  }

  .partner-project__text {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.7;
  }
}