@charset "UTF-8";

/* =========================================================================
   Shinsuke Ikeuchi — design tokens
   -------------------------------------------------------------------------
   すべて Figma「池内先生構築用 > TOP > 01」(1440x4860) の実測値。
   字間は全テキストで一律 5%(= 0.05em)だったため --ls に集約している。
   ========================================================================= */

:root {
	/* --- color(Figma実測)--- */
	--c-white: #ffffff;
	--c-f9: #f9f9f9; /* i-gray01: 暗背景上の基本文字色 */
	--c-c4: #c4c4c4; /* 著作権表記 */
	--c-86: #868686; /* 言語切替の非選択 */
	--c-7f: #7f7f7f; /* ハンバーガーの線 */
	--c-87: #878787; /* メニューの補助文字・罫線 */
	--c-66: #666666; /* ナビのインデックス番号 */
	--c-3c: #3c3c3c; /* 本文(明るい背景の上) */
	--c-ink: #191919; /* フッター背景 / 明るい背景の上の見出し */
	--scrim: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0.5) 170px, rgba(0, 0, 0, 0.22) 280px, rgba(0, 0, 0, 0.06) 380px, rgba(0, 0, 0, 0) 460px); /* 動画に重ねる暗さ。文言のある下部だけ落とし、上半分は素の明るさを残す */

	/* --- typography --- */
	--font: "Geist", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
		"Noto Sans JP", sans-serif;
	--font-mono-ui: "Poppins", var(--font);
	--ls: 0.05em;

	/* --- layout(1440基準)--- */
	--hd-h: 96px;
	--pad-x: 40px; /* ヘッダー左右 */
	--edge: 80px; /* セクション内側の余白 */
	--hero-right: 160px; /* ヒーロー右端からの距離 */
}

/* =========================================================================
   Reset
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
	/* Figmaの字間は全テキストで一律 5%。em は各要素の font-size に対して
	   解決させる必要があるので、body ではなく全要素に指定する
	   (body に置くと計算済みの px が継承され、大きな文字で字間が足りなくなる)。 */
	letter-spacing: var(--ls);
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #000;
	color: var(--c-f9);
	font-family: var(--font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3,
p,
figure {
	margin: 0;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	letter-spacing: inherit;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--c-ink);
	color: var(--c-f9);
	padding: 12px 20px;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* =========================================================================
   スクロールスナップ
   Figmaコメントの指定(fullPage.js)を、依存ライブラリなしのCSSネイティブで実現する。
   TOP以外のページでは無効。
   ========================================================================= */

/* -------------------------------------------------------------------------
   TOP: キューブ回転
   参考 sdgs.me は Swiper の effect:'cube' / direction:'vertical'。
   同じ見え方を外部ライブラリなしで実装している。

   面の並べ方:
     face n  … rotateX(-n*90deg) translateZ(half) → n番目の面が「下」に付く
               (rotateX(-90deg) で +Z が +Y すなわち下方向へ倒れる)
     cube    … translateZ(-half) rotateX(i*90deg) → i番目の面が正面に来る
   スクロールで i が増えると、次の面が下から回り上がってくる。

   JSが html.cube-ready を付けたときだけ立体になる。付かない場合
   (JS無効 / prefers-reduced-motion)は通常の縦スクロールとして読める。
   ------------------------------------------------------------------------- */

html.cube-ready,
html.cube-ready body {
	height: 100%;
	overflow: hidden;
}

html.cube-ready .stage {
	--half: 50svh;
	position: fixed;
	inset: 0;
	perspective: 1400px;
	overflow: hidden;
}

html.cube-ready .cube {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--half) * -1)) rotateX(calc(var(--i, 0) * 90deg));
	transition: transform 1s cubic-bezier(0.72, 0, 0.16, 1);
}

html.cube-ready .face {
	position: absolute;
	inset: 0;
	height: 100%;
	min-height: 0;
	backface-visibility: hidden;
	transform: rotateX(calc(var(--n, 0) * -90deg)) translateZ(var(--half));
	/* 隣接していない面は描画しない(動画を積むため負荷が大きい) */
	visibility: hidden;
}

html.cube-ready .face.is-near {
	visibility: visible;
}

