@charset "utf-8";
/* BLIZZAK STORY（/blizzak/story/）— ブランド共通CSSと衝突しないよう、すべて #blizzak-story 配下に閉じる → DDR-030 */

/* 1. トークン ----------------------------------------------------------- */
#blizzak-story {
	--bzs-red: #d71719;
	--bzs-black: #0a0a0a;
	--bzs-ink: #1a1a1a;
	--bzs-text: #2b2b2b;
	--bzs-mute: #b8b8b8;
	--bzs-line: rgba(255, 255, 255, .16);
	--bzs-paper: #fff;
	--bzs-snow: #f2f4f6;

	--bzs-ff-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
	--bzs-ff-en: "Barlow Semi Condensed", "Noto Sans JP", sans-serif;

	--bzs-fs-body: clamp(15px, 0.6vw + 12.5px, 17px);
	--bzs-fs-ttl: clamp(23px, 1.9vw + 15px, 38px);
	--bzs-fs-head: clamp(26px, 2.6vw + 14px, 52px);

	--bzs-w-wide: 1200px;
	--bzs-w-text: 42em;
	--bzs-gutter: clamp(20px, 5vw, 80px);
	--bzs-sec: clamp(80px, 9vw, 160px);

	--bzs-ease-out: cubic-bezier(.16, 1, .3, 1);
	--bzs-ease-inout: cubic-bezier(.65, 0, .35, 1);

	/* KV の高さ: SP は縦長、タブレットは 3:2 を上限、PC（1200px 以上）は最初の画面いっぱい（縦長の画面では 16:9 を上限） */
	--bzs-kv-h: min(125vw, calc(100vh - 180px));
	--bzs-kv-y: 0px;
	/* ページ最上部のヘッダー高（全社ヘッダー 50px＋ブランドヘッダー 60px） */
	--bzs-top: 110px;
	/* ブランドヘッダー（#brandHeader01）は PC でスクロール中も上端に固定される高さ 60px */
	--bzs-hdr: 60px;
}
@supports (height: 100svh) {
	#blizzak-story { --bzs-kv-h: min(125vw, calc(100svh - 180px)); }
}
@media screen and (min-width: 768px) {
	#blizzak-story { --bzs-kv-h: min(66.667vw, max(420px, calc(100vh - 260px))); }
}
@media screen and (min-width: 1200px) {
	#blizzak-story { --bzs-kv-h: max(480px, min(calc(100vh - var(--bzs-top)), 56.25vw)); }
}
@supports (height: 100svh) {
	@media screen and (min-width: 1200px) {
		#blizzak-story { --bzs-kv-h: max(480px, min(calc(100svh - var(--bzs-top)), 56.25vw)); }
	}
}

/* 2. ベース（ブランド共通CSSの h/p/ul 指定をこの範囲だけ打ち消す） ------------- */
#blizzak-story {
	position: relative;
	overflow-x: clip;
	background: var(--bzs-paper);
	color: var(--bzs-text);
	font-family: var(--bzs-ff-ja);
	font-size: var(--bzs-fs-body);
	font-weight: 400;
	line-height: 2;
	letter-spacing: .02em;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
#blizzak-story h2,
#blizzak-story h3,
#blizzak-story p,
#blizzak-story ul,
#blizzak-story li,
#blizzak-story figure {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	background: none;
	border: 0;
}
#blizzak-story li { list-style: none; }
#blizzak-story img {
	display: block;
	max-width: 100%;
	height: auto;
}
#blizzak-story a { color: inherit; text-decoration: none; }
#blizzak-story h2,
#blizzak-story h3 {
	font-feature-settings: "palt";
	line-break: strict;
	word-break: normal;
	overflow-wrap: anywhere;
}
/* 見出しは文節の途中で折り返さない（対応ブラウザのみ。未対応は通常の折り返し） */
#blizzak-story h2,
#blizzak-story h3 {
	word-break: auto-phrase;
}
#blizzak-story .bzs-page__text p,
#blizzak-story .bzs-lead p {
	line-break: strict;
	word-break: normal;
	overflow-wrap: anywhere;
}
#blizzak-story .bzs-sp { display: none; }
@media screen and (max-width: 767px) {
	#blizzak-story .bzs-sp { display: inline; }
}

