@import url("https://file001.shop-pro.jp/PA01504/888/style/top/Common.css?Version=20250402A");
@import url("https://file001.shop-pro.jp/PA01504/888/style/product-list/Common.css?Version=20250325-1450");

/* // テスト用
// @import url("https://e-gang-hoglo.testspace.jp/style/top/Common.css?Version=20231108");
// @import url("https://e-gang-hoglo.testspace.jp/style/product-list/Common.css?Version=20231108");
*/


/* ==========================
   NEW ARRIVAL：Swiper 基本
========================== */
.newarrival-swiper {
  position: relative;
  margin-bottom: 40px;
}

.newarrival-swiper .swiper-wrapper {
  display: flex;
  transition-timing-function: linear !important; /* 一定速度で流す */
}

.newarrival-swiper .swiper-slide {
  float: none;
  width: auto;
}

.newarrival-nav .swiper-button-prev,
.newarrival-nav .swiper-button-next {
  width: 32px;
  height: 32px;
}

.newarrival-pagination {
  margin-top: 16px;
}


/* ==========================
   スクロール時フェードイン
========================== */
.js-eg-fadein {
  opacity: 0;
  transform: translateY(18px);
  transition-property: opacity, transform;
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(0.25, 0.9, 0.25, 1);
  will-change: opacity, transform;
}

.js-eg-fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* BRAND セクションだけはフェードインを無効化（常に表示） */
#PanelTopProductBrand,
#PanelTopProductBrand.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* ==========================
   NEW ARRIVAL：スマホを左右フル幅に
========================== */
@media (max-width: 767px) {
  .PanelBodyMarginTopZero #PanelTopProductNew {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  #PanelTopProductNewList {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }

  #PanelTopProductNewList > ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  .newarrival-swiper .PanelProductListDetail {
    max-width: 320px;
    margin: 0 auto;
    text-align: left;
  }

  .newarrival-swiper .PanelProductListDetailPhoto img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Swiper が読み込み時に display:none にされるのを防ぐ保険 */
.newarrival-swiper .swiper-wrapper .swiper-slide {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 9枚目以降も確実に表示（必要なら残す） */
.newarrival-swiper .swiper-wrapper .swiper-slide:nth-child(n+9) {
  display: block !important;
}


/* ==========================
   BRAND：横からスライドイン
========================== */
#PanelTopProductBrandList li {
  opacity: 0;
  transform: translateX(200px);
  transition:
    opacity 1s cubic-bezier(0.25, 0.9, 0.25, 1),
    transform 1s cubic-bezier(0.25, 0.9, 0.25, 1);
  will-change: opacity, transform;
}

#PanelTopProductBrand.is-visible #PanelTopProductBrandList li {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================
   BRAND：1個ずつ時間差で出現
========================== */
@media (min-width: 768px) {
  #PanelTopProductBrandList li:nth-child(1)  { transition-delay: 1.00s; }
  #PanelTopProductBrandList li:nth-child(2)  { transition-delay: 1.20s; }
  #PanelTopProductBrandList li:nth-child(3)  { transition-delay: 1.40s; }
  #PanelTopProductBrandList li:nth-child(4)  { transition-delay: 1.60s; }
  #PanelTopProductBrandList li:nth-child(5)  { transition-delay: 1.80s; }
  #PanelTopProductBrandList li:nth-child(6)  { transition-delay: 2.00s; }
  #PanelTopProductBrandList li:nth-child(7)  { transition-delay: 2.20s; }
  #PanelTopProductBrandList li:nth-child(8)  { transition-delay: 2.40s; }
  #PanelTopProductBrandList li:nth-child(9)  { transition-delay: 2.60s; }
  #PanelTopProductBrandList li:nth-child(10) { transition-delay: 2.80s; }
  #PanelTopProductBrandList li:nth-child(11) { transition-delay: 3.00s; }
  #PanelTopProductBrandList li:nth-child(12) { transition-delay: 3.20s; }
  #PanelTopProductBrandList li:nth-child(13) { transition-delay: 3.40s; }
  #PanelTopProductBrandList li:nth-child(14) { transition-delay: 3.60s; }
  #PanelTopProductBrandList li:nth-child(15) { transition-delay: 3.80s; }
  #PanelTopProductBrandList li:nth-child(16) { transition-delay: 4.00s; }
  #PanelTopProductBrandList li:nth-child(17) { transition-delay: 4.20s; }
}

@media (max-width: 767px) {
  #PanelTopProductBrandList li:nth-child(1)  { transition-delay: 0.30s; }
  #PanelTopProductBrandList li:nth-child(2)  { transition-delay: 0.55s; }
  #PanelTopProductBrandList li:nth-child(3)  { transition-delay: 0.80s; }
  #PanelTopProductBrandList li:nth-child(4)  { transition-delay: 1.05s; }
  #PanelTopProductBrandList li:nth-child(5)  { transition-delay: 1.30s; }
  #PanelTopProductBrandList li:nth-child(6)  { transition-delay: 1.55s; }
  #PanelTopProductBrandList li:nth-child(7)  { transition-delay: 1.80s; }
  #PanelTopProductBrandList li:nth-child(8)  { transition-delay: 2.05s; }
  #PanelTopProductBrandList li:nth-child(9)  { transition-delay: 2.30s; }
  #PanelTopProductBrandList li:nth-child(10) { transition-delay: 2.55s; }
  #PanelTopProductBrandList li:nth-child(11) { transition-delay: 2.80s; }
  #PanelTopProductBrandList li:nth-child(12) { transition-delay: 3.05s; }
  #PanelTopProductBrandList li:nth-child(13) { transition-delay: 3.30s; }
  #PanelTopProductBrandList li:nth-child(14) { transition-delay: 3.55s; }
  #PanelTopProductBrandList li:nth-child(15) { transition-delay: 3.80s; }
  #PanelTopProductBrandList li:nth-child(16) { transition-delay: 4.05s; }
  #PanelTopProductBrandList li:nth-child(17) { transition-delay: 4.30s; }
}

/* ==========================
   BRAND：スマホは 6個まで表示＋MORE
========================== */
@media (max-width: 767px) {
  #PanelTopProductBrandList li:nth-child(n+7) {
    display: none;
  }
  #PanelTopProductBrandButton {
    display: block;
  }
}

/* ==========================
   BRAND：ホバーで中の画像だけズーム
========================== */
/* 枠からはみ出す部分を隠す */
#PanelTopProductBrandList li {
  overflow: hidden;
}

/* 画像：通常状態 */
#PanelTopProductBrandList li a img {
  width: 100%;
  transition: transform 0.45s ease;
  transform: scale(1);
}

/* ホバー時：画像だけズーム（PC） */
#PanelTopProductBrandList li:hover a img {
  transform: scale(1.07);
}