/* --------------------------------------------------
   Swiper Slider Refactored Styles
   Target: .system-slider (Swiper instance in #point_05)
   Focus: Clean, responsive, accessible visuals only.
   JS (already in index.html) handles behavior.
-------------------------------------------------- */

:root {
  --slider-max-width: 360px;
  --slider-radius: 12px;
  --slider-shadow: 0 4px 16px rgba(0,0,0,.12);
  --slider-nav-size: 36px;
  --slider-nav-bg: rgba(0,62,111,.65);
  --slider-nav-bg-hover: rgba(0,62,111,.95);
  --slider-nav-color: #fff;
  --slider-pagination-color: #c5d6e2;
  --slider-pagination-color-active: #0074C2;
  --slider-focus-ring: 0 0 0 3px rgba(0,116,194,.4);
  --slider-bullet-size: 14px; /* 統一通常サイズ */
  --slider-bullet-size-sm: 12px; /* 狭幅時サイズ */
}

/* Container */
.system-slider {
  width: 100%;
  max-width: var(--slider-max-width);
  margin: 32px auto 16px;
  position: relative;
  padding: clamp(4px, 1.2vw, 12px) 0 56px; /* bottom space for pagination */
  box-sizing: border-box;
}

/* Make sure wrapper stretches nicely */
.system-slider .swiper-wrapper {
  align-items: stretch;
}

/* Slides */
.system-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(4px, 1vw, 12px);
  box-sizing: border-box;
}

/* Images */
.system-slider .swiper-slide img {
  display: block;
  width: 90%;
  height: auto;
  aspect-ratio: 300 / 649;
  object-fit: cover;
  border-radius: var(--slider-radius);
  box-shadow: var(--slider-shadow);
  background: #f4f7f9; /* placeholder BG while loading */
  transition: transform .5s ease, box-shadow .5s ease;
}

.system-slider .swiper-slide img:hover {
  transform: scale(1.015);
  /* 影は変更しない */
}

/* Navigation Arrows */
.system-slider .swiper-button-prev,
.system-slider .swiper-button-next,
.issues-slider .swiper-button-prev,
.issues-slider .swiper-button-next {
  width: var(--slider-nav-size);
  height: var(--slider-nav-size);
  margin-top: 0; /* neutralize default vertical offset */
  top: 50%;
  transform: translateY(-50%);
  background: var(--slider-nav-bg);
  color: var(--slider-nav-color);
  border-radius: 50%;
  backdrop-filter: blur(2px);
  box-shadow: var(--slider-shadow);
  transition: background .25s ease, box-shadow .25s ease; 
}

.system-slider .swiper-button-prev:hover,
.system-slider .swiper-button-next:hover,
.issues-slider .swiper-button-prev:hover,
.issues-slider .swiper-button-next:hover {
  background: var(--slider-nav-bg-hover);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}

/* Arrow icon (Swiper uses ::after pseudo) */
.system-slider .swiper-button-prev::after,
.system-slider .swiper-button-next::after,
.issues-slider .swiper-button-prev::after,
.issues-slider .swiper-button-next::after {
  font-size: 18px;
  font-weight: bold;
}

/* Focus states for keyboard accessibility */
.system-slider .swiper-button-prev:focus-visible,
.system-slider .swiper-button-next:focus-visible,
.issues-slider .swiper-button-prev:focus-visible,
.issues-slider .swiper-button-next:focus-visible {
  outline: none;
  box-shadow: var(--slider-focus-ring);
}

