@charset "UTF-8";
/* CSS Document */

body{
	width:100vw;
	height:100vh;
	background-image: url("images/ABOUT2.jpg");
	background-size:cover;
	background-position: center;
}

h1{
	color: aliceblue;
	font-size:60px;
}

h2{
	color: aliceblue;
}

#TOPCONTENTS{
	

    color: aliceblue;
}

a:hover{/*カーソルを当てたとき*/
    background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/
    font-size:40px;
	color: aliceblue;
  }
ul {
  list-style: none;
  float:left;
}

li{
	position: relative;
}

dl{
	position:absolute;
	top:0;
	margin:0;
	padding:16px 24px;
	box-sizing: border-box;
	color:#fff;
	background:rgba(20,120,150,.9);
	width:300px;
	height:300px;
}

dd{
	width: auto;
	height: auto;
	margin-top:80px;
	margin-bottom:50px;
	margin-left: 50px;
	margin-right: 50px;
}

.type1{
	overflow: hidden;
}
.type1 dl{
	transition:　opacity .6s, 
	transform .6s 
	cubic-bezier(0.215,0.61,0.355,1);
}
.type1:not(:hover) dl{
	opacity:0;
	transform:translateY(100%);
}

.type2{
	overflow: hidden;
}
.type2 dl{
	transition:　opacity .6s, 
	transform .6s 
	cubic-bezier(0.215,0.61,0.355,1);
}
.type2:not(:hover) dl{
	opacity:0;
	transform:translateY(100%);
}
.type3{
	overflow: hidden;
}
.type3 dl{
	transition:　opacity .6s, 
	transform .6s 
	cubic-bezier(0.215,0.61,0.355,1);
}
.type3:not(:hover) dl{
	opacity:0;
	transform:translateY(100%);
}

.type4{
	overflow: hidden;
}
.type4 dl{
	transition:　opacity .6s, 
	transform .6s 
	cubic-bezier(0.215,0.61,0.355,1);
}
.type4:not(:hover) dl{
	opacity:0;
	transform:translateY(100%);
}

.type5{
	overflow: hidden;
}
.type5 dl{
	transition:　opacity .6s, 
	transform .6s 
	cubic-bezier(0.215,0.61,0.355,1);
}
.type5:not(:hover) dl{
	opacity:0;
	transform:translateY(100%);
}