@charset "utf-8";

/*========= ページトップのためのCSS ===============*/

/*リンクの形状*/
#page-top a{
 display: flex;
 justify-content:center;
 align-items:center;
 background:#00551C;
 border-radius: 5px;
 width: 80px;
 height: 80px;
 color: #fff;
 text-align: center;
 text-transform: uppercase; 
 text-decoration: none;
 font-size:2rem;
 transition:all 0.3s;
}

#page-top a:hover{
 background: #777;
}

/*リンクを右下に固定*/
#page-top {
 position: fixed;
 right: 10px;
 bottom:10px;
 z-index: 2;
   /*はじめは非表示*/
 opacity: 0;
 transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
 animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
 from {
   opacity: 0;
 transform: translateY(100px);
 }
 to {
   opacity: 1;
 transform: translateY(0);
 }
}

/*　下に下がる動き　*/

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

/*========= レイアウトのための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;
}

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

section{
 padding:100px 30px;
}

section:nth-child(2n){
 background:#ffffff; 
}

#footer{
 position: relative;
 z-index: 2;
}