@charset "utf-8";

/* -----------------------------------------
responsive style
-------------------------------------------*/
@media screen and (max-width: 700px) {
  /* -----------------------
  header
  ----------------------- */
  #header {
    width: 100vw;
    top: 0;
    padding: 1rem 0.5rem;
  }
  .mainvisual img {
    height: 100vh;
  }
  /* -----------------------
  main
  ----------------------- */
  .menu {
    .title-container {
      flex-direction: column;
      gap: 0;
    }
    .list {
      grid-template-columns: 1fr;
    }
  }
  #access {
    .container {
      grid-template-columns: 1fr;
    }
    .map iframe {
      width: 100%;
    }
    & dt,
    & dl + p {
      padding: 0;
    }
    & dd {
      padding-left: 1rem;
    }
  }
  /* -------------------------
  footer
  ------------------------- */
  #footer {
    .container {
      flex-direction: column;
    }
    .logo {
      margin-bottom: 2rem;
    }
    .footer-navigation {
      flex-direction: column;
      gap: 1rem;
    }
  }
  /* デモサイトであることの明記 */
  #front-page::before {
    left: 15%;
    top: 43%;
    z-index: 5;
  }
}