@charset "utf-8";

/*========= スクロール途中でヘッダーが表示＆非表示するためのCSS ===============*/

#header{
    /*fixedで上部固定*/
	position: fixed;
	height: auto;
	width:100%;
    z-index: 999;/*最前面へ*/
	/*以下はレイアウトのためのCSS*/
	display: flex;
	justify-content: space-around;
	align-items: center;
	background:#fff;
	color:#fff;
	text-align: center;
	padding: 20px 10px 20px 10px;
}
@media screen and (max-width: 768px) {
#header{
justify-content: flex-start;
}
}

/*　上に上がる動き　*/

#header.UpMove{
	animation: UpAnime 0.5s forwards;
	opacity: 0.8;
}

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

/*　下に下がる動き　*/

#header.DownMove{
	animation: DownAnime 0.5s forwards;
	opacity: 0.8;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}

/*========= レイアウトのためのCSS ===============*/

h1{
	font-size: 25px;
}

h2{
	font-size: 25px;
	text-align: center;
}
#area-3 h2{
width: 100%;
max-width: 600px;
margin: 0 auto 20px auto;
text-align: left;
}

small{
	background:#c8161e;
	color:#fff;
	display: block;
	text-align: center;
	padding:20px;
}

nav p{
color: #555;
    font-size: 12px;
    text-align: right;
    margin-bottom: 10px;
    margin-right: 5px;
	display: none;
}
nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
}
nav ul li{

}
nav ul li:nth-last-of-type(1){
margin-left:10px !important;

}

nav ul li a{
display: block;
    text-decoration: none;
    color: #474542;
    padding: 10px;
    transition: all 0.3s;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1rem;

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

main {
	    padding-top: 64px;
}
section{
	padding:0px;
}

section:nth-child(2){
	
}
section:nth-child(3){

}
section:nth-child(3){

}

@media screen and (max-width: 768px) {
nav ul{
flex-direction: column;
}
main {
    padding-top: 81px;
}

section{
	padding:10px;
}

}