@charset "UTF-8";
/* =====================================================================
   レイアウト（style.css）
   ---------------------------------------------------------------------
   色・文字サイズ・余白・角の丸み・動きの速さは tokens.css の名前を使っています。
   数値を変えたいときは、まず tokens.css を見てください。
   セクションの並び：
     0. 基本  1. ヘッダー  2. トップ画像（20thマーク）  3. 挨拶
     4. 大見出し  5. 20年の歩み 10のトピック  6. 10のこだわり
     7. Wチャンスプレゼント  8. フッター  9. 動き  10. 画面幅ごとの調整
   ===================================================================== */

/* ---------- 0. 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-main);
  font-family: var(--font-base);
  font-size: var(--fs-card-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}
h1, h2, h3, h4, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-text-accent); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.inner { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--page-side); }
main { position: relative; z-index: 1; }
main > section, .site-footer { position: relative; }

/* ボタン共通 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  border: 0; border-radius: var(--radius-16); cursor: pointer;
  font-weight: var(--weight-bold); text-decoration: none;
  transition: background-color var(--motion-hover) ease;
}
.btn-entry { background: var(--color-button-black); color: var(--color-text-white); }      /* エントリーボタン */
.btn-entry:hover { background: var(--color-button-gray); }
.btn-sub { background: var(--color-button-gray); color: var(--color-text-white); }          /* ストアを開く／アプリを開く */
.btn-sub:hover { background: var(--color-button-black); }
.btn-small { height: var(--button-height); padding-inline: var(--space-12); font-size: var(--fs-button); }
.icon { width: var(--icon-size); height: var(--icon-size); flex: none; }

/* 見出し */
.section-title {
  font-weight: var(--weight-black); font-size: var(--fs-section-title); line-height: var(--lh-tight);
  text-align: center; padding: 0 var(--page-side) var(--section-title-gap);
}
.sub-title {
  font-weight: var(--weight-black); font-size: var(--fs-sub-title); line-height: var(--lh-tight);
  text-align: center; padding-bottom: var(--space-32);
}

