@media screen and (min-width: 1200px) {
  .navbar-expand-xl .navbar-collapse {
    display: ruby !important;
  }
}

@media screen and (min-width: 768px) {
  .nav-link {
    padding: 0;
  }
}

@media (max-width: 1199.9px) {

  main {
    padding-top: 56px;
  }

  .navbar {
    background-color: rgb(255, 255, 255);
  }

  .nav-link {
    padding: .5rem 1rem;
  }

  .navbar-brand {
    margin-right: 0;
  }

  .navbar-items {
    width: 100%;
  }

  .navbar-collapse {
    padding-top: 1rem;
    text-align: left;
  }

  li.nav-item {
    border: initial !important;
  }

  .scroll-nav .navbar-items {
    display: initial !important;
    justify-content: initial !important;
  }

  .container-fluid.nav-link a {
    display: initial;
    place-items: initial;
  }
}

@media screen and (max-width: 767.9px) {

  main {
    padding-top: 50px;
  }

  .navbar-brand .logo {
    font-size: 0.8rem !important;
  }

  .logo img {
    width: 60px !important;
  }

  .headline picture img {
    height: 200px !important;
  }

  .top-service-item .picture,
  .top-service-item.large .picture {
    height: 150px !important;
  }

  .top-service-item .picture img,
  .top-service-item.large .picture img {
    height: 150px !important;
  }

  .top-service-item .picture::before,
  .top-service-item.large .picture::before {
    height: 150px !important;
  }

  .top-service-item .picture .title,
  .top-service-item.large .picture .title {
    font-size: 1.3rem !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }

  .service-item .picture {
    height: 200px !important;
  }

  .service-item .picture img {
    height: 150px !important;
  }

  .service-item .picture::before {
    height: 50px !important;
  }

  .service-item .picture .title {
    height: 50px !important;
    line-height: 50px !important;
  }

  .flow-item {
    padding: 0 0 0.5rem 0.3rem !important;
  }

  .flow-item .title {
    font-size: 1.2rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .flow-item li {
    font-size: 0.8rem;
  }

  .flow .start {
    font-size: 1.2rem !important;
  }

  .flow .arrow {
    font-size: 1.2rem !important;
  }

  .flow .end {
    font-size: 1.2rem !important;
  }

  .headline .page {
    padding-left: 1rem !important;
  }

  .headline nav {
    font-size: 1rem !important;
  }

  .headline .page .title {
    font-size: 1.5rem !important;
  }

  .subtitle::before {
    width: 0.5rem !important;
    height: 1.5rem !important;
    margin-right: 0.5rem !important;
  }

  .subtitle {
    font-size: 1.2rem !important;
  }

  .subhead::before {
    margin-right: 0.5rem !important;
  }

  .subhead {
    font-size: 1.0rem !important;
  }

  .explanation {
    font-size: 0.8rem !important;
  }

  .explanation .fs-2 {
    font-size: 1rem !important;
  }

  .gis-link {
    font-size: 0.8rem !important;
  }

  a[href$=".pdf"] {
    padding-left: 1rem;
  }

  .news-list {
    background-color: white !important;
    box-shadow: none !important;
  }

  .news-content {
    display: block !important;
  }

  .news-area {
    margin: 0 1rem;
  }

  .news-content {
    font-size: 15px;
  }

  .news-area {
    margin: 0 0.5rem;
  }

  .news-content {
    font-size: 15px;
  }

  .top-title .main {
    font-size: 2rem;
    padding-left: 0.5rem;
  }

  .top-title .sub {
    font-size: 1rem;
    padding-left: 0.5rem;
  }

  .heading-title .main {
    font-size: 1.5rem;
    padding-left: 0.5rem;
  }

  .heading-title .sub {
    font-size: 1rem;
    padding-left: 0.5rem;
  }

  .product-area .row .picture {
    padding-bottom: 1rem;
  }

  .product-button a {
    max-width: initial;
  }

  .paginationjs-pages>ul>li>a {
    padding: 8px 15px;
  }

  .paginationjs-prev,
  .paginationjs-next {
    display: none;
  }

  .not-news {
    font-size: 1.0rem;
  }

  .top-information .info {
    padding-bottom: 2rem;
  }
}

@media screen and (max-width: 576px) {
  .top-info-item .picture::before {
    left: -5px;
  }

  .top-info-item .picture .title {
    left: 10px;
  }
}

@media screen and (max-width: 575px) {

  main {
    padding-top: 0 !important;
  }

  .navbar {
    position: sticky;
  }

  .top-font-anim.is-animated {
    clip-path: polygon(0 0, 400% 0, 0 200%);
  }

  footer {
    font-size: 0.6rem;
  }

  .top-font-anim {
    transition: 5s ease;
  }
}