body {background:#f6faf3;line-height:1.7;margin:0;}
.container{max-width:1150px;margin:auto;padding:1.8rem 1rem;}

/*━━ 黄緑テーマ ━━*/
:root{
 --main:#7BC043;/*黄緑*/
 --deep:#5DA22E; 
 --sub:#EDF8E3;
 --line:#CFE9B3;
}

/* パンくず */
.bread{font-size:.8rem;margin-bottom:1rem;}
.bread a{color:#444;text-decoration:none;}

/* HERO */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4rem;background:var(--sub);border-radius:15px;padding:1.8rem;border:1px solid var(--line);} 
.hero-img img{width:100%;border-radius:10px;border:1px solid #d6eec6;}
.label{display:inline-block;background:var(--main);color:#fff;padding:.25rem .7rem;border-radius:99px;font-size:.8rem;margin-bottom:.6rem;}
.hero h1{font-size:1.9rem;font-weight:700;margin:.3rem 0;}
.hero ul{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;}
.hero li{list-style:none;background:#fff;border:1px solid var(--line);padding:.25rem .6rem;border-radius:99px;font-size:.8rem;}

/* セクション */
.sec{margin-top:2rem;}
.sec h2{border-left:5px solid var(--main);padding-left:.6rem;font-size:1.1rem;margin-bottom:.5rem;}

/* 特長3分割 */
.feature{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;}
.feature .box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.9rem;}
.feature h3{margin:.2rem 0;font-size:.95rem;color:var(--deep);}  

/* 用途 */
.scene{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;}
.scene div{background:#fff;border:1px dashed var(--deep);padding:.6rem;border-radius:6px;}

/* CTA */
.cta{background:var(--main);color:#fff;margin-top:2rem;padding:1.2rem;border-radius:10px;font-size:.95rem;}
.cta b{font-size:1.1rem;}
@media(max-width:768px){
  .hero{
    grid-template-columns:1fr;
    padding:1.2rem;
  }
  .hero h1{font-size:1.5rem;}
  .feature{grid-template-columns:1fr;}
  .scene{grid-template-columns:repeat(2,1fr);}
  .cta{
    font-size:.9rem;
    text-align:center;
  }
}
/* その他の使い方・表用 */
.extra{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:.8rem;
  margin-top:.8rem;
}
.extra-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:.9rem;
  font-size:.9rem;
}
.extra-box h3{
  margin:.2rem 0 .3rem;
  font-size:.95rem;
  color:var(--deep);
}
.extra-box figure{
  margin:.5rem 0 0;
}
.extra-box img{
  width:100%;
  border-radius:8px;
  border:1px solid #e2e2e2;
}
.extra-box figcaption{
  font-size:.75rem;
  color:#777;
  margin-top:.2rem;
}

.table-wrap{
  overflow-x:auto;
  margin-top:.6rem;
}
.table{
  width:100%;
  border-collapse:collapse;
  font-size:.85rem;
  background:#fff;
}
.table th,
.table td{
  border:1px solid #ddd;
  padding:.35rem .4rem;
  text-align:center;
  white-space:nowrap;
}
.table th{
  background:#f7fbf2;
}
.note{
  font-size:.78rem;
  color:#777;
  margin-top:.4rem;
}

/* モバイル時のレイアウト調整 */
@media(max-width:768px){
  .extra{
    grid-template-columns:1fr;
  }
}
.spec-list{
  list-style:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:.9rem;
  margin-bottom:.9rem;
  font-size:.9rem;
  box-shadow:0 2px 5px rgba(0,0,0,0.06);
}
.spec-list li{
  margin:.18rem 0;
}

.auto-style1 {
	font-size: 22px;
	color: #FF0000;
}
.auto-style2 {
	font-size: 15px;
}