/* =========================================================
   川辺町夏まつり お知らせ掲示 — natsumatsuri-notice
   夜紺のコルクボードに、手作りの紙の掲示物がピン留めされている構成。
   写真は使わず、提灯・櫓・金魚はすべてインラインSVG／絵文字＋CSSで手描き表現。
   ========================================================= */

:root{
  --night:#0a1626;
  --night-2:#122544;
  --night-3:#08111e;
  --paper:#f9f0d8;
  --paper-2:#f0e0b4;
  --ink:#25334c;
  --ink-soft:#5c6d88;
  --red:#e1472f;
  --orange:#ff9a3d;
  --yellow:#ffcf5c;
  --mint:#8fd9c4;
  --pink:#f0a3c0;
  --line:rgba(30,45,70,.15);
  --line-2:rgba(30,45,70,.28);
  --shadow:0 24px 48px -28px rgba(3,8,18,.6);
  --f-title:'Yusei Magic','Zen Maru Gothic',system-ui,sans-serif;
  --f-hand:'Yomogi',cursive;
  --f-body:'Zen Maru Gothic',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-weight:500;
  color:var(--paper);
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
  background:
    radial-gradient(1.6px 1.6px at 14px 12px, rgba(255,255,255,.05) 1.4px, transparent 0) 0 0/28px 28px,
    radial-gradient(1.6px 1.6px at 26px 24px, rgba(255,255,255,.035) 1.4px, transparent 0) 0 0/28px 28px,
    radial-gradient(120% 60% at 50% -6%, rgba(255,154,61,.13), transparent 62%),
    radial-gradient(90% 50% at 82% 30%, rgba(225,71,47,.08), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 46%, var(--night) 100%);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2{margin:0;font-weight:700}
ul,ol,dl{margin:0;padding:0;list-style:none}
button{font:inherit}
::selection{background:rgba(255,207,92,.35);color:#1a1206}
ruby{ruby-position:over}
rt{font-size:.5em;font-weight:700;color:var(--yellow);opacity:.9;letter-spacing:0}
.rain-notice rt, .odori-notice rt, .time-notice rt{color:var(--orange)}
.hero-notice rt{color:var(--red)}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- ロード幕 ---------- */
.ck-load{--ck-load-bg:#0a1626;--ck-load-fg:var(--yellow)}
.load-inner{display:grid;justify-items:center;gap:14px;text-align:center}
.load-lantern{width:40px;height:60px;color:var(--red);
  filter:drop-shadow(0 0 14px rgba(255,159,61,.55));
  animation:load-flicker 1.1s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){ .load-lantern{animation:none} }
@keyframes load-flicker{0%,100%{opacity:.72}50%{opacity:1}}
.load-txt{margin:0;font-family:var(--f-hand);font-size:14px;color:var(--paper-2);opacity:.85}
.ck-load .ck-load__bar{width:200px;background:rgba(255,207,92,.18)}
.ck-load .ck-load__bar>span{background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow))}

/* ---------- ヘッダー ---------- */
.board-head{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:12px 26px;
  background:rgba(10,22,38,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,207,92,.16);
  transition:background-color .25s,box-shadow .25s;
}
.board-head.is-scrolled{background:rgba(8,17,30,.92);box-shadow:0 12px 24px -18px rgba(0,0,0,.6)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.brand-lantern{width:24px;height:36px;color:var(--red);flex:none;filter:drop-shadow(0 0 8px rgba(255,159,61,.4))}
.brand-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-txt b{font-family:var(--f-title);font-size:15px;color:var(--paper);white-space:nowrap}
.brand-txt i{font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--yellow);opacity:.8}
.board-nav{display:flex;gap:22px}
.board-nav a{font-size:13.5px;font-weight:700;color:var(--paper-2);opacity:.82;padding:4px 2px;border-bottom:2px solid transparent;transition:opacity .2s,border-color .2s}
.board-nav a:hover{opacity:1;border-color:var(--orange)}
.board-date{
  flex:none;font-family:var(--f-title);font-size:12px;color:var(--night);
  background:var(--yellow);border-radius:8px;padding:6px 11px;
  transform:rotate(-3deg);box-shadow:0 6px 14px -8px rgba(0,0,0,.5);
}
.board-date b{font-size:15px;margin-right:2px}

/* ---------- 提灯のライン ---------- */
.lantern-line{
  display:flex;justify-content:center;gap:5.4vw;
  padding:22px 20px 6px;
  border-top:1px dashed rgba(255,207,92,.22);
  margin-top:2px;
}
.lantern-line svg{width:30px;height:44px;flex:none}
.lantern-line svg:nth-child(7n+1){color:var(--red)}
.lantern-line svg:nth-child(7n+2){color:var(--orange)}
.lantern-line svg:nth-child(7n+3){color:var(--yellow)}
.lantern-line svg:nth-child(7n+4){color:var(--red)}
.lantern-line svg:nth-child(7n+5){color:var(--orange)}
.lantern-line svg:nth-child(7n+6){color:var(--yellow)}
.lantern-line svg:nth-child(7n+7){color:var(--orange)}
.lantern-line svg{
  filter:drop-shadow(0 0 9px currentColor);
  transform-origin:50% -6px;
  animation:lantern-sway 3.4s ease-in-out infinite;
}
.lantern-line svg:nth-child(odd){animation-duration:3.9s;animation-delay:-.6s}
.lantern-line svg:nth-child(3n){animation-duration:3.1s;animation-delay:-1.4s}
@keyframes lantern-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){ .lantern-line svg{animation:none} }

