/* ==========================================================================
   Thought Up Pro（pro.thought-up.com）— サイバー調デザイン（2026-10-14 全面刷新）
   本体HPの /ipass/ と同じ見た目の系統。クラスは cy- 接頭辞。
   動き: /js/pro.js（reveal・タイピング・研修スタック・流れ図・レポート見本・SORAデモ）
   prefers-reduced-motion では動きを止め、最後の形を静止で見せる。
   ========================================================================== */

:root {
  --cy-bg: #050a14;
  --cy-bg-2: #0a1424;
  --cy-panel: rgba(16, 32, 56, .55);
  --cy-line: rgba(80, 180, 255, .18);
  --cy-line-strong: rgba(80, 200, 255, .45);
  --cy-text: #e6f1ff;
  --cy-sub: #9fb3cc;
  --cy-cyan: #3fd8ff;
  --cy-blue: #2f8cff;
  --cy-violet: #8b6bff;
  --cy-green: #3ee8a4;
  --cy-amber: #ffb547;
  --cy-red: #ff6b81;
  --cy-glow: 0 0 24px rgba(63, 216, 255, .35);
  --cy-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --cy-head: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cy-bg); color: var(--cy-text);
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.8; overflow-x: clip;
}
img { max-width: 100%; height: auto; }
a { color: var(--cy-cyan); }
.inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: #fff; color: #000; padding: 8px 14px; z-index: 1000; border-radius: 8px; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 読み進めの進行バー ---------- */
.cy-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cy-cyan), var(--cy-violet)); z-index: 200; box-shadow: var(--cy-glow); }

/* ---------- ヘッダー ---------- */
.cy-head { position: sticky; top: 0; z-index: 100; background: rgba(5, 10, 20, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--cy-line); }
.cy-head .inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.cy-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.cy-brand img { width: 32px; height: auto; filter: drop-shadow(0 0 8px rgba(63, 216, 255, .4)); }
.cy-brand__main { display: block; font-family: var(--cy-head); font-weight: 900; font-size: 1.05rem; letter-spacing: .03em; line-height: 1.2; }
.cy-brand__main b { color: var(--cy-cyan); font-weight: 900; }
.cy-brand__sub { display: block; font-size: .66rem; color: var(--cy-sub); letter-spacing: .04em; }
.cy-nav { display: flex; align-items: center; gap: 22px; }
.cy-nav a { color: var(--cy-sub); text-decoration: none; font-size: .86rem; font-weight: 700; transition: color .2s; }
.cy-nav a:hover { color: #fff; }
.cy-nav .cy-nav__cta { color: #031021; background: linear-gradient(90deg, var(--cy-cyan), var(--cy-blue)); padding: 9px 18px; border-radius: 999px; }
.cy-nav .cy-nav__cta:hover { color: #031021; }
.cy-menu { display: none; background: none; border: 1px solid var(--cy-line-strong); border-radius: 10px; width: 44px; height: 44px; padding: 0; cursor: pointer; }
.cy-menu span { display: block; width: 20px; height: 2px; background: var(--cy-cyan); margin: 4px auto; transition: transform .25s, opacity .25s; }
.cy-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cy-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cy-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 共通の見出し ---------- */
.cy-sec { padding: 112px 0; position: relative; }
.cy-sec--alt { background: linear-gradient(180deg, var(--cy-bg) 0%, var(--cy-bg-2) 50%, var(--cy-bg) 100%); }
.cy-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cy-mono); font-size: .78rem; letter-spacing: .22em; color: var(--cy-cyan); text-transform: uppercase; margin: 0 0 18px; }
.cy-label::before { content: ''; width: 28px; height: 1px; background: currentColor; box-shadow: var(--cy-glow); }
.cy-h2 { font-family: var(--cy-head); font-weight: 900; font-size: clamp(1.6rem, 4.2vw, 2.7rem); line-height: 1.38; letter-spacing: .02em; margin: 0 0 20px; color: #fff; }
.cy-h2 em { font-style: normal; background: linear-gradient(90deg, var(--cy-cyan), var(--cy-blue) 60%, var(--cy-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cy-lead { color: var(--cy-sub); font-size: 1.02rem; line-height: 1.95; max-width: 720px; margin: 0 0 48px; }
.cy-lead strong { color: var(--cy-text); }
.cy-center { text-align: center; }
.cy-center .cy-lead { margin-left: auto; margin-right: auto; }
.cy-note { font-size: .82rem; color: var(--cy-sub); line-height: 1.8; }

.cy-grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--cy-line) 1px, transparent 1px), linear-gradient(90deg, var(--cy-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%); opacity: .5; }

/* ---------- ボタン ---------- */
.cy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 700; font-size: .98rem; text-decoration: none; letter-spacing: .03em; transition: transform .25s, box-shadow .25s, background .25s; border: 0; cursor: pointer; font-family: inherit; }
.cy-btn--primary { background: linear-gradient(90deg, var(--cy-cyan), var(--cy-blue)); color: #031021 !important; box-shadow: 0 8px 30px rgba(47, 140, 255, .35); }
.cy-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(63, 216, 255, .5); }
.cy-btn--ghost { color: var(--cy-text) !important; border: 1px solid var(--cy-line-strong); background: rgba(63, 216, 255, .05); }
.cy-btn--ghost:hover { background: rgba(63, 216, 255, .12); }
.cy-btn:focus-visible, .cy-replay:focus-visible, .cy-faq__q:focus-visible { outline: 3px solid var(--cy-amber); outline-offset: 3px; }

/* ---------- 出現アニメーション ---------- */
.cy-rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.cy-rv.is-in { opacity: 1; transform: none; }

/* ---------- 共通カード ---------- */
.cy-card { background: var(--cy-panel); border: 1px solid var(--cy-line); border-radius: 18px; padding: 28px 24px; position: relative; overflow: hidden; backdrop-filter: blur(6px); transition: border-color .3s, transform .3s; }
.cy-card:hover { border-color: var(--cy-line-strong); transform: translateY(-3px); }
.cy-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent); opacity: .7; }
.cy-card__no { font-family: var(--cy-mono); font-size: .72rem; color: var(--cy-cyan); letter-spacing: .18em; margin-bottom: 10px; }
.cy-card h3 { font-family: var(--cy-head); font-weight: 900; font-size: 1.2rem; margin: 0 0 10px; color: #fff; line-height: 1.5; }
.cy-card p { color: var(--cy-sub); font-size: .93rem; margin: 0; line-height: 1.85; }
.cy-tag { display: inline-block; font-family: var(--cy-mono); font-size: .68rem; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--cy-line-strong); color: var(--cy-cyan); margin: 12px 6px 0 0; }
.cy-tag--amber { color: var(--cy-amber); border-color: rgba(255, 181, 71, .5); }
.cy-tag--green { color: var(--cy-green); border-color: rgba(62, 232, 164, .5); }

