/*
Theme Name: Shirvester
Description: マジックコーディネーター公式サイト用オリジナルテーマ。エンタメとしての神秘性とBtoBの信頼感を両立するデザインを目指す。
Author: Shirvester
Version: 0.1.0
Text Domain: shirvester
*/

/* ベースリセット（デザイン方針が固まるまでの最小限の土台） */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   デザイントークン（CSS Custom Properties）

   コンセプト：「白昼のイリュージョン」
   クライアント要望により基調をダークから白（ライトテーマ）へ変更。
   ダークテーマは"暗さ"それ自体が神秘性を無償で担保してくれていたが、
   白地ではその代わりに「余白の演出」「線としてのゴールド」「ホバー時にだけ
   現れるバイオレット」という3つの仕掛けで神秘性とWowファクターを作る。
   ブランドの核である「ゴールド＝信頼」「バイオレット＝驚き」という
   二面性の対比構造そのものは維持し、白地向けに配分だけを調整する。
   なお当初検討していたダーク配色は破棄せず、--color-curtain-* として
   温存し、フッター等「公演の終わり」を演出する箇所に転用する。
   ========================================================================== */
:root {
	/* --------------------------------------------------------------------
	 * Color: ベースカラー
	 * 完全な白（#fff）は臨床的・無機質な印象になりやすいため、
	 * 画廊の壁やギャラリー用紙のようなわずかに温かみのある白を採用。
	 * elevated はカード等を一段手前に浮かせる用の純白で、
	 * base とのわずかな明度差だけで奥行きを出す（グレーの影に頼らない）。
	 * ------------------------------------------------------------------ */
	--color-bg-base: #faf9f6; /* ギャラリーの壁 (Gallery Wall White) */
	--color-bg-elevated: #ffffff; /* 前面の純白 */

	/* --------------------------------------------------------------------
	 * Color: テキストカラー
	 * 純黒(#000)にせず、わずかに紫を含んだインク色を採用することで、
	 * ダークテーマ時代からのブランドの"血統"（バイオレットのDNA）を
	 * 白ベースになっても静かに継承する。secondary はキャプション等、
	 * 視線の優先順位を下げたい箇所用。
	 * ------------------------------------------------------------------ */
	--color-text-primary: #1c1a26; /* インク紫 (Ink Violet) */
	--color-text-secondary: #6b6580; /* 灰紫 (Dusk Grey) */

	/* --------------------------------------------------------------------
	 * Color: アクセントカラー
	 * ゴールドは面ではなく「線・文字・縁取り」専用に使うシャンパンゴールド。
	 * 白地で本文並みの小さな文字に使ってもAA基準(4.5:1)のコントラストを
	 * 保てる濃さまで落とし込んでいる（-pale は装飾・大見出し専用で
	 * 単体では小さな文字に使わないこと）。hover はさらに深く沈める方向で
	 * 変化させる。ダーク時代の「ホバーで明るく」の逆で、白地では
	 * 「ホバーで金が焦げるように濃くなる」ほうが上品に見えるため。
	 * バイオレットは静止画面には一切使わず、ホバー・フォーカス時にのみ
	 * 現れる"発見"の色として温存する（CLAUDE.md方針）。
	 * silver はグラスモーフィズムの縁取り専用の冷たいニュートラル。
	 * gradient-shimmer は白地のCTA等、ゴールド→バイオレット→ゴールドの
	 * シグネチャー装飾。多用せず1〜2箇所に限定すること。
	 * ------------------------------------------------------------------ */
	--color-accent-gold: #8a6a3e; /* 焦がしシャンパン (Toasted Champagne) */
	--color-accent-gold-hover: #6e5330; /* ホバー時：さらに深く沈める */
	--color-accent-gold-pale: #e8d9be; /* 装飾・大見出し専用の淡いシャンパン */
	--color-accent-mystic: #6e4fd9; /* 幻惑のバイオレット (Illusion Violet)・発見専用 */
	--color-accent-silver: #a9aebd; /* グラスの縁取り用シルバー */
	/* ロゴ専用のブランドパープル（SHIRVESTER PRESENTSロゴ使用ガイドライン指定値、
	   C85 M100 Y0 K0 / #481c87）。--color-accent-mysticとは別物で、サイトの
	   UI発見色ではなくロゴそのものの規定色のため常に固定表示し、
	   ホバーでの変色は行わない。 */
	--color-logo-brand: #481c87;
	--color-border-subtle: rgb(138 106 62 / 25%); /* ゴールドを薄めた罫線 */
	--color-error: #a8433a; /* フォームバリデーション用の抑えた煉瓦色。金・紫の並びに馴染む彩度を選定 */
	--gradient-shimmer: linear-gradient(
		135deg,
		var(--color-accent-gold) 0%,
		var(--color-accent-mystic) 50%,
		var(--color-accent-gold) 100%
	);

	/* --------------------------------------------------------------------
	 * Color: グラスモーフィズム
	 * ヘッダー等、コンテンツの上に浮かせて半透明にする面で使う。
	 * 白の半透明＋シルバーの縁取りにすることで「ガラス」に寄せる
	 * （ゴールドの縁取りにすると単なる金枠パネルに見えてしまうため、
	 * 縁取りは意図的にゴールドではなくシルバー系にしている）。
	 * ------------------------------------------------------------------ */
	--glass-bg: rgb(255 255 255 / 60%);
	--glass-border: rgb(169 174 189 / 45%);
	--glass-blur: 16px;

	/* --------------------------------------------------------------------
	 * Color: 緞帳（カーテン）パレット
	 * 当初のダークテーマ案をそのまま温存したもの。サイト全体は白基調だが、
	 * フッターなど「公演の終わり・暗転」を演出したい箇所限定で使用する
	 * （CLAUDE.mdの「暗転演出」方針）。値の意味は元のダーク案と同じ。
	 * ------------------------------------------------------------------ */
	--color-curtain-bg: #0c0b18; /* 緞帳の黒 */
	--color-curtain-bg-elevated: #16142a; /* 楽屋のインディゴ */
	--color-curtain-text: #f4efe4; /* 燭光アイボリー */
	--color-curtain-text-secondary: #9c97b3; /* 月明かりの灰 */
	--color-curtain-accent-gold: #c6a15b; /* 真鍮金 */
	--color-curtain-accent-gold-hover: #e4c583; /* ダーク面では逆にホバーで明るくする */
	--color-curtain-accent-mystic: #8c7cf0; /* 幻惑のバイオレット（ダーク面用） */
	--color-curtain-border: rgb(198 161 91 / 25%);
	--gradient-shimmer-curtain: linear-gradient(
		135deg,
		var(--color-curtain-accent-gold) 0%,
		var(--color-curtain-accent-mystic) 50%,
		var(--color-curtain-accent-gold) 100%
	);

	/* --------------------------------------------------------------------
	 * Typography: メインフォント
	 * 本文・UIは可読性最優先。欧文は Manrope（Inter等より角の個性が強く、
	 * BtoBサイトとしての知的な印象を出しつつ没個性になりすぎない）、
	 * 和文は Zen Kaku Gothic New（角ゴシックの中でも線が上品で、
	 * 高級ブランドサイトでの採用例が多い）を採用。
	 * Manrope は日本語グリフを持たないため、同じ font-family 内に
	 * 両方指定しておけば文字種ごとにブラウザが自動でフォールバックする
	 * （和文用に @media や lang 切り替えを別途書く必要がない）。
	 * ------------------------------------------------------------------ */
	--font-body: 'Manrope', 'Zen Kaku Gothic New', sans-serif;

	/* --------------------------------------------------------------------
	 * Typography: 見出し・アクセント用フォント
	 * 欧文は Cinzel。ローマ時代の石碑刻字を起源とするセリフで、
	 * 「刻印された格式」と「儀式めいた神秘性」を同時に持つ、
	 * ありがちな Playfair Display 等の“高級感テンプレ”とは異なる選定。
	 * 和文は Shippori Mincho。筆致の柔らかさを残した明朝体で、
	 * 招待状や巻物のような、手仕事の温度感を持つ神秘性を表現する。
	 * tracking-display は Cinzel の刻印的な字形を活かすための
	 * 広め字間（レターパンチのような見出し表現に必須）。
	 * ------------------------------------------------------------------ */
	--font-display: 'Cinzel', 'Shippori Mincho', serif;
	--tracking-display: 0.05em;

	/* --------------------------------------------------------------------
	 * Spacing: 余白
	 * 「余白を贅沢に使う」という方針に沿い、画廊・展示会のような
	 * 呼吸感を意図して 1.5倍前後の比率で緩やかに増加するスケールを採用。
	 * section-block / content-inline は clamp() によりビューポート幅に
	 * 応じて滑らかに伸縮させ、個別のメディアクエリを増やさない設計にする。
	 * ------------------------------------------------------------------ */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--container-max-width: 1200px;
	--space-section-block: clamp(5rem, 4rem + 5vw, 9rem);
	--space-content-inline: clamp(1.5rem, 1rem + 4vw, 4rem);

	/* --------------------------------------------------------------------
	 * Animation: トランジション・イージング
	 * ease-hover は色やアイコンの即時的な反応に使う、一般的な
	 * material 標準に近い素直な減速（レスポンスの良さを担保するため）。
	 * ease-signature は本サイト独自の「浮遊感」を表すシグネチャー
	 * イージング。重力からゆっくり解放されるような減速カーブにより、
	 * カードやセクションが“ふわりと浮かび上がる”ようなスクロール演出、
	 * ホバー時の僅かな浮き上がりに使用する。多用するとパフォーマンスを
	 * 損なうため、対象は「驚きを見せたい要素」に限定すること。
	 * ------------------------------------------------------------------ */
	--ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 150ms;
	--duration-base: 400ms;
	--duration-float: 800ms;
}

/* ==========================================================================
   Base
   ========================================================================== */
/* TOPページのHeroはスクロール入力をpage lock（body position: fixed）で
   横取りする（hero-animation.js）。ロック中はbodyがフローから外れて
   documentの実高さがビューポート分まで縮むため、ブラウザが縦スクロール
   バーを消してしまう。ロック解除の瞬間に本来のページ高さへ戻って
   スクロールバーが急に現れ、その分だけ表示幅が変わって「がたっ」と
   ずれる不具合があった。overflow-y: scrollでスクロールバー用の余白を
   常時確保しておくことで、出現・消失そのものを起こさせないようにする。 */
html {
	overflow-y: scroll;
}

body {
	background-color: var(--color-bg-base);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	line-height: 1.7;
}

a {
	color: inherit;
}

/* 視覚的には非表示だが、スクリーンリーダーには読み上げさせたいラベル用
   （ハンバーガーボタンの「メニューを開く」テキストなど）。position:absolute +
   1pxの矩形に切り詰めることで、display:noneと違いフォーカス時にも
   支援技術から認識され続ける、WordPressコアテーマ標準のパターン。 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* スマホの緞帳オーバーレイが開いている間、背後のページ本体が
   スクロールしてしまわないようにロックする（navigation.jsが付与）。 */
body.menu-open {
	overflow: hidden;
}

/* キーボード操作時のフォーカスリングを、ブランドカラーである
   幻惑のバイオレットで統一する（ブラウザ標準の青いアウトラインのままだと
   世界観から浮いてしまうため）。マウス操作時には表示しない。 */
:focus-visible {
	outline: 2px solid var(--color-accent-mystic);
	outline-offset: 2px;
}

/* このサイトはホバー・スクロール演出を多用する設計のため、
   OS側で「視差効果を減らす」設定が有効な場合は全てのトランジション・
   アニメーションを実質無効化し、酔いや不快感を与えないようにする。 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */
/* ヘッダーは「背景は全幅、コンテンツは可読幅」の2層構造にする。
   .site-header がビューポート端から端までガラス背景（半透明＋ぼかし）を
   敷き、その内側の .site-header__inner だけを container-max-width で
   中央寄せする。背景だけ全幅にすることで、超ワイドモニターでも
   ロゴとナビの間が間延びしない。縁取りにゴールドではなくシルバー系の
   半透明を使うのは、ゴールド枠だと単なる金属パネルに見えてしまい
   "ガラス"の透明感が失われるため。 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	width: 100%;
	border-bottom: 1px solid var(--glass-border);
}

/* 背景（半透明＋ぼかし）は擬似要素に分離している。backdrop-filter を
   .site-header 自身に直接指定すると、CSS仕様上その要素が
   「fixed要素の配置基準（containing block）」になってしまい、
   内側の .main-navigation（スマホの緞帳オーバーレイ、position:fixed）が
   ビューポート全体ではなくヘッダーの小さな矩形内にしか広がらなくなる
   というバグに直結する。疑似要素側にぼかしを逃がすことで、
   .site-header 自体はこの副作用を持たない状態に保っている。 */
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
}

.site-header__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-block: var(--space-md);
	padding-inline: var(--space-content-inline);
}

/* z-index:1 は、スマホ幅でnav（緞帳オーバーレイ）が全画面表示された際にも
   ロゴが隠れず、常に手前に見えるようにするため。 */
.site-branding {
	position: relative;
	z-index: 1;
}

/* ハンバーガーボタンと言語切替ボタンのグループ。z-index:1はロゴと同じ
   理由（スマホの緞帳オーバーレイより手前に保つため）。 */
.site-header__controls {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.site-title {
	margin: 0;
}

/* ロゴ本体（アイコン+ワードマークのインラインSVG）。ガイドラインが
   「原則としてフルカラー版を使用し、視認性に欠く背景でのみブラック／
   ホワイトの単色版を使う」と定めており、ヘッダーは白背景で視認性の
   問題がないため、フルカラー版のブランドパープル（--color-logo-brand）を
   使用する。他のリンク類のようなゴールドやミスティックバイオレットへの
   ホバー変色は行わず、常に固定表示する。
   右側にクリアスペースを確保しているのは、ガイドラインが要求する
   「シンボル周辺の指定クリアスペース内に他要素の侵入を禁止する」規定に
   対応するため（ハンバーガーボタンやナビが詰めて配置されるのを防ぐ）。 */
.site-logo {
	/* 通常時の表示色はheader.php側のインラインstyleで渡す
	   --site-logo-color（カスタマイザー「ヘッダーロゴの色」設定）を使う。
	   スマホでメニュー展開中は、下のbody.menu-open .site-logoが
	   より詳細なセレクタとして優先され、--site-logo-color-menu-open
	   （緞帳オーバーレイの暗い背景向けの色設定）に切り替わる。 */
	display: inline-flex;
	align-items: center;
	padding-inline-end: var(--space-md);
	color: var(--site-logo-color);
	transition: color var(--duration-fast) var(--ease-hover);
}

body.menu-open .site-logo {
	color: var(--site-logo-color-menu-open);
}

.site-logo svg {
	display: block;
	height: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	width: auto;
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	position: relative;
	display: inline-block;
	padding-block: 0.25rem;
	font-size: 0.95rem;
	text-decoration: none;
	color: var(--color-text-primary);
	transition: color var(--duration-fast) var(--ease-hover);
}

/* ナビゲーションのホバー下線。即座に表示するのではなく
   ease-signature（重力から解放されるような減速）で右から左へ
   すっと伸びるようにし、「魔法の杖で線を引く」ような一瞬の演出にする。 */
.main-navigation a::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--color-accent-gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--duration-base) var(--ease-signature);
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
	color: var(--color-accent-gold-hover);
}

.main-navigation a:hover::after,
.main-navigation a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* サブメニュー（現状「製品紹介」配下のWholesaleのみ）。マウス操作は
   :hover、キーボード操作はTabで子リンクにフォーカスが移った時点で
   :focus-within が反応するため、JSなしのCSSのみでどちらの操作方法でも
   開閉できる。親リンク自体は/service/への通常のリンクとして機能させ、
   開閉専用のトグルボタンは追加しない（項目が1つだけの現状ではその方が
   シンプルで、将来項目が増えた際に再検討する）。 */
.main-navigation .menu-item-has-children {
	position: relative;
}

.main-navigation .sub-menu {
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 12rem;
	margin: 0;
	padding: var(--space-xs) 0;
	list-style: none;
	background-color: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	border-radius: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition:
		opacity var(--duration-base) var(--ease-signature),
		transform var(--duration-base) var(--ease-signature),
		visibility 0s var(--duration-base);
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition:
		opacity var(--duration-base) var(--ease-signature),
		transform var(--duration-base) var(--ease-signature),
		visibility 0s;
}

.main-navigation .sub-menu a {
	display: block;
	padding: 0.5rem var(--space-md);
	font-size: 0.85rem;
	white-space: nowrap;
}

/* 言語切替UI。言語コード（JA/EN）だけを示す固定サイズのボタンを
   ヘッダーに常時置き、クリックで候補パネルが下に開くドロップダウン形式に
   する。言語が増えてもボタン自体の見た目は変わらず、開いたパネルの
   行数が増えるだけなので、以前のピル型リストが横に伸びて折り返す
   問題を根本的に解消できる。開閉状態はhidden属性で管理し
   （navigation.jsが切り替え）、CSSが効かない場合でも他要素と重ならない
   よう最低限のフォールバックにする。 */
.language-switcher {
	position: relative;
}

.language-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.65rem;
	background: none;
	border: 1px solid var(--color-border-subtle);
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition:
		color var(--duration-fast) var(--ease-hover),
		border-color var(--duration-fast) var(--ease-hover);
}

.language-switcher__toggle:hover,
.language-switcher__toggle[aria-expanded='true'] {
	color: var(--color-accent-gold);
	border-color: var(--color-accent-gold);
}

.language-switcher__current {
	text-transform: uppercase;
}

/* 三角形はborderトリックで描く。開いている間は上向きに回転させ、
   ハンバーガーボタンの×変形と同じ「状態が見た目にも伝わる」操作感を揃える。 */
.language-switcher__caret {
	width: 0;
	height: 0;
	border-inline: 3px solid transparent;
	border-top: 4px solid currentColor;
	transition: transform var(--duration-fast) var(--ease-hover);
}

