@charset "utf-8";

/*========= 上部固定させるためのCSS ===============*/

#header{
  position: fixed;/*fixedを設定して固定*/
  height: 250px;/*高さ指定*/
  width:100%;/*横幅指定*/
    z-index: 999;/*最前面へ*/
  /*以下はレイアウトのためのCSS*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#0d1272;
  color:#fff;
  text-align: center;
    padding: 0 60px 80px 0;
}

/*fixedでブロックがなくなるのではじめの要素のトップに余白を持たせる*/
section#area-1{
  padding-top:140px;
}

/*==ふわっと出現させるためのCSS*/

/*　上に上がる動き　*/

#header.UpMove{
  position: fixed;
  width:100%;
  animation: UpAnime 0.5s forwards;
}

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

/*　下に下がる動き　*/

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


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

h1{
  font-size:1.2rem;
}

h2{
  font-size:1.2rem;
  text-align: center;
  margin: 0 0 30px 0;
}

p{
  margin-top:20px;  
}

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


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

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

@media (min-width: 321px)and (max-width: 540px) {

#header {
    position: fixed;
    height: 200px;
    width: 100%;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0d1272;
    color: #fff;
    text-align: center;
    padding: 0 60px 0px 0;
}

}


@media (min-width: 541px)and (max-width: 767px) {

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

}

@media screen and (max-width:768px){
 	
	nav ul li a {
	font-size:0.8rem;
    display: block;
    text-decoration: none;
    color: #FFF;
    padding: 2px;
	transition: all 0.3s;}

}

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

section{
}

section:nth-child(2n){
}