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

.itemradio		{
			margin: 0px 0px 0px 0px;
			padding: 10px 10px;
			background-color: #eee;
			}

.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:
			"pa wa na ua"
			"pb wb nb ub";
			}

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

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

.wa		{
		grid-area: wa;
		}

.na		{
		grid-area: na;
		}

.ua		{
		grid-area: ua;
		}

.pb		{
		grid-area: pb;
		}

.wb		{
		grid-area: wb;
		}

.nb		{
		grid-area: nb;
		}

.nb input	{
			width:30%;
		}

.ub		{
		grid-area: ub;
		}


@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:
			"pa pb"
			"wa wb"
			"na nb"
			"ua ub";
			}

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









}