/*
Theme Name: KMCN
Author: KMCN
Version: 1.0.0
*/

/* ---------- トークン ---------- */
:root {
	--paper: #f6f6f1;
	--ink: #101010;
	--yellow: #e8e33c;
	--leaf: #8dc63f;
	--green: #2e9e4f;
	--muted: #77746a;
	--line: #dddad0;
	--font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
	--font-en: "Futura", "Avenir Next", "Century Gothic", "Hiragino Sans", sans-serif;
	/* 横の基本余白（8pxグリッド×2） */
	--gutter: calc(8px * 2);
}

/* ---------- ベース ---------- */
* { box-sizing: border-box; }
html {
	scroll-behavior: smooth;
	/* アンカージャンプが固定ヘッダー（最大約88px）の下に潜らないよう手前で止める */
	scroll-padding-top: 96px;
	/* オーバースクロールで覗くキャンバス色。ページ両端（ヒーロー／フッター）のダークに合わせる */
	background: var(--ink);
}
body {
	margin: 0;
	/* iOS Safariはオーバースクロール領域をbodyの背景色で塗るためダークにする。紙色はmainが持つ */
	background: var(--ink);
	color: var(--ink);
	font-family: var(--font-jp);
	font-weight: 400;
	line-height: 2;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* 英字見出し用 */
.u-en {
	font-family: var(--font-en);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

main {
	background: var(--paper);
	/* フッターの角丸の背後に紙色を敷くため、下端をフッターの下に潜り込ませる */
	padding-bottom: 6vw;
	margin-bottom: -6vw;
}
.container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	position: relative;
	z-index: 1;
}

/* ---------- ヘッダー ---------- */
.site-head {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px var(--gutter);
	/* 背景セクションの明暗に応じてJSがbodyにクラスを付け、色を切り替える */
	color: var(--ink);
	transition: color 0.25s ease;
}
/* ヘッダー全体のすりガラス。下に40pxはみ出させ、その部分だけフェードして境界線を消す */
.site-head::before {
	content: "";
	position: absolute;
	inset: 0 0 -40px 0;
	z-index: -1;
	pointer-events: none;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
body.head-on-dark .site-head,
body.menu-open .site-head {
	color: var(--paper);
}
.head-brand {
	font-size: 1.35rem;
	letter-spacing: 0.01em;
	text-decoration: none;
}
/* ハンバーガーボタン */
.menu-toggle {
	/* buttonはUAスタイルで色を継承しないため明示する */
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 48px;
	height: 48px;
	border: 2px solid currentColor;
	border-radius: 999px;
	background: none;
	cursor: pointer;
	padding: 0;
}
.menu-toggle-bar {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: translate 0.25s ease, rotate 0.25s ease;
}
body.menu-open .menu-toggle-bar:first-child { translate: 0 4.5px; rotate: 45deg; }
body.menu-open .menu-toggle-bar:last-child { translate: 0 -4.5px; rotate: -45deg; }

/* ---------- フルスクリーンメニュー ---------- */
body.menu-open { overflow: hidden; }
.global-menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--ink);
	color: var(--paper);
	display: flex;
	/* 収まらない環境でもスクロールで全項目に届くようにする */
	overflow-y: auto;
	/* ハンバーガー位置から円形に広がる */
	clip-path: circle(0px at calc(100% - 40px) 44px);
	visibility: hidden;
	transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.55s;
}
body.menu-open .global-menu {
	clip-path: circle(150% at calc(100% - 40px) 44px);
	visibility: visible;
	transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1);
}
/* align-items: center だと溢れた上端が切れるため、margin: auto で中央寄せする */
.global-menu .container {
	margin-block: auto;
	padding-block: 84px 40px;
}
/* ナビゲーションリスト（メニュー／フッター共通コンポーネント） */
.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-list li + li { margin-top: 3vh; }
.nav-list a {
	display: inline-block;
	/* 6項目が画面の高さに収まるようvh基準にする */
	font-size: clamp(26px, 5vh, 58px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.2s ease, translate 0.2s ease;
}
.nav-list a:hover { translate: 12px 0; }
.nav-list li:nth-child(1) a:hover { color: var(--leaf); }
.nav-list li:nth-child(2) a:hover { color: var(--yellow); }
.nav-list li:nth-child(3) a:hover { color: var(--green); }
.nav-list li:nth-child(4) a:hover { color: var(--yellow); }
.nav-list li:nth-child(5) a:hover { color: var(--leaf); }
.nav-list li:nth-child(6) a:hover { color: var(--green); }

/* メニュー側だけの開閉スタッガー */
.global-menu .nav-list li {
	opacity: 0;
	translate: 0 32px;
	transition: opacity 0.4s ease, translate 0.4s ease;
}
body.menu-open .global-menu .nav-list li { opacity: 1; translate: 0 0; }
body.menu-open .global-menu .nav-list li:nth-child(1) { transition-delay: 0.16s; }
body.menu-open .global-menu .nav-list li:nth-child(2) { transition-delay: 0.22s; }
body.menu-open .global-menu .nav-list li:nth-child(3) { transition-delay: 0.28s; }
body.menu-open .global-menu .nav-list li:nth-child(4) { transition-delay: 0.34s; }
body.menu-open .global-menu .nav-list li:nth-child(5) { transition-delay: 0.4s; }
body.menu-open .global-menu .nav-list li:nth-child(6) { transition-delay: 0.46s; }
/* ナビ共通：見出しラベルと番号 */
.nav-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 28px;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	opacity: 0.6;
}
.nav-label::before {
	content: "";
	width: 32px;
	height: 3px;
	border-radius: 999px;
	background: var(--leaf);
}
/* タイトル上段の「番号＋日本語」ラベル */
.nav-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	opacity: 0.6;
}


