A:link { color: green;}
A:visited { color: olive;}
A:active { color: yellow;}
A:hover { color: orange;}

/* section{
	width:100%;
	height:100vh;
	background:#000;
	background:url(img/TH/Hero.jpg) center/cover;
} */
body {
	margin: 0;
	padding:0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
	/* background:url(img/Hero-Ryoko_C.jpg) center/cover; */
	background-size:cover;
	background-position-x:center;
	/* background-repeat:no-repeat; */

}

nav{
	margin-left:10%;
	padding:5px;
	position: fixed;
	display: flex;
	/* justify-content: center; */
	top:0;
	background:#000;
	text-align: center;
	z-index:1;
}
nav a{
	position: relative;
	color:#fff;
	text-decoration: none;
	padding:10px 20px;
	font-size: 1em;
}
.contents{
	margin-top:25px;
	width:100%;
	/* height:100vh; */
	color:#121212;
}
.contents:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	height:200%;
	width:100%;
	/* background:linear-gradient(90deg,#000,#000,rgba(0,0,0,0.4)); */
	background:linear-gradient(to right,#000 20%,rgba(0,0,0,0.4));

	z-index:-1;
}

.wrap{
	z-index:10;

}
.title{
	margin-left:10%;
	padding:5px;
	font-size:5.5rem;
	color:dimgray;
	left:200px;
	z-index:10;

	}
.stitle{
	margin-left:10%;
	padding:5px;
	font-size:2rem;
	color:dimgray;
	left:200px;
	z-index:10;

	}
.sstitle
{
	font-size:1rem;

}
.tags { 
	margin-left:10%;
	padding:5px;
	height:100%;
	width:55%;
	color:white;
	overflow-wrap:break-word;
	font-size:15px;
	z-index:100;
	z-index:10;


	
}	


.tagw{
	margin-left:10%;
	padding:5px;
	overflow-wrap:break-word;
	font-size:15px;
	text-decoration:none;
	z-index:10;

}	
.tagwbk{
	margin-left:10%;
	padding:5px;
	overflow-wrap:break-word;
	font-size:15px;
	text-decoration:none;
	z-index:10;

}	
	  
.footers{
	position:fixed;
	bottom:5px;
	font-size:10px;
	color:#dedede;
	text-align:right;
	height:30px;
	right:10px;
	z-index:10;

}
.jump{
	color:white;
	padding:10px 0 0 10px;
}
.jump a 
{
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 5px;
	border:1px solid #fff;
	border-radius: 4px;
}
.jump:hover ~ .jumpsection{
	opacity:1;
}
.jumpsection{
	position: absolute;
	left:0;
	top:60px;
	width:100px;
	background:black;
	z-index:10;
	opacity: 0;
	transition-delay: 0.8s;
	border:1px solid #fff;
	background-color: rgba(0,0,0,0.4);

}
.jumpsection a 
{
	text-decoration: none;
	color: #fff;
	font-weight: 600;
}
.jumpsection a:hover
{
	color: orange;
}
.jumpsection:hover{
	opacity:1;
}
.homeBtn
{
	color: #fff;
	font-weight: 600;
}
.homeBtn:hover
{
	color: orange;
}

@media(max-width:450px){
body{
	background-position-x:55%;
}
nav a{
	padding:4px 8px;
	font-size: 0.7em;
	}
.jump{
	color:white;
	padding:45px 0 0 10px;
	font-size: 0.8em;
	}
	
	
}	
@media (max-width: 550px){
	.title{
	margin-top:15%;
	margin-left:5%;
	padding:2px;
	font-size:3.5rem;
	left:10px;
	}
.stitle{
	margin-left:5%;
	padding:2px;
	font-size:1rem;
	left:10px;
	}
.tags { 
	margin-left:5%;
	padding:0px;
	height:100%;
	width:100%;
	font-size:9px;
}	
   }

@media (max-width: 900px){
	.title{
	margin-top:15%;
	margin-left:5%;
	padding:2px;
	font-size:4rem;
	left:10px;
	}
.stitle{
	margin-left:5%;
	padding:2px;
	font-size:1.2rem;
	left:10px;
	}
.tags { 
	margin-left:5%;
	padding:0px;
	height:100%;
	width:100%;
	font-size:11px;
}	
   }