body{
		background: linear-gradient(50deg, rgb(110, 210, 210), rgb(250, 32, 32));
		font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;
	}

	h1{
		font-size:28px;
		color:#ffc;
		text-align: center; 
	}
	
	h2{
		font-family:"Helvetica Neue",
	    	Arial,
	    	"Hiragino Kaku Gothic ProN",
	    	"Hiragino Sans",
	    	Meiryo,
	    	sans-serif;
		margin-top:22px;
		font-size:22px;
		color:#fff;
		font-weight: bold;
		text-align: center; 
	}
	
	
	.base{
		width:100%;
		opacity: .8;
		padding-bottom:30px;
		height:100%;
	}
	
	.list{
		float:left;
		width:100%;
		padding-top:33px;
	}
	
	.cs{
		margin:0% 5%;
		width:90%;
	}
	
	.lists{
		float:left;
		width:calc(100% / 3 - 2px) ;
		background-color:#363636;
		height:auto;
		text-align: center;
		border-radius: 10px;
		color:#fff;
		opacity: .88;
	}

	.lists:hover{
		opacity: 1.0;
	}
	
	.CL1{
		margin-right:3px;
	}
	
	.CL2{
		margin-right:3px;
	}
	
	.CL3{
		
	}
	
	footer{
		float:left;
	    width: 100%;
	    height: 50px;
	    background-color: #063939;
	    margin-top:30px;
	    color: white;
	    text-align: center;
	}
	
	.footerText{
		color:#33dfff;
	}
	
	.listText{
		margin:3px 12px 10px 12px;
		text-align: left;
	}
	
	
	.fits-picture{
		object-fit: contain;
		//position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.fits-picture:hover {
		box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
		transition: .7s;
		transform: scale(0.9);
	}
 

	
@media screen and (max-width: 960px) {
	.lists{
		width:80% ;
		margin:0 10%;
	}
	
	.CL1{
		margin-right:0px;
		
	}
	
	.CL2{
		margin-top:8px;
		margin-right:0px;
	}
	
	.CL3{
		margin-top:8px;
	}
	
	.cs{
		margin:0% 0%;
		width:100%;
	}
	
	body{
		background: linear-gradient(90deg, rgb(110, 210, 210), rgb(250, 64, 64));
	}
}