.language-switcher__toggle[aria-expanded='true'] .language-switcher__caret {
	transform: rotate(180deg);
}

.language-switcher__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 1;
	min-width: 8rem;
	margin: 0;
	padding: var(--space-xs) 0;
	list-style: none;
	background-color: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	border-radius: 2px;
}

.language-switcher__panel[hidden] {
	display: none;
}

.language-switcher__link {
	display: block;
	padding: 0.4rem var(--space-md);
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--color-text-secondary);
	white-space: nowrap;
	transition: color var(--duration-fast) var(--ease-hover);
}

.language-switcher__link:hover,
.language-switcher__link:focus-visible {
	color: var(--color-accent-gold);
}

.language-switcher__link.is-current {
	color: var(--color-accent-gold);
}

.language-switcher__link.is-current::after {
	content: ' \2713';
}

/* ハンバーガーボタン。PCでは非表示（display:none）にし、48rem以下の
   スマホ幅でのみ表示する。開閉状態は navigation.js が toggle 要素の
   aria-expanded 属性を切り替えることで管理し、CSSは属性セレクタ
   [aria-expanded="true"] を見て見た目（3本線→×）を変える構成にする
   （JSからクラスを2箇所同期させる必要をなくし、状態管理を一本化するため）。 */
.menu-toggle {
	display: none;
	position: relative;
	z-index: 1; /* オーバーレイ表示中も常にロゴと同じ手前レイヤーに置く */
	width: 1.75rem;
	height: 1.25rem;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.menu-toggle__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-text-primary);
	transition:
		transform var(--duration-base) var(--ease-signature),
		opacity var(--duration-base) var(--ease-signature),
		background-color var(--duration-fast) var(--ease-hover);
}

.menu-toggle__bar:nth-child(1) {
	top: 0;
}

.menu-toggle__bar:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}

.menu-toggle__bar:nth-child(3) {
	bottom: 0;
}

/* オーバーレイ（緞帳）が開いている間はボタン自体がダーク背景の上に
   乗るため、バーの色をカーテン用の明るい色に切り替える。 */
.menu-toggle[aria-expanded='true'] .menu-toggle__bar {
	background-color: var(--color-curtain-text);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(3) {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
}

@media (max-width: 48rem) {
	.menu-toggle {
		display: inline-block;
	}

	/* スマホ幅ではナビゲーションを「緞帳オーバーレイ」に変える。
	   単なるドロップダウンではなく、フッターで使っているダーク配色
	   （--color-curtain-*）を全画面に敷き、公演の暗転のようにメニューが
	   下りてくる演出にする。is-open は navigation.js が付与する。 */
	.main-navigation {
		position: fixed;
		inset: 0;
		z-index: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--color-curtain-bg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-1rem);
		transition:
			opacity var(--duration-float) var(--ease-signature),
			transform var(--duration-float) var(--ease-signature),
			visibility 0s var(--duration-float);
	}

	.main-navigation.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition:
			opacity var(--duration-float) var(--ease-signature),
			transform var(--duration-float) var(--ease-signature),
			visibility 0s;
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: center;
		gap: var(--space-lg);
	}

	.main-navigation a {
		font-family: var(--font-display);
		font-size: 1.35rem;
		letter-spacing: var(--tracking-display);
		color: var(--color-curtain-text);
	}

	.main-navigation a::after {
		background-color: var(--color-curtain-accent-gold);
	}

	.main-navigation a:hover,
	.main-navigation a:focus-visible {
		color: var(--color-curtain-accent-gold-hover);
	}

	/* 「製品紹介」のように子メニューを持つliは、リンクとsub-menuの
	   2つを縦に持つブロックになる。liの幅は入れ子のsub-menu側の幅に
	   引っ張られて広がる一方、直下のリンク（inline-block）はliの中で
	   既定のまま左寄せされるため、子メニューを持たない他の項目
	   （ブログ等）だけが正しく中央に見え、「製品紹介」だけリンクが
	   左に寄って見えるズレが生じていた。liごとflexの縦積みにして
	   align-items:centerを効かせることで、リンクと子メニューの両方を
	   独立して中央揃えする。 */
	.main-navigation .menu-item-has-children {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* サブメニュー（Wholesale）はデスクトップのようなホバー式
	   ドロップダウンにせず、緞帳オーバーレイの縦積みの中にそのまま
	   常時展開しておく。オーバーレイは全画面を使えるだけの余白があり、
	   項目数も1つだけのため、開閉トグルを別途作るより単純で確実。 */
	.main-navigation .sub-menu {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-sm);
		margin-top: var(--space-sm);
		padding: 0;
		background: none;
		border: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.main-navigation .sub-menu a {
		font-size: 1rem;
		color: var(--color-curtain-text-secondary);
	}

	/* 「メニューを開くとスクロールされてロゴが画面外に消える」不具合
	   （2026-09-05）への対応。navigation.js側でbodyをposition: fixedに
	   して背景スクロールを物理的に止めているが、.site-headerは
	   position: stickyのまま——stickyは「スクロールに応じて追従する」
	   仕組みのため、スクロール位置0の場合を除きbodyの座標シフト
	   （top: -スクロール位置px）を追従しきれず、ヘッダーごと画面外へ
	   ずれてしまう。メニュー展開中だけ.site-header自体をposition:
	   fixedに切り替え、ビューポート基準で確実に最上部へ固定する。 */
	body.menu-open .site-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	/* メニュー展開中は.main-navigation（緞帳オーバーレイ、position:fixed
	   inset:0）がヘッダー全体の背後に暗転パレットを敷くため、暗い背景に
	   沈んで視認性が落ちないよう切り替える。ロゴ側は
	   body.menu-open .site-logo（.site-logoのすぐ下、カスタマイザー
	   「ヘッダーロゴの色（スマホのメニュー展開時）」設定に連動）で別途
	   対応済みのため、ここでは言語切替ボタンのみを扱う。 */
	body.menu-open .language-switcher__toggle {
		color: var(--color-curtain-text);
		border-color: var(--color-curtain-border);
	}

	body.menu-open .language-switcher__toggle:hover,
	body.menu-open .language-switcher__toggle[aria-expanded='true'] {
		color: var(--color-curtain-accent-gold);
		border-color: var(--color-curtain-accent-gold);
	}

	body.menu-open .language-switcher__panel {
		background-color: var(--color-curtain-bg-elevated);
		border-color: var(--color-curtain-border);
	}

	body.menu-open .language-switcher__link {
		color: var(--color-curtain-text-secondary);
	}

	body.menu-open .language-switcher__link:hover,
	body.menu-open .language-switcher__link:focus-visible,
	body.menu-open .language-switcher__link.is-current {
		color: var(--color-curtain-accent-gold);
	}
}

/* ==========================================================================
   Components: Buttons

   .btn--outline は控えめな標準ボタン（Hero「実績を見る」等）。
   .btn--shimmer 系は「会話を始める」お問い合わせ導線専用の特別演出で、
   フッターとHeroの2箇所でのみ使い、それ以外では使わないこと
   （多用するとgradient-shimmerの"ここぞ"感が薄れるため）。
   -curtain は暗転セクション（フッター等）向け、無印は白地向け。
   ========================================================================== */
.btn {
	position: relative;
	display: inline-block;
	padding: var(--space-sm) var(--space-xl);
	font-family: var(--font-display);
	font-size: 1rem;
	letter-spacing: var(--tracking-display);
	text-decoration: none;
	border-radius: 2px;
	transition:
		color var(--duration-base) var(--ease-signature),
		border-color var(--duration-base) var(--ease-signature),
		transform var(--duration-float) var(--ease-signature),
		box-shadow var(--duration-float) var(--ease-signature);
}

/* 「線がボタンの上を通っているように見える」との指摘（scroll_thread_
   followups残タスク）の実際の原因はz-indexではなく、ボタン自体が
   無地の透明背景だったこと——スタッキング順序が正しくても、透明な
   ボタンの内側からは背後のスレッドがそのまま透けて見える。背景色を
   ページの地色に合わせて塗ることで初めて「奥に隠れる」ように見える。 */
.btn--outline {
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-accent-gold);
	color: var(--color-accent-gold);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	color: var(--color-accent-gold-hover);
	border-color: var(--color-accent-gold-hover);
	transform: translateY(-2px);
}

/* 暗転セクション（実績ギャラリー等）向けのoutlineボタン。ダーク面では
   ホバーで明るくする方向に反転させる（他のcurtain系トークンと同じ理由）。 */
.btn--outline-curtain {
	background-color: var(--color-curtain-bg);
	border: 1px solid var(--color-curtain-accent-gold);
	color: var(--color-curtain-accent-gold);
}

.btn--outline-curtain:hover,
.btn--outline-curtain:focus-visible {
	color: var(--color-curtain-accent-gold-hover);
	border-color: var(--color-curtain-accent-gold-hover);
	transform: translateY(-2px);
}

/* ::before でグラデーションのopacityを切り替えるのは、background-image
   自体はトランジションできないというCSSの制約を回避するため。 */
.btn--shimmer,
.btn--shimmer-curtain {
	isolation: isolate;
	overflow: hidden;
}

.btn--shimmer::before,
.btn--shimmer-curtain::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-signature);
}

.btn--shimmer:hover,
.btn--shimmer:focus-visible,
.btn--shimmer-curtain:hover,
.btn--shimmer-curtain:focus-visible {
	transform: translateY(-2px);
}

.btn--shimmer:hover::before,
.btn--shimmer:focus-visible::before,
.btn--shimmer-curtain:hover::before,
.btn--shimmer-curtain:focus-visible::before {
	opacity: 1;
}

.btn--shimmer {
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-accent-gold);
	color: var(--color-accent-gold);
}

.btn--shimmer::before {
	background-image: var(--gradient-shimmer);
}

.btn--shimmer:hover,
.btn--shimmer:focus-visible {
	color: var(--color-bg-base);
	box-shadow: 0 10px 30px rgb(138 106 62 / 30%);
}

.btn--shimmer-curtain {
	background-color: var(--color-curtain-bg);
	border: 1px solid var(--color-curtain-accent-gold);
	color: var(--color-curtain-accent-gold);
}

.btn--shimmer-curtain::before {
	background-image: var(--gradient-shimmer-curtain);
}

.btn--shimmer-curtain:hover,
.btn--shimmer-curtain:focus-visible {
	color: var(--color-curtain-bg);
	box-shadow: 0 10px 30px rgb(198 161 91 / 30%);
}

/* ==========================================================================
   Components: Section Label, Divider, Scroll Reveal

   TOPページ全体を「二幕構成」のスクロール体験として設計する共通言語。
   .eyebrow はHeroだけでなく各セクション見出しの小見出しとして使い回す
   （重複CSSを避けるための共通化）。.section-divider はセクション境界の
   静かな罫線で、Hero上下の線と同じ視覚言語だが、アニメーションするのは
   Heroだけ——他は動かない静止した罫線として現れる（引き算の美学＝
   演出はページ全体に薄く拡散させず、実績ギャラリー1箇所に集中させる
   ため）。.reveal は各セクションがスクロールで視界に入った際の、
   ごく控えめなフェード＋わずかな浮上（assets/js/scroll-reveal.js が
   IntersectionObserverでis-visibleクラスを付与する。GSAP不使用＝
   スクロールのたびに再生される軽量な単発トランジションのため）。
   ========================================================================== */
.eyebrow {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	color: var(--color-accent-gold);
	text-transform: uppercase;
}

/* Heroは緞帳パレットの暗転セクションのため、eyebrowもcurtain用の
   ゴールドに切り替える（.works-teaser__header .eyebrow と同じ考え方）。 */
.hero .eyebrow {
	color: var(--color-curtain-accent-gold);
}

.section-divider {
	max-width: var(--container-max-width);
	margin-inline: auto;
	border: none;
	border-top: 1px solid var(--color-border-subtle);
}

/* .reveal はCSSにベタ書きせず、JS（scroll-reveal.js）が実行時に
   対象要素へ動的に付与する（Heroのgsap.set()と同じ考え方）。
   マークアップ側は data-reveal 属性を付けるだけに留め、CSSも
   マークアップも「JSなしなら常に表示」を前提にしておくことで、
   スクリプト読み込み失敗時に本文が消えたまま固まる事故を防ぐ。 */
[data-reveal].reveal {
	opacity: 0;
	transform: translateY(1.25rem);
	transition:
		opacity var(--duration-float) var(--ease-signature),
		transform var(--duration-float) var(--ease-signature);
}

[data-reveal].reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* data-reveal-from="left|right" 用の初期位置。base側の
   translateY(1.25rem)を上書きするため、より詳細度の高いこの
   セレクタで再定義する。 */
[data-reveal].reveal.reveal--from-left {
	transform: translateX(-1.5rem);
}

[data-reveal].reveal.reveal--from-right {
	transform: translateX(1.5rem);
}

[data-reveal].reveal.reveal--from-left.is-visible,
[data-reveal].reveal.reveal--from-right.is-visible {
	transform: translateX(0);
}

/* data-reveal-indexが付与された要素は、CSS変数--reveal-indexに
   応じて開始を遅らせる。指定がない要素は0のまま＝従来通り即座に
   反応する。 */
[data-reveal].reveal {
	transition-delay: calc(var(--reveal-index, 0) * 60ms);
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* サイト全体は白基調だが、フッターだけは意図的に「緞帳」パレット
   （ダーク配色）を使い、公演が終わって幕が下りる瞬間を表現する。
   白いページを下までスクロールした先で不意に暗転することで、
   白ベースになっても損なわれた"ショーらしい緩急"を取り戻す狙い。
   （CLAUDE.md「暗転演出」方針、詳細はstyle.css冒頭のコンセプト参照） */
.site-footer {
	/* スクロールスレッド（.scroll-thread、z-index: 1）の経路は
	   Footerの中まで延ばしてある（footer.phpのdata-thread-anchor）が、
	   線を最後で唐突に止めるのではなく「Footerの不透明な背景の下に
	   自然に隠れながら最後まで動き続ける」見た目にするため、他の
	   セクション同様に本文コンテナ側をz-index: 2にして線より手前に
	   出す（詳細はstyle.css内「Front Page: Scroll Thread」参照）。 */
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xl);
	padding-block: var(--space-section-block);
	padding-inline: var(--space-content-inline);
	background-color: var(--color-curtain-bg);
	color: var(--color-curtain-text);
	border-top: 1px solid var(--color-curtain-border);
	text-align: center;
}

/* SNSリンク追加を機に、それまで「ロゴ→CTA→ナビ→コピーライト」を
   縦一列に積んでいた構成を、役割別の3カラム（ブランド／サイトマップ／
   お問い合わせ）に整理した。カラム内は左揃えにして視線の流れを安定
   させる（サイト全体の中央揃え基調から意図的に外すのは、フッターの
   情報量が増えたことに対応するための例外）。モバイルでは1カラムに
   戻し、他セクション同様の中央揃えへ統一する。 */
.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
	width: 100%;
	max-width: 64rem;
	text-align: left;
}

.footer-col--brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
}

/* フッターのロゴはheader.phpと同じアイコン+ワードマークの横組み
   ロゴ。ブランドガイドライン準拠のため色を固定し
   （--color-curtain-text）、ホバーでの変色は行わない。 */
.footer-logo {
	/* 表示色はfooter.php側のインラインstyle（カスタマイザー
	   「フッターロゴの色」設定）が指定する。 */
	display: inline-flex;
}

.footer-logo svg {
	display: block;
	/* header.phpの.site-logoと同じ規則に揃え、視認性とサイト内の
	   統一感を両立する（ブランドガイドラインが定性的に求める
	   「はっきりと読める」状態を、固定1.75remの小さめサイズより
	   確実に満たす）。 */
	height: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	width: auto;
}

.footer-tagline {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-curtain-text-secondary);
}

/* SNSアイコンはfooter-navigationの文字リンクと同じ「装飾なしの直接
   表示、ホバーで色が変わるだけ」に揃える。円背景やシャドウを足すと
   テンプレート感の強いソーシャルボタンになってしまうため避けた。 */
.footer-social {
	display: flex;
	gap: var(--space-md);
}

.footer-social__link {
	display: inline-flex;
	color: var(--color-curtain-text-secondary);
	transition:
		color var(--duration-fast) var(--ease-hover),
		transform var(--duration-fast) var(--ease-hover);
}

.footer-social__link svg {
	width: 1.25rem;
	height: 1.25rem;
}

.footer-social__link:hover,
.footer-social__link:focus-visible {
	color: var(--color-curtain-accent-gold);
	transform: translateY(-2px);
}

.footer-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-navigation a {
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--color-curtain-text-secondary);
	transition: color var(--duration-fast) var(--ease-hover);
}

.footer-navigation a:hover,
.footer-navigation a:focus-visible {
	color: var(--color-curtain-accent-gold);
}

.footer-col--cta {
	display: flex;
	align-items: flex-start;
}

.site-info p {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--color-curtain-text-secondary);
}

@media (max-width: 48rem) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
		text-align: center;
	}

	.footer-col--brand {
		align-items: center;
	}

	.footer-social {
		justify-content: center;
	}

	.footer-navigation ul {
		align-items: center;
	}

	.footer-col--cta {
		justify-content: center;
	}
}

/* ==========================================================================
   Front Page: Scroll Thread

   TOPページ全体（Hero〜Footer）を貫く、スクロール連動の一本線。
   各セクションのdata-thread-anchor属性から実測した通過点を、
   assets/js/scroll-thread.jsがCatmull-Rom→ベジェ変換して1本の
   滑らかなパスに構築する。JS未実行時は完全に非表示にし（.is-readyが
   付いた時だけ表示）、中途半端な位置で固まった線が見え続ける事故を
   防ぐ（このプロジェクトで3回作り込んだ同種のバグの再発防止）。
   ========================================================================== */
