<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>壁量電卓Ver.2.5【2階対応】広告あり</title>
    <style>
      /* グローバル設定 */
      body {
        font-family: 'Roboto', sans-serif;
        background: #f0f2f5;
        color: #333;
        margin: 0;
        padding: 20px;
      }
      h1 {
        font-size: 1.8em;
        margin-bottom: 20px;
        text-align: center;
        color: #4a90e2;
      }
      /* アプリ全体のコンテナ */
      .app-container {
        max-width: 1200px;
        margin: 0 auto;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        padding: 20px;
      }
      /* ファイル操作ボタン */
      #fileControls {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-bottom: 10px;
      }
      #fileControls button {
        background: #4a90e2;
        border: none;
        color: #fff;
        padding: 10px 20px;
        font-size: 1em;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.3s ease;
      }
      #fileControls button:hover {
        background: #357abd;
      }
      /* フロア選択ラジオボタン */
      #floorSelector {
        text-align: center;
        margin-bottom: 20px;
      }
      #floorSelector label {
        font-weight: bold;
        margin: 0 10px;
      }
      /* 入力エリア */
      #inputs {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
      }
      .floor-inputs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .floor-inputs label {
        font-weight: bold;
      }
      .floor-inputs input {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
        transition: border 0.3s ease;
      }
      .floor-inputs input:focus {
        border-color: #4a90e2;
      }
      /* 壁量表示エリア */
      #wallTotals {
        text-align: center;
        margin-bottom: 20px;
      }
      #wallTotals p {
        margin: 5px 0;
      }
      /* キャンバス表示エリア */
      .canvas-container {
        width: 900px;
        height: 900px;
        overflow: auto;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
      }
      /* 線分データ表示テキストエリア */
      #lineData {
        margin-left: 20px;
        width: 300px;
        height: 900px;
        font-family: monospace;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        resize: none;
      }
      /* カスタムコンテキストメニュー */
      .context-menu {
        position: absolute;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      .context-menu-item {
        padding: 8px 15px;
        cursor: pointer;
        transition: background 0.2s ease;
      }
      .context-menu-item:hover {
        background: #f0f0f0;
      }
      /* フッター */
      #totals {
        text-align: center;
        margin-top: 20px;
        font-size: 0.9em;
        color: #777;
      }
      a {
        color: #4a90e2;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      /* 追加入力エリア */
      #additionalInputs {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fafafa;
      }
      #additionalInputs h2 {
        font-size: 1.2em;
        margin-bottom: 10px;
        text-align: center;
      }
      #additionalInputs div {
        margin-bottom: 8px;
        text-align: center;
      }
      #additionalInputs label {
        margin-right: 5px;
        font-weight: bold;
      }
      #additionalInputs input {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

.main-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.main-content {
  flex: 1;
}

#adSidebar {
  width: 300px;
  min-height: 600px;
  background-color: #fdfdfd;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

    </style>
  </head>
  <body>
  <div class="main-layout">
    <div class="main-content">

    <div class="app-container">
      <h1>壁量電卓Ver.2.5【2階対応】広告あり</h1>

      <!-- ファイル操作ボタン -->
      <div id="fileControls">