/* ==========================================================================
   HERO
   ========================================================================== */
.cy-hero { min-height: min(92vh, 860px); display: flex; align-items: center; padding: 72px 0; overflow: hidden; position: relative; }
.cy-hero__glow { position: absolute; width: 720px; height: 720px; border-radius: 50%; filter: blur(120px); opacity: .35; pointer-events: none; }
.cy-hero__glow--a { background: var(--cy-blue); top: -260px; left: -200px; }
.cy-hero__glow--b { background: var(--cy-violet); bottom: -320px; right: -220px; opacity: .25; }
.cy-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.cy-hero__grid > * { min-width: 0; }
.cy-hero__eyebrow { font-family: var(--cy-mono); font-size: .8rem; color: var(--cy-cyan); letter-spacing: .16em; margin-bottom: 22px; min-height: 1.4em; }
.cy-caret { display: inline-block; width: .55em; height: 1.05em; background: var(--cy-cyan); vertical-align: -.15em; margin-left: 2px; animation: cy-blink 1s steps(1) infinite; }
@keyframes cy-blink { 50% { opacity: 0; } }
.cy-hero h1 { font-family: var(--cy-head); font-weight: 900; color: #fff; font-size: clamp(1.55rem, 4.4vw, 2.7rem); line-height: 1.45; margin: 0 0 26px; }
.cy-nw { white-space: nowrap; }
.cy-grad { background: linear-gradient(90deg, var(--cy-cyan), var(--cy-blue) 55%, var(--cy-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cy-hero__lead { color: var(--cy-sub); font-size: 1.04rem; line-height: 2; margin: 0 0 34px; max-width: 600px; }
.cy-hero__lead strong { color: var(--cy-text); }
.cy-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.cy-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.cy-hero__chips span { font-size: .78rem; color: var(--cy-text); border: 1px solid var(--cy-line); background: rgba(10, 20, 36, .7); padding: 6px 12px; border-radius: 999px; }
.cy-hero__chips span::before { content: '✓ '; color: var(--cy-green); }

/* 研修スタック（標準コア＋追加モジュールが積み上がる） */
.cy-stack { position: relative; perspective: 1200px; height: 460px; max-width: 460px; margin: 0 auto; width: 100%; }
.cy-stack__scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-38deg); }
.cy-layer { position: absolute; left: 12%; width: 76%; height: 76%; top: 12%; border-radius: 22px; border: 1px solid var(--cy-line-strong); background: linear-gradient(135deg, rgba(47, 140, 255, .22), rgba(10, 20, 36, .85)); box-shadow: 0 0 40px rgba(47, 140, 255, .18), inset 0 0 30px rgba(63, 216, 255, .08); display: flex; align-items: flex-end; justify-content: flex-start; padding: 16px 20px; transform: translateZ(var(--z)); transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity 1s; }
.cy-layer span { font-family: var(--cy-mono); font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: #fff; text-shadow: 0 0 10px rgba(63, 216, 255, .7); }
.cy-layer--it { --z: 0px; }
.cy-layer--sec { --z: 46px; background: linear-gradient(135deg, rgba(62, 232, 164, .2), rgba(10, 20, 36, .85)); border-color: rgba(62, 232, 164, .5); }
.cy-layer--ai { --z: 92px; background: linear-gradient(135deg, rgba(139, 107, 255, .26), rgba(10, 20, 36, .85)); border-color: rgba(139, 107, 255, .55); }
.cy-layer--custom { --z: 150px; background: linear-gradient(135deg, rgba(255, 181, 71, .26), rgba(10, 20, 36, .8)); border: 1px dashed rgba(255, 181, 71, .8); box-shadow: 0 0 50px rgba(255, 181, 71, .25); }
.cy-layer--custom span { color: var(--cy-amber); text-shadow: 0 0 10px rgba(255, 181, 71, .7); }
.cy-stack.is-ready .cy-layer { animation: cy-drop .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--dl, 0s); }
@keyframes cy-drop { from { transform: translateZ(calc(var(--z) + 220px)); opacity: 0; } to { transform: translateZ(var(--z)); opacity: 1; } }
.cy-layer--custom.is-swap { animation: cy-swap .7s cubic-bezier(.2,.7,.2,1) both !important; }
@keyframes cy-swap { 0% { transform: translateZ(calc(var(--z) + 120px)); opacity: 0; } 100% { transform: translateZ(var(--z)); opacity: 1; } }
.cy-stack__lbl { position: absolute; font-family: var(--cy-mono); font-size: .7rem; padding: 6px 10px; border-radius: 8px; background: rgba(5, 10, 20, .85); border: 1px solid var(--cy-line-strong); color: var(--cy-cyan); white-space: nowrap; animation: cy-float 6s ease-in-out infinite; }
.cy-stack__lbl--core { left: 0; bottom: 18%; }
.cy-stack__lbl--add { right: 0; top: 12%; color: var(--cy-amber); border-color: rgba(255, 181, 71, .55); animation-delay: -2s; }
.cy-stack__lbl--rep { right: 4%; bottom: 4%; color: var(--cy-green); border-color: rgba(62, 232, 164, .5); animation-delay: -4s; }
@keyframes cy-float { 50% { transform: translateY(-10px); } }

/* ティッカー */
.cy-ticker { border-top: 1px solid var(--cy-line); border-bottom: 1px solid var(--cy-line); background: rgba(10, 20, 36, .7); overflow: hidden; padding: 14px 0; }
.cy-ticker__track { display: flex; gap: 40px; width: max-content; animation: cy-marquee 50s linear infinite; font-family: var(--cy-mono); font-size: .85rem; color: var(--cy-sub); white-space: nowrap; }
.cy-ticker__track span::before { content: '▸ '; color: var(--cy-cyan); }
@keyframes cy-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   悩み（ISSUES）
   ========================================================================== */
.cy-issues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cy-issue { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 14px; border: 1px solid var(--cy-line); background: rgba(10, 20, 36, .6); }
.cy-issue__ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--cy-mono); font-weight: 700; color: var(--cy-red); border: 1px solid rgba(255, 107, 129, .45); background: rgba(255, 107, 129, .08); font-size: .9rem; }
.cy-issue p { margin: 0; font-size: .93rem; color: var(--cy-text); line-height: 1.75; }

