@charset "UTF-8";

/* ==========================================================================
   #page-access（アクセスページ）
   HTMLの<section>出現順に合わせて配置しています。
   同じclassのsectionが複数回使われている場合はCSSは1回だけ記載し、
   「(HTML内でn回使用)」と注記しています。
   ========================================================================== */

/* ---- access-section-1（HTML内で3回使用：見出し+本文 / 見出しのみ×2） ---- */
#page-access .access-section-1 {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 120px 20px 100px;
}
#page-access .access-section-1 .access-section-1__inner {
  text-align: center;
  max-width: 1200px;
  margin: auto;
}
#page-access .access-section-1 .access-section-1--heading-1,
#page-access .access-section-1--heading-2{
  font-size: 36px;
  font-weight: 400;
  text-align: center;
  margin: 0 auto 15px;
}
#page-access .access-section-1 .access-section-1--text-1 {
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 0.02em;
}
#page-access .access-section-1 .access-section-1--text-1 p:not(:last-of-type) {
  margin-bottom: 2em;
}
@media screen and (max-width: 1024px) {
  #page-access .access-section-1 {
    padding: 40px 20px;
  }
  #page-access .access-section-1 .access-section-1--heading-1,
  #page-access .access-section-1 .access-section-1--heading-2{
    font-size: 27px;
    letter-spacing: 0.03em;
  }
  #page-access .access-section-1 .access-section-1--text-1 {
    font-size: 15.6px;
    text-align: justify;
  }
}

/* ---- location-section-3（location.htmlと共通のコンポーネントを再利用／HTML内で1回使用） ---- */
#page-access .location-section-3 {
  margin: 0 auto 130px;
  width: 100% !important;
}
#page-access .location-section-3 .location-section-3__inner {
  text-align: center;
}
#page-access .location-section-3 .location-section-3--list-1.list-type-2 {
  gap: 10px;
}
#page-access .location-section-3 .location-section-3--list-1.list-type-2 li{
  width: calc((100% - 20px) / 3);
}
@media screen and (max-width: 1024px) {
  #page-access .location-section-3 {
    margin: 0 auto 50px;
    width:100%;
  }
  #page-access .location-section-3 .location-section-3__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  #page-access .location-section-3 .location-section-3--list-1.list-type-2{
    gap: 20px;
  }
  #page-access .location-section-3 .location-section-3--list-1.list-type-2 li{
    width: 100%;
  }
}

/* ---- access-section-3（HTML内で3回使用：バス案内×2 / 車案内×1） ---- */
#page-access .access-section-3 {
  margin: 0 calc(50% - 50vw) 60px;
  width: 100vw;
}
#page-access .access-section-3 .access-section-3__inner {
  text-align: center;
  max-width: 1200px;
  margin: auto;
}
#page-access .access-section-3 .access-section-3--image-1 {
  text-align: center;
}
#page-access .access-section-3 .access-section-3--image-1.width{
  max-width: 840px;
  width: 100%;
  margin: auto;
}
/*追加*/
#page-access .access-section-3 .access-section-3--image-1 img{
  width:100%;
  padding-bottom:50px;
}
/*追加*/
#page-access .access-section-3 .access-section-3--image-1 img.bus-3{
  width: 70%;
  display: block;
  margin: 0 auto;
}
#page-access .access-section-3 .access-section-3--image-1 img.car-2{
  width: 70%;
  display: block;
  margin: 0 auto;
}
/*追加*/
@media screen and (max-width: 1024px) {
  #page-access .access-section-3 {
    margin-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }
  #page-access .access-section-3 .access-section-3--image-1 img{
    width:100%;
    padding-bottom:20px;
  }
  #page-access .access-section-3 .access-section-3--image-1 img.bus-3{
    width: 90%;
    display: block;
    margin: 0 auto;
  }
  #page-access .access-section-3 .access-section-3--image-1 img.car-2{
    width: 90%;
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width: 640px) {
  #page-access .access-section-3{
    margin-bottom: 30px;
  }
}

/* map_block */
#page-access .map_block{
  padding: 0 0 115px;
}
#page-access .map_block .map_img{
  margin: 0 auto 65px;
}
#page-access .map_block .map_btn{
  max-width: 610px;
  width: 90%;
  margin: auto;
  display: block;
  font-size: 20px;
  text-align: center;
  padding: 22px 0;
  background: linear-gradient(90deg, rgba(145, 140, 137, 1), rgba(184, 184, 187, 1) 27% 68%, rgba(145, 140, 137, 1));
  border-radius: 75px;
}
#page-access .map_block .map_btn:hover{
  text-decoration: none;
}

@media screen and (max-width: 640px) {
  #page-access .map_block{
    padding: 0 0 50px;
  }
  #page-access .map_block .map_img{
    margin: 0 auto 30px;
  }
  #page-access .map_block .map_btn{
    padding: 15px 0;
    font-size: 19px;
  }
}