471ec05a5f389e369a70a0e1d38b2756d69a1bf2031c2cd60157d8897ad06a21

Source Code:

body {
		margin: 0;
	   // text-align: center;
	}
	ul {
		list-style-type: none;
		//min-width:900px;
	   // position: absolute;
		margin: 0;
		padding: 0;
		overflow: hidden;
		left: 0;
		right: 0;
		//width:100vw;  
		
	}
	
	.lang {
		background-color: #333;
	}
	.lang li{
		float: left;
		border-right:1px solid #999;
	}
	
	.lang a {
		display: block;
		color: #bbb;
		text-align: center;
		padding: 10px 10px;
		text-decoration: none;
	}
	.sites a {
		display: block;
		color: #555;
		text-align: center;
		padding: 5px 5px;
		text-decoration: none;
	}
	.sites span {
		display: block;
		color: #555;
		text-align: center;
		text-decoration: none;
		float: left;
	}
	.sites li {
		float: left;
		border-right:1px solid #ddd;
	}
	
	li a:hover:not(.active) {
		background-color: #111;
		color:#fff;
	}
	
	li:last-child {
		border-right: none;
	}
	
	.active {
		background-color: #4CAF50;
	}
	.incontent {
	    margin-top: 10px;
	   // padding: 10px 10px;
		border-top:1px solid #d6e4dd;
	  // padding: 5px;
	   background-color: #f7fbf9;
		}	
	.incontent a {
	   // margin: 10;
	   // padding: 10px 10px;
	   //padding-right: 10px;
		}	
	.incontent a:nth-child(2n+1) {
	 //  background-color: #eee;
		}
	.tags a{
	   background-color: rgba(170, 249, 168, 0.87);
	   //display:inline-block;
	   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
	  border: 1px solid #bbb;
	   padding: 0px 8px;
	   border-radius: 14px;
	   text-decoration: none;
	  // height=30px;
	   line-height: 2;
		}
	
	.tags a:hover:not(.active) {
		background-color: rgba(10, 247, 4, 0.87);
	}
a {
    font-size:18px;
	color: #434355;
	//text-decoration: none;
}
.incontent a:visited {color:#a0a0a1;} 
.incontent {
//	a:visited {color:#a0a0a1;} /*訪問済みのリンクの色*/
//.incontent a:hover {color:#ffffff; background:#0c0c0c;} 
//.incontent a:active {color:#ffff00;} 
	a {font-style:normal;
	//color:#0066c0;}

}
	.vid { transition: all .2s ease-in-out;
		display: inline-block;
		position:relative;
		width: 300px;
	//	height: 345px;
		margin: 3px;
		padding: 15px;
		//box-shadow: 1px 1px 2px #555;
		//border: 1px solid #fff;
	}
	.vid img{
		margin: 0px;
	}
	.vid:hover { transform: scale(2.0);background-color:#fff;z-index:555555 !important;padding:0px;margin: 5px; border: 1px solid #eee;box-shadow: 4px 4px 8px #000;}
	
	.thum img{
		width: 300px;
	}
	.thum {
    position: relative;
   display: inline-block;
 //  width: 270px;
  // height: 205px;
   //margin: 5px;
   border: 3px ;//solid #73AD21
  }
	.dwc {
    bottom: 0;
    font-size: 18px;
    font-weight: bold;
    padding: 1px 3px;
    position: absolute;
    right: 0;
    text-align: right;
    text-decoration: none;
    background-color: rgba(0,0,0,.7);
    color: #fff;
	}
.myloader {
  text-align: center;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

.button {
  display: inline-block;
  padding: 15px 25px;
 // font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}