/*
 * ユーザー調整用CSS
 * Tailwind CSSの後に読み込まれるため、ここに書いたスタイルが優先されます。
 */

  .hidden {
    display: none;
  }

  .block {
    display: block;
  }

  .header-nav {
      flex: 1;
  }

  .menu-img {
    aspect-ratio: 16 / 9;
    position: relative;
  }

  .menu-img > img {
      position: absolute;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
  }

  .access-map {
      height: 400px;
  }

  .access-map > iframe {
      width: 100%;
      height: 100%;
  }

  .text-right {
      text-align: right;
  }

  .menber-price {
      font-size: 1.75rem;
      padding: 0 .25rem;
  }

  .grid.grid-cols-2.menu-grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .small-price {
    font-size: 0.775em;
  }
  

@media (min-width: 640px) {

  .sm\:h-44 {
    height: 16rem;
  }

  .md\:hidden {
    display: none;
  }

  .md\:block {
    display: block;
  }

  .grid.grid-cols-2.menu-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 1024px) {

  .access-map {
      height: auto;
  }

}