/* ==========================================================================
   p-pro — パートナープログラム（Figma: PC/20_Partner 24405:5920 / SP 24405:6055）
   ========================================================================== */

/* ---- セクション見出し（Heading/H2 + リード。間 8px） ---- */
.p-pro-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ==========================================================================
   sec-mv
   ========================================================================== */
.p-pro-mv {
  overflow: hidden; /* イラストがコンテナの右へはみ出すため */
  padding-block: 160px 227px; /* Figma 固有寸法: 見出しの上 160px・ボタンの下 227px（静的HTML の c-service-hero--partner と同じ） */
  background-color: var(--color-bg-subtle);
}

.p-pro-mv__inner {
  position: relative;
}

.p-pro-mv__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  width: 44%; /* Figma: 475 / 1080 */
}

.p-pro-mv__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  color: var(--color-text-base);
}

.p-pro-mv__button {
  width: 300px; /* Figma 固有寸法: ボタン幅 */
  padding-inline: var(--space-24);
}

.p-pro-mv__illust {
  position: absolute;
  top: -140px; /* Figma 固有寸法: セクション上端から 20px（見出しの上 160px − 20px） */
  left: 33.6%; /* Figma: (24 + 355) / 1128（l-container の左右余白を含む幅に対する比率） */
  width: 70.48%; /* Figma: 795 / 1128 */
}

.p-pro-mv__illust-image {
  width: 100%;
}

/* WP（コアの画像ブロック）: picture の代わりに PC 用・SP 用の 2 枚を置き、幅で切り替える */
.p-pro-mv__illust-image--sp {
  display: none;
}

/* ==========================================================================
   sec-program-types
   ========================================================================== */
.p-pro-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.p-pro-types__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-32) var(--space-24);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-base);
}

.p-pro-types__badge {
  padding: var(--space-4) var(--space-16);
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.p-pro-types__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* ==========================================================================
   sec-merits
   ========================================================================== */
.p-pro-merits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.p-pro-merits__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32);
  background-color: var(--color-bg-brand-subtle);
  color: var(--color-text-base);
}

.p-pro-merits__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.p-pro-merits__icon {
  flex-shrink: 0;
  width: 30px; /* アイコンサイズ */
  height: 30px;
}

/* ==========================================================================
   sec-product（背景の斜めストライプは画像）
   ========================================================================== */
.p-pro-product {
  display: flex;
  align-items: center;
  min-height: 564px; /* Figma 固有寸法: セクションの高さ */
  padding-block: var(--space-80);
  background: var(--color-bg-subtle) url(../../img/pro/product-bg.webp) center / cover no-repeat;
}

.p-pro-product__row {
  display: flex;
  align-items: center;
  gap: var(--space-48);
}

.p-pro-product__visual {
  flex: 0 1 584px; /* Figma 固有寸法: 画像幅 */
  min-width: 0;
}

.p-pro-product__image {
  width: 100%;
  aspect-ratio: 584 / 356; /* Figma: マスクの縦横比 */
  object-fit: cover;
  object-position: top;
}

.p-pro-product__box {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 0;
  padding: var(--space-32);
  background-color: var(--color-bg-base);
  color: var(--color-text-base);
}

.p-pro-product__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-pro-product__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.p-pro-product__eyebrow {
  color: var(--color-text-brand);
}

.p-pro-product__button {
  padding-inline: var(--space-24);
}

/* ==========================================================================
   sec-flow
   ========================================================================== */
.p-pro-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.p-pro-flow__step {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.p-pro-flow__card {
  display: flex;
  flex: 0 1 420px; /* Figma 固有寸法: STEP カードの幅 */
  align-items: center;
  gap: var(--space-16);
  min-width: 0;
  padding: var(--space-24);
  background-color: var(--color-bg-base);
}

.p-pro-flow__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
  color: var(--color-text-base);
}

.p-pro-flow__number {
  width: 100px; /* Figma 固有寸法: STEP ラベルの幅 */
  padding: var(--space-8);
  background-color: var(--color-purple-500); /* semantic に該当なし（Figma: purple/500） */
  color: var(--color-text-inverse);
  text-align: center;
  line-height: 12px; /* Figma: 文字枠の高さ 12px（ラベル高さ 28px） */
}

.p-pro-flow__illust {
  flex-shrink: 0;
  width: 150px; /* Figma 固有寸法: イラスト枠 */
  height: 90px;
  object-fit: contain;
}

/* 矢印（Figma は「◀」を 180° 回転したテキスト。CSS の三角形で再現） */
.p-pro-flow__arrow {
  flex-shrink: 0;
  width: 40px; /* Figma 固有寸法: 矢印の枠 */
  height: 40px;
  background-color: var(--color-purple-500); /* semantic に該当なし（Figma: purple/500） */
  clip-path: polygon(35% 30%, 35% 70%, 70% 50%);
}

