/* =========================================================
  DiDi 夏の乗っトク祭 LP
========================================================= */

:root {
  --color-navy: #17428f;
  --color-purple: #762657;
  --color-orange: #ff300f;
  --color-pink: #f40d3f;
  --color-bg-pink: #fde9e1;
  --color-footer: #082f64;
  --container: 104rem;
  --slider-gap: 2.4rem;
}

* { box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-purple);
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
  letter-spacing: .04em;
  background: #fff;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: 2.4rem;
}
.sp-only { display: none; }
.lp { overflow: hidden; }
.section-white { background: #fff; }

@media screen and (max-width: 896px) {
  .hide-sp {
    display: none !important;
  }
}
@media screen and (min-width: 897px) {
  .hide-pc {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .hide-sp {
    display: none !important;
  }
}



/* =========================================================
  KV
========================================================= */
.kv {
  position: relative;
  min-height: 70rem;
  padding: 4rem 0 10rem;
  color: #fff;
  background: url("../img/kv_bg.jpg") center top / cover no-repeat;
}
.kv__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7.3rem;
  background: url("../img/kv_wave.png") center center / auto 100% no-repeat;
}
.kv__inner {
  position: relative;
  z-index: 3;
  width: min(66rem, 80vw);
  margin: auto;
  text-align: center;
}
.kv__logo-small { width: 10rem; margin: 0 auto 3rem; }
.kv__title { margin: 0; }
.kv__title img { width: 61rem; margin: auto; }
.kv__date {
  position: absolute;
  right: -19rem;
  top: 32rem;
  width: 15rem;
}
.kv__lead-img { width: 64rem; margin: 2.4rem auto 1.6rem; }
.kv__note {
  display: inline-block;
  margin: 0;
  padding: 1rem 2.4rem;
  font-size: 1.1rem;
  letter-spacing: .08em;
}
.kv__lantern {
  position: absolute;
  z-index: 4;
  top: 0;
  width: 38rem;
}
.kv__lantern--left { left: 0; }
.kv__lantern--right { right: 0; }
.kv__firework {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform-origin: center;
}
.kv__firework--01 { left: 18%; top: 12rem; width: 18rem; }
.kv__firework--02 { left: 12%; top: 30rem; width: 16rem; }
.kv__firework--03 { right: 11%; top: 20rem; width: 18rem; }
.kv__firework--04 { right: 22%; top: 10rem; width: 13rem; }
.kv__firework--05 { left: 9%; top: 24rem; width: 9rem; opacity: .55; }
.kv__people,
.kv__taxi { position: absolute; z-index: 5; }
.kv__people { bottom: 0; }
.kv__taxi { right: 8%; bottom: 4rem; width: 12rem; }
.kv__people--left { left: 13%; width: 20rem; }
.kv__people--right { right: 18%; width: 12rem; }
@media screen and (max-width: 1500px) {
  .kv__people--left { left: 5%; width: 20rem; }
  .kv__people--right { right: 15%; width: 12rem; }
  .kv__taxi { right: 5%; bottom: 4rem; width: 12rem; }
}

/* =========================================================
  Coupon
========================================================= */
.section-heading {
  grid-template-columns: 6rem minmax(0, 1fr) 6rem;
  align-items: start;
  gap: 1.8rem;
  max-width: 60rem;
  margin: 0 auto 3.4rem;
  padding-top: 5.2rem;
  text-align: center;
}
.section-heading div{
  display: grid;
	grid-auto-flow: column;
	justify-items: center;
    align-items: center;
}
.section-heading h2 {
  margin: 0;
  color: var(--color-navy);
  font-size: 3rem;
  line-height: 1.28;
  font-weight: 900;
  letter-spacing: .08em;
}
.section-heading h2 span {
  position: relative;
  z-index: 0;
  display: inline-block;
}
.section-heading h2 span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .12em;
  z-index: -1;
  height: .34em;
  background: #fff06a;
}
.section-heading p {
  margin: 1.6rem 0 0;
  color: var(--color-navy);
  font-size: 1.3rem;
  line-height: 1.85;
  font-weight: 700;
}
.section-heading__icon { width: 5.2rem; margin-top: 4rem; }

