@charset "utf-8";

:root {
  --accent-color: #008fdb;
  --rem-base: 16; /* 1rem = 16px (change here to alter global rem base) */
}
body {
  font-family: "Noto Sans JP", sans-serif;
}
.br-sp {
  display: block;
}
@media screen and (min-width: 750px) {
  .br-sp {
    display: none;
  }
}

/* ==========
common
========== */
.sec {
  padding: 50px 4%;
}

.sec:last-of-type {
  padding-bottom: 100px;
}

.sec-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(30px, 3.906vw /* viewport 768px で 30px */, 30px);
  font-weight: 700;
  gap: 10px;
}

.sec-ttl_sp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(30px, 7.813vw /* viewport 768px で 60px */, 60px);
  font-weight: 700;
}

@media screen and (min-width: 768px) {
  .sec-ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 3rem;
    font-weight: 700;
  }
  .sec-ttl_sp {
    display: none;
  }
}
.sec-ttl::before {
  content: "";
  display: block;
  height: auto;
  background: center/contain no-repeat;
}

@media screen and (min-width: 768px) {
  .sec {
    padding: 100px 30px 150px;
  }

  .sec:last-of-type {
    padding-bottom: 100px;
  }

  .sec-inner {
    margin: auto;
    max-width: 1200px;
  }
  .sec-ttl {
    margin-bottom: 30px;
    gap: 15px;
    font-size: 4rem;
  }
}

/* ========== anounce ========== */
.anounce {
  padding: 1em 4%;
  line-height: 1.25;
  font-size: 1.5rem;
  font-weight: 400;
  color: #ff0000;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .anounce {
    margin-inline: auto;
    max-width: calc(1000px + 30px * 2);
    padding: 1em 30px;
    font-size: 1.6rem;
    text-align: center;
  }
}

/* --- slider --- */
.slider-wrapper {
  position: relative;
}
@media screen and (max-width: 376px) {
  .js-slider-topPopular02 {
    width: 240px;
    margin: 0 auto;
  }
  .js-slider-topPopular {
    width: 300px;
    margin: 0 auto;
  }
}
/* pagenation01 */
.pagination01 {
  padding: 15px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.slider-wrapper .pagination01 .swiper-pagination-bullet {
  margin: 0;
}

.circle {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  background-color: var(--accent-color);
  border-radius: 50%;
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
}

.circle::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: -9px;
  display: block;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  transform-origin: right 9px;
}

.circle::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 9px;
  display: block;
  width: 18px;
  height: 18px;
  background: #f0f0f0;
  transform-origin: left 9px;
}

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

.circle .circle_inner {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: #f0f0f0;
  border-radius: 50%;
}

.circle .circle_inner::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
}

