@charset "UTF-8";
/* ============================================================
   ストラボSTORY / single-story
   Figma: Frame 1 (5:9) — tISmIXghS5eRw5O2YDtKUT
   基準幅 1440px / コンテンツ幅 1250px
   ============================================================ */

/* ---------- tokens ----------
   ライトボックスと動画モーダルのマークアップは <article class="story"> の
   外側に置かれるため、変数は .story ではなく :root に定義する。
   .story に置くとモーダル内で var() が解決できず、矢印の border や
   カウンタの色が無効化される。 */
:root {
	/* color */
	--sb-accent:      #eeff00;
	--sb-black:       #000000;
	--sb-white:       #ffffff;
	--sb-hero-top:    #292d2d;
	--sb-hero-bottom: #141414;

	/* type — Adobe Fonts（小塚）契約がない場合は下段のGoogle Fontsが効く */
	--sb-mincho: "kozuka-mincho-pr6n", "Shippori Mincho B1",
	             "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
	--sb-gothic: "kozuka-gothic-pr6n", "Noto Sans JP",
	             "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

	/* Figmaの字送りは 0.18em / 0.09em の2種のみ */
	--sb-ls-wide: 0.18em;
	--sb-ls-mid:  0.09em;

	/* Figmaのテキストボックス実測から逆算した行送り */
	--sb-lh-display: 1.33;
	--sb-lh-list:    1.8;

	/* 本文（.story-prose）。Figmaは 12px / 0.18em だが、長文の可読性を優先して
	   サイズを上げ字送りを詰めている。3つともここだけで調整できる。 */
	--sb-body-size: 15px;
	--sb-lh-body:   1.9;
	--sb-ls-body:   0.06em;

	/* layout */
	--sb-container: 1250px;
	--sb-gutter:    24px;

	/* 写真の上に文字が乗るときの保険。強さはここだけで調整できる */
	--sb-shadow-strong: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 24px rgba(0, 0, 0, .7);
	--sb-shadow-soft:   0 1px 3px rgba(0, 0, 0, .6);
}

.story {
	background: var(--sb-black);
	color: var(--sb-white);
	font-family: var(--sb-gothic);
	overflow-x: hidden;
}

.story *,
.story *::before,
.story *::after,
.story-lightbox *,
.story-lightbox *::before,
.story-lightbox *::after,
.story-modal *,
.story-modal *::before,
.story-modal *::after { box-sizing: border-box; }
.story-lightbox, .story-modal { box-sizing: border-box; }

/* リセット。:where() で要素セレクタぶんの詳細度を消し、
   下のクラス指定（.story-hero__catch など）を打ち消さないようにする。
   .story ぶんの詳細度は残すので、親テーマの p{} などには勝つ。 */
.story :where(img) { display: block; max-width: 100%; height: auto; }
.story :where(p, ul, h1, h2, figure) { margin: 0; }
.story :where(ul) { padding: 0; list-style: none; }

.story-container {
	width: 100%;
	max-width: calc(var(--sb-container) + var(--sb-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--sb-gutter);
}

/* ---------- 共通パーツ ---------- */
.story-eyebrow {
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: var(--sb-ls-wide);
	color: var(--sb-accent);
}

/* ラベル画像 + 罫 + 見出し（PROFILE / INSIGHT） */
.story-headline__label { width: auto; height: 51px; }
.story-headline__rule {
	display: block;
	width: 67px;
	height: 2px;
	margin-top: 15px;
	background: var(--sb-accent);
}
.story-headline__title {
	margin-top: 15px;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: var(--sb-ls-wide);
	color: var(--sb-white);
}

/* 黄色い縦バー付き見出し（works セクション） */
.story-marked {
	position: relative;
	padding-left: 46px;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: var(--sb-ls-wide);
	color: var(--sb-accent);
}
.story-marked::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 71px;
	background: var(--sb-accent);
}

/* 本文 */
.story-prose {
	font-family: var(--sb-gothic);
	font-size: var(--sb-body-size);
	line-height: var(--sb-lh-body);
	letter-spacing: var(--sb-ls-body);
	color: var(--sb-white);
}
.story-prose p + p { margin-top: 2em; }

/* ============================================================
   HERO
   ============================================================ */
.story-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--sb-hero-top) 0%, var(--sb-hero-bottom) 100%);
}

