html{
	font-size:62.5%;
	height:100%;
}

.black{
	color:#231815;
}

body{
	font-size:1rem;
	font-family: griffith-gothic, sans-serif;
	font-weight: 400;
	font-style: italic;
	height:100%;
}

body div{
	position:relative;
	height:100%;
}

h1{
	margin:0;
}

img{
	width:100%;
}

body h1.logo{
	position: absolute;
	z-index:1;
	width: 60%;
	top: 25%;
	left: 50%;
	transform:translate(-50%,-50%);
	max-width:350px;
	margin:0 auto;
}

ul.lang{
	font-size:2.6rem;
	position:absolute;
	list-style-type:none;
	text-align:center;
	top:70%;
	left:50%;
	transform:translate(-50%,-30%);
	padding:0;
	margin:0;
}

ul.lang li{
	line-height:6rem;
}

ul.lang li a{
	text-decoration:none;
}

@media screen and (min-width: 560px){
	a:hover{
		opacity:0.6;
	}
	
	body div{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		width:40%;
		height:auto;
	}
	
	body div h1.logo{
		position:static;
		width:100%;
		transform:translate(0);
	}
	
	bod h1.sp{
		width:30%;
		top: calc(50vh - 15vw);
		left: 35vw;
	}
	
	body div ul.lang{
		display:flex;
		justify-content:center;
		margin:0;
		padding:0;
		font-size:2.2rem;
		position:static;
		transform:translate(0);
	}
	
	body div ul.lang li{
		margin:0;
		padding:0;
		line-height:1.5;
	}
	
	body div ul.lang li::before{
		content:"/";
		padding:0 0.7em;
	}
	
	body div ul.lang li:first-child::before{
		content:none;
	}
	
}

@media screen and (min-width: 960px){
}