/* ---------- 1. ヘッダー（画面上部に固定・バーなし） ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--header-side);
  transition: opacity var(--motion-dissolve) ease, transform var(--motion-dissolve) ease;
}
.site-header .title { height: var(--header-title-height); width: auto; }

/* ---------- 2. トップ画像（20thマーク・画面中央に固定） ---------- */
.top-mark {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: grid; place-items: center;
  padding: var(--header-height) var(--space-20);
}
.top-mark__box {
  position: relative; aspect-ratio: 1 / 1;
  /* 画面の幅・高さの小さい方に合わせて縮み、最大 --top-mark-max まで */
  width: min(var(--top-mark-max), calc(100vw - var(--space-40)), calc(100vh - var(--header-height) * 2 - var(--space-16)));
  width: min(var(--top-mark-max), calc(100vw - var(--space-40)), calc(100svh - var(--header-height) * 2 - var(--space-16)));
}
.top-mark__box img, .top-mark__a { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--motion-dissolve) ease; }
/* 矢印の一筆書き：矢印の画像で塗った太い線を、端から順に伸ばして表示する */
.top-mark__arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arrow-draw { fill: none; stroke: url(#arrow-img); stroke-linecap: round; stroke-linejoin: round; }
.js .arrow-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.arrow-draw { animation-duration: var(--motion-arrow-draw); animation-timing-function: linear; animation-delay: var(--motion-arrow-delay); animation-fill-mode: forwards; }
/* 3本を1本の線として「ゆっくり → 速く → ゆっくり」で描く（各線のキーフレームは全体の進み具合から計算した値） */
.js[data-step="2"] .arrow-draw--1, .js[data-step="3"] .arrow-draw--1 { animation-name: arrow-draw-1; }
.js[data-step="2"] .arrow-draw--2, .js[data-step="3"] .arrow-draw--2 { animation-name: arrow-draw-2; }
.js[data-step="2"] .arrow-draw--3, .js[data-step="3"] .arrow-draw--3 { animation-name: arrow-draw-3; }
@keyframes arrow-draw-1 { 0.0% { stroke-dashoffset: 1.000; } 3.0% { stroke-dashoffset: 0.992; } 6.0% { stroke-dashoffset: 0.969; } 9.1% { stroke-dashoffset: 0.931; } 12.1% { stroke-dashoffset: 0.878; } 15.1% { stroke-dashoffset: 0.810; } 18.1% { stroke-dashoffset: 0.729; } 21.1% { stroke-dashoffset: 0.634; } 24.1% { stroke-dashoffset: 0.528; } 27.2% { stroke-dashoffset: 0.410; } 30.2% { stroke-dashoffset: 0.282; } 33.2% { stroke-dashoffset: 0.145; } 36.2% { stroke-dashoffset: 0.000; } 100.0% { stroke-dashoffset: 0.000; } }
@keyframes arrow-draw-2 { 0.0% { stroke-dashoffset: 1.000; } 36.2% { stroke-dashoffset: 1.000; } 37.8% { stroke-dashoffset: 0.922; } 39.4% { stroke-dashoffset: 0.842; } 40.9% { stroke-dashoffset: 0.760; } 42.5% { stroke-dashoffset: 0.678; } 44.1% { stroke-dashoffset: 0.595; } 45.7% { stroke-dashoffset: 0.510; } 47.2% { stroke-dashoffset: 0.425; } 48.8% { stroke-dashoffset: 0.340; } 50.4% { stroke-dashoffset: 0.255; } 52.0% { stroke-dashoffset: 0.170; } 53.5% { stroke-dashoffset: 0.085; } 55.1% { stroke-dashoffset: 0.000; } 100.0% { stroke-dashoffset: 0.000; } }
@keyframes arrow-draw-3 { 0.0% { stroke-dashoffset: 1.000; } 55.1% { stroke-dashoffset: 1.000; } 58.9% { stroke-dashoffset: 0.864; } 62.6% { stroke-dashoffset: 0.732; } 66.3% { stroke-dashoffset: 0.606; } 70.1% { stroke-dashoffset: 0.488; } 73.8% { stroke-dashoffset: 0.381; } 77.6% { stroke-dashoffset: 0.284; } 81.3% { stroke-dashoffset: 0.200; } 85.0% { stroke-dashoffset: 0.129; } 88.8% { stroke-dashoffset: 0.073; } 92.5% { stroke-dashoffset: 0.033; } 96.3% { stroke-dashoffset: 0.008; } 100.0% { stroke-dashoffset: 0.000; } }
.top-mark__b { opacity: 0; }

/* 最初の画面ぶんの空き（この下から挨拶文が始まる） */
.fv { height: 100vh; height: 100lvh; }

/* ---------- 3. 挨拶 ---------- */
.greeting { padding: var(--greeting-pad-top) var(--page-side) var(--greeting-pad-bottom); }
.greeting p {
  max-width: 720px; margin-inline: auto; text-align: center;
  font-weight: var(--weight-bold); font-size: var(--fs-greeting); line-height: var(--lh-greeting);
}

/* ---------- 4. 大見出し（画像） ---------- */
.big-title { padding-top: var(--big-title-pad-top); display: flex; justify-content: center; padding-inline: var(--page-side); }
.big-title img { width: var(--heading-image-width); }

/* ---------- 5. 20年の歩み 10のトピック ---------- */
.topics { background: var(--color-card-black); color: var(--color-text-white); padding-block: var(--topics-pad); }

/* カルーセル共通（横スクロール。中央のカードに吸着） */
.slider { position: relative; }
.slider__view {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.slider__view::-webkit-scrollbar { display: none; }
.slider__track { display: flex; width: max-content; align-items: stretch; }
.slider__card { flex: none; scroll-snap-align: center; }
.nav-btn {
  width: var(--button-height); height: var(--button-height); border-radius: var(--radius-16); border: 0;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--motion-hover) ease, opacity var(--motion-hover) ease;
}
.nav-btn:disabled { opacity: .35; cursor: default; }

.topics .slider__track { gap: var(--topic-gap); padding-inline: calc(50% - var(--topic-card-width) / 2); }
.topic { width: var(--topic-card-width); display: flex; flex-direction: column; gap: var(--topic-inner-gap); }
.topic__img { width: 100%; aspect-ratio: 320 / 200; border-radius: var(--radius-16); overflow: hidden; }
.topic__img img { width: 100%; height: 100%; object-fit: cover; }
.topic__text { display: flex; flex-direction: column; gap: var(--space-12); }
.topic__title { font-weight: var(--weight-black); font-size: var(--fs-card-title-topic); line-height: var(--lh-heading); }
.topic__body {
  font-weight: var(--weight-medium); font-size: var(--fs-card-body); line-height: var(--lh-body);
  min-height: calc(var(--fs-card-body) * var(--lh-body) * 3); /* 3行分。下の年の位置をそろえる */
}
.topic__year {
  font-family: var(--font-year); font-style: italic; font-weight: var(--weight-year);
  font-size: var(--fs-year); line-height: var(--year-row-height); height: var(--year-row-height);
  color: var(--color-text-year); text-align: center;
}
.topics__nav {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: var(--topic-card-width); height: var(--year-row-height);
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.topics__nav .nav-btn { pointer-events: auto; background: var(--color-button-low); color: var(--color-text-main); }
.topics__nav .nav-btn:hover:not(:disabled) { background: var(--color-card-white); }

/* ---------- 6. 10のこだわり ---------- */
.kodawari { padding-block: var(--kodawari-pad); }
.krows { display: flex; flex-direction: column; gap: var(--space-40); }
.krow { position: relative; }
.krow__label {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  height: var(--kodawari-label-height); width: auto; max-width: none;
}
.krow .slider__view { padding-top: calc(var(--kodawari-label-height) / 2); }
.krow .slider__track { gap: var(--kodawari-gap); padding-inline: calc(50% - var(--kodawari-card-width) / 2); }
.kcard {
  width: var(--kodawari-card-width); min-height: var(--kodawari-card-min-height);
  background: var(--color-card-white); border-radius: var(--radius-card);
  padding: var(--kodawari-pad-top) var(--kodawari-pad-side) var(--kodawari-pad-bottom);
  display: flex; flex-direction: column; gap: var(--kodawari-inner-gap);
}
.kcard__title { font-weight: var(--weight-black); font-size: var(--fs-card-title); line-height: var(--lh-heading); text-align: center; }
.kcard__img { width: 100%; aspect-ratio: 464 / 240; border-radius: var(--radius-8); overflow: hidden; }
.kcard__img img { width: 100%; height: 100%; object-fit: cover; }
.kcard__body { font-weight: var(--weight-medium); font-size: var(--fs-card-body); line-height: var(--lh-body); }
.knav {
  display: flex; align-items: center; justify-content: space-between;
  width: var(--k-nav-width); max-width: 100%; height: var(--space-56);
  margin: var(--space-8) auto 0; padding-inline: var(--space-40);
}
.knav .nav-btn { background: var(--color-button-black); color: var(--color-text-white); }
.knav .nav-btn:hover:not(:disabled) { background: var(--color-button-gray); }
.dots { display: flex; align-items: center; }
.dots button { width: 18px; height: var(--icon-size); padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.dots button::before {
  content: ""; width: var(--dot-size); height: var(--dot-size); border-radius: 50%;
  background: var(--color-button-light); transition: background-color var(--motion-hover), transform var(--motion-hover);
}
.dots button[aria-current="true"]::before { background: var(--color-button-black); transform: scale(1.25); }

/* ---------- 7. Wチャンスプレゼント ---------- */
.present { display: flex; flex-direction: column; gap: var(--present-gap); padding-bottom: var(--present-pad-bottom); }
.period { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.period__date { font-weight: var(--weight-black); font-size: var(--fs-sub-title); line-height: var(--lh-tight); }
.period__lead { font-weight: var(--weight-medium); font-size: var(--fs-lead); line-height: var(--lh-body); }

.chances { display: flex; gap: var(--space-36); }
.chance {
  flex: 1 1 0; min-width: 0; height: var(--chance-height);
  background: var(--color-card-white); border-radius: var(--radius-card);
  padding: 0 var(--space-48) var(--space-40);
  display: flex; flex-direction: column; gap: var(--space-16);
}
.chance__head { display: flex; align-items: center; gap: var(--space-16); }
.chance__badge { width: var(--chance-badge-width); flex: none; }
.chance__title { font-weight: var(--weight-black); font-size: var(--fs-card-title); line-height: var(--lh-heading); color: var(--color-text-accent); }
.chance__pic { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.chance1 .chance__pic img { width: var(--chance1-image-width); }
.chance2 .chance__pic img { width: var(--chance2-image-width); height: var(--chance2-image-height); object-fit: cover; object-position: top; }
.prize-list { display: flex; flex-direction: column; }
.prize-list__row {
  display: flex; align-items: center; gap: var(--space-16); padding-block: var(--space-16);
  border-top: 1px solid var(--color-divider);
  font-weight: var(--weight-black); font-size: var(--fs-prize); line-height: var(--lh-heading);
}
.prize-list__row:last-child { border-bottom: 1px solid var(--color-divider); }
.prize-list__rank { color: var(--color-text-accent); }
.prize-list__name { flex: 1; white-space: pre-wrap; }

.entry { display: flex; justify-content: center; padding-inline: var(--page-side); }
.entry .btn {
  width: var(--entry-width); max-width: 100%; height: var(--entry-height); padding-inline: var(--space-16);
  font-weight: var(--weight-black); font-size: var(--fs-entry); letter-spacing: -.04em;
}

.howto, .overview { margin-top: var(--howto-extra-top); }
.steps { display: flex; align-items: stretch; }
.step-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.step-col__who {
  height: var(--space-28); font-weight: var(--weight-black); font-size: var(--fs-step-who);
  line-height: var(--lh-heading); color: var(--color-text-accent); text-align: center;
}
.step {
  flex: 1; background: var(--color-card-white); border-radius: var(--radius-card);
  padding: var(--space-24) var(--space-24) var(--space-32);
  display: flex; flex-direction: column; gap: var(--space-24);
}
.step__num {
  width: var(--step-num-size); height: var(--step-num-size); border-radius: var(--radius-12);
  background: var(--color-card-black); color: var(--color-text-white);
  font-weight: var(--weight-bold); font-size: var(--fs-step-num); line-height: var(--step-num-size); text-align: center;
}
.step__pic { height: var(--step-image-size); display: flex; justify-content: center; }
.step__pic img { width: var(--step-image-size); height: var(--step-image-size); }
/* 改行の出し分け：br-pc は広い画面だけ、br-sp は参加方法が横スクロールになる幅（1024px以下）だけで改行 */
.br-sp { display: none; }
.step__bottom { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); margin-top: auto; }
.step__bottom p { font-weight: var(--weight-bold); font-size: var(--fs-step-body); line-height: var(--lh-body); text-align: center; }
.step__spacer { height: var(--button-height); }
.step-arrow { flex: none; width: var(--space-36); display: flex; align-items: center; justify-content: center; padding-top: var(--space-32); }
.step-arrow svg { width: var(--step-arrow-size); height: var(--step-arrow-size); }

.ov-cols { display: flex; gap: var(--space-48); }
.ov-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-32); }
.ov-block { display: flex; flex-direction: column; gap: var(--space-12); }
.ov-block h3 { font-weight: var(--weight-black); font-size: var(--fs-ov-title); line-height: var(--lh-heading); color: var(--color-text-accent); }
.ov-block p { font-weight: var(--weight-medium); font-size: var(--fs-ov-body); line-height: var(--lh-body); }
.ov-block p b { font-weight: var(--weight-bold); }

/* ---------- 8. フッター ---------- */
.site-footer { z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: var(--space-40) var(--space-32); }
.site-footer img { width: var(--footer-logo-width); }
.site-footer small { font-size: var(--fs-footer); color: var(--color-text-sub); }

/* ---------- 9. 動き ----------
   main.js が <html> に次の印を付けて切り替えます。
   data-step="0〜3"（読み込み時の段階）／ is-scrolled（スクロール中）／ is-header-hidden */
.js .top-mark__text { opacity: 0; }
.js[data-step="2"] .top-mark__text,
.js[data-step="3"] .top-mark__text { opacity: 1; transition: opacity var(--motion-text-dissolve) ease var(--motion-text-delay); }
.js.is-scrolled .top-mark__a { opacity: 0; }
.js.is-scrolled .top-mark__b { opacity: 1; }
.js:not([data-step="3"]) .site-header { opacity: 0; pointer-events: none; }
.js.is-header-hidden .site-header { opacity: 0; transform: translateY(-100%); pointer-events: none; }

/* 画面に入ったら下から上へ表示（.reveal） */
.js .reveal {
  opacity: 0; translate: 0 var(--motion-reveal-distance);
  transition: opacity var(--motion-reveal) ease, translate var(--motion-reveal) cubic-bezier(.2, .75, .25, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* 端末で「動きを減らす」設定の人には動きを出さない */
@media (prefers-reduced-motion: reduce) {
  .slider__view { scroll-behavior: auto; }
  .site-header, .top-mark__box img, .top-mark__a, .btn, .nav-btn, .dots button::before { transition: none; }
  .js .reveal { opacity: 1; translate: none; transition: none; }
  .js[data-step] .top-mark__arrow .arrow-draw { animation: none; stroke-dashoffset: 0; }
  .js[data-step] .top-mark__box .top-mark__text { transition: none; }
}

/* ---------- 10. 画面幅ごとの調整 ---------- */
/* タブレット・スマホ共通（画面幅1024px以下）：参加方法は横スクロール */
@media (max-width: 1024px) {
  .chance__pic img { max-width: 100%; }
  .steps {
    margin-inline: calc(var(--page-side) * -1); padding: 0 var(--page-side) var(--space-4);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-side);
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step-col { flex: 0 0 var(--step-card-width); scroll-snap-align: start; }
  .step-arrow { width: var(--space-32); }
  .br-sp { display: inline; }
  .br-pc { display: none; }
}

/* スマホ（画面幅600px以下） */
@media (max-width: 600px) {
  .site-header { align-items: flex-start; padding-top: var(--space-16); }
  .site-header .btn { display: none; }
  .top-mark { padding: var(--header-height) 0; }
  .top-mark__box {
    /* 8の倍数に丸めて縮める（384, 376, 368…） */
    width: min(var(--top-mark-max), calc(100vw - var(--space-16)), calc(100svh - var(--header-height) * 2));
    width: round(down, min(var(--top-mark-max), calc(100vw - var(--space-16)), calc(100svh - var(--header-height) * 2)), 8px);
  }
  .topic__text { margin-top: var(--space-8); } /* 画像と見出しの間を24pxに（16+8） */
  .topics__nav { display: none; }
  .krows { gap: var(--space-32); }
  .knav { width: auto; justify-content: center; margin-top: var(--space-4); height: auto; }
  .knav .nav-btn { display: none; }
  .chances { flex-direction: column; gap: var(--space-20); }
  .chance { padding: 0 var(--space-20) var(--space-24); }
  .chance__title { white-space: nowrap; }
  .chance2 .chance__pic { flex: none; height: var(--chance2-image-height); }
  .prize-list__row { gap: var(--space-12); padding-block: var(--space-12); }
  .step { padding: var(--space-20) var(--space-20) var(--space-24); gap: var(--space-16); }
  .ov-cols { flex-direction: column; gap: var(--space-32); }
  .site-footer { flex-direction: column; justify-content: center; gap: var(--space-16); padding: var(--space-32) var(--space-20) var(--space-24); }
}