<!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>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">


  <style>
    :root {
      --primary-color: #3b82f6; /* Blue 500 */
      --primary-hover-color: #2563eb; /* Blue 600 */
      --secondary-color: #f3f4f6; /* Gray 100 */
      --border-color: #d1d5db; /* Gray 300 */
      --text-color: #1f2937; /* Gray 800 */
      --label-color: #374151; /* Gray 700 */
      --bg-color: #f9fafb; /* Gray 50 */
      --card-bg-color: #ffffff;
      --success-color: #16a34a; /* Green 600 */
      --error-color: #dc2626; /* Red 600 */
      --font-family: 'Noto Sans JP', sans-serif;
    }

    /* General Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Body Styling */
    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: var(--font-family);
      line-height: 1.6;
      display: flex;
      justify-content: center;
      padding: 20px;
    }

    /* Container */
    .container {
      background-color: transparent;
      width: 100%;
      max-width: 800px;
    }

    /* Header */
    header {
      text-align: center;
      margin-bottom: 2rem;
    }
    header h2 {
      font-size: 2.5em;
      font-weight: 700;
      color: var(--primary-color);
      margin-bottom: 0.5rem;
    }
    header p {
      font-size: 1rem;
      max-width: 650px;
      margin: 0.5rem auto;
      color: var(--label-color);
    }
    header .source-link a {
        color: var(--primary-color);
        text-decoration: none;
    }
    header .source-link a:hover {
        text-decoration: underline;
    }

    /* Card Layout */
    .card {
      background-color: var(--card-bg-color);
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      padding: 1.5rem 2rem;
      margin-bottom: 1.5rem;
      border: 1px solid var(--border-color);
    }
    .card h3 {
      font-size: 1.5em;
      font-weight: 500;
      color: var(--text-color);
      margin-bottom: 1rem;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 0.5rem;
    }

    /* Form Elements */
    label {
      display: block;
      font-weight: 500;
      margin-top: 1rem;
      margin-bottom: 0.25rem;
      color: var(--label-color);
      font-size: 0.9em;
    }
    input[type="text"] {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-top: 5px;
      font-size: 1em;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    input[type="text"]:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
      outline: none;
    }
    input[readonly] {
      background-color: var(--secondary-color);
      cursor: not-allowed;
    }

    /* Buttons */
    button {
      background-color: var(--primary-color);
      color: #ffffff;
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 1.5rem;
      font-size: 1em;
      font-weight: 500;
      display: inline-block;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: var(--primary-hover-color);
    }
    .final-calc-btn {
        width: 100%;
        padding: 15px;
        font-size: 1.2em;
    }
    .print-btn {
        width: 100%;
        background-color: #6b7280; /* Gray 500 */
        margin-top: 0.75rem;
    }
    .print-btn:hover {
        background-color: #4b5563; /* Gray 600 */
    }


    /* Table Styling */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1.5rem;
      color: var(--text-color);
    }
    table th, table td {
      border: 1px solid var(--border-color);
      padding: 12px;
      text-align: center;
      vertical-align: middle;
    }
    table th {
      background-color: var(--secondary-color);
      font-weight: 500;
    }
    table input[type="radio"] {
        transform: scale(1.2);
        accent-color: var(--primary-color);
    }

    /* Utility classes */
    .note {
        font-size: 0.85em;
        color: var(--label-color);
        background-color: var(--secondary-color);
        padding: 0.75rem;
        border-radius: 8px;
        margin-top: 1rem;
    }
    .note ul {
        padding-left: 1.2rem;
    }
    .result-field {
        font-weight: 700;
        font-size: 1.5em !important;
        text-align: center;
    }
    #判定結果.ok {
        color: var(--success-color);
    }
    #判定結果.ng {
        color: var(--error-color);
    }

    /* Footer */
    footer {
      text-align: center;
      margin-top: 2rem;
      font-size: 0.9em;
      color: #6b7280; /* Gray 500 */
    }
    footer .update-history p {
        font-size: 0.8rem;
        margin: 0.2rem 0;
    }

  </style>

  <script>
    function kankeicalc() {
      const Q1 = parseFloat(document.form1.Q1.value);
      const Q2 = parseFloat(document.form1.Q2.value);
      if (isNaN(Q1) || isNaN(Q2) || Q2 === 0) {
        alert("有効な数値を入力してください。");
        return;
      }
      const K = Q1 / Q2;
      document.form1.kanr.value = K.toFixed(3);
      document.form1.kanr2.value = K.toFixed(3);
    }

    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);
      if (isNaN(kanr2)) {
          alert("先に採光関係比率を計算してください。");
          return;
      }
      const T3 = (kanr2 * T1) - T2;
      const T4 = T3 >= 3 ? 3 : (T3 < 0 ? 0 : T3); // 負数は0にする

      document.form1.n1.value = T1;
      document.form1.n2.value = T2;
      document.form1.n3.value = T4.toFixed(3);
    }

    function tategucalc() {
      const tk1 = parseFloat(document.form1.tk1.value);
      const tk2 = parseFloat(document.form1.tk2.value);
      if (isNaN(tk1) || isNaN(tk2)) {
        alert("建具の高さと幅を有効な数値で入力してください。");
        return;
      }
      const TK = tk1 * tk2;
      document.form1.w1.value = TK.toFixed(3);
    }

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

      if (isNaN(n3) || isNaN(w1) || isNaN(heya)) {
        alert("採光補正係数、開口部面積、部屋面積を正しく計算・入力してください。");
        return;
      }

      const W = n3 * w1;
      document.form1.xc.value = W.toFixed(3);

      const TW = heya / 10;
      document.form1.hituyou.value = TW.toFixed(3);

      const hantei = document.getElementById("判定結果");
      hantei.classList.remove("ok", "ng");
      if (W >= TW) {
        hantei.value = "OK";
        hantei.classList.add("ok");
      } else {
        hantei.value = "NG";
        hantei.classList.add("ng");
      }
    }

    // --- NEW: Print Report Function ---
    function printReport() {
        const finalResult = document.getElementById('判定結果').value;
        if (!finalResult) {
            alert('先に「3. 最終計算して判定」ボタンを押し、計算を完了させてください。');
            return;
        }

        const q1 = document.form1.Q1.value || '未入力';
        const q2 = document.form1.Q2.value || '未入力';
        const tk1 = document.form1.tk1.value || '未入力';
        const tk2 = document.form1.tk2.value || '未入力';
        const heya = document.form1.heya.value || '未入力';
        const kanr = document.form1.kanr.value;
        const n3 = document.form1.n3.value;
        const xc = document.form1.xc.value;
        const hituyou = document.form1.hituyou.value;
        const hantei = finalResult;

        let zoneText = '未選択';
        const zones = document.form1.S1;
        for (let i = 0; i < zones.length; i++) {
            if (zones[i].checked) {
                zoneText = zones[i].parentElement.parentElement.cells[1].innerText;
                break;
            }
        }

        const reportHTML = `
            <!DOCTYPE html>
            <html lang="ja">
            <head>
                <meta charset="UTF-8">
                <title>採光計算書</title>
                <style>
                    body { font-family: "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif; color: #333; }
                    .report-container { width: 90%; max-width: 800px; margin: auto; }
                    h1 { text-align: center; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 40px; font-size: 24px;}
                    .grid { margin-bottom: 30px; }
                    .grid-header { font-size: 18px; font-weight: bold; border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 15px; }
                    .grid-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dotted #ccc; }
                    .label { font-weight: normal; }
                    .value { font-weight: bold; }
                    .final-result { font-size: 24px; font-weight: bold; text-align: center; margin-top: 40px; padding: 15px; border: 2px solid #000; }
                    .final-result.ok { color: #008000; }
                    .final-result.ng { color: #d90000; }
                </style>
            </head>
            <body>
                <div class="report-container">
                    <h1>採光計算書</h1>
                    
                    <div class="grid">
                        <div class="grid-header">入力条件</div>
                        <div class="grid-row"><div class="label">水平距離 (d)</div><div class="value">${q1} m</div></div>
                        <div class="grid-row"><div class="label">垂直距離 (h)</div><div class="value">${q2} m</div></div>
                        <div class="grid-row"><div class="label">用途地域</div><div class="value">${zoneText}</div></div>
                        <div class="grid-row"><div class="label">建具高さ</div><div class="value">${tk1} m</div></div>
                        <div class="grid-row"><div class="label">建具幅</div><div class="value">${tk2} m</div></div>
                        <div class="grid-row"><div class="label">部屋の床面積</div><div class="value">${heya} ㎡</div></div>
                    </div>

                    <div class="grid">
                        <div class="grid-header">計算結果</div>
                        <div class="grid-row"><div class="label">採光関係比率 (d/h)</div><div class="value">${kanr}</div></div>
                        <div class="grid-row"><div class="label">採光補正係数</div><div class="value">${n3}</div></div>
                        <div class="grid-row"><div class="label">採光上有効な開口部面積</div><div class="value">${xc} ㎡</div></div>
                        <div class="grid-row"><div class="label">必要開口部面積 (床面積の1/10)</div><div class="value">${hituyou} ㎡</div></div>
                    </div>
                    
                    <div class="final-result ${hantei.toLowerCase()}">
                        判定: ${hantei}
                    </div>
                </div>
            </body>
            </html>
        `;
        
        const printWindow = window.open('', '_blank');
        printWindow.document.write(reportHTML);
        printWindow.document.close();
        printWindow.focus();
        setTimeout(() => {
            printWindow.print();
            printWindow.close();
        }, 250);
    }
  </script>
