* {
	padding: 0;
	margin: 0;
}

.grid-container100{
	display: grid;
	grid-template-areas:"gi20 gi21"
 	"gi0 gi1"
	"gi2 gi3"
	"gi4 gi5"
	"gi6 gi7"
	"gi8 gi9"
	"gi10 gi11"
	"gi12 gi13"
	"gi14 gi15"
	"gi16 gi17"
	"gi18 gi19"
	;
	grid-template-columns:1fr 2fr;
	grid-template-rows:repeat(11, 46px);
	column-gap: 3px;
	row-gap: 3px;
}

	#gi0 {  background-color: #EEEEEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi0;width:100%;
	}
	#gi1 {  background-color: #EEEEEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi1;width:100%;
	}
	#gi2 {  background-color: #FFFFEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi2;width:100%;
	}
	#gi3 {  background-color: #FFFFEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi3;width:100%;
	}
	#gi4 {  background-color: #EEEEEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi4;width:100%;
	}
	#gi5 {  background-color: #EEEEEE;padding:2px 7px 0px 7px;;text-align:left;font-size: 1.0rem;
	  grid-area: gi5;width:100%;
	}
	#gi6 {  background-color: #FFFFEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi6;width:100%;
	}

	#gi7 {  background-color: #FFFFEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi7;width:100%;
	}



	#gi8 {  background-color: #EEEEEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi8;width:100%;
	}
	#gi9 {  background-color: #EEEEEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi9;width:100%;
	}
	#gi10 {  background-color: #FFFFEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi10;width:100%;
	}
	#gi11 {  background-color: #FFFFEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi11;width:100%;
	}
	#gi12 {  background-color: #EEEEEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi12;width:100%;
	}
	#gi13 {  background-color: #EEEEEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi13;width:100%;
	}
	#gi14 {  background-color: #FFFFEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi14;width:100%;
	}
	#gi15 {  background-color: #FFFFEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi15;width:100%;
	}
	#gi16 {  background-color: #EEEEEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi16;width:100%;
	}
	#gi17 {  background-color: #EEEEEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi17;width:100%;
	}
	#gi18 {  background-color: #FFFFEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi18;width:100%;
	}
	#gi19 {  background-color: #FFFFEE;padding:2px 7px 0px 7px;text-align:left;font-size: 1.0rem;
	  grid-area: gi19;width:100%;
	}

	#gi20 {  background-color: #C0C0C0;padding:10px 7px 0px 7px;text-align:center;font-size: 1.2rem;
	  grid-area: gi20;width:100%;
	}
	#gi21 {  background-color: #C0C0C0;padding:10px 7px 0px 7px;text-align:center;font-size: 1.2rem;
	  grid-area: gi21;width:100%;
	}


#text-button {
	display: block;
	cursor: pointer;
	width: 160px;
	text-align: center;
	border: 1px solid #232323;
	padding: 10px;
}

.grid-container101{
	display: grid;
	grid-template-areas:
 	"gi105 gi100 gi101 gi102 gi103 gi104 gi106"
	;
	grid-template-columns:1fr 2fr 2fr 3fr 2fr 2fr 1fr;
	grid-template-rows:repeat(1, 40px);
	column-gap: 5px;
}


#gi100 {
	grid-area: gi100;
	cursor: pointer;
	font-size: 1.2rem;
	text-align: center;
	padding: 5px;
	border: 1px dotted #000;
}

#gi101 {
	grid-area: gi101;
	cursor: pointer;
	font-size: 1.2rem;
	text-align: center;
	border: 1px dotted #000;
	padding: 5px;
}

#gi102 {
	grid-area: gi102;width:100%;
	text-align: center;
	font-size: 1.2rem;
	padding: 5px;

}

#gi103 {
	grid-area: gi103;
	cursor: pointer;
	font-size: 1.2rem;
	text-align: center;
	border: 1px dotted #000;
	padding: 5px;

}

#gi104 {
	grid-area: gi104;
	cursor: pointer;
	font-size: 1.2rem;
	text-align: center;
	border: 1px dotted #000;
	padding: 5px;

}
/*ダミーアイテム*/
#gi105 {
	grid-area: gi105;
	text-align: center;
	border: 0px solid #232323;
}
/*ダミーアイテム*/
#gi106 {
	grid-area: gi106;
	text-align: center;
	border: 0px solid #232323;
}


/*チェックボックス*/
/* スタイル付け */
.checkboxArea {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 1行に4つの列を作成 */
	gap: 20px; /* チェックボックス間の余白を設定 */
	margin-top: 16px;
	margin-bottom: 16px;
}

.checkboxArea label {
	display: block; /* ラベルをブロック要素として表示 */
}

.selectedValues {
	/*visibility:hiddenは名前の通り、要素はあるけど見えない状態。display:noneは、要素も取得されず、完全にその場にない扱い。*/
	/*visibility:hidden;*/
	display: none;
}

/*方言選択ボタン*/
.sel_btn {
	display: grid;
	grid-template-areas:
 	"gi203 gi200 gi201 gi202 gi204"
	;
	grid-template-columns:1fr 3fr 2fr 2fr 1fr;
	grid-template-rows:repeat(1, 40px);
	column-gap: 5px;
	margin-bottom: 16px;
}
#gi200 {
	grid-area: gi200;
	cursor: pointer;
	font-size: 1.0rem;
	text-align: center;
	padding: 5px;
	border: 1px dotted #000;
/*width:70%;*/
}
#gi201 {
	grid-area: gi201;
	cursor: pointer;
	font-size: 1.0rem;
	text-align: center;
	padding: 5px;
	border: 1px dotted #000;
/*width:70%;*/
}
#gi202 {
	grid-area: gi202;
	cursor: pointer;
	font-size: 1.0rem;
	text-align: center;
	padding: 5px;
	border: 1px dotted #000;
/*width:70%;*/
}
/*ダミーアイテム*/
#gi203 {
	grid-area: gi203;
}

/*ダミーアイテム*/
#gi204 {
	grid-area: gi204;
}

/*チェックボックスコンテナ*/
.checkboxArea_container{
	border: 1px dotted #000;
	margin-top:50px;
	margin-bottom: 16px;

}