@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap");

/* ==========================================================================
   マラソン特集2026
   Figma PC 1440px 基準のリキッドレイアウト
   ブレイクポイント: 756px（PC / SP）
   ========================================================================== */

#marathon {
  --mw: 100vw;
  --color-bg: #f5f2f0;
  --color-text: #2a2928;
  --color-text-lead: #2d2b2a;
  --color-ch1: #f0027f;
  --color-ch2: #00a0e9;
  --color-accent: #f9aa27;
  --color-line: #e3dcd9;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow-x: hidden;
  background-color: var(--color-bg);
}

@supports (width: 1cqw) {
  #marathon {
    container-type: inline-size;
    --mw: 100cqw;
  }
}

#marathon .sp-br {
  display: none;
}

@media screen and (max-width: 756px) {
  #marathon .sp-br {
    display: revert;
  }
}

body.watching {
  background-color: var(--color-bg);
}

#marathon .hero-area,
#marathon .main {
  width: 100%;
  background-color: var(--color-bg);
  background-image: none;
}

/* --------------------------------------------------------------------------
   MV
   -------------------------------------------------------------------------- */
#marathon section.top {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}

#marathon section.top .top-inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: 0;
}

#marathon .mv {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  font-weight: 0;
  line-height: 0;
}

#marathon .mv img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 813;
  object-fit: cover;
}

@media screen and (max-width: 756px) {
  #marathon .mv img {
    aspect-ratio: 390 / 530;
  }
}

/* --------------------------------------------------------------------------
   リード文
   -------------------------------------------------------------------------- */
#marathon .lead {
  box-sizing: border-box;
  width: 100%;
}

#marathon .lead-inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: calc(828 / 1440 * 100%);
}

#marathon .lead-text {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(26.2 / 1440 * var(--mw));
  font-weight: 400;
  line-height: calc(40.16 / 26.2);
  color: var(--color-text-lead);
}

#marathon .lead-text--right {
  text-align: right;
}

#marathon .lead-line {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 757px) {
  #marathon .lead--end {
    padding: calc(80 / 1440 * var(--mw)) 0;
  }

  #marathon .lead--end .lead-inner {
    margin-left: auto;
    margin-right: calc(80 / 1440 * var(--mw));
    align-items: flex-end;
  }

  #marathon .lead--end .lead-text {
    text-align: right;
    width: 100%;
  }

  #marathon .lead--start {
    padding: 0 calc(80 / 1440 * var(--mw)) calc(85 / 1440 * var(--mw));
  }

  #marathon .lead--start .lead-inner {
    margin-right: auto;
    align-items: stretch;
  }

  #marathon .lead--start .lead-text {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   スカパー枠を包む schedule セクション
   -------------------------------------------------------------------------- */
@media screen and (min-width: 757px) {
  #marathon section.schedule {
    background-color: var(--color-bg);
    padding-bottom: 0;
    border-radius: 0;
    overflow: visible;
  }

  #marathon section.schedule .schedule-inner {
    width: 100%;
    max-width: none;
    padding-top: 0;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   番組カード
   page.css の #marathon section.program .program-inner（12カラムgrid）より
   詳細度を上げて上書きする
   -------------------------------------------------------------------------- */
#marathon section.program {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  background-image: none;
  background-color: var(--color-bg);
}

#marathon section.program .program-inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  column-gap: 0;
  row-gap: 0;
  width: 100%;
  padding-inline: 0;
}

#marathon section.program .program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: auto;
  width: 100%;
}

#marathon section.program .program-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 / 1440 * var(--mw));
}

#marathon section.program .program-card__title {
  position: static;
  z-index: auto;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  line-height: 1;
  color: var(--color-text);
  text-align: left;
  max-width: none;
}

#marathon section.program .program-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 40px;
  color: #ffffff;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

#marathon section.program .program-card__badge--ch1 {
  background-color: var(--color-ch1);
}

#marathon section.program .program-card__badge--ch2 {
  background-color: var(--color-ch2);
}

#marathon section.program .program-card__body {
  display: flex;
  align-items: flex-start;
}

#marathon section.program .program-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-top: 0;
}

#marathon section.program .program-card__copy-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#marathon section.program .program-card__desc,
#marathon section.program .program-card__time {
  margin: 0;
  width: auto;
  max-width: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: var(--color-text);
  text-align: left;
}

#marathon section.program .program-card__time-date {
  font-weight: 600;
}