.scroll-thread {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* 「背景の手前・本文の後ろ」を実現するため、z-index: 1に明示的に
	   昇格させる。各セクションの本文コンテナ（.hero__inner、
	   .concept__pin等）はz-index: 2でこの上に来るよう個別に指定して
	   いる——CSSの積み上げ規則上、position: relative; z-index: autoの
	   子要素は親の値に閉じ込められない（親自身がz-indexを持たない限り
	   独自のスタッキングコンテキストを作らないため）。これにより、
	   実績ギャラリー等の不透明な背景は線の下に、画像を含む本文は
	   線の上に、という3層構成が両立する。 */
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-hover);
}

.scroll-thread.is-ready {
	opacity: 1;
}

/* クライアント提示の参考サイト（tokyotechnology.jp）を実機確認した
   結果、「しっかり意識させる」線は極細のヘアラインではなく、太めかつ
   柔らかい光のグローを伴う表現だと判明した。5px→10pxと太くした後も
   「全体的にもっと太くて良い」との指摘（2026-09-01）を受け、さらに
   太くした。あわせて、本文テキストの背後を通る際に色が強く当たって
   読みにくくなる（「文字と色合いが被る」）という指摘を受け、
   stroke-opacityで全体を軽く・薄くしている——太さを上げた分、
   不透明度を下げて相殺し、存在感は保ちつつ本文の可読性を邪魔しない
   ようにする。 */
.scroll-thread__line {
	stroke: url(#scroll-thread-gradient);
	stroke-width: 16;
	stroke-opacity: 0.55;
	stroke-linecap: round;
	stroke-dasharray: var(--thread-length, 0);
	stroke-dashoffset: var(--thread-offset, 0);
	filter: drop-shadow(0 0 13px rgb(138 106 62 / 40%));
}

/* 現在のスクロール位置を示す先端の光点。「自分の操作で線が伸びている」
   ことを明確に意識させるための署名要素——単なる装飾のヘアラインに
   終わらせないための、この機能の核。 */
.scroll-thread__tip {
	fill: var(--color-accent-gold);
	filter: drop-shadow(0 0 9px var(--color-accent-gold));
	animation: scroll-thread-tip-pulse 1.8s ease-in-out infinite;
	/* scroll-thread.js側でcx/cy属性ではなくtransformで毎フレーム位置を
	   動かす方式に変更したため、合成レイヤーとして扱うヒントを与える。 */
	will-change: transform;
}

@keyframes scroll-thread-tip-pulse {
	0%,
	100% {
		r: 9;
		opacity: 1;
	}

	50% {
		r: 11;
		opacity: 0.7;
	}
}

/* この線はページの装飾ではなく明確な署名要素であるため、
   reduced-motion時も線自体は完成状態（stroke-dashoffset: 0）のまま
   残す。スクロールに連動して動き続ける先端の光点だけは、動かない
   スクロールでは意味を持たなくなるので非表示にする。 */
@media (prefers-reduced-motion: reduce) {
	.scroll-thread__line {
		stroke-dashoffset: 0;
	}

	.scroll-thread__tip {
		display: none;
	}
}

/* ========================================================================== */

/* ==========================================================================
   Front Page: Hero

   「結局これまでの色違いに過ぎない」という指摘を受け、構造自体を
   ゼロから作り直した。全バージョンに共通していた「ラベル→見出し→
   補足文→ボタン2つ」という定型スタックを解体し、1つの文をポスター的な
   タイポグラフィとして扱う：2行に分解し、行ごとに極端に異なるスケール
   （小→巨大）で中央揃えに配置する。補足文は廃止、ボタンも罫線ボックス
   をやめて最小限のテキストリンクに縮小した——要素数を削り、タイポ
   グラフィの一撃だけで語る。当初は3行目を右へ字下げした階段状レイアウト
   だったが、「見出しは中央に、テキストもスクロールで奥から迫ってくる
   感じにしたい」という指摘を受け中央揃えへ変更、見出しの登場演出にも
   scaleを加えた（詳細は.hero__lineおよびassets/js/hero-animation.js）。
   さらに「奥から迫ってくる感じが出ていない」という指摘を受け、単なる
   色替えの緞帳パレットから、中心の光点が画面を覆い尽くすまで膨張する
   演出（.hero__ambient-glow）へ作り替えた。背景が完全に明るくなり
   きったところで初めて見出しが現れるため、見出し本体はライトテーマの
   トークンで組んでいる。Worksとは異なる手品にしている点は変わらず：
   Worksは「グリッド全体のアンビエント光＋タイル単位のホバー」、Heroは
   「文字そのものをカーソルの光がなぞると灯る」というテキストレベルの
   インタラクション（.hero__line::after参照）。
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	background-color: var(--color-curtain-bg);
	color: var(--color-curtain-text);
	/* ヘッダー高は1〜2行で可変のため正確な値は算出せず、概算で差し引く。
	   dvhは「モバイルブラウザのUI表示/非表示に追従して値そのものが変わる」
	   単位のため、スクロールでツールバーが折りたたまれるとHeroの高さも
	   変わり、flexの中央揃えでHero内部（見出し等）の位置が動いてしまう。
	   これによりscroll-thread.jsが計測した線の始点（.hero__mark-dot）と
	   実際の見出し位置が一瞬ズレて見える不具合が実機（iPhone 13 Pro）で
	   確認された。svhは逆に「ツールバー表示状態の高さ」で固定される単位の
	   ため、これを使うことでHero自体がツールバーの動きに反応しなくなり、
	   ズレの発生源を断つ。ツールバー折りたたみ後はHero下に折りたたみ分の
	   余白が生まれるが、その見た目の変化は許容する前提（実機確認・
	   2026-09-07判断）。 */
	min-height: calc(100svh - 5rem);
	--spot-x: 50%;
	--spot-y: 50%;
}

/* 「奥からこちらに迫ってくる」感覚の主役。中心に小さく灯った光の点
   （.hero__ambient-glow）が、スクロール進行度に連動してスケール
   アップし、画面全体を覆い尽くすまで膨張してくる
   （assets/js/hero-animation.js）。3D perspectiveは使わず、あえて
   スケール＋不透明度だけで「近づいてくる」感覚を作る——複雑な3D変形
   より実装・パフォーマンス両面のリスクが低いという判断。.hero__ambient
   自体は中央寄せのための単なる入れ物（flexで中央揃え）で、実際に
   拡大するのは内側のspan。 */
.hero__ambient {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* 進行度0〜0.5でフェードアウトする、小さく柔らかいゴールドの光点。
   サイズをvmax固定にし、下のglow（スケールアニメーション）とは独立
   させているのは、「点火」の柔らかさがスケール変化に引きずられて
   崩れないようにするため（点の大きさ自体は変わらず、ただ静かに
   消えていく）。 */
.hero__ambient-core {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16vmax;
	height: 16vmax;
	margin: -8vmax 0 0 -8vmax;
	border-radius: 50%;
	background: radial-gradient(
		circle at center,
		rgb(198 161 91 / 85%) 0%,
		rgb(198 161 91 / 35%) 45%,
		rgb(198 161 91 / 0%) 100%
	);
	pointer-events: none;
}

/* 光点を追い越して画面全体を覆い尽くすまで膨張する、洪水本体。
   サイズはvmaxベースで、どんな画面比率でも対角線を確実に覆い尽くす
   よう十分に大きく取っている（実際にはoverflow:hiddenの.heroで
   クリップされるため、はみ出し分のコストはない）。色は単純に
   --color-bg-base（サイト全体の白ベース）のみにすることで、
   フル拡大時に必ずビューポート全体が白へ変わりきることを保証して
   いる——ゴールドを混ぜたグラデーションにすると、farthest-corner
   基準の%指定次第でビューポートがゴールド域の内側に収まってしまい
   「完全に白へ変わりきる」という設計意図が崩れることを検証で確認
   したため、暖色はcoreだけに担わせている。 */
.hero__ambient-glow {
	/* flex-shrink: 0 が無いと、flexアイテムとして主軸（横方向）だけ
	   コンテナ幅に縮められ、縦長の楕円になってしまう
	   （検証中に発見・修正）。 */
	flex-shrink: 0;
	width: 260vmax;
	height: 260vmax;
	border-radius: 50%;
	background: radial-gradient(
		circle at center,
		var(--color-bg-base) 0%,
		var(--color-bg-base) 70%,
		rgb(250 249 246 / 0%) 100%
	);
	will-change: transform;
}

/* 「見出しは中央に」という指摘を受け、ヘッダーとの左端揃えをやめて
   中央揃えのポスター構成に変更した。max-widthはコンテナ幅（1200px）
   より絞っている。 */
.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 62rem;
	margin-inline: auto;
	padding-block: var(--space-section-block);
	padding-inline: var(--space-content-inline);
	text-align: center;
}

/* ブランドの小さな刻印。以前のようにeyebrow+見出しの対として直接
   結びつけず、独立した「刻印」として最上部に小さく置く。 */
.hero__mark {
	margin: 0 0 var(--space-2xl);
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	color: var(--color-accent-gold);
	text-transform: uppercase;
}

/* 見出しはprogress 0.75以降、光が画面を覆い尽くしてから初めて現れる
   （assets/js/hero-animation.js）。その時点で背景はすでに白ベースに
   変わりきっているため、色はcurtain（暗転）パレットではなく通常の
   ライトテーマトークンを使う。 */
.hero__statement {
	margin: 0 0 var(--space-2xl);
	font-family: var(--font-display);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

/* will-change: transform, opacity は、assets/js/hero-animation.jsが
   進行度0.78以降に各行へscale+opacityを同時にかけるため付与している
   （scaleは光のglowと同じく「奥から迫ってくる」感覚を文字自体にも
   与える演出の主役）。 */
.hero__line {
	position: relative;
	display: block;
	will-change: transform, opacity;
}

/* 小→巨大、というポスター的なスケール差。line-heightを行ごとに
   個別調整しているのは、極端にサイズが違う行を並べても行間が間延び/
   密着しすぎないようにするため。行間の余白は、下のhuge行が持つ巨大な
   フォントサイズに応じて増減するようclamp化している（2026-09-05、
   「窮屈」との指摘を受け0.2emから変更）。 */
.hero__line--small {
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	line-height: 1.4;
	margin-bottom: clamp(1rem, 0.5rem + 2.5vw, 2.25rem);
}

/* 文字数が3文字と少ないため、以前の9文字の見出し（クリエイションを、）
   と同じ比率で拡大すると1文字あたりが大きくなりすぎ、バランスが崩れる
   （「デカすぎて不自然」との指摘を受け縮小）。また末尾の句読点は、CJK
   の全角句読点グリフが字面の左下に寄っているため、大型見出しに使うと
   「行全体が左に寄って見える」錯視を起こす——これは既知のパターン
   （brand_design_philosophy.md参照）で、句点自体をコピーから削るのが
   確実な対処法。ここでも「驚きを。」ではなく「驚きを」としている。 */
.hero__line--huge {
	font-size: clamp(3.5rem, 1.5rem + 7vw, 7.5rem);
	line-height: 1.05;
}

/* テキストは持たない、スクロール連動の一本線（スレッド）のための
   座標参照点（data-thread-anchor、front-page.php参照）。「.」という
   文字は描かない——線の先端（SVGの発光する円、scroll-thread.js）
   自体が句点の役割を兼ねる。 */
.hero__mark-dot {
	display: inline-block;
}

/* カーソルが文字をなぞると灯る発見の演出。data-text属性に複製した
   同じ文字列を::afterで重ね描きし、そのコピーだけにradial-gradientの
   maskをかけてカーソル位置の周辺だけを見せる。本体（実テキスト）は
   常時フル装備で読めるため、この演出がなくても情報は一切欠けない
   ——ホバー可能な入力を持つ環境限定の“ご褒美”として上乗せしている
   だけ（assets/js/hero-light.js）。色は幻惑のバイオレット
   （--color-accent-mystic）を使い、サイト全体で統一している
   「ホバー・フォーカス時にだけ現れる発見の色」というルールを
   Heroでも踏襲する。 */
.hero__line::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	color: var(--color-accent-mystic);
	opacity: 0;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(180px circle at var(--spot-x) var(--spot-y), black 0%, transparent 70%);
	mask-image: radial-gradient(180px circle at var(--spot-x) var(--spot-y), black 0%, transparent 70%);
}

.hero.is-light-active .hero__line::after {
	opacity: 1;
}

/* ボタン然とした罫線ボックスをやめ、下線だけのテキストリンクにする。
   視線をタイポグラフィから逸らさない、控えめな導線。 */
.hero__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-lg);
}

.hero__link {
	padding-bottom: 0.2em;
	border-bottom: 1px solid var(--color-border-subtle);
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition:
		color var(--duration-fast) var(--ease-hover),
		border-color var(--duration-fast) var(--ease-hover);
}

.hero__link:hover,
.hero__link:focus-visible {
	color: var(--color-accent-gold);
	border-color: var(--color-accent-gold);
}

/* スクロールヒント。ページロード時にホイール入力が「進行度」の操作に
   なっていることを伝える最小限の案内。矢印はゆっくり上下に揺れる
   だけの控えめなループにし、他セクションでは使っていない跳ねる
   （elastic/back）イージングは避けている。 */
.hero__hint {
	position: absolute;
	left: 50%;
	bottom: var(--space-xl);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	transform: translateX(-50%);
	color: var(--color-curtain-text-secondary);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	transition: opacity var(--duration-base) var(--ease-hover);
}

.hero__hint svg {
	animation: hero-hint-bob 1.8s ease-in-out infinite;
}

@keyframes hero-hint-bob {
	0%,
	100% {
		transform: translateY(0);
		opacity: 0.5;
	}

	50% {
		transform: translateY(4px);
		opacity: 1;
	}
}

/* 進行度バー。ロック中、スクロール入力がどれだけ「見出しの点灯」に
   変換されたかを示す控えめな帯。他セクションの罫線と同じ発想
   （--color-curtain-border/accent-gold）を再利用している。 */
.hero__progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 2px;
	background-color: var(--color-curtain-border);
}

.hero__progress-fill {
	height: 100%;
	background-color: var(--color-curtain-accent-gold);
	transform: scaleX(0);
	transform-origin: left center;
}

/* ==========================================================================
   Front Page: Concept

   二幕構成における「一呼吸」のセクション。CTAも装飾も持たない、
   eyebrow+一文だけの最小構成——ここに新しい要素を足すのではなく、
   既存の一文自体にスクロール連動の動きを与える方針にした
   （「殺風景すぎる」という指摘への対応。詳細は
   docs/superpowers/specs/2026-08-31-concept-service-profile-motion-design.md）。

   グレースフルデグラデーションの原則（.revealと同じ考え方）：既定の
   CSSは常に「JSなしでも成立する、読める最終状態」にし、JSが実際に
   動いている場合だけ.is-scrub-activeクラスを付与して、250vhの縦長化・
   position: sticky・フレーズの沈み込み演出を有効にする。最終レビューで
   「JS読み込み失敗時に文章が永久にグレーのまま・巨大な空白が残る」
   という逆向きの実装（既定で隠す／既定で拡張する）になっていたバグを
   発見し、この向きに直した。
   ========================================================================== */
.concept {
	position: relative;
	/* concept-scrub.jsが実行されない場合（JS失敗・reduced motion）の
	   既定値。「常に読める最終状態」というグレースフルデグラデーション
	   の原則を.concept__companion-glowにも適用し、フルに満ちた状態を
	   既定にする（.concept__phraseの既定=フルopacityと同じ考え方）。
	   is-scrub-active時はJSがsection要素へ直接インラインで上書きする。 */
	--concept-progress: 1;
}

/* dvhはツールバー折りたたみに追従して値自体が変わる単位のため、
   concept-scrub.jsの進捗計算（rect.height - window.innerHeight を
   分母に使う）と組み合わせると、ツールバー遷移の瞬間に分母そのものが
   変わってフレーズ切り替えのタイミングが飛ぶ不具合があった
   （Heroのスレッド始点ズレと同根、実機iPhone 13 Proで確認）。svhは
   ツールバー表示状態の高さで固定されるため、この揺れを起こさない。
   concept-scrub.js側もwindow.innerHeightではなく.concept__pinの実測
   高さから逆算する方式に変更し、両者の基準を統一している。 */
[data-concept-scrub].is-scrub-active {
	height: 250svh;
}

.concept__pin {
	position: relative;
	/* スクロールスレッド（z-index: 1）より本文を手前に出すための
	   明示的な指定。 */
	z-index: 2;
	display: flex;
	align-items: center;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-block: var(--space-2xl);
	padding-inline: var(--space-content-inline);
}

/* ヘッダー（sticky, 高さ約5rem）の下に潜り込まないよう、Heroの
   `calc(100dvh - 5rem)` と同じ考え方でオフセットする。 */
.is-scrub-active .concept__pin {
	position: sticky;
	top: 5rem;
	height: calc(100svh - 5rem);
	padding-block: 0;
}

.concept__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--space-lg);
	width: 100%;
}

.concept__inner {
	grid-column: 2;
	max-width: 30rem;
}

.concept__statement {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.7;
	letter-spacing: var(--tracking-display);
}

/* 既定（.is-scrub-activeが無い＝JS未実行）は常時「本文のインク
   カラー・フルオパシティ」の読める状態にする。.is-scrub-activeが
   付いた場合のみ、セカンダリカラーへ沈める——opacityではなく色の
   置き換えだけにしているのは、0.45のような低opacityがWCAG AAの
   コントラスト基準（3:1）を満たせないと最終レビューで指摘された
   ため（--color-text-secondaryは単色で約4.7:1）。 */
.concept__phrase {
	color: var(--color-text-primary);
	transition: color var(--duration-base) var(--ease-hover);
}

.is-scrub-active .concept__phrase {
	color: var(--color-text-secondary);
}

.is-scrub-active .concept__phrase.is-active {
	color: var(--color-text-primary);
}