/* 3. KV — PC（1200px 以上）は写真の左に文字を重ね、それ以外は写真の下に置く → DDR-033・035 */
#blizzak-story .bzs-kv {
	position: relative;
	background: var(--bzs-black);
	color: #fff;
}
#blizzak-story .bzs-kv__media {
	position: relative;
	height: var(--bzs-kv-h);
	overflow: hidden;
}
#blizzak-story .bzs-kv__parallax {
	position: absolute;
	inset: 0;
	transform: translate3d(0, var(--bzs-kv-y), 0);
	will-change: transform;
}
#blizzak-story .bzs-kv__image,
#blizzak-story .bzs-kv__image img {
	display: block;
	width: 100%;
	height: 100%;
}
#blizzak-story .bzs-kv__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 2.4s cubic-bezier(.33, 1, .68, 1);
}
#blizzak-story .bzs-kv__slide.is-active {
	z-index: 1;
	opacity: 1;
}
#blizzak-story .bzs-kv__image img {
	max-width: none;
	object-fit: cover;
	object-position: 18% 55%;
}
/* SP の縦長表示でも車体が中央に来る位置（PC は横幅いっぱいなので縦位置だけが効く） */
#blizzak-story .bzs-kv__slide--2 img { object-position: 85% 50%; }
#blizzak-story .bzs-kv__slide--3 img { object-position: 20% 40%; }
#blizzak-story .bzs-kv__media::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 34%;
	content: "";
	background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, .55) 60%, var(--bzs-black) 100%);
	pointer-events: none;
}
#blizzak-story .bzs-kv__cover {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--bzs-black);
	opacity: 0;
	pointer-events: none;
}
.bzs-js #blizzak-story .bzs-kv__cover { opacity: 1; }
.bzs-js #blizzak-story .bzs-kv.is-ready .bzs-kv__cover {
	opacity: 0;
	transition: opacity 1.25s cubic-bezier(.33, 1, .68, 1);
}
/* 表示中の1枚をゆっくりズームイン。消える側（is-leaving）にも当て続け、拡大したまま消す */
.bzs-js #blizzak-story .bzs-kv.is-ready .bzs-kv__slide.is-active img,
.bzs-js #blizzak-story .bzs-kv.is-ready .bzs-kv__slide.is-leaving img {
	animation: bzs-kv-zoom 10s cubic-bezier(.25, .1, .25, 1) both;
}
@keyframes bzs-kv-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

#blizzak-story .bzs-kv__body {
	position: relative;
	z-index: 2;
	margin-top: -48px;
	padding: 0 var(--bzs-gutter) clamp(56px, 8vw, 96px);
	text-align: center;
}
#blizzak-story .bzs-kv__logo {
	width: min(420px, 78vw);
	margin: 0 auto;
}
#blizzak-story .bzs-kv__sub {
	margin-top: clamp(24px, 2.4vw, 36px);
	font-size: clamp(14px, 0.5vw + 12px, 18px);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .04em;
	font-feature-settings: "palt";
}
#blizzak-story .bzs-kv__ttl {
	margin-top: clamp(10px, 1vw, 16px);
	font-size: var(--bzs-fs-head);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .06em;
}
#blizzak-story .bzs-kv__ttl::after {
	display: block;
	width: 48px;
	height: 3px;
	margin: clamp(20px, 2vw, 32px) auto 0;
	content: "";
	background: var(--bzs-red);
}
#blizzak-story .bzs-kv__credit {
	margin-top: clamp(18px, 1.8vw, 24px);
	color: var(--bzs-mute);
	font-size: clamp(12px, 0.3vw + 11px, 14px);
	line-height: 1.6;
	letter-spacing: .06em;
}

