/*
 * サイト共通の基盤スタイル(かむあぶプチオンリー2027)。
 * 全ページから <link rel="stylesheet" href="theme.css"> で読み込む。
 *
 * ここに入っているもの: 配色・フォントのCSS変数、リセット、星空/セクション区切り
 * の演出、登場アニメーション、ナビ・モーダル・ライトボックス・フォーム・footer
 * など使い回すUIコンポーネント一式。
 *
 * ここに入っていないもの: 各ページ固有のコンテンツ(index.htmlのヒーロー・更新履歴
 * セクションなど)。それらは各HTMLファイル自身の <style> に残す。
 *
 * フォントを変更したい場合は下の --font-* 変数だけ書き換えればよい
 * （タイトルロゴのフォントもここで一括管理）。
 */
:root{
  --bg:#0b1220; --bg2:#111b2c; --card:#182338; --card2:#1f2c45;
  --text:#eef3fa; --muted:#a7b6c8;
  --line:rgba(238,243,250,.12);
  --blue:#2f7dff; --blue-soft:#7db2ff;
  --wine:#8a2332; --wine-soft:#dd9aa2;
  --indigo:#4a3f8f; --indigo-deep:#2c2456;
  --ink-on-light:#0d1522;

  /* フォント設定(変更はここだけでOK) */
  --font-body: 'Zen Kaku Gothic New', sans-serif;
  --font-heading: 'Zen Kaku Gothic New', sans-serif;
  --font-title-main: 'Dela Gothic One', 'Zen Maru Gothic', sans-serif;
  --font-title-alt: 'RocknRoll One', 'Zen Maru Gothic', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.9; letter-spacing:.02em; position:relative; overflow-x:hidden;}
h1,h2,h3,.heading{font-family:var(--font-heading); font-weight:900;}
img,svg{display:block; max-width:100%;}

/* ---------- default text link decoration ---------- */
a{color:var(--blue-soft); text-decoration:underline; cursor:pointer; position:relative;}
a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--wine-soft); transition:right .25s ease;
}
a:hover::after{right:0;}
.nav-brand::after, .menu-links a::after, .site-map a::after, .sns-links a::after, .btn::after{content:none;}

