/* =========================================================
   SUMAI発掘ナビ キャンペーンLP — wireframe → coded reference
   Design tokens live at the top; everything else consumes them.
   ========================================================= */

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-text: #2a2a28;
  --color-text-muted: #7a7a72;
  --color-border: #e6e6e0;
  --color-tint-bg: #fafafb;
  --color-primary: oklch(0.55 0.17 258);   /* indigo/blue — main CTA, links, badges */
  --color-primary-dim: oklch(0.62 0.13 258);
  --color-accent: oklch(0.52 0.16 42);     /* warm orange — incentive / urgency accents */
  --color-accent-tint: oklch(0.96 0.04 42);
  --color-footer-bg: #e5e5e2;
  --color-footer-text: #2a2a28;
  --color-footer-link: #5a5a54;
  --color-placeholder-border: #d8d8d8;

  /* Typography */
  --font-body: 'Noto Sans JP', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;

  /* Layout */
  --content-max: 450px;
  --radius-lg: 14px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #CDF0FE;
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Constrain body sections to a mobile-first column, centered on wider viewports.
   The hero (main-visual.css) manages its own fixed 430px stage separately. */
main,
footer.footer,
.sticky-cta__inner {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dim); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.section__title {
  font-size: 22px;
  font-weight: 900;
  color: #1f1f1d;
  margin: 6px 0 0;
}
.section__title--wide { line-height: 1.5; text-wrap: balance; }

.accent { color: var(--color-primary); }

/* Buttons */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
}
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover { background: var(--color-primary-dim); color: #fff; }

/* =========================================================
   FV — メインビジュアル（Figma frame "iPhone 14 & 15 Pro Max - 2" 再現）
   Figma原寸は 430 × 932px。LP本文のコンテンツ幅（640px）に合わせて
   拡大表示するため、430×932の"ステージ"を丸ごとスケールする
   （個々の子要素の座標は原寸のまま — 相対位置がずれない）。
   ========================================================= */

:root {
  --fv-w: 430;
  --fv-h: 932;
  --fv-target: 450; /* --content-max と揃える */
}

/* 外枠：640px幅を上限にレスポンシブ（高さは aspect-ratio で追従）。
   実際のスケール適用は JS（fitHeroStage）が .hero__stage の transform に
   反映する — clientWidth を都度測るため、あらゆる画面幅で追従する。 */
.hero {
  position: relative;
  width: 100%;
  max-width: calc(var(--fv-target) * 1px);
  aspect-ratio: var(--fv-w) / var(--fv-h);
  margin: 0 auto;
  overflow: hidden;
}

/* 内側：Figma原寸(430×932)のまま組み、JSが外枠の実測幅に合わせて拡大 */
.hero__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--fv-w) * 1px);
  height: calc(var(--fv-h) * 1px);
  transform-origin: top left;
}

.hero__mount {
  position: absolute;
  inset: 0;
}

/* Suppress the design's original baked-in incentive text node — matched by
   its unique inline position (left: 5.973px is only ever set on that one
   span). A stylesheet rule survives any re-render; a one-off JS mutation
   would not. Our own live .hero__incentive sits in the same spot instead. */
.hero__mount span[style*="left: 5.973px"] {
  visibility: hidden !important;
}

/* Suppress the design's original baked-in headline text too (「AIといっしょに
   …体感しよう！」) — its web-font rendering doesn't match the design's real
   typeface, so we swap in a rasterized image (headline.png) of the exact
   Figma text instead. Matched by its unique inline left position. */
.hero__mount span[style*="left: 73px"] {
  visibility: hidden !important;
}

/* Suppress the design's original baked-in CTA button too (オレンジ地の
   「今すぐ利用してみる」) — replaced by a real coded <a> button below so
   hover can fade the fill consistently without touching its shadow.
   Matched by its unique inline background color. */
.hero__mount div[style*="background-color: rgb(255, 116, 23)"] {
  visibility: hidden !important;
}

/* 応募締切バッジの「応募締切」「（月）」ラベルはFigma上でイタリック体だが、
   実際のレンダリングでは斜体を意図していないため通常体に補正。 */
