/* =============================================================================
   natsu-toku LP — スタイルシート
   Design System Clear 準拠
   タイポグラフィ: 30th LP vw-clamp トークン（--fs-*）を使用
   カラー: :root トークン参照のみ。hex直書き・rgba直書き禁止
   clamp端値: 393px(SP)→1000px(PC) を基準とした流体スケール
   ============================================================================= */

/* =============================================================================
   RESET — Josh's CSS Reset (joshwcomeau.com/css/custom-css-reset)
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; font-family: inherit; font-size: inherit; line-height: inherit; }
* { margin: 0; }
a { color: inherit; text-decoration: none; cursor: pointer; }
a:hover { opacity: 0.8; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
img, svg { vertical-align: bottom; max-width: 100%; height: auto; display: block; }
ul { padding: 0; list-style: none; }
html { scroll-behavior: smooth; }

/* =============================================================================
   BASE
   ============================================================================= */
body {
  font-family: var(--ff-base);
  font-size: var(--fs-body-md);
  line-height: 1.7;
  color: var(--color-text-primary);
  font-feature-settings: "palt" 1;
  letter-spacing: 0.1em;
  background: var(--color-bg-default);
  text-align: justify;
}

/* =============================================================================
   LAYOUT — Wrap 型（30th LP パターン）
   SP / PC とも全幅フラット（外枠シャドウなし）
   ============================================================================= */
.Contents {
  background: var(--color-bg-default);
  overflow-x: clip;
}

.Wrap {
  width: 100%;
  margin-inline: auto;
  background: var(--color-bg-default);
  position: relative;
}

.Main {
  text-align: center;
}

@media (min-width: 768px) {
  .Wrap {
    max-width: var(--wrap-max-pc);
  }

  /* ヒーロー・グレー背景セクション: Wrap カラムからビューポート全幅へ */
  .CpAlert,
  .Mv,
  .Section--subtle,
  .Overview,
  .Footer {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

/* =============================================================================
   UTILITY
   ============================================================================= */
/* .Em: 価格・キャンペーン訴求の強調テキスト。brand.primary はここのみ使用 */
.Em { color: var(--color-brand-primary); }
/* .Em__unit: 「カ月間」など単位部分のみ黒色で表示 */
.Em .Em__unit { color: var(--color-text-primary); }

.text-center { text-align: center; }
.mt-xs  { margin-top: var(--sp-xs); }
.mt-sm  { margin-top: var(--sp-sm); }
.mt-md  { margin-top: var(--sp-md); }
.mt-lg  { margin-top: var(--sp-lg); }
.mt-xl  { margin-top: var(--sp-xl); }
.mt-xxl { margin-top: var(--sp-xxl); }

@media (max-width: 767px) { .pc-only { display: none !important; } }
@media (min-width: 768px) { .sp-only { display: none !important; } }

/* AsteriskList: 注釈リスト */
.AsteriskList {
  padding-left: 1em;
  text-indent: -1em;
  font-size: var(--fs-label-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.AsteriskList li::before { content: "※"; }
.AsteriskList li + li { margin-top: var(--sp-xxs); }

/* =============================================================================
   FAQ — 30th LP アコーディオン（lp-html-skeleton パターン）
   ============================================================================= */
.FaqHeading {
  font-size: var(--fs-title-lg);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--sp-md);
}
.FaqSubheading {
  margin: calc(2 * var(--sp-lg)) 0 var(--sp-xs);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
  text-align: left;
}
.AccordionCont {
  padding: 0;
  width: 100%;
}
.AccordionCont__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-subtle);
}
.AccordionList {
  text-align: left;
  background: var(--color-bg-default);
  border-bottom: 1px solid var(--color-border-subtle);
}
.AccordionBtn {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  width: 100%;
  padding: var(--sp-xl) calc(var(--icon-cta-arrow-w) + var(--sp-md)) var(--sp-lg) 0;
  font-size: var(--fs-body-md);
  font-weight: 700;
  font-family: var(--ff-base);
  line-height: 1.5;
  color: var(--color-text-primary);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
.AccordionBtn::after {
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: var(--icon-cta-arrow-w);
  height: var(--icon-cta-arrow-h);
  content: "";
  background: url("../img/icon_CtaArrowDown.svg") center / contain no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.AccordionBtn.is-active::after {
  transform: translateY(-50%) rotate(180deg);
}
.QuestionTxt {
  display: inline-block;
  flex-shrink: 0;
  margin-right: var(--sp-sm);
  font-size: var(--fs-headline-md);
  font-weight: 700;
  line-height: 1;
}
.AccordionDesc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  font-size: var(--fs-body-md);
  color: var(--color-text-primary);
}
.AccordionDescInner { overflow: hidden; }
.AccordionDescBody {
  padding: 0 calc(var(--icon-cta-arrow-w) + var(--sp-md)) var(--sp-lg) calc(var(--fs-headline-md) + var(--sp-sm));
  line-height: 1.7;
}

.AccordionDescBody ul {
  margin: var(--sp-sm) 0 0;
  padding-left: 1.25em;
  list-style: disc;
}
.AccordionDescBody ul li + li {
  margin-top: var(--sp-xxs);
}
.AccordionDescBody p + p {
  margin-top: var(--sp-sm);
}
.AccordionDescBody p + ul {
  margin-top: var(--sp-sm);
}
.AccordionDescBody a {
  color: var(--color-link-default);
  text-decoration: underline;
}
.AccordionBtn.is-active + .AccordionDesc { grid-template-rows: 1fr; }

/* PageControl: Swiper ドット — 30th LP パターン（SportsSwiper） */
.SportsSwiper .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--sp-sm);
}
.SportsSwiper .main-carousel-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 !important;
  background: var(--color-border-default);
  border-radius: var(--r-full);
  display: inline-block;
  opacity: 1;
  transition: background 0.3s, width 0.3s;
}
.SportsSwiper .main-carousel-pagination-bullet-active {
  width: 18px;
  background: var(--color-brand-primary);
}

