@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 店舗紹介 ◇◆◇
  
  
========================================================================================================================*/

/*-----------------------------------------------------------------------------------
  ページ見出し
-----------------------------------------------------------------------------------*/

#headline-warp { background-image:url(../image/headline.jpg); }


/*----------------------------------------------------------------------------------------------------

  店舗一覧
  
----------------------------------------------------------------------------------------------------*/

.shop { text-align:center; }
.shop.suzuki { margin-top:50px; }

@media screen and (max-width:767px) {
  .shop.suzuki { margin-top:2rem; }
}

.shop-head { font-size:150%; }
.shop.mitsubishi .shop-head,
.shop.mitsubishi .shopName { color:#e60012; }
.shop.suzuki .shop-head,
.shop.suzuki .shopName  { color:#0058a8; }

.shop:before {
  content:"";
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:contain;
}
.shop.mitsubishi:before {
  width:104px;
  height:100px;
  background-image:url(../../image/logo/mitsubishi.png);
}
.shop.suzuki:before {
  width:92px;
  height:80px;
  background-image:url(../../image/logo/suzuki.png);
}

@media screen and (max-width:767px) {
  .shop.mitsubishi:before {
    width:73px;
    height:70px;
  }
  .shop.suzuki:before {
    width:81px;
    height:70px;
  }
}

@media screen and (max-width:500px) {
  .shop.mitsubishi:before {
    width:62px;
    height:60px;
  }
  .shop.suzuki:before {
    width:69px;
    height:60px;
  }
}

@media screen and (max-width:420px) {
  .shop.mitsubishi:before {
    width:52px;
    height:50px;
  }
  .shop.suzuki:before {
    width:58px;
    height:50px;
  }
}

.shopListBlock-warp {
  position:relative;
  margin-left:-16px;
}

.shopListBlock {
  width:356px;
  float:left;
  margin-top:1.5em;
  margin-left:16px;
}

.shopList {
  background-color:#fff;
}

.shopList__photo { padding:6px 6px 0 6px; }

.shopList__data {
  padding:18px;
  text-align:left;
  line-height:1.5;
}

.shopName {
  font-size:125.0%;
  display:inline-block;
  margin-bottom:5px;
  position:relative;
  margin-top:-0.25em;
  margin-top:-0.25rem;
}

.shopList__data address span:after {
  content:"\A";
  white-space:pre;
}

.shopListBlock dl { margin-top:12px; }
.shopListBlock dl:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.shopListBlock dt {
  display:table;
  width:25%;
  border:1px solid #bebfc0;
  background-color:#e6e6e7;
  line-height:1;
  padding:5px;
  text-align:center;
  font-size:87.5%;
  float:left;
  clear:left;
  box-sizing:border-box;
  margin-bottom:4px;
}

.shopListBlock dd {
  display:table;
  float:left;
  width:75%;
  box-sizing:border-box;
  padding-left:0.5em;
  padding-left:0.5rem;
  word-break:break-all;
}

.shopListBlock dt span,
.shopListBlock dd span {
  width:100%;
  height:100%;
  display:table-cell;
  vertical-align:middle;
}

.gmap {
  width:100%;
  margin-top:0.75em;
  margin-top:0.75rem;
  position:relative;
}

.gmap:after {
  content:url(../../image/icon/glink-white.png);
  position:absolute;
  right:0.5em;
  top:1px;
}

@media screen and (max-width:767px) {
  .shopListBlock-warp {
    margin-left:-8px;
    margin-right:-8px;
    margin-top:0.25rem;
  }
  
  .shopListBlock {
    width:50%;
    margin-top:1rem;
    margin-left:0;
    padding-left:8px;
    padding-right:8px;
    box-sizing:border-box;
    font-size:93.8%;
  }
  
  .shopList__data {
    padding:1rem;
  }
  
  .shopName { margin-bottom:0.25rem; }
  .shopListBlock dl { margin-top:0.75rem; }
  
  .shopListBlock dt { width:30%; }
  .shopListBlock dd { width:70%; }

  .shopListBlock dd .tel-link {
    font-weight:bold;
    text-decoration:underline;
  }
}

@media screen and (max-width:640px) {
  .shopListBlock-warp {
    margin-left:-6px;
    margin-right:-6px;
    margin-top:0;
  }
  
  .shopListBlock {
    margin-top:1rem;
    padding-left:6px;
    padding-right:6px;
    font-size:87.5%;
  }
  
  .shopList__data {
    padding:0.75rem;
  }
  
  .shopListBlock dt { width:33%; }
  .shopListBlock dd { width:67%; }
}

@media screen and (max-width:500px) {
  .shopListBlock-warp {
    margin-left:-4px;
    margin-right:-4px;
  }
  
  .shopListBlock {
    padding-left:4px;
    padding-right:4px;
  }
  
  .shopList__photo {
    padding:4px;
  }
  
  .shopListBlock dt { width:36%; }
  .shopListBlock dd { width:64%; }
}

@media screen and (max-width:420px) {
  .shopListBlock-warp {
    margin-left:0;
    margin-right:0;
  }
  
  .shopListBlock {
    width:100%;
    padding-left:0;
    padding-right:0;
    font-size:100%;
  }

  .shopList__data address span:after {
    content:"　";
  }
  
  .shopListBlock dt { width:30%; }
  .shopListBlock dd { width:70%; }
}