/* -------------------------------------------------------------------------
   フッター面へ回り込むとき、ヘッダー左上のロゴをフッターの大きなロゴへ
   移動・拡大させて入れ替える(同じワードマークなので1つが動いて見える)。
   右上の言語切替とMENUはそのまま残す。
   実際の位置とスケールはJSが算出して transform に流し込む。
   ------------------------------------------------------------------------- */

/*
 * will-change は付けない。合成レイヤーが固定されると拡大後も低解像度の
 * テクスチャが使われ、着地したロゴがぼやけることがある。
 */
html.cube-ready .hd__logo {
	transform-origin: left top;
}

/*
 * ⚠ フッター面(.ft)自身に overflow を付けないこと。
 *
 * `.ft` はキューブの面で 3D変換がかかっている。3D変換された要素に
 * `overflow: auto`(visible以外)を付けると、Chromeの**クリック判定が
 * 表示位置とずれる**。実測では、フッター面の 01〜04 のリンクを押しても
 * すべて `.stage` に吸われて反応しなかった(2026-08-18に発覚・修正)。
 *
 * 1画面に収まらない場合のスクロールは、3D変換のかかっていない
 * 内側のラッパー(.ft__inner)に持たせる。
 */
html.cube-ready .ft__inner {
	max-height: 100%;
	overflow-y: auto;
}

/*
 * フッター面を1画面に収めるため、画面の高さに応じて縦の間隔と字送りを詰める。
 * SPは専用デザイン(01_sp)の実寸を使うので対象外にしている。
 */
