/*!
 * Gラボ 公開サイト共通 CSS(site.css)
 * トークン・共通部品(ボタン/チップ/カード/ヘッダー/フッター/会員証)・公開ページ
 * 元: docs/demo/member-site.html の <style>(A0 で機械的に切り出し。見た目の基準はデモ)
 */
:root{
  --bg:#ffffff;
  --surface:#f8fafd;
  --sc:#f0f4f9;
  --sch:#e9eef6;
  --schh:#dde3ea;
  --raised:#ffffff;
  --ink:#1f1f1f;
  --ink-2:#444746;
  --ink-3:#5e5f61;
  --line:#c4c7c5;
  --outline:#747775;
  --blue:#0b57d0;
  --blue-hover:#1c65d8;
  --blue-ink:#ffffff;
  --blue-soft:#d3e3fd;
  --blue-soft-2:#c2d5f8;
  --blue-strong:#041e49;
  --sel:#d3e3fd;--on-sel:#041e49;
  --hover:rgba(31,31,31,.08);
  --p-blue:#8ab4f8;
  --p-yellow:#fdd663;
  --p-green:#81c995;
  --p-red:#f6aea9;
  --on-pastel:#1f1f1f;
  --a-red:#b3261e;
  --a-yellow:#f9ab00;
  --a-green:#146c2e;
  --g-blue:#4285f4;--g-red:#ea4335;--g-yellow:#fbbc05;--g-green:#34a853;
  --gbtn-bg:#ffffff;--gbtn-line:#747775;--gbtn-ink:#1f1f1f;
  --card-a:#0842a0;
  --card-b:#0b57d0;
  --card-ink:#ffffff;
  --gold:#e8a600;
  --silver:#8a939c;
  --bronze:#b06a3b;
  --medal-ink:#ffffff;
  --focus:#0b57d0;
  --shadow:0 1px 2px 0 rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --shadow-lg:0 1px 3px 0 rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15);
  --toast-bg:#303030;--toast-ink:#f2f2f2;
  --mod-bg:var(--surface);--mod-ink:var(--ink);--mod-ink-2:var(--ink-2);--mod-line:var(--line);--mod-sel:var(--sel);--mod-on-sel:var(--on-sel);--mod-hover:var(--hover);--mod-eyebrow:var(--blue);
  --ill-sky:#d3e3fd;--ill-sky-2:#f0f4f9;--ill-wall:#ffffff;--ill-deep:#0b57d0;
  /* hero aurora (soft 4-colour wash, NotebookLM-like) + gradient headline */
  --aur-blue:rgba(138,180,248,.55);--aur-green:rgba(129,201,149,.42);--aur-yellow:rgba(253,214,99,.42);--aur-red:rgba(246,174,169,.42);
  --glass:rgba(255,255,255,.72);
  --grad-a:#0b57d0;--grad-b:#4f6fe6;
  --card-line:#dde3ea;
  /* illustration tonal tiles (M3 tonal backgrounds) */
  --t-blue:#d3e3fd;--t-yellow:#fef7e0;--t-green:#e6f4ea;--t-red:#fce8e6;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 128px)}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:"Google Sans","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.6;letter-spacing:.1px;
}
.wrap{max-width:1184px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:821px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.num-font{font-variant-numeric:tabular-nums;letter-spacing:0}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{color:var(--ink);font-weight:500;text-wrap:balance;word-break:auto-phrase}
p{margin:0 0 12px}
[hidden]{display:none!important}

/* Material Symbols (decorative; hidden until the font is confirmed loaded) */
.ms{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;direction:ltr;width:1em;height:1em;overflow:hidden;flex:none;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;-webkit-font-smoothing:antialiased;visibility:hidden;user-select:none}
.ms-ok .ms{visibility:visible}
.ms.sm{font-size:20px}

/* buttons (M3 pill) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:500;font-size:16px;letter-spacing:.1px;line-height:24px;
  border:1px solid transparent;background:var(--blue);color:var(--blue-ink);padding:11px 24px;cursor:pointer;text-decoration:none;border-radius:1000px;
  transition:background-color .2s ease,box-shadow .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{background:var(--blue-hover);box-shadow:var(--shadow)}
.btn.out{background:transparent;color:var(--blue);border-color:var(--outline)}
.btn.out:hover{background:var(--hover);box-shadow:none}
.btn.tonal{background:var(--blue-soft);color:var(--blue-strong)}
.btn.tonal:hover{background:var(--blue-soft-2);box-shadow:none}
.btn.text{background:transparent;color:var(--blue);padding-inline:12px}
.btn.text:hover{background:var(--hover);box-shadow:none}
.btn.sm{font-size:14px;line-height:20px;padding:9px 20px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink-2);cursor:pointer;text-decoration:none;padding:0;transition:background-color .2s ease}
.icon-btn:hover{background:var(--hover)}
.sample{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.2px;border:1px dashed var(--outline);color:var(--ink-3);padding:0 8px;line-height:1.7;vertical-align:middle;white-space:nowrap;border-radius:1000px}
/* chips (M3: 8px radius) */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;line-height:16px;padding:5px 10px;border-radius:8px;background:var(--sel);color:var(--on-sel);white-space:nowrap;border:1px solid transparent}
.chip.gray{background:transparent;color:var(--ink-2);border-color:var(--line)}
.chip.green{background:var(--p-green);color:var(--on-pastel)}
.chip.yellow{background:var(--p-yellow);color:var(--on-pastel)}

/* ===== header: utility tier + sticky product bar ===== */
.util{background:var(--surface);font-size:13px}
.util .wrap{display:flex;align-items:center;gap:6px;min-height:48px}
.util .mark{display:flex;align-items:center;margin-right:10px}
.util .mark .lgm{width:26px;height:26px}
.util a,.util button.lk{font:inherit;color:var(--ink-2);text-decoration:none;padding:6px 10px;border-radius:1000px;background:none;border:0;cursor:pointer}
.util a:hover,.util button.lk:hover{background:var(--hover);color:var(--ink)}
.util .sp{margin-left:auto}
.util .icon-btn{width:36px;height:36px;background:var(--bg);box-shadow:var(--shadow);color:var(--blue)}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);box-shadow:0 1px 0 var(--line)}
header.top .wrap{display:flex;align-items:center;gap:8px;min-height:64px;padding-block:8px;position:relative}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.logo .lgm{width:36px;height:36px}
.logo b{font-size:20px;font-weight:700;letter-spacing:0}
.logo span.pn{font-size:20px;font-weight:400;color:var(--ink-2);margin-left:4px}
.menu-btn{display:none}
.pnav{display:flex;gap:2px;align-items:center;margin-left:20px}
.pnav a{font-size:14px;font-weight:500;text-decoration:none;color:var(--ink-2);padding:8px 12px;border-radius:1000px;transition:background-color .2s ease,color .2s ease}
.pnav a:hover{color:var(--ink);background:var(--hover)}
.hnav{margin-left:auto;display:flex;gap:8px;align-items:center}
.hnav>span{display:flex;gap:8px;align-items:center}
.avatar-btn{width:40px;height:40px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--p-blue);color:var(--on-pastel);font:inherit;font-weight:700;font-size:16px;display:grid;place-items:center;box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line)}
.avatar-btn:hover{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--outline)}
.mnav{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:calc(100% + 6px);background:var(--raised);border-radius:24px;box-shadow:var(--shadow-lg);padding:8px;display:grid}
.mnav a{color:var(--ink);text-decoration:none;font-weight:500;padding:12px 16px;border-radius:1000px}
.mnav a:hover{background:var(--hover)}
/* account popover */
.acct-menu{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(100% + 6px);width:min(360px,calc(100vw - 32px));background:var(--sc);border-radius:28px;box-shadow:var(--shadow-lg);padding:16px;text-align:center;z-index:40}
.acct-menu .mail{font-size:14px;color:var(--ink);font-weight:500;margin:4px 0 14px;word-break:break-all}
.acct-menu .big-av{width:80px;height:80px;border-radius:50%;margin:0 auto 10px;background:var(--p-blue);color:var(--on-pastel);display:grid;place-items:center;font-size:34px;font-weight:500}
.acct-menu .hi{font-size:22px;color:var(--ink);margin:0 0 16px}
.acct-menu .grp{background:var(--bg);border-radius:20px;overflow:hidden;display:grid;gap:2px;text-align:left}
.acct-menu .grp button{display:flex;align-items:center;gap:14px;font:inherit;font-size:14px;font-weight:500;color:var(--ink);background:none;border:0;padding:14px 18px;cursor:pointer;width:100%}
.acct-menu .grp button:hover{background:var(--hover)}
.acct-menu .fine{font-size:12px;color:var(--ink-3);margin:12px 0 0}