/* ---------- ヒーロー ---------- */
.hero {
	position: relative;
	min-height: 96vh;
	background: var(--ink);
	color: var(--paper);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	/* ASOBI風：下端の大きなカーブ */
	border-radius: 0 0 50% 50% / 0 0 5vw 5vw;
	padding: 120px 0 90px;
	/* ワードマークをヒーロー実幅（スクロールバー除く）の%で指定するための基準 */
	container-type: inline-size;
}
.hero-wordmark {
	margin: 0;
	/* cqw非対応ブラウザ用フォールバック */
	font-size: clamp(58px, 15.2vw, 300px);
	/* ヒーロー幅の15.5%。「KAMECHAN」8文字≒6.24emなので約97%幅に収まる */
	font-size: 15.5cqw;
	line-height: 0.95;
	letter-spacing: -0.025em;
	text-align: center;
	white-space: nowrap;
}
/* ロゴタイル：絶対配置だと縦の短い端末でタイトルに被るため、
   通常フローでタイトルの上に固定マージンで置く */
.hero-mark {
	align-self: flex-end;
	margin: 0 9vw 20px 0;
	width: clamp(64px, 7vw, 110px);
	padding: 10px;
	background: #fff;
	border-radius: 22px;
	rotate: 9deg;
}
.hero-lead {
	margin: 5vh auto 0;
	text-align: center;
	font-size: 0.95rem;
}
.hero-foot {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	justify-content: center;
	padding: 0 9vw 5vw;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	opacity: 0.75;
}

/* イントロ：ブランド3色が順番に画面をめくり上げる */
.intro {
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
	display: grid;
	place-items: center;
	/* 画面外に駐車したままだとアドレスバー伸縮時にチラつくため、全カーテン退場後に完全非表示にする */
	animation: intro-hide 0s linear 1.4s forwards;
}
@keyframes intro-hide {
	to { visibility: hidden; }
}
.intro i {
	position: absolute;
	inset: 0;
	/* めくれる下端にサイト共通のカーブ */
	border-radius: 0 0 50% 50% / 0 0 7vw 7vw;
	animation: intro-wipe 0.55s cubic-bezier(0.75, 0, 0.2, 1) forwards;
}
/* 会社ロゴ：カーテンの前面に居続けて、最後の1枚と一緒に上へ抜ける */
.intro-card {
	position: relative;
	z-index: 4;
	background: #fff;
	border-radius: 24px;
	padding: 22px 32px;
	box-shadow: 0 12px 32px rgba(16, 16, 16, 0.12);
	animation: intro-card-exit 0.55s cubic-bezier(0.75, 0, 0.2, 1) 0.8s forwards;
}
.intro-card img {
	display: block;
	width: min(56vw, 360px);
}
@keyframes intro-card-exit {
	to { translate: 0 -120vh; }
}
.intro i:nth-child(1) { background: var(--green); z-index: 1; animation-delay: 0.8s; }
.intro i:nth-child(2) { background: var(--leaf); z-index: 2; animation-delay: 0.6s; }
.intro i:nth-child(3) { background: var(--yellow); z-index: 3; animation-delay: 0.4s; }
@keyframes intro-wipe {
	to { translate: 0 -104%; }
}

