/* スライダー下バナー3列 */
.c-ct-list {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  /* --- ここでバナー全体の上に余白を追加 --- */
  margin: 30px 0 0 0; /* 上に30pxの余白（スマホ用） */
  padding: 0;
  list-style: none;
}

.c-ct-list__item {
  width: 95%; 
  margin-bottom: 20px; 
  text-align: center; 
}

.c-ct-list__item a {
  display: inline-block;
}

.c-ct-list__item img {
  width: 100%;
  max-width: 400px; 
  height: auto;
  display: block;
}

/* PCの設定：画面幅が768px以上の場合 */
@media screen and (min-width: 768px) {
  .c-ct-list {
    flex-direction: row; 
    justify-content: center; 
    gap: 20px; 
    /* --- PCではもう少し広めに余白を取りたい場合 --- */
    margin-top: 50px; /* 上に50pxの余白 */
  }

  .c-ct-list__item {
    width: auto; 
    margin-bottom: 0; 
  }

  .c-ct-list__item img {
    max-width: 350px; 
  }
}

/* --- スライダー全体のベース設定（スマホ優先） --- */
.mySwiper {
    display: block !important;
    overflow: hidden;
    position: relative;
    
    /* スマホ：画面の両端に余白を作る */
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 30px; 
    
    width: 100%;
    /* PCでの最大幅を制限せず、画面を広く使う */
    max-width: none !important; 
    margin: 0 auto !important;
    box-sizing: border-box;
}

/* 横並びを強制し、高さを商品内容（画像+文字）に合わせる */
.mySwiper .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important; 
}

/* スライド（各商品）の調整 */
.mySwiper .swiper-slide {
    height: auto !important; 
    display: flex;
    flex-direction: column;
    margin-bottom: 25px; /* スマホ2段表示の時の上下の隙間 */
}

/* 商品画像の設定 */
.mySwiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* 商品名・価格エリア（高さがバラバラでも揃うように調整） */
.p-item-card__info {
    flex-grow: 1;
    padding-top: 10px;
}

/* --- PC用のレスポンシブ微調整（1024px以上） --- */
@media (min-width: 1024px) {
    .mySwiper {
        /* PCでは左右のパディングをなくし、画面幅の95%まで広げる */
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 95%; 
    }
    .mySwiper .swiper-slide {
        margin-bottom: 0; /* PCは1行なので下の隙間は不要 */
    }
}

/* --- 矢印のデザイン（透過白丸＋黒矢印） --- */
.swiper-button-prev,
.swiper-button-next {
    /* 背景：白の70%透過 */
    background-color: rgba(255, 255, 255, 0.7) !important;
    /* サイズ：28px（スマホに合わせた小さめ） */
    width: 28px !important; 
    height: 28px !important;
    border-radius: 50% !important;
    /* 影：控えめに設定 */
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important; 
    z-index: 10;
    
    /* ↓↓↓ ここを修正：矢印の高さを大きく引き上げます ↓↓↓ */
    /* topを `40%` から `25%` に変更しました。これで画像の中央付近になります。 */
    top: 18% !important; 
}

/* 矢印アイコン（黒）のサイズ調整 */
.swiper-button-prev::after,
.swiper-button-next::after {
    color: #000000 !important;
    font-size: 12px !important; /* 丸に合わせて小さく */
    font-weight: bold !important;
}

/* --- 矢印の配置場所（画像に少し被る位置） --- */
/* スマホ時の左右位置 */
@media (max-width: 1023px) {
    .swiper-button-prev { left: 5px !important; }
    .swiper-button-next { right: 5px !important; }
}

/* PC時の修正（画像が大きいので、少し下げる） */
@media (min-width: 1024px) {
    .swiper-button-prev, .swiper-button-next {
        /* PCでは画像が大きいので `top: 40%` に戻して中央に見えるように個別に指定 */
        top: 40% !important;
    }
    .swiper-button-prev { left: 12px !important; }
    .swiper-button-next { right: 12px !important; }
}

