// story.jsx
function Story() {
  return (
    <section className="story" id="story">
      <div className="story-halftone" />
      <div className="container" style={{ position: 'relative' }}>
        <div className="story-grid">
          <div>
            <span className="section-label" style={{ background: 'rgba(255,255,255,0.1)', borderColor: '#fff', color: '#fff' }}>◤ OUR STORY</span>
            <h2 className="section-title">遊ぶたびに、<br />地球がちょっと、<br />やさしくなる。</h2>
            <div className="story-quote">1人1人のチカラが合わさり<br />大きな力になる。<br />WWFへの寄付をしています。
</div>
            <p className="story-body">生態系ウォーズは、絶滅危惧種の研究者・元環境省職員・カードゲームデザイナーが3年かけて作った、生き物のためのTCGです。<br /><br />登場する212種すべてに、学術監修がついています。売上の一部は、国内外の保護団体に寄付。そしてプレイヤーは遊ぶだけで、現実の保護活動の一員になります。</p>
          </div>
          <div className="story-stat-grid">
            <div className="story-stat"><div className="story-stat-num">212<small>種</small></div><div className="story-stat-label">収録された<br />絶滅危惧種・固有種</div></div>
            <div className="story-stat"><div className="story-stat-num">15<small>%</small></div><div className="story-stat-label">売上のうち<br />保護団体への寄付割合</div></div>
            <div className="story-stat"><div className="story-stat-num">8<small>名</small></div><div className="story-stat-label">学術監修員<br />（大学研究者・獣医）</div></div>
            <div className="story-stat"><div className="story-stat-num">5<small>団体</small></div><div className="story-stat-label">連携する<br />自然保護団体</div></div>
          </div>
        </div>
      </div>
    </section>);

}
Object.assign(window, { Story });