<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>体重からカフェイン・アルコール摂取量を計算</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
    }
    h1 {
      font-size: 24px;
      margin-bottom: 10px;
    }
    input {
      font-size: 20px;
      padding: 5px;
      width: 100px;
    }
    .results {
      margin-top: 20px;
      font-size: 18px;
      background: white;
      padding: 15px;
      border-radius: 10px;
    }
    .results h2 {
      font-size: 22px;
      margin-top: 20px;
    }
    .results p {
      margin: 5px 0;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>体重を入力してください（kg）</h1>
  <input type="number" id="weightInput" placeholder="例: 60" oninput="calculate()" />

  <div class="results" id="result">
    <!-- 結果がここに表示されます -->
  </div>

  <script>
    function calculate() {
      const weight = parseFloat(document.getElementById("weightInput").value);
      if (isNaN(weight)) {
        document.getElementById("result").innerHTML = '';
        return;
      }

      const caffeineAmount = (weight * 0.003).toFixed(3);
      const monster = (weight * (1/48)).toFixed(3);
      const zone = (weight * (1/50)).toFixed(3);
      const redbull = (weight * (3/80)).toFixed(3);
      const coffee = (weight * 0.005).toFixed(3);

      const alcTotal = (weight * 0.001).toFixed(3);
      const alcohols = [
        { percent: 1, value: (weight * 0.120).toFixed(3) },
        { percent: 2, value: (weight * 0.060).toFixed(3) },
        { percent: 3, value: (weight * 0.040).toFixed(3) },
        { percent: 4, value: (weight * 0.030).toFixed(3) },
        { percent: 5, value: (weight * 0.024).toFixed(3) },
        { percent: 6, value: (weight * 0.020).toFixed(3) },
        { percent: 7, value: (weight * 0.017).toFixed(3) },
        { percent: 8, value: (weight * 0.015).toFixed(3) },
        { percent: 9, value: (weight * 0.013).toFixed(3) },
        { percent: 10, value: (weight * 0.012).toFixed(3) },
      ];

      let html = `
        <h2>カフェイン適正量</h2>
        <p>適正カフェイン量: <strong>${caffeineAmount} g</strong></p>
        <p>モンエナ（355ml/142mg）: <strong>${monster} 本</strong></p>
        <p>ZONE（400ml/150mg）: <strong>${zone} 本</strong></p>
        <p>RedBull（250ml/80mg）: <strong>${redbull} 本</strong></p>
        <p>コーヒー（0.6g/L）: <strong>${coffee} L</strong></p>

        <h2>血中アルコール濃度 0.1% に到達するアルコール量</h2>
        <p>総アルコール量: <strong>${alcTotal} L</strong></p>
      `;

      for (let alc of alcohols) {
        html += `<p>${alc.percent}% の酒: <strong>${alc.value} L</strong></p>`;
      }

      document.getElementById("result").innerHTML = html;
    }
  </script>
</body>
</html>