@charset "UTF-8";
/*
 * swiper プラグイン用スタイル (wikiru 版)
 *
 * 変更点:
 *  1) contain: inline-size を追加（最重要）
 *     スライダーの中身は display:flex + flex-shrink:0 のため、
 *     「中身が必要とする最低幅 = 画像 × 枚数」と計算される。
 *     table レイアウトのスキンではセル幅がこの値で決まってしまうため、
 *     スライドを増やすほどテーブルごと横に広がってしまう。
 *     contain: inline-size は「横幅を中身から切り離す」指定で、
 *     これによりスライダーは常に本文カラムの幅に収まる。
 *     overflow:hidden では防げない（はみ出しを隠すだけで、
 *     最低幅の計算には影響しないため）。
 *  2) overflow:hidden / position:relative / display:flex を保険として明記。
 *     swiper 本体のCSS が読み込めなかった場合の暴走を止める。
 *  3) opacity:0 に .swiper-js を条件として追加。
 *     元のCSSは無条件で透明にしていたため、JavaScript が読み込めない
 *     環境ではスライドの中身が完全に見えなくなっていた。
 *  4) 画像がスライドをはみ出さないようにした。
 *  5) max-width:100vw は contain 非対応の古いブラウザ向けの保険。
 */

.plugin-swiper {
  /* --- ここは消さないこと ---
     contain: inline-size がスライダーの横幅を中身から切り離す。
     これが無いと、table レイアウトのスキンでセルが
     「画像 × スライド枚数」の幅まで広がってしまう。 */
  contain: layout inline-size;
  position: relative;
  overflow: hidden;

  /* 古いブラウザ向けの保険（contain 対応環境では発動しない） */
  max-width: 100vw;

  width: 100%;
  min-width: 0;
  max-height: 100vh;
  margin-bottom: 24px;
}

/* 本体CSSが無い場合の保険 (本体CSSがあれば同じ値なので影響なし) */
.plugin-swiper > .swiper-wrapper {
  display: flex;
  box-sizing: content-box;
  position: relative;
  width: 100%;
  height: 100%;
}

/* JS が生きているときだけフェードインさせる */
.plugin-swiper.swiper-js {
  opacity: 0;
  transition: opacity 0.3s;
}
.plugin-swiper.swiper-js.swiper-initialized {
  opacity: 1;
}

.plugin-swiper .swiper-slide {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100vw;
  box-sizing: border-box;
  position: relative;
}

/* 画像がスライドからはみ出さないように */
.plugin-swiper .swiper-slide img,
.plugin-swiper .swiper-slide video {
  max-width: 100%;
  height: auto;
}

.plugin-swiper .plugin-card {
  display: flex;
  gap: 0;
  justify-content: unset;
}
.plugin-swiper .plugin-card .card-item {
  max-width: unset !important;
}

.swiper-slide > :first-of-type {
  margin-top: 0;
}
.swiper-slide > :last-of-type {
  margin-bottom: 0;
}

.plugin-swiper.swiper-autoheight .swiper-slide {
  height: -moz-fit-content;
  height: fit-content;
}
.swiper-vertical.swiper-autoheight .swiper-slide {
  height: -moz-fit-content !important;
  height: fit-content !important;
}

/* ------------------------------------------------------------------
 * ナビゲーションUIの配置
 *
 * Swiper 標準では矢印が画像の上に重なる。全画面スライダー向けの
 * デザインで、wiki の本文中では中身が見づらくなるため、
 * 左右に余白を取り、そこに矢印を置く。
 *
 * 余白はプラグインが出力するクラス（wkr-nav / wkr-pager /
 * wkr-scrollbar）で切り替える。矢印を使わないスライダーで
 * 左右が無駄に空くのを防ぐため。
 * ------------------------------------------------------------------ */