@media (min-width: 768px) {
	html.cube-ready .ft {
		padding: clamp(32px, 9vh, 120px) var(--edge);
	}

	html.cube-ready .ft__nav {
		gap: clamp(16px, 4.2vh, 48px);
		margin-top: clamp(24px, 7vh, 80px);
	}

	html.cube-ready .ft__meta {
		margin-top: clamp(20px, 5vh, 80px);
	}

	html.cube-ready .ft__label {
		font-size: clamp(24px, 4.6vh, 48px);
	}

	html.cube-ready .ft__logo-line svg {
		width: clamp(280px, 50vw, 728px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.cube-ready .cube {
		transition: none;
	}
}

/* =========================================================================
   Header  (Figma: hd 1440x96 / 背景は透過 / 左右padding 40 / 行は18pxを上下中央)
   ========================================================================= */

.hd {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--hd-h);
	padding: 0 var(--pad-x);
	color: var(--c-f9);
}

.hd__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.hd__logo {
	display: block;
	line-height: 0;
}

.hd__logo svg {
	width: 182px;
	height: auto;
}

.hd__right {
	display: flex;
	align-items: center;
	gap: 40px;
}

/* --- 言語切替 EN | JP --- */

.lang {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 18px;
}

.lang__item {
	color: var(--c-86);
	transition: color 0.3s ease;
}

.lang__item.is-current,
.lang__item:hover {
	color: var(--c-f9);
}

.lang__sep {
	display: block;
	width: 1px;
	height: 7px;
	background: var(--c-f9);
}

/* --- MENU / CLOSE --- */

.menu-btn {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 12px;
	line-height: 18px;
	color: var(--c-f9);
}

/* MENU と CLOSE を重ねて入れ替える。右端揃えのまま幅が動かないよう固定幅。 */
.menu-btn__label {
	position: relative;
	display: block;
	width: 41px;
	height: 18px;
	text-align: right;
}

.menu-btn__t {
	display: block;
	transition: opacity 0.25s ease;
}

.menu-btn__t--close {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.menu-btn[aria-expanded="true"] .menu-btn__t--open {
	opacity: 0;
}

.menu-btn[aria-expanded="true"] .menu-btn__t--close {
	opacity: 1;
}

.menu-btn__bars {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 12px;
	height: 6px;
	flex: none;
}

.menu-btn__bars span {
	display: block;
	width: 12px;
	height: 1px;
	background: var(--c-7f);
	transition: transform 0.35s ease, background-color 0.35s ease;
}

/* 開いている状態は8x8相当の×になる(Figma: Group 1171275726 / #878787) */
.menu-btn[aria-expanded="true"] .menu-btn__bars span {
	background: var(--c-87);
}

.menu-btn[aria-expanded="true"] .menu-btn__bars span:first-child {
	transform: translateY(2.5px) rotate(45deg);
}

.menu-btn[aria-expanded="true"] .menu-btn__bars span:last-child {
	transform: translateY(-2.5px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   下層ページのヘッダー(明るい背景用)
   Figma ARTIST: 文字は #191919、下端に1pxの罫線 #878787。
   TOPは動画に重ねるため透過+白文字のまま。
   ------------------------------------------------------------------------- */

/* 下層ページは明るい地。黒がはみ出して見えないようbody側も合わせる */
body:not(.home) {
	background: var(--c-f9);
}

body:not(.home) .hd {
	background: var(--c-f9);
	color: var(--c-ink);
	border-bottom: 1px solid var(--c-87);
}

/*
 * 明るい地に載るのはヘッダー内の言語切替だけ。
 * メニュー内(.lang--menu)は暗い面にあるので、必ず .hd で絞る。
 * 絞らないとメニューを開いたときに EN と区切り線が黒地に黒で消える。
 */
body:not(.home) .hd .lang__sep {
	background: var(--c-ink);
}

body:not(.home) .hd .lang__item.is-current,
body:not(.home) .hd .lang__item:hover {
	color: var(--c-ink);
}

body:not(.home) .menu-btn {
	color: var(--c-ink);
}

/* =========================================================================
   Menu  (Figma: MENU > 02 = 1440x810 / 背景 #191919)
     左 720x810 … 動画(TOP冒頭と重複しないようアトリエの映像)
     右 x=784(=720+64)から幅576、右端1360(=右余白80)
     縦 上160 → ナビ384(48px Light・行間64)→ 80 → LANGUAGE
        → 下40の位置に 罫線 + 宣言文
   ========================================================================= */

.menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--c-ink);
	display: grid;
	grid-template-columns: 50% 1fr;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

.menu.is-open {
	opacity: 1;
	visibility: visible;
}

body.menu-open {
	overflow: hidden;
}

/* 開いている間は言語切替をメニュー内へ譲る(デザインどおりヘッダーからは消える) */
body.menu-open .hd .lang {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* 下層ページで開いたときは、暗いメニューに載るのでヘッダーを白文字へ戻す */
body.menu-open .hd {
	background: transparent;
	color: var(--c-f9);
	border-bottom-color: transparent;
}

body.menu-open .menu-btn {
	color: var(--c-f9);
}

.menu__visual {
	position: relative;
	overflow: hidden;
	background: #000;
}

.menu__visual video,
.menu__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.menu__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 160px 80px 40px 64px;
	overflow-y: auto;
}

.menu__nav {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.menu__row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	transition: opacity 0.3s ease;
}

.menu__row:hover {
	opacity: 0.6;
}

.menu__no {
	width: 20px;
	flex: none;
	font-weight: 300;
	font-size: 14px;
	line-height: 14px;
	color: var(--c-66);
}

.menu__label {
	font-weight: 300;
	font-size: clamp(28px, 3.4vw, 48px);
	line-height: 1;
	color: var(--c-white);
}

.menu__lang {
	margin-top: 80px;
}

.menu__lang-label {
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--c-87);
	margin-bottom: 12px;
}

.lang--menu {
	padding-left: 16px;
	gap: 8px;
	font-size: 16px;
	line-height: 24px;
}

.lang--menu .lang__sep {
	height: 9px;
}

.menu__rule {
	display: block;
	height: 1px;
	background: var(--c-87);
}

.menu__meta-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 32px;
	margin-top: 24px;
}

.menu__official {
	font-size: 12px;
	line-height: 24px;
	color: var(--c-f9);
}

.menu__copy {
	font-size: 10px;
	line-height: 20px;
	color: var(--c-c4);
	white-space: nowrap;
}

/* =========================================================================
   Sections(1画面 = デザイン上 1440x810)
   ========================================================================= */

.sec {
	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 480px;
	overflow: hidden;
	background: #000;
}

.sec__media {
	position: absolute;
	inset: 0;
}

.sec__video,
.sec__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 動画も静止画も無い(未納品)場合の仮置き */
.sec__blank {
	width: 100%;
	height: 100%;
	background: #000;
}

/* Figma: 動画セクションのみ暗さを重ねる(ヒーローには無い)。白文字の可読性のため下部のみ段階的に落とす */
.sec__scrim {
	position: absolute;
	inset: 0;
	background: var(--scrim);
	pointer-events: none;
}

/* =========================================================================
   Hero
   Figma: コンテンツ 305x137 を右端160pxに配置し上下中央。
          LATEST NEWS はその64px下。SCROLL は右80px・下端。
   ========================================================================= */

.hero__block {
	position: absolute;
	right: var(--hero-right);
	top: 50%;
	transform: translateY(-50%);
	width: 305px;
	text-align: right;
}

.hero__logo {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-end;
}

.hero__logo svg {
	height: 39px;
	width: auto;
	color: var(--c-f9);
}

.hero__copy {
	margin-top: 24px;
	font-size: 11px;
	line-height: 16.5px;
	color: var(--c-f9);
}

.hero__news {
	position: absolute;
	right: var(--hero-right);
	/* コンテンツ(高さ137)の下端から64px下 */
	top: calc(50% + 68.5px + 64px);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 18px;
	color: var(--c-f9);
	transition: gap 0.35s ease;
}

.hero__news:hover {
	gap: 16px;
}

.hero__news .arrow {
	flex: none;
}

/* --- SCROLL インジケーター --- */

.scroll-ind {
	position: absolute;
	right: var(--edge);
	bottom: 0;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	height: 120px;
	color: var(--c-f9);
}

.scroll-ind__line {
	position: relative;
	display: block;
	width: 11px;
	height: 120px;
}

.scroll-ind__line::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 0;
	width: 1px;
	height: 100%;
	background: currentColor;
	opacity: 0.5;
}

