/*
 * メインスタイル。tokens.css の CSS 変数のみを参照する。
 * 生の色・px は書かない（ブレークポイントの @media 数値のみ例外）。
 */

/* === Reset（最小限） === */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ナビ／フッターのアンカー（#service・/company の各セクション）へ
   「ふわっと」移動させる。固定ヘッダーは無く、各セクションが自前の上
   パディングを持つため、着地は画面上端ぴったりにして二重余白を避ける。 */
html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text-primary);
	background: var(--color-surface-base);

	/* デザインツール（Figma）と同等の軽い描画にする。未指定だと macOS で太く・濃く見える */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* === Layout helpers === */
.site-main {
	display: block;
}

.site-header__inner,
.site-footer__inner,
.page--default {
	width: min(100% - 2 * var(--content-gutter), var(--content-max-width));
	margin-inline: auto;
}

/* PC専用の改行ヘルパ。本文をフレーズ境界で折り返し「変な位置での改行」を防ぐ。
   SP（〜767px）では無効化し、SP の折り返しは別途調整する（lead-br の逆方針）。 */
.br--pc {
	display: inline;
}

/* SP専用の改行ヘルパ。PC では無効（無視）、SP（〜767px）でのみ折り返す。 */
.br--sp {
	display: none;
}

@media (max-width: 767px) {
	.br--pc {
		display: none;
	}

	.br--sp {
		display: inline;
	}
}

/* === Header（Figma 379:86 / global-header）
   FV 写真の上に重ねる（全ページ共通）。通常フローから外し、各ページの先頭
   ヒーロー（TOP=top-fv / COMPANY=lower-fv）の上端にオーバーレイする。 === */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	/* SP メニュー(.sp-menu z-index:100)より前面に置き、トグル兼用ハンバーガーが
	   パネル展開中も最前面で押せる＝同ボタンが×にモーフする。 */
	z-index: 110;
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;

	/* ナビのピルは画面中央寄せ（Figma 379:86 突合）。ロゴは左に絶対配置で逃がす */
	justify-content: center;
	gap: var(--space-md);
	padding-block: var(--space-md);
}

.site-header__logo {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	flex: 0 0 auto;
}

.site-header__logo img {
	width: 183px;
	height: auto;
}

/* ピル型ナビ（黄背景 + 枠） */
.global-nav-wrap {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	padding: var(--space-xs) var(--space-pill);
	background: var(--color-nav);
	border: 1px solid var(--color-text);
	border-radius: 999px;
}

.global-nav {
	display: flex;
	align-items: center;
	gap: var(--space-nav);
	margin: 0;
	padding: 0;
	list-style: none;
}

.global-nav a {
	color: var(--color-text);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-base);
	text-decoration: none;
	white-space: nowrap;
	transition: var(--transition-hover);
}

.global-nav a:hover {
	opacity: 0.7;
}

.global-nav__mail {
	display: inline-flex;
	align-items: center;
	color: var(--color-text);
}

.global-nav__mail svg {
	width: 20px;
	height: 20px;
}

/* ハンバーガーボタン（PC 非表示 / SP・タブレット表示）。
   開閉トグル兼用。2アイコン（bars=3本線/黄・cross=×/teal）を重ね、
   body.sp-menu-open で回転フェード切替＝同じ位置でモーフ＆背景色変化。 */
.hamburger {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
}

/* 2アイコンを枠いっぱいに重ねる。SVG 自体に丸背景（黄/teal）が入っているため、
   切替でアイコンと背景色が同時に変わる。 */
.hamburger__bars,
.hamburger__cross {
	position: absolute;
	inset: 0;
	display: block;
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.hamburger__bars svg,
.hamburger__cross svg {
	display: block;
	width: 44px;
	height: 44px;
}

/* 既定（閉）：3本線を表示、×は回して隠す。 */
.hamburger__cross {
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}

/* 開：3本線を回して消し、×を立ち上げる。 */
body.sp-menu-open .hamburger__bars {
	opacity: 0;
	transform: rotate(90deg) scale(0.6);
}

body.sp-menu-open .hamburger__cross {
	opacity: 1;
	transform: rotate(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.hamburger__bars,
	.hamburger__cross {
		transition: none;
		transform: none;
	}
}

/* === SP ハンバーガー展開メニュー（Figma 331:96 / global-header-sp-menu）
   右からスライドインするパネル方式。.sp-menu は全画面の固定レイヤ（暗幕＋パネルの
   入れ物）で、自身は描画せず開閉時の当たり判定だけを持つ。__backdrop がフェード、
   __panel が右から translateX で滑り込む。閉じるときは逆再生（main.js が
   body.sp-menu-open を外す → パネルが右へ戻る → 0.32s 後に hidden 復帰）。 === */
.sp-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	pointer-events: none;

	/* 閉アニメ中もパネルを見せ続けるため、visibility:hidden の適用を
	   スライド時間ぶん遅延させる（開く時は遅延0で即可視）。 */
	transition: visibility 0s linear 0.32s;
}

.sp-menu[hidden] {
	display: none;
}

body.sp-menu-open .sp-menu {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* 背面の暗幕。タップで閉じる（main.js）。 */
.sp-menu__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(57 50 41 / 40%);
	opacity: 0;
	transition: opacity 0.32s ease;
}

body.sp-menu-open .sp-menu__backdrop {
	opacity: 1;
}

/* 右寄せのメニューパネル。SP は全幅、タブレットは下の media で右 1/4〜1/3 に絞る。 */
.sp-menu__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 128px var(--space-lg) 72px;
	background: var(--color-nav);
	transform: translateX(100%);
	transition: transform 0.32s ease;
	overflow-y: auto;
}

body.sp-menu-open .sp-menu__panel {
	transform: translateX(0);
}

/* 閉じる×はヘッダーのハンバーガー（.hamburger__cross）が兼ねるため、パネル内に
   独立した閉じるボタンは持たない。 */

.sp-menu__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xl);
}

.sp-menu__nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-pill);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-menu__nav a {
	color: var(--color-text);
	font-size: 16px;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-base);
	text-decoration: none;
}

.sp-menu__contact {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-lg);
	background: var(--color-bg-artist);
	border: 1px solid var(--color-text);
	border-radius: 999px;
	color: var(--color-text);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-base);
	text-decoration: none;
	white-space: nowrap; /* 細幅タブレットパネルでも「お問い合わせ」を1行に保つ */
}

.sp-menu__contact svg {
	width: 20px;
	height: 20px;
}

/* タブレット(768〜1149px): パネルは全幅にせず右 1/4〜1/3 だけに絞る（指示）。
   背面の暗幕に下層ページが透けて見える。clamp で狭幅でも窮屈になりすぎない下限を確保。
   左寄せだと縦ナビが右端に張り付くため、パネル内は中央寄せにする。 */
@media (min-width: 768px) {
	.sp-menu__panel {
		width: clamp(280px, 32%, 380px);
		padding-inline: var(--space-xl);
		align-items: center;
		text-align: center;
	}

	.sp-menu__inner {
		align-items: center;
	}
}

/* SP(全幅パネル)展開中はロゴを伏せ、パネルを×だけのすっきり面にする。
   タブレットは部分パネルで左に下層ページが見えるためロゴは残す。 */
@media (max-width: 767px) {
	body.sp-menu-open .site-header__logo {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}
}

/* デスクトップ(≥1150px)では SP メニューを完全に無効化（リサイズ時の取り残し防止）。
   ハンバーガー表示域（≤1149px）と境界を一致させる。 */
@media (min-width: 1150px) {
	.sp-menu {
		display: none !important;
	}
}

/* === Footer（Figma 349:123 / global-footer） === */
.site-footer {
	position: relative;
	margin-top: var(--space-2xl);
	padding-block: var(--space-2xl) var(--space-lg);
	overflow-x: clip;
}

/* TOP のフッターのみ淡teal帯を地に敷く（下層は装飾雲のため背景なし）。
   上のセクションと地色が連続するよう、白く見える上マージンも詰める */
.site-footer:not( .site-footer--lower ) {
	margin-top: 0;
	background: var(--color-bg-company-band);
}

/* 下層フッターの地はアーティスト節(.artist)と同じベージュ #f4e8d9（Figma 確定値）。
   クリーム雲(blob-footer #fbf6f0)はこのベージュ地の上でのみ対比して見える
   （旧 --color-bg-service=#fbf6f0 だと雲と同色化して消える）。上マージンの白い隙間は詰める。 */
.site-footer--lower {
	margin-top: 0;
	background: var(--color-bg-artist);
}

/* 下層フッターの装飾雲（Figma 書き出し透過PNG）。背面・右下に敷く */
.site-footer__blob {
	position: absolute;
	z-index: 0;
	right: 50%;
	bottom: 0;
	width: min(1512px, 100vw);

	/* 雲SVG(viewBox -95 0 2118 2420)を全身で表示する。box の縦横比を SVG と一致させ
	   (aspect-ratio)、背景を 100% auto で敷くと歪み無しでぴったり収まる。
	   旧実装は height:720px で上端を直線にスパッと切り、comma 雲の上ローブが欠けて
	   contact/thanks で「見切れ」て見えた（company は前面の白カードが隠していた）。
	   bottom 基準で footer 下端に接地し、SVG 内蔵の下余白(雲下端2227/2420)で
	   丸い下端をページ下端から浮かせる。横は viewBox が雲の実描画域(x:-91〜2018)を
	   包含するため、雲中心(x≈964)で中央寄せしても左右が直線で切れない。 */
	aspect-ratio: 2118 / 2420;
	transform: translateX(50%);
	background: url( "../images/blob/footer.svg?v=2" ) no-repeat bottom center / 100% auto;
	pointer-events: none;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"brand nav"
		"brand contact"
		"copy copy";
	gap: var(--space-lg) var(--space-2xl);
	align-items: start;
}