/* 「白背景に文字だけが続く」という指摘への対応（2026-09-05、5代目）。
   魔法陣リング→ロゴマーク→円+三角形の幾何学図形→輪ゴムの非対称交差
   モチーフ、といずれも「AI感・チープ・手書き感」等の理由で撤回。
   ユーザー提示の参考（Rabbit Hole商品写真の虹色クロームリング、および
   奥行き・発光のレイヤー構造を持つ参考コンポーネント）を踏まえ、
   最終的に「発光するワイヤーフレーム球体」に変更した。実際のCSS 3D
   変形（rotateX/rotateY、transform-style: preserve-3d）でリングを
   配置しているため、ベジエ曲線の手描き感が原理的に発生しない。
   .concept__gridの左カラム（テキストが無く空白のまま使われていな
   かった）に配置する。 */
.concept__companion {
	grid-column: 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ロゴマークではないため、クリアスペース確保やテキストとの間隔を
   気にする必要がない（以前のロゴ案で問題になった、スクロールスレッド
   との近接によるブランドガイドライン抵触は今回のモチーフには適用外）。
   9remは「小さすぎる」との指摘（2026-09-05）を受け、.concept__grid
   左カラム（1200px時で約22.5rem）に収まる範囲まで大きく広げた。 */
/* perspectiveが実際には無指定になっていたバグを発見・修正（2026-09-05、
   「迫力が減った」「若干楕円っぽい」との指摘の事実確認中に発覚）。
   下の.concept__sphere-tiltのコメントは「perspectiveを.concept__seal
   自身に持たせ」と書いていたが、実際の宣言が漏れていた——perspective
   無しだと3D回転が奥行きのない正投影的な見え方になり、立体感が弱く
   丸みも崩れて見える。56remは球体の大きさ（14〜20rem）の3〜4倍程度で、
   過度な魚眼効果を避けつつ立体感を出す目安値。 */
.concept__seal {
	position: relative;
	width: clamp(14rem, 8rem + 18vw, 20rem);
	height: clamp(14rem, 8rem + 18vw, 20rem);
	perspective: 56rem;
}

/* 発光本体。参考にしたコンポーネントはグリッド・ヘイズ・コアライト・
   ブルーム・ノイズ・ビネットの6層構成だったが、フル画面前提の演出
   であり、9rem程度の小さな箱に収めるここでは冗長なため、意味の
   ある「発光」だけを1層に統合した。白ベースの上で光らせるため、
   参考実装のmix-blend-mode: screen（黒背景前提。白背景では画面が
   明るくなる方向にしか作用しないため実質何も起きない）は使わず、
   .hero__ambient-coreと同じ「rgba()のradial-gradientを直接重ねる」
   方式に統一している。opacityを直接--concept-progressに紐付けて
   いるのは、.concept__phraseの既定値と同じグレースフルデグラデー
   ションの原則（JS未実行時は.concept側の既定値1が効き、常時フル
   発光の「読める最終状態」になる）。 */
.concept__sphere-glow {
	position: absolute;
	inset: -15%;
	border-radius: 50%;
	background: radial-gradient(
		circle at center,
		rgb(138 106 62 / 55%) 0%,
		rgb(232 217 190 / 30%) 45%,
		rgb(138 106 62 / 0%) 75%
	);
	filter: blur(1rem);
	opacity: var(--concept-progress, 1);
	transition: opacity var(--duration-base) var(--ease-hover);
}

/* perspectiveを.concept__seal自身に持たせ、tilt（静的な傾き）と
   spin（自転アニメーション）を別要素に分けている。両方を1つの
   要素に同居させると、CSSアニメーションが対象のtransformプロパティ
   全体を上書きしてしまい、静的な傾きが自転中だけ消える不具合が
   起きるため（参考コンポーネントで実際に踏んだ問題）。
   バースト演出は当初@keyframes+animation-fill-mode: forwardsで
   実装していたが、「戻り方が急すぎて不自然」との指摘（2026-09-05）
   を受けて調査した結果、forwardsで止めた値からアニメーションが
   外れる（.is-burst解除）瞬間、同じプロパティにtransitionを足しても
   一切補間されず即座にスナップすることを実機で再現・確認した
   （Chromiumの既知の挙動——「アニメーションが保持していた値」から
   transitionへ滑らかに引き継がれることはない）。そのためanimation
   自体をやめ、.is-burst有無だけで切り替わる素のtransitionに変更した
   （下記参照）。往路・復路とも同じtransitionが効くため厳密な意味での
   非対称ではなくなったが、往路は0.6s・復路は0.8sと速度を変えることで
   「弾け飛ぶ勢い」と「静かに戻ってくる」の質感の違いは残している。
   rotateYの目標値を376deg（=360+16、-14degから見て390deg分の回転）
   にしているのは、-14と346（=旧keyframesの終端値）が数学的に同一
   角度（mod 360）で回転が全く発生しなかった反省を踏まえ、transitionが
   実際に大きく回転して見えるよう、周回を含む明示的な数値差を
   与えるため。 */
/* 「復路（フェードイン）の間だけスクロールスレッドの線がかくつく、
   モバイル幅限定」との指摘（2026-09-05）について。will-change追加や
   回転の撤去では直らず、実機で「バーストするとモバイルで横スクロール
   バーが出る」ことが判明——真因はscale(1.8)で見かけの大きさが
   14rem×1.8≈403pxになり、多くのモバイル幅を超えていたにも関わらず
   どこにもクリップされておらず、ページのスクロール可能領域そのものを
   広げていたこと（opacity: 0で不可視でもレイアウト上の大きさは
   保持される）。一度は.concept__seal側にoverflow: hiddenを足して
   対処したが、拡大が箱の外へ膨らんでいく演出の迫力が失われ、箱の
   輪郭も四角く見えてしまう副作用があったため撤回。次にhtml/body側の
   overflow-x: hiddenも試したが、position: stickyの基準となる
   「最も近いスクロールコンテナ」の判定を狂わせてしまい、Concept
   セクションのスクロール連動ピン留めが機能しなくなる重大な副作用が
   あったため即座に撤回した。最終的に、モバイル用の.concept__companion
   （下のメディアクエリ側）に、通常表示より十分大きく・かつビュー
   ポート幅の90%を絶対上限としたoverflow: hiddenを持たせる形に
   落ち着いた——通常表示は箱の内側に十分な余白があるため見た目は
   一切変わらず、バースト時の拡大もこの箱の中でだけ大きく膨らめる
   （ページ全体のスクロール領域には影響しない）。回転（rotateYの
   変化）は「元の感じが良かった」との
   指摘を受けて復元した（下のis-burstルール参照）。あわせて、
   モバイルで.concept__seal（14rem=224px）が.concept__companion
   （テキスト分の高さしかない約123px）を上下にはみ出していた点も、
   .concept__companion自体を球体と同じ寸法にすることで解消済み
   （表示位置・見た目は変えていない）。 */
.concept__sphere-tilt {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transform-style: preserve-3d;
	transform: rotateX(24deg) rotateY(-14deg) scale(1);
	opacity: 1;
	will-change: transform, opacity;
	transition:
		transform 0.8s var(--ease-hover),
		opacity 0.8s var(--ease-hover);
}

/* will-change: transformで、この継続回転（120秒×無限ループ）を
   専用のコンポジタレイヤーに昇格させる——「スクロールスレッドの線が
   ガタつく」という指摘（2026-09-05）を受けての予防的対応。8本の
   リングの重なりを毎フレーム周囲と一緒に再描画させず、GPU側の
   回転のみで完結させることで、同時に動いているscroll-thread.jsの
   rAFループ（SVGのstroke-dashoffset等を毎フレーム書き換える、
   layout/paintを伴う処理）と描画予算を取り合わないようにする。 */
.concept__sphere-spin {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	will-change: transform;
	animation: concept-sphere-spin 120s linear infinite;
}

/* 個々のリング（8本、front-page.php側でrotateY/rotateXの角度を
   ハードコード）。.concept__wire自体は常時シルバーの薄い球体として
   見える——「進行度0で完全に不可視」ではなく「淡いシルバーの球体が
   最初から存在し、ゴールドが満ちていく」という今回の演出意図の
   ため（以前の「陣」とは異なる設計判断）。内側の.concept__wire-glow
   はゴールド版を同じ位置に重ね、opacityだけを--concept-progressに
   紐付けてクロスフェードさせる——color-mix()等の新しい色関数に
   依存せず、opacityという確実にサポートされているプロパティだけで
   完結させるため。 */
.concept__wire {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--color-accent-silver);
}

/* box-shadowによる個別グロー（8本×継続回転中）は、回転のたびに
   周辺と一緒に再描画されるコストが無視できないため外した——全体の
   発光は既に.concept__sphere-glowが1層でまとめて担っている
   （2026-09-05、スクロールスレッドの描画ガタつき対策の一環）。 */
.concept__wire-glow {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--color-accent-gold);
	opacity: var(--concept-progress, 1);
	transition: opacity var(--duration-base) var(--ease-hover);
}

/* 完成の瞬間（進行度1到達）、球体全体が3D回転しながら拡大・
   フェードアウトする——「こちらに3D回転（拡大）しフェードアウト」
   という要望（2026-09-05）を球体に流用。transitionベースにした
   ことで、途中でスクロール方向が反転した場合も現在の補間値から
   自然に逆方向へ滑らかに移行する（keyframesアニメーションの
   restartでは得られない利点）。rotateYは376deg（-14degから見て
   390deg分の回転）にし、周回を含む明示的な数値差を与えて実際に
   大きく回転して見えるようにしている——一時的にscale/opacityのみに
   簡略化する変更を試したが「回転の感じが元と変わった、元の方が
   良かった」との指摘（2026-09-05）を受けて回転を復元した。実機で
   確認されたかくつきの原因は回転そのものではなく、scale(1.8)が
   ページの横スクロール可能領域を広げていたことだった（モバイル用
   .concept__companionのoverflow: hiddenで対応済み、詳細はモバイル
   メディアクエリ側の該当コメント参照——html/body側にoverflow-x:
   hiddenを付ける案も試したが、position: stickyの基準が狂う副作用が
   あったため撤回した）。画面全体を
   覆っていた衝撃波リングは、球体自体の発光・回転で十分な驚きが
   あるとの判断で撤去した（--flash-x/--flash-y絡みの計算も
   concept-scrub.js側から削除済み）。 */
.concept__companion.is-burst .concept__sphere-tilt {
	transform: rotateX(24deg) rotateY(376deg) scale(1.8);
	opacity: 0;
	transition:
		transform 0.6s var(--ease-hover),
		opacity 0.6s var(--ease-hover);
}

/* 「モバイルで数秒に一回画面が勝手に動く」不具合への対応
   （2026-09-05）。.concept__sphere-tiltの拡大・フェードアウトは
   forwardsで止まって見えるが、その内側の.concept__sphere-spinは
   独立したanimationを持つため、不可視になった後も120秒周期の回転を
   永久に続けていた——scale(1.8)された、常時回転し続ける
   transform-style: preserve-3dの塊がモバイルのposition: absolute;
   inset: 0のコンテナ内に居座り続けることになり、モバイルブラウザの
   動的ツールバー（アドレスバー）の表示判定を定期的に揺らしていたと
   考えられる。バースト後は見えないのだから回転を続ける理由が無いため、
   ここで明示的に停止する。 */
.concept__companion.is-burst .concept__sphere-spin {
	animation-play-state: paused;
}

@keyframes concept-sphere-spin {
	from {
		transform: rotateY(0deg) rotateX(0deg);
	}

	to {
		transform: rotateY(360deg) rotateX(360deg);
	}
}

@media (max-width: 48rem) {
	.concept__grid {
		grid-template-columns: 1fr;
		position: relative;
	}

	.concept__inner {
		grid-column: 1;
		max-width: none;
		/* 球体を「テキストの背面」に置くため、非配置要素のままだと
		   position: absoluteの.concept__companionより下に沈んで
		   しまう（非配置要素は配置要素より先に描画される、というCSSの
		   既定の重ね順のため）。position: relativeを与えて配置要素
		   同士の比較に持ち込み、z-indexで確実に手前へ出す。 */
		position: relative;
		z-index: 1;
	}

	/* モバイルでは1カラムになるため、テキストの背面に大きめの球体を
	   中央揃えで配置する（「上部ではなく背面に置いてほしい」との
	   要望、2026-09-05）。当初はinset: 0で.concept__gridいっぱいに
	   広げていたが、.concept__grid自体はテキスト分の高さ（実測約
	   123px）しかなく、球体（14rem=224px）が上下に約50pxずつ
	   はみ出す形になっていた——これがスクロールスレッドのかくつき
	   不具合の一因だったため、.concept__companionの寸法を球体と
	   独立させ、中央絶対配置にした。
	   width/heightをmin(90vw, 19rem)にしてoverflow: hiddenを
	   足しているのは別件で、バースト時のscale(1.8)（球体14rem×1.8＝
	   約403px、モバイル幅を超える）がどこにもクリップされず
	   ページ全体の横スクロール可能領域を広げてしまう不具合への対応
	   （html/body側でのoverflow-x: hiddenはposition: stickyを壊す
	   副作用があったため撤回、詳細はis-burstルール該当コメント
	   参照）。19rem（球体14rem比で約1.36倍、内側の.concept__sphere-glow
	   のにじみより十分大きい）は通常表示時に余白として機能し見た目に
	   影響しないが、90vwを絶対上限にしていることで、バーストの拡大が
	   どれだけ大きくなってもビューポート幅を超えることは無い。 */
	.concept__companion {
		grid-column: 1;
		grid-row: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		width: min(90vw, 19rem);
		height: min(90vw, 19rem);
		transform: translate(-50%, -50%);
		overflow: hidden;
		margin-bottom: 0;
		z-index: 0;
		pointer-events: none;
	}

	.concept__seal {
		width: 14rem;
		height: 14rem;
	}
}

/* ==========================================================================
   Front Page: Service

   カード＋アイコンという最もテンプレート的な構成を避け、劇場の
   プログラム（演目表）のように名称と説明を横並びの行として提示する。
   Conceptと同じtall container + position: stickyの構造を導入するが、
   リストは1件ずつではなく全体が1つのタイミングで一斉に（staggerを
   伴って）像を結ぶ——件数に依存しないスクロール距離にするための
   選択（詳細はdocs/superpowers/specs/2026-08-31b-...-design.md）。
   ========================================================================== */
.service {
	position: relative;
}

.service__pin {
	position: relative;
	/* スクロールスレッド（z-index: 1）より本文を手前に出すための
	   明示的な指定。 */
	z-index: 2;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-block: var(--space-2xl);
	padding-inline: var(--space-content-inline);
}

.service__header {
	max-width: 30rem;
	margin: 0 0 var(--space-xl);
}

.service__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

/* 「すべての製品を見る」だけ画面中央に置く指示。.btnは
   display: inline-blockのため、そのままではブロック親の中で左寄せに
   なる。ここだけwidth: fit-content + margin-inline: autoで中央揃えに
   する（Contact/Wholesale等、他のCTAは左寄せのまま踏襲するため、
   .btn自体ではなくこの文脈だけを対象にする）。 */
.service__pin > .btn {
	display: block;
	width: fit-content;
	margin-inline: auto;
}

/* ==========================================================================
   Products カルーセル（旧: sticky pin + テキストリストの一斉リビール）

   旧実装は固定高さのsticky pinに5件ぶんのテキストを同時に詰め込む構造
   だったため、ノートPCのように横幅は広いが縦が短い画面ではみ出す
   不具合があった（モバイル幅は通常表示へのフォールバックで対処済みだった
   が、ノートPCサイズは未対応だった）。写真を主役にする改修に合わせ、
   常に「1件ぶん」の高さしか要らないカルーセル形式に作り替えることで、
   この問題を構造的に解消する（assets/js/service-carousel.js）。
   ========================================================================== */
.service-carousel {
	margin-bottom: var(--space-xl);
}

.service-carousel__viewport {
	overflow: hidden;
	/* Z軸を含めた回転（rotateY・rotateZ）に奥行きを持たせるための
	   消失点。値が小さいほど遠近感が強く出るが、行き過ぎると安っぽい
	   ハデさになるため、カード1枚がゆっくり傾いて像を結ぶ程度に
	   抑えられる長め（1400px）の値にしている。 */
	perspective: 1400px;
}

/* グリッドの同一セル（1列1行）にスライドを全件重ねて配置する定番手法。
   複数の要素が同じセルを共有すると、行の高さは自動的に「その時点で
   最も高いスライド」に合わせて決まるため、アクティブなスライドが
   入れ替わっても高さがガクッと変わらない（JSでの高さ計測が不要）。 */
.service-carousel__track {
	display: grid;
	touch-action: pan-y;
}

.service-carousel__slide {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-lg);
	pointer-events: none;
}

.service-carousel__slide.is-active {
	pointer-events: auto;
}

/* 写真だけがZ軸を含めた回転（rotateY＋rotateZ）でゆっくり像を結ぶ
   ようにする。単純な位置移動や拡大（2D）だけでは「動きが乏しい」
   という指摘だったため、奥行き方向の傾きを加えて立体的に切り替わる
   ようにした。本文（.service-carousel__copy）まで一緒に回転させると
   傾いた文字が一瞬読みにくくなるため、回転は写真側だけに限定し、
   本文は単純なフェードで少し遅れて追従させる（下記参照）。
   既存の--ease-signatureは「最初に勢いよく動いて最後にゆっくり止まる」
   曲線のため、durationを伸ばしても体感的には最初の数百msでほぼ動き
   切ってしまい「速い」という指摘が続いた。ここでは代わりに前半・後半で
   加減速が対称なease-in-outを使い、1500ms全体を通してゆっくり動いて
   いる実感が出るようにしている（--duration-fast・--ease-hover等の
   即応系トークンは使わない）。 */