.scroll-ind__line i {
	position: absolute;
	left: 0;
	top: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: currentColor;
	animation: si-scroll 2.4s ease-in-out infinite;
}

@keyframes si-scroll {
	0%,
	15% {
		transform: translateY(0);
		opacity: 1;
	}
	70%,
	100% {
		transform: translateY(109px);
		opacity: 0;
	}
}

.scroll-ind__label {
	writing-mode: vertical-rl;
	font-family: var(--font-mono-ui);
	font-weight: 500;
	font-size: 10px;
	line-height: 15px;
}

@media (prefers-reduced-motion: reduce) {
	.scroll-ind__line i {
		animation: none;
	}
}

/* =========================================================================
   Caption(動画セクション)
   Figma: 左80px / 下80px。見出し24px + 説明16px Light、間隔16px。
   ========================================================================= */

.cap {
	position: absolute;
	left: var(--edge);
	bottom: var(--edge);
	right: var(--edge);
	color: var(--c-f9);
}

.cap__title {
	font-weight: 400;
	font-size: 24px;
	line-height: 36px;
}

.cap__desc {
	margin-top: 16px;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	white-space: nowrap;
}

/* =========================================================================
   Footer  (Figma: 1440x810 / #191919 / padding 120 80)
   ========================================================================= */

.ft {
	position: relative;
	min-height: 100svh;
	background: var(--c-ink);
	padding: 120px var(--edge);
	display: flex;
}

.ft__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
}

.ft__logo {
	display: block;
	line-height: 0;
	color: var(--c-f9);
}

.ft__logo-line svg {
	width: 728px;
	max-width: 100%;
	height: auto;
}

/* SP用の2行組み。PCでは使わない。 */
.ft__logo-stack {
	display: none;
}

.ft__nav {
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin-top: 80px;
}

.ft__row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	transition: opacity 0.3s ease;
}

.ft__row:hover {
	opacity: 0.6;
}

.ft__no {
	width: 20px;
	flex: none;
	font-weight: 300;
	font-size: 14px;
	line-height: 14px;
	color: var(--c-66);
}

.ft__label {
	font-weight: 300;
	font-size: clamp(28px, 3.4vw, 48px);
	line-height: 1;
	color: var(--c-white);
}

.ft__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 64px;
	margin-top: 80px;
}

/* 「唯一の公式サイト」宣言。省略不可。 */
.ft__official {
	font-size: 12px;
	line-height: 24px;
	color: var(--c-f9);
}