/* ==========================================================================
   仕組み（SYSTEM）：流れ図
   ========================================================================== */
.cy-flowmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.cy-flowmap::before { content: ''; position: absolute; top: 46px; left: 12%; right: 12%; height: 2px; background: var(--cy-line); }
.cy-flowmap__beam { position: absolute; top: 45px; left: 12%; height: 4px; width: 0; background: linear-gradient(90deg, var(--cy-cyan), var(--cy-violet), var(--cy-amber), var(--cy-green)); box-shadow: 0 0 18px rgba(63, 216, 255, .6); border-radius: 4px; transition: width 2.4s cubic-bezier(.4,.1,.2,1); }
.cy-flowmap.is-in .cy-flowmap__beam { width: 76%; }
.cy-node { text-align: center; padding: 0 10px; position: relative; z-index: 1; }
.cy-node__dot { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--cy-bg); border: 2px solid var(--cy-line-strong); font-family: var(--cy-mono); font-weight: 700; font-size: .8rem; color: var(--cy-cyan); transition: box-shadow .6s, border-color .6s, transform .6s; transition-delay: var(--t, 0s); }
.cy-flowmap.is-in .cy-node__dot { box-shadow: 0 0 30px var(--c, rgba(63, 216, 255, .6)); border-color: var(--cc, var(--cy-cyan)); transform: scale(1.05); }
.cy-node__dot svg { width: 36px; height: 36px; stroke: var(--cc, var(--cy-cyan)); }
.cy-node h3 { font-family: var(--cy-head); font-weight: 900; font-size: 1.08rem; color: #fff; margin: 0 0 8px; }
.cy-node p { font-size: .86rem; color: var(--cy-sub); margin: 0; line-height: 1.75; }

/* ==========================================================================
   標準3本柱（CORE）
   ========================================================================== */
.cy-core { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cy-core .cy-card { padding-top: 34px; }
.cy-core__ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--cy-line-strong); background: rgba(63, 216, 255, .06); margin-bottom: 18px; }
.cy-core__ico svg { width: 28px; height: 28px; stroke: var(--cy-cyan); }
.cy-core ul { list-style: none; padding: 0; margin: 14px 0 0; }
.cy-core li { font-size: .88rem; color: var(--cy-text); padding: 6px 0 6px 20px; position: relative; border-top: 1px dashed var(--cy-line); }
.cy-core li::before { content: '›'; position: absolute; left: 4px; color: var(--cy-cyan); font-weight: 700; }

