@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
/* https://codepen.io/stephenpaton-tech/full/JjRvGmY */
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #000000 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 12px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 5px;
    border: 1px solid #636363;
  }

html,body{
	color: #000;
	background: #ccc;
	font-size: 15px;
	font-family: "Noto Sans JP";
	margin: 0;
	padding: 0;
}
a{
	color: #C00;
	cursor: pointer;
	text-decoration: none;
}
a:hover{
	color: #00C;
}
header{
	background: #999;
	text-align: center;
	width: 100%;
	padding: 5px 0;
	z-index: 5;
}
header #toplogo{
	background-image: url("./logo.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-origin: border-box;
	height: 64px;
}
h1, h2{
	margin: 0;
	padding: 0;
	text-align: center;
}
h1{
	display: none;
}
h2{
	color: #999;
	cursor: pointer;
	font-size: 0.8em;
	letter-spacing: .1em;
	text-shadow: 2px 2px 3px #000;
}
h2:hover{
	color: #eee;
	text-shadow: 2px 2px 3px #999;
}
h4{
	margin: 0px;
	padding: 8px 5px;
	border-top: 1px dashed #800;
	font-size: 1.2em;
	letter-spacing: .5em;
	border-radius: 5px;
}
main{
	margin: 0;
	padding: 0;
	padding-bottom: 50px;
	margin-top: 10px;
	text-align: center;
}
#output{
	color: #FFF;
	background: #000;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 50%, rgba(85, 85, 85, 1));
	padding: 5px 10px;
	margin: 0 10px;
	text-align: left;
	border-radius: 8px;
}
dl{
	margin: 5px;
}
dd{
	cursor: pointer;
	padding: 5px 3px;
	padding-left: 40px;
	letter-spacing: .2em;
	border-radius: 3px;
	font-size: .9em;
	display: block;
	position: relative;
}
dd #goSite{
	position: absolute;
	top: 3px;
	left: 2px;
	cursor: pointer;
	padding: 2px;
	z-index: 10;
}
dd:hover{
	color: #fc3;
}
.even{
	background: #333;
}
.open{
	color: #FF6;
}
.selected{
	background: #660;
}
.selected::before{
	content: ">";
}
#atention{
	color: #e00;
	font-size: 10px;
	padding: 0 3px;
	margin: 0;
	margin-top: 10px;
	letter-spacing: 2px;
}
#player
{
	color: #ccc;
	background: #333;
	position: fixed;
	right: 0px;
	bottom: 30px;
	margin: 0;
	padding: 0;
	width: 310px;
	border: 3px solid #000;
	border-radius:3px 0px 0px 3px ;
	-webkit-border-radius:3px 0px 0px 3px ;
	-moz-border-radius:3px 0px 0px 3px ;
	display: block;
	font-family: "Sawarabi Mincho";
	z-index: 10;
	opacity: 50%;
	
	animation-duration: 3s;
}
#player a{
	color: #990;
	text-decoration: none;
	font-size: .5em;
}
#player p{
	width:300px;
	overflow: hidden;
	margin: 3px;
	display: inline-block;
	border-top: 1px dashed #eee;
	border-bottom: 1px dashed #eee;
}
#desc
{
	/*word-break: break-all;*/
	
	display : inline-block;  /* 必須 */
	padding-left: 100%;    /* 右端から文字をスタートさせるため */
	white-space : nowrap; /* 改行が起こらないように対策 */
	line-height : .2em;         /* 行間（高さ）を1文字分にする */
	animation : scroll 55s linear infinite; /* 下のアニメーションを10秒かけて行い、それをくりかえす */
	
	color: #cc0;
	letter-spacing: .3em;
	text-shadow: 1px 2px 2px #000;
	font-size: .7em;
}
/* アニメーション（右から左に移動） */
@keyframes scroll{
	0% { 
		transform: translateX(0)
	}
	100% {
	transform: translateX(-100%)
	}
}
#closelink{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 15;
}
#closelink a{
	color: #eee;
	background: #900;
	padding: 2px;
	border-radius:3px 0px 0px 0px ;
	-webkit-border-radius:3px 0px 0px 0px ;
	-moz-border-radius:3px 0px 0px 0px ;
	font-family: "Noto Sans JP";
	font-weight: bold;
	letter-spacing: .1em;
}
#closelink a:hover{
	color: #FFF;
	background: #009;
}
#thum{
	background-color: #000;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .8);
	width: 128px;
	height: 64px;
	text-align: center;
	padding: 2px;
	margin: 3px 0;
}
#pref{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 15;
	
	color: #eee;
	background: #000;
	padding: 2px;
	font-family: "Noto Sans JP";
	font-size: .5em;
	letter-spacing: .2em;
}
#clock{
	position: absolute;
	bottom: 105px;
	right: 15px;
	
	font-size: .7em;
}
#prog{
	position: absolute;
	bottom: 90px;
	right: 15px;
	
	color: #666;
	font-size: .8em;
}
.strong{
	text-decoration: line-through;	//打消し線
}
.emp{
	text-decoration: underline;
}
#prog a{
	color: #CCC;
}
#prog a:hover{
	color: #ec0;
}
#copylink{
	font-size: .6em;
	text-align: right;
	margin-top: 5px;
}
footer{
	position: fixed;
	bottom: 0px;
	left: 0px;
	
	color: #eee;
	background: #333;
	font-size: .5em;
	text-align: center;
	padding: 5px;
	width: 100%;
}
footer a{
	color: #880;
}