@charset "UTF-8";

/*
 * 移行してきた本文の中に残る横送りの器（.swiper-container）の見た目（Issue #2284）。
 *
 * 組み立ては assets/js/legacy-swiper.js が行い、最後に器へ is-swiper-ready を付ける。
 * このファイルの指定は、その印が付いているときだけ効く。よって JavaScript が
 * 動かない環境では札が縦に並ぶだけで、隠れて読めなくなる中身は 1 つも無い。
 * 移行元も Swiper が動かなければ同じ見え方になる。
 *
 * 内側の名前（swiper-wrapper / swiper-slide / swiper-pagination /
 * swiper-button-next / swiper-button-prev）は、移行元 Swiper が使う名前をそのまま
 * 使っている。移行元のページ別 CSS はこの名前に対して書かれているため、各区画の
 * Issue がページ別 CSS を移すときにそのまま効く。
 *
 * 【2 つの見せ方】
 * 移行元は 2 ページで別の見せ方を指定している（設定の実測は JS 側の冒頭を参照）。
 *
 *   is-swiper-fade   薄く重ねて切り替える（/comic-story/ の表紙 3 枚）
 *   is-swiper-slide  横に送る（/option/ の会員特典メニュー 21 枚 × 2 器）
 *
 * 【札の並びに手を触れていない理由】
 * 移行元 Swiper は帯を transform で横へずらす。ここでは窓の横スクロールで送る。
 * 1 枚ごとの位置には手を触れないため、指でのスワイプ・ホイール・矢印キーが
 * ブラウザの働きだけで効き、途中で JavaScript が止まっても中身が消えない。
 * assets/css/legacy-slider.css と同じ考え方である。
 */

/* --- 器に共通の土台 --------------------------------------------------- */

/*
 * 器。左右の送りボタンと丸い印の位置の基準になる.
 *
 * 移行元の器は箇条書きの入れ物（ul）であることがある（/comic-story/ の
 * .swiper-wrapper は ul）。印を消さないと、組み替えたあとも点が残る.
 */
.swiper-container.is-swiper-ready {
	position: relative;
	display: block;
	box-sizing: border-box;
}

.swiper-container.is-swiper-ready .swiper-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

.swiper-container.is-swiper-ready .swiper-slide {
	list-style: none;
}

/* --- 薄く重ねて切り替える見せ方 --------------------------------------- */

/*
 * 札を同じ場所へ重ね、不透明度だけを変える。
 *
 * 高さは「いちばん高い札」に合わせる必要がある。重ねると器の高さが 0 になるため、
 * 1 枚目だけを流し込みのまま置き、残りを絶対配置でその上へ重ねる。1 枚目が
 * いちばん高いとは限らないので、器へ最低限の高さを持たせるのではなく、
 * すべての札を流し込みのまま重ねる grid を使う.
 */
.swiper-container.is-swiper-fade .swiper-wrapper {
	display: grid;
	grid-template-areas: "pa-swiper-stack";
}

.swiper-container.is-swiper-fade .swiper-slide {
	grid-area: pa-swiper-stack;
	opacity: 0;
	transition: opacity var(--pa-swiper-speed, 1500ms) ease;
	/*
	 * 見えていない札の上のリンクを押せないようにする。読み上げと Tab の順路から
	 * 外すのは JavaScript 側（aria-hidden と tabindex）で行っている.
	 */
	pointer-events: none;
}

.swiper-container.is-swiper-fade .swiper-slide.swiper-slide-active {
	opacity: 1;
	pointer-events: auto;
}

/* 動きを控える設定では、切り替えを瞬時にする. */
@media (prefers-reduced-motion: reduce) {
	.swiper-container.is-swiper-fade .swiper-slide {
		transition: none;
	}
}

/* --- 横に送る見せ方 --------------------------------------------------- */

/*
 * 窓。ここが横にスクロールする。吸着（scroll-snap）で 1 枚ずつ止まる。
 *
 * スクロールバーは隠す。移行元は transform で送るためスクロールバーが出ず、
 * 出したままにすると器の高さが移行元より数ピクセル高くなる。隠しても、指・
 * ホイール・矢印キー・送りボタンで送れる.
 */