/* ホバー（マウスを乗せた時）は少し不透明度を上げる */
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* --- 読み物風バナーセクション共通設定 --- */
.tenimu-magazine-section {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", "Noto Serif JP", serif;
  color: #333333;
  background-color: #fcfbfa; /* 天衣無縫アイボリー */
  padding: 80px 24px;
}

/* セクションタイトル（大タイトル） */
.tenimu-mag-header {
  text-align: center;
  margin-bottom: 50px;
}
.tenimu-mag-sec-title {
  font-family: "Didot", "Cinzel", "Times New Roman", "Yu Mincho", serif;
  font-size: 28px;
  letter-spacing: 0.15em;
  color: #222222;
  margin: 0 0 8px 0;
  font-weight: normal;
}
.tenimu-mag-sec-sub {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #9c8e7d;
  display: block;
  text-transform: uppercase;
}

/* バナーグリッド（PCは美しく2列に整列） */
.tenimu-mag-container {
  max-width: 1080px;
  margin: 0 auto;
}
.tenimu-mag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 45px 35px;
}

/* 各要素を包むラッパー */
.tenimu-mag-item {
  display: flex;
  flex-direction: column;
}

/* 画像からはずした上部のコーナータイトルエリア */
.tenimu-mag-tag-wrapper {
  margin-bottom: 14px;
  padding-left: 4px;
  border-bottom: 1px solid rgba(156, 142, 125, 0.35); /* 見出し線 */
  padding-bottom: 6px;
  display: inline-block;
  align-self: flex-start;
}
/* 英語タイトル（明朝体） */
.tenimu-mag-tag-en {
  font-family: "Didot", "Cinzel", "Times New Roman", "Yu Mincho", serif;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0.12em;
  color: #9c8e7d;
  display: block;
  line-height: 1.2;
  margin-bottom: 4px;
}
/* 日本語タイトル（明朝体） */
.tenimu-mag-tag-ja {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: #666666;
  display: block;
  line-height: 1.3;
}

/* マガジン風カード */
.tenimu-mag-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background-color: #ffffff;
  aspect-ratio: 16 / 9;
  box-shadow: 0 10px 30px rgba(156, 142, 125, 0.03);
  width: 100%;
}

/* 画像ラッパー */
.tenimu-mag-img-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tenimu-mag-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 写真のグラデーション影 */
.tenimu-mag-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 80%);
  transition: background 0.5s ease;
  z-index: 1;
}

/* テキストレイアウト設定 */
.tenimu-mag-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 35px 45px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}

