@charset "UTF-8";
/* ==========================================================================
   調整さん20周年記念キャンペーンLP
   Figma: CD-758_Web 20周年記念LP / 第4稿_FIX / SP (390px)
   - SP専用デザイン。501px以上では390px幅のまま中央に「浮いたカード」として表示する
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 変数・リセット
   -------------------------------------------------------------------------- */
:root {
  /* Figma variables */
  --brand: #07af4a;
  --brand-dark: #0b9239;
  --brand-light: #b9ecc1;
  --brand-bg: #f0faf2;
  --secondary: #ffa800;
  --secondary-bg: #fff7e7;
  --text-black: #394042;
  --text-gray: #647979;
  --gray-80: #323436;
  --border: #c9d2d8;
  --bg-light: #f7f9f7;
  --secondary-light: #fcf5ba;

  /* デザイン内の単発色 */
  --accent-orange: #f19700;

  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-num: "Montserrat", "Noto Sans JP", sans-serif;

  /* stroke-dasharray="2 2" の破線 */
  --dashed: repeating-linear-gradient(to right, var(--border) 0 2px, transparent 2px 4px);
  --dashed-brand: repeating-linear-gradient(to right, var(--brand-light) 0 2px, transparent 2px 4px);

  --shadow-xl: 0 12px 24px rgba(0, 0, 0, .15);
  --shadow-card: 0 12px 12px rgba(0, 0, 0, .15);

  /* SP表示(500px以下)のセクション余白。上限は設けず画面幅いっぱいに広げる */
  --sp-pad: 16px;
  --sp-pad-lg: 24px;

  /* 20thロゴが等倍になるまでの時間。「Thank you!」の書き始めもこれだけ遅らせる */
  --kv-logo-dur: 2.5s;
}

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-black);
  -webkit-font-smoothing: antialiased;
  /* PC(Figma 12625:31692)の背景グラデーション */
  background-color: var(--brand);
  background-image: linear-gradient(-89.96deg, #03ce54 .216%, #07af4a 99.745%);
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid #1f8a52;
  outline-offset: 2px;
}

::selection {
  background: var(--brand-light);
}

/* --------------------------------------------------------------------------
   2. ページコンテナ
   - 500px以下: SP最適化表示。背景もコンテンツも画面幅いっぱい(左右16pxの余白のみ)
   - 501px以上: Figmaどおり390px幅の「緑に浮いたカード」
   -------------------------------------------------------------------------- */
.page {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--brand-bg);
}

/* Figma上のSPフレーム自体が rounded 32 / Shadow XL を持つため、
   広い画面では「浮いたスマホ画面」としてそれを再現する
   (PCフレーム 12625:31692 でも SP は left:525 top:64 / radius32 / Shadow XL)。
   このときページ幅は390pxに戻る */
@media (min-width: 501px) {
  body {
    padding: 64px 16px;
  }

  .page {
    max-width: 390px;
    border-radius: 32px;
    box-shadow: var(--shadow-xl);
  }
}

/* MENUのアンカー先 */
#message,
#history,
#campaign,
#steps,
#outline {
  scroll-margin-top: 24px;
}

/* --------------------------------------------------------------------------
   3. 共通パーツ
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .2px;
  color: var(--brand);
}

.eyebrow::after {
  content: "";
  display: block;
  width: 14px;
  height: 2px;
}

.eyebrow--history::after {
  background: var(--brand-light);
}

.eyebrow--campaign::after {
  background: #fff;
}

.section-title {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--text-black);
}

.section-lead {
  margin-top: 32px;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  text-align: center;
  color: var(--text-black);
}

/* セクション間の波形 */
.wave {
  width: 100%;
  height: auto;
}

/* 白いカード(応募ステップ / キャンペーン概要) */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 40px 24px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

.card__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--text-black);
}

.card__bar {
  display: block;
  width: 14px;
  height: 2px;
  background: var(--brand-light);
}

/* --------------------------------------------------------------------------
   4. header
   -------------------------------------------------------------------------- */
/* 背景は .page(同じ --brand-bg) に任せて透明にし、紙吹雪がヘッダー帯にも見えるようにする。
   z-index で調整さんロゴだけを紙吹雪の前面に置く */
.site-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow: hidden;
}

