body {
   font-family: "ヒラギノ丸ゴPro N",
                Meiryo;
}

.navbar{
  background: rgba(225, 225, 225, 0.8);
}

.nav-item .nav-link{
    color: #3c6361;
}

.sanyuulogo{
    width: 9rem;
  }  

.overview img{
    width: 100%;
    }
    

.logo{
    padding-top: 1.5rem;
    margin-bottom: 2rem;

}

.border{
  background:url(../img/bg_border.png) center no-repeat;
  background-size: cover;
  padding-right: 2rem;
  padding-left: 2rem;
  padding-bottom: 2rem;
}

.background{
    background-color: #ffffff;
    padding: 0px;
}

.bridge{
  background:url(../img/bridge.png) center no-repeat;
  background-size: cover;
}

.background_b{
  background-color: #bbd8d4;
  padding-right: 2rem;
  padding-left: 2rem;
  padding-bottom: 1rem;
}

.background_lb{
  background-color: #cce1e2;
  background-size: cover;
  padding-top: 5px;
}

.footer{
  background-color: #008bbb;
  margin: 0;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

h1{
    font-size: 18px;
    color: #ffffff;
    text-align: center;
}
address{
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    
}
.copyright{
    font-size: 14px;
    color: #ffffff;
    text-align: center;
}

@media (min-width: 992px) {
    .navbar-nav li a {
      font-size: 1.4rem;
    }
   }
   @media (max-width: 991.98px) {
    .navbar-nav li a {
      font-size: 1.4rem;
    }
   }
   
   @media (max-width: 767.98px) {
    .navbar-nav li a {
      font-size: 1.2rem;
    }
   }
   @media (max-width: 575.98px) {
    .navbar-nav li a{
      font-size: 0.7rem;
    }
   }

/* th */
@media (min-width: 992px) {
    th{
      font-size: 1.2rem;
    }
  }
  @media (max-width: 991.98px) {
    th{
      font-size: 1rem;
    }
  }
  
  @media (max-width: 767.98px) {
    th{
      font-size: 0.8rem;
    }
  }
  
  @media (max-width: 575.98px) {
    th{
      font-size: 0.7rem;
    }
  }

/* td */
@media (min-width: 992px) {
    td{
      font-size: 1rem;
    }
  }
  
  @media (max-width: 991.98px) {
    td{
      font-size: 1rem;
    }
  }
  
  @media (max-width: 767.98px) {
    td{
      font-size: 0.8rem;
    }
  }
  
  @media (max-width: 575.98px) {
    td{
        font-size: 0.7rem;
        padding-right: 2rem;
    }
  }

  @media (min-width: 992px) {
    .heading{
      font-size: 1.0rem;
    }
  }
  
  @media (max-width: 991.98px) {
    .heading{
      font-size: 0.95rem;
    }
  }
  
  @media (max-width: 767.98px) {
    .heading{
      font-size: 0.8rem;
    }
  }
  
  @media (max-width: 575.98px) {
    .heading{
      font-size: 0.65rem;
    }
  }

  @media (min-width: 992px) {
    .br-sp{
      display: none;
    }
  }
  
  @media (max-width: 991.98px) {
    .br-sp{
      display: none;
    }
  }
  
  @media (max-width: 767.98px) {
    .br-sp{
      display: none;
    }
  }
  
  @media (max-width: 575.98px) {
    .br-sp{
        display: block;
    }
  }

  @media (max-width: 575.98px) {
    span{
      white-space: nowrap;
    }
  }

  @media (min-width: 992px) {
    .nowrap{
      white-space: nowrap;
    }
  }
  
  @media (max-width: 991.98px) {
    .nowrap{
      white-space: nowrap;
      padding-left: 5rem;
    }
  }

  @media (max-width: 767.98px) {
    .nowrap{
      white-space: nowrap;
      padding-left: 4rem;
    }
  }

  @media (max-width: 575.98px) {
    .nowrap{
      padding-left: 1.5rem;
    }
  }


  @media (min-width: 992px) {
    .box{
        padding-right: 8rem;
        padding-left: 8rem;
   }
}
   @media (max-width: 991.98px) {
    .box{
        padding-right: 5rem;
        padding-left: 5rem;
    }
   }
   
   @media (max-width: 767.98px) {
    .box{
        padding-right: 2rem;
        padding-left: 2rem;
    }
   }
   @media (max-width: 575.98px) {
    .box{
        padding-right: 1rem;
        padding-left: 1rem;
    }
   }

/* アニメーション */

/* ローディング */
#loader {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
  }
  #loader .loader-slide {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #008bbb;
  }
  #loader .loader-slide h2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
    font-size: 5rem;
    font-family: "chalkduster","segoe script";
    color: #ffffff;
  }
 /* ローディングのレスポンシブフォントサイズ */
@media (min-width: 992px) {
    #loader .loader-slide h2{
      font-size: 5rem;
    }
  }
  @media (max-width: 991.98px) {
    #loader .loader-slide h2{
      font-size: 4rem;
    }
  }
  
  @media (max-width: 767.98px) {
    #loader .loader-slide h2{
      font-size: 2.5rem;
    }
  }
  
  @media (max-width: 575.98px) {
    #loader .loader-slide h2{
      font-size: 2.5rem;
    }
  }

  #loader .loader-slide.open {
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-delay: 1s;
  }

  @keyframes slideOut {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(100%);
    }
  }

/* フッターの波 */
.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px;
  min-height:100px;
  max-height:150px;
}
/* フッターアニメーション*/

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  
  }