.swiper-container.is-swiper-slide .swiper-wrapper {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.swiper-container.is-swiper-slide .swiper-wrapper::-webkit-scrollbar {
	display: none;
}

/*
 * 札の幅。移行元の slidesPerView（1 画面に何枚見せるか）から決める。
 * assets/js/legacy-swiper.js が --pa-swiper-slide-width へ「100% ÷ 枚数」を渡す
 * （パソコン版 1 枚 → 100% ／ 携帯版 1.15 枚 → 86.96%）。
 *
 * **中身の固有の大きさに任せてはいけない。**任せると、画像や本文の大きさで
 * 同時に見える枚数と中央の位置が変わり、移行元と別の見え方になる。
 *
 * 設定が分からない器（既定）には値を渡さないので、そのときだけ中身のままになる.
 */
.swiper-container.is-swiper-slide .swiper-slide {
	flex: 0 0 auto;
	inline-size: var(--pa-swiper-slide-width, auto);
	scroll-snap-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.swiper-container.is-swiper-slide .swiper-wrapper {
		scroll-behavior: auto;
	}
}

/*
 * 中央寄せ。移行元は centeredSlides: true で、いま見ている札が窓の中央に来て
 * 両隣が覗く。窓の左右へ札の外側ぶんの余白を作ることで、最初と最後の札も
 * 中央へ来られるようにする.
 */
.swiper-container.is-swiper-centered .swiper-wrapper::before,
.swiper-container.is-swiper-centered .swiper-wrapper::after {
	content: "";
	flex: 0 0 auto;
	/*
	 * 器の幅の半分から札の幅の半分を引いた値。札の幅は
	 * --pa-swiper-slide-width（移行元の slidesPerView から決まる）なので、
	 * 余白はその残りの半分になる。1 画面に 1 枚のときは 0 になり、余白は付かない.
	 */
	inline-size: calc((100% - var(--pa-swiper-slide-width, 100%)) / 2);
}

/* --- パソコン版と携帯版の器の出し分け --------------------------------- */

/*
 * 移行元は、同じ中身の器をパソコン版と携帯版で 2 つ持ち、幅で出し分けている。
 * /option/ は .jsi-swiper（パソコン版・u-hidden-sp）と .jsi-swiper-sp
 * （携帯版・u-hidden-pc）の 2 つで、札は同じ 21 枚である。
 *
 * dev はこの出し分けの指定を持っていないため、**同じ 21 枚が 2 回見える**。
 * 横送りが効くようになると、同じ並びが上下に 2 つ出て分かりにくいので、ここで
 * 出し分けを入れる。
 *
 * 境目は 425px / 426px である。移行元 option/assets/css/style.css がその値を
 * 使っている（テーマがふだん使う 749px ではない）。移行元の値をそのまま写す。
 *
 * **器だけに絞って掛けている。**移行元は同じクラス名でほかの要素も出し分けて
 * いるが、それはページ別 CSS を写す作業（別 Issue）の範囲である。ここで
 * クラス名だけを見て広く掛けると、ほかのページの要素まで消しかねない.
 */
@media screen and (max-width: 425px) {
	.swiper-container.u-hidden-sp {
		display: none;
	}
}

@media screen and (min-width: 426px) {
	.swiper-container.u-hidden-pc {
		display: none;
	}
}

/* --- 左右の送りボタン ------------------------------------------------- */

/*
 * 移行元の器がすでに入れ物を持っているときだけ働く（JavaScript 側は入れ物を
 * 作らない）。移行元 /option/ は各 2 個持っている。
 *
 * 移行元 Swiper の共通の見た目（swiper.css）は、ボタンを器の外側へ置き
 * 背景画像で矢印を描く。ページ別 CSS が上書きする前提の値である。ここは汎用の
 * 土台なので、ボタンを器の内側へ置き、白い丸の上に濃い矢印を描いて、ページ別
 * CSS が無くても見えるようにしてある。大きさは 40 × 40px で、押す的として
 * 十分な広さがある（assets/css/legacy-slider.css と同じ値にそろえた）.
 */
.swiper-container.is-swiper-ready .swiper-button-prev,
.swiper-container.is-swiper-ready .swiper-button-next {
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	margin-block-start: -20px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 90%);
	box-shadow: 0 0 4px rgb(0 0 0 / 20%);
	color: #333;
	cursor: pointer;
}

.swiper-container.is-swiper-ready .swiper-button-prev {
	inset-inline-start: 8px;
}

.swiper-container.is-swiper-ready .swiper-button-next {
	inset-inline-end: 8px;
}

/* 矢印の形。文字ではなく罫線で描くので、書体に左右されない. */
.swiper-container.is-swiper-ready .swiper-button-prev::before,
.swiper-container.is-swiper-ready .swiper-button-next::before {
	content: "";
	inline-size: 10px;
	block-size: 10px;
	border-block-start: 2px solid currentcolor;
	border-inline-end: 2px solid currentcolor;
}

.swiper-container.is-swiper-ready .swiper-button-prev::before {
	transform: rotate(-135deg);
	margin-inline-start: 4px;
}

.swiper-container.is-swiper-ready .swiper-button-next::before {
	transform: rotate(45deg);
	margin-inline-end: 4px;
}

.swiper-container.is-swiper-ready .swiper-button-prev:focus-visible,
.swiper-container.is-swiper-ready .swiper-button-next:focus-visible {
	outline: 2px solid #333;
	outline-offset: 2px;
}

/* --- 丸い印 ----------------------------------------------------------- */

/*
 * 移行元 /comic-story/ は器の中に入れ物（.swiper-pagination）を持っており、
 * clickable: true を指定している。押すとその札へ移る。
 *
 * 移行元 Swiper の共通の見た目は印を器の下端から絶対配置で浮かせるが、
 * **この器を使うページはその CSS を読み込んでいない**。印を流し込みのまま器の下へ
 * 置き、印の高さぶんも器の高さに入る形にする（assets/css/legacy-slider.css と
 * 同じ考え方）.
 */
.swiper-container.is-swiper-ready .swiper-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-block: 12px 0;
}

.swiper-container.is-swiper-ready .swiper-pagination-bullet {
	inline-size: 10px;
	block-size: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(0 0 0 / 20%);
	cursor: pointer;
	transition: background-color 200ms ease;
}

.swiper-container.is-swiper-ready .swiper-pagination-bullet-active {
	background: rgb(0 0 0 / 60%);
}

.swiper-container.is-swiper-ready .swiper-pagination-bullet:focus-visible {
	outline: 2px solid #333;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.swiper-container.is-swiper-ready .swiper-pagination-bullet {
		transition: none;
	}
}