/* ========================================
   共通設定
======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  color: #fff;
  font-size: 100%;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  background: #000;
}

img {
  display: block;
  width: 100%;
}

#body ul {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

#body ul li a {
  display: block;
  width: 100%;
}

#body ul li span {
  display: none;
}

footer {
  display: none;
}


/* ========================================
   PC：641px以上
======================================== */

@media screen and (min-width: 641px) {
  /* SP専用要素を非表示 */
  .sp,
  #body ul li img.sp {
    display: none;
  }

  /* PC専用要素を表示 */
  .pc,
  #body ul li img.pc {
    display: block;
  }

  /* 下段は3列 */
  #body ul li {
    width: calc(100% / 3);
  }

  /* 上段の店舗画像は5列 */
  #body ul li:nth-of-type(-n + 5) {
    width: calc(100% / 5);
  }

  /*
   * .shopsの高さはJavaScriptで設定される。
   * 画像をその高さ全体に表示する。
   */
  #body ul li.shops {
    overflow: hidden;
  }

  #body ul li.shops a {
    height: 100%;
  }

  #body ul li.shops img.pc {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 下段の画像は元の縦横比で表示 */
  #body ul li:not(.shops) img.pc {
    width: 100%;
    height: auto;
    object-fit: initial;
  }
}


/* ========================================
   SP：640px以下
======================================== */

@media screen and (max-width: 640px) {
      #h {
        height: 7vh;
        border-bottom: solid 1px #444;
    }

      #h h1 {
        height: 100%;
        text-align: center;
        padding: 5px 0;
    }
  #h img {
    width: auto;
    height: 100%;
    display: inline-block;
  }

  /* PC専用要素を非表示 */
  .pc,
  #body ul li img.pc {
    display: none;
  }

  /* SP専用要素を表示 */
  .sp,
  #body ul li img.sp {
    display: block;
  }

  /* SPでは1列表示 */
  #body ul li{
    width: 50%;
    height: auto;
  }

  #body ul li a {
    height: auto;
  }

  #body ul li img.sp {
    width: 100%;
    height: auto;
    object-fit: initial;
  }
}