/* ---------- grain texture + ambient blobs (background depth layer) ---------- */
.grain-overlay{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:180px 180px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.ambient-blob{position:fixed; border-radius:50%; filter:blur(100px); z-index:-1; pointer-events:none;}
.blob-a{width:560px; height:560px; background:var(--blue); opacity:.2; top:-160px; left:-160px;}
.blob-b{width:520px; height:520px; background:var(--wine); opacity:.16; bottom:-140px; right:-140px;}
.blob-c{width:420px; height:420px; background:var(--indigo); opacity:.16; top:40%; left:50%; transform:translateX(-50%);}
@media (prefers-reduced-motion: reduce){ .ambient-blob{opacity:.1;} }

/* ---------- starfield: scroll-driven, with inertia + idle drift when still ---------- */
.starfield{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
.star-layer{position:absolute; left:0; right:0; top:-60%; bottom:-60%; background-repeat:repeat; will-change:transform;}
.star-layer-a{
  background-image:
    radial-gradient(1.3px 1.3px at 5% 8%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 18% 34%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 33% 12%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 41% 58%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.3px 1.3px at 52% 25%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 71%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 68% 9%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 74% 44%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.3px 1.3px at 82% 63%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 20%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 12% 78%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 26% 91%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.3px 1.3px at 47% 85%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 58% 95%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 73% 88%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 88% 92%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.3px 1.3px at 8% 55%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 95% 48%, rgba(255,255,255,.8), transparent);
  background-size:480px 560px;
  opacity:.5;
}
.star-layer-b{
  background-image:
    radial-gradient(2.1px 2.1px at 10% 15%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 30% 45%, rgba(255,255,255,.9), transparent),
    radial-gradient(2.3px 2.3px at 50% 10%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 65% 30%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px at 80% 55%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 22% 70%, rgba(255,255,255,.8), transparent),
    radial-gradient(2.2px 2.2px at 45% 85%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 70% 80%, rgba(255,255,255,.9), transparent),
    radial-gradient(2.1px 2.1px at 90% 25%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 15% 90%, rgba(255,255,255,.75), transparent),
    radial-gradient(2px 2px at 55% 60%, #fff, transparent),
    radial-gradient(1.9px 1.9px at 92% 70%, rgba(255,255,255,.85), transparent);
  background-size:620px 760px;
  opacity:.75;
}
.star-layer-c{
  background-image:
    radial-gradient(2.8px 2.8px at 20% 20%, rgba(255,255,255,.7), transparent),
    radial-gradient(3.1px 3.1px at 60% 15%, rgba(255,255,255,.6), transparent),
    radial-gradient(2.6px 2.6px at 80% 45%, rgba(255,255,255,.65), transparent),
    radial-gradient(3px 3px at 35% 65%, rgba(255,255,255,.55), transparent),
    radial-gradient(2.7px 2.7px at 65% 80%, rgba(255,255,255,.6), transparent),
    radial-gradient(3.2px 3.2px at 10% 80%, rgba(255,255,255,.5), transparent),
    radial-gradient(2.9px 2.9px at 90% 85%, rgba(255,255,255,.6), transparent),
    radial-gradient(2.6px 2.6px at 45% 40%, rgba(255,255,255,.55), transparent);
  background-size:900px 1000px;
  opacity:.4;
}
.star-specials{overflow:visible;}
.star-special{position:absolute; border-radius:50%; background:currentColor; box-shadow:0 0 6px 1px currentColor; animation:twinkle 3.6s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.3; transform:scale(.7);} 50%{opacity:1; transform:scale(1.3);}}
@media (prefers-reduced-motion: reduce){ .star-special{animation:none; opacity:.7;} }

/* ---------- reveal animations ---------- */
.stomp{opacity:0; transform:scale(2.6) rotate(-5deg); filter:blur(8px); transition:transform .75s cubic-bezier(.13,.92,.2,1.4), opacity .4s ease, filter .4s ease;}
.stomp.show{opacity:1; transform:scale(1) rotate(0deg); filter:blur(0);}
.stomp-flash{position:absolute; left:50%; top:50%; width:480px; height:280px; transform:translate(-50%,-50%) scale(.25); border-radius:50%; background:radial-gradient(circle, rgba(125,178,255,.9) 0%, rgba(125,178,255,.35) 42%, transparent 72%); opacity:0; pointer-events:none; z-index:0; mix-blend-mode:screen;}
.stomp-flash.show{animation:flashBurst .85s cubic-bezier(.13,.7,.25,1) forwards;}
@keyframes flashBurst{0%{opacity:1; transform:translate(-50%,-50%) scale(.2);} 55%{opacity:.6;} 100%{opacity:0; transform:translate(-50%,-50%) scale(2.8);}}
@media (prefers-reduced-motion: reduce){ .stomp-flash{display:none;} }
.fade{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade.show{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .stomp,.fade{transition:none; opacity:1; transform:none; filter:none;} }

/* ---------- title-reveal: per-character wipe-in, used on section titles ---------- */
.title-reveal .ch{
  display:inline-block; white-space:pre;
  clip-path:inset(0 100% 0 0);
  transform:translateX(10px);
  opacity:0;
  transition:clip-path .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  transition-delay:var(--d, 0ms);
}
.title-reveal.show .ch{clip-path:inset(0 0% 0 0); transform:translateX(0); opacity:1;}
@media (prefers-reduced-motion: reduce){ .title-reveal .ch{transition:none; clip-path:none; transform:none; opacity:1;} }
/* kinetic scroll typography (scale/blur handled in JS, transition here) */
.section-title{ will-change:transform, filter, opacity; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:40; background:rgba(11,18,32,.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--blue), var(--wine), transparent); opacity:.5;
}
.nav-inner{max-width:1000px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:.9rem 6vw; position:relative;}
.nav-brand{font-family:var(--font-title-main); font-weight:400; font-size:.85rem; white-space:nowrap; color:var(--text); text-decoration:none; flex-shrink:0; transition:opacity .4s ease, transform .4s ease; opacity:0; transform:translateY(-6px);}
.nav-brand.show{opacity:1; transform:translateY(0);}
.nav-brand:hover{opacity:.75;}

.menu-btn{
  display:flex; align-items:center; gap:.6rem; background:none; border:none; cursor:pointer; padding:.4rem .2rem;
  margin-left:auto;
}
.menu-btn-bars{display:flex; flex-direction:column; gap:5px;}
.menu-btn-bars span{display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s ease, opacity .3s ease;}
.menu-btn-label{font-size:.7rem; letter-spacing:.15em; color:var(--muted); font-weight:700;}
.menu-btn:hover .menu-btn-bars span{background:var(--blue-soft);}

.menu-links{display:flex; flex-direction:column; gap:.2rem;}
.menu-links a, .menu-link-btn{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:inherit;
  color:var(--text); text-decoration:none; font-size:.98rem; font-weight:700; padding:.85rem 0;
  border-bottom:1px solid var(--line); transition:color .2s ease, padding-left .2s ease;
}
.menu-links a:hover, .menu-link-btn:hover{color:var(--blue-soft); padding-left:.4rem;}
.menu-links a:last-child{border-bottom:none;}

/* ---------- buttons ---------- */
.btn-row{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center;}
.btn{display:inline-block; font-weight:700; padding:.9rem 2.2rem; border-radius:999px; text-decoration:none; font-size:.9rem; letter-spacing:.03em; transition:transform .15s ease, box-shadow .15s ease; font-family:var(--font-body); border:none; cursor:pointer;}
.btn-blue{background:var(--blue); color:#04101f; animation:pulseGlow 2.6s ease-in-out infinite;}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(47,125,255,.45);} 50%{box-shadow:0 0 0 10px rgba(47,125,255,0);}}
@media (prefers-reduced-motion: reduce){ .btn-blue{animation:none; box-shadow:0 8px 22px -8px rgba(47,125,255,.5);} }
.btn-outline{background:transparent; color:var(--text); border:1px solid var(--line);}
.btn-wine{background:var(--wine); color:#fbe9ea;}
.btn:hover{transform:translateY(-2px);}

/* ---------- nav button / text link (opens modal, or inline text link) ---------- */
.nav-link-btn{
  background:none; border:none; color:var(--muted); font-size:.8rem; font-family:inherit; cursor:pointer;
  padding:.2rem 0; position:relative; flex-shrink:0; white-space:nowrap;
}
.nav-link-btn::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--wine-soft); transition:right .25s ease;}
.nav-link-btn:hover::after{right:0;}
.text-link{
  background:none; border:none; padding:0; margin:0; font:inherit;
  color:var(--blue-soft); text-decoration:underline; cursor:pointer; position:relative;
}
.text-link::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--wine-soft); transition:right .25s ease;}
.text-link:hover::after{right:0;}

