/* =========================================================
   ポップにする層（style.css・motion.css のあとに読む）
   ロゴの「黄色い地図に濃い緑の影をずらす」形を、ボタン・カード・ステッカーの共通の記号にする
   ========================================================= */
:root {
  --mist: #e4f1e6;
  --pop: var(--green-night);
  --pop-shadow: 5px 5px 0 var(--pop);
  --r-card: 18px;
}

/* ---------- ボタン：まるく、影をずらす。押すと沈む ---------- */
.btn {
  border-radius: 999px; border: 2.5px solid var(--pop); box-shadow: 4px 4px 0 var(--pop); font-weight: 700;
  transition: background-color .2s, color .2s, translate .35s cubic-bezier(.2, .7, .2, 1), transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pop); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pop); }
.btn-small { box-shadow: 3px 3px 0 var(--pop); border-width: 2px; }
.btn-small:hover { box-shadow: 4px 4px 0 var(--pop); }

/* ---------- 見出し：太く、下に黄色の波線 ---------- */
.section-title, .about-statement { font-weight: 800; letter-spacing: .02em; }
.section-title::after {
  content: ""; display: block; width: 104px; height: 14px; margin-top: 16px;
  background: var(--squiggle, var(--yellow));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 14'%3E%3Cpath d='M3 8 Q 11 1 19 8 T 35 8 T 51 8 T 67 8 T 83 8 T 101 7' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 14'%3E%3Cpath d='M3 8 Q 11 1 19 8 T 35 8 T 51 8 T 67 8 T 83 8 T 101 7' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
  transform-origin: left center;
}
.has-motion .section-title::after { scale: 0 1; transition: scale .9s .35s cubic-bezier(.65, 0, .25, 1); }
.has-motion .section-title.is-in::after { scale: 1 1; }
.section-green, #fee { --squiggle: var(--red); }
.section-green { --squiggle: var(--yellow); }

/* ---------- 写真：まるい角と、くっきりしたふち ---------- */
:is(.about-photos, .venue-media, .first-photos, .gallery, .goods, .archive-champions, .page-hero) .slot {
  border-radius: var(--r-card); border: 3px solid var(--slot-line, var(--pop));
}
.section-green, .page-hero { --slot-line: var(--yellow); }
.drive-map { border-radius: var(--r-card); border: 3px solid var(--pop); }
.venue-map { border-radius: var(--r-card); border: 2.5px solid var(--pop); }
.video { border-radius: var(--r-card); border: 3px solid var(--yellow); overflow: hidden; }

/* ---------- ステッカー ---------- */
.sticker {
  position: absolute; z-index: 3; display: grid; place-content: center; text-align: center;
  width: 112px; aspect-ratio: 1; border-radius: 50%;
  background: var(--red); color: var(--white); border: 2.5px solid var(--pop); box-shadow: 3px 3px 0 var(--pop);
  font-weight: 800; font-size: 15px; line-height: 1.25; letter-spacing: .02em; rotate: -10deg;
  pointer-events: none;
}
.sticker small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.sticker .num { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; }
.sticker--yellow { background: var(--yellow); color: var(--pop); }
.has-motion .sticker:not(.is-in) { scale: 0; }
.has-motion .sticker { transition: scale .6s .35s cubic-bezier(.3, 1.7, .5, 1); }
.about-photos, .venue-media, .fee-grid { position: relative; }
.sticker--about { left: -18px; top: -26px; }
.sticker--about .num { font-size: 18px; }
.venue-media .sticker { right: -14px; top: -22px; rotate: 9deg; width: 96px; }
.venue--flip .venue-media .sticker { right: auto; left: -14px; rotate: -9deg; }
.sticker--fee { right: -10px; top: -44px; rotate: 10deg; width: 124px; }
@media (max-width: 899px) {
  .sticker { width: 92px; font-size: 13px; }
  .sticker .num { font-size: 19px; }
  .sticker--about { left: -6px; top: -20px; }
  .venue-media .sticker { right: -4px; }
  .venue--flip .venue-media .sticker { left: -4px; }
  .sticker--fee { right: -4px; top: auto; bottom: -30px; width: 104px; }
}

