@charset "UTF-8";


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


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


h4		{
		margin: 20px 0px 0px 0px;
			color:#fff;	
			background: #000066;
		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: 70% 30%;
			grid-template-areas:
			"ta sa"
			"tb sb";
			}

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

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

.sa		{
		grid-area: sa;
		}

.tb		{
		grid-area: tb;
		text-align: left;
		padding: 19px 0px 0px 15px;
		}

.sb		{
		grid-area: sb;
		}


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




.grid_point		{
			display: grid;
			margin: 0px 0px 0px 0px;
			grid-template-rows: repeat(2, 60px);
			grid-template-columns: 30% 70%;
			grid-template-areas:
			"ta tb"
			"sa sb";
			}

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

.sb		{
		text-align: left;
		padding: 9px 0px 0px 15px;
		}

.sb select	{
			width:100px;
			}





}