/* 生成AIの4つの手順（順に光る） */
.cy-chain { margin-top: 40px; border: 1px solid var(--cy-line); border-radius: 18px; padding: 28px; background: rgba(10, 20, 36, .6); }
.cy-chain__ttl { font-family: var(--cy-head); font-weight: 900; color: #fff; font-size: 1.1rem; margin: 0 0 6px; }
.cy-chain__sub { color: var(--cy-sub); font-size: .9rem; margin: 0 0 22px; }
.cy-chain__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: ch; }
.cy-chain__step { position: relative; border-radius: 14px; padding: 16px 14px; border: 1px solid var(--cy-line); background: rgba(5, 10, 20, .6); transition: border-color .4s, box-shadow .4s, background .4s; }
.cy-chain__step b { display: block; font-family: var(--cy-mono); font-size: .7rem; color: var(--cy-sub); letter-spacing: .14em; margin-bottom: 6px; }
.cy-chain__step strong { display: block; color: #fff; font-size: .98rem; margin-bottom: 4px; }
.cy-chain__step span { font-size: .8rem; color: var(--cy-sub); line-height: 1.6; display: block; }
.cy-chain__step.is-lit { border-color: var(--cy-violet); box-shadow: 0 0 24px rgba(139, 107, 255, .35); background: rgba(139, 107, 255, .1); }
.cy-chain__step.is-lit b { color: var(--cy-violet); }
.cy-chain__step:last-child.is-lit { border-color: var(--cy-green); box-shadow: 0 0 24px rgba(62, 232, 164, .35); background: rgba(62, 232, 164, .08); }
.cy-chain__step:not(:last-child)::after { content: '→'; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--cy-line-strong); font-weight: 700; z-index: 2; }

/* ==========================================================================
   追加モジュール（CUSTOM）
   ========================================================================== */
.cy-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.cy-mods > * { min-width: 0; }
.cy-modboard { border: 1px solid var(--cy-line); border-radius: 20px; padding: 24px; background: rgba(10, 20, 36, .65); }
.cy-modboard__base { border-radius: 12px; padding: 12px 16px; font-family: var(--cy-mono); font-size: .78rem; letter-spacing: .1em; color: #fff; background: linear-gradient(90deg, rgba(47, 140, 255, .3), rgba(62, 232, 164, .22), rgba(139, 107, 255, .3)); border: 1px solid var(--cy-line-strong); text-align: center; margin-top: 12px; }
.cy-modboard__slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cy-mod { border: 1px dashed rgba(255, 181, 71, .55); border-radius: 12px; padding: 12px 14px; background: rgba(255, 181, 71, .06); opacity: 0; transform: translateY(-30px) scale(.96); transition: opacity .6s, transform .6s cubic-bezier(.3,1.4,.5,1); transition-delay: var(--d, 0s); }
.cy-modboard.is-in .cy-mod { opacity: 1; transform: none; }
.cy-mod strong { display: block; font-size: .92rem; color: #fff; }
.cy-mod span { display: block; font-size: .74rem; color: var(--cy-sub); margin-top: 2px; line-height: 1.5; }
.cy-mod em { font-style: normal; font-family: var(--cy-mono); font-size: .64rem; letter-spacing: .08em; color: var(--cy-amber); }
.cy-mod--partner em { color: var(--cy-violet); }
.cy-mods__pts { list-style: none; padding: 0; margin: 0; }
.cy-mods__pts li { padding: 16px 0 16px 44px; position: relative; border-bottom: 1px solid var(--cy-line); }
.cy-mods__pts li:last-child { border-bottom: 0; }
.cy-mods__pts li::before { content: attr(data-n); position: absolute; left: 0; top: 16px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--cy-mono); font-size: .78rem; font-weight: 700; color: var(--cy-amber); border: 1px solid rgba(255, 181, 71, .5); }
.cy-mods__pts strong { display: block; color: #fff; font-size: 1rem; margin-bottom: 4px; }
.cy-mods__pts span { color: var(--cy-sub); font-size: .9rem; line-height: 1.8; }

/* ==========================================================================
   コース例（COURSES）
   ========================================================================== */
.cy-courses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cy-course { display: flex; flex-direction: column; }
.cy-course__who { font-family: var(--cy-mono); font-size: .72rem; color: var(--cy-cyan); letter-spacing: .14em; }
.cy-course ul { list-style: none; padding: 0; margin: 14px 0 0; flex: 1; }
.cy-course li { font-size: .86rem; color: var(--cy-text); padding: 8px 0; border-top: 1px dashed var(--cy-line); line-height: 1.6; }
.cy-course li small { display: block; color: var(--cy-sub); font-size: .76rem; }
.cy-course--hot { border-color: rgba(255, 181, 71, .6); box-shadow: 0 0 40px rgba(255, 181, 71, .15); background: linear-gradient(180deg, rgba(255, 181, 71, .1), var(--cy-panel) 40%); }
.cy-course--hot::before { background: linear-gradient(90deg, transparent, var(--cy-amber), transparent); }
.cy-course--hot .cy-course__who { color: var(--cy-amber); }
.cy-badge { position: absolute; top: 14px; right: 14px; font-size: .68rem; font-weight: 700; color: #1a1000; background: var(--cy-amber); padding: 3px 10px; border-radius: 999px; animation: cy-pulse 2.4s ease-in-out infinite; }
@keyframes cy-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 181, 71, .18); } }

