@charset "UTF-8";

.p-christmasShoplist {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.p-christmasShoplist::after {
  content: "";
  background-color: #000;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.p-christmasShoplist__list {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}
.p-christmasShoplist__item {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  min-height: 135px;
}
.p-christmasShoplist__item.-image {
  grid-column: 4;
  grid-row: 4;
}
.p-christmasShoplist__wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
a.p-christmasShoplist__wrap {
  font-size: 24px;
  color: #fff;
}
a.p-christmasShoplist__wrap::after {
  content: "";
  position: absolute;
  background-color: #fff;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 0.2s;
}
@media screen and (min-width: 769px) {
  a.p-christmasShoplist__wrap:hover {
    opacity: 1;
  }
  a.p-christmasShoplist__wrap:hover::after {
    opacity: 0.4;
  }
}
@media screen and (max-width: 768px) {
  .p-christmasShoplist__list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, 1fr);
  }
  .p-christmasShoplist__item {
    min-height: 120px;
  }
  .p-christmasShoplist__item.-image {
    grid-column: 2;
    grid-row: 7;
  }
  a.p-christmasShoplist__wrap {
    font-size: 16px;
  }
}