.site-header__logo {
  width: 101px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   5. KV
   -------------------------------------------------------------------------- */
/* 紙吹雪をヘッダー帯まで上へはみ出させるため overflow は切らない。
   クリップはSVG自身のviewBoxと .page{overflow:hidden} が担う */
.kv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-bottom: 40px;
  background: var(--brand-bg);
}

/* 白円と紙吹雪の背面レイヤー。viewBoxは 0 -72 390 775 で、
   user y=0 がKV上端、y=-72 がページ最上部(ヘッダー上端)にあたる。
   top:-72px でSVG上端をページ最上部に合わせ、コンテンツ最上部から紙吹雪が降る */
.kv__confetti {
  position: absolute;
  top: -72px;
  right: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  margin-inline: auto;
  pointer-events: none;
  /* 最下部は透過グラデーションで消す。要素高775pxの下20%(約155px)、
     user y=548〜703 でフェードし、紙吹雪が下端でぷつりと切れないようにする。
     白円は下端が y=358(要素上端から約55%)なのでマスクの影響を受けない */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

.kv__visual,
.kv__body {
  position: relative;
  z-index: 1;
}

.kv__visual {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ロゴが高さを決め、「Thank you!」はその上に重ねる */
.kv__logo {
  width: 100%;
  height: auto;
  animation: kv-logo-in var(--kv-logo-dur) ease-in both;
}

/* 20thロゴの登場(Figma 12625:29991)。Figmaは3.16秒のタイムライン上で
   0〜79.114%(=2.5秒)かけて scale 0.3→1 / opacity 0→1 とし、以降は完成状態を保持する。
   ここでは 2.5秒 + both で同じ結果にしている。
   --kv-logo-dur は「Thank you!」の書き始めを遅らせるのにも使う */
@keyframes kv-logo-in {
  from {
    opacity: 0;
    transform: scale(.3);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.kv__thankyou {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* 「Thank you!」の手書き風アニメーション -----------------------------------
   9文字それぞれの筆跡(中心線)を太いマスクとして伸ばし、塗り・白縁の両レイヤーを
   筆順(T→h→a→n→k→y→o→u→!)に現す。読み込み時に1回だけ再生する。
   ロゴの拡大中に文字が出ると位置がずれて見えるため、--kv-logo-dur ぶん遅らせて
   ロゴが等倍になってから書き始める(全体で約5.3秒)。
   中心線パスはFigmaにない新規ジオメトリで、マスク専用(画面には出ない)。
   ペン速度が一定になるよう、各文字は長さに比例した duration を持つ。
   開始値を102にしているのは、100だと round キャップの半円が始点に残り
   文字の一部が最初から見えてしまうため(破線が完全に経路外へ出る値にする)。 */
.kv-pen {
  stroke-dasharray: 100 200;
  stroke-dashoffset: 102;
  animation: kv-write var(--dur) linear calc(var(--dl) + var(--kv-logo-dur)) both;
}

@keyframes kv-write {
  to {
    stroke-dashoffset: 0;
  }
}

.kv__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-inline: var(--sp-pad);
}

/* 白円。Figmaでは不透明白だが、背後を落ちる紙吹雪を薄く透かすため半透明にしている */
.kv__circle {
  fill-opacity: .85;
}

/* 紙吹雪の落下 ------------------------------------------------------------
   Figmaに落下モーションの定義はないため、動きの値は今回の合意にもとづく実装。
   --from / --to / --dl は書き出しSVGの外接矩形から算出。
   --x はX方向の再配置量。Figmaの原配置は中央のロゴを避けて両端に寄っているため、
   図形データは変えずに黄金比の低食い違い列で横方向へ均等に散らし直している。 */
@keyframes kv-fall {
  from {
    transform: translate(var(--x), var(--from)) rotate(var(--r0));
  }

  to {
    transform: translate(var(--x), var(--to)) rotate(var(--r1));
  }
}

.kv__set > * {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: kv-fall var(--d) linear infinite;
  animation-delay: var(--dl);
}

/* セットBはセットAの0.55周ぶん後ろ。常に約400px下を追従して703px全体の密度を保つ。
   0.55にしているのは、t=0のときセットBが上部358px(Figmaの領域)に入らないようにするため */
.kv__set--b > * {
  animation-delay: calc(var(--dl) - var(--d) * .55);
}

.kv__set > :nth-child(1) { --x: -145.05px; --from: -261.37px; --to: 536.17px; --r0: -61.2837deg; --r1: 125.7163deg; --d: 19s; --dl: -6.22668s; }
.kv__set > :nth-child(2) { --x: -152.73px; --from: -94.27px; --to: 694.57px; --r0: 30.3542deg; --r1: -223.6458deg; --d: 15s; --dl: -1.79257s; }
.kv__set > :nth-child(3) { --x: 285.83px; --from: -416.15px; --to: 379.42px; --r0: -167.9100deg; --r1: 153.0900deg; --d: 22s; --dl: -11.50785s; }
.kv__set > :nth-child(4) { --x: 174.97px; --from: -188.84px; --to: 607.87px; --r0: 34.8426deg; --r1: -112.1574deg; --d: 18s; --dl: -4.26645s; }
.kv__set > :nth-child(5) { --x: 26.12px; --from: -277.97px; --to: 521.12px; --r0: -74.4417deg; --r1: 139.5583deg; --d: 14s; --dl: -4.87001s; }
.kv__set > :nth-child(6) { --x: -105.25px; --from: -173.10px; --to: 625.99px; --r0: 60.8706deg; --r1: -220.1294deg; --d: 21s; --dl: -4.54905s; }
.kv__set > :nth-child(7) { --x: -210.44px; --from: -416.00px; --to: 389.12px; --r0: -179.8092deg; --r1: 168.1908deg; --d: 17s; --dl: -8.78378s; }
.kv__set > :nth-child(8) { --x: 306.74px; --from: -108.66px; --to: 695.87px; --r0: 23.5005deg; --r1: -150.4995deg; --d: 13s; --dl: -1.75578s; }
.kv__set > :nth-child(9) { --x: -158.16px; --from: -347.14px; --to: 443.86px; --r0: -105.7658deg; --r1: 135.2342deg; --d: 20s; --dl: -8.77724s; }
.kv__set > :nth-child(10) { --x: 35.43px; --from: -161.57px; --to: 632.49px; --r0: 62.6698deg; --r1: -245.3302deg; --d: 16s; --dl: -3.25557s; }
.kv__set > :nth-child(11) { --x: 202.53px; --from: -102.63px; --to: 687.86px; --r0: -17.3973deg; --r1: 116.6027deg; --d: 12s; --dl: -1.55797s; }
.kv__set > :nth-child(12) { --x: -130.48px; --from: -430.32px; --to: 360.17px; --r0: 109.4186deg; --r1: -91.5814deg; --d: 19s; --dl: -10.34305s; }
.kv__set > :nth-child(13) { --x: -273.01px; --from: -104.99px; --to: 691.45px; --r0: -35.3289deg; --r1: 232.6711deg; --d: 15s; --dl: -1.97736s; }
.kv__set > :nth-child(14) { --x: 226.71px; --from: -384.59px; --to: 411.85px; --r0: 161.7669deg; --r1: -173.2331deg; --d: 22s; --dl: -10.62350s; }
.kv__set > :nth-child(15) { --x: -46.76px; --from: -92.65px; --to: 696.40px; --r0: -18.9046deg; --r1: 142.0954deg; --d: 18s; --dl: -2.11355s; }
.kv__set > :nth-child(16) { --x: 0.91px; --from: -163.58px; --to: 624.05px; --r0: 47.3525deg; --r1: -180.6475deg; --d: 14s; --dl: -2.90761s; }
.kv__set > :nth-child(17) { --x: -173.61px; --from: -88.39px; --to: 699.24px; --r0: -33.1057deg; --r1: 261.8943deg; --d: 21s; --dl: -2.35668s; }
.kv__set > :nth-child(18) { --x: -44.39px; --from: -426.39px; --to: 361.24px; --r0: 65.5043deg; --r1: -55.4957deg; --d: 17s; --dl: -9.20309s; }
.kv__set > :nth-child(19) { --x: -82.19px; --from: -407.74px; --to: 380.59px; --r0: -97.2373deg; --r1: 90.7627deg; --d: 13s; --dl: -6.72386s; }
.kv__set > :nth-child(20) { --x: 111.03px; --from: -315.31px; --to: 472.15px; --r0: 102.1056deg; --r1: -152.8944deg; --d: 20s; --dl: -8.00828s; }
.kv__set > :nth-child(21) { --x: 1.87px; --from: -299.39px; --to: 488.07px; --r0: -122.4235deg; --r1: 199.5765deg; --d: 16s; --dl: -6.08315s; }
.kv__set > :nth-child(22) { --x: 231.13px; --from: -93.54px; --to: 694.14px; --r0: 17.5756deg; --r1: -130.4244deg; --d: 12s; --dl: -1.42505s; }
.kv__set > :nth-child(23) { --x: 55.51px; --from: -125.96px; --to: 661.73px; --r0: -34.3808deg; --r1: 180.6192deg; --d: 19s; --dl: -3.03830s; }
.kv__set > :nth-child(24) { --x: 323.34px; --from: -407.87px; --to: 381.80px; --r0: 145.6549deg; --r1: -136.3451deg; --d: 15s; --dl: -7.74760s; }
.kv__set > :nth-child(25) { --x: 171.01px; --from: -345.54px; --to: 449.06px; --r0: -151.7662deg; --r1: 197.2338deg; --d: 22s; --dl: -9.56693s; }
.kv__set > :nth-child(26) { --x: -309.50px; --from: -106.45px; --to: 683.57px; --r0: 23.5801deg; --r1: -151.4199deg; --d: 18s; --dl: -2.42538s; }
.kv__set > :nth-child(27) { --x: 75.12px; --from: -87.38px; --to: 704.47px; --r0: -26.7045deg; --r1: 215.2955deg; --d: 14s; --dl: -1.54489s; }
.kv__set > :nth-child(28) { --x: -224.16px; --from: -365.93px; --to: 425.62px; --r0: 142.8493deg; --r1: -166.1507deg; --d: 21s; --dl: -9.70821s; }
.kv__set > :nth-child(29) { --x: 358.82px; --from: -226.94px; --to: 561.63px; --r0: -38.8512deg; --r1: 96.1488deg; --d: 17s; --dl: -4.89237s; }
.kv__set > :nth-child(30) { --x: -160.87px; --from: -208.77px; --to: 581.45px; --r0: 53.3668deg; --r1: -148.6332deg; --d: 13s; --dl: -3.43450s; }
.kv__set > :nth-child(31) { --x: -2.38px; --from: -136.57px; --to: 653.83px; --r0: -46.4794deg; --r1: 222.5206deg; --d: 20s; --dl: -3.45572s; }
.kv__set > :nth-child(32) { --x: -52.67px; --from: -121.33px; --to: 669.16px; --r0: 51.5717deg; --r1: -284.4283deg; --d: 16s; --dl: -2.45579s; }
.kv__set > :nth-child(33) { --x: -22.60px; --from: -403.98px; --to: 386.51px; --r0: -82.7901deg; --r1: 79.2099deg; --d: 12s; --dl: -6.13260s; }

.kv__lead {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--text-black);
}

/* キャンペーン訴求カード(KV / CAMPAIGN 共通) ------------------------------- */
.promo {
  position: relative;
  width: 100%;
  padding-top: 40px;
}

.promo__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 230px;
  height: auto;
  transform: translateX(-50%);
}

.promo__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 32px 16px 16px;
  overflow: hidden;
  border-radius: 16px;
  /* Figmaの内側stroke。borderと違いレイアウト高さに影響しない */
  box-shadow: inset 0 0 0 1px var(--brand);
  background: #fff;
}

.promo__pill {
  padding: 12px 36px 13px;
  border-radius: 100px;
  background: var(--secondary-bg);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--text-black);
}