/* ---------- page header (non-home) ---------- */
.page-hero{padding:5.5rem 6vw 3rem; text-align:center; background:radial-gradient(120% 100% at 50% 0%, var(--indigo-deep) 0%, var(--bg) 65%);}
.page-hero .section-eyebrow{justify-content:center;}
.page-hero h1{font-size:clamp(1.8rem,5vw,2.6rem); margin:.4rem 0 .6rem;}
.page-hero p{color:var(--muted); font-size:.92rem; max-width:560px; margin:0 auto;}

/* ---------- sections ---------- */
section{position:relative; padding:5.2rem 6vw; max-width:920px; margin:0 auto;}
section, .page-hero{scroll-margin-top:76px;}
section.on-bg2{
  background:rgba(42,32,86,.4);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  max-width:100%; padding-left:0; padding-right:0;
}
section.on-bg2 .inner{max-width:920px; margin:0 auto; padding:0 6vw;}

/* ---------- section-blob: soft blurred accent marking a section transition ---------- */
.section-blob{position:absolute; z-index:-1; border-radius:50%; filter:blur(90px); pointer-events:none; width:340px; height:340px;}
.section-blob.a{background:var(--blue); opacity:.16; top:-70px; left:-110px;}
.section-blob.b{background:var(--wine); opacity:.14; top:-60px; right:-120px;}
.section-blob.c{background:var(--indigo); opacity:.18; top:-90px; left:38%;}
@media (prefers-reduced-motion: reduce){ .section-blob{opacity:.1;} }

.section-head{text-align:center; margin-bottom:2.2rem;}
.section-eyebrow{font-size:.7rem; letter-spacing:.24em; font-weight:700; color:var(--wine-soft); margin-bottom:.55rem; display:flex; align-items:center; gap:.4rem;}
.section-title{font-size:clamp(1.5rem,3.4vw,2rem); margin:0; color:var(--text);}
.lede{max-width:640px; margin:1rem auto 0; text-align:center; font-size:.92rem; color:var(--muted);}
.disclaimer-note{max-width:640px; margin:.7rem auto 0; text-align:center; font-size:.66rem; line-height:1.7; color:var(--muted); opacity:.7;}

.cp-banner{text-align:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.7rem; margin-bottom:2.1rem; font-size:1rem; font-weight:700;}
.cp-banner b{color:var(--blue-soft);}
.cp-banner small{display:block; font-size:.74rem; color:var(--muted); margin-top:.4rem; font-weight:400;}

.info-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.9rem clamp(1.2rem,4vw,2.3rem);}
.info-grid{display:grid; grid-template-columns:auto 1fr; gap:.85rem 1.5rem; font-size:.9rem;}
.info-grid dt{color:var(--blue-soft); white-space:nowrap; font-weight:700;}
.info-grid dd{margin:0; color:var(--text);}