/* 下部：ストーリーエリア */
.tenimu-mag-story {
  color: #ffffff;
}
.tenimu-mag-catch {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  margin: 0 0 8px 0;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  letter-spacing: 0.03em;
}
.tenimu-mag-lead {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 12px 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tenimu-mag-more {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.tenimu-mag-more::after {
  content: '→';
  transition: transform 0.3s ease;
}

/* --- 上品なホバーエフェクト（PCのみ） --- */
@media (hover: hover) {
  .tenimu-mag-card:hover .tenimu-mag-img-box img {
    transform: scale(1.03);
  }
  .tenimu-mag-card:hover::after {
    background: linear-gradient(to top, rgba(156, 142, 125, 0.6) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0) 100%);
  }
  .tenimu-mag-card:hover .tenimu-mag-more::after {
    transform: translateX(6px);
  }
}

/* --- 【改善】スマートフォン用レスポンシブ (768px以下) --- */
@media screen and (max-width: 768px) {
  .tenimu-magazine-section {
    padding: 50px 16px;
  }
  .tenimu-mag-header {
    margin-bottom: 30px;
  }
  .tenimu-mag-sec-title {
    font-size: 24px;
  }
  .tenimu-mag-grid {
    grid-template-columns: 1fr;
    gap: 38px; /* スマホ時の余白を微調整 */
  }
  
  /* スマホで見やすくするためのタイトルの調整 */
  .tenimu-mag-tag-wrapper {
    margin-bottom: 12px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(156, 142, 125, 0.6); /* 線を少し濃くしてはっきりと */
  }
  .tenimu-mag-tag-en {
    font-size: 20px; /* サイズアップ */
    color: #7a6f61; /* フォントカラーを深く濃く変更 */
    font-weight: 600; /* 明朝の細い線がスマホでも潰れないよう少しだけ太らせる */
    margin-bottom: 2px;
  }
  .tenimu-mag-tag-ja {
    font-size: 15px; /* サイズアップ */
    color: #444444; /* フォントカラーをしっかりと濃いグレーに変更 */
    letter-spacing: 0.05em;
  }

  .tenimu-mag-card {
    aspect-ratio: 16 / 9;
  }
  .tenimu-mag-content {
    padding: 22px 25px;
  }
  .tenimu-mag-catch {
    font-size: 15px;
    margin-bottom: 4px;
    line-height: 1.4;
  }
  .tenimu-mag-lead {
    font-size: 11px;
    margin-bottom: 6px;
    line-height: 1.5;
  }
}

  /* --- 正方形バナーおよびメインスライダー共通のボタンスタイル --- */
  .square-banner-grid__item a,
  .main-visual a,
  .top-slider a,
  .slider-wrapper a {
    position: relative !important;
    display: block !important;
  }

  .square-banner-grid__btn,
  .main-slider__btn {
    position: absolute !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #4a4643 !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;                 /* クリックを阻害しない */
    display: block !important;
    z-index: 99 !important;
    bottom: 12px !important;
    right: 12px !important;
  }

  /* --- 正方形バナーグリッド CSS --- */
  .square-banner-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* スマホは横2列 */
    gap: 8px !important;
    padding: 0 8px !important;
    margin: 20px auto !important;
    list-style: none !important;
    max-width: 1200px !important;
  }
  .square-banner-grid__item a {
    width: 100% !important;
    padding-top: 100% !important;                   /* 1:1の正方形 */
    overflow: hidden !important;
  }
  .square-banner-grid__item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease, filter 0.4s ease !important;
  }

  /* --- Pickup Item スライダー CSS --- */
  .mySwiper .swiper-slide {
    position: relative !important;
  }
  .mySwiper .swiper-slide a.p-item-card__image {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  .mySwiper img {
    transition: transform 0.4s ease, filter 0.4s ease !important;
    display: block !important;
    width: 100% !important;
  }

  /* パソコン（1024px以上）でのレイアウト・ホバー制御 */
  @media screen and (min-width: 1024px) {
    .square-banner-grid {
      grid-template-columns: repeat(6, 1fr) !important; /* PCは横6列 */
      gap: 20px !important;
      padding: 0 20px !important;
      margin: 40px auto !important;
    }

    /* 正方形バナー・メインスライダー共通のPCホバー制御（初期は非表示、ホバーで浮かび上がる） */
    .square-banner-grid__btn,
    .main-slider__btn {
      opacity: 0 !important;
      transform: translateY(5px) !important;
      font-size: 12px !important;
      bottom: 15px !important;
      right: 15px !important;
    }
    
    .square-banner-grid__item a:hover img,
    .main-visual a:hover img,
    .top-slider a:hover img,
    .slider-wrapper a:hover img {
      transform: scale(1.03) !important;
      filter: brightness(0.95) !important;
    }
    
    .square-banner-grid__item a:hover .square-banner-grid__btn,
    .main-visual a:hover .main-slider__btn,
    .top-slider a:hover .main-slider__btn,
    .slider-wrapper a:hover .main-slider__btn {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }

    /* Pickup ItemのPCホバー */
    .mySwiper .swiper-slide:hover img {
      transform: scale(1.03) !important;
      filter: brightness(0.95) !important;
    }
  }

/* ==========================================================================
   Clearance Sale Section (上のバナーと左右を完全に合わせる)
   ========================================================================== */

/* 1. 外枠：上のスクエアバナーと横幅・余白の挙動を完全に統一 */
.sale-section {
  width: 100%;
  max-width: 1200px; /* 💡もし上のバナーの最大幅が異なる場合は、ここの数値を上のバナーのmax-widthに合わせてください */
  margin: 60px auto;
  padding: 0 16px;   /* スマホ〜タブレット時の左右の引き込み余白 */
  box-sizing: border-box;
}

/* 2. グリッド定義 */
.sale-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* スマホ時は2列 */
  gap: 16px; /* 💡上のスクエアバナーの隙間（gapやmargin）と同じ数値にしています */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各アイテムの基本設定 */
.sale-grid__item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-sizing: border-box;
}

