/* マッチのカラフルポップ（共通）
   原本は yoake/1023.html の <style>（しのさんのパネル・リッチメニューの世界観）。2026-09-29 に取り出した。
   1023.html はそのまま（本番のイベントページなので触らない）。新しいカラフルなページはこのファイルを読む */
/* 10/23「本当にありがとう！大好き感謝フェス」── タイプ1：ポップ＆キュート
   しのさんの観音開きパネル（黄色の集中線・旗・花・虹の本棚・ピンクの雲・極太の丸ゴシックに白と橙の縁取り）と、
   しのさんのリッチメニュー（水玉・白いカードに色の影・黄色のギザギザ札）、パステルの風船とデイジーに寄せる */
:root{
  --cream:#FFFBF2; --ink:#2F2533; --ink2:#6E5B78; --line:#F2E4EB;
  --pink:#F2789F; --rose:#EE5A96; --rose-d:#C23F78; --pink2:#FFD6E4;
  --lav:#C8B5F0; --lav2:#F1EAFF; --purple:#A77BE8; --mint:#7ED6B6; --mint2:#DDF6EC; --sky:#7CCBF0; --sky2:#E1F4FD;
  --yel:#FFE45A; --yel2:#FFF7CC; --mus:#E9B93A; --orange:#FF9E4F; --orange-d:#F08A2E; --green:#9FD65A;
  --pop:"M PLUS Rounded 1c","Zen Maru Gothic",sans-serif;
  --maru:"Zen Maru Gothic","M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --hand:"Hachi Maru Pop","Zen Maru Gothic",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--maru);font-weight:500;color:var(--ink);background:var(--cream);line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{position:relative;max-width:1040px;margin:0 auto;padding:0 20px}
.narrow{max-width:820px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.draft{position:fixed;top:12px;right:12px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.draft .dl{font-weight:900;font-size:11px;letter-spacing:.2em;color:#fff;background:rgba(238,90,150,.92);border-radius:999px;padding:5px 12px}
/* テスト用：出演者の切り替え（下書きのあいだだけ。公開のときは .draft ごと外す） */
.dsw{display:flex;flex-direction:column;align-items:flex-end}
.dsw summary{list-style:none;cursor:pointer;font-weight:900;font-size:12px;color:var(--ink);background:#fff;border:2px solid var(--rose);border-radius:999px;padding:4px 12px;box-shadow:0 3px 0 rgba(194,63,120,.3);white-space:nowrap}
.dsw summary::-webkit-details-marker{display:none}
.dsw summary:after{content:" ▾"}.dsw[open] summary:after{content:" ▴"}
.dsw nav{display:flex;flex-direction:column;gap:3px;margin-top:6px;background:#fff;border-radius:16px;padding:8px;min-width:230px;box-shadow:0 12px 28px -8px rgba(47,37,51,.4)}
.dsw nav a{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:13.5px;color:var(--ink);border-radius:10px;padding:6px 10px}
.dsw nav a img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #fff;box-shadow:0 1px 3px rgba(47,37,51,.3)}
.dsw nav a:hover{background:#FFF0F5}
.dsw nav a.on{background:var(--rose);color:#fff}
.dsw .note{font-size:11px;color:var(--ink2);line-height:1.6;padding:4px 6px 0}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.6) rotate(20deg);opacity:.6}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* 縁取りの文字（パネルと同じ：白の内側・橙の外側） */
.edge{text-shadow:
  3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,
  4px 0 0 #fff,-4px 0 0 #fff,0 4px 0 #fff,0 -4px 0 #fff,3px 3px 0 #fff,-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,
  8px 0 0 var(--orange),-8px 0 0 var(--orange),0 8px 0 var(--orange),0 -8px 0 var(--orange),6px 6px 0 var(--orange),-6px -6px 0 var(--orange),6px -6px 0 var(--orange),-6px 6px 0 var(--orange),
  7px 3px 0 var(--orange),-7px 3px 0 var(--orange),7px -3px 0 var(--orange),-7px -3px 0 var(--orange),3px 7px 0 var(--orange),-3px 7px 0 var(--orange),3px -7px 0 var(--orange),-3px -7px 0 var(--orange),
  8px 11px 0 rgba(47,37,51,.16)}
.edge-s{text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,4px 5px 0 rgba(47,37,51,.14)}

/* ヒーロー */
.hero{position:relative;overflow:hidden;padding:max(108px,10vw) 0 0;background:linear-gradient(180deg,#FFFDF3 0%,#FFF8D6 58%,#FFF0F6 100%)}
.rays{position:absolute;left:calc(50% - 200px);top:-640px;width:1800px;height:1800px;margin-left:-900px;background:repeating-conic-gradient(from 0deg,#FFEC7E 0deg 6deg,#FFFBE0 6deg 12deg);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 18%,transparent 46%);mask-image:radial-gradient(circle at 50% 50%,#000 0 18%,transparent 46%);pointer-events:none}
.confetti{position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(#F2789F 3px,transparent 3.5px),radial-gradient(#7CCBF0 3px,transparent 3.5px),radial-gradient(#A77BE8 2.5px,transparent 3px),radial-gradient(#7ED6B6 3px,transparent 3.5px);background-size:130px 130px,170px 170px,110px 110px,150px 150px;background-position:20px 150px,90px 60px,40px 240px,120px 330px}
/* 旗：1本のガーランド（9/28 のむさん「しのさんの重ね方にしたら、フラッグも可愛くなくなっちゃった」→「可愛くなった」と言ってもらった形に戻した） */
.bunting{position:absolute;left:0;top:0;width:100%;height:max(100px,12.5vw);pointer-events:none;filter:drop-shadow(0 4px 3px rgba(47,37,51,.12))}
.bals{position:absolute;top:130px;width:240px;height:460px;pointer-events:none}
.bals.l{left:-40px}.bals.r{right:-40px}
.bals i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.85) 0 7%,rgba(255,255,255,0) 8%),var(--c);box-shadow:inset -10px -12px 22px rgba(0,0,0,.10),inset 6px 8px 14px rgba(255,255,255,.35);animation:floaty 4.5s ease-in-out infinite}
.bals i:nth-child(2n){animation-duration:5.5s;animation-delay:-1.2s}.bals i:nth-child(3n){animation-duration:6.2s;animation-delay:-2.4s}
.bals i.dot{background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.9) 0 7%,rgba(255,255,255,0) 8%),radial-gradient(circle,var(--c) 0 3px,transparent 3.5px) 0 0/14px 14px,rgba(255,255,255,.55);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),inset -8px -10px 18px rgba(0,0,0,.06)}
.dz{position:absolute;display:block;filter:drop-shadow(0 4px 6px rgba(47,37,51,.16))}
.bals .dz{animation:floaty 6s ease-in-out infinite;animation-delay:-3s}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:10px;align-items:center}
.hero-txt{position:relative;text-align:center;padding-bottom:34px}
.vhero{padding-bottom:34px}
.kan{display:inline-block;font-family:var(--pop);font-weight:900;font-size:clamp(14px,3.8vw,18px);color:#fff;background:var(--rose);padding:7px 20px 6px;border-radius:999px;box-shadow:0 4px 0 var(--rose-d);letter-spacing:.06em}
.bk{font-size:13px;font-weight:700;color:var(--ink2);margin-top:12px;letter-spacing:.08em}
h1{position:relative;margin-top:8px;line-height:1.2}
h1 .pre{display:block;font-family:var(--pop);font-weight:900;font-size:clamp(24px,6.4vw,40px);color:var(--rose);letter-spacing:.04em;margin-top:6px}
h1 .main{display:block;font-family:var(--pop);font-weight:900;font-size:clamp(46px,12.4vw,86px);color:var(--ink);letter-spacing:.02em;line-height:1.22;margin-top:4px}
h1 .main .wd{display:inline-block}
h1 .main .c1{color:var(--rose)}
h1 .sub{display:block;font-family:var(--hand);font-size:clamp(17px,4.6vw,24px);color:var(--ink);margin-top:16px;letter-spacing:.04em}
.spk{position:absolute;color:var(--orange);font-size:30px;line-height:1;animation:twinkle 2.6s ease-in-out infinite;text-shadow:0 0 0 #fff}
.spk.a{left:2%;top:36%}.spk.b{right:3%;top:30%;font-size:22px;color:var(--mus);animation-delay:-1s}.spk.c{left:9%;top:63%;font-size:18px;color:var(--mus);animation-delay:-1.8s}.spk.d{right:8%;top:62%;font-size:26px;animation-delay:-.6s}
.when{position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin-top:26px;background:#fff;border:3px dashed var(--pink);border-radius:22px;padding:12px 20px 11px 50px;box-shadow:6px 6px 0 var(--pink2)}
.bw{position:absolute;left:-30px;top:-30px;filter:drop-shadow(2px 2px 0 var(--ink));transform:rotate(-14deg)}
.burst{display:flex;align-items:center;justify-content:center;width:78px;height:78px;text-align:center;font-family:var(--pop);font-weight:900;font-size:13px;line-height:1.15;color:var(--ink);background:var(--yel);clip-path:polygon(50% 0%,61% 16%,80% 7%,79% 27%,98% 30%,86% 47%,100% 62%,81% 68%,84% 88%,64% 84%,50% 100%,36% 84%,16% 88%,19% 68%,0% 62%,14% 47%,2% 30%,21% 27%,20% 7%,39% 16%)}
.when .d{font-family:var(--pop);font-weight:900;font-size:clamp(28px,7vw,36px);color:var(--rose);line-height:1.1}
.when .d small{font-size:.45em;margin-left:4px;color:var(--ink2)}
.when .t{font-family:var(--pop);font-weight:900;font-size:clamp(18px,4.8vw,22px);color:var(--ink)}
.when .o{font-weight:900;font-size:12.5px;color:#fff;background:var(--sky);border-radius:999px;padding:2px 12px}
.t3{font-size:14px;font-weight:700;color:var(--ink);margin-top:14px}
.t3 b{color:var(--rose);background:linear-gradient(transparent 62%,var(--yel) 62%)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--pop);font-weight:900;font-size:clamp(16px,4.3vw,19px);letter-spacing:.04em;color:#fff;background:linear-gradient(180deg,#FF8DB5,#EE5A96);border:0;border-radius:999px;padding:16px 36px 15px;text-decoration:none;box-shadow:0 6px 0 var(--rose-d),0 16px 26px -14px rgba(194,63,120,.7);cursor:pointer;transition:transform .08s}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--rose-d)}
.hero .btn{margin-top:22px}
/* 目立つボタン：白と濃いピンクの2重の輪・ゆっくり脈を打つ・光がすべる */
.btn.big{position:relative;overflow:hidden;white-space:nowrap;font-size:clamp(19px,5vw,24px);padding:19px 44px 18px;background:linear-gradient(180deg,#FF7AAE,#EF4A8E);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--rose),0 10px 0 7px var(--rose-d),0 26px 34px -14px rgba(194,63,120,.8);animation:beat 1.8s ease-in-out infinite}
.btn.big:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);animation:shine 3s ease-in-out infinite}
.hero .btn.big{margin-top:26px}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes shine{0%,45%{left:-60%}85%,100%{left:130%}}
.cta-note{font-family:var(--hand);font-size:clamp(15px,4vw,18px);color:var(--rose);margin-top:22px;letter-spacing:.04em}
.cta-note+.btn.big{margin-top:12px}
@media(max-width:480px){.btn.big{font-size:17.5px;padding:17px 22px 16px;gap:8px}}
.btn .h{font-size:1.1em}
.stage{position:relative;width:min(400px,86vw);aspect-ratio:1/1.05;margin:0 auto}
.rainbow{position:absolute;left:0;right:0;bottom:22%;height:50%;border-radius:999px 999px 0 0;background:radial-gradient(circle farthest-side at 50% 100%,transparent 0 52%,#BFE9FB 52% 58%,#6CCFF6 58% 66%,#B8D94F 66% 74%,#FFF26E 74% 82%,#F9A765 82% 91%,#F063A4 91% 100%,transparent 100%)}
.stage .cl{position:absolute;bottom:13%;width:40%;aspect-ratio:200/112;height:auto;filter:drop-shadow(0 4px 0 #F9D3E2) drop-shadow(0 8px 10px rgba(47,37,51,.10))}
.stage .cl.a{left:-9%}.stage .cl.b{right:-9%;transform:scaleX(-1)}
.stage .match{position:absolute;left:50%;bottom:0;width:78%;transform:translateX(-50%);-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.stage .ffl{position:absolute;right:0;top:2%;width:30%;aspect-ratio:1/1;animation:floaty 5s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(47,37,51,.2))}
.stage .ffl svg{position:absolute;inset:0;width:100%;height:100%}
.stage .ffl img{position:absolute;left:50%;top:50%;width:58%;transform:translate(-50%,-52%)}
.stage .fb{position:absolute;right:-4%;top:30%;font-family:var(--hand);font-size:13px;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:18px;padding:4px 10px;box-shadow:3px 3px 0 var(--ink);transform:rotate(6deg);white-space:nowrap}
/* 本（トップにも出す。9/28 のむさん「トップページに、マッチの書籍も」。予約のボタンはつけない＝みんなで一斉に予約するため） */
.hbook{position:absolute;z-index:4}
.hbook img{width:100%;border-radius:3px;border:4px solid #fff;box-shadow:0 14px 24px -10px rgba(47,37,51,.5)}
.hbook .bw{left:-24px;top:-22px;z-index:1}
.hbook .burst{width:60px;height:60px;font-size:11.5px}
.vb{right:calc(-1 * var(--bo,22px));bottom:calc(var(--hh) * .58);width:clamp(78px,18vw,120px);transform:rotate(7deg)}   /* 名前より上（名前を写真に重ねたので）。枠（＝2人の写真の幅）の右はしから --bo だけ外に出す＝マッチの顔にかからない（9/28 のむさん「書籍で顔がきえちゃう」） */
.sb{left:-3%;bottom:3%;width:29%;transform:rotate(-8deg)}
/* 雲：2段の丸い雲（うしろピンク・手前は下の欄と同じ色）。しのさんの4枚重ねは「もう少しシンプルに」で最初の版に戻した（9/28） */
.clouds{position:relative;display:block;width:100%;height:120px;margin-top:-30px}
@media(max-width:820px){
  .hero{padding-top:92px}
  .hero-in{grid-template-columns:1fr}
  .rays{left:50%;top:-660px}
  .bals{top:96px;transform:scale(.62)}.bals.l{left:-70px;transform-origin:top left}.bals.r{right:-70px;transform-origin:top right}
  .stage{width:min(330px,82vw);margin-top:16px}
  .clouds{height:80px;margin-top:-18px}
  .when{padding-left:46px}
  .vb{right:calc(-1 * var(--bo,8px));bottom:calc(var(--hh) * .58);width:66px}
  .hbook .bw{left:-20px;top:-20px}.hbook .burst{width:52px;height:52px;font-size:10.5px}
  .hbook.vb .bw{left:calc(50% - 26px);top:-38px}   /* スマホは「発売！」の星を本の上のまん中に（左だとマッチの髪にかかる） */
}

/* 先生のURL（?via=）で開いたとき：一番上を「先生 × マッチ」の2人の対談に */
.vhero{position:relative;text-align:center}
.vhero[hidden]{display:none}
html.via-on .hero-in{display:none}
.vhero .kan,.vfes{position:relative;z-index:3}
.vfes{font-family:var(--pop);font-weight:900;font-size:clamp(17px,4.4vw,24px);color:var(--rose);margin-top:10px}
.vduo[hidden]{display:none}
.vduo{position:relative;display:flex;align-items:center;justify-content:center;margin-top:14px}
.vduo:before{content:"";position:absolute;left:50%;bottom:4%;width:min(640px,96vw);height:min(320px,48vw);transform:translateX(-50%);border-radius:999px 999px 0 0;background:radial-gradient(circle farthest-side at 50% 100%,transparent 0 55%,#BFE9FB 55% 61%,#6CCFF6 61% 68%,#B8D94F 68% 76%,#FFF26E 76% 84%,#F9A765 84% 92%,#F063A4 92% 100%,transparent 100%);opacity:.85}
.vp{position:relative;z-index:1;width:clamp(150px,27vw,250px);aspect-ratio:1/1}
.vp .dz{inset:0;width:100%;height:100%}
.vp.t .dz{color:var(--vc,var(--pink))}.vp.m .dz{color:#F7BCD6;--ctr:#F7BCD6}
.vp img{position:absolute;left:50%;top:50%;width:60%;height:60%;border-radius:50%;object-fit:cover;transform:translate(-50%,-50%);border:5px solid #fff;box-shadow:0 6px 14px rgba(47,37,51,.25)}
.vx{position:relative;z-index:2;flex:none;width:clamp(48px,9vw,66px);height:clamp(48px,9vw,66px);margin:0 -16px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--pop);font-weight:900;font-size:clamp(26px,5vw,38px);color:var(--rose);box-shadow:0 4px 0 var(--pink2),0 8px 16px -8px rgba(47,37,51,.45)}
.vhero{--bo:84px;--fw:min(760px, calc(100vw - 40px - var(--bo) * 2));--lw:calc(var(--ta,.9) / var(--tf,.5) + 2.44);--hh:min(clamp(80px,12vw,150px), calc(var(--fw) / var(--lw)));--ph:max(calc(1 / var(--tf,.5)), calc(2.05 + var(--mo,0)))}   /* --fw＝2人の写真を並べてよい幅。--ta＝先生の写真の横÷縦。2人の幅（顔の高さ×(--ta÷--tf＋2.44)）が --fw を超えないよう、顔を小さくする＝両方の肩が切れない（9/28 のむさん「両方の肩を残すように」） */   /* --ph＝2人の写真の高さ（顔の高さの何倍か）。マッチはいつも胸の下まで（顔の2.05倍）。先生の写真が長ければ、その長さ */   /* 顔の高さ。2人の写真と、写真に重ねる名前の両方で使う */
.vstage{position:relative;width:max-content;margin:18px auto 0;--R:calc(var(--hh) * var(--ph) + 45px)}   /* 枠の幅＝2人の写真の幅（前は580pxで、はみ出た左右が消えていた） */
.vstage[hidden]{display:none}
@media(max-width:820px){.vhero{--bo:30px;--fw:calc(100vw - 24px - var(--bo))}.vstage{transform:translateX(calc(var(--bo) / -2))}}   /* スマホ：本がはみ出す分だけ、2人を左に寄せる */
/* 2ショット写真のうしろの虹（マッチ1人のトップと同じ色。9/28 のむさん「レインボー入れたほうがやっぱり良い？」） */
.vrain{position:absolute;left:50%;bottom:28%;width:calc(var(--hh) * var(--ph) * 2 + 90px);aspect-ratio:2/1;transform:translateX(-50%);border-radius:999px 999px 0 0;background:radial-gradient(circle farthest-side at 50% 100%,transparent 0 71%,#BFE9FB 71% 75.8%,#6CCFF6 75.8% 80.6%,#B8D94F 80.6% 85.4%,#FFF26E 85.4% 90.2%,#F9A765 90.2% 95.1%,#F063A4 95.1% 100%,transparent 100%)}
.vcl{position:absolute;z-index:0;bottom:calc(28% - var(--R) * .16);width:calc(var(--R) * .66);aspect-ratio:200/112;height:auto;filter:drop-shadow(0 4px 0 #F9D3E2) drop-shadow(0 8px 10px rgba(47,37,51,.10))}
.vcl.a{left:calc(50% - var(--R) * 1.16)}.vcl.b{right:calc(50% - var(--R) * 1.16);transform:scaleX(-1)}
/* 2人の顔の大きさと高さをそろえる：--hh＝顔の高さ。先生の写真は顔が全体の --tf（先生ごと）、マッチの写真は顔が全体の29%。
   マッチは写真の下を切って「胸から上」に（先生の写真と同じ高さの枠に入れる） */
.vpair{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;height:calc(var(--hh) * var(--ph));-webkit-mask-image:linear-gradient(180deg,#000 93%,transparent);mask-image:linear-gradient(180deg,#000 93%,transparent)}
.vpair img{display:block;width:auto;max-width:none;filter:drop-shadow(0 10px 16px rgba(47,37,51,.16))}
.vpair .vt{position:relative;z-index:2;height:calc(var(--hh) / var(--tf,.5));align-self:flex-start;margin-right:calc(var(--hh) * -.16);opacity:0;transition:opacity .35s}.vpair .vt.on{opacity:1}   /* 肩まで写った写真にしたので、左はしはぼかさない（写真の枠で腕が切れている先生は、切り抜きの画像のほうで、はしを透かす） */
/* 先生の写真が胸の下まで無いとき（short）：顔の大きさと高さはマッチとそろえたまま、写真の下のはしをふんわり消す */
.vpair.short .vt,.vpair .vt.short{-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent);mask-image:linear-gradient(180deg,#000 84%,transparent)}
/* トップ（先生のURLでないとき）：その日の出演者みんな（先生3人とマッチ）を、先生のURLと同じ形で並べる（のむさん 9/29「トップページは、出演者が全員でているフェススタイルがいい」）。
   前のトップ（タイトルとマッチ1人）は ?hero=solo。--lwd＝PCの横一列の幅／--lwm＝スマホの先生の列の幅（顔の高さの何倍か。JS が入れる） */
html.lu-on .hero-in{display:none}
.vhero.lu{--lw:var(--lwd);--fw:min(1000px, calc(100vw - 40px - var(--bo) * 2))}
.vhero.lu .vfes{font-size:clamp(22px,5.4vw,40px);margin-top:12px}
.vhero.lu .vname{font-size:clamp(19px,4.4vw,34px)}
.vhero.lu .vrole,.vhero.lu .vtheme{display:none}
.vhero.lu .bk,.vhero.lu h1.lut{position:relative;z-index:3}   /* 前のトップの大きいタイトル（のむさん「サイズが大きかった時の雰囲気」）。虹より前に */
.vhero.lu .vt+.vt{margin-left:calc(var(--hh) * -.16)}
.vhero.lu .vmw{margin-left:calc(var(--hh) * -.4)}   /* マッチとのあいだが空いていた（のむさん「マッチさんとの距離がある」）。マッチの写真の左がわは透明なので、深く重ねる */
@media(max-width:820px){
  .vhero.lu{--lw:var(--lwm);--fw:calc(100vw - 44px)}   /* 先生の列が使える幅は 100vw−40px（左右20pxの余白）。前は −32px で計算していて、320px では 0.1px はみ出して3人目が2段目に落ち、マッチの後ろに隠れた（9/29）。4px のゆとりつき */
  .vhero.lu .vstage{width:calc(var(--hh) * var(--lwm));max-width:100%}
  .vhero.lu .vpair{flex-wrap:wrap;justify-content:center;height:auto;width:100%}   /* スマホは2段：うしろに先生、前にマッチ（集合写真のように） */
  .vhero.lu .vt{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
  .vhero.lu .vmw{position:relative;z-index:3;flex:0 0 100%;display:flex;justify-content:center;height:calc(var(--hh) * 2.05);margin:calc(var(--hh) * -.85) 0 0}
  .vhero.lu .vmw img{margin:0}
  .vhero.lu .vstage:not([hidden]) ~ .vname{margin-top:calc(var(--hh) * -.15)}   /* 名前が2行になるので、マッチの首元にかからないよう重ねるのは少しだけ */
  /* 名前が重なっていた（のむさん 9/29「スマホで全員表示の時の名前が重なる」）：文字は19pxなのに、ふちはパソコン用の8pxのままで、
     「さん」のふちが前の漢字にかぶり、2行のふちもぶつかっていた。ふちは文字に合わせて細く（白2px＋オレンジ3px）、
     text-shadow ではなく filter で名前全体のまわりにまとめて描く（あとの文字のふちが、前の文字にかぶらない）。行のあいだもあける */
  .vhero.lu .vname{line-height:1.65;text-shadow:none;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(3px 0 0 var(--orange)) drop-shadow(-3px 0 0 var(--orange)) drop-shadow(0 3px 0 var(--orange)) drop-shadow(0 -3px 0 var(--orange)) drop-shadow(3px 4px 0 rgba(47,37,51,.16))}
}
.vpair .vmw{flex:none;height:100%;overflow:hidden;margin-left:calc(var(--hh) * -.16)}
.vpair .vmw img{height:calc(var(--hh) / .29);margin-top:calc(var(--hh) * var(--mo,0))}   /* --mo：先生の髪（おだんご）が高いとき、マッチをこれだけ下げて、2人の目の高さをそろえる（先生ごとに VT の mo） */
.vshot{position:relative;z-index:1;width:min(580px,92vw);margin:18px auto 0;background:#fff;padding:10px 10px 12px;border-radius:24px;box-shadow:8px 8px 0 var(--pink2),0 20px 36px -24px rgba(47,37,51,.6);transform:rotate(-2deg)}
.vshot img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px}
.vshot .dz{width:74px;height:74px;z-index:3}.vshot .d1{left:-26px;bottom:-22px;color:#FFD84D}.vshot .d2{right:-22px;top:-24px;color:#FF8DB2;width:62px;height:62px}
.vname{font-family:var(--pop);font-weight:900;font-size:clamp(30px,7.6vw,58px);color:var(--ink);line-height:1.25;margin-top:12px}
/* 2人の写真が出ているときは、名前と肩書きを写真の下のほうに重ねる（のむさん「名前とかをその上に重ねて」） */
.vstage:not([hidden]) ~ .vname{position:relative;z-index:5;margin-top:calc(-1 * max(0px, min(var(--hh) * .45, var(--hh) * var(--ph) - var(--hh) * 1.3)))}   /* 重ねるのは胸の下のほうだけ。名前の上のふちは、あごより十分下（のむさん「テキストが顔に被らないように。下にずらして」） */
.vstage:not([hidden]) ~ .vrole{position:relative;z-index:5;text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 10px #fff,0 0 14px #fff}
.vname small{font-size:.5em;margin-left:.1em}
.vname .vxm{color:var(--rose);margin:0 .22em}
.vrole .nb{display:inline-block}
.vrole{font-size:13px;font-weight:700;color:var(--ink2);margin-top:4px}
.vtheme{font-family:var(--pop);font-weight:900;font-size:clamp(20px,5.2vw,30px);color:var(--rose);margin-top:8px}
.talk.me{box-shadow:0 0 0 5px #fff,0 0 0 9px var(--tc),10px 10px 0 9px var(--tc2)}
.talk.me:before{content:"あなたが見にきた対談";position:absolute;left:50%;top:-18px;transform:translateX(-50%);white-space:nowrap;font-family:var(--pop);font-weight:900;font-size:13px;color:#fff;background:var(--rose);border-radius:999px;padding:3px 14px;box-shadow:0 3px 0 var(--rose-d)}
/* セクション（水玉・ギンガム・波のふち） */
.sec{position:relative;padding:76px 0;background:var(--bg,var(--cream))}
.scal:before{content:"";position:absolute;left:0;right:0;top:-15px;height:16px;background:radial-gradient(circle at 12px 16px,var(--bg) 11.5px,transparent 12px) 0 0/24px 16px repeat-x;pointer-events:none}
.dots-p{--bg:#FFF0F5;background:radial-gradient(rgba(242,120,159,.18) 3.5px,transparent 4px) 0 0/28px 28px,#FFF0F5}
.dots-y{--bg:#FFF8D8;background:radial-gradient(rgba(233,185,58,.22) 3.5px,transparent 4px) 0 0/28px 28px,#FFF8D8}
.dots-c{--bg:#FFFBE6;background:radial-gradient(rgba(240,99,164,.13) 3.5px,transparent 4px) 0 0/28px 28px,#FFFBE6}
.dots-s{--bg:#EEF8FE;background:radial-gradient(rgba(124,203,240,.25) 3.5px,transparent 4px) 0 0/28px 28px,#EEF8FE}
.ging{--bg:#F2FBF7;background:repeating-linear-gradient(0deg,rgba(126,214,182,.16) 0 14px,transparent 14px 28px),repeating-linear-gradient(90deg,rgba(126,214,182,.16) 0 14px,transparent 14px 28px),#F2FBF7}
.plain{--bg:var(--cream)}
.st{text-align:center;margin-bottom:30px}
.st .en{display:inline-block;font-family:var(--pop);font-weight:800;font-size:12px;letter-spacing:.28em;color:#fff;background:var(--pink);border-radius:999px;padding:3px 16px;box-shadow:0 3px 0 var(--rose-d)}
.st h2{font-family:var(--pop);font-weight:900;font-size:clamp(25px,6.4vw,38px);color:var(--ink);letter-spacing:.04em;line-height:1.45;margin-top:12px}
.st h2:before,.st h2:after{content:"✿";color:var(--pink);font-size:.62em;margin:0 .35em;vertical-align:.18em}
.st h2:after{color:var(--sky)}
.st h2:before{content:"✿\2060"}.st h2:after{content:"\2060✿"}   /* ✿が見出しの文字からはなれて、1つだけ次の行に行かないように（\2060＝ここで改行しない） */
@media(max-width:480px){.st h2{font-size:23px;letter-spacing:.02em}}   /* スマホは、短い見出しが1行におさまる大きさに */
/* スマホの改行（9/28 のむさん「全てのページで、スマホでも綺麗か確認して欲しい」）：日本語は文節で折り返す（lib/wrap-ja.js＝BudouX が文節のあいだに <wbr> を入れる）。
   文の最後の行が1〜2文字だけにならないように（pretty）。.nb＝改行しないかたまり（帯の言葉） */
.nb{display:inline-block;max-width:100%}
p,h1,h2,h3,.tt,.th{text-wrap:pretty}
.tc-note b{white-space:nowrap}   /* ハッシュタグが「#」だけで折り返さないように */
.st p{font-size:15px;color:var(--ink2);margin-top:10px;text-wrap:balance;word-break:auto-phrase}

/* 3つの対談 */
.talks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:860px){.talks{grid-template-columns:minmax(0,1fr);max-width:460px;margin:0 auto}}
.talk{position:relative;background:#fff;border-radius:30px;padding:20px 20px 22px;text-align:center;border:3px solid var(--tc);box-shadow:8px 8px 0 var(--tc2)}
.talk.p{--tc:#F063A4;--tc2:#FFC2DD;--tp:#F063A4;--ctr:#FFF050}.talk.m{--tc:#2DB0E6;--tc2:#C7ECFB;--tp:#6CCFF6;--ctr:#FFF050}.talk.y{--tc:#E9A91C;--tc2:#FFEBA0;--tp:#FFE45A;--ctr:#F063A4}
.talkno{display:inline-flex;align-items:center}
.talkno b{font-family:var(--pop);font-weight:900;font-size:13px;color:#fff;background:var(--tc);border-radius:999px;padding:2px 14px;letter-spacing:.08em;box-shadow:0 3px 0 var(--tc2)}
.duo{display:flex;align-items:center;justify-content:center;margin-top:6px}
.duo .x{position:relative;z-index:2;flex:none;width:40px;height:40px;margin:0 -10px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--pop);font-weight:900;font-size:22px;color:var(--rose);box-shadow:0 3px 0 var(--tc2),0 6px 12px -6px rgba(47,37,51,.4)}
.talk .ph{position:relative;width:150px;height:150px;margin:0 auto}
.talk .ph .dz{inset:0;width:100%;height:100%;color:var(--tp,var(--tc))}
.talk .ph img{position:absolute;left:50%;top:50%;width:86px;height:86px;border-radius:50%;object-fit:cover;transform:translate(-50%,-50%);border:4px solid #fff;box-shadow:0 4px 10px rgba(47,37,51,.2)}
.talk .duo .ph.me{width:128px;height:128px}
.talk .duo .ph.me .dz{color:#F7BCD6;--ctr:#F7BCD6}
.talk .duo .ph.me img{width:72px;height:72px}
@media(max-width:380px){.talk .ph{width:132px;height:132px}.talk .duo .ph.me{width:116px;height:116px}.talk .ph img{width:76px;height:76px}.talk .duo .ph.me img{width:64px;height:64px}}   /* 360px幅のスマホで、対談のカードが画面から4pxはみ出していた */
.talk .tm{display:inline-block;font-family:var(--pop);font-weight:900;font-size:15px;color:#fff;background:var(--tc);border-radius:999px;padding:2px 14px;margin-top:6px}
.talk .tag{display:inline-block;font-family:var(--pop);font-weight:800;font-size:15px;color:var(--ink);background:var(--tc2);border-radius:12px;padding:3px 12px;margin:10px 0 0 6px}
.talk h3{font-family:var(--pop);font-weight:900;font-size:23px;color:var(--ink);margin-top:10px;line-height:1.4}
.talk h3 small{font-size:14px;margin-left:2px}
.talk h3 .xm{font-size:.8em;color:var(--rose);margin:0 6px}
.talk .rl{font-size:13px;font-weight:700;color:var(--ink2)}
.talk .th{font-family:var(--pop);font-weight:900;font-size:clamp(17px,4.4vw,19px);color:var(--rose);margin-top:12px;line-height:1.5;text-wrap:balance;word-break:auto-phrase}
.talk .bio{font-size:14px;text-align:left;margin-top:8px;line-height:1.85}

/* 帯の言葉 */
.obi .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
@media(max-width:820px){.obi .in{grid-template-columns:1fr;gap:26px}}
.polaroid{position:relative;background:#fff;padding:12px 12px 44px;border-radius:6px;box-shadow:0 20px 36px -24px rgba(47,37,51,.6);transform:rotate(-3deg);max-width:480px;margin:0 auto}
.polaroid img{aspect-ratio:16/10.5;object-fit:cover;border-radius:3px}
.polaroid .cap{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--hand);font-size:15px;color:var(--ink)}
.tape:before,.tape:after{content:"";position:absolute;width:92px;height:26px;top:-12px;background:repeating-linear-gradient(45deg,rgba(242,120,159,.75) 0 8px,rgba(255,214,228,.85) 8px 16px);transform:rotate(-8deg);z-index:2}
.tape:before{left:18px}.tape:after{right:18px;transform:rotate(9deg);background:repeating-linear-gradient(45deg,rgba(124,203,240,.8) 0 8px,rgba(225,244,253,.9) 8px 16px)}
.obi .k{font-family:var(--pop);font-weight:800;font-size:12px;letter-spacing:.3em;color:var(--rose)}
.obi .big{font-family:var(--pop);font-weight:900;font-size:clamp(20px,5vw,27px);line-height:1.8;color:var(--ink);margin-top:8px}
.obi .big span{background:linear-gradient(transparent 60%,var(--yel) 60%)}
.obi .sm{font-size:15.5px;margin-top:12px}
.obi cite{display:block;font-style:normal;font-size:13px;font-weight:700;color:var(--ink2);margin-top:12px}

/* ごあいさつ（便せん） */
.letter{position:relative;background:#fff;border-radius:26px;padding:36px 30px 30px;border:3px solid var(--pink2);box-shadow:8px 8px 0 #CDEFE2;background-image:repeating-linear-gradient(180deg,transparent 0 37px,#F7E3EB 37px 38px);background-position:0 72px}
.letter h3{font-family:var(--hand);font-size:25px;color:var(--rose);text-align:center;margin-bottom:8px}
.letter p{font-size:16px;line-height:2.35}
.letter p b{color:var(--rose)}
.letter .sig{font-family:var(--hand);text-align:right;font-size:17px;margin-top:10px}
.letter .face{position:absolute;right:-14px;top:-26px;width:74px;transform:rotate(12deg);filter:drop-shadow(0 6px 8px rgba(47,37,51,.25));z-index:3}
.letter .dz{left:-18px;top:-20px;width:64px;height:64px;color:var(--pink);z-index:3}
.gnote{text-align:center;font-size:12.5px;color:var(--ink2);margin-top:14px}
@media(max-width:560px){.letter{padding:32px 18px 24px}.letter p{font-size:15px;line-height:2.25}}

/* 当日の流れ */
.flow{position:relative;max-width:640px;margin:0 auto}
.flow:before{content:"";position:absolute;left:31px;top:16px;bottom:16px;border-left:3px dashed #E9CFDA}
.row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:9px 0}
.row .bal{position:relative;width:52px;height:60px;margin-left:6px;border-radius:50% 50% 48% 48%/56% 56% 44% 44%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.85) 0 8%,rgba(255,255,255,0) 9%),var(--c);display:flex;align-items:center;justify-content:center;font-family:var(--pop);font-weight:900;font-size:13px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:inset -6px -8px 14px rgba(0,0,0,.1)}
.row .w{display:flex;align-items:center;gap:14px;background:#fff;border-radius:22px;padding:10px 16px;box-shadow:5px 5px 0 var(--sh,#F7DCE7)}
.row .w b{font-family:var(--pop);font-weight:900;font-size:17px;color:var(--ink)}
.row .w small{display:block;font-size:13px;color:var(--ink2)}
.row .w .tt{font-family:var(--pop);font-weight:800;font-size:14.5px;color:var(--rose)}
.tt .tlab i{font-style:normal}
@media(max-width:480px){.tt .tlab{display:block}.tt .tlab i{display:none}}   /* スマホは「対談」を1行目に分けて、テーマをその下に（欄がせまく、でこぼこに折り返していた） */
.av{display:flex;flex:none}
.av img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 4px 10px rgba(47,37,51,.22)}
@media(max-width:560px){.av img{width:60px;height:60px}}
.av img + img{margin-left:-12px}
.flow + .note{text-align:center;font-size:12.5px;color:var(--ink2);margin-top:14px}

/* マッチの言葉（しのさんの名言カードを、そのまま） */
/* マッチの言葉（しのさんのカード）：全部で40枚・1日10枚。ほかの日のページへ誘う（ほかの日を「夜」と呼ばない。11/3は昼） */
.wcount{text-align:center;margin:-8px auto 28px}
.wc-big{font-family:var(--pop);font-weight:900;font-size:clamp(19px,5vw,25px);color:var(--ink);line-height:1.4}
.wc-big b{font-size:2.2em;color:var(--rose);margin:0 .06em;vertical-align:-.1em;text-shadow:3px 3px 0 var(--yel)}
.wc-sub{font-size:14.5px;color:var(--ink2);margin-top:4px;text-wrap:balance;word-break:auto-phrase}
.wgift{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-family:var(--pop);font-weight:900;font-size:clamp(16px,4.4vw,20px);line-height:1.45;color:var(--ink);background:#fff;border:3px solid var(--rose);border-radius:20px;padding:10px 20px;box-shadow:5px 5px 0 var(--pink2);text-align:left}
.wgift .ic{font-size:1.7em;line-height:1;flex:none}
.wgift b{color:var(--rose);font-size:1.25em}
.wgift br.sp{display:none}
.wgift-s{font-size:13.5px;font-weight:700;color:var(--ink2);margin-top:8px}   /* 渡すのは開催のあと（9/28 のむさん「メッセージ10枚は、開催後がいいな」） */
@media(max-width:480px){.wgift br.sp{display:inline}}
.wpile{position:relative;flex:none;height:var(--h);width:calc(var(--h) * 1.05)}
.wpile img{position:absolute;left:50%;bottom:0;height:90%;width:auto;max-width:none;border-radius:12px;border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(47,37,51,.8);transform-origin:50% 100%}
.wpile img:nth-child(1){transform:translateX(-50%) rotate(-16deg)}.wpile img:nth-child(2){transform:translateX(-50%) rotate(-8deg)}.wpile img:nth-child(3){transform:translateX(-50%)}
.wpile img:nth-child(4){transform:translateX(-50%) rotate(8deg)}.wpile img:nth-child(5){transform:translateX(-50%) rotate(16deg)}
.wpile .lk{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-6deg);white-space:nowrap;font-family:var(--pop);font-weight:900;font-size:clamp(11px,2.3vw,15px);line-height:1.4;text-align:center;color:#fff;background:var(--rose);border:2.5px solid #fff;border-radius:14px;padding:7px 11px;box-shadow:0 4px 0 var(--rose-d)}
.wpile .lk b{font-size:1.35em;color:#FFF26E}
.wcta{text-align:center;margin-top:26px}
@media(max-width:480px){.wcta .btn.big{white-space:normal;line-height:1.45;max-width:100%}}
.wcards{--h:clamp(104px,19.5vw,228px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.6vw,16px)}
.wcard{padding:0;border:0;background:none;cursor:zoom-in;border-radius:14px;transition:transform .15s}
.wcard img{height:var(--h);width:auto;max-width:none;border-radius:14px;border:3px solid var(--ink);box-shadow:5px 5px 0 rgba(47,37,51,.85)}
.wcard:nth-child(odd){transform:rotate(-1.6deg)}.wcard:nth-child(even){transform:rotate(1.4deg)}
.wcard:hover,.wcard:focus-visible{transform:rotate(0) scale(1.04)}
.whint{text-align:center;font-size:12.5px;color:var(--ink2);margin-top:14px}
.wnext{margin-top:46px;text-align:center}
.wn-h{font-family:var(--pop);font-weight:900;font-size:clamp(18px,4.8vw,24px);color:var(--ink);line-height:1.5}
.wn-h b{color:var(--rose)}
.wn-s{font-size:14px;color:var(--ink2);margin-top:4px}
.wdays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:20px}
.wday{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--dc);border-radius:24px;padding:16px 12px 16px;box-shadow:6px 6px 0 var(--dc2);transition:transform .15s}
.wday.d2{--dc:#F9A765;--dc2:#FFDDBF}.wday.d3{--dc:#6CCFF6;--dc2:#C7ECFB}.wday.d4{--dc:#B8D94F;--dc2:#E3F0B5}
.wday .fan{position:relative;width:150px;height:118px;flex:none}
.wday .fan img{position:absolute;left:50%;bottom:0;height:100px;width:auto;max-width:none;border-radius:7px;border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(47,37,51,.45);transform-origin:50% 100%}
.wday .fan img:nth-child(1){transform:translateX(-50%) rotate(-15deg)}
.wday .fan img:nth-child(2){transform:translateX(-50%) rotate(15deg)}
.wday .fan img:nth-child(3){transform:translateX(-50%)}
.wday .ten{position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:center;width:52px;height:52px;text-align:center;font-family:var(--pop);font-weight:900;font-size:13px;line-height:1.1;color:var(--ink);background:var(--yel);clip-path:polygon(50% 0%,61% 16%,80% 7%,79% 27%,98% 30%,86% 47%,100% 62%,81% 68%,84% 88%,64% 84%,50% 100%,36% 84%,16% 88%,19% 68%,0% 62%,14% 47%,2% 30%,21% 27%,20% 7%,39% 16%);transform:rotate(12deg)}
.wday .tx{display:flex;flex-direction:column;align-items:center}
.wday .dd{font-family:var(--pop);font-weight:900;font-size:12px;letter-spacing:.14em;color:#fff;background:var(--dc);border-radius:999px;padding:1px 12px;margin-top:8px}
.wday .dt{font-family:var(--pop);font-weight:900;font-size:21px;line-height:1.35;margin-top:4px}
.wday .dn{font-size:13.5px;font-weight:700;color:var(--ink2)}
.wday .go{margin-top:10px;font-weight:900;font-size:13px;color:var(--ink2);background:#F5EFF2;border-radius:999px;padding:5px 16px}
.wday.open{cursor:pointer}
.wday.open .go{color:#fff;background:var(--rose);box-shadow:0 4px 0 var(--rose-d)}
.wday.open:hover{transform:translateY(-3px)}
@media(max-width:760px){
  .wdays{grid-template-columns:1fr;gap:14px}
  .wday{display:grid;grid-template-columns:118px 1fr;align-items:center;column-gap:8px;padding:12px 14px}
  .wday .fan{width:118px;height:96px}.wday .fan img{height:80px}
  .wday .ten{width:44px;height:44px;font-size:11.5px;right:-4px}
  .wday .tx{align-items:flex-start;text-align:left}
  .wday .dd{margin-top:0}
}
.zoom{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(47,37,51,.74);cursor:zoom-out}
.zoom[hidden]{display:none}
.zoom img{max-width:min(92vw,900px);max-height:84vh;width:auto;height:auto;border-radius:16px;border:4px solid #fff;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.zoom .x{position:absolute;right:14px;top:14px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:22px;font-weight:900;cursor:pointer}
/* マッチの声で届く、4つの言葉（名言カードと同じ黄色の集中線と吹き出し） */
.qgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:900px){.qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qt{position:relative;aspect-ratio:1/1.08;border-radius:24px;overflow:hidden;background:repeating-conic-gradient(from 0deg at 50% 45%,#FFE600 0deg 7deg,#FFFBEA 7deg 14deg);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:flex;align-items:center;justify-content:center;padding:14px 12px 40px}
.qt .bub{position:relative;background:#fff;border:3px solid var(--ink);border-radius:26px;padding:12px 14px;font-family:var(--pop);font-weight:800;font-size:clamp(14px,3.6vw,17px);line-height:1.6;text-align:center;box-shadow:4px 4px 0 var(--ink);max-width:92%}
.qt .bub:after{content:"";position:absolute;left:24%;bottom:-16px;border:9px solid transparent;border-top:14px solid var(--ink);border-bottom:0}
.qt .bub:before{content:"";position:absolute;left:calc(24% + 3.5px);bottom:-10px;border:6px solid transparent;border-top:10px solid #fff;border-bottom:0;z-index:1}
.qt .bub b{font-weight:900;font-size:1.3em;color:var(--rose)}
.qt .face{position:absolute;right:8px;bottom:6px;width:54px}
.qt .snd{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px;font-weight:900;font-size:11.5px;color:#fff;background:var(--ink);border-radius:999px;padding:3px 10px}
.qnote{text-align:center;font-size:14px;font-weight:700;margin-top:18px}
.qnote small{display:block;font-size:12.5px;font-weight:500;color:var(--ink2);margin-top:2px}
@media(max-width:560px){.qt{padding:10px 8px 46px}.qt .bub{font-size:13px;padding:9px 9px;border-radius:20px;max-width:100%}.qt .face{width:40px;right:6px;bottom:5px}.qt .snd{font-size:10.5px;padding:2px 8px;left:8px}}
/* 参加のしかた */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:s}
@media(max-width:760px){.steps{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.steps li{position:relative;background:#fff;border-radius:26px;padding:26px 18px 20px;text-align:center;border:3px solid var(--c);box-shadow:7px 7px 0 var(--c2)}
.steps li .n{position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;font-family:var(--pop);font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--c2)}
.steps li .ic{font-size:34px;line-height:1.2}
.steps li b{display:block;font-family:var(--pop);font-weight:900;font-size:18px;color:var(--ink);margin-top:6px}
.steps li small{display:block;font-size:13.5px;color:var(--ink2);margin-top:4px;line-height:1.7}

/* ありがとうカード（みんなに書いてもらって、シェア） */
.tc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
@media(max-width:820px){.tc{grid-template-columns:1fr}.tc-prev{order:-1}}
.tc-form{background:#fff;border-radius:26px;padding:22px 20px 18px;border:3px solid var(--pink);box-shadow:8px 8px 0 #FFC2D6}
.tc-form label{display:block;font-weight:900;font-size:14px;margin-bottom:12px}
.tc-form label small{font-weight:500;color:var(--ink2);font-size:12px;margin-left:4px}
.tc-form input,.tc-form textarea{display:block;width:100%;margin-top:4px;font:inherit;font-weight:500;font-size:16px;color:var(--ink);border:2px solid #EBD3DD;border-radius:14px;padding:10px 12px;background:#fff;resize:vertical}
.tc-form input:focus,.tc-form textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(242,120,159,.18)}
#cCnt{display:block;text-align:right;margin:2px 0 0;font-size:11.5px}
.tc-btns{text-align:center;margin-top:4px}
.share.sm{margin-top:12px}
.tc-note{font-size:12px;color:var(--ink2);margin-top:12px;line-height:1.7}
.tc-note b{color:var(--rose)}
.tc-prev canvas{width:100%;max-width:470px;height:auto;display:block;margin:0 auto;border-radius:24px;box-shadow:8px 8px 0 #FFC2D6,0 20px 40px -26px rgba(47,37,51,.6)}
/* ありがとうの壁：「壁に飾る」を押したカードだけ並べる（9/28 のむさん「書いてくれたカード、ここにどんどん並べてみる？」）。
   まだ sql/0928_fes_thanks.sql を実行していないときは、ボタンも壁も出さない */
.tc-wall{margin-top:16px;padding-top:16px;border-top:2px dashed #F5D3E1;text-align:center}
.tc-wall[hidden]{display:none}
.btn.wallb{background:linear-gradient(180deg,#86DDBE,#45BD92);box-shadow:0 6px 0 #2E9C75,0 16px 26px -14px rgba(46,156,117,.7)}
.btn.wallb:active{box-shadow:0 2px 0 #2E9C75}
.btn.wallb[disabled]{opacity:.75;cursor:default;transform:none}
.tc-wall .wmsg{min-height:1.5em;font-size:13.5px;font-weight:900;color:#2E9C75;margin-top:8px;line-height:1.6}
.tc-wall .wmsg.ng{color:#C0392B}
.tc-wall .wn{font-size:12px;color:var(--ink2);margin-top:2px;line-height:1.75}
.wall{margin-top:48px}
.wall[hidden]{display:none}
.wall-h{text-align:center;margin-bottom:22px}
.wall-h h3{font-family:var(--pop);font-weight:900;font-size:clamp(21px,5.4vw,28px);color:var(--ink);line-height:1.5}
.wall-h h3 b{color:var(--rose);font-size:1.3em;margin:0 .06em 0 .2em}
.wall-h p{font-size:13.5px;color:var(--ink2);margin-top:2px}
.wgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:900px){.wgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.tk{position:relative;display:flex;flex-direction:column;gap:6px;min-height:150px;background:#fff;border-radius:22px;padding:14px 12px 12px;border:2.5px dashed var(--c);box-shadow:5px 5px 0 var(--c2);text-align:center}
.tk:nth-child(4n+1){--c:#F2789F;--c2:#FFD3E2;transform:rotate(-1.2deg)}.tk:nth-child(4n+2){--c:#45BD92;--c2:#CDEFE2;transform:rotate(1deg)}
.tk:nth-child(4n+3){--c:#56BDEB;--c2:#D6EEFB;transform:rotate(-.6deg)}.tk:nth-child(4n+4){--c:#E9A91C;--c2:#FFEAA6;transform:rotate(1.3deg)}
.tk .ty{font-family:var(--pop);font-weight:900;font-size:10.5px;letter-spacing:.16em;color:var(--c)}
.tk .to{font-family:var(--pop);font-weight:900;font-size:14.5px;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.tk .ms{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--pop);font-weight:800;font-size:14px;line-height:1.7;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line;word-break:auto-phrase;text-wrap:balance}
.tk .fr{font-family:var(--hand);font-size:13px;color:var(--ink2);text-align:right;overflow-wrap:anywhere}
.tk.new{animation:tkpop .7s ease}
@keyframes tkpop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.07)}100%{transform:scale(1)}}
.wall-empty{text-align:center;font-size:14px;font-weight:700;color:var(--ink2);background:#fff;border-radius:18px;padding:22px 16px;border:2px dashed #F5D3E1}
.wall-empty[hidden]{display:none}
.wall-more{display:block;margin:24px auto 0;font:inherit;font-weight:900;font-size:14px;color:var(--rose);background:#fff;border:2.5px solid var(--pink2);border-radius:999px;padding:9px 28px;cursor:pointer}
.wall-more[hidden]{display:none}
/* カードがたくさんになったら（13枚から）：2段で横に流して、「ぜんぶ見る」で一覧を別の画面に（9/28 のむさん「カードいっぱいになったら、表示の工夫をしてね」）。
   どれだけ増えても、ページの長さは変わらない */
.wgrid[hidden],.wflow[hidden]{display:none}
.wflow{width:100vw;margin-left:calc(50% - 50vw);display:flex;flex-direction:column;gap:14px;padding:4px 0 6px}
.wrow{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.wtrack{display:flex;gap:16px;width:max-content;padding:10px 0;animation:wflow var(--dur,60s) linear infinite;will-change:transform}
.wrow.rev .wtrack{animation-direction:reverse}
.wrow:hover .wtrack{animation-play-state:paused}
.wtrack .tk{flex:none;width:190px}
@keyframes wflow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:620px){.wtrack{gap:12px}.wtrack .tk{width:156px}}
@media(prefers-reduced-motion:reduce){.wrow{overflow-x:auto}}
.wmodal{position:fixed;inset:0;z-index:95;background:rgba(47,37,51,.55);overflow-y:auto;padding:24px 14px}
.wmodal[hidden]{display:none}
.wm-in{max-width:980px;margin:0 auto;background:#FFF0F5;border-radius:26px;padding:6px 16px 24px;box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.wm-h{position:sticky;top:-24px;z-index:2;display:flex;align-items:center;gap:10px;background:#FFF0F5;padding:14px 4px 14px;font-family:var(--pop)}
.wm-h b{font-weight:900;font-size:18px;color:var(--ink)}
.wm-h span{font-weight:900;color:var(--rose)}
.wm-x{margin-left:auto;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:22px;font-weight:900;cursor:pointer;box-shadow:0 3px 0 var(--pink2)}
html.wmopen{overflow:hidden}
/* 本屋さん（たくさん並んでいる） */
.store{position:relative;max-width:780px;margin:0 auto;background:#FFF6E8;border-radius:26px 26px 18px 18px;padding:0 18px 20px;box-shadow:0 22px 40px -30px rgba(47,37,51,.65),8px 8px 0 #F3DFC3}
.awning{position:relative;height:58px;margin:0 -18px;border-radius:26px 26px 0 0;background:repeating-linear-gradient(90deg,#F2789F 0 36px,#fff 36px 72px)}
.awning:after{content:"";position:absolute;left:0;right:0;bottom:-17px;height:18px;background:radial-gradient(circle at 18px 0,#F2789F 17.5px,transparent 18px) 0 0/72px 18px repeat-x,radial-gradient(circle at 54px 0,#fff 17.5px,transparent 18px) 0 0/72px 18px repeat-x}
.sign{display:table;margin:30px auto 10px;font-family:var(--pop);font-weight:900;font-size:15px;letter-spacing:.14em;color:#FFF3D6;background:#9B6A43;border-radius:12px;padding:6px 20px;box-shadow:0 4px 0 #6F4A2D}
.shelf2{background:#F3DBBB;border:10px solid #C08E62;border-radius:14px;padding:0 8px}
.srow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:12px 4px 10px;border-bottom:10px solid #C08E62;margin:0 -8px;padding-left:12px;padding-right:12px}
.srow:last-child{border-bottom:0}
.srow img{border-radius:2px;box-shadow:0 5px 7px -4px rgba(0,0,0,.45)}
.srow img:nth-child(3n+2){transform:rotate(-2deg)}.srow img:nth-child(4n+1){transform:rotate(1.5deg)}
.table{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:22px;margin-top:22px;background:linear-gradient(180deg,#E2B383,#C99561);border-radius:14px;padding:22px 16px 26px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08)}
.stack{width:92px}
.stack img{border-radius:2px;box-shadow:0 3px 0 #fff,0 5px 0 #DCD2C4,0 8px 0 #fff,0 10px 0 #DCD2C4,0 13px 0 #fff,0 15px 0 #DCD2C4,0 18px 0 #fff,0 20px 0 #DCD2C4,0 26px 14px -6px rgba(0,0,0,.35)}
.pop{position:relative;flex:none;width:136px;margin-bottom:6px;background:var(--yel);border:3px solid var(--ink);border-radius:14px;padding:10px 8px 9px;text-align:center;font-family:var(--hand);font-size:14px;line-height:1.5;color:var(--ink);transform:rotate(4deg);box-shadow:4px 4px 0 var(--ink)}
.pop b{display:block;font-family:var(--pop);font-weight:900;font-size:24px;color:var(--rose);line-height:1.2}
.pop .new{position:absolute;right:-18px;top:-22px;filter:drop-shadow(2px 2px 0 var(--ink));transform:rotate(12deg)}
.pop .new .burst{width:54px;height:54px;font-size:12px;background:var(--pink);color:#fff}
.store .peek{position:absolute;right:-26px;top:92px;width:84px;transform:rotate(12deg);filter:drop-shadow(0 6px 8px rgba(47,37,51,.25));animation:floaty 5s ease-in-out infinite}
.store .pb{position:absolute;right:48px;top:74px;font-family:var(--hand);font-size:13px;line-height:1.5;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:4px 10px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg);text-align:center}
@media(max-width:640px){
  .store{padding:0 10px 16px}.awning{margin:0 -10px}
  .srow{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-left:8px;padding-right:8px}.srow img:nth-child(n+5){display:none}
  .table{gap:10px;padding:18px 8px 22px}.stack{width:62px}.stack:nth-child(3){display:none}.pop{width:118px;font-size:12.5px}.pop b{font-size:20px}
  .store .peek{right:-8px;top:78px;width:62px}.store .pb{right:44px;top:66px;font-size:11.5px}
  .sign{margin:28px 0 10px 2px;font-size:13px;padding:5px 14px}
}
.bookinfo{text-align:center;margin-top:26px}
.bookinfo .bt{font-family:var(--pop);font-weight:900;font-size:clamp(20px,5.2vw,26px);color:var(--ink)}
.bookinfo .ba{font-weight:700;color:var(--ink2);margin-top:4px}
.bookinfo .bd{display:inline-block;font-weight:900;font-size:14px;color:var(--ink);background:var(--yel);border-radius:999px;padding:3px 16px;margin-top:10px;box-shadow:0 3px 0 var(--mus)}
/* 予約のお願い：いまはまだ予約しないでね（みんなで一斉に予約するため）。本屋さんの欄で、いちばん目立つように */
.wait{position:relative;display:flex;align-items:center;gap:14px;max-width:560px;margin:26px auto 0;background:var(--yel);border:3px solid var(--ink);border-radius:24px;padding:16px 20px 16px 16px;box-shadow:6px 6px 0 var(--ink);text-align:left;transform:rotate(-1.2deg)}
.wait img{width:72px;flex:none;filter:drop-shadow(0 4px 6px rgba(47,37,51,.2))}
.wait b{display:block;font-family:var(--pop);font-weight:900;font-size:clamp(20px,5.4vw,27px);color:var(--rose);line-height:1.35;text-shadow:2px 2px 0 #fff}
.wait small{display:block;font-size:14px;font-weight:800;color:var(--ink);margin-top:4px;line-height:1.6}
.wait .bw{left:auto;right:-16px;top:-26px;transform:rotate(12deg)}
.wait .burst{width:62px;height:62px;font-size:13px;background:var(--rose);color:#fff}
@media(max-width:480px){.wait{gap:10px;padding:14px 14px 14px 12px}.wait img{width:56px}.wait small{font-size:12.5px}}

/* 申し込み・シェア */
.entry{--bg:#F9E6F4;background:radial-gradient(rgba(255,255,255,.7) 4px,transparent 4.5px) 0 0/30px 30px,linear-gradient(135deg,#FFD6E8,#E7D9FF)}
.entry{overflow-x:clip}
.ewrap{position:relative}
.entry .box{position:relative;z-index:1;background:#fff;border-radius:34px;padding:46px 22px 36px;text-align:center;border:3px dashed var(--pink);box-shadow:10px 10px 0 #D9C3F7}
.entry .lead{font-size:16px;font-weight:700;line-height:2}
.entry .sub{font-size:12.5px;color:var(--ink2);margin-top:12px}
.entry .btn{margin-top:18px;white-space:nowrap}
@media(max-width:480px){.entry .btn{font-size:16px;padding:15px 24px 14px;gap:8px}}   /* 「参加す／る」と1文字だけ折り返していた */
.eb{position:absolute;z-index:2;pointer-events:none}
.eb i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.85) 0 7%,rgba(255,255,255,0) 8%),var(--c);box-shadow:inset -8px -10px 18px rgba(0,0,0,.10);animation:floaty 5s ease-in-out infinite}
.eb i:nth-child(2n){animation-delay:-1.6s}
.eb i:after{content:"";position:absolute;left:50%;top:100%;width:2px;height:46px;background:rgba(47,37,51,.25);transform:translateX(-50%)}
.eb.l{left:-58px;top:-46px;width:130px;height:150px}.eb.r{right:-58px;bottom:14px;width:130px;height:150px}
.entry .box .face{position:absolute;left:50%;top:-50px;width:84px;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 6px 8px rgba(47,37,51,.25))}
@media(max-width:760px){.eb.l{left:-34px;top:-54px;transform:scale(.7);transform-origin:top left}.eb.r{right:-34px;bottom:-10px;transform:scale(.7);transform-origin:bottom right}}
.share{position:relative;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.share a,.share button{font:inherit;font-size:14px;font-weight:900;color:var(--rose);background:#fff;border:2.5px solid var(--pink2);border-radius:999px;padding:8px 18px;cursor:pointer;text-decoration:none}
.share a:hover,.share button:hover{background:#FFF0F5}
/* カードのシェアは小さな丸いSNSアイコン（のむさん「もっと小さく。SNSアイコンに」）。名前は aria-label と title に */
.share.icons{gap:12px}
.share.icons .ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;box-shadow:0 3px 0 rgba(47,37,51,.16);transition:transform .12s}
.share.icons .ic svg{width:22px;height:22px;fill:#fff}
.share.icons .ic.line{background:#06C755}.share.icons .ic.line svg{width:25px;height:25px}
.share.icons .ic.x{background:#111}.share.icons .ic.x svg{width:19px;height:19px}
.share.icons .ic.fb{background:#1877F2}
.share.icons .ic.save{background:var(--rose)}
.share.icons .ic svg.sk{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.share.icons .ic:hover{transform:translateY(-2px)}
footer{padding:36px 0 110px;text-align:center;font-size:12px;color:var(--ink2);line-height:2}
footer b{font-family:var(--pop);font-weight:900;color:var(--ink);font-size:13px}

/* 下に出る申し込みボタン（スマホ） */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,251,242,0),#FFFBF2 40%);text-align:center;transform:translateY(110%);transition:transform .3s}
.sticky.on{transform:none}
.sticky .btn{width:min(420px,100%);padding:14px 20px 13px}
@media(min-width:821px){
  .sticky{left:auto;right:26px;bottom:26px;padding:0;background:none;transform:translateY(160%)}
  .sticky .btn{width:auto;font-size:18px;padding:16px 30px 15px;box-shadow:0 0 0 4px #fff,0 6px 0 4px var(--rose-d),0 18px 34px -10px rgba(194,63,120,.55)}
}

/* 参加登録のポップアップ */
.regm{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(47,37,51,.5)}
.regm.on{display:flex}
.regp{position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:26px;padding:28px 22px 20px;box-shadow:0 30px 80px -30px rgba(0,0,0,.5);border:3px solid var(--pink2)}
.regx{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:#FFF0F5;color:var(--rose);font-size:20px;line-height:1;cursor:pointer}
.regh{font-family:var(--pop);font-weight:900;font-size:19px;color:var(--rose);text-align:center;line-height:1.6}
.regh small{display:block;font-family:var(--maru);font-size:12.5px;color:var(--ink2);font-weight:700}
.regg{display:flex;align-items:center;gap:12px;justify-content:center;margin:12px 0 2px}
.regg[hidden]{display:none}
.regg img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.regg b{display:block;font-size:15px;line-height:1.5}
.regg small{display:block;font-size:12px;color:var(--ink2)}
.regf{display:block;margin:14px 0 0}
.regf span{display:block;font-size:13px;font-weight:900;margin-bottom:4px}
.regf small{font-size:11px;font-weight:500;color:var(--ink2);margin-left:6px}
.regf .rq{color:#C0392B;font-weight:900}
.regf input{width:100%;font:inherit;font-size:16px;color:var(--ink);border:2px solid #EBD3DD;border-radius:14px;padding:11px 12px;background:#fff}
.regf input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(242,120,159,.18)}
.regrec{font-size:12px;line-height:1.75;color:var(--ink2);margin-top:10px}
.regrec b{color:var(--ink)}
.regwarn{font-size:12.5px;font-weight:700;line-height:1.7;color:#7A2E0E;background:#FEF3C7;border-radius:10px;padding:8px 10px;margin-top:8px}
.regwarn[hidden]{display:none}
.regerr{min-height:1.4em;font-size:13px;font-weight:700;color:#C0392B;margin-top:6px}
.regs{width:100%;margin-top:6px}
.regs.busy{opacity:.75;cursor:progress}
.regn{font-size:11.5px;line-height:1.8;color:var(--ink2);margin-top:10px;text-align:center}
html.regopen{overflow:hidden}