.promo__texts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: center;
}

.promo__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--text-black);
}

.promo__desc b {
  font-weight: 700;
}

.promo__desc em {
  font-style: normal;
  color: var(--accent-orange);
}

.promo__period {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-gray);
}

/* KV側は一回り小さい文字サイズ */
.promo__desc--sm {
  font-size: 12px;
}

.promo__period--sm {
  font-size: 10px;
}

/* CAMPAIGNセクション側の差分 */
.promo--campaign {
  margin-top: -40px;
}

.promo--campaign .promo__card {
  gap: 12px;
}

.promo--campaign .promo__texts {
  gap: 8px;
}

.promo__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.promo__tag {
  padding: 4px 6px;
  border-radius: 4px;
  background-image: linear-gradient(261.83deg, #ffa800 .36%, #ff8c00 100.05%);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.promo__prize {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-black);
}

.promo__prize em {
  font-style: normal;
  font-size: 22px;
  line-height: 1.35;
  color: var(--accent-orange);
}

.promo__prize .num {
  font-family: var(--font-num);
  font-size: 28px;
  line-height: 1.35;
}

/* 吹き出し */
.balloon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.balloon__arrow {
  width: 12px;
  height: 11px;
  transform: rotate(180deg);
}

.balloon__body {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--bg-light);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--text-gray);
}

