html, body{
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Arial', sans-serif;
font-weight: bold;
min-height: 100vh;
background-image: url(../images/background.jpg);
background-size: cover;
background-attachment: fixed;
background-color:rgba(255,255,255,0.3);
background-blend-mode:lighten;
margin:0;
color:#333
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
color: #fff;
  }
.text{
font-size:1.6rem;
}
.label{
  font-size: 4.2rem;
  color: #fff;
  text-shadow: 2px 2px 1px #000;
}
.subtitle{
  margin: 0;
  padding: 10px;
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
}
.subtitle:before{
    content: "";
    display: block;
    border-top: solid 5px #fff;
    width: 100%;
    height: 5px;
}
.subtitle::after{
    content: "";
    display: block;
    border-top: solid 5px #fff;
    width: 100%;
    height: 5px;
}
.button a{
  position: relative;
  background-color: #5ee9ff;
  display: inline-block;
  padding: 20px 60px;
  text-align: center;
  border: 3px solid #000;
  color: #000;
  font-weight: bold;
  font-size: 1.3rem;
  transition: all .2s;
  }
 .button a:after {
   position: absolute;
   content: "";
   top: 23px;
   right: 15px;
   width: 8px;
   height: 8px;
   border-top: 3px solid #000;
   border-right: 3px solid #000;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
  }
.b{
font-weight: bold;
}
.scrollFlex{
display: flex;
}
.flex{
display: flex;
}
.grid{
display: grid;
  }
.a-c{
align-items: center;
}
.j-b{
justify-content: space-between;
}
.j-e{
justify-content: space-evenly;
}
.t-c{
text-align: center;
}
.t-r{
text-align: right;
}
.t-l{
text-align: left;
}
.m-2r{
margin: 2rem;
}
/* アニメーション */
.fixScreen{
  animation-name: fixScreenAnime;/*アニメーションの定義名*/
  animation-duration:0.5s;/*アニメーション変化時間 ※デフォルト*/
  animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
  opacity:0;}
.fadeUp {
  animation-name: fadeUpAnime;/*アニメーションの定義名*/
  animation-duration:0.5s;/*アニメーション変化時間 ※デフォルト*/
  animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
  opacity:0;
  }
  
  /*アニメーションの開始から終了までを指定する*/
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  /* フッター */
.footer{background:#0A95AA; color:#fff;}
.footLeft{width: 40%;}
.footRight{width: 40%;}
.footRight img{width: 32.5%;}
.copy{
  font-size:1.6rem;
  text-align:center;
  margin-block-end: 0;
}
@media only screen and (min-width:500px) and (max-width:960px){
  .scrollFlex{
    display: flex;
    }
}
@media only screen and (min-width:961px){

  /* メイン */
  .grid{
      line-height:40px;
      color:#fff;
      font-size:2.2rem;
      height:400px;
      width: 100%;
    }

  .bottom-nav{
    text-align:center;
    background:#02BDD6;
    width:100%;
    color:#fff;
    height:35px
  }
  .bottom-nav .nav{float:none; margin:0}
  .bottom-nav .nav a{ padding: 0 25px; line-height:35px}
  .fixed-bottom{
    top:auto;
    bottom:0;
  }}