<button onclick="window.open('https://namazu-honpo.com/?page_id=5242', '_blank')">解説・最新版</button>
        <button id="loadButton">読込</button>
        <button id="saveButton">保存</button>
        <button onclick="window.open('https://namazu-honpo.com/apripre/futanviewer130.html')">柱負担ビューア</button>
        <button onclick="window.open('https://namazu-honpo.com/apripre/hekidenprePRN5.html')">印刷</button>
        <!-- ファイル選択用（非表示） -->
        <input type="file" id="fileInput" accept="application/json" style="display:none;" />
      </div>

      <!-- フロア選択ラジオボタン -->
      <div id="floorSelector">
        <label><input type="radio" name="floor" value="1" checked> １階</label>
        <label><input type="radio" name="floor" value="2"> ２階</label>
      </div>

      <!-- 入力エリア（各階ごと） -->
      <div id="inputs">
        <div class="floor-inputs" id="floor1Inputs">
          <label for="floorArea1">１階 床面積(㎡):</label>
          <input type="number" id="floorArea1" value="0" step="any" />
          <label for="coefficient1">１階 係数:</label>
          <input type="number" id="coefficient1" value="0" step="any" />
          <label for="requiredWall1">１階 必要壁量(m):</label>
          <input type="text" id="requiredWall1" readonly />
        </div>
        <div class="floor-inputs" id="floor2Inputs">
          <label for="floorArea2">２階 床面積(㎡):</label>
          <input type="number" id="floorArea2" value="0" step="any" />
          <label for="coefficient2">２階 係数:</label>
          <input type="number" id="coefficient2" value="0" step="any" />
          <label for="requiredWall2">２階 必要壁量(m):</label>
          <input type="text" id="requiredWall2" readonly />
        </div>
      </div>

      <!-- 壁量表示エリア（各階別） -->
      <div id="wallTotals">
        <p>１階 X方向壁量(m): <span id="horizontalTotal1">0.000</span>　１階 Y方向壁量(m): <span id="verticalTotal1">0.000</span></p>
        <p>２階 X方向壁量(m): <span id="horizontalTotal2">0.000</span>　２階 Y方向壁量(m): <span id="verticalTotal2">0.000</span></p>
      </div>

      <div style="display: flex; justify-content: center;">
        <div class="canvas-container">
          <canvas id="gridCanvas"></canvas>
        </div>
        <textarea id="lineData"></textarea>
      </div>
      <div id="totals">
        開発：株式会社なまあず本舗　Catfishなおうち
      </div>

      <!-- 追加情報入力エリア -->
      <div id="additionalInputs">
        <h2>追加情報</h2>
        <div>
          <label for="creationDate">作成日付:</label>
          <input type="text" id="creationDate" placeholder="YYYY-MM-DD" />
        </div>
        <div>
          <label for="buildingName">建物名称:</label>
          <input type="text" id="buildingName" />
        </div>
        <div>
          <label for="floorHeight1">1階階高:</label>
          <input type="number" id="floorHeight1" step="any" />
        </div>
        <div>
          <label for="floorHeight2">2階階高:</label>
          <input type="number" id="floorHeight2" step="any" />
        </div>
        <div>
          <label for="maxHeight">最高高さ:</label>
          <input type="number" id="maxHeight" step="any" />
        </div>
        <div>
          <label for="maxEaveHeight">最高軒高:</label>
          <input type="number" id="maxEaveHeight" step="any" />
        </div>
        <div>
          <label for="visibleAreaX1">1階Ｘ方向（→）見付面積:</label>
          <input type="number" id="visibleAreaX1" step="any" />
        </div>
        <div>
          <label for="visibleAreaX2">2階Ｘ方向（→）見付面積:</label>
          <input type="number" id="visibleAreaX2" step="any" />
        </div>
        <div>
          <label for="visibleAreaY1">1階Ｙ方向（↑）見付面積:</label>
          <input type="number" id="visibleAreaY1" step="any" />
        </div>
        <div>
          <label for="visibleAreaY2">2階Ｙ方向（↑）見付面積:</label>
          <input type="number" id="visibleAreaY2" step="any" />
        </div>
      </div>

    </div>
  </div>

   </div>
    <div id="adSidebar">
      <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 async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
              crossorigin="anonymous"></script>
      <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>


      <script>
        /**********************************
         * グローバル定数・変数の定義
         **********************************/
        const canvas = document.getElementById("gridCanvas");
        const ctx = canvas.getContext("2d");
        const marginLeft = 50;
        const marginRight = 20;
        const marginTop = 20;
        const marginBottom = 50;
        const baseSpacing = 0.91;
        const scalingFactor = 100; // 例：0.91×100 = 91px

        // 現在の編集中フロア（1または2）
        let currentFloor = 1;

        // 各階のデータを格納するオブジェクト
        // ※軸データは両階で共通とする
        let floorData = {
          1: {
            lines: [],
            floorAreaRectangles: [],
            floorArea: 0,
            coefficient: 0,
            xAxisData: null,
            yAxisData: null
          },
          2: {
            lines: [],
            floorAreaRectangles: [],
            floorArea: 0,
            coefficient: 0,
            xAxisData: null,
            yAxisData: null
          }
        };

        // ★ 両階で共有する軸データ生成関数（初期状態）
        function initAxisData() {
          let xAxisData = [];
          let yAxisData = [];
          for (let i = 0; i < 30; i++) {
            const xObj = { name: "X" + (i + 1), spacing: (i < 29 ? baseSpacing : null), addCount: 0 };
            const yObj = { name: "Y" + (i + 1), spacing: (i < 29 ? baseSpacing : null), addCount: 0 };
            xAxisData.push(xObj);
            yAxisData.push(yObj);
          }
          return { xAxisData, yAxisData };
        }

        // 初期軸データ生成し、両階に同じ参照を割り当て
        const axisInit = initAxisData();
        floorData[1].xAxisData = axisInit.xAxisData;
        floorData[1].yAxisData = axisInit.yAxisData;
        floorData[2].xAxisData = axisInit.xAxisData;
        floorData[2].yAxisData = axisInit.yAxisData;

        // ★ 軸データを両階で同期させる関数
        function syncAxisData() {
          // 現在の階の軸データをグローバルとして両階に設定
          const globalXAxis = getCurrentData().xAxisData;
          const globalYAxis = getCurrentData().yAxisData;
          floorData[1].xAxisData = globalXAxis;
          floorData[2].xAxisData = globalXAxis;
          floorData[1].yAxisData = globalYAxis;
          floorData[2].yAxisData = globalYAxis;
        }

        // 現在の階のデータを返す
        function getCurrentData() {
          return floorData[currentFloor];
        }

        // 数値を小数点以下3桁で表示
        function formatSpacing(value) {
          const truncated = Math.floor(value * 1000) / 1000;
          return truncated.toFixed(3);
        }

        // 指定した軸データの間隔合計（インデックス a～b-1）
        function sumAxisSpacing(axisData, a, b) {
          let sum = 0;
          for (let i = a; i < b; i++) {
            sum += axisData[i].spacing;
          }
          return sum;
        }

        // グリッド点のX座標
        function getXPos(index, xAxisData) {
          let pos = marginLeft;
          for (let i = 0; i < index; i++) {
            pos += xAxisData[i].spacing * scalingFactor;
          }
          return pos;
        }

        // グリッド点のY座標（下から上へ）
        function getYPos(index, yAxisData) {
          let pos = canvas.height - marginBottom;
          for (let j = 0; j < index; j++) {
            pos -= yAxisData[j].spacing * scalingFactor;
          }
          return pos;
        }

        /**********************************
         * Undo機能
         **********************************/
        function pushUndoState() {
          const data = getCurrentData();
          const state = {
            lines: JSON.parse(JSON.stringify(data.lines)),
            floorAreaRectangles: JSON.parse(JSON.stringify(data.floorAreaRectangles))
          };
          undoStack.push(state);
        }
        function undoAction() {
          if (undoStack.length > 0) {
            const prevState = undoStack.pop();
            const data = getCurrentData();
            data.lines = prevState.lines;
            data.floorAreaRectangles = prevState.floorAreaRectangles;
            let totalArea = data.floorAreaRectangles.reduce((sum, r) => sum + r.area, 0);
            data.floorArea = totalArea;
            updateInputFields();
            updateTotals();
            updateLineDataDisplay();
            drawGrid();
          } else {
            alert("元に戻す操作はありません");
          }
        }
        let undoStack = [];

        /**********************************
         * キャンバス・グリッド更新・描画
         **********************************/
        function updateCanvasSize() {
          const data = getCurrentData();
          let totalX = marginLeft + marginRight;
          for (let i = 0; i < data.xAxisData.length - 1; i++) {
            totalX += data.xAxisData[i].spacing * scalingFactor;
          }
          let totalY = marginTop + marginBottom;
          for (let j = 0; j < data.yAxisData.length - 1; j++) {
            totalY += data.yAxisData[j].spacing * scalingFactor;
          }
          canvas.width = totalX;
          canvas.height = totalY;
          const container = document.querySelector(".canvas-container");
          container.scrollLeft = 0;
          container.scrollTop = canvas.height - container.clientHeight;
        }

        // 線分・軸・床面積矩形などの情報をテキストエリアに表示
        function updateLineDataDisplay() {
          const data = getCurrentData();
          const textarea = document.getElementById("lineData");
          let text = "【線分データ】\n";
          data.lines.forEach((line, i) => {
            let lengthCalc = 0;
            if (line.orientation === "horizontal") {
              const start = Math.min(line.start.x, line.end.x);
              const end = Math.max(line.start.x, line.end.x);
              lengthCalc = sumAxisSpacing(data.xAxisData, start, end);
              text += `Line ${i + 1}: Start(${line.start.x},${line.start.y}) End(${line.end.x},${line.end.y}) 水平, 長さ: ${lengthCalc.toFixed(3)}, 倍率: ${line.multiplier}\n`;
            } else if (line.orientation === "vertical") {
              const start = Math.min(line.start.y, line.end.y);
              const end = Math.max(line.start.y, line.end.y);
              lengthCalc = sumAxisSpacing(data.yAxisData, start, end);
              text += `Line ${i + 1}: Start(${line.start.x},${line.start.y}) End(${line.end.x},${line.end.y}) 垂直, 長さ: ${lengthCalc.toFixed(3)}, 倍率: ${line.multiplier}\n`;
            }
          });
          text += "\n【X軸データ】\n";
          data.xAxisData.forEach((label, i) => {
            text += label.name;
            if (i < data.xAxisData.length - 1) {
              text += ` (間隔: ${formatSpacing(label.spacing)})`;
            }
            text += "\n";
          });
          text += "\n【Y軸データ】\n";
          data.yAxisData.forEach((label, i) => {
            text += label.name;
            if (i < data.yAxisData.length - 1) {
              text += ` (間隔: ${formatSpacing(label.spacing)})`;
            }
            text += "\n";
          });
          text += "\n【床面積矩形データ】\n";
          data.floorAreaRectangles.forEach((rectObj, i) => {
            text += `Rect ${i + 1}: Start(${rectObj.start.x},${rectObj.start.y}) End(${rectObj.end.x},${rectObj.end.y}) 面積: ${rectObj.area.toFixed(3)}\n`;
          });
          // 追加情報の表示（右側テキストエリア下部へ）
          text += "\n【追加情報】\n";
          text += "作成日付: " + document.getElementById("creationDate").value + "\n";
          text += "建物名称: " + document.getElementById("buildingName").value + "\n";
          text += "1階階高: " + document.getElementById("floorHeight1").value + "\n";
          text += "2階階高: " + document.getElementById("floorHeight2").value + "\n";
          text += "最高高さ: " + document.getElementById("maxHeight").value + "\n";
          text += "最高軒高: " + document.getElementById("maxEaveHeight").value + "\n";
          text += "1階Ｘ方向（→）見付面積: " + document.getElementById("visibleAreaX1").value + "\n";
          text += "2階Ｘ方向（→）見付面積: " + document.getElementById("visibleAreaX2").value + "\n";
          text += "1階Ｙ方向（↑）見付面積: " + document.getElementById("visibleAreaY1").value + "\n";
          text += "2階Ｙ方向（↑）見付面積: " + document.getElementById("visibleAreaY2").value + "\n";
          textarea.value = text;
        }

        // 床面積矩形の面積再計算
        function recalcFloorAreaRectangles() {
          const data = getCurrentData();
          data.floorAreaRectangles.forEach((rect) => {
            const width = sumAxisSpacing(data.xAxisData, rect.start.x, rect.end.x);
            const height = sumAxisSpacing(data.yAxisData, rect.start.y, rect.end.y);
            rect.area = width * height;
          });
        }

        // グリッドおよび各要素（軸、線分、床面積矩形）の描画
        function drawGrid() {
          const data = getCurrentData();
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          // (1) 2階編集中の場合、1階の床面積矩形を背景に薄い灰色で描画
          if (currentFloor === 2) {
            floorData[1].floorAreaRectangles.forEach((rectObj) => {
              const x1 = getXPos(rectObj.start.x, floorData[1].xAxisData);
              let y1 = getYPos(rectObj.end.y, floorData[1].yAxisData);
              const x2 = getXPos(rectObj.end.x, floorData[1].xAxisData);
              let y2 = getYPos(rectObj.start.y, floorData[1].yAxisData);
              if (y2 >= canvas.height) { y2 = canvas.height - 1; }
              ctx.fillStyle = "rgba(200,200,200,0.5)"; // 薄い灰色
              ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
            });
          }
          // (2) グリッド点描画
          for (let i = 0; i < data.xAxisData.length; i++) {
            for (let j = 0; j < data.yAxisData.length; j++) {
              const x = getXPos(i, data.xAxisData);
              const y = getYPos(j, data.yAxisData);
              ctx.beginPath();
              ctx.arc(x, y, 3, 0, 2 * Math.PI);
              ctx.fillStyle = "#000";
              ctx.fill();
            }
          }
          // (3) 線分描画と倍率表示
          multiplierAreas = []; // グローバル配列（後述）をクリア
          data.lines.forEach((line, i) => {
            ctx.beginPath();
            const startX = getXPos(line.start.x, data.xAxisData);
            const startY = getYPos(line.start.y, data.yAxisData);
            const endX = getXPos(line.end.x, data.xAxisData);
            const endY = getYPos(line.end.y, data.yAxisData);
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.strokeStyle = "red";
            ctx.lineWidth = 3;
            ctx.stroke();
            const midX = (startX + endX) / 2;
            const midY = (startY + endY) / 2;
            ctx.font = "14px sans-serif";
            ctx.fillStyle = "blue";
            const text = line.multiplier.toString();
            const metrics = ctx.measureText(text);
            const textWidth = metrics.width;
            const textHeight = 16;
            if (line.orientation === "horizontal") {
              ctx.textAlign = "center";
              ctx.textBaseline = "middle";
              ctx.fillText(text, midX, midY - 10);
              multiplierAreas.push({
                x: midX - textWidth / 2,
                y: midY - 10 - textHeight / 2,
                width: textWidth,
                height: textHeight,
                lineIndex: i
              });
            } else if (line.orientation === "vertical") {
              ctx.textAlign = "left";
              ctx.textBaseline = "middle";
              ctx.fillText(text, midX + 10, midY);
              multiplierAreas.push({
                x: midX + 10,
                y: midY - textHeight / 2,
                width: textWidth,
                height: textHeight,
                lineIndex: i
              });
            }
          });
          // (4) 軸ラベル描画
          xLabelAreas = [];
          yLabelAreas = [];
          ctx.font = "14px sans-serif";
          ctx.fillStyle = "#000";
          // X軸ラベル
          ctx.textAlign = "center";
          ctx.textBaseline = "middle";
          data.xAxisData.forEach((label, i) => {
            const x = getXPos(i, data.xAxisData);
            const y = canvas.height - marginBottom + 15;
            ctx.fillText(label.name, x, y);
            const metrics = ctx.measureText(label.name);
            xLabelAreas.push({
              x: x - metrics.width / 2,
              y: y - 10,
              width: metrics.width,
              height: 20,
              axis: "x",
              index: i
            });
          });
          // Y軸ラベル
          ctx.textAlign = "right";
          data.yAxisData.forEach((label, j) => {
            const x = marginLeft - 10;
            const y = getYPos(j, data.yAxisData);
            ctx.fillText(label.name, x, y);
            const metrics = ctx.measureText(label.name);
            yLabelAreas.push({
              x: x - metrics.width,
              y: y - 10,
              width: metrics.width,
              height: 20,
              axis: "y",
              index: j
            });
          });
          // (5) 軸間隔表示（X・Y共通）
          xSpacingAreas = [];
          ctx.font = "12px sans-serif";
          ctx.textAlign = "center";
          for (let i = 0; i < data.xAxisData.length - 1; i++) {
            const text = formatSpacing(data.xAxisData[i].spacing);
            const x = (getXPos(i, data.xAxisData) + getXPos(i + 1, data.xAxisData)) / 2;
            const y = canvas.height - marginBottom + 25;
            ctx.textBaseline = "top";
            ctx.fillText(text, x, y);
            const metrics = ctx.measureText(text);
            xSpacingAreas.push({
              x: x - metrics.width / 2,
              y: y,
              width: metrics.width,
              height: 16,
              index: i,
              axis: "x"
            });
          }
          ySpacingAreas = [];
          ctx.font = "12px sans-serif";
          ctx.textAlign = "right";
          ctx.textBaseline = "middle";
          for (let j = 0; j < data.yAxisData.length - 1; j++) {
            const text = formatSpacing(data.yAxisData[j].spacing);
            const x = marginLeft - 20;
            const y = (getYPos(j, data.yAxisData) + getYPos(j + 1, data.yAxisData)) / 2;
            ctx.fillText(text, x, y);
            const metrics = ctx.measureText(text);
            ySpacingAreas.push({
              x: x - metrics.width,
              y: y - 8,
              width: metrics.width,
              height: 16,
              index: j,
              axis: "y"
            });
          }
          // (6) 床面積矩形描画（自階は薄緑色）
          drawFloorAreaRectangles();
        }

        // 床面積矩形描画
        function drawFloorAreaRectangles() {
          const data = getCurrentData();
          data.floorAreaRectangles.forEach((rectObj) => {
            const x1 = getXPos(rectObj.start.x, data.xAxisData);
            let y1 = getYPos(rectObj.end.y, data.yAxisData);
            const x2 = getXPos(rectObj.end.x, data.xAxisData);
            let y2 = getYPos(rectObj.start.y, data.yAxisData);
            if (y2 >= canvas.height) y2 = canvas.height - 1;
            ctx.fillStyle = "rgba(144,238,144,0.5)";
            ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
          });
          if (isAreaDragging && areaDragStart && currentAreaDragPoint) {
            const data = getCurrentData();
            const startX = Math.min(areaDragStart.grid.x, currentAreaDragPoint.x);
            const endX = Math.max(areaDragStart.grid.x, currentAreaDragPoint.x);
            const startY = Math.min(areaDragStart.grid.y, currentAreaDragPoint.y);
            const endY = Math.max(areaDragStart.grid.y, currentAreaDragPoint.y);
            const x1 = getXPos(startX, data.xAxisData);
            let y1 = getYPos(endY, data.yAxisData);
            const x2 = getXPos(endX, data.xAxisData);
            let y2 = getYPos(startY, data.yAxisData);
            if (y2 >= canvas.height) y2 = canvas.height - 1;
            ctx.fillStyle = "rgba(144,238,144,0.5)";
            ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
          }
        }

        // 補助領域用のグローバル変数
        let multiplierAreas = [];
        let xLabelAreas = [];
        let yLabelAreas = [];
        let xSpacingAreas = [];
        let ySpacingAreas = [];

        /**********************************
         * 軸ラベル編集・操作用関数
         **********************************/
        function showAxisContextMenu(axis, index, event) {
          if (isZoomed) return;
          const existingMenu = document.getElementById("axisContextMenu");
          if (existingMenu) existingMenu.remove();
          const menu = document.createElement("div");
          menu.id = "axisContextMenu";
          menu.className = "context-menu";
          menu.style.left = event.pageX + "px";
          menu.style.top = event.pageY + "px";
          const items = [
            { label: "名前の変更", action: () => editAxisName(axis, index) },
            { label: "削除", action: () => deleteAxisLabel(axis, index) },
            { label: "軸追加", action: () => addAxisLabel(axis, index) }
          ];
          items.forEach((item) => {
            const div = document.createElement("div");
            div.className = "context-menu-item";
            div.textContent = item.label;
            div.addEventListener("click", () => { item.action(); menu.remove(); });
            menu.appendChild(div);
          });
          document.body.appendChild(menu);
          document.addEventListener("click", function onDocClick() {
            menu.remove();
            document.removeEventListener("click", onDocClick);
          });
        }
        function editAxisName(axis, index) {
          if (isZoomed) return;
          const areas = axis === "x" ? xLabelAreas : yLabelAreas;
          const area = areas.find((a) => a.index === index);
          if (!area) return;
          const input = document.createElement("input");
          input.type = "text";
          const data = getCurrentData();
          input.value = axis === "x" ? data.xAxisData[index].name : data.yAxisData[index].name;
          input.style.position = "absolute";
          const canvasRect = canvas.getBoundingClientRect();
          input.style.left = canvasRect.left + area.x + "px";
          input.style.top = canvasRect.top + area.y + "px";
          input.style.width = area.width + "px";
          input.style.fontSize = "14px";
          document.body.appendChild(input);
          input.focus();
          input.addEventListener("keydown", function (ev) {
            if (ev.key === "Enter") {
              const entered = input.value.trim();
              const data = getCurrentData();
              const axisData = axis === "x" ? data.xAxisData : data.yAxisData;
              const duplicate = axisData.some((label, i) => i !== index && label.name === entered);
              if (duplicate) {
                alert("重複した名前は設定できません。");
                return;
              }
              axisData[index].name = entered;
              syncAxisData(); // ★ 軸データを同期
              updateLineDataDisplay();
              drawGrid();
              document.body.removeChild(input);
            }
          });
          input.addEventListener("blur", function () {
            if (document.body.contains(input)) {
              document.body.removeChild(input);
            }
          });
        }
        function deleteAxisLabel(axis, index) {
          if (isZoomed) return;
          if (index === 0) {
            alert("先頭の軸ラベルは削除できません。");
            return;
          }
          const data = getCurrentData();
          const axisData = axis === "x" ? data.xAxisData : data.yAxisData;
          if (index === axisData.length - 1) {
            alert("末尾の軸ラベルは削除できません。");
            return;
          }
          const usedByWall = data.lines.some((line) => {
            return axis === "x"
              ? (line.start.x === index || line.end.x === index)
              : (line.start.y === index || line.end.y === index);
          });
          const usedByFloor = data.floorAreaRectangles.some((rect) => {
            return axis === "x"
              ? (rect.start.x === index || rect.end.x === index)
              : (rect.start.y === index || rect.end.y === index);
          });
          if (usedByWall || usedByFloor) {
            alert("削除できません。壁や床面積の端部に使用されている軸は削除できません。");
            return;
          }
          if (!confirm("削除しますか？")) return;
          axisData[index - 1].spacing += axisData[index].spacing;
          axisData.splice(index, 1);
          syncAxisData(); // ★ 同期
          data.lines.forEach((line) => {
            if (axis === "x") {
              if (line.start.x > index) line.start.x--;
              if (line.end.x > index) line.end.x--;
            } else {
              if (line.start.y > index) line.start.y--;
              if (line.end.y > index) line.end.y--;
            }
          });
          data.floorAreaRectangles.forEach((rect) => {
            if (axis === "x") {
              if (rect.start.x > index) rect.start.x--;
              if (rect.end.x > index) rect.end.x--;
            } else {
              if (rect.start.y > index) rect.start.y--;
              if (rect.end.y > index) rect.end.y--;
            }
          });
          updateLineDataDisplay();
          updateCanvasSize();
          drawGrid();
        }
        function addAxisLabel(axis, index) {
          if (isZoomed) return;
          const data = getCurrentData();
          const axisData = axis === "x" ? data.xAxisData : data.yAxisData;
          if (index === axisData.length - 1) {
            const inputVal = prompt(axis === "x" ? "右側に追加するための間隔を入力してください:" : "上側に追加するための間隔を入力してください:");
            const d = parseFloat(inputVal);
            if (isNaN(d) || d < 0.001 || d > 2) {
              alert("間隔は0.001～2の間で入力してください。");
              return;
            }
            axisData[index].spacing = d;
            const baseName = axisData[index].name;
            const newSuffix = String.fromCharCode(97 + axisData[index].addCount);
            axisData[index].addCount++;
            const newName = baseName + newSuffix;
            const newLabel = { name: newName, spacing: null, addCount: 0 };
            axisData.push(newLabel);
            updateLineIndicesAfterInsertion(axis, axisData.length - 1);
            updateFloorRectanglesAfterInsertion(axis, axisData.length - 1);
            syncAxisData(); // ★ 同期
            updateLineDataDisplay();
            updateCanvasSize();
            drawGrid();
            return;
          }
          const currentSpacing = axisData[index].spacing;
          const inputVal = prompt(axis === "x" ? "右側何㎜のところに追加しますか？ (0～" + currentSpacing + "の値を入力してください)" : "上側何㎜のところに追加しますか？ (0～" + currentSpacing + "の値を入力してください)");
          const d = parseFloat(inputVal);
          if (isNaN(d) || d < 0.001 || d > 2 || d >= currentSpacing) {
            alert("間隔は0.001～2の間、かつ既存の間隔より小さい値を入力してください。");
            return;
          }
          axisData[index].spacing = d;
          const baseName = axisData[index].name;
          const newSuffix = String.fromCharCode(97 + axisData[index].addCount);
          axisData[index].addCount++;
          const newName = baseName + newSuffix;
          const newLabel = { name: newName, spacing: currentSpacing - d, addCount: 0 };
          axisData.splice(index + 1, 0, newLabel);
          updateLineIndicesAfterInsertion(axis, index + 1);
          updateFloorRectanglesAfterInsertion(axis, index + 1);
          syncAxisData(); // ★ 同期
          updateLineDataDisplay();
          updateCanvasSize();
          drawGrid();
        }
        function updateLineIndicesAfterInsertion(axis, insertedIndex) {
          const data = getCurrentData();
          data.lines.forEach((line) => {
            if (axis === "x") {
              if (line.start.x >= insertedIndex) line.start.x++;
              if (line.end.x >= insertedIndex) line.end.x++;
            } else {
              if (line.start.y >= insertedIndex) line.start.y++;
              if (line.end.y >= insertedIndex) line.end.y++;
            }
          });
        }
        function updateFloorRectanglesAfterInsertion(axis, insertedIndex) {
          const data = getCurrentData();
          data.floorAreaRectangles.forEach((rect) => {
            if (axis === "x") {
              if (rect.start.x >= insertedIndex) rect.start.x++;
              if (rect.end.x >= insertedIndex) rect.end.x++;
            } else {
              if (rect.start.y >= insertedIndex) rect.start.y++;
              if (rect.end.y >= insertedIndex) rect.end.y++;
            }
          });
        }
        // ダブルクリックで軸間隔を変更
        canvas.addEventListener("dblclick", function (e) {
          if (isZoomed) return;
          drawGrid(); 
          const rect = canvas.getBoundingClientRect();
          const clickX = e.pageX - rect.left;
          const clickY = e.pageY - rect.top;
          let area = xSpacingAreas.find(a => clickX >= a.x && clickX <= a.x + a.width &&
                                             clickY >= a.y && clickY <= a.y + a.height);
          if (area) {
            startEditingSpacing("x", area.index, e);
            return;
          }
          area = ySpacingAreas.find(a => clickX >= a.x && clickX <= a.x + a.width &&
                                         clickY >= a.y && clickY <= a.y + a.height);
          if (area) {
            startEditingSpacing("y", area.index, e);
            return;
          }
        });
        function startEditingSpacing(axis, index, e) {
          if (isZoomed) return;
          const areas = axis === "x" ? xSpacingAreas : ySpacingAreas;
          const area = areas.find((a) => a.index === index);
          if (!area) return;
          const input = document.createElement("input");
          input.type = "text";
          const data = getCurrentData();
          input.value = axis === "x" ? data.xAxisData[index].spacing : data.yAxisData[index].spacing;
          input.style.position = "absolute";
          const canvasRect = canvas.getBoundingClientRect();
          input.style.left = canvasRect.left + area.x + "px";
          input.style.top = canvasRect.top + area.y + "px";
          input.style.width = area.width + "px";
          input.style.fontSize = "12px";
          document.body.appendChild(input);
          input.focus();
          input.addEventListener("keydown", function (ev) {
            if (ev.key === "Enter") {
              const newVal = parseFloat(input.value);
              if (isNaN(newVal) || newVal < 0.001 || newVal > 2) {
                alert("間隔は0.001～2の間で入力してください。");
                return;
              }
              if (axis === "x") {
                data.xAxisData[index].spacing = newVal;
              } else {
                data.yAxisData[index].spacing = newVal;
              }
              syncAxisData(); // ★ 同期
              recalcFloorAreaRectangles();
              let totalArea = data.floorAreaRectangles.reduce((sum, r) => sum + r.area, 0);
              data.floorArea = totalArea;
              updateInputFields();
              updateLineDataDisplay();
              updateCanvasSize();
              drawGrid();
              document.body.removeChild(input);
            }
          });
        }
        function startEditingMultiplier(lineIndex, e) {
          if (isZoomed) return;
          const area = multiplierAreas.find((a) => a.lineIndex === lineIndex);
          if (!area) return;
          const input = document.createElement("input");
          const data = getCurrentData();
          input.type = "text";
          input.value = data.lines[lineIndex].multiplier;
          input.style.position = "absolute";
          const canvasRect = canvas.getBoundingClientRect();
          input.style.left = canvasRect.left + area.x + "px";
          input.style.top = canvasRect.top + area.y + "px";
          input.style.width = area.width + "px";
          input.style.fontSize = "14px";
          document.body.appendChild(input);
          input.focus();
          input.addEventListener("keydown", function (ev) {
            if (ev.key === "Enter") {
              pushUndoState();
              const newVal = parseFloat(input.value);
              if (isNaN(newVal) || newVal < 0.01 || newVal > 7) {
                alert("倍率は0.01～7の間で入力してください。");
                return;
              }
              data.lines[lineIndex].multiplier = newVal;
              updateLineDataDisplay();
              drawGrid();
              updateTotals();
              document.body.removeChild(input);
            }
          });
          input.addEventListener("blur", function () {
            if (document.body.contains(input)) {
              document.body.removeChild(input);
            }
          });
        }

        /**********************************
         * イベントリスナー設定（キャンバス、キーボードなど）
         **********************************/
        let isAreaDragging = false;
        let areaDragStart = null;
        let currentAreaDragPoint = null;
        const dragThreshold = 5;
        let measurementStart = null;
        let isMeasuring = false;
        let measurementCurrent = null;
        let isZoomed = false;
        let isMouseOverCanvas = false;

        canvas.addEventListener("contextmenu", function (e) {
          if (isZoomed) return;
          e.preventDefault();
          const rect = canvas.getBoundingClientRect();
          const clickX = e.clientX - rect.left;
          const clickY = e.clientY - rect.top;
          let found = false;
          for (const area of xLabelAreas) {
            if (clickX >= area.x && clickX <= area.x + area.width &&
                clickY >= area.y && clickY <= area.y + area.height) {
              showAxisContextMenu("x", area.index, e);
              found = true;
              break;
            }
          }
          if (!found) {
            for (const area of yLabelAreas) {
              if (clickX >= area.x && clickX <= area.x + area.width &&
                  clickY >= area.y && clickY <= area.y + area.height) {
                showAxisContextMenu("y", area.index, e);
                found = true;
                break;
              }
            }
          }
          if (!found) {
            const data = getCurrentData();
            for (let i = 0; i < data.floorAreaRectangles.length; i++) {
              const rectObj = data.floorAreaRectangles[i];
              const x1 = getXPos(rectObj.start.x, data.xAxisData);
              const y1 = getYPos(rectObj.end.y, data.yAxisData);
              const x2 = getXPos(rectObj.end.x, data.xAxisData);
              const y2 = getYPos(rectObj.start.y, data.yAxisData);
              if (clickX >= x1 && clickX <= x2 && clickY >= y1 && clickY <= y2) {
                showFloorContextMenu(i, e);
                found = true;
                break;
              }
            }
          }
        });

        function getNearestGridPoint(x, y) {
          const data = getCurrentData();
          let closestX = 0, minDist = Infinity;
          data.xAxisData.forEach((_, i) => {
            const pos = getXPos(i, data.xAxisData);
            const d = Math.abs(x - pos);
            if (d < minDist) { minDist = d; closestX = i; }
          });
          let closestY = 0, minDistY = Infinity;
          data.yAxisData.forEach((_, j) => {
            const pos = getYPos(j, data.yAxisData);
            const d = Math.abs(y - pos);
            if (d < minDistY) { minDistY = d; closestY = j; }
          });
          return { x: closestX, y: closestY };
        }

        function isDuplicateLine(p1, p2) {
          const data = getCurrentData();
          return data.lines.some((line) => {
            return ((line.start.x === p1.x && line.start.y === p1.y &&
                     line.end.x === p2.x && line.end.y === p2.y) ||
                    (line.start.x === p2.x && line.start.y === p2.y &&
                     line.end.x === p1.x && line.end.y === p1.y));
          });
        }

        let startPoint = null;
        canvas.addEventListener("mousedown", function (e) {
          if (isZoomed) return;
          e.preventDefault();
          const rect = canvas.getBoundingClientRect();
          const clickX = e.clientX - rect.left;
          const clickY = e.clientY - rect.top;
          const gridPoint = getNearestGridPoint(clickX, clickY);
          if (e.button === 0) {
            startPoint = gridPoint;
            areaDragStart = {
              screenX: e.clientX,
              screenY: e.clientY,
              grid: gridPoint
            };
          } else if (e.button === 2) {
            const data = getCurrentData();
            if (!startPoint) {
              const area = multiplierAreas.find(a => 
                clickX >= a.x && clickX <= a.x + a.width &&
                clickY >= a.y && clickY <= a.y + a.height);
              if (area != null) {
                if (confirm("削除しますか？")) {
                  pushUndoState();
                  data.lines.splice(area.lineIndex, 1);
                  updateTotals();
                  updateLineDataDisplay();
                  drawGrid();
                  return;
                } else { return; }
              } else {
                console.log("始点が未設定です。");
                return;
              }
            }
            if (isDuplicateLine(startPoint, gridPoint)) {
              console.log("この線分は既に存在します。");
              startPoint = null;
              return;
            }
            let orientation = null;
            if (startPoint.y === gridPoint.y && startPoint.x !== gridPoint.x) {
              orientation = "horizontal";
            } else if (startPoint.x === gridPoint.x && startPoint.y !== gridPoint.y) {
              orientation = "vertical";
            } else {
              console.log("無効な線分です。");
              startPoint = null;
              return;
            }
            const multiplierInput = prompt("倍率を入力してください:");
            const multiplier = parseFloat(multiplierInput);
            if (isNaN(multiplier) || multiplier < 0.01 || multiplier > 7) {
              alert("倍率は0.01～7の間で入力してください。");
              startPoint = null;
              return;
            }
            pushUndoState();
            data.lines.push({
              start: startPoint,
              end: gridPoint,
              multiplier: multiplier,
              orientation: orientation
            });
            startPoint = null;
            drawGrid();
            updateTotals();
            updateLineDataDisplay();
          }
        });

        canvas.addEventListener("mousemove", function (e) {
          if (isZoomed) return;
          if (areaDragStart && (e.buttons & 1) === 1) {
            const dx = e.clientX - areaDragStart.screenX;
            const dy = e.clientY - areaDragStart.screenY;
            if (!isAreaDragging && Math.sqrt(dx * dx + dy * dy) > dragThreshold) {
              isAreaDragging = true;
              startPoint = null;
            }
            if (isAreaDragging) {
              const rect = canvas.getBoundingClientRect();
              currentAreaDragPoint = getNearestGridPoint(e.clientX - rect.left, e.clientY - rect.top);
              drawGrid();
              drawFloorAreaRectangles();
            }
          }
          if (isMeasuring && measurementStart) {
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;
            measurementCurrent = getNearestGridPoint(mouseX, mouseY);
            drawGrid();
            const startX = getXPos(measurementStart.x, getCurrentData().xAxisData);
            const startY = getYPos(measurementStart.y, getCurrentData().yAxisData);
            const endX = getXPos(measurementCurrent.x, getCurrentData().xAxisData);
            const endY = getYPos(measurementCurrent.y, getCurrentData().yAxisData);
            ctx.beginPath();
            ctx.setLineDash([5, 5]);
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.strokeStyle = "green";
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.setLineDash([]);
          }
        });

        canvas.addEventListener("mouseup", function (e) {
          if (isZoomed) return;
          if (e.button === 0 && isAreaDragging) {
            const rect = canvas.getBoundingClientRect();
            const dragEnd = getNearestGridPoint(e.clientX - rect.left, e.clientY - rect.top);
            const startX = Math.min(areaDragStart.grid.x, dragEnd.x);
            const endX = Math.max(areaDragStart.grid.x, dragEnd.x);
            const startY = Math.min(areaDragStart.grid.y, dragEnd.y);
            const endY = Math.max(areaDragStart.grid.y, dragEnd.y);
            if (startX === endX || startY === endY) {
              areaDragStart = null;
              isAreaDragging = false;
              currentAreaDragPoint = null;
              drawGrid();
              return;
            }
            const data = getCurrentData();
            const overlaps = data.floorAreaRectangles.some((rectObj) => {
              return !(endX <= rectObj.start.x || startX >= rectObj.end.x ||
                       endY <= rectObj.start.y || startY >= rectObj.end.y);
            });
            if (overlaps) {
              alert("床面積矩形が重複しています");
              areaDragStart = null;
              isAreaDragging = false;
              currentAreaDragPoint = null;
              drawGrid();
              return;
            }
            const width = sumAxisSpacing(data.xAxisData, startX, endX);
            const height = sumAxisSpacing(data.yAxisData, startY, endY);
            const area = width * height;
            pushUndoState();
            data.floorAreaRectangles.push({
              start: { x: startX, y: startY },
              end: { x: endX, y: endY },
              area: area
            });
            let totalArea = data.floorAreaRectangles.reduce((sum, r) => sum + r.area, 0);
            data.floorArea = totalArea;
            updateInputFields();
            areaDragStart = null;
            isAreaDragging = false;
            currentAreaDragPoint = null;
            drawGrid();
            updateLineDataDisplay();
          }
        });

        function showFloorContextMenu(rectIndex, event) {
          const existingMenu = document.getElementById("floorContextMenu");
          if (existingMenu) existingMenu.remove();
          const menu = document.createElement("div");
          menu.id = "floorContextMenu";
          menu.className = "context-menu";
          menu.style.left = event.pageX + "px";
          menu.style.top = event.pageY + "px";
          const item = document.createElement("div");
          item.className = "context-menu-item";
          item.textContent = "削除";
          item.addEventListener("click", () => {
            pushUndoState();
            const data = getCurrentData();
            data.floorAreaRectangles.splice(rectIndex, 1);
            let totalArea = data.floorAreaRectangles.reduce((sum, r) => sum + r.area, 0);
            data.floorArea = totalArea;
            updateInputFields();
            drawGrid();
            updateLineDataDisplay();
            menu.remove();
          });
          menu.appendChild(item);
          document.body.appendChild(menu);
          document.addEventListener("click", function onDocClick() {
            menu.remove();
            document.removeEventListener("click", onDocClick);
          });
        }

        // 中ボタンクリックによる測定処理
        canvas.addEventListener("mousedown", function (e) {
          if (e.button === 1) {
            e.preventDefault();
            const rect = canvas.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const clickY = e.clientY - rect.top;
            const gridPoint = getNearestGridPoint(clickX, clickY);
            if (!measurementStart) {
              measurementStart = gridPoint;
              isMeasuring = true;
            } else {
              if (measurementStart.x !== gridPoint.x && measurementStart.y !== gridPoint.y) {
                alert("斜め方向は計測しません");
              } else {
                let distance = 0;
                const data = getCurrentData();
                if (measurementStart.x === gridPoint.x) {
                  const start = Math.min(measurementStart.y, gridPoint.y);
                  const end = Math.max(measurementStart.y, gridPoint.y);
                  distance = sumAxisSpacing(data.yAxisData, start, end);
                } else {
                  const start = Math.min(measurementStart.x, gridPoint.x);
                  const end = Math.max(measurementStart.x, gridPoint.x);
                  distance = sumAxisSpacing(data.xAxisData, start, end);
                }
                alert("計測距離: " + distance.toFixed(3) + " m");
              }
              measurementStart = null;
              isMeasuring = false;
              measurementCurrent = null;
              drawGrid();
            }
          }
        });

        // キーボード操作：ズーム切替(Sキー)／Undo(← or Ctrl+Z)
        document.addEventListener("keydown", function (e) {
          if (e.key.toLowerCase() === "s") {
            e.preventDefault();
            if (!isZoomed) {
              canvas.style.transformOrigin = "bottom left";
              canvas.style.transform = "scale(0.5)";
              isZoomed = true;
            } else {
              canvas.style.transform = "scale(1)";
              isZoomed = false;
            }
          }
          const tag = e.target.tagName.toLowerCase();
          if (tag === "input" || tag === "textarea") return;
          if (e.key === "ArrowLeft" || (e.ctrlKey && (e.key === "z" || e.key === "Z"))) {
            undoAction();
          }
        });

        canvas.addEventListener("mouseenter", () => { isMouseOverCanvas = true; });
        canvas.addEventListener("mouseleave", () => { isMouseOverCanvas = false; });

        /**********************************
         * 入力欄更新／ファイル操作
         **********************************/
        function updateInputFields() {
          // １階
          document.getElementById("floorArea1").value = floorData[1].floorArea.toFixed(3);
          document.getElementById("coefficient1").value = floorData[1].coefficient;
          const req1 = (floorData[1].floorArea * floorData[1].coefficient / 100) || 0;
          document.getElementById("requiredWall1").value = req1.toFixed(3);
          // ２階
          document.getElementById("floorArea2").value = floorData[2].floorArea.toFixed(3);
          document.getElementById("coefficient2").value = floorData[2].coefficient;
          const req2 = (floorData[2].floorArea * floorData[2].coefficient / 100) || 0;
          document.getElementById("requiredWall2").value = req2.toFixed(3);
        }

        function updateTotals() {
          // １階計算
          let horizontalTotal1 = 0;
          let verticalTotal1 = 0;
          floorData[1].lines.forEach((line) => {
            if (line.orientation === "horizontal") {
              const start = Math.min(line.start.x, line.end.x);
              const end = Math.max(line.start.x, line.end.x);
              const len = sumAxisSpacing(floorData[1].xAxisData, start, end);
              horizontalTotal1 += len * line.multiplier;
            } else if (line.orientation === "vertical") {
              const start = Math.min(line.start.y, line.end.y);
              const end = Math.max(line.start.y, line.end.y);
              const len = sumAxisSpacing(floorData[1].yAxisData, start, end);
              verticalTotal1 += len * line.multiplier;
            }
          });
          document.getElementById("horizontalTotal1").innerHTML =
            (horizontalTotal1 < reqWall(1) ? "<span style='color: red; font-weight: bold;'>" : "<span style='color: blue; font-weight: bold;'>")
            + horizontalTotal1.toFixed(3) + "</span>";
          document.getElementById("verticalTotal1").innerHTML =
            (verticalTotal1 < reqWall(1) ? "<span style='color: red; font-weight: bold;'>" : "<span style='color: blue; font-weight: bold;'>")
            + verticalTotal1.toFixed(3) + "</span>";
          // ２階計算
          let horizontalTotal2 = 0;
          let verticalTotal2 = 0;
          floorData[2].lines.forEach((line) => {
            if (line.orientation === "horizontal") {
              const start = Math.min(line.start.x, line.end.x);
              const end = Math.max(line.start.x, line.end.x);
              const len = sumAxisSpacing(floorData[2].xAxisData, start, end);
              horizontalTotal2 += len * line.multiplier;
            } else if (line.orientation === "vertical") {
              const start = Math.min(line.start.y, line.end.y);
              const end = Math.max(line.start.y, line.end.y);
              const len = sumAxisSpacing(floorData[2].yAxisData, start, end);
              verticalTotal2 += len * line.multiplier;
            }
          });
          document.getElementById("horizontalTotal2").innerHTML =
            (horizontalTotal2 < reqWall(2) ? "<span style='color: red; font-weight: bold;'>" : "<span style='color: blue; font-weight: bold;'>")
            + horizontalTotal2.toFixed(3) + "</span>";
          document.getElementById("verticalTotal2").innerHTML =
            (verticalTotal2 < reqWall(2) ? "<span style='color: red; font-weight: bold;'>" : "<span style='color: blue; font-weight: bold;'>")
            + verticalTotal2.toFixed(3) + "</span>";
        }
        function reqWall(floor) {
          return (floorData[floor].floorArea * floorData[floor].coefficient / 100) || 0;
        }
        document.getElementById("floorArea1").addEventListener("input", function(){
          floorData[1].floorArea = parseFloat(this.value) || 0;
          updateTotals();
          updateRequiredWall();
        });
        document.getElementById("coefficient1").addEventListener("input", function(){
          floorData[1].coefficient = parseFloat(this.value) || 0;
          updateTotals();
          updateRequiredWall();
        });
        document.getElementById("floorArea2").addEventListener("input", function(){
          floorData[2].floorArea = parseFloat(this.value) || 0;
          updateTotals();
          updateRequiredWall();
        });
        document.getElementById("coefficient2").addEventListener("input", function(){
          floorData[2].coefficient = parseFloat(this.value) || 0;
          updateTotals();
          updateRequiredWall();
        });
        function updateRequiredWall() {
          updateInputFields();
        }

        // フロア切替
        document.querySelectorAll("input[name='floor']").forEach(radio => {
          radio.addEventListener("change", function(){
            currentFloor = parseInt(this.value);
            undoStack = [];
            updateInputFields();
            updateLineDataDisplay();
            updateCanvasSize();
            drawGrid();
            updateTotals();
          });
        });

        // ファイル保存（保存ファイル名を「壁量電卓V2保存.json」に変更）
        function saveData() {
          const additionalData = {
            creationDate: document.getElementById("creationDate").value,
            buildingName: document.getElementById("buildingName").value,
            floorHeight1: parseFloat(document.getElementById("floorHeight1").value) || 0,
            floorHeight2: parseFloat(document.getElementById("floorHeight2").value) || 0,
            maxHeight: parseFloat(document.getElementById("maxHeight").value) || 0,
            maxEaveHeight: parseFloat(document.getElementById("maxEaveHeight").value) || 0,
            visibleAreaX1: parseFloat(document.getElementById("visibleAreaX1").value) || 0,
            visibleAreaX2: parseFloat(document.getElementById("visibleAreaX2").value) || 0,
            visibleAreaY1: parseFloat(document.getElementById("visibleAreaY1").value) || 0,
            visibleAreaY2: parseFloat(document.getElementById("visibleAreaY2").value) || 0
          };
          const dataToSave = {
            floorData: floorData,
            additionalData: additionalData
          };
          const json = JSON.stringify(dataToSave, null, 2);
          const blob = new Blob([json], { type: "application/json" });
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = "壁量電卓V2保存.json";
          a.click();
          URL.revokeObjectURL(url);
        }
        function loadData(e) {
          const file = e.target.files[0];
          if (!file) return;
          const reader = new FileReader();
          reader.onload = function (e) {
            try {
              const json = JSON.parse(e.target.result);
              if (json.floorData) {
                floorData = json.floorData;
                // ★ ファイル読込後、1階の軸データをマスターとして両階を同期
                floorData[2].xAxisData = floorData[1].xAxisData;
                floorData[2].yAxisData = floorData[1].yAxisData;
                updateInputFields();

if (json.additionalData) {
  document.getElementById("creationDate").value = json.additionalData.creationDate || "";
  document.getElementById("buildingName").value = json.additionalData.buildingName || "";
  document.getElementById("floorHeight1").value = json.additionalData.floorHeight1 || "";
  document.getElementById("floorHeight2").value = json.additionalData.floorHeight2 || "";
  document.getElementById("maxHeight").value = json.additionalData.maxHeight || "";
  document.getElementById("maxEaveHeight").value = json.additionalData.maxEaveHeight || "";
  document.getElementById("visibleAreaX1").value = json.additionalData.visibleAreaX1 || "";
  document.getElementById("visibleAreaX2").value = json.additionalData.visibleAreaX2 || "";
  document.getElementById("visibleAreaY1").value = json.additionalData.visibleAreaY1 || "";
  document.getElementById("visibleAreaY2").value = json.additionalData.visibleAreaY2 || "";
}
updateLineDataDisplay(); // ← 忘れずに


                updateCanvasSize();
                drawGrid();
                updateTotals();
                updateLineDataDisplay();
              } else {
                alert("無効なファイル形式です。");
              }
            } catch (err) {
              alert("ファイルの読み込みに失敗しました。");
            }
          };
          reader.readAsText(file);
          e.target.value = "";
        }
        document.getElementById("saveButton").addEventListener("click", saveData);
        document.getElementById("loadButton").addEventListener("click", function(){
          document.getElementById("fileInput").click();
        });
        document.getElementById("fileInput").addEventListener("change", loadData);
