@charset "utf-8";
/* popularBox ========== */
.popularBox{
  width: 100%;
}
.popularBox__inner{
  width: 100%;
}
.popularBox__list{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.popularBox__item{
  width: calc(50% - 8px);
  height: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: background-color 0.15s ease-out;
}
/* エリア・駅の背景 */
/* knato */
.popularBox__itemArea--tokyo{
  background-image: url(../images/popular_area/popular_area_tokyo.webp);
}
.popularBox__itemArea--shinjyuku{
  background-image: url(../images/popular_area/popular_area_shinjyuku.webp);
}
.popularBox__itemArea--shinagawa{
  background-image: url(../images/popular_area/popular_area_shinagawa.webp);
}
.popularBox__itemArea--shibuya{
  background-image: url(../images/popular_area/popular_area_shibuya.webp);
}
.popularBox__itemArea--yokohama{
  background-image: url(../images/popular_area/popular_area_yokohama.webp);
}
.popularBox__itemArea--kawasaki{
  background-image: url(../images/popular_area/popular_area_kawasaki.webp);
}
.popularBox__itemArea--machida{
  background-image: url(../images/popular_area/popular_area_machida.webp);
}
.popularBox__itemArea--musashikosugi{
  background-image: url(../images/popular_area/popular_area_musashikosugi.webp);
}
.popularBox__itemArea--saitama{
  background-image: url(../images/popular_area/popular_area_saitama.webp);
}
.popularBox__itemArea--kasai{
  background-image: url(../images/popular_area/popular_area_kasai.webp);
}
.popularBox__itemArea--funabashi{
  background-image: url(../images/popular_area/popular_area_funabashi.webp);
}
.popularBox__itemArea--matsudo{
  background-image: url(../images/popular_area/popular_area_matsudo.webp);
}
.popularBox__itemEki--shinjyuku{
  background-image: url(../images/popular_eki/popular_eki_shinjyuku.webp);
}
.popularBox__itemEki--shinagawa{
  background-image: url(../images/popular_eki/popular_eki_shinagawa.webp);
}
.popularBox__itemEki--nihonbashi{
  background-image: url(../images/popular_eki/popular_eki_nihonbashi.webp);
}
.popularBox__itemEki--ikebukuro{
  background-image: url(../images/popular_eki/popular_eki_ikebukuro.webp);
}
.popularBox__itemEki--shinagawa{
  background-image: url(../images/popular_eki/popular_eki_shinagawa.webp);
}
.popularBox__itemEki--shinbashi{
  background-image: url(../images/popular_eki/popular_eki_shinbashi.webp);
}
.popularBox__itemEki--shibuya{
  background-image: url(../images/popular_eki/popular_eki_shibuya.webp);
}
.popularBox__itemEki--kawasaki{
  background-image: url(../images/popular_eki/popular_eki_kawasaki.webp);
}
.popularBox__itemEki--sakuragicho{
  background-image: url(../images/popular_eki/popular_eki_sakuragicho.webp);
}
.popularBox__itemEki--honatsugi{
  background-image: url(../images/popular_eki/popular_eki_honatsugi.webp);
}
.popularBox__itemEki--shinyokohama{
  background-image: url(../images/popular_eki/popular_eki_shinyokohama.webp);
}
.popularBox__itemEki--omiya{
  background-image: url(../images/popular_eki/popular_eki_omiya.webp);
}
.popularBox__itemEki--funabashi{
  background-image: url(../images/popular_eki/popular_eki_funabashi.webp);
}
.popularBox__itemEki--urayasu{
  background-image: url(../images/popular_eki/popular_eki_urayasu.webp);
}
/* tokai */
.popularBox__itemArea--meieki{
  background-image: url(../images/popular_area/popular_area_meieki.webp);
}
.popularBox__itemArea--kanayama{
  background-image: url(../images/popular_area/popular_area_kanayama.webp);
}
.popularBox__itemArea--toyota{
  background-image: url(../images/popular_area/popular_area_toyota.webp);
}
.popularBox__itemArea--sakae{
  background-image: url(../images/popular_area/popular_area_sakae.webp);
}
.popularBox__itemArea--kanayama{
  background-image: url(../images/popular_area/popular_area_kanayama.webp);
}
.popularBox__itemArea--yotsukaichi{
  background-image: url(../images/popular_area/popular_area_yotsukaichi.webp);
}
.popularBox__itemArea--gifu{
  background-image: url(../images/popular_area/popular_area_gifu.webp);
}
.popularBox__itemEki--nagoya{
  background-image: url(../images/popular_eki/popular_eki_nagoya.webp);
}
.popularBox__itemEki--kanayama{
  background-image: url(../images/popular_eki/popular_eki_kanayama.webp);
}
.popularBox__itemEki--toyota{
  background-image: url(../images/popular_eki/popular_eki_toyota.webp);
}
.popularBox__itemEki--sakae{
  background-image: url(../images/popular_eki/popular_eki_sakae.webp);
}
.popularBox__itemEki--kanayama{
  background-image: url(../images/popular_eki/popular_eki_kanayama.webp);
}
.popularBox__itemEki--yotsukaichi{
  background-image: url(../images/popular_eki/popular_eki_yotsukaichi.webp);
}
.popularBox__itemEki--gifu{
  background-image: url(../images/popular_eki/popular_eki_gifu.webp);
}
.popularBox__itemEki--ogaki{
  background-image: url(../images/popular_eki/popular_eki_ogaki.webp);
}
.popularBox__itemEki--kuwana{
  background-image: url(../images/popular_eki/popular_eki_kuwana.webp);
}
/* kansai */
.popularBox__itemArea--shinosaka{
  background-image: url(../images/popular_area/popular_area_shinosaka.webp);
}
.popularBox__itemArea--osaka{
  background-image: url(../images/popular_area/popular_area_osaka.webp);
}
.popularBox__itemArea--tenman{
  background-image: url(../images/popular_area/popular_area_tenman.webp);
}
.popularBox__itemArea--shinsaibashi{
  background-image: url(../images/popular_area/popular_area_shinsaibashi.webp);
}
.popularBox__itemEki--shinosaka{
  background-image: url(../images/popular_eki/popular_eki_shinosaka.webp);
}
.popularBox__itemEki--umeda{
  background-image: url(../images/popular_eki/popular_eki_umeda.webp);
}
.popularBox__itemEki--shinsaibashi{
  background-image: url(../images/popular_eki/popular_eki_shinsaibashi.webp);
}
.popularBox__itemEki--nanba{
  background-image: url(../images/popular_eki/popular_eki_nanba.webp);
}
/* エリア・駅の背景 end */
.popularBox__link{
  width: 100%;
  height: 100%;
  font-weight: bold;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: inherit;
  text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
  transition: background-color 0.15s ease-out;
}
.popularBox__btnMore{
  margin-top: 16px;
}
@media screen and (min-width: 680px), print {
  .popularBox__list{
    flex-wrap: nowrap;
    gap: 16px;
  }
  .popularBox__item{
    width: calc(25% - 12px);
    height: 120px;
  }
}
@media screen and (min-width: 960px), print {
  .popularBox__list{
    gap: 24px;
  }
  .popularBox__item{
    width: calc(25% - 8px);
    height: 140px;
  }
  .popularBox__link{
    font-size: 1.6rem;
  }
  .popularBox__btnMore{
    margin-top: 24px;
  }
}
@media (hover: hover) {
  .popularBox__link:hover {
      color: #FFFFFF;
      background-color: rgba(100, 100, 100, 0.1);
  }
}