</head>
<body>
  <div class="container">
    <header>
      <p class="source-link"><a href="https://amzn.to/3DVSVNy" target="_blank" rel="noopener noreferrer">PR:リアルイラストでスラスラわかる建築基準法（2025年大改正対応版）</a></p>
      <h2>採光計算アプリ</h2>
<a href="https://namazu-honpo.com/">提供：株式会社なまあず本舗</A>
      <p>手軽に使える採光計算ツールです。住居系・工業系・商業系の用途地域で利用できます。<br>2023年4月1日改正で、照明設備の設置等があれば必要採光は床面積の1/10で良くなったため、1/10で計算します。</p>
      <p class="note" style="text-align:left; font-size:0.9em;">本ツールは検討用です。端数処理はしていません。自己責任でご利用ください。</p>
    </header>
    <main>
      <form name="form1" onsubmit="return false;">
        <section class="card">
          <h3>STEP 1: 採光関係比率の計算</h3>

          <p>隣地境界線や庇の先端からの水平・垂直距離を入力して「採光関係比率」を求めます。</p>
          <div class="note">
            <ul>
              <li>採光関係比率＝水平距離（d）／垂直距離（h）</li>
            </ul>
          </div>
          <label for="Q1">水平距離（m）＜隣地境界線と庇先端の距離＞</label>
          <input type="text" name="Q1" id="Q1" inputmode="decimal" placeholder="例: 2.5">
          <label for="Q2">垂直距離（m）＜ひさしの先端から下方の開口部の中心までの垂直距離＞</label>
          <input type="text" name="Q2" id="Q2" inputmode="decimal" placeholder="例: 3.0">
          <button type="button" onclick="kankeicalc()">1. 比率を計算</button>
          <label for="kanr">採光関係比率（計算結果）</label>
          <input type="text" name="kanr" id="kanr" readonly>
        </section>

        <section class="card">
            <h3>STEP 2: 採光補正係数の計算</h3>
            <p>STEP 1で計算した比率と、建物の用途地域から「採光補正係数」を求めます。</p>
            <label for="kanr2">採光関係比率（STEP 1 の結果）</label>
            <input type="text" name="kanr2" id="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()">2. 補正係数を計算</button>
            
            <label for="n3">採光補正係数（計算結果）</label>
            <input type="text" name="n3" id="n3">
            
            <div class="note">
                <strong>※補正に関する注意:</strong><br>
                計算結果が以下の条件に当てはまる場合は、上記の「採光補正係数」の値を手で修正してください。
                <ul>
                    <li>開口部が道に面する場合: 算定値が1未満でも1に補正。</li>
                    <li>開口部が道に面しない場合: 算定値が1未満でも、水平距離が上表のCメートル以上なら1に補正。</li>
                    <li>開口部が道に面しない場合: 算定値が負数でも、水平距離がCメートル未満なら0に補正 (自動計算は0で止まります)。</li>
                </ul>
            </div>
            <input type="hidden" name="n1"><input type="hidden" name="n2">
        </section>

        <section class="card">
            <h3>STEP 3: 最終判定</h3>
            <p>窓（建具）のサイズと部屋の面積を入力し、採光が基準を満たしているか判定します。</p>
            <label for="tk1">建具高さ(m)</label><input type="text" name="tk1" id="tk1" inputmode="decimal" placeholder="例: 2.0">
            <label for="tk2">建具幅(m)</label><input type="text" name="tk2" id="tk2" inputmode="decimal" placeholder="例: 1.6">
            <button type="button" onclick="tategucalc()">開口部面積を計算</button>
            <label for="w1">開口部面積（㎡）</label><input type="text" name="w1" id="w1" readonly>

            <label for="heya">部屋の床面積（㎡）</label><input type="text" name="heya" id="heya" inputmode="decimal" placeholder="例: 13.24">
            <button type="button" onclick="kekka()" class="final-calc-btn">3. 最終計算して判定</button>
            
            <label for="xc">採光上有効な開口部面積（㎡）</label><input type="text" name="xc" id="xc" readonly>
            <label for="hituyou">必要開口部面積（床面積の1/10）（㎡）</label><input type="text" name="hituyou" id="hituyou" readonly>

            <label for="判定結果">判定結果</label><input type="text" id="判定結果" class="result-field" readonly>
            
            <button type="button" onclick="printReport()" class="print-btn">帳票を印刷</button>
        </section>
      </form>
    </main>
    
    <footer>

        <div class="update-history">            
            <p>2025年8月14日: デザイン変更・印刷機能搭載</p>
            <p>2024年12月11日: 必要開口部面積を1/7から1/10の照明がある場合の数値に変更</p>
            <p>2024年11月11日: デザイン変更。注意書き掲載</p>
            <p>2016年7月16日: 初心者向けにレイアウト変更</p>
            <p>2012年4月13日: O氏の指摘で開口部面積の出し方を建具高さ×幅に変更</p>
            <p>作成：なまあずソリューション</p>
<a href="https://namazu-honpo.com/">提供：株式会社なまあず本舗</A>
        </div>
    </footer>
  </div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-gw-3+1f-3d+2z"
     data-ad-client="ca-pub-7855061578893179"
     data-ad-slot="8574377639"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LLZX3KXMVF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-LLZX3KXMVF');
</script>
</body>
</html>