:root {
  --primary: #2563EB;
  --primary-light: #3B82F6;
  --primary-dark: #1D4ED8;
  --accent: #F97316;
  --accent-light: #FB923C;
  --success: #10B981;
  --danger: #EF4444;
  --bg: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-muted: #F1F5F9;
  --text: #0F172A;
  --text-muted: #64748B;
  --border: #E2E8F0;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2 { font-family: 'Noto Serif JP', serif; }
section { scroll-margin-top: 80px; }
.counter,.tabular-nums {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-variant-numeric: tabular-nums;
}
a:focus-visible,button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
* { scrollbar-width: thin; scrollbar-color: var(--primary) var(--bg-muted); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-muted); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 999px; border: 2px solid var(--bg-muted); }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.95); }
.reveal-stagger > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.5s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.6s; }

.carousel-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  padding: 0.625rem 1rem;
  font-weight: 600;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.carousel-tab:hover { border-color: var(--primary-light); color: var(--primary); }
.carousel-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.carousel-panel { display: none; animation: fadeSlide 0.5s ease; }
.carousel-panel.active { display: block; }
@keyframes fadeSlide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.marquee-container { overflow: hidden; }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 30s linear infinite; will-change: transform; }
.marquee-container:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.faq-answer { max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.4s ease, padding 0.4s ease; }
.faq-answer.show { max-height: 2000px; }
.faq-question i { transition: transform 0.3s ease; }
.faq-question.active i { transform: rotate(180deg); }

input.error,
textarea.error,
select.error {
  border-color: var(--danger, #EF4444) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.12); }
.magnetic-btn { transition: transform 0.2s ease; }

.counter.counted { animation: counter-pop 0.3s ease-out; }
@keyframes counter-pop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

header { background: rgba(255, 255, 255, 0.95); }
header.scrolled { backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

#chatbot-toggle { animation: chatbot-pulse 3s ease-in-out infinite; }
#chatbot-toggle:hover { animation: none; }
#chatbot-bubble { animation: bubble-fade-in 0.5s ease-out 2s both; }
@keyframes bubble-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chatbot-pulse {
  0%,100% { box-shadow: 0 4px 15px rgba(37,99,235,0.3); }
  50% { box-shadow: 0 4px 25px rgba(37,99,235,0.6); }
}
#chatbot-window.is-open { animation: chatbot-open 0.3s ease-out; }
@keyframes chatbot-open { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chatbot-msg-bot { display: flex; gap: 8px; align-items: flex-start; }
.chatbot-msg-bot .msg-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.chatbot-msg-bot .msg-bubble {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0 16px 16px 16px;
  padding: 10px 14px;
  max-width: 80%;
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.chatbot-msg-user { display: flex; justify-content: flex-end; }
.chatbot-msg-user .msg-bubble {
  background: var(--primary);
  color: #fff;
  border-radius: 16px 0 16px 16px;
  padding: 10px 14px;
  max-width: 80%;
  font-size: 0.875rem;
  line-height: 1.5;
}
.chatbot-typing .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;
  animation: typing-dot 1.4s infinite;
}
.chatbot-typing .dot:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
  0%,60%,100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}
#chatbot-messages::-webkit-scrollbar { width: 4px; }
#chatbot-messages::-webkit-scrollbar-track { background: transparent; }
#chatbot-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

@media (max-width: 640px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  #chatbot-window { bottom: 80px; left: 12px; right: 12px; width: auto; max-width: none; }
  #chatbot-toggle { bottom: 16px; right: 16px; width: 80px; height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,.carousel-panel,.marquee-track,.card-lift { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .floating-dashboard { animation: none !important; }
  #chatbot-toggle { animation: none !important; }
  #chatbot-window { animation: none !important; }
  .chatbot-typing .dot { animation: none !important; }
}

@media print {
  header,footer,#chatbot-toggle,#chatbot-window,#scroll-top { display: none !important; }
}
