/* style.css */

:root{
    /* ダークグリーン基調 */
    --brand-primary:#20b871; /* 深い緑 */
    --brand-primary-2:#1c9f77; /* さらに濃い緑 */
    --brand-accent:#198754;   /* 補助の緑（Bootstrap success 相当） */
    --brand-light:#e6fff4;    /* 薄い緑系の下地 */
    --bs-primary: var(--brand-primary);
  }
  html,body{ scroll-behavior:smooth; }
  body{
    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color:#212529;
  }
  /* ヘッダー（固定） */
  .navbar{
    background: linear-gradient(90deg, var(--brand-primary-2), var(--brand-primary));
  }
  .navbar .nav-link{ color:#e8f5ee; }
  .navbar .nav-link:hover, .navbar .nav-link:focus{ color:#ffffff; }
  .navbar-brand{ color:#ffffff; font-weight:700; letter-spacing:.02em; }
  .navbar-brand:hover{ color:#ffffff; }

  /* ヒーロー */
  .hero{
    position:relative;
    background:
      radial-gradient(1200px 600px at 80% -200px, rgba(255,255,255,.12), transparent 60%),
      radial-gradient(900px 600px at -100px 300px, rgba(255,255,255,.10), transparent 55%),
      linear-gradient(180deg, var(--brand-primary), var(--brand-primary-2));
    color:#fff;
    padding: 96px 0 88px;
  }
  .hero .badge{ background-color: rgba(255,255,255,.15); }
  .hero h1{ font-weight:800; line-height:1.2; }
  .hero p.lead{ font-size:1.15rem; opacity:.95; }
  .hero { background-image: url(../images/main.jpeg); background-size: cover; background-position: center; }

  /* セクション共通 */
  section{ padding:72px 0; }
  .section-title{
    font-weight:800; color:var(--brand-primary);
    margin-bottom: 1rem;
  }
  .section-subtitle{ color:#495057; margin-bottom:2rem; }

  /* カード */
  .feature-card{
    height:100%; border:0; border-radius:1rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
  }
  .feature-card .icon{
    width:3rem; height:3rem; border-radius:.75rem;
    display:flex; align-items:center; justify-content:center;
    background: var(--brand-light);
    color: var(--brand-primary);
    font-size:1.4rem;
  }

  /* 実績タイムライン風 */
  .timeline{
    border-left: 3px solid var(--brand-accent);
    padding-left:1rem;
  }
  .timeline .item{ margin-bottom:1rem; }
  .timeline .item .when{ font-size:.9rem; color:#6c757d; }

  /* 比較表 */
  .table-compare th{ white-space:nowrap; }

  /* フッター */
  footer{
    background: linear-gradient(180deg, var(--brand-primary-2), #06231b);
    color:#dfeee7;
  }
  footer a{ color:#ffffff; text-decoration:underline; }
  .foot-note{ color:#b7d1c6; font-size:.9rem; }

  /* スマホ微調整 */
  @media (max-width: 575.98px){
    .hero{ padding:80px 0 64px; }
    .hero h1{ font-size:1.8rem; }
  }