/* =============================================================================
   CTA BUTTON — 速報Web Styleguide Button/CTA (Figma 776:268) LGTM済み
   Primary / Secondary × Default・Hover・Pressed・Disabled
   StateLayer: hover 8% / pressed 18% / disabled opacity 38%
   Focus: ブラウザデフォルト
   ============================================================================= */
.CtaBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: var(--cta-block-max);
  min-height: 61px;
  padding: var(--sp-cta-btn);
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  font-size: var(--fs-cta-btn-label);
  font-weight: var(--fw-semibold);
  font-family: var(--ff-emphasis);
  line-height: 1.3;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--r-sm);   /* 8px — border-radius/sm */
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  margin-inline: auto;
  overflow: hidden;
}
/* global a:hover { opacity: 0.8 } を上書き */
.CtaBtn:hover { opacity: 1; }
.CtaBtn:hover {
  background:
    linear-gradient(var(--color-state-layer-hover), var(--color-state-layer-hover)),
    var(--color-brand-primary);
}
.CtaBtn:active {
  background:
    linear-gradient(var(--color-state-layer-pressed), var(--color-state-layer-pressed)),
    var(--color-brand-primary);
}
.CtaBtn:disabled,
.CtaBtn[aria-disabled="true"] {
  opacity: var(--opacity-component-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
/* CtaBtnCaption: Figma 14px / W3 / lh 1.7 */
.CtaBtnCaption {
  width: 100%;
  max-width: var(--cta-block-max);
  margin: 0;
  font-size: var(--fs-cta-caption);
  font-weight: var(--fw-regular);
  font-family: var(--ff-base);
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.7;
  letter-spacing: -0.28px;
}
/* 30th LP パターン: ラベル中央、シェブロンは ::after + icon_CtaArrow.svg */
.CtaBtn::after {
  position: absolute;
  top: 50%;
  right: var(--sp-md);
  width: var(--icon-cta-arrow-w);
  height: var(--icon-cta-arrow-h);
  content: "";
  background: url("../img/icon_CtaArrow.svg") center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}
.FvBtn {
  width: 100%;
  max-width: var(--cta-block-max);
  margin: 0 auto;
}
.FvBtn .CtaBtn {
  max-width: none;
}
/* CtaBtn--wide: CtaSection 等の全幅CTA（max-width は .CtaBtn 共通） */

/* Secondary: Figma Variant=Secondary — 1px #111 border + StateLayer */
.CtaBtn--secondary {
  background: var(--color-bg-default);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  box-shadow: none;
}
.CtaBtn--secondary::after {
  background-image: url("../img/icon_CtaArrowDark.svg");
}
.CtaBtn--secondary:hover {
  opacity: 1;
  background:
    linear-gradient(var(--color-state-layer-hover), var(--color-state-layer-hover)),
    var(--color-bg-default);
}
.CtaBtn--secondary:active {
  background:
    linear-gradient(var(--color-state-layer-pressed), var(--color-state-layer-pressed)),
    var(--color-bg-default);
}
.CtaBtn--secondary:disabled,
.CtaBtn--secondary[aria-disabled="true"] {
  opacity: var(--opacity-component-disabled);
}

/* =============================================================================
   HEADER — 全幅フレックス・中央配置・高さ70px
   ============================================================================= */
.Header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: var(--header-height);
  background: var(--color-bg-default);
  box-shadow: var(--shadow-header);
  position: relative;
  z-index: 10;
}
.HeaderLogo {
  flex: 1 1 100%;
  width: 100%;
  height: var(--header-height);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--content-padding);
}
.HeaderLogo img {
  width: clamp(100px, calc(100px + 51 * ((100vw - 393px) / 607)), 151px);
  height: auto;
  max-height: calc(var(--header-height) - var(--sp-sm));
  flex-shrink: 0;
}

.CpAlert {
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  text-align: center;
  font-size: var(--fs-label-sm);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.1em;
  padding: var(--sp-sm) var(--content-padding);
}
.CpAlert__text { margin: 0; }

/* =============================================================================
   HERO / MV — KV + GMO + CTA（Figma 夏トク v3）
   SP: KV → GMO → CTA（縦積み） / PC: 左=GMO+CTA・右=KV
   ============================================================================= */
.Mv {
  position: relative;
  background: var(--color-bg-subtle);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding-top: 30px;
  padding-bottom: 30px;
}
/* 左上のぼかし。DE_BLOG-1737 の .hero:before と同じ処理 */
.Mv::before {
  content: "";
  position: absolute;
  width: 359.767px;
  height: 328.47px;
  border-radius: 359.767px;
  background: var(--color-brand-primary);
  filter: blur(136px);
  left: -344.37px;
  top: -412.54px;
  pointer-events: none;
}

.Mv__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--sp-md);
}

.Mv__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  max-width: 347px;
  margin-inline: auto;
}

/* KV — Figma 10480:12768 SP: 347px幅 */
.Mv__kv {
  width: 100%;
  max-width: 347px;
  height: auto;
  overflow: visible;
  line-height: 0;
  flex-shrink: 0;
}
.Mv__kv img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
}
.Mv__kv:not(:has(img)) { display: none; }

/* GMO バナー — KV 直下（img/GMO.webp） */
.Mv__gmo {
  width: 100%;
  max-width: 347px;
  line-height: 0;
  flex-shrink: 0;
}
.Mv__gmo-img {
  display: block;
  width: 100%;
  height: auto;
}