.plugin-swiper {
  --wkr-gutter: 44px;   /* 矢印を置く左右の余白 */
  --wkr-arrow: var(--swiper-theme-color, #007aff);  /* 矢印の色 */
  --wkr-pager: 26px;    /* ● を置く下の余白 */
  --wkr-bar: 20px;      /* スクロールバーを置く下の余白 */
  box-sizing: border-box;
}

/* 矢印がある場合だけ左右に余白を取る */
.plugin-swiper.wkr-nav {
  padding-left: var(--wkr-gutter);
  padding-right: var(--wkr-gutter);
}

/* 下の余白。両方ある場合は足す */
.plugin-swiper.wkr-pager { padding-bottom: var(--wkr-pager); }
.plugin-swiper.wkr-scrollbar { padding-bottom: var(--wkr-bar); }
.plugin-swiper.wkr-pager.wkr-scrollbar {
  padding-bottom: calc(var(--wkr-pager) + var(--wkr-bar));
}

/* 矢印。余白の中に置くので背景は付けない。
   色は ● のページネーションと同じテーマカラー（既定は #007aff）。
   青はライトモードの白背景でもダークモードの黒背景でも沈まないため、
   テーマの切り替え方法に関係なく視認できる。
   wikiru のダークモードは画面上のボタンで切り替える方式なので、
   prefers-color-scheme（OSの設定）では判定できない点に注意。
   色を変えたい場合は上の --wkr-arrow を書き換えること。 */
.plugin-swiper .swiper-button-prev,
.plugin-swiper .swiper-button-next {
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: var(--wkr-gutter);
  height: 48px;
  color: var(--wkr-arrow);
  opacity: 0.85;
  background: none;
  transition: opacity 0.15s;
}
.plugin-swiper.wkr-pager .swiper-button-prev,
.plugin-swiper.wkr-pager .swiper-button-next { bottom: var(--wkr-pager); }
.plugin-swiper.wkr-scrollbar .swiper-button-prev,
.plugin-swiper.wkr-scrollbar .swiper-button-next { bottom: var(--wkr-bar); }
.plugin-swiper.wkr-pager.wkr-scrollbar .swiper-button-prev,
.plugin-swiper.wkr-pager.wkr-scrollbar .swiper-button-next {
  bottom: calc(var(--wkr-pager) + var(--wkr-bar));
}

.plugin-swiper .swiper-button-prev { left: 0; }
.plugin-swiper .swiper-button-next { right: 0; }

.plugin-swiper .swiper-button-prev:hover,
.plugin-swiper .swiper-button-next:hover { opacity: 1; }

/* 端に到達したときの矢印。Swiper 標準の指定より詳細度が高くなるため
   ここで明示しないと薄くならない */
.plugin-swiper .swiper-button-prev.swiper-button-disabled,
.plugin-swiper .swiper-button-next.swiper-button-disabled { opacity: 0.25; }

.plugin-swiper .swiper-button-prev::after,
.plugin-swiper .swiper-button-next::after {
  font-size: 22px;
  font-weight: bold;
}

/* ● とスクロールバーの位置 */
.plugin-swiper .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 4px; }
.plugin-swiper.wkr-scrollbar .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: calc(var(--wkr-bar) + 4px);
}
.plugin-swiper .swiper-horizontal > .swiper-scrollbar { bottom: 4px; }

/* 画面が狭いときは余白を詰める */
@media screen and (max-width: 520px) {
  .plugin-swiper { --wkr-gutter: 28px; }
  .plugin-swiper .swiper-button-prev::after,
  .plugin-swiper .swiper-button-next::after { font-size: 17px; }
}

/* ------------------------------------------------------------------
 * 中身の配置
 *
 * 既定で中央寄せにする。左寄せのままだと画像が左端に張り付き、
 * 左矢印の真下に潜り込んで押せなくなるため。
 * text-align は変更しないので、長い文章は左揃えのまま
 * ブロックごと中央に配置される（真ん中揃えの文章は読みにくいため）。
 * ------------------------------------------------------------------ */
.plugin-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* class=center ... 文章も含めて完全に中央揃えにする */
.plugin-swiper.center .swiper-slide {
  text-align: center;
}

/* class=left ... 中央寄せをやめて左寄せに戻す */
.plugin-swiper.left .swiper-slide {
  align-items: stretch;
  justify-content: flex-start;
}