.balloon__body em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-orange);
}

.balloon__body b {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. Section01 メッセージ
   -------------------------------------------------------------------------- */
.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 本文と実績値の間隔。署名を廃止して子が2つになったので、この1箇所だけに効く */
  gap: 64px;
  padding-bottom: 64px;
  padding-inline: var(--sp-pad);
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand-bg) 0%, #fff 8.173%);
}

.message__body {
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.5;
  text-align: center;
  color: var(--text-black);
}

/* 実績値(Figma 12770:8533)。数字ブロックは書き出したSVG、注釈だけHTMLで持つ */
.stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.stat__img {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* 「※」を別要素にして、2行目以降がぶら下がるようにする */
.stat__note {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-gray);
}

/* --------------------------------------------------------------------------
   7. Section02 HISTORY
   -------------------------------------------------------------------------- */
.history {
  background: var(--brand-bg);
}

/* Section01(白)からHISTORY(#f0faf2)への波。Figmaでは左右反転して配置されている */
.wave--history {
  background: #fff;
  transform: scaleX(-1);
}

.history__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 64px;
  padding-inline: var(--sp-pad);
}

.history__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-inline: auto;
  padding: 48px 0 64px;
}

.history__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 装飾のドット柄(84x4を20px間隔で5段) */
.history__pattern {
  position: absolute;
  top: -32px;
  width: 84px;
  height: 84px;
  background-image: var(--dots), var(--dots), var(--dots), var(--dots), var(--dots);
  background-position: 0 0, 0 20px, 0 40px, 0 60px, 0 80px;
  background-repeat: no-repeat;
}

