:root {
  --accent: #00D1FF;
  --accent-dim: #00B8E6;
  --accent-glow: rgba(0,209,255,0.12);
  --accent-glow-strong: rgba(0,209,255,0.30);
  --accent-border: rgba(0,209,255,0.2);
  --bg: #000000;
  --bg-card: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --text: #f5f5f7;
  --text-dim: rgba(255,255,255,0.5);
  --text-mid: rgba(255,255,255,0.72);
  --red: #ff453a;
  --glass: rgba(28,28,30,0.72);
  --radius: 20px;
  --radius-lg: 28px;
  --transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== BUTTONS ===== */
.btn-primary { display:inline-flex;align-items:center;gap:8px;padding:11px 26px;background:var(--accent);color:#fff;border-radius:980px;font-size:0.82rem;font-weight:700;text-decoration:none;transition:all .4s var(--transition);border:none;cursor:pointer;position:relative;overflow:hidden }
.btn-primary::after { content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:btnShimmer 4s ease-in-out infinite }
@keyframes btnShimmer { 0%{left:-100%} 50%,100%{left:150%} }
.btn-primary:hover { background:var(--accent-dim);transform:scale(1.03);box-shadow:0 0 32px rgba(0,209,255,0.2) }
.btn-primary.line-btn { background: #06C755; }
.btn-primary.line-btn:hover { background: #05b04c; box-shadow: 0 0 32px rgba(6,199,85,0.2); }
.btn-ghost { display:inline-flex;align-items:center;gap:8px;padding:11px 26px;background:transparent;color:var(--text);border:1px solid rgba(255,255,255,0.15);border-radius:980px;font-size:0.82rem;font-weight:600;text-decoration:none;transition:all .4s var(--transition) }
.btn-ghost:hover { border-color:var(--accent);color:var(--accent) }

/* ===== COMMON ===== */
section { padding: 120px 40px; }
.section-inner { max-width: 1080px; margin: 0 auto; }
.section-label { font-family:'Outfit',sans-serif;font-size:0.68rem;font-weight:600;color:var(--accent);letter-spacing:3px;text-transform:uppercase;margin-bottom:16px;animation:labelGlow 3s ease-in-out infinite }
@keyframes labelGlow { 0%,100%{text-shadow:none} 50%{text-shadow:0 0 12px rgba(180,180,180,0.3)} }
.section-title { font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;line-height:1.3;letter-spacing:-1px;margin-bottom:20px;background:linear-gradient(90deg,#fff 0%,#fff 40%,rgba(160,160,160,0.7) 50%,#fff 60%,#fff 100%);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:titleShimmer 6s ease infinite }
@keyframes titleShimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.section-desc { font-size:0.95rem;color:var(--text-dim);line-height:1.9;max-width:640px;font-weight:300 }

/* ===== HERO ===== */
.hero { min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:160px 40px 120px;text-align:center }
.hero-content { position:relative;z-index:2;max-width:800px }
.hero-badge { display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:980px;background:rgba(0,209,255,0.08);border:1px solid rgba(0,209,255,0.2);font-size:0.72rem;font-weight:600;color:var(--accent);letter-spacing:1px;margin-bottom:32px;animation:badgeFadeIn 1s ease .2s both }
@keyframes badgeFadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.hero h1 { font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1.3;letter-spacing:-2px;margin-bottom:24px;animation:heroTitleIn 1s ease .4s both;background:none;-webkit-background-clip:initial;-webkit-text-fill-color:initial;background-clip:initial;color:#fff }
@keyframes heroTitleIn { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.hero h1 .accent { color: var(--accent); }
.hero-sub { font-size:1rem;color:var(--text-dim);line-height:1.9;font-weight:300;margin-bottom:24px;max-width:600px;margin-left:auto;margin-right:auto;animation:heroSubIn 1s ease .6s both }
@keyframes heroSubIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.hero-concept { display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;animation:heroSubIn 1s ease .7s both }
.hero-concept-item { text-align:center }
.hero-concept-num { font-family:'Outfit',sans-serif;font-size:0.65rem;font-weight:700;color:var(--accent);letter-spacing:2px;margin-bottom:4px }
.hero-concept-text { font-size:0.88rem;font-weight:600 }
.hero-buttons { display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:heroSubIn 1s ease .8s both }

/* ===== DEPARTMENT PROBLEMS ===== */
.dept-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px }
.dept-card { background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;transition:all .5s var(--transition) }
.dept-card:hover { border-color:var(--accent-border);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.2) }
.dept-card-header { display:flex;align-items:center;gap:12px;margin-bottom:16px }
.dept-card-icon { font-size:1.3rem }
.dept-card h4 { font-size:1rem;font-weight:700 }
.dept-card ul { list-style:none;padding:0 }
.dept-card li { font-size:0.82rem;color:var(--text-dim);padding:6px 0;font-weight:300;border-bottom:1px solid rgba(255,255,255,0.03) }
.dept-card li::before { content:'• ';color:var(--accent) }

/* ===== COMPARISON ===== */
.compare-grid { display:grid;grid-template-columns:1fr 60px 1fr;gap:0;margin-top:48px;align-items:stretch }
.compare-box { background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;transition:all .5s var(--transition) }
.compare-box:hover { border-color:var(--accent-border) }
.compare-box.before { border-color:rgba(255,69,58,0.2) }
.compare-box.after { border-color:var(--accent-border);background:rgba(0,209,255,0.03) }
.compare-label { font-family:'Outfit',sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:2px;margin-bottom:12px }
.compare-box.before .compare-label { color:var(--red) }
.compare-box.after .compare-label { color:var(--accent) }
.compare-box h4 { font-size:0.95rem;font-weight:700;margin-bottom:12px }
.compare-box p { font-size:0.82rem;color:var(--text-dim);line-height:1.7;font-weight:300 }
.compare-box ul { list-style:none;padding:0 }
.compare-box li { font-size:0.82rem;color:var(--text-dim);padding:5px 0;font-weight:300 }
.compare-arrow { display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--accent);font-weight:700 }

/* ===== AI SYSTEMS 6-GRID ===== */
.ai-systems-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px }
.ai-sys-card { background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 24px;transition:all .5s var(--transition) }
.ai-sys-card:hover { border-color:var(--accent-border);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.2) }
.ai-sys-badge { font-family:'Outfit',sans-serif;font-size:0.65rem;font-weight:700;color:var(--accent);letter-spacing:2px;margin-bottom:10px }
.ai-sys-card h4 { font-size:0.95rem;font-weight:700;margin-bottom:10px }
.ai-sys-card p { font-size:0.8rem;color:var(--text-dim);line-height:1.7;font-weight:300;margin-bottom:12px }
.ai-sys-period { font-size:0.72rem;color:var(--accent);font-weight:600;padding:6px 14px;background:rgba(0,209,255,0.06);border-radius:980px;display:inline-block }

/* ===== INDUSTRY EXAMPLES ===== */
.industry-examples { margin-top:48px }
.industry-ex { background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;margin-bottom:16px;transition:all .5s var(--transition) }
.industry-ex:hover { border-color:var(--accent-border) }
.industry-ex h4 { font-size:1rem;font-weight:700;margin-bottom:6px }
.industry-ex .industry-tagline { font-size:0.85rem;color:var(--accent);font-weight:600;margin-bottom:12px }
.industry-ex ul { list-style:none;padding:0 }
.industry-ex li { font-size:0.8rem;color:var(--text-dim);padding:4px 0;font-weight:300 }
.industry-ex li::before { content:'✓ ';color:var(--accent);font-weight:700 }

/* ===== SAFETY PRINCIPLES ===== */
.safety-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px }
.safety-card { background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;transition:all .5s var(--transition);display:flex;gap:16px;align-items:flex-start }
.safety-card:hover { border-color:var(--accent-border);transform:translateY(-4px) }
.safety-icon { font-size:1.4rem;flex-shrink:0;margin-top:2px }
.safety-content h4 { font-size:0.92rem;font-weight:700;margin-bottom:6px }
.safety-content p { font-size:0.8rem;color:var(--text-dim);line-height:1.7;font-weight:300 }

/* ===== WHY SMALL ===== */
.why-small-list { margin-top:48px }
.why-small-item { display:flex;gap:28px;padding:28px 0;border-bottom:1px solid var(--border);transition:all .4s var(--transition) }
.why-small-item:hover { transform:translateX(6px) }
.why-small-num { font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800;color:var(--accent);opacity:0.3;flex-shrink:0;width:60px }
.why-small-content h4 { font-size:1rem;font-weight:700;margin-bottom:8px }
.why-small-content p { font-size:0.85rem;color:var(--text-dim);line-height:1.8;font-weight:300 }

/* ===== TARGET COMPANIES ===== */
.target-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px }
.target-card { background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--radius);padding:24px 22px;display:flex;gap:14px;align-items:center;transition:all .5s var(--transition) }
.target-card:hover { border-color:var(--accent-border);transform:translateX(4px) }
.target-icon { font-size:1.3rem;flex-shrink:0 }
.target-card p { font-size:0.88rem;font-weight:500 }