/* CTA — Figma 10480:12768 */
.Mv__cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-md);
  padding: 0 var(--content-padding) var(--sp-md);
  width: 100%;
  max-width: 347px;
  margin-inline: auto;
  overflow: visible;
}
.Mv__cta .CtaBlock,
.Mv__cta .CtaPeriod {
  width: 100%;
  max-width: var(--cta-block-max);
  margin-inline: auto;
}
.Mv__cta .CtaBtn {
  width: 100%;
  max-width: var(--cta-block-max);
}

/* CTA 訴求コピー v3 — スタンダードコース / 初回1カ月間無料 */
.CtaCopy--offer {
  gap: 0;
}
.CtaPriceHeadline {
  margin: 0;
  width: 100%;
  font-family: var(--ff-emphasis);
  font-size: var(--fs-cta-offer-headline-sp);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--color-text-primary);
  text-align: center;
}
.CtaPriceOffer {
  margin: 0;
  width: 100%;
  font-family: var(--ff-emphasis);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--color-text-primary);
  text-align: center;
}
.CtaPriceOffer__prefix {
  font-size: var(--fs-cta-offer-prefix-sp);
}
.CtaPriceOffer__term {
  font-size: var(--fs-cta-offer-term-sp);
}
.CtaPriceOffer .Em {
  font-size: var(--fs-cta-offer-term-sp);
  color: var(--color-brand-primary);
  font-weight: inherit;
  line-height: inherit;
}

/* CTA ブロック — Figma 238:103（PC）/ 194:3（SP）共通：縦積み・中央揃え */
.CtaBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
}
.CtaBlock__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
}
.CtaCopy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  text-align: center;
}
.CtaPriceSub {
  margin: 0;
  width: 100%;
  font-family: var(--ff-emphasis);
  font-size: var(--fs-cta-copy-sub);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
  letter-spacing: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.CtaPriceSub s { text-decoration: line-through; }
.CtaPrice {
  margin: 0;
  width: 100%;
  font-family: var(--ff-emphasis);
  font-size: var(--fs-cta-copy-headline);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--color-text-primary);
  letter-spacing: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.CtaPrice .Em {
  color: var(--color-brand-primary);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ヒーロー / 申込 CTA — SP共通（Figma 194:3） */
@media (max-width: 767px) {
  .Mv__inner { gap: 16px; }
  .Mv__kv { max-width: 347px; }
  .Mv__aside,
  .Mv__gmo,
  .Mv__cta {
    max-width: 347px;
  }
  .Mv__cta { padding: 0 0 var(--sp-md); }

  .Mv__cta,
  #apply .CtaSection__inner {
    box-sizing: border-box;
    width: min(100%, 347px);
    max-width: 347px;
    margin-inline: auto;
    padding-inline: 0;
    gap: 16px;
    align-items: center;
    text-align: center;
  }

  .Mv__cta .CtaBlock,
  .Mv__cta .CtaPeriod,
  #apply .CtaSection__inner .CtaBlock,
  #apply .CtaSection__inner .CtaPeriod {
    width: 100%;
    max-width: 347px;
  }
  .Mv__cta .CtaBlock__group,
  #apply .CtaSection__inner .CtaBlock__group { gap: 10px; }
  .Mv__cta .CtaCopy,
  #apply .CtaSection__inner .CtaCopy {
    width: 100%;
    max-width: 347px;
  }
  .CtaCopy--offer .CtaPriceHeadline {
    font-size: var(--fs-cta-offer-headline-sp);
  }
  .CtaCopy--offer .CtaPriceOffer__prefix {
    font-size: var(--fs-cta-offer-prefix-sp);
  }
  .CtaCopy--offer .CtaPriceOffer__term,
  .CtaCopy--offer .CtaPriceOffer .Em {
    font-size: var(--fs-cta-offer-term-sp);
  }
  .Mv__cta .CtaBtn,
  #apply .CtaSection__inner .CtaBtn {
    width: 100%;
    min-height: 52px;
    padding: 10px 40px 10px 16px;
    font-size: 15.384px;
    line-height: 1.3;
    border-radius: 6.25px;
    white-space: nowrap;
  }
  .Mv__cta .CtaBtn,
  #apply .CtaSection__inner .CtaBtn {
    max-width: 347px;
  }
  .Mv__cta .CtaBtnCaption,
  #apply .CtaSection__inner .CtaBtnCaption {
    width: 100%;
    font-size: 11.966px;
    letter-spacing: -0.24px;
    line-height: 1.7;
  }
  /* 応募期間 — SPは他CTAと同比率（PC 16/18px → 約85%） */
  .Mv__cta .CtaPeriodTtl,
  #apply .CtaSection__inner .CtaPeriodTtl {
    font-size: 13.675px;
    line-height: 1.3;
  }
  .Mv__cta .CtaPeriodTxt,
  #apply .CtaSection__inner .CtaPeriodTxt {
    font-size: 15.384px;
    line-height: 1.75;
    letter-spacing: 1.23px;
    white-space: nowrap;
  }
}

/* ヒーロー / 申込 CTA — PC共通（Figma 238:103） */
@media (min-width: 768px) {
  .Mv__cta,
  #apply .CtaSection__inner {
    align-items: center;
    text-align: center;
  }
  .Mv__cta { padding: 0 var(--sp-md) var(--sp-md); }

  .Mv__cta .CtaBlock,
  .Mv__cta .CtaPeriod,
  #apply .CtaSection__inner .CtaBlock,
  #apply .CtaSection__inner .CtaPeriod {
    max-width: 406px;
  }
  .Mv__cta .CtaCopy,
  #apply .CtaSection__inner .CtaCopy { max-width: 380px; }
  .CtaCopy--offer .CtaPriceHeadline {
    font-size: var(--fs-cta-offer-headline-pc);
  }
  .CtaCopy--offer .CtaPriceOffer__prefix {
    font-size: var(--fs-cta-offer-prefix-pc);
  }
  .CtaCopy--offer .CtaPriceOffer__term,
  .CtaCopy--offer .CtaPriceOffer .Em {
    font-size: var(--fs-cta-offer-term-pc);
  }
  .Mv__cta .CtaBtn,
  #apply .CtaSection__inner .CtaBtn {
    max-width: 406px;
    min-height: 61px;
    padding: 10px 48px 10px 16px;
    font-size: var(--fs-cta-btn-label);
    line-height: 1.3;
    border-radius: 7.312px;
    white-space: nowrap;
  }
  .Mv__cta .CtaBtnCaption,
  #apply .CtaSection__inner .CtaBtnCaption {
    font-size: var(--fs-cta-caption);
    letter-spacing: -0.28px;
    line-height: 1.7;
  }
  .Mv__cta .CtaPeriodTxt,
  #apply .CtaSection__inner .CtaPeriodTxt {
    letter-spacing: 1.44px;
    white-space: normal;
  }
}