/* SCROLL は PC のみ。KV の最下部に置く（KV は最初の画面いっぱいなので、初期表示では画面の最下部に来る） */
#blizzak-story .bzs-kv__scroll {
	position: absolute;
	bottom: 0;
	left: clamp(16px, 3.125vw, 60px);
	z-index: 4;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
}
#blizzak-story .bzs-kv__scrollText {
	font-family: var(--bzs-ff-en);
	font-size: 11px;
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .2em;
	writing-mode: vertical-rl;
}
#blizzak-story .bzs-kv__scrollLine {
	position: relative;
	display: block;
	width: 1px;
	height: 80px;
	overflow: hidden;
	background: rgba(255, 255, 255, .25);
}
#blizzak-story .bzs-kv__scrollLine::before {
	position: absolute;
	inset: 0;
	content: "";
	background: #fff;
	transform: translateY(-100%);
	animation: bzs-scroll-line 3.1s var(--bzs-ease-inout) infinite;
}
@keyframes bzs-scroll-line {
	0%   { transform: translateY(-100%); }
	35%  { transform: translateY(0); }
	80%  { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

@media screen and (min-width: 1200px) {
	/* 文字の箱は KV と同じ大きさにし、その縦中央に揃える */
	#blizzak-story .bzs-kv__body {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0 0 0 clamp(96px, 8vw, 160px);
		text-align: left;
		text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
	}
	/* 文字側を暗くするグラデーションは写真ごとに持たせ、写真と一緒に切り替える */
	#blizzak-story .bzs-kv__slide::after {
		position: absolute;
		inset: 0;
		content: "";
		background: linear-gradient(90deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .4) 34%, rgba(10, 10, 10, 0) 58%);
		pointer-events: none;
	}
	#blizzak-story .bzs-kv__slide[data-kv-text="right"]::after {
		background: linear-gradient(270deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .4) 34%, rgba(10, 10, 10, 0) 58%);
	}
	/* 文字を右に置く写真は左寄せで 80% 幅に収め、右端を地の色へ溶かして文字の場所を空ける（車体が画面の 6 割より右に来ない） */
	#blizzak-story .bzs-kv__slide[data-kv-text="right"] img {
		width: 80%;
		-webkit-mask-image: linear-gradient(to right, #000 72%, transparent 100%);
		mask-image: linear-gradient(to right, #000 72%, transparent 100%);
	}
	/* 雪の写真（data-kv-tone="light"）は地とグラデーションを雪の白に、文字を黒にする → DDR-040 */
	#blizzak-story .bzs-kv__slide[data-kv-tone="light"] { background: #eef1f4; }
	#blizzak-story .bzs-kv__slide[data-kv-tone="light"]::after {
		background: linear-gradient(270deg, rgba(238, 241, 244, .94) 0%, rgba(238, 241, 244, .8) 30%, rgba(238, 241, 244, 0) 56%);
	}
	#blizzak-story .bzs-kv.is-tone-light .bzs-kv__body {
		color: var(--bzs-ink);
		text-shadow: none;
	}
	#blizzak-story .bzs-kv.is-tone-light .bzs-kv__logo img { filter: brightness(0); }
	#blizzak-story .bzs-kv.is-tone-light .bzs-kv__credit { color: rgba(26, 26, 26, .75); }
	#blizzak-story .bzs-kv__media::after { display: none; }
	#blizzak-story .bzs-kv__inner {
		max-width: 46%;
		transition: opacity .7s cubic-bezier(.33, 1, .68, 1);
	}
	/* 車体が左寄りの写真では文字を右へ。いったん消してから移し、再び表示する → DDR-038 */
	#blizzak-story .bzs-kv.is-text-right .bzs-kv__body {
		justify-content: flex-end;
		padding: 0 clamp(96px, 8vw, 160px) 0 0;
	}
	#blizzak-story .bzs-kv.is-text-out .bzs-kv__inner { opacity: 0; }
	#blizzak-story .bzs-kv__logo {
		width: clamp(320px, 26vw, 440px);
		margin: 0;
	}
	#blizzak-story .bzs-kv__ttl { font-size: clamp(36px, 3.4vw, 56px); }
	#blizzak-story .bzs-kv__ttl::after { margin-left: 0; }
	#blizzak-story .bzs-kv__credit { color: rgba(255, 255, 255, .8); }
	#blizzak-story .bzs-kv__scroll { display: flex; }
}

