/* VISION24 24h | campaign.css
 * top-v2 キャンペーンの 24h 移植版（body.gym-24h 専用）
 * サイズは px 明示。色・幅は 24h base トークンを優先。
 */

/*================================================
 * Tokens（キャンペーン固有のみ。色は base を参照）
 ================================================*/
body.gym-24h {
  --campaign-gold: #daaf08;
  --gradient-gold: linear-gradient(45deg, #b67b03 0%, #daaf08 45%, #fee9a0 70%, #daaf08 85%, #b67b03 100%);
  --top-v2-noise-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --top-v2-noise-bg: #1c1c1c;
}

/* ゴールド文字（グラデクリップ）共通 */
body.gym-24h .vision-campaign__headline-gold,
body.gym-24h .vision-campaign__lead-em,
body.gym-24h .vision-campaign__free--hero .vision-campaign__yen,
body.gym-24h .vision-campaign__free--hero .vision-campaign__zero {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/*================================================
 * Fixed CVP
 ================================================*/
body.gym-24h .vision-campaign__cvp {
  position: relative;
  width: 100%;
  margin: 32px 0 0;
  padding: 0 var(--pad);
  box-sizing: border-box;
  text-align: center;
  z-index: 2;
}

body.gym-24h .vision-campaign__cvp.is-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0 var(--pad) calc(env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  opacity: 0;
  animation: vision-campaign-cvp-fadein 1s ease forwards;
}

body.gym-24h .vision-campaign__cvp-spacer {
  width: 100%;
  margin: 32px 0 0;
  pointer-events: none;
}

body.gym-24h .vision-campaign__cvp .wp-block-image,
body.gym-24h .vision-campaign__cvp-figure {
  margin: 0;
  line-height: 0;
}

body.gym-24h .vision-campaign__cvp a,
body.gym-24h .vision-campaign__cvp-link {
  display: inline-block;
  vertical-align: bottom;
  line-height: 0;
  animation: vision-poyo-poyo 3s infinite ease-in-out;
}

body.gym-24h .vision-campaign__cvp img,
body.gym-24h .vision-campaign__cvp-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin-inline: auto;
}

body.gym-24h.has-campaign-cvp-fixed .site-footer {
  padding-bottom: calc(40px + var(--vision-campaign-cvp-height, 80px) + env(safe-area-inset-bottom, 0px));
}

@keyframes vision-campaign-cvp-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vision-poyo-poyo {
  0%,
  100% { transform: scale(1, 1); }
  10% { transform: scale(1.03, 0.97); }
  20% { transform: scale(0.98, 1.02); }
  30% { transform: scale(1.01, 0.99); }
  40% { transform: scale(1, 1); }
}

/*================================================
 * Fade-up (campaign headline)
 ================================================*/
body.gym-24h .top-v2-fadeup {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

body.gym-24h .top-v2-fadeup.started {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/*================================================
 * Campaign section (mobile-first)
 ================================================*/
body.gym-24h .vision-campaign {
  position: relative;
  overflow: visible;
  background-color: transparent;
  padding: 0 24px 50px;
}

body.gym-24h .vision-campaign::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background-color: var(--top-v2-noise-bg);
  background-image: var(--top-v2-noise-image);
  background-blend-mode: overlay;
  filter: grayscale(1);
}

body.gym-24h .vision-campaign > * {
  position: relative;
  z-index: 1;
}

/* --- Marquee --- */
body.gym-24h .vision-campaign__marquee {
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: 10px;
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
}

body.gym-24h .vision-campaign__marquee-track {
  display: flex;
  width: max-content;
  animation: vision-campaign-marquee 28s linear infinite;
}

body.gym-24h .vision-campaign__marquee-track span {
  flex-shrink: 0;
  padding-right: 40px;
  font-family: var(--f-en);
  font-size: 18vw;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fill-yellow);
}

@keyframes vision-campaign-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Frame --- */
body.gym-24h .vision-campaign__frame {
  position: relative;
  margin-top: 26px;
  padding: 20px;
  border: 2px solid var(--campaign-gold);
  outline: 1px solid var(--campaign-gold);
  outline-offset: 5px;
  font-size: 16px;
  line-height: 1.2;
  background:
    linear-gradient(180deg, rgb(30 30 30 / 92%) 0%, rgb(18 18 18 / 96%) 100%),
    repeating-linear-gradient(
      -45deg,
      rgb(255 255 255 / 2%) 0,
      rgb(255 255 255 / 2%) 1px,
      transparent 1px,
      transparent 4px
    );
}

body.gym-24h .vision-campaign__headline {
  margin: 0 0 28px;
  font-family: var(--f);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-white);
  container-type: inline-size;
}