/* 旧横並びレイアウト（kv-b / kv-c 互換） */
.CtaPriceRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--cta-block-max);
  margin-inline: auto;
  gap: var(--sp-sm);
  overflow: hidden;
}
.CtaPriceRow .CtaPriceSub {
  flex: 0 0 auto;
  font-size: clamp(10px, 2.2vw, 14px);
  color: var(--color-text-secondary);
  line-height: 1.3;
  white-space: nowrap;
}
.CtaPriceRow .CtaPrice {
  flex: 0 0 auto;
  font-weight: 700;
  line-height: 1;
}
.CtaPriceRow .CtaPrice .Em {
  font-size: clamp(24px, 6.0vw, 38px);
}

.CtaPeriod {
  width: 100%;
  max-width: var(--cta-block-max);
  margin-inline: auto;
  padding: 0;
  background: transparent;
  text-align: center;
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.CtaPeriodTtl {
  font-family: var(--ff-emphasis);
  font-size: var(--fs-cta-period-title);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin: 0;
}
.CtaPeriodTxt {
  margin: 0;
  font-family: var(--ff-emphasis);
  font-size: var(--fs-cta-period-date);
  font-weight: var(--fw-semibold);
  line-height: 1.75;
}
.CtaPeriodTxt:has(span) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.CtaPeriodTxt span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* =============================================================================
   SECTION — 共通レイアウト
   ============================================================================= */
.Section {
  padding: var(--sp-section-y) var(--content-padding);
}
/* ヒーロー直後: グレー背景をKV下端から開始（見出し余白は inner 内） */
.Mv + .Section {
  padding-top: 0;
}
.Mv + .Section > .Section__inner {
  padding-top: var(--sp-section-y);
}
.Section--subtle { background: var(--color-bg-subtle); }

.Section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* セクション見出し: 30th MeritHeading 相当（headline-m-em = title-lg） */
.Section__heading {
  font-size: var(--fs-title-lg);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
  margin-bottom: var(--sp-md);
  text-align: center;
}

.Section__lead {
  font-size: var(--fs-body-md);
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-lg);
  line-height: 1.7;
  text-align: center;
}

/* =============================================================================
   PRIZE SECTION — 選べる豪華賞品
   横並び（画像左・テキスト右）+ 正方形サムネ固定サイズ
   ============================================================================= */
.PrizeNotes {
  margin-top: var(--sp-lg);
  text-align: left;
}
.PrizeGrid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.PrizeGrid > li {
  display: flex;
  min-width: 0;
}

.PrizeCard {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-sm);
  width: 100%;
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 2px 6px var(--color-shadow-card);
}

.PrizeCard__image {
  flex-shrink: 0;
  width: var(--prize-image-size);
  height: var(--prize-image-size);
  aspect-ratio: 1 / 1;
  margin: var(--sp-sm) 0 var(--sp-sm) var(--sp-sm);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.PrizeCard__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.PrizeCard__image .material-symbols-outlined {
  font-size: var(--fs-headline-md);
  color: var(--color-text-disabled);
}

.PrizeCard__body {
  flex: 1;
  min-width: 0;
  padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxs);
  justify-content: flex-start;
  text-align: left;
}

/* ランクバッジ: テキストラベルのみ（A〜E共通） */
.PrizeCard__rank {
  display: inline-flex;
  align-items: center;
  font-size: clamp(12px, 0.984px + 2.748vw, 14px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-secondary);
  width: fit-content;
}

.PrizeCard__title {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.PrizeCard__winners {
  font-size: var(--fs-label-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.PrizeCard__note {
  font-size: var(--fs-label-sm);
  color: var(--color-text-disabled);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex-shrink: 0;
}
.PrizeCard__notes {
  margin: 0;
  flex-shrink: 0;
  color: var(--color-text-disabled);
}

/* =============================================================================
   SPORTS SECTION — Swiper カルーセル
   ============================================================================= */

/* Swiper のはみ出し表示のために Section の overflow を解除 */
.Section--sports {
  padding-right: 0;
  overflow: hidden;
}
.Section--sports .Section__inner {
  padding-right: var(--content-padding);
}

.SportsSwiper {
  overflow: visible;
  padding-bottom: var(--sp-xl);   /* pagination dots 分の余白 */
}
.SportsSwiper .swiper-wrapper {
  align-items: stretch;
}
.SportsSwiper .swiper-slide {
  display: flex;
  flex-direction: column;
  height: auto !important;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .SportsSwiper .swiper-pagination {
    margin-top: var(--sp-lg);
  }
}

.SportsCard {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 2px 6px var(--color-shadow-card);
  height: 100%;
}

.SportsCard__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.SportsCard__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.SportsCard__image .material-symbols-outlined {
  font-size: var(--icon-placeholder);
  color: var(--color-text-disabled);
}

.SportsCard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-sm);
  text-align: left;
}

.SportsCard__title {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-primary);
  margin-bottom: var(--sp-xxs);
}
.SportsCard__desc {
  font-size: var(--fs-label-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  flex: 1;
}
.SportsCard__link {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 32px;
  font-size: var(--fs-label-sm);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text-primary);
  text-decoration: none;
}
.SportsCard__link:hover .SportsCard__link-text {
  text-decoration: underline;
}
.SportsCard__link-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* タブレット: タイトル行数を揃え、本文は省略せず全文表示 */
@media (min-width: 480px) and (max-width: 767px) {
  .SportsCard__body {
    min-height: 9.5rem;
  }
  .SportsCard__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.4em * 2);
  }
}
@media (max-width: 767px) {
  .SportsCard__desc {
    font-size: var(--fs-label-sm);
    line-height: 1.5;
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    min-height: 0;
  }
}

