.landing-page-container{--landing-bg-primary:var(--color-bg-secondary,#fafafa);--landing-bg-card:var(--color-card-bg,#fff);--landing-bg-section:var(--color-bg-tertiary,#f7fafc);--landing-text-primary:var(--color-text-primary,#1a202c);--landing-text-secondary:var(--color-text-secondary,#4a5568);--landing-text-muted:var(--color-text-tertiary,#718096);--landing-border:var(--color-border,#e2e8f0);--landing-border-hover:var(--color-border-hover,#cbd5e0);--landing-header-bg:#fafafaf2;--landing-header-border:var(--landing-border);--landing-note-back-bg:#f7fafc;--landing-note-middle-bg:#edf2f7;--landing-note-main-bg:#fff;--landing-note-border:var(--landing-border);--landing-note-middle-border:#cbd5e0;--landing-card-shadow:0 4px 6px #0000000d;--landing-card-shadow-hover:0 8px 16px #0000001a;--landing-note-shadow:0 8px 16px #0003;--landing-action-gradient:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--landing-action-text:#fff}
.landing-header .button-base{border-radius:8px;min-height:2rem;padding:.5rem 1.5rem;font-size:.875rem;font-weight:600}.landing-header .button-base:hover:not(:disabled){transform:translateY(-1px)}.landing-page-container{min-height:var(--viewport-height,100dvh)!important;background:var(--landing-bg-primary)!important;color:var(--landing-text-primary)!important;box-sizing:border-box!important;width:100%!important;margin:0!important;padding:1rem 1.5rem!important;font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Meiryo,sans-serif!important;display:block!important;position:relative!important;overflow-x:hidden!important}.landing-header{background:var(--landing-header-bg)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;border-bottom:1px solid var(--landing-border)!important;z-index:var(--z-menu)!important;box-sizing:border-box!important;width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;display:block!important;position:sticky!important;top:0!important}.sticky-header{transition:all .3s}.header-navigation{max-width:1200px;margin:0 auto;padding:.75rem 2rem}.landing-main-content{box-sizing:border-box!important;width:100%!important;max-width:1200px!important;margin:0 auto!important;padding:2rem 1.5rem!important;display:block!important}.hero-section{text-align:center!important;margin-bottom:3rem!important;padding:2rem 0!important;display:block!important}.hero-grid{grid-template-columns:1.2fr .8fr!important;align-items:center!important;gap:3rem!important;max-width:1100px!important;margin:0 auto!important;display:grid!important}.hero-content{text-align:left!important;padding-right:1rem!important;display:block!important}.hero-content-text{transition:all .6s}.hero-buttons{gap:1rem;margin-top:2rem;transition:all .6s;display:flex}
.note-animation-container,aside.note-animation-container,.hero-grid .note-animation-container,.hero-grid aside.note-animation-container{box-sizing:border-box;width:364px;max-width:calc(100% - 2rem);height:364px;max-height:calc(100vh - 4rem);margin:0 auto;transition:all .6s;position:relative;overflow:hidden}.note-animation-container .note-back-page,aside.note-animation-container .note-back-page,.note-animation-container .chakra-box.note-back-page,aside.note-animation-container .chakra-box.note-back-page{background:var(--landing-note-back-bg);border:1px solid var(--landing-note-border);visibility:visible;opacity:1;border-radius:8px;width:312px;height:312px;display:block;position:absolute;top:26px;left:26px;transform:rotate(-5deg);box-shadow:0 4px 6px #0000001a}.note-animation-container .note-middle-page,aside.note-animation-container .note-middle-page,.note-animation-container .chakra-box.note-middle-page,aside.note-animation-container .chakra-box.note-middle-page{background:var(--landing-note-middle-bg);border:1px solid var(--landing-note-middle-border);visibility:visible;opacity:1;border-radius:8px;width:312px;height:312px;display:block;position:absolute;top:13px;left:13px;transform:rotate(-2deg);box-shadow:0 6px 12px #00000026}.note-main-page{background:var(--landing-note-main-bg);border:1px solid var(--landing-note-border);width:312px;height:312px;box-shadow:var(--landing-note-shadow);box-sizing:border-box;color:var(--landing-text-primary);border-radius:8px;flex-direction:column;padding:1.5rem;display:flex;position:absolute;top:0;left:0}.note-animation-container .note-main-page,aside.note-animation-container .note-main-page,.note-animation-container div.note-main-page,aside.note-animation-container div.note-main-page,.note-animation-container .chakra-card.note-main-page,aside.note-animation-container .chakra-card.note-main-page{box-sizing:border-box;width:312px;min-width:312px;max-width:312px;height:312px;min-height:312px;max-height:312px}.note-animation-container .note-main-page .chakra-card__body{box-sizing:border-box;padding:1.5rem}.note-animation-container .note-main-page .chakra-text:not(.note-content-text):not(.note-date-text){font-size:1rem;font-weight:600}.note-animation-container .note-main-page .note-date-text,.note-animation-container .note-main-page time.chakra-text{font-size:10px;line-height:1.2}.note-animation-container .note-main-page .chakra-badge{padding:.25rem .625rem;font-size:11px;font-weight:700;box-shadow:0 2px 4px #00000026}@media (min-width:768px){.note-animation-container .note-back-page,aside.note-animation-container .note-back-page,.note-animation-container .chakra-box.note-back-page,aside.note-animation-container .chakra-box.note-back-page,.note-animation-container .note-middle-page,aside.note-animation-container .note-middle-page,.note-animation-container .chakra-box.note-middle-page,aside.note-animation-container .chakra-box.note-middle-page{visibility:visible;opacity:1;display:block;position:absolute}.note-animation-container,aside.note-animation-container{width:364px;height:364px;position:relative}}@media (max-width:768px){.note-animation-container,aside.note-animation-container{max-width:calc(100% - 2rem)}}@media (max-width:480px){.note-animation-container,aside.note-animation-container{max-width:calc(100% - 1rem)}}
.comparison-section{margin:3rem 0;padding:2rem 0}.comparison-header{text-align:center;margin-bottom:2rem;transition:all .6s}.comparison-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:1100px;margin:0 auto;display:grid}.comparison-card{background:var(--landing-bg-card);border:1px solid var(--landing-border);color:var(--landing-text-primary);transform:translateY(0)}.comparison-card:hover{box-shadow:var(--landing-card-shadow-hover);transform:translateY(-4px)}.features-section{margin:3rem 0;padding:2rem 0}.features-header{text-align:center;margin-bottom:2rem}.features-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;max-width:1100px;margin:0 auto;display:grid}.action-section{background:var(--landing-action-gradient);color:var(--landing-action-text);text-align:center;justify-content:center;margin:3rem 0;padding:2.5rem 0;display:flex}.action-container{flex-direction:column;justify-content:center;align-items:center;max-width:960px;margin:0 auto;padding:0 2rem;display:flex}.action-header{margin-bottom:1rem}.action-header h2{margin-bottom:.75rem;font-weight:600}.action-header p{opacity:.95;margin-bottom:.25rem;font-size:1rem;line-height:1.5}.action-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.5rem;display:flex}.developer-section{margin:3rem 0;padding:2rem 0}.developer-header{text-align:center;margin-bottom:2rem}.developer-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:1100px;margin:0 auto;display:grid}.developer-card{background:var(--landing-bg-card);border:1px solid var(--landing-border);box-shadow:var(--landing-card-shadow);color:var(--landing-text-primary);border-radius:12px;padding:2rem;transition:all .3s}.developer-card:hover{box-shadow:var(--landing-card-shadow-hover);transform:translateY(-4px)}.card-hover{transition:all .3s}.card-hover:hover{box-shadow:var(--landing-card-shadow-hover);transform:translateY(-2px)}
.animate-fade-in-up{animation:.6s forwards fadeInUp}.animate-slide-in-left{animation:.6s forwards slideInLeft}.animate-scale-in{animation:.6s forwards scaleIn}.animate-note-float{animation:3s ease-in-out infinite noteFloat}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes noteFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media (max-width:768px){.landing-page-container{padding:.5rem 1rem!important}.header-navigation{padding:.5rem 1rem}.hero-grid{text-align:center;grid-template-columns:1fr!important;gap:2rem!important}.hero-content{text-align:center!important;padding-right:0!important}.hero-buttons{flex-direction:column;justify-content:center;align-items:center}.comparison-grid,.features-grid,.developer-grid{grid-template-columns:1fr;gap:1.5rem}.cta-buttons{flex-direction:column;align-items:center}}@media (max-width:480px){.landing-page-container{padding:.25rem .5rem!important}.header-navigation{padding:.25rem .5rem}.cta-section{padding:1.5rem 0}.cta-header h2{font-size:1.25rem}.cta-header p{font-size:.85rem}}.opacity-0{opacity:0}.translate-x-\[-50px\]{transform:translate(-50px)}.scale-75{transform:scale(.75)}
[data-theme=dark] .landing-page-container,.chakra-ui-dark .landing-page-container{--landing-bg-primary:#0a0a0a;--landing-bg-card:#1a1a1a;--landing-bg-section:#1a1a1a;--landing-text-primary:#f7fafc;--landing-text-secondary:#e2e8f0;--landing-text-muted:#a0aec0;--landing-border:#2d3748;--landing-border-hover:#4a5568;--landing-header-bg:#0a0a0af2;--landing-note-back-bg:#1a1a1a;--landing-note-middle-bg:#2d3748;--landing-note-main-bg:#1a1a1a;--landing-note-border:#2d3748;--landing-note-middle-border:#4a5568;--landing-card-shadow:0 4px 6px #0000004d;--landing-card-shadow-hover:0 8px 16px #0006;--landing-note-shadow:0 8px 16px #0006}@media (prefers-color-scheme:dark){.landing-page-container:not([data-theme=light]){--landing-bg-primary:#0a0a0a;--landing-bg-card:#1a1a1a;--landing-bg-section:#1a1a1a;--landing-text-primary:#f7fafc;--landing-text-secondary:#e2e8f0;--landing-text-muted:#a0aec0;--landing-border:#2d3748;--landing-border-hover:#4a5568;--landing-header-bg:#0a0a0af2;--landing-note-back-bg:#1a1a1a;--landing-note-middle-bg:#2d3748;--landing-note-main-bg:#1a1a1a;--landing-note-border:#2d3748;--landing-note-middle-border:#4a5568;--landing-card-shadow:0 4px 6px #0000004d;--landing-card-shadow-hover:0 8px 16px #0006;--landing-note-shadow:0 8px 16px #0006}}