/* =========================================================
   PDP: 特徴と機能（Features & Functions）
   ========================================================= */

/* セクション */
.pdp-section--features {
  position: relative;
  margin-block: 2.5rem 4rem;
}

/* ===== 見出し（Galleryと同仕様） ===== */
.pdp-section--features .pdp-section__title {
  position: relative;
  margin: 2rem 0 2.5rem;
  font-size: clamp(13px, 1.2vw, var(--fs-sm));
  font-weight: var(--fw-regular);
  color: var(--c-fg-muted);
  line-height: 1.4;
  padding-left: 4px;
}
.pdp-section--features .pdp-section__title::before {
  content: attr(data-en);
  display: block;
  font-size: clamp(var(--fs-xl), 5vw, 56px);
  line-height: 1.1;
  font-weight: var(--fw-regular);
  letter-spacing: .01em;
  color: rgba(17, 17, 17, .88);
  margin-bottom: .75rem;
}

/* =========================================================
   カード（JS無効のグリッド／Swiper時も同じ見た目）
   ========================================================= */
.featCards {
  display: grid;
  gap: var(--space-6); /* 24px */
}

/* 1カード：画像上＋本文下の縦積み */
.featCards__item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-sm); /* ← 角丸を小さめに */
  overflow: hidden;
  height: 100%;
  box-shadow: var(--shadow-sm);
}

/* 画像：元の縦横比のまま表示（トリミングしない） */
.featCards__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.featCards__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 本文 */
.featCards__body {
  flex: 1;
  padding: var(--space-6) var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
}

/* タイトル：22px / 600 / やや詰め、2行で省略 */
.featCards__title {
  font-size: var(--fs-lg);          
  font-weight: var(--fw-regular);  
  line-height: var(--lh-tight);     
  margin: 0 0 var(--space-3);
  color: var(--c-fg);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 本文：小さめ */
.featCards__body p {
  font-size: var(--fs-base);        
  line-height: var(--lh-base);  
  margin: 0;
}

/* ===== JS無効フォールバック（グリッド） ===== */
.no-js .featCards { display: grid; gap: var(--space-6); }
@media (min-width: 768px) {
  .no-js .featCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .no-js .featCards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   Swiper（横スライド時の調整）
   ========================================================= */
.pdp-features-swiper,
.featCards.swiper {
  padding-bottom: var(--space-8); /* 32px */
}
.swiper-wrapper { align-items: stretch; }

/* ---- PC：2枚＋3枚目チラ見せ ---- */
.featCards.swiper .swiper-slide {
  height: auto;
  width: 41%;
  max-width: 41%;
  box-sizing: border-box;
}

/* ---- タブレット ---- */
@media (max-width: 1024px) {
  .featCards.swiper .swiper-slide {
    width: 44%;
    max-width: 44%;
  }
}

/* ---- スマホ ---- */
@media (max-width: 768px) {
  .featCards.swiper .swiper-slide {
    width: 82%;
    max-width: 82%;
  }
}

/* ===== ブラウザ右端までフルブリード ===== */
.pdp-section--features .featCards.swiper,
.pdp-section--features .pdp-features-swiper {
  margin-right: calc(50% - 50vw);
  padding-right: var(--container-gutter);
}

/* ページネーション（ドット） */
.pdp-feat__pager {
  bottom: 0 !important;
  text-align: center;
}

/* =========================================================
   Swiper ナビゲーションボタン（丸枠＋標準矢印利用）
   ========================================================= */
.swiper-button-prev.pdp-feat__navPrev,
.swiper-button-next.pdp-feat__navNext {
  position: absolute;
  top: -56px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border, #ddd);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur, 200ms) ease, border-color var(--dur, 200ms) ease;
  z-index: var(--z-fixed, 1200);
}

/* ← → は Swiper標準の ::after を利用 */
.swiper-button-prev.pdp-feat__navPrev::after,
.swiper-button-next.pdp-feat__navNext::after {
  font-size: 16px;   
  color: #111;       
  font-weight: bold;
}

/* ホバー時 */
.swiper-button-prev.pdp-feat__navPrev:hover,
.swiper-button-next.pdp-feat__navNext:hover {
  background: #f9fafb;
  border-color: #ccc;
}

/* 無効化時（先頭・末尾） */
.swiper-button-prev.pdp-feat__navPrev[aria-disabled="true"],
.swiper-button-next.pdp-feat__navNext[aria-disabled="true"] {
  opacity: .5;
  cursor: default;
}

/* 位置（右上に並べる） */
.swiper-button-prev.pdp-feat__navPrev { right: 56px; }
.swiper-button-next.pdp-feat__navNext { right: 12px; }

/* =========================================================
   レスポンシブ（グリッドフォールバック用）
   ========================================================= */
@media (max-width: 768px) {
  .featCards { grid-template-columns: 1fr; }
}

/* 矢印ボタン：右上で横並び（next の左に prev） */
.swiper-button-next.pdp-feat__navNext{
  left: auto !important;      /* ← Swiperのleft指定を無効化 */
  right: 12px !important;     /* 右端から12px */
}
.swiper-button-prev.pdp-feat__navPrev{
  left: auto !important;      /* ← デフォ左寄せを無効化 */
  right: 68px !important;     /* = 12px(外側) + 44px(次ボタン幅) + 12px(間隔) */
}

/* 矢印アイコン（Swiper標準 ::after を使用） */
.swiper-button-prev.pdp-feat__navPrev::after,
.swiper-button-next.pdp-feat__navNext::after{
  font-size: 16px;
  color: #111;
  font-weight: bold;
}

/* Swiper スライド移動の transition を強制 */
.pdp-features-swiper .swiper-wrapper {
  transition-property: transform !important;
  transition-duration: 0.9s !important; /* speed と同じ */
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; /* easeOutCubic */
}

/* 基準はスライダー自身に */
.pdp-features-swiper { position: relative; }

/* コンテナ右ガター位置に揃える（= ビューポート右端ではない） */
.pdp-features-swiper .pdp-feat__navNext {
  left: auto !important;
  right: calc((50vw - 50%) + var(--container-gutter));
  top: -56px;                  /* 必要なら 8px などに調整してください（中に置きたい高さ） */
}

.pdp-features-swiper .pdp-feat__navPrev {
  left: auto !important;
  /* next の左に 56px（= 44px ボタン幅 + 12px 間隔）ズラす */
  right: calc((50vw - 50%) + var(--container-gutter) + 56px);
  top: -56px;
}

/* 既存の “section 直下のボタン” への位置指定があれば無効化（安全策） */
.pdp-section--features > .pdp-feat__navNext,
.pdp-section--features > .pdp-feat__navPrev { right: auto; }

/* モバイルは少し内側に（任意） */
@media (max-width: 768px) {
  .pdp-features-swiper .pdp-feat__navNext {
    right: calc((50vw - 50%) + var(--container-gutter) - 4px);
    top: -44px;
  }
  .pdp-features-swiper .pdp-feat__navPrev {
    right: calc((50vw - 50%) + var(--container-gutter) + 48px);
    top: -44px;
  }
}