/* ===== sections ===== */
section{padding-block:112px}
.sec-head{text-align:center;max-width:860px;margin:0 auto 56px}
.eyebrow{font-size:14px;font-weight:500;color:var(--blue);margin:0 0 12px;letter-spacing:.2px}
h2{font-size:clamp(30px,4.4vw,48px);line-height:1.17;letter-spacing:-.02em;font-weight:500;margin:0 0 16px}
h2.xl{font-size:clamp(32px,5.2vw,60px);line-height:1.13;letter-spacing:-.025em}
h3{font-size:22px;line-height:1.3;margin:0 0 10px;letter-spacing:0;font-weight:500}
.lead{font-size:18px;line-height:28px;color:var(--ink-2)}
.hint{font-size:14px;color:var(--ink-3)}
.bg-surface{background:var(--surface)}

/* ===== hero ===== */
.hero{padding-block:16px 0;text-align:center}
.hero-panel{position:relative;margin:0 auto;width:calc(100% - 2 * max(16px,env(safe-area-inset-left,0px)));max-width:1376px;border-radius:36px;overflow:hidden;padding:80px 0 72px;
  background:
    radial-gradient(60% 70% at 8% 0%,var(--aur-blue),transparent 70%),
    radial-gradient(45% 60% at 38% 0%,var(--aur-green),transparent 70%),
    radial-gradient(45% 60% at 64% 0%,var(--aur-yellow),transparent 70%),
    radial-gradient(55% 70% at 94% 0%,var(--aur-red),transparent 70%),
    linear-gradient(180deg,var(--surface) 0%,var(--bg) 78%)}
.hero .chip-top{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-2);background:var(--glass);padding:6px 14px 6px 8px;border-radius:1000px;margin-bottom:24px}
.hero .chip-top .lgm{width:26px;height:26px}
.hero h1{font-size:clamp(36px,6.4vw,64px);line-height:1.1;letter-spacing:-.02em;font-weight:500;margin:0 auto 20px;max-width:14em}
.grad{color:var(--grad-a)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background-image:linear-gradient(90deg,var(--grad-a) 20%,var(--grad-b) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}
.hero .lead{max-width:44em;margin:0 auto}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.hero-members{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px 0 0;font-size:14px;color:var(--ink-2)}
.hero-members .ms{color:var(--blue)}
.hero-members b{font-size:20px;font-weight:700;color:var(--ink);margin-left:4px}
.hero-media{position:relative;margin:56px auto 0;max-width:1184px;border-radius:40px;overflow:hidden;aspect-ratio:1200/560;background:var(--ill-sky);text-align:left}
.hero-media>svg.scene{position:absolute;inset:0;width:100%;height:100%}
.phone{position:absolute;left:50%;top:9%;width:300px;transform:translateX(-50%);background:var(--bg);border-radius:36px 36px 0 0;padding:14px 14px 0;bottom:0;box-shadow:var(--shadow-lg);border:6px solid var(--schh);border-bottom:0;overflow:hidden}
.phone .bar{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px}
.phone .bar .lg{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--ink)}
.phone .bar .lg .lgm{width:22px;height:22px}
.phone .bar .av{width:24px;height:24px;border-radius:50%;background:var(--p-blue)}
.phone .mcard{max-width:none;border-radius:18px;padding:14px 16px}
.phone .mcard .no,.phone .mcard .who{left:16px}
.phone .mcard .who{right:16px}
.phone h4{margin:16px 4px 8px;font-size:13px;color:var(--ink);font-weight:500;display:flex;justify-content:space-between;align-items:center}
.fchip{position:absolute;display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:20px;padding:12px 16px 12px 12px;box-shadow:var(--shadow-lg);font-size:13px;color:var(--ink-2);line-height:1.35}
.fchip b{display:block;color:var(--ink);font-weight:500;font-size:14px}
.fchip .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--on-pastel)}
.fchip .ic svg{width:22px;height:22px}
.fchip.f1{left:7%;top:30%}
.fchip.f2{right:4%;top:14%}
.float-a{animation:floaty 6s ease-in-out infinite}
.float-b{animation:floaty 7s ease-in-out -2s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* generic mock bits */
.mock{background:var(--bg);border-radius:24px;box-shadow:var(--shadow-lg);padding:16px;color:var(--ink-2);font-size:13px}
.mock h4{margin:0 0 10px;font-size:14px;font-weight:500;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:8px}
.r{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.r:first-of-type{border-top:0}
.r .av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--on-pastel)}
.r .bar{flex:1;height:8px;border-radius:8px;background:var(--sch);overflow:hidden}
.r .bar i{display:block;height:100%;border-radius:8px;background:var(--blue)}
.thumbs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.th{aspect-ratio:1;border-radius:14px;display:grid;place-items:center}
.th svg{width:55%;height:55%}
.fsw{display:inline-block;width:40px;height:24px;border-radius:12px;background:var(--schh);border:2px solid var(--outline);position:relative;flex:none}
.fsw::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--outline);left:4px;top:4px}
.fsw.on{background:var(--blue);border-color:var(--blue)}
.fsw.on::after{width:16px;height:16px;left:18px;top:2px;background:var(--blue-ink)}
.lnrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink)}
.lnrow:first-of-type{border-top:0}

/* membership card */
.mcard{position:relative;aspect-ratio:1.586/1;width:100%;max-width:420px;margin-inline:auto;color:var(--card-ink);border-radius:24px;
  background:linear-gradient(135deg,var(--card-a) 0%,var(--card-b) 100%);padding:22px 24px;overflow:hidden;box-shadow:var(--shadow-lg);text-align:left;container-type:inline-size}