.service-carousel__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--glass-border);
	opacity: 0;
	transform: rotateY(-16deg) rotateZ(-3deg) scale(0.93);
	backface-visibility: hidden;
	transition:
		opacity 1500ms ease-in-out,
		transform 1500ms ease-in-out;
}

.service-carousel__slide.is-active .service-carousel__media {
	opacity: 1;
	transform: rotateY(0deg) rotateZ(0deg) scale(1);
}

/* 静止画のままだと写真が「貼り付いた画像」に見えてしまうため、
   表示中のスライドだけゆっくり4秒かけて1.08倍までズームし続ける
   （いわゆるケンバーンズ効果）。非アクティブへ戻ると即座にscale(1)に
   戻るが、その瞬間は親.service-carousel__media側のopacity: 0で
   見えないため、リセットの唐突さは表に出ない。 */
.service-carousel__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 4s linear;
}

.service-carousel__slide.is-active .service-carousel__img {
	transform: scale(1.08);
}

/* カード全体（.service-carousel__slide）の回転にテキストも一緒に
   乗せると、傾いた文字が一瞬読みにくくなるため、本文だけは回転させず
   不透明度のみをカードよりわずかに遅らせてフェードインさせる。 */
.service-carousel__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
	opacity: 0;
	transition: opacity 950ms ease-in-out 400ms;
}

.service-carousel__slide.is-active .service-carousel__copy {
	opacity: 1;
}

/* モバイル幅では長い商品名が折り返す際、末尾の1〜2文字だけが次行に
   孤立する（widow）ことがあったため、text-wrap: balanceで折り返し
   位置を自動調整する（非対応ブラウザでは通常の折り返しにフォール
   バックするだけで実害はない）。 */
.service-carousel__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.4rem;
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
	text-wrap: balance;
}

.service-carousel__desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

/* 矢印・ドットは画像の上に重ねず、下に専用の操作列を設けて配置する。
   画像帯に重ねる方式も検討したが、2カラムレイアウトでは右カラムの
   テキスト・リンクと矢印ボタンが衝突しやすく、複雑な回避策が必要に
   なるため採用しなかった。 */
.service-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

/* 矢印ボタンはヘッダー等と同じグラスモーフィズム調（--glass-*）。
   ブランド方針により縁取りはゴールドではなくシルバー系にする。 */
.service-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid var(--glass-border);
	background-color: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	color: var(--color-text-primary);
	font-size: 1.1rem;
	cursor: pointer;
	transition: color var(--duration-fast) var(--ease-hover);
}

.service-carousel__arrow:hover,
.service-carousel__arrow:focus-visible {
	color: var(--color-accent-mystic);
}

.service-carousel__dots {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.service-carousel__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--color-border-subtle);
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease-hover),
		transform var(--duration-fast) var(--ease-hover);
}

.service-carousel__dot[aria-current='true'] {
	background-color: var(--color-accent-gold);
	transform: scale(1.3);
}

@media (max-width: 48rem) {
	.service-carousel__slide {
		grid-template-columns: 1fr;
	}

	.service-carousel__media {
		aspect-ratio: 3 / 2;
	}
}

/* ==========================================================================
   Front Page: Works Teaser（実績ギャラリー）

   二幕構成における唯一の暗転セクション。ページ全体で唯一、演出に
   予算をかける場所——だからこそ、他セクションでは使わない装置
   （非対称グリッド／スクロール連動の点灯演出／カーソル追従の
   スポットライト／ホバーで他が沈む舞台照明）をここに集中させ、
   それ以外のセクションは引き算のまま保っている。アイコンや
   パーティクルではなく、実在する舞台照明の物理をそのまま演出の
   根拠にしている。ヘッダー/フッターと同じ「背景は全幅、
   コンテンツは可読幅」の2層構造。
   ========================================================================== */
.works-teaser {
	position: relative;
	/* このセクション自身にはz-indexを指定しない（auto のまま）。
	   スクロールスレッド（.scroll-thread、z-index: 1）より本文を
	   手前に出したいが、セクション自体にz-indexを与えると
	   position: relative; z-index: autoの子要素（.works-teaser__inner
	   等）がその値に閉じ込められ、背景と本文を別々に扱えなくなる
	   （実績画像の上を線が横切ってしまう不具合の原因だった）。
	   このセクション自身をautoのままにしておけば、本体の不透明な
	   背景だけが自然にスレッドの下（z-index: autoの層）に沈み、
	   .works-teaser__inner側で明示的にz-index: 2を指定することで
	   画像を含む本文だけがスレッドの上に出てくる。 */
	overflow: hidden;
	background-color: var(--color-curtain-bg);
	color: var(--color-curtain-text);
	padding-block: var(--space-section-block);
	--spot-x: 50%;
	--spot-y: 50%;
}

/* カーソルに追従するアンビエントな光暈。assets/js/works-spotlight.js が
   mousemoveのたびに --spot-x/--spot-y を書き換え、is-spotlight-active
   クラスで表示・非表示を切り替える。半径を広め・不透明度を極めて
   低くしているのは、独立した「発光オブジェクト」に見せるのではなく、
   舞台の奥に漂う霞のような気配だけを残すため。 */
.works-teaser::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(
		480px circle at var(--spot-x) var(--spot-y),
		rgb(198 161 91 / 14%),
		transparent 70%
	);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-hover);
	pointer-events: none;
}

.works-teaser.is-spotlight-active::before {
	opacity: 1;
}

.works-teaser__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--space-content-inline);
}

.works-teaser__header {
	max-width: 30rem;
	margin: 0 0 var(--space-xl);
}

.works-teaser__header .eyebrow {
	color: var(--color-curtain-accent-gold);
}

.works-teaser__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-curtain-text);
}

/* 非対称グリッド：先頭の実績（grid-column: 1 / -1）だけを全幅の
   「リード写真」にし、残りは3列の通常サイズに並べる。均等なマス目の
   繰り返しを避け、雑誌の扉ページのような強弱をつける。 */
.works-teaser__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.works-teaser__item:first-child {
	grid-column: 1 / -1;
}

.works-teaser__item:first-child .works-teaser__thumb {
	aspect-ratio: 21 / 9;
}

.works-teaser__item:first-child .works-teaser__name {
	font-size: 1.4rem;
}

.works-teaser__item {
	display: block;
	text-decoration: none;
	color: inherit;
}

.works-teaser__thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--space-sm);
	border: 1px solid var(--color-curtain-border);
	background-color: var(--color-curtain-bg-elevated);
	overflow: hidden;
	transition:
		filter var(--duration-base) var(--ease-signature),
		transform var(--duration-base) var(--ease-signature);
}

.works-teaser__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 舞台照明の物理：1枚にカーソルが乗ると、そこだけスポットライトが
   当たったように留まり、他の実績は暗く沈む。“暗転オーバーレイ＋
   中央アイコン”という量産型ポートフォリオの定番ホバーとは異なり、
   実際に光源が1点に絞られる現象をそのままCSSに翻訳している。
   :hover の対象を .works-teaser__grid にすることで、子要素のどれかに
   カーソルが乗っている間ずっと「舞台照明オン」の状態になる
   （:has()を使わず幅広いブラウザで動くようにするための書き方）。 */
.works-teaser__grid:hover .works-teaser__item:not(:hover) .works-teaser__thumb {
	filter: brightness(0.5);
}

.works-teaser__item:hover .works-teaser__thumb {
	transform: scale(1.015);
}

/* カテゴリー札：常時は画像の下端の外に隠れており（translateY(100%)）、
   ホバー/フォーカス時だけ舞台のプレートがせり上がるように現れる。
   暗転オーバーレイ＋中央アイコンという量産型ポートフォリオの定番
   ホバーを避け、会場の比喩に忠実な動きにしている。タイトル
   （works-teaser__name）はこの装飾と無関係に常時表示のままなので、
   ホバーの効かないタッチデバイスでも実績名は必ず読める。 */
.works-teaser__tag {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--space-xs) var(--space-sm);
	background-color: var(--color-curtain-bg);
	border-top: 1px solid var(--color-curtain-accent-gold);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-curtain-accent-gold);
	transform: translateY(100%);
	transition: transform var(--duration-base) var(--ease-signature);
}

.works-teaser__item:hover .works-teaser__tag,
.works-teaser__item:focus-visible .works-teaser__tag {
	transform: translateY(0);
}

.works-teaser__name {
	font-family: var(--font-display);
	font-size: 1.05rem;
	letter-spacing: var(--tracking-display);
	color: var(--color-curtain-text);
	transition: color var(--duration-fast) var(--ease-hover);
}

.works-teaser__item:hover .works-teaser__name,
.works-teaser__item:focus-visible .works-teaser__name {
	color: var(--color-curtain-accent-gold);
}

/* スクロールで1枚ずつ「点灯」する。[data-reveal].reveal は
   scroll-reveal.jsが実行時にのみ付与するため（グレースフルデグレード
   の原則はここでも維持）、JS未実行時はタイルが常に表示された状態の
   ままになる。単なるフェードではなくfilter: brightness()も同時に
   動かすことで、暗がりから照明が灯るような登場にしている。
   is-visible が付いた後、nth-childで各タイルのtransition-delayを
   ずらし、順番に灯っていくように見せている。 */
[data-reveal].reveal .works-teaser__item {
	opacity: 0;
	transform: translateY(1.25rem);
	filter: brightness(0.35);
	transition:
		opacity var(--duration-float) var(--ease-signature),
		transform var(--duration-float) var(--ease-signature),
		filter var(--duration-float) var(--ease-signature);
}

[data-reveal].reveal.is-visible .works-teaser__item {
	opacity: 1;
	transform: translateY(0);
	filter: brightness(1);
}

[data-reveal].reveal.is-visible .works-teaser__item:nth-child(2) {
	transition-delay: 0.12s;
}

[data-reveal].reveal.is-visible .works-teaser__item:nth-child(3) {
	transition-delay: 0.24s;
}

[data-reveal].reveal.is-visible .works-teaser__item:nth-child(4) {
	transition-delay: 0.36s;
}

@media (max-width: 48rem) {
	.works-teaser__grid {
		grid-template-columns: 1fr;
	}

	.works-teaser__item:first-child {
		grid-column: 1;
	}

	.works-teaser__item:first-child .works-teaser__thumb {
		aspect-ratio: 4 / 3;
	}

	.works-teaser__item:first-child .works-teaser__name {
		font-size: 1.05rem;
	}
}

/* ==========================================================================
   Front Page: Profile

   実績ギャラリー（暗転）から白へ戻り、「人」に焦点を戻すセクション。
   数字を並べる「選ばれる理由」的な提示はせず、一段落の物語のみ。
   写真は未着手のため、暫定的に罫線だけの余白ブロックを置いている。
   ========================================================================== */
.profile {
	/* position: relativeが無いと、position: absoluteのスクロール
	   スレッドがCSSの積み上げ規則上こちらより手前に描画され、線が
	   本文の前を横切ってしまう（Concept/Serviceは既にposition:
	   relativeを持っていたため発生していなかった）。 */
	position: relative;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-block: var(--space-2xl);
	padding-inline: var(--space-content-inline);
}

.profile__grid {
	/* スクロールスレッド（z-index: 1）より本文を手前に出すための
	   明示的な指定。 */
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--space-2xl);
	align-items: center;
}

.profile__portrait {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid var(--color-border-subtle);
	background-color: var(--color-bg-elevated);
}

.profile__portrait-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile__title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.profile__text {
	max-width: 34rem;
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

/* モバイル幅ではかつてaspect-ratioを4/3（横長）に切り替えていたが、
   これは実写真を追加する前のプレースホルダー時代からの指定で、実際の
   写真（顔と輪ゴムを持つ手の両方が縦に離れた構図）で中央クロップすると
   どちらかが必ず切れてしまう。3/4を維持し画像をノークロップで見せる
   ことで解決する（縦に長くなる分はモバイルの1カラム構成なので許容）。 */
@media (max-width: 48rem) {
	.profile__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Page: About

   「プロフィール（経歴タイムライン）」単体のページから、ブランド理念
   ・経歴・合作・拠点をまとめて語る構成へ拡張。唯一の大きな仕掛けは
   Brand Identityセクション（.about-brand、中核コピーがスクロールに
   連動して奥から迫る）に集中させ、他のセクションは静かなfade+浮上
   （data-reveal、サイト共通のパターン）にとどめる。以前のタイムライン
   案は「輪ゴムの弧」が伝わらず撤回済み（docs/superpowers/plans/
   2026-09-02-about-page.md参照）。
   ========================================================================== */
.about-page {
	position: relative;
}

/* about-page__sectionと同じ64remに揃え、ページ全体で外枠の幅を統一。
   見出し・リード文自体はabout-page__lead側の34rem上限で読みやすさを
   別途担保しているため、外枠を広げても行長は伸びない。 */
.about-page__intro {
	max-width: 64rem;
	margin: 0 auto;
	padding: var(--space-section-block) var(--space-content-inline) var(--space-xl);
}

.about-page__title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.about-page__lead {
	margin: 0;
	max-width: 34rem;
	font-size: 1.05rem;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

/* Brand Identity：唯一の大きな仕掛け。スクロール量に応じてキーワードが
   perspective奥から手前へ迫る（about-brand.js）。GSAPには依存しない。 */
.about-brand {
	position: relative;
}

/* フレーム数（ロゴ1＋見出しコピー5）に比例させた高さ。1フレームあたり
   84vh（420vh/5）のペース感を、フレームを追加しても変えないため
   84vh * 6 = 504vhとする。 */
.about-brand__track {
	position: relative;
	height: 504vh;
}

/* --about-brand-header-offsetはabout-brand.jsが.site-headerの実測高さ
   （可変のため固定値では概算できない）を都度セットするCSS変数。
   top/heightをこの分だけ差し引くことで、ページ最上部を開いた時点で
   既にstageの本来位置がヘッダー直後（=stickyのtopオフセット）に
   一致し、スクロール開始と同時に反応する（ヘッダー分の「無反応な
   空スクロール」区間をなくす）。 */
.about-brand__stage {
	position: sticky;
	top: var(--about-brand-header-offset, 0px);
	height: calc(100vh - var(--about-brand-header-offset, 0px));
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1000px;
}

.about-brand__frame {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 var(--space-content-inline);
	opacity: 0;
	transform: translateZ(-650px) scale(0.5);
	transition:
		opacity var(--duration-float) var(--ease-signature),
		transform var(--duration-float) var(--ease-signature);
	pointer-events: none;
}

.about-brand__frame.is-active {
	opacity: 1;
	transform: translateZ(0) scale(1);
}

.about-brand__frame.is-past {
	opacity: 0;
	transform: translateZ(500px) scale(1.5);
}

/* ロゴフレーム限定の演出：他5フレームは奥→手前への平面的なズームのみだが、
   ロゴだけは「歪んだ状態→正体を現す」動きにする（マジック＝謎が解ける
   瞬間、というブランドの主題をアニメーション構造そのものに埋め込む）。
   往路（rotateX18/rotateY-42）と復路（rotateX-16/rotateY28）で軸の
   組み合わせを変え、単純な巻き戻しに見せない。is-active（完全に正面・
   無歪み）の瞬間だけロゴが「正しい形」を結ぶ。drop-shadowも
   filterをtransition対象に加えることで、手前に来るほどじわっと
   強まるようにしている（transformだけでは瞬時に切り替わってしまう）。 */
.about-brand__frame--mark {
	/* 表示色はpage-about.php側のインラインstyle（カスタマイザー
	   「AboutページHeroロゴの色」設定）が指定する。ここでは指定せず、
	   svg側もcurrentColorで継承するだけにする。 */
	transition:
		opacity var(--duration-float) var(--ease-signature),
		transform var(--duration-float) var(--ease-signature),
		filter var(--duration-float) var(--ease-signature);
	transform: translateZ(-650px) scale(0.45) rotateX(18deg) rotateY(-42deg);
	filter: drop-shadow(0 0 0 rgb(138 106 62 / 0%));
}

.about-brand__frame--mark.is-active {
	transform: translateZ(0) scale(1) rotateX(0deg) rotateY(0deg);
	filter: drop-shadow(0 0.6rem 1rem rgb(138 106 62 / 28%));
}

.about-brand__frame--mark.is-past {
	transform: translateZ(500px) scale(1.4) rotateX(-16deg) rotateY(28deg);
	filter: drop-shadow(0 0 0 rgb(138 106 62 / 0%));
}

.about-brand__frame--mark svg {
	width: clamp(7rem, 5rem + 12vw, 13rem);
	height: auto;
	display: block;
}

.about-brand__line {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 2rem + 6vw, 6rem);
	line-height: 1.25;
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

/* キーワードフレーム：小ラベル→巨大キーワード→補足文の3段構成。
   「引き算の美学」は左寄り・ゴールドで左上がり、「イノベーティブな
   プロダクト」は右寄り・幻惑のバイオレットで右上がり——対になる
   2つのキーワードで鏡写しのリズムを作る。 */
/* .about-brand__frame自体（position:absolute; inset:0;）にmax-widthを
   付けると、仕様上left:0側が優先されて要素が画面左端に固定された箱に
   なってしまう（右側は単なる余白として残り、内部でalign-items:
   flex-endにしても画面全体では中央寄りにしか動かない）。そのため、
   .about-brand__frame自体は常にwidth:100%（画面いっぱい）のまま保ち、
   その子であるこの要素だけをmax-width＋margin-inline:autoでサイト
   共通のコンテナ幅に収める（flexアイテムとしての中央寄せなので、
   absolute要素の罠を踏まない）。4K等の広い画面で「引き算の美学」が
   画面端まで張り付いてしまっていた不具合はこれで解消し、他ページの
   本文コンテナ（--container-max-width）と同じ基準で「中央からやや
   左/右へ」という穏やかな非対称配置になる。 */
.about-brand__frame--keyword {
	flex-direction: column;
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
}

.about-brand__keyword-pre {
	margin: 0 0 var(--space-sm);
	font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1rem);
	color: var(--color-text-secondary);
	letter-spacing: 0.04em;
}

.about-brand__keyword-main {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.5rem + 4.2vw, 4.75rem);
	line-height: 1.15;
	letter-spacing: var(--tracking-display);
	color: var(--color-accent-gold);
	white-space: nowrap;
}

.about-brand__keyword-post {
	margin: var(--space-sm) 0 0;
	max-width: 24rem;
	font-size: 1.05rem;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

.about-brand__frame--keyword-left {
	align-items: flex-start;
	text-align: left;
	padding-left: var(--space-content-inline);
}

.about-brand__frame--keyword-right {
	align-items: flex-end;
	text-align: right;
	padding-right: var(--space-content-inline);
}

.about-brand__frame--keyword-right .about-brand__keyword-main {
	color: var(--color-accent-mystic);
}

.about-brand__frame--keyword-right .about-brand__keyword-post {
	margin-left: auto;
}

.about-brand__progress {
	position: absolute;
	left: var(--space-content-inline);
	bottom: var(--space-lg);
	display: flex;
	gap: 0.4rem;
	z-index: 5;
}

.about-brand__progress span {
	width: 1.6rem;
	height: 2px;
	background: var(--color-border-subtle);
	transition: background-color var(--duration-fast) var(--ease-hover), transform var(--duration-fast) var(--ease-hover);
}

.about-brand__progress span.is-active {
	background: var(--color-accent-gold);
	transform: scaleX(1.3);
}

@media (max-width: 30rem) {
	.about-brand__keyword-main {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-brand__frame {
		transition: none;
	}
}

/* Profile / Collaborations / Network：静かなセクション。data-revealは
   サイト共通のfade+浮上パターン（scroll-reveal.js）。 */
/* 幅の基準はProfileセクション（本文+フォトカラムの2カラム構成が
   必要とする幅）に合わせて64remとした。本文の読みやすさは
   .about-page__text／.about-page__lead側の独自max-width（34〜36rem）で
   別途担保しているため、セクション自体を広げても行長は伸びない。
   Collaborations（2カラム）・Network（3カラム）の各カードも、
   この幅により窮屈さが解消される。 */
.about-page__section {
	max-width: 64rem;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-content-inline);
}

.about-page__section-title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.about-page__text {
	max-width: 36rem;
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	line-height: 1.95;
	color: var(--color-text-secondary);
}

/* 本文（左・広め）と縦のフォトカラム（右）の2カラム。TOPの
   profile__grid（写真1枚+本文、写真:本文=1:1.4）とは比率を反転させ、
   ここでは本文を主役（1.3fr）に、フォトカラムを添え物（1fr）とする——
   Aboutは経歴という「言葉」で語るページのため。 */
.about-page__profile-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: start;
}

.about-page__profile-media {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.about-page__profile-portrait {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 1px solid var(--color-border-subtle);
}

/* 「輪ゴム→舞台」を語る2枚組。均等な2アップにせず、2枚目を少し
   下にずらす——Worksギャラリーの非対称グリッドと同じ「単調な均等
   グリッドを避ける」方針をここでも踏襲する。 */
.about-page__profile-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-xs);
}

