/* =========================================================
   楽しく、気軽に参加できる感じを「色と見た目」で出す層（pop.css のあと）
   ・欄ごとに明るい色を変える（空色・ミント・黄・ピーチ・バター）
   ・手描き風のイラストを浮かべる
   ・見出しとボタンを丸ゴシックに
   ========================================================= */
:root {
  --sky: #dcf0fb;
  --peach: #ffe3d0;
  --butter: #fff3bf;
  --round: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", var(--jp);
}

/* ---------- 丸ゴシック ---------- */
.section-title, .about-statement, .closing h2, .page-hero h1, .hero-lead, .hero-status,
.btn, .sticker, .drive-title, .steps h3, .goods-item h3, .faq summary, .fee-block h3, .scorecard-head h3,
.entry-box h3, .rules h3, .local-rules h3, .venue-kind, .gnav a, .ticker-jp, .sc-label, .sc-choice span, .fee-row dt {
  font-family: var(--round);
}
.section-title, .about-statement, .closing h2, .page-hero h1 { font-weight: 800; letter-spacing: .03em; }
.hero-lead { font-weight: 800; }

/* ---------- 欄ごとの色 ---------- */
#about { background: var(--sky); }
#venue { background: var(--mist); }
#entry, #hosts {
  background-image: radial-gradient(rgba(0, 49, 31, .09) 1.7px, transparent 2px);
  background-size: 22px 22px;
}
#entry { background-color: var(--peach); }
#hosts { background-color: var(--butter); }
#goods { background: var(--sky); }
#entry .entry-box { background: var(--white); }
#about, #goods { --squiggle: var(--red); }
#hosts, #entry, #venue { --squiggle: var(--red); }

/* 第1回の記録ページ */
.page-hero + .section { background: var(--sky); --squiggle: var(--red); }
section.section-mist:has(.local-rules) { background: var(--peach); }
section.section:has(.gallery) { background: var(--butter); --squiggle: var(--red); }

/* ---------- 手描き風のイラスト ---------- */
.section, .closing, .page-hero { position: relative; overflow-x: clip; }
.section > .container, .closing > .container, .page-hero > .container { position: relative; z-index: 1; }
.doodle {
  position: absolute; z-index: 0; left: var(--x); top: var(--y);
  width: calc(var(--s) * 1px); height: calc(var(--s) * 1px); rotate: var(--r, 0deg);
  pointer-events: none; overflow: visible;
  filter: drop-shadow(3px 3px 0 rgba(0, 49, 31, .16));
}
.hero .doodle { z-index: 2; }
.has-motion .doodle { animation: bob var(--d, 5s) ease-in-out infinite; }
.has-motion .doodle--spin { animation: bob var(--d, 5s) ease-in-out infinite, turn 40s linear infinite; }
.has-motion .doodle--fly { animation: fly var(--d, 5s) ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes fly { 0%, 100% { translate: 0 0; } 25% { translate: -16px -10px; } 50% { translate: -6px -20px; } 75% { translate: 12px -7px; } }
@media (max-width: 759px) {
  .doodle { left: var(--mx, var(--x)); top: var(--my, var(--y)); width: calc(var(--ms, var(--s)) * 1px); height: calc(var(--ms, var(--s)) * 1px); }
  .doodle--pc { display: none; }
}

/* ---------- ステッカー：ゆらゆら ---------- */
.has-motion .sticker.is-in { animation: wobble 3.8s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } }
.hero-copy { position: relative; }
.sticker--hero { right: -5%; top: 9%; width: 116px; rotate: 12deg; font-size: 13px; line-height: 1.2; }
.sticker--hero small { font-size: 11px; margin-bottom: 2px; }
.sticker--hero b { display: block; font-family: var(--latin); font-size: 26px; line-height: 1; margin-top: 2px; }
.has-motion .sticker--hero { transition-delay: 1.1s; }
@media (max-width: 899px) {
  .sticker--hero { right: 2px; top: -26px; width: 86px; font-size: 11px; line-height: 1.15; }
  .sticker--hero small { font-size: 9.5px; }
  .sticker--hero b { font-size: 19px; }
}