.mcard::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;right:-22%;top:-38%;background:rgba(255,255,255,.10)}
.mcard::after{content:"";position:absolute;width:45%;aspect-ratio:1;border-radius:50%;right:12%;bottom:-40%;background:rgba(255,255,255,.07)}
.mcard>*{position:relative;z-index:1}
.mcard .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mcard .brand{font-size:20px;font-size:clamp(13px,4.8cqi,20px);font-weight:500;display:flex;align-items:center;gap:8px}
.mcard .brand .lgm{width:30px;height:30px;width:clamp(20px,7.2cqi,30px);height:clamp(20px,7.2cqi,30px)}
.mcard .kind{font-size:11px;font-size:clamp(8px,2.6cqi,11px);letter-spacing:1.6px;opacity:.85;font-weight:500;white-space:nowrap}
.mcard .dots{display:flex;gap:5px;margin-top:16px;margin-top:clamp(6px,3.8cqi,16px)}
.mcard .dots i{width:9px;height:9px;border-radius:50%}
.mcard .no{position:absolute;left:24px;bottom:58px;bottom:14cqi;font-weight:500;font-size:clamp(30px,7vw,44px);font-size:clamp(22px,10.5cqi,44px);letter-spacing:1px;line-height:1;font-variant-numeric:tabular-nums}
.mcard .no small{display:block;font-size:10px;font-size:clamp(8px,2.4cqi,10px);letter-spacing:1.8px;opacity:.8;margin-bottom:6px;margin-bottom:clamp(3px,1.4cqi,6px);font-weight:500}
.mcard .who{position:absolute;left:24px;right:24px;bottom:20px;bottom:5cqi;display:flex;justify-content:space-between;font-size:13px;font-size:clamp(10px,3.1cqi,13px);gap:8px}
.mcard .who span{opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard .rankmark{position:absolute;right:20px;bottom:50px;bottom:12cqi;width:62px;height:62px;width:clamp(40px,14.8cqi,62px);height:clamp(40px,14.8cqi,62px)}

/* ===== carousel ===== */
.car-wrap{position:relative}
.car{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  padding-left:max(16px,env(safe-area-inset-left,0px),calc((100% - 1120px) / 2));padding-right:max(16px,env(safe-area-inset-right,0px),calc((100% - 1120px) / 2));
  scroll-padding-left:max(16px,env(safe-area-inset-left,0px),calc((100% - 1120px) / 2));padding-block:4px 8px}
.car::-webkit-scrollbar{display:none}
.car::after{content:"";flex:0 0 1px}
.ccard{flex:0 0 min(86%,860px);scroll-snap-align:start;border-radius:40px;padding:48px 0 0 48px;display:grid;grid-template-columns:1fr 1.15fr;gap:32px;min-height:440px;overflow:hidden;color:var(--on-pastel)}
.ccard h3{font-size:clamp(24px,2.6vw,32px);line-height:1.2;letter-spacing:-.6px;color:var(--on-pastel);margin-bottom:14px}
.ccard p{font-size:16px;color:var(--on-pastel);opacity:.86;margin:0}
.ccard .txt{padding-bottom:48px;align-self:center}
.ccard .stage{align-self:end;position:relative;padding-right:32px}
.ccard .stage .mock{border-radius:24px 24px 0 0;box-shadow:none;min-height:300px;padding:20px}
.c-blue{background:var(--p-blue)}.c-yellow{background:var(--p-yellow)}.c-green{background:var(--p-green)}.c-red{background:var(--p-red)}
.car-ctl{display:flex;justify-content:center;gap:12px;margin-top:20px} /* カードは横にはみ出すので右寄せだと半端な位置になる。下の「無料で会員になる」と中央でそろえる */
.car-ctl .icon-btn{width:48px;height:48px;border:1px solid var(--outline);color:var(--ink)}
.car-ctl .icon-btn[disabled]{opacity:.38;cursor:default;background:transparent}
.car-ctl .ctl-txt{font-size:22px;line-height:1;font-weight:500}

/* ===== tour module ===== */
.tour{background:var(--mod-bg);color:var(--mod-ink-2)}
.tour h2,.tour h3{color:var(--mod-ink)}
.tour .eyebrow{color:var(--mod-eyebrow)}
.tour .lead{color:var(--mod-ink-2)}
.ttabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 48px}
.ttabs button{font:inherit;font-size:15px;font-weight:500;color:var(--mod-ink);background:transparent;border:1px solid var(--mod-line);border-radius:1000px;padding:10px 22px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.ttabs button:hover{background:var(--mod-hover)}
.ttabs button[aria-selected=true]{background:var(--mod-sel);color:var(--mod-on-sel);border-color:var(--mod-sel)}
.tpanel{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.tpanel h3{font-size:clamp(24px,3vw,36px);letter-spacing:-.6px;line-height:1.2}
.tpanel p{font-size:17px}
.tpanel ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.tpanel li{display:flex;gap:10px;align-items:flex-start;color:var(--mod-ink)}
.tpanel li svg{width:22px;height:22px;flex:none;margin-top:1px}
.frame{background:var(--bg);border:1px solid var(--line);border-radius:28px;overflow:hidden;color:var(--ink-2);font-size:13px;box-shadow:var(--shadow-lg)}
.frame .fbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:700;font-size:14px}
.frame .fbar svg{width:22px;height:22px}
.frame .fbar i{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--p-blue)}
.frame .fbody{display:grid;grid-template-columns:150px 1fr;min-height:330px}
.frame .rail{padding:12px 8px;display:grid;gap:4px;align-content:start}
.frame .rail span{display:block;height:30px;border-radius:15px;padding:0 12px;line-height:30px;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.frame .rail span.on{background:var(--sel);color:var(--on-sel);font-weight:500}
.frame .main{padding:18px 18px 20px;border-left:1px solid var(--line);min-width:0}
.frame .main .mcard{max-width:320px}
.frame .ttl{font-size:18px;color:var(--ink);margin:0 0 12px}

/* ===== steps ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;list-style:none;margin:56px 0 0;padding:0;text-align:center}
.steps li{padding:0 8px}
.steps .num{position:relative;width:64px;height:64px;margin:-32px auto 16px;display:grid;place-items:center}
.steps .num svg{position:absolute;inset:0;width:100%;height:100%}
.steps .num b{position:relative;font-size:26px;font-weight:500;color:var(--on-pastel)}
.steps h3{font-size:24px;letter-spacing:-.3px}
.steps p{font-size:15px;color:var(--ink-2);margin:0 auto;max-width:22em}
.center-cta{text-align:center;margin-top:8px}

/* ===== free plan ===== */
.free{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.free .price{background:var(--blue-soft);color:var(--blue-strong);border-radius:40px;padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.free .price .big{font-size:clamp(64px,10vw,104px);font-weight:500;line-height:1;color:var(--blue-strong);letter-spacing:-2px;margin:12px 0 16px}
.free .price .big small{font-size:.26em;letter-spacing:0;margin-left:8px;color:var(--blue-strong)}
.free .price .chip{background:var(--bg);color:var(--ink)}
.free .incl{background:var(--sc);border-radius:40px;padding:40px}
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;font-size:16px;color:var(--ink);border-top:1px solid var(--line)}
.checks li:first-child{border-top:0}
.checks li svg{flex:none;width:22px;height:22px;margin-top:1px}

/* ===== faq ===== */
.faq{max-width:880px;margin:0 auto;display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:32px;background:var(--bg);transition:background-color .2s ease}
.faq details[open]{background:var(--sc);border-color:transparent}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px 18px 28px;font-size:17px;color:var(--ink);font-weight:500;border-radius:32px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(var(--ink-2),var(--ink-2)) center/14px 2px no-repeat,linear-gradient(var(--ink-2),var(--ink-2)) center/2px 14px no-repeat;transition:transform .2s ease}
.faq details[open] summary::after{background:linear-gradient(var(--ink-2),var(--ink-2)) center/14px 2px no-repeat}
.faq summary:hover::after{background-color:var(--hover)}
.faq .ans{padding:0 28px 22px;color:var(--ink-2);font-size:15px}

/* ===== sign-up ===== */
.signup{max-width:920px;margin:0 auto;display:grid;gap:16px}
.stepcard{--tf-bg:var(--surface);background:var(--surface);border-radius:28px;padding:32px}
.stepcard .sh{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.stepcard .sn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--sel);color:var(--on-sel);flex:none}
.stepcard.done .sn{background:var(--p-green);color:var(--on-pastel)}
.stepcard h3{margin:0;font-size:20px;font-weight:500}
.stepcard .sh p{margin:0;font-size:14px;color:var(--ink-3)}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset[disabled]{opacity:.5}
.gbtn{display:inline-flex;align-items:center;gap:12px;font:inherit;font-size:15px;font-weight:500;color:var(--gbtn-ink);background:var(--gbtn-bg);
  border:1px solid var(--gbtn-line);border-radius:1000px;padding:10px 20px 10px 14px;cursor:pointer;transition:box-shadow .2s ease,background-color .2s ease}
.gbtn:hover{box-shadow:var(--shadow)}
.gbtn svg{width:20px;height:20px;flex:none}
.acct{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:1000px;padding:8px;flex-wrap:wrap}
.acct .av{width:40px;height:40px;border-radius:50%;background:var(--p-blue);color:var(--on-pastel);display:grid;place-items:center;font-weight:700;flex:none}
.acct .who{flex:1;min-width:0;line-height:1.35}
.acct .who b{display:block;color:var(--ink);font-weight:500}
.acct .who span{font-size:13px;color:var(--ink-3);word-break:break-all}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
/* M3 outlined text field */
.tf{position:relative;margin-bottom:6px}
.tf input{width:100%;height:56px;font:inherit;font-size:16px;padding:16px;border:1px solid var(--outline);background:var(--tf-bg,var(--bg));color:var(--ink);border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}
.tf input:hover{border-color:var(--ink)}
.tf input:focus{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);outline:none}
.tf input:focus-visible{outline:none}
.tf label{position:absolute;left:12px;top:28px;transform:translateY(-50%);padding:0 4px;background:var(--tf-bg,var(--bg));color:var(--ink-2);font-size:16px;line-height:1;pointer-events:none;transition:top .15s ease,font-size .15s ease,color .15s ease;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf input:focus+label,.tf input:not(:placeholder-shown)+label{top:0;font-size:12px}
.tf input:focus+label{color:var(--blue)}
.tf input:disabled{border-color:var(--line);color:var(--ink-3)}
.tf input:disabled+label{color:var(--ink-3)}
.field{margin-bottom:22px}
.field .hint{margin:4px 16px 0;font-size:12px;line-height:1.5}
/* M3 switch */
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.sw-row+.sw-row{border-top:1px solid var(--line)}
.sw-row label{font-size:15px;color:var(--ink);cursor:pointer;flex:1;min-width:0}
.sw{position:relative;display:inline-block;width:52px;height:32px;flex:none}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sw .track{position:absolute;inset:0;border-radius:16px;background:var(--schh);border:2px solid var(--outline);transition:background-color .2s ease,border-color .2s ease}
.sw .track::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--outline);left:6px;top:6px;transition:all .2s cubic-bezier(.2,0,0,1)}
.sw input:checked+.track{background:var(--blue);border-color:var(--blue)}
.sw input:checked+.track::after{width:24px;height:24px;left:22px;top:2px;background:var(--blue-ink)}
.sw input:focus-visible+.track{outline:2px solid var(--focus);outline-offset:3px}
.sw input:disabled{cursor:not-allowed}
.sw-sub{font-size:14px;font-weight:500;color:var(--ink);margin:0 0 4px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}

