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

* {
  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%;
    width: 100%;
    display: block;
    position: relative;
  }

  #body ul li.shops a:before,
  #body ul li.shops a:after{
    content: "";
    display:  block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top:0;
    left: 0;
  }
  #body ul li.shops a:before{
    border: solid .8vw #000;
    opacity: .8;
    z-index: 1;
  }
  
  #body ul li.shops a:after{
    top:auto;
    bottom: 2vw;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
  }

  #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;
  }
  
  
  #body ul li.shops:nth-of-type(1) a:before{border-color: #ff00b4;}
  #body ul li.shops:nth-of-type(2) a:before{border-color: #ffea00;}
  #body ul li.shops:nth-of-type(3) a:before{border-color: #5f1a1e;}
  #body ul li.shops:nth-of-type(4) a:before{border-color: #594a27;}
  #body ul li.shops:nth-of-type(5) a:before{border-color: #bf3f26;}
  
  #body ul li.shops:nth-of-type(1) a:after{background-image: url(../../images/index/202608/cs-f_logo.png);}
  #body ul li.shops:nth-of-type(2) a:after{background-image: url(../../images/index/202608/cs-c_logo.png);}
  #body ul li.shops:nth-of-type(3) a:after{background-image: url(../../images/index/202608/rin-f_logo.png);}
  #body ul li.shops:nth-of-type(4) a:after{background-image: url(../../images/index/202608/rin-tk_logo.png);}
  #body ul li.shops:nth-of-type(5) a:after{background-image: url(../../images/index/202608/rin-c_logo.png);}
}


/* ========================================
   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;
  }
}