/* MV：ワードマーク全体がじんわり浮かび上がる（イントロのワイプが抜けるのに合わせて） */
.hero-wordmark {
	opacity: 0;
	animation: wm-fade 2s ease 1.2s forwards;
}
@keyframes wm-fade {
	to { opacity: 1; }
}

/* ワードマークの後にリード文・下部をふわっと出す */
.hero-lead, .hero-foot {
	--fade-to: 1;
	opacity: 0;
	animation: hero-fade 1.2s ease 1.7s forwards;
}
.hero-foot { --fade-to: 0.75; }
@keyframes hero-fade {
	to { opacity: var(--fade-to); }
}
/* ロゴタイル：ワードマークが出揃った最後にぽんっと落ちてくる */
.hero-mark {
	translate: 0 -120vh;
	animation: mark-drop 1.4s 2s forwards;
}
@keyframes mark-drop {
	0% { translate: 0 -120vh; rotate: 9deg; animation-timing-function: linear; }
	/* 着地直前に傾きをまっすぐに戻す */
	55% { rotate: 9deg; animation-timing-function: ease-out; }
	65% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.15, 0.6, 0.3, 1); }
	/* 跳ね返りながら元の傾きへ戻っていく */
	82% { translate: 0 -8px; rotate: 4deg; animation-timing-function: cubic-bezier(0.6, 0.3, 0.8, 0.7); }
	100% { translate: 0 0; rotate: 9deg; }
}