.target-list{list-style:none; margin:0; padding:0; display:grid; gap:.7rem;}
.target-list li{border-radius:12px; padding:.9rem 1.2rem; font-size:.9rem; display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:flex-start;}
.target-list li::before{content:"○"; color:var(--blue-soft); font-weight:700;}
.target-list li.warn::before{content:"×"; color:var(--wine-soft);}
.target-list li.warn{border-color:rgba(138,35,50,.5); background:#241019;}

.track-wrap{display:grid; grid-template-columns:1fr; gap:1.3rem;}
@media(min-width:760px){.track-wrap{grid-template-columns:1fr 1fr;}}
.track{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.6rem 1.5rem; transition:box-shadow .25s ease, transform .25s ease;}
.track:hover{box-shadow:0 22px 40px -22px rgba(0,0,0,.6); transform:translateY(-4px);}
.track-label{display:inline-block; font-size:.7rem; letter-spacing:.05em; font-weight:700; padding:.28rem .78rem; border-radius:999px; margin-bottom:.9rem;}
.track-a .track-label{background:var(--indigo); color:#dfe6ff;}
.track-b .track-label{background:var(--wine); color:#fbe9ea;}
.track h3{margin:.1rem 0 .7rem; font-size:1.02rem;}
.track ul{margin:0; padding-left:1.1rem; font-size:.86rem; color:var(--muted);}
.track li{margin-bottom:.5rem;}
.field-tag{display:inline-block; background:var(--card2); border:1px solid var(--line); border-radius:6px; padding:.08rem .5rem; font-size:.76rem; color:var(--blue-soft); font-weight:700;}
.field-list{display:flex; flex-direction:column; gap:.5rem; margin:0 0 1rem;}
.track-arrow{display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--muted); grid-column:1/-1; margin:-.5rem 0;}
@media(max-width:759px){.track-arrow{transform:rotate(90deg);}}
.callout{background:#211a3d; border:1px solid var(--indigo); border-radius:10px; padding:.85rem 1.1rem; font-size:.8rem; margin-top:1.1rem; color:#c7c3ff;}

/* ---------- timeline ---------- */
.timeline{position:relative; margin-top:1rem; padding-left:14px;}
.timeline::before{content:""; position:absolute; left:52px; top:6px; bottom:6px; width:2px; background-image:linear-gradient(rgba(238,243,250,.28) 60%, transparent 0); background-size:2px 10px; background-repeat:repeat-y;}
.tl-item{position:relative; display:grid; grid-template-columns:88px 1fr; gap:1rem; margin-bottom:1.6rem; align-items:start;}
.tl-item.is-past{opacity:.5;}
.tl-item:last-child{margin-bottom:0;}
.tl-pill{justify-self:end; font-size:.78rem; font-weight:700; color:#fbe9ea; padding:.35rem .7rem; border-radius:8px; text-align:center; position:relative; z-index:1; white-space:nowrap;}
.tl-pill.past{background:var(--card2); color:var(--blue-soft);}
.tl-pill.deadline{background:var(--wine);}
.tl-pill.final{background:var(--blue); color:var(--ink-on-light);}
.tl-body{padding-top:.15rem;}
.tl-body h4{margin:0 0 .3rem; font-size:.92rem; font-weight:700; color:var(--text);}
.tl-body p{margin:0; font-size:.82rem; color:var(--muted);}
.tl-card{display:inline-flex; align-items:center; gap:.6rem; background:var(--wine); color:#fbe9ea; border-radius:10px; padding:.6rem 1rem; margin-top:.5rem; font-size:.82rem; font-weight:700;}
.now-marker{display:flex; align-items:center; gap:.7rem; color:var(--blue-soft); font-weight:700; font-size:.82rem; margin:.4rem 0 1.6rem .5rem; padding-left:102px;}
.now-marker::after{content:""; flex:1; height:2px; background:rgba(47,125,255,.35);}
.now-marker .dot{position:relative; width:10px; height:10px; border-radius:50%; background:var(--blue); flex-shrink:0;}
.now-marker .dot::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--blue); animation:ping 1.8s ease-out infinite;}
@keyframes ping{0%{transform:scale(.6); opacity:.9;} 100%{transform:scale(1.8); opacity:0;}}
@media (prefers-reduced-motion: reduce){ .now-marker .dot::after{animation:none; display:none;} }

.phase-badge{
  display:inline-flex; align-items:center; gap:.6rem; background:var(--card); border:1px solid var(--blue);
  border-radius:999px; padding:.6rem 1.3rem; font-size:.82rem; margin-top:1.2rem; color:var(--text);
}
.phase-badge b{color:var(--blue-soft);}

.audience-tag{display:inline-block; font-size:.68rem; font-weight:700; padding:.15rem .6rem; border-radius:999px; margin-bottom:.4rem;}
.audience-tag.circle{background:rgba(47,125,255,.14); color:var(--blue-soft); border:1px solid rgba(47,125,255,.4);}
.audience-tag.consign{background:rgba(221,154,162,.14); color:var(--wine-soft); border:1px solid rgba(221,154,162,.4);}
.audience-tag.all{background:var(--card2); color:var(--muted); border:1px solid var(--line);}

/* ---------- organizer ---------- */
.comment-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.8rem clamp(1.2rem,4vw,2.2rem); font-size:.9rem; color:var(--text);}
.comment-card .signoff{text-align:right; margin-top:1.2rem; font-size:.85rem; color:var(--muted);}
.comment-card .signoff b{display:block; font-size:1.05rem; color:var(--text); margin-top:.2rem;}
.organizer-card{display:flex; flex-direction:column; gap:1.1rem; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.6rem;}
.organizer-art{display:block; width:100%; height:auto; border-radius:12px; background:linear-gradient(135deg, var(--indigo), var(--wine));}
.organizer-info h3{margin:0 0 .3rem; font-size:1.05rem; color:var(--text);}
.organizer-info p{margin:0; font-size:.84rem; color:var(--muted);}

.updatelog{list-style:none; margin:0; padding:0; display:grid; gap:1rem;}
.updatelog li{display:grid; grid-template-columns:90px 1fr; gap:1rem; font-size:.86rem;}
.updatelog .date{color:var(--wine-soft); font-weight:700;}
.updatelog .content{color:var(--text);}

.flow{display:grid; gap:1.1rem;}
.flow-step{display:grid; grid-template-columns:48px 1fr; gap:1rem; position:relative;}
.flow-num{font-size:1.05rem; background:var(--card2); color:var(--blue-soft); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;}
.flow-step.b .flow-num{background:var(--wine); color:#fbe9ea;}
.flow-step:not(:last-child)::after{content:""; position:absolute; left:23px; top:48px; bottom:-1.1rem; width:1px; background:var(--line);}
.flow-body h3{margin:.05rem 0 .3rem; font-size:.94rem; font-weight:700; color:var(--text);}
.flow-body p{margin:0; font-size:.83rem; color:var(--muted);}

.cta-band{text-align:center; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:2.6rem clamp(1.2rem,5vw,2.8rem);}
.cta-band h3{margin:0 0 .5rem; font-size:1.25rem;}
.cta-band p{margin:0 0 1.5rem; font-size:.85rem; color:var(--muted);}
.deadline-pill{display:inline-block; margin-top:1.1rem; font-size:.74rem; color:var(--blue-soft);}

.notes{font-size:.85rem; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.6rem;}
.notes li{margin-bottom:.45rem;}
.notes li.strong{color:var(--wine-soft); font-weight:700;}

/* ---------- FAQ accordion (animated) ---------- */
.faq-list{display:grid; gap:.9rem;}
.faq-item{border-radius:14px; overflow:hidden; transition:box-shadow .3s ease;}
.faq-item.open{box-shadow:0 14px 30px -16px rgba(47,125,255,.35);}
.faq-summary{
  width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:inherit;
  padding:1.1rem 1.3rem; display:flex; gap:.9rem; align-items:flex-start; font-weight:700; font-size:.92rem; color:var(--text);
}
.faq-bubble{
  width:28px; height:28px; border:2px solid var(--blue-soft); border-radius:50%; color:var(--blue-soft);
  display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:900; flex-shrink:0; margin-top:.05rem;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.faq-item.open .faq-bubble{transform:scale(1.15) rotate(360deg); background:var(--blue); color:var(--ink-on-light); border-color:var(--blue);}
.faq-q-text{flex:1;}
.faq-chevron{margin-left:auto; flex-shrink:0; transition:transform .35s cubic-bezier(.2,.8,.2,1); color:var(--muted); font-size:.8rem; margin-top:.3rem;}
.faq-item.open .faq-chevron{transform:rotate(180deg); color:var(--blue-soft);}
.faq-answer-wrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1);}
.faq-item.open .faq-answer-wrap{grid-template-rows:1fr;}
.faq-answer-inner{overflow:hidden;}
.faq-answer{padding:0 1.3rem 1.2rem 3.9rem; font-size:.87rem; color:var(--muted); opacity:0; transform:translateY(-4px); transition:opacity .3s ease .08s, transform .3s ease .08s;}
.faq-item.open .faq-answer{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .faq-bubble, .faq-chevron, .faq-answer-wrap, .faq-answer{transition:none;}
}

/* ---------- form ---------- */
.form-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:2rem clamp(1.2rem,4vw,2.4rem);}
.form-group{margin-bottom:1.4rem;}
.form-group label{display:block; font-size:.85rem; font-weight:700; margin-bottom:.5rem; color:var(--text);}
.form-group .req{color:var(--wine-soft); font-size:.72rem; font-weight:700; margin-left:.4rem;}
.form-group .opt{color:var(--muted); font-size:.72rem; font-weight:400; margin-left:.4rem;}
.form-control{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px; color:var(--text);
  padding:.75rem .9rem; font-size:.88rem; font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,125,255,.25);}
