@charset "UTF-8";
/* =========================================================
   WWE — /producer/ 固有
   ========================================================= */

/* =========================================================
   [2] 導入（名前・肩書・写真）
   ========================================================= */
.wwe-prod { padding-block: 40px; }
.wwe-prod__inner {
  display: grid;
  gap: 26px;
}
.wwe-prod__media { max-width: 300px; margin-inline: auto; width: 100%; }
.wwe-prod__img { border-radius: var(--wwe-radius-card); width: 100%; }
.wwe-prod__media .wwe-ph { min-height: 300px; }

.wwe-prod__rule {
  display: block;
  width: 60px; height: 3px;
  background: var(--wwe-gold);
  border-radius: 2px;
  margin-bottom: 16px;
}
.wwe-prod__role {
  font-size: var(--wwe-fs-note);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-gold-dark);
}
.wwe-prod__name {
  margin-top: 4px;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
  letter-spacing: .06em;
  font-feature-settings: var(--wwe-palt);
}
.wwe-prod__text {
  margin-top: 18px;
  font-size: var(--wwe-fs-body);
  line-height: var(--wwe-lh-body);
  color: var(--wwe-text-body);
}
.wwe-prod__text p + p { margin-top: 1em; }

/* =========================================================
   [3] 担当者が行うこと（7つ）
   ========================================================= */
.wwe-prodroles { display: grid; gap: 14px; }
.wwe-prodroles__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: baseline;
  padding: 20px 22px;
  background: var(--wwe-white);
  border-radius: var(--wwe-radius-card);
}
.wwe-prodroles__no {
  /* .wwe-num は 36px。ここでは並ぶ数が多いので少し落とす */
  font-size: 22px;
  /* 22px でも --wwe-gold（白地 3.29:1）では小さく読みづらいので gold-dark */
  color: var(--wwe-gold-dark);
}
.wwe-prodroles__title {
  font-size: var(--wwe-fs-body);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
  font-feature-settings: var(--wwe-palt);
}
.wwe-prodroles__note {
  grid-column: 2;
  margin-top: 4px;
  font-size: var(--wwe-fs-note);
  color: var(--wwe-text-body);
  line-height: 1.8;
}

/* =========================================================
   [4][5] 説明ブロック（同じ体裁を2回使う）
   ========================================================= */
.wwe-prodnote { text-align: center; }
.wwe-prodnote__title {
  font-size: var(--wwe-fs-h2);
  color: var(--wwe-navy);
  font-feature-settings: var(--wwe-palt);
}
.wwe-prodnote__text {
  margin-top: 18px;
  font-size: var(--wwe-fs-lead);
  color: var(--wwe-text-body);
  line-height: 1.95;
}

/* =========================================================
   TAB / PC
   ========================================================= */
@media (min-width: 768px) {
  .wwe-prod__inner {
    grid-template-columns: 34fr 66fr;
    gap: 36px;
    align-items: start;
  }
  .wwe-prod__media { max-width: none; }

  .wwe-prodroles { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .wwe-prodroles { gap: 16px; }
}