/* ---------- トップ ---------- */
.hero-status { background: var(--yellow); color: var(--pop); border: 2px solid var(--pop); box-shadow: 3px 3px 0 var(--pop); rotate: -3deg; font-weight: 800; }
.hero-status::before { background: var(--red); }
.has-motion .hero-status::before { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.hero-facts { border-top: 0; gap: 14px; }
.hero-facts > div, .hero-facts > div + div {
  padding: 18px 22px 20px; border: 2px dashed rgba(255, 255, 255, .5); border-radius: var(--r-card);
  background: rgba(0, 49, 31, .35);
}
@media (max-width: 899px) { .hero-facts > div + div { border-top: 2px dashed rgba(255, 255, 255, .5); } }

/* ---------- 会場 ---------- */
.venue-kind { border-radius: 999px; padding: 4px 14px; border: 2px solid var(--pop); box-shadow: 2px 2px 0 var(--pop); font-weight: 800; }

/* ---------- 参加費：黄色い面にする ---------- */
#fee { background: var(--yellow); color: var(--pop); }
#fee .section-lead, #fee .fee-row dd, #fee .fee-foot { color: rgba(0, 49, 31, .78); }
#fee .fee-block h3 { border-bottom-color: var(--pop); }
#fee .fee-row { border-bottom-color: rgba(0, 49, 31, .2); }
#fee .fee-row .price { color: var(--pop); }
.scorecard { border: 2.5px solid var(--pop); border-radius: var(--r-card); box-shadow: 8px 8px 0 var(--pop); }
.scorecard-head { background: var(--green); }
.sc-choice { border-radius: 999px; border-width: 2px; }
.stepper { border-radius: 999px; border: 2px solid var(--line); }

/* ---------- 申し込みの流れ：番号をまるいメダルに ---------- */
.steps li::before {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--yellow); color: var(--pop); border: 2.5px solid var(--pop); box-shadow: 3px 3px 0 var(--pop);
  font-size: 30px; font-weight: 700;
}
.has-motion .steps li::before { transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1); }
@media (hover: hover) { .steps li:hover::before { rotate: -12deg; } }
.entry-box { background: var(--white); border: 2.5px solid var(--pop); border-radius: var(--r-card); box-shadow: var(--pop-shadow); }
.entry-fields li { border: 2px solid var(--line); font-weight: 600; }

/* ---------- 注意事項・ローカルルール ---------- */
.rules li, .local-rules li { border-top: 2px dotted rgba(0, 49, 31, .3); }
.local-rules li::before {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--yellow); color: var(--pop); border: 2px solid var(--pop); font-size: 20px; font-weight: 700;
}

/* ---------- 第1回（緑）：上下を波の形に ---------- */
section.section-green { position: relative; }
section.section-green::before, section.section-green::after, .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; height: 22px; z-index: 2; pointer-events: none;
  background: var(--green-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 22'%3E%3Cpath d='M0 22V11Q22 0 44 11T88 11V22Z'/%3E%3C/svg%3E") 0 0 / 88px 22px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 22'%3E%3Cpath d='M0 22V11Q22 0 44 11T88 11V22Z'/%3E%3C/svg%3E") 0 0 / 88px 22px repeat-x;
}
section.section-green::before { top: -21px; }
section.section-green::after { bottom: -21px; scale: 1 -1; }
.site-footer { position: relative; }
.site-footer::before { top: -21px; background: var(--green-night); }
.tag { border-radius: 14px; border: 2px solid var(--yellow); outline: 0; box-shadow: 4px 4px 0 var(--yellow); }
.champions .tag:nth-child(1) { rotate: -1.2deg; }
.champions .tag:nth-child(2) { rotate: 1deg; }

/* ---------- 主催：まるいカードを並べる ---------- */
.hosts { border: 0; gap: 14px; }
.host { border: 2.5px solid var(--pop); border-radius: var(--r-card); background: var(--white); min-height: 180px;
  transition: background-color .35s, transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s; }
@media (hover: hover) { .host:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: var(--pop-shadow); } }

/* ---------- グッズ ---------- */
.goods-item h3 { font-weight: 800; }

/* ---------- よくある質問：Q のメダル ---------- */
.faq { border-top: 2.5px solid var(--pop); }
.faq summary { grid-template-columns: 36px 1fr 24px; }
.faq summary::before {
  content: "Q"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--yellow); color: var(--pop); border: 2px solid var(--pop);
  font-family: var(--latin); font-weight: 700; font-size: 18px; line-height: 1;
}
.faq details p { padding-left: 52px; }

/* ---------- 最後 ---------- */
.closing h2 { font-weight: 800; }