@charset "utf-8";



h2		{
		font-size: 1.8rem;
		margin: 0px 0px 0px 0px;
		padding:  7px 0px 5px 15px;
		color: #333;
		background: #eee;
		border:  solid 1px #666;
		border-left:  solid 5px #000066;
		}

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

.left		{
             	margin: 0px 0px 0px 0px;
             	padding: 0px 0px 0px 0px;
		}

.right		{
		display: grid;
		width:100%;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		grid-template-columns: 48% 48%;
		justify-content: space-between;
		grid-template-areas:
		"title title"
		"lumi safe"
		"deco sun"
		"info info";
		}

.right a:hover {
		opacity:0.8;
		filter:alpha(opacity=80);
		-ms-filter:"alpha( opacity=80 )";
		}

.title		{
		grid-area: title;
             	margin: 0px 0px 10px 0px;
             	padding: 0px 0px 0px 0px;
		}

.lumi		{
             	margin: 0px 0px 20px 0px;
             	padding: 0px 0px 0px 0px;
		grid-area: lumi;
		}

.safe		{
             	margin: 0px 0px 20px 0px;
             	padding: 0px 0px 0px 0px;
		grid-area: safe;
		}

.deco		{
             	margin: 0px 0px 20px 0px;
             	padding: 0px 0px 0px 0px;
		grid-area: deco;
		}

.sun		{
             	margin: 0px 0px 20px 0px;
             	padding: 0px 0px 0px 0px;
		grid-area: sun;
		}

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

.submenu li	{
		margin:0;
             	padding: 0px 0px 0px 5px;
		list-style:none;
		}

.submenu li a:before	{
			content:"\0025a0";
			color:#3399ff;
			}

.submenu li a		{
			display:block;
			padding:10px 2px;
			color:#000;
			border-bottom:1px dotted #ddd;
			text-decoration:none;
			}

.submenu li a:hover	{
			background-color: #eee;
			}

.info		{
		grid-area: info;
             	margin: 0px 0px 0px 0px;
             	padding: 0px 0px 0px 0px;
		}


.info a {
	color:#333;
	text-decoration:none;
}
.info a:hover {
	color:#333;
	text-decoration:underline;
}

.info dt {
	border-bottom:none;
}
.info dd {
	padding-bottom:0.8em;
	border-bottom:1px solid #ddd;
}


.safety {
        	max-width: 98%;
		margin:20px auto;
		background:#d5e1f0;
		padding:20px;
	   	font-size:1.0em; 
	   	color:#003366;
		}

.bnr {
             	margin: 0px 0px 0px 0px;
             	padding: 0px 0px 0px 0px;
	overflow:hidden;
}
.bnr ul {
	overflow:hidden;
}
.bnr li {
	margin:0 0 10px 0;
	padding:0;
	list-style:none;
}
.bnr li a:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter:"alpha( opacity=80 )";
}
.bnr img {
	width:100%;
}
















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


.grid		{
		display: grid;
			width:100%;
		gap: 20px;
		grid-template-columns: 1fr;
		grid-template-columns: 1fr;
		}

.right		{
		display: grid;
		color: #000;
		width:100%;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		grid-template-columns: 1fr;
		grid-template-areas:
		"title"
		"lumi"
		"safe"
		"deco"
		"sun"
		"info";
		}

.lumi,.safe,.deco,.sun		{
             	margin: 20px auto;
		}

.submenu	{
    		display: grid;
    		grid-template-columns: 50% 1fr;
    		grid-template-rows : 1fr 1fr;
             	margin: 20px 0px 20px 0px;
             	padding: 0px 0px 0px 0px;
		}


.submenu ul   	{
             	list-style: none;
             	margin: 0px 0px 20px 0px;
             	padding: 0px 0px 10px 5px;
             	}

.submenu li    	{
             	float: left;
             	width: 95%;
             	margin: 0px 0px 10px 0px;
             	}


.submenu li a    {
	     	background-color: #3399ff;
             	color: #fff;
             	text-align: center;
             	text-decoration: none;
             	border-radius: 8px;
            	padding: 30px 0px;
             	margin: 0px 0px 0px 0px;
             	}

.submenu li a:hover 	{
	     	        background-color: #000066;
	        	color:#fff;
                	}

.submenu li a:before    {
			content:none;
			}

}