.ft__copy {
	font-size: 10px;
	line-height: 20px;
	color: var(--c-c4);
	text-align: right;
	white-space: nowrap;
}

/* =========================================================================
   ARTIST  (Figma: Page 3 > ARTIST > 5 = 1440x3344 / 背景 #F9F9F9)
     y=216  01 + ARTIST(Geist Thin 280px)
     y=689  左 512x810 の動画 / 右 688 のコンテンツ(間隔80)
     右上に縦組みの「池内 信介」
   左の動画は sticky。右カラムが終わると一緒に流れていく。
   ========================================================================= */

.artist {
	background: var(--c-f9);
	color: var(--c-ink);
	/*
	 * 下の余白は padding で取る。最後の子要素に margin-bottom を置くと
	 * マージンの相殺で親の外へ抜け、body の黒地が帯状に見えてしまう。
	 */
	padding-bottom: 180px;
}

/*
 * 左右の余白と最大幅。.ptitle は下層ページ共通の部品なので、
 * 親(.artist など)の padding に依存させず自分で持たせる。
 * 依存させると、ラッパーの無いページ(404など)で余白が消える。
 */
.ptitle,
.artist__row {
	max-width: calc(1280px + var(--edge) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--edge);
	padding-right: var(--edge);
}

/* -------------------------------------------------------------------------
   下層ページ共通の見出し
   彫刻で削ったようなスライス処理。同じ文字を上下2つに切り分け、
   間に隙間を作って下側をわずかに持ち上げる。
   比率は 1440(文字280px)と 390(文字76px)の両方の実測から取っている。
   ------------------------------------------------------------------------- */

.ptitle {
	/*
	 * --w100 … 見出しを font-size 100px・字間5% で描いたときの実測幅(px・単位なし)。
	 *           page-title.php が渡す。測り方はそちらのコメント参照。
	 *
	 * 文字サイズは「本文幅をちょうど1行で埋める値」を実測幅から逆算する。
	 * 280px固定だと ARTIST 74% / INSTA 61% しか埋まらず右に大きな余白が残り、
	 * そのうえ改行が入るため割った位置が恣意的に見えてしまう(2026-08-18 変更)。
	 *
	 * これにより下層ページはすべて「本文幅いっぱいの1行」で構図が揃う。
	 *
	 * 上限は設計値の280px(SPは76px)。上限を置かないと文字数の少ない ARTIST が
	 * 381pxまで育ち、タイトル部の高さがページ間で182〜370pxとばらついてしまう。
	 * 上限に当たるのは ARTIST だけで、そこは元のデザインどおりの見え方になる。
	 * 残りのページ(LATEST NEWS 187 / INSTAGRAM 224 / NOT FOUND 215px)は
	 * 本文幅をちょうど埋める。
	 */
	--w100: 620;
	--t-max: 280px;
	--measure: min(1280px, 100vw - var(--edge) * 2);
	/* 文字サイズは .ptitle__main 側で確定させる(下記の cqw を使うため) */

	container-type: inline-size;

	--slice-top: 0.443; /* 上側の見せる高さ ÷ 文字サイズ */
	--slice-gap: 0.029; /* 削り跡の隙間 */
	--slice-bottom: 0.5; /* 下側の見せる高さ */
	--slice-shift: 0.479; /* 下側の文字を持ち上げる量 */
	padding-top: 217px;
}

.ptitle__no {
	display: block;
	font-weight: 500;
	font-size: 24px;
	line-height: 24px;
	color: var(--c-87);
	margin-bottom: 3px;
}

/*
 * 文字サイズの確定。
 * 1つめの宣言は保険(100vw ベース)。cqw に対応していれば2つめが勝つ。
 *
 * 100cqw は .ptitle の内容ボックス幅、つまり本文幅そのもの。
 * 100vw だとスクロールバーの幅ぶん過大になり、1200〜1440pxの画面幅で
 * 文字が数px はみ出して末尾がマスクに削られてしまう。
 */
.ptitle__main {
	--t: min(var(--t-max), calc(var(--measure) * 100 / var(--w100)));
	--t: min(var(--t-max), calc(100cqw * 100 / var(--w100)));
}

