@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% 25% 25%;
			grid-template-areas:
			"ta pa sa na"
			"tb pb sb nb";
			}

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

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

.pa		{
		grid-area: pa;
		}

.sa		{
		grid-area: sa;
		}

.na		{
		grid-area: na;
		}

.tb		{
		grid-area: tb;
			padding: 19px 0px 0px 0px;
		}

.pb		{
		grid-area: pb;
		}

.sb		{
		grid-area: sb;
		}

.nb		{
		grid-area: nb;
		}


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

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

.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: 21% 24% 25% 15% 15%;
			grid-template-areas:
			"tc pc sc nc mc"
			"td pd sd nd md";
			}

.tc,.pc,.sc,.nc,.mc	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 10px 0px 0px 0px;
			background-color: #99ccff;
			}

.td,.pd,.sd,.nd,.md	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 9px 0px 0px 0px;
			background-color: #eee;
			}
.tc		{
		grid-area: tc;
		}

.pc		{
		grid-area: pc;
		}

.sc		{
		grid-area: sc;
		}

.nc		{
		grid-area: nc;
		}

.mc		{
		grid-area: mc;
		}

.td		{
		grid-area: td;
			padding: 19px 0px 0px 0px;
		}

.pd		{
		grid-area: pd;
		}

.sd		{
		grid-area: sd;
		}

.nd		{
		grid-area: nd;
		}

.md		{
		grid-area: md;
		}



.grid_point_03		{
			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: 30% 30% 15% 25%;
			grid-template-areas:
			"wa ha qa ra"
			"wb hb qb rb";
			}


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

.grid_point_03 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"
			"pa pb"
			"sa sb"
			"na nb";
			}

.ta,.pa,.sa,.na	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 20px 0px 0px 0px;
			background-color: #99ccff;
			}
.tb,.pb,.sb,.nb	{
			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;
			}


.tb		{
		padding: 19px 0px 0px 0px;
		}


.grid_point_02		{
			display: grid;
			margin: 0px 0px 30px 0px;
			grid-template-rows: repeat(5, 60px);
			grid-template-columns: 40% 60%;
			grid-template-areas:
			"tc td"
			"pc pd"
			"sc sd"
			"nc nd"
			"mc md";
			}

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

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

.tc,.pc,.sc,.nc,.mc	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 20px 0px 0px 0px;
			background-color: #99ccff;
			}

.td,.pd,.sd,.nd,.md	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 9px 0px 0px 0px;
			background-color: #eee;
			}

.grid_point_03		{
			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_03 input	{
			width:70%;
			color:#333;	
			vertical-align:middle;
			}

.grid_point_03 select	{
			width:75%;
			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;
			}





}