@charset "UTF-8";

/*
 * body自体の既定余白（ブラウザ標準で数px〜8px程度）だけはスコープしても
 * 消せないため、ここだけ例外的にタグへ直接リセットする。
 */
body {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Base
   ※管理会社テンプレートへの組み込みを想定し、全ルールを .p-sports-damashii
   （HTML側で全体を囲むラッパークラス）配下にスコープしている。
   ========================================================================== */
.p-sports-damashii {
  --color-black: #000;
  --color-red: #e5003f;
  --color-yellow: #f9e701;
  --color-white: #fff;

  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #111;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;

  /*
   * テンプレート側の共通CSS（default.css / common.css）が body に
   * letter-spacing・text-align: justify・word-break: break-all 等の
   * 継承プロパティを指定しているため、ここで打ち消しておく。
   */
  letter-spacing: normal;
  text-align: left;
  word-break: normal;
  overflow-wrap: normal;
  line-height: normal;
  font-stretch: normal;
}

.p-sports-damashii, .p-sports-damashii * {
  box-sizing: border-box;
}

/*
 * ここから下の要素セレクタは :where() で包み、詳細度を .p-sports-damashii 単体
 * （クラス1つ分）に抑えている。こうしないと、例えば「.p-sports-damashii p」
 * （詳細度：クラス1+タグ1）が「.c-person__tag」（詳細度：クラス1のみ）のような
 * 個別コンポーネントの指定より強くなってしまい、後から書いた上書きが効かなくなる。
 */
.p-sports-damashii :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.p-sports-damashii :where(ul), .p-sports-damashii :where(li) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-sports-damashii :where(p) {
  margin: 0;
}

.p-sports-damashii :where(a) {
  color: inherit;
}

/* ==========================================================================
   Layout
   ========================================================================== */
/*
 * PC版：ビューポート1366pxで制作、ブレイクポイント769px
 * 実際の拡大縮小率(scale)はすべて js/script.js の calcScale() が算出し、
 * .l-container に transform: scale() として適用する。
 * ・769-1266px  : 左右余白50px固定、デザイン全体を縮小
 * ・1266-1366px : デザイン(1166px)保持、左右余白50px→100pxに拡大（このCSSの
 *                 position:relative; left:50%; margin-left:-583px; による
 *                 センタリングだけで実現、scale=1）
 * ・1366-1600px : 左右余白100px固定、デザイン全体を拡大（拡大上限1600px）
 * ・1600px-     : デザイン(1600px時点のサイズ)保持、左右余白が拡大
 */
.l-container {
  position: relative;
  left: 50%;
  width: 1166px;
  margin-left: -583px;
  transform-origin: top center;
  display: flow-root;
  transition: transform .1s linear, margin-bottom .1s linear;
}

/* ---------- FV ---------- */
.l-fv {
  position: relative;
  width: 100%;
  aspect-ratio: 1366 / 768;
  background: #14060a url("../images/fv-bg@2x.webp") center / cover no-repeat;
  overflow: hidden;
}

.l-fv__inner {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.l-fv__rogo {
  position: absolute;
  top: 30px;
  left: 40px;
  width: 199px;
  height: auto;
  transition: top .1s linear, left .1s linear, width .1s linear;
}

.l-fv__logo {
  width: 62%;
  height: auto;
  animation: fv-logo-pulse 3s ease-in-out infinite;
}

@keyframes fv-logo-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.l-fv__date {
  width: 62%;
  height: auto;
  margin-top: -1%;
}

.l-fv__time {
  width: 44%;
  height: auto;
  margin-top: -2%;
}

/* ---------- INTRO ---------- */
.l-intro {
  padding: 70px 0 80px;
  background: #fff;
  text-align: center;
}

.c-intro__lead {
  margin-bottom: 44px;
}

.c-intro__mark {
  display: inline;
  font-size: 45px;
  font-weight: 900;
  line-height: 60px;
  background-image: linear-gradient(transparent 62%, var(--color-yellow) 62%);
  padding: 0 2px;
}

.c-intro__text {
  font-size: 22px;
  font-weight: 500;
  line-height: 60px;
  margin-bottom: 44px;
}

.c-intro__catch {
  font-size: 34px;
  font-weight: 900;
  line-height: 48px;
}

/* ---------- CAST（出演者〜中継リポーター 背景共通） ---------- */
.l-cast {
  background: #0a4faa url("../images/main-bg@2x.webp") top center / cover no-repeat;
  padding-bottom: 100px;
}

.section-cast {
  padding-top: 60px;
}

.l-cast .section-cast:first-child {
  padding-top: 100px;
}

.section-cast {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.section-cast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.c-title-bar {
  height: 70px;
  background: var(--color-black);
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 55px;
}

.c-title-bar__text {
  color: var(--color-white);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .06em;
}

.c-person-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.c-person-list--single {
  justify-content: center;
}

.c-person-list--cast {
  gap: 150px;
  margin-top: 110px;
  margin-bottom: 30px;
}

.c-person {
  width: 250px;
  text-align: center;
}

.c-person--side {
  margin-top: 150px;
}

.c-person__photo {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0 auto 14px;
}

.c-person__name {
  color: var(--color-white);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.4;
}

.c-person__role {
  color: var(--color-white);
  font-size: 18px;
  font-weight: 500;
}

.c-person__name .c-person__role {
  margin-left: 2px;
}

.c-person__tag {
  display: inline-block;
  white-space: nowrap;
  margin-top: 16px;
  padding: 6px 16px;
  border: 1px solid var(--color-white);
  border-radius: 0;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

/* VTR出演 */
.c-vtr {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-vtr__photo {
  width: 410px;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 18px;
}

.c-vtr__list {
  display: flex;
  justify-content: center;
  gap: 70px;
}

.c-vtr__list .c-person {
  width: auto;
  white-space: nowrap;
}

/* ---------- 番組内容 ---------- */
.l-program {
  background: #7bc142 url("../images/sub-bg@2x.webp") center / cover no-repeat;
  padding: 70px 0 80px;
}

.c-title-bar--lg {
  width: 1166px;
  max-width: 100%;
  height: 116px;
  flex-direction: column;
  border-radius: 58px;
  margin-bottom: 40px;
}

.c-title-bar--lg .c-title-bar__text {
  font-size: 34px;
}

.c-title-bar__sub {
  color: var(--color-white);
  font-size: 18px;
  font-weight: 500;
  margin-top: 8px;
}

.c-program-card {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 240px;
  padding: 30px 60px 50px;
  margin-bottom: 34px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.c-program-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.c-program-card:nth-of-type(1) {
  background-image: url("../images/white-bg01@2x.webp");
}

.c-program-card:nth-of-type(2) {
  background-image: url("../images/white-bg02@2x.webp");
}

.c-program-card:nth-of-type(3) {
  background-image: url("../images/white-bg03@2x.webp");
}

.c-program-card__icon {
  flex-shrink: 0;
  width: 280px;
  margin-left: -30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-program-card__title {
  color: var(--color-red);
  font-size: 56px;
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 12px;
}

.c-program-card__desc {
  font-size: 28px;
  font-weight: 500;
  line-height: 40px;
}

.c-program__other {
  text-align: center;
  color: var(--color-white);
  font-size: 60px;
  font-weight: 900;
  margin-top: 50px;
}

.c-program__deco {
  display: inline-block;
  margin: 0 12px;
  opacity: .85;
}

/* ---------- メッセージ募集 ---------- */
.l-cta {
  background: #920305 url("../images/footer-bg@2x.webp") center / cover no-repeat;
  padding: 80px 0 70px;
  text-align: center;
}

.c-cta__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1166px;
  max-width: 100%;
  height: 80px;
  background: #f5f5f5;
  color: var(--color-red);
  font-size: 50px;
  font-weight: 900;
  border-radius: 40px;
  margin: 0 0 34px;
}

.c-cta__text {
  color: var(--color-white);
  font-size: 28px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 12px;
}

.c-cta__note {
  color: #ffd9d9;
  font-size: 18px;
  font-weight: 500;
  line-height: 35px;
  margin-bottom: 36px;
}

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 400px;
  height: 80px;
  background: var(--color-yellow);
  color: var(--color-red);
  font-size: 24px;
  font-weight: 900;
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.c-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}

.c-btn__arrow {
  position: absolute;
  right: 28px;
  font-size: 20px;
}

/* ==========================================================================
   SP / PC 出し分け
   ========================================================================== */
/*
 * SP版：ビューポート375pxで制作。実際の拡大縮小率(scale)は
 * js/script.js の calcSpScale() が「ビューポート幅 ÷ 375」で算出し、
 * .l-sp に transform: scale() として適用する（360〜430pxでも375pxの
 * デザインをそのまま拡大縮小して画面幅いっぱいに表示＝PC版の
 * .l-container と同じ考え方）。
 */
.l-sp {
  position: relative;
  left: 50%;
  width: 375px;
  margin-left: -187.5px;
  transform-origin: top center;
  display: flow-root;
}

/* ---------- FV (SP) ---------- */
.l-fv-sp {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 667;
  background: #14060a url("../images/sp/fv-bg-sp@2x.webp") center / cover no-repeat;
  overflow: hidden;
}

.l-fv-sp__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.l-fv-sp__rogo {
  width: 40.8%;
  height: auto;
}

.l-fv-sp__logo {
  width: 88.8%;
  height: auto;
  position: relative;
  top: 30px;
  animation: fv-logo-pulse 3s ease-in-out infinite;
}

.l-fv-sp__date {
  width: 87.5%;
  height: auto;
  position: relative;
  top: 30px;
}

.l-fv-sp__time {
  width: 105.6%;
  height: auto;
}

/* ---------- INTRO (SP) ---------- */
.l-intro-sp {
  padding: 40px 24px 44px;
  background: #fff;
  text-align: center;
}

.c-intro-sp__lead {
  margin-bottom: 24px;
}

.c-intro-sp__mark {
  display: inline;
  font-size: 20px;
  font-weight: 900;
  line-height: 32px;
  background-image: linear-gradient(transparent 62%, var(--color-yellow) 62%);
  padding: 0 2px;
}

.c-intro-sp__text {
  font-size: 11px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 24px;
  white-space: nowrap;
}

.c-intro-sp__catch {
  font-size: 17px;
  font-weight: 900;
  line-height: 26px;
}

/* ---------- CAST (SP：出演者〜中継リポーター 背景共通) ---------- */
.l-cast-sp {
  background: #0a4faa url("../images/sp/main-bg-sp@2x.webp") top center / cover no-repeat;
  padding: 50px 24px 70px;
}

.section-cast-sp + .section-cast-sp {
  margin-top: 50px;
}

.c-title-bar-sp {
  width: 327px;
  height: 40px;
  background: var(--color-black);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}

.c-title-bar-sp__text {
  color: var(--color-white);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .04em;
}

.c-person-list-sp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.c-person-sp {
  width: 200px;
  text-align: center;
}

.c-person-sp__photo {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0 auto 10px;
}

.c-person-sp__name {
  color: var(--color-white);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
}

.c-person-sp__role {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
}

.c-person-sp__name .c-person-sp__role {
  margin-left: 2px;
}

.c-person-sp__tag {
  display: inline-block;
  white-space: nowrap;
  margin-top: 12px;
  padding: 4px 12px;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

/* VTR出演 (SP) */
.c-vtr-sp {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-vtr-sp__photo {
  width: 260px;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 20px;
}

.c-vtr-sp__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.c-vtr-sp__name {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 8px;
}

.c-vtr-sp__side {
  font-weight: 900;
}

.c-vtr-sp__tag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

/* ---------- 番組内容 (SP) ---------- */
.l-program-sp {
  background: #7bc142 url("../images/sp/sub-bg-sp@2x.webp") top center / cover no-repeat;
  padding: 50px 24px 25px;
}

.c-title-bar-sp--lg {
  flex-direction: column;
  height: 70px;
  border-radius: 35px;
  margin-bottom: 28px;
}

.c-title-bar-sp--lg .c-title-bar-sp__text {
  font-size: 22px;
}

.c-title-bar-sp__sub {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
}

.c-program-card-sp {
  position: relative;
  background: #fff;
  border: 2px solid #3a5c8e;
  border-radius: 0;
  padding: 28px 10px 24px;
  margin: 0 22px 40px 6px;
  text-align: center;
  box-shadow:
    4px 4px 0 -2px #fff,
    4px 4px 0 0 #3a5c8e,
    8px 8px 0 -2px #fff,
    8px 8px 0 0 #3a5c8e,
    12px 12px 0 -2px #fff,
    12px 12px 0 0 #3a5c8e,
    16px 16px 0 -2px #fff,
    16px 16px 0 0 #3a5c8e;
}

.c-program-card-sp__icon {
  width: 110px;
  margin: 0 auto 14px;
}

.c-program-card-sp__title {
  color: var(--color-red);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 10px;
}

.c-program-card-sp__desc {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
}

.c-program-sp__other {
  text-align: center;
  color: var(--color-white);
  font-size: 19px;
  font-weight: 900;
  margin: 24px -14px 0;
}

.c-program-sp__deco {
  display: inline-block;
  margin: 0 2px;
  opacity: .85;
}

/* ---------- メッセージ募集 (SP) ---------- */
.l-cta-sp {
  background: #920305 url("../images/sp/footer-bg-sp@2x.webp") center / cover no-repeat;
  padding: 50px 24px;
  text-align: center;
}

.c-cta-sp__title {
  display: flex;
  width: 335px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: var(--color-red);
  font-size: 20px;
  font-weight: 900;
  border-radius: 20px;
  margin: 0 auto 20px;
}

.c-cta-sp__text {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 10px;
}

.c-cta-sp__note {
  color: #ffd9d9;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 24px;
}

.c-btn-sp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 240px;
  max-width: 100%;
  height: 40px;
  background: var(--color-yellow);
  color: var(--color-red);
  font-size: 16px;
  font-weight: 900;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.c-btn-sp__arrow {
  position: absolute;
  right: 20px;
  font-size: 16px;
}

/* ---------- スクロールフェードイン (SP) ---------- */
.section-cast-sp,
.c-program-card-sp {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.section-cast-sp.is-visible,
.c-program-card-sp.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   SP / PC 出し分け（他の .l-sp / .l-pc 関連ルールより後ろに書くこと。
   同じ詳細度の場合は後勝ちになるため、ここより前に .l-sp の display を
   変更するルールを追加すると、このメディアクエリが上書きされてしまう）
   ========================================================================== */
/*
 * SP版：ビューポート375pxで制作。PC版のようなJSスケールは行わず、
 * 375pxで組んだデザインをそのまま保持する（360〜430pxでも375px幅を基準に表示）。
 * ブレイクポイントはPC版と共通の769px。
 */
@media (max-width: 768px) {
  .l-pc {
    display: none;
  }
}

@media (min-width: 769px) {
  .l-sp {
    display: none;
  }
}