@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;
		}


.ba,.na,.pa,.ba3,.na3,.pa3,.ba5,.na5,.pa5,.ba10,.na10,.pa10	{
			text-align: center;
			border: solid 1px #000;
			margin: 0px;
			padding: 10px 0px 0px 0px;
			color: #fff;
			background-color: #3399ff;
			}

.bb,.nb,.pb.bb,.nb,.pb,.bb3,.nb3,.pb3,.bb5,.nb5,.pb5,.bb10,.nb10,.pb10	{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 19px 0px 0px 15px;
			background-color: #eee;
			}

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



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




.grid_point		{
			display: grid;
			margin: 0px 0px 30px 0px;
			grid-template-rows: repeat(12, 60px);
			grid-template-columns: 20% 80%;
			grid-template-areas:
			"ba bb"
			"na nb"
			"pa pb"
			"ba3 bb3"
			"na3 nb3"
			"pa3 pb3"
			"ba5 bb5"
			"na5 nb5"
			"pa5 pb5"
			"ba10 bb10"
			"na10 nb10"
			"pa10 pb10";
			}

.ba,.na,.pa,.ba3,.na3,.pa3,.ba5,.na5,.pa5,.ba10,.na10,.pa10	{

			padding: 19px 0px 0px 0px;
			}



.nb,.nb3,.nb5,.nb10		{
				padding: 9px 0px 0px 10px;
				text-align: left;
				}



.ba		{
		grid-area: ba;
		}

.na		{
		grid-area: na;
		}

.pa		{
		grid-area: pa;
		}

.ba3		{
		grid-area: ba3;
		}

.na3		{
		grid-area: na3;
		}

.pa3		{
		grid-area: pa3;
		}

.ba5		{
		grid-area: ba5;
		}

.na5		{
		grid-area: na5;
		}

.pa5		{
		grid-area: pa5;
		}

.ba10		{
		grid-area: ba10;
		}

.na10		{
		grid-area: na10;
		}

.pa10		{
		grid-area: pa10;
		}

.bb		{
		grid-area: bb;
		text-align: left;
		}

.nb		{
		grid-area: nb;
		}

.pb		{
		grid-area: pb;
		text-align: left;
		}

.bb3		{
		grid-area: bb3;
		text-align: left;
		}


.nb3		{
		grid-area: nb3;
		}

.pb3		{
		grid-area: pb3;
		text-align: left;
		}

.bb5		{
		grid-area: bb5;
		text-align: left;
		}


.nb5		{
		grid-area: nb5;
		}

.pb5		{
		grid-area: pb5;
		text-align: left;
		}

.bb10		{
		grid-area: bb10;
		text-align: left;
		}


.nb10		{
		grid-area: nb10;
		}

.pb10		{
		grid-area: pb10;
		text-align: left;
		}

				}




@media screen and (min-width: 787px) {



.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 60px 60px 60px;
			grid-template-columns: 50% 20% 30%;
			grid-template-areas:
			"ba na pa"
			"bb nb pb"
			"bb3 nb3 pb3"
			"bb5 nb5 pb5"
			"bb10 nb10 pb10";
			}




.bb,.bb3,.bb5,.bb10	{
		text-align: left;
			}


.nb,.nb3,.nb5,.nb10	{
			padding: 9px 0px 0px 0px;
			}




.ba3		{
		display: none;
		}

.na3		{
		display: none;
		}

.pa3		{
		display: none;
		}

.ba5		{
		display: none;
		}

.na5		{
		display: none;
		}

.pa5		{
		display: none;
		}

.ba10		{
		display: none;
		}

.na10		{
		display: none;
		}

.pa10		{
		display: none;
		}


		}