body.gym-24h .vision-campaign__headline-lead {
  display: block;
  white-space: nowrap;
  font-size: clamp(20px, 9.2cqi, 80px);
}

body.gym-24h .vision-campaign__headline-main {
  display: block;
  white-space: nowrap;
  font-size: clamp(20px, 8cqi, 64px);
}

body.gym-24h .vision-campaign__headline-gold {
  font-size: 1.5em;
}

body.gym-24h .vision-campaign__note {
  display: block;
  font-size: clamp(11px, 3.2cqi, 14px);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

body.gym-24h .vision-campaign__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.gym-24h .vision-campaign__col--personal {
  text-align: center;
  container-type: inline-size; /* lead / note 系の cqi 基準 */
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px dotted rgb(255 255 255 / 70%);
}

/* パーソナル＝超目玉と同型レイアウトのヒーロー枠 */
body.gym-24h .vision-campaign__offer--hero {
  margin-bottom: 10px;
  padding: 12px 8px;
  border: 1px solid rgb(218 175 8 / 55%);
  background: linear-gradient(180deg, rgb(218 175 8 / 14%) 0%, rgb(0 0 0 / 0%) 100%);
  box-shadow: inset 0 0 0 1px rgb(254 232 1 / 12%);
}

body.gym-24h .vision-campaign__offer--hero .vision-campaign__offer-text {
  font-size: 17px;
}

body.gym-24h .vision-campaign__lead {
  margin: 4px 0 0;
  font-family: var(--f);
  font-size: clamp(12px, 4.5cqi, 18px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-white);
  white-space: nowrap;
}

body.gym-24h .vision-campaign__lead-em {
  font-size: 2.2em;
}

body.gym-24h .vision-campaign__divider {
  margin: 16px 0;
  border: none;
  border-top: 2px dotted rgb(255 255 255 / 70%);
}

body.gym-24h .vision-campaign__divider--offer {
  margin: 8px 0;
}

body.gym-24h .vision-campaign__offer {
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 20%) minmax(0, 35%);
  align-items: center;
  margin-bottom: 4px;
}

body.gym-24h .vision-campaign__offer-left {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.gym-24h .vision-campaign__label {
  display: inline-block;
  justify-self: start;
  margin-bottom: 0;
  padding: 4px 12px;
  background: var(--gradient-gold);
  font-family: var(--f);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-black);
}

body.gym-24h .vision-campaign__offer-text {
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--f);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  overflow-wrap: anywhere;
  color: var(--ink-white);
}

body.gym-24h .vision-campaign__strike {
  text-decoration: line-through;
}

body.gym-24h .vision-campaign__bracket {
  display: block;
  width: 100%;
  max-width: 28px;
  height: auto;
  aspect-ratio: 58 / 50;
  justify-self: center;
}

/* 超目玉の「無料」（固定px。cqi は使わない） */
body.gym-24h .vision-campaign p.vision-campaign__free:not(.vision-campaign__free--hero) {
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-self: stretch;
  overflow: visible;
  font-family: var(--f);
  font-size: 40px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--campaign-gold);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ¥0（SP: 80px / PC: 140px） */
body.gym-24h .vision-campaign p.vision-campaign__free--hero {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  justify-self: stretch;
  margin: 0;
  width: 100%;
  font-size: 80px;
  font-weight: 900;
  line-height: 1.2;
  overflow: visible;
  white-space: nowrap;
  background: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

body.gym-24h .vision-campaign__free--hero .vision-campaign__yen {
  font-size: 0.5em; /* SP: 40px */
  font-weight: 900;
  line-height: 1;
}

body.gym-24h .vision-campaign__free--hero .vision-campaign__zero {
  font-size: 1em; /* SP: 80px */
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* --- CTA --- */
body.gym-24h .vision-campaign__cta-block {
  margin-top: 32px;
  text-align: center;
}

body.gym-24h .vision-campaign__cta-micro {
  margin: 0 0 12px;
  font-family: var(--f);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-white);
}

body.gym-24h .vision-campaign__cta-micro strong {
  font-weight: 700;
}

body.gym-24h .vision-campaign__cta {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 1.2em 1.4em;
  border: 2px ridge var(--campaign-gold);
  background: var(--gradient-gold);
  font-family: var(--f);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--ink-black);
  box-sizing: border-box;
  transform-origin: center center;
  transition: transform 0.25s ease;
}

