@charset "UTF-8";

/* ==========================================================================
   季節特集LP 汎用スタイルシート (seasonal-gift.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   特集ページ全体の基本設定・余白
   -------------------------------------------------------------------------- */
.season-lp {
  background: #f5f0eb url(../images/common/bg_01.gif);
}

.season-lp #contents .contents-inner {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 共通セクション余白 */
.season-lp .lp-section {
  margin-bottom: 40px;
}

.season-lp .lp-hero img,
.season-lp .lp-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   アンカーナビゲーション（カテゴリ別・予算別）
   -------------------------------------------------------------------------- */
.lp-nav-group .lp-nav-title {
  margin-bottom: 15px;
  text-align: center;
}

.lp-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-nav-list.cols-4 li {
  flex: 0 1 calc(25% - 8px);
}

.lp-nav-list.cols-5 li {
  flex: 0 1 calc(20% - 8px);
}

.lp-nav-list li a {
  display: block;
  transition: opacity 0.2s;
}

.lp-nav-list li a:hover {
  opacity: 0.8;
}

.lp-nav-list li img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   ループスライダー表示調整 (infiniteslide.js)
   -------------------------------------------------------------------------- */
.lp-loopslider-area {
  position: relative;
  overflow: hidden;
  height: 230px;
  margin-bottom: 40px;
}

#loopslider ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

#loopslider ul li {
  width: 160px;
  height: 230px;
  margin-left: 20px;
  flex-shrink: 0;
}

#loopslider ul li a {
  display: block;
  text-decoration: none;
  color: #333;
}

#loopslider ul li img {
  width: 100%;
  height: auto;
  display: block;
}

#loopslider ul li h3 {
  font-size: 13px;
  line-height: 1.3;
  margin: 10px 0 3px;
}

#loopslider ul li p {
  font-size: 12px;
  font-weight: bold;
  color: #8c0909;
}

/* --------------------------------------------------------------------------
   ランキングスライダー (bxSlider)
   -------------------------------------------------------------------------- */
.lp-ranking {
  background: #ba9e7b url(../images/top/bg_for-gift-ranking_01.gif);
  padding: 15px 10px;
}

.lp-ranking .lp-ranking-title {
  text-align: center;
  margin-bottom: 15px;
}

.lp-ranking-slider-container {
  position: relative;
  background: #fff;
  padding: 20px 0;
}

.lp-ranking-slider-container .bx-wrapper {
  position: relative !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.lp-ranking-slider-container ul li {
  text-align: center;
}

.lp-ranking-slider-container ul li h3 {
  font-size: 14px;
  margin: 10px 0 5px;
  line-height: 1.4;
}

.lp-ranking-slider-container ul li p {
  font-size: 13px;
  color: #922a2a;
  font-weight: bold;
}

/* 【PC時】矢印ボタンは非表示 */
.lp-ranking-slider-container .bx-wrapper .bx-controls-direction a {
  display: none !important;
}

/* --------------------------------------------------------------------------
   カテゴリ別商品ブロック（左右2カラム構造）
   -------------------------------------------------------------------------- */
.lp-category-block {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  background: #fff;
  padding: 25px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.lp-category-block .category-lead-banner {
  flex: 0 0 250px;
}

.lp-category-block .category-lead-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.lp-category-block .category-contents {
  flex: 1 1 auto;
  min-width: 0;
}

.lp-category-block .category-heading {
  margin-bottom: 20px;
}

.lp-category-block .category-heading img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   商品一覧グリッドレイアウト（共通）
   -------------------------------------------------------------------------- */
.lp-product-grid {
  display: grid;
  gap: 25px 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 1行3列 */
.lp-product-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 1行6列（予算別一覧など） */
.lp-product-grid.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.lp-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #333;
  text-decoration: none;
}

.lp-product-card img {
  width: 100%;
  height: auto;
  display: block;
}

.lp-product-card h3 {
  font-size: 13px;
  line-height: 1.4;
  margin: 10px 0 5px;
  flex-grow: 1;
}

.lp-product-card p {
  font-size: 12px;
  color: #8c0909;
  font-weight: bold;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   予算別セクション
   -------------------------------------------------------------------------- */
.lp-price-group {
  margin-top: 45px;
  margin-bottom: 45px;
  scroll-margin-top: 20px; /* アンカー移動時の上部余白 */
}

.lp-price-heading {
  margin-bottom: 15px;
}

.lp-price-heading img {
  max-width: 100%;
  height: auto;
}

/* SP専用テキスト見出し */
.lp-text-heading-sp {
  display: none;
}


/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

/* タブレット（768px以下） */
@media screen and (max-width: 768px) {
  .lp-product-grid.cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* スマートフォン（640px以下） */
@media screen and (max-width: 640px) {
  .season-lp {
    background: #fff;
  }

  .season-lp #contents .contents-inner {
    padding: 0 12px;
  }

  .season-lp .lp-section {
    margin-bottom: 30px;
  }

  /* ナビボタン：2列折り返し */
  .lp-nav-list.cols-4 li,
  .lp-nav-list.cols-5 li {
    flex: 0 1 calc(50% - 5px);
  }

  /* カテゴリ別ブロック：左バナー非表示＆1カラム化 */
  .lp-category-block {
    display: block;
    padding: 0;
    margin-bottom: 30px;
    background: transparent;
    box-shadow: none;
  }

  .lp-category-block .category-lead-banner {
    display: none;
  }

  /* 商品グリッド：SP時は2列 */
  .lp-product-grid.cols-3,
  .lp-product-grid.cols-6 {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 10px;
  }

  /* テキスト見出し */
  .lp-text-heading-sp {
    display: block;
    padding: 8px 10px;
    background: #fef3cb;
    line-height: 1.3;
    font-size: 15px;
    font-weight: normal;
    color: #000;
    border-top: solid 2px #fac443;
    border-bottom: solid 2px #fac443;
    margin: 15px 0;
    text-align: center;
  }

  /* --------------------------------------------------------------------------
     ランキングスライダー（スマホ時：縦長帯矢印ボタン・上下はみ出し防止）
     -------------------------------------------------------------------------- */
  /* 商品が左右ボタンに重ならないよう左右余白を設定 */
  .lp-ranking-slider-container .bx-wrapper {
    padding: 0 36px !important;
    box-sizing: border-box !important;
  }

  /* 縦長ボタン（prev.jpg / next.jpg）：枠内に収まるようサイズ調整 */
  .lp-ranking-slider-container .bx-wrapper .bx-controls-direction a {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    margin: 0 !important;
    bottom: auto !important;
    z-index: 50 !important;

    /* 白背景枠からはみ出さない最適サイズ */
    width: 20px !important;
    height: 200px !important;

    text-indent: -9999px !important;
    overflow: hidden !important;
    outline: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important; /* アスペクト比を維持して表示 */
  }

  /* 左矢印 */
  .lp-ranking-slider-container .bx-wrapper .bx-prev {
    left: 8px !important;
    background-image: url(../images/limited_winter2026/common/prev.jpg) !important;
  }

  /* 右矢印 */
  .lp-ranking-slider-container .bx-wrapper .bx-next {
    right: 8px !important;
    background-image: url(../images/limited_winter2026/common/next.jpg) !important;
  }

  /* 擬似要素による干渉を無効化 */
  .lp-ranking-slider-container .bx-wrapper .bx-controls-direction a::after {
    content: none !important;
    display: none !important;
  }
}