.sale-grid__item a {
  display: block;
  text-decoration: none;
  overflow: hidden;
}

.sale-grid__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}

.sale-grid__item a:hover img {
  opacity: 0.85;
}

/* テキストバナー（スマホ時） */
.grid-text-banner {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f6f0;
  padding: 24px 16px;
  text-align: center;
  border: 1px solid #e6dfd3;
}

.grid-text-banner__inner {
  width: 100%;
}

.grid-text-banner__tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: #ba9665;
  margin-bottom: 6px;
  font-weight: 600;
}

.grid-text-banner__main {
  font-family: "Yu Mincho", "YuMincho", "MS Mincho", serif;
  font-size: 20px;
  line-height: 1.4;
  color: #333333;
  margin: 0 0 6px 0;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.grid-text-banner__sub {
  font-size: 11px;
  color: #666666;
  margin: 0;
  letter-spacing: 0.05em;
}

/* セールバッジ */
.sale-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background-color: #b73b3b;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 3px 6px;
  text-align: center;
}

/* 商品情報 */
.sale-item-info {
  padding: 10px 0 14px 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.sale-item-info__title {
  font-size: 12px;
  line-height: 1.4;
  color: #333333;
  margin: 0 0 6px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 価格 */
.sale-item-info__price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin-top: auto;
}

.sale-item-info__old-price {
  font-size: 10px;
  color: #999999;
  text-decoration: line-through;
}

.sale-item-info__new-price {
  font-size: 13px;
  font-weight: bold;
  color: #b73b3b;
}

/* ==========================================================================
   Responsive (PCサイズ：テキスト1＋商品6＝計7つの要素を横1行に)
   ========================================================================== */
@media screen and (min-width: 768px) {
  .sale-section {
    margin: 80px auto;
    padding: 0; /* 💡上のスクエアバナーの横幅いっぱいの挙動に合わせるため、PC時はPC用paddingを0に調整 */
  }

  /* 計7つの要素を横1行（7列）に配置 */
  .sale-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 16px; /* 💡上のバナーの隙間と同じ数値 */
  }

  .grid-text-banner {
    grid-column: span 1;
    padding: 12px 4px;
  }

  .grid-text-banner__tag {
    font-size: 9px;
    transform: scale(0.9);
  }

  .grid-text-banner__main {
    font-size: 14px;
    letter-spacing: 0.05em;
  }

  .grid-text-banner__sub {
    font-size: 9px;
    transform: scale(0.9);
    white-space: nowrap;
  }

  .sale-badge {
    top: 6px;
    left: 6px;
    font-size: 9px;
    padding: 2px 4px;
  }

  .sale-item-info {
    padding: 8px 0;
  }

  .sale-item-info__title {
    font-size: 11px;
    line-height: 1.3;
  }

  .sale-item-info__old-price {
    font-size: 9px;
  }

  .sale-item-info__new-price {
    font-size: 12px;
  }
}
/* ==========================================================================
   人気のタグセクション用のスタイル（幅を均等に揃える設定）
   ========================================================================== */
.popular-tags-section {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.popular-tags-container {
  width: 100%;
}

.popular-tags-heading {
  text-align: center;
  margin-bottom: 20px;
}

.popular-tags-sub-title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #333;
}

.popular-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* タグ同士の隙間 */
}

.popular-tag-item {
  flex: 1 1 calc(16.666% - 10px); /* 1行に約6個配置する場合の例。お好みで変更可能 */
  min-width: 150px; /* 極端に狭くならないよう最低幅を指定 */
  box-sizing: border-box;
  text-align: center;
  padding: 10px 8px;
  background-color: #fcfbfa;
  border: 1px solid #e2ddd9;
  border-radius: 4px;
  text-decoration: none;
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, sans-serif;
  font-size: 16px;
  color: #333;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
}

.popular-tag-item:hover {
  background-color: #f2ece6;
  border-color: #9e826b;
}