.site-footer__brand {
	grid-area: brand;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.site-footer__logo img {
	width: 183px;
	height: auto;
}

.site-footer__sns {
	display: flex;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__sns a {
	display: inline-flex;
	color: var(--color-text);
}

.site-footer__sns svg {
	width: 24px;
	height: 24px;
}

.site-footer__address,
.site-footer__tel {
	margin: 0;
	line-height: 1.6;
	letter-spacing: var(--letter-spacing-base);
}

/* フッターナビ列 */
.site-footer__nav {
	grid-area: nav;
	display: flex;
	gap: var(--space-2xl);
}

.footer-col__head {
	margin: 0 0 var(--space-sm);
	font-size: 18px;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-base);
}

.footer-col--headings .footer-col__head {
	margin-bottom: var(--space-md);
}

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

.site-footer__nav a {
	color: var(--color-text);
	text-decoration: none;
	letter-spacing: var(--letter-spacing-base);
	transition: var(--transition-hover);
}

.site-footer__nav a:hover {
	opacity: 0.7;
}

/* お問い合わせボタン（ピル） */
.footer-contact-btn {
	grid-area: contact;
	place-self: end end;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-md) var(--space-pill);
	background: var(--color-nav);
	border: 1px solid var(--color-text);
	border-radius: 999px;
	color: var(--color-text);
	font-size: 20px;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-base);
	text-decoration: none;
	transition: var(--transition-hover);
}

/* hover は CTA 共通ワイプ（.view-more 付近に定義）で行う。opacity フェードは廃止。 */

.footer-contact-btn svg {
	width: 20px;
	height: 20px;
}

.site-footer__copyright {
	grid-area: copy;
	margin: var(--space-lg) 0 0;
	text-align: center;
}

/* コピーライトは Futura アウトライン化した SVG。img は reset で display:block のため auto 中央寄せ */
.site-footer__copyright img {
	margin-inline: auto;
}

/* === TOP: FV ヒーロー（Figma 254:291 / top-fv）
   地は淡水色 full-bleed。写真は左約82%（全角丸）、右の淡水色地にミキサーを置く。
   ヘッダーは .site-header 側で写真上端に重なる。 === */
.fv {
	position: relative; /* 左上ロゴノッチ（.fv__logo-notch）を 100vw フルブリード基準で配置 */
	background: var(--color-bg-fv);

	/* 上は重なるヘッダー分を確保（写真上端にヘッダーが重なりつつ、右ミキサーの
	   ロゴがナビ下から始まる高さ）。下はSERVICEまでの余白。 */
	padding-block: var(--space-xl) var(--space-2xl);
}

/* 写真＋ミキサーの内枠（Figma フレーム幅 ≒ 1433）。中央寄せ */
.fv__visual {
	position: relative;
	width: min(100% - 2 * var(--space-lg), 1512px);
	margin-inline: auto;
	aspect-ratio: 1433 / 794;
}

/* 写真は左カラム（約82%）。複数スライドを重ね、約3.5秒ごとにクロスフェード。
   残りの右地は淡水色のまま。 */
.fv__slides {
	position: absolute;
	left: 0;
	top: 0;
	width: 82%;
	height: 100%;
}

/* 各スライド（<picture>）はカラム全面に重なり、is-active のみ不透明。
   切替時は新スライドを上(z-index)に重ね、ふわっと溶けるように出す。 */
.fv__slide {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 26px;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1s ease;
}

.fv__slide.is-active {
	opacity: 1;
	z-index: 1;
}

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

/* PC のスライド別トリミング微調整（天井/上部の余白を狭め、被写体を上へ）。
   - office: 縦に余白があるので cover を下寄せ（劣化なし）。
   - lounge: 下寄せが上限のため軽くズームして天井をさらに削る。
   - meeting: 横長で縦が全表示＝下寄せが効かないため、下寄り基点でズームし
     TV 上の壁を削って社員を大きく見せる。
   SP では下のメディアクエリで中央・等倍に戻す。 */
.fv__slide--office .fv__bg {
	object-position: 50% 100%;
	transform: scale(1.18);
	transform-origin: 50% 100%;
}

.fv__slide--lounge .fv__bg {
	object-position: 50% 100%;
	transform: scale(1.2);
	transform-origin: 50% 100%;
}

.fv__slide--meeting .fv__bg {
	transform: scale(1.18);
	transform-origin: 50% 78%;
}

/* z-index は active スライド(=1)より前面。overlay は写真を覆い、
   コピー「映像を 最高の音楽で支える。」は常時最前面で表示する。 */
.fv__overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 82%;
	height: 100%;
	background: rgb(0 0 0 / 7%);
	border-radius: 26px;
	z-index: 2;
}

/* 左上ノッチ：ヘッダーロゴ背後の写真を地色（淡水色）で削り、ロゴをクリーンな地に
   乗せる。ロゴは .site-header__inner（content幅 gutter24/max1352）基準、写真は
   .fv__visual（gutter40/max1512）基準で座標系が違うため、固定幅では BP ごとに
   ロゴとのズレ・過剰なはみ出しが出る。そこでノッチを .fv（ヘッダーと同じ 100vw
   フルブリード）基準に置き、幅をロゴ右端＋一定余白へ追従させる：
     width = ロゴ左端 [= max(gutter, (100vw - max-width)/2)、.site-header__inner と同式]
             + ロゴ幅(--fv-logo-w) + 余白(--fv-notch-gap)
   左上はビューポート隅（地色 on 地色で不可視）、写真と交わる右下のみ角丸で食い込ませる。
   ヘッダー(z-index:10)より背面・写真(z-index:1)/overlay(z-index:2)より前面に置く。 */
.fv__logo-notch {
	--fv-logo-w: 183px; /* ロゴ実幅（PC ≥1150。logo/gifted.svg を 183px 表示） */
	--fv-notch-gap: 28px; /* ロゴ右端からノッチ右端までの余白 */
	--fv-notch-h: 92px; /* ロゴ下端(≈77px) +余白。角丸(--space-lg)を収める高さ */

	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: calc(
		max(var(--content-gutter), (100% - var(--content-max-width)) / 2) +
			var(--fv-logo-w) + var(--fv-notch-gap)
	);
	height: var(--fv-notch-h);
	background: var(--color-bg-fv);
	border-radius: 0 0 var(--space-lg) 0;
}

/* TAB/SP（≤1149, ヘッダーのハンバーガー切替と同BP）はロゴが 111px に縮む
   （.site-header__logo img / header padding も縮小）。ノッチも同式でロゴ右端へ
   追従させ、高さはロゴ下端(≈56px)+余白に詰める。
   SP(≤767, 写真フルブリード)も同値で成立（ロゴ左端=gutter, 写真左端=0 を式が吸収）。 */
@media (max-width: 1149px) {
	.fv__logo-notch {
		--fv-logo-w: 111px;
		--fv-notch-h: 72px;
	}
}

/* PC(≥1150) のヘッダー＆FV 上部の重ね：デザイン通り、ヘッダー（ロゴ＋ピルナビ）を
   30px 下げてナビを FV 写真に重ねる（margin-top）。ロゴ背後の写真はマスク左上の
   「なめらかステップ」で削り、ロゴを地色に乗せる（Figma 準拠。固定px ノッチのタブ
   張り出しを避け写真マスク1本で境界を作る）。TOP は写真上端を 40px へ上げて（.fv の
   padding-top）COMPANY と同じくナビと自然に重ねる。写真スライド(.fv__slides)と暗幕
   (.fv__overlay)へ同じマスク（暗幕を外すと削り部に暗いスリバー）。ノッチは撤去。
   ステップは 30px 下がった固定ロゴ(下端≈107px)を PC 全幅(≥1150)でクリアするよう深さ
   調整済み（COMPANY mask ledge y=106 / TOP mask ledge y=95）。
   タブレット(≤1149)はピルナビ非表示・ヘッダー据え置き（margin なし）でロゴが写真より
   上＝重なり無し（TOP は素の角丸、COMPANY はマスクだが浅く効く）、SP は従来ノッチ維持。 */
@media (min-width: 1150px) {
	.site-header {
		margin-top: 30px;
	}

	.fv {
		padding-top: 40px;
	}

	.fv__slides,
	.fv__overlay {
		-webkit-mask: url( "../images/fv/mask.svg" ) no-repeat center / 100% 100%;
		mask: url( "../images/fv/mask.svg" ) no-repeat center / 100% 100%;
	}

	.fv__logo-notch {
		display: none;
	}
}

/* コピーは白箱をやめ、地と同じ淡水色。写真左下に重ね、角丸でノッチを作る。
   写真スライドの上に常時重ねるため z-index で最前面に固定。 */
.fv__copy {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	margin: 0;
	padding: var(--space-lg) var(--space-xl) var(--space-sm) var(--space-lg);
	background: var(--color-bg-fv);
	border-radius: 0 var(--space-lg) 0 0;
}

