@charset "UTF-8";
/* ::::::::::  近隣観光地  :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* =========================================================
common
========================================================= */
.pageTitleArea .pageTitleBg {
  background: url(../img/area/title_bg.jpg) no-repeat center;
  background-size: cover;
}

/* =========================================================
area
========================================================= */
.area {
  margin-bottom: -10vw;
  padding: 3.2vw 0 12vw;
}
@media (max-width: 767px) {
  .area {
    margin-bottom: -20vw;
    padding: 3.2vw 0 38vw;
  }
}
.area .wrapper {
  position: relative;
  z-index: 2;
}
.area .areaTabBtn {
  display: flex;
  margin-bottom: 2.1333333333vw;
  font-size: calc(100vw * ( 16 / 1500));
  line-height: 1.2;
  justify-content: center;
  vertical-align: bottom;
}
@media (max-width: 767px) {
  .area .areaTabBtn {
    justify-content: flex-start;
    width: calc(100% + 0.25em);
    margin-bottom: 4.2666666667vw;
    font-size: calc(100vw * ( 14 / 375));
  }
}
.area .areaTabBtn li {
  position: relative;
  min-width: 9em;
  margin-right: 0.5em;
  padding: 1.25em 1.5em 1em;
  background: #fff;
  border-radius: 2em;
  color: #33230b;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
}
@media (max-width: 767px) {
  .area .areaTabBtn li {
    min-width: 4em;
    margin-right: 0.25em;
    margin-bottom: 0.5em;
    padding: 0.75em 1.5em 0.6em;
  }
}
.area .areaTabBtn li.active:before {
  opacity: 1;
}
.area .areaTabBtn li:last-of-type {
  margin-right: 0;
}
.area .areaTabBtn li:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #33230b;
  border-radius: 2em;
  opacity: 0;
  transition: opacity 0.3s;
}
.area .areaList {
  justify-content: flex-start;
}
.area .areaList .listItem {
  width: 32.184%;
  margin: 2.66vw 1.66% 0 0;
}
@media (max-width: 767px) {
  .area .areaList .listItem {
    width: 100%;
    margin: 0 0 4vw 0;
  }
}
.area .areaList .listItem:nth-of-type(3n) {
  margin-right: 0;
}
.area .areaList .listItem:nth-of-type(3n - 1) {
  margin-top: 0;
}
.area .areaList .listItem a {
  position: relative;
  display: block;
  text-decoration: none;
}
.area .areaList .listItem a:hover {
  color: #20a1d1;
}
.area .areaList .listItem a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  width: 80%;
  margin: 0 auto;
  background: #fff;
  border-radius: 2vw;
  z-index: -1;
}
@media (max-width: 767px) {
  .area .areaList .listItem a:before {
    width: 90%;
    border-radius: 6vw;
  }
}
.area .areaList .listItem a[target=_blank] .itemText h3:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 15px;
  margin-left: 0.5em;
  margin-bottom: 0.1em;
  background: url(../img/common/icon_external.png) no-repeat;
  background-size: 100%;
  vertical-align: middle;
}
.area .areaList .listItem .itemPhoto {
  position: relative;
  padding-top: 20.466vw;
  border-radius: 2vw;
  overflow: hidden;
}
@media (max-width: 767px) {
  .area .areaList .listItem .itemPhoto {
    padding-top: 61.866vw;
    border-radius: 6vw;
  }
}
.area .areaList .listItem .itemPhoto > img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.area .areaList .listItem .itemText {
  position: relative;
  width: 80%;
  margin: -1em auto 0;
  padding: 0 2vw 2vw;
  letter-spacing: 0.03em;
  line-height: 1.8;
}
@media (max-width: 767px) {
  .area .areaList .listItem .itemText {
    padding: 0 3vw 6vw;
    letter-spacing: 0.08em;
  }
}
.area .areaList .listItem .itemText h3 {
  margin-bottom: 0.5em;
  font-size: calc(100vw * ( 16 / 1500));
  font-weight: bold;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .area .areaList .listItem .itemText h3 {
    margin-bottom: 0.25em;
    font-size: calc(100vw * ( 16 / 375));
  }
}
.area .areaList .listItem .itemText .category {
  margin: 0 0 1em;
  display: inline-block;
  min-width: 8em;
  padding: 0.5em 1em;
  background: #69bae3;
  border-radius: 1em;
  color: #fff;
  font-size: calc(100vw * ( 13 / 1500));
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 767px) {
  .area .areaList .listItem .itemText .category {
    min-width: 10em;
    font-size: calc(100vw * ( 12 / 375));
  }
}
.area .moreBtn {
  margin-top: 2.6666666667vw;
  text-align: center;
}
@media (max-width: 767px) {
  .area .moreBtn {
    margin-top: 6vw;
  }
}
.area .moreBtn .btnLink {
  color: #33230b;
}
.area .moreBtn .btnLink .arrow {
  transform: rotate(90deg);
}