/* ==========================================================================
   スマホ用レスポンシブ表示（画面幅767px以下）
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* 1行お知らせベルトのスマホ調整 */
  .single-line-alert {
    margin: 35px auto 5px auto;
    padding: 0 15px;
  }
  .single-line-alert__link {
    padding: 12px 10px;
  }
  .single-line-alert__content {
    font-size: 12px;
  }
  .single-line-alert__badge {
    margin-right: 8px;
  }
  .single-line-alert__subtext {
    display: none; /* スマホ時はスッキリさせるため補足文を非表示に */
  }

  /* 人気タグのスマホ調整（2〜3列などで幅を綺麗に揃える） */
  .popular-tags-section {
    padding: 0 15px;
  }
  .popular-tag-item {
    flex: 1 1 calc(50% - 8px); /* スマホ時は3列で均等幅 */
    min-width: 100px;
    font-size: 14px;
    padding: 8px 4px;
  }

  /* 6枚バナーのスマホ調整（縦変形） */
  .custom-grid-banner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 15px;
    margin-top: 15px;
    margin-bottom: 35px;
  }

  /* スマホ1つ目のバナー：単体で横幅100%の大きなバナー */
  .custom-grid-banner__item:nth-child(1) a {
    display: block;
  }
  .custom-grid-banner__item:nth-child(1) .custom-grid-banner__txt {
    text-align: left;
    padding: 8px 0;
    font-size: 14px;
  }

  /* スマホ2つ目以降のバナー：左画像・右テキストのリスト構造に変形 */
  .custom-grid-banner__item:not(:nth-child(1)) a {
    display: flex;
    align-items: center;
    background: #fafafa;
    border-radius: 4px;
  }

  /* 左側画像（横幅35%） */
  .custom-grid-banner__item:not(:nth-child(1)) img {
    width: 35%;
    height: auto;
  }

  /* 右側テキスト領域 */
  .custom-grid-banner__item:not(:nth-child(1)) .custom-grid-banner__txt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 14px;
    text-align: left;
  }

  /* 右端の矢印アイコン（➔） */
  .custom-grid-banner__item:not(:nth-child(1)) .custom-grid-banner__txt::after {
    content: "\2794";
    font-size: 12px;
    color: #999;
    margin-left: 10px;
  }
}
/* ==========================================================================
   1行限定の在庫少お知らせベルト（バナーのタイトルに見えない完全独立デザイン）
   ========================================================================== */
.single-line-alert {
  max-width: 1240px;
  width: 100%;
  margin: 50px auto 10px auto; /* 下のバナー群としっかり隙間を空けて独立させる */
  padding: 0 20px;
  box-sizing: border-box;
}

.single-line-alert__link {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fbf9f6; /* 上品な薄い生成り色 */
  border-top: 1px solid #9e826b; /* 上下に細いアクセントライン */
  border-bottom: 1px solid #9e826b;
  padding: 14px 15px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.single-line-alert__link:hover {
  background-color: #f5f0e9;
}

.single-line-alert__content {
  display: flex;
  align-items: center;
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #333;
}

/* 警告バッジ */
.single-line-alert__badge {
  background-color: #d9534f; /* 落ち着いた赤 */
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 2px;
  margin-right: 12px;
  white-space: nowrap;
}

/* メインテキスト */
.single-line-alert__text {
  font-weight: bold;
  margin-right: 5px;
}

.single-line-alert__subtext {
  color: #666;
}

/* 右側の小さな矢印 */
.single-line-alert__arrow {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid #9e826b;
  border-right: 1.5px solid #9e826b;
  transform: rotate(45deg);
  margin-left: 10px;
}

/* ==========================================================================
   6枚のカスタムグリッドバナー（PC・スマホ共通）
   ========================================================================== */
.custom-grid-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC時は横3列 */
  gap: 20px; /* バナー間の隙間 */
  list-style: none;
  padding: 0 20px;
  margin: 20px auto 50px auto;
  max-width: 1240px; 
  width: 100%;
  box-sizing: border-box;
}

.custom-grid-banner__item {
  box-sizing: border-box;
}

