/* =========================================================
   01. Hero（SP）
   ========================================================= */

@media (max-width: 767px) {
  .top-hero__img {
    height: 55vh;
    min-height: 420px;
    max-height: 520px;
  }

  .top-hero__title {
    font-size: 1.25em;
  }

  .top-hero__note {
    font-size: 0.85em;
  }

  /* =========================================================
     02. Concept（SP）
     ========================================================= */

  .top-concept {
    padding: 80px 20px;
  }

  .top-concept__title {
    text-align: center;
    letter-spacing: 0.05em;
  }

  .top-concept__title span::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .top-concept__text {
    text-align: left;
    margin: 0 auto;
  }

  /* =========================================================
      03) Designs（SP）
     ========================================================= */

  .top-designs__title {
    font-size: 1.6em;
    letter-spacing: 0.12em;
  }

  .top-designs__lead {
    font-size: 0.9em;
  }

  .top-designs__name {
    font-size: 0.95em;
  }

  .top-designs__list {
    grid-template-columns: 1fr;
  }

  /* =========================================================
      04) Footer（SP）
     ========================================================= */

  section#main,
  section#home_info,
  section#footer_access {
    padding: 2em 1em;
  }

  section#footer_access .footer-access__inner {
    flex-direction: column;
  }

  section#footer_access .footer-access__map,
  section#footer_access .footer-access__info {
    width: 100%;
  }
}