.story-hero__media {
	position: absolute;
	top: 0;
	/* ビューポート右端ではなくコンテンツ幅(1250px)の右端に揃える。
	   1440pxでは right:95px となりFigmaと一致し、広い画面でも
	   テキスト列との位置関係が崩れない。 */
	right: max(var(--sb-gutter), calc(50% - var(--sb-container) / 2));
	width: 616px;
	height: 100%;
}
.story-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* 画像の左端を背景へ溶かしつつ、文字が乗っても読めるようにする */
.story-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(20, 20, 20, .92) 0%,
		rgba(20, 20, 20, .45) 22%,
		rgba(20, 20, 20, 0) 52%
	);
}

/* シャドウは控えめに。明朝の細い線が滲まない程度に留める */
.story-hero__inner :where(p) { text-shadow: var(--sb-shadow-strong); }
.story-hero__logo img { filter: drop-shadow(0 2px 16px rgba(0, 0, 0, .6)); }

.story-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 762px;
	padding-block: 52px 62px;
}

.story-hero__logo { margin-top: 28px; }
.story-hero__logo img { width: 411px; }

.story-hero__catch {
	margin-top: 75px;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 40px;
	line-height: var(--sb-lh-display);
	letter-spacing: var(--sb-ls-wide);
}
.story-hero__catch span { display: block; }
.story-hero__catch .is-accent { color: var(--sb-accent); }

.story-hero__identity { margin-top: auto; }

.story-hero__number {
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 96px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--sb-white);
}
.story-hero__name {
	margin-top: 20px;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	letter-spacing: var(--sb-ls-wide);
}
.story-hero__romaji {
	margin-top: 20px;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: var(--sb-ls-wide);
}

/* ============================================================
   PROFILE
   ============================================================ */
.story-section { position: relative; }

.story-profile {
	background: var(--sb-black);
	padding-block: 104px 167px;
}

.story-profile__body {
	display: grid;
	grid-template-columns: 386px minmax(0, 586px);
	column-gap: 63px;
	margin-top: 42px;
}
.story-profile__figure img { width: 100%; }

/* ============================================================
   INSIGHT
   ============================================================ */
.story-insight {
	/* 1440px固定の背景画像の左右端の位置。1440px以下では 0 になりフェードも消える */
	--story-edge: max(0px, calc(50% - 720px));
	/* フェード幅は黒地の広さに追従させ、180pxで頭打ちにする */
	--story-fade: min(calc(var(--story-edge) * 2.5), calc(var(--story-edge) + 180px));

	/* Figmaのフレーム実寸。背景を固定サイズにするため高さも合わせる */
	min-height: 968px;
	padding-block: 79px 140px;
	background-color: var(--sb-black);
	background-image: var(--story-insight-bg, none);
	background-size: 1440px 968px; /* 画面幅で拡大しない */
	background-position: center top;
	background-repeat: no-repeat;
}

/* 背景画像の左右端と下端を黒へ溶かす */
.story-insight::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to right, var(--sb-black), var(--sb-black) var(--story-edge), rgba(0, 0, 0, 0) var(--story-fade)),
		linear-gradient(to left,  var(--sb-black), var(--sb-black) var(--story-edge), rgba(0, 0, 0, 0) var(--story-fade)),
		linear-gradient(to top,   var(--sb-black), rgba(0, 0, 0, 0) 160px);
}
.story-insight > .story-container { position: relative; z-index: 1; }

/* 背景写真の明るい部分に文字が重なったときの保険 */
.story-insight :where(p, h2) { text-shadow: var(--sb-shadow-soft); }

.story-insight__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 495px;
	column-gap: 80px;
	row-gap: 32px;
	align-items: start;
	margin-top: 46px;
}
.story-insight__catch { grid-column: 1; }
.story-insight__body > .story-prose { grid-column: 1; }

/* Figmaでは動画は見出しではなく本文と同じラインに乗る（ともに y=354） */
.story-insight__media { grid-column: 2; grid-row: 2; }
.story-insight__body--no-catch .story-insight__media { grid-row: 1; }

.story-insight__catch {
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 32px;
	line-height: var(--sb-lh-display);
	letter-spacing: var(--sb-ls-wide);
}
.story-insight__catch .is-accent { color: var(--sb-accent); }

/* 動画サムネイル + 再生ボタン */
.story-movie {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 20px;
	overflow: hidden;
	background: none;
	cursor: pointer;
}
.story-movie__thumb { width: 100%; }
.story-movie__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84px;
	height: 84px;
	transform: translate(-50%, -50%);
	transition: transform .3s ease, opacity .3s ease;
}
.story-movie:hover .story-movie__play,
.story-movie:focus-visible .story-movie__play {
	transform: translate(-50%, -50%) scale(1.08);
}
.story-movie:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 4px; }