/* =============================================================================
   GAMES SECTION — 朝日GAMES
   ============================================================================= */
.GamesGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
}
.GamesGrid > li {
  display: flex;
  min-width: 0;
}

.GamesCard {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 2px 6px var(--color-shadow-card);
  position: relative;
}

.GamesCard__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.GamesCard__image img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.GamesCard__image .material-symbols-outlined {
  font-size: var(--fs-headline-md);
  color: var(--color-text-disabled);
}
.GamesCard__image .GamesCard__icon {
  width: calc(var(--fs-headline-md) * 1.5);
  height: calc(var(--fs-headline-md) * 1.5);
  object-fit: contain;
  object-position: center;
  transform: translateY(12px);
}

/* バッジ: 画像内左上（上8px・左8px）— SP / タブレット / PC 共通 */
.GamesCard__image .GamesCard__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  margin: 0;
  z-index: 2;
  padding: 2px var(--sp-xs);
  line-height: 1.5;
}
.GamesCard__image .GamesCard__badge--premium {
  background-color: var(--color-bg-default);
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
  border-radius: 4px;
  font-size: clamp(10px, 0.82px + 2.29vw, 12px);
  font-weight: 400;
}

@media (max-width: 767px) {
  .GamesCard__image .GamesCard__badge--premium {
    background-color: var(--color-bg-default);
  }
}

.GamesCard__body {
  padding: var(--sp-xs) var(--sp-sm) var(--sp-sm);
  text-align: left;
}
.GamesCard__title {
  font-size: var(--fs-body-md);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--sp-xxs);
}
.GamesCard__desc {
  font-size: var(--fs-label-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* セクション末尾 CTA — コピー＋ボタンを CtaBlock で一体管理 */
.CtaBlock--section {
  margin-top: var(--sp-xl);
  margin-inline: auto;
}
#games .CtaBlock--section {
  margin-top: var(--sp-xxl);
}

/* =============================================================================
   FINAL CTA SECTION — ヒーロー .Mv__cta と同一コンポーネント構成（title.png 除く）
   ============================================================================= */
.CtaSection {
  padding: var(--sp-section-y) var(--content-padding);
  text-align: center;
}
.CtaSection__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-md);
}
#apply .CtaSection__inner > .CtaBtnCaption:not(.Mv__limit) {
  margin-top: calc(10px - var(--sp-md));
}
.CtaSection__inner .CtaBlock,
.CtaSection__inner .CtaPeriod {
  width: 100%;
  max-width: var(--cta-block-max);
}
.CtaSection__inner .CtaBtn {
  width: 100%;
}

/* kv-b / kv-c 互換 — 旧 Final CTA レイアウト */
.CtaSection__heading {
  font-size: var(--fs-title-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}
.CtaSection__sub {
  font-size: var(--fs-body-md);
  color: var(--color-text-secondary);
}
.CtaSection__price {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  justify-content: center;
}
.CtaSection__price-old {
  font-size: var(--fs-body-md);
  color: var(--color-text-disabled);
  text-decoration: line-through;
}
.CtaSection__price-new {
  font-size: var(--fs-cta-price-em);
  font-weight: 700;
  line-height: 1;
  color: var(--color-brand-primary);
}

/* =============================================================================
   OVERVIEW — キャンペーン要項（30th LP: dlチャンク・罫線なし）
   ============================================================================= */
/* 30th LP: 外側 padding-top 0 / 下・左右は sp-xxl + content-padding */
.Overview {
  padding-top: 0;
  padding-bottom: calc(var(--sp-xxl) - 10px);
  padding-inline: var(--content-padding);
  background: var(--color-bg-default);
}
/* 30th .OverviewInner: padding sp-xxl sp-md（SP） */
.Overview__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--sp-xxl) var(--sp-md);
  background: var(--color-bg-subtle);
  border-radius: var(--r-sm);
  text-align: left;
}