.custom-grid-banner__item a {
  display: block;
  text-decoration: none;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.custom-grid-banner__item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* PC時のテキスト（游ゴシック体・13px） */
.custom-grid-banner__txt {
  display: block;
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 13px;
  color: #333;
  font-weight: 500;
  padding: 10px 0;
  text-align: center;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   在庫少（残りわずか）バッジ用スタイル（ランキングエリア用）
   ========================================================================== */
.c-ranking-list__image-wrap {
  position: relative;
}
.stock-warning-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #d9534f;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 8px;
  letter-spacing: 0.03em;
  border-radius: 2px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ==========================================================================
   スマホ用レスポンシブ表示（画面幅767px以下）
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* 1行お知らせベルトのスマホ調整 */
  .single-line-alert {
    margin: 35px auto 5px auto;
    padding: 0 15px;
  }
  .single-line-alert__link {
    padding: 12px 10px;
  }
  .single-line-alert__content {
    font-size: 12px;
  }
  .single-line-alert__badge {
    margin-right: 8px;
  }
  .single-line-alert__subtext {
    display: none; /* スマホ時はスッキリさせるため補足文を非表示に */
  }

  /* 6枚バナーのスマホ調整（縦変形） */
  .custom-grid-banner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 15px;
    margin-top: 15px;
    margin-bottom: 35px;
  }

  /* スマホ1つ目のバナー：単体で横幅100%の大きなバナー */
  .custom-grid-banner__item:nth-child(1) a {
    display: block;
  }
  .custom-grid-banner__item:nth-child(1) .custom-grid-banner__txt {
    text-align: left;
    padding: 8px 0;
    font-size: 14px;
  }

  /* スマホ2つ目以降のバナー：左画像・右テキストのリスト構造に変形 */
  .custom-grid-banner__item:not(:nth-child(1)) a {
    display: flex;
    align-items: center;
    background: #fafafa;
    border-radius: 4px;
  }

  /* 左側画像（横幅35%） */
  .custom-grid-banner__item:not(:nth-child(1)) img {
    width: 35%;
    height: auto;
  }

  /* 右側テキスト領域 */
  .custom-grid-banner__item:not(:nth-child(1)) .custom-grid-banner__txt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 14px;
    text-align: left;
  }

  /* 右端の矢印アイコン（➔） */
  .custom-grid-banner__item:not(:nth-child(1)) .custom-grid-banner__txt::after {
    content: "\2794";
    font-size: 12px;
    color: #999;
    margin-left: 10px;
  }
}
/* ==========================================================================
   カテゴリで選ぶセクション スタイル
   ========================================================================== */

/* 1. セクション全体の基本設定 */
.category-section {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* 2. コンテナ（「人気のタグ」popular-tags-container と同じ幅指定） */
.category-container {
  max-width: 1200px; /* popular-tags-container の幅に合わせて自動追従 */
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 3. タイトル（「人気のタグ」popular-tags-heading とフォント・デザインを統一） */
.category-heading {
  text-align: center;
  margin-bottom: 24px;
}

.category-sub-title {
  display: inline-block;
  font-size: 18px; /* popular-tags-sub-title と統一 */
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #333333;
  line-height: 1.4;
}

/* 4. カテゴリカードのグリッド配置 */
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.category-card {
  display: block;
  text-decoration: none;
  color: #333333;
  text-align: center;
  transition: opacity 0.3s ease;
}

.category-card:hover {
  opacity: 0.8;
}

.image-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f9f9f9;
  margin-bottom: 8px;
}

.category-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-name {
  font-size: 13px;
  margin: 0;
  line-height: 1.3;
}

/* 5. すべての商品を見るボタン */
.view-all-button {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 240px;
  margin: 0 auto;
  padding: 10px 16px;
  border: 1px solid #333333;
  border-radius: 4px;
  color: #333333;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s ease;
}

.view-all-button:hover {
  background-color: #333333;
  color: #ffffff;
}

.view-all-button svg {
  width: 10px;
  height: 10px;
  margin-left: 8px;
  fill: currentColor;
}

/* 6. レスポンシブ対応（スマホ・タブレット表示） */
@media screen and (max-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .category-sub-title {
    font-size: 16px;
  }

  .category-name {
    font-size: 12px;
  }
}