/* 新人研修の逆算タイムライン */
.cy-tl { margin-top: 48px; border: 1px solid rgba(255, 181, 71, .35); border-radius: 20px; padding: 30px 28px; background: rgba(255, 181, 71, .04); }
.cy-tl__ttl { font-family: var(--cy-head); font-weight: 900; font-size: 1.15rem; color: #fff; margin: 0 0 4px; }
.cy-tl__ttl b { color: var(--cy-amber); }
.cy-tl__sub { color: var(--cy-sub); font-size: .88rem; margin: 0 0 26px; }
.cy-tl__track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cy-tl__track::before { content: ''; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--cy-line); }
.cy-tl__fill { position: absolute; top: 9px; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--cy-cyan), var(--cy-amber)); box-shadow: 0 0 12px rgba(255, 181, 71, .6); transition: width 2.2s cubic-bezier(.4,.1,.2,1); }
.cy-tl.is-in .cy-tl__fill { width: 100%; }
.cy-tl__pt { position: relative; padding-top: 30px; }
.cy-tl__pt::before { content: ''; position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--cy-bg); border: 2px solid var(--cy-line-strong); transition: background .4s, border-color .4s, box-shadow .4s; transition-delay: var(--t, 0s); }
.cy-tl.is-in .cy-tl__pt::before { background: var(--cy-amber); border-color: var(--cy-amber); box-shadow: 0 0 12px var(--cy-amber); }
.cy-tl__pt b { display: block; font-family: var(--cy-mono); font-size: .78rem; color: var(--cy-amber); letter-spacing: .06em; }
.cy-tl__pt strong { display: block; color: #fff; font-size: .92rem; margin: 2px 0; }
.cy-tl__pt span { display: block; color: var(--cy-sub); font-size: .78rem; line-height: 1.6; }

/* ==========================================================================
   理解度レポート（REPORT）
   ========================================================================== */
.cy-report { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: start; }
.cy-report > * { min-width: 0; }
.cy-dash { border: 1px solid var(--cy-line-strong); border-radius: 20px; background: rgba(8, 16, 30, .92); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), var(--cy-glow); }
.cy-dash__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--cy-line); font-family: var(--cy-mono); font-size: .72rem; color: var(--cy-sub); }
.cy-dash__bar b { color: var(--cy-amber); font-weight: 700; letter-spacing: .06em; }
.cy-dash__body { padding: 22px; }
.cy-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.cy-kpi { border: 1px solid var(--cy-line); border-radius: 12px; padding: 12px; text-align: center; background: rgba(5, 10, 20, .6); }
.cy-kpi__n { font-family: var(--cy-mono); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.7rem); color: #fff; text-shadow: var(--cy-glow); }
.cy-kpi__n small { font-size: .55em; color: var(--cy-cyan); margin-left: 2px; }
.cy-kpi__l { font-size: .7rem; color: var(--cy-sub); }
.cy-bars { list-style: none; padding: 0; margin: 0; }
.cy-bars li { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; align-items: center; padding: 7px 0; }
.cy-bars__name { font-size: .8rem; color: var(--cy-text); line-height: 1.4; }
.cy-bars__track { position: relative; height: 22px; border-radius: 6px; background: rgba(80, 180, 255, .07); overflow: hidden; }
.cy-bars__pre, .cy-bars__post { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.cy-bars__pre { background: rgba(159, 179, 204, .35); z-index: 2; height: 8px; top: 7px; }
.cy-bars__post { background: linear-gradient(90deg, var(--cy-blue), var(--cy-cyan)); transition-delay: .5s; }
.cy-bars__post.is-warn { background: linear-gradient(90deg, #b8772b, var(--cy-amber)); }
.cy-dash.is-in .cy-bars__pre { width: var(--pre); }
.cy-dash.is-in .cy-bars__post { width: var(--post); }
.cy-bars__val { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--cy-mono); font-size: .68rem; color: #fff; z-index: 3; text-shadow: 0 0 4px #000; }
.cy-dash__legend { display: flex; gap: 16px; font-size: .7rem; color: var(--cy-sub); margin: 12px 0 0; flex-wrap: wrap; }
.cy-dash__legend i { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.cy-alert { margin-top: 18px; border: 1px solid rgba(255, 181, 71, .45); background: rgba(255, 181, 71, .07); border-radius: 12px; padding: 12px 14px; font-size: .82rem; color: var(--cy-text); line-height: 1.7; }
.cy-alert b { color: var(--cy-amber); font-family: var(--cy-mono); font-size: .7rem; letter-spacing: .1em; display: block; margin-bottom: 2px; }
.cy-repkinds { display: grid; gap: 12px; }
.cy-repkind { border: 1px solid var(--cy-line); border-radius: 14px; padding: 16px 18px; background: rgba(10, 20, 36, .6); }
.cy-repkind b { font-family: var(--cy-mono); font-size: .68rem; color: var(--cy-cyan); letter-spacing: .14em; }
.cy-repkind strong { display: block; color: #fff; margin: 2px 0 4px; }
.cy-repkind p { margin: 0; color: var(--cy-sub); font-size: .86rem; line-height: 1.75; }
.cy-research { margin-top: 18px; border-radius: 14px; padding: 16px 18px; border: 1px solid rgba(139, 107, 255, .45); background: rgba(139, 107, 255, .08); font-size: .86rem; color: var(--cy-text); line-height: 1.8; }
.cy-research b { color: var(--cy-violet); }

/* ==========================================================================
   研修サイト＋研修用SORA（PLATFORM）
   ========================================================================== */
.cy-plat { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.cy-plat > * { min-width: 0; }
.cy-phone { width: 300px; max-width: 100%; margin: 0 auto; border-radius: 40px; padding: 12px; background: linear-gradient(160deg, #1b2a44, #070d18); border: 1px solid var(--cy-line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(63, 216, 255, .15); position: relative; }
.cy-phone__scr { border-radius: 30px; background: #08111f; height: 540px; overflow: hidden; display: flex; flex-direction: column; }
.cy-phone__top { padding: 14px 16px 10px; border-bottom: 1px solid var(--cy-line); display: flex; align-items: center; gap: 10px; }
.cy-phone__orb { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #bff3ff, var(--cy-cyan) 40%, var(--cy-blue) 75%); box-shadow: 0 0 16px var(--cy-cyan); animation: cy-breathe 3s ease-in-out infinite; }
@keyframes cy-breathe { 50% { transform: scale(1.12); box-shadow: 0 0 26px var(--cy-cyan); } }
.cy-phone__ttl { font-size: .8rem; font-weight: 700; color: #fff; line-height: 1.3; }
.cy-phone__ttl small { display: block; font-size: .64rem; color: var(--cy-sub); font-weight: 400; }
.cy-chat { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.cy-msg { max-width: 88%; font-size: .76rem; line-height: 1.65; padding: 9px 12px; border-radius: 14px; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.cy-msg.is-on { opacity: 1; transform: none; }
.cy-msg--u { align-self: flex-end; background: var(--cy-blue); color: #fff; border-bottom-right-radius: 4px; }
.cy-msg--a { align-self: flex-start; background: rgba(63, 216, 255, .08); border: 1px solid var(--cy-line-strong); color: var(--cy-text); border-bottom-left-radius: 4px; }
.cy-msg__src { display: inline-block; margin-top: 6px; font-family: var(--cy-mono); font-size: .62rem; color: var(--cy-green); border: 1px solid rgba(62, 232, 164, .45); border-radius: 6px; padding: 2px 6px; }
.cy-msg__esc { display: inline-block; margin-top: 6px; font-family: var(--cy-mono); font-size: .62rem; color: var(--cy-amber); border: 1px solid rgba(255, 181, 71, .5); border-radius: 6px; padding: 2px 6px; }
.cy-typing { align-self: flex-start; display: none; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(63, 216, 255, .08); }
.cy-typing.is-on { display: flex; }
.cy-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--cy-cyan); animation: cy-dot 1s infinite; }
.cy-typing i:nth-child(2) { animation-delay: .15s; }
.cy-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cy-dot { 50% { opacity: .2; transform: translateY(-3px); } }
.cy-phone__cap { text-align: center; font-size: .72rem; color: var(--cy-sub); margin-top: 14px; }
.cy-replay { display: block; margin: 10px auto 0; background: none; border: 1px solid var(--cy-line-strong); color: var(--cy-cyan); font-family: var(--cy-mono); font-size: .76rem; border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.cy-replay:hover { background: rgba(63, 216, 255, .1); }
.cy-dev { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cy-mono); font-size: .72rem; letter-spacing: .1em; color: var(--cy-amber); border: 1px solid rgba(255, 181, 71, .5); border-radius: 999px; padding: 4px 12px; margin-bottom: 16px; }
.cy-dev::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cy-amber); animation: cy-blink 1.4s steps(1) infinite; }
.cy-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cy-feat { border: 1px solid var(--cy-line); border-radius: 14px; padding: 16px; background: rgba(10, 20, 36, .6); }
.cy-feat b { font-family: var(--cy-mono); font-size: .66rem; letter-spacing: .14em; color: var(--cy-cyan); }
.cy-feat strong { display: block; color: #fff; font-size: .95rem; margin: 4px 0; }
.cy-feat p { margin: 0; color: var(--cy-sub); font-size: .84rem; line-height: 1.7; }

/* ==========================================================================
   講師（TEACHER）
   ========================================================================== */
.cy-teacher { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.cy-teacher > * { min-width: 0; }
.cy-term { border-radius: 16px; border: 1px solid var(--cy-line-strong); background: #060c17; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.cy-term__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--cy-line); }
.cy-term__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.cy-term__bar i:nth-child(2) { background: #febc2e; }
.cy-term__bar i:nth-child(3) { background: #28c840; }
.cy-term__bar span { margin-left: 10px; font-family: var(--cy-mono); font-size: .7rem; color: var(--cy-sub); }
.cy-term__body { padding: 18px; font-family: var(--cy-mono); font-size: .8rem; line-height: 1.9; color: var(--cy-text); }
.cy-term__body p { margin: 0; }
.cy-term__p { color: var(--cy-green); margin-right: 8px; }
.cy-term__o { color: var(--cy-sub); }
.cy-term__log { list-style: none; padding: 0; margin: 4px 0 8px; }
.cy-term__log li { opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--i) * .22s); display: flex; gap: 12px; }
.cy-term.is-in .cy-term__log li { opacity: 1; transform: none; }
.cy-term__log span { color: var(--cy-cyan); flex: 0 0 3.2em; }
.cy-teacher__pts { display: grid; gap: 14px; }

/* ==========================================================================
   情報の扱い（TRUST）・研修形態（FORMAT）
   ========================================================================== */
.cy-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cy-trust .cy-card { padding: 22px 20px; }
.cy-trust__ico { font-size: 1.4rem; margin-bottom: 10px; display: block; }
.cy-trust h3 { font-size: 1.02rem; }
.cy-trust p { font-size: .86rem; }
.cy-fmt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }

/* ==========================================================================
   流れ（FLOW）
   ========================================================================== */
.cy-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; counter-reset: st; }
.cy-steps li { position: relative; border: 1px solid var(--cy-line); border-radius: 14px; padding: 18px 14px; background: rgba(10, 20, 36, .6); counter-increment: st; }
.cy-steps li::before { content: '0' counter(st); display: block; font-family: var(--cy-mono); font-weight: 700; color: var(--cy-cyan); font-size: 1.2rem; text-shadow: var(--cy-glow); margin-bottom: 6px; }
.cy-steps strong { display: block; color: #fff; font-size: .95rem; margin-bottom: 4px; }
.cy-steps span { color: var(--cy-sub); font-size: .8rem; line-height: 1.65; display: block; }
.cy-steps li.is-report { border-color: rgba(62, 232, 164, .5); }
.cy-steps li.is-report::before { color: var(--cy-green); }

/* ==========================================================================
   料金（PRICING）
   ========================================================================== */
.cy-price { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cy-price ul { list-style: none; padding: 0; margin: 12px 0 0; }
.cy-price li { padding: 8px 0 8px 22px; position: relative; color: var(--cy-text); font-size: .92rem; border-top: 1px dashed var(--cy-line); }
.cy-price li::before { content: '›'; position: absolute; left: 6px; color: var(--cy-cyan); font-weight: 700; }
.cy-price__guide { text-align: center; margin: 34px auto 6px; font-weight: 700; font-size: 1.05rem; }
.cy-price__guide b { font-family: var(--cy-mono); font-size: clamp(1.8rem, 5vw, 2.6rem); color: #fff; text-shadow: 0 0 24px rgba(255, 181, 71, .5); margin: 0 4px; }
.cy-price__guide small { display: block; font-size: .8rem; font-weight: 400; color: var(--cy-sub); margin-top: 4px; }

/* モニター企業募集 */
.cy-monitor { margin-top: 56px; border-radius: 22px; padding: 36px 32px; border: 1px solid rgba(62, 232, 164, .45); background: radial-gradient(ellipse at top right, rgba(62, 232, 164, .14), transparent 60%), rgba(10, 20, 36, .7); display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; align-items: center; }
.cy-monitor > * { min-width: 0; }
.cy-monitor h3 { font-family: var(--cy-head); font-weight: 900; font-size: 1.4rem; color: #fff; margin: 6px 0 10px; }
.cy-monitor p { color: var(--cy-sub); margin: 0; font-size: .92rem; line-height: 1.9; }
.cy-monitor ul { list-style: none; padding: 0; margin: 14px 0 0; }
.cy-monitor li { font-size: .88rem; color: var(--cy-text); padding: 4px 0 4px 22px; position: relative; }
.cy-monitor li::before { content: '✓'; position: absolute; left: 0; color: var(--cy-green); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.cy-faq { max-width: 860px; margin: 0 auto; }
.cy-faq__item { border: 1px solid var(--cy-line); border-radius: 14px; margin-bottom: 12px; background: rgba(10, 20, 36, .6); overflow: hidden; }
.cy-faq__q { width: 100%; text-align: left; background: none; border: 0; color: #fff; font: inherit; font-weight: 700; font-size: .98rem; padding: 18px 52px 18px 20px; cursor: pointer; position: relative; line-height: 1.6; }
.cy-faq__q::before { content: 'Q'; font-family: var(--cy-mono); color: var(--cy-cyan); margin-right: 10px; }
.cy-faq__q::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-family: var(--cy-mono); font-size: 1.3rem; color: var(--cy-cyan); transition: transform .3s; }
.cy-faq__q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.cy-faq__a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.cy-faq__a > div { padding: 0 20px 18px 44px; color: var(--cy-sub); font-size: .92rem; line-height: 1.9; }

/* 教育者向けセミナーへの案内 */
.cy-edu { display: flex; gap: 22px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--cy-line); border-left: 4px solid var(--cy-violet); border-radius: 16px; padding: 24px 26px; background: rgba(10, 20, 36, .6); }
.cy-edu > div { flex: 1; min-width: 240px; }
.cy-edu b { font-family: var(--cy-mono); font-size: .7rem; letter-spacing: .16em; color: var(--cy-violet); }
.cy-edu h3 { color: #fff; font-size: 1.12rem; margin: 4px 0 6px; }
.cy-edu p { margin: 0; color: var(--cy-sub); font-size: .9rem; line-height: 1.8; }

/* ==========================================================================
   問い合わせフォーム（既存の送信処理をそのまま使う）
   ========================================================================== */
.form-shell { max-width: 860px; margin: 0 auto; border: 1px solid var(--cy-line-strong); border-radius: 22px; padding: 34px 30px; background: rgba(8, 16, 30, .9); box-shadow: var(--cy-glow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; position: relative; }
.fg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fg.full { grid-column: 1 / -1; }
.fg > label { font-size: .86rem; font-weight: 700; color: var(--cy-text); }
.req { color: var(--cy-red); margin-left: 4px; }
.form-shell input[type=text], .form-shell input[type=email], .form-shell input[type=tel], .form-shell select, .form-shell textarea { width: 100%; font: inherit; font-size: 16px; color: var(--cy-text); background: rgba(5, 10, 20, .8); border: 1px solid var(--cy-line-strong); border-radius: 10px; padding: 12px 14px; }
.form-shell select option { background: #0a1424; color: var(--cy-text); }
.form-shell input:focus, .form-shell select:focus, .form-shell textarea:focus { outline: 2px solid var(--cy-cyan); outline-offset: 1px; }
.form-shell ::placeholder { color: rgba(159, 179, 204, .6); }
.chk-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chk-group label { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--cy-text); border: 1px solid var(--cy-line); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.chk-group input { accent-color: var(--cy-cyan); width: 16px; height: 16px; }
.form-privacy { grid-column: 1 / -1; font-size: .78rem; color: var(--cy-sub); line-height: 1.8; }
.form-submit { grid-column: 1 / -1; min-height: 56px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 1.02rem; cursor: pointer; color: #031021; background: linear-gradient(90deg, var(--cy-cyan), var(--cy-blue)); box-shadow: 0 8px 30px rgba(47, 140, 255, .35); }
.form-submit:disabled { opacity: .6; cursor: wait; }
.form-error { grid-column: 1 / -1; display: none; color: #ffd1d8; background: rgba(255, 107, 129, .12); border: 1px solid rgba(255, 107, 129, .45); border-radius: 10px; padding: 12px 14px; font-size: .88rem; }
.form-error.show { display: block; }
.form-error a, .form-alt a, .form-success a { color: var(--cy-cyan); }
.form-alt { grid-column: 1 / -1; text-align: center; font-size: .86rem; color: var(--cy-sub); }
.form-success { display: none; text-align: center; padding: 20px 0; }
.form-success h3 { color: #fff; font-family: var(--cy-head); font-size: 1.3rem; }
.form-success p { color: var(--cy-sub); }

/* ==========================================================================
   フッター
   ========================================================================== */
.cy-foot { border-top: 1px solid var(--cy-line); background: #03070e; padding: 56px 0 28px; color: var(--cy-sub); font-size: .86rem; }
.cy-foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.cy-foot h5 { color: #fff; font-size: .9rem; margin: 0 0 12px; }
.cy-foot ul { list-style: none; padding: 0; margin: 0; }
.cy-foot li { margin-bottom: 6px; }
.cy-foot a { color: var(--cy-sub); text-decoration: none; }
.cy-foot a:hover { color: var(--cy-cyan); }
.cy-foot__name { font-family: var(--cy-head); font-weight: 900; color: #fff; font-size: 1.1rem; margin: 10px 0 6px; }
.cy-foot__name b { color: var(--cy-cyan); }
.cy-foot__sa { margin-top: 14px; }
.cy-foot__sa img { width: 120px; background: #fff; border-radius: 6px; padding: 4px; }
.cy-foot__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--cy-line); margin-top: 36px; padding-top: 18px; font-size: .76rem; }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1024px) {
  .cy-courses { grid-template-columns: repeat(2, 1fr); }
  .cy-steps { grid-template-columns: repeat(3, 1fr); }
  .cy-trust, .cy-fmt { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .cy-menu { display: block; }
  .cy-nav { position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(5, 10, 20, .97); border-bottom: 1px solid var(--cy-line); padding: 8px 20px 18px; display: none; }
  .cy-nav.open { display: flex; }
  .cy-nav a { padding: 12px 4px; border-bottom: 1px solid var(--cy-line); font-size: .95rem; }
  .cy-nav .cy-nav__cta { margin-top: 12px; text-align: center; border-bottom: 0; }
  .cy-sec { padding: 80px 0; }
  .cy-hero { min-height: auto; padding: 56px 0 64px; }
  .cy-hero__grid, .cy-mods, .cy-report, .cy-plat, .cy-teacher, .cy-monitor, .cy-price { grid-template-columns: 1fr; }
  .cy-stack { height: 340px; max-width: 340px; }
  .cy-issues, .cy-core { grid-template-columns: 1fr; }
  .cy-flowmap { grid-template-columns: 1fr; gap: 22px; }
  .cy-flowmap::before { top: 0; bottom: 0; left: 45px; right: auto; width: 2px; height: auto; }
  .cy-flowmap__beam { top: 0; left: 44px; width: 4px !important; height: 0; transition: height 2.4s cubic-bezier(.4,.1,.2,1); }
  .cy-flowmap.is-in .cy-flowmap__beam { height: 100%; }
  .cy-node { display: grid; grid-template-columns: 92px 1fr; gap: 16px; text-align: left; align-items: center; padding: 0; }
  .cy-node__dot { margin: 0; }
  .cy-chain__row { grid-template-columns: 1fr 1fr; }
  .cy-chain__step:nth-child(2)::after { display: none; }
  .cy-tl__track { grid-template-columns: 1fr; gap: 16px; padding-left: 28px; }
  .cy-tl__track::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .cy-tl__fill { top: 0; left: 7px; width: 2px !important; height: 0; transition: height 2.2s cubic-bezier(.4,.1,.2,1); }
  .cy-tl.is-in .cy-tl__fill { height: 100%; }
  .cy-tl__pt { padding-top: 0; }
  .cy-tl__pt::before { left: -28px; top: 2px; }
  .cy-feats { grid-template-columns: 1fr; }
  .cy-foot__top { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-shell { padding: 26px 18px; }
}
@media (max-width: 560px) {
  .inner { padding: 0 16px; }
  .cy-courses, .cy-steps, .cy-trust, .cy-fmt, .cy-modboard__slots { grid-template-columns: 1fr; }
  .cy-chain__row { grid-template-columns: 1fr; }
  .cy-chain__step::after { display: none; }
  .cy-bars li { grid-template-columns: 1fr; gap: 4px; }
  .cy-dash__kpis { grid-template-columns: 1fr 1fr 1fr; }
  .cy-monitor { padding: 26px 20px; }
  .cy-stack__lbl { font-size: .62rem; }
  .cy-hero__btns .cy-btn { width: 100%; }
}

/* ==========================================================================
   動きを減らす設定
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cy-rv, .cy-mod, .cy-term__log li, .cy-msg { opacity: 1 !important; transform: none !important; }
  .cy-flowmap__beam { width: 76%; }
  .cy-tl__fill { width: 100%; }
  .cy-dash .cy-bars__pre { width: var(--pre); }
  .cy-dash .cy-bars__post { width: var(--post); }
  .cy-ticker__track { animation: none; }
}