/* ===== PRICING ===== */
.pricing-items { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px }
.pricing-item { background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 28px;transition:all .5s var(--transition);text-align:center }
.pricing-item.featured { border-color:var(--accent-border);background:rgba(0,209,255,0.04) }
.pricing-item:hover { transform:translateY(-6px);border-color:var(--accent-border);box-shadow:0 20px 50px rgba(0,0,0,0.25) }
.pricing-plan-name { font-size:0.72rem;font-weight:600;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px }
.pricing-item h4 { font-size:1.1rem;font-weight:700;margin-bottom:16px }
.pricing-amount { font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800;color:var(--accent);margin-bottom:4px }
.pricing-amount span { font-size:0.85rem;font-weight:400;color:var(--text-dim) }
.pricing-period { font-size:0.75rem;color:var(--text-dim);margin-bottom:20px;font-weight:300 }
.pricing-features { list-style:none;text-align:left }
.pricing-features li { font-size:0.8rem;color:var(--text-mid);padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-weight:400 }
.pricing-features li::before { content:'✓ ';color:var(--accent);font-weight:700 }
.pricing-note { text-align:center;margin-top:32px;font-size:0.82rem;color:var(--text-dim);font-weight:300 }

/* ===== FLOW ===== */
.flow-timeline { margin-top:48px }
.flow-item {
  display:flex;
  align-items:flex-start;
  gap:28px;
  padding:32px 0;
  border-bottom:1px solid var(--border);
  transition:all .4s var(--transition);
}
.flow-item:hover { transform:translateX(6px) }
.flow-num {
  font-family:'Outfit',sans-serif;
  font-size:2rem;
  font-weight:800;
  color:var(--accent);
  opacity:0.3;
  flex-shrink:0;
  min-width:60px;
  width:60px;
  text-align:center;
}
.flow-content { flex:1;min-width:0 }
.flow-content h4 { font-size:1rem;font-weight:700;margin-bottom:8px }
.flow-content p { font-size:0.85rem;color:var(--text-dim);line-height:1.8;font-weight:300 }

