/* =========================================================
   Base
========================================================= */
body {
  margin: 0;
  overflow-y: auto;                 /* 縦スク許可 */
  overflow-x: hidden;               /* 横スク禁止 */
  -webkit-overflow-scrolling: touch;/* iOS慣性 */
}
.swiper {
  position: relative;
  z-index: 0;
}
.swiper-wrapper {
  pointer-events: auto;
}
/* スライド内容 */
.swiper-slide {
  display: grid;
  place-items: start start;
  text-align: left;
}

.fit-outer {
  position: relative;
  width: 100%;
  height: 100%;
}

#viewport-split .fit-inner { position: relative; }
#viewport-split .fit-outer {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
#viewport-split .swiper,
#viewport-split .swiper-wrapper,
#viewport-split .swiper-slide {
  height: 100%;
  min-height: 0; 
}
.fit-inner {
  display: block;
  width: 90%;
  height: auto;
  text-align:center;
}

/* =========================================================
   Swiper Navigation（デフォ矢印を完全に無効化＋自前SVG使用）
   ※ 必ず swiper-bundle.css の "後" に置く
========================================================= */
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
  --swiper-navigation-size: 44px;   /* 任意。36～56pxくらいで調整可 */
  width: 44px;                      /* 念のため明示 */
  height: 44px;
  right: 12px;                      /* 位置が必要なら */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  place-items: center;
  pointer-events: auto;             /* 念のため */
}

.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after {
  content: none !important;
  display: none !important;
}

/* 自前SVG（例：下向き→-90degで右向きに） */
.swiper .swiper-button-next .arrow-svg {
  display: block;
  transform: rotate(-90deg);
  transform-origin: center;
  fill: #246ed8 !important;
}
.swiper .swiper-button-next .arrow-svg2 {
  display: block;
  transform: rotate(90deg);
  transform-origin: center;
  fill: #246ed8 !important;
}
.arrow-svg3 {
  display: block;
  transform: rotate(-180deg);
  transform-origin: center;
  fill: #246ed8 !important;
}
/* 前ボタンは使わない場合 */
.swiper .swiper-button-prev { display: none !important; }

/* =========================================================
   Notes / Text overlay
========================================================= */
.note {
  font-size:20px;  
  line-height: 1.0;
  color: #246ed8;
  text-align: left;
  padding: 20px;
  white-space: pre-wrap;
  z-index: 30;
}

/* 任意：SVGスタイル（アニメ用クラス） */
.st00 {
  fill: #246ed8 !important;
  opacity: 0;
  animation: fadeInHoldLoopSt2 5s linear infinite; /* ※別途keyframesが必要 */
}

/* =========================================================
   Animations
========================================================= */
@keyframes fadeBlink {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
.swiper .swiper-button-next.is-paused {
  animation-play-state: paused;
}

/* =========================================================
   Responsive / A11y
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .swiper .swiper-button-next { animation: none; }
}

@media (min-width: 1025px) {
  .fit-inner > img {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }
}

@media (max-width: 768px) {
  .hide-on-mobile { display: none; }

  }
}

/* ====== モバイル幅調整（~767px） ====== */
@media (max-width: 767px) {
  .container.main-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .swiper-slide { padding: 0 !important; }
  .fit-outer { width: 100% !important; height: auto !important; }
  .fit-inner { width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; }
  .fit-inner > img,
  .swiper-slide img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important; /* 余白優先なら contain。はみ出しなく幅100%で収める */
  }
  .fit-inner.fullbleed > img {
    width: 100% !important;
    height: auto !important;
  }
  .note {
    font-size: 14px;
    line-height: 1.5;
	padding: 20px;
  }
  #viewport-split .fit-inner {
    width: 100vw !important;
    margin: 0 !important;
    left: 50%;
    right: 50%;                 
    margin-top: 0 !important;
    padding-top: 0 !important;  
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    transform: none !important;
  }

  #viewport-split .fit-inner > img {
    display: block;
    width: 100vw !important;
    height: auto !important;
    max-height: none !important; /* 縦に縮みすぎる場合は解除 */
    object-fit: contain !important;
  }

  #viewport-split .fit-outer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #viewport-split .swiper-slide {
    place-items: start start;
  }
}

/* ====== テキスト幅補正（~600px） ====== */
@media (max-width: 600px) {
  .slide-text { width: 50%; }
}

/* ====== 最小幅向け（~480px） ====== */
@media (max-width: 480px) {
  #viewport-split .fit-inner {
    width: min(90vw, 360px) !important;
  }
.fullbleed {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
.arrow-svg {
    width: 20px;
  }
  .note {    padding: 10px;
    font-size: 12px;
    line-height: 1.5;
  }
}