/* ============================================================
   OFFICE / WORKS
   ============================================================ */
.story-office {
	background: var(--sb-black);
	padding-block: 216px 200px;
	overflow: hidden;
}

.story-office__feature {
	position: absolute;
	top: 90px;
	/* コンテンツ右端から28pxはみ出す配置（Figma: x=892, w=481） */
	right: max(0px, calc(50% - var(--sb-container) / 2 - 28px));
	width: 481px;
	height: auto;
	pointer-events: none;
}

.story-office__text {
	max-width: 677px;
	margin-top: 40px;
}

/* 事務所情報（サイト・所在地・電話） */
.story-office__info {
	max-width: 677px;
	margin: 40px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .22);
}
.story-office__row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 20px;
	padding-block: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.story-office__row dt {
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.9;
	letter-spacing: var(--sb-ls-wide);
	color: var(--sb-accent);
}
.story-office__row dd {
	margin: 0;
	min-width: 0;
	font-size: var(--sb-body-size);
	line-height: 1.9;
	letter-spacing: var(--sb-ls-body);
	overflow-wrap: anywhere;
}
.story-office__zip { margin-right: .6em; }

.story-office__row a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .38);
	transition: color .3s ease, border-color .3s ease;
}
/* 親テーマの a:hover(0-1-1) に勝つよう :hover 側(0-2-1)で明示する */
.story-office__row a:hover,
.story-office__row a:focus-visible {
	color: var(--sb-accent);
	border-color: var(--sb-accent);
}

/* 外部リンクを示す矢印 */
.story-office__ext {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 9px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(-45deg) translateY(2px);
}

.story-grid {
	display: grid;
	margin-top: 84px;
}
.story-grid__item img { width: 100%; object-fit: cover; }

/* 事務所写真 4列 */
.story-grid--office {
	grid-template-columns: repeat(4, 1fr);
	gap: 34px;
}
.story-grid--office .story-grid__item img { aspect-ratio: 286 / 176; }

/* 代表作 3列 */
.story-grid--works {
	grid-template-columns: repeat(3, 1fr);
	column-gap: 95px;
	row-gap: 62px;
}
.story-grid--works .story-grid__item img { aspect-ratio: 347 / 318; }

.story-grid__caption {
	margin-top: 16px;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: var(--sb-ls-mid);
	color: var(--sb-white);
}

.story-awards {
	margin-top: 32px;
	font-family: var(--sb-mincho);
	font-weight: 400;
	font-size: 20px;
	line-height: var(--sb-lh-list);
	letter-spacing: var(--sb-ls-mid);
	color: var(--sb-white);
}
.story-awards li::before { content: "・"; }

/* 見出し前後の間隔（.story-marked が連続セクションを仕切る） */
.story-grid + .story-marked,
.story-awards + .story-marked { margin-top: 122px; }

/* ============================================================
   前後のエピソード / 一覧へ
   ============================================================ */
.story-nav {
	background: var(--sb-black);
	padding-block: 0 96px;
}
.story-nav__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	padding-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, .28);
}
/* 「次」しか無いときは右側に寄せる */
.story-nav__item--next:only-child { grid-column: 2; }

.story-nav__link {
	display: block;
	padding: 20px 24px;
	border: 1px solid rgba(255, 255, 255, .22);
	color: var(--sb-white);
	text-decoration: none;
	transition: border-color .3s ease, background-color .3s ease;
}
.story-nav__link:hover,
.story-nav__link:focus-visible {
	border-color: var(--sb-accent);
	background: rgba(255, 255, 255, .04);
	color: var(--sb-white);
}
.story-nav__link:hover .story-nav__no,
.story-nav__link:focus-visible .story-nav__no { color: var(--sb-accent); }
.story-nav__link:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 3px; }

.story-nav__dir {
	display: block;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: var(--sb-ls-wide);
	color: var(--sb-accent);
}
.story-nav__dir::before { content: "← "; }
.story-nav__item--next .story-nav__dir { text-align: right; }
.story-nav__item--next .story-nav__dir::before { content: none; }
.story-nav__item--next .story-nav__dir::after { content: " →"; }

.story-nav__body {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 16px;
}
.story-nav__item--next .story-nav__body { flex-direction: row-reverse; }