/* KV の文字は読み込み後に、下から少し浮き上がりながら順に表示（減速の長い ease-out で着地を柔らかくする） */
.bzs-js #blizzak-story .bzs-in {
	opacity: 0;
	transform: translate3d(0, 32px, 0);
}
.bzs-js #blizzak-story .bzs-kv.is-ready .bzs-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity 1.4s cubic-bezier(.33, 1, .68, 1), transform 1.8s cubic-bezier(.22, 1, .36, 1);
}
.bzs-js #blizzak-story .bzs-kv.is-ready .bzs-in--d1 { transition-delay: .5s; }
.bzs-js #blizzak-story .bzs-kv.is-ready .bzs-in--d2 { transition-delay: .8s; }
.bzs-js #blizzak-story .bzs-kv.is-ready .bzs-in--d3 { transition-delay: 1.05s; }
.bzs-js #blizzak-story .bzs-kv.is-ready .bzs-in--d4 { transition-delay: 1.5s; }

/* 4. リード ------------------------------------------------------------- */
#blizzak-story .bzs-lead {
	padding: 0 var(--bzs-gutter) var(--bzs-sec);
	background: var(--bzs-black);
	color: #e6e6e6;
}
#blizzak-story .bzs-lead__inner {
	max-width: 50em;
	margin: 0 auto;
	padding-top: clamp(40px, 4vw, 64px);
	border-top: 1px solid var(--bzs-line);
	font-size: clamp(15px, 0.5vw + 13px, 18px);
	line-height: 2.1;
}
@media screen and (min-width: 1200px) {
	/* 黒地の主張を抑えるため、リードの上下余白だけ本文より詰める */
	#blizzak-story .bzs-lead {
		--bzs-sec: clamp(80px, 5vw, 160px);
		padding-top: var(--bzs-sec);
	}
	#blizzak-story .bzs-lead__inner {
		padding-top: 0;
		border-top: 0;
	}
}

/* 5. 本文 — 既定は写真→本文の縦積み（写真は上下の視差）、横長ワイド画面は半面に写真を固定して横にパン → DDR-033 */
#blizzak-story .bzs-page {
	position: relative;
}
#blizzak-story .bzs-page + .bzs-page {
	margin-top: clamp(72px, 10vw, 120px);
}
#blizzak-story .bzs-page__main {
	position: relative;
	aspect-ratio: 4 / 3;
	max-height: min(78vh, 760px);
	width: 100%;
	overflow: hidden;
	background: var(--bzs-black);
}
#blizzak-story .bzs-page__mainInner,
#blizzak-story .bzs-page__subInner {
	position: absolute;
	inset: -12% 0;
	transform: translate3d(0, calc(var(--bzs-p, 0) * 9%), 0);
	will-change: transform;
}
#blizzak-story .bzs-page__mainInner picture,
#blizzak-story .bzs-page__mainInner img,
#blizzak-story .bzs-page__subInner picture,
#blizzak-story .bzs-page__subInner img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
}
#blizzak-story .bzs-page__mainInner img,
#blizzak-story .bzs-page__subInner img { object-fit: cover; }