/* ===== FAQ ===== */
.faq-list { margin-top:48px;max-width:800px }
.faq-item { border-bottom:1px solid var(--border) }
.faq-q { display:flex;justify-content:space-between;align-items:center;padding:24px 0;cursor:pointer;transition:all .3s var(--transition) }
.faq-q:hover { transform:translateX(6px) }
.faq-q h3 { font-size:0.92rem;font-weight:600 }
.faq-toggle { font-family:'Outfit',sans-serif;font-size:1.2rem;color:var(--accent);transition:transform .3s }
.faq-item.open .faq-toggle { transform:rotate(45deg) }
.faq-a { max-height:0;overflow:hidden;transition:max-height .5s var(--transition),padding .5s var(--transition) }
.faq-item.open .faq-a { max-height:300px;padding-bottom:24px }
.faq-a p { font-size:0.85rem;color:var(--text-dim);line-height:1.9;font-weight:300 }

/* ===== COLUMN ===== */
.column-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px }
.column-card { background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--radius);padding:0;overflow:hidden;transition:all .5s var(--transition);text-decoration:none;display:block }
.column-card:hover { border-color:var(--accent-border);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.2) }
.column-card-thumb { width:100%;aspect-ratio:16/9;overflow:hidden }
.column-card-thumb img { width:100%;height:100%;object-fit:cover;transition:transform .5s var(--transition) }
.column-card:hover .column-card-thumb img { transform:scale(1.05) }
.column-card-meta { display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:16px 24px 0 }
.column-card-tag { font-size:0.65rem;font-weight:700;color:var(--accent);padding:4px 10px;border-radius:980px;background:rgba(0,209,255,0.08);border:1px solid var(--accent-border);letter-spacing:0.5px }
.column-card-date { font-family:'Outfit',sans-serif;font-size:0.7rem;color:var(--text-dim);font-weight:400 }
.column-card h4 { font-size:0.92rem;font-weight:700;margin-bottom:10px;line-height:1.5;color:var(--text);padding:0 24px }
.column-card p { font-size:0.78rem;color:var(--text-dim);line-height:1.7;font-weight:300;padding:0 24px 24px }
.column-empty { color:var(--text-dim);text-align:center;padding:40px 0;font-size:0.85rem }