/*
 * 2行以上に割った見出しの1行分。Figmaは行間0(削り跡の隙間だけが入る)なので
 * 余白は持たせない。
 */
.ptitle__line {
	display: block;
}

.ptitle__slice {
	display: block;
	overflow: hidden;
}

.ptitle__slice--top {
	height: calc(var(--t) * var(--slice-top));
}

.ptitle__slice--bottom {
	height: calc(var(--t) * var(--slice-bottom));
	margin-top: calc(var(--t) * var(--slice-gap));
}

.ptitle__slice > span {
	display: block;
	font-weight: 100;
	font-size: var(--t);
	line-height: 1;
	letter-spacing: var(--ls);
	color: var(--c-ink);
	white-space: nowrap;
}

.ptitle__slice--bottom > span {
	margin-top: calc(var(--t) * var(--slice-shift) * -1);
}

.artist__row {
	position: relative;
	display: grid;
	grid-template-columns: 512fr 688fr;
	column-gap: 80px;
	margin-top: 180px;
}

/* --- 左の動画(sticky) --- */

.artist__visual {
	position: sticky;
	/* ヘッダー(96px)の下に留める */
	top: calc(var(--hd-h) + 32px);
	align-self: start;
	width: 100%;
	aspect-ratio: 512 / 810;
	/* 画面より高いとstickyが効かないため、必ず1画面に収める */
	max-height: calc(100svh - var(--hd-h) - 64px);
	overflow: hidden;
	background: #000;
}

.artist__visual video,
.artist__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 右のコンテンツ --- */

.artist__body {
	position: relative; /* 縦組みの基準 */
	display: flex;
	flex-direction: column;
	gap: 120px;
}