#marathon section.program .program-card__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-text);
}

#marathon section.program .program-card__link-text {
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  text-align: left;
  color: var(--color-text);
}

#marathon section.program .program-card__link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #f5f2f0 flex-shrink: 0;
}

#marathon section.program .program-card--red .program-card__link-icon {
  background-color: #e2382a;
  color: #f5f2f0
}

#marathon section.program .program-card--blue .program-card__link-icon {
  background-color: #b6dbe9;
  color: #2d2c2b;
}

#marathon section.program .program-card--yellow .program-card__link-icon {
  background-color: #f9aa27;
  color: #f5f2f0
}

#marathon section.program .program-card__link-icon path {
  stroke: currentColor;
}

#marathon section.program .program-card__link-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * 番組ビジュアルの重ね合わせ
 * Figma: コンテナ 494 x 285
 *   bg  494 x 151 / top 134 / left 0 / z-index 0
 *   mv  480 x 270 / top 0   / left 1 / z-index 1
 */
#marathon section.program .program-card__visual {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 494 / 285;
  line-height: 0;
}

#marathon section.program .program-card__bg,
#marathon section.program .program-card__mv {
  position: absolute;
  display: block;
  object-fit: fill;
}

#marathon section.program .program-card__bg {
  top: calc(134 / 285 * 100%);
  left: 0;
  z-index: 0;
  width: 100%;
  height: calc(151 / 285 * 100%);
}

#marathon section.program .program-card__mv {
  top: 0;
  left: calc(1 / 494 * 100%);
  z-index: 1;
  width: calc(480 / 494 * 100%);
  height: calc(270 / 285 * 100%);
  background-color: #bdbdbd;
}

@media screen and (min-width: 757px) {
  #marathon section.program {
    padding: calc(172 / 1440 * var(--mw)) 0 calc(64 / 1440 * var(--mw));
  }

  #marathon section.program .program-inner {
    gap: calc(106 / 1440 * var(--mw));
    padding-inline: calc(180 / 1440 * var(--mw));
  }

  #marathon section.program .program-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(12 / 1440 * var(--mw));
    max-width: calc(1153 / 1440 * var(--mw));
  }

  #marathon section.program .program-card__title {
    font-size: calc(52 / 1440 * var(--mw));
    margin: 0;
  }

  #marathon section.program .program-card__badge {
    width: calc(55 / 1440 * var(--mw));
    height: calc(21 / 1440 * var(--mw));
    font-size: calc(16 / 1440 * var(--mw));
  }

  #marathon section.program .program-card__body {
    gap: calc(10 / 1440 * var(--mw));
    width: 100%;
  }

  #marathon section.program .program-card__copy {
    flex: 1 1 auto;
    gap: calc(32 / 1440 * var(--mw));
    min-height: calc(357 / 1440 * var(--mw));
    padding-top: 0;
  }

  #marathon section.program .program-card__copy-text {
    gap: calc(24 / 1440 * var(--mw));
  }

  #marathon section.program .program-card__desc,
  #marathon section.program .program-card__time {
    font-size: calc(16 / 1440 * var(--mw));
    line-height: calc(24 / 16);
  }

  #marathon section.program .program-card__link {
    gap: calc(12 / 1440 * var(--mw));
    height: calc(41 / 1440 * var(--mw));
  }

  #marathon section.program .program-card__link-text {
    width: auto;
    padding: calc(5 / 1440 * var(--mw)) 0;
    font-size: calc(15.9 / 1440 * var(--mw));
    line-height: calc(24 / 15.9);
  }

  #marathon section.program .program-card__link-icon {
    padding: calc(4 / 1440 * var(--mw));
  }

  #marathon section.program .program-card__link-icon svg {
    width: calc(25 / 1440 * var(--mw));
    height: calc(25 / 1440 * var(--mw));
  }

  #marathon section.program .program-card__visual {
    width: calc(494 / 1440 * var(--mw));
    margin-top: calc(72 / 1440 * var(--mw));
  }
}

/* --------------------------------------------------------------------------
   下段 main-contents（既存スカパー枠は維持、背景だけページに合わせる）
   -------------------------------------------------------------------------- */
@media screen and (min-width: 757px) {
  #marathon section.main-contents {
    background-color: transparent;
    padding-bottom: 0;
  }

  #marathon section.main-contents .inner {
    max-width: none;
    width: 100%;
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   SP（756px以下）— PCデータの比率を崩さず縦積み
   -------------------------------------------------------------------------- */
