/* --------------------------------------------------
  共通
-------------------------------------------------- */
body {
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'  
}
.aplus_color {
  background-color: #6291B9;
}
.table_inner {
  line-height: 40px;
  width: 90%;
}
.table_row {
  border-bottom: 1px solid #0270a7;
  font-size: 13px;
}
.table_header {
  padding-left: 10px;
  width: 30%;
}
.contact_header {
  padding-right: 10px;
}
.contact_body {
  width: 180px;
}
.map_image {
  width: 400px;
  height: 300px; 
}
.page_footer {
  margin-top: 30px;
}
.flex {
  display: flex;
}

/* トップページ */
h1.top {
  margin-top: 100px;
  margin-bottom: 30px;
  font-size: 400%;
}
#main p {
  margin-top: 30px;
  font-size: 125%;
}
.flex .image {
  width: 600px;
}
.flex .right {
  margin: 0 0 0 20px;
  padding: 0;
}
/* 画像を天地中央表示 */
.flex .image {
  overflow: hidden;
  position: relative;
}
.flex .image::before {
  content: "";
  display: block;
  padding-top: 58%;
}
.flex .image img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* -------------------------------------------------- 
  タブレット
-------------------------------------------------- */
@media screen and (max-width: 768px) {
  .map_image {
    width: 360px;
    height: 270px; 
  }

  /* トップページ */
  .flex {
    display: block;
  }
  .flex .image {
    display: none;
  }
}

/* -------------------------------------------------- 
  スマホ
-------------------------------------------------- */
@media screen and (max-width: 480px) {
  .table_header {
    display: block;
    width: 100%;
    padding: 10px 0 0 0;
  }
  .table_body {
    display: block;
    width: 100%;
    line-height: 6vw;
    padding-bottom: 4vw;
  }
  .contact_header {
    display: block;
    width: 100%;
    padding: 10px 0 0 0;
    padding-right: 0;
  }
  .contact_body {
    display: block;
    width: 100%;
    line-height: 6vw;
    padding-bottom: 4vw;
  }
  .map_image {
    width: 100%;
  }

  /* トップページ */
  h1.top {
    margin-top: 30px;
    margin-bottom: 22px;
    font-size: 270%;
  }
  #main p {
    margin-top: 22px;
    font-size: 100%;
  }
}

/* -------------------------------------------------- 
  スマホ(320px)
-------------------------------------------------- */
@media screen and (max-width: 320px) {
  /* トップページ */
  h1.top {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 250%;
  }
  #main p {
    margin-top: 20px;
    font-size: 90%;
  }
}