.story-nav__thumb {
	flex: 0 0 110px;
	border-radius: 8px;
	overflow: hidden;
}
.story-nav__thumb img {
	width: 100%;
	aspect-ratio: 222 / 133;
	object-fit: cover;
}
.story-nav__meta { min-width: 0; }
.story-nav__item--next .story-nav__meta { text-align: right; }

.story-nav__no {
	display: block;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
}
.story-nav__name {
	display: block;
	margin-top: 6px;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: var(--sb-ls-wide);
}

.story-nav__index { margin-top: 48px; text-align: center; }
.story-nav__index a {
	display: inline-grid;
	place-items: center;
	min-width: 300px;
	height: 72px;
	padding-inline: 32px;
	border: 1px solid var(--sb-accent);
	background-image: linear-gradient(to right, var(--sb-accent) 0, var(--sb-accent) 100%);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	color: var(--sb-accent);
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: var(--sb-ls-wide);
	text-decoration: none;
	transition: background-size .5s cubic-bezier(.65, 0, .35, 1), color .3s ease .05s;
}
/* エピソードのボタンと同じく、左から色が満ちる */
.story-nav__index a:hover,
.story-nav__index a:focus-visible {
	background-size: 100% 100%;
	color: #090808;
}

/* ============================================================
   FOOTER
   ============================================================ */
.story-footer {
	background: var(--sb-black);
	padding-block: 104px 51px;
}
.story-footer__logo { margin-top: 56px; }
.story-footer__logo img { width: 387px; }
.story-footer__copy {
	margin-top: 89px;
	text-align: center;
	font-family: var(--sb-gothic);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: var(--sb-ls-wide);
	color: var(--sb-white);
}

/* ============================================================
   動画モーダル
   ============================================================ */
.story-modal[hidden] { display: none; }
.story-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: var(--sb-gutter);
}
.story-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .88); }
.story-modal__frame { position: relative; width: min(1120px, 100%); }
.story-modal__player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.story-modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.story-modal__close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: var(--sb-white);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

/* ============================================================
   トップページ（一覧）— Figma Frame 2
   行送りは Figma の % 指定 × 2.0（小塚書体の既定行送り）で算出
   ============================================================ */

/* ---------- HERO ---------- */
.story-tophero {
	position: relative;
	overflow: hidden;
	background: var(--sb-black);
}
.story-tophero__media { position: absolute; inset: 0; overflow: hidden; }

/* スライドは横に並べず重ねて置き、不透明度で入れ替える。
   表示中の画像はゆっくり拡大し続ける（Ken Burns）。 */
.story-tophero__track {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.story-tophero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* この秒数は story.js の FADE と揃えること */
	transition: opacity 1.4s ease;
	pointer-events: none;
	will-change: opacity;
}
.story-tophero__slide.is-active {
	opacity: 1;
	z-index: 2;
	pointer-events: auto;
}
/* 退場中は不透明のまま下に残す。2枚を同時に薄くすると
   途中で背景の黒が透けて明るさが落ち、ちらついて見えるため。
   上に重なる新しい画像が不透明になりきってから消える。 */
.story-tophero__slide.is-leaving {
	opacity: 1;
	z-index: 1;
	transition: none;
}
.story-tophero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	transform: scale(1);
	will-change: transform;
	backface-visibility: hidden;
}
.story-tophero__slide.is-active img {
	animation: sb-kenburns 6s linear forwards;
}

@keyframes sb-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}
/* Figma: 左端の黒 → 右端 rgba(0,0,0,.2) */
.story-tophero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .2) 100%);
}

/* 各スライドから記事へのリンク */
.story-tophero__chip {
	position: absolute;
	z-index: 2;
	bottom: 104px;
	right: max(var(--sb-gutter), calc(50% - var(--sb-container) / 2));
	display: inline-flex;
	align-items: baseline;
	gap: 14px;
	padding: 16px 24px;
	border: 1px solid rgba(255, 255, 255, .45);
	/* backdrop-filter はフェード中に毎フレーム再合成されて重いため使わない */
	background: rgba(0, 0, 0, .5);
	color: var(--sb-white);
	text-decoration: none;
	transition: background-color .3s ease, border-color .3s ease;
}
.story-tophero__chip:hover,
.story-tophero__chip:focus-visible {
	background: rgba(0, 0, 0, .72);
	border-color: var(--sb-accent);
	/* 親テーマの a:hover(0-1-1) に勝つため :hover 側(0-2-0)で明示する */
	color: var(--sb-accent);
}
.story-tophero__chip-no {
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: var(--sb-accent);
}
.story-tophero__chip-name {
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	letter-spacing: var(--sb-ls-wide);
}
.story-tophero__chip-arrow {
	align-self: center;
	width: 9px;
	height: 9px;
	border-top: 1px solid var(--sb-accent);
	border-right: 1px solid var(--sb-accent);
	transform: rotate(45deg);
	transition: transform .3s ease;
}
.story-tophero__chip:hover .story-tophero__chip-arrow { transform: rotate(45deg) translate(3px, -3px); }

