/* ==========================
   TOKENS / RESET
========================== */
:root {
  --navy: #16243f;
  --navy-deep: #0a1426;
  --gold: #d4af37;
  --gold-dk: #a67c00;
  --gold-lt: #f3dc8a;
  --cream: #f7f4ec;
  --text: #333;
  --red: #e5432a;
  --orange: #f26a3a;
  --line: #06c755;
  --asanoha: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2251.96%22%20height%3D%2290.00%22%20viewBox%3D%220%200%2051.96%2090.00%22%3E%3Cpath%20d%3D%22M26.0%2030.0L26.0%200.0M26.0%200.0L52.0%2015.0M34.6%2015.0L26.0%2030.0M34.6%2015.0L26.0%200.0M34.6%2015.0L52.0%2015.0M26.0%2030.0L52.0%2015.0M52.0%2015.0L52.0%2045.0M43.3%2030.0L26.0%2030.0M43.3%2030.0L52.0%2015.0M43.3%2030.0L52.0%2045.0M26.0%2030.0L52.0%2045.0M52.0%2045.0L26.0%2060.0M34.6%2045.0L26.0%2030.0M34.6%2045.0L52.0%2045.0M34.6%2045.0L26.0%2060.0M26.0%2030.0L26.0%2060.0M26.0%2060.0L-0.0%2045.0M17.3%2045.0L26.0%2030.0M17.3%2045.0L26.0%2060.0M17.3%2045.0L-0.0%2045.0M26.0%2030.0L-0.0%2045.0M-0.0%2045.0L0.0%2015.0M8.7%2030.0L26.0%2030.0M8.7%2030.0L-0.0%2045.0M8.7%2030.0L0.0%2015.0M26.0%2030.0L0.0%2015.0M0.0%2015.0L26.0%200.0M17.3%2015.0L26.0%2030.0M17.3%2015.0L0.0%2015.0M17.3%2015.0L26.0%200.0M0.0%2075.0L0.0%2045.0M0.0%2045.0L26.0%2060.0M8.7%2060.0L0.0%2075.0M8.7%2060.0L0.0%2045.0M8.7%2060.0L26.0%2060.0M0.0%2075.0L26.0%2060.0M26.0%2060.0L26.0%2090.0M17.3%2075.0L0.0%2075.0M17.3%2075.0L26.0%2060.0M17.3%2075.0L26.0%2090.0M0.0%2075.0L26.0%2090.0M26.0%2090.0L0.0%20105.0M8.7%2090.0L0.0%2075.0M8.7%2090.0L26.0%2090.0M8.7%2090.0L0.0%20105.0M0.0%2075.0L0.0%20105.0M0.0%20105.0L-26.0%2090.0M-8.7%2090.0L0.0%2075.0M-8.7%2090.0L0.0%20105.0M-8.7%2090.0L-26.0%2090.0M0.0%2075.0L-26.0%2090.0M-26.0%2090.0L-26.0%2060.0M-17.3%2075.0L0.0%2075.0M-17.3%2075.0L-26.0%2090.0M-17.3%2075.0L-26.0%2060.0M0.0%2075.0L-26.0%2060.0M-26.0%2060.0L0.0%2045.0M-8.7%2060.0L0.0%2075.0M-8.7%2060.0L-26.0%2060.0M-8.7%2060.0L0.0%2045.0M52.0%2075.0L52.0%2045.0M52.0%2045.0L77.9%2060.0M60.6%2060.0L52.0%2075.0M60.6%2060.0L52.0%2045.0M60.6%2060.0L77.9%2060.0M52.0%2075.0L77.9%2060.0M77.9%2060.0L77.9%2090.0M69.3%2075.0L52.0%2075.0M69.3%2075.0L77.9%2060.0M69.3%2075.0L77.9%2090.0M52.0%2075.0L77.9%2090.0M77.9%2090.0L52.0%20105.0M60.6%2090.0L52.0%2075.0M60.6%2090.0L77.9%2090.0M60.6%2090.0L52.0%20105.0M52.0%2075.0L52.0%20105.0M52.0%20105.0L26.0%2090.0M43.3%2090.0L52.0%2075.0M43.3%2090.0L52.0%20105.0M43.3%2090.0L26.0%2090.0M52.0%2075.0L26.0%2090.0M26.0%2090.0L26.0%2060.0M34.6%2075.0L52.0%2075.0M34.6%2075.0L26.0%2090.0M34.6%2075.0L26.0%2060.0M52.0%2075.0L26.0%2060.0M26.0%2060.0L52.0%2045.0M43.3%2060.0L52.0%2075.0M43.3%2060.0L26.0%2060.0M43.3%2060.0L52.0%2045.0M0.0%20-15.0L0.0%20-45.0M0.0%20-45.0L26.0%20-30.0M8.7%20-30.0L0.0%20-15.0M8.7%20-30.0L0.0%20-45.0M8.7%20-30.0L26.0%20-30.0M0.0%20-15.0L26.0%20-30.0M26.0%20-30.0L26.0%20-0.0M17.3%20-15.0L0.0%20-15.0M17.3%20-15.0L26.0%20-30.0M17.3%20-15.0L26.0%20-0.0M0.0%20-15.0L26.0%20-0.0M26.0%20-0.0L0.0%2015.0M8.7%20-0.0L0.0%20-15.0M8.7%20-0.0L26.0%20-0.0M8.7%20-0.0L0.0%2015.0M0.0%20-15.0L0.0%2015.0M0.0%2015.0L-26.0%20-0.0M-8.7%20-0.0L0.0%20-15.0M-8.7%20-0.0L0.0%2015.0M-8.7%20-0.0L-26.0%20-0.0M0.0%20-15.0L-26.0%20-0.0M-26.0%20-0.0L-26.0%20-30.0M-17.3%20-15.0L0.0%20-15.0M-17.3%20-15.0L-26.0%20-0.0M-17.3%20-15.0L-26.0%20-30.0M0.0%20-15.0L-26.0%20-30.0M-26.0%20-30.0L0.0%20-45.0M-8.7%20-30.0L0.0%20-15.0M-8.7%20-30.0L-26.0%20-30.0M-8.7%20-30.0L0.0%20-45.0M52.0%20-15.0L52.0%20-45.0M52.0%20-45.0L77.9%20-30.0M60.6%20-30.0L52.0%20-15.0M60.6%20-30.0L52.0%20-45.0M60.6%20-30.0L77.9%20-30.0M52.0%20-15.0L77.9%20-30.0M77.9%20-30.0L77.9%20-0.0M69.3%20-15.0L52.0%20-15.0M69.3%20-15.0L77.9%20-30.0M69.3%20-15.0L77.9%20-0.0M52.0%20-15.0L77.9%20-0.0M77.9%20-0.0L52.0%2015.0M60.6%20-0.0L52.0%20-15.0M60.6%20-0.0L77.9%20-0.0M60.6%20-0.0L52.0%2015.0M52.0%20-15.0L52.0%2015.0M52.0%2015.0L26.0%20-0.0M43.3%20-0.0L52.0%20-15.0M43.3%20-0.0L52.0%2015.0M43.3%20-0.0L26.0%20-0.0M52.0%20-15.0L26.0%20-0.0M26.0%20-0.0L26.0%20-30.0M34.6%20-15.0L52.0%20-15.0M34.6%20-15.0L26.0%20-0.0M34.6%20-15.0L26.0%20-30.0M52.0%20-15.0L26.0%20-30.0M26.0%20-30.0L52.0%20-45.0M43.3%20-30.0L52.0%20-15.0M43.3%20-30.0L26.0%20-30.0M43.3%20-30.0L52.0%20-45.0%22%20fill%3D%22none%22%20stroke%3D%22%23b8901f%22%20stroke-width%3D%221.3%22%20stroke-opacity%3D%22.75%22%2F%3E%3C%2Fsvg%3E");
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--text);
  background: #0b0f16;
  line-height: 1.6;
  font-feature-settings: "palt";
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ol, ul { list-style: none; }

