@charset "UTF-8";

body{
	font-family: sans-serif;
     background-image: url('../img/img5.jpg');
     background-position: center;
background-size: cover;
min-height: 100vh;
}


img{
	vertical-align:bottom;
}

h1{
	color:#FCB045;
	font-size:2.6em;
	font-weight:bold;
	text-align:center;
}

header{
	background: #020024;
background: linear-gradient(171deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
	padding: 30px 0;
	margin-bottom: 40px;
}

main{
	width:640px;
	margin:0 auto;
	display:block;
}

.naka{
	width:640px;
	margin: 0 auto;
	text-align: center;
}

figure{
	margin-bottom:20px;
}

ul{
	margin:0 auto;
}

ul li{
	margin-right:10px;
	margin-bottom: 10px;
	float:left;
	list-style-type:none;
}

ul li a:hover{
	transition:opacity .3s;
	opacity:.5;
}

ul li:last-child{
	margin-right:0;
}


/* レスポンシブへ変更 */

@media only screen and (max-width: 768px) {
	main {
		width: 98%;
	}
}

img{
max-width:100%;
height:auto;
}
.fuwafuwa {
animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
background:url(../img/choucho.png) no-repeat center center / 70px auto;
display: inline-block;
transition: 1.5s ease-in-out;
width: 175px;
height: 80px;
margin-top: 15px;

}

@keyframes fuwafuwa {
0% {
transform:translate(0, 0) rotate(-7deg);
}
50% {
transform:translate(0, -7px) rotate(0deg);
}
100% {
transform:translate(0, 0) rotate(7deg);
}
}