.history__item--l .history__pattern {
  left: calc(100% - 108px);
}

.history__item--r .history__pattern {
  left: 24px;
}

.history__photo {
  /* ドット柄(.history__pattern)は absolute なので、静的要素のままだとDOM順に関係なく
     写真より前面に描画される。写真も位置指定要素にしてDOM順どおり手前に出す */
  position: relative;
  width: calc(100% - 40px);
  /* 枠幅は可変なので、固定高だと object-fit で上下が切れてしまう。
     Figmaの350x264をそのまま縦横比にすれば、どの幅でも全体が入り余白も出ない */
  aspect-ratio: 350 / 264;
  height: auto;
  object-fit: cover;
}

.history__item--l .history__photo {
  align-self: flex-start;
  border-top-right-radius: 48px;
}

.history__item--r .history__photo {
  align-self: flex-end;
  border-top-left-radius: 48px;
}

.history__text {
  align-self: flex-start;
  width: calc(100% - 63px);
}

.history__item--l .history__text {
  margin-left: 24px;
}

.history__item--r .history__text {
  margin-left: 40px;
}

.history__date {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history__year {
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--year-color, var(--brand));
}

.history__month {
  position: relative;
  padding-left: 13px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-black);
}

.history__month::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 24px;
  background: var(--border);
  transform: translateY(-50%);
}

.history__title {
  margin-top: 32px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--gray-80);
}

.history__desc {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-80);
}

/* --------------------------------------------------------------------------
   8. Section03 CAMPAIGN
   -------------------------------------------------------------------------- */
.campaign {
  position: relative;
  padding: 64px 0;
  overflow: hidden;
  background: var(--brand-light);
}

/* HISTORY(#f0faf2)からCAMPAIGN(#b9ecc1)への波。Figmaでは180度回転して配置されている */
.wave--campaign {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(180deg);
}

.campaign__intro {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-inline: var(--sp-pad);
}

.campaign__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.campaign__lead {
  margin-top: 32px;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: var(--text-black);
}

/* 応募ステップ ------------------------------------------------------------- */
.steps {
  width: calc(100% - 32px);
  margin: 40px auto;
}