/* Pagination Bullets */
.system-slider .swiper-pagination,
.issues-slider .swiper-pagination {
  bottom: 12px !important;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.system-slider .swiper-pagination-bullet,
.issues-slider .swiper-pagination-bullet {
  width: var(--slider-bullet-size);
  height: var(--slider-bullet-size);
  background: var(--slider-pagination-color);
  opacity: 1;
  transition: background .3s ease, transform .3s ease;
  position: relative;
}

.system-slider .swiper-pagination-bullet:hover,
.issues-slider .swiper-pagination-bullet:hover {
  transform: scale(1.2);
}

.system-slider .swiper-pagination-bullet:focus-visible,
.issues-slider .swiper-pagination-bullet:focus-visible {
  outline: none;
  box-shadow: var(--slider-focus-ring);
}

.system-slider .swiper-pagination-bullet-active,
.issues-slider .swiper-pagination-bullet-active {
  background: var(--slider-pagination-color-active);
  transform: scale(1.35);
}

/* Responsive Adjustments */
@media (max-width: 960px) {
  .system-slider { margin: 28px auto 12px; padding-bottom: 52px; }
  .system-slider .swiper-slide { padding: clamp(2px, 1vw, 8px); }
  .system-slider .swiper-slide img { border-radius: 10px; }
}

@media (max-width: 640px) {
  .system-slider { padding-bottom: 48px; }
  .system-slider .swiper-slide img { aspect-ratio: 300 / 649; }
  .issues-slider .swiper-slide img { aspect-ratio: 810 / 437; }
  .system-slider .swiper-button-prev,
  .system-slider .swiper-button-next { box-shadow: 0 2px 10px rgba(0,0,0,.22); }
  .system-slider .swiper-pagination-bullet,
  .issues-slider .swiper-pagination-bullet { width: var(--slider-bullet-size-sm); height: var(--slider-bullet-size-sm); }
}



/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .system-slider .swiper-slide img, .issues-slider .swiper-slide img { transition: none; }
  .system-slider .swiper-slide img:hover, .issues-slider .swiper-slide img:hover { transform: none; }
  .system-slider .swiper-pagination-bullet, .issues-slider .swiper-pagination-bullet { transition: none; }
}

/* High Contrast Mode (forced-colors) */
@media (forced-colors: active) {
  .system-slider .swiper-button-prev,
  .system-slider .swiper-button-next {
    background: ButtonFace;
    color: ButtonText;
  }
  .system-slider .swiper-pagination-bullet { background: GrayText; }
  .system-slider .swiper-pagination-bullet-active { background: Highlight; }
}

/* Utility: hide default preloader if ever used */
.system-slider .swiper-preloader, .issues-slider .swiper-preloader { display: none; }

/* Issues slider specific (aspect ratio 810/437) */
.issues-slider {
  width: 90%;
  max-width: 1000px;
  margin: 40px auto 24px;
  position: relative;
  padding: clamp(4px, 1.2vw, 12px) 0 56px;
  box-sizing: border-box;
}
.issues-slider .swiper-wrapper { align-items: stretch; }
.issues-slider .swiper-slide { display: flex; justify-content: center; align-items: center; padding: clamp(4px, 1vw, 12px); }
.issues-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 810 / 437;
  object-fit: cover;
  border-radius: var(--slider-radius);
  box-shadow: var(--slider-shadow);
  background: #f4f7f9;
  transition: transform .5s ease, box-shadow .5s ease;
}
.issues-slider .swiper-slide img:hover { 
  transform: scale(1.012); 
  /* 影は変更しない */
}

@media (max-width: 960px) {
  .issues-slider { margin: 32px auto 20px; }
}
@media (max-width: 640px) {
  .issues-slider { margin: 28px auto 16px; padding-bottom: 48px; }
}

/* --------------------------------------------------
   Captions (共通 / system-slider & issues-slider)
   画像上に半透明背景で説明文を重ねる
-------------------------------------------------- */
.swiper-slide .slide-figure { position: relative; margin: 0; display: flex; justify-content: center; }
.system-slider .swiper-slide .slide-figure { width: 100%; }
.issues-slider .swiper-slide .slide-figure { width: 100%; }

/* system-slider は既存の img 幅 90% を維持 */
.system-slider .swiper-slide .slide-figure img { width: 90%; }
/* issues-slider は全幅 */
.issues-slider .swiper-slide .slide-figure img { width: 100%; }

.swiper-slide .slide-figure figcaption {
  position: absolute;
  bottom: var(--px10);
  left: 50%;
  transform: translateX(-50%);
  width: calc(90% - 16px); /* system-slider 基準で調整 */
  max-width: 100%;
  padding: 6px 20px;
  font-size: var(--font-size16);
  line-height: 1.4;
  background: rgba(0,0,0,.6);
  color: #fff;
  border-radius: 6px;
  backdrop-filter: blur(2px);
  box-sizing: border-box;
}

.issues-slider .swiper-slide .slide-figure figcaption {
  width: auto; /* 自動幅 */
  left: 12px; /* 左寄せ */
  transform: none; /* 中央寄せ解除 */
  text-align: left; /* テキスト左揃え */
}

@media (max-width: 640px) {
  .swiper-slide .slide-figure figcaption { font-size: 11px; padding: 5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .swiper-slide .slide-figure figcaption { backdrop-filter: none; }
}

@media (forced-colors: active) {
  .swiper-slide .slide-figure figcaption { background: CanvasText; color: Canvas; }
}