.fv__copy-line {
	margin: 0;
	color: var(--color-text);
	font-size: clamp(28px, 3.7vw, 56px);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	letter-spacing: 0.2em;
	white-space: nowrap;
}

/* ミキサーは右の淡水色地に直接置く（白パネルなし）。
   viewBox 214x754 の縦長のため、高さ基準で収めて見切れを防ぐ。 */
.fv__aside {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
}

.fv-mixer-svg {
	display: block;
	height: 100%;
	width: auto;
}

/* ミキサーのつまみ（針）は main.js（initFvMixer）が JS 駆動で回す。自動回転は
   全つまみ共通で「画像3枚で1周」＝画像1枚あたり120度、ドラッグ中は手で回せる。
   JS が transform に rotate() を直接書き込むため、ここでは回転の起点だけ定義する。
   transform-origin は各ダイヤル中心を viewBox 座標で個別指定（インライン）。 */
.fv-mixer__needle {
	transform-box: view-box;
	will-change: transform;
}

/* ドラッグ操作の当たり判定（透明・最前面）。ダイヤルの上だけ掴め、その上では
   ページスクロールを抑制（touch-action:none）して指の回転を奪われないようにする。
   hover カーソルは回転矢印（cursor-rotate.svg）で「回せる」と気づかせる。SVG 非対応の
   ブラウザは grab にフォールバック。15 15 は 30px 画像の中心＝ダイヤル中心を指す。 */
.fv-mixer__hit {
	fill: transparent;
	cursor: url( '../icons/cursor-rotate.svg' ) 15 15, grab;
	touch-action: none;
}

.fv-mixer__hit:active {
	cursor: grabbing;
}

/* つまみを回し続けると出る gifted ロゴ演出（main.js initFvMixer が data-fv-reveal を発火）。
   画面全体ではなく FV 背景写真エリア（.fv__visual 内・PC 82%幅・角丸）に重ね、写真が音に
   反応してロゴが浮かぶ見せ方。イコライザーバー（音の波形風）＋白ロゴ登場、約2秒で閉じる。
   バーの色はミキサーのボタン色（teal/yellow/orange）に合わせ装飾色を直書き。 */
.fv-reveal {
	position: absolute;
	left: 0;
	top: 0;
	width: 82%;
	height: 100%;
	z-index: 2; /* 写真(z1)より上・コピー(z3)より下＝コピーは演出中も前面に残す */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(28 24 19 / 90%);
	border-radius: 26px;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.fv-reveal[hidden] {
	display: none;
}

.fv-reveal.is-active {
	opacity: 1;
}

.fv-reveal__stage {
	position: absolute;
	top: 40%; /* 写真エリア上から2/5。下のコピーと分離して上寄せ（SP は中央へ戻す）。 */
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
}

.fv-reveal__bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 64px;
}

.fv-reveal__bars span {
	width: 8px;
	height: 100%;
	border-radius: 4px;
	background: var(--color-bg-fv);
	transform: scaleY(0.2);
	transform-origin: bottom;
}

.fv-reveal.is-active .fv-reveal__bars span {
	animation: fv-reveal-bar 0.9s ease-in-out infinite;
}
.fv-reveal__bars span:nth-child(1) { animation-duration: 0.8s; animation-delay: 0s; background: var(--color-accent); }
.fv-reveal__bars span:nth-child(2) { animation-duration: 1s; animation-delay: 0.15s; }
.fv-reveal__bars span:nth-child(3) { animation-duration: 0.7s; animation-delay: 0.3s; background: #edc067; }
.fv-reveal__bars span:nth-child(4) { animation-duration: 1.1s; animation-delay: 0.1s; }
.fv-reveal__bars span:nth-child(5) { animation-duration: 0.85s; animation-delay: 0.25s; background: #ef9d5f; }
.fv-reveal__bars span:nth-child(6) { animation-duration: 0.95s; animation-delay: 0.05s; }
.fv-reveal__bars span:nth-child(7) { animation-duration: 0.75s; animation-delay: 0.2s; background: var(--color-accent); }

@keyframes fv-reveal-bar {
	0%, 100% { transform: scaleY(0.2); }
	50% { transform: scaleY(1); }
}

.fv-reveal__logo {
	width: clamp(160px, 22vw, 240px);
	height: auto;
	opacity: 0;
	transform: scale(0.8);
	filter: brightness(0) invert(1);
}

.fv-reveal.is-active .fv-reveal__logo {
	animation: fv-reveal-logo 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) 0.2s forwards;
}

@keyframes fv-reveal-logo {
	0% { opacity: 0; transform: scale(0.8); filter: brightness(0) invert(1) drop-shadow(0 0 0 rgb(255 255 255 / 0%)); }
	45% { opacity: 1; transform: scale(1.05); filter: brightness(0) invert(1) drop-shadow(0 0 14px rgb(255 255 255 / 70%)); }
	100% { opacity: 1; transform: scale(1); filter: brightness(0) invert(1) drop-shadow(0 0 6px rgb(255 255 255 / 35%)); }
}

/* reduce: 演出は出すが動きは抑える（バー揺れ・スケールなし、ロゴは即表示）。 */
@media (prefers-reduced-motion: reduce) {
	.fv-reveal.is-active .fv-reveal__bars span { animation: none; transform: scaleY(0.55); }
	.fv-reveal.is-active .fv-reveal__logo { animation: none; opacity: 1; transform: none; }
}

/* 演出中はページスクロールをロック（JS が body へ付与）。 */
body.fv-reveal-lock {
	overflow: hidden;
}

/* SP 横並びミキサー帯は PC では非表示 */
.fv__sp-mixer {
	display: none;
}

@media (max-width: 767px) {
	/* SP版FV（Figma 320:52）: 全幅写真 + 縦書きコピー + 写真下に横ミキサー帯 */

	/* 写真をフルブリード（角丸・左右余白を解除し縦長に） */
	.fv {
		padding: 0;
	}

	.fv__visual {
		width: 100%;
		aspect-ratio: 2 / 3;
		border-radius: 0;
	}

	/* PC の左82%カラム配置を SP では全幅・角丸なしへ戻す */
	.fv__slides,
	.fv__overlay,
	.fv-reveal {
		width: 100%;
	}

	.fv__slide,
	.fv__overlay,
	.fv-reveal {
		border-radius: 0;
	}

	/* PC の「上から2/5」を SP では中央へ戻す（縦長写真エリアの中央）。 */
	.fv-reveal__stage {
		top: 50%;
	}

	/* SP 縦長写真は中央トリミング・等倍へ戻す（PC のスライド別調整を打ち消す）。
	   詳細度を .fv__slide .fv__bg に合わせ、後勝ちで PC 個別指定を上書き。 */
	.fv__slide .fv__bg {
		object-position: 50% 50%;
		transform: none;
	}

	/* PC の縦ミキサー aside は SP では非表示（横帯へ移行） */
	.fv__aside {
		display: none;
	}

	/* コピーは写真の右下に、地色（--color-bg-fv）の背景パネルごと重ねる。
	   design(320:52)突合: 写真は単純な長方形でなく、このパネルが右下に食い込み
	   左上角が丸い（PC 版の地色ノッチの SP 版＝右下配置なので角は左上 top-left）。
	   コンテナは横並び flex(row-reverse) で「映像を」を右列、各行は縦書き。
	   align-items:flex-start で両列の上端を揃え、長い左列が下まで伸びる。
	   right/bottom:0 でパネルを写真の右下端に密着、テキスト余白は padding で確保。 */
	.fv__copy {
		inset: auto 0 0 auto;
		transform: none;
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		gap: var(--space-xs);
		padding: var(--space-md);
		background: var(--color-bg-fv);
		border-radius: var(--space-lg) 0 0 0;
		writing-mode: horizontal-tb;
	}

	.fv__copy-line {
		writing-mode: vertical-rl;
		margin: 0;
		font-size: clamp(22px, 6.6vw, 30px);
		letter-spacing: 0.15em;
		line-height: 1.1;
		white-space: nowrap;
	}

	/* 写真下の横並びミキサー帯 + タグライン */
	.fv__sp-mixer {
		display: block;
		padding: var(--space-md) var(--space-md) var(--space-lg);
	}

	.fv-mixer-sp-svg {
		display: block;
		width: 100%;
		max-width: 360px;
		height: auto;
		margin-inline: auto;
	}
}

/* === セクション見出し（EN大 + JP小。各セクション共通） === */
.section-head {
	margin-bottom: var(--space-xl);
}

.section-head__en {
	margin: 0;
	color: var(--color-accent);

	/* Figma実機: Inter Bold 80px / 字間20% / #01AB96 */
	font-family: var(--font-en);
	font-size: clamp(44px, 5.3vw, 80px);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: 0.2em;
}

.section-head__ja {
	margin: var(--space-2xs) 0 0;
	color: var(--color-accent);
	font-size: 14px;
	letter-spacing: 0.1em;
}

/* === TOP: SERVICE（Figma 254:213 / top-service） === */
.service {
	background: var(--color-bg-service);
	padding-block: var(--space-2xl);

	/* 雲形blob が viewport 外へ広がり横スクロールを生むのを防ぐ（縦の張り出しは保持）。 */
	overflow-x: clip;
}

.service__inner {
	width: min(100% - 2 * var(--content-gutter), var(--content-max-width));
	margin-inline: auto;
}

.service-item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
	margin-bottom: var(--space-2xl);
}