/* ===== footer ===== */
footer{background:var(--surface);font-size:14px;color:var(--ink-2);padding-top:48px}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.fcols h4{font-size:14px;font-weight:500;color:var(--ink);margin:0 0 14px}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fcols a,.fcols button{font:inherit;font-size:14px;color:var(--ink-2);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.fcols a:hover,.fcols button:hover{color:var(--ink);text-decoration:underline}
.fnote{padding-block:20px;font-size:13px;color:var(--ink-3);border-bottom:1px solid var(--line)}
.fbottom{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:20px 28px}
.fbottom .fl{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:500}
.fbottom .fl .lgm{width:30px;height:30px}
.fbottom .sp{margin-left:auto}

/* ===== mobile bottom CTA ===== */
.bcta{display:none}

.empty{padding:18px 20px;border-radius:20px;background:var(--sc);color:var(--ink-2);font-size:14px}
/* snackbar */
.toast{position:fixed;left:max(24px,env(safe-area-inset-left,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));background:var(--toast-bg);color:var(--toast-ink);
  padding:14px 16px;font-size:14px;line-height:20px;z-index:50;max-width:min(560px,calc(100% - 48px));min-width:288px;border-radius:4px;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.toast.show{opacity:1;transform:none;visibility:visible;transition:opacity .2s ease,transform .2s ease,visibility 0s}

/* ===== brand mark: real Gラボ logo image (flask SVG is the fallback when the image fails) ===== */
.lgm{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--bg)}
.lgm img{display:block;width:100%;height:100%;object-fit:contain}
.lgm svg{display:none;width:100%;height:100%}
.lgm.dark{padding:2px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.lgm.noimg{background:none;border-radius:0;overflow:visible;padding:0;box-shadow:none}
.lgm.noimg img{display:none}
.lgm.noimg svg{display:block}
.about-lockup{display:inline-block;background:var(--bg);border-radius:24px;padding:12px 18px;margin:0 0 20px;box-shadow:0 0 0 1px var(--card-line)}
.about-lockup img{display:block;width:auto;height:112px}
.about-lockup.noimg{display:none}

/* ===== illustrations (flat inline SVG, generated in JS) ===== */
.face{display:inline-block;flex:none;border-radius:50%;overflow:hidden;line-height:0;transition:transform .15s ease}
.face svg{display:block;width:100%;height:100%}
.pile{display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;margin:24px 0 0;font-size:15px;color:var(--ink-2)}
.pile .faces{display:flex;padding-left:8px}
.pile .face{width:44px;height:44px;margin-left:-8px;box-shadow:0 0 0 2px var(--bg)}
.pile .face:hover{transform:translateY(-2px)}
.step-ill{width:min(260px,100%);aspect-ratio:4/3;margin:0 auto;border-radius:32px;overflow:hidden}
.step-ill svg{display:block;width:100%;height:100%}
.s-green{background:var(--t-green)}.s-yellow{background:var(--t-yellow)}.s-blue{background:var(--t-blue)}
.eill{display:block;width:132px;height:99px;margin:0 auto 10px}

/* ===== responsive ===== */
@media (max-width:1023px){
  .ccard{grid-template-columns:1fr;padding:36px 0 0 32px;min-height:0}
  .ccard .txt{padding:0 32px 0 0}
  .ccard .stage .mock{min-height:240px}
  .tpanel{grid-template-columns:1fr;gap:32px}
  .fchip.f1{left:3%}.fchip.f2{right:3%}
}
@media (max-width:820px){
  section{padding-block:72px}
  .util{display:none}
  .pnav{display:none}
  .menu-btn{display:inline-grid}
  .logo span.pn{font-size:18px}
  .hnav .hide-sm{display:none}
  .sec-head{margin-bottom:40px}
  .cols,.grid2,.free{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:40px}
  .fcols{grid-template-columns:1fr 1fr}
  .hero-media{aspect-ratio:auto;height:460px;border-radius:32px;margin-top:40px}
  .fchip.f2{display:none}
  .fchip.f1{top:auto;bottom:24px;left:12px}
  /* bottom CTA (guest) */
  .bcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--bg);box-shadow:0 -1px 0 var(--line);
    padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    transition:transform .25s ease,visibility 0s linear 0s}
  .bcta.off{transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
  body:not(.is-member) footer{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .toast{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));max-width:none;min-width:0;bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:600px){
  .ccard{flex-basis:88%;border-radius:32px;padding:28px 0 0 24px}
  .ccard .txt{padding-right:24px}
  .ccard .stage{padding-right:20px}
  .hero .cta .btn{width:100%}
  .stepcard{padding:24px 18px}
  .free .price,.free .incl{border-radius:32px;padding:32px 24px}
  .frame .fbody{grid-template-columns:1fr}
  .frame .rail{display:none}
  .frame .main{border-left:0}
  .phone{width:250px}
}
@media (max-width:440px){
  .faq summary{padding-left:20px;font-size:16px}
  .faq .ans{padding-inline:20px}
  .logo span.pn{display:none}
  .fcols{grid-template-columns:1fr 1fr;gap:20px}
  .ttabs button{padding:8px 16px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== free emphasis / help links ===== */
.hero .chip-top .free-pill{background:var(--p-green);color:var(--on-pastel);border-radius:1000px;padding:1px 10px;font-weight:700;font-size:13px}
.hero .free-line{display:inline-block;margin:0 auto 20px;font-size:clamp(18px,2.4vw,24px);font-weight:700;color:var(--blue);background:var(--sel);border-radius:16px;padding:8px 20px;letter-spacing:.2px}
.helplink{display:flex;justify-content:center;margin-top:24px}
.helplink a{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--blue);text-decoration:none;padding:8px 14px;border-radius:1000px}
.helplink a:hover{background:var(--hover);text-decoration:underline}
.fbottom a{color:var(--ink-2);text-decoration:none;font-size:13px}
.fbottom a:hover{color:var(--ink);text-decoration:underline}
.icon-btn svg{width:24px;height:24px}

/* ===== help article (#guide) ===== */
.article{max-width:720px;margin:0 auto;padding:32px 0 96px;color:var(--ink-2);font-size:16px;line-height:1.75}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--ink-3);margin:0 0 24px;padding:0;list-style:none}
.crumbs a{color:var(--blue);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--ink-3)}
.article h1{font-size:clamp(28px,4vw,36px);line-height:1.25;letter-spacing:-.5px;margin:0 0 12px}
.article .meta{font-size:13px;color:var(--ink-3);margin:0 0 24px}
.article h2{font-size:22px;line-height:1.35;margin:40px 0 12px;padding-top:8px}
.article h3{font-size:17px;margin:24px 0 8px}
.article p{margin:0 0 14px}
.article ol.steps-list{margin:0 0 16px;padding-left:1.5em;display:grid;gap:10px}
.article ol.steps-list li{padding-left:4px}
.article ul.plain{margin:0 0 16px;padding-left:1.4em}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:0 0 8px}
.toc b{display:block;color:var(--ink);font-size:14px;margin-bottom:6px}
.toc ol{margin:0;padding-left:1.4em;font-size:15px}
.toc a{color:var(--blue);text-decoration:none}
.toc a:hover{text-decoration:underline}
.callout{display:flex;gap:12px;align-items:flex-start;background:var(--sel);color:var(--on-sel);border-radius:12px;padding:14px 16px;margin:8px 0 16px;font-size:15px;line-height:1.6}
.callout svg{flex:none;width:22px;height:22px;margin-top:1px}
.callout b{display:block}
.article .kbd{background:var(--sc);color:var(--ink);border-radius:6px;padding:1px 6px;font-size:.92em;white-space:nowrap}
.feedback{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:40px 0 24px}
.feedback span{color:var(--ink);font-weight:500;margin-right:auto}
.related{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:6px}
.related a{color:var(--blue);text-decoration:none}
.related a:hover{text-decoration:underline}
.guide-help{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:16px 18px}
.guide-help .ic{width:44px;height:44px;border-radius:50%;background:var(--p-blue);color:var(--on-pastel);display:grid;place-items:center;flex:none}
.guide-help .ic svg{width:24px;height:24px}
.guide-help .tx{flex:1;min-width:12em}
.guide-help b{display:block;color:var(--ink);font-weight:500}
.guide-help span{font-size:14px}
.guide-back{margin-top:32px}

.reg-cta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 16px;margin:40px 0 0;font-size:15px;color:var(--ink-2);text-align:center}
/* ===== community intro ===== */
.logo span.pn.sub{font-size:14px;font-weight:500;color:var(--ink-3);margin-left:8px}
.hero-facts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;list-style:none;padding:0;margin:28px auto 0}
.hero-facts li{background:var(--glass);border-radius:20px;padding:12px 20px;min-width:9.5em;line-height:1.35}
.hero-facts b{display:block;color:var(--ink);font-size:22px;font-weight:500}
.hero-facts span{font-size:13px;color:var(--ink-2)}
/* theme cards (Grow with Google style: whole card is a link, media → label → title → text link) */
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.themes>li{min-width:0}
.tcard{display:flex;flex-direction:column;height:100%;background:var(--bg);border-radius:24px;overflow:hidden;color:var(--ink-2);text-decoration:none;box-shadow:0 0 0 1px var(--card-line);transition:box-shadow .25s ease}
.tcard:hover{box-shadow:var(--shadow-lg)}
.tmedia{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;color:var(--on-pastel)}
.tmedia::before,.tmedia::after{content:"";position:absolute;border-radius:50%;background:var(--glass);opacity:.55}
.tmedia::before{width:46%;aspect-ratio:1;left:-10%;bottom:-30%}
.tmedia::after{width:28%;aspect-ratio:1;right:6%;top:-12%}
.tmedia .ti{position:relative;z-index:1;width:72px;height:72px;border-radius:22px;background:var(--bg);display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .25s ease}
.tmedia .ti .ms{font-size:36px}
.tcard:hover .tmedia .ti{transform:scale(1.06)}
.tmedia .tspot{position:absolute;z-index:1;left:50%;bottom:0;height:94%;width:auto;aspect-ratio:4/3;transform:translateX(-50%);transform-origin:50% 100%;transition:transform .25s ease}
.tcard:hover .tmedia .tspot{transform:translateX(-50%) scale(1.03)}
.tbody{display:flex;flex-direction:column;gap:8px;padding:20px 24px 24px;flex:1}
.tlabel{font-size:12px;font-weight:500;letter-spacing:.5px;color:var(--ink-3)}
.tcard h3{font-size:20px;line-height:28px;font-weight:500;margin:0;color:var(--ink)}
.tcard p{margin:0;font-size:15px}
.tlink{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--blue)}
.tlink .tcnt{font-weight:400;color:var(--ink-3);font-size:13px}
.tcard:hover .tlink>span:first-child{text-decoration:underline}
@media (max-width:1023px){.themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.themes{grid-template-columns:1fr;gap:16px}}

