body{
	margin: 0;
	padding: 0;
	overflow-x:hidden;
}

p{
	margin:0;
	padding:0;
}

#icon{
	height:100vh;
	margin:0 auto;
	font-family:serif;
	font-size:1.5vw;
	background-color:#000000;
	position:relative;
	overflow-x:hidden;
}

#icon a{
	color:#000000;
}

#icon ul{
	width:100vw;
	height:100vh;
	overflow-x:hidden;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	margin:0;
	padding:0;
}

#icon ul li{
	background-size: cover;
	background-repeat:no-repeat;
	display:inline-block;
	vertical-align:middle;
	list-style:none;
	width:calc(100% / 6);
	height:100%;
	position:relative;
}

#icon ul li.elia{
	background-image:url(../img/ffxiv_20171108_205109.jpg);
	background-position:60% center;
}
#icon ul li.lyrica{
	background-image:url(../img/ffxiv_20180302_234922.jpg);
	background-position:45% center;
}
#icon ul li.simon{
	background-image:url(../img/ffxiv_20180418_224249.jpg);
	background-position:60% center;
}
#icon ul li.euphoria{
	background-image:url(../img/ffxiv_20171228_202257.jpg);
	background-position:56% center;
}
#icon ul li.mereaux{
	background-image:url(../img/ffxiv_20180324_234319.jpg);
	background-position:62% center;
}
#icon ul li.mirai{
	background-image:url(../img/ffxiv_20180324_204840.jpg);
	background-position:55% center;
}
#icon ul li a{
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	transition-duration:0.5s;
}
#icon ul li a:hover{
	background-color:rgba(0,0,0,0.5);
	transition-duration:0.5s;
}
#icon ul li a p{
	display:block;
	position:absolute;
	top:5%;
	left:0;
	width:100%;
	padding:1em 3%;
	box-sizing:border-box;
	line-height:0;
	background-color:rgba(255,255,255,0.3);
}

#icon .copy{
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:100%;
	padding:0.5em 0;
	background-color:rgba(0,0,0,0.5);
	color:#ffffff;
}

@media screen and (max-width: 640px){
#icon{
	width:100%;
	position:relative;
	overflow:auto;
}
#icon ul{
	width:100%;
	position:relative;
	top:0;
	left:0;
	transform:none;
}
#icon ul li{
	display:block;
	width:100%;
	height:calc(100% / 6);
	margin:0;
}

#icon ul li.elia{
	background-position:center 20%;
}
#icon ul li.lyrica{
	background-position:center 30%;
}
#icon ul li.simon{
	background-position:center 30%;
}
#icon ul li.euphoria{
	background-position:center 30%;
}
#icon ul li.mereaux{
	background-position:center 20%;
}
#icon ul li.mirai{
	background-position:center 25%;
}
#icon ul li a p{
	top:0;
	left:0;
	width:30%;
	height:100%;
	padding:1em 3%;
	box-sizing:border-box;
	font-size:4.5vw;
	color:#ffffff;
	text-align:left;
	line-height:normal;
	background-color:rgba(0,0,0,0.3);
}
#icon .copy{
	position:relative;
	top:0;
	left:0;
	transform:none;
	padding-bottom:35vw;
}
}