@charset "utf-8";

p		{
		padding:  0px 0px;
		}


h4		{
		margin: 0px 0px 10px 0px;
		padding:  8px 0px 5px 15px;
		font-size:16px;
		border-bottom:3px solid #0066cc;
	background:#fff;
		}

h4 a	{
		color:#3366cc;
		font-weight: bold; 
		text-decoration:none;
		}

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

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



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

.item		{
             	margin: 0px 0px 20px 0px;
             	padding: 0px 0px 10px 0px;
		}



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


.item_name	{
             	margin: 0px 0px 0px 0px;
             	padding: 0px 0px 10px 0px;
		}



.item img:hover{
		opacity: 0.6;
		}
.item_name img:hover{
		opacity: 0.6;
		}



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


.grid		{
    		display: grid;
    		grid-template-columns: 1fr;
		}


.grid_name	{
    		display: grid;
    		grid-template-columns: 1fr 1fr;
             	margin: 20px 0px 15px 0px;
             	padding: 0px 0px 0px 0px;
		grid-column-gap: 10px;
                grid-row-gap: 0px;
	background:#fff;
		}


.item_name	{
             	margin: 0px 0px 0px 0px;
             	padding: 0px 0px 10px 0px;
	background:#fff;
		}


}



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



.grid		{
    		display: grid;
    		grid-template-columns: 1fr 1fr;
		}

.grid_name	{
    		display: grid;
    		grid-template-columns: 1fr 1fr 1fr;
             	margin: 20px 0px 15px 0px;
             	padding: 0px 0px 0px 0px;
		grid-column-gap: 10px;
                grid-row-gap: 0px;
	background:#fff;
		}


.item_name	{
             	margin: 0px 0px 0px 0px;
             	padding: 0px 0px 10px 0px;
	background:#fff;
		}


}