.service-item__visual,
.service-item__body {
	position: relative;
}

/* 画像カラムを装飾blob(z-index:0)より前面へ。DBREC等、隣接blobが画像側へ
   張り出すカードで blob が画像に被って前面化するのを防ぐ。 */
.service-item__visual {
	z-index: 1;
}

.service-item__body > * {
	position: relative;
	z-index: 1;
}

.service-item__shot {
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgb(57 50 41 / 10%);
}

/* 装飾blob（Figma 書き出しの雲形PNG。色は実物そのまま）。
   span を背景画像化し、コンテンツ背面（z-index:0）に敷く。
   PNG の縦横比を aspect-ratio で保持し、background-size:100% 100% で歪ませず充填。 */
.blob {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

/* スクロール進入で雲が「描き込まれる」ワイプ表示（きれいな塗りPNG雲のまま）。
   初期は左端0%に畳み、is-drawn で右へ開いて雲を出す（左→右に引かれる表現）。
   JS（initBlobDraw）がビューポート進入で is-drawn を付与。JS無効/reduce-motion 時は
   下の規則で常時全表示にし、雲が消えたままになる事故を防ぐ。 */
.js .blob--draw {
	/* 先端を丸く（直線カットにしない）。左端から円で広がる＝丸い先端で描き込まれる。 */
	clip-path: circle(0% at 0% 50%);
}

/* Dig in! は右→左に出す（雲が右へはみ出すため）。円の起点を右端に。 */
.js .blob--draw--rtl {
	clip-path: circle(0% at 100% 50%);
}

.js .blob--draw.is-drawn {
	clip-path: circle(160% at 0% 50%);
	transition: clip-path 1.6s ease-out;
}

.js .blob--draw--rtl.is-drawn {
	clip-path: circle(160% at 100% 50%);
}

@media (prefers-reduced-motion: reduce) {
	.js .blob--draw {
		clip-path: none;
	}

	.js .blob--draw.is-drawn {
		transition: none;
	}

	/* FV スライダー：自動切替・つまみの自動回転とも JS 側で停止。残る transition も無効化。 */
	.fv__slide {
		transition: none;
	}
}

/* LABEL teal: タイトル背面（body列）。Figma実測 幅≈139%/左端body比-61%/右端は端手前。
   縦位置は body 高さ%でなく LABEL 帯に中心固定（top + translateY(-50%)）。
   雲の高さは width 由来（aspect-ratio）で伸びるため、% top だと画面幅が広いほど
   雲が下へ沈み LABEL から外れる。中心を px で固定し、どのPC幅でも LABEL の背面に置く。 */
.blob--label {
	background-image: url( "../images/blob/label.png" );
	aspect-ratio: 906 / 462;
	width: 139%;
	top: 18px;
	left: -61%;
	transform: translateY(-50%);
}

/* Dig in! yellow: タイトル〜本文の背面。上寄せ・左の垂れを抑える。
   雲は右へはみ出す（列外→画面端）ため、右端が画面/ガターで見切れる。
   右端をグラデーションマスクで羽化し、地色へ自然に溶かす（角切り解消）。 */
.blob--yellow {
	background-image: url( "../images/blob/digin.png" );
	aspect-ratio: 704 / 320;
	width: 122%;
	top: -32%;
	right: -12%;
	left: auto;
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 84%, transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 84%, transparent 100%);
}

/* DBREC peach: タイトル〜本文の背面。Figma実測(254:231 Vector6)で本文ブロック中央へ。
   旧 top:-34% は雲が上寄りすぎたため、雲の可視帯が DBREC〜本文に重なる位置へ下げる。 */
.blob--peach {
	background-image: url( "../images/blob/dbrec.png" );
	aspect-ratio: 1034 / 447;
	width: 158%;
	top: -4%;
	left: -24%;

	/* 雲は左へはみ出す（列外→画面端）ため、左端が画面/ガターで見切れる。
	   左端をグラデーションマスクで羽化し、地色へ自然に溶かす。 */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 100%);
}

/* intense lab ロゴカード */
.label-card {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;

	/* Figma実測: 横長カード aspect≈3.4（w563/h165）。ロゴ大きめ・影は控えめ */
	padding: var(--space-md) var(--space-xl);
	aspect-ratio: 563 / 170;
	background: var(--color-surface-base);
	border-radius: 16px;
	box-shadow: 0 2px 10px rgb(57 50 41 / 6%);
}

/* ロゴは Figma 同様カード幅の約8割まで拡大（native 170px のため拡大で
   ややソフトになる。気になる場合は高解像度ロゴへ差し替え） */
.label-card img {
	width: 76%;
	height: auto;
}

.service-item__title {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-en);

	/* Figma実機: Inter Bold 48px / 字間33% / #393229 */
	font-size: clamp(32px, 3.2vw, 48px);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.33em;
	line-height: 1.2;
}

.service-item__sub {
	margin: var(--space-xs) 0 var(--space-md);
	color: var(--color-text); /* Figma実機: 本文と同じ #393229（緑ではない） */
	font-size: 14px;
	letter-spacing: 0.33em; /* Figma実機: tracking 5.28px / 16px = 0.33em */
}

/* リード（キャッチコピー）。Figma実機: Zen Kaku Gothic New Bold 32px / 行間130% / 字間5% */
.service-item__lead {
	margin: 0 0 var(--space-md);
	color: var(--color-text);
	font-size: clamp(22px, 2.1vw, 32px);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	letter-spacing: 0.05em;
}

/* 本文。Figma実機: Zen Kaku Gothic New Medium 16px / 行間160% / 字間5% / text */
.service-item__text {
	margin: 0 0 var(--space-lg);
	color: var(--color-text);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	letter-spacing: 0.05em;
}

/* VIEW MORE ボタン（teal ピル） */
.view-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-md);
	background: var(--color-accent);
	border-radius: 999px;
	color: var(--color-surface-base);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: var(--transition-hover);
}

/* hover は下の「CTA 共通ホバー」で行う。opacity フェードは廃止（ワイプと競合するため）。 */

/* ARTIST の VIEW MORE は coral（Figma "button"）。SERVICE は teal のまま */
.artist .view-more {
	background: var(--color-button);
}

/* === CTA 共通ホバー: 色面が左→右に流れ込むワイプ ===========================
   TOP recruit/company(rc-card) の「色が左→右に変わる」挙動を全 CTA ピルへ統一。
   rc-card は gradient の硬い境界を background-position で滑らせる方式だが、ピルは
   元の塗り・文字色を保ったまま ::before の明色面を transform:scaleX で左→右へ
   展開して同じ「ハードエッジが走る」絵を作る。base 色(teal/coral/yellow/cream)を
   問わず同一機構で“明るく”持ち上げ、待機時の塗り・文字コントラストは変えない。
   白(--color-surface-base)を透過合成＝色相を保ったまま明度だけ上げるので濁らない
   （暗い --color-text を重ねると茶系に沈んで暗く見えたため白へ変更）。新トークン不要。
   ※ position:relative 単体では stacking context が生成されず ::before の z-index:-1 が
     祖先へ抜けるため、isolation:isolate で各ボタンに context を張って閉じ込める。 */
.view-more,
.footer-contact-btn,
.sp-menu__contact {
	--cta-sweep-tint: color-mix(in srgb, var(--color-surface-base) 32%, transparent);

	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.view-more::before,
.footer-contact-btn::before,
.sp-menu__contact::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1; /* 親の塗りより前面・in-flow 文字より背面に描画される */
	background: var(--cta-sweep-tint);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s ease;
	pointer-events: none;
}

.view-more:hover::before,
.footer-contact-btn:hover::before,
.sp-menu__contact:hover::before {
	transform: scaleX(1);
}

/* モーション抑制時はワイプを止め、色面のみ即時表示（hover の手掛かりは残す） */
@media (prefers-reduced-motion: reduce) {
	.view-more::before,
	.footer-contact-btn::before,
	.sp-menu__contact::before {
		transition: none;
	}
}

/* === アルバム作品スライダー（intense lab 下 / top-album-slider）===
   Swiper でマーキー＋スワイプ＋無限ループ。スライド幅は clamp で相対指定し
   両端が常に少し覗く。初期はポスター画像のみ、動画はクリックで生成。 */

/* 画面幅いっぱい（フルブリード）。コンテンツ列(.service__inner)を抜けて 100vw に広げ、
   見切れを画面端で自然に起こすフィルムストリップ表現。.service の overflow-x:clip で
   横スクロールは出ない。
   ※ Swiper の `.swiper{margin:auto}` を確実に上書きするため `.album-slider.swiper`
     （詳細度 0,2,0）で指定する。 */
.album-slider.swiper {
	/* blob(z-index:0) より前面へ。隣接 service-item の装飾blobが下へ張り出すため */
	position: relative;
	z-index: 1;
	margin-block: 0 var(--space-2xl);
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* マーキーを等速・連続で流す。Swiper 既定の ease-out だと1枚進むごとに減速して
   「都度停止」して見えるため linear に上書き（autoplay delay:0 と併せて連続化）。 */
.album-slider .swiper-wrapper {
	/* Swiper がインラインで付ける ease 系を確実に上書き（!important） */
	transition-timing-function: linear !important;
}

/* Swiper の .swiper-slide{width:100%} を上書きするため詳細度を上げる。
   幅は相対(clamp)＝両端が常に少し覗く・レスポンシブ */
.album-slider .album-slide {
	/* Figma 実績枠(約189px四方)寄りへ縮小。両端が少し覗くレスポンシブ幅 */
	width: clamp(140px, 13vw, 190px);
	height: auto;
}

.album-slide__btn {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--color-surface-base);
	box-shadow: 0 4px 16px rgb(57 50 41 / 8%);
	cursor: pointer;
}