.about-page__profile-duo-item {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--color-border-subtle);
}

.about-page__profile-duo-item--offset {
	margin-top: var(--space-lg);
}

@media (max-width: 40rem) {
	.about-page__profile-grid {
		grid-template-columns: 1fr;
	}

	.about-page__profile-media {
		order: -1;
	}

	.about-page__profile-duo-item--offset {
		margin-top: 0;
	}
}

/* Collaborators：2×2カード。合作という対等な関係を表すため、4枚とも
   同じ大きさ・同じ余白で並べる。 */
.about-page__collaborator-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-sm);
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.about-page__collaborator-card {
	padding: var(--space-lg) var(--space-md);
	border: 1px solid var(--color-border-subtle);
	background-color: var(--color-bg-elevated);
	transition: border-color var(--duration-fast) var(--ease-hover);
}

.about-page__collaborator-card:hover {
	border-color: var(--color-accent-mystic);
}

.about-page__collaborator-region {
	margin: 0 0 0.6rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-accent-gold);
}

.about-page__collaborator-name {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--color-text-primary);
}

@media (max-width: 34rem) {
	.about-page__collaborator-grid {
		grid-template-columns: 1fr;
	}
}

/* Network（拠点一覧）：3枚のカード。Wholesaleページのdt/ddパターンを
   踏襲しつつ、独立したブロックとして罫線で区切る。 */
.about-page__network-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-sm);
	margin: var(--space-lg) 0 0;
	padding: 0;
}

.about-page__network-card {
	padding: var(--space-lg) var(--space-md);
	border: 1px solid var(--color-border-subtle);
	background-color: var(--color-bg-elevated);
}

.about-page__network-card dt {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--color-accent-gold);
}

.about-page__network-card dd {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.8;
	color: var(--color-text-secondary);
}

@media (max-width: 40rem) {
	.about-page__network-grid {
		grid-template-columns: 1fr;
	}
}

/* Profile写真の点灯：ポートレート→制作風景→ステージの順に少しずつ
   遅れて現れる。collaborator-card/network-cardと同じstaggerパターン。 */
[data-reveal].reveal .about-page__profile-portrait,
[data-reveal].reveal .about-page__profile-duo-item {
	opacity: 0;
	transform: translateY(1.1rem);
	transition:
		opacity var(--duration-float) var(--ease-signature),
		transform var(--duration-float) var(--ease-signature);
}

[data-reveal].reveal.is-visible .about-page__profile-portrait,
[data-reveal].reveal.is-visible .about-page__profile-duo-item {
	opacity: 1;
	transform: translateY(0);
}

[data-reveal].reveal.is-visible .about-page__profile-duo-item {
	transition-delay: 0.15s;
}

[data-reveal].reveal.is-visible .about-page__profile-duo-item--offset {
	transition-delay: 0.25s;
}

/* stagger：カード群が「点灯」する共通パターン（Worksギャラリーと
   同じ手法）。data-revealを親グリッドに1つ付け、is-visible後に
   nth-childでtransition-delayをずらす。 */
[data-reveal].reveal .about-page__collaborator-card,
[data-reveal].reveal .about-page__network-card {
	opacity: 0;
	transform: translateY(1.1rem);
	transition:
		opacity var(--duration-float) var(--ease-signature),
		transform var(--duration-float) var(--ease-signature);
}

[data-reveal].reveal.is-visible .about-page__collaborator-card,
[data-reveal].reveal.is-visible .about-page__network-card {
	opacity: 1;
	transform: translateY(0);
}

[data-reveal].reveal.is-visible .about-page__collaborator-card:nth-child(2),
[data-reveal].reveal.is-visible .about-page__network-card:nth-child(2) {
	transition-delay: 0.1s;
}

[data-reveal].reveal.is-visible .about-page__collaborator-card:nth-child(3),
[data-reveal].reveal.is-visible .about-page__network-card:nth-child(3) {
	transition-delay: 0.2s;
}

[data-reveal].reveal.is-visible .about-page__collaborator-card:nth-child(4) {
	transition-delay: 0.3s;
}

/* ==========================================================================
   Page: Contact

   個人クリエイターの「名刺代わりのサイト」という位置づけに合わせ、
   企業の問い合わせ窓口然としたトーンを避け、連絡先情報が静かに並ぶ
   構成にする。TOPページのような新しい演出・スクロールモーションは
   持ち込まない（唯一の署名的要素はTask 2で追加するフォーム入力欄の
   フォーカス時バイオレットのみ）。
   ========================================================================== */
.contact {
	position: relative;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-block: var(--space-section-block);
	padding-inline: var(--space-content-inline);
}

/* 【提案・要反応】「無地の白に文字だけ」という指摘を受け、白背景そのもの
   に質感を持たせる案。SVG feTurbulenceで生成したノイズをゴールド
   （--color-accent-goldのrgb値をfeColorMatrixで直接指定、SVG属性は
   var()を解決できないため）で薄く着色し、上質紙のような目地を足す。
   opacity: 0.08と薄いため可読性への影響はない。これで方向性が
   合っているか要確認——他の模様案（罫線・幾何学パターン等）も出せる。 */
.contact::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.08;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0.541 0 0 0 0 0.416 0 0 0 0 0.243 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.contact__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--space-2xl);
}

.contact__title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.contact__lead {
	max-width: 32rem;
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

/* 便箋のレターヘッドのような控えめな署名マーク（アイコン+ワードマーク）。
   Contact（連絡先情報）とWholesale（backstageパネル）の2箇所でのみ
   使用する（他ページには広げない——ヘッダー・フッターに続く3つ目以降の
   反復は「ロゴの出しすぎ」になるため）。見出し級の主張をさせないよう、
   ヘッダーのロゴ（clamp(1.5rem,...,2rem)）より一段控えめな高さに固定する。
   【例外】Aboutページのabout-brand__frame--mark（Brand Identityセクション、
   唯一の大きな演出内で1回だけ使うロゴマーク）はこのルールの対象外とする
   ことをユーザーと合意済み（2026-09-05）。理由：あちらは「控えめな反復
   署名」ではなく「ページ内で一度だけの大きな演出」であり、かつ文字なし
   のシンボル単体（brand-seal・ヘッダー・フッターは全て文字ありの横組み）
   のため、ルールが警戒する「反復」には当たらないと判断したため。 */
.brand-seal {
	display: block;
	margin: 0 0 var(--space-md);
	color: var(--color-logo-brand);
}

.brand-seal svg {
	display: block;
	height: 1.75rem;
	width: auto;
}

/* Wholesaleの.wholesale__backstageは緞帳パレットの暗転パネルのため、
   フッターと同じホワイト系（--color-curtain-text）に切り替える。
   .wholesale__backstageが--color-text-primaryをカーテン用の値へ
   上書きしているが、意図を明示するためここでは直接指定する。 */
.brand-seal--curtain {
	color: var(--color-curtain-text);
}

.contact__details {
	display: grid;
	gap: var(--space-md);
	margin: var(--space-lg) 0 0;
	padding: 0;
}

.contact__detail dt {
	margin: 0 0 0.15rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.contact__detail dd {
	margin: 0;
	font-size: 1rem;
	color: var(--color-text-primary);
}

.contact__detail dd a {
	color: var(--color-accent-gold);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-hover);
}

.contact__detail dd a:hover,
.contact__detail dd a:focus-visible {
	color: var(--color-accent-gold-hover);
}

/* 「話しかける瞬間だけ舞台裏へ」——CLAUDE.mdの暗転演出方針
   （白→黒の明滅でショーの緩急を表現する）を、Footer限定の演出から
   実際のインタラクション（お問い合わせの送信）にまで踏み込ませる。
   左の連絡先情報（.contact__details）は昼の顔のまま公開情報として
   残し、フォームパネルだけを緞帳パレットへ切り替える。個々のセレクタを
   複製する代わりに、このパネル配下で参照されるトークン自体をここで
   上書きし、既存の.contact__field*ルール群をそのまま流用する。 */
.contact__form-wrap {
	--color-bg-elevated: var(--color-curtain-bg-elevated);
	--color-bg-base: var(--color-curtain-bg);
	--color-border-subtle: var(--color-curtain-border);
	--color-text-primary: var(--color-curtain-text);
	--color-text-secondary: var(--color-curtain-text-secondary);
	--color-accent-gold: var(--color-curtain-accent-gold);
	--color-accent-gold-hover: var(--color-curtain-accent-gold-hover);
	--color-accent-gold-pale: rgb(198 161 91 / 14%);
	--color-accent-mystic: var(--color-curtain-accent-mystic);
	--color-error: #e2685c; /* 暗転面向けに明るくした煉瓦色（ダーク面は明るくする方向、の既存方針を踏襲） */
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-subtle);
	padding: var(--space-lg);
	box-shadow:
		0 20px 60px rgb(0 0 0 / 30%),
		0 0 40px rgb(198 161 91 / 10%);
}

.contact__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: var(--space-md);
}

.contact__field label {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
}

.contact__required {
	color: var(--color-accent-gold);
}

.contact__field input,
.contact__field select,
.contact__field textarea {
	padding: 0.65rem 0.85rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text-primary);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-subtle);
	border-radius: 2px;
	transition:
		border-color var(--duration-fast) var(--ease-hover),
		box-shadow var(--duration-fast) var(--ease-hover);
}

.contact__field textarea {
	resize: vertical;
	min-height: 8rem;
}

/* 署名的要素：フォーカス時にだけ「幻惑のバイオレット」が灯る。
   このバイオレットは既存方針で「静止画面では使わず、ホバー・
   フォーカス時にのみ現れる発見の色」と定義済み（style.css冒頭の
   デザイントークン解説参照）——問い合わせを書き始める瞬間に、
   このページで唯一この色が宿る場所にする。 */
.contact__field input:focus-visible,
.contact__field select:focus-visible,
.contact__field textarea:focus-visible {
	outline: none;
	border-color: var(--color-accent-mystic);
	box-shadow: 0 0 0 3px rgb(110 79 217 / 15%);
}

/* フォームパネルが緞帳パレットになったため、フォーカスの発光色も
   ダーク面用のバイオレット（--color-curtain-accent-mystic、rgb換算）
   に合わせる。box-shadowはrgb()直書きのためvar()で自動追従しない。 */
.contact__form-wrap .contact__field input:focus-visible,
.contact__form-wrap .contact__field select:focus-visible,
.contact__form-wrap .contact__field textarea:focus-visible {
	box-shadow: 0 0 0 3px rgb(140 124 240 / 22%);
}

.contact__field input.has-error,
.contact__field select.has-error,
.contact__field textarea.has-error {
	border-color: var(--color-error);
}

/* ハニーポット欄。display: none はスクリーンリーダーの一部実装や
   一部ボットの検知回避策として効かない場合があるため、視覚的に
   画面外へ飛ばす方式にする。aria-hidden + tabindex="-1" も付与し、
   スクリーンリーダー・キーボード操作では確実にスキップされるようにする。 */
.contact__field-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

button.contact__submit.btn {
	background: none;
	cursor: pointer;
	font: inherit;
	font-family: var(--font-display);
	letter-spacing: var(--tracking-display);
}

.contact__message {
	margin: 0 0 var(--space-md);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid;
	font-size: 0.9rem;
	line-height: 1.6;
}

.contact__message--success {
	border-color: var(--color-accent-gold);
	color: var(--color-accent-gold-hover);
	background-color: var(--color-accent-gold-pale);
}

.contact__message--error {
	border-color: var(--color-error);
	color: var(--color-error);
	background-color: rgb(168 67 58 / 8%);
}

/* 背景色はrgb()直書きのため、暗転パネル内では明るくした
   --color-error（#e2685c）に合わせた専用の下地色に差し替える。 */
.contact__form-wrap .contact__message--error {
	background-color: rgb(226 104 92 / 12%);
}

@media (max-width: 48rem) {
	.contact__grid {
		grid-template-columns: 1fr;
	}
}
/* ========================================================================== */

/* ==========================================================================
   Page: Wholesale

   Contactページと同じ「静かな情報提示」トーン。フォームはContactページの
   ものをそのまま使い、このページは卸売条件の提示とContactフォームへの
   導線（.wholesale__cta）に専念する。演出は「像を結ぶ」導入アニメーション
   （本ファイル末尾）1箇所に絞り、それ以外は静かなまま保つ。
   ========================================================================== */
/* Contactと同じ紙の目地（.contact::before参照）。提案段階の演出のため
   ここにも同じ説明を残す。 */
.wholesale {
	position: relative;
}

.wholesale::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.08;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0.541 0 0 0 0 0.416 0 0 0 0 0.243 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wholesale__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-block: var(--space-section-block);
	padding-inline: var(--space-content-inline);
}

.wholesale__title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.wholesale__lead {
	max-width: 42rem;
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

/* Contactページの.contact__details/.contact__detailと同一の視覚パターン
   （見た目のCSS値は完全に一致させる、共通化はこの規模では過剰）。 */
.wholesale__policy-list {
	display: grid;
	gap: var(--space-md);
	margin: 0 0 var(--space-lg);
	padding: 0;
}

.wholesale__policy dt {
	margin: 0 0 0.15rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.wholesale__policy dd {
	margin: 0;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-primary);
}

.wholesale__policy dd a {
	color: var(--color-accent-gold);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-hover);
}

.wholesale__policy dd a:hover,
.wholesale__policy dd a:focus-visible {
	color: var(--color-accent-gold-hover);
}

/* MOQ／国際配送／販促素材の3項目は互いに並列な条件であり、縦積みの
   定義リストのままでは差が見えにくい。3カラムのカードに分け、
   グラスモーフィズム（--glass-*）で各カードを軽く浮かせる。 */
.wholesale__policy-list--cards {
	grid-template-columns: repeat(3, 1fr);
}

.wholesale__policy-list--cards .wholesale__policy {
	padding: var(--space-md);
	background-color: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border-radius: 2px;
	box-shadow: 0 10px 30px rgb(138 106 62 / 8%);
	transition:
		transform var(--duration-float) var(--ease-signature),
		box-shadow var(--duration-float) var(--ease-signature);
}

.wholesale__policy-list--cards .wholesale__policy:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgb(138 106 62 / 16%);
}

.wholesale__policy-list--cards .wholesale__policy dt {
	font-family: var(--font-display);
	font-size: 1.05rem;
	letter-spacing: var(--tracking-display);
	text-transform: none;
	color: var(--color-accent-gold);
}

@media (max-width: 56rem) {
	.wholesale__policy-list--cards {
		grid-template-columns: 1fr;
	}
}