/* インジケーター */
.story-tophero__dots {
	position: absolute;
	z-index: 4;
	/* ボタンの高さ28pxの中央にバーが来るので、バーの見た目の位置が
	   設計値(下から約64px)になるよう bottom を下げてある */
	bottom: 50px;
	right: max(var(--sb-gutter), calc(50% - var(--sb-container) / 2));
	display: flex;
	gap: 10px;
}
.story-tophero__dots:empty { display: none; }
/* 見た目は細いバーのまま、ボタン自体は高さを持たせて押しやすくする。
   バーは ::before で描き、上下の余白が透明な当たり判定になる。 */
.story-tophero__dot {
	display: grid;
	align-items: center;
	width: 40px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.story-tophero__dot::before {
	content: "";
	display: block;
	height: 3px;
	background: rgba(255, 255, 255, .4);
	transition: background-color .3s ease, height .3s ease;
}
.story-tophero__dot:hover::before { background: rgba(255, 255, 255, .75); }
.story-tophero__dot[aria-selected="true"]::before {
	height: 4px;
	background: var(--sb-accent);
}
.story-tophero__dot:focus-visible { outline: 2px solid var(--sb-white); outline-offset: 2px; }

.story-tophero__inner {
	position: relative;
	/* 重ね順: 退場スライド1 < 表示中スライド2 < この層3 < インジケーター4 */
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 762px;
	padding-block: 39px 62px;
	/* スライド内のリンクチップを押せるよう、この層はクリックを透過させる。
	   中身（ロゴ・コピー）は非対話なので支障はない。 */
	pointer-events: none;
}
.story-tophero__inner :where(p) { text-shadow: var(--sb-shadow-strong); }

.story-tophero__logo { margin-top: 34px; }
.story-tophero__logo img {
	width: 565px;
	filter: drop-shadow(0 2px 16px rgba(0, 0, 0, .6));
}

.story-tophero__catch {
	margin-top: 33px;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 64px;
	line-height: 1.328;          /* Figma 66.39% */
	letter-spacing: var(--sb-ls-wide);
}
/* [ ] による強調が入れ子の span になるため、行の block 化は直下だけに限定する */
.story-tophero__catch > span { display: block; }
.story-tophero__catch .is-accent { color: var(--sb-accent); }

.story-tophero__lead {
	margin-top: 24px;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: var(--sb-ls-wide);
}

/* ---------- ABOUT ---------- */
.story-about {
	background: var(--sb-black);
	padding-block: 131px 84px;
}
.story-about .story-headline__label { height: 49px; }

.story-about__body {
	display: grid;
	grid-template-columns: 460px minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
	margin-top: 99px;
}
.story-about__catch {
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.591;          /* Figma 79.54% */
	letter-spacing: 0.16em;      /* Figma 6.4px / 40px */
}
.story-about__catch > span { display: block; }
.story-about__catch .is-accent { color: var(--sb-accent); }

.story-about__text { max-width: 560px; }

/* ---------- EPISODES ---------- */
.story-episodes {
	background: var(--sb-black);
	padding-block: 124px 154px;
}
.story-episodes .story-headline__label { height: 71px; }

.story-episodes__list { margin-top: 60px; }

.story-episode {
	position: relative;
	display: flex;
	align-items: center;
	gap: 49px;
	padding-block: 30px;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
}

.story-episode__thumb {
	flex: 0 0 222px;
	border-radius: 12px;
	overflow: hidden;
}
.story-episode__thumb img {
	width: 100%;
	aspect-ratio: 222 / 133;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.story-episode__body {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}
.story-episode__no {
	flex: 0 0 auto;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.328;
}
.story-episode__text { min-width: 0; }

.story-episode__catch {
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.328;          /* Figma 66.39% */
	letter-spacing: var(--sb-ls-wide);
}
.story-episode__catch > span { display: block; }
.story-episode__catch .is-accent { color: var(--sb-accent); }

.story-episode__name {
	margin-top: 16px;
	font-family: var(--sb-gothic);
	font-size: 16px;
	line-height: 1.627;          /* Figma 81.365% */
	letter-spacing: var(--sb-ls-wide);
}
.story-episode__name span { display: block; }

/* ボタン。::after でカード全体をクリック領域にするため、この要素自身は
   position を持てない（持つと ::after がボタン内に縮む）。
   そのため塗りの演出は疑似要素ではなく background-size で作っている。 */
.story-episode__link {
	flex: 0 0 270px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 76px;
	border: 1px solid var(--sb-accent);
	background-color: var(--sb-accent);
	background-image: linear-gradient(to right, #0a0a0a 0, #0a0a0a 100%);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	color: #090808;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: var(--sb-ls-wide);
	text-decoration: none;
	transition: background-size .5s cubic-bezier(.65, 0, .35, 1), color .3s ease .05s;
}
.story-episode__link::after { content: ""; position: absolute; inset: 0; }

.story-episode__link-arrow {
	width: 9px;
	height: 9px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

/* 黒が左から満ちて、文字と枠が黄色に反転する */
.story-episode:hover .story-episode__link,
.story-episode__link:focus-visible {
	background-size: 100% 100%;
	color: var(--sb-accent);
}
.story-episode:hover .story-episode__link-arrow,
.story-episode__link:focus-visible .story-episode__link-arrow {
	transform: rotate(45deg) translate(4px, -4px);
}
.story-episode:hover .story-episode__thumb img { transform: scale(1.06); }
.story-episode__link:focus-visible { outline: 2px solid var(--sb-white); outline-offset: 3px; }

.story-episodes__empty {
	margin-top: 60px;
	font-size: var(--sb-body-size);
	line-height: var(--sb-lh-body);
	letter-spacing: var(--sb-ls-body);
}

/* ページ送り */
.story-index .pagination,
.story-index .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 56px;
}
.story-index .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 10px;
	border: 1px solid rgba(255, 255, 255, .3);
	color: var(--sb-white);
	font-size: 14px;
	letter-spacing: var(--sb-ls-mid);
	text-decoration: none;
}
.story-index .page-numbers.current,
.story-index .page-numbers:hover {
	border-color: var(--sb-accent);
	background: var(--sb-accent);
	color: #090808;
}

/* スクリーンリーダー用。親テーマに無い場合の保険 */
.story .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   ライトボックス
   ============================================================ */

/* 拡大トリガー（グリッド内の画像ボタン） */
.story-zoom {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
}
.story-zoom img {
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.story-zoom::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.story-zoom:hover img,
.story-zoom:focus-visible img { transform: scale(1.06); }
.story-zoom:hover::after,
.story-zoom:focus-visible::after { opacity: 1; }
.story-zoom:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 3px; }

/* オーバーレイ */
.story-lightbox[hidden] { display: none; }
.story-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: clamp(20px, 5vw, 64px);
}
.story-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .94);
	cursor: zoom-out;
}
.story-lightbox__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
}
.story-lightbox__figure {
	margin: 0;
	max-width: 100%;
	min-height: 0;
}
.story-lightbox__figure img {
	max-width: min(1200px, 100%);
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: opacity .25s ease;
}
.story-lightbox.is-loading .story-lightbox__figure img { opacity: .25; }

