@charset "UTF-8";
/* =========================================================
   なんばTSUNAGUフェス2026 ブランドサイト
   都会 × 防災 × フェス × 若者 ／ ブルー(安心)+オレンジ(活気)+ホワイト
   アクセント＝TSUNAGUロゴのマルチカラー
   ========================================================= */
:root{
  /* 防災＝ブルー */
  --blue-900:#062A63; --blue-700:#0A47A8; --blue:#0B57D0; --blue-400:#5B96F5; --blue-100:#DCE9FF; --wash:#F3F7FF;
  /* 活気＝オレンジ */
  --or:#FF6A13; --or-600:#E85400; --or-100:#FFEDE2;
  /* TSUNAGUブランド（ロゴ・既存協賛サイトと共通） */
  --turq:#1FB6C9; --lime:#8DC63F; --yellow:#F5C518; --magenta:#E6007E; --green:#46A93B; --teal:#15A089;
  /* 基本 */
  --ink:#0E1B2E; --ink-2:#26374F; --sub:#5C6E86; --faint:#93A3B8; --line:#E2EAF3; --bg:#fff;
  --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --en:"Outfit",system-ui,sans-serif;
  --fes:linear-gradient(100deg,var(--magenta),var(--yellow) 30%,var(--lime) 58%,var(--turq) 100%);
  --shadow:0 24px 60px rgba(11,42,86,.12);
  --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{font-family:var(--jp);color:var(--ink);background:var(--bg);line-height:1.9;font-size:16px;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.pc{display:inline}.sp{display:none}
@media(max-width:760px){.pc{display:none}.sp{display:inline}}

/* ---------- progress / header ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--fes);z-index:300}
#hdr{position:fixed;inset:0 0 auto;z-index:200;padding:16px 0;transition:.38s}
#hdr.solid{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);box-shadow:0 6px 26px rgba(11,42,86,.08);padding:9px 0}
/* ヒーローが彩度の高い明色になったので、スクロール前のヘッダーは
   白文字＋濃いフチで抜く（薄い影だけだとオレンジ地に負ける） */
#hdr:not(.solid) .brand-tx{color:#fff;
  text-shadow:0 1px 0 rgba(20,16,58,.7),0 2px 14px rgba(20,16,58,.55)}
#hdr:not(.solid) .brand-logo{filter:drop-shadow(0 2px 6px rgba(20,16,58,.5))}
#hdr:not(.solid) .nav-links a:not(.nav-cta){color:#fff;font-weight:800;
  text-shadow:0 1px 0 rgba(20,16,58,.65),0 2px 12px rgba(20,16,58,.5)}
#hdr:not(.solid) .nav-links a:not(.nav-cta):hover{color:#FFE14D}
#hdr:not(.solid) .burger span{background:#fff;box-shadow:0 1px 3px rgba(20,16,58,.5)}
#hdr:not(.solid) .scrolldown{color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-logo,.brand svg{width:42px;height:42px;object-fit:contain}
.brand-tx{font-family:var(--jp);font-weight:900;font-size:15px;letter-spacing:.02em;line-height:1.3}
.brand-tx b{font-family:var(--en);font-weight:900;letter-spacing:.01em}
.nav-links{display:flex;align-items:center;gap:22px;font-size:13.5px;font-weight:700}
.nav-links a{position:relative;color:var(--ink-2);transition:.25s;white-space:nowrap}
.nav-links a:hover{color:var(--blue)}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--fes);transition:.3s}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{background:var(--or);color:#fff!important;padding:10px 18px;border-radius:999px;box-shadow:0 8px 20px rgba(255,106,19,.3)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(255,106,19,.42)}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:2px;background:var(--ink);transition:.3s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger.on span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){top:21px;transform:rotate(-45deg)}
.drawer{display:none;position:fixed;inset:64px 0 auto;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);
  padding:14px 22px 26px;box-shadow:0 20px 40px rgba(11,42,86,.14);max-height:calc(100vh - 64px);overflow:auto}
.drawer a{display:block;padding:13px 4px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px}
.drawer-cta{margin-top:16px;background:var(--or);color:#fff;text-align:center;border-radius:999px;border:0!important}
@media(max-width:980px){
  .nav-links{display:none}.burger{display:block}
  .drawer.open{display:block}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px;
  padding:15px 28px;border-radius:999px;border:0;cursor:pointer;transition:.32s cubic-bezier(.2,.8,.3,1);position:relative;overflow:hidden}
.btn::after{content:"→";font-family:var(--en);font-weight:700;transition:.3s}
.btn:hover::after{transform:translateX(4px)}
.btn-orange{background:var(--or);color:#fff;box-shadow:0 14px 30px rgba(255,106,19,.34)}
.btn-orange:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(255,106,19,.44)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 14px 30px rgba(11,87,208,.28)}
.btn-blue:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(11,87,208,.4)}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--ink);border:1.6px solid var(--line);backdrop-filter:blur(6px)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--blue);color:var(--blue)}
.btn-block{width:100%}

