@charset "utf-8";


/*ヘッダーの大きさ*/
#header{
	height: 80px;
	width:100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	background:#00bfff;
	color:#fff;
	text-align: center;
	padding: 20px;
}

/*HeightMin(追従用)*/
#header.HeightMin{
	position: fixed;
    z-index: 999;/*最前面へ*/
	height:70px;
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-170px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}


.nav ul{
list-style: none;
display: flex;
justify-content: center;
}

.nav ul li a{
text-decoration: none;
color: #666;
padding:10px;
  transition:all 0.3s;
}

.nav ul li.current a,
.nav ul li a:hover{
    color:#fff;
}

@media screen and (max-width:768px) {
    .nav ul li a:hover{
    color: #666;
    }

    .nav ul li.current a {
    color:#fff;
    }
}


/*メイン*/

	body {
		background:#dda0dd;
	}

	.wrapper {
		width: 960px;
		margin:  0 auto;
		background: #f8f8ff;

	}

	.main-wrapper{
		width: 100%;
		text-align: center;
		display: flex;
		justify-content: space-between;
	}

	.main-contents{
		width: 100%;
		margin-left: 10px;
		margin-right: 10px;
	}

.section{
 display: flex;
 justify-content: space-between;
}



/*logo-images*/

#header img {
	width: 200px;
}