.container {
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 0 40px rgba(0, 0, 0, .5);
}

/* 見出し用 SVG テキスト */
.svg-ttl { width: 100%; height: auto; overflow: visible; }
.svg-ttl text {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 900;
  font-feature-settings: "palt";
}

/* ==========================
   FADE-UP
========================== */
.fade-up {
  opacity: 0;
  transform: translate(var(--tx, 0), 40px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.fade-up.is-inview { opacity: 1; transform: translate(var(--tx, 0), 0); }

/* ==========================
   FIRST VIEW（画像 + パーティクル）
========================== */
.fv { position: relative; background: #0a1426; }
.fv > img { width: 100%; height: auto; }
.fv__sparkle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ==========================
   SECTION 01（画像）
========================== */
.sec01 { background: var(--cream); }
.sec01 > img { width: 100%; height: auto; }

/* ==========================
   CTA（画像 + ボタン重ね）
========================== */
.cta { position: relative; background: #1a1412; }
.cta > img { width: 100%; height: auto; }
.btn { position: absolute; left: 6%; right: 6%; bottom: 7%; }
.btn-line {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 1.5cqw;
  height: 17cqw;
  border-radius: 100vmax;
  background: linear-gradient(180deg, #9aeb84 0%, #3ccd6d 50%, #14b955 100%);
  color: #fff;
  font-weight: 900;
  font-size: 6.4cqw;
  letter-spacing: .06em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow: 0 .9cqw 0 #0f8f44, 0 1.6cqw 3cqw rgba(0, 0, 0, .45), inset 0 1.2cqw 1.8cqw rgba(255, 255, 255, .4);
}
.btn-line .en { letter-spacing: .02em; }
.btn-line .arrow {
  width: 6cqw; height: 6cqw;
  border-radius: 50%;
  background: #fff;
  position: relative;
  flex: none;
  margin-left: 2.5cqw;
}
.btn-line .arrow::after {
  content: "";
  position: absolute; left: 56%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 2.3cqw solid #1fbd5c;
  border-top: 1.4cqw solid transparent;
  border-bottom: 1.4cqw solid transparent;
}
.shake-x { animation: shake-x .6s ease-in-out infinite; }
@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute;
  width: 2.2cqw; height: 2.2cqw;
  background: linear-gradient(135deg, #f8e58a, #c9971c);
  border-radius: .3cqw;
  opacity: .7;
}
.confetti i:nth-child(1)  { top: 2%;  left: 6%;  transform: rotate(15deg); }
.confetti i:nth-child(2)  { top: 5%;  left: 14%; transform: rotate(40deg) scale(.8); }
.confetti i:nth-child(3)  { top: 1%;  left: 88%; transform: rotate(-20deg); }
.confetti i:nth-child(4)  { top: 6%;  left: 94%; transform: rotate(60deg) scale(1.2); }
.confetti i:nth-child(5)  { top: 20%; left: 3%;  transform: rotate(10deg) scale(.7); }
.confetti i:nth-child(6)  { top: 24%; left: 96%; transform: rotate(-35deg); }
.confetti i:nth-child(7)  { top: 40%; left: 2%;  transform: rotate(25deg) scale(.6); }
.confetti i:nth-child(8)  { top: 46%; left: 95%; transform: rotate(-10deg) scale(.9); }
.confetti i:nth-child(9)  { top: 60%; left: 4%;  transform: rotate(30deg); }
.confetti i:nth-child(10) { top: 66%; left: 97%; transform: rotate(-50deg) scale(.8); }
.confetti i:nth-child(11) { top: 80%; left: 3%;  transform: rotate(5deg) scale(.7); }
.confetti i:nth-child(12) { top: 86%; left: 94%; transform: rotate(45deg) scale(1.1); }
.confetti i:nth-child(13) { top: 96%; left: 40%; transform: rotate(-25deg) scale(.6); }
.confetti i:nth-child(14) { top: 97%; left: 70%; transform: rotate(70deg) scale(.9); }

/* ==========================
   VOICE
========================== */
.voice {
  position: relative;
  background: #fbf8f1;
  padding: 9cqw 4cqw 8cqw;
  overflow: hidden;
}
.voice::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .018) 0 2px, transparent 2px 6px);
  pointer-events: none;
}
.voice__ttl { position: relative; width: 66%; margin: 0 auto 7cqw; }
.voice__ttl::after {
  content: ""; display: block;
  height: .5cqw; margin: 1.2cqw auto 0;
  background: linear-gradient(90deg, transparent, var(--navy) 15%, var(--navy) 85%, transparent);
}
.vcard {
  position: relative;
  margin: 0 auto 5.5cqw;
  background: #fff;
  border-radius: .8cqw;
  box-shadow: 0 .6cqw 1.8cqw rgba(0, 0, 0, .09);
  overflow: hidden;
}
.vcard__head {
  position: relative;
  display: flex; align-items: center;
  min-height: 17cqw;
  padding: 3cqw 3cqw 3cqw 26cqw;
  isolation: isolate;
  background: linear-gradient(90deg, #b28c2a 0%, #d8b657 35%, #f1dc93 65%, #cba641 100%);
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 4.5cqw;
  white-space: nowrap;
  letter-spacing: .06em;
  text-shadow: 0 1px 3px rgba(80, 50, 0, .5);
}
.vcard__head::after {
  content: attr(data-no);
  position: absolute; right: 2.5cqw; top: 1.2cqw;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 2.8cqw;
  line-height: 1;
  color: rgba(255, 255, 255, .75);
  letter-spacing: .14em;
  pointer-events: none;
}
.vcard__avatar {
  position: absolute; left: 4.5cqw; top: 50%;
  transform: translateY(-50%);
  width: 16.5cqw; height: 16.5cqw;
  border-radius: 50%;
  border: .5cqw solid #fff;
  overflow: hidden;
  box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .25);
  background: #dcd6c8;
}
.vcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vcard__body {
  position: relative;
  padding: 5.5cqw 5cqw;
  font-size: 3.9cqw;
  line-height: 1.95;
  letter-spacing: .02em;
  font-weight: 500;
  color: #333;
}
.vcard__body::before {
  content: ""; position: absolute; inset: 2cqw;
  border: 1px solid #e4cf8a;
  border-radius: .3cqw;
  pointer-events: none;
}

/* ==========================
   CAMPAIGN（画像 + ティッカー重ね）
========================== */
.cam { position: relative; background: #b07a24; }
.cam > img { width: 100%; height: auto; }
.winner-bannerw { position: absolute; left: 0; right: 0; bottom: 7%; }
.winner-banner {
  position: relative;
  background: rgba(255, 255, 255, .88);
  border: 1px solid #f5e05c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  border-radius: 6px;
  width: 88%;
  margin: 0 auto;
  overflow: hidden;
  height: 250px;
}
.winner-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
  pointer-events: none;
}
.winner-list { display: flex; flex-direction: column; transition: transform .6s ease; }
.winner-item {
  height: 28px; line-height: 28px;
  padding: 0 15px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; font-size: 15px; color: #333;
}
.winner-item::before { content: "\2605"; color: #d4a417; margin-right: .4em; }
@container (min-width: 600px) {
  .winner-banner { height: 400px; }
  .winner-item { height: 40px; line-height: 40px; font-size: 22px; padding: 0 24px; }
}

/* ==========================
   FOOTER
========================== */
footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 15px 0;
  font-size: 10px;
  letter-spacing: .05em;
}

@media (prefers-reduced-motion: reduce) {
  .shake-x { animation: none; }
  .fade-up { opacity: 1; transform: translate(var(--tx, 0), 0); transition: none; }
}