/* active */
.swiper-pagination-bullet.swiper-pagination-bullet-active.circle::before {
  animation: circleBefore 5s linear forwards;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active.circle::after {
  animation: circleAfter 5s linear forwards;
}

.circle.swiper-pagination-bullet-active .circle_inner::after {
  background-color: var(--accent-color);
}

@keyframes circleAfter {
  0% {
    transform: rotate(0deg);
    background-color: #f0f0f0;
  }

  50% {
    transform: rotate(180deg);
    background-color: #f0f0f0;
  }

  50.01% {
    transform: rotate(360deg);
    background-color: var(--accent-color);
  }

  100% {
    transform: rotate(360deg);
    background-color: var(--accent-color);
  }
}

@keyframes circleBefore {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@media screen and (768px <=width) {
  .pagination01 {
    padding: 20px 0;
  }
}

/* arrowButton01 */
.arrowButton01-prev {
  position: absolute;
  z-index: 6;
  top: 32%;
  left: -8%;
  width: calc(57px / 2);
  max-width: 52px;
}

.arrowButton01-prev img {
  aspect-ratio: 57 / 84;
}

.arrowButton01-next {
  position: absolute;
  z-index: 1000;
  top: 32%;
  right: -8%;
  width: calc(56px / 2);
  max-width: 52px;
}

.arrowButton01-next img {
  aspect-ratio: 56 / 84;
}

@media screen and (min-width: 425px) and (max-width: 767px) {
  .arrowButton01-prev {
    top: 30%;
    left: 0;
    width: 10%;
  }

  .arrowButton01-next {
    top: 30%;
    right: 0;
    width: 10%;
  }
}

@media screen and (min-width: 768px) {
  .arrowButton01-prev {
    top: 29%;
    left: -40px;
    width: 5%;
  }

  .arrowButton01-next {
    top: 29%;
    right: -40px;
    width: 5%;
  }
}

/* ========== mv ========== */
.mv {
  position: relative;
  background-color: #f7f9fa;
}

.mv-note {
  padding: 0.5em 4%;
  /* border: 2px solid #ff0000; */
}

.mv-note p {
  margin-inline: auto;
  width: fit-content;
  font-size: 1.4rem;
  color: #ff0000;
}

.mv-img {
  display: block;
  aspect-ratio: 740 / 1330;
}

.mv-img:has(+ .mv-news) {
  margin-bottom: 0;
}

.mv-news {
  margin: 20px auto 30px;
  width: 92%;
  max-width: 960px;
}

.mvNews {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: 15px;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: scale 0.3s;
}

@media (hover: hover) {
  .mvNews:hover {
    scale: 1.05;
  }
}

.mvNews-new {
  margin-inline-end: 5px;
  display: inline-block;
  line-height: 2;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  color: var(--accent-color);
}

.mvNews-date {
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #999;
}

.mvNews-ttl {
  line-height: 1.5;
  font-size: 1.4rem;
  font-weight: 400;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.mv-slider {
  padding: clamp(126px, 33.406vw /* viewport 768px で 318px */, 318px) 30px 100px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .mv-slider {
    padding: 19% calc(10px + 4vw) 5%;
  }
}
@media screen and (min-width: 1156px) {
  .mv-slider {
    padding: 13% calc(10px + 4vw) 5%;
  }
}
.topSlide {
  display: block;
}

.topSlide img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --- Swiper slide overlay for side slides (thin black layer on left/right when 3 visible) --- */
.js-slider-top .swiper-slide {
  position: relative; /* needed for pseudo-element overlay */
}
.js-slider-top .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0); /* default transparent */
  pointer-events: none;
  transition: background-color 0.28s ease;
}
/* Apply thin black overlay to previous and next slides (the left and right visible slides) */
.js-slider-top .swiper-slide.swiper-slide-prev::after,
.js-slider-top .swiper-slide.swiper-slide-next::after {
  background: rgba(0, 0, 0, 0.4);
}

/* Optional: slightly reduce overlay on hover so image details pop */
.js-slider-top .swiper-slide:hover::after {
  background: rgba(0, 0, 0, 0.25);
}

@media (hover: hover) {
  .topSlide img {
    transition: scale 0.3s;
  }

  .topSlide:hover img {
    scale: 1.1;
  }
}
/* .mv {
  display: none;
} */

.mv {
  display: block;
  background-image: url(../img/top/mv-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* .mv-note {
    position: absolute;
    top: 8%;
    left: 25%;
    translate: -50% 0;
    width: 30%;
    padding: 0.5em 0.8em;
  } */
.mv-note p {
  font-size: 1.8rem;
}

.mv-img {
  aspect-ratio: 1440 / 685;
}

.mv-news {
  margin-bottom: 60px;
}

.mvNews {
  padding: 20px 0;
  display: flex;
  align-items: center;
}

.mvNews-new {
  margin: 0;
  padding-inline: 60px;
  border-right: 1px solid #52271e;
  line-height: 1.5;
  font-size: 2.4rem;
}

.mvNews-date {
  padding-inline: 40px 20px;
  font-size: 1.8rem;
}

.mvNews-ttl {
  padding-inline-end: 40px;
  font-size: 1.6rem;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.mv-sliderInner {
  margin: auto;
}

/* ==========
search
========== */
.search {
  padding: 0 4%;
  background-color: #f0f0f0;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .search {
    padding: 40px 4%;
    background-color: #f0f0f0;
  }
}
.search-patern:has(+ .search-patern) {
  margin-bottom: 30px;
}

.search-ttl {
  margin-bottom: 15px;
  display: flex;
  gap: 5px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2rem;
  font-weight: 700;
}

.search-ttl::before {
  content: "";
  display: block;
  height: auto;
  background: center/contain no-repeat;
}

.search-allBtn {
  margin: auto;
}

@media screen and (min-width: 768px) {
  .search {
    display: block;
    padding: 40px 30px 40px 30px !important;
  }

  .search-patern:has(+ .search-patern) {
    margin-bottom: 50px;
  }

  .search-ttl {
    margin-bottom: 30px;
    gap: 10px;
    font-size: 2.4rem;
  }
}

/* ==========
popular
========== */
.popular .search-ttl::before {
  width: calc(32px / 2);
  aspect-ratio: 390 / 512;
  background-image: url(../img/top/icon-fire.svg);
}

.popular-slider {
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .popular-slider .swiper-slide {
    width: 100% !important; /* 画像の幅を画面の70%に拡大 */
    /* max-width: 240px; */
    min-width: 160px;
    margin-right: 10px;
  }
  .topPopularSlide-img img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 12px 12px 0 0;
  }
}
.text-img {
  display: flex;
  position: relative;
  align-items: center;
  gap: min(3.8194vw, 55px);
  z-index: 2;
  padding-bottom: clamp(70px, 18.229vw /* viewport 768px で 140px */, 140px);
}

@media (min-width: 768px) {
  .text-img {
    gap: min(3.8194vw, 55px);
    padding-bottom: 130px;
  }
}
.text-img > * {
  position: relative;
  z-index: 1; /* children should appear above decorative pseudo-elements */
}

/* Put decorations on the specific child elements to avoid mutual interference */
.text-img > .search-patern {
  position: relative;
}
/* flex 内での振る舞い調整 */
.text-img .search-patern {
  flex: 1 1 auto;
  min-width: 0; /* 長いテキストによるはみ出しを防ぐ */
}

.text-img .img {
  display: none;
}
@media (min-width: 768px) {
  .text-img .img {
    display: block;
    flex: 0 0 auto;
    width: min(6.9444vw, 100px); /* 必要に応じて微調整してください */
  }
}
.text-img .img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* simple results block */
.search-results {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  background: #fff;
}

.search-results-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.search-results-search {
  display: flex;
  gap: 8px;
}

.search-results-search .search-input {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1.4rem;
}

.btn-reset {
  padding: 10px 14px;
  border-radius: 9999px;
  border: 1px solid #ccc;
  background: #fff;
  color: #555;
  cursor: pointer;
}

.search-results-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: #f0f7fc;
  color: #006298;
  font-size: 1.2rem;
  border: 1px solid #cfe6f6;
}

.filter-chip button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.search-results-list {
  display: grid;
  gap: 12px;
}

.result-card {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.result-card a {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.result-card__img {
  background: #f7f7f7;
  width: 100%;
  height: 100%;
}

.result-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-card__body {
  padding: 12px 12px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-card__meta {
  font-size: 1.3rem;
  color: #666;
}

.result-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  padding: 4px 8px;
  background: #f0f7fc;
  color: #006298;
  border-radius: 9999px;
  font-size: 1.2rem;
  border: 1px solid #cfe6f6;
}

.result-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.no-results {
  padding: 16px;
  text-align: center;
  color: #666;
}

@media screen and (max-width: 767px) {
  .search-results-search {
    flex-direction: column;
  }

  .result-card a {
    grid-template-columns: 1fr;
  }
}

.popular-slider .swiper-slide {
  height: auto;
}
.popular-slider .swiper-slide .image {
  height: 100%;
}

.topPopularSlide,
.recommendedPlanCard {
  display: block;
}

.topPopularSlide-img,
.recommendedPlanCard-img {
  overflow: hidden;
}

.topPopularSlide-info,
.recommendedPlanCard-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 10px;
  background-color: #fff;
  height: 100%;
}

.topPopularSlide-info h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
}

.topPopularSlide-info p {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: calc(16 / var(--rem-base) * 1.2rem);
  color: #888;
}
.text-color {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #008fdb;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
  border: 1px solid #008fdb;
  padding: 2px 6px;
  border-radius: 9999px;
}
.text-colorSmall {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #028fdb;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  background-color: #e1f1fa;
  padding: 4px 8px;
  border-radius: 6px;
}
@media screen and (min-width: 768px) {
  .text-colorSmall {
    font-size: 14px;
  }
}

.color-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.js-introduction {
  line-height: 1.5;
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  .js-introduction {
    font-size: 16px;
  }
}
.js-productPrice {
  font-weight: 700;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 12px;
}
.product-item-store-text {
  font-size: 14px;
  margin-top: 12px;
}
@media screen and (min-width: 768px) {
  .js-productPrice {
    font-size: inherit;
  }
  .product-item-store-text {
    font-size: inherit;
  }
}
/* .js-productP {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: calc( 16 / var(--rem-base) * 1.6rem);
  color: #888;
}
@media screen and (min-width:768px) {
  .js-productP {
    font-size: 1.2rem;
    margin-top: 10px;
  }
}
.js-productP::before {
  content: '';
  display: block;
  width: calc(18px / 2);
  height: auto;
  aspect-ratio: 360 / 512;
  background: center/contain no-repeat url(../img/common/icon-pin.svg);
}
@media screen and (min-width:768px) {

  .js-productP::before {
    width: 12px;
  }
} */
.js-productP,
.js-productP02,
.topPopularSlide-info p {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: calc(16 / var(--rem-base) * 1.2rem);
  font-weight: 600;
  font-size: 1.2rem;
  color: #008fdb;
  background-color: #f7fafa;
  padding: 15px;
  margin-top: 10px;
}
@media screen and (min-width: 768px) {
  .js-productP,
  .js-productP02,
  .topPopularSlide-info p {
    margin-top: 10px;
  }
}
.js-productP::before,
.js-productP02::before,
.topPopularSlide-info p::before {
  content: "";
  display: block;
  width: calc(18px / 2);
  height: auto;
  aspect-ratio: 360 / 512;
  background: center/contain no-repeat url(../img/top/icon-pin02.svg);
}
@media screen and (min-width: 768px) {
  .js-productP::before,
  .js-productP02::before,
  .topPopularSlide-info p::before {
    width: 12px;
  }
}
/* .topPopularSlide-info p::before {
  content: '';
  display: block;
  width: calc(18px / 2);
  height: auto;
  aspect-ratio: 360 / 512;
  background: center/contain no-repeat url(../img/common/icon-pin.svg);
} */

@media (hover: hover) {
  .topPopularSlide-img img {
    transition: transform 0.3s;
  }

  .topPopularSlide:hover img {
    transform: scale(1.05);
  }
}

.topPopularSlide-info .productPrice {
  font-size: 14px;
  font-weight: 700;
  margin-block: 8px;
}
.topPopularSlide-info .productPrice span {
  font-size: 13px;
}
@media screen and (min-width: 768px) {
  .topPopularSlide-info .productPrice {
    font-size: 14px;
    margin-block: 12px;
  }
}

@media screen and (min-width: 768px) {
  .popular .search-ttl::before {
    width: 19px;
  }

  .popular-slider {
    margin: 0;
  }

  .topPopularSlide-info h3 {
    font-size: clamp(14px, 1.389vw /* viewport 1440px で 20px */, 20px);
    font-weight: 700;
  }

  .topPopularSlide-info p {
    font-size: min(1.5277vw, calc(16 / var(--rem-base) * 1.4rem));
  }

  .topPopularSlide-info p::before {
    width: 12px;
  }
}
.text-box span {
  font-size: 14px;
}

.text-box h3 span {
  display: block;
  margin-top: 16px;
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  .text-box h3 span {
    font-size: 16px;
  }
}

.text-box .productPrice {
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  .text-box .productPrice {
    font-size: 16px;
  }
}

/* -- jenre -- */
:root {
  --jenre-num: 11;
}

.jenre .search-ttl::before {
  width: calc(40px / 2);
  aspect-ratio: 1 / 1;
  background-image: url(../img/top/icon-hat.svg);
}

.jenre-listWrapper {
  margin: 0 -4vw 15px;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.jenre-list {
  width: calc(70px * var(--jenre-num) + 20px * (var(--jenre-num) - 1) + 4vw * 2);
  padding: 0 4vw;
  display: flex;
  gap: 20px;
}

.jenreCard {
  width: 70px;
}

.jenreCard-img {
  margin-bottom: 10px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
}

.jenreCard-img img {
  aspect-ratio: 1 / 1;
}

.jenreCard p {
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
}

@media (hover: hover) {
  .jenreCard-img img {
    transition: transform 0.3s;
  }

  .jenreCard:hover img {
    transform: scale(1.1);
  }
}

@media screen and (min-width: 768px) {
  .jenre .search-ttl::before {
    width: 25px;
  }

  .jenre-listWrapper {
    margin: 0 0 40px;
    scrollbar-width: thin;
  }

  .jenre-list {
    width: calc(140px * var(--jenre-num) + 30px * (var(--jenre-num) - 1));
    padding: 0 0 5px;
    gap: 30px;
  }

  .jenreCard {
    width: 140px;
  }

  .jenreCard-img {
    margin-bottom: 15px;
  }

  .jenreCard p {
    font-size: 1.6rem;
    font-weight: 500;
  }
}

/* -- scene -- */
:root {
  --scene-num: 7;
}

.scene .search-ttl::before {
  width: calc(43px / 2);
  aspect-ratio: 249 / 236;
  background-image: url(../img/top/icon-good.svg);
}

.jenre-list._scene {
  width: calc(70px * var(--scene-num) + 20px * (var(--scene-num) - 1) + 4vw * 2);
}

@media screen and (min-width: 768px) {
  .scene .search-ttl::before {
    width: 28px;
  }

  .jenre-list._scene {
    width: calc(140px * var(--scene-num) + 30px * (var(--scene-num) - 1));
  }
}

/* ----- player ----- */

.player .sec-ttl::before {
  display: block;
  width: calc(64px / 2);
  aspect-ratio: 64 / 55;
  background-image: url(../img/top/icon-helmet.svg);
}
.player .sec-ttl._drink::before {
  display: block;
  width: calc(85px / 2);
  aspect-ratio: 64 / 55;
  background-image: url(../img/top/drink-icon.webp);
}

.player-mv {
  margin: clamp(25px, 6.51vw /* viewport 768px で 50px */, 50px) auto 15px;
  display: block;
  max-width: 500px;
}
.sec-ttl._drink {
  gap: 0;
  letter-spacing: -0.2rem;
}
@media screen and (min-width: 768px) {
  .player-mv {
    margin: 0 auto 30px;
    max-width: 640px;
  }
  .player .sec-ttl._drink::before {
    display: block;
    width: calc(110px / 2);
    aspect-ratio: 64 / 55;
    background-image: url(../img/top/drink-icon.webp);
  }
  .sec-ttl._drink {
    letter-spacing: -0.4rem;
  }
}
.player-mv img {
  aspect-ratio: 16 / 9;
}

@media (hover: hover) {
  .player-mv img {
    transition: transform 0.3s;
  }

  .player-mv:hover img {
    transform: scale(1.05);
  }
}

.player-listDeco {
  position: relative;
  display: block;
}
@media screen and (min-width: 768px) {
  .player-listDeco {
    display: none;
  }
}
.player-listDeco::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: -4vw;
  display: block;
  width: 4vw;
  height: 100%;
  background-color: #fff;
}

.player-listDeco::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: block;
  width: 30px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
  pointer-events: none;
}