/* ---------- 掲示物カード（共通の紙） ---------- */
.notice{
  position:relative;
  max-width:1100px;
  margin:56px auto;
  padding:52px 54px 48px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.03), transparent 8%),
    var(--paper);
  color:var(--ink);
  border-radius:10px;
  box-shadow:var(--shadow);
}
.notice:nth-of-type(odd){transform:rotate(-.35deg)}
.notice:nth-of-type(even){transform:rotate(.3deg)}
.notice-head{max-width:640px;margin-bottom:30px}
.sec-en{font-family:var(--f-hand);font-size:13px;letter-spacing:.16em;color:var(--red);margin:0 0 6px;opacity:.85}
.sec-h{font-family:var(--f-title);font-size:clamp(22px,2.6vw,30px);color:var(--ink);line-height:1.4}
.sec-note{margin:10px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.8}

/* マスキングテープ */
.tape{position:absolute;width:112px;height:32px;opacity:.78;mix-blend-mode:multiply;
  clip-path:polygon(4% 0%,7% 32%,3% 58%,6% 100%,94% 100%,97% 66%,93% 40%,96% 0%);
  box-shadow:0 3px 8px -4px rgba(0,0,0,.35);
}
.tape-mint{background:repeating-linear-gradient(115deg,var(--mint) 0 8px,#ffffff00 8px 9px),var(--mint)}
.tape-pink{background:repeating-linear-gradient(115deg,var(--pink) 0 8px,#ffffff00 8px 9px),var(--pink)}
.tape-yellow{background:repeating-linear-gradient(115deg,var(--yellow) 0 8px,#ffffff00 8px 9px),var(--yellow)}
.tape-a{top:-14px;left:56px;transform:rotate(-9deg)}
.tape-b{top:-12px;right:70px;transform:rotate(7deg)}

/* 画鋲 */
.pin{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ffdfa0, var(--red) 62%, #8f2413 100%);
  box-shadow:0 5px 9px -3px rgba(0,0,0,.55), inset 0 -2px 2px rgba(0,0,0,.25);
}

/* ---------- 1. 表紙のお知らせ ---------- */
.hero-notice{padding-top:64px}
.stamp{
  position:absolute;top:26px;right:34px;width:126px;height:126px;
  color:var(--red);opacity:.82;mix-blend-mode:multiply;
  transform:rotate(-10deg);
}
.hero-top{max-width:660px}
.kicker{font-family:var(--f-hand);font-size:14.5px;color:var(--red);margin:0 0 10px;letter-spacing:.02em}
.hero-h{font-family:var(--f-title);line-height:1.32;font-size:clamp(30px,4.6vw,50px);color:var(--ink)}
.mprint{
  display:inline-block;
  text-shadow:-2.4px 1.6px 0 rgba(225,71,47,.5), 2.4px -1.6px 0 rgba(44,150,150,.42);
}
.mprint-lg{font-size:1.06em}
.hero-lead{max-width:520px;margin:16px 0 0;font-size:15.5px;color:var(--ink-soft);line-height:1.85}

.quick-facts{
  margin-top:34px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.qf{
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;
  padding:16px 16px 15px;border:1.5px solid var(--line-2);border-radius:10px;
  background:rgba(255,255,255,.4);
}
.qf:nth-child(1){border-left:5px solid var(--red)}
.qf:nth-child(2){border-left:5px solid var(--orange)}
.qf:nth-child(3){border-left:5px solid var(--yellow)}
.qf-ico{grid-row:1/3;font-size:22px;line-height:1;align-self:center}
.qf dt{font-size:11.5px;color:var(--ink-soft);letter-spacing:.06em;font-weight:700}
.qf dd{margin:0;font-size:14.5px;font-weight:700;display:flex;flex-direction:column;gap:3px}
.qf dd i{font-style:normal;font-weight:500;font-size:11.5px;color:var(--ink-soft)}

.hero-art{position:absolute;right:44px;bottom:18px;width:150px;pointer-events:none;opacity:.9}
.art-yagura{width:100%;color:var(--ink);opacity:.16}
.art-kingyo{position:absolute;left:-58px;bottom:16px;width:52px;color:var(--orange);opacity:.85;
  animation:kingyo-drift 5.5s ease-in-out infinite;}
@keyframes kingyo-drift{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(-6px,-9px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){ .art-kingyo{animation:none} }

/* ---------- 2. 出店・屋台 ---------- */
.stall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stall{
  position:relative;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  align-items:center;gap:3px 12px;
  padding:15px 16px;border-radius:10px;
  background:linear-gradient(180deg,#fffdf5,var(--paper-2));
  border:1px solid var(--line-2);
  box-shadow:0 10px 20px -16px rgba(20,20,10,.4);
  transition:transform .25s var(--ck-ease-out,ease),box-shadow .25s;
}
.stall:hover{transform:translateY(-3px);box-shadow:0 16px 26px -16px rgba(20,20,10,.45)}
.stall-ico{grid-row:1/3;font-size:26px;line-height:1}
.stall-ico-svg{grid-row:1/3;width:38px;height:auto;color:var(--orange)}
.stall b{grid-column:2;font-size:15px;color:var(--ink)}
.stall-t{grid-column:2;font-size:11.5px;color:var(--ink-soft)}
.stall-p{grid-column:3;grid-row:1/3;font-style:normal;font-weight:800;font-size:13px;color:var(--red);white-space:nowrap;align-self:center}
.stall-free .stall-p{color:#2f8f5c}
.stall-fish{background:linear-gradient(180deg,#fffdf5,#e9f4ec)}

/* ---------- 3. 盆踊り ---------- */
.odori-grid{display:grid;grid-template-columns:.86fr 1fr;gap:44px;align-items:center}
.odori-art{position:relative;aspect-ratio:1/1;display:grid;place-items:center;color:var(--ink)}
.art-yagura-2{position:relative;z-index:2;width:46%;color:var(--red);filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.odori-ring{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);opacity:.28;
  animation:ring-spin 42s linear infinite;}
@keyframes ring-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .odori-ring{animation:none} }
.song-list{margin-top:18px;display:grid;gap:10px}
.song-list li{
  display:grid;grid-template-columns:56px 1fr;gap:2px 14px;align-items:baseline;
  padding:10px 4px 10px 14px;border-left:3px solid var(--orange);
}
.song-list b{font-size:13px;color:var(--red);font-weight:800}
.song-list span{grid-column:2;font-size:15px;font-weight:700;color:var(--ink)}
.song-list i{grid-column:2;font-style:normal;font-size:12px;color:var(--ink-soft)}

/* ---------- 4. タイムテーブル + フィナーレ花火 ---------- */
.time-track{position:relative;padding-left:64px}
.time-track::before{
  content:"";position:absolute;left:20px;top:6px;bottom:6px;width:2px;
  background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 12px);
}
.time-marker{
  position:absolute;left:-1px;top:0;width:34px;height:50px;
  color:var(--red);filter:drop-shadow(0 0 8px rgba(225,71,47,.55));
  transition:top .12s linear;
  will-change:top;
}
.time-list{display:grid;gap:6px}
.time-list li{
  display:grid;grid-template-columns:64px 1fr;gap:3px 16px;align-items:baseline;
  padding:11px 14px;border-radius:8px;
}
.time-list li b{font-size:13.5px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}
.time-list li span{grid-column:2;font-size:15px;font-weight:700;color:var(--ink)}
.time-list li i{grid-column:2;font-style:normal;font-size:12px;color:var(--ink-soft)}
.time-hi{background:rgba(255,207,92,.28);border:1px dashed rgba(225,71,47,.35)}
.time-fin span{color:var(--red)}

.finale{margin-top:26px;position:relative;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#0a1626,#132a44);
  border:1px solid rgba(255,207,92,.2);
}
.finale-cv{display:block;width:100%;height:180px}
.finale-cap{margin:0;padding:9px 14px 12px;font-size:11px;color:var(--paper-2);opacity:.7;font-family:var(--f-hand);letter-spacing:.04em}

/* ---------- 5. 雨天対応 ---------- */
.rain-notice{padding-top:60px}
.stamp-mini{
  position:absolute;top:-18px;right:44px;width:118px;height:96px;
  display:grid;place-items:center;text-align:center;
  font-family:var(--f-title);font-size:13px;line-height:1.5;color:var(--red);
  border:2.5px dashed rgba(225,71,47,.65);border-radius:50%/46%;
  transform:rotate(7deg);background:rgba(255,255,255,.5);mix-blend-mode:multiply;
}
.rain-list{display:grid;gap:12px;margin-top:6px}
.rain-list li{
  display:grid;grid-template-columns:150px 1fr;gap:4px 18px;
  padding:14px 16px;border-radius:10px;background:rgba(255,255,255,.4);border:1px solid var(--line);
}
.rain-list li b{font-size:14px;color:var(--ink);font-weight:800}
.rain-list li span{font-size:14px;color:var(--ink-soft);line-height:1.8}
.rain-list .ok{color:#2f8f5c}
.rain-list .ng{color:var(--red)}

/* ---------- 連絡先（フッター） ---------- */
.board-foot{
  max-width:1100px;margin:0 auto;padding:44px 54px 70px;
}
.foot-call{font-family:var(--f-hand);font-size:16px;color:var(--yellow);margin:0 0 20px}
.foot-tbl{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px;padding:22px 0;border-top:1px dashed rgba(255,207,92,.25);border-bottom:1px dashed rgba(255,207,92,.25)}
.foot-tbl div{display:flex;gap:14px;font-size:13.5px}
.foot-tbl dt{flex:none;width:78px;color:var(--yellow);font-weight:700;opacity:.85}
.foot-tbl dd{margin:0;color:var(--paper-2)}
.foot-disc{margin:22px 0 0;font-size:11.5px;line-height:1.9;color:var(--paper-2);opacity:.62;max-width:820px}
.foot-c{margin:14px 0 0;font-size:11px;color:var(--paper-2);opacity:.45}

/* ---------- レスポンシブ ---------- */
@media (max-width:960px){
  .notice{padding:40px 30px 36px;margin:40px 16px}
  .quick-facts{grid-template-columns:1fr}
  .stall-grid{grid-template-columns:repeat(2,1fr)}
  .odori-grid{grid-template-columns:1fr;gap:26px}
  .odori-art{max-width:280px;margin:0 auto}
  .hero-art{display:none}
  .board-nav{display:none}
  .rain-list li{grid-template-columns:1fr}
  .stamp{width:92px;height:92px;top:8px;right:14px}
  .hero-top{padding-right:98px}
  .stamp-mini{width:96px;height:80px;font-size:11px;top:-14px;right:26px}
}
@media (max-width:600px){
  .board-head{padding:10px 16px;gap:10px}
  .brand-txt i{display:none}
  .lantern-line{gap:4vw;padding:16px 10px 4px}
  .lantern-line svg{width:22px;height:32px}
  .stall-grid{grid-template-columns:1fr 1fr}
  .foot-tbl{grid-template-columns:1fr}
  .board-foot{padding:36px 22px 56px}
  .sec-h{font-size:20px}
}
@media (max-width:420px){
  .stall-grid{grid-template-columns:1fr}
}

/* 短い画面（高さ制約）ではロード幕/装飾を軽く */
@media (max-height:680px){
  .lantern-line{padding:14px 20px 2px}
  .lantern-line svg{width:24px;height:36px}
  .hero-art{opacity:.6}
}

/* ---------- pointer:coarse ---------- */
@media (pointer:coarse){
  .stall:hover{transform:none}
}

/* ---------- reduced-motion 全体保険 ---------- */
@media (prefers-reduced-motion:reduce){
  .notice{transform:none}
}