@media screen and (max-width: 756px) {
  #marathon {
    --mw: 100vw;
    max-width: none;
    padding: 0;
  }

  #marathon section.top {
    margin: 0;
    padding: 0;
    min-height: inherit;
    min-width: inherit;
  }

  #marathon section.top .top-inner {
    padding: 0;
    width: 100%;
  }

  #marathon .lead--end,
  #marathon .lead--start {
    padding: calc(40 / 390 * 100vw) calc(20 / 390 * 100vw);
  }

  #marathon .lead-inner {
    width: 100%;
    align-items: stretch;
  }

  #marathon .lead-text {
    font-size: calc(15 / 390 * 100vw);
    line-height: 1.6;
    text-align: left;
  }

  #marathon .lead-text--right {
    text-align: right;
    font-size: calc(15 / 390 * 100vw);
  }

  #marathon .main {
    display: block;
    gap: 0;
    padding-bottom: 0;
  }

  #marathon section.schedule {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    border-radius: 0;
  }

  #marathon section.schedule .schedule-inner {
    width: 100%;
    margin-inline: auto;
    padding-top: 0;
    align-items: stretch;
  }

  #marathon section.program {
    padding: calc(48 / 390 * 100vw) calc(20 / 390 * 100vw) calc(32 / 390 * 100vw);
  }

  #marathon section.program .program-inner {
    display: flex;
    flex-direction: column;
    gap: calc(56 / 390 * 100vw);
    width: 100%;
    padding-inline: 0;
  }

  #marathon section.program .program-card {
    display: flex;
    flex-direction: column;
    gap: calc(16 / 390 * 100vw);
  }

  #marathon section.program .program-card__head {
    gap: calc(8 / 390 * 100vw);
  }

  #marathon section.program .program-card__title {
    font-size: calc(28 / 390 * 100vw);
    line-height: 1.3;
    margin: 0;
  }

  #marathon section.program .program-card__badge {
    width: calc(48 / 390 * 100vw);
    height: calc(20 / 390 * 100vw);
    font-size: calc(13 / 390 * 100vw);
  }

  #marathon section.program .program-card__body {
    flex-direction: column-reverse;
    gap: calc(20 / 390 * 100vw);
    width: 100%;
  }

  #marathon section.program .program-card__visual {
    width: 100%;
    margin-top: 0;
  }

  #marathon section.program .program-card__copy {
    gap: calc(20 / 390 * 100vw);
    width: 100%;
    padding-top: 0;
  }

  #marathon section.program .program-card__copy-text {
    gap: calc(12 / 390 * 100vw);
    width: 100%;
  }

  #marathon section.program .program-card__desc,
  #marathon section.program .program-card__time {
    font-size: calc(14 / 390 * 100vw);
    line-height: 1.6;
    max-width: none;
  }

  #marathon section.program .program-card__link {
    gap: calc(8 / 390 * 100vw);
    height: auto;
  }

  #marathon section.program .program-card__link-text {
    width: auto;
    padding: calc(6 / 390 * 100vw) 0;
    font-size: calc(14 / 390 * 100vw);
    line-height: 1.5;
    white-space: nowrap;
  }

  #marathon section.program .program-card__link-icon {
    padding: calc(4 / 390 * 100vw);
  }

  #marathon section.program .program-card__link-icon svg {
    width: calc(25 / 390 * 100vw);
    height: calc(25 / 390 * 100vw);
  }

  #marathon section.main-contents {
    width: 100%;
    padding: 0;
  }

  #marathon section.main-contents .inner {
    padding: 0 2.6666666667vw;
  }
}

@media (hover: hover) and (pointer: fine) {
  @media screen and (min-width: 757px) {
    #marathon section.program .program-card__link {
      padding-bottom: calc(4 / 1440 * var(--mw));
    }

    #marathon section.program .program-card__link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    #marathon section.program .program-card--red .program-card__link::after {
      background-color: #e2382a;
    }

    #marathon section.program .program-card--blue .program-card__link::after {
      background-color: #b6dbe9;
    }

    #marathon section.program .program-card--yellow .program-card__link::after {
      background-color: #f9aa27;
    }

    #marathon section.program .program-card__link:hover::after,
    #marathon section.program .program-card__link:focus-visible::after {
      transform: scaleX(1);
    }
  }
}