.hero__mount span[style*="left: 3.476px"],
.hero__mount span[style*="left: 194.476px"] {
  font-style: normal !important;
}

/* ---------------------------------------------------------------
   見出し画像（フォントがデザインと異なるため画像化）
   元デザインのテキストボックス坐標を踏襲: left:45px top:134px 341×157px
   --------------------------------------------------------------- */
.hero__headline {
  position: absolute;
  left: 45px;
  top: 134px;
  width: 341px;
  height: 157px;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   ライブテキスト（唯一の実テキスト要素）
   元デザインの座標・書体をそのまま踏襲:
     left: 5.973px / top: 514.095px / width: 421.027px / height: 100px
     Noto Sans Bold, 24.62px, line-height 34px, 中央揃え, 黒
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   特典テキスト画像（A1 Gothic StdNは入手不可な有料フォントのため、
   フォント差をなくすため画像化）。元デザインの座標をそのまま踏襲:
     left: 5.973px / top: 514.095px / width: 421.027px / height: 100px
   --------------------------------------------------------------- */
.hero__incentive {
  position: absolute;
  left: 22px;
  top: 522px;
  width: 388px;
  height: 84px;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* 差し替え画像：ホットスポット周りの写真2点＋キャラクター＋穴
   (元Figma vector reconstructionではclip-pathの誤差でキャラクターの
   帽子が欠けたため、ユーザー提供のフラット画像に置き換え。
   対応するベクター要素はComponents.bundle.js側でdisplay:noneにしている) */
.hero__character-group {
  position: absolute;
  left: 0;
  top: 319px;
  width: 430px;
  height: 184px;
  object-fit: contain;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   CTAボタン（実コード化 — 元デザインの塗りボタンを差し替え）
   元デザインの座標・スタイルをそのまま踏襲:
     left:31px top:816px 367×87px, radius:6, bg:rgb(255,116,23),
     shadow: 0px 4px 4px rgba(0,0,0,.25), label 20px/700 白 + 矢印
   ホバーは影は変えず、塗り+ラベル（.hero__cta-link__fill）だけを透過。
   --------------------------------------------------------------- */
.hero__cta-link {
  position: absolute;
  left: 31px;
  top: 816px;
  width: 367px;
  height: 87px;
  border-radius: 6px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: block;
  text-decoration: none;
}
.hero__cta-link__fill {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: rgb(255, 116, 23);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.hero__cta-link:hover .hero__cta-link__fill {
  opacity: 0.7;
}
.hero__cta-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.hero__cta-link__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

/* =========================================================
   Sections
   ========================================================= */
.section {
  padding: 34px 24px 30px;
  border-top: 1px solid #eee;
  background: #fff;
}
.section--tinted { background: var(--color-tint-bg); }

/* =========================================================
   応募までの流れ — step list
   ========================================================= */
.steps {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.step {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 20px 20px 20px 54px;
}
.step--last { border: 1.5px solid oklch(0.55 0.17 258 / .5); }

.step-arrow {
  display: flex;
  justify-content: center;
  padding: 5px 0;
  color: var(--color-primary-dim);
  font-size: 18px;
  line-height: 1;
}

.step__badge {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.step__badge--accent { background: var(--color-accent); }

.step__text {
  margin: 0;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.6;
}

.step__note {
  margin: 8px 0 0;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  background: var(--color-accent-tint);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--color-accent);
  font-weight: 700;
}

/* =========================================================
   機能紹介 — POINT cards
   ========================================================= */
.point {
  margin-top: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 18px;
}
.point + .point { margin-top: 14px; }

.point__tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border-radius: 999px;
  padding: 4px 13px;
}
.point__tag--accent { background: var(--color-accent); }

.point__title { font-weight: 700; font-size: 17px; color: var(--color-text); margin: 12px 0 0; }
.point__desc { font-size: 13.5px; color: var(--color-text-muted); margin: 6px 0 0; line-height: 1.75; }

/* 機能紹介後のCTA */
.section-cta {
  margin-top: 20px;
}
.section-cta__btn {
  height: 54px;
  border-radius: var(--radius-md);
  font-size: 16px;
  background: rgb(255, 116, 23);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 116, 23, 0.4);
  opacity: 1;
  transition: opacity 0.6s ease, background-color 0.15s ease;
}
.section-cta__btn:hover {
  opacity: 0.7;
  background: rgb(255, 116, 23);
  color: #fff;
}

/* =========================================================
   注意事項
   ========================================================= */
.notes {
  list-style: none;
  counter-reset: notes-counter;
  margin: 16px 0 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.notes > li {
  counter-increment: notes-counter;
  padding: 13px 16px 13px 40px;
  font-size: 13.5px;
  color: #3a3a36;
  line-height: 1.75;
  position: relative;
}
.notes > li + li { border-top: 1px solid #f0f0ec; }
.notes > li::before {
  content: counter(notes-counter) '.';
  position: absolute;
  left: 14px;
  color: #1f1f1d;
  font-weight: 700;
}
.notes__sub {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.notes__sub li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: #3a3a36;
  line-height: 1.7;
}
.notes__sub li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: #8a8a82;
}

/* 番号なし版（個人情報の取り扱い等、列挙ではなく独立した文の並び） */
.notes--plain {
  counter-reset: none;
}
.notes--plain > li {
  padding-left: 30px;
}
.notes--plain > li::before {
  content: '・';
  counter-increment: none;
  color: #1f1f1d;
}
.notes--tight {
  margin-top: 14px;
}
.notes--tight > li {
  font-size: 12.5px;
  color: #8a8a82;
}

/* 主催者・お問い合わせ情報カード */
.contact-card {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}
.contact-card__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
}
.contact-card__row + .contact-card__row {
  border-top: none;
}
.contact-card__notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  color: #3a3a36;
  line-height: 1.75;
}
.contact-card__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 700;
  color: #1f1f1d;
}
.contact-card__value {
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.7;
}
.contact-card__value a { color: var(--color-primary); }

/* キャンペーン概要セクション内の小見出し・本文段落 */
.terms__heading {
  font-size: 15px;
  font-weight: 700;
  color: #1f1f1d;
  margin: 28px 0 0;
}
.terms__heading--first { margin-top: 20px; }
.terms__text {
  font-size: 13.5px;
  color: #3a3a36;
  line-height: 1.75;
  margin: 8px 0 0;
}

/* =========================================================
   フッター
   ========================================================= */
.footer {
  padding: 28px 24px 90px;
  border-top: 1px solid #eee;
  background: linear-gradient(180deg, #DEDEDE, #F6F6F6);
  text-align: center;
}
.footer__brand { display: flex; align-items: center; justify-content: center; gap: 8px; }
.footer__brand-mark { height: 30px; width: auto; }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
  font-size: 12.5px;
}
.footer__links a { color: var(--color-footer-link); text-decoration: none; }
.footer__links a:hover { color: var(--color-primary); }

.footer__copyright {
  font-size: 14px;
  color: #666666;
  text-align: center;
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin-top: 18px;
}

/* =========================================================
   追従CTAバー
   PC・モバイル共通：初期は非表示、少しスクロールしてから（is-visible）
   フェードインで表示する（index.htmlのJSが scrollY を見て制御）。
   ========================================================= */
.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid #e3e3dd;
  box-shadow: 0 -6px 20px rgba(0,0,0,.1);
  padding: 12px 16px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}
.sticky-cta__btn {
  height: 54px;
  border-radius: var(--radius-md);
  font-size: 16px;
  background: rgb(255, 116, 23);
  box-shadow: 0 6px 16px rgba(255, 116, 23, 0.4);
  opacity: 1;
  transition: opacity 0.6s ease, background-color 0.15s ease;
}
.sticky-cta__btn:hover {
  opacity: 0.7;
  background: rgb(255, 116, 23);
}

/* NOTE: for the sticky bar to actually stick, no ancestor between it and the
   scrolling viewport may have `overflow: hidden/auto/scroll` (or `contain`) —
   that clips the sticky context. Keep header/main/footer siblings, not nested
   inside a clipped wrapper. This was the exact bug found in the wireframe. */

/* =========================================================
   ~640px and up: content is centered by max-width above; nothing else to do,
   this design is intentionally mobile-first single column at all sizes.
   ========================================================= */