@charset "UTF-8";
/* ZEN AI LAB — front page v2 (2026-09-09 改装). front page / zen page templates only. No editor or SANGO article selectors.
   方針: 追加ライブラリ 0 / ラスタ画像 0（宇宙背景・惑星・立方体は CSS と inline SVG）/ アニメーションは transform・opacity のみ /
         テキストは DOM に残す（SEO）/ レイアウトシフトを起こす動きは入れない。 */
body.zen-home{--zen-bg:#070b18;--zen-bg2:#0a1022;--zen-surface:#0e1528;--zen-surface2:#121b33;--zen-text:#f2f5ff;--zen-muted:#9aa6c8;--zen-muted2:#7f8bb0;
  --zen-purple:#a78bfa;--zen-purple2:#7c3aed;--zen-blue:#60a5fa;--zen-blue2:#2563eb;--zen-gold:#e8c67b;--zen-gold2:#b8902f;
  --zen-border:rgba(130,150,230,.18);--zen-border2:rgba(130,150,230,.32);--zen-radius:14px;--zen-radius-lg:22px;
  margin:0;background:var(--zen-bg);color:var(--zen-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.8;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
.zen-home *,.zen-home *::before,.zen-home *::after{box-sizing:border-box}
.zen-home a{color:inherit;text-decoration:none}
.zen-home img,.zen-home svg{max-width:100%}
.zen-home h1,.zen-home h2,.zen-home h3{margin:0;line-height:1.3;letter-spacing:-.01em;font-weight:750}
.zen-home p{margin:0}
.zen-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.zen-skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:100}
.zen-skip:focus{left:8px}
.zen-mobile-break{display:none}
.zen-gradient{background:linear-gradient(92deg,#8ab4ff 0%,#a78bfa 55%,#c4b5fd 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.zen-eyebrow{margin:0 0 14px;font-size:.68rem;letter-spacing:.2em;font-weight:700;color:var(--zen-blue)}
.zen-note{font-size:.74rem;color:var(--zen-muted);line-height:1.8;margin-top:14px}
.zen-pill{display:inline-flex;align-items:center;font-size:.58rem;letter-spacing:.14em;font-weight:700;border:1px solid var(--zen-border2);border-radius:999px;padding:4px 10px;color:var(--zen-muted)}
.zen-pill-soon{border-color:rgba(232,198,123,.45);color:var(--zen-gold)}
.zen-button{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.06em;padding:13px 20px;border-radius:10px;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;white-space:nowrap}
.zen-button .zen-i{width:15px;height:15px}
.zen-primary{background:linear-gradient(135deg,#7c3aed 0%,#5b5cf6 100%);color:#fff;box-shadow:0 10px 30px rgba(124,58,237,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.zen-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(124,58,237,.5)}
.zen-secondary{background:rgba(96,165,250,.06);border-color:rgba(96,165,250,.45);color:#dbe7ff}
.zen-secondary:hover{transform:translateY(-2px);border-color:#93c5fd;background:rgba(96,165,250,.12)}
.zen-ghost{background:transparent;border-color:var(--zen-border2);color:var(--zen-text)}
.zen-ghost:hover{border-color:#93c5fd}
.zen-button-sm{padding:9px 16px;font-size:.7rem}
.zen-disabled{opacity:.55;cursor:default;pointer-events:none}
.zen-actions{display:flex;flex-wrap:wrap;gap:12px}
.zen-i{display:inline-block;vertical-align:middle;flex:none}

/* ===== header ===== */
.zen-header{position:sticky;top:0;z-index:50;background:rgba(7,11,24,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--zen-border)}
.zen-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.zen-logo{font-size:.95rem;font-weight:800;letter-spacing:.22em;color:var(--zen-text)}
.zen-nav{display:flex;flex-wrap:wrap;gap:28px}
.zen-nav a{font-size:.68rem;letter-spacing:.16em;font-weight:700;color:var(--zen-muted);white-space:nowrap;transition:color .2s}
.zen-nav a:hover{color:#fff}
.zen-header-actions{display:flex;gap:10px}
.zen-menu-toggle{display:none}

/* ===== space background（ラスタ画像なし） ===== */
.zen-space{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.zen-stars{position:absolute;inset:-10% -10% -10% -10%;opacity:.9;
  background-image:radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.9) 50%,transparent 51%),radial-gradient(1px 1px at 28% 62%,rgba(255,255,255,.7) 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 41% 30%,rgba(255,255,255,.85) 50%,transparent 51%),radial-gradient(1px 1px at 55% 12%,rgba(255,255,255,.6) 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 66% 48%,rgba(255,255,255,.8) 50%,transparent 51%),radial-gradient(1px 1px at 78% 22%,rgba(255,255,255,.65) 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 88% 58%,rgba(255,255,255,.9) 50%,transparent 51%),radial-gradient(1px 1px at 8% 80%,rgba(255,255,255,.6) 50%,transparent 51%),
  radial-gradient(1px 1px at 34% 86%,rgba(255,255,255,.55) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 72% 82%,rgba(255,255,255,.75) 50%,transparent 51%),
  radial-gradient(1px 1px at 93% 8%,rgba(255,255,255,.6) 50%,transparent 51%),radial-gradient(1px 1px at 50% 70%,rgba(255,255,255,.5) 50%,transparent 51%);
  background-size:520px 420px;animation:zen-stars 120s linear infinite}
@keyframes zen-stars{from{transform:translate3d(0,0,0)}to{transform:translate3d(-260px,-105px,0)}}
.zen-nebula{position:absolute;inset:0;background:radial-gradient(900px 520px at 78% 30%,rgba(99,102,241,.28),transparent 60%),radial-gradient(700px 480px at 12% 62%,rgba(37,99,235,.22),transparent 60%),radial-gradient(500px 300px at 55% 85%,rgba(124,58,237,.2),transparent 60%)}
.zen-planet{position:absolute;left:50%;top:calc(100% - 140px);width:190vw;height:190vw;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%,rgba(120,160,255,.45) 0%,rgba(40,70,180,.35) 8%,rgba(10,16,40,.98) 22%,#05081a 40%);
  box-shadow:0 -24px 90px rgba(96,140,255,.55),0 -2px 14px rgba(180,210,255,.8)}
.zen-space-bottom .zen-planet{top:auto;bottom:calc(100% - 150px);transform:translateX(-50%) rotate(180deg)}

/* ===== hero ===== */
.zen-hero{position:relative;overflow:hidden;padding:72px 0 120px;background:linear-gradient(180deg,#070b18 0%,#0a1330 60%,#070b18 100%);border-bottom:1px solid var(--zen-border)}
.zen-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.zen-hero h1{font-size:clamp(2.2rem,5.2vw,4.1rem);line-height:1.18;margin:0 0 20px}
.zen-lead{font-size:1.02rem;color:#cbd5f5;max-width:34em;margin:0 0 28px;line-height:1.95}
.zen-chips{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.zen-chips li{display:inline-flex;align-items:center;gap:7px;font-size:.64rem;letter-spacing:.14em;font-weight:700;color:#aab8e6}
.zen-chips .zen-i{color:var(--zen-blue)}
.zen-availability{margin-top:22px;font-size:.72rem;color:var(--zen-muted);line-height:1.8;max-width:40em}
.zen-core-visual{position:relative;display:grid;grid-template-columns:150px 1fr 120px;grid-template-rows:auto auto;gap:14px;align-items:center;min-height:420px}
.zen-core-stack{grid-column:2;grid-row:1;display:flex;justify-content:center}
.zen-core-svg{overflow:visible;animation:zc-float 6s ease-in-out infinite alternate}
@keyframes zc-float{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
.zc-halo{animation:zc-halo 4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes zc-halo{from{transform:scale(.9);opacity:.6}to{transform:scale(1.08);opacity:1}}
.zc-plate{animation:zc-plate 3.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.zc-plate-2{animation-delay:.5s}.zc-plate-3{animation-delay:1s}
@keyframes zc-plate{from{opacity:.25;transform:translateY(2px)}to{opacity:.85;transform:translateY(-2px)}}
.zc-spark{animation:zc-spark 2.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes zc-spark{from{opacity:.3;transform:scale(.6)}to{opacity:1;transform:scale(1.6)}}
.zc-links path{animation:zc-dash 2.4s linear infinite}
@keyframes zc-dash{to{stroke-dashoffset:-16}}
.zen-core-panel{display:flex;flex-direction:column;gap:10px;border:1px solid var(--zen-border);border-radius:14px;padding:14px;background:rgba(14,21,40,.75);backdrop-filter:blur(6px)}
.zen-core-left{grid-column:1;grid-row:1}
.zen-core-right{grid-column:3;grid-row:1;border:0;background:transparent;padding:0;gap:14px}
.zen-core-left span{display:flex;align-items:center;gap:9px;font-size:.72rem;color:#dbe4ff;letter-spacing:.04em}
.zen-core-left i{width:22px;height:22px;border-radius:7px;border:1px solid rgba(147,197,253,.5);background:linear-gradient(135deg,rgba(96,165,250,.35),rgba(124,58,237,.35));display:inline-block;flex:none}
.zen-core-right span{font-size:.66rem;letter-spacing:.2em;font-weight:700;color:#8fb0ff;position:relative;padding-left:14px}
.zen-core-right span::before{content:"";position:absolute;left:0;top:50%;width:7px;height:1px;background:#8fb0ff}
.zen-core-tiles{grid-column:1/-1;grid-row:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.zen-core-tiles li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:84px;border:1px solid rgba(147,197,253,.35);border-radius:14px;
  background:linear-gradient(180deg,rgba(30,45,100,.7),rgba(12,18,44,.9));box-shadow:0 0 0 1px rgba(96,165,250,.08),0 12px 30px rgba(20,40,120,.35);color:#dbe7ff;
  animation:zc-tile 5s ease-in-out infinite alternate}
.zen-core-tiles li:nth-child(2){animation-delay:.6s}.zen-core-tiles li:nth-child(3){animation-delay:1.2s}.zen-core-tiles li:nth-child(4){animation-delay:1.8s}
@keyframes zc-tile{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.zen-core-tiles .zen-i{color:#93c5fd}
.zen-core-tiles span{font-size:.62rem;letter-spacing:.12em;font-weight:700}

/* ===== sections ===== */
.zen-section{padding:56px 0}
.zen-row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.zen-h2-sm{font-size:.92rem;letter-spacing:.2em;font-weight:800}
.zen-row-sub{font-size:.72rem;color:var(--zen-muted);margin-top:4px}
.zen-row-link{font-size:.64rem;letter-spacing:.1em;color:var(--zen-muted)}
.zen-section-heading h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:10px}
.zen-section-heading p{color:var(--zen-muted);max-width:46em}

/* pillars */
.zen-pillars-section{padding:0 0 10px;margin-top:-60px;position:relative;z-index:2}
.zen-pillars{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.zen-pillar{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:26px 26px;border-radius:var(--zen-radius-lg);border:1px solid var(--zen-border2);
  box-shadow:0 20px 60px rgba(0,0,0,.45);transition:transform .25s ease,box-shadow .25s ease}
.zen-pillar:hover{transform:translateY(-4px);box-shadow:0 26px 70px rgba(0,0,0,.55)}
.zen-pillar-purple{background:linear-gradient(135deg,#2a1554 0%,#3b1f7a 45%,#1b1440 100%)}
.zen-pillar-blue{background:linear-gradient(135deg,#0f2452 0%,#17357d 45%,#0d1b44 100%)}
.zen-pillar-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#e9d5ff}
.zen-pillar-blue .zen-pillar-icon{color:#bfdbfe}
.zen-pillar h2{font-size:1.25rem;letter-spacing:.06em}
.zen-pillar-sub{font-size:.9rem;font-weight:700;margin:4px 0 6px}
.zen-pillar-desc{font-size:.74rem;color:#cbd5f5;line-height:1.75;margin-bottom:10px}
.zen-pillar-art{position:relative;width:110px;height:90px}
.zen-pillar-art span{position:absolute;right:0;width:72px;height:56px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  animation:zen-art 5s ease-in-out infinite alternate}
.zen-pillar-art span:nth-child(1){top:0;opacity:.9}.zen-pillar-art span:nth-child(2){top:16px;right:14px;opacity:.6;animation-delay:.8s}.zen-pillar-art span:nth-child(3){top:32px;right:28px;opacity:.35;animation-delay:1.6s}
@keyframes zen-art{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-5px) rotate(2deg)}}

/* releases */
.zen-release-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.zen-release{border:1px solid var(--zen-border);border-radius:var(--zen-radius);background:var(--zen-surface);padding:18px 14px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0;
  transition:transform .25s ease,border-color .25s ease}
.zen-release:hover{transform:translateY(-4px);border-color:var(--zen-border2)}
.zen-release-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(96,165,250,.25),rgba(124,58,237,.25));border:1px solid rgba(147,197,253,.35);color:#bfdbfe}
.zen-release h3{font-size:.78rem;letter-spacing:.08em}
.zen-release p{font-size:.62rem;color:var(--zen-muted);line-height:1.6}
.zen-tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:auto}
.zen-tag{font-size:.5rem;letter-spacing:.1em;font-weight:700;padding:3px 7px;border-radius:5px;border:1px solid var(--zen-border2);color:var(--zen-muted)}
.zen-tag-automation{background:rgba(124,58,237,.25);border-color:rgba(167,139,250,.5);color:#e9d5ff}
.zen-tag-tools{background:rgba(37,99,235,.25);border-color:rgba(96,165,250,.5);color:#dbeafe}
.zen-tag-stage{background:rgba(255,255,255,.04)}

/* how */
.zen-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.zen-how-step{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--zen-border);border-radius:var(--zen-radius);background:var(--zen-surface);padding:14px 14px}
.zen-how-no{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;border:1.5px solid rgba(96,165,250,.6);color:#dbe7ff;box-shadow:0 0 22px rgba(96,165,250,.35)}
.zen-how-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.zen-how-body strong{font-size:.68rem;letter-spacing:.16em;color:var(--zen-blue)}
.zen-how-body span{font-size:.7rem;color:#cbd5f5;line-height:1.6}
.zen-how-arrow{color:var(--zen-muted2)}
.zen-how-step:last-child .zen-how-arrow{visibility:hidden}

/* categories */
.zen-cat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.zen-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:82px;border:1px solid var(--zen-border);border-radius:var(--zen-radius);background:var(--zen-surface);font-size:.68rem;font-weight:700;letter-spacing:.04em;
  transition:transform .25s ease,border-color .25s ease}
.zen-cat:hover{transform:translateY(-3px);border-color:var(--zen-border2)}
.zen-cat-icon{color:#93c5fd}

/* membership */
.zen-plan-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.zen-plan{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon head" "desc desc" "foot foot";gap:8px 14px;padding:22px;border-radius:var(--zen-radius-lg);border:1px solid var(--zen-border2)}
.zen-plan-purple{background:linear-gradient(160deg,#241348 0%,#150d33 100%)}
.zen-plan-blue{background:linear-gradient(160deg,#0f2452 0%,#0a1633 100%)}
.zen-plan-gold{background:linear-gradient(160deg,#3a2c12 0%,#1d160a 100%);border-color:rgba(232,198,123,.45)}
.zen-plan-icon{grid-area:icon;width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#e9d5ff}
.zen-plan-blue .zen-plan-icon{color:#bfdbfe}.zen-plan-gold .zen-plan-icon{color:#fde68a}
.zen-plan-head{grid-area:head;display:flex;flex-direction:column;justify-content:center}
.zen-plan-head strong{font-size:.95rem;letter-spacing:.08em}
.zen-plan-purple .zen-plan-head strong{color:#d8b4fe}.zen-plan-blue .zen-plan-head strong{color:#93c5fd}.zen-plan-gold .zen-plan-head strong{color:#fde68a}
.zen-plan-head span{font-size:.72rem;color:#cbd5f5}
.zen-plan p{grid-area:desc;font-size:.72rem;color:#cbd5f5;line-height:1.7}
.zen-plan-foot{grid-area:foot;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}

/* lab */
.zen-lab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.zen-lab-card{border:1px solid var(--zen-border);border-radius:var(--zen-radius);background:var(--zen-surface);overflow:hidden}
.zen-lab-thumb{display:block;height:120px;background:radial-gradient(400px 200px at 30% 20%,rgba(96,165,250,.45),transparent 60%),radial-gradient(300px 200px at 80% 90%,rgba(124,58,237,.4),transparent 60%),#0a1022}
.zen-lab-card strong{display:block;padding:12px 14px 4px;font-size:.8rem}
.zen-lab-meta{display:flex;gap:10px;align-items:center;padding:0 14px 12px;font-size:.62rem;color:var(--zen-muted)}
.zen-lab-soon{grid-column:span 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:180px;border:1px dashed var(--zen-border2);border-radius:var(--zen-radius);background:var(--zen-surface);text-align:center;padding:20px;color:var(--zen-muted)}
.zen-lab-soon strong{color:var(--zen-text);font-size:.9rem}
.zen-lab-soon span{font-size:.68rem;line-height:1.7}
.zen-lab-soon-icon{color:#93c5fd}

/* final cta */
.zen-final{position:relative;overflow:hidden;padding:110px 0 70px;border-top:1px solid var(--zen-border);background:linear-gradient(180deg,#070b18 0%,#0a1330 100%)}
.zen-final-inner{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.zen-final h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:10px}
.zen-final p{color:#cbd5f5}
.zen-home .zen-final-note{position:relative;z-index:1;margin:36px auto 0;display:block}

/* footer */
.zen-footer{background:#05081a;border-top:1px solid var(--zen-border);padding:34px 0 26px}
.zen-footer-grid{display:grid;grid-template-columns:1.2fr 1.4fr auto;gap:24px;align-items:center}
.zen-footer-brand p{font-size:.72rem;color:var(--zen-muted);margin-top:6px}
.zen-footer-nav{display:flex;gap:22px;flex-wrap:wrap}
.zen-footer-nav a{font-size:.66rem;letter-spacing:.12em;color:var(--zen-muted)}
.zen-footer-social{display:flex;gap:10px}
.zen-footer-social a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--zen-border2);border-radius:10px;font-size:.66rem;font-weight:800;letter-spacing:.08em;color:#dbe7ff}
.zen-footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid var(--zen-border);font-size:.62rem;color:var(--zen-muted2)}

/* ===== LIVE COMPANY（v0.1 のルールを継承） ===== */
.zen-live{background:linear-gradient(180deg,#070b18 0%,#0a1124 55%,#070b18 100%);border-block:1px solid var(--zen-border)}
.zen-live-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.zen-home .zen-live-state{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;font-weight:700;letter-spacing:.12em}
.zen-live-dot{width:9px;height:9px;border-radius:50%;background:#7ee0a8}
.zen-live-state-label{color:#d8f3e4}
.zen-home .zen-live-asof{font-size:.7rem;letter-spacing:.1em;color:#9aa8c4}
.zen-live-stats{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.zen-live-stats li{border:1px solid var(--zen-border);border-radius:16px;padding:18px 20px;background:var(--zen-surface);display:flex;flex-direction:column;gap:6px}
.zen-live-stats b{font-size:2rem;font-weight:750;line-height:1.1;letter-spacing:-.03em}
.zen-live-stats span{font-size:.7rem;letter-spacing:.06em;color:#9aa8c4;line-height:1.6}
.zen-home .zen-live-h3{margin:34px 0 14px!important;font-size:.74rem;letter-spacing:.16em;color:var(--zen-purple);font-weight:650}
.zen-mission-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.zen-mission{border:1px solid var(--zen-border);border-radius:14px;padding:14px 18px;background:var(--zen-surface);display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px 18px}
.zen-mission-id{font-size:.63rem;letter-spacing:.1em;color:#8e9cba;border:1px solid var(--zen-border);border-radius:4px;padding:3px 7px}
.zen-mission-title{font-size:.9rem;color:#dde5f5}
.zen-mission-dept{font-size:.72rem;color:#93a1bd}
.zen-mission-status{font-size:.75rem;letter-spacing:.04em;color:#c3cde3;white-space:nowrap}
.zen-activity{list-style:none;margin:0;padding:0;border-left:1px solid var(--zen-border);display:flex;flex-direction:column;gap:2px}
.zen-activity li{display:grid;grid-template-columns:88px 96px 1fr;align-items:baseline;gap:14px;padding:10px 0 10px 20px;position:relative}
.zen-activity li::before{content:"";position:absolute;left:-4px;top:17px;width:7px;height:7px;border-radius:50%;background:#4d5f86}
.zen-activity li:first-child::before{background:#7ee0a8}
.zen-activity time{font-size:.72rem;color:#9aa8c4;font-variant-numeric:tabular-nums}
.zen-activity-dept{font-size:.63rem;letter-spacing:.1em;color:#a99cd8}
.zen-activity-event{font-size:.85rem;color:#c9d3e8;line-height:1.7}
.zen-lab-empty{border:1px dashed var(--zen-border2);border-radius:16px;padding:28px;text-align:center;color:var(--zen-muted);display:flex;flex-direction:column;gap:6px;align-items:center}
.zen-lab-empty strong{color:var(--zen-text)}

/* ===== responsive ===== */
@media(max-width:1050px){
.zen-hero-grid{grid-template-columns:1fr;gap:34px}
.zen-core-visual{max-width:620px;margin:0 auto}
.zen-release-grid{grid-template-columns:repeat(3,1fr)}
.zen-how{grid-template-columns:repeat(2,1fr)}
.zen-cat-grid{grid-template-columns:repeat(4,1fr)}
.zen-live-stats{grid-template-columns:repeat(2,1fr)}
.zen-mission{grid-template-columns:auto 1fr;row-gap:6px}
.zen-mission-dept,.zen-mission-status{grid-column:1/-1}
.zen-footer-grid{grid-template-columns:1fr;gap:16px}
}
@media(max-width:1100px){
.zen-nav{gap:18px}
}
@media(max-width:820px){
.zen-nav{display:none}
.zen-pillars{grid-template-columns:1fr}
.zen-plan-grid{grid-template-columns:1fr}
.zen-lab-grid{grid-template-columns:repeat(2,1fr)}
.zen-how-arrow{display:none}
}
@media(max-width:600px){
.zen-mobile-break{display:inline}
.zen-hero{padding:48px 0 96px}
.zen-hero h1{font-size:1.72rem;line-height:1.3}
.zen-actions .zen-button{width:100%;justify-content:center}
.zen-core-visual{grid-template-columns:1fr;min-height:0;gap:12px}
.zen-core-left,.zen-core-right{grid-column:1;grid-row:auto}
.zen-core-stack{grid-column:1;grid-row:1}
.zen-core-svg{width:220px;height:254px}
.zen-core-right{flex-direction:row;flex-wrap:wrap;gap:8px 16px}
.zen-core-tiles{grid-column:1;grid-row:auto;grid-template-columns:repeat(2,1fr)}
.zen-pillars-section{margin-top:-40px}
.zen-pillar{grid-template-columns:auto 1fr;padding:20px}
.zen-pillar-art{display:none}
.zen-release-grid{grid-template-columns:repeat(2,1fr)}
.zen-how{grid-template-columns:1fr}
.zen-cat-grid{grid-template-columns:repeat(2,1fr)}
.zen-lab-grid{grid-template-columns:1fr}
.zen-live-stats{grid-template-columns:1fr 1fr;gap:10px}
.zen-live-stats li{padding:14px}
.zen-live-stats b{font-size:1.6rem}
.zen-activity li{grid-template-columns:1fr;gap:4px;padding-left:18px}
.zen-header-actions .zen-ghost{display:none}
.zen-final{padding:80px 0 56px}
.zen-final-inner{flex-direction:column;align-items:flex-start}
.zen-footer-nav{gap:14px}
}
@media(max-width:420px){
.zen-release-grid,.zen-cat-grid{grid-template-columns:1fr 1fr}
.zen-hero h1{font-size:1.55rem}
}
@media(prefers-reduced-motion:reduce){
.zen-stars,.zen-core-svg,.zc-halo,.zc-plate,.zc-spark,.zc-links path,.zen-core-tiles li,.zen-pillar-art span{animation:none!important}
.zen-button:hover,.zen-pillar:hover,.zen-release:hover,.zen-cat:hover{transform:none}
}


/* ===== LIVE COMPANY v0.2 — ZEN AI LAB OFFICE + MASCOT MOTION（MISSION-005 / 2026-09-09） =====
   方針: transform / opacity のみ（compositor で完結）。width/height/top/left/box-shadow/filter は動かさない。
         状態はテキストと記号で DOM に出す。SVG は装飾。吹き出しは絶対配置（CLS 0）。追加 JS 0。
         動くのは実データが「稼働中」の席だけ。静止すべき席は静止する。 */

/* 稼働ドット: box-shadow アニメーションを廃止し、疑似要素の transform/opacity へ置換 */
.zen-live-dot{position:relative;box-shadow:none;animation:none}
.zen-live-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #7ee0a8;opacity:0;animation:zen-ring 2.8s ease-out infinite}
@keyframes zen-ring{0%{transform:scale(.5);opacity:.7}70%{transform:scale(1.45);opacity:0}100%{transform:scale(1.45);opacity:0}}

/* --- レイアウト --- */
.zo-office{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.zo-floor,.zo-gate{position:relative;border:1px solid var(--zen-border);border-radius:18px;background:#0e1629;padding:18px;overflow:hidden}
.zo-gate{border-color:#e8c67b3d}
.zo-floor::before{content:"";position:absolute;inset:-40% -40% -40% -40%;pointer-events:none;
  background-image:radial-gradient(rgba(150,168,220,.13) 1px,transparent 1.4px);background-size:26px 26px;
  animation:zo-drift 60s linear infinite;will-change:auto}
@keyframes zo-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(26px,26px,0)}}
.zo-label{position:relative;margin:0 0 12px;font-size:.62rem;letter-spacing:.16em;color:#8e9cba;font-weight:700}
.zo-desks{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.zo-desk{position:relative;border:1px solid var(--zen-border);border-radius:14px;background:#111a2d;padding:14px 10px 12px;
  display:grid;grid-template-columns:1fr;gap:4px;text-align:center;min-width:0;
  animation:zo-enter .7s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s ease,border-color .25s ease}
.zo-desk:nth-child(1){animation-delay:.05s}.zo-desk:nth-child(2){animation-delay:.12s}.zo-desk:nth-child(3){animation-delay:.19s}
.zo-desk:nth-child(4){animation-delay:.26s}.zo-desk:nth-child(5){animation-delay:.33s}.zo-desk:nth-child(6){animation-delay:.40s}.zo-desk:nth-child(7){animation-delay:.47s}
@keyframes zo-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover){.zo-desk:hover{transform:translateY(-3px);border-color:#8fa2c866}}
.zo-glyph{display:flex;align-items:center;justify-content:center;min-height:82px}
.zo-glyph .zm{display:block;overflow:visible}
.zo-name{font-weight:700;font-size:.9rem;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.35}
.zo-name small{font-size:.56rem;letter-spacing:.1em;color:#8e9cba;font-weight:600}
.zo-state{font-size:.74rem;letter-spacing:.04em;color:#c3cde3;margin-top:3px}
.zo-mark{color:#8fa2c8}
.zo-note{font-size:.7rem;color:#9fadc8;line-height:1.65;text-align:left;margin-top:4px}
.zo-is-typing,.zo-is-reading,.zo-is-inspecting,.zo-is-authoring,.zo-is-shipping{border-color:#7ee0a84d}
.zo-is-typing .zo-state,.zo-is-reading .zo-state,.zo-is-inspecting .zo-state,.zo-is-authoring .zo-state,.zo-is-shipping .zo-state,
.zo-is-typing .zo-mark,.zo-is-reading .zo-mark,.zo-is-inspecting .zo-mark,.zo-is-authoring .zo-mark,.zo-is-shipping .zo-mark{color:#8fe3b4}
.zo-is-waiting_gate{border-color:#e8c67b4d}
.zo-is-waiting_gate .zo-state,.zo-is-waiting_gate .zo-mark{color:#eccf92}
.zo-is-completed .zo-mark{color:#8fb6ff}

/* 吹き出し: 実記録の直近イベント文のみ。絶対配置でレイアウトに影響しない */
.zo-bubble{position:absolute;left:50%;top:6px;transform:translate(-50%,0) scale(.9);max-width:calc(100% - 16px);
  background:#f4f6ff;color:#0b1020;font-size:.62rem;line-height:1.45;padding:5px 9px;border-radius:10px;
  white-space:normal;text-align:left;opacity:0;pointer-events:none;z-index:2;
  animation:zo-bubble 16s ease-in-out infinite}
.zo-bubble::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:#f4f6ff;transform:translateX(-50%) rotate(45deg);border-radius:1px}
.zo-desk:nth-child(1) .zo-bubble{animation-delay:1.2s}.zo-desk:nth-child(2) .zo-bubble{animation-delay:3.6s}
.zo-desk:nth-child(3) .zo-bubble{animation-delay:6s}.zo-desk:nth-child(4) .zo-bubble{animation-delay:8.4s}
.zo-desk:nth-child(5) .zo-bubble{animation-delay:10.8s}.zo-desk:nth-child(6) .zo-bubble{animation-delay:13.2s}.zo-desk:nth-child(7) .zo-bubble{animation-delay:15.6s}
@keyframes zo-bubble{0%,4%{opacity:0;transform:translate(-50%,4px) scale(.9)}8%,24%{opacity:1;transform:translate(-50%,0) scale(1)}28%,100%{opacity:0;transform:translate(-50%,-4px) scale(.96)}}

/* GATE */
.zo-gate-list{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.zo-gate-item{border:1px solid var(--zen-border);border-radius:14px;background:#111a2d;padding:12px;display:flex;gap:10px;align-items:flex-start;
  animation:zo-enter .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.5s}
.zo-gate-item .zo-glyph{min-height:0;flex:none}
.zo-gate-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.zo-gate-area{font-size:.56rem;letter-spacing:.1em;color:#8e9cba}
.zo-gate-label{font-size:.86rem;font-weight:700;color:#dde5f5;line-height:1.4}
.zo-gate-detail{font-size:.7rem;color:#9fadc8;line-height:1.6}
.zo-gate-status{font-size:.72rem;color:#eccf92;margin-top:2px}
.zo-gate .zen-note{margin-top:12px}

/* --- マスコットの動き（inline SVG の class に対して CSS だけで付ける） --- */
.zm .zm-figure,.zm .zm-shadow,.zm .zm-hand,.zm .zm-prop,.zm .zm-eye,.zm .zm-mouth,.zm .zm-face,.zm .zm-tip,.zm .zm-sprout{transform-box:fill-box;transform-origin:center}
.zm .zm-shadow{transform-origin:center}
@keyframes zm-bob{from{transform:translateY(0)}to{transform:translateY(-2.4px)}}
@keyframes zm-shadow{from{transform:scaleX(1);opacity:1}to{transform:scaleX(.88);opacity:.7}}
@keyframes zm-blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}97%{transform:scaleY(1)}}
@keyframes zm-tip{from{opacity:.45;transform:scale(.85)}to{opacity:1;transform:scale(1.15)}}
@keyframes zm-type{from{transform:translateY(0)}to{transform:translateY(-1.8px)}}
@keyframes zm-glow{from{opacity:.35}to{opacity:1}}
@keyframes zm-read{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes zm-inspect{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
@keyframes zm-write{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.2px) rotate(-3deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes zm-ship{0%{transform:translateX(0);opacity:1}70%{transform:translateX(5px);opacity:.15}71%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes zm-breathe{from{transform:scale(1)}to{transform:scale(1.014)}}
@keyframes zm-check{0%{transform:scale(.2);opacity:0}55%{transform:scale(1.15);opacity:1}75%{transform:scale(.96)}100%{transform:scale(1);opacity:1}}
@keyframes zm-sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* 全員共通: 瞬き・芽の灯り（生きている感じ。データに依存しない最小限の表情） */
.zm .zm-eye{animation:zm-blink 4.6s ease-in-out infinite}
.zm .zm-eye-r{animation-delay:.06s}
.zo-desk:nth-child(2n) .zm .zm-eye{animation-delay:1.3s}.zo-desk:nth-child(3n) .zm .zm-eye{animation-delay:2.1s}.zo-desk:nth-child(5n) .zm .zm-eye{animation-delay:3.4s}
.zm .zm-tip{animation:zm-tip 2.4s ease-in-out infinite alternate}
.zm .zm-sprout{animation:zm-sway 3.6s ease-in-out infinite alternate;transform-origin:32px 15px}

/* 稼働中の5状態だけ、体が浮き沈みする（bob）。停止状態は動かない */
.zm[data-anim="TYPING"] .zm-figure,.zm[data-anim="READING"] .zm-figure,.zm[data-anim="INSPECTING"] .zm-figure,
.zm[data-anim="AUTHORING"] .zm-figure,.zm[data-anim="SHIPPING"] .zm-figure{animation:zm-bob 1.6s ease-in-out infinite alternate}
.zm[data-anim="TYPING"] .zm-shadow,.zm[data-anim="READING"] .zm-shadow,.zm[data-anim="INSPECTING"] .zm-shadow,
.zm[data-anim="AUTHORING"] .zm-shadow,.zm[data-anim="SHIPPING"] .zm-shadow{animation:zm-shadow 1.6s ease-in-out infinite alternate}

/* 状態ごとの動きと表情 */
.zm[data-anim="TYPING"] .zm-hand{animation:zm-type .42s ease-in-out infinite alternate}
.zm[data-anim="TYPING"] .zm-hand-r{animation-delay:.21s}
.zm[data-anim="TYPING"] .zm-glow{animation:zm-glow 1.1s ease-in-out infinite alternate}
.zm[data-anim="TYPING"] .zm-glow:nth-child(3){animation-delay:.35s}.zm[data-anim="TYPING"] .zm-glow:nth-child(4){animation-delay:.7s}
.zm[data-anim="TYPING"] .zm-face{transform:translateY(.6px)}
.zm[data-anim="READING"] .zm-prop{animation:zm-read 2.6s ease-in-out infinite alternate}
.zm[data-anim="READING"] .zm-face{transform:translate(1.2px,1.2px)}
.zm[data-anim="INSPECTING"] .zm-prop{animation:zm-inspect 1.7s ease-in-out infinite alternate}
.zm[data-anim="INSPECTING"] .zm-face{transform:rotate(-4deg)}
.zm[data-anim="AUTHORING"] .zm-prop{animation:zm-write .78s ease-in-out infinite}
.zm[data-anim="SHIPPING"] .zm-prop{animation:zm-ship 2.4s ease-in-out infinite}
.zm[data-anim="WAITING_GATE"] .zm-body{animation:zm-breathe 4.2s ease-in-out infinite alternate}
.zm[data-anim="WAITING_GATE"] .zm-mouth{transform:scaleY(.3)}
.zm[data-anim="COMPLETED"] .zm-prop{animation:zm-check .9s cubic-bezier(.2,.9,.3,1.4) .6s both}
.zm[data-anim="COMPLETED"] .zm-eye{animation:none;transform:scaleY(.22) translateY(-1px)}
.zm[data-anim="COMPLETED"] .zm-mouth{transform:scale(1.25)}
.zm[data-anim="STATIC"] .zm-mouth{transform:scaleY(.3)}
.zm[data-anim="STATIC"] .zm-tip{animation:none;opacity:.5}

/* 部門 4 席まで同時に動かす（性能予算）。5席目以降の稼働は静止に落とす */
.zo-desk:nth-child(n+5) .zm[data-anim="TYPING"] .zm-figure,.zo-desk:nth-child(n+5) .zm[data-anim="TYPING"] .zm-hand,.zo-desk:nth-child(n+5) .zm[data-anim="TYPING"] .zm-glow,
.zo-desk:nth-child(n+5) .zm[data-anim="READING"] .zm-prop,.zo-desk:nth-child(n+5) .zm[data-anim="INSPECTING"] .zm-prop,
.zo-desk:nth-child(n+5) .zm[data-anim="AUTHORING"] .zm-prop,.zo-desk:nth-child(n+5) .zm[data-anim="SHIPPING"] .zm-prop{animation:none}

@media(max-width:1050px){
.zo-office{grid-template-columns:1fr}
.zo-desks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
.zo-desks{grid-template-columns:1fr;gap:9px}
.zo-desk{grid-template-columns:72px 1fr;grid-template-areas:"glyph name" "glyph state" "glyph note";text-align:left;gap:2px 10px;padding:11px 12px;align-items:center}
.zo-glyph{grid-area:glyph;min-height:0}
.zo-glyph .zm{width:64px;height:64px}
.zo-name{grid-area:name;align-items:flex-start;flex-direction:row;gap:8px;align-items:baseline}
.zo-state{grid-area:state;margin-top:0}
.zo-note{grid-area:note;margin-top:2px}
.zo-bubble{left:72px;transform:translate(0,0) scale(.9);max-width:calc(100% - 84px);top:-8px}
.zo-bubble::after{left:16px}
@keyframes zo-bubble{0%,4%{opacity:0;transform:translate(0,4px) scale(.9)}8%,24%{opacity:1;transform:translate(0,0) scale(1)}28%,100%{opacity:0;transform:translate(0,-4px) scale(.96)}}
.zo-floor,.zo-gate{padding:14px}
}

/* 完全停止。静止画として意味が通る構図にしてある */
@media(prefers-reduced-motion:reduce){
.zo-floor::before,.zo-desk,.zo-gate-item,.zo-bubble,.zen-live-dot::after,.zm *{animation:none!important}
.zo-bubble{opacity:0}
.zo-desk,.zo-gate-item{opacity:1;transform:none}
}

/* ------------------------------------------------------------------
   v2.1 (2026-09-09) — PRODUCTS / 公開済み商品
   最初の商品を実際に公開したため、事実として掲載する区画を追加する。
   未公開の商品は zen_public_products() に入らないためここへ描画されない。
   ------------------------------------------------------------------ */
.zen-onsale-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.zen-onsale{position:relative;border:1px solid rgba(167,139,250,.4);border-radius:var(--zen-radius-lg);
  background:linear-gradient(135deg,rgba(124,58,237,.12),transparent 55%),var(--zen-surface);
  padding:26px 28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.zen-onsale-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.zen-onsale-code{font-size:.6rem;letter-spacing:.16em;font-weight:700;color:var(--zen-muted)}
.zen-pill-live{border-color:rgba(167,139,250,.6);color:#e9d5ff;background:rgba(124,58,237,.22)}
.zen-onsale h3{font-size:clamp(1.15rem,2.2vw,1.5rem)}
.zen-onsale-sum{font-size:.86rem;color:#c6d0ea;line-height:1.9;max-width:52em}
.zen-onsale-points{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.zen-onsale-points li{position:relative;padding-left:18px;font-size:.8rem;color:var(--zen-muted);line-height:1.8}
.zen-onsale-points li::before{content:"—";position:absolute;left:0;top:0;color:var(--zen-purple)}
.zen-onsale-meta{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:4px;
  border-top:1px solid var(--zen-border);padding-top:14px}
.zen-onsale-price{font-size:1.35rem;font-weight:800;letter-spacing:.02em;color:var(--zen-text)}
.zen-onsale-date{font-size:.68rem;letter-spacing:.08em;color:var(--zen-muted)}
.zen-onsale .zen-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.zen-onsale .zen-button{min-height:44px}
.zen-onsale-note{margin-top:2px}

/* 汎用ページテンプレート（products ページ）用。v2 には従来 .zen-product* が無かったため補う */
.zen-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;margin:0;padding:0}
.zen-product{border:1px solid var(--zen-border);border-radius:var(--zen-radius);background:var(--zen-surface);padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.zen-product-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.zen-product-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(124,58,237,.2);border:1px solid rgba(167,139,250,.4);color:#e9d5ff}
.zen-product h3{font-size:1rem}
.zen-product p{font-size:.8rem;color:var(--zen-muted);line-height:1.8}
.zen-product-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--zen-border);font-size:.66rem;letter-spacing:.08em;color:var(--zen-muted)}
.zen-text-link{color:#cbd9ff}
.zen-internal{margin-top:18px;border:1px dashed rgba(232,198,123,.5);border-radius:12px;padding:16px}
.zen-internal-label{font-size:.66rem;letter-spacing:.08em;color:var(--zen-gold)}
.zen-internal ul{margin:8px 0 0;padding-left:18px;font-size:.76rem;color:var(--zen-muted)}

@media(max-width:1050px){
 .zen-product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
 .zen-onsale{padding:22px 18px;border-radius:16px}
 .zen-onsale-sum{font-size:.82rem}
 .zen-onsale .zen-actions{flex-direction:column;align-items:stretch}
 .zen-onsale .zen-button{justify-content:center}
 .zen-onsale-price{font-size:1.2rem}
 .zen-product-grid{grid-template-columns:1fr}
}

/* v2.2 (2026-09-09) — 公開済み商品のパッケージ画像 */
.zen-onsale-figure{margin:0 0 4px;border-radius:14px;overflow:hidden;border:1px solid var(--zen-border);background:var(--zen-bg2);line-height:0}
.zen-onsale-img{display:block;width:100%;height:auto;aspect-ratio:1200/628;object-fit:cover}
@media(max-width:600px){
 .zen-onsale-figure{border-radius:10px}
}

/* ===== v2.3（2026-09-11）: NOTE MAGAZINE / NOTE MEMBERSHIP / VIRTUAL OFFICE =====
   方針は v2 と同じ: 追加ライブラリ 0 / 追加 JS 0 / 動きは transform のみ / テキストは DOM に残す。 */

/* --- magazines --- */
.zen-mag-grid{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.zen-mag{grid-column:span 2;min-width:0}
.zen-mag-wide{grid-column:span 3}
.zen-mag-link{display:flex;flex-direction:column;height:100%;border:1px solid var(--zen-border);border-radius:var(--zen-radius-lg);background:var(--zen-surface);overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.zen-mag-link:hover{transform:translateY(-4px);border-color:var(--zen-border2);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.zen-mag-link:focus-visible,.zen-office-visual:focus-visible{outline:2px solid var(--zen-blue);outline-offset:3px}
.zen-mag-cover{position:relative;display:block;aspect-ratio:1280/670;background:var(--zen-bg2);overflow:hidden;line-height:0}
.zen-mag-cover img{display:block;width:100%;height:100%;object-fit:cover}
.zen-mag-cover-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;line-height:1.5;font-size:1.05rem;font-weight:800;letter-spacing:.04em;color:#e9d5ff;
  background:radial-gradient(420px 220px at 25% 20%,rgba(96,165,250,.35),transparent 60%),radial-gradient(360px 220px at 85% 90%,rgba(124,58,237,.45),transparent 60%),#0d1330}
.zen-mag-badge{position:absolute;left:12px;top:12px;line-height:1;font-size:.64rem;font-weight:800;letter-spacing:.08em;padding:7px 11px;border-radius:999px;background:rgba(7,11,24,.82);border:1px solid rgba(126,224,168,.6);color:#b7f5d0}
.zen-mag-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.zen-mag-tag{font-size:.56rem;letter-spacing:.16em;font-weight:800;color:var(--zen-purple)}
.zen-home .zen-mag h3{font-size:.98rem;line-height:1.5}
.zen-home .zen-mag-wide h3{font-size:1.12rem}
.zen-mag-desc{font-size:.76rem;color:#c6d0ea;line-height:1.8}
.zen-mag-more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;padding-top:6px;font-size:.7rem;font-weight:700;color:var(--zen-blue)}
.zen-mag-foot{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}

/* --- membership --- */
.zen-member-section{background:radial-gradient(900px 520px at 88% 0%,rgba(124,58,237,.2),transparent 60%),radial-gradient(700px 420px at 0% 100%,rgba(37,99,235,.14),transparent 60%);border-block:1px solid var(--zen-border)}
.zen-member{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"intro offer" "body offer";gap:24px 44px;align-items:start}
.zen-member-intro{grid-area:intro}
.zen-member-body{grid-area:body;min-width:0}
.zen-home .zen-member-title{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:14px}
.zen-member-lead{color:#cbd5f5;font-size:.98rem;line-height:1.95;max-width:40em}
.zen-member-pains{border:1px solid var(--zen-border);border-radius:var(--zen-radius-lg);background:var(--zen-surface);padding:22px 24px}
.zen-home .zen-member-kicker{font-weight:800;font-size:.95rem;margin-bottom:10px}
.zen-member-pains ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.zen-member-pains li{position:relative;padding-left:26px;font-size:.86rem;color:#dbe4fb;line-height:1.8}
.zen-member-pains li::before{content:"";position:absolute;left:3px;top:.5em;width:11px;height:11px;border-radius:3px;border:1.5px solid var(--zen-muted2)}
.zen-home .zen-member-answer{margin-top:14px;padding-top:14px;border-top:1px dashed var(--zen-border2);font-size:.92rem;font-weight:700;color:#e9d5ff;line-height:1.85}
.zen-home .zen-member-h3{margin:36px 0 14px;font-size:1.05rem}
.zen-member-depts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.zen-member-dept{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid rgba(167,139,250,.38);border-radius:var(--zen-radius);background:linear-gradient(160deg,#1a1240 0%,#0e1528 100%);min-width:0}
.zen-member-dept-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(124,58,237,.22);border:1px solid rgba(167,139,250,.45);color:#e9d5ff}
.zen-member-dept strong{font-size:.95rem}
.zen-member-dept p{font-size:.74rem;color:#c6d0ea;line-height:1.8}
.zen-member-dept a{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;color:var(--zen-blue)}
.zen-home .zen-member-howto{margin-top:10px}
.zen-member-benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zen-member-benefits li{display:flex;flex-direction:column;gap:7px;padding:14px 16px;border:1px solid var(--zen-border);border-radius:var(--zen-radius);background:var(--zen-surface);font-size:.8rem;color:#dbe4fb;line-height:1.8}
.zen-member-when{align-self:flex-start;line-height:1;font-size:.58rem;font-weight:800;letter-spacing:.1em;padding:5px 9px;border-radius:999px;border:1px solid rgba(96,165,250,.5);color:#bfdbfe;background:rgba(37,99,235,.18)}
.zen-member-why{font-size:.88rem;color:#cbd5f5;line-height:1.95;max-width:44em}
.zen-member-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.zen-member-box{padding:18px 20px;border:1px solid rgba(126,224,168,.35);border-radius:var(--zen-radius);background:rgba(126,224,168,.05)}
.zen-home .zen-member-box h3{font-size:.92rem;margin-bottom:10px}
.zen-member-box ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:#cbd5f5;line-height:1.8}
.zen-member-box-muted{border-color:var(--zen-border);background:var(--zen-surface)}
.zen-member-close{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-radius:var(--zen-radius-lg);border:1px solid rgba(167,139,250,.45);background:linear-gradient(135deg,#241348 0%,#0f2452 100%)}
.zen-home .zen-member-close p{font-weight:700;line-height:1.8;flex:1 1 22em}
.zen-member-offer{grid-area:offer;position:sticky;top:84px;display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-radius:var(--zen-radius-lg);border:1px solid rgba(232,198,123,.5);
  background:linear-gradient(165deg,#2a1d4e 0%,#141a3a 55%,#0d1430 100%);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.zen-member-plan{font-size:.62rem;letter-spacing:.16em;font-weight:800;color:var(--zen-gold)}
.zen-member-trial{align-self:flex-start;line-height:1;font-size:.82rem;font-weight:800;padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,#e8c67b 0%,#b8902f 100%);color:#1a1206}
.zen-home .zen-member-price{display:flex;align-items:baseline;gap:8px}
.zen-member-price strong{font-size:2.6rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.zen-member-price span{font-size:.8rem;color:var(--zen-muted)}
.zen-member-incl{list-style:none;margin:4px 0 6px;padding:0;display:flex;flex-direction:column;gap:8px}
.zen-member-incl li{position:relative;padding-left:24px;font-size:.8rem;color:#e6ebff;line-height:1.7}
.zen-member-incl li::before{content:"✓";position:absolute;left:2px;top:0;color:#7ee0a8;font-weight:800}
.zen-member-cta{justify-content:center;font-size:.86rem;padding:16px 20px;white-space:normal;text-align:center}
.zen-home .zen-member-fine{font-size:.66rem;color:var(--zen-muted);line-height:1.75}
.zen-home .zen-member-legal{font-size:.64rem;color:var(--zen-muted2);text-decoration:underline}

/* --- virtual office --- */
.zen-office-card{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:34px;align-items:center;padding:18px;border:1px solid var(--zen-border2);border-radius:26px;background:linear-gradient(135deg,#0e1633 0%,#0a1022 100%)}
.zen-office-visual{position:relative;display:block;border-radius:18px;overflow:hidden;line-height:0;border:1px solid var(--zen-border)}
.zen-office-visual img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}
.zen-office-visual:hover img{transform:scale(1.03)}
.zen-office-live{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;line-height:1;font-size:.66rem;font-weight:800;letter-spacing:.14em;padding:7px 12px;border-radius:999px;background:rgba(7,11,24,.8);border:1px solid rgba(126,224,168,.6);color:#b7f5d0}
.zen-office-live i{width:7px;height:7px;border-radius:50%;background:#7ee0a8}
.zen-office-copy{padding:10px 14px 10px 0;min-width:0}
.zen-home .zen-office-copy h2{font-size:clamp(1.4rem,2.8vw,2rem);margin-bottom:12px}
.zen-office-lead{color:#cbd5f5;line-height:1.9;font-size:.9rem}
.zen-office-points{list-style:none;margin:16px 0 22px;padding:0;display:flex;flex-direction:column;gap:8px}
.zen-office-points li{position:relative;padding-left:22px;font-size:.8rem;color:#dbe4fb;line-height:1.75}
.zen-office-points li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:linear-gradient(135deg,#60a5fa,#a78bfa)}

@media(max-width:1050px){
.zen-mag-grid{grid-template-columns:repeat(2,1fr)}
.zen-mag,.zen-mag-wide{grid-column:auto}
.zen-member{grid-template-columns:1fr;grid-template-areas:"intro" "offer" "body"}
.zen-member-offer{position:static;max-width:520px}
.zen-office-card{grid-template-columns:1fr;gap:18px}
.zen-office-copy{padding:4px 8px 10px}
}
@media(max-width:820px){
.zen-member-depts{grid-template-columns:1fr}
}
@media(max-width:600px){
.zen-mag-grid{grid-template-columns:1fr}
.zen-member-benefits,.zen-member-two{grid-template-columns:1fr}
.zen-member-pains{padding:18px}
.zen-member-price strong{font-size:2.2rem}
.zen-member-close .zen-button{width:100%;justify-content:center}
.zen-office-card{padding:12px}
}
@media(prefers-reduced-motion:reduce){
.zen-mag-link:hover,.zen-office-visual:hover img{transform:none}
}

/* 2026-09-16: トップ LAB 区画の Hub リンク一覧（Media の Hub へ内部リンクを出す）。 */
.zen-lab-hubs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 14px;padding:0}
.zen-lab-hubs li{margin:0}
.zen-lab-hubs a{display:inline-block;padding:6px 12px;border:1px solid var(--zen-border);border-radius:999px;background:var(--zen-surface);font-size:.72rem;line-height:1.4;text-decoration:none}
.zen-lab-hubs a:hover{border-color:var(--zen-accent,#6ee7b7)}