.album-slide__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 再生/停止ボタン（丸 + 三角▶ / 停止■）。再生中も表示し、クリックで停止できる。
   再生中は動画(z-index:2)より前面に出すため z-index:3。 */
.album-slide__play {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 54px;
	height: 54px;
	margin: auto;
	border-radius: 50%;
	background: rgb(57 50 41 / 55%);
	transition: background 0.2s ease, opacity 0.2s ease;
}

/* 既定アイコン = 再生三角▶ */
.album-slide__play::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 0;
	height: 0;
	margin: auto;
	border-width: 9px 0 9px 15px;
	border-style: solid;
	border-color: transparent transparent transparent var(--color-surface-base);
	transform: translateX(2px);
}

.album-slide__btn:hover .album-slide__play {
	background: var(--color-accent);
}

/* 再生中 = 停止四角■。確実に止められるよう常時表示（ホバー非依存） */
.album-slide.is-playing .album-slide__play {
	background: rgb(57 50 41 / 70%);
	opacity: 1;
}

.album-slide.is-playing .album-slide__play::before {
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 2px;
	background: var(--color-surface-base);
	transform: none;
}

/* クリックで生成される動画（ポスター上に重ねる） */
.album-slide__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--color-text);
	opacity: 0;
	pointer-events: none;
}

.album-slide__video.is-active {
	z-index: 2;
	opacity: 1;

	/* 停止は自前ボタンに一本化（native controls 不使用）。動画がクリックを
	   奪うとボタンへ届かず停止できないため、クリックは下のボタンへ透過させる。 */
	pointer-events: none;
}

@media (max-width: 767px) {
	.service-item {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
		margin-bottom: var(--space-xl);
	}

	/* SP: 最後の item の下余白を打ち消す。セクションの padding-bottom(96px) と二重に
	   なり、SERVICE 下の余白が過大になっていた（item間の余白は維持）。 */
	.service-item:last-child {
		margin-bottom: 0;
	}

	/* SP: セクション見出し下の余白を詰める（PCの64pxは縮小した見出しに対し過大） */
	.section-head {
		margin-bottom: var(--space-md);
	}

	/* SP: DBREC は画像→テキストの順。PCは text左/image右をDOM順で実現しているため、
	   SPでは reverse カードの画像列を先頭へ（縦積み時のみ並べ替え）。 */
	.service-item--reverse .service-item__visual {
		order: -1;
	}

	/* SP: LABEL/DBREC の雲は「画像とテキストの境目（やや下＝テキスト寄り）」に置く。
	   縦積みで上の画像と下のテキストの間に雲がかかるイメージ。 */
	.blob--label {
		top: -10%;
		left: -18%;
		width: 118%;
		transform: none;
	}

	.blob--peach {
		top: -16%;
	}
}

/* === TOP: ARTIST（Figma 254:175 / top-artist） === */
.artist {
	background: var(--color-bg-artist);
	padding-block: var(--space-2xl);
}

.artist__inner {
	width: min(100% - 2 * var(--content-gutter), var(--content-max-width));
	margin-inline: auto;
}

.artist__row {
	/* design: テキスト左 約30% / グリッド右 約65%（実測 content1352で 370:972）。
	   テキスト削除後も画像は右カラム維持（左カラムは空き）。 */
	display: grid;
	grid-template-columns: 1fr 2.4fr;
	gap: var(--space-xl);
	align-items: start;
}

/* テキスト（旧 .artist__lead）削除後も画像を従来の右カラムに固定 */
.artist__grid-wrap {
	grid-column: 2;
}

/* 写真未登録時のフォールバック合成画像 */
.artist__grid {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* 12名グリッドのスライダー。白角丸カード上に4列。スライド（12名）を同一セルに
   重ね、is-active のみ不透明（initArtistSlider が約3秒ごとに付替えてクロスフェード）。 */
.artist__slider {
	display: grid; /* 全スライドを 1/1 に重ね、高さは最大スライドに追従 */
	padding: var(--space-md);
	background: var(--color-surface-base);
	border-radius: 16px;
}

.artist__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease;
}

.artist__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.artist__cell {
	margin: 0;
}

.artist__cell img {
	display: block;
	width: 100%;
	height: auto;

	/* アーティスト画像は正方形（design 254:175 突合・COMPANY 一覧と統一） */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
}

.artist__more {
	margin-top: var(--space-lg);
	text-align: right;
}

@media (max-width: 767px) {
	.artist__row {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	/* SP は1カラム。画像のカラム固定は解除（全幅表示） */
	.artist__grid-wrap {
		grid-column: auto;
	}

	/* SP は4列だと写真が小さすぎるため3列 */
	.artist__slide {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* === TOP: RECRUIT & COMPANY（Figma 254:420 / top-recruit-company）
   セクション地は淡teal（Figma "background"）。白カードを載せる土台 === */
.recruit-company {
	background: var(--color-bg-company-band);

	/* Figma実測: teal帯の上下余白 ≈118px（カード473 + 上下118 ≒ 帯710） */
	padding-block: calc(var(--space-2xl) + var(--space-md));
}

.recruit-company__inner {
	width: min(100% - 2 * var(--content-gutter), var(--content-max-width));
	margin-inline: auto;
	display: grid;

	/* minmax(0,1fr) で長語(COMPANY)でも完全等幅にする（min-content膨張を防ぐ） */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-xl);
}

/* 各導線は白い角丸カード。Figma実測 比率 639:473 で等高・中央寄せ */
.rc-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
	padding: var(--space-2xl) var(--space-xl);
	aspect-ratio: 639 / 473;
	background: var(--color-surface-base);
	border-radius: 20px;
	box-shadow: 0 4px 20px rgb(57 50 41 / 6%);
	color: var(--color-text);
	text-decoration: none;
}

/* 塗り文字（RECRUIT teal / COMPANY coral）。Figma突合: 中空ではなく塗り。
   hover時、ブランド色を1段深い同系色へ左→右にスワイプする。中抜き(text-stroke)は
   bold だとステム両縁が二重線化して汚いため不採用。テキスト1枚に2色グラデを
   background-clip:text、background-size 200% を position でスライドさせる。 */
.rc-card__en {
	font-family: var(--font-en);
	font-size: clamp(40px, 6vw, 72px);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;

	/* 左=hover色(深teal) / 右=待機色(淡teal)。position 100%=全面淡 → hoverで0%=左から深色 */
	color: transparent;
	background-image: linear-gradient( 90deg, var(--color-accent) 0 50%, var(--color-recruit) 50% 100% );
	background-size: 200% 100%;
	background-position: 100% 0; /* default=待機色（淡）全面 */
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	transition: background-position 0.8s ease;
}

/* hover=グラデを左へ送り、左→右に深色が流れ込む */
.rc-card:hover .rc-card__en {
	background-position: 0% 0;
}

.rc-card--company .rc-card__en {
	/* 左=深coral / 右=淡coral */
	background-image: linear-gradient( 90deg, var(--color-button) 0 50%, var(--color-bg-warm) 50% 100% );
}

.rc-card__label {
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.1em;
}

.rc-card__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--color-text);

	/* hover: 位置は据え置き。en文字と同じく淡→深ブランド色へ背景を変え、
	   opacity も少し下げて変化を持たせる。 */
	transition: background 0.3s ease, opacity 0.3s ease;
}

.rc-card--recruit .rc-card__arrow {
	background: var(--color-recruit);
}

.rc-card--company .rc-card__arrow {
	background: var(--color-bg-warm);
}

/* hover=en文字の hover 深色に揃える（recruit→深teal / company→深coral）。
   背景を少し透かして奥行きを出す。 */
.rc-card--recruit:hover .rc-card__arrow {
	background: var(--color-accent);
	opacity: 0.85;
}

.rc-card--company:hover .rc-card__arrow {
	background: var(--color-button);
	opacity: 0.85;
}

@media (max-width: 767px) {
	/* SP: 1列縦積み。en文字とpaddingを縮め、カード最小幅が画面を超えない（横溢れ防止）。 */
	.recruit-company {
		padding-block: var(--space-xl);
	}

	.recruit-company__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-lg);
	}

	.rc-card {
		aspect-ratio: auto;
		gap: var(--space-md);
		padding: var(--space-xl) var(--space-md);
	}

	.rc-card__en {
		font-size: clamp(32px, 11vw, 52px);
	}
}

/* === 下層ページ共通 === */
.lower-page {
	background: var(--color-bg-service);
}

/* 下層FV（Figma 1:212）。クリーム地に、左上ステップ＋左下ノッチの角丸マスク写真
   を右上へ置き、写真左下のノッチ（地が覗く領域）に COMPANY/会社情報 を載せる。
   FV だけは本文カラム（body max-width:1200）から抜け出し、Figma フレーム 1512×744
   で中央寄せ full-bleed する。フレーム比をそのまま縦に確保し、写真・コピーは
   フレームに対する % で配置（1512 未満でも比率を保ったまま縮小する）。 */
