@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		{
			display: grid;
			width:100%;
			font-size: 16px;
			font-size: 1.6rem;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			grid-template-rows: 60px auto;
			grid-template-columns: 20% 80%;
			grid-template-areas:
			"ta tb"
			"ca cb";
			}

.ta			{
			grid-area: ta;
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 19px 0px 0px 0px;
			background-color: #99ccff;
			}

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

.tb select		{
			width:35%;
			}

.ca			{
			grid-area: ca;
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 125px 0px 0px 0px;
			background-color: #99ccff;
			}

.cb			{
			grid-area: cb;
			text-align: left;
			border: solid 1px #333;
			margin: 0px;
			padding: 15px 0px 15px 21px;
			background-color: #f5f5f5;
			}

.cb textarea		{
			width: 97%;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			height: 15em;
			}


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




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

.ta			{
			text-align: center;
			border: solid 1px #333;
			padding: 25px 0px 0px 0px;
			background-color: #99ccff;
			}
.tb			{
			text-align: left;
			border: solid 1px #333;
			margin: 0px;
			padding: 15px 0px 15px 23px;
			background-color: #eee;
			}

.ca			{
			text-align: center;
			border: solid 1px #333;
			margin: 0px;
			padding: 130px 0px 0px 0px;
			background-color: #99ccff;
			}
.cb			{
			text-align: left;
			border: solid 1px #333;
			margin: 0px;
			padding: 15px 0px 15px 23px;
			background-color: #eee;
			}

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

.cb textarea		{
			width: 97%;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			height: 15em;
			}

}


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




.grid_point		{
			display: grid;
			margin: 0px 0px 0px 0px;
			grid-template-rows: repeat(4, auto);
			grid-template-columns: 100%;
			grid-template-areas:
			"ta"
			"tb"
			"ca"
			"cb";
			}

.ta			{
			text-align: left;
			border: solid 1px #333;
			padding: 15px 0px 15px 15px;
			background-color: #99ccff;
			}
.tb			{
			text-align: left;
			border: solid 1px #333;
			margin: 0px;
			padding: 15px 0px 15px 15px;
			background-color: #eee;
			}

.ca			{
			text-align: left;
			border: solid 1px #333;
			margin: 0px;
			padding: 15px;
			background-color: #99ccff;
			}
.cb			{
			text-align: left;
			border: solid 1px #333;
			margin: 0px;
			padding: 15px 0px 15px 15px;
			background-color: #eee;
			}

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

.cb textarea		{
			width: 97%;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			height: 15em;
			}

}