#blizzak-story .bzs-page__content {
	max-width: calc(var(--bzs-w-text) + var(--bzs-gutter) * 2);
	margin: 0 auto;
	padding: clamp(20px, 4vw, 40px) var(--bzs-gutter) 0;
}
#blizzak-story .bzs-page__head {
	--bzs-bignum: clamp(112px, 30vw, 168px);
	position: relative;
	padding-top: calc(var(--bzs-bignum) * .38);
}
/* 番号は本文より先に置いた絶対配置なので、後続の文字を position:relative にして番号の上に重ねる */
#blizzak-story .bzs-page__num,
#blizzak-story .bzs-page__ttl { position: relative; }
#blizzak-story .bzs-page__bignum {
	position: absolute;
	top: 0;
	right: -.04em;
	color: transparent;
	font-family: var(--bzs-ff-en);
	font-size: var(--bzs-bignum);
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.02em;
	-webkit-text-stroke: 1px rgba(10, 10, 10, .16);
	pointer-events: none;
	user-select: none;
}
#blizzak-story .bzs-page__num {
	display: flex;
	align-items: baseline;
	gap: .35em;
	color: var(--bzs-red);
	font-family: var(--bzs-ff-en);
	font-size: clamp(15px, 0.6vw + 12px, 20px);
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .08em;
}
#blizzak-story .bzs-page__num span {
	font-size: 2.2em;
	letter-spacing: .02em;
}
#blizzak-story .bzs-page__ttl {
	margin-top: clamp(14px, 1.4vw, 24px);
	color: var(--bzs-ink);
	font-size: var(--bzs-fs-ttl);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .04em;
}
#blizzak-story .bzs-page__text {
	margin-top: clamp(28px, 3.4vw, 56px);
}
#blizzak-story .bzs-page__text p + p {
	margin-top: 1.6em;
}
#blizzak-story .bzs-voice {
	position: relative;
	padding-left: 1.4em;
}
#blizzak-story .bzs-voice::before {
	position: absolute;
	top: .55em;
	bottom: .55em;
	left: 0;
	width: 2px;
	content: "";
	background: var(--bzs-red);
}
#blizzak-story .bzs-voice__name {
	display: block;
	margin-bottom: .2em;
	color: var(--bzs-ink);
	font-size: .88em;
	font-weight: 700;
	letter-spacing: .08em;
}
#blizzak-story .bzs-page__sub {
	position: relative;
	margin-top: clamp(40px, 5vw, 72px);
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

@media screen and (min-width: 1200px) and (min-aspect-ratio: 4 / 3) {
	#blizzak-story .bzs-body { padding-top: var(--bzs-sec); }
	#blizzak-story .bzs-page {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
	#blizzak-story .bzs-page--right .bzs-page__visual { order: 2; }
	#blizzak-story .bzs-page__main {
		position: sticky;
		top: var(--bzs-hdr);
		height: calc(100vh - var(--bzs-hdr));
		max-height: none;
		aspect-ratio: auto;
		container-type: size;
	}
	/* 写真は 3:2 のまま枠の高さに合わせ、中央から左右へ枠幅の 10%（はみ出し量の半分が上限）だけ送る */
	#blizzak-story .bzs-page__mainInner {
		--bzs-pan-half: max(0px, 75cqh - 50cqw);
		--bzs-pan-amp: min(10cqw, var(--bzs-pan-half));
		inset: 0 auto 0 0;
		width: max(150cqh, 100cqw);
		height: 100%;
		transform: translate3d(calc(-1 * var(--bzs-pan-half) - (var(--bzs-pp, 0) * 2 - 1) * var(--bzs-pan-amp)), 0, 0);
	}
	#blizzak-story .bzs-page--right .bzs-page__mainInner {
		transform: translate3d(calc(-1 * var(--bzs-pan-half) + (var(--bzs-pp, 0) * 2 - 1) * var(--bzs-pan-amp)), 0, 0);
	}
	#blizzak-story .bzs-page__content {
		max-width: none;
		margin: 0;
		padding: clamp(64px, 7vw, 120px) clamp(48px, 5.5vw, 104px) clamp(80px, 8vw, 140px);
	}
	#blizzak-story .bzs-page__content > * { max-width: var(--bzs-w-text); }
	#blizzak-story .bzs-page__head { padding-top: 0; }
	#blizzak-story .bzs-page__bignum {
		top: -.42em;
		right: 0;
		font-size: clamp(140px, 12vw, 220px);
		-webkit-text-stroke: 1px rgba(10, 10, 10, .12);
	}
}
@supports (height: 100svh) {
	@media screen and (min-width: 1200px) and (min-aspect-ratio: 4 / 3) {
		#blizzak-story .bzs-page__main { height: calc(100svh - var(--bzs-hdr)); }
	}
}

