// ── Price（料金の目安） ────────────────────────────
function Price() {
  return (
    <section id="price" className="section" style={{ background: 'var(--color-bg-subtle)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 44px' }}>
          <span className="eyebrow">Price</span>
          <h2 className="section-title">料金の目安</h2>
          <p className="section-lead">
            医療保険が適用される場合、自己負担は原則1〜3割です。
            施術する部位数やお住まいまでの距離によって変わります。
          </p>
        </div>

        <div className="price-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, maxWidth: 820, margin: '0 auto' }}>
          <div className="card" style={{ padding: '32px 30px', textAlign: 'center' }}>
            <div style={{ fontSize: 14, color: 'var(--color-text-secondary)', fontWeight: 600 }}>1割負担の方の目安</div>
            <div style={{ fontFamily: 'var(--font-en)', fontWeight: 700, fontSize: 40, color: 'var(--color-primary-600)', margin: '8px 0' }}>
              約300〜500<span style={{ fontSize: 18 }}>円 / 回</span>
            </div>
            <div style={{ fontSize: 13.5, color: 'var(--color-text-secondary)' }}>※ 部位数・距離により変動します</div>
          </div>
          <div className="card" style={{ padding: '32px 30px', textAlign: 'center' }}>
            <div style={{ fontSize: 14, color: 'var(--color-text-secondary)', fontWeight: 600 }}>ご負担に含まれるもの</div>
            <ul style={{ textAlign: 'left', margin: '14px 0 0', paddingLeft: 20, fontSize: 15 }}>
              <li>施術料（マッサージ・変形徒手矯正術など）</li>
              <li>訪問にかかる費用（往療料）</li>
            </ul>
            <div style={{ fontSize: 13.5, color: 'var(--color-text-secondary)', marginTop: 12 }}>別途の追加料金は原則ありません</div>
          </div>
        </div>

        <p style={{ marginTop: 26, textAlign: 'center', fontSize: 13.5, color: 'var(--color-text-secondary)' }}>
          ※ 上記はデモ用の一般的な目安です。実際の金額は保険の種類・施術内容により異なります。正確な金額は無料相談でご案内します。
        </p>
      </div>
      <style>{`@media (max-width: 700px){ .price-grid{ grid-template-columns:1fr !important; } }`}</style>
    </section>
  );
}