:root { --black:#1a1a1a; --k10:#e4e4e4; --k20:#cccccc; --k40:#999999; --k60:#666666; --k80:#333333; --white:#ffffff; --r:4px; --ok:#2d7a4f; --ok-light:#e8f5ee; --amber:#c47c1a; --amber-light:#fef3e2; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Noto Sans JP','Yu Gothic','YuGothic',sans-serif; background:var(--white); color:var(--black); min-height:100vh; }

/* Header */
.header { border-bottom:1px solid var(--k10); padding:16px 24px; display:flex; align-items:center; gap:14px; background:var(--white); position:sticky; top:0; z-index:100; }
.logo-link { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo-icon { width:32px; height:32px; object-fit:contain; }
.logo-text { font-size:0.95rem; font-weight:700; letter-spacing:0.04em; }
.logo-sub { font-size:0.65rem; color:var(--k60); margin-top:2px; letter-spacing:0.08em; }
.header-cta { margin-left:auto; display:inline-flex; align-items:center; padding:9px 18px; background:var(--black); color:var(--white); border:none; border-radius:var(--r); font-family:inherit; font-size:0.8rem; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; }
.header-cta:hover { background:var(--k80); }

main { max-width:680px; margin:0 auto; padding:48px 20px 80px; }

/* Section common */
.section { margin-bottom:48px; }
.section-label { font-size:0.62rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--k60); margin-bottom:14px; }
hr.sep { border:none; border-top:1px solid var(--k10); margin:48px 0; }

/* Hero */
.hero { text-align:center; padding:48px 8px 48px; }
.hero-title { font-size:1.7rem; font-weight:900; line-height:1.5; margin-bottom:16px; letter-spacing:-0.01em; }
.hero-sub { font-size:0.9rem; color:var(--k60); line-height:1.95; margin-bottom:32px; }
.hero-cta { display:inline-flex; align-items:center; justify-content:center; padding:15px 40px; background:var(--black); color:var(--white); border:none; border-radius:var(--r); font-family:inherit; font-size:0.95rem; font-weight:700; text-decoration:none; letter-spacing:0.03em; }
.hero-cta:hover { background:var(--k80); }

/* Features */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:0; }
.feature { border:1px solid var(--k10); border-radius:var(--r); padding:20px 16px; }
.feature-icon { font-size:1.3rem; margin-bottom:10px; }
.feature-label { font-size:0.85rem; font-weight:700; margin-bottom:6px; }
.feature-text { font-size:0.78rem; color:var(--k60); line-height:1.75; }

/* Use cases */
.usecases { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.usecase { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--k10); border-radius:var(--r); padding:16px; }
.usecase-icon { font-size:1.2rem; flex-shrink:0; }
.usecase-title { font-size:0.85rem; font-weight:700; margin-bottom:4px; }
.usecase-text { font-size:0.78rem; color:var(--k60); line-height:1.7; }

/* How-to */
.howto { border:1px solid var(--k10); border-radius:var(--r); overflow:hidden; }
.step { display:flex; align-items:flex-start; gap:16px; padding:20px 20px; border-bottom:1px solid var(--k10); }
.step:last-child { border-bottom:none; }
.step-num { width:26px; height:26px; background:var(--black); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; flex-shrink:0; margin-top:1px; }
.step-body { flex:1; }
.step-title { font-size:0.92rem; font-weight:700; margin-bottom:4px; }
.step-sub { font-size:0.8rem; color:var(--k60); line-height:1.7; }

/* Strengths */
.strengths { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.strength { border:1px solid var(--k10); border-radius:var(--r); padding:18px 16px; }
.strength-title { font-size:0.85rem; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.strength-badge { font-size:0.62rem; background:var(--amber-light); color:var(--amber); font-weight:700; padding:2px 7px; border-radius:99px; letter-spacing:0.04em; }
.strength-text { font-size:0.78rem; color:var(--k60); line-height:1.75; }

/* FAQ */
.faq { border:1px solid var(--k10); border-radius:var(--r); overflow:hidden; }
.faq-item { border-bottom:1px solid var(--k10); }
.faq-item:last-child { border-bottom:none; }
.faq-q { padding:16px 18px; font-size:0.85rem; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after { content:'＋'; font-size:0.85rem; color:var(--k40); flex-shrink:0; }
details[open] > .faq-q::after { content:'－'; }
.faq-a { padding:0 18px 16px; font-size:0.83rem; color:var(--k60); line-height:1.9; }

/* Final CTA */
.final-cta { background:var(--black); border-radius:var(--r); padding:40px 24px; text-align:center; }
.final-cta-title { font-size:1.2rem; font-weight:900; color:var(--white); margin-bottom:10px; }
.final-cta-sub { font-size:0.82rem; color:rgba(255,255,255,0.6); margin-bottom:24px; line-height:1.8; }
.final-cta-btn { display:inline-flex; align-items:center; justify-content:center; padding:14px 40px; background:var(--white); color:var(--black); border:none; border-radius:var(--r); font-family:inherit; font-size:0.92rem; font-weight:700; text-decoration:none; }
.final-cta-btn:hover { background:var(--k10); }

/* Footer */
.page-footer { text-align:center; margin-top:40px; padding-top:24px; border-top:1px solid var(--k10); }
.footer-link { font-size:0.72rem; color:var(--k40); text-decoration:none; }
.footer-link:hover { color:var(--k60); text-decoration:underline; }

@media (max-width:600px) {
  main { padding:28px 16px 60px; }
  .header { padding:10px 14px; }
  .hero { padding:32px 4px 36px; }
  .hero-title { font-size:1.3rem; }
  .features { grid-template-columns:1fr; gap:8px; }
  .usecases { grid-template-columns:1fr; gap:8px; }
  .strengths { grid-template-columns:1fr; gap:8px; }
}