// 追加情報入力欄の値が変わるたびに updateLineDataDisplay() を呼び出す
document.getElementById("creationDate").addEventListener("input", updateLineDataDisplay);
document.getElementById("buildingName").addEventListener("input", updateLineDataDisplay);
document.getElementById("floorHeight1").addEventListener("input", updateLineDataDisplay);
document.getElementById("floorHeight2").addEventListener("input", updateLineDataDisplay);
document.getElementById("maxHeight").addEventListener("input", updateLineDataDisplay);
document.getElementById("maxEaveHeight").addEventListener("input", updateLineDataDisplay);
document.getElementById("visibleAreaX1").addEventListener("input", updateLineDataDisplay);
document.getElementById("visibleAreaX2").addEventListener("input", updateLineDataDisplay);
document.getElementById("visibleAreaY1").addEventListener("input", updateLineDataDisplay);
document.getElementById("visibleAreaY2").addEventListener("input", updateLineDataDisplay);


        /**********************************
         * 初期描画
         **********************************/
        updateInputFields();
        updateCanvasSize();
        drawGrid();
        updateLineDataDisplay();
        updateTotals();

// © 2025 Takeshi Ishiduka. All rights reserved.
      </script>
<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>
    </div>
<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="border:1px solid #95a5a6;border-radius:.75rem;background-color:#FFFFFF;width:280px;margin:0px;padding:5px;text-align:center;overflow:hidden;"><table><tr><td style="width:128px"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001353%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"><img src="https://hbb.afl.rakuten.co.jp/hgb/0f0388c1.6f4454d6.0f0388c2.a028d65e/?me_id=1271373&item_id=10001353&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fnamazushop%2Fcabinet%2Fsoft%2Fimg57859639s.jpg%3F_ex%3D128x128&s=128x128&t=picttext" border="0" style="margin:2px" alt="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]" title="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]"></a></td><td style="vertical-align:top;width:136px;display: block;"><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px;word-wrap:break-word"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001353%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;">HOUSE-ST1 Ver9キャンペーン版　初心者向け木造構造計算ソフト　2025年改正建築基準法に対応　木造軸組工法住宅の許容応力度設計2017年版対応（オリジナルサンプル付）</a><br><span >価格：393,140円（税込、送料無料)</span> <span style="color:#BBB">(2025/3/30時点)</span></p></td></tr></table></div><br><p style="color:#000000;font-size:12px;line-height:1.4em;margin:5px;word-wrap:break-word"></p></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="border:1px solid #95a5a6;border-radius:.75rem;background-color:#FFFFFF;width:280px;margin:0px;padding:5px;text-align:center;overflow:hidden;"><table><tr><td style="width:128px"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001638%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"><img src="https://hbb.afl.rakuten.co.jp/hgb/0f0388c1.6f4454d6.0f0388c2.a028d65e/?me_id=1271373&item_id=10001638&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fnamazushop%2Fcabinet%2Fsoft%2Fhousedoc2.jpg%3F_ex%3D128x128&s=128x128&t=picttext" border="0" style="margin:2px" alt="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]" title="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]"></a></td><td style="vertical-align:top;width:136px;display: block;"><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px;word-wrap:break-word"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001638%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;">HOUSE-DOC Ver6（2022年建防協評価更新・2012年改訂版木造住宅の耐震診断と補強方法対応）木造耐震診断ソフト</a><br><span >価格：198,000円（税込、送料無料)</span> <span style="color:#BBB">(2025/3/30時点)</span></p></td></tr></table></div><br><p style="color:#000000;font-size:12px;line-height:1.4em;margin:5px;word-wrap:break-word"></p></td></tr></table>
    </div>
  </body>
</html>