.steps__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 40px;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  background-image: var(--dashed);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 1px;
}

.steps__item:last-child {
  padding-bottom: 0;
}

.steps__icon {
  position: relative;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
}

.steps__circle {
  position: absolute;
  top: 0;
  left: 0;
}

.steps__glyph {
  position: absolute;
  top: 18px;
  left: 18px;
}

.steps__no {
  position: relative;
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .48px;
  color: var(--brand-light);
}

.steps__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.steps__item:first-child .steps__text {
  gap: 4px;
}

.steps__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .64px;
  color: var(--text-black);
}

.steps__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .56px;
  color: var(--text-gray);
}

/* アプリDL訴求 ------------------------------------------------------------- */
.download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 48px;
  overflow: hidden;
  background-image: linear-gradient(34.4deg, #edfdef 0%, #b2f3ca 100%);
}

.download__copy {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .32px;
  text-align: center;
  color: var(--text-black);
}

.download__btn {
  width: 327px;
  max-width: calc(100% - 32px);
  padding: 22px 16px;
  border-radius: 32px;
  background: var(--secondary);
  box-shadow: 0 2px 12px rgba(51, 51, 51, .04);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #fff;
  transition: background-image .15s ease;
}

/* ホバー時はグラデーションに変わる(Figma 12491:14213 Button/Hover)。
   単色→グラデーションは補間できないため、下地の background はそのままに
   background-image を重ねている */
.download__btn:hover {
  background-image: linear-gradient(-90deg, #f19730 0%, #e87700 100%);
}

.download__mockup {
  width: 120px;
  height: 207px;
}

/* キャンペーン概要 --------------------------------------------------------- */
.outline {
  padding-top: 40px;
  padding-inline: var(--sp-pad);
}

.outline__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin-top: 40px;
}

.outline__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 24px;
  background-image: var(--dashed);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

.outline__tag {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 76px;
  padding: 5px 8px 6px;
  border-radius: 4px;
  background: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #fff;
}

.outline__tag--wide {
  width: auto;
}

.outline__desc {
  flex: 1 0 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-black);
}

.outline__desc b {
  font-weight: 700;
  color: var(--secondary);
}

/* 1項目に複数の段落を並べる場合の間隔（「当選・発送」で使用）。
   注意事項の行間(.notes の gap)と同じ8pxに揃えている */
.outline__desc p + p {
  margin-top: 8px;
}

/* 1項目の中の箇条書き（「応募資格」で使用）。
   記号の付け方は .notes__item と同じ作りにしている。
   文字色・サイズは .outline__desc から継承させる */
.outline__points {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.outline__point {
  position: relative;
  padding-left: 16px;
}

.outline__point::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* 項目に添える補足説明（「賞品」のギフトカードの説明で使用）。
   注意事項の本文(.notes__text)と同じ 12px / --text-gray */
.outline__sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-gray);
}

.notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 24px;
}

.notes__item {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-gray);
}

.notes__item::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* 注意事項のセクション見出し。既存の意匠から浮かないよう、
   太さと色だけ変えた控えめな指定にしている */
.notes__heading {
  width: 100%;
  margin-top: 24px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-black);
}

/* 箇条書きではない段落(個人情報・なりすまし・主催の説明文)。「※」は付けない */
.notes__text {
  width: 100%;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-gray);
}

/* 注意事項の本文中のリンク。色は本文から継承し、下線だけで識別させる。
   ホバーはフッターのリンクと同じ扱いにしている */
.notes__link {
  text-decoration: underline;
  transition: opacity .15s ease;
}

.notes__link:hover {
  opacity: .5;
}

/* 見出しの直後に来る .notes は上マージンを詰める(見出し側で間隔を取るため) */
.notes__heading + .notes,
.notes__text + .notes {
  margin-top: 8px;
}

/* 応募ステップの下の補足文 */
.steps__note {
  width: 100%;
  margin-top: 24px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-gray);
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  padding-block: 48px;
  padding-inline: var(--sp-pad-lg);
  background: var(--brand-dark);
  color: #fff;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.site-footer__logo {
  width: 100px;
  height: 24px;
}

.site-footer__social {
  display: flex;
  gap: 24px;
}

.site-footer__social img {
  width: 24px;
  height: 24px;
}