.player-listWrapper {
  position: relative;
  margin: 0 -4vw;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.player-list {
  --player-count: 34;
  margin-bottom: 10px;
  width: calc(130px * var(--player-count) + 15px * (var(--player-count) - 1) + 4vw * 2 + 30px);
  display: flex;
  padding: 0 4vw;
  gap: 15px;
}

.playerCard {
  position: relative;
  width: 130px;
  height: 130px;
  background-position: 0 15%;
  border: 2px solid #111;
  background: top/cover no-repeat url(../img/player/card_bg.webp);
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.playerCard a {
  display: block;
}

@media (hover: hover) {
  .playerCard a img {
    transition: transform 0.3s;
  }

  .playerCard a:hover img {
    transform: scale(1.1);
  }
}

.playerCard-name {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 95%;
  padding: 5px;
  background-color: rgba(17, 17, 17, 0.9);
  border-radius: 15px 0 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.25;
  font-size: 1.3rem;
  color: #fff;
}

.playerCard-name span {
  line-height: 1;
  font-family: "Roboto", sans-serif;
  font-size: 1.4em;
  font-weight: 500;
}

.playerCard-name span::before {
  content: "#";
  font-size: 0.65em;
}

@media screen and (min-width: 768px) {
  .player .sec-ttl::before {
    width: 50px;
  }

  .player-mv {
    margin: 0 auto 30px;
    max-width: 640px;
  }

  .player-listDeco::before {
    right: 0;
    width: 30px;
  }

  .player-listDeco::after {
    right: 30px;
    width: 60px;
  }

  .player-listWrapper {
    margin: 0;
    scrollbar-width: thin;
  }

  .player-list {
    width: calc(190px * var(--player-count) + 15px * (var(--player-count) - 1) + 60px);
    padding: 0;
  }

  .playerCard {
    width: 190px;
    height: 190px;
    border-width: 4px;
  }

  .playerCard-name {
    padding: 5px 10px;
    font-size: 1.8rem;
  }
}

/* ----- store ----- */
.store {
  padding: clamp(80px, 20.833vw /* viewport 768px で 160px */, 160px) 30px
    clamp(80px, 20.833vw /* viewport 768px で 160px */, 160px) !important;
  margin-top: -60px;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .store {
    padding: 220px 30px 100px !important;
  }
}
/* .fadein.scrollin {
  margin-top: 30px;
} */

.store .sec-ttl::before {
  width: calc(60px / 2);
  aspect-ratio: 1 / 1;
  background-image: url(../img/top/icon-shop.svg);
}

.store-list {
  margin-top: 30px;
}
.store-list,
.store-listAlt {
  counter-reset: store;
}

.store-list li,
.store-listAlt li {
  position: relative;
  overflow: hidden;
}

.store-list li + li,
.store-listAlt li + li {
  margin-top: -30px;
}

.store-list li::before,
.store-listAlt li::before {
  opacity: 0.6;
}

.store-list li:nth-of-type(odd),
.store-listAlt li:nth-of-type(odd) {
  background-color: #e1f1fa;
}

.store-list li:nth-of-type(odd)::before,
.store-listAlt li:nth-of-type(odd)::before {
  color: #fff;
}

.store-list li:nth-of-type(even),
.store-listAlt li:nth-of-type(even) {
  background-color: #fff;
}

.store-list li:nth-of-type(even)::before,
.store-listAlt li:nth-of-type(even)::before {
  color: #e1f1fa;
}

.store-list li::before,
.store-listAlt li::before {
  position: absolute;
  z-index: 0;
  top: -20px;
  right: 0;
  counter-increment: store;
  content: "0" counter(store);
  font-family: "Roboto", sans-serif;
  font-size: 12rem;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.storeCard,
.storeCardAlt {
  padding: 30px 20px 60px;
  border-radius: 30px 30px 0 0;
}

.storeCard:last-of-type,
.storeCardAlt:last-of-type {
  border-radius: 30px;
}

.storeCard h3,
.storeCardAlt h3 {
  margin-bottom: 15px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
}

.storeCard-link,
.storeCardAlt-link {
  position: relative;
  margin-bottom: 10px;
  display: block;
}

.storeCard-link::after,
.storeCardAlt-link::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 40%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.4;
}

.storeCard-link._pre,
.storeCardAlt-link._pre {
  filter: brightness(0.5);
  pointer-events: none;
}

.storeCard-img,
.storeCardAlt-img {
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.storeCard-img._left,
.storeCardAlt-img._left {
  object-position: left;
}

.storeCard-arrow,
.storeCardAlt-arrow {
  position: absolute;
  z-index: 2;
  bottom: 1.5%;
  right: 1.5%;
  display: block;
  width: calc(86px / 2);
  aspect-ratio: 1 / 1;
}

@media (hover: hover) {
  .storeCard-link img:first-child,
  .storeCardAlt-link img:first-child {
    transition: transform 0.3s;
  }

  .storeCard-link:hover img:first-child,
  .storeCardAlt-link:hover img:first-child {
    transform: scale(1.1);
  }
}

.storeCard p,
.storeCardAlt p {
  line-height: 1.5;
  font-size: 1.4rem;
}

@media screen and (min-width: 768px) {
  .store {
    padding-top: 0;
  }

  .store .sec-ttl::before {
    width: 51px;
  }

  .store-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 0;
  }

  .store-listAlt {
    display: none !important; /* PCでは代替リストを非表示に固定 */
  }

  .store-list li {
    width: 50%;
  }

  .store-list li + li {
    margin-top: 0;
  }

  .store-list li::before {
    font-size: 14rem;
  }

  .storeCard,
  .storeCardAlt {
    padding: 30px 40px;
    border-radius: 24px;
  }

  .storeCard h3,
  .storeCardAlt h3 {
    font-size: 2.4rem;
  }

  .storeCard-link,
  .storeCardAlt-link {
    margin-bottom: 20px;
  }

  .storeCard p,
  .storeCardAlt p {
    font-size: 1.6rem;
  }
}

/* ----- article ----- */
.article {
  position: relative;
  /* background-color: #e1f1fa; */
  background-image: url(../img/top/wave-bg.webp);
  background-repeat: repeat-x;
  background-size: cover;
  padding: clamp(80px, 20.833vw /* viewport 768px で 160px */, 160px) 30px !important;
  margin-top: clamp(-40px, -10.417vw /* viewport 768px で -80px */, -80px);
}
@media screen and (min-width: 768px) {
  .article {
    padding-top: 150px !important;
    margin-top: -74px;
  }
}
.wave-bottom {
  position: unset;
  top: calc(100% - 41px);
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .wave-bottom {
    position: absolute;
    top: calc(100% - 47px);
    left: 0;
    display: block;
    width: 100%;
    height: auto;
  }
}
.article::after {
  display: none;
}
.article {
  position: relative;
}

.deco-bg {
  position: relative;
  background-color: #f0f0f0;
  z-index: 101;
}
/* @media screen and (min-width:768px) {
  
.deco-bg {
  display: block;
  position: relative;
  z-index: 101;
}
} */
.deco-bg::after {
  /* display: none; */
  content: "";
  position: absolute;
  background-color: #e1f1fa;
  z-index: -1;
  left: calc((100vw - 100%) / -2);
  transform: none;
  top: min(18vh, 259px);
  width: 100%;
  height: 26%;
  pointer-events: none;
  border-radius: 6px;
}
@media screen and (max-width: 376px) {
  .deco-bg::after {
    height: 35%;
  }
}
@media screen and (min-width: 750px) {
  .deco-bg::after {
    /* display: none; */
    content: "";
    position: absolute;
    background-color: #e1f1fa;
    z-index: -1;
    left: calc((100vw - 100%) / -2);
    transform: none;
    top: min(18vh, 259px);
    width: 96%;
    height: min(20.833vw, 300px);
    pointer-events: none;
    border-radius: 6px;
  }
}
.deco-bg::before {
  content: "";
  position: absolute;
  background-color: #e1f1fa;
  z-index: -1;
  right: calc((100vw - 100%) / -2);
  transform: none;
  top: 71%;
  width: 100%;
  height: 24%;
  pointer-events: none;
  border-radius: 6px;
}
@media screen and (min-width: 750px) {
  .deco-bg::before {
    content: "";
    position: absolute;
    background-color: #e1f1fa;
    z-index: -1;
    right: calc((100vw - 100%) / -2);
    transform: none;
    top: 62%;
    width: 97%;
    height: min(26.833vw, 300px);
    pointer-events: none;
    border-radius: 6px;
  }
}
/* Fallback for older browsers (IE) — at >=1440px use fixed pixel values */
@media (min-width: 1441px) {
  .deco-bg::after {
    left: calc((100vw - 100%) / -2);
    transform: none;
    top: 259px;
    width: calc(100% - 25%);
  }
  .deco-bg::before {
    content: "";
    position: absolute;
    background-color: #e1f1fa;
    z-index: -1;
    right: calc((100vw - 100%) / -2);
    transform: none;
    top: 62%;
    width: calc(100% - 25%);
    height: 390px;
    pointer-events: none;
    border-radius: 6px;
  }
}

.article .sec-ttl::before {
  width: calc(53px / 2);
  aspect-ratio: 53 / 52;
  background-image: url(../img/top/icon-thumbtack.svg);
}

.article .allBtn {
  position: absolute;
  top: 8px;
  right: 0;
  padding-inline-end: 0;
}

.article .allBtn::after {
  content: none;
}

.article-list li {
  border-bottom: 1px solid #dbdbdb;
}

.article-list li + li a {
  padding-top: 15px;
}

.articleCard {
  position: relative;
}

@media (hover: hover) {
  .articleCard::after {
    transition: transform 0.3s;
  }

  .articleCard:hover::after {
    transform: translate(10px, -50%);
  }
}

.articleCard a {
  display: block;
  padding: 0 50px 15px 15px;
}

.articleCard::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translate(0, -50%);
  display: block;
  width: calc(13px / 2);
  height: auto;
  aspect-ratio: 13 / 32;
  background: center/contain no-repeat url(../img/top/news_arrow.svg);
}

.articleCard-date {
  margin-bottom: 5px;
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  color: #999;
}

.articleCard-ttl {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.5;
  font-size: 1.4rem;
  font-weight: 400;
}

@media screen and (min-width: 768px) {
  .article .sec-ttl::before {
    width: 37px;
  }

  .article .allBtn {
    top: 10px;
  }

  .article-list li + li a {
    padding-top: 20px;
  }

  .articleCard a {
    padding: 0 50px 20px 0;
  }

  .articleCard-date {
    font-size: 1.6rem;
  }

  .articleCard-ttl {
    font-size: 1.8rem;
  }
}

/* ----- beergirl ----- */
/* .beergirl .sec-ttl::before {
  width: calc(51px / 2);
  aspect-ratio: 51 / 61;
  background-image: url(../img/top/icon-beer.svg);
} */
.beergirl {
  display: block;
}

@media screen and (min-width: 768px) {
  .beergirl {
    display: none;
  }
}
.beergirl-gird {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* grid-template-columns: 1fr 1fr; */
  gap: 15px;
  margin-top: 30px;
}

.beergirl-gird a {
  display: block;
}

/* 1枚目は横幅いっぱい、2枚目以降は2カラム並び */
.beergirl-gird a:nth-child(1) {
  width: 100%;
}

.beergirl-gird a:nth-child(n + 2) {
  width: calc((100% - 15px) / 2); /* compensate for gap so two items fit a row */
  box-sizing: border-box;
}

.beergirl-list li + li {
  margin-top: 10px;
}

/* .beergirl-gird a:first-of-type {
  grid-column: span 2;
} */
.beergirl-gird a,
.beergirl-gird a img {
  aspect-ratio: 16 / 9;
}

@media (hover: hover) {
  .beergirl-gird a img {
    transition: transform 0.3s;
  }

  .beergirl-gird a:hover img {
    transform: scale(1.05);
  }
}

@media screen and (min-width: 768px) {
  .sec {
    padding: 96px 30px 150px;
  }

  .beergirl .sec-ttl::before {
    width: 35px;
  }

  .beergirl-gird {
    margin-inline: auto;
    max-width: 600px;
    /* grid-template-columns: calc(70% - 30px) 30%;
    gap: 30px; */
  }

  /* .beergirl-gird a:first-of-type {
    grid-row: span 2;
    grid-column: auto;
  } */
}
/* ===============================================================================
    追加CSS
=============================================================================== */

/* ----- mv ----- */
/* .mv-sp {
    display: block;
}
@media screen and (min-width: 768px) {
  .mv-sp {
    display: none;
  }
} */
.mv-boat {
  position: absolute;
  bottom: calc(100% - clamp(123px, 34.406vw /* viewport 768px で 318px */, 318px));
  left: 50%;
  translate: -50% 0;
  width: clamp(182px, 47.396vw /* viewport 768px で 364px */, 364px);
}

@media screen and (min-width: 768px) {
  .mv-boat {
    width: 15%;
    bottom: calc(100% - 35%);
  }
}
@media screen and (min-width: 1156px) {
  .mv-boat {
    width: 15%;
    bottom: calc(100% - 29%);
  }
}
.mv-deco {
  position: absolute;
  top: 91%;
  left: 73%;
  translate: -50% -50%;
  width: 54%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .mv-deco {
    position: absolute;
    top: 93%;
    left: 83%;
    translate: -50% -50%;
    width: 33%;
    z-index: 2;
  }
}
.mv-deco:nth-of-type(2) {
  width: 50%;
  top: 91%;
  left: calc(100% - 81%);
}
@media screen and (min-width: 768px) {
  .mv-deco:nth-of-type(2) {
    width: 28%;
    top: 91%;
    left: calc(100% - 81%);
  }
}
.wave {
  position: absolute;
  bottom: -2%;
  left: 50%;
  translate: -50% 0;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .wave {
    position: absolute;
    bottom: -10%;
    left: 50%;
    translate: -50% 0;
    width: 100%;
    z-index: 1;
  }
}
.mv-deco02 {
  display: none;
}
@media screen and (min-width: 768px) {
  .mv-deco02 {
    display: block;
    position: absolute;
    top: 101px;
    left: 50%;
    translate: -50%;
    width: 63%;
    z-index: 3;
  }
}
.mv-deco03 {
  display: block;
  position: absolute;
  top: 9px;
  left: 11%;
  translate: -50% 0;
  width: 23%;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .mv-deco03 {
    display: none;
  }
}
.mv-deco04 {
  display: block;
  position: absolute;
  top: 7px;
  left: 88%;
  translate: -50% 0;
  width: 24%;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .mv-deco04 {
    display: none;
  }
}
/* ----- player ----- */
.player {
  background-color: #fff;
  margin-bottom: 20px;
}
/* ----- feature ----- */
.topPopularSlide.feature {
  display: flex;
  gap: 10px;
}
@media screen and (min-width: 768px) {
  .topPopularSlide.feature {
    gap: min(0.694vw, 10px);
  }
}
.feature {
  width: 100%;
  background-color: #fff;
}
.feature-textBox {
  font-weight: 600;
  padding-top: 10px;
}
.feature p {
  font-size: clamp(10px, 2.734vw /* viewport 768px で 21px */, 21px);
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .feature p {
    font-size: clamp(13px, 9.571px + 0.446vw /* 768px-1440px間で13px-16pxの線形補間 */, 16px);
  }
}
.feature h3 {
  font-size: calc(20 / var(--rem-base) * 1rem);
  font-weight: 700;
  color: #888888;
  margin-bottom: 5px;
}
.feature-boxFlex {
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: anchor-center;
  gap: 10px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .feature-boxFlex {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    margin: 0 auto;
  }
}
.feature-img {
  width: 30%;
  object-fit: cover;
}
.feature-img img {
  display: block;
  padding: 10px;
  margin: 0 auto;
  transition: 0.3s;
}
/* @media screen and (min-width:768px) {
  .feature-img img {
    height: min(6.25vw,200px);
    width: min(8.3333vw,266px);
  }
} */
.feature-boxItem {
  width: 100%;
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .feature-boxItem {
    width: 50%;
    margin-top: 0;
  }
}
.feature-boxItem._left {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}
.recommendation-box {
  position: relative;
}
.recommendation-textBox {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
@media screen and (min-width: 768px) {
  .recommendation-textBox {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
}
.recommendation-textArea {
  line-height: 1.5;
}
.recommendation-textArea h3 {
  color: #888888;
  font-size: 14px;
}
.recommendation-textArea h4 {
  font-size: clamp(15px, 3.516vw /* viewport 768px で 27px */, 27px);
  font-weight: 600;
  color: #008fdb;
}
@media screen and (min-width: 768px) {
  .recommendation-textArea h4 {
    font-size: min(1.597vw, 23px);
    font-weight: 600;
    color: #008fdb;
  }
}
.recommendation-textArea p {
  font-size: calc(18 / var(--rem-base) * 1rem);
}

.recommendation-textArea p {
  font-size: clamp(10px, 2.734vw /* viewport 768px で 21px */, 21px);
}
@media screen and (min-width: 768px) {
  .recommendation-textArea p {
    font-size: clamp(12px, 7.429px + 0.595vw /* 768px-1440px間で12px-16pxの線形補間 */, 16px);
  }
}
/* ========================================
    gurumeSearch
======================================== */
.gurume-ttl {
  position: relative;
  gap: 5px;
}
@media screen and (min-width: 768px) {
  .gurume-ttl {
    position: relative;
  }
}
.gurumeSearch {
  position: relative;
  background-color: #f0f0f0;
  padding-top: clamp(100px, 26.042vw /* viewport 768px で 200px */, 200px);
  padding-bottom: 70px;
  padding-inline: 20px;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .gurumeSearch {
    padding-top: 35px;
  }
}
/* .gurumeSearch::after {
  content: '';
    position: absolute;
    background-image: url(../img/top/mv-wave.webp);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    bottom: calc(100% - 12px);
    width: 100%;
    height: 123%;

} */

/* 
.gurumeSearch .sec-ttl::before {
    display: none;

} */

.gurumeSearch .sec-ttl::before {
  display: block;
  width: 40px;
  aspect-ratio: 64 / 55;
  background-image: url(../img/top/gurumeSerach-icon.webp);
}
@media screen and (min-width: 750px) {
  .gurumeSearch .sec-ttl::before {
    display: block;
    width: 51px;
    aspect-ratio: 64 / 55;
    background-image: url(../img/top/gurumeSerach-icon.webp);
  }
}
/* ---------------------------filter tags (グルメを探す の下に表示されるタグボタン) --------------*/
.filter-tags-wrapper {
  margin-top: 12px;
  position: relative;
  z-index: 10;
}
.filter-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
}
.filter-tags input[type="radio"] {
  display: none;
}
.filter-tags label {
  display: inline-block;
  padding: 8px 14px;
  color: #333;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.08s;
  border-bottom: 1px solid #ccc;

  font-size: clamp(12px, 3.125vw /* viewport 768px で 24px */, 24px);
}
@media screen and (min-width: 768px) {
  .filter-tags label {
    font-size: min(1.8555vw, 26px);
  }
}
.filter-tags input[type="radio"]:checked + label {
  color: #008fdb;
  border-bottom: 2px solid #008fdb;
}
.filter-panels {
  margin-top: 10px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.filter-panel {
  display: none;
}
.filter-panel.active {
  display: block;
}

/* search box inside filter panel */
.filter-search .search-box {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
  .filter-search .search-box {
    margin-top: 60px;
  }
}
.filter-search input[type="text"],
.filter-search .search-input {
  width: min(60ch, 560px);
  padding: 20px 23px;
  border: 1px solid #ddd;
  border-radius: 9999px 0 0 9999px;
  border-right: none;
  font-size: 14px;
}
.filter-search button.search-clear {
  width: 54px;
  padding: 8px 17px;
  border-radius: 0 9999px 9999px 0;
  background: #008fdb;
  border: none;
  cursor: pointer;
}
.filter-search-results {
  width: 100%;
  margin-top: 12px;
  margin: 0 auto;
  display: block;
  padding: 10px 12px;
  text-align: left;
  margin-top: 15px;
}

/* 空の状態では非表示 + スタイルリセット */
.filter-search-results:empty {
  display: none;
  padding: 0;
  border: none;
  background: none;
}
.result-item {
  padding: 6px;
  margin: 0;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .result-item {
    padding: 12px;
  }
}
.result-item:nth-child(2n) {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.filter-search-results .result-item a {
  display: block;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  background: none !important;
}
.filter-search-results .result-item p {
  margin: 6px 0 0 0;
  color: #666;
  font-size: 0.95rem;
}
.keaword-area {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  gap: 10px;
}
@media screen and (min-width: 768px) {
  .keaword-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-top: 20px;
    gap: 10px;
  }
}
.keawaord-titleBox {
  display: flex;
  align-items: center;
  gap: 6px;
}
.keawaord-deco {
  width: calc(35px / 2);
}
.keyword-item {
  padding: 12px;
  background-color: #fff;
  border: 1px solid #008fdb;
  color: #008fdb;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.08s;
}
@media screen and (min-width: 768px) {
  .keyword-item {
    padding: 6px 12px;
    font-size: 16px;
  }
}
/* .keyword-item:last-child{
  display: none;
}
@media screen and (min-width:768px) {
  .keyword-item:last-child{
  display: block;
}
} */
.keyword-item:hover {
  background-color: #008fdb;
  color: #fff;
}
.keaword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* --- ジャンル簡易フィルター --- */
.genre-area {
  margin-top: 30px;
  position: relative;
  z-index: 1;
}
.genre-filter {
  margin: 0;
  /* padding: 18px 16px 14px; */
  /* background: linear-gradient(135deg, #f5faff 0%, #ffffff 100%);
  border: 1px solid #dfe9f2;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); */
  display: grid;
  gap: 12px;
  vertical-align: inherit !important;
}
.genre-filter legend {
  font-size: 20px;
  font-weight: 700;
  color: #006298;
  letter-spacing: 0.02em;
  /* white-space: normal ! important; */
}
@media screen and (min-width: 768px) {
  .genre-filter legend {
    font-size: clamp(12px, 1.667vw /* viewport 1440px で 24px */, 24px);
  }
}
.store-filter {
  margin-top: 16px;
}
.genre-filter-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  /* gap: 8px; */
}
.genre-filter-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.08s;
  user-select: none;
  /* white-space:pre-line ; */
}
.genre-filter-option input {
  accent-color: #008fdb;
  width: clamp(18px, 4vw, 24px);
  height: clamp(18px, 4vw, 24px);
  cursor: pointer;
  flex-shrink: 0;
}
.genre-filter-option:hover {
  border-color: #008fdb;
  box-shadow: 0 6px 18px rgba(0, 143, 219, 0.12);
}
.genre-filter-option:active {
  transform: translateY(1px);
}
.genre-filter-option span {
  font-size: clamp(14px, 3.5vw, 19px);
  color: #111;
  white-space: pre-line;
}
.genre-clear {
  justify-self: start;
  padding: 8px 14px;
  border: 1px solid #c6d8e6;
  border-radius: 999px;
  background: #fff;
  color: #006298;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.genre-clear:hover {
  background: #006298;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 98, 152, 0.18);
}
.genre-status {
  margin: 0;
  color: #4b6475;
  font-size: 14px;
}
.genre-results {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.genre-result {
  padding: 14px 16px;
  border: 1px solid #e5edf4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    border-color 0.12s;
}
.genre-result:hover {
  transform: translateY(-2px);
  border-color: #c6d8e6;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}
.genre-result h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.genre-result-store {
  margin: 0 0 6px;
  font-size: 14px;
  color: #4b6475;
}
.genre-result-tags {
  margin: 0;
  font-size: 13px;
  color: #008fdb;
  font-weight: 600;
}
.genre-show-more-wrap {
  display: block;
  width: 100%;
  text-align: center;
  margin-block: 20px;
}
.genre-show-more-wrap .btn-genre-show-more {
  display: block;
  width: 100%;
  background-color: #008fdb;
  color: #fff;
  padding-block: 15px;
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}
.genre-show-more-wrap .btn-genre-show-more::before,
.genre-show-more-wrap .btn-genre-show-more::after {
  content: "";
  display: block;
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.genre-show-more-wrap .btn-genre-show-more::before {
  width: 2px;
  height: 20px;
  right: 25px;
}
.genre-show-more-wrap .btn-genre-show-more::after {
  width: 20px;
  height: 2px;
  right: 16px;
}
.genre-show-more-wrap .btn-genre-show-more.is-open::before {
  display: none;
}
@media (hover: hover) {
  .genre-show-more-wrap .btn-genre-show-more:hover {
    opacity: 0.8;
  }
}
@media screen and (min-width: 768px) {
  .genre-area {
    margin-top: 40px;
  }
  .genre-filter {
    grid-template-columns: 2fr auto;
    align-items: center;
    /* padding: 22px 20px 18px; */
    padding-inline: 10px;
  }
  .is-product-search-modal .genre-filter {
    grid-template-columns: 1fr;
  }
  .genre-show-more-wrap .btn-genre-show-more {
    font-size: 2rem;
  }
  .genre-show-more-wrap .btn-genre-show-more::before {
    width: 3px;
    height: 25px;
    right: 35px;
  }
  .genre-show-more-wrap .btn-genre-show-more::after {
    width: 25px;
    height: 3px;
    right: 24px;
  }
  .genre-filter-list {
    grid-column: 1 / 2;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
  }
  .is-product-search-modal .genre-filter > .genre-filter-list > .genre-filter-list,
  .genre-priority-b-wrap > .genre-filter-list {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  }
  .genre-clear,
  .genre-status {
    grid-column: 2 / 3;
  }
  .genre-clear {
    justify-self: end;
  }
  .genre-status {
    justify-self: end;
  }
  .genre-results {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
  }
}
/* ========================================
SP専用スタイル
======================================== */
/* ----------------------------------------- グルメ--- */
.gurume-spArea {
  display: none;
}
/* @media screen and (min-width: 768px) {
  .gurume-spArea {
    display: none;
  }
} */
.ttl-flex {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: clamp(30px, 7.813vw /* viewport 768px で 60px */, 60px);
}
.ttl-sp {
  font-size: clamp(20px, 5.208vw /* viewport 768px で 40px */, 40px);
}
@media screen and (min-width: 768px) {
  .ttl-sp {
    font-size: clamp(30px, 7.813vw /* viewport 768px で 60px */, 60px);
  }
}
.ttl-genre {
  margin-top: clamp(30px, 7.813vw /* viewport 768px で 60px */, 60px);
}
.search-text {
  font-size: clamp(12px, 3.125vw /* viewport 768px で 24px */, 24px);
  color: #008fdb;
  letter-spacing: 0.1rem;
}
/* --- SP ジャンルスライダー（「すべて見る」直下） --- */
.sp-genre-slider {
  overflow: hidden; /* 端で少しだけ次の画像が覗くように */
}
.sp-genre-slider .swiper-wrapper {
  align-items: center;
  margin-top: clamp(10px, 3vw, 30px);
}
.js-slider-spGenre .swiper-slide {
  width: auto; /* SwiperのslidesPerView制御に委ねる */
}
.spGenreSlide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
}
/* --- SPスライダー専用カード（topPopularSlideの別名版） --- */
.spCard {
  display: block;
}
.spCard-img {
  overflow: hidden;
}
.spCard-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 10px;
  background-color: #fff;
}
.spCard-info h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(18px, 3.646vw /* viewport 768px で 28px */, 28px);
  font-weight: 500;
  line-height: 1.1;
}
.spCard-info p {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: calc(16 / var(--rem-base) * 1.2rem);
  color: #888;
}
@media (hover: hover) {
  .spCard-img img {
    transition: transform 0.3s;
  }
  .spCard:hover .spCard-img img {
    transform: scale(1.05);
  }
}
@media screen and (min-width: 768px) {
  .sp-genre-slider {
    padding: 24px 30px 10px;
  }
  .spCard-info h3 {
    font-size: min(1.6vw, calc(16 / var(--rem-base) * 2rem));
    font-weight: 700;
  }
  .spCard-info p {
    font-size: min(1.5277vw, calc(16 / var(--rem-base) * 1.4rem));
  }
}
@media screen and (min-width: 768px) {
  /* PCでは少し余白を広げる（必要なら調整） */
  .sp-genre-slider {
    padding: 24px 30px 10px;
  }
}

/* ========================================
    article-spArea  SPのみ表示
======================================== */
.ttl-flex._article {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-text {
  position: absolute;
  top: 75%;
  right: 0;
  transform: translateY(-50%);
  font-size: clamp(12px, 3.125vw /* viewport 768
px で 24px */, 24px);
  color: #008fdb;
  letter-spacing: 0.1rem;
}
.article-spArea {
  display: block;
  /* max-width: 620px; */
  margin: 0 auto;
  padding: 0 20px;
  background-color: #f7f9fa;
  padding-bottom: 70px;
  padding-top: clamp(45px, 11.719vw /* viewport 768px で 90px */, 90px);
}
@media screen and (min-width: 768px) {
  .article-spArea {
    display: none;
  }
}
.article-ttlFlex {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 5px;
}
.article-box {
  margin-top: clamp(25px, 6.51vw /* viewport 768px で 50px */, 50px);
}
.article-date {
  font-size: clamp(14px, 3.646vw /* viewport 768px で 28px */, 28px);
  font-family: "Roboto", sans-serif;
  color: #999;
}
.article-ttl {
  font-size: clamp(12px, 3.125vw /* viewport 768px で 24px */, 24px);
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
}
.article-item {
  position: relative;
  padding-bottom: 20px;
  border-bottom: 2px solid #dbdbdb;
}
.arrticle-arrow {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  display: block;
  width: calc(13px / 2);
  height: auto;
  aspect-ratio: 13 / 32;
  background: center/contain no-repeat url(../img/top/news_arrow.svg);
}
@media screen and (min-width: 768px) {
  .arrticle-arrow {
    width: calc(26px / 2);
  }
}
.article-item:nth-child(n + 2) {
  padding-top: 15px;
}
/* .article-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
} */
.article-ttl._gold {
  color: #fff;
  background-color: #b3a369;
  padding: 5px 15px;
  border-radius: 9999px;
}
.article-ttl._red {
  color: #fff;
  background-color: #f25920;
  padding: 5px 15px;
  border-radius: 9999px;
}
.article-ttl._blue {
  color: #fff;
  background-color: #006298;
  padding: 5px 15px;
  border-radius: 9999px;
}
.article-text {
  font-size: clamp(16px, 3.646vw /* viewport 768px で 28px */, 28px);
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  margin-top: 5px;
}

/* ========================================
  index.html 限定（body.is-top）header非表示＋iconMenu SPのみ表示
======================================== */
body.is-top .header {
  display: none !important;
}
/* SPでiconMenu表示（レイアウトは共通CSSに合わせてblockのまま） */
body.is-top .iconMenu {
  display: block;
}
@media screen and (min-width: 768px) {
  /* PCではiconMenuを非表示 */
  body.is-top .iconMenu {
    display: none !important;
  }
}
/* indexトップではハンバーガーも非表示 */
body.is-top .hamburger {
  display: none !important;
}

/* ========================================
   店舗検索モーダル
   ======================================== */
.store-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.store-modal[style*="display: block"] {
  z-index: 10000;
  pointer-events: auto;
}

.store-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  z-index: 1;
}

.store-modal-content {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1200px;
  max-height: 70vh;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
@media screen and (min-width: 768px) {
  .store-modal-content {
    top: 50%;
    width: 90%;
    max-height: 900px;
  }
}

.store-modal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 4%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 20px 20px 0 0;
}

.store-modal-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 700;
  color: #008fdb;
  margin: 0;
}