/* ---------- hero（音楽フェスのチラシ風MV／ビビッド配色＋写真コラージュ） ----------
   暗幕で沈めるのではなく、彩度の高いグラデーションの上に写真を soft-light で重ねて
   明るいまま質感を出す。文字は白ベタ＋濃色フチ（ステッカー処理）で読ませる。      */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding:124px 0 96px;color:#fff;isolation:isolate;
  background:linear-gradient(135deg,#FF7A18 0%,#FF3D8B 36%,#8B4BF6 66%,#12B8CE 100%)}
/* z-index を付けると .hero-media が独立した合成対象になり、
   .collage の mix-blend-mode が下のグラデーションと混ざらなくなるので付けない */
.hero-media{position:absolute;inset:0}

/* 写真コラージュ背景 */
.collage{position:absolute;inset:-5%;display:grid;gap:7px;
  grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);
  mix-blend-mode:soft-light;opacity:.85}
.collage .cg{background-size:cover;background-position:center;opacity:0;
  animation:cgIn 1.1s both,cgDrift 30s ease-in-out infinite alternate;
  animation-delay:calc(var(--i)*.08s),calc(var(--i)*.6s)}
@keyframes cgIn{to{opacity:1}}
@keyframes cgDrift{from{transform:scale(1.05)}to{transform:scale(1.15)}}

/* 放射状の光線 */
.rays{position:absolute;top:-28%;left:50%;width:150vmax;height:150vmax;transform:translateX(-50%);
  pointer-events:none;opacity:.16;animation:spin 90s linear infinite;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.95) 0deg 5deg,transparent 5deg 14deg)}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
/* ハーフトーンのドット */
.halftone{position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(rgba(20,16,58,.85) 1.4px,transparent 1.5px);background-size:9px 9px}
.collage .cg:nth-child(1){background-image:url('../img/hero.jpg')}
.collage .cg:nth-child(2){background-image:url('../img/c/immersive.jpg')}
.collage .cg:nth-child(3){background-image:url('../img/collection-1.jpg')}
.collage .cg:nth-child(4){background-image:url('../img/c/dj.jpg')}
.collage .cg:nth-child(5){background-image:url('../img/c/air.jpg')}
.collage .cg:nth-child(6){background-image:url('../img/stage-1.jpg')}
.collage .cg:nth-child(7){background-image:url('../img/kids-1.jpg')}
.collage .cg:nth-child(8){background-image:url('../img/c/ennichi.jpg')}

/* 色を締めるだけの薄いウォッシュ（暗幕にはしない） */
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(130% 100% at 12% 38%,rgba(255,225,77,.28),transparent 55%),
  linear-gradient(180deg,rgba(20,16,58,.42) 0%,transparent 22%,transparent 62%,rgba(20,16,58,.34) 100%)}
/* 斜めに走る光 */
.beam{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.3) 48%,transparent 62%);
  animation:beam 8s ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.25}50%{opacity:.7}}
.grain{position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:22px 22px}

/* 「入場無料」の star バッジ */
.starburst{position:absolute;top:16%;right:4.5%;z-index:3;width:132px;height:132px;display:grid;place-items:center;
  color:#14103A;background:#FFE14D;animation:rise .9s 1s both,wobble 5s ease-in-out 1.9s infinite;
  clip-path:polygon(50% 0%,61% 12%,77% 6%,81% 23%,97% 25%,92% 41%,105% 50%,92% 59%,97% 75%,81% 77%,77% 94%,61% 88%,
    50% 100%,39% 88%,23% 94%,19% 77%,3% 75%,8% 59%,-5% 50%,8% 41%,3% 25%,19% 23%,23% 6%,39% 12%);
  filter:drop-shadow(0 10px 24px rgba(20,16,58,.35))}
.starburst span{font-weight:900;font-size:21px;line-height:1.15;text-align:center;letter-spacing:.02em}
@keyframes wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

.hero-inner{position:relative;z-index:2}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--en);font-weight:900;font-size:12.5px;
  letter-spacing:.26em;color:#FFE14D;background:#14103A;border:0;
  padding:9px 18px;border-radius:999px;margin-bottom:22px;animation:rise .8s .05s both;
  box-shadow:0 8px 22px rgba(20,16,58,.32)}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#FF3D8B;box-shadow:0 0 0 4px rgba(255,61,139,.35);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,61,139,0)}}

/* 下限を小さめに取る。38px だと iPhone 幅で「が」だけ次行に落ちる
   明るい背景なので、白ベタに濃色のフチ＋落ち影を付けて読ませる（ステッカー処理） */
.hero-h1{font-weight:900;font-size:clamp(30px,8.4vw,94px);line-height:1.08;letter-spacing:-.03em;color:#fff;
  text-shadow:
    3px 0 0 #14103A,-3px 0 0 #14103A,0 3px 0 #14103A,0 -3px 0 #14103A,
    2px 2px 0 #14103A,-2px 2px 0 #14103A,2px -2px 0 #14103A,-2px -2px 0 #14103A,
    0 9px 0 rgba(20,16,58,.22),0 18px 32px rgba(20,16,58,.3)}
