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