/* sticky jump links (Workspace style) */
.jump{position:sticky;top:calc(env(safe-area-inset-top,0px) + 72px);z-index:20;display:flex;justify-content:center;padding:8px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));margin-top:-8px;pointer-events:none}
.jump ul{pointer-events:auto;display:flex;gap:2px;list-style:none;margin:0;padding:2px;background:var(--bg);border-radius:1000px;box-shadow:var(--shadow);max-width:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.jump ul::-webkit-scrollbar{display:none}
.jump a{display:block;white-space:nowrap;font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:9px 16px;border-radius:1000px;transition:background-color .2s ease,color .2s ease}
.jump a:hover{background:var(--hover);color:var(--ink)}
.jump a[aria-current=true]{background:var(--sel);color:var(--on-sel)}
.jump a:focus-visible{outline-offset:-2px}
.pnav a[aria-current=true]{color:var(--blue)}

/* scroll reveal: content is never hidden up front; only elements that scroll into view play a short fade-up */
.rv-in{animation:rvIn .6s cubic-bezier(.2,0,0,1) both}
@keyframes rvIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.howto{margin-top:48px;text-align:center}
.howto h3{font-size:18px;font-weight:500}
.hchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;padding:0;margin:12px 0 16px}
.hchips li{font-size:14px;font-weight:500;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 14px}
.howto .hint{max-width:40em;margin:0 auto}
.nw{white-space:nowrap}
@media (max-width:600px){
  .hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hero-facts li{min-width:0;padding:10px 6px;border-radius:16px}
  .hero-facts b{font-size:17px}
  .hero-facts li>span{font-size:11px;display:block}
  .hero-panel{border-radius:28px;padding:48px 0 40px}
  .hero .chip-top{font-size:13px;gap:6px;padding-right:12px}
  .hero .chip-top .free-pill{white-space:nowrap;flex:none}
  /* mobile: the jump links become a full-width tab strip right under the header (no see-through gap) */
  .jump{top:calc(env(safe-area-inset-top,0px) + 64px);margin-top:0;padding:0;background:var(--bg);box-shadow:0 1px 0 var(--line);justify-content:flex-start}
  .jump ul{width:100%;box-shadow:none;border-radius:0;padding:6px max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px))}
  .jump a{padding:8px 14px}
  .evtabs button{padding-inline:14px}
}

