h2 {
  text-align: center;
  color: #325a67;
  font-weight: 600;
  margin-top: 3em;
  margin-bottom: 1.5em;
}
@media (min-width: 992px) {
  h2 {
    font-size: 1.9rem;
  }
}

section#popular-shops {
  background: url("../img/eat/eat_bg_01.jpg") no-repeat;
  background-size: 100% 100%;
  padding-top: 3rem;
}
@media (min-width: 768px) {
  section#popular-shops {
    background: url("../img/eat/eat_pc_back_01.jpg") no-repeat top center, url("../img/eat/eat_bg_01.jpg") repeat;
    background-size: cover, cover;
    padding-top: 23vw;
  }
}

/* form ------------------------------------------------------------------------*/
.searchform form {
  background-color: #fff;
  border: 2px solid #325a67;
}
.searchform .btn {
  color: #325a67 !important;
}

/* contents ------------------------------------------------------------------------*/
.recommended {
  background: url("../img/eat/eat_bg_02.jpg") repeat;
  background-size: 100%;
  padding-top: 0 !important;
}
.recommended .intro {
  position: relative;
  padding: 4rem 0 3rem;
}
.recommended .intro p:last-child {
  margin-bottom: 0;
}
.recommended .intro > div {
  position: relative;
  z-index: 1;
}
.recommended .intro img {
  width: 100%;
}
.recommended .intro img + div {
  background-color: #fff;
  padding: 1.5rem 1rem;
}
.recommended .pickup > div > div {
  position: relative;
  z-index: 1;
}
.recommended .pickup > div {
  background: url("../img/eat/eat_bg_02.jpg") repeat; /*padding-top:3rem;*/
  padding-bottom: 3rem;
}
.recommended .pickup h3 {
  margin-top: 0;
  font-weight: 600;
}
.recommended .pickup .recommended-headline span {
  display: block;
  position: relative;
  background-color: #eff9ff;
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.2rem 0;
  margin-bottom: 1rem;
}
.recommended .pickup .recommended-headline span:before,
.recommended .pickup .recommended-headline span:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 20px;
  top: 0;
  bottom: 0;
}
.recommended .pickup .recommended-headline span:before {
  left: 0;
  background: linear-gradient(to bottom left, transparent 50%, #fff 50%) no-repeat top left / 100% 50%,
    linear-gradient(to top left, transparent 50%, #fff 50%) no-repeat bottom left/100% 50%;
}
.recommended .pickup .recommended-headline span:after {
  right: 0;
  background: linear-gradient(to bottom right, transparent 50%, #fff 50%) no-repeat top left / 100% 50%,
    linear-gradient(to top right, transparent 50%, #fff 50%) no-repeat bottom left/100% 50%;
}
.recommended .pickup .recommended-img {
  position: relative;
}
.recommended .pickup .recommended-text + p:last-child {
  margin: auto 0 0;
}
@media (min-width: 576px) {
  .recommended .pickup .recommended-img {
    margin: 0;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .recommended .intro {
    padding: 4rem 0 6rem;
  }
  .recommended .intro:before {
    position: absolute;
    content: "";
    height: 50%;
    background-color: #fff;
    width: 100vw;
    left: 0;
    right: 0;
    top: 0;
  }
  .recommended .intro img {
    width: auto;
  }
  .recommended .intro img + div {
    background-color: transparent;
    padding: 0;
    margin-top: 2rem;
  }
  .recommended .recommended-headline span {
    font-size: 1.25rem;
  }
  .recommended .pickup > div {
    padding-top: 3rem;
  }
  .recommended .pickup > div:not(:last-child) {
    margin-bottom: 6rem;
  }
  .recommended .pickup > div:last-child {
    margin-bottom: 3rem;
  }
  .recommended .pickup > div {
    position: relative;
    background: transparent;
    width: auto;
    margin: 0;
  }
  .recommended .pickup > div:before {
    background: #fff;
    content: "";
    width: 70vw;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    display: block;
  }
  .recommended .pickup > div:nth-of-type(even):before {
    right: auto;
    left: 0;
  }
  .recommended .pickup div.row > div {
    display: flex;
    flex-direction: column;
  }
  .recommended .pickup .recommended-img {
    margin: 0 1rem;
    width: auto;
  }
  .recommended .pickup .recommended-img:before,
  .recommended .pickup .recommended-img:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .recommended .pickup .recommended-img:before {
    top: -1rem;
    left: -1rem;
    background-color: #fff6c7;
    z-index: -1;
  }
  .recommended .pickup .recommended-img:after {
    bottom: -1rem;
    right: -1rem;
    background-color: #fff;
    z-index: -2;
  }
}
@media (max-width: 768px) {
  .recommended .pickup div.row,
  .recommended .pickup div.row > div {
    margin: 0;
    padding: 0;
  }
  .recommended .pickup div.row > div:last-child {
    background-color: #fff;
    padding: 1.5rem 1rem;
  }
  .recommended .pickup .recommended-img img {
    width: 100%;
  }
}