.story-lightbox__caption {
	margin-top: 20px;
	text-align: center;
	font-family: var(--sb-mincho);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: var(--sb-ls-mid);
	color: var(--sb-white);
}
.story-lightbox__caption:empty { display: none; }

.story-lightbox__counter {
	margin-top: 12px;
	font-family: var(--sb-gothic);
	font-size: 12px;
	letter-spacing: var(--sb-ls-wide);
	color: var(--sb-accent);
}

/* 前後ナビ（矢印はCSSで作画） */
.story-lightbox__nav {
	position: absolute;
	top: 50%;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.story-lightbox__nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	border-top: 2px solid var(--sb-white);
	border-right: 2px solid var(--sb-white);
	transition: border-color .2s ease;
}
.story-lightbox__nav--prev { left: -76px; }
.story-lightbox__nav--next { right: -76px; }
.story-lightbox__nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.story-lightbox__nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.story-lightbox__nav:hover::before,
.story-lightbox__nav:focus-visible::before { border-color: var(--sb-accent); }
.story-lightbox__nav:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }
.story-lightbox__nav[hidden] { display: none; }

.story-lightbox__close {
	position: absolute;
	top: -56px;
	right: 0;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--sb-white);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease;
}
.story-lightbox__close:hover,
.story-lightbox__close:focus-visible { color: var(--sb-accent); }