/* 「一回くらい、やりすぎと言われる演出を入れてみろ」という明確な要望
   への対応。サイト全体の.reveal（控えめなフェード＋浮上、
   style.css:690）はここでは使わず、この3枚のカードだけ拡大縮小・
   回転を伴うバックイージング（オーバーシュート）で弾ませる。
   scroll-reveal.jsはこのページにも読み込む（functions.php参照）。

   見出し側（shirvester-bold-entrance、本ファイル内）と同じく、
   transitionではなくCSS animationにした——「連続リロードでカードだけ
   動かないことがある」との指摘を受けた調査で、transitionは.revealと
   .is-visibleという2つの状態を別々のペイントとしてブラウザに認識
   させる必要があり、その境界が何らかの理由で1フレームに合流すると
   アニメーションが省略されてスナップする不具合が残っていた
   （実測で3枚中1枚が稀に発生）。animationは.is-visibleが付与された
   瞬間にkeyframeのfromから必ず再生されるため、直前の見た目が
   ペイントされていたかどうかに依存しない。見出しのanimationが
   何度リロードしても必ずきれいに再生されるのはこの違いによる。 */
@keyframes wholesale-card-pop {
	from {
		opacity: 0;
		transform: translateY(4rem) scale(0.8) rotate(-8deg);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(0deg);
	}
}

.wholesale__policy-list--cards .wholesale__policy[data-reveal].reveal {
	opacity: 0;
	transform: translateY(4rem) scale(0.8) rotate(-8deg);
	transition: none;
}

.wholesale__policy-list--cards .wholesale__policy[data-reveal].reveal.is-visible {
	animation: wholesale-card-pop 900ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: calc(var(--reveal-index, 0) * 150ms);
}

.wholesale__catalog-note {
	max-width: 42rem;
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

.wholesale__cta {
	margin: 0;
}

/* Contactページの.contact__form-wrapと同じ「舞台裏（緞帳パレット）」の
   考え方を、この卸売問い合わせへの導線ブロックにも適用する。世界の
   ディーラーへ向けた条件提示（上のwholesale__policy-list）は昼の顔の
   ままにし、実際に連絡先へ踏み出す最後の一歩だけを暗転させることで、
   ContactとWholesale両ページで「会話を始める瞬間＝舞台裏」という
   体験を統一する。トークンの上書きにより、既存の
   .wholesale__policy dt/dd/dd aルール群をそのまま流用する。 */
.wholesale__backstage {
	--color-bg-elevated: var(--color-curtain-bg-elevated);
	--color-text-primary: var(--color-curtain-text);
	--color-text-secondary: var(--color-curtain-text-secondary);
	--color-accent-gold: var(--color-curtain-accent-gold);
	--color-accent-gold-hover: var(--color-curtain-accent-gold-hover);
	margin-top: var(--space-lg);
	padding: var(--space-lg);
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-curtain-border);
	box-shadow:
		0 20px 60px rgb(0 0 0 / 30%),
		0 0 40px rgb(198 161 91 / 10%);
}

.wholesale__backstage .wholesale__policy-list {
	margin-bottom: var(--space-lg);
}

/* ==========================================================================
   Page Entrance: Contact / Wholesale

   初回訪問者がスクロールしなくても即座に体感できる演出でなければ
   意味がないという指摘を受け、ぼかし解除だけの控えめな入場（旧
   shirvester-focus-in）から、カード演出（本ファイル内、back-easingの
   オーバーシュート）と同じ言語の、はっきり見える動きに変更した。
   ページ読み込み直後・スクロール不要で発火する（IntersectionObserver
   不要、CSSアニメーションのみ）。
   ========================================================================== */
@keyframes shirvester-bold-entrance {
	from {
		opacity: 0;
		transform: translateY(2.5rem) scale(0.85);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.contact .eyebrow,
.wholesale .eyebrow {
	animation: shirvester-bold-entrance 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.contact__title,
.wholesale__title {
	/* eyebrowの直後、120ms遅れて見出し自体が現れる。文字単位の
	   stagger（却下済みパターン）ではなく、要素単位の2段階演出。 */
	animation: shirvester-bold-entrance 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: 120ms;
}

@media (prefers-reduced-motion: reduce) {
	.contact .eyebrow,
	.wholesale .eyebrow,
	.contact__title,
	.wholesale__title {
		animation: none;
	}
}
/* ========================================================================== */

/* ==========================================================================
   Page: Service Gallery（製品紹介 一覧）

   全商品パネルを同じ画面位置に重ね、スクロール位置ひとつから全パネルの
   opacity/rotationX/rotationY/奥行き(translateZ)/scaleをJS
   （service-gallery-scrub.js）が毎フレーム計算するクロスフェード＋3D回転。
   perspectiveは要素側に置き、JSがモバイル/PCで値を切り替える
   （--service-gallery-perspective）。フォーカスが合っている商品だけを
   フルカラーで灯し、それ以外は彩度を落として沈める——舞台照明のように
   "今見るべきもの"だけ発色させる（docs/superpowers/specs/
   2026-09-04-products-page-design.md参照）。
   ========================================================================== */
.service-gallery__head {
	max-width: 42rem;
	margin: 0 auto;
	padding-block: var(--space-section-block) var(--space-lg);
	padding-inline: var(--space-content-inline);
	text-align: center;
}

.service-gallery__title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.service-gallery__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

/* ここから先の3D演出関連セレクタは、JS（service-gallery-scrub.js）が
   .service-galleryに `is-scrub-active` を付与した場合にのみ有効になる
   （concept-scrub.js等、既存の他スクロール演出と同じグレースフル
   デグラデーションのパターンに合わせている）。JS未実行・読み込み
   失敗時・prefers-reduced-motion時は、このブロックより前に定義した
   静的な縦積みレイアウトのまま表示される——読み込み失敗時に500vh分の
   空白ページになる事故を避けるため、「動いたら演出、動かなければ
   読める」の順序を守る。 */
.service-gallery__stage {
	position: relative;
	height: auto;
}

.service-gallery__sticky {
	position: static;
	height: auto;
	overflow: visible;
	display: flex;
	flex-direction: column;
}

.service-gallery__layer {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-lg);
	padding-inline: var(--space-content-inline);
	opacity: 1;
}

.service-gallery__layer-inner {
	width: min(44rem, 88vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transform: none;
}

.service-gallery__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background-color: var(--color-curtain-bg);
	overflow: hidden;
	border-radius: 2px;
	margin-bottom: var(--space-md);
}

.service-gallery__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}

.service-gallery__copy {
	filter: none;
}

.service-gallery.is-scrub-active .service-gallery__stage {
	height: calc(var(--panel-count, 1) * 100vh);
}

.service-gallery.is-scrub-active .service-gallery__sticky {
	position: sticky;
	top: 0;
	overflow: hidden;
	height: 100vh;
	height: 100lvh; /* iOS Safariのアドレスバー分の揺れ対策。100vhはフォールバック。 */
}

.service-gallery.is-scrub-active .service-gallery__layer {
	position: absolute;
	inset: 0;
	padding-block: 0;
	opacity: var(--p-opacity, 0);
	pointer-events: none;
	perspective: var(--service-gallery-perspective, 1200px);
}

/* pointer-eventsだけではキーボードのTab移動を防げず、opacityの
   フェード区間とis-frontの切り替わりにズレがあるため、「見えないのに
   クリック・Tab移動できる」時間帯が生まれる（JS側でinert属性を併用して
   防いでいる、service-gallery-scrub.js参照）。ここではポインター操作の
   すり抜けだけを最小限防止する。 */
.service-gallery.is-scrub-active .service-gallery__layer.is-front {
	pointer-events: auto;
}

.service-gallery.is-scrub-active .service-gallery__layer-inner {
	transform: translateZ(var(--p-z, -280px)) rotateX(var(--p-rx, 10deg)) rotateY(var(--p-ry, 48deg)) scale(var(--p-scale, 0.9));
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.service-gallery.is-scrub-active .service-gallery__media {
	box-shadow:
		0 2.5rem 5rem -2rem rgb(0 0 0 / var(--p-shadow, 0)),
		0 0 0 1px rgb(138 106 62 / var(--p-glow, 0)),
		0 0 2.5rem 0 rgb(138 106 62 / calc(var(--p-glow, 0) * 0.5));
}

.service-gallery.is-scrub-active .service-gallery__media img {
	filter: brightness(var(--p-bright, 0.55)) saturate(var(--p-sat, 0.1));
}

.service-gallery.is-scrub-active .service-gallery__copy {
	filter: brightness(var(--p-bright, 0.55));
}

.service-gallery__index {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--color-accent-gold);
	text-transform: uppercase;
}

.service-gallery__name {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-display);
	font-size: 1.5rem;
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.service-gallery__excerpt {
	margin: 0 0 var(--space-md);
	max-width: 30rem;
	font-size: 0.92rem;
	line-height: 1.95;
	color: var(--color-text-secondary);
}

.service-gallery__detail-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--color-text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border-subtle);
	padding-bottom: 0.15rem;
	transition: color var(--duration-fast) var(--ease-hover), border-color var(--duration-fast) var(--ease-hover);
}

.service-gallery__detail-link:hover,
.service-gallery__detail-link:focus-visible {
	color: var(--color-accent-gold-hover);
	border-color: var(--color-accent-gold-hover);
}

.service-gallery__arrow {
	transition: transform var(--duration-fast) var(--ease-hover);
}

.service-gallery__detail-link:hover .service-gallery__arrow,
.service-gallery__detail-link:focus-visible .service-gallery__arrow {
	transform: translateX(3px);
}

/* 進捗ドットはスクロール駆動の演出が動いている時だけ意味を持つため、
   静的な縦積み表示（デフォルト）では非表示にする。 */
.service-gallery__progress {
	display: none;
}

.service-gallery.is-scrub-active .service-gallery__progress {
	position: fixed;
	right: 1.4rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 15;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.service-gallery__progress span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--color-border-subtle);
	transition: background-color var(--duration-fast) var(--ease-hover), transform var(--duration-fast) var(--ease-hover);
}

.service-gallery__progress span.is-active {
	background-color: var(--color-accent-gold);
	transform: scale(1.8);
}

@media (max-width: 45rem) {
	.service-gallery.is-scrub-active .service-gallery__progress {
		display: none;
	}
}

.service-gallery__empty {
	max-width: 42rem;
	margin: 0 auto var(--space-2xl);
	padding-inline: var(--space-content-inline);
	text-align: center;
	font-size: 1rem;
	color: var(--color-text-secondary);
}

.service-gallery__cta {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding-block: var(--space-lg) var(--space-2xl);
	padding-inline: var(--space-content-inline);
	text-align: center;
}

.service-gallery__cta p {
	margin: 0 0 var(--space-md);
	font-size: 0.9rem;
	color: var(--color-text-secondary);
}

/* prefers-reduced-motion時は、JS側（service-gallery-scrub.js）が
   is-scrub-activeクラスをそもそも付与しないため、これより前で定義した
   静的な縦積みレイアウト（デフォルト）がそのまま使われる。JS未実行時の
   フォールバックと完全に同じ経路になるため、専用の@mediaブロックは
   不要（concept-scrub.jsと同じ設計）。 */
/* ========================================================================== */

/* ==========================================================================
   Page: Service Detail（製品紹介 詳細）

   一覧ページから独立したURLを持つ、商品ごとの詳細ページ。全文の紹介文と、
   アイキャッチ＋添付画像によるサムネイル切替ギャラリーを表示する。
   一覧ページのような3D演出は持たず、静かな読み物として構成する
   （驚き・凝った演出は一覧ページ側に集中させる、という既存の
   引き算の美学に合わせている）。
   ========================================================================== */
.service-detail__inner {
	max-width: 42rem;
	margin: 0 auto;
	padding-block: var(--space-section-block) var(--space-2xl);
	padding-inline: var(--space-content-inline);
}

.service-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: var(--space-lg);
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-hover);
}

.service-detail__back:hover,
.service-detail__back:focus-visible {
	color: var(--color-accent-gold-hover);
}

.service-detail__hero {
	/* 素材写真の縦横比がバラバラなため、固定の比率で強制クロップすると
	   見せたい部分が切れてしまう問題への対応。写真自体はクロップせず、
	   object-fit: containで枠内に収める。
	   枠自体の比率は当初「高さ固定・幅は画面幅に追従」（clamp(11rem,
	   30vw, 22rem)）にしていたが、幅と高さで異なる基準（コンテナ幅 vs
	   vw）を使っていたため画面幅によって枠の比率自体が1.5:1〜2.6:1の
	   間で変動してしまい、「この比率に写真を切り抜けば黒い余白がゼロに
	   なる」という単一の目標値を運用者に示せない問題があった。枠自体を
	   aspect-ratioで固定することで、画面幅が変わっても枠の"形"は一定に
	   し、この比率に切り抜いた写真なら常に黒い余白ゼロで表示できる
	   ようにする（この比率以外の写真は引き続き強制クロップされず、
	   containにより全体表示＋余白が出る）。
	   比率は当初16:9で実装したが、素材写真の多く（一眼カメラのセンサー
	   比率）が3:2に近かったため、動画・シネマ向けの16:9より静止画として
	   自然な3:2に変更した。
	   background-colorの緞帳の黒は元々このボックスの下地色だったもの
	   （object-fit: coverでは画面いっぱいに埋まり見えていなかった）を
	   そのまま活用し、余白を「舞台の暗闇に浮かぶ一枚の写真」として
	   見せる（新規トークンの追加なし）。 */
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background-color: var(--color-curtain-bg);
	overflow: hidden;
	margin-bottom: var(--space-sm);
}

.service-detail__hero-img {
	/* 当初はmax-width/max-height: 100%; width/height: autoという、
	   画像の自然サイズに依存する方式だった（小さい画像を無理に拡大
	   しない意図）。しかしSafari（WebKit）には、flexコンテナの
	   aspect-ratioから算出された高さが子要素のパーセンテージ指定
	   （max-height: 100%）に正しく伝播しない既知の不具合があり
	   （WebKit Bug #209983等）、実機（iPhone 13 Pro）でのみ画像が
	   縦横比を無視して引き伸ばされる不具合が発生した。Chrome DevTools
	   のモバイルエミュレーションはBlinkエンジンで描画するため
	   再現しなかった。動画（.service-detail__hero-video）と同じ
	   object-fit: containに統一し、この不具合を回避する。 */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.service-detail__hero-video {
	/* service-detail__hero-imgと同じ理由・同じ手法。 */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.service-detail__hero-facade {
	/* YouTubeは再生ボタンとして機能する<button>を土台にするため、
	   ボタンの既定見た目をリセットして枠いっぱいに敷く。 */
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.service-detail__hero-facade-img {
	/* サムネイル画像自体がYouTube側の黒帯を含むため、写真ポリシーの
	   containではなくcoverで枠を隙間なく埋める（黒帯を隠す）。実際の
	   動画本編はiframe注入後にYouTubeプレイヤー側がレターボックスする。 */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-detail__hero-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.service-detail__gallery {
	display: flex;
	gap: 0.5rem;
	margin-bottom: var(--space-lg);
	overflow-x: auto;
	padding-bottom: 0.3rem;
}

.service-detail__thumb {
	/* ヒーロー画像と同じ理由で、高さ固定・幅は画像の自然な比率のまま
	   （縦長写真がクロップされて重要な部分が切れるのを防ぐ）。極端な
	   縦長写真でもタップしやすいよう、幅の下限だけは確保する。
	   position: relativeは、動画サムネイルに重ねる再生アイコン
	   （.gallery-play-icon）の絶対配置の基準にするため。 */
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.25rem;
	min-width: 2.75rem;
	background-color: var(--color-curtain-bg);
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
}

.service-detail__thumb.is-active {
	border-color: var(--color-accent-gold);
}

.service-detail__thumb img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	opacity: 0.75;
}

.service-detail__thumb.is-active img {
	opacity: 1;
}

.service-detail__title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.service-detail__content {
	margin-bottom: var(--space-lg);
	font-size: 1rem;
	line-height: 2;
	color: var(--color-text-secondary);
}

.service-detail__content img {
	display: block;
	width: 100%;
	height: auto;
	margin-block: var(--space-md);
}

.service-detail__cta {
	margin-top: var(--space-md);
}

/* 動画メディア（自前ホスト・YouTube共通）のサムネイル／ヒーローフェイク
   サムネの上に重ねる再生アイコン。service-detail__*・work-detail__*の
   どちらの文脈でも同じ見た目にするため、ページ固有のプレフィックスを
   付けず共通コンポーネントとして1箇所にまとめる。
   平常時はゴールド、ホバー・フォーカス時のみ幻惑のバイオレットに変わる
   ——サイト全体で統一している「発見の色は操作した瞬間にだけ現れる」
   というルールを、サードパーティ埋め込み（YouTube）にも適用する。 */
.gallery-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	color: var(--color-accent-gold);
	pointer-events: none;
	transition: color var(--duration-fast) var(--ease-hover);
}

.gallery-play-icon__glyph {
	width: 0.7rem;
	height: 0.7rem;
	margin-left: 0.1rem; /* 三角形の描画上の重心を円の中心へ視覚的に合わせる */
}

.gallery-play-icon--hero {
	width: 3.5rem;
	height: 3.5rem;
}

.gallery-play-icon--hero .gallery-play-icon__glyph {
	width: 1.4rem;
	height: 1.4rem;
}

.service-detail__thumb:hover .gallery-play-icon,
.service-detail__thumb:focus-visible .gallery-play-icon,
.service-detail__hero-facade:hover .gallery-play-icon,
.service-detail__hero-facade:focus-visible .gallery-play-icon,
.work-detail__thumb:hover .gallery-play-icon,
.work-detail__thumb:focus-visible .gallery-play-icon,
.work-detail__hero-facade:hover .gallery-play-icon,
.work-detail__hero-facade:focus-visible .gallery-play-icon {
	color: var(--color-accent-mystic);
}
/* ========================================================================== */

/* ==========================================================================
   Page: Works Archive（実績・ポートフォリオ 一覧）

   1件ずつ大きく見せる静かな縦積みレイアウト。archive-service.php
   （製品紹介一覧）のようなスクロール駆動3D演出は持たない——Worksは
   量ではなく一件一件の重みを見せる構成のため（docs/superpowers/specs/
   2026-09-04-works-page-design.md参照）。導入演出はscroll-reveal.js
   （data-reveal属性）を再利用し、新しいJSは追加しない。
   ========================================================================== */
.works-archive__head {
	max-width: 42rem;
	margin: 0 auto;
	padding-block: var(--space-section-block) var(--space-lg);
	padding-inline: var(--space-content-inline);
	text-align: center;
}

.works-archive__title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.works-archive__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

.works-archive__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding-block: 0 var(--space-2xl);
	padding-inline: var(--space-content-inline);
}

.works-archive__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(44rem, 100%);
	margin-inline: auto;
	text-align: center;
}

