/* ============================================
   PROGRAM PAGES - SHARED
============================================ */
/* --- Hero --- */
.prog-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.prog-hero__day-wrap {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}
.prog-hero__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--color-black);
}
.prog-hero__day-inner {
  display: flex;
  justify-content: center;
  align-items: end;
  color: var(--color-white);
  font-family: var(--font-bold-eng);
}
.prog-hero__day-label {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.prog-hero__day-num {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 0.8;
}
.prog-hero__title {
  font-family: var(--font-bold-eng);
  font-size: clamp(3rem, calc(38 / 400 * 100vw), 3.8rem);
  color: var(--color-white);
  line-height: 1;
  padding: 0 1.6rem;
  text-align: center;
}
.prog-hero__catch--text {
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-white);
  background-color: var(--color-black);
  margin-bottom: 0;
  text-align: center;
}
@media screen and (max-width: 800px) {
  .prog-hero {
    height: 30rem;
    padding-top: 4rem;
  }
}
@media screen and (min-width: 801px) and (max-width: 1200px) {
  .prog-hero {
    padding-top: 5rem;
    height: 30rem;
  }
}
@media screen and (min-width: 1201px) {
  .prog-hero {
    height: 22rem;
  }
}
/* --- Overview --- */
.prog-overview {
  padding: 2rem 1rem;
}
/* --- Photo --- */
.prog-photo img,
.prog-hero__catch--photo img {
  width: 100%;
  height: auto;
  display: block;
}
/* --- Prize --- */
.prog-prize {
  border: 3px solid transparent;
  border-image: var(--gradient01) 1;
  border-radius: 0.8rem;
  padding: 1.6rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2rem;
}
.prog-prize__highlight {
  color: var(--color-danger);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  display: block;
}
/* --- Features --- */
.prog-features {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}
.prog-feature {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-gray);
}
.prog-feature__num {
  font-family: var(--font-bold-eng);
  font-size: 2rem;
  font-weight: 800;
  min-width: 2.8rem;
  line-height: 1;
  letter-spacing: 0.05rem;
}
.prog-feature__text {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
/* --- Info Table --- */
.prog-info {
  width: 100%;
  font-size: 1.4rem;
  margin-bottom: 2rem;
}
.prog-info__row {
  display: flex;
  align-items: stretch;
}
.prog-info__row:not(:last-child) {
  margin-bottom: .5rem;
}
.prog-info__label {
  background-color: var(--color-lightgray);
  font-size: 1.4rem;
  font-weight: 600;
  padding: .5rem 1rem;
  line-height: 1.4;
  flex-shrink: 0;
  width: 9rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.prog-info__value {
  padding: .5rem 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
.prog-info__value small {
  font-size: 1.2rem;
}
/* --- Entry Button --- */
.prog-entry-btn {
  background: var(--gradient04);
  padding: 2rem 1rem;
  margin-top: 3rem;
}
.prog-entry-btn span {
  font-size: 1.5rem;
}
.prog-entry-btn small {
  display: block;
  font-size: 1.2rem;
}
/* --- CTA --- */
.prog-cta {
  padding-bottom: 4rem;
}
.prog-cta__wrap {
  background: #fffde8;
  padding: 1rem;
  border-radius: 1rem;
}
.prog-cta__title {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.prog-cta .floating-entry_v2__btns {
  gap: .5rem;
}
.prog-cta .floating-entry_v2__btn{
  padding: 1.2rem;
  line-height: 1;
}

/* テーマカラー別 枕詞カラー */
.prog-page--1mile .prog-cta__title-name { color: var(--color-blue); }
.prog-page--10k .prog-cta__title-name { color: var(--color-orange); }
.prog-page--relay-half .prog-cta__title-name,
.prog-page--relay-marathon .prog-cta__title-name,
.prog-page--rokutai .prog-cta__title-name { color: var(--color-green); }
.prog-page--womens .prog-cta__title-name { color: var(--color-pink); }

/* --- Gallery --- */
.prog-gallery {
  padding: 5rem 0;
}
.prog-gallery .section-head {
  padding-bottom: 2rem;
}
.prog-gallery__slider {
  overflow: hidden;
  padding-bottom: 4rem;
}
.prog-gallery__slider .slick-slide {
  padding: 0 .5rem;
}
/* --- Course --- */
.prog-course {
  padding-bottom: 4rem;
}
.prog-course .section-head {
  padding: 2.4rem 1.6rem;
}
.prog-course .section-head__en,
.prog-course .section-head__jp {
  color: var(--color-white);
}
.prog-course__body {
  background-color: var(--color-white);
  padding: 1rem;
  text-align: center;
}
.prog-course__map {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   PROGRAM共通
============================================ */
body[class^="prog-page--"] .sidebar-left, 
body[class^="prog-page--"] .sidebar-right {
  background-image: none !important;
}
.sidebar-right .program-list li {
  position: relative;
}
@media (min-width: 1200px) {
  .sidebar-right .program-list li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
    width: 0;
    height: 0;
    border-top: 1.8rem solid transparent;
    border-bottom: 1.8rem solid transparent;
    border-right: 2rem solid var(--color-black);
    opacity: 0;
    margin-top: .5rem;
  }
}

/* ============================================
   10K
============================================ */
.prog-page--10k .prog-hero, 
.prog-page--10k .prog-course, 
.prog-page--10k .sidebar-left, 
.prog-page--10k .sidebar-right { background-color: var(--color-orange); }
.prog-page--10k .prog-feature { border-bottom-color: var(--color-orange); }
.prog-page--10k .prog-feature__num { color: var(--color-orange); }
.prog-page--10k .program-list li:nth-of-type(2)::before {
  opacity: 1;
}

/* ============================================
   1MILE
============================================ */
.prog-page--1mile .prog-hero, 
.prog-page--1mile .prog-course, 
.prog-page--1mile .sidebar-left, 
.prog-page--1mile .sidebar-right { background-color: var(--color-blue); }
.prog-page--1mile .prog-feature { border-bottom-color: var(--color-blue); }
.prog-page--1mile .prog-feature__num { color: var(--color-blue); }
.prog-page--1mile .program-list li:nth-of-type(3)::before {
  opacity: 1;
}

/* ============================================
   RELAY HALF MARATHON
============================================ */
.prog-page--relay-half .prog-hero,
.prog-page--relay-half .prog-course,
.prog-page--relay-half .sidebar-left, 
.prog-page--relay-half .sidebar-right { background-color: var(--color-green); }
.prog-page--relay-half .prog-feature { border-bottom-color: var(--color-green); }
.prog-page--relay-half .prog-feature__num { color: var(--color-green); }
.prog-page--relay-half .program-list li:nth-of-type(4)::before {
  opacity: 1;
}

/* ============================================
   RELAY MARATHON
============================================ */
.prog-page--relay-marathon .prog-hero,
.prog-page--relay-marathon .prog-course,
.prog-page--relay-marathon .sidebar-left, 
.prog-page--relay-marathon .sidebar-right { background-color: var(--color-green); }
.prog-page--relay-marathon .prog-feature { border-bottom-color: var(--color-green); }
.prog-page--relay-marathon .prog-feature__num { color: var(--color-green); }
.prog-page--relay-marathon .program-list li:nth-of-type(5)::before {
  opacity: 1;
}

/* ============================================
   ROKUTAI RELAY
============================================ */
.prog-page--rokutai .prog-hero,
.prog-page--rokutai .prog-course,
.prog-page--rokutai .sidebar-left, 
.prog-page--rokutai .sidebar-right { background-color: var(--color-green); }
.prog-page--rokutai .prog-feature{ border-bottom-color: var(--color-green); }
.prog-page--rokutai .prog-feature__num { color: var(--color-green); }
.prog-page--rokutai .program-list li:last-of-type::before {
  opacity: 1;
}

/* ============================================
   WOMEN'S RUN 5K
============================================ */
.prog-page--womens .prog-hero, 
.prog-page--womens .prog-course, 
.prog-page--womens .sidebar-left, 
.prog-page--womens .sidebar-right { background-color: var(--color-pink); }
.prog-page--womens .prog-feature { border-bottom-color: var(--color-pink); }
.prog-page--womens .prog-feature__num { color: var(--color-pink); }
.prog-page--womens .program-list li:first-of-type::before {
  opacity: 1;
}

/* --- After Program (Women's Run) --- */
.prog-after {
  padding: 0 1rem 3rem;
  position: relative;
}
.prog-after__label {
  display: inline-block;
  font-family: var(--font-bold-eng);
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  background-color: var(--color-pink);
  color: var(--color-white);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.prog-after .section-inner {
  border: 3px solid var(--color-black);
  border-radius: 1rem;
  padding: 0;
  z-index: 1;
}
.prog-after__head {
  position: relative;
}
.prog-after__title {
  background-color: var(--color-black);
  padding: 2rem;
  padding-bottom: 1.2rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.8;
  margin-bottom: 0;
}
.prog-after__title span {
  font-size: 1.4rem;
  display: block;
}
.prog-after__img {
  width: 100%;
  height: auto;
  aspect-ratio: 320/200;
  object-fit: cover;
  display: block;
}
.prog-after__badge {
  position: absolute;
  bottom: -1rem;
  left: 1.6rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background-color: var(--color-pink);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.prog-after__badge span:first-child {
  font-size: 1.6rem;
  font-weight: 600;
}
.prog-after__badge span:last-child {
  font-size: 2.4rem;
  font-weight: 900;
}
.prog-after__body {
  padding: 2.4rem 1.6rem 2rem;
}
.prog-after__target {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 2rem;
}
.prog-after__target span {
  font-family: var(--font-bold-eng);
  color: var(--color-pink);
  display: block;
}
.prog-after__quote {
  background: var(--gradient02);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.prog-after__text {
  font-size: 1.4rem;
  line-height: 1.8;
  font-weight: 500;
  margin-bottom: 2rem;
}
.prog-movie {
  padding: 0 0 2rem;
  text-align: center;
}
.prog-movie video {
  margin: 0 auto;
  width: min(100%, 25rem);
  border-radius: 1rem;
}
/* --- Instructor --- */
.prog-instructor {
  text-align: center;
  display: grid;
  align-items: end;
  grid-template-columns: auto max(50%, 14.7rem);
  column-gap: 2rem;
  row-gap: 1.6rem;
  background-color: #FFF2F9;
  padding: 2rem;
  border-radius: 1rem;
}
.prog-instructor .full {
  grid-column: 1 / 3;
}
.prog-instructor__photos img {
  width: 100%;
  height: auto;
  display: block;
}
.prog-instructor__name {
  color: var(--color-pink);
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 700;
  margin: 0 0 2rem;
  text-align: left;
}
.prog-instructor__name small {
  display: block;
  font-size: 1.6rem;
}
.prog-instructor__profile {
  text-align: left;
}
.prog-instructor__profile-title {
  background-color: #FDE1F1;
  font-size: 1.4rem;
  line-height: 1.4;
  padding: .5rem 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}
.prog-instructor__profile-text {
  font-size: 1.2rem;
  line-height: 1.8;
  margin: 0;
}


/* ============================================
   サイドバーカラー指定
============================================ */
.prog-page--womens .sidebar-right::before {
  background: linear-gradient(to left, rgba(157, 9, 91, 0) 0%, rgba(157, 9, 91, 0.3) 74.16%, rgba(157, 9, 91, 0.6) 100%);
}
.prog-page--womens .sidebar-left::before {
  background: linear-gradient(to right, rgba(157, 9, 91, 0) 0%, rgba(157, 9, 91, 0.3) 74.16%, rgba(157, 9, 91, 0.6) 100%);
}
.prog-page--10k .sidebar-right::before {
  background: linear-gradient(to left, rgba(221, 129, 1, 0) 0%, rgba(221, 129, 1, 0.3) 74.16%, rgba(221, 129, 1, 0.6) 100%);
}
.prog-page--10k .sidebar-left::before {
  background: linear-gradient(to right, rgba(221, 129, 1, 0) 0%, rgba(221, 129, 1, 0.3) 74.16%, rgba(221, 129, 1, 0.6) 100%);
}
.prog-page--1mile .sidebar-right::before {
  background: linear-gradient(to left, rgba(0, 127, 185, 0) 0%, rgba(0, 127, 185, 0.3) 74.16%, rgba(0, 127, 185, 0.6) 100%);
}
.prog-page--1mile .sidebar-left::before {
  background: linear-gradient(to right, rgba(0, 127, 185, 0) 0%, rgba(0, 127, 185, 0.3) 74.16%, rgba(0, 127, 185, 0.6) 100%);
}
.prog-page--relay-half .sidebar-right::before, 
.prog-page--relay-marathon .sidebar-right::before, 
.prog-page--rokutai .sidebar-right::before {
  background: linear-gradient(to left, rgba(100, 158, 20, 0) 0%, rgba(100, 158, 20, 0.3) 74.16%, rgba(100, 158, 20, 0.6) 100%);
}
.prog-page--relay-half .sidebar-left::before, 
.prog-page--relay-marathon .sidebar-left::before, 
.prog-page--rokutai .sidebar-left::before {
  background: linear-gradient(to right, rgba(100, 158, 20, 0) 0%, rgba(100, 158, 20, 0.3) 74.16%, rgba(100, 158, 20, 0.6) 100%);
}