@media (min-width: 768px) {
  .Overview {
    padding-bottom: calc(var(--sp-section-y) - 10px);
  }
  .Overview__inner {
    padding: 48px;
  }
}
.Overview__heading {
  font-size: var(--fs-title-md);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--sp-xl);
  text-align: center;
}
.Overview__cont {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}
.Overview__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  margin: 0;
}
.Overview__ttl {
  font-size: var(--fs-body-md);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.4;
}
.Overview__desc {
  margin: 0;
  font-size: var(--fs-body-md);
  color: var(--color-text-primary);
  line-height: 1.7;
}
.Overview__desc p { margin: 0; }
.Overview__desc p + p { margin-top: var(--sp-sm); }
.Overview__example {
  display: flex;
  align-items: baseline;
}
.Overview__exampleMark {
  flex: 0 0 auto;
}
.Overview__desc-notes {
  margin-top: var(--sp-sm);
}
.Overview__notes {
  margin-top: var(--sp-lg);
}
.Overview__exampleBox {
  background: var(--color-bg-default);
  border-radius: 4px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.Overview__exampleHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.Overview__exampleTtl {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
}
.Overview__exampleCap,
.Overview__exampleTxt {
  margin: 0;
  font-size: var(--fs-label-sm);
  line-height: 1.7;
  color: var(--color-text-primary);
}
.Overview__exampleImg {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .Overview__exampleBox {
    padding: 20px 24px;
    gap: 20px;
  }
  .Overview__exampleTtl {
    font-size: 20px;
  }
  .Overview__exampleImg {
    max-width: 859px;
  }
}

/* =============================================================================
   FOOTER — 30th LP パターン（中央縦並び・SP は固定CTA分の下余白）
   ============================================================================= */
.Footer {
  padding: calc(var(--sp-xl) - 10px) var(--content-padding) var(--footer-pad-bottom-sp);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}
.FooterGuide {
  font-size: var(--fs-body-md);
  color: var(--color-text-primary);
  text-decoration: underline;
}
.FooterGuide:hover { opacity: 0.8; }
.FooterCopy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxs);
  font-size: var(--fs-label-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.FooterCopy__line { display: block; }

/* =============================================================================
   FLOAT CTA — 追従バナー（Figma 259:68 / 〜863pxはボタンのみ・864px〜はコピー+ボタン）
   ============================================================================= */
.FloatCta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  box-sizing: border-box;
  min-height: var(--float-cta-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-sm) var(--content-padding);
  background: var(--color-bg-default);
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: none;
  border-radius: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.FloatCta.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.FloatCta__fit {
  width: 100%;
  max-width: 802px;
  margin-inline: auto;
}
.FloatCta__inner {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  width: 100%;
}
.FloatCta__copy {
  flex: 0 1 380px;
  max-width: 380px;
}
.FloatCta .CtaBtn {
  flex-shrink: 0;
  max-width: none;
  margin-inline: 0;
}
.FloatCta .FvBtn {
  flex-shrink: 0;
  max-width: none;
  margin-inline: 0;
}

/* FloatCta: SP・タブレット — ボタンのみ（864px未満） */
@media (max-width: 863px) {
  .FloatCta {
    min-height: auto;
  }
  .FloatCta__copy {
    display: none;
  }
  .FloatCta__fit,
  .FloatCta__inner {
    width: 100%;
    max-width: none;
  }
  .FloatCta .CtaBtn {
    width: 100%;
    min-height: 52px;
    padding: 10px 40px 10px 16px;
    font-size: 15.384px;
    line-height: 1.3;
    border-radius: 6.25px;
    white-space: nowrap;
    margin-inline: auto;
  }
  .FloatCta .FvBtn {
    width: 100%;
    margin-inline: auto;
  }
}

/* =============================================================================
   TABLET RESPONSIVE — 480px 以上（Clear DS BP: 480px）
   SP 縦積みレイアウト維持。Prize は 768px 以上で PC と同じ2カラム
   ============================================================================= */
@media (min-width: 480px) {
  .CtaPriceRow .CtaPriceSub {
    font-size: 12px;
  }

  /* Games: 3カラムグリッド */
  .GamesGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* FloatCta: PC — Figma 259:68 原寸（コピー + ボタン横並び） */
@media (min-width: 864px) {
  .FloatCta {
    min-height: var(--float-cta-h);
  }
  .FloatCta__fit {
    width: auto;
    max-width: 100%;
  }
  .FloatCta__inner {
    width: auto;
    max-width: 100%;
  }
  .FloatCta__copy {
    flex: 0 1 auto;
    max-width: none;
  }
  .FloatCta__copy.CtaCopy {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 16px;
    width: auto;
    white-space: nowrap;
    text-align: left;
  }
  .FloatCta__copy .CtaPriceSub,
  .FloatCta__copy .CtaPrice {
    width: auto;
    margin: 0;
    text-align: left;
    white-space: nowrap;
  }
  .FloatCta__copy .CtaPriceSub {
    font-size: var(--fs-cta-copy-sub);
  }
  .FloatCta__copy .CtaPrice {
    font-size: var(--fs-cta-copy-headline);
  }
  .FloatCta .CtaBtn {
    flex: 0 0 auto;
    width: 406px;
    max-width: 406px;
    min-height: 61px;
    padding: 10px 48px 10px 16px;
    font-size: var(--fs-cta-btn-label);
    line-height: 1.3;
    border-radius: 7.312px;
    white-space: nowrap;
  }
  .FloatCta .FvBtn {
    flex: 0 0 406px;
    width: 406px;
    max-width: 406px;
  }
}

/* =============================================================================
   PC RESPONSIVE — 768px 以上
   ============================================================================= */
@media (min-width: 768px) {
  .Footer {
    padding-bottom: calc(var(--sp-xl) + var(--float-cta-h));
  }

  .FooterCopy {
    font-size: var(--fs-caption);
    line-height: 1.4;
    max-width: none;
    margin-inline: auto;
  }
  .FooterCopy__line:nth-child(2) {
    white-space: nowrap;
  }

  /* Hero — v3 PC: 左=GMO+CTA / 右=KV（Figma 10480:12982） */
  .Mv {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .Mv .Mv__inner {
    display: grid;
    grid-template-columns: minmax(0, 406px) 1fr;
    align-items: center;
    gap: 44px;
    max-width: var(--content-max);
    margin-inline: auto;
  }
  .Mv .Mv__aside {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 406px;
    margin: 0;
    gap: 30px;
    align-items: stretch;
  }
  .Mv .Mv__gmo {
    max-width: none;
    width: 100%;
  }
  .Mv .Mv__cta {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--sp-md);
    background: transparent;
  }
  .Mv .Mv__kv {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    height: auto;
    align-self: center;
  }
  .Mv .Mv__kv img {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: bottom center;
  }

  /* Prize: PC / タブレット横（768px+）— 2カラム・横並びカード・正方形サムネ */
  .PrizeGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-md);
    align-items: stretch;
  }
  .PrizeGrid > li {
    display: flex;
    min-height: 0;
  }
  .PrizeCard {
    height: 100%;
  }

  /* Sports: Swiper slides を PC で広げる（JS の breakpoints で制御） */
  .Section--sports { padding-right: var(--content-padding); overflow: visible; }
  .Section--sports .Section__inner { padding-right: 0; }
  .SportsSwiper { overflow: visible; padding-bottom: 0; }
  .SportsSwiper .swiper-pagination { display: none; }

  /* Games: 4カラムグリッド */
  .GamesGrid { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================================
   秋トク — 原稿セクション（Wrap 型の追加）
   ============================================================================= */
.Lead__text {
  margin: 0;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--fs-body-md);
  line-height: 1.7;
}
@media (max-width: 767px) {
  .SpBreak { display: block; }
}
@media (min-width: 768px) {
  .PcBreak { display: block; }
}
.Toc__heading {
  margin: var(--sp-xl) 0 var(--sp-md);
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  text-align: center;
}
.Toc {
  margin-top: 0;
}
.Toc__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-sm);
}
.Toc__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  height: 100%;
  padding: var(--sp-md) var(--sp-sm);
  background: var(--color-bg-default);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
}
.Toc__item > span {
  min-width: 0;
}
.Toc__item::after {
  content: "";
  width: 16px;
  height: 10px;
  flex-shrink: 0;
  background: url("../img/icon_CtaArrowDown.svg") center / contain no-repeat;
}
#articles,
#features,
#lifestyle {
  scroll-margin-top: var(--sp-md);
}
@media (max-width: 809px) {
  .Toc__list {
    grid-template-columns: 1fr;
  }
  .Toc__item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-md);
    min-height: 52px;
    padding: var(--sp-md);
    text-align: left;
  }
  .Toc__item > span {
    flex: 1 1 auto;
    text-align: left;
  }
  .Toc__item br {
    display: none;
  }
}
@media (min-width: 768px) {
  .Toc__item {
    font-size: 16px;
  }
}