/* ===== events (Peatix list) ===== */
.ev-tools{text-align:center;margin-bottom:24px}
.seg .cnt,.evtabs .cnt{font-variant-numeric:tabular-nums;opacity:.8}
/* GDG-style underline tabs + DevSite-style filter chips */
.evtabs{display:inline-flex;max-width:100%;border-bottom:1px solid var(--line);margin-bottom:20px}
.evtabs button{position:relative;font:inherit;font-size:15px;font-weight:500;color:var(--ink-2);background:none;border:0;padding:12px 20px 14px;cursor:pointer;border-radius:12px 12px 0 0;transition:background-color .2s ease,color .2s ease;white-space:nowrap}
.evtabs button:hover{background:var(--hover);color:var(--ink)}
.evtabs button[aria-pressed=true]{color:var(--blue)}
.evtabs button[aria-pressed=true]::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--blue)}
.evtabs button:focus-visible{outline-offset:-3px}
.fchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto}
.fchips:empty{display:none}
.fchip-b{display:inline-flex;align-items:center;gap:6px;height:32px;font:inherit;font-size:14px;font-weight:500;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:0 12px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.fchip-b:hover{background:var(--hover)}
.fchip-b[aria-pressed=true]{background:var(--sel);color:var(--on-sel);border-color:var(--sel);padding-left:8px}
.fchip-b[aria-pressed=true]::before{content:"";width:12px;height:7px;margin:0 2px 0 3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.fchip-b .n{font-variant-numeric:tabular-nums;color:inherit;opacity:.7;font-weight:400}
.evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:20px;list-style:none;margin:0;padding:0}
.evgrid>li{min-width:0}
.evcard{display:flex;flex-direction:column;height:100%;padding:0;border-radius:24px;background:var(--bg);color:var(--ink-2);text-decoration:none;box-shadow:0 0 0 1px var(--card-line);transition:box-shadow .25s ease}
.evcard:hover{box-shadow:var(--shadow-lg)}
/* cover image (Peatix ratio 920:450) on top, rounded top corners only */
.evmedia{position:relative;display:block;flex:none;aspect-ratio:920/450;border-radius:24px 24px 0 0;overflow:hidden;background:var(--sc)}
.evmedia img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.evmedia .evdate{position:absolute;display:none}
.evd-s{display:inline-block;margin-right:8px;padding:0 7px;border-radius:6px;background:var(--sel);color:var(--on-sel);font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.evd-s.past{background:var(--sc);color:var(--ink)}
.noimg .evd-s{display:none}
.evmedia.tone0{--tone:var(--p-blue)}.evmedia.tone1{--tone:var(--p-yellow)}.evmedia.tone2{--tone:var(--p-green)}.evmedia.tone3{--tone:var(--p-red)}
/* no image / failed to load: pastel surface with the large date block centered */
.noimg .evmedia{background:var(--tone,var(--sc))}
.noimg .evmedia img{display:none}
.noimg .evmedia .evdate{display:flex;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;padding:10px 0 12px;border-radius:20px;box-shadow:none}
.noimg .evmedia .evdate .m{font-size:13px}
.noimg .evmedia .evdate .dd{font-size:30px;margin:3px 0 2px}
.noimg .evmedia .evdate .w{font-size:12px}
.evkind{font-size:12px;font-weight:500;letter-spacing:.5px;color:var(--ink-3);margin:0}
.evtime{display:flex;align-items:center;gap:6px}
.evtime svg{width:18px;height:18px;flex:none;color:var(--ink-3)}
.evdate{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:start;width:72px;padding:10px 0 12px;border-radius:20px;background:var(--sel);color:var(--on-sel);line-height:1.1;text-align:center}
.evdate .m{font-size:13px;font-weight:500}
.evdate .dd{font-size:30px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0;margin:3px 0 2px}
.evdate .w{font-size:12px}
.evdate.past{background:var(--sc);color:var(--ink)}
.evbody{min-width:0;flex:1;display:flex;flex-direction:column;gap:8px;padding:16px 20px 20px}
.evtitle{font-size:16px;font-weight:500;color:var(--ink);line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.evtime{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin:0}
.evchips{display:flex;flex-wrap:wrap;gap:6px}
.evchips .chip{white-space:normal;text-align:left}
.evtags{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;color:var(--ink-3);margin:0}
.evtags span::before{content:"#"}
.evgo{margin-top:auto;display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:500;color:var(--blue);padding-top:2px}
.evcard:hover .evgo{text-decoration:underline}
.ev-foot{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.ev-note{text-align:center;margin:16px 0 0}
.ev-empty{max-width:680px;margin:0 auto;text-align:center;background:var(--sc);border-radius:28px;padding:32px 24px}
.ev-empty b{display:block;color:var(--ink);font-size:18px;font-weight:500;margin-bottom:6px}
.ev-empty p{margin:0 0 18px}
.ev-empty .actions{justify-content:center;margin:0}
.skel{border-radius:28px;background:var(--sc);min-height:180px;position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--bg),transparent);opacity:.55;transform:translateX(-100%);animation:shim 1.4s ease-in-out infinite}
@keyframes shim{to{transform:translateX(100%)}}

/* ===== voices (marquee) ===== */
.mq{position:relative;overflow:hidden;max-width:100%}
.mq-track{display:flex;width:max-content;margin-inline:auto;padding-block:4px 8px;animation:mq var(--mq-dur,60s) linear infinite}
.mq:hover .mq-track,.mq:focus-within .mq-track,.mq.paused .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq.static{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.mq.static::-webkit-scrollbar{display:none}
.mq.static .mq-track{animation:none}
.vcard{flex:none;width:min(320px,calc(100vw - 72px));margin:0 16px 0 0;background:var(--bg);border:1px solid var(--line);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:14px;scroll-snap-align:start;white-space:normal}
.vcard .vtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vcard .qm{width:32px;height:32px;color:var(--blue)}
.vcard blockquote{margin:0;color:var(--ink);font-size:16px;line-height:1.7;flex:1;overflow-wrap:anywhere}
.vcard .by{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);line-height:1.4}
.vcard .by .face{width:52px;height:52px}
.vcard:hover .by .face{transform:scale(1.04)}
.vcard .by b{display:block;color:var(--ink);font-weight:500;font-size:14px}
.vcard .by .tx{min-width:0;flex:1}
.vcard.skel{min-height:220px;border:0}
.mq-ctl{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}
.mq-ctl .icon-btn{width:48px;height:48px;border:1px solid var(--outline);color:var(--ink)}
.mq-ctl .icon-btn[disabled]{opacity:.38;cursor:default;background:transparent}
.mq-ctl .btn{padding-block:11px}

/* ===== partner note ===== */
/* パートナー紹介 + note記事 */
.av{position:relative;display:inline-block;flex:none;border-radius:50%;overflow:hidden;line-height:0;background:var(--sc);width:32px;height:32px}
.av img{display:block;width:100%;height:100%;object-fit:cover}
.av .face{display:none;width:100%;height:100%}
.av.noimg img{display:none}
.av.noimg .face{display:block}
.av96{width:96px;height:96px;box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--card-line)}
.av20{width:20px;height:20px}
.pgrid{display:flex;gap:16px;list-style:none;margin:0;padding:4px 2px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.pgrid::-webkit-scrollbar{display:none}
.pgrid>li{flex:0 0 min(340px,84%);min-width:0;scroll-snap-align:start}
.p-ctl{display:flex;justify-content:flex-end;gap:12px;margin:8px 0 0}
.p-ctl .icon-btn{width:44px;height:44px;border:1px solid var(--outline);color:var(--ink)}
.p-ctl .icon-btn[disabled]{opacity:.38;cursor:default;background:transparent}
.pgrid .skel{min-height:220px}
.pgrid>li.skel{flex:0 0 min(340px,84%)}
.pcard{display:flex;flex-direction:column;gap:12px;height:100%;padding:20px;border-radius:28px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.ptop{display:flex;flex-direction:row;align-items:center;gap:14px;text-align:left}
.ptop .av96{width:64px;height:64px}
.pid{min-width:0}
.pcard h3{font-size:20px;font-weight:500;line-height:1.3;margin:0 0 8px;color:var(--ink);overflow-wrap:anywhere}
.pchips{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin:0}
.pchips .chip{white-space:normal;flex-wrap:wrap;column-gap:0}
/* 長い語を語の切れ目でだけ折り返す(例: パートナー|インフルエンサー) */
.ib{display:inline-block}
.pbio{font-size:14px;line-height:1.7;margin:0;overflow-wrap:anywhere}
.pev{background:var(--bg);border-radius:16px;padding:12px 14px;font-size:13px;line-height:1.55}
.pev b{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin-bottom:4px}
.pev ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pev li{position:relative;padding-left:14px;color:var(--ink);overflow-wrap:anywhere}
.pev li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.pev .more{color:var(--ink-3)}
.pact{margin-top:auto;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 12px}
/* カード同士で「顔と名前・紹介文・登壇イベント・ボタン」の行の高さをそろえる(イベント枠の上端と高さが3人で一致する)。subgrid 非対応の端末は従来のまま */
@supports (grid-template-rows:subgrid){
  .pgrid{display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,84%);grid-template-rows:repeat(4,auto);row-gap:0}
  .pgrid>li,.pgrid>li .pcard{grid-row:span 4;display:grid;grid-template-rows:subgrid}
  .pcard{row-gap:12px}
  .pcard .ptop{grid-row:1}.pcard .pbio{grid-row:2}.pcard .pev{grid-row:3}.pcard .pact{grid-row:4;align-self:end}
}
.plink{font-size:14px;font-weight:500;color:var(--blue);text-decoration:none;padding:8px 6px;border-radius:8px}
.plink:hover{text-decoration:underline;background:var(--hover)}
.nhead{text-align:center;margin:48px 0 20px}
.nsub{font-size:24px;font-weight:500;line-height:1.35;margin:0 0 6px;color:var(--ink)}
.nupd{text-align:center;margin:0}
.ntools{margin:0 0 24px}
.fchip-b .av{margin-left:-4px}
.fchip-b[aria-pressed=true] .av{margin-left:0}
.ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.ngrid>li{min-width:0}
.ncard{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:20px 22px 20px;border-radius:24px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);transition:box-shadow .2s ease,background-color .2s ease}
.ncard:hover{box-shadow:var(--shadow-lg);background:var(--bg)}
.nby{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;line-height:1.35;color:var(--ink-3);min-width:0}
.nby .who{display:flex;flex-direction:column;min-width:0;flex:1}
.nby .nm{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nby .dt{font-variant-numeric:tabular-nums}
.nby .chip{flex:none}
.chip.new{background:var(--blue);color:#fff;font-weight:700;letter-spacing:.4px}
.ncard h4{font-size:17px;font-weight:700;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ncard h4 a{color:var(--ink);text-decoration:none}
.ncard h4 a::after{content:"";position:absolute;inset:0;border-radius:24px}
.ncard h4 a:focus-visible{outline:none}
.ncard:has(h4 a:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.ncard .ex{font-size:14px;line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ncard .go{margin-top:auto;padding-top:4px;font-size:14px;font-weight:500;color:var(--blue)}
.ncard .sample{font-size:12px;color:var(--ink-3)}
@media (max-width:960px){
  .ngrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .ngrid{grid-template-columns:minmax(0,1fr)}
  .pgrid{gap:12px}
  .pgrid .skel{min-height:240px}
  .pcard{padding:20px}
  .ptop{flex-direction:row;align-items:center;text-align:left;gap:16px}
  .pchips{justify-content:flex-start}
  .pcard h3{font-size:20px;margin-bottom:6px}
  .pact{justify-content:flex-start}
  .ntools .fchips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
  .ntools .fchips::-webkit-scrollbar{display:none}
  .ntools .fchip-b{flex:none}
}

/* ===== paid consultation ===== */
.paidline{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--line);border-radius:28px;padding:16px 18px;background:var(--bg)}
.paidline .ic{width:48px;height:48px;border-radius:50%;background:var(--p-yellow);color:var(--on-pastel);display:grid;place-items:center;flex:none}
.paidline .ic svg{width:24px;height:24px}
.paidline .tx{flex:1;min-width:12em}
.paidline b{display:block;color:var(--ink);font-weight:500}
.paidline .tx span{font-size:14px;color:var(--ink-2)}
.paid-tag{display:inline-block;font-style:normal;font-size:12px;font-weight:500;line-height:16px;padding:1px 8px;border-radius:8px;border:1px solid var(--line);color:var(--ink-2);margin-left:8px;vertical-align:2px}

@media (max-width:820px){
  .paidline .btn{width:100%}
}
@media (max-width:440px){
  .evbody{padding:14px 16px 16px}
}
.hnav .btn,.pnav a{white-space:nowrap}
@media (max-width:1250px) and (min-width:821px){.pnav{display:none}.menu-btn{display:inline-grid}}

/* ===== A0 追加: 本番用(CSP でインライン style を使わないための置き換え) ===== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--bg);color:var(--blue);padding:10px 16px;border-radius:1000px;box-shadow:var(--shadow-lg);font-weight:500;text-decoration:none}
.skip:focus{top:12px}
.tabs a{text-decoration:none}
/* デモの style="background:var(--p-xxx)" 等の置き換え(工程Bで必要に応じて追加) */
.bg-p-blue{background:var(--p-blue)}.bg-p-yellow{background:var(--p-yellow)}.bg-p-green{background:var(--p-green)}.bg-p-red{background:var(--p-red)}
.bg-gold{background:var(--gold)}.bg-silver{background:var(--silver)}.bg-bronze{background:var(--bronze)}
.m-0{margin:0}.mt-6{margin-top:6px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.ta-c{text-align:center}.ta-r{text-align:right}
.mw-340{max-width:340px}.mw-720{max-width:720px;margin-inline:auto}
/* 汎用の空状態・プレースホルダー(A0 の「準備中」ページ) */
.placeholder{padding-block:72px;text-align:center}
.placeholder .ptitle{margin-bottom:12px}
.err-page{padding-block:96px;text-align:center}
.err-page .code{font-size:14px;color:var(--ink-3);margin:0 0 8px}
.err-page .ref{font-size:13px;color:var(--ink-3);margin-top:16px}
/* JS 無効時の案内 */
.noscript{background:var(--t-yellow);color:var(--ink);padding:12px 16px;text-align:center;font-size:14px}
/* アカウントメニュー: 本番はリンクとログアウトのフォーム */
.acct-menu .grp a.grp-link,.acct-menu .grp form button{display:flex;align-items:center;gap:14px;font:inherit;font-size:14px;font-weight:500;color:var(--ink);background:none;border:0;padding:14px 18px;cursor:pointer;width:100%;text-decoration:none;text-align:left}
.acct-menu .grp a.grp-link:hover{background:var(--hover)}
.acct-menu .grp form{margin:0}
.eill-host{min-height:99px}
pre.debug{text-align:left;white-space:pre-wrap;font-size:12px;background:var(--sc);padding:16px;border-radius:12px;overflow:auto;max-height:50vh}

/* ===== 工程B: 公開ページ(デモの style="" の置き換えと、本番で増えたページ) ===== */
.ill-slot{display:contents}
.hero-note{text-align:center;margin:16px 0 0}
.w-38{width:38%}.w-52{width:52%}.w-57{width:57%}.w-74{width:74%}.w-92{width:92%}
.as-start{align-self:flex-start}
.fw-500{font-weight:500}
.mb-0{margin-bottom:0}
.mt-32{margin-top:32px}
.price-note{margin:12px 0 0;color:var(--blue-strong)}
.ev-empty.vempty{max-width:680px;margin-inline:auto}
.vcard .sample,.vcard .tx .sample{display:inline-block;font-size:11px;font-weight:500;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-left:4px}
.article .rel-h{margin-top:0;font-size:18px}
/* お知らせ(トップ下部・一覧) */
.newslist{list-style:none;margin:0 auto 24px;padding:0;max-width:760px;border-top:1px solid var(--line)}
.newslist li{display:flex;gap:16px;align-items:baseline;padding:14px 4px;border-bottom:1px solid var(--line)}
.newslist time{flex:none;font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.newslist a{color:var(--ink);text-decoration:none;font-weight:500}
.newslist a:hover{color:var(--blue);text-decoration:underline}
.annlist{list-style:none;margin:0;padding:0}
.annlist>li{padding:20px 0;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.annlist h2{font-size:20px;margin:4px 0 8px;padding:0}
.annlist .ann-d{font-size:13px;color:var(--ink-3);margin:0;font-variant-numeric:tabular-nums}
.annlist .ann-b{overflow-wrap:anywhere}
/* イベント一覧(P02): JS なしで動くリンク版のタブ・チップ */
.evlist-page{padding-block:32px 72px}
.evlist-page .sec-head{margin-bottom:32px}
.evlist-page .ptitle{font-size:clamp(28px,4vw,40px);font-weight:400;line-height:1.25;margin:0 0 12px}
.evtabs a{position:relative;font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:12px 20px 14px;border-radius:12px 12px 0 0;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.evtabs a:hover{background:var(--hover);color:var(--ink)}
.evtabs a[aria-current=page]{color:var(--blue)}
.evtabs a[aria-current=page]::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--blue)}
a.fchip-b{text-decoration:none}
.fchip-b[aria-current=page]{background:var(--sel);color:var(--on-sel);border-color:var(--sel);padding-left:8px}
.fchip-b[aria-current=page]::before{content:"";width:12px;height:7px;margin:0 2px 0 3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
@media (max-width:560px){.evtabs a{padding-inline:14px}}
.pager{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:32px}
.pager .pg{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* イベント詳細(P03) */
.evd{max-width:760px;margin:0 auto;padding:32px 0 24px;color:var(--ink-2)}
.evd h1{font-size:clamp(24px,3.4vw,32px);line-height:1.35;color:var(--ink);margin:0 0 20px;overflow-wrap:anywhere}
.evd-kind{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--blue);margin:0 0 8px}
.evd-cover{position:relative;aspect-ratio:920/450;border-radius:24px;overflow:hidden;background:var(--sc);margin:0 0 24px}
.evd-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.evd-cover .evd-ph{display:none}
.evd-cover.noimg{background:var(--tone,var(--sc))}
.evd-cover.noimg img{display:none}
.evd-cover.noimg .evd-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--on-pastel)}
.evd-cover.noimg .evd-ph svg{width:72px;height:72px;opacity:.75}
.evd-cover.tone0{--tone:var(--p-blue)}.evd-cover.tone1{--tone:var(--p-yellow)}.evd-cover.tone2{--tone:var(--p-green)}.evd-cover.tone3{--tone:var(--p-red)}
.evd-facts{display:grid;gap:0;margin:0 0 24px;border-top:1px solid var(--line)}
.evd-facts>div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.evd-facts dt{font-size:14px;color:var(--ink-3);font-weight:500}
.evd-facts dd{margin:0;color:var(--ink);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.evd-facts dd.evtags{font-size:14px;gap:4px 12px}
.evd-facts dd.evtags a{color:var(--blue);text-decoration:none}
.evd-facts dd.evtags a::before{content:"#"}
.evd-facts dd.evtags a:hover{text-decoration:underline}
.evd-h{font-size:20px;color:var(--ink);margin:0 0 8px}
.evd-sum{font-size:16px;line-height:1.8;margin:0 0 24px;overflow-wrap:anywhere}
.evd-cta{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px;border-radius:24px;background:var(--surface);text-align:center}
.evd-cta .hint{margin:0;max-width:36em}
.evd-rel{max-width:1184px;margin:24px auto 0;padding:0}
.evd-rel h2{font-size:22px;text-align:center;margin:0 0 20px;color:var(--ink)}
@media (max-width:560px){.evd-facts>div{grid-template-columns:1fr;gap:4px}}
/* 規約・ポリシー(P06/P07) */
.tbd{display:inline-block;font-weight:700;color:var(--a-red,#b3261e);background:var(--t-yellow,#fef7e0);border-radius:4px;padding:0 4px}
.legal-dl{margin:0 0 16px;border-top:1px solid var(--line)}
.legal-dl>div{display:grid;grid-template-columns:11em 1fr;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.legal-dl dt{color:var(--ink-3);font-size:14px}
.legal-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
@media (max-width:560px){.legal-dl>div{grid-template-columns:1fr;gap:2px}}
.legal ol.steps-list,.legal ul.plain{margin-bottom:16px}
.mq-dup{display:flex}

/* ===== スマホ対応の見直し(設計書 §15.3.7) ===== */
/* 横スクロールする入れ物は .sr(絶対配置)の基準にする。基準が外にあると、見えない読み上げ文がスクロール内容の右端の位置でページ幅を広げる(トップのパートナー横スライドで発生) */
.pgrid,.car,.jump ul,.fchips{position:relative}
/* 横スクロールのヒント: 続きがある側の端を薄くする(site.js の scrollHints が .sx-l / .sx-r を付ける) */
.sx-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.sx-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
.sx-l.sx-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.jump ul{scroll-snap-type:x proximity;scroll-padding-inline:12px}
.jump li{scroll-snap-align:start}
/* フッターの長いリンク名は文節で折り返す(「プライバシーポリシ/ー」を防ぐ) */
.fcols a,.fcols button,.free .incl li,.paidline b{word-break:auto-phrase}
/* タップ領域 44px 以上(スマホ・タッチ端末)。見た目の大きさはなるべく変えず、余白や当たり判定で広げる */
@media (max-width:820px),(pointer:coarse){
  .btn.sm{min-height:44px}
  .icon-btn,.avatar-btn{width:44px;height:44px}
  .logo{min-height:44px}
  .jump a{padding-block:12px}
  .fchips{row-gap:12px}
  .fchip-b{position:relative}
  .fchip-b::after{content:"";position:absolute;inset:-6px -2px}
  .plink{padding-block:12px}
  .helplink a{padding-block:12px}
  .fcols ul{gap:0}
  .fcols a,.fcols button{display:inline-block;padding-block:11px}
  .fbottom a{display:inline-block;padding-block:12px}
  .crumbs a,.toc a,.evtags a,.evd-facts dd.evtags a,.legal-dl dd a{padding-block:12px}
  .toc li+li{margin-top:4px}
}
@media (max-width:820px){
  .fcols h4{margin-bottom:4px}
}
@media (max-width:600px){
  /* 登録 STEP1 のアカウント表示: 折り返すと丸い枠が楕円になるので角丸に */
  .acct{border-radius:24px;padding:12px}
  .acct .who{flex:1 1 160px}
  .acct .btn{margin-left:auto}
}
@media (max-width:440px){
  /* hero の数字: 「3,000人突/破」のような文字単位の折り返しを防ぐ */
  .hero-facts{grid-template-columns:repeat(3,auto);justify-content:center}
  .hero-facts li{padding:10px 8px;min-width:auto}
  .hero-facts b{font-size:16px;letter-spacing:0;white-space:nowrap}
  .hero-facts li>span{font-size:12px;word-break:auto-phrase}
}
@media (max-width:360px){
  .hero-facts{gap:4px}
  .hero-facts li{padding-inline:6px}
  .hero-facts b{font-size:15px}
}
@media (max-width:440px){
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcols a,.fcols button{overflow-wrap:anywhere}
}
@media (max-width:360px){
  .evtabs a,.evtabs button{padding-inline:10px}
}

/* =============================================================================
   活動レポート(WordPress の記事 §7.12): トップの欄・/reports/・イベント詳細・イベントカードの「レポートあり」
   ============================================================================= */
.chip.report{background:var(--p-blue);color:var(--on-pastel)}
.rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.rgrid>li{min-width:0}
.rcard{position:relative;display:flex;flex-direction:column;height:100%;border-radius:24px;background:var(--bg);color:var(--ink-2);box-shadow:0 0 0 1px var(--card-line);transition:box-shadow .25s ease}
.rcard:hover{box-shadow:var(--shadow-lg)}
.rcard:has(.rtitle a:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.rmedia{position:relative;display:block;flex:none;aspect-ratio:1200/630;border-radius:24px 24px 0 0;overflow:hidden;background:var(--sc)}
.rmedia img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.rmedia.tone0{--tone:var(--p-blue)}.rmedia.tone1{--tone:var(--p-yellow)}.rmedia.tone2{--tone:var(--p-green)}.rmedia.tone3{--tone:var(--p-red)}
.rcard.noimg .rmedia{background:var(--tone,var(--sc));display:grid;place-items:center;color:var(--on-pastel)}
.rcard.noimg .rmedia svg{width:56px;height:56px;opacity:.75}
.rbody{min-width:0;flex:1;display:flex;flex-direction:column;gap:8px;padding:16px 20px 20px}
.rmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rtitle{font-size:16px;font-weight:500;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.rtitle a{color:var(--ink);text-decoration:none}
.rtitle a::after{content:"";position:absolute;inset:0;border-radius:24px}
.rtitle a:focus-visible{outline:none}
.rex{font-size:14px;line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.rgo{margin-top:auto;display:inline-flex;align-items:center;gap:4px;padding-top:2px;font-size:14px;font-weight:500;color:var(--blue)}
.rcard:hover .rgo{text-decoration:underline}
.r-foot{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.r-note{text-align:center;margin:16px auto 0;max-width:40em}
.evd-rep{margin:0 0 24px}
.evd-rep .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rep-list{margin-top:8px}
@media (max-width:1023px){
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .rgrid,.evd-rep .rgrid{grid-template-columns:minmax(0,1fr);gap:16px}
  .rbody{padding:14px 16px 18px}
}

/* ---- 会員のアイコン(§15.3.10)。丸の中に顔イラスト(illust.js)か頭文字 ---- */
.avatar-btn>span,.acct-menu .big-av{overflow:hidden}
.avatar-btn>span{width:100%;height:100%;border-radius:50%;display:grid;place-items:center}
.avatar-btn .face,.acct-menu .big-av .face{display:block;width:100%;height:100%}

/* ===== 報酬: 枠・コスチューム・バッジ(§15.3.14)。公開の記事ページでも使うので site.css に置く ===== */
.avx{position:relative;display:inline-block;flex:none;border-radius:50%;vertical-align:middle;line-height:0}
.avx-xs{width:28px;height:28px}.avx-sm{width:44px;height:44px}.avx-md{width:56px;height:56px}.avx-lg{width:96px;height:96px}
.avx-in{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--sc);line-height:1}
.avx-in .face,.avx-in .face svg{display:block;width:100%;height:100%}
.avx-in.av-initial{background:var(--p-blue);color:var(--on-pastel);font-weight:700;font-size:.9em}
.avx-md .avx-in.av-initial{font-size:22px}.avx-lg .avx-in.av-initial{font-size:38px}.avx-sm .avx-in.av-initial{font-size:18px}.avx-xs .avx-in.av-initial{font-size:12px}
.avx-cos{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.avx.has-frame{padding:4px;box-sizing:border-box;background:var(--fr,var(--line))}
.avx-lg.has-frame{padding:7px}.avx-xs.has-frame{padding:2px}
.avx.has-frame .avx-in{box-shadow:0 0 0 1.5px var(--surface,#fff)}
.avx.has-frame .avx-cos{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}
.avx-lg.has-frame .avx-cos{inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}
.avx-xs.has-frame .avx-cos{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
.fr-sky{--fr:linear-gradient(135deg,#a8c7fa,#4285f4)}
.fr-leaf{--fr:linear-gradient(135deg,#a8dab5,#34a853)}
.fr-sun{--fr:linear-gradient(135deg,#fde293,#f9ab00)}
.fr-ruby{--fr:linear-gradient(135deg,#f6aea9,#c5221f)}
.fr-sapphire{--fr:linear-gradient(135deg,#7baaf7,#0b57d0 60%,#062e6f)}
.fr-amethyst{--fr:linear-gradient(135deg,#d7aefb,#7b2cbf)}
.fr-platinum{--fr:conic-gradient(#f1f3f4,#9aa0a6,#fff,#bdc1c6,#f1f3f4);box-shadow:0 0 0 1px #bdc1c6}
.fr-rainbow{--fr:conic-gradient(#ea4335,#fbbc04,#34a853,#4285f4,#a142f4,#ea4335)}
.fr-creator{--fr:repeating-conic-gradient(#4285f4 0 30deg,#d3e3fd 30deg 60deg)}
.fr-bronze{--fr:linear-gradient(135deg,#e6b98a,#a15c23);box-shadow:0 0 6px rgba(161,92,35,.45)}
.fr-silver{--fr:linear-gradient(135deg,#f1f3f4,#80868b);box-shadow:0 0 6px rgba(128,134,139,.5)}
.fr-gold{--fr:conic-gradient(#fff3b0,#f9ab00,#fff3b0,#e37400,#fff3b0);box-shadow:0 0 10px rgba(249,171,0,.6)}
.fr-writer{--fr:repeating-linear-gradient(45deg,#188038 0 4px,#ceead6 4px 8px)}
.fr-partner{--fr:linear-gradient(135deg,#0b57d0,#34a853,#fbbc04,#ea4335)}
.fr-staff{--fr:linear-gradient(135deg,#444746,#1f1f1f)}
.fr-pioneer{--fr:repeating-conic-gradient(#fbbc04 0 20deg,#0b57d0 20deg 40deg)}
.mbadges{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.mbadge{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--blue-soft);color:var(--blue-strong)}
.mbadge svg{width:15px;height:15px;fill:currentColor}
.mbadge.bd-attend1,.mbadge.bd-attend3{background:#e6f4ea;color:#137333}
.mbadge.bd-attend5,.mbadge.bd-attend10{background:#fef7e0;color:#b06000}
.mbadge.bd-attend25{background:#fce8e6;color:#c5221f}
.mbadge.bd-rank3{background:#f3e3d3;color:#8a4b15}
.mbadge.bd-rank1{background:#fdd663;color:#7a4f01}
.mbadge.bd-staff{background:#444746;color:#fff}
/* 今やっているイベント(§15.3.13) */
.now-sec{padding-block:32px;background:var(--bg)}
.now-title{font-size:clamp(20px,2.6vw,26px);font-weight:500;margin:0 0 16px;text-align:center}
.now-card{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:20px 24px;margin-bottom:12px;border-radius:28px;background:var(--blue-soft);color:var(--ink)}
.now-tx{flex:1;min-width:240px}
.now-tx h2,.now-tx h3{font-size:20px;font-weight:500;margin:0 0 6px}
.now-tx h2 a{color:inherit;text-decoration:none}
.now-kicker{font-size:13px;font-weight:500;color:var(--blue-strong);margin:0 0 4px}
.now-when{font-size:14px;font-weight:500;margin:8px 0 0}
/* メンバーの記事(§15.3.15) */
.art-kicker{font-size:13px;font-weight:500;color:var(--blue-strong);margin:0 0 6px}
.art-author{display:flex;align-items:center;gap:12px;margin:0 0 24px}
.art-name{font-weight:500;color:var(--ink)}
.art-cover{margin:0 0 24px;border-radius:20px;overflow:hidden}
.art-cover img{display:block;width:100%;height:auto}
.md-body{overflow-wrap:anywhere}
.md-body h2{font-size:22px;line-height:1.35;margin:36px 0 12px}
.md-body h3{font-size:18px;margin:28px 0 8px}
.md-body h4{font-size:16px;margin:20px 0 6px}
.md-body p{margin:0 0 14px}
.md-body ul,.md-body ol{margin:0 0 16px;padding-left:1.5em}
.md-body li{margin-bottom:4px}
.md-body blockquote{margin:0 0 16px;padding:8px 16px;border-left:4px solid var(--line);color:var(--ink-2)}
.md-body blockquote p{margin:0}
.md-body hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.md-body code{background:var(--sc);border-radius:6px;padding:1px 6px;font-size:.92em}
.md-body pre{background:var(--sc);border-radius:12px;padding:14px 16px;overflow-x:auto;margin:0 0 16px}
.md-body pre code{background:none;padding:0;display:block;white-space:pre}
.art-note{font-size:13px;color:var(--ink-3);margin:32px 0 0;padding-top:16px;border-top:1px solid var(--line)}
/* 3枚並びのカード(トップの「会員さんが書いた記事」) */
.rgrid.rgrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.rgrid.rgrid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rgrid.rgrid-3{grid-template-columns:minmax(0,1fr)}}