@charset "UTF-8";


h2		{
		margin: 20px 0px 0px 0px;
		}


h3		{
		margin: 20px 0px 0px 0px;
		}


h4		{
		margin: 20px 0px 0px 0px;
		border: solid 1px #000066;
		}




.grid_point input	{
			width:75%;
			color:#333;	
			vertical-align:middle;
			}

.grid_point select	{
			width:85%;
			color:#333;	
			vertical-align:middle;
			}

.grid_point		{
			display: grid;
			width:100%;
			font-size: 16px;
			font-size: 1.6rem;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			grid-template-rows: 40px 60px;
			grid-template-columns: 25% 25% 30% 20%;
			grid-template-areas:
			"ta sa ma ga"
			"tb sb mb gb";
			}

.ta,.sa,.ma,.ga	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 10px 0px 0px 0px;
			background-color: #99ccff;
			}

.tb,.sb,.mb,.gb	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 9px 0px 0px 0px;
			background-color: #eee;
			}
.ta		{
		grid-area: ta;
		}

.sa		{
		grid-area: sa;
		}

.ma		{
		grid-area: ma;
		}

.ga		{
		grid-area: ga;
		}

.tb		{
		grid-area: tb;
		}

.sb		{
		grid-area: sb;
		}

.mb		{
		grid-area: mb;
		}

.gb		{
		grid-area: gb;
		}



.grid_point_02		{
			display: grid;
			width:100%;
			font-size: 16px;
			font-size: 1.6rem;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			grid-template-rows: 40px 60px;
			grid-template-columns: 25% 25% 25% 25%;
			grid-template-areas:
			"wa ha qa ra"
			"wb hb qb rb";
			}


.grid_point_02 input	{
			width:55%;
			color:#333;	
			vertical-align:middle;
			}

.grid_point_02 select	{
			width:85%;
			color:#333;	
			vertical-align:middle;
			}

.wa,.ha,.qa,.ra		{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 10px 0px 0px 0px;
			background-color: #99ccff;
			}

.wb,.hb,.qb,.rb		{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 9px 0px 0px 0px;
			background-color: #eee;
			}


.wa		{
		grid-area: wa;
		}

.ha		{
		grid-area: ha;
		}

.qa		{
		grid-area: qa;
		}
.ra		{
		grid-area: ra;
		}

.wb		{
		grid-area: wb;
		}

.hb		{
		grid-area: hb;
		}

.qb		{
		grid-area: qb;
		}

.qb input	{
			width:25%;
			}

.rb		{
		grid-area: rb;
		}



@media screen and (max-width: 900px) {




.grid_point		{
			display: grid;
			margin: 0px 0px 30px 0px;
			grid-template-rows: repeat(4, 60px);
			grid-template-columns: 40% 60%;
			grid-template-areas:
			"ta tb"
			"sa sb"
			"ma mb"
			"ga gb";
			}

.ta,.sa,.ma,.ga	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 20px 0px 0px 0px;
			background-color: #99ccff;
			}
.tb,.sb,.mb,.gb	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 9px 0px 0px 0px;
			background-color: #eee;
			}


.grid_point input	{
			width:70%;
			color:#333;	
			vertical-align:middle;
			}

.grid_point select	{
			width:75%;
			color:#333;	
			vertical-align:middle;
			}

.grid_point_02		{
			display: grid;
			margin: 0px 0px 30px 0px;
			grid-template-rows: repeat(4, 60px);
			grid-template-columns: 40% 60%;
			grid-template-areas:
			"wa wb"
			"ha hb"
			"qa qb"
			"ra rb";
			}

.grid_point_02 input	{
			width:65%;
			color:#333;	
			vertical-align:middle;
			}

.grid_point_02 select	{
			width:77%;
			color:#333;	
			vertical-align:middle;
			}

.wa,.ha,.qa,.ra	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 20px 0px 0px 0px;
			background-color: #99ccff;
			}

.wb,.hb,.qb,.rb	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 9px 0px 0px 0px;
			background-color: #eee;
			}





}