.Section__lead {
  margin: 0 0 var(--sp-xl);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--fs-body-md);
  line-height: 1.7;
}

.CtaPriceOld {
  margin: var(--sp-xs) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-label-sm);
  text-decoration: line-through;
  text-align: center;
}

.ArticleGrid,
.FeatureGrid,
.LifeGrid {
  display: grid;
  gap: var(--sp-md);
}
.ArticleCard,
.FeatureCard,
.LifeCard {
  display: block;
  background: var(--color-bg-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-sm);
  padding: var(--sp-lg);
  color: var(--color-text-primary);
  text-decoration: none;
  text-align: left;
}
.ArticleCard,
.LifeCard {
  border-radius: var(--r-md);
  box-shadow: 0 2px 6px var(--color-shadow-card);
  overflow: hidden;
}
.ArticleCard {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: auto;
  background: var(--color-surface-default);
}
.ArticleGrid,
.LifeGrid {
  display: flex;
  gap: var(--sp-sm);
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.ArticleGrid > .ArticleCard,
.LifeGrid > .LifeCard {
  flex: 0 0 calc((100% - var(--sp-sm)) / 1.2);
  scroll-snap-align: start;
}
.ArticleCard__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  background: var(--color-bg-subtle);
  overflow: hidden;
}
.ArticleCard__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ArticleCard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-sm);
  text-align: left;
}
.ArticleCard__title {
  margin: 0 0 var(--sp-xxs);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-primary);
}
.FeatureCard__title {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
  margin: 0 0 var(--sp-xs);
  font-size: 20px;
  line-height: 1.5;
}
.FeatureCard__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 3px;
}
.LifeCard__title {
  margin: 0 0 var(--sp-xs);
  font-size: 20px;
  line-height: 1.5;
}
.ArticleCard__excerpt {
  margin: 0;
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  line-height: 1.6;
  flex: 1;
}
.ArticleCard__link {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 32px;
  font-size: var(--fs-label-sm);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text-primary);
  text-decoration: none;
}
.ArticleCard__link:hover .ArticleCard__link-text {
  text-decoration: underline;
}
.ArticleCard__link-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.FeatureCard p {
  margin: 0;
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.LifeCard {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: auto;
}
.LifeCard__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  background: var(--color-bg-subtle);
  overflow: hidden;
}
.LifeCard__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.LifeCard__body {
  padding: var(--sp-lg);
}
.LifeCard p {
  margin: 0;
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
@media (min-width: 480px) and (max-width: 767px) {
  .ArticleCard__body {
    min-height: 9.5rem;
  }
  .ArticleCard__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.4em * 2);
  }
}
@media (max-width: 767px) {
  .ArticleCard__excerpt,
  .FeatureCard p {
    line-height: 1.5;
  }
}
@media (min-width: 768px) {
  .ArticleGrid,
  .LifeGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-md);
    overflow: visible;
    scroll-snap-type: none;
  }
  .ArticleGrid > .ArticleCard,
  .LifeGrid > .LifeCard {
    flex: none;
    height: 100%;
    scroll-snap-align: none;
  }
  .FeatureGrid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   秋トク KV — SP: タイトル → 金額 → 端末 → テキストCTA
   PC: 左=タイトル・金額・テキストCTA / 右=端末
   ============================================================================= */
.Mv__title,
.Mv__price {
  margin: 0;
  width: 100%;
  line-height: 0;
}
.Mv__title picture,
.Mv__price picture,
.Mv__kv picture {
  display: block;
  width: 100%;
}
.Mv__title img,
.Mv__price img {
  display: block;
  width: 100%;
  height: auto;
}
/* 金額直下。白ボックス 444×36。水曜は黒丸・白文字 */
.Mv__cta .Mv__limit,
#apply .Mv__limit {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--sp-xxs);
  width: 444px;
  max-width: 100%;
  height: 36px;
  flex-shrink: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--color-bg-default);
  color: var(--color-text-primary);
  font-family: var(--ff-base);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}
