@media print, screen and (min-width: 768px) {
  .town_section {
    margin-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .town_section {
    margin: 30px 0 150px;
  }
}

@media print, screen and (min-width: 768px) {
  .town_section-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media print, screen and (min-width: 768px) {
  .town_section-item + .town_section-item {
    margin-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .town_section-item + .town_section-item {
    padding-top: 40px;
  }
}

.town-item-content {
  position: relative;
  border-bottom: 1px solid #b9b9b9;
}

@media print, screen and (min-width: 768px) {
  .town-item-content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 540px;
  }
}

@media only screen and (max-width: 767px) {
  .town-item-content {
    padding-bottom: 30px;
  }
}

@media print, screen and (min-width: 768px) {
  .town-item-title {
    padding: 20px 50px 100px;
  }
}

@media only screen and (max-width: 767px) {
  .town-item-title {
    padding: 15px;
  }
}

.town-item-title > p {
  font-family: "Yu Mincho", "YuMincho";
  letter-spacing: .04em;
}

@media print, screen and (min-width: 768px) {
  .town-item-title > p {
    font-size: 32px;
  }
}

@media print, screen and (min-width: 1110px) {
  .town-item-title > p {
    font-size: 32px;
  }
}

@media only screen and (max-width: 767px) {
  .town-item-title > p {
    font-size: 20px;
  }
}

@media print, screen and (min-width: 768px) {
  .town-item-img {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 570px;
    min-width: 460px;
  }
}

.town-item-img img {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .town-item-img + .town-item-content {
    margin-left: 20px;
  }
}

@media print, screen and (min-width: 768px) {
  .town-item-link {
    position: absolute;
    right: 0;
    bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .town-item-link {
    margin-top: 40px;
  }
}

.town-item-detail {
  position: relative;
  line-height: 1;
  background-color: #3e3a39;
  text-decoration: none;
  color: #ffffff;
  display: block;
}

@media print, screen and (min-width: 768px) {
  .town-item-detail {
    width: 280px;
    height: 54px;
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .town-item-detail {
    width: 220px;
    height: 44px;
    margin: auto;
  }
}

.town-item-detail::before, .town-item-detail::after {
  content: '';
  position: absolute;
}

.town-item-detail::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #861c3c;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: all .3s;
  transition: all .3s;
  height: 100%;
  opacity: .25;
  z-index: 1;
}

.town-item-detail::after {
  background-image: url(/cmn/img/arrow-md-w.svg);
  background-repeat: no-repeat;
  z-index: 3;
  top: 20px;
}

@media print, screen and (min-width: 768px) {
  .town-item-detail::after {
    right: 20px;
    width: 34px;
    height: 7px;
  }
}

@media only screen and (max-width: 767px) {
  .town-item-detail::after {
    right: 15px;
    width: 25px;
    height: 5px;
  }
}

.town-item-detail_text {
  position: absolute;
  z-index: 5;
}

@media print, screen and (min-width: 768px) {
  .town-item-detail_text {
    top: 18px;
    left: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .town-item-detail_text {
    top: 16px;
    left: 20px;
  }
}

.town-item-detail:hover::before {
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  opacity: 1;
}