@charset "utf-8";


h3		{
		width: 98%;
		font-size: 2.0rem;
		color: #333;
		position: relative;
		margin: 20px auto;
		padding:  0px 0px 0px 15px;
		border-bottom: solid 3px #000066;
		background: #fff;
		}

h3:before	{
		position:absolute;/*中の緑の線を左上から描いていくために必要*/
		content: "";/*これを入れることで線が表示される準備ができる*/
		width: 5px;/*中の緑の線の太さ*/
		height: 18px;/*中の緑の線の高さ*/
		background: #003366;/*中の緑の線の色*/
		top: 4px;/*中の緑の線の上からの距離*/
		left: 0px;/*中の緑の線の左からの距離*/
		}

h3:after	{
		position: absolute;
		content: " ";
		display: block;
		border-bottom: solid 3px #3399ff;
		padding:  0px 0px 0px 0px;
		left: 0px;
		bottom: -3px;
		width: 25%;
		}


h4		{
		font-size: 1.6rem;
		color: #333;
		margin: 10px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		border-bottom: 0px;
		background: #fff;
		}

h4:before	{
		content: none;
		}

p		{
		margin: 0px 0px 20px 0px;
		padding:  0px 0px;
		}


.grid		{
    		display: grid;
    		grid-template-columns: 1fr 1fr;
             	margin: 20px 0px 15px 0px;
             	padding: 0px 0px 0px 0px;
		}

.item		{
             	margin: 20px 20px 30px 0px;
             	padding: 0px 0px 10px 0px;
		border-bottom: solid 1px #3399ff;
		text-align:center;
		}

.item img:hover{
		opacity: 0.6;
		}

a		{
		color:#333;
		text-decoration:none;
		}

a:hover		{
		color:#ff0000;
		text-decoration:underline;
		}



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


.grid		{
    		display: grid;
    		grid-template-columns: 1fr;
             	margin: 20px 0px 15px 0px;
             	padding: 0px 0px 0px 10px;
		}

.item		{
                color: #ff0000;
		}

a		{
		text-decoration:underline;
		}

a:hover		{
		text-decoration:none;
		}
}