.lower-fv {
	width: min(1512px, 100vw);
	aspect-ratio: 1512 / 744;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-bg-service);
}

/* 写真ボックス（Figma: left40/top40, 1432×678）。マスクSVGで形状をくり抜く */
.lower-fv__visual {
	position: absolute;
	left: calc(40 / 1512 * 100%);
	top: calc(40 / 744 * 100%);
	width: calc(1432 / 1512 * 100%);
	height: calc(678 / 744 * 100%);
	-webkit-mask: url( "../images/company/fv-mask.svg" ) no-repeat center / 100% 100%;
	mask: url( "../images/company/fv-mask.svg" ) no-repeat center / 100% 100%;
}

.lower-fv__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ロゴ用ノッチは SP のみ（写真 full-bleed＝mask:none のため）。PC/タブレットでは
   写真マスク（company/fv-mask.svg）左上の「なめらかステップ」がヘッダーロゴ領域の
   写真を削る＝ロゴは地色に乗る。ステップは Figma 由来の形状を、固定px ロゴを全幅
   (≥768) でクリアするよう寸法調整済み（ledge: viewBox x≤276 / y=80。ロゴ右端 vbX≦276・
   下端 vbY≦80 に収まる）。
   経緯：固定px の算出ノッチを写真に重ねる方式も試したが、%比例のステップと形が競合し
   ①狭幅でステップがロゴに追いつかず被り、②広幅で2つの縁が干渉して二重段差（ボコボコ、
   ≈1330-1400 / ≥1490）が出た。→ PC はなめらかステップ1本に統一（ノッチは出さない）。 */
.lower-fv__logo-notch {
	display: none;
}

/* コピーは写真左下のノッチ内（Figma: left104/top572）。地のクリームに重なる */
.lower-fv__copy {
	position: absolute;
	left: calc(104 / 1512 * 100%);
	top: calc(572 / 744 * 100%);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* COMPANY = Figma 書き出しのベクター文字（コーラル塗り＋濃色アウトライン）。
   text-stroke の癖を避けるため SVG をそのまま使う。 */
.lower-fv__en {
	margin: 0;
	line-height: 0;
}

/* 1512 で原寸 511px。狭幅では frame=100vw に追従して縮小（511/1512≒33.79vw） */
.lower-fv__en-img {
	width: min(511px, 33.79vw);
	height: auto;
}

.lower-fv__ja {
	margin: 0;
	font-size: min(20px, 1.32vw);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.15em;
	line-height: 1.3;
	color: var(--color-text);
}

/* SP（Figma に下層SPデザイン無し→実装裁量）。TOP FV の SP と同型＝写真を全幅にし、
   写真の右下を地色パネルで切り抜いて（内角=左上を角丸）、その中に「COMPANY」を
   90°時計回りの縦スパイン＋「会社情報」を縦書きで置く。ヘッダーは写真上端に重なる。 */
@media (max-width: 767px) {
	.lower-fv {
		aspect-ratio: auto;
		padding: 0;

		/* COMPANY は回転前 img（語長=横長）がはみ出すため、ここで断ち切って横スクロール防止 */
		overflow-x: clip;
	}

	/* 写真は全幅・角丸なし（TOP SP と同じ full-bleed）。ノッチマスクは解除 */
	.lower-fv__visual {
		position: relative;
		inset: auto;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 4;
		-webkit-mask: none;
		mask: none;
		border-radius: 0;
		overflow: hidden;
	}

	/* SP は 3:4 縦長クロップ。右側 3 人（中央〜右の作業者）が収まるよう右寄せ */
	.lower-fv__bg {
		object-position: 65% center;
	}

	/* ロゴ用ノッチ：写真左上をクリーム地で切り抜きヘッダーロゴを目立たせる。
	   写真は全幅で角丸無し→外角(左上)は 0、写真へ食い込む内角(右下)のみ角丸。
	   ロゴ(x24-135 / y20-56)を覆う 180×72。TOP SP の .fv__logo-notch と同方式。 */
	.lower-fv__logo-notch {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 180px;
		height: 72px;
		background: var(--color-bg-service);
		border-radius: 0 0 var(--space-lg) 0;
		z-index: 2;
	}

	/* コピーは写真の右下に、地色パネルごと重ねて切り抜きを作る（内角=左上を角丸）。
	   パネル内は COMPANY（縦スパイン）を右・会社情報（縦書き）を左の2列に。 */
	.lower-fv__copy {
		position: absolute;
		inset: auto;
		inset: auto 0 0 auto;
		z-index: 3;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		gap: var(--space-sm);
		padding: var(--space-md);
		margin: 0;
		background: var(--color-bg-service);
		border-radius: var(--space-lg) 0 0 0;
	}

	/* COMPANY を 90°時計回りに回して縦スパインに。回転後の footprint（縦=語長 en-len /
	   横=厚み）をラッパーに確保し、中心基準で回す（過拘束の inset+margin:auto は不可）。 */
	.lower-fv__en {
		--en-len: min(240px, 52vw);

		position: relative;
		width: calc(var(--en-len) * 62 / 511);
		height: var(--en-len);
		margin: 0;
		line-height: 0;
	}

	.lower-fv__en-img {
		position: absolute;
		top: 50%;
		left: 50%;

		/* リセットの img{max-width:100%} は親ラッパー（厚み）に縛るため解除 */
		max-width: none;
		width: var(--en-len);
		height: auto;
		transform: translate(-50%, -50%) rotate(90deg);
	}

	/* 会社情報は回転させず縦書き（正立で 会／社／情／報）。COMPANY の左列へ。 */
	.lower-fv__ja {
		position: static;
		transform: none;
		writing-mode: vertical-rl;
		margin: 0;
		font-size: 14px;
		letter-spacing: 0.15em;
		line-height: 1;
		white-space: nowrap;
	}
}

/* 下層セクション見出し（JA大 + EN小） */
.lower-head {
	margin-bottom: var(--space-lg);
}

.lower-head__ja {
	margin: 0;
	color: var(--color-text);

	/* Figma実測(1512基準): 漢字字面≈32px → font≈36px。SP下限24px */
	font-size: clamp(24px, 2.4vw, 36px);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.1em;
}

/* アイコン付き見出し（代表あいさつ等）。アイコンは JA テキスト左に中央揃え */
.lower-head__ja--icon {
	display: flex;
	align-items: center;
	gap: var(--space-sm); /* Figma実測: アイコン→JA ≈18px */
}

.lower-head__icon {
	flex: 0 0 auto;

	/* Figma実測: アイコン径≈34px（会社概要 teal #71C8C3 円） */
	width: 34px;
	height: 34px;

	/* 和文グリフのインク重心は行ボックス中央よりやや下。align-items:center だと
	   アイコンが相対的に上に浮いて見えるため、光学的に2px下げて中央へ合わせる */
	transform: translateY(2px);
}

.lower-head__en {
	/* Figma実測: JAとのgap≈15px / cap≈11px→font15px / 色は濃色#393229(旧 teal --color-accent は誤り) / 字間≈0.3em */
	margin: var(--space-xs) 0 0;
	color: var(--color-text);
	font-family: var(--font-en);
	font-size: 15px;
	letter-spacing: 0.3em;
}

.company-section {
	position: relative;
	padding-block: var(--space-2xl);
	overflow-x: clip; /* 装飾雲のはみ出しで横スクロールさせない */
}

.company-section__inner {
	position: relative;
	z-index: 1; /* 内容は装飾雲より前面 */
	width: min(100% - 2 * var(--content-gutter), var(--content-max-width));
	margin-inline: auto;
}

/* 代表あいさつ */
.company-message__card {
	/* Figmaデザイン実測: カードは content 全幅(1352)ではなく ≈1095px で中央寄せ
	   （1512フレームで左右 ≈208px インセット）。content より狭く中央配置する */
	max-width: 1096px;
	margin-inline: auto;
	display: grid;

	/* 写真列と文章列は等幅（Figmaデザイン実測: 各 ≈470px / 1:1）。
	   どの画面幅でも 1fr:1fr で幅が一致する */
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: stretch;
	padding: var(--space-lg);
	background: var(--color-surface-base);
	border-radius: 24px;
	box-shadow: 0 4px 20px rgb(57 50 41 / 6%);
}

/* 写真は列幅に追従しつつ比率固定（代表画像の元比率 472:596 ≈0.79）。上端揃え */
.company-message__photo {
	align-self: start;
}

.company-message__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 472 / 596;
	object-fit: cover;
	object-position: center;
	border-radius: 16px;
}

/* テキスト列は縦フレックスにして署名をカード下端に寄せる */
.company-message__text {
	display: flex;
	flex-direction: column;
}

.company-message__lead {
	/* 写真上端よりわずかに下げて余白を持たせる */
	margin: var(--space-md) 0 var(--space-lg);
	color: var(--color-text);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
}

.company-message__accent {
	color: var(--color-accent);
}

/* リード見出しの SP 専用改行。PC では無効（1行）、SP のみ改行を効かせる */
.company-message__lead-br {
	display: none;
}

.company-message__body {
	margin: 0;
}

.company-message__body p {
	margin: 0 0 var(--space-md);
	line-height: 2;
}

.company-message__body p:last-child {
	margin-bottom: 0;
}

.company-message__sign {
	/* margin-top:auto で写真の高さに合わせ署名をカード下端へ寄せる */
	margin: auto 0 0;
	text-align: right;
	line-height: 1.6;
}