/* SCROLLの矢印：下に流れるループアニメーション */
.hero-scroll {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.hero-scroll-arrow {
	animation: scroll-arrow 1.6s ease-in-out infinite;
}
@keyframes scroll-arrow {
	0% { translate: 0 -5px; opacity: 0; }
	30% { opacity: 1; }
	100% { translate: 0 8px; opacity: 0; }
}

/* ---------- 事業セクション ---------- */
.biz {
	position: relative;
	padding: 17vh 0;
	overflow: hidden;
}
.biz-title {
	margin: 0 0 26px;
	/* ロゴカードの右カラムと共存できる上限に抑える */
	font-size: clamp(64px, 9vw, 108px);
	line-height: 0.92;
	letter-spacing: -0.02em;
}
.biz-desc {
	margin: 0 0 40px;
	max-width: 34em;
	font-size: 0.95rem;
}
/* ピル型リンク */
.pill-link {
	display: inline-block;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	letter-spacing: 0.1em;
	text-decoration: none;
	border: 2.5px solid currentColor;
	border-radius: 999px;
	padding: 16px 44px;
	transition: translate 0.2s ease, background 0.25s ease, color 0.25s ease;
}
.pill-link:hover { translate: 0 -2px; background: var(--ink); color: var(--paper); }
.biz--sd .pill-link:hover { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.biz--live .pill-link:hover { background: var(--leaf); color: var(--ink); border-color: var(--ink); }
.band--dark .pill-link:hover { background: var(--green); color: #fff; border-color: #fff; }
/* サイト準備中ピル：button要素をリンク風ピルに揃えるリセット */
.pill-link--soon {
	background: transparent;
	color: inherit;
	cursor: pointer;
}

/* 散らばる色チップ（写真の代わりにブランド色を散らす） */
.chips { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.chip {
	position: absolute;
	border-radius: 26px;
	display: grid;
	place-items: center;
}
.chip--yellow { background: var(--yellow); }
.chip--leaf { background: var(--leaf); }
.chip--green { background: var(--green); }

/* タイトル（SDWINDS）に重ならないよう右端に寄せる */
.chip--a { width: 180px; height: 230px; right: 3vw; top: 8vh; rotate: -8deg; }
.chip--c { width: 90px; height: 120px; right: 30vw; bottom: 6vh; rotate: 14deg; }
.chip--d { width: 200px; height: 150px; right: 10vw; top: 14vh; rotate: 6deg; }
.chip--e { width: 110px; height: 160px; right: 26vw; bottom: 10vh; rotate: -11deg; }

/* 事業ブランドのロゴカード */
/* スマホでは傾けず、サブタイトルの下・説明文の上に置く（下余白はsec-headと同じ48px） */
.biz-logo {
	margin: 0 auto 48px;
	width: fit-content;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 24px 28px;
	box-shadow: 0 12px 32px rgba(16, 16, 16, 0.08);
}
.biz-logo img {
	display: block;
	width: 220px;
	height: auto;
}
/* SDwindsのロゴは白抜きのため黒カードに載せる */
.biz--sd .biz-logo {
	background: var(--ink);
	border-color: var(--ink);
}
.biz--sd .biz-logo img { width: 128px; }
/* SOUND SPACEは公式サイト準備中のため、ロゴの代わりにCOMING SOONをカードに載せる */
.coming-soon {
	display: block;
	font-size: clamp(38px, 4.6vw, 54px);
	line-height: 1.1;
	text-align: center;
}
@media (min-width: 761px) {
	/* ロゴカードは右カラムに分離し、タイトル・本文と重ならないようにする */
	.biz .container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 48px;
		align-items: center;
	}
	.biz .container > * { grid-column: 1; }
	.biz .biz-logo {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin: 0;
	}
	.biz--sd .biz-logo { rotate: -6deg; }
	.biz--live .biz-logo { rotate: -4deg; }
	.biz--agency .biz-logo { rotate: 5deg; }
	.biz-logo img { width: clamp(220px, 24vw, 320px); }
	.biz--sd .biz-logo img { width: clamp(130px, 13vw, 180px); }

}

/* 所属アーティスト：タイトル＋画像の縦並び（別タブリンク） */
.agency-artists {
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin-top: 56px;
}
.artist-name {
	margin: 0 0 16px;
	font-size: 1.05rem;
}
/* タイトル左のアーティストロゴ（黒ロゴでも見えるよう白チップに載せる） */
.artist-logo {
	width: 44px;
	height: 44px;
	padding: 5px;
	background: #fff;
	border-radius: 12px;
	object-fit: contain;
}
.artist-desc {
	margin: 0 0 18px;
	font-size: 0.88rem;
	line-height: 2;
	color: rgba(246, 246, 241, 0.75);
}
.artist-card {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
}
.artist-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
/* 画像下のSNSリンク */
.artist-social {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}
.artist-sns {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--paper);
	color: var(--ink);
	border-radius: 50%;
	transition: translate 0.15s ease, background 0.15s ease;
}
.artist-sns svg {
	width: 17px;
	height: 17px;
}
.artist-sns:hover {
	translate: 0 -2px;
	background: var(--yellow);
}
/* PCでは左右2カラム、右側を下げて段違いにする */
@media (min-width: 761px) {
	/* グリッドの右カラム（ロゴ）を突き抜けて全幅を使う */
	.biz .container > .agency-artists { grid-column: 1 / -1; }
	.agency-artists { flex-direction: row; gap: 24px; align-items: flex-start; }
	.artist { flex: 1 1 0; }
	.artist:nth-child(even) { margin-top: 88px; }
}

/* 黒帯セクション（上下カーブ） */
.band--dark {
	background: var(--ink);
	color: var(--paper);
	border-radius: 50% 50% 50% 50% / 4vw 4vw 4vw 4vw;
	margin: 4vh 0;
}

/* ---------- 沿革 ---------- */
.history { padding: 15vh 0 12vh; }
.sec-title {
	margin: 0 0 8px;
	/* 事業セクションのタイトルとサイズを揃える */
	font-size: clamp(64px, 9vw, 108px);
	line-height: 1;
	letter-spacing: -0.02em;
}
/* セクション見出し：英タイトル文字の右下に日本語サブタイトルを付ける */
.sec-head {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin: 0 0 48px;
}
.sec-head .sec-title,
.sec-head .biz-title { margin: 0; }
.sec-ja {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 6px;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.18em;
}
.sec-ja::before {
	content: "";
	width: 36px;
	height: 3px;
	border-radius: 999px;
	background: var(--green);
}
.biz--sd .sec-ja::before { background: var(--yellow); }
.biz--live .sec-ja::before { background: var(--leaf); }
.history .sec-ja::before { background: var(--yellow); }
.company .sec-ja::before { background: var(--leaf); }
.history-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 760px;
}
.history-list li {
	display: flex;
	gap: 5vw;
	align-items: baseline;
	padding: 26px 4px;
	border-top: 1px solid var(--line);
}
.history-list li:last-child { border-bottom: 1px solid var(--line); }
.history-year {
	flex: none;
	width: 7.5em;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}
.history-body { font-size: 1rem; font-weight: 600; }

/* ---------- 会社概要 ---------- */
.company { padding: 4vh 0 12vh; }
.company-list {
	margin: 0;
	max-width: 760px;
}
.company-list div {
	display: flex;
	gap: 5vw;
	padding: 22px 4px;
	border-top: 1px solid var(--line);
}
.company-list div:last-child { border-bottom: 1px solid var(--line); }
.company-list dt {
	flex: none;
	width: 7.5em;
	font-weight: 600;
	font-size: 0.9rem;
}
.company-list dd {
	margin: 0;
	font-size: 0.95rem;
}

/* ---------- お問い合わせ ---------- */
.contact { padding: 10vh 0 18vh; }
/* 見出しとリード文だけ中央揃え。サブタイトルはPCでもタイトルの下に落とす */
.contact .sec-head {
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.contact-lead {
	margin: 0 0 7vh;
	font-size: 0.95rem;
	color: var(--muted);
	text-align: center;
}
/* フォーム（レイアウトのみ・送信は未実装） */
.contact-form {
	margin: 0 auto;
	max-width: 640px;
	text-align: left;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 36px 32px;
	box-shadow: 0 12px 32px rgba(16, 16, 16, 0.08);
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.form-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.form-field label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 700;
}
.form-req {
	font-size: 0.65rem;
	font-weight: 700;
	background: var(--yellow);
	border-radius: 999px;
	padding: 2px 10px;
}
.form-field input,
.form-field select,
.form-field textarea {
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 8px 14px;
	width: 100%;
}
/* セレクトは高さを維持し、矢印をサイト共通の太いシェブロンにする */
.form-field select {
	padding-top: 12px;
	padding-bottom: 12px;
	padding-right: 44px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23101010' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
	cursor: pointer;
}
.form-field textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.8;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(46, 158, 79, 0.25);
}
.form-submit {
	margin: 6px auto 0;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.08em;
	background: var(--yellow);
	color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: 999px;
	padding: 14px 64px;
	cursor: pointer;
	transition: translate 0.2s ease;
}
.form-submit:hover {
	translate: 0 -2px;
}

/* 送信失敗時のエラーメッセージ */
.form-error {
	margin: 0 0 14px;
	font-size: 0.85rem;
	font-weight: 700;
	color: #d43c3c;
	text-align: center;
}

/* ハニーポット（スパム対策の不可視フィールド） */
.hp-field {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* フォーム送信完了・準備中ダイアログ */
.form-dialog {
	border: none;
	border-radius: 24px;
	padding: 36px 44px;
	max-width: min(90vw, 420px);
	text-align: center;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 24px 64px rgba(16, 16, 16, 0.25);
}
.form-dialog[open] { animation: dialog-pop 0.25s ease; }
.form-dialog::backdrop {
	background: rgba(16, 16, 16, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.form-dialog-mark {
	width: 64px;
	margin: 0 auto 14px;
}
.form-dialog-title {
	margin: 0 0 10px;
	font-size: 1.15rem;
	font-weight: 700;
}
.form-dialog-text {
	margin: 0 0 24px;
	font-size: 0.88rem;
	color: var(--muted);
}
.form-dialog-close {
	font: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	background: var(--ink);
	color: var(--paper);
	border: none;
	border-radius: 999px;
	padding: 11px 40px;
	cursor: pointer;
	transition: translate 0.15s ease;
}
.form-dialog-close:hover { translate: 0 -2px; }
@keyframes dialog-pop {
	from { scale: 0.92; opacity: 0; }
	to { scale: 1; opacity: 1; }
}

/* ---------- フッター ---------- */
.site-foot {
	background: var(--ink);
	color: var(--paper);
	border-radius: 5vw 5vw 0 0;
	padding: 12vh 0 0;
	overflow: hidden;
}
/* 下端で切れる巨大アウトラインワードマーク */
.foot-wordmark {
	margin: 2vh 0 -0.38em;
	font-size: 15vw;
	line-height: 1;
	letter-spacing: -0.02em;
	text-align: center;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(246, 246, 241, 0.25);
	pointer-events: none;
	user-select: none;
}
.foot-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 8vh;
	padding-top: 26px;
	border-top: 1px solid rgba(246, 246, 241, 0.25);
	font-size: 0.78rem;
}

/* ---------- ページトップボタン ---------- */
.to-top {
	position: fixed;
	right: var(--gutter);
	bottom: var(--gutter);
	z-index: 80;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	background: #fff;
	color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: 50%;
	text-decoration: none;
	/* MV（ヒーロー）を超えるまで非表示 */
	opacity: 0;
	visibility: hidden;
	translate: 0 14px;
	transition: opacity 0.3s ease, translate 0.3s ease, background 0.2s ease, visibility 0s linear 0.3s;
}
body.past-hero .to-top {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition: opacity 0.3s ease, translate 0.3s ease, background 0.2s ease;
}
.to-top:hover { background: var(--yellow); }

/* ---------- 表示アニメーション ---------- */
.reveal { opacity: 0; translate: 0 24px; transition: opacity 0.7s ease, translate 0.7s ease; }
.reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- レスポンシブ ---------- */
/* PCでは横の基本余白を24px（8px×3）に広げる */
@media (min-width: 761px) {
	:root { --gutter: calc(8px * 3); }

	.global-menu .nav-list,
	.site-foot .nav-list {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		justify-content: center;
		column-gap: clamp(56px, 10vw, 144px);
		row-gap: 3vh;
	}

	.global-menu .nav-list li + li,
	.site-foot .nav-list li + li {
		margin-top: 0;
	}

	.global-menu .nav-label,
	.site-foot .nav-label {
		display: flex;
		justify-content: center;
	}
}


@media (max-width: 760px) {
	.site-head { padding: 14px var(--gutter); }
	.head-brand { font-size: 1rem; }
	.menu-toggle { width: 42px; height: 42px; gap: 6px; }
	body.menu-open .menu-toggle-bar:first-child { translate: 0 4px; }
	body.menu-open .menu-toggle-bar:last-child { translate: 0 -4px; }
	.global-menu { clip-path: circle(0px at calc(100% - 37px) 37px); }
	body.menu-open .global-menu { clip-path: circle(150% at calc(100% - 37px) 37px); }
	/* svh基準でアドレスバー表示中でも6項目が収まるサイズにする */
	.nav-list a { font-size: clamp(20px, 4.2svh, 32px); }
	.nav-list li + li { margin-top: 2.2svh; }
	.global-menu .nav-label { margin-bottom: 16px; }
	.global-menu-mark { width: 64px; right: 5vw; bottom: 5vh; }

	.hero { padding: 90px 0 80px; min-height: 88vh; }
	.hero-mark { margin-right: 5vw; width: 92px; border-radius: 20px; padding: 10px; }
	.hero-lead { font-size: 0.88rem; }
	/* モバイルでは改行位置を固定しない */
	.hero-lead br { display: none; }
	.hero-foot { padding: 0 10vw 8vw; }

	.biz { padding: 12vh 0; }
	.biz-title, .sec-title { font-size: clamp(44px, 15vw, 90px); }
	/* ボタンは中央寄せ */
	.pill-link {
		display: block;
		width: fit-content;
		margin-inline: auto;
		padding: 13px 32px;
	}

	/* チップは端の色ブロックだけ残して縮小 */
	.chip { scale: 0.55; }
	.chip--c, .chip--e { display: none; }
	/* SOUND SPACEのタイトルに被らないよう右端へ逃がす */
	.chip--d { right: -4vw; }

	.history-list li { flex-direction: column; gap: 2px; }
	.history-year { width: auto; font-size: 0.8rem; color: var(--muted); }

	.company-list div { flex-direction: column; gap: 2px; }
	.company-list dt { width: auto; font-size: 0.8rem; color: var(--muted); }


	/* スマホではサブタイトルを必ずタイトルの下の行に落とす（左寄せ）。CONTACTも他と同じ扱いに戻す */
	.sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.contact .sec-head { align-items: flex-start; }
	.contact-lead { text-align: left; }

	.contact-form { padding: 28px 20px; }

	.foot-bar { flex-wrap: wrap; gap: 12px; justify-content: center; }
}

/* ---------- モーション低減 ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; translate: 0 0; transition: none; }
	.pill-link, .form-submit, .foot-nav a { transition: none; }
	.artist-sns { transition: none; }
	.form-dialog[open] { animation: none; }
	.menu-toggle-bar, .global-menu, .nav-list li, .nav-list a { transition: none; }
	.global-menu .nav-list li { opacity: 1; translate: 0 0; }
	.to-top { transition: none; }
	.hero-scroll-arrow { animation: none; }
	.intro { display: none; }
	.hero-wordmark, .hero-mark, .hero-lead, .hero-foot { animation: none; opacity: 1; }
	.hero-mark { translate: 0 0; }
	.hero-foot { opacity: 0.75; }
}