/* ---------- 道案内：テントから旗へ、車が行ったり来たり ---------- */
.drive-road { position: relative; height: 58px; margin-top: 18px; max-width: 440px; }
.road-line { position: absolute; left: 44px; right: 44px; bottom: 7px; border-bottom: 3px dashed var(--pop); }
.road-start, .road-end { position: absolute; bottom: 0; width: 42px; height: 42px; }
.road-start { left: 0; }
.road-end { right: 0; }
.drive-car { position: absolute; left: 46px; bottom: 9px; width: 54px; height: 45px; }
.has-motion .drive-car { animation: drive 7s ease-in-out infinite, rattle .45s ease-in-out infinite; }
@keyframes drive {
  0% { left: 46px; transform: scaleX(1); }
  44% { left: calc(100% - 100px); transform: scaleX(1); }
  50% { left: calc(100% - 100px); transform: scaleX(-1); }
  94% { left: 46px; transform: scaleX(-1); }
  100% { left: 46px; transform: scaleX(1); }
}
@keyframes rattle { 50% { translate: 0 -2px; } }

/* ---------- 申し込みボタンを押すと紙吹雪 ---------- */
.confetti { position: fixed; left: 0; top: 0; z-index: 200; width: 9px; height: 13px; border-radius: 2px; pointer-events: none; }

/* ---------- 細かいところ ---------- */
.ticker-group span:nth-of-type(3n+2) { color: var(--red); }
.hero-status { font-family: var(--round); }
.fee-row dt { font-weight: 800; }
.goods-item h3, .steps h3, .drive-title { font-weight: 800; }

/* ---------- みんなのティーショット：2段で反対向きに流れる写真 ---------- */
.shots { margin-top: clamp(56px, 7vw, 88px); }
.shots-title { font-family: var(--round); font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.shots-title small { font-family: var(--jp); font-size: 13px; font-weight: 600; opacity: .75; }
.shots-row { width: 100vw; margin-left: calc(50% - 50vw); margin-top: 18px; overflow-x: auto; scrollbar-width: none; }
.shots-row::-webkit-scrollbar { display: none; }
.has-motion .shots-row { overflow: hidden; }
.shots-track { display: flex; width: max-content; }
.shots-group { display: flex; gap: 14px; padding: 10px 7px; }
.has-motion .shots-track { animation: ticker 80s linear infinite; }
.has-motion .shots-row--rev .shots-track { animation-direction: reverse; animation-duration: 90s; }
.shots-row:hover .shots-track { animation-play-state: paused; }
.has-motion .shots-group[aria-hidden="true"] { display: flex; }
.shots-group[aria-hidden="true"] { display: none; }
.shot {
  flex: none; width: clamp(132px, 14vw, 196px); aspect-ratio: 1; margin: 0; overflow: hidden;
  border-radius: 16px; border: 3px solid var(--yellow); background: #0b4a33; box-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
  transition: rotate .35s cubic-bezier(.3, 1.6, .5, 1), scale .35s cubic-bezier(.3, 1.6, .5, 1);
}
.shot:nth-child(odd) { rotate: -2deg; }
.shot:nth-child(even) { rotate: 2deg; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
@media (hover: hover) { .shot:hover { rotate: 0deg; scale: 1.07; z-index: 1; } }

/* ---------- 第1回の記録：写真をたくさん ---------- */
.gallery-sub { margin-top: clamp(48px, 6vw, 72px); margin-bottom: 18px; font-family: var(--round); font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; display: flex; align-items: baseline; gap: 12px; }
.gallery-sub small { font-family: var(--jp); font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.gallery--shots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gallery--shots .slot:nth-child(1) { grid-column: auto; grid-row: auto; --ratio: 1 / 1; aspect-ratio: 1 / 1; }
.gallery--shots .slot:nth-child(odd) { rotate: -1deg; }
.gallery--shots .slot:nth-child(even) { rotate: 1deg; }
@media (max-width: 899px) { .gallery--shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .gallery--shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
img[data-full] { cursor: zoom-in; }

/* ---------- 写真を大きく見る ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(0, 31, 20, .92); padding: 56px 16px 72px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(92vw, 900px); max-height: calc(100svh - 150px); width: auto; height: auto;
  border-radius: 18px; border: 4px solid var(--yellow); box-shadow: 8px 8px 0 rgba(0, 0, 0, .35); background: #0b4a33;
}
.has-motion .lightbox:not([hidden]) img { animation: photo-pop .35s cubic-bezier(.3, 1.4, .5, 1); }
.lightbox button {
  position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--yellow); color: var(--pop); border: 2.5px solid var(--pop); box-shadow: 3px 3px 0 var(--pop);
  font: 800 22px/1 var(--round); cursor: pointer;
}
.lightbox button:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 14px; top: 50%; margin-top: -26px; }
.lb-next { right: 14px; top: 50%; margin-top: -26px; }
.lb-count { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: var(--white); font: 600 14px/1 var(--latin); letter-spacing: .08em; }
@media (max-width: 599px) { .lb-prev, .lb-next { top: auto; bottom: 10px; margin-top: 0; } .lb-prev { left: 16px; } .lb-next { right: 16px; } }