body.gym-24h .vision-campaign__cta:hover,
body.gym-24h .vision-campaign__cta:focus-visible {
  transform: scale(1.05);
}

body.gym-24h .vision-campaign__deadline {
  margin: 20px 0 0;
  font-family: var(--f);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-white);
}

body.gym-24h .vision-campaign__deadline-label {
  font-size: 30px;
  color: var(--campaign-gold);
}

body.gym-24h [data-top-v2-marquee].is-paused .vision-campaign__marquee-track {
  animation-play-state: paused;
}

/*================================================
 * Desktop
 ================================================*/
@media screen and (min-width: 769px) {
  body.gym-24h .vision-campaign {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 0 40px 80px;
  }

  body.gym-24h .vision-campaign__marquee-track span {
    font-size: 165px;
  }

  body.gym-24h .vision-campaign__frame {
    margin-top: 40px;
    padding: 48px 56px 56px;
    font-size: 20px;
  }

  body.gym-24h .vision-campaign__headline {
    font-size: 64px;
  }

  body.gym-24h .vision-campaign__headline-lead {
    font-size: 80px;
  }

  body.gym-24h .vision-campaign__headline-main {
    font-size: 64px;
  }

  body.gym-24h .vision-campaign__note {
    font-size: 20px;
  }

  body.gym-24h .vision-campaign__body {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  body.gym-24h .vision-campaign__col--personal {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px 12px 4px;
    margin-bottom: 0;
    border-bottom: none;
    border-right: 2px dotted rgb(255 255 255 / 70%);
  }

  body.gym-24h .vision-campaign__col--offers {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 4px 12px 16px;
  }

  body.gym-24h .vision-campaign__offer--hero {
    padding: 16px 12px;
  }

  body.gym-24h .vision-campaign__offer--hero .vision-campaign__offer-text {
    font-size: 20px;
  }

  body.gym-24h .vision-campaign__label,
  body.gym-24h .vision-campaign__offer-text,
  body.gym-24h .vision-campaign__deadline {
    font-size: 20px;
  }

  body.gym-24h .vision-campaign__lead {
    font-size: 20px;
  }

  body.gym-24h .vision-campaign__lead-em {
    font-size: 2em; /* 40px */
  }

  body.gym-24h .vision-campaign__deadline-label {
    font-size: 30px;
  }

  /* ¥0: 140px / ¥: 48px */
  body.gym-24h .vision-campaign p.vision-campaign__free--hero {
    font-size: 140px;
  }

  body.gym-24h .vision-campaign__free--hero .vision-campaign__yen {
    font-size: 48px;
  }

  /* 超目玉「無料」: 96px */
  body.gym-24h .vision-campaign p.vision-campaign__free:not(.vision-campaign__free--hero) {
    font-size: 96px;
  }

  body.gym-24h .vision-campaign__offer {
    grid-template-columns: minmax(0, 36%) minmax(0, 8%) minmax(0, 56%);
  }

  body.gym-24h .vision-campaign__cta-block {
    margin-top: 40px;
  }

  body.gym-24h .vision-campaign__cta-micro {
    font-size: 16px;
  }

  body.gym-24h .vision-campaign__cta {
    max-width: 480px;
    font-size: 32px;
  }
}

/*================================================
 * Reduced motion
 ================================================*/
@media (prefers-reduced-motion: reduce) {
  body.gym-24h .vision-campaign__cvp.is-fixed {
    opacity: 1;
    animation: none;
  }

  body.gym-24h .vision-campaign__cvp a,
  body.gym-24h .vision-campaign__cvp-link {
    animation: none;
  }

  body.gym-24h .top-v2-fadeup {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.gym-24h .vision-campaign__marquee-track {
    animation: none;
  }

  body.gym-24h .vision-campaign__cta {
    transition: none;
  }

  body.gym-24h .vision-campaign__cta:hover,
  body.gym-24h .vision-campaign__cta:focus-visible {
    transform: none;
  }
}