.store-modal-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border: 2px solid #008fdb;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 24px;
  color: #008fdb;
  padding: 0;
  flex-shrink: 0;
}

.store-modal-close:hover {
  background: #008fdb;
  color: #fff;
  transform: rotate(90deg);
}

.store-modal-body {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 20px;
}
@media screen and (min-width: 750px) {
  .store-modal-body {
    padding: 30px 4%;
  }
}

.store-modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 20px 4%;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 20px 20px;
}

.btn-modal-clear {
  flex: 1;
  max-width: 200px;
  height: 60px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(14px, 3vw, 20px);
  font-weight: 700;
  color: #008fdb;
  background: #fff;
  border: 2px solid #008fdb;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}
@media screen and (min-width: 750px) {
  .btn-modal-clear {
    flex: 1;
    max-width: 200px;
    padding: 14px 24px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 700;
    color: #008fdb;
    background: #fff;
    border: 2px solid #008fdb;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
  }
}
.btn-modal-clear:hover {
  background: #f0f9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 143, 219, 0.2);
}

.btn-modal-search {
  flex: 1;
  max-width: 200px;
  height: 60px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(14px, 3vw, 20px);
  font-weight: 700;
  color: #fff;
  background: #008fdb;
  border: 2px solid #008fdb;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}
@media screen and (min-width: 750px) {
  .btn-modal-search {
    flex: 1;
    max-width: 200px;
    padding: 14px 24px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 700;
    color: #fff;
    background: #008fdb;
    border: 2px solid #008fdb;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
  }
}
.btn-modal-search:hover {
  background: #0077b8;
  border-color: #0077b8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 143, 219, 0.4);
}

/* モーダル内のフィルターエリアのスタイル調整 */
.store-modal .genre-area {
  margin-bottom: 0;
}

.store-modal .search-results {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .store-modal .genre-area {
    margin-bottom: 30px;
  }

  .store-modal .search-results {
    margin-top: 30px;
  }
}

/* PCサイズでのレイアウト調整 */
@media screen and (min-width: 768px) {
  .store-modal-header {
    padding: 30px 40px;
  }

  .store-modal-body {
    padding: 40px;
  }

  .store-modal-footer {
    padding: 30px 40px;
    gap: min(2.777vw, 40px);
  }

  .store-modal-close {
    width: 50px;
    height: 50px;
    font-size: 28px;
  }
}

/* モーダル表示時のbodyスクロール防止 */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

/* 商品から探すタブ選択時に.search.deco-bg以降を非表示 */
/* body.hide-lower-sections .search.deco-bg,
body.hide-lower-sections
  .search.deco-bg
  ~ *:not(#store-search-modal):not(script):not(.useful):not(.footer) {
  display: none !important;
} */

/* 現在の検索条件エリア */
.current-filters-area {
  width: 100%;
  margin: 50px auto 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #f5faff 0%, #ffffff 100%);
  border: 2px solid #008fdb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 143, 219, 0.1);
}
@media screen and (min-width: 768px) {
  .current-filters-area {
    width: 50%;
  }
}

.current-filters-inner {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.current-filters-title {
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
  color: #008fdb;
  margin: 0;
  /* border-bottom: 2px solid #008fdb; */
}
.current-titleFlex {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.current-filters-deco {
  width: calc(50px / 2);
  margin-right: 8px;
}
.current-filters-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 30px;
}

.current-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #008fdb;
  color: #fff;
  border-radius: 20px;
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 600;
  transition: all 0.2s ease;
}

.current-filter-tag:hover {
  background: #0077b8;
  transform: translateY(-1px);
}

.current-filter-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s ease;
}

.current-filter-tag-remove:hover {
  background: rgba(255, 255, 255, 0.5);
}

.current-filters-clear {
  align-self: flex-start;
  background: #fff;
  border: none;
  border-radius: 20px;
  color: #008fdb;
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.current-filters-clear:hover {
  background: #008fdb;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 143, 219, 0.3);
}

@media screen and (min-width: 768px) {
  .current-filters-area {
    padding: 25px 30px;
  }

  .current-filters-inner {
    gap: 20px;
  }
}

/* 商品検索結果エリア */
.product-results-area {
  margin-top: 40px;
  padding: 0 4%;
}

.product-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 30px;
  margin-top: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(51, 51, 51, 0.2);
}

.product-results-header02 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(51, 51, 51, 0.2);
}
.product-results-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  /* border-bottom: 2px solid rgba(51, 51, 51, 0.2); */
}
.product-results-title {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  color: #333;
  margin: 0;
}

