@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);
  /* Figma: カード下端 1350 → NEWS 帯 1492 */
  padding-bottom: clamp(60px, 9.39vw, 142px);
}

.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: -1;
  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-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;
}

/* Figma: セル 220.035 x 49.983 / column gap 32 / row gap 44 / 5 列。
   コンテンツ幅は --container (1228px) と一致する。 */
.partner__logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: min(2.12vw, 32px);
  row-gap: min(2.91vw, 44px);
  margin-top: 12px;
}

.partner__logos li {
  aspect-ratio: 220.035 / 49.983;
  padding: min(.53vw, 8px) min(1.06vw, 16px);
}

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

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

/* ~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__logos li {
    padding: 4px 8px;
  }
}

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

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

  /* 2 列まで落ちるとセルが細くなるので、内側の余白を詰めて
     ロゴの視覚サイズ ( TOP の PARTNER セクションと同等 ) を確保する。
     比率は object-fit: contain のままなので歪まない。 */
  .partner__logos li {
    padding: 3px 6px;
  }
}