.company-message__role {
	display: block;
	font-size: 14px;
}

.company-message__name {
	display: block;
	margin-top: var(--space-2xs);
	font-size: 22px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
}

/* 会社概要テーブル */
.company-overview__table {
	max-width: 880px;
	margin-inline: auto;
	padding: var(--space-md) var(--space-2xl);
	background: var(--color-surface-base);
	border-radius: 16px;
	box-shadow: 0 4px 20px rgb(57 50 41 / 6%);
}

.company-overview__row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--space-md);
	padding-block: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.company-overview__row:last-child {
	border-bottom: 0;
}

.company-overview__label {
	margin: 0;
	font-weight: var(--font-weight-bold);
}

.company-overview__value {
	margin: 0;
	line-height: 1.8;
}

/* アクセス */
.company-access__card {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: var(--space-xl);
	align-items: center;
	padding: var(--space-xl);
	background: var(--color-surface-base);
	border-radius: 16px;
	box-shadow: 0 4px 20px rgb(57 50 41 / 6%);
}

/* Figma 279:445 突合: 社名=Inter Bold 20px 字間10% / 住所=Zen Kaku Medium 16px
   行間130% 字間5% / 駅ラベル=Zen Kaku Medium 14px、塗り四角（角丸0・楕円ではない） */
.company-access__name {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-en);
	font-size: 20px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.1em;
}

.company-access__addr {
	margin: 0 0 var(--space-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: 1.3;
	letter-spacing: var(--letter-spacing-base);
}

/* 住所の「ピエールシークル」前の改行は SP のみ。PC は1行で続ける。 */
.company-access__addr-br-sp {
	display: none;
}

@media (max-width: 767px) {
	.company-access__addr-br-sp {
		display: inline;
	}
}

.company-access__station {
	display: inline-block;
	margin: 0;
	padding: var(--space-2xs) var(--space-sm);
	background: var(--color-bg-label);
	border-radius: 0;
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	line-height: 1.3;
	letter-spacing: var(--letter-spacing-base);
}

/* 地図枠は Figma 書き出し（992×506 ≒ 1.96:1）の比率を維持。
   iframe は intrinsic 高さを持ち aspect-ratio を素直に効かせないため、
   コンテナで比率を固定し中身を絶対配置で埋める（img/iframe 両対応）。 */
.company-access__map {
	position: relative;
	width: 100%;
	aspect-ratio: 992 / 506;
}

.company-access__map img,
.company-access__map iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 12px;
}

/* === COMPANY 装飾雲（Figma 書き出し SVG。スクロール進入で描画） ===
   旧 ::before（静的PNG）から .blob span へ移行し、TOP service と同じ
   initBlobDraw のワイプ（.blob--draw）を共有する。section は position:relative /
   overflow-x:clip 済み、__inner は z-index:1 で雲より前面。 */

/* OVERVIEW + ACCESS は淡teal帯（クリーム雲を見せる土台） */
.company-overview,
.company-access {
	background: var(--color-bg-company-band);
}

/* MESSAGE: teal雲を見出し左上に（左へ少しはみ出す） */
.blob--company-message {
	background-image: url( "../images/blob/company-message.svg" );
	aspect-ratio: 753 / 463;
	width: 46%;
	top: 0;
	left: -2%;
}

/* OVERVIEW: クリーム雲レイヤー（セクション幅）を上部に */
.blob--company-overview {
	background-image: url( "../images/blob/company-overview.svg" );
	aspect-ratio: 1500 / 1050;
	width: min(1512px, 100vw);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* ARTIST（旧MEMBER）: peach雲レイヤー（セクション幅）を上部に */
.blob--artist {
	background-image: url( "../images/blob/artist.svg" );
	aspect-ratio: 1512 / 1406;
	width: min(1512px, 100vw);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* CONTACT（Figma 該当なし＝実装裁量）: COMPANY のアーティスト節（.blob--artist）と
   同じ雲レイヤーを、フォーム節（.contact.company-section）の上部に敷く。全幅・中央・
   上端固定で、雲上端の左右ローブがフォームカードの上辺を対称に縁取る（節は
   position:relative / overflow-x:clip / __inner z-index:1 を .company-section から継承
   ＝アーティスト節と同じ土台）。
   旧実装は小さめ peach をヒーロー左下、teal を右下へ offset し、左右非対称で雲の断片
   だけが見える「精度の低い」見た目だった。アーティスト節と同設定へ統一して解消する。 */
.blob--contact {
	background-image: url( "../images/blob/artist.svg" );
	aspect-ratio: 1512 / 1406;
	width: min(1512px, 100vw);

	/* 雲を上へ引き上げ、ヒーローの「CONTACT」見出しに上端ローブをかぶせる。
	   form 節基準では top:0 がカード上辺（＝見出しより下）になるため負の top で持ち上げる。
	   overflow-y は可視なので上方向には切れず、見出しは __inner z-index:1 で前面を保つ。
	   footer の装飾雲（全身化で上端が y≈530 まで伸びる）と中段で被って見えないよう、
	   雲を上寄りに置いて上部へ寄せる狙いも兼ねる。 */
	top: -420px;
	left: 50%;
	transform: translateX(-50%);
}

/* 全幅装飾雲（画面の両端に接する min(1512px, 100vw) 中央寄せの雲）だけの補正。
   雲は 1512px で頭打ちのため、画面幅がそれを超えると雲が画面端まで届かず、
   箱端で背景がぱったり角切りになる（＝見切れる）。この幅域でのみ左右端を
   グラデーションマスクで羽化し、地色へ自然に溶かす。
   1512px 以下では雲が画面端に接し切れないので適用しない（素の見た目を維持）。
   列アンカーの雲（LABEL/Dig in!/DBREC 等＝両端に接しない）は対象外。 */
@media (min-width: 1512px) {
	.blob--artist,
	.blob--contact,
	.blob--company-overview {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
	}
}

/* === COMPANY: アーティスト一覧（artist CPT / 旧社員紹介）===
   部門見出しなしの単一グリッド。PC=4列で全件。SP=2列・10名表示＋VIEW MORE。 */

/* この節の地は TOP .artist / 下層footer と同じ beige(--color-bg-artist #f4e8d9)。
   .lower-page の cream(#fbf6f0)を透かさず、artist節→footer を beige で連続させる。 */
.company-artist {
	background: var(--color-bg-artist);
}

.company-artist__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);

	/* 白パネルは content 全幅ではなく ≈940px で中央寄せ（design 突合：左右に余白）。
	   1512フレームで実測 ≈945px・左右インセット ≈200px。 */
	max-width: 944px;
	margin-inline: auto;

	/* 全グリッドを1枚の白パネルに載せる（design 突合：他セクションのカードと同じ surface/影） */
	padding: var(--space-xl);
	list-style: none;
	background: var(--color-surface-base);
	border-radius: 24px;
	box-shadow: 0 4px 20px rgb(57 50 41 / 6%);
}

.company-artist__cell {
	margin: 0;
}

.company-artist__cell img {
	display: block;
	width: 100%;
	height: auto;

	/* アーティスト画像は正方形（design 突合） */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
}

/* SP の初期非表示セル。既定で隠し、PC で常時表示へ戻す（下の min-width 規則）。 */
.company-artist__cell.is-more-hidden {
	display: none;
}

/* view more で出現するセルの「ふわっと」表示。
   display:none→block の切替直後は is-revealing(透明・少し下)で開始し、
   次フレームで is-revealing を外すと transition で浮き上がる。 */
.company-artist__cell.is-revealing {
	opacity: 0;
	transform: translateY(16px);
}

.company-artist__cell.is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.company-artist__more {
	margin-top: var(--space-xl);
	text-align: center;
}

/* button を view-more ピルとして使うためのリセット */
.company-artist__more .view-more {
	border: 0;
	font: inherit;
	cursor: pointer;
}

/* 全件表示後は JS が hidden 属性を付与。display 指定を持つ .view-more では
   [hidden] が効かないため明示的に消す。 */
.company-artist__more .view-more[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.company-artist__cell.is-revealing,
	.company-artist__cell.is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* PC: 全件表示・VIEW MORE は不要 */
@media (min-width: 768px) {
	.company-artist__cell.is-more-hidden {
		display: block;
	}

	.company-artist__more {
		display: none;
	}
}

/* SP: 2列。白パネルの padding は PC 用の 64px(--space-xl)だと
   左右が食われ画像が小さくなる。SP は --space-md(24px)へ詰め、
   2列画像が画面幅いっぱいに広がるようにする（design 突合）。 */
@media (max-width: 767px) {
	.company-artist__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
		padding: var(--space-md);
	}
}