.p-pro-flow__desc {
  display: flex;
  flex: 1;
  align-items: center;
  align-self: stretch;
  min-height: 138px; /* Figma 固有寸法: 説明カードの高さ */
  padding: var(--space-24);
  background-color: var(--color-bg-base);
  color: var(--color-text-base);
}

/* ==========================================================================
   sec-customer
   ========================================================================== */
.p-pro-customer {
  display: flex;
  align-items: center;
  gap: var(--space-48);
}

.p-pro-customer__text {
  position: relative;
  flex: 441 1 0;
  min-width: 0;
  padding: 69px 0 0 41px; /* Figma 固有寸法: 背景数字「01」に対する本文の位置 */
  color: var(--color-text-base);
}

.p-pro-customer__number {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-purple-10); /* Figma 直値 #f1effc（purple/10 と同値）。semantic に該当なし */
  pointer-events: none;
  user-select: none;
}

.p-pro-customer__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 400px; /* Figma 固有寸法: 本文幅 */
}

.p-pro-customer__visual {
  flex: 591 1 0;
  min-width: 0;
}

.p-pro-customer__image {
  width: 100%;
}

/* 02: 画像が左・本文が右。数字は本文の右寄せ */
.p-pro-customer--reverse .p-pro-customer__text {
  flex-basis: 0;
  flex-grow: 435;
  padding: 64px 0 0; /* Figma 固有寸法 */
}

.p-pro-customer--reverse .p-pro-customer__number {
  right: 0;
  left: auto;
}

.p-pro-logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-24);
  padding: var(--space-48); /* Figma は 40px（トークン外のため 48px で代用・報告済み） */
  background-color: var(--color-bg-brand-subtle); /* Figma 直値 #f2f0fc。近い bg/brand-subtle（#f1effc）を使用・報告済み */
}

.p-pro-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 180 / 80; /* Figma 固有寸法 */
  padding: 0 16%;
  background-color: var(--color-bg-base);
}

/* リンク付きのロゴ（企業ロゴフィールドの「リンク先 URL」） */
.p-pro-logos__item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ロゴは --logo-scale（企業ロゴフィールドの「ロゴの大きさ」）の割合まで広げる */
.p-pro-logos__image {
  width: auto;
  max-width: calc(100% * var(--logo-scale, 1));
  max-height: calc(60px * var(--logo-scale, 1)); /* Figma: ロゴの最大高さ 60px */
  object-fit: contain;
}

.p-pro-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

.p-pro-actions__button {
  padding-inline: var(--space-24);
}

.p-pro-actions__button--dark {
  background-color: var(--color-purple-500); /* Figma: purple/500（c-button に該当バリアントなし） */
}

/* ==========================================================================
   sec-form（フォーム部品は c-form）
   ========================================================================== */
.p-pro-form__lead {
  color: var(--color-text-muted);
}

.p-pro-form__form {
  box-shadow: var(--shadow-box);
}

.p-pro-form__options {
  flex-direction: row; /* Figma: はい / いいえ は横並び（間 12px） */
  gap: 12px; /* Figma 固有値（c-form__option と同じ） */
}