.works-archive__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background-color: var(--color-curtain-bg);
	overflow: hidden;
	border-radius: 4px;
	/* Products（TOPページのservice-carousel__media）と同じガラス調の
	   縁取り。枠が無いと写真だけが「ペタっと貼り付いた」ように見える
	   ため、シルバーがかった半透明の1pxボーダーで写真に額装の存在感を
	   持たせる。 */
	border: 1px solid var(--glass-border);
	margin-bottom: var(--space-md);
}

.works-archive__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* ケンバーンズ：カードがスクロールで視界に入り.reveal.is-visibleに
	   なるタイミングで、写真だけがゆっくり縮小して落ち着く（1.08→1）。
	   静止画一枚を淡々と並べるだけでは「引き算」が「手抜き」に見えて
	   しまうため、Products一覧のカルーセル同様、写真そのものに常に
	   何らかの動きを持たせる（Wowファクター）。カード自体のフェード
	   （--duration-float）より意図的に長い1.4sにし、フェードが終わった
	   後も写真だけがわずかに動き続ける「余韻」を作る。 */
	transform: scale(1.08);
	transition: transform 1.4s var(--ease-signature);
}

[data-reveal].reveal.is-visible .works-archive__media img {
	transform: scale(1);
}

/* ホバー時は works-teaser__thumb と同じ量のズーム（scale(1.015)）を
   同じ速度・イージングで重ねる。ケンバーンズの着地値（scale(1)）から
   さらにわずかに寄るだけなので、干渉せず自然に繋がる。 */
.works-archive__item:hover .works-archive__media img {
	transform: scale(1.015);
}

.works-archive__category {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--color-accent-gold);
	text-transform: uppercase;
}

.works-archive__name {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-display);
	font-size: 1.5rem;
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.works-archive__excerpt {
	/* .works-archive__copy自体には幅指定が無く、内容（h2タイトル等）に
	   応じてshrink-to-fitの幅になる。タイトルが長い実績だけ、このpの
	   max-width（30rem）より.copyの幅が広くなり、text-align: centerでは
	   テキストがpの箱の中で中央揃えになるだけで、箱自体が.copyの中で
	   中央に来ないため見た目が崩れる（受賞投稿で発覚）。margin-inlineで
	   箱自体も中央に固定する。 */
	margin-block: 0 var(--space-md);
	margin-inline: auto;
	max-width: 30rem;
	font-size: 0.92rem;
	line-height: 1.95;
	color: var(--color-text-secondary);
}

.works-archive__detail-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--color-text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border-subtle);
	padding-bottom: 0.15rem;
	transition: color var(--duration-fast) var(--ease-hover), border-color var(--duration-fast) var(--ease-hover);
}

.works-archive__detail-link:hover,
.works-archive__detail-link:focus-visible {
	color: var(--color-accent-gold-hover);
	border-color: var(--color-accent-gold-hover);
}

.works-archive__arrow {
	transition: transform var(--duration-fast) var(--ease-hover);
}

.works-archive__detail-link:hover .works-archive__arrow,
.works-archive__detail-link:focus-visible .works-archive__arrow {
	transform: translateX(3px);
}

.works-archive__empty {
	max-width: 42rem;
	margin: 0 auto var(--space-2xl);
	padding-inline: var(--space-content-inline);
	text-align: center;
	font-size: 1rem;
	color: var(--color-text-secondary);
}
/* ========================================================================== */

/* ==========================================================================
   Page: Work Detail（実績・ポートフォリオ 詳細）

   single-service.php（製品詳細）のサムネイル切替ギャラリーと同じ
   パターン。カテゴリータグ（service-gallery__indexと同じ視覚言語）と、
   menu_order順の前後ナビゲーションを追加する。
   ========================================================================== */
.work-detail__inner {
	max-width: 42rem;
	margin: 0 auto;
	padding-block: var(--space-section-block) var(--space-2xl);
	padding-inline: var(--space-content-inline);
}

.work-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: var(--space-lg);
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-hover);
}

.work-detail__back:hover,
.work-detail__back:focus-visible {
	color: var(--color-accent-gold-hover);
}

.work-detail__hero {
	/* service-detail__heroと同じ理由・同じ手法（詳細はそちらのコメント
	   参照）：枠自体はaspect-ratio: 3/2で常に一定の形にし、写真は
	   object-fit: containでクロップせず収める。3:2に切り抜いた写真
	   なら常に黒い余白ゼロで表示できる。 */
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background-color: var(--color-curtain-bg);
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid var(--glass-border);
	margin-bottom: var(--space-sm);
}

.work-detail__hero-img {
	/* service-detail__hero-imgと同じ理由・同じ手法（詳細はそちらの
	   コメント参照）：Safari（WebKit）のflexbox+aspect-ratio+
	   パーセンテージ高さの既知の不具合により画像が引き伸ばされる
	   問題があったため、object-fit: containに統一している。 */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.work-detail__hero-video {
	/* service-detail__hero-videoと同じ理由・同じ手法（詳細はそちらの
	   コメント参照）。 */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.work-detail__hero-facade {
	/* service-detail__hero-facadeと同じ理由・同じ手法（詳細はそちらの
	   コメント参照）。 */
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.work-detail__hero-facade-img {
	/* service-detail__hero-facade-imgと同じ理由・同じ手法（詳細はそちらの
	   コメント参照）。 */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-detail__hero-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.work-detail__gallery {
	display: flex;
	gap: 0.5rem;
	margin-bottom: var(--space-lg);
	overflow-x: auto;
	padding-bottom: 0.3rem;
}

.work-detail__thumb {
	/* service-detail__thumbと同じ理由・同じ手法（詳細はそちらのコメント
	   参照）。 */
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.25rem;
	min-width: 2.75rem;
	background-color: var(--color-curtain-bg);
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
}

.work-detail__thumb.is-active {
	border-color: var(--color-accent-gold);
}

.work-detail__thumb img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	opacity: 0.75;
}

.work-detail__thumb.is-active img {
	opacity: 1;
}

.work-detail__category {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--color-accent-gold);
	text-transform: uppercase;
}

.work-detail__title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.work-detail__content {
	margin-bottom: var(--space-lg);
	font-size: 1rem;
	line-height: 2;
	color: var(--color-text-secondary);
}

.work-detail__content img {
	display: block;
	width: 100%;
	height: auto;
	margin-block: var(--space-md);
}

.work-detail__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border-subtle);
}

.work-detail__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 48%;
	font-family: var(--font-body);
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-hover);
}

.work-detail__nav-link:hover,
.work-detail__nav-link:focus-visible {
	color: var(--color-accent-gold-hover);
}

.work-detail__nav-link--next {
	margin-left: auto;
	text-align: right;
}
/* ========================================================================== */

/* ==========================================================================
   Page: Blog（一覧・カテゴリー別一覧・個別記事 共通）

   一覧・カテゴリー別一覧はカードグリッド（.blog-index__grid）を共有する
   （page-blog.php／category.phpの両方がtemplate-parts/blog-card.phpを
   呼び出す）。実績（Works）一覧のような「先頭カードだけ大きく見せる」
   非対称処理はしない——記事は優劣のない並列の読み物のため、均等グリッド
   にする（docs/superpowers/specs/2026-09-05-blog-page-design.md参照）。
   導入演出は既存のscroll-reveal.js（data-reveal属性）を再利用する。
   ========================================================================== */
.blog-index__head {
	max-width: 42rem;
	margin: 0 auto;
	padding-block: var(--space-section-block) var(--space-lg);
	padding-inline: var(--space-content-inline);
	text-align: center;
}

.blog-index__title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.blog-index__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

/* カテゴリーフィルタータブ */
.blog-filter {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding-inline: var(--space-content-inline);
	padding-bottom: var(--space-lg);
}

.blog-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-filter__tab {
	display: inline-block;
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 0.5rem 1.1rem;
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	border: 1px solid var(--color-border-subtle);
	transition:
		color var(--duration-fast) var(--ease-hover),
		border-color var(--duration-fast) var(--ease-hover);
}

.blog-filter__tab:hover,
.blog-filter__tab:focus-visible {
	color: var(--color-accent-mystic);
	border-color: var(--color-accent-mystic);
}

.blog-filter__tab.is-active {
	color: var(--color-bg-elevated);
	background-color: var(--color-accent-gold);
	border-color: var(--color-accent-gold);
}

/* モバイル幅では折り返しをやめ、work-detail__gallery（サムネイル帯）と
   同じ横スクロール一列に切り替える。折り返しのままだと、タブごとに
   幅が異なるため「1行目3個＋2行目に1個だけ左寄せで浮く」ような
   不揃いな余白が生まれてしまうため。 */
@media (max-width: 40rem) {
	.blog-filter__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.3rem;
	}
}

/* カードグリッド */
.blog-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--space-lg);
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding-block: 0 var(--space-2xl);
	padding-inline: var(--space-content-inline);
}

.blog-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.blog-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-subtle);
	margin-bottom: var(--space-sm);
}

.blog-card__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* ケンバーンズ：archive-works.phpの.works-archive__media imgと同じ
	   演出。カードがスクロールで視界に入りreveal.is-visibleになる
	   タイミングで、写真だけがゆっくり縮小して落ち着く（1.08→1）。
	   静止画のまま出さない、というテーマ全体の方針をブログカードにも
	   揃える。 */
	transform: scale(1.08);
	transition: transform 1.4s var(--ease-signature);
}

[data-reveal].reveal.is-visible .blog-card__thumb {
	transform: scale(1);
}

/* ホバー時はarchive-works.phpと同じ量のズームを重ねる。ケンバーンズの
   着地値（scale(1)）からさらにわずかに寄るだけなので、干渉せず自然に
   繋がる。.blog-card[data-reveal].reveal.is-visible:hover という詳細な
   セレクタにしているのは、[data-reveal].reveal.is-visible .blog-card__thumb
   （詳細度0,4,0）に.blog-card:hover .blog-card__thumb（0,3,0）が負けて
   ホバーズームが発火しない問題を避けるため。 */
.blog-card[data-reveal].reveal.is-visible:hover .blog-card__thumb,
.blog-card[data-reveal].reveal.is-visible:focus-within .blog-card__thumb {
	transform: scale(1.015);
}

@media (prefers-reduced-motion: reduce) {
	.blog-card__thumb {
		transform: none;
		transition: none;
	}
}

/* 額装の枠も、他のカード（Collaborations等）と同じ「ホバー時だけに
   現れる発見の色」を踏襲する。 */
.blog-card__media {
	transition: border-color var(--duration-fast) var(--ease-hover);
}

.blog-card:hover .blog-card__media,
.blog-card:focus-within .blog-card__media {
	border-color: var(--color-accent-mystic);
}

.blog-card__title {
	transition: color var(--duration-fast) var(--ease-hover);
}

.blog-card:hover .blog-card__title,
.blog-card:focus-within .blog-card__title {
	color: var(--color-accent-mystic);
}

/* アイキャッチ未設定の記事用フォールバック。実写真と並んだときに
   悪目立ちしないよう、サイズを抑えたロゴマークを中央に置く。表示色は
   functions.php側のインラインstyle（カスタマイザー「Blogアイキャッチ
   代替ロゴの色」設定）が指定する——ブランドガイドラインの3色（パープル
   ・ブラック・ホワイト）以外は選べないため、以前使っていたゴールド系の
   淡色（彩度を抑える目的）は廃止した。写真と同じ「ホバーで反応する」
   体験を、控えめなアイコンのズームで揃える（ケンバーンズは静的なSVGには
   不要なため付けない）。 */
.blog-card__thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.blog-card__thumb-fallback svg {
	width: 28%;
	height: auto;
	transition: transform var(--duration-fast) var(--ease-hover);
}

.blog-card:hover .blog-card__thumb-fallback svg,
.blog-card:focus-within .blog-card__thumb-fallback svg {
	transform: scale(1.08);
}

.blog-card__category {
	margin: 0 0 0.4rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--color-accent-gold);
	text-transform: uppercase;
}

.blog-card__title {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-display);
	font-size: 1.15rem;
	line-height: 1.5;
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.blog-card__excerpt {
	margin: 0 0 var(--space-xs);
	font-size: 0.88rem;
	line-height: 1.8;
	color: var(--color-text-secondary);
}

.blog-card__date {
	margin: 0;
	font-size: 0.78rem;
	color: var(--color-text-secondary);
}

/* カードの点灯（フェード＋浮上＋stagger）は、898行目付近の汎用
   [data-reveal]ルールがそのまま処理する（front-page.php・
   page-wholesale.phpと同じ「各要素にdata-reveal-index」方式。
   archive-works.phpは件数が少ないため単純なdata-revealのみ）。
   ここでのカード専用CSSは不要。 */

.blog-index__empty {
	max-width: 42rem;
	margin: 0 auto var(--space-2xl);
	padding-inline: var(--space-content-inline);
	text-align: center;
	font-size: 1rem;
	color: var(--color-text-secondary);
}

/* ページネーション。paginate_links( array( 'type' => 'list' ) )が
   <ul class="page-numbers">…</ul> を生成するため、その既定クラス名を
   そのままスタイル対象にする。 */
.blog-pagination {
	display: flex;
	justify-content: center;
	padding-bottom: var(--space-2xl);
}

.blog-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-pagination .page-numbers li {
	display: block;
}

.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	height: 2.2rem;
	padding-inline: 0.4rem;
	font-family: var(--font-body);
	font-size: 0.88rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	border: 1px solid var(--color-border-subtle);
	transition:
		color var(--duration-fast) var(--ease-hover),
		border-color var(--duration-fast) var(--ease-hover);
}

.blog-pagination a.page-numbers:hover,
.blog-pagination a.page-numbers:focus-visible {
	color: var(--color-accent-mystic);
	border-color: var(--color-accent-mystic);
}

.blog-pagination span.page-numbers.current {
	color: var(--color-bg-elevated);
	background-color: var(--color-accent-gold);
	border-color: var(--color-accent-gold);
}

.blog-pagination span.page-numbers.dots {
	border-color: transparent;
	color: var(--color-text-secondary);
}

/* 個別記事：テキスト主体の読み物。about-page__textと同系統の本文
   タイポグラフィ（行長を80文字未満目安に収めた読みやすい幅）。 */
.blog-post__inner {
	max-width: 40rem;
	margin: 0 auto;
	padding-block: var(--space-section-block) var(--space-2xl);
	padding-inline: var(--space-content-inline);
}

.blog-post__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: var(--space-lg);
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-hover);
}

.blog-post__back:hover,
.blog-post__back:focus-visible {
	color: var(--color-accent-gold-hover);
}

.blog-post__category {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--color-accent-gold);
	text-transform: uppercase;
}

.blog-post__title {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: var(--tracking-display);
	color: var(--color-text-primary);
}

.blog-post__date {
	margin: 0 0 var(--space-lg);
	font-size: 0.85rem;
	color: var(--color-text-secondary);
}

.blog-post__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: var(--space-lg);
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-subtle);
}

.blog-post__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-post__content {
	font-size: 1rem;
	line-height: 1.95;
	color: var(--color-text-secondary);
}

.blog-post__content p {
	margin: 0 0 var(--space-md);
}

.blog-post__content img {
	display: block;
	width: 100%;
	height: auto;
	margin-block: var(--space-md);
}

/* ==========================================================================
   汎用固定ページ（page.php）：プライバシーポリシー等

   専用デザインを持たない法的文書ページ向け。演出は行わず、可読性の
   ための余白・幅制限のみを与える（本文はDBの投稿本文をそのまま出力
   するため、blog-post__contentと同様に見出し・段落の基本スタイルのみ
   用意すればよい）。
   ========================================================================== */
.legal-page {
	max-width: 40rem;
	margin: 0 auto;
	padding: var(--space-section-block) var(--space-content-inline) var(--space-2xl);
}

.legal-page__title {
	margin: 0 0 var(--space-xl);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

.legal-page__content h2 {
	margin-block: var(--space-xl) var(--space-sm);
	font-size: 1.25rem;
}

.legal-page__content p {
	margin: 0 0 var(--space-md);
	line-height: 1.8;
	color: var(--color-text-secondary);
}

/* ==========================================================================
   404 Not Found

   フッターと同じ緞帳（暗転）配色を採用し、「思いがけず舞台裏に迷い込んだ」
   体験として位置づける。ビジュアルはConceptセクションの発光ワイヤー
   フレーム球体（.concept__seal一式）をそのまま流用し、新規モチーフは
   作らない（404.php参照。.concept__seal側のスタイルはこのファイル内で
   既に定義済みのため、ここでは.not-found固有のレイアウトのみ追加する）。
   ========================================================================== */
.not-found {
	position: relative;
	min-height: calc(100dvh - 5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-curtain-bg);
	color: var(--color-curtain-text);
	padding-block: var(--space-section-block);
	padding-inline: var(--space-content-inline);
}

.not-found__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	max-width: 36rem;
	text-align: center;
}

.not-found .eyebrow {
	color: var(--color-curtain-accent-gold);
}

.not-found__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	letter-spacing: var(--tracking-display);
	color: var(--color-curtain-text);
}

.not-found__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
	color: var(--color-curtain-text-secondary);
}

.not-found__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-md);
}
/* ========================================================================== */