.product-results-count {
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
  color: #008fdb;
  background: #f0f9ff;
  padding: 8px 16px;
  border-radius: 20px;
  /* white-space: nowrap; */
}

.product-category {
  margin-bottom: 40px;
}

.product-category-title {
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 700;
  color: #333;
  margin: 0 0 20px 0;
  padding-left: 12px;
  border-left: 4px solid #008fdb;
}

.product-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.product-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: all 0.3s ease;
}

.product-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 143, 219, 0.2);
}

.product-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-item-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f5f5f5;
}

.product-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-item:hover .product-item-image img {
  transform: scale(1.05);
}

.product-item-info {
  padding: 15px;
  background: #fff;
}

.product-item-name {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .product-item-name {
    font-size: clamp(14px, 1.389vw /* viewport 1440px で 20px */, 20px);
  }
}

.product-item-store {
  font-size: clamp(12px, 3vw, 14px);
  color: #fff;
  /* background-color: #008fdb; */
  margin: 0;
}

.back-to-top-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  padding: 30px 0;
}

.btn-back-to-top {
  padding: 15px 40px;
  font-size: clamp(14px, 3.5vw, 16px);
  font-weight: 700;
  color: #fff;
  background: #000;
  border: 2px solid #000;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-back-to-top:hover {
  background: #0077b8;
  border-color: #0077b8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 143, 219, 0.4);
}