.p-pro-form__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-48); /* Figma は 40px（トークン外のため 48px で代用・報告済み） */
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1339px) {

  .p-pro-mv__copy {
    width: 40%;
  }

  .p-pro-mv__illust {
    top: 0;
    left: auto;
    right: 0;
    width: 62%;
  }

  .p-pro-flow__card {
    flex-basis: 380px; /* Tablet: STEP カード幅を縮める（実装判断） */
  }
}

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 1023px) {

  .p-pro-mv {
    padding-block: var(--space-64);
  }

  .p-pro-mv__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-64);
    min-height: 0;
    padding-inline: var(--space-16);
  }

  .p-pro-mv__copy {
    align-items: stretch;
    gap: var(--space-24);
    width: 100%;
    padding-top: 0;
  }

  .p-pro-mv__title {
    font-size: 2rem; /* SP: renewal/JP/32/Bold（.t-jp-32-bold） */
    line-height: calc(48 / 32);
  }

  .p-pro-mv__lead {
    font-size: 0.875rem; /* Figma SP: 14px / 行間 28px（テキストスタイル未適用の直値・報告済み） */
    line-height: 2;
  }

  .p-pro-mv__button {
    width: 100%;
  }

  .p-pro-mv__illust {
    position: static;
    width: auto;
    margin-inline: calc(var(--space-16) * -1); /* SP: 画面幅いっぱい */
  }

  .p-pro-mv__illust-image--pc {
    display: none;
  }

  .p-pro-mv__illust-image--sp {
    display: block;
  }

  .p-pro-section-lead {
    font-size: 0.875rem; /* Figma SP: 14px / 行間 28px / Regular（静的HTML の p-partner-lead と同じ） */
    font-weight: var(--font-weight-regular);
    line-height: 2;
  }

  .p-pro-types,
  .p-pro-merits {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-pro-types__item {
    padding: var(--space-24) var(--space-16);
  }

  .p-pro-merits {
    gap: var(--space-16);
  }

  .p-pro-merits__item {
    gap: var(--space-16);
    padding: var(--space-24) var(--space-16);
  }

  .p-pro-merits__desc {
    font-size: 0.875rem; /* SP: renewal/JP/14/Regular（.t-jp-14-regular） */
    line-height: calc(24 / 14);
  }

  .p-pro-product {
    min-height: 0;
    padding-block: 40px; /* Figma 固有寸法（SP）: 静的HTML と同じ 40px */
  }

  .p-pro-product__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
    padding-inline: var(--space-16);
  }

  .p-pro-product__visual,
  .p-pro-product__box {
    flex: none;
  }

  .p-pro-product__image {
    aspect-ratio: 344 / 208; /* Figma SP: マスクの縦横比 */
  }

  .p-pro-product__box {
    gap: var(--space-16);
    padding: var(--space-24);
  }

  /* SP: 見出しは PC と同じ renewal/JP/32/Bold のまま。本文は 14px・行間 28px。文字色は PC と同じ（text/muted にしない） */
  .p-pro-product__desc {
    font-size: 0.875rem;
    line-height: 2;
  }

  .p-pro-flow {
    gap: var(--space-48);
  }

  .p-pro-flow__step {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .p-pro-flow__card {
    flex: none;
    padding: var(--space-16);
  }

  .p-pro-flow__number {
    width: 80px; /* Figma 固有寸法: SP の STEP ラベル幅 */
    font-size: 0.875rem; /* SP: renewal/EN/Label/14/Bold（.t-en-label-14-bold） */
    line-height: 10px; /* Figma SP: 文字枠の高さ 10px */
  }

  .p-pro-flow__title {
    font-size: 1rem; /* SP: renewal/JP/16/Bold（.t-jp-16-bold） */
    line-height: calc(28 / 16);
  }

  .p-pro-flow__illust {
    width: 90px; /* Figma 固有寸法: SP のイラスト枠 */
    height: 54px;
  }

  .p-pro-flow__arrow {
    align-self: center;
    height: 24px; /* Figma 固有寸法: SP の矢印枠 */
    clip-path: polygon(25% 20%, 75% 20%, 50% 90%);
  }

  .p-pro-flow__desc {
    min-height: 0;
    padding: var(--space-16);
    font-size: 0.875rem; /* Figma SP: 14px / 行間 28px（直値・報告済み） */
    line-height: 2;
  }

  .p-pro-customer,
  .p-pro-customer--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
  }

  .p-pro-customer--reverse .p-pro-customer__visual {
    order: 1;
  }

  .p-pro-customer__text,
  .p-pro-customer--reverse .p-pro-customer__text {
    flex: none;
    padding: 57px 0 0 30px; /* Figma 固有寸法: SP の数字に対する本文位置 */
  }

  .p-pro-customer--reverse .p-pro-customer__number {
    right: auto;
    left: 0;
  }

  .p-pro-customer__number {
    font-size: 11.25rem; /* SP: renewal/EN/Number/180/Bold（.t-en-number-180-bold） */
    line-height: calc(150 / 180);
  }

  .p-pro-customer__title {
    font-size: 1.5rem; /* SP: renewal/JP/24/Bold（.t-jp-24-bold） */
    line-height: calc(36 / 24);
  }

  .p-pro-customer__desc {
    font-size: 0.875rem; /* SP: renewal/JP/14/Regular（.t-jp-14-regular） */
    line-height: calc(24 / 14);
  }

  .p-pro-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
    padding: var(--space-16);
  }

  .p-pro-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-pro-form__title {
    font-size: 2rem; /* SP: renewal/JP/32/Bold（.t-jp-32-bold）・実装判断 */
    line-height: calc(48 / 32);
  }

  .p-pro-form__lead {
    font-size: 0.875rem; /* Figma SP: 14px / 行間 28px（直値・報告済み） */
    line-height: 2;
  }

  .p-pro-form__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
  }
}

/* SP の 14px の本文は字間なし（静的HTML の p-partner と同じ。Figma: メインビジュアルのリード・特徴の説明・FinanScope の特徴・手順の説明は letter-spacing 0） */
@media (max-width: 1023px) {

  .p-pro-mv__lead,
  .p-pro-types__desc,
  .p-pro-product__desc,
  .p-pro-flow__desc {
    letter-spacing: 0;
  }
}