<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="住宅の居室の採光計算をWEB上で手軽にできるツールです。電卓のように使えるので素早く検討できます。">
  <meta name="keywords" content="採光, 住宅, 居室, 計算, ツール">
  <title>採光計算アプリ - なまあずソリューション</title>

  <!-- CSS Styling -->
  <style>
    /* General Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    /* Body Styling */
    body {
      background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    /* Container */
    .container {
      background-color: #ffffff;
      width: 90%;
      max-width: 700px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px 30px;
      margin: 20px;
    }

    /* Title */
    h2 {
      font-size: 1.8em;
      text-align: center;
      color: #4a90e2;
      margin-bottom: 1em;
    }

    /* Forms and Inputs */
    form label {
      display: block;
      font-weight: bold;
      margin-top: 15px;
      color: #333;
    }

    input[type="text"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-top: 5px;
    }

    input[type="text"]:focus {
      border-color: #4a90e2;
      outline: none;
    }

    /* Buttons */
    button {
      background-color: #4a90e2;
      color: #ffffff;
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 10px;
      display: inline-block;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #357abd;
    }

    /* Table Styling */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      color: #333;
    }

    table, th, td {
      border: 1px solid #ddd;
    }

    th, td {
      padding: 10px;
      text-align: center;
    }

    th {
      background-color: #f7f7f7;
      color: #333;
      font-weight: bold;
    }

    /* Footer */
    footer {
      text-align: center;
      margin-top: 20px;
      font-size: 0.9em;
      color: #777;
    }
  </style>

  <!-- JavaScript Functions -->
  <script>
    function kankeicalc() {
      const Q1 = parseFloat(document.form1.Q1.value);
      const Q2 = parseFloat(document.form1.Q2.value);
      const K = Q1 / Q2;
      document.form1.kanr.value = K;
      document.form1.kanr2.value = K;
    }

    function hoseicalc() {
      let T1, T2;
      if (document.form1.S1[0].checked) {
        T1 = 6;
        T2 = 1.4;
      } else if (document.form1.S1[1].checked) {
        T1 = 8;
        T2 = 1;
      } else {
        T1 = 10;
        T2 = 1;
      }
      const kanr2 = parseFloat(document.form1.kanr2.value);
      const T3 = (kanr2 * T1) - T2;
      const T4 = T3 >= 3 ? 3 : T3;

      document.form1.n1.value = T1;
      document.form1.n2.value = T2;
      document.form1.n3.value = T4;
    }

    function tategucalc() {
      const tk1 = parseFloat(document.form1.tk1.value);
      const tk2 = parseFloat(document.form1.tk2.value);
      const TK = tk1 * tk2;
      document.form1.w1.value = TK;
    }

    function kekka() {
      const n3 = parseFloat(document.form1.n3.value);
      const w1 = parseFloat(document.form1.w1.value);
      const heya = parseFloat(document.form1.heya.value);

      const W = n3 * w1;
      document.form1.xc.value = W;

      const TW = heya / 7;
      document.form1.hituyou.value = TW;

      // 判定結果を表示
      const hantei = document.getElementById("判定結果");
      if (!isNaN(W) && !isNaN(TW)) {
        hantei.value = W >= TW ? "OK" : "NG";
      } else {
        hantei.value = "";
      }
    }
  </script>
</head>
<body>
  <div class="container">
    <header>
      <h2>採光計算アプリ</h2>
      <p>手軽に電卓の感覚で使える採光計算検討ツールです。住居系・工業系・商業系の用途地域で利用できます。１では採光関係比率を手軽に計算できます。１と２で採光補正係数が出るので非常に簡単です。３はサッシのサイズを入力して適否を判定します。</p>
    	<p>検討用ツールです。端数処理はしていません。きちんと使い方を知った上で利用ください。結果の保証はしません。作成：なまあずソリューション</p><br><br>
    </header>
    <hr>
    
    <main>
      <form name="form1">
        <!-- Section 1: Calculate Lighting Ratio -->
        <h3>1: 採光関係比率を求める</h3>

        <p>関係式</p>
        <ul>
          <li>採光上有効な開口部面積＝開口部面積×採光補正係数</li>
          <li>採光補正係数＝（採光関係比率×Ａ）－Ｂ</li>
          <li>採光関係比率＝水平距離（ｄ）／垂直距離（ｈ）</li>
        </ul>

        <label>水平距離（m）＜隣地境界線と庇先端の距離＞</label>
        <input type="text" name="Q1">
        <label>垂直距離（m）＜ひさしの先端から下方の開口部の中心までの垂直距離＞</label>
        <input type="text" name="Q2">
        <button type="button" onclick="kankeicalc()">計算</button>
        <label>求める採光関係比率（入力不要）</label>
        <input type="text" name="kanr" readonly>
        <hr>

        <!-- Section 2: Calculate Lighting Correction Factor -->
        <h3>2: 採光補正係数を求める</h3>
        <label>採光関係比率（入力不要）</label>
        <input type="text" name="kanr2" readonly>

        <table>
          <thead>
            <tr><th>チェック</th><th>地域・区域</th><th>A</th><th>B</th><th>C</th></tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="radio" name="S1" checked></td>
              <td>住居系</td><td>6</td><td>1.4</td><td>7</td>
            </tr>
            <tr>
              <td><input type="radio" name="S1"></td>
              <td>工業系</td><td>8</td><td>1</td><td>5</td>
            </tr>
            <tr>
              <td><input type="radio" name="S1"></td>
              <td>商業系</td><td>10</td><td>1</td><td>4</td>
            </tr>
          </tbody>
        </table>

        <button type="button" onclick="hoseicalc()">計算</button>
        <label>A</label><input type="text" name="n1" readonly>入力不要
        <label>B</label><input type="text" name="n2" readonly>入力不要
        <label>求める採光補正係数</label><input type="text" name="n3">
        <p>※次の場合は、採光補正係数を補正します。上記を書き換えてください。</p>
        <ul>
          <li>開口部が道に面する場合は、算定値が1未満でも1に補正します。</li>
          <li>開口部が道に面しない場合、算定値が1未満でも水平距離が上表のCメートル以上ならば1に補正します。</li>
          <li>開口部が道に面しない場合、算定値が負数となっても、水平距離がCメートル未満ならば0に補正します。</li>
        </ul>
        <hr>

        <!-- Section 3: Calculate Effective Opening Area -->
        <h3>3: 採光上有効な開口部面積</h3>
        <label>建具高さ(m)</label><input type="text" name="tk1">
        <label>幅(m)</label><input type="text" name="tk2">
        <button type="button" onclick="tategucalc()">計算</button>
        <label>開口部面積（㎡）</label><input type="text" name="w1" readonly>（入力不要）

        <label>部屋面積（㎡）</label><input type="text" name="heya">
        <button type="button" onclick="kekka()">最終計算</button>
        <label>求める採光上有効な開口部面積（㎡）</label><input type="text" name="xc" readonly>
        <label>必要開口部面積（1/7しています）（㎡）</label><input type="text" name="hituyou" readonly>

        <!-- 判定結果 -->
        <label>判定</label><input type="text" id="判定結果" readonly>

        <p>※上記で、採光上有効な開口部面積が必要開口部面積を上回ればOKです。</p>
        <hr>
        <p>2012年4月13日、O氏の指摘で開口部面積の出し方を建具高さ×幅に変更。</p>
        <p>2016年7月16日、初心者向けにレイアウト変更。</p>
        <p>2024年11月11日、デザイン変更。</p>
      </form>
    </main>
  </div>

  <footer>
  </footer>
</body>
</html>