@media (max-width: 767px) {
	/* SP は縦リズムを詰める（PC の 96px は SP で余白過多） */
	.company-section {
		padding-block: var(--space-xl);
	}

	.company-message__card {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
		padding: var(--space-lg);
	}

	/* SP は写真をカード幅いっぱいに（180px 固定だと左右の余白が過大） */
	.company-message__photo img {
		width: 100%;
	}

	/* SP: 装飾雲は PC の 46%/左上だと小さく浮くだけ。ユーザー指示で
	   「画面いっぱい・見出しと写真の間」へ。この雲SVGは左寄り形状で右半分が
	   透明なため width:100% だと右が空く。112%/左-6%で両端へブリードさせて
	   全幅に見せ、top:75px で puffy な冠を見出し下端(129px)〜カード上端(169px)の
	   隙間に覗かせる（カードは不透明なので下半分は背面に隠れる）。
	   左右のはみ出しは .company-section の overflow-x:clip が吸収。 */
	.blob--company-message {
		width: 112%;
		left: -6%;
		top: 75px;
	}

	/* SP のみ：リード見出しを「映像作品を」で改行する */
	.company-message__lead-br {
		display: inline;
	}

	.company-overview__table {
		padding: var(--space-sm) var(--space-md);
	}

	.company-overview__row {
		grid-template-columns: 1fr;
		gap: var(--space-2xs);
	}

	.company-access__card {
		grid-template-columns: 1fr;
		gap: var(--space-md);
		padding: var(--space-lg);
	}

	/* SP は縦積みで地図が全幅になり、PC比率(≒2:1)だと高さが低く見づらい。
	   幅はそのままに、ほぼ正方形まで高さを上げて視認性を確保する。 */
	.company-access__map {
		aspect-ratio: 1 / 1;
	}

	/* OVERVIEW と ACCESS は同じ teal 帯で連続するため、境界の二重 padding
	   （下64px + 上64px = 128px）が SP で間延びする。境界だけ --space-md へ
	   詰め、1枚の帯の中の適切な仕切り間隔（24+24=48px）にする。 */
	.company-overview {
		padding-bottom: var(--space-md);
	}

	.company-access {
		padding-top: var(--space-md);
	}
}

/* === Placeholder（実装前の仮表示。実装時に削除） === */
.placeholder {
	padding: var(--space-2xl) 0;
	color: var(--color-text-muted);
	text-align: center;
}

/* === Responsive（PC基準。SPで縦積み・縮小） === */

/* ヘッダー: 中央寄せピル(ピル+メールで幅≈638px)が絶対配置ロゴ(右端≈207px)へ食い込む。
   ピル左端 =(100% - 638)/2 がロゴ右端＋余白を上回るまで重なる。素の計算では 100vw≥1100
   だが、ピルの中央寄せ基準は `width:min(100%-…)`＝スクロールバー除外幅、メディアクエリ
   はスクロールバー込み幅で発火するため、実測ではさらに上(≈1150px)まで僅かに重なる
   （E2E: 1100px で nav.left がロゴ右端を 0.4px 下回る）。よって 1149px 以下で
   ハンバーガー＋SPメニューへ切替え、余白 ≈24px(--space-md)を確保して構造的に解消する。
   ※フッター等の SP 規則は従来どおり ≤767px のまま（下のブロック）。 */
@media (max-width: 1149px) {
	/* SP/タブレット ヘッダ: ロゴ左 + ハンバーガー右。PC ピルは隠す */
	.site-header__inner {
		justify-content: space-between;
		padding-block: var(--space-sm);
	}

	/* PC の中央寄せ用ロゴ絶対配置を通常フローへ戻す */
	.site-header__logo {
		position: static;
		transform: none;
	}

	.site-header__logo img {
		width: 111px;
	}

	.global-nav-wrap {
		display: none;
	}

	.hamburger {
		display: block;
	}
}

@media (max-width: 767px) {
	/* SP: フッター上の余白は PC 用の 96px(--space-2xl)だと過大。
	   .company-section と同じ SP 縦リズム(--space-xl=64px)へ詰める。
	   下 padding は --space-lg のまま。 */
	.site-footer {
		padding-top: var(--space-xl);
	}

	/* SP: 今朝確定の「大胆にはみ出す」装飾(width:185vw)は維持しつつ、旧実装の
	   height:640px が雲の上端を直線でスパッと切って「見切れ」て見えた点だけ解消する。
	   height を base の aspect-ratio に委ねて全身高さにすると、上端の丸いローブが
	   ちゃんと巻き込まれ、両端・下端のはみ出しは意図どおり（overflow-x:clip が吸収）。 */
	.site-footer--lower .site-footer__blob {
		width: 185vw;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"brand"
			"nav"
			"contact"
			"copy";
	}

	.site-footer__nav {
		flex-wrap: wrap;
		gap: var(--space-lg);
	}

	.footer-contact-btn {
		justify-self: stretch;
		justify-content: center;
	}
}

/* === CONTACT / THANKS（Figma 該当デザイン無し＝実装裁量。TOP/COMPANY に合わせる）
   クリーム地のページヒーロー（EN大 + JA小）＋ company と共通の白角丸 surface カード。 === */

/* ページヒーロー。先頭に絶対配置ヘッダーが重なるため上に余白を確保する。
   地色は下層フッター(.site-footer--lower)と同じベージュ #f4e8d9 に揃え、
   ヒーロー→本文→フッターまで地色を連続させる（contact/thanks のみで使用）。 */
.page-hero {
	position: relative; /* __inner の z-index 基準（装飾雲はフォーム節へ移設済み）。 */
	background: var(--color-bg-artist);
	padding-block: calc(var(--space-2xl) + var(--space-xl)) var(--space-2xl);
	text-align: center;
}

.page-hero__inner {
	position: relative;
	z-index: 1; /* タイトルは雲より前面。雲がどれだけ被っても文字が潰れない。 */
	width: min(100% - 2 * var(--content-gutter), var(--content-max-width));
	margin-inline: auto;
}

.page-hero__en {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-en);
	font-size: clamp(40px, 6vw, 72px);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.12em;
	line-height: 1;
}

.page-hero__ja {
	margin: var(--space-sm) 0 0;
	color: var(--color-accent);
	font-size: clamp(14px, 1.4vw, 16px);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.15em;
}

/* contact / thanks は同じヒーロー直後にカードが続くため、地色の継ぎ目を消す。
   ヒーローの下 padding（space-2xl）がカード上の間隔を担うので、
   .company-section の上 padding は重複（合計 192px で過大）。上だけ 0 にして
   company の先頭セクションと同じ ≈96px の余白に揃える。 */
.contact,
.thanks {
	background: var(--color-bg-artist);
	padding-top: 0;
}

/* フォーム／メッセージのカード（company surface と共通トーン） */
.contact__card,
.thanks__card {
	max-width: 760px;
	margin-inline: auto;
	padding: var(--space-xl);
	background: var(--color-surface-base);
	border-radius: 24px;
	box-shadow: 0 4px 20px rgb(57 50 41 / 6%);
}

.contact__lead {
	margin: 0 0 var(--space-lg);
	color: var(--color-text);
	line-height: 1.9;
}

.contact__placeholder {
	margin: 0;
	color: var(--color-text-muted);
}

/* --- Contact Form 7 出力のデザイン寄せ（プラグイン生成マークアップを上書き） --- */
.contact__card .wpcf7-form p {
	margin: 0 0 var(--space-md);
}

.contact__card label {
	display: block;
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-base);
}

.contact__card .wpcf7-form-control-wrap {
	display: block;
	margin-top: var(--space-2xs);
}

.contact__card input[type="text"],
.contact__card input[type="email"],
.contact__card input[type="tel"],
.contact__card textarea {
	width: 100%;
	padding: var(--space-sm);
	background: var(--color-bg-service);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	color: var(--color-text);
	font-family: inherit;
	font-size: var(--font-size-base);
	line-height: 1.6;
}

.contact__card textarea {
	min-height: 160px;
	resize: vertical;
}

.contact__card input:focus,
.contact__card textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}

/* 必須マーク用ヘルパ（推奨フォームで <span class="contact-required"> を使う想定） */
.contact-required {
	margin-left: var(--space-2xs);
	color: var(--color-button);
	font-size: 12px;
}

/* 送信ボタン（footer のお問い合わせピルと同系。中央寄せ） */
.contact__card .wpcf7-submit {
	display: block;
	margin: var(--space-lg) auto 0;
	padding: var(--space-md) var(--space-pill);
	background: var(--color-nav);
	border: 1px solid var(--color-text);
	border-radius: 999px;
	color: var(--color-text);
	font-size: 18px;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-base);
	cursor: pointer;
	transition: var(--transition-hover);
}

.contact__card .wpcf7-submit:hover {
	opacity: 0.85;
}

/* バリデーション／応答メッセージ */
.contact__card .wpcf7-not-valid-tip {
	margin-top: var(--space-2xs);
	color: var(--color-button);
	font-size: 13px;
}

.contact__card input.wpcf7-not-valid,
.contact__card textarea.wpcf7-not-valid {
	border-color: var(--color-button);
}

.contact__card .wpcf7-response-output {
	margin: var(--space-md) 0 0;
	padding: var(--space-sm) var(--space-md);
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.6;
}

/* --- thanks --- */
.thanks__card {
	text-align: center;
}

.thanks__message {
	margin: 0 0 var(--space-xl);
	color: var(--color-text);
	line-height: 2;
}

.thanks__home {
	font-size: 14px;
}

@media (max-width: 767px) {
	.page-hero {
		padding-block: calc(var(--space-2xl) + var(--space-md)) var(--space-xl);
	}

	.contact__card,
	.thanks__card {
		padding: var(--space-lg) var(--space-md);
	}

	/* SP: ヒーローの余白・見出しが小さくなる分、引き上げ量も控えめにして
	   「CONTACT」見出しに雲上端を重ねる（PC の -420px だと上げ過ぎ）。
	   SP は footer 雲との間隔が広く（実測 1000px 超）被らないため値は控えめ。 */
	.blob--contact {
		top: -180px;
	}
}