.page_mv {
  background-image: url(../../image/mv_shop.jpg);
  /* 画像は下層ページによって違うので、base.cssではなくてshop.cssに書く */
}

.shop_container {
  display: flex;
  justify-content: space-between;
  padding: 40px 0;
  border-top: 1px solid #c5c5c5;
}

/* 一番最後の要素のみ下線も引く */
.shop_container:last-of-type {
  border-bottom: 1px solid #c5c5c5;
}

.shop_info {
  width: 33.6%;
}

.shop_map {
  width: 54%;
}

.shop_name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 26px;
}

/* tableは文字の大きさに応じて伸び縮する性質があるのでちゃんと幅をかけてあげる（親に対して100％） */
.shop_table {
  width: 100%;
}

.shop_table th {
  width: 21.4%;
  background-color: #f2f2f2;
  padding: 6px 0;
  text-align: center;
  border: 1px solid #dbdbdb; /* (教材にないコード、tdに合わせる) */
}

.shop_table td {
  vertical-align: middle; /* テーブルで使う上下中央*/
  border: 1px solid #dbdbdb;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
}

.shop_map iframe {
  width: 100%;
  height: 283px;
  display: block; /*iframeとかimgで不自然な隙間が下にできる時があるのでその対策  */
}

@media (max-width: 768px) {
  .shop_container {
    flex-direction: column;
  }

  .shop_info {
    width: 100%;
  }

  .shop_map {
    width: 100%;
    margin-top: 20px;
  }
}
