@charset "UTF-8";

/* map | ページ固有スタイル
--------------------------------------------------*/
.map {
  padding: 40rem 0 70rem;
}

.map__inner {
  padding: 18rem 0;
  background-color: #fff;
  border-radius: 16rem;
}

.map__sec-title {
  font-size: 26rem;
  font-weight: bold;
  line-height: 1.42;
  text-align: center;
  color: #C90000;
}

.map__area-list {
  max-width: 340rem;
  margin: 2rem auto 0;
}

@media only screen and (min-width: 769px) {
  .map {
    padding: 60rem 0 80rem;
  }

  .map__inner {
    padding: 40rem 0 46rem
  }

  .map__sec-title {
    font-size: 34rem;
    line-height: 1.44;
  }

  .map__area-list {
    margin-top: 20rem;
  }
}


/* area-listコンポーネント
--------------------------------------------------*/
.area-list {}

.area-list__item {
  padding: 17rem 0 20rem;
}
.area-list__item:not(:first-child) {
  border-top: 2rem solid #E5E5E5;
}
.area-list__heading {
  font-size: 14rem;
  font-weight: bold;
  line-height: 1.42;
  color: #1582CB;
  text-align: center;
}

.area-list__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 13rem 9rem;
  margin-top: 12rem;
}

.area-list__btn {
  width: 76rem;
  padding: 9rem 0;
  background: linear-gradient(to bottom, #fff, #F2F2F2);
  border: 2rem solid #C5C5C5;
  border-radius: 10rem;
  box-shadow: 0 3rem 0 0 #C5C5C5;
  font-size: 12rem;
  font-weight: bold;
  line-height: 1.42;
  text-align: center;
}

@media only screen and (min-width: 769px) {
  .area-list {
    max-width: 1000rem;
  }

  .area-list__item {
    padding: 12rem 0 16rem;
  }

  .area-list__heading {
    font-size: 18rem;
    line-height: 1.45;
    text-align: left;
  }

  .area-list__btns {
    gap: 14rem;
    margin-top: 6rem;
  }

  .area-list__btn {
    width: 110rem;
    padding: 15rem 0;
    box-shadow: 0 4rem 0 0 #C5C5C5;
    font-size: 16rem;
    line-height: 1.5;
  }
}