.form-control::placeholder{color:rgba(167,182,200,.7); opacity:1;}
textarea.form-control{resize:vertical; min-height:90px;}
.radio-row, .check-row{display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.88rem;}
.radio-row label, .check-row label{display:flex; align-items:center; gap:.5rem; cursor:pointer;}
.hint{font-size:.76rem; color:var(--muted); margin-top:.4rem;}
.form-note{background:#1c2338; border:1px solid var(--indigo); border-radius:10px; padding:1rem 1.2rem; font-size:.8rem; color:#c7c3ff; margin-bottom:2rem;}
.submit-row{text-align:center; margin-top:2rem;}

footer{background:var(--bg2); border-top:1px solid var(--line); color:var(--muted); text-align:center; padding:2.6rem 6vw 2.2rem; font-size:.78rem;}
footer .heading{font-size:1rem; color:var(--text); margin-bottom:.5rem; display:block;}
footer a{text-decoration:underline; text-underline-offset:3px; color:var(--blue-soft);}
.site-map{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin:1.2rem 0;}
.site-map a{
  border:1px solid var(--line); background:rgba(31,44,69,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:999px; padding:.45rem 1.1rem; font-size:.78rem; text-decoration:none; color:var(--muted);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), color .2s ease, border-color .2s ease, background .2s ease;
  display:inline-block;
}
.site-map a:hover{transform:translateY(-2px); color:var(--text); border-color:var(--blue-soft); background:rgba(47,125,255,.12);}

/* ---------- password gate (followers-only page) ---------- */
.pw-gate{
  position:fixed; inset:0; z-index:210; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:6vw;
}
html.pw-gate-ok .pw-gate{display:none;}
.pw-gate-card{
  max-width:380px; width:100%; background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:2.2rem 1.8rem; text-align:center;
}
.pw-gate-icon{font-size:2rem; margin-bottom:1rem;}
.pw-gate-text{font-size:.85rem; color:var(--muted); line-height:1.8; margin:0 0 1.4rem;}

/* ---------- age / content gate (cushion page) ---------- */
.age-gate{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:6vw;
  animation:gateIn .4s ease both;
}
@keyframes gateIn{from{opacity:0;} to{opacity:1;}}
.age-gate.gate-hide{animation:gateOut .35s ease forwards;}
@keyframes gateOut{to{opacity:0; visibility:hidden;}}
html.gate-ok .age-gate{display:none;}
.age-gate-card{
  max-width:420px; width:100%; background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:2.2rem 1.8rem; text-align:center;
}
.age-gate-icon{font-size:2.4rem; margin-bottom:1rem;}
.age-gate-text{font-size:.88rem; color:var(--muted); line-height:1.85; margin:0 0 1.8rem;}
.age-gate-text b{color:var(--text);}
.age-gate-buttons{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;}

/* ---------- circle list + carousel ---------- */
.circle-carousel{position:relative; margin:0 -6vw; padding:0 6vw;}
.circle-carousel::before, .circle-carousel::after{
  content:""; position:absolute; top:0; bottom:0; width:6vw; z-index:2; pointer-events:none;
}
.circle-carousel::before{left:0; background:linear-gradient(90deg, var(--bg), transparent);}
.circle-carousel::after{right:0; background:linear-gradient(-90deg, var(--bg), transparent);}
.circle-grid{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding:0 6vw;
  padding:.2rem .2rem 1rem; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.circle-grid::-webkit-scrollbar{display:none;}
.circle-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border-radius:50%;
  background:var(--card); border:1px solid var(--line); color:var(--text); font-size:1.1rem; cursor:pointer;
}
.circle-nav:hover{background:var(--card2);}
.circle-nav.prev{left:-6px;}
.circle-nav.next{right:-6px;}
@media(max-width:639px){.circle-nav{display:none;}}
.circle-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  flex:0 0 auto; width:min(78vw, 300px); scroll-snap-align:start;
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
}
.circle-card:hover{transform:translateY(-3px); box-shadow:0 18px 32px -20px rgba(0,0,0,.6);}
.circle-art{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.circle-cut{
  width:100%; aspect-ratio:4/3; background:linear-gradient(135deg, var(--indigo), var(--wine));
  display:flex; align-items:center; justify-content:center; font-weight:900;
  color:var(--text); font-size:2.6rem; text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.circle-info{padding:1.1rem 1.2rem 1.3rem;}
.circle-info h3{margin:0 0 .3rem; font-size:.98rem; color:var(--text);}
.circle-info .space-no{
  display:inline-block; background:var(--card2); border:1px solid var(--line); border-radius:6px;
  padding:.05rem .5rem; font-size:.74rem; color:var(--blue-soft); font-weight:700; margin-bottom:.4rem;
}
.circle-info p{margin:0; font-size:.82rem; color:var(--muted);}
.circle-info .circle-link{font-size:.78rem; color:var(--blue-soft); text-decoration:none;}
.circle-count{text-align:center; font-size:.85rem; color:var(--muted); margin-bottom:1.6rem;}
.circle-count b{color:var(--text); font-size:1.1rem;}
.sample-badge{
  display:inline-block; background:var(--wine); color:#fbe9ea; font-size:.68rem; font-weight:700;
  padding:.15rem .55rem; border-radius:999px; margin-left:.5rem; vertical-align:middle;
}

/* ---------- SNS icon badges ---------- */
.sns-icon{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px;
  font-size:.72rem; font-weight:900; flex-shrink:0; vertical-align:middle; margin-right:.3rem;
}
.sns-icon.x{background:#0d0d0d; color:#fff; border:1px solid var(--line);}
.sns-icon.pixiv{background:#0096fa; color:#fff;}
.sns-icon.other{background:var(--card2); color:var(--blue-soft); border:1px solid var(--line);}
.sns-icon.disabled{opacity:.32; filter:grayscale(1);}
.sns-links{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem;}
.sns-links a{display:inline-flex; align-items:center; font-size:.8rem; color:var(--muted); text-decoration:none;}
.sns-links a:hover{color:var(--blue-soft);}

/* ---------- perks (distributed items) ---------- */
.perk-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.4rem; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.perk-card:hover{transform:translateY(-4px); box-shadow:0 20px 34px -20px rgba(0,0,0,.55);}
.perk-icon{
  width:52px; height:52px; margin:0 auto .9rem; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--card2); border:1px solid var(--line);
}
.perk-card h3{margin:0 0 .5rem; font-size:1rem; color:var(--text);}
.perk-card p{margin:0; font-size:.82rem; color:var(--muted);}
.perk-tag{
  display:inline-block; font-size:.68rem; font-weight:700; color:var(--blue-soft); background:var(--card2);
  border:1px solid var(--line); border-radius:999px; padding:.15rem .6rem; margin-bottom:.7rem;
}
.perk-grid{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:.8rem;}
.perk-grid .perk-card:nth-child(1){grid-column:1/3; grid-row:1; display:flex; flex-direction:row; align-items:center; gap:1.1rem; text-align:left; padding:1.3rem 1.4rem;}
.perk-grid .perk-card:nth-child(1) .perk-icon{margin:0; flex-shrink:0;}
.perk-grid .perk-card:nth-child(1) .perk-text{flex:1; min-width:0;}
.perk-grid .perk-card:nth-child(2){grid-column:1; grid-row:2;}
.perk-grid .perk-card:nth-child(3){grid-column:2; grid-row:2;}
@media(min-width:700px){
  .perk-grid{grid-template-columns:1.3fr 1fr; grid-template-rows:auto auto; gap:1rem;}
  .perk-grid .perk-card:nth-child(1){grid-column:1; grid-row:1/3; flex-direction:column; text-align:center; padding:1.5rem 1.4rem;}
  .perk-grid .perk-card:nth-child(1) .perk-icon{margin:0 auto .9rem;}
  .perk-grid .perk-card:nth-child(1) .perk-text{flex:none; width:100%;}
  .perk-grid .perk-card:nth-child(2){grid-column:2; grid-row:1;}
  .perk-grid .perk-card:nth-child(3){grid-column:2; grid-row:2;}
}

/* ---------- unified bunny-silhouette icon (replaces decorative emoji) ---------- */
.bunny{
  display:inline-block; position:relative; width:20px; height:20px; border-radius:50% 50% 50% 42%;
  flex-shrink:0;
}
.bunny::before, .bunny::after{
  content:""; position:absolute; top:-7px; width:6px; height:12px; background:inherit; border-radius:50% 50% 0 0;
}
.bunny::before{left:3px; transform:rotate(-14deg);}
.bunny::after{right:3px; transform:rotate(14deg);}
.bunny.blue{background:var(--blue-soft);}
.bunny.wine{background:var(--wine-soft);}
.bunny.gold{background:#e0a94f;}
.bunny.lg{width:30px; height:30px;}
.bunny.lg::before, .bunny.lg::after{top:-10px; width:9px; height:17px;}
.bunny.lg::before{left:4px;}
.bunny.lg::after{right:4px;}

/* ---------- path tabs (index-tab style) ---------- */
.path-tabs{display:flex; gap:.3rem; padding-left:.6rem; position:relative; z-index:2; width:100%; box-sizing:border-box;}
.path-tab{
  position:relative; top:3px; flex:1 1 0; min-width:0; overflow:hidden; padding:.7rem .4rem .6rem; border-radius:14px 14px 0 0;
  border:1px solid var(--line); border-bottom:none; background:var(--bg2); color:var(--muted);
  font-weight:700; cursor:pointer; font-size:.74rem;
  transition:background .2s ease, color .2s ease, top .2s ease; box-shadow:0 -2px 8px rgba(0,0,0,.12);
  text-align:center; white-space:normal; line-height:1.25;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; min-height:64px;
}
@media(min-width:600px){
  .path-tab{flex:0 0 auto; padding:.75rem 1.4rem .65rem; font-size:.85rem; flex-direction:row; min-height:auto;}
  .path-tabs{width:auto;}
}
.path-tab::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:14px 14px 0 0;
  background:transparent; transition:background .2s ease;
}
.path-tab:hover{color:var(--text);}
.path-tab.active{background:var(--card); top:0; z-index:3; box-shadow:0 -4px 10px rgba(0,0,0,.18);}
.path-tab.active.a{color:var(--blue-soft);}
.path-tab.active.a::before{background:var(--blue);}
.path-tab.active.b{color:var(--wine-soft);}
.path-tab.active.b::before{background:var(--wine);}
.path-tab.active.c{color:#f0c987;}
.path-tab.active.c::before{background:#e0a94f;}
.path-panel{
  display:none; position:relative; z-index:1; background:var(--card); border:1px solid var(--line);
  border-radius:0 16px 16px 16px; padding:1.8rem clamp(1rem,4vw,2rem); margin-top:-1px; box-sizing:border-box; width:100%;
}
.path-panel.active{display:block; animation:panelIn .45s cubic-bezier(.2,.85,.25,1);}
@keyframes panelIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){ .path-panel.active{animation:none;} }
.path-panel .form-card{background:transparent; border:none; padding:0;}
.path-flow{display:grid; gap:1.1rem;}
.path-step{display:grid; grid-template-columns:44px 1fr; gap:1rem; position:relative;}
.path-step-num{
  font-size:1rem; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.path-panel.a .path-step-num{background:var(--card2); color:var(--blue-soft);}
.path-panel.b .path-step-num{background:var(--card2); color:var(--wine-soft);}
.path-step:not(:last-child)::after{content:""; position:absolute; left:21px; top:44px; bottom:-1.1rem; width:1px; background:var(--line);}
.path-step-body h4{margin:0 0 .3rem; font-size:.95rem; font-weight:700; color:var(--text);}
.path-step-body p{margin:0; font-size:.85rem; color:var(--muted);}
.path-step-body .callout{margin-top:.6rem;}

/* ---------- organizer modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,10,18,.6); backdrop-filter:blur(2px); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.modal-backdrop.open{opacity:1; pointer-events:auto;}
.modal-panel{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 88vw); background:var(--bg2); z-index:61;
  border-left:1px solid var(--line); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.85,.3,1.15);
  box-shadow:-20px 0 50px -20px rgba(0,0,0,.6);
}
.modal-panel.open{transform:translateX(0);}
.modal-scroll{height:100%; overflow-y:auto; padding:4.2rem 1.6rem 2.5rem;}
.modal-close{
  position:absolute; top:1.1rem; right:1.2rem; z-index:2; background:var(--card); border:1px solid var(--line);
  color:var(--text); width:36px; height:36px; border-radius:50%; font-size:1.1rem; cursor:pointer; line-height:1;
}
.modal-close:hover{background:var(--card2);}

/* ---------- lightbox (reusable: tap any .zoomable image to view full-size) ---------- */
.zoomable{cursor:zoom-in; transition:opacity .2s ease;}
.zoomable:hover{opacity:.92;}
.lightbox{
  position:fixed; inset:0; z-index:90; background:rgba(6,10,18,.9); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:2.4rem;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 30px 70px -20px rgba(0,0,0,.7); cursor:zoom-out;}
.lightbox-close{
  position:absolute; top:1.2rem; right:1.4rem; background:var(--card); border:1px solid var(--line);
  color:var(--text); width:40px; height:40px; border-radius:50%; font-size:1.2rem; cursor:pointer; line-height:1;
}
.lightbox-close:hover{background:var(--card2);}

/* ---------- glassmorphism surface upgrade ---------- */
.info-card, .cp-banner, .track, .perk-card, .circle-card, .comment-card, .organizer-card,
.faq-item, .form-card, .notes, .cta-band, .path-panel, .age-gate-card, .modal-panel,
.phase-badge, .form-note, .target-list li {
  background: rgba(24,35,56,.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -14px rgba(0,0,0,.55);
}
.target-list li.warn{ background: rgba(138,35,50,.22); }

/* ---------- bento grid: about (cp-banner + info-card) ---------- */
.about-bento .cp-banner{
  font-size:1.1rem; padding:1.6rem 1.8rem; position:relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(125,178,255,.3), 0 14px 34px -16px rgba(47,125,255,.3);
}
@media(min-width:760px){
  .about-bento{display:grid; grid-template-columns:1fr 1.35fr; gap:1.2rem; align-items:stretch;}
  .about-bento .cp-banner{margin-bottom:0; display:flex; flex-direction:column; justify-content:center; font-size:1.05rem;}
}