@media screen and (min-width: 768px) {
  .product-results-area {
    padding: 0 40px;
  }

  .product-items-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

@media screen and (min-width: 1024px) {
  .product-items-grid {
    gap: 40px;
  }
}

.search-textSp {
  display: block;
  width: clamp(233px, 60.677vw /* viewport 768px で 466px */, 466px);
  margin-bottom: clamp(20px, 5.208vw /* viewport 768px で 40px */, 40px);
}
.search-textSp02 {
  display: block;
  width: 80%;
  margin-bottom: clamp(20px, 5.208vw /* viewport 768px で 40px */, 40px);
}
@media screen and (min-width: 768px) {
  .search-textSp {
    display: none;
  }
  .search-textSp02 {
    display: none;
  }
  .popular {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.popular {
  padding-top: 20px;
  padding-bottom: 15px;
}

.topPopularSlide-img img {
  width: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 768px) {
  .topPopularSlide-img img {
    width: 100%;
    height: 220px; /* 任意の高さ */
    object-fit: cover;
    display: block;
  }
}

.recommendation-img {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .recommendation-img {
    width: 100%;
  }
}
.btn-modal-select-all {
  flex: 1;
  max-width: 200px;
  height: 60px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(14px, 3vw, 20px);
  font-weight: 700;
  color: #fff;
  background: #008fdb;
  border: 2px solid #008fdb;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .btn-modal-select-all {
    flex: 1;
    max-width: 200px;
    padding: 14px 24px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 700;
    color: #fff;
    background: #008fdb;
    border: 2px solid #008fdb;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
  }
}
/* .space-normal {
  white-space: normal !important;
} */

.js-priseText {
  font-size: clamp(14px, 3vw, 16px);
  color: #333;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
}
.player-flex {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: min(6.25vw, 90px);
}
@media screen and (min-width: 768px) {
  .player-flex {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: min(6.25vw, 90px);
  }
}