@charset "UTF-8";
/*	index.html       */
html{
     	background-color:#ccc;
      margin:0px;
	padding:0px;
	font-family:"HG明朝E",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
}
body {
	text-align: left;
	margin:0;
	padding: 0;
	width:100%;
	background-color:#ddd;

}


h1{  
	color: #000;
	padding:1em;
	background-color:white;
	text-align:center;
	margin:0;
	font-size:16pt;
	line-height:150%;
	text-shadow:3px 3px 3px #C9C9F8;
	word-break:keep-all;
}
header{
	font-size:120%;
	color:#080;
}
p.right{
	text-align:right;
	margin-right:10%;
}

#リスト{
	padding-top:0;
	padding-bottom:1em;
	text-align: center;
	width:100%;
}


article p{
	margin:0 1em 0 1em;
	text-indent: 1em;
}

#リスト div{
	display:inline-block;
	border-color:#08f;
	width:220px;
	background-color:#fff;
	text-align:center;
	margin:1em;
	border:3px solid gray;
	vertical-align:top;
	font-size:90%;
	position:relative;
}
#リスト img{
	width:200px;
	height:130px;
}

#リスト div:hover{
	border-color:#f00;
	box-shadow:0 0 16px #ff8;
}
#リスト div a:hover::after{
	position:absolute;
	right:30%;
	top:25%;
	content:url("youtube_icon.png")
}

#リスト img{
	width:100%;
}

#リスト i{
	color:#00a;
	font-style: normal;
	font-size:120%;
}
#リスト a{
		color: #000; 
}
a {
	color: #00A; 
	text-decoration:none ; 
 }

footer{
	text-align:center;
	padding:0.5em;
	background-color: white ;
}

#戻る{
	position:fixed;
	top:0.1em;
	left:0.1em;
	font-size:20pt;
	padding:0.2em;
	width:3.5em;
	border:2px solid gray;
	text-align:center;
	border-radius:1em;
	opacity:0.1;
}

#戻る:hover{
	opacity:1;
	border-color:red;
	background-color:white;
	text-shadow:3px 3px 3px #C9C9F8;
}
#戻る a:hover{
	color:red;
}