@media (max-width: 900px) {
	.story-lightbox__nav--prev { left: 0; }
	.story-lightbox__nav--next { right: 0; }
	.story-lightbox__nav::before { border-color: var(--sb-accent); }
	.story-lightbox__figure img { max-height: 66vh; }
	.story-lightbox__caption { font-size: 13px; margin-top: 16px; }
	.story-lightbox__close { top: -50px; }
}

/* ============================================================
   スクロールリビール
   ============================================================ */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.story *,
	.story *::before,
	.story *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	[data-reveal] { opacity: 1; transform: none; }
	/* 拡大とフェードを止め、切り替えだけ行う */
	.story-tophero__slide.is-active img { animation: none; }
	.story-tophero__slide img { transform: none !important; }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1280px) {
	.story-tophero__catch { font-size: 54px; }
	.story-about__body { grid-template-columns: 400px minmax(0, 1fr); column-gap: 40px; }
	.story-episode { gap: 32px; }
	.story-episode__link { flex-basis: 230px; }

	/* right は max() が --sb-gutter で下限を持つので上書き不要 */
	.story-hero__media { width: 46%; }
	.story-office__feature { width: 34%; }
	.story-insight__body { grid-template-columns: minmax(0, 1fr) 40%; column-gap: 48px; }
}

@media (max-width: 1024px) {
	.story-tophero__inner { min-height: 640px; padding-block: 32px 48px; }
	.story-tophero__logo img { width: 420px; }
	.story-tophero__catch { font-size: 44px; margin-top: 28px; }

	.story-about { padding-block: 88px 64px; }
	.story-about__body { grid-template-columns: 1fr; row-gap: 40px; margin-top: 56px; }
	.story-about__catch { font-size: 34px; }
	.story-about__text { max-width: none; }

	.story-episodes { padding-block: 88px 96px; }
	.story-episode { flex-wrap: wrap; gap: 28px; }
	.story-episode__body { flex: 1 1 300px; }
	.story-episode__link { flex: 0 0 200px; height: 64px; font-size: 17px; }

	/* 1440px固定だと左右が切れすぎるので、ここから先はcoverに戻す */
	.story-insight { min-height: 0; background-size: cover; }

	.story-hero__inner { min-height: 640px; padding-block: 40px 48px; }
	.story-hero__logo img { width: 320px; }
	.story-hero__catch { font-size: 32px; margin-top: 56px; }
	.story-hero__number { font-size: 72px; }
	.story-hero__name { font-size: 32px; }

	.story-profile { padding-block: 80px 100px; }
	.story-profile__body { grid-template-columns: 320px minmax(0, 1fr); column-gap: 40px; }

	.story-office { padding-block: 140px 120px; }
	.story-grid--office { grid-template-columns: repeat(3, 1fr); }
	.story-grid--works { column-gap: 48px; row-gap: 48px; }
	.story-grid + .story-marked,
	.story-awards + .story-marked { margin-top: 88px; }
}

