:root { --color-primary: #005BAC; --color-primary-dark: #00427F; --color-secondary: #7BBEFF; --color-secondary-light: #EAF5FF; --color-accent: #F47C67; --color-accent-light: #FFE3DD; --color-learning-yellow: #FFD966; --color-background: #FFFFFF; --color-background-subtle: #F4F9FF; --color-text: #344052; --color-text-muted: #6B7280; --color-border: #B8DDFF; --main: #FFD966; --brand: #005BAC; --brand-deep: #00427F; --accent: #F47C67; --accent-light: #FFE3DD; --secondary: #7BBEFF; --secondary-light: #EAF5FF; --danger: #E53935; --warning: #F47C67; --info: #005BAC; --success: #3EA10C; --link: #005BAC; --ink: #344052; --black: #1A2436; --bg: #F6F1E8; --bg-cool: #F0F7FF; --paper: #FFFFFF; --line: #D8E9F8; --line-2: #B8DDFF; --muted: #7B8493; --shadow-sm: 0 2px 6px rgba(0,66,127,.04), 0 4px 14px rgba(0,66,127,.04); --shadow-md: 0 8px 24px rgba(0,66,127,.07), 0 4px 10px rgba(0,66,127,.04); --shadow-lg: 0 28px 70px rgba(0,66,127,.12), 0 10px 24px rgba(0,66,127,.06); --radius-sm: 14px; --radius: 22px; --radius-lg: 32px; --radius-pill: 999px; }
* { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; }
body { font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; font-feature-settings: "palt"; letter-spacing: 0.01em; }
button { font-family: inherit; }
.serif { font-family: "Noto Sans JP", sans-serif; font-feature-settings: "palt"; letter-spacing: 0.02em; }
.num { font-family: "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lp { background: var(--paper); color: var(--ink); }
.paper-grain { position: relative; }
.paper-grain::before { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); mix-blend-mode: multiply; opacity: 0.55; }
.container { max-width: 1120px; margin: 0px auto; padding: 0px 32px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 11px; letter-spacing: 0.18em; font-weight: 800; color: var(--brand-deep); background: var(--secondary-light); border-radius: 999px; text-transform: uppercase; font-family: "Noto Sans JP", sans-serif; }
.sec-index { font-family: "Noto Sans JP", sans-serif; font-size: 13px; letter-spacing: 0.3em; color: var(--color-primary); display: flex; align-items: center; gap: 14px; }
.sec-index::before { content: ""; display: inline-block; width: 1px; height: 24px; background: currentcolor; }
.rule { height: 1px; background: var(--color-border); border: 0px; }
.rule-dotted { height: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: initial; border-top: 1px dotted var(--color-border); }
h1, h2, h3, h4 { color: var(--black); margin: 0px; letter-spacing: 0.01em; line-height: 1.4; }
p { line-height: 1.9; letter-spacing: 0.01em; }
@keyframes lpFadeUp { 
  0% { opacity: 0; transform: translateY(28px); }
100% { opacity: 1; transform: translateY(0px); }
}
@keyframes lpFadeIn { 
  0% { opacity: 0; }
100% { opacity: 1; }
@keyframes lpScaleIn { 
  0% { opacity: 0; transform: scale(0.94); }
100% { opacity: 1; transform: scale(1); }
@keyframes lpSlideRight { 
  0% { opacity: 0; transform: translate(-24px); }
100% { opacity: 1; transform: translate(0px); }
@keyframes lpFloat { 
  0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
@keyframes lpPulse { 
  0%, 100% { box-shadow: rgba(0, 91, 172, 0.35) 0px 0px; }
50% { box-shadow: rgba(0, 91, 172, 0) 0px 0px 0px 12px; }
@keyframes lpShimmer { 
  0% { background-position: -200% 0px; }
100% { background-position: 200% 0px; }
@keyframes lpDrawLine { 
  0% { stroke-dashoffset: 100%; }
100% { stroke-dashoffset: 0; }
@keyframes lpProgressBar { 
  0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
@keyframes lpRotate { 
  0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
@keyframes lpDotBlink { 
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
40% { opacity: 1; transform: scale(1); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.is-in { opacity: 1; transform: translateY(0px); }
.reveal-fade { opacity: 0; transition: opacity 1s; }
.reveal-fade.is-in { opacity: 1; }
.reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity 0.9s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal-scale.is-in { opacity: 1; transform: scale(1); }
.reveal-right { opacity: 0; transform: translate(-28px); transition: opacity 0.9s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal-right.is-in { opacity: 1; transform: translate(0px); }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal-stagger.is-in > * { opacity: 1; transform: translateY(0px); }
.reveal-stagger.is-in > :nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-in > :nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.is-in > :nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.is-in > :nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.is-in > :nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.is-in > :nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger.is-in > :nth-child(7) { transition-delay: 0.47s; }
.reveal-stagger.is-in > :nth-child(8) { transition-delay: 0.54s; }
.reveal-stagger.is-in > :nth-child(9) { transition-delay: 0.61s; }
.lift { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s, border-color 0.25s; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.float { animation: 5s ease-in-out 0s infinite normal none running lpFloat; }
.float-slow { animation: 7s ease-in-out 0s infinite normal none running lpFloat; }
.shimmer-text { background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-size: 200% 100%; background-clip: text; color: transparent; animation: 3.5s linear 0s infinite normal none running lpShimmer; }
.pulse-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 8px; vertical-align: middle; animation: 2s ease-out 0s infinite normal none running lpPulse; }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; top: 0px; left: -120%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transition: left 0.8s; }
.btn-shine:hover::after { left: 140%; }
.nav-link { position: relative; transition: color 0.2s; }
.nav-link::after { content: ""; position: absolute; left: 0px; bottom: -6px; width: 100%; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: right center; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nav-link:hover { color: var(--brand-deep); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left center; }
.bar-grow { transform-origin: left center; animation: 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0s 1 normal both running lpProgressBar; }
.num-rise { display: inline-block; animation: 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0s 1 normal both running lpFadeUp; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.45; pointer-events: none; z-index: 0; animation: 9s ease-in-out 0s infinite normal none running lpFloat; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-fade, .reveal-scale, .reveal-right, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.float, .float-slow, .pulse-dot::before, .shimmer-text, .hero-blob, .bar-grow, .num-rise { animation: auto ease 0s 1 normal none running none !important; }
@media (max-width: 1024px) {
  [style*="1.05fr 0.95fr"] { grid-template-columns: 1fr !important; gap: 40px !important; }
@media (max-width: 900px) {
  .container { padding: 0px 24px !important; }
.v2-nav { display: none !important; }
.v2-burger { display: block !important; }
[style*="1.05fr 0.95fr"] { grid-template-columns: 1fr !important; gap: 40px !important; }
[style*="1.8fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
[style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
@media (max-width: 640px) {
  .container { padding: 0px 18px !important; }
section { padding-top: 64px !important; padding-bottom: 64px !important; }
[style*="1.05fr 0.95fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="repeat(2, 1fr)"], [style*="repeat(3, 1fr)"], [style*="1.8fr 1fr 1fr"], [style*="1.2fr 1fr"], [style*="220px 1fr"] { grid-template-columns: 1fr !important; gap: 28px !important; }
.hero-title { white-space: normal !important; font-size: 30px !important; line-height: 1.45 !important; }
.cmp-scroll { overflow-x: auto !important; }
.cmp-scroll > div:first-child { min-width: 600px; overflow: visible !important; }
.cmp-cat { width: 56px !important; padding: 8px 4px !important; font-size: 11px !important; position: sticky !important; left: 0px !important; z-index: 3 !important; }
.cmp-sub { box-shadow: rgba(0, 0, 0, 0.18) 6px 0px 8px -6px; width: 78px !important; padding: 8px 5px !important; font-size: 10.5px !important; position: sticky !important; left: 56px !important; z-index: 2 !important; }
.cmp-corner { box-shadow: rgba(0, 0, 0, 0.18) 6px 0px 8px -6px; width: 134px !important; position: sticky !important; left: 0px !important; z-index: 5 !important; }
.shot-stage { min-height: 0px !important; }
.num { font-size: 90% !important; }
.lp-v2 { background: rgb(255, 255, 255); color: var(--ink); }
.lp-v2 h1, .lp-v2 h2, .lp-v2 h3, .lp-v2 h4 { color: var(--black); margin: 0px; }
.lp-v2 p { margin: 0px; }
.lp-v2 a { text-decoration: none; }
.lp-v2 ::selection { background: var(--main); color: var(--black); }