/* スライダー下バナー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;
  }
}