html {
      height: 100%;
      overflow: hidden;
    }

     body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow-x: hidden;
      font-family: sans-serif;
      font-size: clamp(12px, 2vw, 20px); /* ◆◆文字サイズ◆◆ */
    }

    /* Gridレイアウト全体 */
    .container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 100vh;
    }

    header, footer {
      padding: 1rem;
      background-color: #4caf50;
      color: white;
      word-break: break-word;
      overflow-wrap: break-word;
      white-space: normal;
    }

    main {
      display: grid;
      grid-template-columns: 1fr 3fr; /* 左:右 = 1:3 */
      gap: 1rem;
      padding: 1rem;
      background-color: #f5f5f5;
    /*   height: 100%;      */
      min-height: 0;        /* 子要素のはみ出しを防止 */
    }

    .sidebar {
      padding: 1rem;
      background-color: #f5f5f5;
      word-break: break-word;
      overflow-wrap: break-word;
      white-space: normal;
    }
    
    .sidebar input[type="text"],
.sidebar textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

    .content {
      padding: 1rem;
      background-color: #ffffff;
      word-break: break-word;
      overflow-wrap: break-word;
      white-space: normal;
      display: flex;         /* 追加 */
      flex-direction: column; /* 縦方向レイアウト */
/*      height: 100%;           追加 */
     min-height: 0;      /*     追加 */
       min-height: 0;
  flex-grow: 1; /* これを必要に応じて */
  
    word-break: break-all; /* どんな文字の並びでも強制的に改行 */
  overflow-x: hidden; /* 横スクロールを完全に禁止 */
  
    }

    footer {
      text-align: center;
      background-color: #333;
    }


.monospace {
  font-family: monospace;
  font-size: clamp(8px, 2vw, 16px); /* ◆◆文字サイズ◆◆ */
}



/* リンク色 */
a:link {text-decoration:none}
a:visited {text-decoration:none}
a:active {text-decoration:none}
a:hover {color:#FF33CC; text-decoration:underline}



/* 変数表示部のテーブル設定 */
table {
	border-collapse:collapse;
font-size: clamp(8px, 2vw, 12px); /* ◆◆文字サイズ◆◆ */
	} 

td {
	white-space: nowrap;
	width:250px;
	height: 16px;
	border:1px solid #338844}






/* 枝部分の文字サイズ */
.mado-sikaku{
	font-size: clamp(6px, 2vw, 20px); /* ◆◆文字サイズ◆◆ */
	}
.mado-title{
	font-size: clamp(4px, 2vw, 13px); /* ◆◆文字サイズ◆◆ */
	}
.mado-eda{
	font-size: clamp(6px, 2vw, 20px); /* ◆◆文字サイズ◆◆ */
	}
.mado-main{
	font-size: clamp(4px, 2vw, 13px); /* ◆◆文字サイズ◆◆ */
	}
.mado-eda2{
	font-weight:bold;
	}
.mado-menu{
	font-size: clamp(4px, 2vw, 13px); /* ◆◆文字サイズ◆◆ */
	}


/* サイドバー タイトル、URL入力窓 */
input.b1{
	border:1px solid blue;}
input.b1:focus{
	border:2px dotted blue;}

/* サイドバー コメント入力窓 */
textarea.b2{
	border:1px solid blue;}
textarea.b2:focus{
	border:2px dotted blue;}

/* メイン タイトル入力窓 */
input.b3{
	width:250px;
	border:1px solid blue;}
input.b3:focus{
	width:250px;
	border:2px dotted blue;}

/* メイン コメント入力窓 */
textarea.b4 {
 flex: 1 1 auto;
  width: 100%;
  border: 1px solid blue;
  resize: none;           /* ユーザーによるサイズ変更を無効に（任意） */
box-sizing: border-box; /*   パディング込みでサイズを調整 */
  min-height: 0;          /* IE対策（基本不要） */
height: auto; /*    必要ならautoに */
}

textarea.b4:focus {
  border: 2px dotted blue;
}