.topboard {
            font-size: 24px;
    		
    	}
    	pre {
            font-size: 24px;
    		
    	}
    	p {
        	display: flex;
            width: 100%; /* 横幅を100%に設定 */
            box-sizing: border-box; /* パディングやボーダーを含めてサイズを計算 */
 			height:30px;
        	font-size: 20px;
            text-align: center;
				flex-wrap: wrap;
	  			justify-content: center;
	  			align-items: center;    /* 垂直方向の中央寄せ */
            margin-top: 2px;    /* 上に20pxの余白 */
            margin-bottom: 2px; /* 下に20pxの余白 */
            padding-left: 2px; /* 左端に20pxのパディングを追加 */
            margin-right: 2px;  /* 右に20pxの余白 */
    	}
        table {
            border-collapse: collapse;
            border-spacing: 10px 5px;
            border: 2px black solid;
        /*    border-top: 8px black solid;
            border-bottom: 8px black solid;*/
        }
        td {
            width: 50px;
            height: 50px;
            text-align: center;
            border: 1px solid black;
		/*	border-radius: 15px 15px1 5px 15px;        */
            background-color: #ffffff;
			border-radius: 10px 10px 10px 10px;        
        }
        .number-button {
            width: 32px;
             height: 40px;
            margin: 5px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
            cursor: pointer;
			  border-radius: 3px; /* 角を丸くする */
			  box-shadow: 0 3px 0 #808080; /* 影の設定 */
        }
        .player {
        	display: flex;
            width: 100%; /* 横幅を100%に設定 */
            box-sizing: border-box; /* パディングやボーダーを含めてサイズを計算 */
 			height:30px;
        	font-size: 20px;
            text-align: center;
				flex-wrap: wrap;
	  			justify-content: center;
	  			align-items: center;    /* 垂直方向の中央寄せ */
            margin-top: 2px;    /* 上に20pxの余白 */
            margin-bottom: 2px; /* 下に20pxの余白 */
            padding-left: 2px; /* 左端に20pxのパディングを追加 */
            margin-right: 2px;  /* 右に20pxの余白 */
        }
        .player1 {
            background-color: #32CD32;
            color: white;
        }
        .player2 {
            background-color: #FF4500;
            color: white;
        }
        .captured {
            background-color: yellow;
            color: black;
	        cursor: pointer;
			border-radius: 0px 0px 0px 0px;        
        }
        .captured2 {
        	display: flex;
        	font-size: 21px;
            text-align: center;
				flex-wrap: wrap;
	  			justify-content: center;
	  			align-items: center;    /* 垂直方向の中央寄せ */
	  		padding-left: 2px;
	  		padding-right: 2px;
            background-color: #ffff00;
      /*      color: black;
	        cursor: pointer;
			border-radius: 3px 3px 3px 3px;
			box-shadow: 0 5px 0 #808080;	*/
        }
        .topcr {
            border-bottom: 2px black solid;
            border-top: 7px #32CD32 solid;
			border-top-color: #32CD32;
		}
		.bottomcr {
            border-top: 2px black solid;
            border-bottom: 7px #FF4500 solid;
			border-bottom-color: #FF4500;
        }
        /* オーバーレイのスタイル */
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        /* ポップアップのスタイル */
        #popup {
            position: absolute;
            left: 20%;
            top: 20%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: white;
       /*     border: 1px solid black;*/
            font-size: 42px;
            border: 5px solid black; /* 枠線の太さと色 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-image: linear-gradient(to right, #ff7f7f, #7f7fff) 1; /* グラデーション */
        }
			main1 {
				display: flex;
				flex-wrap: wrap;
				width: 328px;
				font-size: 20px;
            margin-top: 0px;    /* 上に20pxの余白 */
            margin-bottom: 0px; /* 下に20pxの余白 */
            padding-left: 0px; /* 左端に20pxのパディングを追加 */
            margin-right: 0px;  /* 右に20pxの余白 */
			}
			main2 {
				display: flex;
				flex-wrap: wrap;
				width: 270px;
				font-size: 20px;
            margin-top: 0px;    /* 上に20pxの余白 */
            margin-bottom: 0px; /* 下に20pxの余白 */
            padding-left: 0px; /* 左端に20pxのパディングを追加 */
            margin-right: 0px;  /* 右に20pxの余白 */
			}
			main {
			  display: flex;
			  width: 600px;
			  font-size: 20px;
            margin-top: 0px;    /* 上に20pxの余白 */
            margin-bottom: 0px; /* 下に20pxの余白 */
            padding-left: 0px; /* 左端に20pxのパディングを追加 */
            margin-right: 0px;  /* 右に20pxの余白 */
			}
			.switch {
				width: 180px;
	  			display: flex;
				flex-wrap: wrap;
	  			justify-content: center;
	  			align-items: center;    /* 垂直方向の中央寄せ */
	 			/* height: 50vh;          /* コンテナの高さを画面全体に */
			}
			pp {
            	position: relative;
				font-size: 20px;
			}
			ppp {
            position: absolute;
            left: 25%;
            top: 20%;
            transform: translate(-50%, -50%);
            margin: 5px;
            padding: 5px;
           		border: 1px black solid;
       			background-color: #ffff80;
				font-size: 24px;
			}
			.btn {
		/*	  display: inline-block;
		/*	  padding: 10px 20px;
		/*	  background-color: #e3364a; /* ボタンの背景色 */
		/*	  color: #fff; /* テキストの色 */
            	cursor: pointer;
			  text-decoration: none; /* テキストの下線を消す */
			  border-radius: 5px; /* 角を丸くする */
			  box-shadow: 0 5px 0 #808080; /* 影の設定 */
		/*	  transition: transform 0.2s, box-shadow 0.2s; /* アニメーションの設定 */
			} 
			label {
	            cursor: pointer;
	            text-align: left;
  			/*	justify-content: flex-start;*/
			}
			input {
	            cursor: pointer;
			}
        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 220px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 5px;
            position: absolute;
            z-index: 1;
          /*  bottom: 0%; /* ボタンの上に表示 */
            top: 100%; /* ボタンの下に表示 */
            left: -40px;	/*50%;*/
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        .col_red { 
        	color: red; /* ここで色を指定 */ 
        }
        .bcol_green { 
            margin-top: 2px;    /* 上に20pxの余白 */
            margin-bottom: 2px; /* 下に20pxの余白 */
            padding-left: 2px; /* 左端に20pxのパディングを追加 */
            margin-right: 10px;  /* 右に20pxの余白 */
        	background-color: #6cff6c; /* ここで色を指定 */ 
        }
        .bcol_red { 
            margin-top: 2px;    /* 上に20pxの余白 */
            margin-bottom: 2px; /* 下に20pxの余白 */
            padding-left: 5px; /* 左端に20pxのパディングを追加 */
            margin-right: 10px;  /* 右に20pxの余白 */
        	background-color: #ffaaaa; /* ここで色を指定 */ 
        }
        .bcol_yellow {
            margin-top: 2px;    /* 上に20pxの余白 */
            margin-bottom: 2px; /* 下に20pxの余白 */
            padding-left: 5px; /* 左端に20pxのパディングを追加 */
            margin-right: 10px;  /* 右に20pxの余白 */
        	background-color: #ffff80; /* ここで色を指定 */ 
        }
        .msgtextstr {
        	width: 600px;
        	font-size: 21px;
        }
        input[type="checkbox"] {
        	width: 20px; height: 20px;
        	accent-color: blue; /* チェックマークの色を変更 */
        }
        .bordered-image {
        	position: relative;
			top: 10px;
            border: 2px solid  #ececec; /* 枠の太さと色を指定 */
            padding: 2px; /* 枠と画像の間に余白を追加 */
            border-radius: 5px; /* 枠に丸みを付ける */

        }