#apply .Mv__limit {
  width: 640px;
  max-width: 100%;
  background: var(--color-bg-subtle);
}
.Mv__limitDay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--color-text-primary);
  color: var(--color-text-on-brand);
  border: 0;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.Mv__limitRule {
  display: none;
}
@media (min-width: 768px) {
  .Mv__cta .Mv__limit,
  #apply .Mv__limit {
    font-size: var(--fs-cta-caption);
  }
  .Mv__cta .Mv__limit {
    align-self: flex-start;
  }
  .Mv__limitDay {
    width: 20px;
    height: 20px;
  }
  .Mv__cta .Mv__limitLead,
  #apply .Mv__limitLead,
  .Mv__cta .Mv__limitDate,
  #apply .Mv__limitDate,
  .Mv__cta .Mv__limitUntil,
  #apply .Mv__limitUntil {
    color: var(--color-text-primary);
    font-family: "Hiragino Kaku Gothic ProN", var(--ff-base);
    font-style: normal;
    font-weight: var(--fw-semibold);
  }
  .Mv__cta .Mv__limitLead,
  #apply .Mv__limitLead {
    font-size: 15px;
    line-height: 130%;
    letter-spacing: 1.5px;
  }
  .Mv__cta .Mv__limitDate,
  #apply .Mv__limitDate {
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0.18px;
  }
  .Mv__cta .Mv__limitUntil,
  #apply .Mv__limitUntil {
    font-size: 18px;
    line-height: 100%;
  }
  .Mv__cta .Mv__limitRule,
  #apply .Mv__limitRule {
    display: block;
    flex-shrink: 0;
    align-self: center;
    width: 1px;
    height: 17px;
    margin-inline: calc(10px - var(--sp-xxs));
    background: var(--color-border-default);
  }
}
.Mv__copy {
  display: contents;
}
.Mv__kv { order: 1; }
.Mv__cta { order: 2; }

@media (max-width: 767px) {
  .Mv__title,
  .Mv__price,
  #apply .Mv__title,
  #apply .Mv__price {
    max-width: 347px;
  }
  /* 見た目は margin-bottom: 5px。.Mv__inner の gap 16px が足されるので、その分を引く */
  .Mv .Mv__title {
    margin-bottom: calc(5px - 16px);
  }
  #apply .Mv__title {
    margin-bottom: calc(-4px - (13 / 708) * 100% - (7 / 710) * 100%);
  }
  /* 期限は金額の直下。ボタンと注釈は端末の下 */
  .Mv__cta {
    display: contents;
  }
  .Mv__cta .Mv__limit {
    order: 0;
    width: min(100%, 347px);
    max-width: 347px;
  }
  .Mv__cta .FvBtn,
  .Mv__cta > .CtaBtnCaption:not(.Mv__limit) {
    order: 2;
    width: min(100%, 347px);
    max-width: 347px;
  }
  .Mv__cta > .CtaBtnCaption:not(.Mv__limit) {
    margin-top: calc(10px - 16px);
  }
  .Mv__cta .Mv__limitLead,
  #apply .Mv__limitLead,
  .Mv__cta .Mv__limitDate,
  #apply .Mv__limitDate,
  .Mv__cta .Mv__limitUntil,
  #apply .Mv__limitUntil {
    color: var(--color-text-primary);
    font-family: "Hiragino Kaku Gothic ProN", var(--ff-base);
    font-style: normal;
    font-weight: var(--fw-semibold);
  }
  .Mv__cta .Mv__limitLead,
  #apply .Mv__limitLead {
    font-size: 13px;
    line-height: 130%;
    letter-spacing: 1.3px;
  }
  .Mv__cta .Mv__limitDate,
  #apply .Mv__limitDate,
  .Mv__cta .Mv__limitUntil,
  #apply .Mv__limitUntil {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.15px;
  }
  .Mv__cta .Mv__limitRule,
  #apply .Mv__limitRule {
    display: block;
    flex-shrink: 0;
    align-self: center;
    width: 1px;
    height: 17px;
    margin-inline: calc(10px - var(--sp-xxs));
    background: var(--color-border-default);
  }
}

@media (min-width: 768px) {
  .Mv .Mv__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--sp-xl);
  }
  .Mv .Mv__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    grid-column: 1;
    grid-row: 1;
    gap: 0;
    width: 100%;
    min-width: 0;
    order: 0;
  }
  .Mv .Mv__title {
    margin-bottom: calc(10px - (17 / 884) * 100%);
  }
  #apply .Mv__title {
    margin-bottom: calc(-1 * var(--sp-md) + 10px - (17 / 884) * 100%);
  }
  /* 白ボックスはタイトル・金額と左端を揃える。赤ボタンはその中心に置く */
  .Mv .Mv__cta {
    align-items: center;
    width: 444px;
    max-width: 100%;
    margin-top: var(--sp-sm);
    gap: 0;
  }
  .Mv .Mv__cta .Mv__limit,
  .Mv .Mv__cta .FvBtn,
  .Mv .Mv__cta > .CtaBtnCaption {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }
  .Mv .Mv__cta .FvBtn {
    margin-top: 20px;
  }
  .Mv .Mv__cta > .CtaBtnCaption:not(.Mv__limit) {
    margin-top: 10px;
  }
  .Mv .Mv__cta .CtaBtn {
    width: min(100%, 406px);
    margin-inline: auto;
  }
  .Mv .Mv__kv,
  .Mv .Mv__cta { order: 0; }
  .Mv .Mv__title,
  .Mv .Mv__price { max-width: 470px; }
  #apply .Mv__title,
  #apply .Mv__price { max-width: 640px; }
}