/* 6. 製品リンク --------------------------------------------------------- */
#blizzak-story .bzs-product {
	margin-top: clamp(48px, 5vw, 80px);
}
#blizzak-story .bzs-product__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
	min-height: 140px;
	padding: 0 clamp(56px, 6vw, 88px) 0 0;
	overflow: hidden;
	background: var(--bzs-black);
	color: #fff;
}
#blizzak-story .bzs-product__image {
	flex: 0 0 clamp(96px, 14vw, 160px);
	align-self: stretch;
	overflow: hidden;
}
#blizzak-story .bzs-product__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
	transition: transform .6s var(--bzs-ease-out);
}
#blizzak-story .bzs-product__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 0;
}
#blizzak-story .bzs-product__logo {
	display: block;
	width: clamp(180px, 26vw, 340px);
}
#blizzak-story .bzs-product__text {
	font-size: clamp(13px, 0.4vw + 11.5px, 15px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
}
#blizzak-story .bzs-product__arrow {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: clamp(44px, 5vw, 64px);
	background: var(--bzs-red);
}
#blizzak-story .bzs-product__arrow::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	content: "";
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translate(-70%, -50%) rotate(45deg);
	transition: transform .4s var(--bzs-ease-out);
}
@media (hover: hover) {
	#blizzak-story .bzs-product__link:hover .bzs-product__image img { transform: scale(1.06); }
	#blizzak-story .bzs-product__link:hover .bzs-product__arrow::before { transform: translate(-30%, -50%) rotate(45deg); }
}
#blizzak-story .bzs-product__link:focus-visible,
#blizzak-story .bzs-end__btn:focus-visible,
#blizzak-story .bzs-gallery__btn:focus-visible,
#blizzak-story .bzs-gallery__track:focus-visible {
	outline: 2px solid var(--bzs-red);
	outline-offset: 4px;
}

/* 7. PHOTO GALLERY ------------------------------------------------------ */
#blizzak-story .bzs-gallery {
	margin-top: var(--bzs-sec);
	padding: var(--bzs-sec) 0 clamp(48px, 4vw, 64px);
	background: var(--bzs-black);
	color: #fff;
}
#blizzak-story .bzs-gallery__ttl {
	width: fit-content;
	margin: 0 auto;
	font-family: var(--bzs-ff-en);
	font-size: clamp(28px, 2.6vw + 16px, 56px);
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .06em;
}
#blizzak-story .bzs-gallery__viewport {
	margin-top: clamp(40px, 4vw, 64px);
}
#blizzak-story .bzs-gallery__track {
	display: flex;
	gap: clamp(12px, 1.6vw, 24px);
	padding: 0 calc((100% - min(960px, 70vw)) / 2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
#blizzak-story .bzs-gallery__track::-webkit-scrollbar { display: none; }
/* ループの付け替え時だけスムーズスクロールを切る */
#blizzak-story .bzs-gallery__track.is-jumping { scroll-behavior: auto; }
#blizzak-story .bzs-gallery__item {
	flex: 0 0 min(960px, 70vw);
	scroll-snap-align: center;
	opacity: .4;
	transition: opacity .6s var(--bzs-ease-out);
}
#blizzak-story .bzs-gallery__item.is-current { opacity: 1; }
#blizzak-story .bzs-gallery__item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
#blizzak-story .bzs-gallery__ctrl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-top: clamp(24px, 2.4vw, 36px);
}
#blizzak-story .bzs-gallery__count {
	min-width: 5.5em;
	font-family: var(--bzs-ff-en);
	font-size: 16px;
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .1em;
	text-align: center;
}
#blizzak-story .bzs-gallery__btn {
	position: relative;
	width: 48px;
	height: 48px;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	transition: background-color .3s, border-color .3s;
}
#blizzak-story .bzs-gallery__btn::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	content: "";
	border-top: 1.5px solid #fff;
	border-right: 1.5px solid #fff;
	transform: translate(-70%, -50%) rotate(45deg);
}
#blizzak-story .bzs-gallery__btn--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
@media (hover: hover) {
	#blizzak-story .bzs-gallery__btn:hover {
		background: var(--bzs-red);
		border-color: var(--bzs-red);
	}
}
@media screen and (max-width: 767px) {
	#blizzak-story .bzs-gallery__track { padding: 0 8vw; }
	#blizzak-story .bzs-gallery__item { flex-basis: 84vw; }
}