/* フッターの各リンク(SNSアイコン・お問い合わせ)は不透明度50%で反応する */
.site-footer__social a,
.site-footer__nav a {
  transition: opacity .15s ease;
}

.site-footer__social a:hover,
.site-footer__nav a:hover {
  opacity: .5;
}

.site-footer__nav {
  font-size: 12px;
  line-height: 1.5;
}

.site-footer__nav a {
  font-weight: 400;
  letter-spacing: .48px;
  color: #fff;
}

.site-footer__corp {
  width: 94px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   9.5 ダウンロードモーダル(Figma 12768:7159 特殊Modal / 344x434)
   768px以上でDLボタンを押すと開く。QRはFigmaの仮QRではなく本番の img/qr.svg
   -------------------------------------------------------------------------- */
.dl-modal {
  width: 344px;
  max-width: calc(100% - 32px);
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
  /* 画面中央に置く(display:flex等にすると閉じているときに表示されてしまう) */
  margin: auto;
  overflow: hidden;
  color: var(--text-black);
}

/* オーバーレイはFigmaに定義がないため独自に決めた値 */
.dl-modal::backdrop {
  background: rgba(0, 0, 0, .5);
}

.dl-modal__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
}

.dl-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--brand);
}

.dl-modal__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--text-black);
}

.dl-modal__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 214px;
  border-radius: 8px;
  background-image: linear-gradient(25.1deg, #edfdef 0%, #b2f3ca 100%);
}

.dl-modal__qr {
  width: 182px;
  height: 182px;
}

.dl-modal__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 0;
}

.dl-modal__close {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .03);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand);
  cursor: pointer;
  transition: opacity .15s ease;
}

.dl-modal__close:hover {
  opacity: .5;
}

/* --------------------------------------------------------------------------
   10. PC両サイドの余白コンテンツ(Figma: 20周年LP 12625:31692)
   -------------------------------------------------------------------------- */

/* 画面上端の紙吹雪(img:紙吹雪 12625:33163) ---------------------------------
   Figmaでは left:-48.59 / top:-105.4 / 1594.46x431.24 で、画面には上端0〜326pxが見える。
   left の式は1440幅で left:-48.59px と一致し、かつ紙吹雪の疎な中央帯が
   390pxのページカードの位置に揃う(= カード上に紙吹雪が乗らない)。
   2カラム時はカードが右へずれるため、下のメディアクエリで同じ量だけ追従させる。 */
.top-confetti {
  display: none;
}

/* 緑背景の上に敷く前提の装飾なので、カード表示に切り替わる501pxから出す */
@media (min-width: 501px) {
  .top-confetti {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    height: 326px;
    overflow: hidden;
    pointer-events: none;
  }

  .top-confetti img {
    position: absolute;
    top: -105.4px;
    left: calc(50% - 768.59px);
    width: 1594.46px;
    max-width: none;
    height: 431.24px;
  }
}

/* 左右のレール -------------------------------------------------------------
   幅に応じて3段階に切り替える。
     〜767px    : メインのみ(グリッド化しない)
     768〜1279px: メイン + QR。ペアごと中央寄せ
     1280px〜   : メイン + QR + MENU。Figma(12625:31692)どおりの3カラム */
.rail {
  display: none;
}

/* 2段階目。QR(214) + 余白(64) + メイン(390) = 668px を中央に置くため、
   メインは画面中央から (214+64)/2 = 139px 右にずれる。
   .rail--right は display:none のままなのでグリッドアイテムにならず、
   3本目のトラックは生成されない(2トラックのグリッドとして成立する)。 */
@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 214px 390px;
    justify-content: center;
    column-gap: 64px;
  }

  /* レール自体はグリッド行いっぱいに伸ばして sticky の可動域を確保しつつ、
     中の要素は自然な高さのままにする(stretchさせると sticky が効かない) */
  .rail--left {
    display: flex;
    align-items: flex-start;
    /* QR(214px)を右端に寄せる。3カラム時のトラック(300px)で効く */
    justify-content: flex-end;
  }

  /* margin-top は Figma の絶対座標を .page 上端(body padding 64px)基準に変換した値 */
  .qr-promo {
    position: sticky;
    top: 136px;
    width: 214px;
    margin-top: 196px;
  }

  /* カードが139px右へずれるぶん、紙吹雪の疎な中央帯も同じだけ動かす */
  .top-confetti img {
    left: calc(50% - 768.59px + 139px);
  }
}

