:root{
    --bg:#fff;
    --text:#111;
    --muted:#666;
    --line:rgba(0,0,0,.1);
  
    --green:#2f7d32;
    --brown:#7a5a2b;
  
    --radius:18px;
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --max:1120px;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:system-ui,-apple-system,"Noto Sans JP","Yu Gothic",sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.7;
  }
  
  /* Eco background */
  .eco-bg{
    background:
      radial-gradient(900px 420px at 15% -10%, rgba(47,125,50,.10), transparent 60%),
      radial-gradient(780px 360px at 85% 10%, rgba(122,90,43,.10), transparent 60%),
      repeating-linear-gradient(135deg,
        rgba(47,125,50,.06) 0 6px,
        rgba(122,90,43,.04) 6px 12px,
        transparent 12px 26px
      );
  }
  
  .container{
    max-width:var(--max);
    margin:0 auto;
    padding:0 20px;
  }
  
  /* Header */
  header{
    position:sticky;
    top:0;
    background:rgba(255,255,255,.85);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
  }
  .logo{
    width:42px;height:42px;
    border-radius:12px;
    border:1px solid rgba(47,125,50,.2);
    display:grid;place-items:center;
  }
  .brand-text strong{font-size:14px}
  .brand-text span{font-size:12px;color:var(--muted)}
  
  .navlink{
    font-size:13px;
    padding:8px 10px;
    border-radius:999px;
    text-decoration:none;
  }
  .navlink:hover{background:rgba(47,125,50,.08)}
  
  /* Hero */
  .hero{padding:56px 0 28px}
  .hero-grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:24px;
  }
  .hero-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow);
  }
  .kicker{
    font-size:12px;
    display:inline-flex;
    gap:8px;
    padding:6px 10px;
    border:1px solid rgba(47,125,50,.2);
    border-radius:999px;
  }
  .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--brown))}
  
  h1{font-size:clamp(24px,3vw,36px);margin:12px 0}
  .lead{color:#444;font-size:15px}
  
  .btn{
    display:inline-block;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    text-decoration:none;
    font-size:13px;
    font-weight:600;
  }
  .btn.primary{
    background:linear-gradient(135deg, rgba(47,125,50,.12), rgba(122,90,43,.08));
  }
  
  /* Cards */
  .grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:14px;
  }
  .card{
    grid-column:span 6;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
  }
  .card .tag{
    font-size:11px;
    border:1px solid rgba(122,90,43,.2);
    padding:4px 8px;
    border-radius:999px;
  }
  .card h3{font-size:14px;margin:8px 0}
  .card ul{padding-left:18px;font-size:13px}
  
  /* Table */
  .panel{
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:#fff;
  }
  .table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }
  .table th,.table td{
    padding:14px 16px;
    border-bottom:1px solid var(--line);
  }
  .table th{
    width:180px;
    background:rgba(47,125,50,.05);
  }
  
  /* Footer */
  footer{
    margin-top:40px;
    padding:26px 0;
    border-top:1px solid var(--line);
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .foot-left{font-size:12px;color:#555}
  .badge{
    font-size:11px;
    border:1px solid var(--line);
    padding:6px 10px;
    border-radius:999px;
  }
  
  /* Responsive */
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr}
    .card{grid-column:span 12}
    nav{display:none}
  }