/* 8. 末尾 --------------------------------------------------------------- */
#blizzak-story .bzs-end {
	padding: 0 var(--bzs-gutter) clamp(56px, 6vw, 96px);
	background: var(--bzs-black);
	text-align: center;
}
#blizzak-story .bzs-end__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: min(320px, 100%);
	min-height: 56px;
	padding: 0 48px;
	border: 1px solid rgba(255, 255, 255, .6);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	transition: background-color .3s, border-color .3s;
}
#blizzak-story .bzs-end__btn::after {
	position: absolute;
	top: 50%;
	right: 22px;
	width: 8px;
	height: 8px;
	content: "";
	border-top: 1.5px solid #fff;
	border-right: 1.5px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}
@media (hover: hover) {
	#blizzak-story .bzs-end__btn:hover {
		background: var(--bzs-red);
		border-color: var(--bzs-red);
	}
}

/* 9. スクロール演出（出現は一度だけ）— 英字ラベル＝マスク／見出し＝浮き上がり／写真＝幕／本文＝段落ごとに時間差 */
.bzs-js #blizzak-story .bzs-reveal--mask { clip-path: inset(0 100% 0 0); }
.bzs-js #blizzak-story .bzs-reveal.is-in.bzs-reveal--mask {
	animation: bzs-mask-slide 1.2s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes bzs-mask-slide {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

.bzs-js #blizzak-story .bzs-reveal--rise {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
}
.bzs-js #blizzak-story .bzs-reveal.is-in.bzs-reveal--rise {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity 1.2s cubic-bezier(.33, 1, .68, 1) .15s, transform 1.6s cubic-bezier(.22, 1, .36, 1) .15s;
}

/* 写真は figure に重ねた幕（地色と同色）を下へ送って開く。clip-path は合成レイヤーで途中が描画されないことがある → DDR-035 */
.bzs-js #blizzak-story .bzs-reveal--wipe::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	content: "";
	background: var(--bzs-paper);
	pointer-events: none;
}
.bzs-js #blizzak-story .bzs-page__main.bzs-reveal--wipe::after { background: var(--bzs-black); }
.bzs-js #blizzak-story .bzs-reveal.is-in.bzs-reveal--wipe::after {
	transform: translate3d(0, 100%, 0);
	transition: transform 1.4s var(--bzs-ease-inout);
}
.bzs-js #blizzak-story .bzs-reveal--wipe img { transform: scale(1.18); }
.bzs-js #blizzak-story .bzs-reveal.is-in.bzs-reveal--wipe img {
	transform: scale(1);
	transition: transform 2.2s var(--bzs-ease-out);
}

.bzs-js #blizzak-story .bzs-reveal--fade { opacity: 0; }
.bzs-js #blizzak-story .bzs-reveal.is-in.bzs-reveal--fade {
	opacity: 1;
	transition: opacity 1s cubic-bezier(.33, 1, .68, 1);
}
/* 本文ブロックは段落単位で時間差（ブロック自体は即表示し、中の段落を順に） */
.bzs-js #blizzak-story .bzs-page__text.bzs-reveal--fade { opacity: 1; }
.bzs-js #blizzak-story .bzs-page__text.bzs-reveal--fade > p {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity 1s cubic-bezier(.33, 1, .68, 1), transform 1.2s var(--bzs-ease-out);
}
.bzs-js #blizzak-story .bzs-page__text.is-in > p {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
.bzs-js #blizzak-story .bzs-page__text.is-in > p:nth-child(2) { transition-delay: .12s; }
.bzs-js #blizzak-story .bzs-page__text.is-in > p:nth-child(3) { transition-delay: .24s; }
.bzs-js #blizzak-story .bzs-page__text.is-in > p:nth-child(n+4) { transition-delay: .36s; }

/* 10. 動きを減らす設定では head の判定で .bzs-js を付けない＝出現演出は最初から無効。常時ループだけここで止める */
@media (prefers-reduced-motion: reduce) {
	#blizzak-story .bzs-kv__scrollLine::before {
		transform: none;
		animation: none;
	}
}