@charset "UTF-8";

/* フォント */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Racing+Sans+One&display=swap');

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

.p_slide-module {
 --pagination: #808080;
 --pagination-active: #2FB8F3;
 --navigation-color: #C4F836;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 2rem 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: 1rem;
   width: 0.7rem;
   aspect-ratio: 3 / 5;
  }
 }

 .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;
 }

 .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 {
 font-family: "Noto Sans JP", sans-serif;
 --name-bg: #2FB8F3;
 --name-color: #ffffff;

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

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

.p_genre {
 display: block;
 width: 100%;
 position: relative;

 &: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-weight: bold;
}

/* オススメタイトル掲載スライド用--------------------- */
.p_pickup {
 font-family: "Noto Sans JP", sans-serif;
 --top-bg: #222222;
 --top-color: #fff;
 --bottom-bg: #fff;
 --bottom-color: #fff;
 --description-bg-img: url(https://melonbooks.akamaized.net/user_data/packages/resize_image.php?image=000.jpg);
 --img-bg: no-repeat center / cover url(../../images/bg_pickup.webp);
 --monopoly-bg: #2FB8F3;
 --monopoly-color: #FFFF00;
 --ttl-icon: no-repeat left center / 0.8em url(../../images/sparkling_0110.svg);
 --btn-color: #fff;
 --btn-bg: #2FB8F3;
 --btn-hover-color: linear-gradient(269.93deg, #DCA8D1 0.21%, #C6B4EB 50%, #B6E6E2 99.79%);
 --btn-hover-bg: linear-gradient(269.93deg, #DCA8D1 0.21%, #C6B4EB 50%, #B6E6E2 99.79%);
 --btn-hover-icon: no-repeat center / contain url(https://melonbooks.akamaized.net/special/festival/2025/gw/new-arrival/iframe/images/arrow-right-line.svg);
 --scroll-bar-color: #2FB8F3;
}

.p_pickup {
 aspect-ratio: 539 / 367;
 overflow: hidden;
}

.p_pickup_block-top {
 display: grid;
 height: 100%;
 grid-template-columns: 48.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-wrapper {
 background-color: #2FB8F3;
 background: linear-gradient(-180deg, #000 0%, #2fb8f3a9 70%), no-repeat center / cover var(--description-bg-img);
 height: 100%;
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
}

.p_pickup_description {
 width: 85%;
 align-items: stretch;
 grid-template-rows: 3rem auto;
 display: grid;
}

.p_pickup_ttl {
 color: var(--top-color);
 font-weight: bold;
 font-size: 1.5rem;
 max-height: 2.5em;
 text-overflow: ellipsis;
 line-height: 1.2;
 overflow: hidden;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
}

.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;
}

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

.p_pickup_coment-content__pic-wrapper {
 display: flex;
 gap: .3rem;
}

.p_pickup_coment-content__pic img {
 width: 100%;
 height: auto;
}

.p_pickup_coment-text {
 overflow-y: auto;
 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_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;
 box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 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;
 border-radius: 0.6rem;

 &::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(90deg, #FFA500, #FF1493, #8A2BE2);
  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;
}

.event__contents {
 display: flex;
 gap: 1%;
 margin: 0.5rem;
 padding: 1rem;
 border: solid 2px #a9a9a9;
 border-radius: 0.5rem;
 width: 100%;
 background: #ffffff;
 text-decoration: none;
}

.event__img {
 width: 40%;
 margin-bottom: auto;
}

.event__text {
 width: 55%;
 overflow-wrap: break-word;
 text-decoration: none;
 margin: auto;
 font-family: 'Zen Maru Gothic';
 color: #5C0F7B;
 line-height: 20px;
}

.event__icon {
 width: 2%;
 min-width: 20px;
 height: 10%;
 margin: auto;
}

.p_fair-banner_wrap {
 background: #F6F6F6;
 display: flex;
 flex-wrap: wrap;
 -webkit-box-pack: center;
 justify-content: center;
 box-sizing: border-box;
 padding: 0.3% 1% 0.3% 1%;
 width: 85%;
 margin: auto;
}

@media screen and (max-width: 768px) {
 .event__contents {
  margin-top: 1em;
  margin: 4px;
  width: 90%;
  padding: 12px;
 }

 .event__text {
  width: 45%;
  margin: auto;
  font-size: 13px;
 }

 .event__icon {
  width: 2%;
  min-width: 7px;
  height: 12px;
  margin: auto;
 }

 .l_litymodal_inner {
  width: 100%;
  top: auto;
 }

 .p_fair-banner_wrap {
  width: 90%;
  margin: auto;
 }

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