/* =====================================================================
   campaign.css — TOP キャンペーン（バナーカルーセル）
   スワイプ・左右ボタンで送り、自動切替なし。
   PC(>=1024px): 3枚表示・矢印は外側 / SP・タブレット: 1〜2枚＋ちら見、矢印はバナー上に重ねる
   ===================================================================== */
.p-campaign {
  background: var(--container-white);
  padding-block: 0 var(--space-64);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}
.p-campaign__title {
  font-size: 20px;
  line-height: 34px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
  text-align: center;
}

/* ---- カルーセル ---- */
.p-carousel {
  position: relative;
  width: 100%;
  max-width: 1124px;
  margin-inline: auto;
}
.p-carousel__viewport {
  overflow: hidden;
  touch-action: pan-y;
}
.p-carousel__track {
  display: flex;
  gap: var(--space-24);
  transition: transform .35s ease;
  will-change: transform;
}
.p-carousel__slide {
  flex: 0 0 auto;
  width: min(80%, 316px); /* SP: 中央寄せで両側をちら見 */
}

/* バナー */
.c-banner {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 316 / 160;
  border: 1px solid #D8D2CA;
  border-radius: var(--radius-12);
  overflow: hidden;
  background: var(--container-level1);
}
.c-banner img { width: 100%; height: 100%; object-fit: cover; }
.c-banner__ext {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--container-alfa);
}
.c-banner__ext img { width: 24px; height: 24px; }

/* 矢印ボタン */
.p-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--container-white);
  border: 1px solid var(--border-primary);
  color: var(--color-primary);
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.p-carousel__arrow svg { width: 16px; height: 16px; }
.p-carousel__arrow:hover:not(:disabled) { border-color: var(--border-primary); background: var(--color-secondary-light); }
.p-carousel__arrow:focus-visible { outline: 2px solid #0b57d0; outline-offset: 1px; }
.p-carousel__arrow--prev { left: 8px; }
.p-carousel__arrow--next { right: 8px; }
.p-carousel__arrow:disabled { opacity: .3; cursor: default; }

/* 「キャンペーン一覧を見る」 */
.p-campaign__more {
  /* SP(スマホ): セクションに左右paddingが無いため、24pxガター付きの全幅に */
  width: calc(100% - var(--space-48));
  max-width: 100%;
  color: var(--text-primary);
  margin-top: var(--space-32);   /* flex gap 32 + 32 = ボタン上の隙間を64pxに */
}

/* SP: 上=KVのCTAが弧上に下がる分キャンペーン見出しとの間隔を64pxに確保
       下=aboutの上パディング64pxだけを間隔にするため0に（合計64px） */
@media (max-width: 599px) {
  .p-campaign { padding-block: 63px 0; }
  .p-campaign__more { margin-top: var(--space-8); }   /* flex gap 32 + 8 = 画像→ボタンの隙間を40pxに */
}

/* ---- タブレット以上: バナー固定幅 ---- */
@media (min-width: 600px) {
  .p-carousel__slide { width: 316px; }
  .p-campaign__more { width: 280px; }   /* タブレット以上は従来の固定幅に戻す */
}

/* ---- PC: 3枚表示・矢印は外側 ---- */
@media (min-width: 1024px) {
  .p-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-24);
  }
  .p-carousel__viewport { width: 996px; max-width: 100%; } /* 316*3 + 24*2 */
  .p-carousel__arrow {
    position: static;
    transform: none;
    flex: 0 0 auto;
  }
}