.artist__intro {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.artist__name-en {
	font-weight: 300;
	font-size: 48px;
	line-height: 60px;
	color: var(--c-ink);
}

.artist__role {
	font-weight: 400;
	font-size: 11px;
	line-height: 18.7px;
	color: var(--c-ink);
}

.artist__facts,
.artist__bio {
	font-weight: 300;
	font-size: 15px;
	line-height: 30px;
	color: var(--c-3c);
}

.artist__facts {
	white-space: pre-line;
}

.artist__blocks {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.artist__block {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.artist__block-title {
	font-weight: 300;
	font-size: 24px;
	line-height: 40.8px;
	color: var(--c-ink);
	padding-bottom: 24px;
	border-bottom: 1px solid var(--c-ink);
}

.artist__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.artist__item {
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--c-c4);
}

.artist__year {
	font-weight: 400;
	font-size: 15px;
	line-height: 30px;
	color: var(--c-87);
}

.artist__desc {
	font-weight: 300;
	font-size: 15px;
	line-height: 30px;
	color: var(--c-3c);
	margin: 0;
}

/* --- 900px以下は1カラム。留める意味がないので sticky を解く --- */

@media (max-width: 900px) {
	.artist__row {
		grid-template-columns: 1fr;
		row-gap: 48px;
	}

	.artist__visual {
		position: static;
		max-height: none;
	}
}

/* タブレット幅(SP専用デザインの対象外)の詰め方 */
@media (min-width: 768px) and (max-width: 900px) {
	.ptitle {
		padding-top: calc(var(--hd-h) + 96px);
	}

	.artist {
		padding-bottom: 120px;
	}

	.artist__row {
		margin-top: 96px;
	}

	.artist__visual {
		aspect-ratio: 16 / 10;
	}

	.artist__body {
		gap: 80px;
	}
}

/* =========================================================================
   デザインの無いページ(Privacy Policy / 404)の最小限の体裁
   ========================================================================= */

/*
 * 下層ページは明るい地(#F9F9F9)で確定しているので、それに合わせている。
 * 見出しは template-parts/page-title.php(.ptitle)を共用。
 *
 * ページ別のデザインが当たるページは、自前のCSS(news / news-article /
 * instagram / contact)を functions.php で追加読み込みしている。
 * ここに個別ページ用のルールを足さないこと。
 */

.page-body {
	background: var(--c-f9);
	padding: 64px var(--edge) 120px;
	max-width: 900px;
	color: var(--c-3c);
}

.page-body p {
	font-weight: 300;
	font-size: 16px;
	line-height: 2;
	margin-bottom: 1.6em;
}

/*
 * Privacy Policy のように、デザインが無く本文だけで成り立つページの体裁。
 * このページはブロックCSSを読み込んでいない(si_dequeue_block_styles)ので、
 * 見出し・リスト・リンクの見え方はここで持たせる必要がある。
 * トークンは他ページと共通なので、地味でもサイトから浮かない。
 */

.page-body h2 {
	font-weight: 400;
	font-size: 20px;
	line-height: 1.8;
	color: var(--c-ink);
	margin: 56px 0 8px;
}

.page-body h2:first-child {
	margin-top: 0;
}

.page-body h3 {
	font-weight: 400;
	font-size: 16px;
	line-height: 2;
	color: var(--c-ink);
	margin: 32px 0 4px;
}

.page-body ul,
.page-body ol {
	margin: 0 0 1.6em;
	padding-left: 1.4em;
}

.page-body li {
	font-weight: 300;
	font-size: 16px;
	line-height: 2;
}

.page-body a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 最後の子の margin は親の外へ抜けるので消す(下余白は padding で取っている) */
.page-body > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.page-body h2 {
		font-size: 18px;
		margin-top: 40px;
	}

	.page-body p,
	.page-body li {
		font-size: 14px;
		line-height: 1.9;
	}
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1200px) {
	:root {
		--hero-right: 80px;
	}
}

@media (max-width: 900px) {
	.cap__desc {
		white-space: normal;
	}

}

/* タブレット幅は左右2分割にすると右カラムが狭すぎるので、動画を出さず1カラムにする
   (SPは専用デザインがあるので下の767px以下で別途組む) */
@media (min-width: 768px) and (max-width: 900px) {
	.menu {
		grid-template-columns: 1fr;
	}

	.menu__visual {
		display: none;
	}

	.menu__body {
		padding: calc(var(--hd-h) + 72px) var(--edge) 40px;
	}
}

/* =========================================================================
   SP  (Figma: TOP 01_sp = 390x4870 / MENU 01_sp = 390x812)
   ========================================================================= */

@media (max-width: 767px) {
	:root {
		--hd-h: 64px;
		--pad-x: 20px;
		--edge: 20px;
	}

	/* --- ヘッダー: SPは塗りつき(#191919)。高さ64、内側の行は15pxをy=24に --- */

	.hd {
		background: var(--c-ink);
		border-bottom: 0;
	}

	.hd__logo svg {
		width: 152px;
	}

	.hd__right {
		gap: 16px;
	}

	.lang {
		gap: 6px;
		font-size: 10px;
		line-height: 15px;
	}

	.lang__sep {
		height: 6px;
	}

	.menu-btn {
		gap: 8px;
		font-size: 10px;
		line-height: 15px;
	}

	.menu-btn__bars {
		width: 10px;
		height: 5px;
	}

	.menu-btn__bars span {
		width: 10px;
	}

	/* CLOSE(41px)が入る幅で固定し、開閉で右端がずれないようにする */
	.menu-btn__label {
		width: 41px;
		height: 15px;
	}

	/*
	 * SPデザインでは開いた状態も「MENU」+2本線のままだったが、
	 * 閉じる手がかりが弱いためPCと揃えて ✕ CLOSE にする(服部氏の指示)。
	 * ×のサイズだけSPの線幅(10px)に合わせる。
	 */
	.menu-btn[aria-expanded="true"] .menu-btn__bars span:first-child {
		transform: translateY(2px) rotate(45deg);
	}

	.menu-btn[aria-expanded="true"] .menu-btn__bars span:last-child {
		transform: translateY(-2px) rotate(-45deg);
	}

	/* --- ヒーロー: コンテンツは右下寄せ(右20 / 下80) --- */

	.hero__block {
		top: auto;
		/* LATEST NEWS(17) + 間隔16 + 下余白80 */
		bottom: 113px;
		right: 20px;
		left: auto;
		transform: none;
		width: 305px;
		max-width: calc(100% - 40px);
	}

	.hero__logo {
		gap: 12px;
	}

	.hero__logo svg {
		height: auto;
	}

	.hero__logo-a svg {
		width: 204px;
	}

	.hero__logo-b svg {
		width: 168px;
	}

	.hero__copy {
		margin-top: 24px;
	}

	.hero__news {
		top: auto;
		bottom: 80px;
		right: 20px;
		left: auto;
		justify-content: flex-end;
		gap: 6px;
		font-size: 11px;
		line-height: 16.5px;
	}

	/* SPデザインにSCROLLインジケーターは無い */
	.scroll-ind {
		display: none;
	}

	/* --- 動画セクションのキャプション: 左20 / 下80 --- */

	.cap {
		left: 20px;
		right: 20px;
		bottom: 80px;
	}

	.cap__title {
		font-size: 18px;
		line-height: 27px;
	}

	.cap__desc {
		margin-top: 12px;
		font-size: 14px;
		line-height: 21px;
		white-space: normal;
	}

	/* --- メニュー: 上に本文、下に全幅244pxの動画 --- */

	.menu {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 244px;
	}

	.menu__body {
		order: 1;
		padding: 120px 20px 40px;
		justify-content: flex-start;
		gap: 40px;
	}

	.menu__visual {
		order: 2;
		display: block;
	}

	.menu__nav {
		gap: 24px;
	}

	.menu__row {
		gap: 12px;
	}

	.menu__no {
		width: 20px;
		font-size: 10px;
		line-height: 10px;
	}

	.menu__label {
		font-size: 36px;
		line-height: 36px;
	}

	.menu__lang {
		margin-top: 40px;
		text-align: center;
	}

	.menu__lang-label {
		margin-bottom: 6px;
	}

	.lang--menu {
		padding-left: 0;
		justify-content: center;
		gap: 12px;
		font-size: 14px;
		line-height: 21px;
	}

	.lang--menu .lang__sep {
		height: 9px;
	}

	.menu__meta-row {
		flex-direction: column;
		align-items: center;
		gap: 4px;
		margin-top: 16px;
		text-align: center;
	}

	/* --- フッター: ロゴは2行組み --- */

	.ft {
		padding: 80px 20px;
	}

	.ft__logo-line {
		display: none;
	}

	.ft__logo-stack {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.ft__logo-stack span:first-child svg {
		width: 234px;
		height: auto;
	}

	.ft__logo-stack span:last-child svg {
		width: 192px;
		height: auto;
	}

	.ft__nav {
		gap: 32px;
		margin-top: 40px;
	}

	.ft__no {
		width: 20px;
		font-size: 10px;
		line-height: 10px;
	}

	.ft__label {
		font-size: 32px;
		line-height: 32px;
	}

	.ft__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-top: 80px;
	}

	.ft__copy {
		text-align: left;
	}

	/* --- ARTIST (Figma: ARTIST_01_sp = 390x3436) --- */

	/* ヘッダー65(64 + 罫線1)の下に上余白80 */
	.ptitle {
		/* SPの上限はFigmaの76px。当たるのは ARTIST(と CONTACT)だけ */
		--t-max: 76px;
		padding-top: 145px;
	}

	.ptitle__no {
		font-size: 14px;
		line-height: 14px;
		margin-bottom: 4px;
	}

	.artist {
		padding-bottom: 80px;
	}

	.artist__row {
		margin-top: 80px;
		row-gap: 48px;
	}

	/* 動画は 350x554(PCの512x810と同じ縦横比) */
	.artist__visual {
		aspect-ratio: 350 / 554;
	}

	.artist__body {
		gap: 48px;
	}

	.artist__intro {
		gap: 32px;
	}

	.artist__name-en {
		font-size: 32px;
		line-height: 40px;
	}

	.artist__facts,
	.artist__bio {
		font-size: 14px;
		line-height: 28px;
	}

	.artist__blocks {
		gap: 40px;
	}

	.artist__block {
		gap: 24px;
	}

	.artist__block-title {
		font-size: 20px;
		line-height: 34px;
		padding-bottom: 24px;
	}

	.artist__list {
		gap: 16px;
	}

	.artist__item {
		grid-template-columns: 50px 1fr;
		column-gap: 16px;
		padding-bottom: 16px;
	}

	.artist__year,
	.artist__desc {
		font-size: 14px;
		line-height: 28px;
	}
}