/* 3段階目。必要幅は 300+120+390+120+300 = 1230px。
   Figmaは1440のみの定義のため、1280pxを表示開始の下限としている。
   左右のトラックを同幅にすることで .page が画面中央に戻る。 */
@media (min-width: 1280px) {
  .layout {
    grid-template-columns: 300px 390px 300px;
    column-gap: 120px;
  }

  .rail--right {
    display: flex;
    align-items: flex-start;
  }

  .menu-card {
    position: sticky;
    top: 24px;
    width: 300px;
    margin-top: 84px;
  }

  /* メインが画面中央に戻るので紙吹雪も元の位置に戻す */
  .top-confetti img {
    left: calc(50% - 768.59px);
  }
}

/* 左サイド: QR(12625:33125) ------------------------------------------------ */
.qr-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* イラストは Shadow/XL を持つため書き出し領域(201x217)が実寸(156x170)より大きい。
   実寸領域の原点(22.07, 10.94)ぶんずらして配置し、影のはみ出しを保つ。 */
.qr-promo__illust {
  position: relative;
  width: 100%;
  height: 170px;
}

.qr-promo__illust img {
  position: absolute;
  top: -10.94px;
  left: 6.93px;
  width: 201px;
  max-width: none;
  height: 217px;
}

.qr-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: var(--secondary-light);
  box-shadow: var(--shadow-card);
}

.qr-card__code {
  width: 182px;
  height: 182px;
}

.qr-card__note {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--text-gray);
}

/* 右サイド: MENU(12491:14094) ---------------------------------------------- */
.menu-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  padding: 40px 30px;
  border-radius: 32px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.menu-card__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 240px;
}

.menu-card__title {
  font-family: var(--font-num);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .56px;
  color: var(--brand);
}

.menu-card__list a {
  display: block;
  padding: 16px 0;
  background-image: var(--dashed-brand);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .32px;
  color: var(--text-black);
  transition: opacity .15s ease;
}

.menu-card__list a:hover {
  opacity: .5;
}

.menu-card__share {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 240px;
}

.menu-card__share-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .28px;
  color: var(--brand);
}

.menu-card__social {
  display: flex;
  gap: 16px;
}

.menu-card__social img {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   11. スクロール連動の表示演出
   -------------------------------------------------------------------------- */

/* 画面に入ったブロックを opacity 0→1 / 下から16px で出す。
   Figmaのモーション定義(opacity 0→1 ＋ translate・ease-out)と同じ語彙にしている。

   すべて .js-reveal(<head>のインラインスクリプトが <html> に付ける)の配下に
   書いてあるのが要点。JSが動かない環境ではクラスが付かず、初期状態から全部見える。

   属性は役割ごとに3つに分けていて、入れ子にはしない。
     [data-reveal]       … この要素が動く。単独で監視される
     [data-reveal-group] … 監視されるだけで自分は動かないコンテナ
     [data-reveal-item]  … グループの中で動く要素。--reveal-delay で順にずれる
   [data-reveal-item] は必ず [data-reveal-group] の中に置くこと。
   [data-reveal] の中に置くと出るきっかけが無く、隠れたままになる */
.js-reveal [data-reveal],
.js-reveal [data-reveal-item] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  /* グループ内の並び順に応じてJSが 0ms, 80ms, 160ms… を入れる */
  transition-delay: var(--reveal-delay, 0s);
}

.js-reveal [data-reveal].is-visible,
.js-reveal [data-reveal-group].is-visible [data-reveal-item] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   12. モーション配慮(prefers-reduced-motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* 紙吹雪は静止させる(セットBはFigmaにない位置に出るため非表示にする) */
  .kv__set > * {
    animation: none;
  }

  .kv__set--b {
    display: none;
  }

  /* 20thロゴと「Thank you!」は最初から完成状態にする */
  .kv__logo {
    animation: none;
  }

  .kv-pen {
    animation: none;
    stroke-dashoffset: 0;
  }

  /* スクロール連動の表示演出は打ち消して、最初から全部見えている状態にする。
     JS側では分岐していないので、OSの設定を後から変えても効く */
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-item] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}