.hero-h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero-h1 .ln:nth-child(1) .w{animation:rise .95s .15s both}
.hero-h1 .ln:nth-child(2) .w{animation:rise .95s .3s both}
.hero-h1 .w{display:inline-block}
/* 「フェス」はベタ塗りの黄色。グラデ文字はフチと併用できないため */
.hero-h1 em{font-style:normal;color:#FFE14D}
.gradtx{background:var(--fes);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:slide 7s linear infinite}
@keyframes slide{to{background-position:200% 0}}
@keyframes rise{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
.hero-sub{margin-top:20px;font-size:clamp(15px,2.1vw,19px);font-weight:900;color:#fff;animation:rise .9s .5s both;
  text-shadow:0 2px 0 rgba(20,16,58,.55),0 6px 20px rgba(20,16,58,.4)}

/* ラインナップのバッジ列（白と黄色のベタで彩度の高い背景から抜く） */
.hero-lineup{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;animation:rise .9s .6s both}
.hero-lineup li{font-size:12.5px;font-weight:900;padding:9px 16px;border-radius:999px;line-height:1;
  background:#fff;color:#14103A;white-space:nowrap;box-shadow:0 5px 0 rgba(20,16,58,.22)}
.hero-lineup li:nth-child(4n+1){background:#FFE14D;color:#14103A}
.hero-lineup li:nth-child(4n+3){background:#14103A;color:#fff}

/* でかい日付ロックアップ。白ベタのパネルにして紙のチラシらしく抜く */
.hero-lock{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:30px;padding:22px 26px;
  border-radius:22px;background:#fff;color:#14103A;animation:rise .9s .7s both;
  box-shadow:0 12px 0 rgba(20,16,58,.22),0 26px 50px rgba(20,16,58,.3)}
.hl-date{display:flex;align-items:baseline;gap:10px;font-family:var(--en)}
.hl-y{font-size:14px;font-weight:900;color:rgba(20,16,58,.45);letter-spacing:.08em}
.hl-md{font-size:clamp(48px,9.4vw,88px);font-weight:900;line-height:.86;letter-spacing:-.04em;color:#14103A}
.hl-md i{font-style:normal;color:#FF3D8B}
.hl-dow{font-size:clamp(18px,2.6vw,24px);font-weight:900;color:#FF6A13;letter-spacing:.04em}
.hl-info p{font-size:13.5px;color:#4A4670;line-height:1.75}
.hl-info .hl-time{font-family:var(--en);font-size:19px;font-weight:900;color:#14103A;letter-spacing:.01em}
.hl-free{color:#E1187A;font-weight:900}
/* カウントダウン */
.hl-count{margin-left:auto;font-family:var(--en);font-weight:900;font-size:13px;color:#FFE14D;text-align:center;
  background:#14103A;padding:14px 22px;border-radius:16px;line-height:1.2}
.hl-count b{display:block;font-size:30px;letter-spacing:-.02em;color:#fff}
.hl-count:empty{display:none}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;animation:rise .9s .82s both}
.hero .btn-orange{background:#14103A;box-shadow:0 8px 0 rgba(20,16,58,.3)}
.hero .btn-orange:hover{background:#221C56}
.hero .btn-blue{background:#fff;color:#14103A;box-shadow:0 8px 0 rgba(20,16,58,.22)}
.hero .btn-blue:hover{background:#FFE14D}
.hero .btn-ghost{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.75);backdrop-filter:blur(6px)}
.hero .btn-ghost:hover{border-color:#fff;color:#14103A;background:#fff}
/* 理念コピーは主役を譲って下に置く */
.hero-mission{margin-top:30px;padding-left:15px;border-left:3px solid #FFE14D;
  font-size:13.5px;font-weight:900;letter-spacing:.03em;color:#fff;animation:rise .9s .9s both;
  text-shadow:0 2px 8px rgba(20,16,58,.5)}

.scrolldown{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--en);
  font-size:10px;font-weight:700;letter-spacing:.3em;color:rgba(255,255,255,.6);text-align:center}
.scrolldown span{display:block;width:1px;height:40px;background:rgba(255,255,255,.45);margin:8px auto 0;animation:drop 1.9s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}
  60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:1100px){.starburst{width:108px;height:108px;top:13%;right:3%}.starburst span{font-size:17px}}
@media(max-width:820px){
  .collage{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr)}
  .hl-count{margin-left:0}
  .starburst{display:none}   /* 狭い画面では見出しに重なるので出さない */
}
@media(max-width:520px){
  .hero{padding:104px 0 80px}
  .hero-lock{padding:18px 18px;gap:14px 20px}
  .hero-lineup li{font-size:11.5px;padding:8px 13px}
}
/* 視差や点滅を減らす設定の人には、回る光線とバッジの揺れを止める */
@media(prefers-reduced-motion:reduce){
  .rays,.starburst,.beam,.collage .cg{animation:none!important}
}

/* ---------- ticker ---------- */
.ticker{background:var(--blue-900);color:#fff;padding:14px 0;overflow:hidden;white-space:nowrap}
.ticker-in{display:inline-flex;align-items:center;gap:20px;animation:mq 34s linear infinite;font-family:var(--jp);font-weight:700;font-size:14px}
.ticker-in i{color:var(--yellow);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- section base ---------- */
.block{padding:92px 0;position:relative}
.block-tint{background:var(--wash)}
.block-dark{background:var(--blue-900);color:#fff}
.block-fes{background:linear-gradient(170deg,#fff 0%,#FFF7EC 55%,#F0FBFA 100%)}
.kicker{font-family:var(--en);font-weight:800;font-size:11.5px;letter-spacing:.3em;color:var(--blue);text-align:center;margin-bottom:14px}
.kicker-l{color:var(--yellow)}
.htitle{font-weight:900;font-size:clamp(25px,4.4vw,42px);line-height:1.42;text-align:center;letter-spacing:-.01em;color:var(--blue-900)}
.htitle-l{color:#fff}
.hlead{text-align:center;color:var(--sub);max-width:760px;margin:20px auto 0;font-size:15px}
.hlead-l{color:#B9CBE6}
.hl{background:linear-gradient(transparent 60%,rgba(245,197,24,.55) 0);font-weight:900;color:var(--ink)}
.block-dark .hl{color:#fff;background:linear-gradient(transparent 60%,rgba(31,182,201,.5) 0)}
.sub-h{font-weight:900;font-size:19px;margin:52px 0 16px;color:var(--blue-900);display:flex;align-items:center;gap:10px}
.sub-h::before{content:"";width:5px;height:20px;border-radius:3px;background:var(--fes)}
.tbd{display:inline-block;font-size:12px;color:var(--faint)}
.center{text-align:center}
.reveal{opacity:0;transform:translateY(40px);transition:.85s cubic-bezier(.2,.8,.25,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media(max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}

/* ---------- photo placeholder ---------- */
.ph{position:relative;border-radius:var(--r);overflow:hidden;background:
  linear-gradient(135deg,rgba(31,182,201,.16),rgba(141,198,63,.16) 45%,rgba(245,197,24,.14));
  border:1px dashed rgba(11,87,208,.24);display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.ph::after{content:attr(data-label);font-size:12px;color:#6D86A6;font-weight:700;text-align:center;padding:0 14px;letter-spacing:.02em}
.ph.has-img{border:0}
.ph.has-img::after{display:none}
.ph-4x3{aspect-ratio:4/3}.ph-1x1{aspect-ratio:1/1}.ph-16x9{aspect-ratio:16/9}.ph-3x4{aspect-ratio:3/4}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;margin-top:52px}
.about-copy p{margin-bottom:16px;font-size:15.5px;color:var(--ink-2)}
.about-copy b{font-weight:900;color:var(--blue-900)}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:26px}}
.stats{margin-top:58px;background:var(--blue-900);border-radius:26px;padding:42px 26px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:18px;box-shadow:var(--shadow)}
.stat{text-align:center}
.stat .v{font-family:var(--en);font-weight:900;font-size:clamp(28px,4.2vw,44px);line-height:1;
  background:var(--fes);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:slide 7s linear infinite}
.stat .l{font-size:11.5px;color:#9FB4D2;margin-top:10px;font-weight:700}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:26px 12px}}

/* ---------- concept ---------- */
.ccard{background:#fff;border-radius:var(--r);padding:32px 26px;border:1px solid var(--line);transition:.4s;position:relative;overflow:hidden}
.ccard::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--fes)}
.ccard:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.cnum{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:34px;padding:0 14px;border-radius:999px;
  background:var(--blue);color:#fff;font-weight:900;font-size:14px;margin-bottom:16px}
.cnum.cn2{background:var(--or)}.cnum.cn3{background:var(--teal)}
.ccard h3{font-size:18px;font-weight:900;margin-bottom:10px;color:var(--blue-900)}
.ccard p{font-size:14px;color:var(--sub)}
.concept-foot{margin-top:34px;text-align:center;font-size:15px;color:var(--ink-2)}
.concept-foot b{color:var(--blue);font-weight:900}

/* ---------- project steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;transition:.4s}
.step:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.step .sn{font-family:var(--en);font-weight:900;font-size:30px;color:var(--blue-100);line-height:1;display:block}
.step h3{font-size:16.5px;font-weight:900;margin:6px 0 8px;color:var(--blue-900)}
.step p{font-size:13.5px;color:var(--sub);margin-bottom:16px;min-height:60px}
.quote{margin-top:52px;background:#fff;border-radius:26px;padding:44px 32px;text-align:center;border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.quote::before{content:"“";position:absolute;top:6px;left:26px;font-family:var(--en);font-size:78px;color:var(--blue-100);line-height:1}
.quote p{font-size:clamp(16px,2.3vw,21px);font-weight:700;line-height:1.9;color:var(--ink)}
.quote p b{color:var(--blue);font-weight:900}
.qmeta{display:block;margin-top:18px;font-size:12.5px;color:var(--faint);font-weight:700}

/* ---------- contents cards ---------- */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
@media(max-width:1000px){.cgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.cgrid{grid-template-columns:1fr}}
.ccell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px 20px;
  transition:.4s;position:relative;overflow:hidden;opacity:0;transform:translateY(30px)}
.ccell.in{opacity:1;transform:none}
.ccell:hover{background:rgba(255,255,255,.12);transform:translateY(-6px);border-color:rgba(255,255,255,.3)}
.ccell .ci{font-size:30px;line-height:1;display:block;margin-bottom:12px}
.ccell h3{font-size:16px;font-weight:900;margin-bottom:8px;letter-spacing:.01em}
.ccell p{font-size:13px;color:#B9CBE6;line-height:1.8}
.ccell .cbadge{display:inline-block;margin-left:8px;vertical-align:2px;font-family:var(--en);font-size:10px;
  font-weight:800;letter-spacing:.1em;padding:4px 9px;border-radius:999px;background:var(--yellow);
  color:var(--blue-900);white-space:nowrap}

/* ---------- timeline ---------- */
.timeline{margin-top:48px;position:relative;padding-left:8px}
.timeline::before{content:"";position:absolute;left:64px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--blue-100),var(--blue-400),var(--blue-100))}
@media(max-width:640px){.timeline::before{left:44px}}
.tlitem{position:relative;padding:0 0 14px 96px;opacity:0;transform:translateY(24px);transition:.7s}
.tlitem.in{opacity:1;transform:none}
@media(max-width:640px){.tlitem{padding-left:70px}}
.tltime{position:absolute;left:0;top:16px;font-family:var(--en);font-weight:900;font-size:15px;color:var(--blue);width:56px;text-align:right}
@media(max-width:640px){.tltime{font-size:13px;width:38px}}
.tldot{position:absolute;left:58px;top:22px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--blue);z-index:2}
@media(max-width:640px){.tldot{left:38px}}
.tlitem.hot .tldot{background:var(--or);border-color:var(--or);box-shadow:0 0 0 6px rgba(255,106,19,.18)}
.tlbody{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;cursor:pointer;transition:.35s}
.tlbody:hover{box-shadow:var(--shadow);border-color:transparent;transform:translateX(3px)}
.tlhead{display:flex;align-items:center;gap:12px;justify-content:space-between}
.tlttl{font-weight:900;font-size:16.5px;color:var(--blue-900)}
.tltag{font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:999px;white-space:nowrap;background:var(--blue-100);color:var(--blue-700)}
.tltag.stage{background:var(--or-100);color:var(--or-600)}
.tltag.talk{background:#E7F7F2;color:var(--teal)}
.tltag.student{background:#F1F8E4;color:#4E7D12}
.tlarrow{font-family:var(--en);font-weight:800;color:var(--faint);transition:.3s;flex-shrink:0}
.tlbody.open .tlarrow{transform:rotate(90deg);color:var(--blue)}
.tldesc{max-height:0;overflow:hidden;transition:.45s cubic-bezier(.2,.8,.25,1);color:var(--sub);font-size:14px}
.tlbody.open .tldesc{max-height:340px;margin-top:12px}
.tlcast{color:var(--ink-2);font-weight:700;font-size:13.5px;line-height:1.7}
.tlcast span{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--blue);
  border-radius:999px;padding:2px 9px;margin-right:8px;vertical-align:2px}

/* ---------- booth ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:40px}
.tab{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:10px 20px;font-size:13.5px;font-weight:800;
  cursor:pointer;transition:.3s;color:var(--ink-2)}
.tab:hover{border-color:var(--blue);color:var(--blue)}
.tab.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 22px rgba(11,87,208,.28)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media(max-width:900px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bgrid{grid-template-columns:1fr}}
.bcell{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.4s;display:flex;flex-direction:column}
.bcell:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
/* 出展ブースは写真枠を持たないテキスト主体のカード。
   カテゴリ色の縦ラインで区分を示し、絵文字は見出しの前に小さく添えるだけにする */
.bcell{position:relative}
.bcell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--fes)}
.bcell .bbody{padding:22px 22px 24px 24px;flex:1;display:flex;flex-direction:column}
.bcat{display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  color:var(--blue);background:var(--wash);border-radius:999px;padding:4px 11px;margin-bottom:11px;font-family:var(--jp)}
.bcell h3{font-size:16px;font-weight:900;margin-bottom:9px;color:var(--blue-900);line-height:1.5}
.bcell h3 .bic{margin-right:7px;font-size:18px}
.bcell p{font-size:13px;color:var(--sub);flex:1}
.bcell .blink{margin-top:12px;font-size:12.5px;font-weight:800;color:var(--blue)}
.booth-cta{margin-top:46px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 24px}
.booth-cta p{font-weight:900;color:var(--blue-900);margin-bottom:16px;font-size:16px}

/* ---------- kitchen ---------- */
.kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:900px){.kgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kgrid{grid-template-columns:1fr}}
.kcell{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:.4s}
.kcell:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.kcell .kthumb{aspect-ratio:4/3;background:linear-gradient(135deg,var(--or-100),#FFF8E4);display:flex;align-items:center;
  justify-content:center;font-size:40px;background-size:cover;background-position:center}
.kcell .kbody{padding:18px}
.kcell h3{font-size:17px;font-weight:900;color:var(--blue-900);margin-bottom:6px}
.kcell .kgenre{font-size:11.5px;font-weight:800;color:var(--or-600);margin-bottom:10px}
.kmenu{list-style:none;font-size:13px;color:var(--sub)}
.kmenu li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.kmenu li span:last-child{font-family:var(--en);font-weight:800;color:var(--ink-2)}
.kmap{margin-top:44px}

/* ---------- collection ---------- */
.colgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}
@media(max-width:860px){.colgrid{grid-template-columns:repeat(2,1fr)}}
.cast{margin-top:40px;text-align:center;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:20px;padding:28px;backdrop-filter:blur(6px)}
.cast h3{font-size:15px;font-weight:900;color:var(--blue-900);margin-bottom:8px}
.cast p{font-size:14px;color:var(--sub)}

/* ---------- bosai boxes ---------- */
.bx{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;transition:.4s}
.bx:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.bxi{font-size:34px;display:block;margin-bottom:12px}
.bx h3{font-size:18px;font-weight:900;color:var(--blue-900);margin-bottom:9px}
.bx p{font-size:14px;color:var(--sub)}

/* ---------- sponsor ---------- */
.tier{margin-top:44px}
.tier-h{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.tier-badge{font-family:var(--en);font-weight:900;letter-spacing:.12em;font-size:12px;color:#fff;padding:7px 16px;border-radius:999px}
.t-gold{background:linear-gradient(120deg,#C9A227,#EBCB63)}
.t-silver{background:linear-gradient(120deg,#8A9197,#B9C0C6)}
.t-bronze{background:linear-gradient(120deg,#B5772E,#D69A55)}
.t-partner{background:var(--teal)}
.t-exh{background:var(--magenta)}
.tier-note{font-size:12px;color:var(--faint)}
/* auto-fill にすることで、社数が少ないティアでもカードが間延びせず、
   メディアクエリ無しで画面幅に追従する。minmax の下限が実質のカード幅。
   ロゴ画像が入るまでは社名テキスト表示なので minmax(0,…) で min-content 由来の
   横あふれも防いでいる。 */
.slogos{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.slogos.g-gold{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.slogos.g-silver{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.slogo{background:#fff;border:1px solid var(--line);border-radius:14px;min-height:74px;display:flex;align-items:center;
  justify-content:center;padding:12px;transition:.35s;text-align:center;font-size:12.5px;font-weight:800;color:var(--ink-2);
  line-height:1.4;overflow-wrap:anywhere;min-width:0}
.slogo:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.slogo img{max-height:100%;width:auto;object-fit:contain}
.slogo.empty{border-style:dashed;color:var(--faint);font-weight:700;background:rgba(255,255,255,.5)}
/* ---------- noscript 時の代替表示 ----------
   JSが動かない環境では本文が空になるため、ここで最低限の開催情報を出す。
   併せて、装飾だけのヒーロー等は隠して読みやすくする。 */
.ns{max-width:760px;margin:0 auto;padding:36px 22px 60px;color:#14103A;
  font-family:var(--jp);line-height:1.85}
.ns h1{font-size:26px;font-weight:900;margin-bottom:10px;color:#0B57D0}
.ns .ns-lead{font-weight:800;margin-bottom:22px}
.ns h2{font-size:17px;font-weight:900;margin:28px 0 8px;padding-left:11px;border-left:4px solid #FF6A13}
.ns table{width:100%;border-collapse:collapse;margin-bottom:8px;font-size:14px}
.ns th,.ns td{border:1px solid #D8E2F2;padding:9px 12px;text-align:left;vertical-align:top}
.ns th{background:#F3F7FF;white-space:nowrap;width:9em;font-weight:800}
.ns ul{padding-left:1.3em;font-size:14px}
.ns li{margin-bottom:4px}
.ns p{font-size:14px}
.ns .ns-note{margin-top:24px;padding:14px 16px;background:#FFF6EC;border:1px solid #FFD9B8;
  border-radius:10px;font-size:13px}
/* JSが無いときは装飾セクションを出さない（空の枠だけ並ぶのを防ぐ） */
.no-js .hero,.no-js .ticker,.no-js .block,.no-js footer,.no-js .fab,.no-js #hdr{display:none}

/* ---------- カード内の写真（絵文字だけだった箇所に差し込む） ---------- */
/* コンテンツカード（濃色セクション） */
.ccell.has-img{padding:0 0 24px;overflow:hidden}
.ccell .cmedia{aspect-ratio:16/9;overflow:hidden;background:rgba(255,255,255,.07)}
.ccell .cmedia img{width:100%;height:100%;object-fit:cover;display:block;transition:.6s}
.ccell:hover .cmedia img{transform:scale(1.07)}
.ccell.has-img h3{margin-top:16px}
.ccell.has-img h3,.ccell.has-img p{padding:0 20px}
/* キッチンカーのサムネイル（出展ブースは写真枠を持たない） */
.kcell .kthumb{overflow:hidden}
.kcell .kthumb.has-img{position:relative;padding:0;background:none}
.kcell .kthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.6s}
.kcell:hover .kthumb img{transform:scale(1.07)}
/* 写真の上に載せる絵文字のミニバッジ */
.bmi{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.95);display:grid;place-items:center;font-size:17px;
  box-shadow:0 4px 14px rgba(11,42,86,.22)}
/* 防災セクションのボックス */
.bx.has-img{padding:0 0 26px;overflow:hidden}
.bx .bxmedia{position:relative;aspect-ratio:16/9;overflow:hidden;margin-bottom:18px}
.bx .bxmedia img{width:100%;height:100%;object-fit:cover;display:block;transition:.6s}
.bx:hover .bxmedia img{transform:scale(1.06)}
/* 絵文字チップは枠内に置く（負の位置だと overflow:hidden で切れる） */
.bx .bxmedia .bxi{position:absolute;left:16px;bottom:14px;margin:0;width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.96);display:grid;place-items:center;font-size:25px;box-shadow:0 6px 18px rgba(11,42,86,.22)}
.bx.has-img h3{margin-top:12px}
.bx.has-img h3,.bx.has-img p{padding:0 26px}

/* ---------- 会場マップ（主催提供のレイアウト図に準拠） ---------- */
.vmap-wrap{border-radius:24px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);padding:14px}
.vmap-wrap svg{width:100%;height:auto;display:block}
/* 会場の外周 */
.vm2-bound{fill:none;stroke:#B99A6B;stroke-width:3}
/* 通路 */
.vm2-lane{fill:#CFEDF3}
.vm2-lanet{font-family:var(--jp);font-weight:900;font-size:19px;fill:#2C3E50;text-anchor:middle}
/* 各区画 */
.vm2-r{stroke:#fff;stroke-width:2}
.vm2-stage{fill:#A5DEE8}.vm2-seat{fill:#EC5C9D}.vm2-booth{fill:#C9A0DC}
.vm2-fire{fill:#F472A8}.vm2-enni{fill:#8CC63F}.vm2-vision{fill:#C4C4C4}
.vm2-air{fill:#4FB3E8}.vm2-recep{fill:#F5C26B}
.vm2-g{transition:transform .25s cubic-bezier(.34,1.56,.64,1);transform-origin:center}
.vm2-g:hover{transform:translateY(-4px)}
.vm2-t{font-family:var(--jp);font-weight:900;font-size:19px;fill:#fff;text-anchor:middle}
/* 明るい区画は濃色の文字にする */
.vm2-vision-t,.vm2-recep-t{fill:#3A3A3A}
.vm2-enni-t{fill:#fff}
/* 周辺のランドマーク */
.vm2-land{fill:none;stroke:#9AA5B1;stroke-width:1.5;stroke-dasharray:5 4}
.vm2-lt{font-family:var(--jp);font-weight:700;font-size:15px;fill:#3A3A3A;text-anchor:middle}

/* ---------- キッチンカー未確定の案内 ---------- */
.kgrid.is-note{display:block}
.kc-note{background:#fff;border:2px dashed var(--or);border-radius:24px;padding:40px 26px;text-align:center;box-shadow:var(--shadow)}
.kc-emoji{font-size:38px;letter-spacing:6px;display:block;margin-bottom:14px}
.kc-note p{font-size:16px;font-weight:700;color:var(--ink-2)}
.kc-note b{color:var(--or-600);font-size:22px;font-family:var(--en);font-weight:900;vertical-align:-1px}

.tier-blank{font-size:13.5px;color:var(--faint);background:#fff;border:1px dashed var(--line);border-radius:14px;padding:16px 20px;font-weight:700}
.sponsor-note{margin-top:30px;text-align:center;font-size:12px;color:var(--faint)}

/* ---------- organizer ---------- */
.orgwrap{margin-top:46px;display:grid;gap:16px}
.orgrow{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;display:grid;
  grid-template-columns:132px 1fr;gap:20px;align-items:start}
@media(max-width:640px){.orgrow{grid-template-columns:1fr;gap:8px}}
.orgrow .ok{font-weight:900;color:#fff;background:var(--blue-900);border-radius:999px;padding:6px 0;text-align:center;font-size:13px}
.orgrow .ov{font-size:14.5px;color:var(--ink-2);line-height:1.95}

/* ---------- access ---------- */
.acc-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;margin-top:46px;align-items:start}
@media(max-width:860px){.acc-grid{grid-template-columns:1fr}}
.acc-info{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.acc-info dl{display:grid;grid-template-columns:80px 1fr;gap:10px 14px;margin-bottom:22px}
.acc-info dt{font-size:12px;font-weight:900;color:var(--blue);padding-top:3px}
.acc-info dd{font-size:14px;color:var(--ink-2)}
.acc-info dd b{font-size:17px;font-weight:900;color:var(--blue-900)}
.acc-map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#eaf0f8}
.acc-map iframe{width:100%;height:420px;border:0;display:block}
@media(max-width:860px){.acc-map iframe{height:320px}}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:44px auto 0;display:grid;gap:12px}
.fq{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.3s}
.fq:hover{border-color:var(--blue-400)}
.fq-q{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;cursor:pointer;font-weight:800;font-size:15px;color:var(--blue-900)}
.fq-q .qm{font-family:var(--en);font-weight:900;color:var(--blue);flex-shrink:0}
.fq-q .qi{margin-left:auto;font-family:var(--en);font-weight:900;color:var(--faint);transition:.3s;flex-shrink:0}
.fq.open .qi{transform:rotate(45deg);color:var(--or)}
.fq-a{max-height:0;overflow:hidden;transition:.4s cubic-bezier(.2,.8,.25,1);color:var(--sub);font-size:14px}
.fq-a div{padding:0 20px 20px 46px}
.fq.open .fq-a{max-height:320px}

/* ---------- news ---------- */
.newslist{list-style:none;max-width:880px;margin:44px auto 0}
.newslist li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:12px;
  display:grid;grid-template-columns:104px 96px 1fr;gap:14px;align-items:center;transition:.3s}
.newslist li:hover{transform:translateX(4px);box-shadow:var(--shadow);border-color:transparent}
@media(max-width:640px){.newslist li{grid-template-columns:1fr;gap:6px}}
.ndate{font-family:var(--en);font-weight:800;font-size:13px;color:var(--faint)}
.ncat{font-size:11px;font-weight:800;text-align:center;padding:4px 8px;border-radius:999px;background:var(--blue-100);color:var(--blue-700)}
@media(max-width:640px){.ncat{justify-self:start;padding:3px 12px}}
.ntx{font-size:14.5px;font-weight:700;color:var(--ink)}

/* ---------- gallery ---------- */
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
@media(max-width:860px){.ggrid{grid-template-columns:repeat(2,1fr)}}
.gcell{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,rgba(31,182,201,.14),rgba(245,197,24,.14));
  border:1px dashed rgba(11,87,208,.2);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--faint);font-weight:700;
  background-size:cover;background-position:center;transition:.4s}
.gcell.has-img{border:0}
.gcell:hover{transform:scale(1.03)}

/* ---------- contact ---------- */
.cform{max-width:760px;margin:44px auto 0;display:grid;gap:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
.cform label{display:block;font-size:13px;font-weight:800;color:#CFE0F5}
.cform input,.cform select,.cform textarea{width:100%;margin-top:8px;background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.2);border-radius:12px;padding:14px 16px;color:#fff;font-size:15px;font-weight:500;transition:.3s}
.cform input::placeholder,.cform textarea::placeholder{color:#7E97B8}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;border-color:var(--yellow);background:rgba(255,255,255,.13)}
.cform select option{color:#0E1B2E}
.req{display:inline-block;background:var(--or);color:#fff;font-size:10px;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:1px}
.check{display:flex!important;align-items:flex-start;gap:10px;font-weight:600!important;color:#B9CBE6!important;font-size:13px}
.check input{width:auto;margin:3px 0 0;flex-shrink:0}
.fnote{font-size:13px;color:var(--yellow);text-align:center;min-height:20px;font-weight:700}
.contact-direct{margin-top:34px;text-align:center;color:#B9CBE6}
.contact-direct p{font-size:12.5px;font-weight:800;letter-spacing:.1em}
.contact-direct a{display:inline-block;font-family:var(--en);font-weight:800;font-size:clamp(18px,3vw,26px);color:#fff;margin:6px 0;border-bottom:2px solid var(--yellow)}
.contact-direct span{display:block;font-size:12px;margin-top:8px}

/* ---------- footer ---------- */
footer{background:#061E45;color:#fff;padding:64px 0 30px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.flogo,.fbrand svg{width:96px;height:auto;margin-bottom:16px;filter:brightness(0) invert(1)}
.fcopy{font-weight:900;font-size:17px;line-height:1.7}
.fmeta{font-size:12.5px;color:#8FA7C6;margin-top:12px;font-family:var(--jp)}
.fnav h4{font-family:var(--en);font-size:11px;letter-spacing:.22em;color:var(--yellow);margin-bottom:14px;font-weight:800}
.fnav a{display:block;font-size:13.5px;color:#C3D3E8;padding:5px 0;transition:.25s}
.fnav a:hover{color:#fff;transform:translateX(3px)}
.fsns{display:flex;gap:12px;justify-content:center;margin:44px 0 30px;flex-wrap:wrap}
.fsns a{border:1.5px solid rgba(255,255,255,.24);border-radius:999px;padding:10px 22px;font-family:var(--en);
  font-weight:800;font-size:12.5px;letter-spacing:.1em;transition:.32s;color:#C3D3E8}
.fsns a:hover{background:#fff;color:#061E45;border-color:#fff;transform:translateY(-3px)}
.fbottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;text-align:center}
.fbottom p{font-size:12px;color:#8FA7C6}
.csmall{margin-top:8px;font-family:var(--en);font-size:11px;letter-spacing:.04em}

/* ---------- fab ---------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:150;background:var(--or);color:#fff;font-weight:900;font-size:13px;
  padding:14px 20px;border-radius:999px;box-shadow:0 14px 32px rgba(255,106,19,.42);opacity:0;transform:translateY(16px);
  pointer-events:none;transition:.4s}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab:hover{transform:translateY(-3px)}
@media(max-width:560px){.fab{right:12px;bottom:12px;padding:12px 16px;font-size:12px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.ccell,.tlitem{opacity:1!important;transform:none!important}
}