.coupon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.2rem 3.4rem;
  max-width: 78rem;
  margin: auto;
}
.coupon-card__ticket { width: 100%; }
.coupon-card__meta {
  margin: 1.1rem 0 0;
  padding: 0;
  background: transparent;
  color: var(--color-navy);
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.75;
}
.coupon-card:nth-child(2) .coupon-card__meta,
.coupon-card:nth-child(4) .coupon-card__meta { color: #f05a24; }
.coupon-card:nth-child(5) .coupon-card__meta { color: #38a760; }
.coupon-card:nth-child(6) .coupon-card__meta { color: #e4508a; }
.coupons__link {
  margin: 4rem auto 6rem;
  color: var(--color-navy);
  text-align: center;
  font-size: 1.05rem;
}
.coupons__link a { text-decoration: underline; }

/* =========================================================
  Partner campaigns
========================================================= */
.partners {
  padding: 5.4rem 0 7rem;
  background-color: var(--color-bg-pink);
  background-image: repeating-conic-gradient(from 0deg at 50% 48%, rgba(255,255,255,.45) 0 10deg, transparent 10deg 22deg);
}
.section-title-ribbon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2rem;
  text-align: center;
}
.section-title-ribbon h2,
.steps__title {
  margin: 0;
  color: var(--color-navy);
  background: transparent;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.35;
}
.section-title-ribbon h2 { font-size: 2.5rem; }
.section-title-ribbon img { width: 6rem; }
.partners__list {
  display: grid;
  gap: 2.4rem;
  max-width: 76rem;
  margin: auto;
}
.partner-card {
  display: grid;
  grid-template-columns: 20rem 1fr;
  grid-template-areas:
    "logo visual"
    "button visual";
  align-items: center;
  gap: 0 2.6rem;
  padding: 2.8rem 2.4rem;
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: .4rem .4rem 0 rgba(80,50,35,.16);
}
.partner-card__logo {
  grid-area: logo;
  display: flex;
  justify-content: center;
  align-items: center;
	flex-direction: column;
}
.partner-card__logo img {
  width: 15rem;
  max-height: 12rem;
  object-fit: contain;
}
.partner-card__visual { grid-area: visual; width: 100%; }
.partner-card__button {
  --btn-bg: #FF0033;
  --btn-icon-bg: #fff;
  --btn-arrow: var(--btn-bg);
  position: relative;
  grid-area: button;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16rem;
  min-height: 4.8rem;
  padding: 0 1.4rem 0 2.8rem;
  border-radius: 999rem;
  background: var(--btn-bg);
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
	margin-top: 20px;
}
.partner-card__button::before,
.partner-card__button::after {
  content: none;
}
.partner-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  margin-left: 1.1rem;
  border-radius: 50%;
  background: var(--btn-icon-bg);
}
.partner-card__icon svg {
  width: 1.35rem;
  height: 1.2rem;
  overflow: visible;
	transition: transform .25s ease;
}
.partner-card__button:hover .partner-card__icon svg,
.partner-card__button:focus-visible .partner-card__icon svg {
  transform: translateX(3px);
	transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.partner-card__icon path {
  fill: none;
  stroke: var(--btn-arrow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.partner-card__button--blue {
  --btn-bg: #003d74;
  --btn-icon-bg: rgba(255,255,255,.28);
  --btn-arrow: #fff;
}

/* =========================================================
  CM
========================================================= */
.cm {
  position: relative;
  color: #fff;
  text-align: center;
  background: #204793 url("../img/cm-bg-pc.png") center top / cover no-repeat;
  overflow: hidden;
}
.cm__inner { position: relative; z-index: 1; padding: 3.2rem 2.4rem 7rem; }
.cm__onair { width: 34rem; margin: 0 auto 2rem; }
.cm h2 {
  margin: 0 0 2.8rem;
  color: #fff;
  background: transparent;
  font-size: 2.6rem;
  line-height: 1.35;
  letter-spacing: .08em;
}
.cm__movie {
  position: relative;
  width: min(76rem, 90%);
  margin: auto;
  aspect-ratio: 16 / 9;
  border-radius: .8rem;
  overflow: hidden;
  background: #123;
}
.cm__movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =========================================================
  Steps
========================================================= */
.steps { position: relative; padding: 7.2rem 0 10rem; background: #fff; }
.steps__lantern { position: absolute; top: 0; width: 38rem; }
.steps__lantern--left { left: 0; }
.steps__lantern--right { right: 0; }
.steps__title {
  display: block;
  width: max-content;
  margin: 0 auto 5rem;
  font-size: 2.6rem;
  text-align: center;
}

.steps__title::before {
  content: "";
  background: url("../img/steps-left.png") center top / 100% auto no-repeat;
	display: inline-block;
	width: 40px;
    height: 66px;
	margin-right: 20px;
	vertical-align: middle;
}
.steps__title::after {
  content: "";
  background: url("../img/steps-right.png") center top / 100% auto no-repeat;
	display: inline-block;
	width: 40px;
    height: 66px;
	margin-left: 20px;
	vertical-align: middle;
}


.steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4rem;
  max-width: 100rem;
  margin: auto;
}
.step-card__img { width: 25rem; margin: 0 auto 1.6rem; }
.step-card__body {
  grid-template-columns: auto 1fr;
  gap: .8rem 1.2rem;
  align-items: center;
}
.step-card__body span {
  display: grid;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  font-weight: 900;
	margin-right: 10px;
}
.step-card h3 { margin: 0; color: var(--color-orange); font-size: 2rem;display: flex; justify-content: center; margin-bottom: 10px; }
.step-card p { grid-column: 2; margin: 0; color: var(--color-purple); font-size: 1.4rem; }

/* =========================================================
  Download
========================================================= */
.download {
  position: relative;
  min-height: 34rem;
  color: #fff;
  text-align: center;
  background: #c94525 url("../img/download-bg-pc.png") center top / cover no-repeat;
  overflow: hidden;
}
.download__inner { position: relative; z-index: 1; padding: 6.5rem 2.4rem; }
.download h2 { margin: 0 0 2rem; font-size: 4rem; line-height: 1.35; letter-spacing: .12em; }
.download__buttons { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.8rem; }
.download__buttons img { height: 5.6rem; }
.download p { margin: 0; font-size: 1.3rem; }

/* =========================================================
  Notice / Footer
========================================================= */
.notice { position: relative; padding: 7rem 0 5rem; background: #eef1f5; }
.notice__car { position: absolute; z-index: 2; top: -4.8rem; right: 13%; width: 13rem; }
.notice__box { max-width: 78rem; padding: 2.4rem 2rem; color: var(--color-navy); background: transparent; }
.notice h2 { margin: 0 0 2.4rem; color: var(--color-navy); font-size: 1.45rem; }
.notice li { margin: .8rem 0; color: var(--color-navy); font-size: 1.05rem; line-height: 1.8; }
.footer { padding: 4rem 2.4rem; color: #fff; text-align: center; background: var(--color-footer); }
.footer__logo { width: 7.5rem; margin: 0 auto 1rem; }
.footer p { margin: 0; color: #fff; background: transparent; font-size: 1rem; letter-spacing: .08em; }

/* =========================================================
  SP slider common
========================================================= */
.slider__dots { display: none; }

@media (max-width: 767px) {
  .sp-only { display: block; }
  .container { padding-inline: 1.8rem; }

  .kv { min-height: 58rem; padding: 4rem 0 7rem; }
  .kv__inner { width: 90vw; }
  .kv__logo-small { width: 7.2rem; margin-bottom: 2rem; }
  .kv__title img { width: 33rem; }
  .kv__date { width: 10rem; right: 4rem; top: 36rem; }
  .kv__lead-img { width: 31rem; margin-top: 1.4rem; }
  .kv__note { padding: .6rem 1rem; font-size: 1rem; }
  .kv__wave { height: 5rem; background: url(../img/kv_wave_sp.png) center top / 100% auto no-repeat; }
  .kv__lantern { width: 24rem; }
  .kv__lantern--left { left: -9rem; }
  .kv__lantern--right { right: -9rem; }
  .kv__firework--01 { left: 0%; top: 5rem; width: 9rem; }
  .kv__firework--02 { left: -10%; top: 15rem; width: 8rem; }
  .kv__firework--03 { right: -10%; top: 10rem; width: 9rem; }
  .kv__firework--04 { right: 17%; top: 4rem; width: 7rem; }
  .kv__firework--05 { display: none; }
  .kv__people--left { left: 5%; width: 18rem; }
  .kv__people--right { right: 16%; width: 8rem; }
  .kv__taxi { right: 3%; width: 14rem; bottom: 1rem; }

  .section-heading {
    grid-template-columns: 3.4rem 1fr 3.4rem;
    gap: .6rem;
    padding-top: 2.8rem;
    margin-bottom: 2.4rem;
  }
  .section-heading h2 { font-size: 2rem; line-height: 1.35; }
  .section-heading p { font-size: .92rem; line-height: 1.8; }
  .section-heading__icon { width: 3.2rem; margin-top: 0; }
  .coupon-grid { display: block; }
  .coupon-card { margin-bottom: 2.6rem; }
  .coupon-card__meta { margin-top: .7rem; font-size: 1.1rem; }

  .partners { padding: 4rem 0 5rem; }
  .section-title-ribbon h2 { font-size: 2.5rem; line-height: 1.35; white-space: nowrap }
  .section-title-ribbon img { width: 7rem; }

  .js-slider {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
  }
  .js-slider .slider__track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--slider-gap);
    width: 100%;
    max-width: none;
    margin: 0;
    transition: transform .35s ease;
    will-change: transform;
    cursor: grab;
  }
  .js-slider.is-dragging .slider__track { transition: none; cursor: grabbing; }
  .js-slider .slider__slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 30px 0 0 0;
  }
  .slider__dots {
    display: flex;
    justify-content: center;
    gap: .9rem;
    margin-top: 2.2rem;
  }
  .slider__dots button {
    appearance: none;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9dde2;
  }
  .slider__dots button.is-active { background: #e56f00; }

  .partners__container { padding-inline: 2.4rem; }
  .partners__list { display: flex; max-width: none; margin: 0; }
  .partner-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-height: 45rem;
    padding: 3rem 2.4rem;
    overflow: hidden;
  }
  .partner-card__button {
    min-width: 16rem;
    min-height: 4.8rem;
    margin-top: 1.4rem;
    font-size: 1.6rem;
  }
  .partner-card__visual { margin-top: 2rem; width: 85%; margin: 20px auto; }

.cm {
    background: #204793 url(../img/cm-bg-sp.png) center top / 100% auto no-repeat;
}
  .cm__inner { padding: 3.6rem 1.8rem 4.8rem; }
  .cm__onair { width: 24rem; }
  .cm h2 { margin-bottom: 2rem; font-size: 1.55rem; }
  .cm__movie { width: 100%; }

  .steps { padding: 5.2rem 0 6rem; }
  .steps__lantern { width: 22rem; }
  .steps__lantern--left { left: -5rem; }
  .steps__lantern--right { right: -5rem; }
  .steps__title { margin-bottom: 1rem; margin-top: 3rem; font-size: 2rem; }
  .steps__title::before { margin-right: 1rem; width: 30px; height: 50px; }
  .steps__title::after { margin-left: 1rem; width: 30px; height: 50px; }
  .steps__list { display: flex; gap: var(--slider-gap); max-width: none; margin: 0; }
  .step-card { width: 100%; text-align: center; }
  .step-card__img { width: 23rem; }
  .step-card__body { display: block; }
  .step-card p { font-size: 1.3rem; }

  .download { min-height: 26rem; background: #c94525 url(../img/download-bg-sp.png) center top / 100% 100% no-repeat; }
  .download__inner { padding: 4.5rem 1.8rem; }
  .download h2 { font-size: 2.8rem; }
  .download__buttons { gap: .8rem; }
  .download__buttons img { height: 4rem; }
  .download p { font-size: 1rem; }

  .notice { padding: 2rem 0 3.5rem; }
  .notice__car { top: -3.5rem; right: 2rem; width: 9rem; }
  .notice__box { padding: 1.8rem; }
  .notice h2 { font-size: 1.8rem; }
  .notice ul { padding-left: 1.2rem; }
  .notice li { font-size: 1.2rem; }
  .footer { padding: 3rem 1.8rem; }
}

/* =========================================================
  Scroll fade animation
========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(2.8rem);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================
  Firework animation
  - 画像は1個ずつ独立のまま、後から差し替えても動く
  - JSで .is-animated と CSS変数を付与
========================================================= */
.kv__firework {
  opacity: .92;
  filter: drop-shadow(0 0 .8rem rgba(255,255,255,.18));
  will-change: transform, opacity, filter;
}
.kv__firework.is-animated {
  animation: fireworkBloom var(--firework-duration, 4.4s) ease-in-out var(--firework-delay, 0s) infinite;
}
.kv__firework--01 { --firework-duration: 4.8s; --firework-delay: -.4s; --firework-rotate: -2deg; }
.kv__firework--02 { --firework-duration: 5.4s; --firework-delay: -1.8s; --firework-rotate: 2deg; }
.kv__firework--03 { --firework-duration: 4.2s; --firework-delay: -1.1s; --firework-rotate: -1deg; }
.kv__firework--04 { --firework-duration: 5.0s; --firework-delay: -2.6s; --firework-rotate: 3deg; }
.kv__firework--05 { --firework-duration: 6.0s; --firework-delay: -3.2s; --firework-rotate: -3deg; }

@keyframes fireworkBloom {
  0%, 100% {
    transform: scale(.92) rotate(var(--firework-rotate, 0deg));
    opacity: .55;
    filter: drop-shadow(0 0 .2rem rgba(255,255,255,.05)) brightness(.88);
  }
  12% {
    transform: scale(1.08) rotate(var(--firework-rotate, 0deg));
    opacity: 1;
    filter: drop-shadow(0 0 1.4rem rgba(255,255,255,.34)) brightness(1.16);
  }
  27% {
    transform: scale(.98) rotate(var(--firework-rotate, 0deg));
    opacity: .82;
    filter: drop-shadow(0 0 .8rem rgba(255,255,255,.18)) brightness(1);
  }
  56% {
    transform: scale(1.04) rotate(var(--firework-rotate, 0deg));
    opacity: .94;
    filter: drop-shadow(0 0 1.1rem rgba(255,255,255,.24)) brightness(1.08);
  }
  78% {
    transform: scale(.95) rotate(var(--firework-rotate, 0deg));
    opacity: .7;
    filter: drop-shadow(0 0 .45rem rgba(255,255,255,.1)) brightness(.95);
  }
}

.kv__lantern {
  transform-origin: 50% 0;
  animation: lanternSway 4.8s ease-in-out infinite;
}
.kv__lantern--right { animation-delay: -2.2s; }
@keyframes lanternSway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .kv__firework.is-animated,
  .kv__lantern { animation: none; }
}