@media (max-width: 767px) {
	/* 画面が狭いぶん字送りをさらに詰める */
	:root { --sb-gutter: 20px; --sb-ls-body: 0.04em; }

	/* hero: 画像は背景として敷き、テキストを重ねる。
	   opacity で薄めると擬似要素のスクリムまで薄くなるため、黒を重ねる方式にする */
	.story-hero__media {
		position: absolute;
		inset: 0;
		width: 100%;
	}
	.story-hero__media::after {
		background: linear-gradient(
			to bottom,
			rgba(10, 10, 10, .62) 0%,
			rgba(10, 10, 10, .78) 100%
		);
	}
	.story-hero__inner {
		min-height: 560px;
		padding-block: 32px 40px;
	}
	.story-hero__logo { margin-top: 20px; }
	.story-hero__logo img { width: min(260px, 78%); }
	.story-hero__catch { margin-top: 40px; font-size: 26px; }
	.story-hero__number { font-size: 56px; }
	.story-hero__name { font-size: 26px; }
	.story-hero__romaji { font-size: 13px; margin-top: 14px; }

	.story-eyebrow { font-size: 12px; letter-spacing: var(--sb-ls-mid); }

	/* トップページ */
	.story-tophero__inner { min-height: 540px; padding-block: 28px 40px; }
	.story-tophero__logo { margin-top: 20px; }
	.story-tophero__logo img { width: min(300px, 86%); }
	.story-tophero__catch { margin-top: 28px; font-size: 30px; }
	.story-tophero__lead { margin-top: 20px; font-size: 13px; }
	.story-tophero__chip {
		bottom: 76px;
		left: var(--sb-gutter);
		right: var(--sb-gutter);
		justify-content: center;
		gap: 10px;
		padding: 12px 16px;
	}
	.story-tophero__chip-no { font-size: 16px; }
	.story-tophero__chip-name { font-size: 13px; }
	.story-tophero__dots { bottom: 26px; left: var(--sb-gutter); right: auto; gap: 8px; }
	.story-tophero__dot { width: 36px; height: 36px; }
	.story-tophero__media::after {
		background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .85) 100%);
	}

	.story-about { padding-block: 56px 48px; }
	.story-about .story-headline__label { height: 38px; }
	.story-about__body { row-gap: 28px; margin-top: 32px; }
	.story-about__catch { font-size: 24px; letter-spacing: 0.12em; }

	.story-episodes { padding-block: 56px 64px; }
	.story-episodes .story-headline__label { height: 52px; }
	.story-episodes__list { margin-top: 32px; }
	.story-episode { gap: 20px; padding-block: 24px; }
	.story-episode__thumb { flex: 0 0 120px; }
	.story-episode__body { flex: 1 1 100%; gap: 10px; order: 3; }
	.story-episode__no { font-size: 28px; }
	.story-episode__catch { font-size: 18px; }
	.story-episode__name { margin-top: 12px; font-size: 13px; }
	.story-episode__link { flex: 1 1 auto; height: 56px; font-size: 15px; gap: 10px; }

	.story-headline__label { height: 40px; }
	.story-headline__title { font-size: 17px; }

	.story-marked { padding-left: 24px; font-size: 19px; }
	.story-marked::before { height: 100%; }

	.story-profile { padding-block: 56px 64px; }
	.story-profile__body { grid-template-columns: 1fr; row-gap: 28px; margin-top: 28px; }

	.story-insight { padding-block: 56px 72px; }
	.story-insight__body { grid-template-columns: 1fr; row-gap: 28px; margin-top: 28px; }
	.story-insight__media { grid-column: 1; grid-row: auto; }
	.story-insight__catch { font-size: 22px; }

	.story-office { padding-block: 72px 72px; }
	.story-office__feature { position: static; width: 70%; margin: 0 0 32px auto; }
	.story-office__text { margin-top: 24px; }
	.story-office__info { margin-top: 28px; }
	.story-office__row { grid-template-columns: 1fr; gap: 4px; padding-block: 14px; }
	.story-office__row dt { font-size: 12px; }

	.story-grid { margin-top: 40px; }
	.story-grid--office { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.story-grid--works { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 32px; }
	.story-grid__caption { font-size: 12px; margin-top: 10px; }
	.story-awards { font-size: 15px; margin-top: 20px; }
	.story-grid + .story-marked,
	.story-awards + .story-marked { margin-top: 56px; }

	/* 前後のエピソードは縦積みに。矢印の向きだけ残して左寄せに統一する */
	.story-nav { padding-block: 0 56px; }
	.story-nav__list { grid-template-columns: 1fr; gap: 12px; padding-top: 32px; }
	.story-nav__item--next:only-child { grid-column: 1; }
	.story-nav__link { padding: 16px; }
	.story-nav__body { gap: 14px; margin-top: 12px; }
	.story-nav__item--next .story-nav__body { flex-direction: row; }
	.story-nav__item--next .story-nav__dir,
	.story-nav__item--next .story-nav__meta { text-align: left; }
	.story-nav__thumb { flex: 0 0 84px; }
	.story-nav__no { font-size: 20px; }
	.story-nav__name { font-size: 14px; }
	.story-nav__index { margin-top: 32px; }
	.story-nav__index a { min-width: 0; width: 100%; height: 60px; font-size: 15px; }

	.story-footer { padding-block: 56px 32px; }
	.story-footer__logo { margin-top: 28px; }
	.story-footer__logo img { width: min(260px, 78%); }
	.story-footer__copy { margin-top: 48px; font-size: 11px; letter-spacing: var(--sb-ls-mid); }

	.story-modal__close { top: -44px; }
}