@charset "UTF-8";

/* フォント */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

/* UI--------------------- */

.p_slide-module {
  --pagination: #ffffff;
  --pagination-active: #2465C7;
  --navigation-color: #2465C7;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 0;

  .swiper-button-next,
  .swiper-button-prev {
    color: var(--navigation-color);
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    height: auto;

    &:after {
      content: "";
      height: 28px;
      width: 28px;
    }
  }

  .swiper-button-next:after {
    background: no-repeat center / contain url(../images/arrow-right.svg);
  }

  .swiper-button-prev:after {
    background: no-repeat center / contain url(../images/arrow-left.svg);
  }

  .swiper-pagination {
    position: relative;
    bottom: 0 !important;
    top: 0 !important;
    width: fit-content !important;
    display: flex;
    align-items: center;
    padding: 0 14px;
  }

  .swiper-pagination-bullet {
    background: var(--pagination);
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    background: var(--pagination-active);
  }

  .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal.swiper-pagination-bullets-dynamic {
    left: 0;
    transform: translateX(0);
  }
}

/* バナー掲載スライド用--------------------- */

.p_slide-banner {
  a {
    display: block;
    width: 100%;

    &:hover {
      opacity: 0.7;
    }
  }

  img {
    width: 100%;
    height: auto;
  }
}

/* ジャンル掲載スライド用--------------------- */

.p_slide-genre {
  --name-bg: #2465C7;
  --name-color: #ffffff;

  .swiper-slide {
    max-width: 260px;
  }

  img {
    width: 100%;
    height: auto;
  }
}

.p_genre {
  display: block;
  width: 100%;
  position: relative;
  box-shadow: 4px 4px 19px 0px #00000040;


  &:hover {
    opacity: 0.7;
  }
}

.p_genre_name {
  font-size: 20px;
  position: absolute;
  display: block;
  width: 100%;
  padding: 0.8em 0.5em;
  background: var(--name-bg);
  color: var(--name-color);
  text-align: center;
  left: 0;
  bottom: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-family: "Zen Old Mincho", sans-serif;
  transform: rotate(0.03deg);
font-weight: 900;
}

/* オススメタイトル掲載スライド用--------------------- */
.p_pickup {
  font-family: "Zen Old Mincho", sans-serif;
  --top-bg: #FCF2FF;
  --top-color: #2465C7;
  --bottom-bg: #FCF2FF;
  --bottom-color: #2465C7;
  --description-bg-img: url(https://melonbooks.akamaized.net/user_data/packages/resize_image.php?image=000.jpg);
  --description-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.73) 0%, #98F8FF 100%);
  --img-bg: linear-gradient(180deg, #A9C4FF 0%, #98F8FF 100%);
  --monopoly-bg: #2465C7;
  --monopoly-color: #ffff00;
  --ttl-icon: no-repeat left center/contain url(../images/sparkling.svg);
  --btn-color: #fff;
  --btn-bg: #2465C7;
  --btn-hover-color:#2465C7;
  --btn-hover-bg: linear-gradient(90deg, #267DC4 0%, #4CADDF 50%, #267DC4 100%);
  --btn-hover-icon: no-repeat center / contain
    url(../images/arrow-right-line.svg);
  --scroll-bar-color: #2465C7;
}

.p_pickup {
  aspect-ratio: 800 / 654;
  overflow: hidden;
  box-shadow: 15px 15px 22px 0px #00000021;

}

.p_pickup_block-top {
  display: grid;
  height: 80%;
  grid-template-columns: 46.7% auto;
  background: var(--top-bg);
}

.p_pickup_img {
  width: 100%;
  height: 100%;
  background: var(--img-bg);

  img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
  }
}

.p_pickup_description {
  background: var(--description-bg),
    no-repeat center / cover var(--description-bg-img);
  padding: 21% 4% 4% 4%;
  display: grid;
  height: 100%;
  overflow: hidden;
  align-items: stretch;
  grid-template-rows: 20% 80%;
}

.p_pickup_monopoly {
  position: absolute;
  font-family: "M PLUS Rounded 1c", sans-serif;
  background: var(--monopoly-bg);
  color: var(--monopoly-color);
  font-weight: 800;
  font-size: max(0.8vw, 6px);
  padding: 1em 0.5em 1.5em;
  text-align: center;
  top: 0;
  right: 5%;
  clip-path: polygon(0% 0%, 100% 0, 100% 100%, 50% 82%, 0% 100%);
  transform: rotate(0.03deg);
}

.p_pickup_ttl {
  color: var(--top-color);
  font-weight: bold;
  font-size: max(1.3vw, 13px);
  max-height: 2.5em;
  text-overflow: ellipsis;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transform: rotate(0.03deg);
}

.p_pickup_coment {
  color: var(--top-color);
  font-size: max(1vw, 9px);
  overflow: hidden;
}

.p_pickup_coment-ttl {
  font-size: 1.3em;
  font-weight: bold;
  margin: 0.8em 0 0.2em;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  transform: rotate(0.03deg);
  padding-left: 1.5em;
  background: var(--ttl-icon);
}

.p_pickup_coment-ttl svg {
  width: 1.4rem;
}

.p_pickup_coment-text {
  overflow-y: auto;
  height: calc(95% - 2em);
  line-height: 1.5;
  letter-spacing: 0.05em;
  scrollbar-color: var(--scroll-bar-color) transparent;
  scrollbar-width: thin;
}

@supports not (scrollbar-width: thin) {
  .p_pickup_coment-text::-webkit-scrollbar {
    width: 2px;
    background-color: transparent;
  }

  .p_pickup_coment-text::-webkit-scrollbar-thumb {
    background: var(--scroll-bar-color);
    width: 2px;
    border-radius: 999px;
  }
}

.p_pickup_block-bottom {
  display: grid;
  grid-template-columns: 55% 45%;
  height: 20%;
  background: var(--bottom-bg);
  color: var(--bottom-color);
  overflow: hidden;
  padding: 2%;
}

.p_pickup_detail {
  display: flex;
  flex-wrap: wrap;
  padding-right: 3%;
  font-size: max(1vw, 8px);
}

.p_pickup_detail dt {
  font-weight: bold;
  width: 6em;
}

.p_pickup_detail dd {
  width: calc(100% - 6em);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.p_pickup_bay-btn {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  padding: 0.2em 1em;
  display: flex;
  width: 100%;
  font-weight: bold;
  margin-inline: auto;
  font-size: max(1.1vw, 9px);
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  box-shadow: 4px 4px 8px 0px #00000033;


  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--btn-hover-bg);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }

  &:hover::before {
    opacity: 1;
  }
}

.c_btn_inner {
  display: block;
  flex: 1;
  text-align: center;
}

.c_btn-icon {
  width: 8%;
}

.c_btn_inner {
  display: block;
  flex: 1;
  text-align: center;
  transform: rotate(0.03deg);
}


@media screen and (max-width: 768px) {

  .p_pickup_coment-ttl svg {
    width: 0.8rem;
  }
}