/* ===== CTA ===== */
.final-cta { text-align:center;padding:100px 40px;position:relative;overflow:hidden }
.final-cta::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(0,209,255,0.08),transparent 70%) }
.final-cta h2 { font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin-bottom:16px;position:relative }
.final-cta p { font-size:0.95rem;color:var(--text-dim);line-height:1.9;margin-bottom:36px;position:relative;font-weight:300 }
.final-cta .cta-buttons { display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative }
.final-cta-hours { font-size:0.78rem;color:var(--text-dim);margin-top:32px;font-weight:300;position:relative }
.cta-options { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px;position:relative }
.cta-option { padding:10px 20px;border-radius:980px;font-size:0.78rem;font-weight:600;background:rgba(0,209,255,0.06);border:1px solid var(--accent-border);color:var(--accent);transition:all .4s var(--transition) }
.cta-option:hover { background:rgba(0,209,255,0.12) }

/* ===== REVEAL ===== */
.reveal { opacity:0;transform:translateY(40px) scale(0.97);transition:opacity 1s var(--transition),transform 1s var(--transition),filter 1s var(--transition);filter:blur(4px) }
.reveal.visible { opacity:1;transform:translateY(0) scale(1);filter:blur(0) }

/* ===== LP NAV HUB（SEO ハブ） ===== */
section.aisys-hub-section {
  padding: 72px 40px !important;
  position: relative;
}
section.aisys-hub-section--alt {
  background: rgba(0,209,255,0.025);
  border-top: 1px solid rgba(0,209,255,0.08);
  border-bottom: 1px solid rgba(0,209,255,0.08);
}
.aisys-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 36px;
}
.aisys-hub-grid--3 { grid-template-columns: repeat(3, 1fr); }
.aisys-hub-grid--4 { grid-template-columns: repeat(4, 1fr); }
.aisys-hub-grid--6 { grid-template-columns: repeat(6, 1fr); }
.aisys-hub-grid--area { grid-template-columns: repeat(5, 1fr); }
/* カード共通 */
.aisys-hub-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  text-decoration: none;
  transition: all .3s ease;
  cursor: pointer;
}
.aisys-hub-card:hover {
  background: rgba(0,209,255,0.08);
  border-color: rgba(0,209,255,0.40);
  transform: translateY(-2px);
}
/* バッジ */
.aisys-hub-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0,209,255,0.10);
  padding: 2px 9px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.aisys-hub-title {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.82);
  flex: 1;
  line-height: 1.45;
  font-weight: 500;
}
.aisys-hub-title small {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  font-weight: 400;
  margin-top: 2px;
}
.aisys-hub-arrow {
  font-size: 0.82rem;
  color: rgba(0,209,255,0.6);
  flex-shrink: 0;
}
/* Q&A / AIO カード */
.aisys-hub-card--qa {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.07);
}
.aisys-hub-card--qa:hover {
  background: rgba(0,209,255,0.05);
  border-color: rgba(0,209,255,0.25);
}
.aisys-hub-card--qa .aisys-hub-title { color: rgba(255,255,255,0.6); }
.aisys-hub-card--qa .aisys-hub-badge {
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05);
}
/* 地域カード */
.aisys-hub-card--area {
  justify-content: space-between;
  padding: 20px 22px;
}
.aisys-hub-area-name {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.02em;
}
/* システムカード */
.aisys-hub-card--sys {
  background: rgba(0,209,255,0.04);
  border-color: rgba(0,209,255,0.18);
}
.aisys-hub-card--sys:hover {
  background: rgba(0,209,255,0.09);
  border-color: rgba(0,209,255,0.42);
}
.aisys-hub-card--sys .aisys-hub-title { color: #fff; font-weight: 600; }

/* ===== RESPONSIVE ===== */
@media (min-width:769px) {
  .section-desc { max-width:none;text-align:center }
}
@media (max-width:1024px) {
  .dept-grid,.safety-grid,.target-grid { grid-template-columns:1fr }
  .ai-systems-grid,.column-grid { grid-template-columns:repeat(2,1fr) }
  .compare-grid { grid-template-columns:1fr;gap:16px }
  .compare-arrow { transform:rotate(90deg);padding:8px 0 }
  .pricing-items { grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto }
}
/* PC/SP 改行切り替え */
br.pc-only { display: inline; }
br.sp-only { display: none; }
@media (max-width: 768px) {
  br.pc-only { display: none; }
  br.sp-only { display: inline; }
}

@media (max-width:768px) {
  section { padding:80px 20px }
  .hero { padding:60px 20px 60px !important;min-height:auto !important }
  .hero h1 { font-size:clamp(1.3rem,5.5vw,2rem) !important;letter-spacing:-0.5px !important }
  .hero-sub { font-size:0.85rem !important }
  .section-title { font-size:clamp(1.15rem,4.5vw,1.4rem) !important;letter-spacing:-0.3px !important }
  .section-desc { text-align:center }
  .hero-concept { gap:20px }
  .ai-systems-grid,.column-grid { grid-template-columns:1fr }
  .safety-grid { grid-template-columns:1fr }
  .why-small-item,.flow-item { flex-direction:column;gap:8px }
  .final-cta h2 { font-size:clamp(1.3rem,4vw,2.8rem) }
  .final-cta p { font-size:0.8rem }
  /* ハブカード SP */
  section.aisys-hub-section { padding: 56px 20px !important; }
  .aisys-hub-grid,
  .aisys-hub-grid--3,
  .aisys-hub-grid--4,
  .aisys-hub-grid--6 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .aisys-hub-grid--area { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .aisys-hub-card { padding: 12px 13px; }
  .aisys-hub-title { font-size: 0.78rem; }
  /* 何をAI化したいか / AIシステム別 / 比較・疑問 — 縦積みレイアウト */
  #lp-nav-needs .aisys-hub-card,
  #lp-nav-system .aisys-hub-card,
  #lp-nav-compare .aisys-hub-card,
  #lp-nav-compare .aisys-hub-card--qa {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
  }
  #lp-nav-needs .aisys-hub-arrow,
  #lp-nav-system .aisys-hub-arrow,
  #lp-nav-compare .aisys-hub-arrow {
    align-self: flex-end;
    margin-top: -18px;
  }
  #lp-nav-needs .aisys-hub-title small,
  #lp-nav-system .aisys-hub-title small,
  #lp-nav-compare .aisys-hub-title small {
    display: none;
  }
  /* Q&Aページ: バッジ非表示 */
  #lp-nav-aio .aisys-hub-badge { display: none; }
}
@media (max-width:600px) {
  .aisys-hub-grid--area { grid-template-columns: repeat(2, 1fr); }
}