/*
 * toui-theme メインスタイルシート
 * FV の配色はデザインカンプ(assets/design/pc-top_ver3.png)から抽出。
 * --cream 以降の旧トークンはパネル/SPセクションで引き続き使用。
 */
/* 画面幅を px にした値(2026-10-21)。tan(atan2(a, b)) で長さ同士の比を数にする書き方は、Firefox が atan2 の中で単位の違う長さ
   (100vw と px)を混ぜると値ごと捨てるため、601〜1400px の --cf(文字と位置の基準)が無効になり、FV の文字が左上に小さく固まった。
   <length> として登録したプロパティに 100vw を入れると px に計算されるので、atan2 の中は 100vw の代わりにこれを使う
   (Chrome・Safari では 100vw と同じ値。@property 未対応のブラウザでは 100vw のまま) */
@property --toui-vw {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}
:root { --toui-vw: 100vw; }
:root {
	/* FV(ver3)配色 */
	--ink: #000000;
	--cta: #F8DC6E;
	--badge: #477CF2;
	--grad-passion: linear-gradient(180deg, #F24782, #8444D0); /* 熱狂(上→下) */
	--grad-words: linear-gradient(180deg, #A253D5, #3970EF);   /* 言葉(上→下) */
	--grad-en: linear-gradient(135deg, #3C82F6, #8681C1);      /* TOUI OKAWA(左上→右下) */

	/* 旧デザイン由来(パネル・SPセクションで使用中) */
	--cream: #FDF8F2;
	--blue: #6398F0;
	--orange: #FDAE56;
	--yellow: #F5CC4D;
	--pink: #EFBFDC;
	--green: #C3EAA6;
	--purple: #DBC7F7;
	--red: #C00D23;
	--coral: #E89C9C;

	/* パネル新デザイン(panels-new-design-mock-v3.html)配色。
	   既存の同名変数と役割が違うため p- プレフィックスで分離 */
	--navy: #1A1A2E;         /* 窓枠・ヘッダーの濃紺(FVの --ink は変えない) */
	--p-blue: #3B6FE0;
	--p-blue-pale: #EAF2FF;
	--p-blue-line: #D5E3FA;
	--p-purple: #7B4FE0;
	--p-pink: #F06292;
	--p-green: #5EC26A;
	--p-gray: #5A6478;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ==========================================================
   FV の高さ上限 --fvh(2026-09-13):601px 以上の FV は min(100svh, R×100vw)。縦長ビューポートで
   上アンカー(吹き出し・キャッチ)と下アンカー(名前ブロック・写真)が引き離されるのを防ぐ。
   R=1.34(601〜1400。iPad 縦 768×1024・1024×1366=縦横比 1.333 が現状のまま収まる値)/
   0.8(1401 以上。2026-09-13 確定。1.2/0.9 から変更)。
   横長〜標準比率では min() が 100svh 側に倒れ、従来と同一(1920×1080 の baseline 不変)。
   601px 以上で 100svh を参照していた式(rem・写真・装飾・パネル)はすべて var(--fvh) に置換済み。
   600px 以下は --fvh=100svh のまま(SP の式は 100svh 直書きで不変)。
   1401 以上は短くした FV を .fv-bg(min-height 100svh・flex)の縦中央に置き、上下は同じ背景で埋める。
   パネル(.fv-bg 基準の絶対配置)は --fv-off=(100svh−--fvh)/2 で追従。
   ========================================================== */
:root {
	--fvh: 100svh;
	--fv-off: 0px;
}
@media (min-width: 601px) and (max-width: 1400px) {
	:root { --fvh: min(100svh, 134vw); }
}
@media (min-width: 1401px) {
	:root { --fvh: min(100svh, 80vw); --fv-off: calc((100svh - var(--fvh)) / 2); }
}

html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	/* カンプの物差し(1920px幅・1x書き出し):実測px ÷ 10 = rem。
	   ウィンドウが低い(100svh < 1072相当)ときは高さ基準で等比縮小し、
	   FV(100svh)にカンプ全体が収まるようにする */
	font-size: min(calc(100vw / 1920 * 10), calc(var(--fvh) / 1072 * 10));
	/* iPhone の Safari は横向きのとき、長い文章の文字だけを自動で拡大する(プロフィールの自己紹介だけ大きく見えた。2026-10-21 まい指摘)。
	   100% で自動拡大を止める(none ではないので、ブラウザの文字サイズ変更・ズームは使える)。縦向き・PC の見た目は変わらない */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	color: var(--ink);
}

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

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

/* ==========================================================
   FV(pc-top_ver3 カンプの静的再現)
   物差し:1920px幅・1x書き出し、実測px ÷ 10 = rem
   ========================================================== */
/* ---- 外側レイヤー(パネルの配置基準・はみ出し防止) ---- */
.fv-bg {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #fff;
}

/* ---- FV本体:背景(グリッド・キラキラ・稲妻は背景画像に含む) ---- */
.fv {
	position: relative;
	z-index: 1;
	width: 100%;
	height: var(--fvh);
	overflow: hidden;
	/* cover なので FV がどの高さでも上下に隙間は出ない */
	/* WebP最適化版(q80・元PNGはリポジトリに保持)。ファイル名変更が
	   キャッシュバストを兼ねる(画像URLに版パラメータはないため) */
	background: url("../img/back_ver2.webp") center top / cover no-repeat;
}

/* ---- 上部ナビ ---- */
.menu {
	position: absolute;
	left: 80.6rem;
	top: 6.9rem;
	z-index: 10;
	display: flex;
	gap: 6.6rem;
}
.menu a {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 0.09em;
}
.menu .menu__icon {
	width: 3.2rem;
	height: 3.2rem;
	/* SVG内のグリフが中心よりわずかに下にあるため光学補正 */
	transform: translateY(-0.15rem);
}

/* 2026-10-24:上部ナビは各リンク単位で、薄い白の背景を敷く。
   疑似要素なので文字位置・リンク寸法・クリック領域は変えない。 */
.fv .menu a {
	position: relative;
	isolation: isolate;
}
.fv .menu a::before {
	content: '';
	position: absolute;
	inset: -12px -16px;
	z-index: -1;
	background: radial-gradient(ellipse, rgba(255, 255, 255, .82) 55%, rgba(255, 255, 255, .72) 75%, transparent 100%);
	filter: blur(8px);
	pointer-events: none;
}

/* ---- 受付中バッジ(CTAと同幅・中央揃え、両端に斜線) ---- */
.cta-badge {
	position: absolute;
	left: 142.5rem;
	top: 3.4rem;
	width: 43.2rem;
	padding: 0; /* 2026-10-06:斜線を文字基準にしたので 0(旧 0 0.7rem 0 1rem=斜線をカンプの左1435・右端1850 に合わせていた) */
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center; /* 2026-10-06:space-between → center(斜線を文字の両側に置き、箱の中央に) */
	color: var(--badge);
	/* 2026-10-05 確定(?bdf=n1):バッジ全体(和文・MC とも)を Noto Sans JP Regular 400(Noto Sans CJK JP と同じデザイン)に。
	   旧:和文 DotGothic16+英字 MC だけ VT323 1.3em(MC が和文の 1.47倍の線で太く見えた。?mc の比較で VT323 の縮小・Silkscreen・PixelMplus12・
	   Tiny5・Jersey 10・DotGothic16・Noto を比べたが、ドット欧文は字面の高さを和文にそろえると線が和文の 1.4〜2.5倍になるため、書体ごと
	   Noto にそろえた)。端末によらず同じ見た目にするため、ヒラギノより先に自前配信のサブセット(assets/fonts/noto/toui-badge-400.woff2。
	   バッジの文字だけ・3.2KB。ライセンスは同フォルダの OFL.txt)を指定。字間はドット書体用の 0.08em → 0.04em */
	font-family: "Toui Badge Noto", "Hiragino Sans", "Noto Sans JP", sans-serif;
	font-size: 2.4rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
@font-face { font-family: "Toui Badge Noto"; src: url(../fonts/noto/toui-badge-400.woff2?v=ceced820) format("woff2"); font-weight: 400; font-display: swap; }
.cta-badge::before,
.cta-badge::after {
	content: "";
	display: block;
	width: 0.24rem;
	height: 3.6rem;
	background: var(--badge);
}
/* .cta-badge__en(「MC」)は 2026-10-05 から特別な指定なし(和文と同じ Noto Sans JP・同じ大きさ)。旧 VT323 1.3em の経緯は CLAUDE.md ③ */
.cta-badge::before {
	transform: rotate(-20deg); /* ＼ */
}
.cta-badge::after {
	transform: rotate(20deg);  /* ／ */
}
/* 斜線の位置(2026-10-06 確定・?bsl=s2):全帯で「長い方の行の文字の見た目の端」から 0.833em(文字の大きさ基準。12px の文字で 10px)。
   距離は斜線の中央の高さで測る(斜線は傾いているので、上下の行では少し離れる)。以前は帯ごとに箱の端・文字の箱の端に置いていて、
   2段(600px 以下・601〜700)は離れすぎ(16〜63px)、768〜1400 は近すぎ(1〜2px)、1401 以上は 35〜43px だった。
   文字の見た目の端=先頭の字の左のすき間 0.052em・末尾の字の右のすき間 --bsl-r(字間 0.04em 込み。1行=「中」0.139em/600px 以下の2段=
   1行目の「・」0.436em/601〜700 の2段=1行目の「C」0.076em)を引く。--bsl-k=文字の大きさ÷バッジの文字の大きさ(1401px 以上は文字だけ 0.9em)。
   箱(CTA と同じ幅・SP は 124px)はそのままで中身を中央に=CTA との中心合わせは不変 */
.cta-badge { --bsl-r: 0.139em; --bsl-k: 1; }
.cta-badge__txt { flex: none; }
.cta-badge::before,
.cta-badge::after { flex: none; }
.cta-badge::before { margin-right: calc((0.833em - 0.052em) * var(--bsl-k)); }
.cta-badge::after { margin-left: calc((0.833em - var(--bsl-r)) * var(--bsl-k)); }
@media (min-width: 601px) and (max-width: 700px) {
	.cta-badge { --bsl-r: 0.076em; }
	.cta-badge__txt { width: min-content; } /* 文字の箱を長い方の行の幅に(斜線をその両側に) */
}

/* ---- CTA(右上・黄色) ---- */
.cta {
	position: absolute;
	left: 142.5rem;
	top: 9.2rem;
	width: 43.2rem;
	height: 9.7rem;
	z-index: 10;
	display: flex;
	align-items: center;
	background: var(--cta);
	animation: toui-cta-bounce 6s var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1)) 2s infinite both;
}
.cta__icon {
	width: 5.6rem;
	height: 5.6rem;
	margin-left: 3.5rem;
}
.cta__label {
	margin-left: 3.9rem;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.06em;
}
.cta__arrow {
	margin-left: auto;
	margin-right: 2.7rem;
	width: 0;
	height: 0;
	border-top: 0.8rem solid transparent;
	border-bottom: 0.8rem solid transparent;
	border-left: 0.8rem solid var(--ink);
	font-size: 0; /* テキスト「▶」は描画しない */
}

/* ---- FV の文字の Web フォント(2026-10-05)----
   キャッチ・名前(900)と肩書き・ローマ字・紹介文(700。紹介文は同日追加)は、ヒラギノが無い端末(Android・Windows)で Noto Sans JP の自前配信サブセットを使う。
   以前はヒラギノの次が端末の書体で、Android 15 以前は Noto Sans CJK JP が Regular しか無く 900 が擬似太字(にじんだ細い太字)、
   Windows はメイリオ Bold(700)止まりだった。指定順はヒラギノが先=iPhone・Mac は従来どおりヒラギノでダウンロードもしない。
   ファイルは dev/fonts/build-fonts.js がトップページの文字から作る(キャッチ・名前・旧キャッチ 28字 6.8KB/肩書き・ローマ字・紹介文 69字 13.7KB。紹介文は 2026-10-05 に追加/DotGothic16 43字 2.9KB。2026-10-07 に自己紹介の見出しを追加)。
   文言を変えたら作り直す。読み込み待ちと配置の計算は FV 直後のインライン(ヒラギノが無い端末だけ、最大 2.5 秒文字を隠して待つ) */
@font-face { font-family: "Toui FV"; src: url(../fonts/noto/toui-fv-900.woff2?v=ffd95a10) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Toui FV"; src: url(../fonts/noto/toui-fv-700.woff2?v=3422176a) format("woff2"); font-weight: 700; font-display: swap; }
/* DotGothic16 は Google Fonts をやめて自前配信のサブセットに(2026-10-05)。プロフィール窓のひらがな名・項目見出しと、Pixelify Sans の
   和文の代わり(パネル見出しの英字など。DotGothic16 を指定している要素の文字を dev/fonts/build-fonts.js が集める。43字 2.9KB)。
   ライセンスは assets/fonts/dotgothic16/OFL.txt。CSS のファミリー名はそのまま "DotGothic16" */
@font-face { font-family: "DotGothic16"; src: url(../fonts/dotgothic16/toui-dotgothic16.woff2?v=979e2084) format("woff2"); font-weight: 400; font-display: swap; }

/* ---- キャッチコピー(グラデーション文字は background-clip: text) ---- */
.fv__catch {
	position: absolute;
	left: 11.6rem;
	top: 21.8rem;
	z-index: 5;
	font-family: "Hiragino Sans", "Toui FV", "Noto Sans JP", sans-serif;
	font-weight: 900;
	font-size: 9.7rem; /* 中(既定)。インク高 0.94×97≒91px=カンプ実測 */
	line-height: 1;
	letter-spacing: 0.07em;
}
.fv__catch-line {
	display: flex;
	align-items: baseline; /* 大小の文字の下端(ベースライン)を揃える */
	white-space: nowrap;   /* 2行固定(2026-10-04)。行の中で折り返さない */
	height: 11.2rem;       /* 行の高さは強調語サイズで固定 */
	/* 勢いを出すため各行を右へ傾ける(2026-10-11 確定・?cmo=a1。全帯)。左下を支点にして左端とベースラインの位置はほぼ不変。
	   キャッチの計測(Range の矩形)は傾いた後の形を返すので、SP の大きさ(頭部 8px)・右端 16px・601〜1400 の位置調整・1401px 以上の
	   アイコン配置は傾いた形で計算される。パネル幅は旧キャッチの見えない複製(.fv__catch-line ではない)で測るので変わらない */
	transform: skewX(-9deg);
	transform-origin: 0 100%;
}
.fv__catch-line + .fv__catch-line {
	margin-top: 2.2rem;    /* 行送り=11.2rem+2.2rem=13.4rem(カンプ実測134px) */
}
/* 3段階のサイズ。インク高がカンプ実測(特大112/中91/小59〜67)に
   合うよう、Hiragino Sans の描画係数(漢字0.95・の0.87等)から逆算 */
.fv__catch-md {
	font-size: 9.7rem;
}
.fv__catch-sm {
	font-size: 6.8rem; /* 中の0.70倍(インク比では0.65)。の=59px・を、=65px・でつなぐ=66px */
}
.fv__catch-em {
	font-style: normal;
	font-size: 11.2rem;
	line-height: 1;
	letter-spacing: 0.06em;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.fv__catch-em--passion {
	background-image: var(--grad-passion);
}
.fv__catch-em--words {
	background-image: var(--grad-words);
}
/* 字間はカンプ(pc-top_ver3.png)の比率(2026-10-11 確定・?cls=l1)。カンプの旧キャッチを実測(字の中心どうしの間隔 − Hiragino Sans W9 の
   字送り)÷文字の大きさ:中 0.094・強調 0.076・小 0.170(字ごとのばらつき ±0.03。この値で旧キャッチの2行の幅がカンプと 4px 以内で一致)。
   以前は .fv__catch の 0.07em(中の大きさで px に計算されて中・小に継がれる=中 0.070・小 0.100)・強調 0.06em。
   .fv__catch-line の中だけに効かせる=パネル幅の基準の旧キャッチの見えない複製(main.js。行は .fv__catch-line ではない)は以前の字間のまま */
.fv__catch-line .fv__catch-md { letter-spacing: .094em; }
.fv__catch-line .fv__catch-sm { letter-spacing: .17em; }
.fv__catch-line .fv__catch-em { letter-spacing: .076em; }

/* ---- 肩書き・名前・ローマ字+X ---- */
.fv__role {
	position: absolute;
	left: 12.2rem;
	bottom: 51.9rem;
	z-index: 5;
	font-family: "Hiragino Kaku Gothic ProN", "Toui FV", "Noto Sans JP", sans-serif; /* 2026-10-05:Web フォント(上の「FV の文字の Web フォント」) */
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: 0.24em;
}
.fv__name {
	position: absolute;
	left: 12.2rem;
	bottom: 40.8rem;
	z-index: 5;
	font-family: "Hiragino Sans", "Toui FV", "Noto Sans JP", sans-serif;
	font-size: 9.6rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.118em; /* カンプの比率(2026-10-11 確定・?nls=on。旧 0.07em) */
}
.fv__en {
	position: absolute;
	left: 12.2rem;
	bottom: 33.5rem;
	z-index: 5;
	font-family: "Hiragino Kaku Gothic ProN", "Toui FV", "Noto Sans JP", sans-serif; /* 2026-10-05:同上 */
	display: flex;
	align-items: center;
	gap: 3.6rem;
}
.fv__en-name {
	font-size: 2.7rem;
	font-weight: 700;
	letter-spacing: 0.4em;
	background-image: var(--grad-en);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.fv__sns {
	display: block;
	width: 4.8rem;
	height: 4.8rem;
}
.fv__sns img {
	width: 100%;
	height: 100%;
}

/* 語中で折返させない(紹介文の「ゲームキャスター」等) */
.u-nowrap {
	white-space: nowrap;
}

/* ---- 紹介文 ---- */
.fv__intro {
	position: absolute;
	left: 12.6rem;
	bottom: 14.4rem;
	z-index: 5;
	font-family: "Hiragino Kaku Gothic ProN", "Toui FV", "Noto Sans JP", sans-serif; /* 2026-10-05:Web フォント(上の「FV の文字の Web フォント」) */
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.09em;
	/* 2026-10-05:紹介文の差し替えで行の中の折り返しが増えたため、最後に短い語だけが残る折り返し(「…マルチに/担当。」)を避ける
	   (Chrome 117・Safari 26 以降。未対応のブラウザは通常の折り返し) */
	text-wrap: pretty;
}

/* ---- 写真 ----
   カンプの頭部輪郭(y200/y250の髪スライス)+頭頂y145にフィットさせた値。
   ※スーツの輪郭だけで較正すると行の対応を取り違えるので、頭部基準で行うこと */
/* 可読性補助グラデーション:600px以下のみ(SPブロックで表示にする) */
/* 肩書き〜紹介文のテキストブロック背後の白(600px 以下のみ表示。位置は SP のブロックで定義) */
.fv__textbg { display: none; position: absolute; z-index: 5; pointer-events: none; }

.photo {
	position: absolute;
	left: 71.25rem;     /* トリム前62.2rem+左マージン159px相当。人物位置は不変 */
	bottom: -7.9rem;    /* 下端接地(トリム下0px)。はみ出し分は切り捨て */
	width: 95.13rem;    /* トリム前105.2rem×(1672/1849)。人物サイズは不変 */
	height: auto;
	z-index: 4;
}

/* ---- ドット絵装飾(個別配置。カンプ実測) ----
   重ね順は写真(z-index:4)より下(2026-08-22改定)。人物の手前には出ず、
   人物に隠れる。背景(.fv の z-index:1)より上、テキスト群(5)・草(6)より下。
   2026-09-03:601px以上の全帯で幅をカンプの0.8倍に統一(1920含む)。
   従来 1500px以下だけに掛けていた0.8倍(下の max-width:1500 ブロック)と
   同じ値をベースに置いたため二重縮小にはならない。位置は各装飾の中心を
   基準に left +0.1×旧幅 / bottom +0.1×旧高(旧高=旧幅×画像比率)。
   600px以下(SP)はハンドル基準の独自サイズのまま */
.deco {
	position: absolute;
	z-index: 3;
}
.deco img {
	width: 100%;
	height: auto;
}
.deco--glove {
	left: 76.435rem;  /* 75.3 + 1.135 */
	bottom: 43.885rem; /* 42.75 + 1.135(比率1.0) */
	width: 9.08rem;    /* 11.35 × 0.8 */
}
.deco--sword {
	left: 68.82rem;   /* 68.1 + 0.72 */
	bottom: 26.775rem; /* 25.95 + 0.825(比率165/144) */
	width: 5.76rem;    /* 7.2 × 0.8 */
}
.deco--controller {
	left: 170.39rem;  /* 169.4 + 0.99 */
	bottom: 76.585rem; /* 75.75 + 0.835(比率167/198) */
	width: 7.92rem;    /* 9.9 × 0.8 */
}
.deco--handle {
	left: 150.435rem; /* 149.4 + 1.035 */
	bottom: 69.445rem; /* 68.45 + 0.995(比率199/207) */
	width: 8.28rem;    /* 10.35 × 0.8 */
}
.deco--ball {
	left: 165.07rem;  /* 164.4 + 0.67 */
	bottom: 52.35rem;  /* 51.7 + 0.65(比率130/134) */
	width: 5.36rem;    /* 6.7 × 0.8 */
}
.deco--car {
	left: 173.425rem; /* 172.3 + 1.125 */
	bottom: 25.82rem;  /* 24.9 + 0.92(比率184/225) */
	width: 9rem;       /* 11.25 × 0.8 */
}
.deco--car img {
	transform: rotate(6deg);
}

/* ---- 地面(草+土。画面下端にタイル状に敷く) ----
   画像 deco-grass_ver2.png(3013×253px)の縦の構成(実測):上 14.6% が透明/草の穂/43.9% から全幅を覆う/
   64.0% から下が土(画像の下 36.0%)。
   2026-09-30:土の見えている高さを2倍に。草の大きさ・絵柄は変えず、ブロックごと「今見えていた土の高さ」
   (--g-soil)ぶん持ち上げる。以前は下 15%(--g-sink。SP は 10%)を画面下端より下に沈めていたので、
   見えていた土は (0.85 − 0.6403)×高さ=0.2097×高さ(SP は 0.2597×高さ)。
   持ち上げると画像の下端が画面下端より上に出る(沈めていた分を出し切っても2倍に足りない)ため、
   その下を ::after で継ぎ足す。::after は同じ画像の最下部を上下反転して敷く(継ぎ目の行が同じ色で連続する)。
   草の上端は --g-soil ぶん上がる(1920×1080 で 26.5px、375px で 21.4px) */
.fv__ground {
	--g-h: 12.65rem;                        /* 画像ブロックの高さ(不変) */
	--g-sink: 1.9rem;                       /* 旧:沈めていた高さ(12.65rem × 0.15) */
	--g-soil: calc(0.2097 * var(--g-h));    /* 足す土の高さ=これまで見えていた土の高さ */
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--g-soil) - var(--g-sink));
	height: var(--g-h);
	z-index: 6;
	/* 2026-10-22:境界①のほぼ水平な案。土の開始位置180/253と草花の表示スケールは維持。高さ・配置と車の前後関係は維持。 */
	background: url("../img/deco-grass-boundary1-v9.png") left bottom / auto 100% repeat-x;
}
.fv__ground::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - 1px); /* 1px 重ねて隙間を出さない */
	height: calc(var(--g-soil) - var(--g-sink) + 1px);
	background: url("../img/deco-grass-boundary1-v9.png") left bottom / auto var(--g-h) repeat-x;
	transform: scaleY(-1); /* 画像の最下部を反転して、継ぎ目を同じ行どうしにする(静止。アニメーションなし) */
}

/* 2026-10-22:画素・縦横比は維持し、草花だけ既存画像から不規則に配置。 */
.fv__ground--scattered { background: none; }
.fv__ground--scattered::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/deco-grass-boundary1-v9.png") left bottom / auto 100% repeat-x;
	clip-path: inset(43.8735% 0 0);
}
.fv__sprig {
	position: absolute;
	top: 0;
	left: var(--sprig-left);
	width: calc(var(--g-h) * var(--sprig-w) / 253);
	height: calc(var(--g-h) * 111 / 253);
	transform: translateX(-50%);
	background-image: url("../img/deco-grass-boundary1-v9.png");
	background-size: calc(var(--g-h) * 3013 / 253) var(--g-h);
	background-position: calc(var(--g-h) * var(--sprig-x) / -253) top;
	background-repeat: no-repeat;
	pointer-events: none;
}
@media (min-width: 601px) and (max-width: 1000px) {
	.fv__sprig { left: var(--sprig-mid); }
	.fv__sprig:nth-child(n+13) { display: none; }
}
@media (max-width: 600px) {
	.fv__sprig { left: var(--sprig-sp); }
	.fv__sprig:nth-child(n+9) { display: none; }
}


/* ==========================================================
   幅方向のレスポンシブ(1920pxのベースCSSには触れない)
   ========================================================== */

/* ---- ① 1920px超:コンテンツは1920px相当(192rem)のまま中央に置き、
   背景と地面だけ画面幅いっぱいに続ける。
   物差しは10px上限(低いウィンドウでは従来どおり高さ基準で縮小) ---- */
@media (min-width: 1921px) {
	html {
		font-size: min(10px, calc(var(--fvh) / 1072 * 10));
	}
	/* シフト式は「中央化(1664px以上)」の統合MQ(ファイル末尾)に一本化。
	   ここには 1921px以上のみの調整(可読下限・文字0.9倍)を置く */

	/* 本文系テキストの可読下限 */
	.fv__intro { font-size: max(2.4rem, 14px); }
	.menu a { font-size: max(2.2rem, 14px); }
	.cta-badge { font-size: max(2.4rem, 14px); }
	/* ---- ㉝文字群0.9倍(1921px〜のみ)。㉗の1400-1700pxレシピと同値。
	   ジャンプ率(em比)・ベースライン揃え維持、キャッチ上端21.8rem基準で
	   要素間隔も0.9倍換算 ---- */
	.fv__catch { font-size: 8.73rem; }
	.fv__catch-line { height: 10.08rem; }
	.fv__catch-line + .fv__catch-line { margin-top: 1.98rem; }
	.fv__role {
		font-size: 2.34rem;
		bottom: 55.33rem;
	}
	.fv__name {
		font-size: 8.64rem;
		bottom: 45.34rem;
	}
	.fv__en {
		bottom: 38.77rem;
		gap: 3.24rem;
	}
	.fv__en-name { font-size: 2.43rem; }
	.fv__sns { width: 4.32rem; height: 4.32rem; }
	.fv__intro {
		font-size: 2.16rem;
		bottom: 21.58rem;
	}
}

/* ---- ② 1400〜1919px:文字・写真サイズは1920px時のまま固定
   (物差しに幅の項を入れない)。右側の群は右端基準で中央に寄る ---- */
@media (min-width: 1400px) and (max-width: 1919px) {
	html {
		font-size: min(10px, calc(var(--fvh) / 1072 * 10));
	}

	/* 右上UI:右端基準(サイズはベースのまま) */
	.cta,
	.cta-badge {
		left: auto;
		right: 6.3rem;
	}
	.menu {
		left: auto;
		right: 58.84rem;
	}

	/* 写真:サイズ固定。右端に収まらなくなったら右端基準で左へ寄る。
	   頭頂はCTA下端(18.9rem)+0.6remより下にクランプ
	   (0.9848×105.2rem=103.6rem) */
	.photo {
		width: 95.13rem;
		left: min(71.25rem, calc(100% - 95.13rem));
		/* 頭頂=写真上端(トリム済)。クランプ19.5rem+縦横比1.0957×幅 */
		bottom: min(-7.9rem, calc(var(--fvh) - 123.7rem));
	}

	/* 右列の装飾:写真との相対位置(ベースのオフセット)を維持して追従。
	   画面右端からはみ出す場合のみ内側へ(全要素表示) */
	.deco--controller {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 99.14rem), calc(100% - 7.92rem - 20px));
	}
	.deco--handle {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 79.185rem), calc(100% - 8.28rem - 20px));
	}
	.deco--ball {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 93.82rem), calc(100% - 5.36rem - 20px));
	}
	.deco--car {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 102.175rem), calc(100% - 9rem - 20px));
	}
}

/* ---- ③ 601〜1399px:物差しは「固定+比例」式(1920×1072で10px)。
   構成:左=テキスト群(最大45vw・幅に応じて縮小)/右=写真(常に50vw以上・
   下端接地・右見切れなし・頭頂はCTA下端より下)。
   右上UI(ナビ・バッジ・CTA)は右端基準で幅に応じて圧縮。
   写真アセット(1849×2129)の実測係数:縦横比1.1514・頭頂14.47%・
   頭中心x66.02%・顔右輪郭 78.57%(髪)/80.52%(あご) ---- */
@media (min-width: 601px) and (max-width: 1399px) {
	html {
		font-size: min(calc(6px + 100vw / 1920 * 4), calc(var(--fvh) / 1072 * 10));
	}

	/* 写真サイズ(--pw)と文字スケール(--cf)は複数要素で使うため .fv で定義 */
	.fv {
		/* できるだけ大きく:上限は「テキスト45vw+2remを避けて右端に収まる幅」
		   (63.3vw-2.3rem)と1400px帯のサイズ(105.2rem)。下限は50vw。
		   大きくした分は頭頂クランプ(19.5rem)まで頭が上がり、余りは下に沈む */
		/* 3つ目の上限:紹介文が14px下限で固定幅になる狭い幅では、
		   紹介文の実幅(12.6rem+360px)を避けて右端に収まる幅 */
		/* 人物左輪郭は実測0.186×幅(ガードは0.175で安全側)に基づく上限 */
		--pw: calc(var(--pw-scale, 1) * (min(max(58vw, calc((100vw - 12.6rem - 352px) * 1.1111)),
			calc(61.1vw - 1.1rem), 95.13rem)));
		/* キャッチ「中」の文字サイズ=テキスト群の縮小基準。
		   キャッチ1行(実測8.44em)が45vwに収まる上限=5.3vw、下限40px */
		/* ㉗0.9倍×㉚1.1倍=0.99:9.603rem/5.247vw/床39.6px */
		--cf: max(min(9.603rem, 5.247vw), 39.6px);
	}
	/* 画面端の共通余白。CTA右余白の基準値で、1200px以下では
	   テキスト群・ナビの左余白にも同値を使い左右対称にする。
	   ※パネル(.fvの外)からも参照するため :root に置く */
	:root {
		--edge-margin: 6.3rem;
	}

	/* ---- 右上UI:右端基準+幅に応じて圧縮 ---- */
	.cta,
	.cta-badge {
		left: auto;
		right: var(--edge-margin);
		width: min(43.2rem, 26vw);
	}
	.cta {
		top: 8rem; /* バッジ下端(5.8rem)との間隔を1920px時と同じ2.2remに */
	}
	.cta-badge {
		/* 下端基準:1〜2行にかかわらずCTA上端(8rem)との縦余白を10pxに統一 */
		top: auto;
		bottom: calc(var(--fvh) - 8rem + 10px);
		/* CTA幅(min(43.2rem,26vw))比で1920pxと同比率にスケール:
		   2.4rem×26vw/43.2rem=1.444vw。可読下限12px維持 */
		font-size: max(min(2.4rem, 1.444vw), 12px);
		line-height: 1.35;
		padding: 0;
		justify-content: center;
		white-space: normal;         /* 「eスポーツ実況・MC」/「受付中」で折返し可 */
		text-align: center;
	}
	/* 斜線:2026-10-06 から全帯共通の「斜線の位置」(文字の見た目の端から 0.833em・流れの中で margin)。旧:絶対配置で
	   main.js が実測した最長行の幅(--blw)の左右端+10px(回転の張り出し補正 0.85rem/0.61rem)。--blw と main.js の実測は撤去 */
	.cta-badge::before,
	.cta-badge::after { margin-block: -1em; } /* 流れに入れても箱の高さ=文字の行のまま(文字の上下位置を変えない) */
	.cta__icon {
		width: min(5.6rem, 3vw);
		height: min(5.6rem, 3vw);
		margin-left: min(3.5rem, 1.8vw);
	}
	.cta__label {
		margin-left: min(3.9rem, 2vw);
		font-size: max(2.4rem, 14px);
	}
	.menu {
		left: 11.6rem; /* キャッチコピーの左端に揃える */
		right: auto;
		gap: min(6.6rem, 2vw);
	}

	/* ---- 左テキスト群:幅連動で縮小(45vw上限)。
	   キャッチ内の3段階はem単位にして親のvwスケールに追従させる ---- */
	.fv__catch {
		top: 25.8rem; /* ナビ左寄せに伴い文字群ごと+4rem下げ */
		font-size: var(--cf);
		max-width: 45vw;
	}
	.fv__catch-md { font-size: 1em; }
	.fv__catch-sm { font-size: 0.701em; }
	.fv__catch-em { font-size: 1.1546em; }
	.fv__catch-line { height: 1.1546em; }
	.fv__catch-line + .fv__catch-line { margin-top: 0.2268em; }

	.fv__role {
		bottom: auto;
		top: calc(25.8rem + 3.051 * var(--cf));
		font-size: max(calc(0.268 * var(--cf)), 14px); /* 2.6/9.7 比例、14px厳守 */
	}
	.fv__name {
		bottom: auto;
		top: calc(25.8rem + 3.608 * var(--cf));
		font-size: calc(0.9897 * var(--cf)); /* 9.6/9.7 比例(下限は--cf側で担保) */
	}
	.fv__en {
		bottom: auto;
		top: calc(25.8rem + 4.856 * var(--cf));
	}
	.fv__en-name { font-size: max(calc(0.278 * var(--cf)), 14px); } /* 2.7/9.7 比例、14px厳守 */
	.fv__sns {
		width: min(4.8rem, 2.4vw);
		height: min(4.8rem, 2.4vw);
	}
	.fv__intro {
		bottom: auto;
		top: calc(25.8rem + 5.588 * var(--cf));
		max-width: 45vw;
		font-size: max(calc(0.247 * var(--cf)), 14px); /* 2.4/9.7 比例、14px厳守 */
	}

	/* ---- 写真:常に50vw以上・右見切れなし・下端接地・
	   頭頂はCTA下端(18.9rem)+0.6remより下にクランプ ---- */
	.photo {
		width: var(--pw);
		/* 右端基準を基本に、人物の左輪郭(左端+10%)がテキスト幅に
		   食い込む場合は右へ退避(その分は右で見切れてよい) */
		left: max(calc(100% - var(--pw)),
			calc(45vw + 1rem - 0.1 * var(--pw)),
			calc(12.6rem + 352px - 0.1 * var(--pw)));
		/* 頭頂=写真上端 = 100svh - bottom - 1.0957×幅。19.5remより上に出さない */
		bottom: min(-7.9rem, calc(var(--fvh) - 19.5rem - 1.0957 * var(--pw)));
	}




	/* ---- 可読下限 ---- */
	.menu a { font-size: max(2.2rem, 14px); }
	.cta-badge { font-size: max(min(2.4rem, 1.444vw), 12px); } /* CTA幅比連動・12px下限 */
}

/* ---- 601〜930px:58vw床が紹介文予約と衝突する幅。
   紹介文のmax-widthを狭めて折返しを許容し(文字14px維持)、
   写真は58vwを確保する ---- */
@media (min-width: 601px) and (max-width: 930px) {
	.fv {
		--pw: calc(var(--pw-scale, 1) * (min(58vw, calc(61.1vw - 1.1rem), 95.13rem)));
	}
	.fv__intro {
		/* 右端 = 写真の人物左輪郭(47.8vw)−余白。下限320pxで潰れ防止 */
		max-width: max(calc(47.8vw - 12.6rem - 8px), 320px);
	}
	.photo {
		left: max(calc(100% - var(--pw)),
			calc(45vw + 1rem - 0.1 * var(--pw)),
			calc(47.8vw - 0.1 * var(--pw)));
	}
}

/* ---- 縦長(4:3以下)・601〜1399px:縦配分の実装。
   写真幅の下限を高さ連動(人物の高さ=画面の65%以上)で引き上げ、
   接地(bottom式は帯③のまま)と頭上げを両立する。
   ※bottomを頭頂クランプ側に切替える案は、縦長窓ではクランプ値が
   正になり写真が地面から浮くため不採用(接地優先)。
   縦長では紹介文の行域に写真の頭部(幅が細い)が来るため、
   帯③の左ガード(体の輪郭基準)は外して右端基準にする ---- */
@media (min-width: 601px) and (max-width: 1399px) and (max-aspect-ratio: 4/3) {
	.fv {
		/* 制約内最大化(実測ベース)。紹介文と人物の重なり0(余白8px)を
		   満たす最大幅の実測値に対する線形下界2本+58vw床:
		   l1=狭幅・縦長域(800×1080=708 / 800×900=562で密着)
		   l2=広幅域(1200×1080=820 / 1399×1080=970で密着)
		   上限=左見切れ(100vw−1rem)と1400px帯の写真実寸
		   (帯②はrem=10px固定 → min(951.3px, 88.75svh))への一致(段差ゼロ)。
		   --pwcapは幅601〜810×高さ800px以上の急勾配帯だけ下の別MQで有効化 */
		--pwcap: 9999px;
		--pw: calc(var(--pw-scale, 1) * (min(max(58vw,
				calc(0.2818 * 100vw + 0.8089 * var(--fvh) - 391px),
				calc(0.7538 * 100vw + 0.15 * var(--fvh) - 247px)),
			calc(100vw - 1rem), 951.3px, 88.75svh, var(--pwcap))));
	}
	.photo {
		left: calc(100% - var(--pw));
	}

}
/* 幅601〜800×高さ800px以上:紹介文の320px床が固定のまま幅だけ縮む帯は
   最大許容幅の勾配が急なため、専用の上限線で抑える。
   実測密着点(余白1px・左右対称化後):769×1080=742.3 / 769×900=581.7 /
   769×800=502.8(1〜2px安全側)。高さ800px未満は人物ガードMQが守るので対象外 */
/* 601〜768:余白8px基準線の1.3倍(2026-08-22改定。紹介文の人物への
   重なりを許容)。元の余白8px線に引き直した経緯は下記のとおり
   (2026-08-22)。旧線は601px付近で密着するよう引かれており、700〜768で
   47〜82pxも余っていた。実測の余白8px点:601=587 / 700=753 / 768=779px
   (高さ1080)。2区間の直線で近似し、定数を3px安全側に寄せている。
   ※601px付近は現状が既に密着限界(余白9px)のため拡大の余地がない */
@media (min-width: 601px) and (max-width: 620px) and (min-height: 800px) {
	.fv {
		--pwcap: calc(1.369 * 100vw + 1.161 * var(--fvh) - 1314px);
	}
}
@media (min-width: 621px) and (max-width: 700px) and (min-height: 800px) {
	.fv {
		--pwcap: calc(2.180 * 100vw + 1.235 * var(--fvh) - 1898px);
	}
}
@media (min-width: 701px) and (max-width: 768px) and (min-height: 800px) {
	.fv {
		--pwcap: calc(0.497 * 100vw + 1.3 * var(--fvh) - 776px);
	}
}
/* ---- 601〜650px:写真を1.1倍(2026-08-22)。紹介文への重なりは許容。
   651〜680pxで等倍へ戻すテーパーを入れ、650↔651の段差を吸収する
   (681px以上は変更しない) ---- */
@media (min-width: 601px) and (max-width: 620px) and (min-height: 800px) {
	.fv {
		--pwcap: calc(1.506 * 100vw + 1.277 * var(--fvh) - 1445px);
	}
}
@media (min-width: 621px) and (max-width: 650px) and (min-height: 800px) {
	.fv {
		--pwcap: calc(2.398 * 100vw + 1.359 * var(--fvh) - 2088px);
	}
}
/* 651〜680:1.1倍から等倍へ滑らかに戻すテーパー(svh係数は等倍式と同じ
   1.235のまま、vw係数と定数だけで直線を引く) */
@media (min-width: 651px) and (max-width: 680px) and (min-height: 800px) {
	.fv {
		--pwcap: calc(-0.67 * 100vw + 1.235 * var(--fvh) + 43px);
	}
}

/* 769〜800:写真を1.1倍(2026-08-22)。769pxで1.1倍(815px)、801pxの
   等倍値(769px)へ向けて直線で落とし、800↔801の段差を1px以内にする。
   svh係数は旧式と同じ0.893のまま、vw係数と定数だけで引く。
   801px以上は変更しない */
@media (min-width: 769px) and (max-width: 800px) and (min-height: 800px) {
	.fv {
		--pwcap: calc(-1.4375 * 100vw + 0.893 * var(--fvh) + 956px);
	}
}

/* ---- 幅1000px以下の縦長:紹介文との余白を最小化(実測2px密着線)して
   写真をさらに拡大。g線は 800×1080=721.4 / 900×1080=747.6 /
   1000×1080=776.9 / 800×900=567 の実測最大に1〜3px安全側で密着 ---- */
@media (min-width: 601px) and (max-width: 1000px) and (max-aspect-ratio: 4/3) {
	.fv {
		--pw: calc(var(--pw-scale, 1) * (min(max(58vw,
				calc(0.2818 * 100vw + 0.8089 * var(--fvh) - 391px),
				calc(0.7538 * 100vw + 0.15 * var(--fvh) - 247px),
				calc(0.277 * 100vw + 0.858 * var(--fvh) - 429px)),
			calc(100vw - 1rem), 951.3px, 88.75svh, var(--pwcap))));
	}
}

/* ---- 1200px以下:テキスト群・ナビの左余白をCTA右余白(--edge-margin)と
   対称化。整列オフセット(肩書き系+0.6rem/紹介文+1rem)は維持。
   ※指示⑰の950px以下圧縮(8.6rem)はこの対称ルール(6.3rem)に一本化 ---- */
@media (min-width: 601px) and (max-width: 1200px) {
	.menu,
	.fv__catch { left: var(--edge-margin); }
	.fv__role,
	.fv__name,
	.fv__en { left: calc(var(--edge-margin) + 0.6rem); }
	.fv__intro { left: calc(var(--edge-margin) + 1rem); }
	/* パネル左端の追従は後方(パネル配置ブロックの後)のMQで上書き */
}

/* 950〜1200px以下・縦長(4:3以下):左右余白の対称化(左=6.3rem)で
   空いた分の写真拡大。対称化後の実測最大(余白1px)への密着線:
   flat線=800×1080=770.7 / 900×1080=771.3 / 800×900=586.7
   C1=1000×1080=804.5 / 1100×1080=833.9、C2=1200×1080=881.4。
   幅601〜800はやや低い実測(769×1080=742.3)のため--pwcapで抑える */
@media (min-width: 601px) and (max-width: 1200px) and (max-aspect-ratio: 4/3) {
	.fv {
		--pw: calc(var(--pw-scale, 1) * (min(max(58vw,
				calc(0.006 * 100vw + 1.022 * var(--fvh) - 339.4px),
				calc(0.313 * 100vw + 0.603 * var(--fvh) - 163.1px),
				calc(0.475 * 100vw + 0.603 * var(--fvh) - 341.3px)),
			calc(100vw - 1rem), 951.3px, 88.75svh, var(--pwcap))));
	}
}

/* 1200px以下・横長(4:3超):テキスト予約の左移動分(12.6rem→7.3rem=5.3rem)だけ
   写真・装飾ガードも左へ寄せて拡大(上限58vw+5.89rem) */
@media (min-width: 601px) and (max-width: 1200px) and (min-aspect-ratio: 4/3) {
	.fv {
		--pw: calc(var(--pw-scale, 1) * (min(calc(58vw + 5.89rem), calc(61.1vw - 1.1rem), 95.13rem)));
	}
	.photo {
		left: max(calc(100% - var(--pw)),
			calc(45vw - 4.3rem - 0.1 * var(--pw)),
			calc(47.8vw - 5.3rem - 0.1 * var(--pw)));
	}
}

/* ---- 1400〜1700px:文字群0.9倍(㉗)。ジャンプ率(特大/中/小のem比)と
   ベースライン揃えは維持し、縦位置はキャッチ上端(21.8rem)を基準に
   要素間隔を0.9倍に詰める(bottom値は1080px窓の実測から換算) ---- */
@media (min-width: 1400px) and (max-width: 1700px) {
	.fv__catch { font-size: 8.73rem; }
	.fv__catch-line { height: 10.08rem; }
	.fv__catch-line + .fv__catch-line { margin-top: 1.98rem; }
	.fv__role {
		font-size: 2.34rem;
		bottom: 55.33rem;
	}
	.fv__name {
		font-size: 8.64rem;
		bottom: 45.34rem;
	}
	.fv__en {
		bottom: 38.77rem;
		gap: 3.24rem;
	}
	.fv__en-name { font-size: 2.43rem; }
	.fv__sns { width: 4.32rem; height: 4.32rem; }
	.fv__intro {
		font-size: 2.16rem;
		bottom: 21.58rem;
	}
}

/* ---- 1401〜1700px:キャッチのジャンプ率をカンプ比率に修正(2026-09-03)。
   上のブロックは「文字群0.9倍・ジャンプ率維持」の意図で中を8.73remに
   したが、強調(11.2rem)・小(6.8rem)がベースのrem指定のまま0.9倍されて
   おらず、強調÷中が1.28(カンプ1.155)に崩れていた。2行目「言葉」が本来
   より約24px広く、1401〜1427pxで人物の髪に最大26px被る原因。
   601〜1399帯と同じem比で指定し、中に追従させる(強調100.8px・小61.2px)。
   1400pxちょうど(帯②スライバー)は対象外 ---- */
@media (min-width: 1401px) and (max-width: 1700px) {
	.fv__catch-em { font-size: 1.1546em; }
	.fv__catch-sm { font-size: 0.701em; }
}


/* ---- 幅1400pxちょうど(帯②側):㉚文字群1.1倍(0.9×1.1=0.99)。
   キャッチ上端(21.8rem)アンカー固定で要素間隔も1.1倍換算 ---- */
@media (min-width: 1400px) and (max-width: 1400px) {
	/* 2026-10-03:キャッチは 1401px 以上(1401〜1700帯)と同じ大きさに。1.1倍の 9.603rem では 1400×1080 で 96px になり、
	   写真は 601〜1400 帯の配置のため 2行目「でつなぐ」の右端が人物の左端(髪)を 38px 越えていた。
	   強調・小も 1401〜1700 と同じ em 比(この幅はそちらの指定の対象外のため、ここで指定) */
	.fv__catch { font-size: 8.73rem; }
	.fv__catch-line { height: 10.08rem; }
	.fv__catch-line + .fv__catch-line { margin-top: 1.98rem; }
	.fv__catch-em { font-size: 1.1546em; }
	.fv__catch-sm { font-size: 0.701em; }
	/* 2026-09-03:名前ブロックの文字サイズは1401px以上(1400〜1700帯)と
	   同値にし、1400↔1401の逆転(95→86.4px)を解消。位置(bottom)は据え置き */
	.fv__role {
		font-size: 2.34rem;
		bottom: 52.24rem;
	}
	.fv__name {
		font-size: 8.64rem;
		bottom: 41.26rem;
	}
	.fv__en {
		bottom: 34.03rem;
		gap: 3.564rem;
	}
	.fv__en-name { font-size: 2.43rem; }
	.fv__sns { width: 4.32rem; height: 4.32rem; }
	.fv__intro {
		/* 2026-10-05:2.376rem(1.1倍)→ 2.16rem(1401px 以上と同じ)。紹介文の差し替えで 1400×1080 が 9行になり、名前ブロックを上へ
		   ずらすとキャッチに重なったため(キャッチ・名前ブロックと同じく 1401 にそろえる) */
		font-size: 2.16rem;
		/* 帯②は紹介文にmax-widthがなく写真左移動で人物に食い込むため
		   (1401〜1460pxに既存問題として残存)、この幅では折返しを許容。
		   5行化に伴いbottomを下げて肩書き行との間隔を確保。
		   2026-10-05:紹介文の差し替えで max-width 41rem を外した(41rem では 9行になり TOUI に重なった)。人物よけは
		   FV 直後のインライン(introWidth=人物の左輪郭の 8px 手前で折り返す)が 601px 以上の全帯で行い、TOUI との間は nameFollow が保つ */
		bottom: 10.8rem;
	}
}

/* ※FV の吹き出し「現場に、最適解を。」(.fv__speech)は 2026-09-30 に撤去(マークアップ・全帯の CSS・
   speech-fill.svg / speech.svg)。キャッチコピーの位置は動かしていない(601px 以上はキャッチの top が
   独立した指定、600px 以下は --sp-catch-t の式を据え置き) */

/* 1400px以上の縦長は未調整(スコープ外、必要になったら別途) */

/* ---- 4:3付近の低い窓(狭幅×高さ800未満)だけ、紹介文の320px下限が
   人物胴体のボックス重なりを生むため、人物左輪郭ガード
   (写真left=100%−pw 前提、胴体輪郭0.1106 → 100vw−0.8894pw)で抑える。
   高さ1080系の縦長窓は行域が頭部(細い)に当たるため対象外(320px維持) ---- */
@media (min-width: 601px) and (max-width: 930px) and (max-height: 799px) {
	.fv__intro {
		max-width: max(calc(47.8vw - 12.6rem - 8px),
			min(320px, calc(100vw - 0.8894 * var(--pw) - 12.6rem - 8px)));
	}
}

/* ---- 1500px以下:装飾6種を0.8倍(2026-08-17指示)。
   位置の較正定数は維持(帯③の左アンカー・追従式は不変)。
   ※SP(600px以下)はより後方の専用ブロックが上書きするため影響なし ---- */
@media (max-width: 1500px) {
	/* 2026-09-03:ベースが同値(0.8倍)になったため実質no-op。
	   上の比率MQに残る 11.35rem 指定(グローブ)を抑える役目で残す */
	.deco--controller { width: 7.92rem; }
	.deco--handle     { width: 8.28rem; }
	.deco--ball       { width: 5.36rem; }
	.deco--car        { width: 9rem; }
	.deco--glove      { width: 9.08rem; }
	.deco--sword      { width: 5.76rem; }
}

/* 1400〜1500px(帯②内):右側アイコンのクランプを「右余白1.5rem」に統一。
   人物上に乗るグローブ・剣は0.8倍で中心がずれるため+0.1幅の補正 */
@media (min-width: 1400px) and (max-width: 1500px) {
	.deco--controller {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 98.15rem), calc(100% - 7.92rem - 20px));
	}
	.deco--handle {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 78.15rem), calc(100% - 8.28rem - 20px));
	}
	.deco--ball {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 93.15rem), calc(100% - 5.36rem - 20px));
	}
	.deco--car {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 101.05rem), calc(100% - 9rem - 20px));
	}
	.deco--glove { left: 76.44rem; bottom: 43.89rem; }
	.deco--sword { left: 68.82rem; bottom: 26.78rem; }
	/* 2026-09-03:ベースの bottom を中心基準で +0.1×旧高 に変えたが、この帯は
	   従来から0.8倍で bottom 基準に置かれていたため、従来の bottom を保持して
	   位置を変えない(1401〜1500 の既存配置を維持) */
	.deco--controller { bottom: 75.75rem; }
	.deco--ball       { bottom: 51.7rem; }
	.deco--car        { bottom: 24.9rem; }
}


/* ==== 1600px以下 装飾配置詰め(2026-08-17指示) ==== */


/* 帯②内 1400〜1600px:
   ・グローブ・剣は写真の左移動で人物に被るため「テキスト右端〜人物左端」の
     中間帯へ(写真left追従+輪郭係数0.156/0.148基準、上下にずらして配置)。
     低い窓では 100svh キャップで持ち上げる(上の行ほど輪郭が右で安全)
   ・ハンドルはコントローラー接触を避け下へ退避(コントローラー下端との
     間隔≥1rem・ボール上端より上)
   ・ボールは−4rem の人物側オフセットでくの字化 */
@media (min-width: 1400px) and (max-width: 1600px) {
	.deco--handle {
		bottom: 60rem;
	}
}
@media (min-width: 1400px) and (max-width: 1500px) {
	/* 胸の高さ(上の行ほど輪郭が右)へ上げ、人物左端から約40px確保。
	   縦間隔3rem。低い窓は100svhキャップで持ち上げ */
	.deco--glove {
		left: max(calc(min(71.25rem, 100% - 95.13rem) + 16.6rem), 20px);
		bottom: auto;
		top: min(47.5rem, calc(var(--fvh) - 19.5rem));
	}
	.deco--sword {
		/* 名前行(〜y672)の下・紹介文(y744〜)の手前の帯 */
		left: max(calc(min(71.25rem, 100% - 95.13rem) + 4.82rem), 20px);
		bottom: auto;
		top: min(67.6rem, calc(var(--fvh) - 7.3rem));
	}
	.deco--ball {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 89.15rem), calc(100% - 9.36rem - 20px));
	}
}
/* 1501〜1600px:フルサイズ幅での同処理+右余白1.5rem統一 */
@media (min-width: 1501px) and (max-width: 1600px) {
	.deco--glove {
		left: max(calc(min(71.25rem, 100% - 95.13rem) + 12.615rem), 20px);
		bottom: auto;
		top: min(48.635rem, calc(var(--fvh) - 20.065rem));
	}
	.deco--sword {
		/* グローブ左端との水平分離を6rem確保(横並び解消・左下の斜め配置) */
		left: max(calc(min(71.25rem, 100% - 95.13rem) - 1rem), 20px);
		bottom: auto;
		top: min(68.425rem, calc(var(--fvh) - 8.175rem));
	}
	.deco--controller {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 99.14rem), calc(100% - 7.92rem - 20px));
	}
	.deco--handle {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 79.185rem), calc(100% - 8.28rem - 20px));
		bottom: 60.995rem; /* 1400〜1600共通の60rem + 0.1×旧高(中心基準・2026-09-03) */
	}
	.deco--ball {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 89.82rem), calc(100% - 10.03rem - 20px));
	}
	.deco--car {
		left: min(calc(min(71.25rem, 100% - 95.13rem) + 102.175rem), calc(100% - 9rem - 20px));
	}
}

/* ---- 1399px以下:上部文字群を累計1.21倍に統一(㉝④、B案スコープ)。
   紹介文はB案据え置き。キャッチは頭部輪郭回避の6vwキャップ併用。
   1000px以下は後続MQ(129.4px床等)が上書き。
   ※幅1400(帯②スライバー)は現状でキャッチが髪に−37.5px食い込む
   既存問題があり拡大不可のため㉚値のまま(要別対応) ---- */
@media (min-width: 601px) and (max-width: 1399px) {
	.fv {
		/* ㉟:キャッチ下間隔の1.5倍化に伴う下方シフト量
		   Δ1 = 0.5×(現行キャッチ下間隔) = 0.5×(3.051cf − 2.536×キャッチfont) */
		--d1: calc(1.5255 * var(--cf) - 1.268 * min(1.21 * var(--cf), 6vw));
	}
	.fv__catch {
		font-size: min(calc(1.21 * var(--cf)), 6vw);
		max-width: 52.5vw;
	}
	/* ㉟:(1)キャッチ下=1.5倍(Δ1)、(2)名前下=1.5倍(+0.0252cf)、
	   (3)TOUI OKAWA下=1.5倍(+0.366cf−0.5×SNSサイズ)。
	   絶対配置のためtop位置式へのΔ加算で実装(margin/padding不使用)。
	   (c)肩書き下〜名前上はΔ1同量シフトで従来間隔を維持 */
	.fv__role { top: calc(25.8rem + 3.051 * var(--cf) + var(--d1)); }
	.fv__name { top: calc(25.8rem + 3.608 * var(--cf) + var(--d1)); }
	.fv__en { top: calc(25.8rem + 4.8812 * var(--cf) + var(--d1)); }
	.fv__intro { top: calc(25.8rem + 5.9792 * var(--cf) + var(--d1) - 0.5 * min(5.81rem, 2.9vw)); }
	.fv__role { font-size: max(calc(0.3243 * var(--cf)), 14px); }
	.fv__name { font-size: calc(1.1976 * var(--cf)); }
	.fv__en-name { font-size: max(calc(0.3364 * var(--cf)), 14px); }
	.fv__sns {
		width: min(5.81rem, 2.9vw);
		height: min(5.81rem, 2.9vw);
	}
}

/* 931〜1000px:紹介文の長い最終行が折り返さず人物に触れるため、
   max-widthを330pxに(≤930の5行構造と揃える。㉟の干渉解消) */
@media (min-width: 931px) and (max-width: 1000px) {
	.fv__intro { max-width: 330px; }
}

/* ---- 1000px以下:上部文字群のみ1.1倍(㉛B案)。
   cf・紹介文(フォント/行域)は不変=写真への影響なし。
   キャッチはmax-width 49.5vw(1.1倍の1行=9.28em)で2行構造維持、
   位置(cf連動top)は据え置きでフォントのみ拡大 ---- */
@media (min-width: 601px) and (max-width: 1000px) {
	.fv {
		/* ㉟:1000px以下の(1)は「1.5倍」と「30px以上」の大きい方 */
		--d1: max(calc(1.5255 * var(--cf) - 1.268 * min(1.21 * var(--cf), 6vw)),
			calc(30px - 3.051 * var(--cf) + 2.536 * min(1.21 * var(--cf), 6vw)));
	}
	/* ㉜でさらに1.1倍(累計1.21)。キャッチは頭頂部輪郭に接触するため
	   1行=8.44em≦52vwのvwキャップ(6.16vw)併用 */
	.fv__catch {
		font-size: min(calc(1.21 * var(--cf)), 6vw);
		max-width: 52.5vw;
	}
	.fv__role { font-size: max(calc(0.3243 * var(--cf)), 14px); }
	.fv__name { font-size: calc(1.1976 * var(--cf)); }
	.fv__en-name { font-size: max(calc(0.3364 * var(--cf)), 14px); }
	.fv__sns {
		width: min(5.81rem, 2.9vw);
		height: min(5.81rem, 2.9vw);
	}
	/* ㉞②:CTAの最小幅260px(バッジも同床で箱を揃える) */
	.cta,
	.cta-badge {
		min-width: 260px;
	}
	/* CTA実幅(260px床)比のバッジ文字床:2.4rem×260/432=14.44px */
	.cta-badge { font-size: max(min(2.4rem, 1.444vw), 14.44px); }
}

/* ---- 601〜700px:SP/PC境界の600px化(2026-08-22)で新たにPC構成が
   適用される幅。ナビ右端と受付中バッジ/CTA左端が横に重なるため、
   両者を詰めて衝突を解消する(可読下限:ナビ14px・バッジ14.44pxは維持)。
   この帯以外には影響しない ---- */
@media (min-width: 601px) and (max-width: 700px) {
	.menu {
		gap: 1.4rem;
	}
	.menu a {
		font-size: 14px;
		gap: 0.6rem;
	}
	.menu__icon {
		width: 20px;
		height: 20px;
	}
	.cta,
	.cta-badge {
		min-width: 205px;
	}
	.cta__label {
		font-size: max(2.2rem, 14px);
	}
}


/* 601〜768は見切れ許容帯(2026-08-22)。画面幅上限(100vw - 1rem)と
   旧フィット線(58vw/A/B/C)を外し、紹介文密着線(--pwcap)と
   絶対上限(アセット原寸951.3px・高さ88.75svh)だけで決める。
   高さ800px未満は --pwcap を引いていないため従来式のまま */
@media (min-width: 601px) and (max-width: 768px) and (min-height: 800px) {
	.fv {
		--pw: calc(var(--pw-scale, 1) * (min(951.3px, 88.75svh, var(--pwcap))));
	}
	/* 全体ルール img{max-width:100%} が画面幅で頭打ちにするため解除
	   (この帯は下・左・右のはみ出しを許容する) */
	.photo {
		max-width: none;
		/* 紹介文が人物に乗らないよう右へシフト(2026-08-22)。
		   紹介文インク右端は実測ほぼ一定(601:293 / 700:294 / 768:295px)なので
		   300px + 余白8px を人物の左輪郭(紹介文の高さ帯で写真幅の約47%)に
		   合わせる。右にはみ出した分は見切れ許容。
		   ただし顔・上半身が右で切れないよう、上半身の右端(実測:写真幅の
		   81.6%)が画面内に収まる位置を上限にする */
		left: calc(100% - 0.816 * var(--pw) - 8px);
		right: auto;
	}
	/* 右シフト後も紹介文の一部(700pxで4行目の34%・768pxで4行目の13%)は
	   人物に乗るため、白フチで可読性を確保する(実測コントラスト2.7〜3.1で
	   WCAG AA未満だったため)。ドット絵調の意匠に馴染むよう縁のみ */
	.fv__intro {
		text-shadow:
			1px 1px 0 rgba(255, 255, 255, .9), -1px 1px 0 rgba(255, 255, 255, .9),
			1px -1px 0 rgba(255, 255, 255, .9), -1px -1px 0 rgba(255, 255, 255, .9),
			0 2px 0 rgba(255, 255, 255, .9), 0 -2px 0 rgba(255, 255, 255, .9),
			2px 0 0 rgba(255, 255, 255, .9), -2px 0 0 rgba(255, 255, 255, .9);
	}
}

/* 769〜800も画面幅上限(100vw - 1rem)と旧フィット線を外し、--pwcap と
   絶対上限だけで決める(2026-08-22。この帯も見切れ許容) */
@media (min-width: 769px) and (max-width: 800px) and (min-height: 800px) {
	.fv {
		--pw: calc(var(--pw-scale, 1) * (min(951.3px, 88.75svh, var(--pwcap))));
	}
	.photo {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
	html {
		scroll-behavior: auto;
	}
}


/* ==========================================================
   共通コンポーネント(PC パネル / SP セクションで共用)
   既定値は PC(モック pc-panels-mock.html)基準。
   SP の差分は max-width:600px 側で上書きする。
   ========================================================== */

/* パネル外枠 */
/* RPG窓枠(mock-v3):濃紺の枠+四隅ドット+濃紺ヘッダー。回転なし */
.panel {
	background: #fff;
	border: 0.3rem solid var(--navy);
	box-shadow: 0 1.2rem 3.6rem rgba(59, 111, 224, .16);
	display: flex;
	flex-direction: column;
}
/* 四隅のドット(枠の外縁に重ねる)。幅可変でも崩れないよう、
   上辺・下辺いっぱいに広げた擬似要素の左右端に 1rem 角を描く */
.panel::before,
.panel::after {
	content: "";
	position: absolute;
	left: -0.3rem;
	right: -0.3rem;
	height: 1rem;
	pointer-events: none;
	background:
		linear-gradient(var(--navy), var(--navy)) left center / 1rem 1rem no-repeat,
		linear-gradient(var(--navy), var(--navy)) right center / 1rem 1rem no-repeat;
}
.panel::before { top: -0.3rem; }
.panel::after { bottom: -0.3rem; }
.panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 2rem 3rem;
	background: var(--navy);
	color: #fff;
	flex-shrink: 0;
}
.panel__title {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	min-width: 0;
}
.panel__title strong {
	font-size: 2.1rem;
	font-weight: 700;
}
.panel__en {
	font-style: normal;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--yellow);
	letter-spacing: .14em;
	font-family: "Pixelify Sans", "DotGothic16", monospace;
}
/* 点滅カーソル(reduced-motion では全体ルールで停止) */
.panel__blink {
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	background: var(--yellow);
	animation: toui-blink 1.2s steps(1) infinite;
}
@keyframes toui-blink {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: .15; }
}
.panel__close {
	flex: none;
	width: 3.4rem;
	height: 3.4rem;
	background: #fff;
	color: var(--navy);
	border: 0.25rem solid var(--navy);
	box-shadow: 0.4rem 0.4rem 0 rgba(255, 255, 255, .35);
	font-size: 1.5rem;
	font-weight: 700;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
}
.panel__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	/* scroll-behavior は指定しない。smooth を指定すると JS からの
	   scrollTop 代入がアニメーション待ちで反映されない環境があるため
	   (CF7の応答メッセージへのスクロールが動かなくなる) */
	padding: 3rem 3.4rem 4rem;
}
/* ドット風スクロールバー */
.panel__body::-webkit-scrollbar {
	width: 1.2rem;
}
.panel__body::-webkit-scrollbar-track {
	background: #f0ece3;
}
.panel__body::-webkit-scrollbar-thumb {
	background: var(--ink);
	border: 0.3rem solid #f0ece3;
}

/* 小見出し(ドットブロック:青+紫の角) */
.c-h3 {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.8rem;
	font-weight: 700;
	margin: 0 0 1.8rem;
}
.c-h3::before {
	content: "";
	width: 2rem;
	height: 0.9rem;
	flex: none;
	background:
		linear-gradient(var(--p-blue), var(--p-blue)) left center / 0.9rem 0.9rem no-repeat,
		linear-gradient(var(--p-purple), var(--p-purple)) right center / 0.9rem 0.9rem no-repeat;
}

/* 区切り:ドット線 */
.c-dotline {
	height: 0.4rem;
	margin: 3.4rem 0 3rem;
	background-image: radial-gradient(var(--p-blue-line) 40%, transparent 41%);
	background-size: 0.8rem 0.8rem;
}

/* ステータス窓(淡青地+濃紺枠)。ドット文字は英字ラベルと項目名のみ、
   名前・値は通常フォント(mock-v3の仕様) */
.c-status {
	border: 0.25rem solid var(--navy);
	background: var(--p-blue-pale);
	padding: 2.6rem 3rem;
	margin-bottom: 3.4rem;
}
.c-status__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2.4rem;
	margin-bottom: 2.4rem;
}
/* 名前+ローマ字のラッパー。既定は透過させて従来どおり個別のフレックス項目 */
.c-status__names {
	display: contents;
}
.c-status__lv {
	flex: none;
	background: var(--navy);
	color: var(--p-blue);
	padding: 0.7rem 1.4rem;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .16em;
	font-family: "Pixelify Sans", "DotGothic16", monospace;
}
.c-status__name {
	font-size: 2.8rem;
	font-weight: 900;
}
/* 名前横の読み。2026-09-12 にローマ字(.c-status__en「TOUI OKAWA」)からひらがな
   (.c-status__kana「おうかわとうい」)へ差し替え。位置・サイズは旧ローマ字と同じ扱いの
   仮置き(実機で見て調整)。ひらがなは Pixelify Sans に無いため DotGothic16 で出る */
.c-status__en,
.c-status__kana {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--p-blue);
	letter-spacing: .16em;
	font-family: "Pixelify Sans", "DotGothic16", monospace;
}
.c-status__grid {
	display: grid;
	/* パネルは左テキスト領域基準で幅が狭め(1920pxで約670px)のため、
	   2カラムだと値が折り返して読みにくい。全幅1カラムで統一 */
	grid-template-columns: 1fr;
	gap: 1.6rem 4rem;
}
.c-status__row {
	display: flex;
	gap: 2rem;
	font-size: 1.6rem;
	align-items: baseline;
	margin: 0;
}
.c-status__row dt {
	width: 9rem;
	flex: none;
	font-weight: 700;
	color: var(--p-blue);
	font-family: "DotGothic16", sans-serif;
}

/* チップ(アイテムスロット風:紫の角ドット+青の落ち影) */
.c-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.c-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	background: #fff;
	border: 0.22rem solid var(--navy);
	box-shadow: 0.3rem 0.3rem 0 var(--p-blue-line);
	padding: 0.8rem 1.4rem;
	font-size: 1.5rem;
	font-weight: 700;
	font-family: inherit;
	color: var(--ink);
}
/* プロフィールのタイトルは1つのチップの中で折り返さない(2026-10-08。「ファイナルファンタジーXIV」「Apex Legends」などが途中で改行されないように) */
.c-prof .c-chip { white-space: nowrap; }
.c-chip::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: var(--p-purple);
}
.c-chip--filter,
.c-chip--check {
	cursor: pointer;
}
.c-chip--filter.is-on {
	background: var(--p-blue);
	color: #fff;
	box-shadow: 0.3rem 0.3rem 0 var(--navy);
}
.c-chip--filter.is-on::before {
	background: var(--yellow);
}
/* チェック型チップ(.c-chip--check / CF7出力)の見た目はフォーム節で定義 */
.c-msg {
	font-size: 1.6rem;
	line-height: 2;
}
/* 自己紹介(2026-10-07):1行=1文(.c-msg__line)、段落の間隔は空けない。行の中は PHP(toui_phrase_html)が入れた文節の切れ目
   <wbr> でだけ折る(keep-all)。1つの文節が1行より長いときだけ途中で折る(anywhere) */
.c-msg--intro {
	word-break: keep-all;
	overflow-wrap: anywhere;
	line-break: strict;
}
.c-msg__line {
	display: block;
}
/* 600px 以下は文ごとの改行をやめて1段落に流す(2026-10-07)。管理画面の改行(1行=1文)はそのまま、表示だけ切り替える。
   文と文の間は「。」のまま詰めて続け、折り返せる位置は各文の末尾の <wbr>(keep-all のため) */
@media (max-width: 600px) {
	.c-msg__line {
		display: inline;
	}
}

/* 絞り込み(点線枠でグループ化) */
.c-filters {
	border: 0.25rem dashed rgba(0, 0, 0, .35);
	padding: 2rem 2.2rem;
	margin-bottom: 2.6rem;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}
.c-filters__label {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.8rem;
}

/* 出演歴カード(年|タイトル|タグ の3カラム) */
.c-works {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.c-work {
	display: grid;
	grid-template-columns: 8rem 1fr auto;
	align-items: center;
	gap: 2rem;
	border: 0.25rem solid var(--ink);
	padding: 1.4rem 2rem;
	font-size: 1.7rem;
}
.c-work__year {
	font-weight: 900;
	font-variant-numeric: tabular-nums; /* 年の桁を縦に揃える */
}
.c-work__tags {
	font-size: 1.4rem;
	color: #666;
}
.c-empty {
	font-size: 1.5rem;
	color: #666;
	padding: 1rem 0.2rem;
}

/* フォーム(mock-v3:2カラムグリッド。PCで2列、SPで1列) */
.c-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.4rem 3rem;
}
.c-field {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
}
/* CF7の自動整形がラベルと入力の間に入れる <br> は余白になるので消す */
.c-field > br {
	display: none;
}
.c-field .wpcf7-form-control-wrap {
	display: block;
}
.c-field--full {
	grid-column: 1 / -1;
}
.c-field__label {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.5rem;
	font-weight: 700;
}
/* 必須/任意バッジ(mock-v3:枠なし。必須=ピンク地白字、任意=薄グレー地)。
   2026-09-30:0.8倍に(文字 1.1→0.88rem・padding 0.25rem 0.8rem→0.2rem 0.64rem)。
   2026-10-01:文字は 10px を下限に(0.88rem は 1920×1080 で 8.8px・1000×1080 で 7.1px と小さすぎたため。
   padding は 0.8倍のまま。SP は別指定で 12px 下限) */
.c-badge {
	font-size: max(0.88rem, 10px);
	font-weight: 700;
	padding: 0.2rem 0.64rem;
	white-space: nowrap;
}
.c-badge--req {
	background: var(--p-pink);
	color: #fff;
}
.c-badge--opt {
	background: #F0F3F8;
	color: var(--p-gray);
}
/* 入力欄:濃紺の細枠・角なし。フォーカスで青枠+青影 */
.c-field input,
.c-field textarea,
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form textarea {
	font: inherit;
	font-size: 1.6rem;
	color: var(--ink);
	border: 0.22rem solid var(--navy);
	border-radius: 0;
	background: #fff;
	padding: 1.2rem 1.4rem;
	width: 100%;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.c-field input:focus-visible,
.c-field textarea:focus-visible,
.c-form input[type="text"]:focus-visible,
.c-form input[type="email"]:focus-visible,
.c-form input[type="tel"]:focus-visible,
.c-form textarea:focus-visible {
	outline: none;
	border-color: var(--p-blue);
	box-shadow: 0.3rem 0.3rem 0 var(--p-blue-line);
}
.c-form input::placeholder,
.c-form textarea::placeholder {
	color: #9AA3B5;
}
.c-field textarea,
.c-form textarea {
	min-height: 14rem;
	resize: vertical;
}
/* CF7の入力エラー:項目の枠をピンクに、下に赤(ピンク)文字 */
.c-form .wpcf7-not-valid {
	border-color: var(--p-pink);
}
.c-form .wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.6rem;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--p-pink);
}
.c-form .wpcf7-not-valid-tip::before {
	content: "";
	flex: none;
	width: 0.8rem;
	height: 0.8rem;
	background: var(--p-pink);
}

/* 種別チップ(アイテムスロット風)。CF7のcheckbox出力
   (.wpcf7-list-item > label > input + .wpcf7-list-item-label)と
   フォールバック(label.c-chip--check)の両方に適用。
   input は視覚的に隠すだけ(display:none にしない=Tab+Spaceで操作可) */
.c-chips--check .wpcf7-list-item {
	display: inline-block;
	margin: 0;
}
.c-chips--check .wpcf7-list-item > label,
.c-chip--check {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	position: relative;
	background: #fff;
	border: 0.22rem solid var(--navy);
	box-shadow: 0.3rem 0.3rem 0 var(--p-blue-line);
	padding: 0.8rem 1.4rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	user-select: none;
	transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.c-chips--check .wpcf7-list-item > label::before,
.c-chip--check::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: var(--p-purple);
}
.c-chips--check .wpcf7-list-item-label {
	display: inline;
}
.c-chips--check .wpcf7-list-item > label input,
.c-chip--check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.c-chips--check .wpcf7-list-item > label:has(input:checked),
.c-chip--check:has(input:checked) {
	background: var(--p-blue);
	color: #fff;
	box-shadow: 0.3rem 0.3rem 0 var(--navy);
}
.c-chips--check .wpcf7-list-item > label:has(input:checked)::before,
.c-chip--check:has(input:checked)::before {
	background: var(--yellow);
}
.c-chips--check .wpcf7-list-item > label:has(input:focus-visible),
.c-chip--check:has(input:focus-visible) {
	outline: 0.25rem solid var(--p-blue);
	outline-offset: 0.2rem;
}
.c-chips--check .wpcf7-list-item > label:hover,
.c-chip--check:hover {
	transform: translate(-0.1rem, -0.1rem);
	box-shadow: 0.4rem 0.4rem 0 var(--p-blue-line);
}
.c-chips--check .wpcf7-list-item > label:has(input:checked):hover,
.c-chip--check:has(input:checked):hover {
	box-shadow: 0.4rem 0.4rem 0 var(--navy);
}

/* プライバシーポリシーのスクロール枠(同意チェック直前。固定ページ本文を表示)
   窓意匠に合わせ濃紺枠+淡青地、スクロールバーはドット風 */
.c-privacy-box {
	grid-column: 1 / -1;
	height: 180px;
	overflow-y: auto;
	border: 0.22rem solid var(--navy);
	background: var(--p-blue-pale);
	padding: 1.2rem 1.6rem;
	font-size: 1.4rem;
	line-height: 1.8;
	color: var(--ink);
	scrollbar-color: var(--navy) var(--p-blue-line);
	scrollbar-width: thin;
}
.c-privacy-box:focus-visible {
	outline: 0.25rem solid var(--p-blue);
	outline-offset: 0.2rem;
}
.c-privacy-box::-webkit-scrollbar {
	width: 1rem;
}
.c-privacy-box::-webkit-scrollbar-track {
	background: var(--p-blue-line);
}
.c-privacy-box::-webkit-scrollbar-thumb {
	background: var(--navy);
	border: 0.2rem solid var(--p-blue-line);
}
.c-privacy-box h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 1.2rem 0 0.4rem;
}
.c-privacy-box p {
	margin: 0 0 0.6rem;
}
/* 同意チェック */
.c-privacy {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--p-gray);
	margin: 0;
}
.c-privacy label,
.c-privacy .wpcf7-list-item > label {
	display: flex;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
}
.c-privacy .wpcf7-list-item {
	margin: 0;
}
.c-privacy input[type="checkbox"] {
	width: 1.8rem;
	height: 1.8rem;
	margin: 0;
	accent-color: var(--p-blue);
}
/* フォーム冒頭の注記(お受けできない場合がある旨。2026-10-04。functions.php の toui_cf7_intro_note が最初の入力欄の前に
   差し込む)。送信ボタン直上の補足文より控えめ:地・枠・アイコンなし、本文色・標準の太さ、※で始めて2行目以降は※の幅だけ下げる。
   折り返しは .c-nw の切れ目だけ */
.c-formnote {
	grid-column: 1 / -1;
	display: flex;
	gap: 0.2em;
	margin: 0;
	font-size: max(1.4rem, 12px);
	font-weight: 400;
	line-height: 1.7;
}
.c-formnote__mark {
	flex: none;
}
.c-formnote__text {
	min-width: 0;
}
.c-formnote .c-nw {
	display: inline-block;
}
@media (max-width: 600px) {
	.c-formnote { font-size: max(1.8rem, 13px); }
}
/* 送信ボタン直上の補足文(メールアドレスの誤入力対策。2026-09-30。functions.php の toui_cf7_mail_note が
   同意チェックの下・送信ボタンの直前に差し込む)。既存の補足(同意文=グレー 1.4rem、「全文を読む」1.3rem)
   より少し目立たせる案:薄い青地+枠、封筒アイコン、濃紺の太字、中央揃え。
   2文は行を分け(.c-mailnote__line)、1文が折り返すときは .c-nw の切れ目(読点の後・「宛に」の後)だけ */
.c-mailnote {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	margin: 0;
	padding: 1.2rem 1.6rem;
	background: var(--p-blue-pale);
	border: 0.2rem solid var(--p-blue-line);
	color: var(--navy);
	font-size: max(1.4rem, 12px);
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
}
.c-mailnote__icon {
	flex: none;
	width: max(2.4rem, 18px);
	height: max(2.4rem, 18px);
	color: var(--p-blue);
}
.c-mailnote__text {
	margin: 0;
	min-width: 0;
}
.c-mailnote__line {
	display: block;
}
.c-mailnote .c-nw {
	display: inline-block;
	white-space: nowrap;
}
@media (max-width: 600px) {
	/* 応答メッセージ(送信完了・エラー):SP は 1.5rem=約10px だったため 14px の下限を入れる(2026-09-30。
	   送信完了の文言が「受付完了メール/迷惑メールフォルダの確認」を含む長文になったため) */
	.c-form .wpcf7-response-output {
		font-size: max(2rem, 14px);
		padding: 1.6rem 1.8rem;
	}
	.c-form .wpcf7-response-output::before {
		width: max(1rem, 8px);
		height: max(1rem, 8px);
		margin-top: 0.55em;
	}
	.c-mailnote {
		gap: 1.4rem;
		padding: 1.6rem 1.4rem;
		font-size: max(1.9rem, 13px);
	}
	.c-mailnote__icon {
		width: max(3rem, 20px);
		height: max(3rem, 20px);
	}
}
/* 送信ボタン(mock-v3:黄色地+濃紺枠+濃紺の落ち影+▶) */
.c-submit-wrap {
	grid-column: 1 / -1;
	text-align: center;
	margin: 0;
}
/* Cloudflare Turnstile(2026-10-11。functions.php の toui_cf7_turnstile_place が送信ボタンの直前に置く)。
   通常サイズのウィジェット(300×65)を中央に。高さを先に確保して読み込み後に送信ボタンが動かないようにする */
.c-turnstile {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	min-height: 65px;
}
.c-submit,
.c-form input[type="submit"],
.c-form button[type="submit"] {
	background: var(--yellow);
	color: var(--ink);
	border: 0.25rem solid var(--navy);
	border-radius: 0;
	box-shadow: 0.6rem 0.6rem 0 var(--navy);
	padding: 1.4rem 5rem;
	font-size: 1.8rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.c-submit:hover,
.c-form input[type="submit"]:hover,
.c-form button[type="submit"]:hover {
	transform: translate(0.3rem, 0.3rem);
	box-shadow: 0.3rem 0.3rem 0 var(--navy);
}
.c-submit:focus-visible,
.c-form input[type="submit"]:focus-visible {
	outline: 0.25rem solid var(--p-blue);
	outline-offset: 0.3rem;
}
/* 同意前(CF7が disabled にする)/送信中 */
.c-form input[type="submit"]:disabled {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
	box-shadow: 0.6rem 0.6rem 0 var(--navy);
}
.c-form.submitting input[type="submit"] {
	opacity: .6;
}
.c-form .wpcf7-spinner {
	display: block;
	margin: 1rem auto 0;
	background-color: var(--p-blue);
}
/* CF7の応答メッセージはパネル内に表示(ページ遷移なし)。
   エラー=ピンク枠、完了=緑枠、その他=濃紺枠 */
.c-form .wpcf7-response-output {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0;
	border: 0.22rem solid var(--navy);
	background: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.7;
	padding: 1.2rem 1.6rem;
}
.c-form .wpcf7-response-output::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.75rem;
	background: var(--navy);
}
.c-form.invalid .wpcf7-response-output,
.c-form.unaccepted .wpcf7-response-output,
.c-form.aborted .wpcf7-response-output,
.c-form.failed .wpcf7-response-output,
.c-form.spam .wpcf7-response-output {
	border-color: var(--p-pink);
	background: #FFF3F7;
	color: #B3264F;
}
.c-form.invalid .wpcf7-response-output::before,
.c-form.unaccepted .wpcf7-response-output::before,
.c-form.aborted .wpcf7-response-output::before,
.c-form.failed .wpcf7-response-output::before,
.c-form.spam .wpcf7-response-output::before {
	background: var(--p-pink);
}
.c-form.sent .wpcf7-response-output {
	border-color: var(--p-green);
	background: #F1FBF2;
	color: #1F7A34;
}
.c-form.sent .wpcf7-response-output::before {
	background: var(--p-green);
}

/* CF7未接続時のフォールバック:送信できないことを明示し、入力欄は無効化 */
.c-form__notice {
	grid-column: 1 / -1;
	margin: 0 0 1rem;
	padding: 1.2rem 1.6rem;
	border: 0.25rem solid var(--p-pink);
	background: #fff;
	font-size: 1.5rem;
	line-height: 1.8;
}
.c-form__notice strong {
	color: var(--p-pink);
}
.c-form__fields {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: inherit;
	gap: inherit;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0; /* fieldset が grid幅を無視するのを防ぐ */
}
.c-form--preparing .c-form__fields {
	opacity: .55;
}
.c-form--preparing .c-submit[disabled] {
	cursor: not-allowed;
}

/* ==========================================================
   構成3帯(2026-08-20改定):
   1401px以上 = FV+パネル切替(SPA風)
   601〜1400px = FV+縦積みセクション
   600px以下 = SP縦積み
   ========================================================== */

/* ---- PC共通(601px以上):意匠・共有コンポーネント ---- */
@media (min-width: 601px) {
	:root {
		--ease-pop: cubic-bezier(.34, 1.56, .64, 1);
		--text-shrink: 0.4;
	}
	/* ✕ボタン:ホバーで影(0.4rem)側へ移動し、影と重なって押し込まれて見せる */
	.panel__close {
		transition: transform .12s ease, box-shadow .12s ease;
	}
	.panel__close:hover,
	.panel__close:focus-visible {
		transform: translate(0.4rem, 0.4rem);
		box-shadow: 0 0 0 rgba(255, 255, 255, .35);
	}
	/* CTA:6秒に1回だけ小さく弾む(誘目)。バッジは動かさない
	   (animation はベースの .cta 側。keyframes のみここで定義) */
	@keyframes toui-cta-bounce {
		0%      { transform: scale(1); }
		3.33%   { transform: scale(1.04); }
		6.67%   { transform: scale(1); }
		100%    { transform: scale(1); }
	}
	/* パネル内側の左右余白 */
	.panel__body {
		padding: 3rem 5.4rem 4rem;
	}
	/* 小見出しは直前の要素との間隔を確保 */
	.c-h3 {
		margin-top: 3rem;
	}
	/* お問い合わせ:2カラム(会社名・氏名/メール・電話) */
	.c-form {
		grid-template-columns: 1fr 1fr;
	}
}


/* ==========================================================
   ネームプレート(共通部品:肩書き/名前/TOUI OKAWA)
   - パネル表示中の左上(.nameplate--fv、1401px以上)
   - 縦積み帯の追従ナビ(.nameplate--bar、601〜1400px)
   組版・比率は共通。文脈ごとの位置とサイズのみ修飾クラスで調整する
   ========================================================== */
.nameplate {
	display: block;
	color: var(--ink);
	text-decoration: none;
}
.nameplate__role {
	display: block;
	font-family: "Hiragino Kaku Gothic ProN", "Toui FV", "Noto Sans JP", sans-serif; /* 2026-10-05:同上 */
	margin: 0 0 0.6rem;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .24em;
	line-height: 1.3;
}
.nameplate__row {
	display: flex;
	align-items: baseline;
	gap: 2.4rem;
}
.nameplate__name {
	margin: 0;
	font-family: "Hiragino Sans", "Toui FV", "Noto Sans JP", sans-serif; /* FVの名前と同じ書体・FVより縮小 */
	font-size: 4.6rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .07em;
}
.nameplate__en {
	margin: 0;
	/* FVの TOUI OKAWA(.fv__en-name)と同じ書式:書体(本文欧文)・字間・
	   グラデーション文字。サイズのみネームプレート用 */
	font-family: "Hiragino Kaku Gothic ProN", "Toui FV", "Noto Sans JP", sans-serif; /* 2026-10-05:同上(以前は inherit) */
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.4em;
	background-image: var(--grad-en);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* パネル用はパネル切替帯以外では出さない。追従ナビは縦積み帯(601〜1400px)のみ */
.nameplate--fv,
.stickybar {
	display: none;
}

/* ---- パネル切替(1401px以上) ---- */
@media (min-width: 1401px) {
	.panels {
		display: contents;
	}
	/* ネームプレート:退場した文字群の位置(左端=キャッチ左端)に
	   肩書き/名前/TOUI OKAWA を表示。上端はナビ帯(6.9〜10.2rem)に収まる
	   高さ(3.9rem〜約11.2rem)で、パネル上端(15.5rem)より上に収める。
	   開く:文字群の退場(0.5s)完了後にフェードイン/
	   閉じる:パネル退場と同時にフェードアウト(文字群は0.28s後に復帰) */
	.nameplate--fv {
		display: block;
		position: absolute;
		isolation: isolate;
		left: 11.6rem;
		top: 3.9rem;
		z-index: 5;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.6rem);
		transition: opacity .3s var(--ease-pop),
			transform .3s var(--ease-pop),
			visibility 0s linear .3s;
	}
	/* 2026-10-24 案①:文字の後ろだけ背景を白く薄める。配置・寸法は変えない。 */
	.nameplate--fv::before {
		content: '';
		position: absolute;
		inset: -18px -25px;
		z-index: -1;
		background: radial-gradient(ellipse, rgba(255, 255, 255, .82) 55%, rgba(255, 255, 255, .72) 75%, transparent 100%);
		filter: blur(8px);
		pointer-events: none;
	}
	body.is-panel .nameplate--fv {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .4s var(--ease-pop) .5s,
			transform .4s var(--ease-pop) .5s,
			visibility 0s linear .5s;
	}
	/* パネル配置(2026-08-20改定):左側テキスト群の領域基準。
	   左端=キャッチコピー左端(11.6rem。帯別の追従は個別MQで上書き)
	   右端=キャッチコピー右端基準(main.js が --panel-right-edge に実測を
	         セット。被り上限・顔クランプあり。フォールバックは300px床)
	   上端=ネームプレート下端(約11.2rem)より下(15.5rem) / 下端=草ブロック上端(10.75rem)に
	   触れない。内容が収まらない高さは .panel__body がスクロール */
	.panel {
		display: none;
		position: absolute;
		left: 11.6rem;
		top: calc(var(--fv-off, 0px) + 15.5rem); /* ネームプレート下端(約11.2rem)より下に4.3rem空ける。--fv-off=縦中央寄せの分(2026-09-13) */
		right: max(2rem, calc(100vw - var(--panel-right-edge, 79.77rem)));
		/* 2026-10-01:12rem → 14.653rem。地面の土を2倍にして草が 2.653rem(=0.2097×12.65rem。1920×1080 で
		   26.5px)上がったぶん、パネルも同じだけ短くして「下端=草ブロックに触れない」の余裕(穂先まで約 30px)を戻す */
		bottom: calc(var(--fv-off, 0px) + 14.653rem);
		width: auto;
		height: auto;
		max-width: none;
		max-height: none;
		/* 20%食い込みでも300pxに満たない縦長窓では最低幅を優先
		   (right指定より優先される。超過分は人物の下半身側に重なる) */
		min-width: 300px;
		z-index: 18;
	}
	.panel.is-open,
	.panel.is-closing {
		display: flex;
	}
	/* 写真の退場が終わってからパネルが入る(入れ替わり) */
	.panel.is-open {
		animation: toui-panel-in .5s var(--ease-pop) .28s both;
	}
	/* 戻りは逆再生:パネルが先に退場し、その後で写真が戻る */
	.panel.is-closing {
		animation: toui-panel-out .5s var(--ease-pop) both;
	}
	/* 新窓枠は回転なし(mock-v3)。入退場はスライド+フェードのまま */
	@keyframes toui-panel-in {
		from { opacity: 0; transform: translateX(4rem); }
		to   { opacity: 1; transform: translateX(0); }
	}
	@keyframes toui-panel-out {
		from { opacity: 1; transform: translateX(0); }
		to   { opacity: 0; transform: translateX(4rem); }
	}
	/* テキスト群(キャッチ/肩書き/名前/TOUI OKAWA/紹介文):
	   パネルと入れ替わりで退場・復帰(2026-08-20改定。写真は常時表示)。
	   開くときも戻るときもアニメーションさせるため、transition は
	   要素自体に置く(body.is-panel 側に置くとクラス除去時に効かない) */
	.fv__catch,
	.fv__role,
	.fv__name,
	.fv__en,
	.fv__intro {
		transform-origin: left center;
		transform: scale(1); /* 戻り先を明示(none だと遷移が不安定) */
		opacity: 1;
		visibility: visible;
		/* 戻り:パネルの退場(0.5s)を待ってからテキスト群が戻る */
		transition: transform .5s var(--ease-pop) .28s,
			opacity .5s var(--ease-pop) .28s,
			visibility 0s linear .28s;
	}
	/* パネル表示中はテキスト群を非表示(フェード+縮小しながら退場) */
	body.is-panel .fv__catch,
	body.is-panel .fv__role,
	body.is-panel .fv__name,
	body.is-panel .fv__en,
	body.is-panel .fv__intro {
		transform: scale(var(--text-shrink, 0.4));
		opacity: 0;
		visibility: hidden;
		transition: transform .5s var(--ease-pop),
			opacity .5s var(--ease-pop),
			visibility 0s linear .5s;
	}
}

/* ---- 縦積みセクション(601〜1400px):FVの下にRPG窓を縦に並べる。
   ナビはアンカースクロール(#profile/#works/#contact 互換)。
   背景はSPと同じタイル方式(bg-tile-sp.svg repeat-y+100% auto必須)。
   FVは不透明背景のためタイルはFV下(草の下)から見える ---- */
@media (min-width: 601px) and (max-width: 1400px) {
	@media (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}
	}
	/* 地面(.fv__ground)はFV下端より1.9rem沈む設計のため、縦積みでは
	   はみ出しがセクション上に見えてしまう。FVでクリップする
	   (パネル切替帯では .fv-bg が同じ位置で切るので見た目は同一) */
	.fv {
		overflow: hidden;
	}
	/* タイル背景はセクション領域のラッパー(.panels)に限定。
	   FVの背景画像(back_ver2.webp)は半透明部分が多く、親に貼ると
	   FV越しにタイルが透けるため、.fv-bg には貼らない。
	   #contact も .panels 内に置いてあるので末尾までタイルが続く */
	.panels {
		display: block;
		position: relative;
		padding: 6rem 0 2rem;
		background: url("../img/bg-tile-sp.svg") center top / 100% auto repeat-y;
	}
	/* セクション窓:左右 --edge-margin 基準・最大900pxで中央寄せ。
	   #contact は .panels の外(共通マークアップ)だが同じ流れに乗せる */
	.panel,
	.panel--contact {
		width: calc(100% - 2 * var(--edge-margin, 6.3rem));
		max-width: 900px;
		margin: 0 auto 5rem;
		scroll-margin-top: 9rem; /* 追従ナビ(約6.8rem)の下に見出しが来るように */
	}
	.panel--contact {
		margin-bottom: 8rem;
	}
	/* 縦積みでは閉じる操作なし・内容は流し込み(内部スクロールなし) */
	.panel__close {
		display: none;
	}
	.panel__body {
		flex: none;
		overflow: visible;
	}

	/* ---- 追従ナビ:FVを通過したら上部に固定スライドイン(JSが .is-shown を付与)。
	   控えめな意匠:半透過白+ぼかし、下辺に濃紺の細線。
	   左=ネームプレート(共通部品・縮小)/中央=ナビ3項目/右=CTAコンパクト ---- */
	.stickybar {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 40; /* FV(1)・セクション(static)より上、SPモーダル(75)より下 */
		background: rgba(255, 255, 255, .86);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-bottom: 0.2rem solid var(--navy);
		box-shadow: 0 0.6rem 1.8rem rgba(59, 111, 224, .10);
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: transform .3s var(--ease-pop), opacity .3s ease, visibility 0s linear .3s;
	}
	.stickybar.is-shown {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		transition: transform .3s var(--ease-pop), opacity .3s ease, visibility 0s linear 0s;
	}
	.stickybar__inner {
		display: flex;
		align-items: center;
		gap: 2.4rem;
		min-height: 6.8rem;
		padding: 0.8rem var(--edge-margin, 6.3rem);
	}
	/* ネームプレート(縮小版・組版は共通。比率0.6、狭幅では可読床) */
	.nameplate--bar {
		flex: none;
	}
	.nameplate--bar .nameplate__role {
		margin-bottom: 0.3rem;
		font-size: max(0.96rem, 10px);
	}
	.nameplate--bar .nameplate__row {
		gap: 1.4rem;
	}
	.nameplate--bar .nameplate__name {
		font-size: max(2.76rem, 22px);
	}
	.nameplate--bar .nameplate__en {
		font-size: max(1.2rem, 11px);
	}
	/* ナビ3項目(中央寄せ・現在地は青の下線ドット) */
	.stickybar__nav {
		display: flex;
		justify-content: center;
		gap: 2.8rem;
		flex: 1;
		min-width: 0;
	}
	.stickybar__nav a {
		position: relative;
		padding: 0.6rem 0.2rem;
		font-size: max(1.5rem, 13px);
		font-weight: 700;
		color: var(--ink);
		text-decoration: none;
		white-space: nowrap;
	}
	.stickybar__nav a::after {
		content: "";
		position: absolute;
		left: 0.2rem;
		right: 0.2rem;
		bottom: 0;
		height: 0.3rem;
		background: var(--p-blue);
		opacity: 0;
		transition: opacity .15s ease;
	}
	.stickybar__nav a:hover::after,
	.stickybar__nav a.is-active::after {
		opacity: 1;
	}
	.stickybar__nav a.is-active {
		color: var(--p-blue);
	}
	/* CTA(コンパクト版:黄色地+濃紺枠+小さな落ち影) */
	.stickybar__cta {
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: 0.8rem;
		padding: 0.9rem 1.6rem;
		background: var(--cta);
		color: var(--ink);
		border: 0.22rem solid var(--navy);
		box-shadow: 0.3rem 0.3rem 0 var(--navy);
		font-size: max(1.4rem, 12px);
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
		transition: transform .12s ease, box-shadow .12s ease;
	}
	.stickybar__cta:hover {
		transform: translate(0.2rem, 0.2rem);
		box-shadow: 0.1rem 0.1rem 0 var(--navy);
	}
	.stickybar__cta img {
		width: 2rem;
		height: 2rem;
	}
}




/* ---- 601〜768px:SP/PC境界の600px化(2026-08-22)で新たにPC構成が
   適用される幅。追従ナビの3要素(ネームプレート/ナビ/CTA)が1段に
   収まらず flex が潰れて重なるため、この帯だけ各要素を縮め、
   はみ出しではなく折り返さない形で収める(可読下限12pxは維持)。
   ネームプレートは組版・比率を保ったままサイズのみ縮小 ---- */
@media (min-width: 601px) and (max-width: 768px) {
	.stickybar__inner {
		gap: 1.4rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.nameplate--bar .nameplate__role {
		font-size: max(0.9rem, 9px);
		margin-bottom: 0.2rem;
	}
	.nameplate--bar .nameplate__row {
		gap: 0.8rem;
	}
	.nameplate--bar .nameplate__name {
		font-size: max(2.2rem, 17px);
	}
	.nameplate--bar .nameplate__en {
		font-size: max(0.9rem, 9px);
		letter-spacing: 0.24em;
	}
	.stickybar__nav {
		gap: 1.6rem;
		flex: 0 1 auto;
	}
	.stickybar__nav a {
		font-size: max(1.3rem, 12px);
	}
	.stickybar__cta {
		gap: 0.5rem;
		padding: 0.7rem 1rem;
		font-size: max(1.2rem, 12px);
	}
	.stickybar__cta img {
		width: 1.6rem;
		height: 1.6rem;
	}
}

/* パネルが狭くなる帯(キャッチ右端基準+被り上限10%で500px前後)では
   ヘッダー文字を一段小さく・余白を詰める(パネル切替帯のみ) */
@media (min-width: 1401px) and (max-width: 1600px) {
	.panel__title strong {
		font-size: 1.9rem;
	}
	.panel__en {
		font-size: 1.1rem;
	}
	.panel__body {
		padding: 2rem 2rem 3rem;
	}
	.c-status {
		padding: 2rem 2rem;
	}
	.c-status__top {
		gap: 1.2rem 1.6rem;
	}
}

/* ==========================================================
   SP(600px以下)
   物差し:html font-size = calc(100vw / 553 * 10)
   → カンプ(アートボード幅553px)実測px ÷ 10 = rem
   カンプ:assets/design/sp-top.png(2x書き出し、実測÷2で換算)
   ========================================================== */

/* ---- SP専用要素は601px以上では常に非表示(全幅共通の既定値)。
   既存のPC表示には一切影響しない ---- */
.sp-sections,
.sp-scrim,
.sp-modal,
.sp-nav {
	display: none;
}

@media (max-width: 600px) {
	html {
		/* 物差し:カンプ幅553pxまでは幅に完全比例(実測px÷10=rem)。
		   553px超はカンプの引き伸ばしで文字が膨らみ、上アンカー(キャッチ)と
		   下アンカー(肩書き〜紹介文)が近づいて間隔が潰れるため、
		   553pxを頂点にわずかに絞るカーブへ切り替える(2026-08-22)。
		   553px=10px / 600px=9.72px(従来10.85pxの0.90倍)。552px以下は不変 */
		font-size: calc(100vw / 553 * 10);
	}
	:root {
		/* 下部固定ナビの高さ(実測61px+セーフエリア) */
		--sp-nav-h: calc(61px + env(safe-area-inset-bottom, 0px));
		--sp-layout-h: 100svh;
	}

	/* ---- SP背景(ハンドオフ資料 §3):最背面は高さ非依存のグラデーション。
	   FV=bg-fv-sp.webp(cover)、コンテンツ=bg-tile-sp.svg(縦リピート) ---- */
	body {
		background: linear-gradient(180deg, #fff 0%, #f7fafe 45%, #eef5ff 100%);
	}

	/* ---- FV:どの画面サイズでも1画面に収まる構成。
	   高さ=100svh−固定ナビ。要素は上アンカー(マーキー・タイトル)と
	   下アンカー(写真・紹介文・草花・剣・キノコ)に分けて配置し、
	   縦横比が変わってもカンプの構図を保つ ---- */
	.fv {
		position: relative;
		width: 100%;
		height: calc(var(--sp-layout-h) - var(--sp-nav-h));
		min-height: 0;
		/* ---- 写真・文字の配置用のアンカー(実寸を1か所で定義。装飾アイコンは 2026-10-04 に 1000px 以下で全非表示) ----
		   --sp-pw    :写真の幅(.photo が参照)。高さ = ×1.0957
		   --sp-role-b :.fv__role の bottom と同値(≤522px は 42rem)
		   --sp-zoneL-b:肩書き上端(FV下端から)= role bottom + 行箱 2.4rem */
		/* 写真の右はみ出し。キャッチの上限式は「これ − キャッチ左端3.4rem」を
		   定数に使うため、値を変えるとキャッチサイズが自動で追従する */
		--sp-photo-r: 9.105rem;
		--sp-pw: min(73.782rem, calc((var(--sp-layout-h) - var(--sp-nav-h) - 26.3rem) * 0.9127));
		--sp-role-b: 39rem;
		--sp-zoneL-b: calc(var(--sp-role-b) + 2.4rem);
		/* 紹介文の高さ(1.55rem × line-height 1.9 × 行数)。≤522px は5行 */
		--sp-intro-h: 11.78rem;
		/* 写真(人物)の上端 = FV上端から(FV高 = 100svh − ナビ)。
		   font-size の計算にも使うため % を含めない */
		--sp-photo-t: calc(var(--sp-layout-h) - var(--sp-nav-h) - 5.4rem - 1.0957 * var(--sp-pw));
		/* キャッチ上端と、そこから求めた下端。
		   上端の式は「吹き出しの高さに追従」していた頃のもの(max(2.2rem,16px)+18px=旧吹き出しの
		   文字+上下余白)。吹き出しは 2026-09-30 に撤去したが、キャッチの位置を変えないため式は据え置き。
		   (2026-10-04 のキャッチ変更で全帯2行固定) */
		/* 2026-10-04 確定(?top=t3):FV 上端(セーフエリアの内側)から 48px。JS が1行目の文字の上端をちょうど 48px に合わせ直す */
		--sp-catch-t: calc(48px + env(safe-area-inset-top, 0px));
		/* 各行の下端 − 写真上端(頭部プロファイルの縦位置に使う) */
		--sp-d1: calc(var(--sp-catch-t) - var(--sp-photo-t));
		--sp-d2: calc(var(--sp-catch-t) + 1.6rem - var(--sp-photo-t));
		/* ---- キャッチの文字サイズ:人物の頭部(髪〜顔)に重ならない上限 ----
		   各行のインク右端 = キャッチ左端 3.4rem + wk×文字サイズ。
		   wk(実測。2026-10-11:傾き −9deg と字間(カンプの比率)を入れて測り直し。JS と同じ Range の外接で):1行目「実況で熱狂を」6.733 / 2行目「届けます!」5.652
		   (2026-10-05〜10 は傾き・字間の変更前の 6.438 / 5.350)
		   (2026-10-04〜05 は「実況の熱狂を」6.438 /「請け負います!」7.490)
		   (em単位の合計。旧「ゲームの熱狂を、」7.972 /「最高の」2.911 /「言葉でつなぐ」5.533 の3行)。
		   頭部左端 = 写真左端 + 写真幅 × xn(yn)。xn は写真上端からの縦位置
		   yn の関数で、実測プロファイルの下側を3本の直線で近似する
		   (下に凸なので接線の max が安全側の下界になる):
		     xn ≧ max(0.4713, 0.642 − 3.0·yn, 0.545 − 0.65·yn)
		   k行目の下端 yn =(上端 + 1.1546kF +(k−1)1.6rem − 写真上端)
		                    ÷(1.0957×写真幅)
		   を代入して F について解く(分母 = wk、wk + 3.1614k、wk + 0.6849k)。行ごとに枝の max(最も緩い枝)を取り、
		   2行の min が上限。余裕 14px・上限 6rem(2026-10-04。旧 4px・5.5rem)。写真の 3rem 左寄せ(translate)の分も引く(− 3rem)。JS が動くときは FV 直後のインラインが
		   人物の輪郭の表で頭部から 14px の最大を求めて上書きする(この式は JS 無効時の値) */
		--sp-catch-f: min(6.6rem,
			max(calc((100vw + var(--sp-photo-r) - 3rem - 3.4rem - 0.5287 * var(--sp-pw) - 8px) / 6.733),
				calc((100vw + var(--sp-photo-r) - 3rem - 3.4rem - 0.358 * var(--sp-pw) - 2.7381 * var(--sp-d1) - 8px) / 9.8944),
				calc((100vw + var(--sp-photo-r) - 3rem - 3.4rem - 0.455 * var(--sp-pw) - 0.5932 * var(--sp-d1) - 8px) / 7.4179)),
			max(calc((100vw + var(--sp-photo-r) - 3rem - 3.4rem - 0.5287 * var(--sp-pw) - 8px) / 5.652),
				calc((100vw + var(--sp-photo-r) - 3rem - 3.4rem - 0.358 * var(--sp-pw) - 2.7381 * var(--sp-d2) - 8px) / 11.9748),
				calc((100vw + var(--sp-photo-r) - 3rem - 3.4rem - 0.455 * var(--sp-pw) - 0.5932 * var(--sp-d2) - 8px) / 7.0218))
		);
		/* ベースの z-index:1 はスタッキングコンテキストを作り、内部の
		   固定CTA(z:72)がセクション(z:2)より下に沈むため解除。
		   FV内の装飾どうしの重なり順は相対関係のまま変わらない */
		z-index: auto;
		/* 写真がFVの外(下のセクション)へはみ出さないよう切り取る */
		overflow: hidden;
		/* SPはPC用 back_ver2.webp を参照せず専用SVGに切替(1080×1920・
		   xMidYMid slice内包)。100% 100% / fixed / 100vh は使わない(NG集) */
		/* 新アセット bg-fv-sp.webp(1218×2172)に差し替え(2026-08-29)。
		   元PNG(904KB)を WebP q80(55KB・平均Δ2.95/255)に変換して配信。
		   カンプと同じ対角グラデ+ドット装飾の一枚絵。cover+centerで
		   FVの縦横比変化は端の切れで吸収する(上=白・下=濃青の設計の
		   ため、どの幅でも構図は保たれる) */
		/* 左上基準(2026-08-29):空・光の見せ場が画像上部にあるため、
		   縦長画面でも上端が切れないよう left top をアンカーにする。
		   cover のままなので、切れるのは右・下側になる */
		background: url("../img/bg-fv-sp.webp") left top / cover no-repeat;
	}
	.fv-bg {
		min-height: 0;
		/* ベースの白地を外し、body のグラデーションを最背面として使う */
		background: transparent;
	}

	/* PCのみの要素を隠す(メニューボタン) */
	.menu {
		display: none;
	}

	/* ---- 受付中バッジ:右下CTAのすぐ上に縦に並べる(2026-08-24)----
	   PCの意匠(ドット文字+左右の斜線)はそのままに、テキストだけ
	   「eスポーツ実況・」/「MC受付中」の2段にして幅をCTA相当に収める。
	   CTAは fixed 126×110・right:14px・bottom:nav+14px なので、
	   その上端から10px上に置く(=nav + 14 + 110 + 10)。
	   文字の左右10px は長い方の行(1段目)を基準に gap で確保する */
	.cta-badge {
		display: flex;
		position: fixed;
		left: auto;
		right: 16px; /* 2026-10-05:14→16px。バッジを Noto にして 129→124px に細くなった分、CTA と中心をそろえる */
		top: auto;
		bottom: calc(var(--sp-nav-h) + 143px); /* 36 + CTA高97 + 10(2026-09-06。旧121=14+97+10。コピーライト行22pxぶん上げ) */
		width: 124px; /* 2026-10-06:auto → 124px(中身を中央に詰めても CTA と中心がそろう幅。右端 16px) */
		max-width: none;
		padding: 0;
		/* 2026-10-18確定・A案:モヤや白板を外し、1pxの白フチで可読性を保つ。 */
		text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff, 1px 1px #fff, 1px -1px #fff, -1px 1px #fff, -1px -1px #fff;
		filter: none;
		/* 斜線↔文字の余白は「見た目のインク端」で合わせる(2026-08-24)。
		   斜線は 2px×2.5em の箱を ±20度 回転させるので見た目の端は
		   レイアウト箱より約5px内側に張り出し、右側は1段目が「・」で
		   終わるぶんインクが手前で止まるため、同じ gap だと右が広く見える
		   (実測 左11px / 右15px)。左右に別々のマージンを与えて
		   見た目で 左9px / 右8px に揃える */
		gap: 0;
		align-items: center;
		justify-content: center;
		/* 物差し比例にすると 500px で幅が138pxになり紹介文の右端と3px重なる。
		   下限の12px固定にすると全幅で幅133px(CTA126pxの+7px)に揃い、
		   紹介文とも最小2pxの間隔が残る */
		font-size: 12px;
		line-height: 1.25;
		letter-spacing: 0.04em; /* 2026-10-05:0.08→0.04em(バッジを Noto に) */
		/* 2026-10-18:文字・斜線・文字のstrokeを、TOUI OKAWAの左側の青に統一。 */
		--badge: #3C82F6;
		z-index: 72; /* CTAと同じ層 */
	}
	.cta-badge::before,
	.cta-badge::after { box-shadow: 0 0 0 1px #fff; }

	.cta-badge__txt {
		/* SPの白フチは影の複製ではなく輪郭線を使用。影の角や重なりの段差を避ける。 */
		letter-spacing: 2.25px;
		font-feature-settings: "palt" 1;
		font-weight: 600;
		-webkit-text-stroke: 3px #fff;
		paint-order: stroke fill;
		text-shadow: none;
		filter: none;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cta-badge__sp {
		display: none; /* 2段にするので行間の半角スペースは不要 */
	}
	.cta-badge::before,
	.cta-badge::after {
		width: 2px;
		height: 2.5em; /* 2段分 */
	}
	/* 2026-10-06:斜線は文字基準(上の「斜線の位置」)。旧 margin 13px/8px(見た目 左9px/右8px)は撤去。2段の1行目が「・」で終わるので --bsl-r 0.436em */
	.cta-badge { --bsl-r: 0.436em; }

	/* ==== FV骨格:sp-top_ver2.png カンプ準拠 ====
	   物差し:カンプ1102px幅・2x書き出し → 実測px ÷ 2 ÷ 10 = rem
	   (html font-size: calc(100vw / 553 * 10))。上部(吹き出し・キャッチ)は
	   上アンカー、下部(肩書き〜紹介文・写真・草)は下アンカーで、
	   FV高さ(100svh−ナビ)が変わってもカンプの構図を保つ ---- */

	/* キャッチ(カンプ実測:1行目インク上端 y264・行送り159px・「最」インク99px。
	   子要素はem比例(帯③と同じ係数)で3段階ジャンプ率を維持) */
	.fv__catch {
		left: 3.4rem;
		/* 旧:吹き出しを縦に伸ばした分(しっぽ下端の下降量 0.47037×高さ増分)だけ下げていた
		   = 12.4rem + 0.47037 × (旧吹き出しの高さ − 7.8rem)。吹き出し撤去後(2026-09-30)も位置は据え置き */
		top: var(--sp-catch-t);
		/* カンプ 5.5rem。人物の頭部に重ならない上限で縮小(--sp-catch-f)。
		   子要素のジャンプ率(1 / 0.701 / 1.1546em)は不変 */
		font-size: var(--sp-catch-f);
	}
	.fv__catch-md { font-size: 1em; }
	.fv__catch-sm { font-size: 0.701em; }
	.fv__catch-em { font-size: 1.1546em; }
	.fv__catch-line { height: 1.1546em; }
	.fv__catch-line + .fv__catch-line { margin-top: 1.6rem; }

	/* 3行構成(2行目を「最高の」/「言葉でつなぐ」に割る・行間のインク補正)は 2026-10-04 のキャッチ変更で撤去。全帯で2行固定 */

	/* 肩書き・名前・ローマ字+X(カンプ実測を下アンカー化。
	   bottom = (カンプ高2143 − インク下端) ÷ 2 ÷ 10 − 行送り補正) */
	.fv__role {
		left: 3.9rem;
		bottom: 39rem;
		/* カンプ比率(32px÷2)。※375px幅で実質10.8px=可読下限14px未満。
		   下限を守ると折返し・名前との衝突が起きるため要判断(報告済み)。
		   名前ブロック(肩書き・名前・ローマ字)は同率 0.9 倍(2026-09-06。名前が
		   キャッチ特大より大きく人物写真を圧迫していたため。下端固定なので空きは上側) */
		font-size: calc(1.6rem * 0.9);
	}
	.fv__name {
		left: 3.9rem;
		bottom: 32.4rem;
		font-size: calc(5.8rem * 0.9); /* 0.9倍(2026-09-06。名前÷キャッチ特大 ≒ 0.95) */
		margin: 0;
	}
	.fv__en {
		left: 3.9rem;
		/* 名前↓TOUI の間隔をPC(1920px)のem比0.26に近づけるため0.5rem下げる
		   (2026-08-22改定。カンプ比率より広げる方向で確定) */
		bottom: 27.6rem;
		gap: 2.6rem; /* 2026-10-24:SPの英字名とXの間隔を約18〜20pxへ */
	}
	.fv__en-name {
		font-size: calc(2.15rem * 0.9); /* 0.9倍(2026-09-06) */
		/* 字間はPC(1920px)と同じem比に揃える(2026-08-22。従来は0) */
		letter-spacing: 0.4em;
		margin-right: -0.4em; /* 末尾の字間を相殺し、gapを見た目の余白にする */
	}
	.fv__sns {
		/* 見た目 +2px(2026-09-07 確定・x1。375px で 19→21px)。タップ領域 44×44 は全帯共通の
		   ::before が確保済み。a の外側高さを負マージンで 0 にして行高(ローマ字)を変えず、
		   align-items:center でローマ字の中心に揃える(名前ブロックの下端固定に影響しない)。
		   28px 版(x2)は撤回 */
		width: calc(2.8rem + 2px);
		height: calc(2.8rem + 2px);
		margin: calc(-1.4rem - 1px) 0;
	}

	/* 紹介文(カンプ実測:インク x75〜 y1638-1850・4行・行送り59.5px)。
	   右端は固定CTA(右14px+幅126px+余白8px)に達しない幅に制限し、
	   収まらない画面では折り返す(下アンカーなので上方向に伸びる) */
	.fv__intro {
		left: 3.7rem;
		top: auto;
		bottom: 13.9rem;
		max-width: calc(100vw - 3.7rem - 148px);
		/* カンプ比率(最長行725px÷2=362.5px=23.2em相当から逆算)。
		   ※375px幅で実質10.5px=可読下限14px未満(要判断・報告済み)。
		   下限適用時は折返しが増え、下アンカーのため上の名前と衝突する */
		font-size: 1.55rem;
		/* 字間はPC(1920px)と同じem比に揃える(2026-08-22。従来は0.03em) */
		letter-spacing: 0.09em;
		line-height: 1.9; /* カンプ行送り59.5px ÷ 文字31px */
	}

	/* ---- 520px以下:紹介文4行目(23文字)が max-width に収まらず5行になる帯。
	   紹介文とTOUI OKAWAはどちらも下端アンカーで、両者の空きは
	   28.6 - 13.9 = 14.7rem 固定。1行 = 1.55rem × 1.9 = 2.945rem のため
	   5行 = 14.725rem で容量を0.025rem超過し、間隔が0になる。
	   名前ブロックを1行分(3rem)上へ逃がして間隔を確保する
	   (4行に収まる523px以上は無変更。切替点は実測522/523の間。
	   フォントを差し替えたときは行数の切替点を再確認すること) ---- */
	@media (max-width: 522px) {
		.fv {
			--sp-role-b: 42rem; /* .fv__role の bottom と同値に保つ */
			--sp-intro-h: 14.725rem; /* 5行 */
		}
		.fv__role { bottom: 42rem; }
		.fv__name { bottom: 35.4rem; }
		.fv__en { bottom: 30.6rem; }
	}

	/* ---- 写真(下アンカー):PC共通トリム済みアセット(1672×1832)。
	   SP較正:頭部のテンプレートマッチング(アセット頭部6px格子と
	   カンプの輝度残差最小化)でスケール0.855・原点(-210,418)カンプpx。
	   → 幅1430カンプpx=71.5rem・右はみ出し118px=5.9rem・
	   下端はFV下端から7.9rem。
	   低い画面では頭頂がカンプ相当位置(上20.9rem)より上がらないよう
	   高さ基準で縮小(0.9127=幅÷高さ=1672/1832)。

	   ---- 拡大(2026-08-23)----
	   草アセットは上43.48%が透明なため、草ブロックが全幅を覆う線は
	   FV下端から 5.652rem。カンプ由来の下端 7.9rem ではその 2.246rem 上で
	   切れ、脚の切り口と背景が見えていた。下端を 5.4rem まで下げ、
	   頭頂を動かさないよう高さを 2.5rem 増やす(幅 +2.282rem =
	   2.5 ÷ 1.0957)。上限 71.5→73.782rem・高さ制約の定数
	   28.8→26.3rem(=下5.4+上20.9)。
	   さらに右アンカーのままだと拡大分が左へ広がって頭部左端が
	   1.205rem(=0.528×2.282)左へ寄り、キャッチが自動縮小してしまうため、
	   右はみ出しを 5.9→7.105rem にして頭部左端を元の位置に保つ。

	   ---- 右シフト(2026-08-23)----
	   キャッチを大きくするため、さらに右へ 2rem(合計 9.105rem)。
	   頭部左端がその分右へ寄り、--sp-catch-f が自動で拡大する
	   (対カンプ比 375:0.788→0.820 / 390:0.664→0.712 / 430:0.759→0.807)。
	   代償は人物の右見切れが +2rem(375で48→62px)。
	   ※--sp-catch-f の定数は「写真の右はみ出し − キャッチ左端3.4rem」
	     なので 9.105 − 3.4 = 5.705rem に追従させること ---- */
	.photo {
		left: auto;
		right: calc(-1 * var(--sp-photo-r));
		top: auto;
		bottom: 5.4rem;
		width: var(--sp-pw);
		max-width: none; /* 全体ルールの img{max-width:100%} を解除 */
	}

	/* ---- 地面(草+土):カンプ実測 高さ243px=12.15rem。
	   PCと同じ考え方でブロック高の10%を画面下端(SPナビの上線)より下に
	   沈める(12.15rem × -0.1 = -1.215rem)。はみ出しは .fv の
	   overflow:hidden で切られ、左右は left/right:0 なので横スクロールなし。
	   ※沈めた分だけ草の穂先も下がるため、写真下端との隙間は
	     1.033rem → 2.248rem に広がる(写真側の対応で別途解消する) ---- */
	.fv__ground {
		/* 2026-09-30:土を2倍に(式はベースの .fv__ground。SP は高さ 12.15rem・旧沈み 10%・
		   見えていた土 0.2597×高さ=3.155rem。草の上端は同じだけ上がる) */
		--g-h: 12.15rem;
		--g-sink: 1.215rem;
		--g-soil: calc(0.2597 * var(--g-h));
	}

	/* SPの文字背後の白(2026-10-18・A案):左下から右へ薄くする。
	   上端は文字群の35px上、55pxでフェードイン。JS無効時も従来の肩書き位置を基準にする。
	   写真より上・文字より下の既存レイヤーを維持。文字や写真の位置は変えない。 */
	.fv__textbg {
		--textbg-rgb: 255, 255, 255;
		display: block;
		left: 0;
		top: calc(var(--tb-t, calc(100% - var(--sp-role-b) - 2.2rem)) - 35px);
		width: 100%;
		height: calc(100% - var(--tb-t, calc(100% - var(--sp-role-b) - 2.2rem)) + 35px);
		-webkit-mask-image: linear-gradient(transparent, #000 55px);
		mask-image: linear-gradient(transparent, #000 55px);
	}
	.fv__textbg::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(var(--textbg-rgb), .85), rgba(var(--textbg-rgb), .78) 38%, rgba(var(--textbg-rgb), .4) 58%, transparent 78%);
	}

	/* ---- 450px以下:写真をさらに右へ +3rem(合計 12.105rem)----
	   狭い幅ほどキャッチの取り分が小さいため、頭部左端をさらに右へ逃がして
	   文字サイズを回復する(--sp-photo-r を上げるとキャッチ式の定数も追従)。
	   当初は400px以下だったが、境界を450pxへ引き上げて401〜450も同じ値に
	   統一(2026-08-25)。400↔401にあったキャッチ−12%の段差が消え、
	   段差は450↔451の1箇所(−10%)に集約される。
	     対カンプ比 375:0.869 / 390:0.803 / 400:0.804 / 410:0.878 /
	     430:0.981 / 450:0.987(451は0.888)
	   375px での人物右端の画面外量:
	     写真高28.4%(頭部・顎まで)=  −5px(画面内・残り僅か)
	     写真高50%  (肩の線)      =  +5px(見切れ)
	     写真高55%  (上腕の外側)  = +11px(見切れ)
	   401〜450帯は写真が大きく余裕がある(顔 −32px・55%線 −10px)。
	   顔が右端で切れ始めるのは --sp-photo-r ≒ 12.9rem(残り約0.8rem)。
	   ※頭部クリアランスは 405px 付近で 2.8px まで詰まる(重なりは全幅ゼロ。
	     キャッチ上限式の頭部プロファイル近似が安全側の下界のため) ---- */
	@media (max-width: 450px) {
		.fv { --sp-photo-r: 12.105rem; }
	}


	/* ---- 固定CTA(右下90×90px・受付中バッジなし)。
	   黒影・回転なしのフラットな正方形 ---- */
	.cta {
		position: fixed;
		left: auto; /* ベースの left:142.5rem を解除(未解除だと右指定が無効=画面外) */
		/* 真上の受付中バッジ(124px)と中心線を合わせる。
		   バッジは right:14px なので 14 + (124 − 110)/2 = 21px。
		   画面右端からの余白はバッジの14pxが基準で、CTAはそれより
		   7px内側に入る(中央揃えを優先) */
		right: 23px; /* バッジ(128.7px。文言「ゲーム大会実況・」化で+6.6px・2026-09-12)の水平中央=14+(128.7−110)/2 ≒ 23px(旧20px=122.1px時) */
		top: auto;
		bottom: calc(var(--sp-nav-h) + 36px); /* 14 + コピーライト行22px(2026-09-06。旧14px。フッター文字を CTA より下の行に置くため) */
		width: 110px; /* 一回り縮小(126px の 0.873倍。2026-08-24)*/
		max-width: none;
		/* SP内の全要素(装飾1・セクション2・ナビ65・スクリム70)より前面。
		   モーダル(75)のみCTAより上 */
		z-index: 72;
		transform: none;
		/* ベースの横並び(icon+label+arrow)を縦積みの正方形ボタンに */
		height: auto;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		padding: 9px 7px;
		/* RPG窓意匠に統一(2026-08-22):濃紺枠+濃紺の落ち影。
		   送信ボタン・チップと同じ立体表現。黄色(--cta)は維持。
		   枠・影に加えてラベルとアイコンも濃紺に揃える(2026-08-24)。
		   アイコンはインラインSVGで stroke="currentColor" なので
		   この color をたどる */
		color: var(--navy);
		border: 3px solid var(--navy);
		box-shadow: 0.6rem 0.6rem 0 var(--navy);
	}
	/* モーダル表示中はCTAを隠す(モーダルより上に乗らないように) */
	body.sp-contact-open .cta {
		display: none;
	}
	.cta__icon {
		width: 34px; /* 39px の 0.87倍 */
		height: 34px;
		margin: 0;
	}
	.cta__label {
		margin: 0;
		text-align: center;
		white-space: nowrap;
		font-size: 12px;
	}
	.cta__arrow {
		display: none;
	}

	/* ---- 縦積みセクション ----
	   背景タイル(750×960・ストライプ周期96px)。repeat-y+100% auto 必須
	   (autoを省くと45度の角度が崩れる。ハンドオフ資料 §4-1) ---- */
	.panels {
		display: block;
		position: relative;
		/* FV下端〜最初のパネルの余白。10rem(600pxで87px)は広すぎたため半減 */
		padding: 5rem 0 0;
		background: url("../img/bg-tile-sp.svg") center top / 100% auto repeat-y;
	}
	.panel {
		position: relative;
		z-index: 2; /* 装飾(z-index:1)より前面 */
		margin: 0 3rem 2rem; /* 左右 3rem(2026-09-12 確定・p1。旧 4rem。FV キャッチ左端 3.4rem と近似で揃える) */
		background: #fff;
		padding: 0; /* ヘッダーバーを端まで届かせる(内側余白は .panel__body 側) */
		scroll-margin-top: 2rem;
	}
	/* ステータス窓(新デザイン):SPは1カラム+可読下限 */
	.c-status {
		padding: 2.4rem 2.6rem;
	}
	.c-status__top {
		gap: 1.4rem 2rem;
	}
	/* SPでは名前とローマ字を1つのフレックス項目にまとめ、
	   幅が足りないときは2つセットで次の行へ送る
	   (従来は CASTER+名前 / ローマ字 の2段に割れていた) */
	.c-status__names {
		display: flex;
		align-items: baseline;
		gap: 1.2rem;
		min-width: 0;
	}
	.c-status__lv,
	.c-status__en,
	.c-status__kana {
		font-size: max(1.5rem, 12px);
	}
	.c-status__name {
		font-size: max(2.8rem, 22px);
	}
	.c-status__grid {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}
	.c-h3 {
		font-weight: 900;
		font-size: max(2.2rem, 16px);
		margin: 2.6rem 0 1.2rem;
		/* バーは共通コンポーネントの ::before で描画するため、
		   旧 .sp-ptitle 由来の border-left は使わない(二重表示の原因) */
	}
	.c-chip {
		display: inline-flex;
		background: #fff;
		border: 2px solid var(--navy);
		font-size: max(1.9rem, 16px);
		font-weight: 700;
		padding: 0.3rem 1.4rem;
		margin: 0 0.8rem 1rem 0;
		box-shadow: 0.3rem 0.3rem 0 var(--p-blue-line);
	}
	.c-msg {
		font-size: max(1.9rem, 14.4px); /* 従来の0.9倍 */
		line-height: 2;
	}
	.c-filters {
		margin-bottom: 2rem;
	}
	.c-filters__label {
		font-size: max(1.45rem, 13px); /* 2026-09-12 s2(旧 16px) */
		font-weight: 900;
		margin: 0.4rem 0 0.4rem;
		color: #555;
	}
	/* .c-chip.c-chip--filter:後続の SP .c-chip(padding/margin)に負けないよう詳細度を上げる(2026-09-12) */
	.c-chip.c-chip--filter {
		background: #fff;
		border: 2px solid var(--navy);
		font-weight: 700;
		/* 13px(2026-09-12 確定・s2。旧 16px。検索UIの高さを詰めるため。タップ高は min-height 32px) */
		font-size: max(1.45rem, 13px);
		font-family: inherit;
		padding: 0.3rem 1rem;
		margin: 0 0.6rem 0.6rem 0;
		min-height: 32px;
		box-sizing: border-box;
		cursor: pointer;
		box-shadow: 0.3rem 0.3rem 0 var(--p-blue-line);
	}
	.c-chip--filter.is-on {
		background: var(--p-blue);
		color: #fff;
		transform: translate(0.3rem, 0.3rem);
		box-shadow: none;
	}
	.c-work {
		display: flex;
		align-items: center;
		gap: 1.2rem;
		background: #fff;
		border: 2px solid var(--ink);
		box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, .15);
		padding: 1.4rem 1.8rem;
		margin-bottom: 1.4rem;
		font-size: max(2rem, 16px);
		transform: rotate(-.4deg);
	}
	.c-work:nth-child(even) {
		transform: rotate(.4deg);
	}
	.c-work b {
		font-weight: 900;
		margin-right: 0.6rem;
	}
	.c-work i {
		font-style: normal;
		font-size: max(1.6rem, 14px);
		color: #777;
		margin-left: auto;
		white-space: nowrap;
	}
	.c-empty {
		font-size: max(2rem, 16px);
		color: #777;
		padding: 1rem 0.4rem;
	}

	/* ---- 下部固定ナビ(現在地ハイライトはSPのみの仕様) ---- */
	/* ---- 下部固定ナビ:RPG窓意匠に統一(2026-08-22)。
	   濃紺地+上辺の四隅ドット。現在地は淡青の面+黄色の点滅カーソル+
	   青の下線で示し、アイコン・ラベルを水色にする(非選択は白) ---- */
	.sp-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 65;
		background: var(--navy);
		border-top: 3px solid var(--navy);
		box-shadow: 0 -0.6rem 1.8rem rgba(59, 111, 224, .18);
		padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
	}
	.sp-nav::before {
		content: "";
		position: absolute;
		left: -3px;
		right: -3px;
		top: -3px;
		height: 10px;
		pointer-events: none;
		background:
			linear-gradient(var(--navy), var(--navy)) left center / 10px 10px no-repeat,
			linear-gradient(var(--navy), var(--navy)) right center / 10px 10px no-repeat;
	}
	.sp-nav a {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		padding: 7px 0 5px;
		transition: background .12s;
	}
	.sp-nav a img {
		width: 22px;
		height: 22px;
		object-fit: contain;
		/* SVGは <img> 経由で currentColor が効かないため filter で着色 */
		filter: brightness(0) invert(1);
	}
	.sp-nav a.is-active {
		background: rgba(71, 124, 242, .18);
		color: #8FBBFF;
	}
	.sp-nav a.is-active img {
		filter: brightness(0) saturate(100%) invert(78%) sepia(23%) saturate(1198%) hue-rotate(184deg) brightness(101%) contrast(101%);
	}
	/* 選択中の項目にRPGの選択カーソル(黄色の点滅ブロック)を置く */
	.sp-nav a.is-active::before {
		content: "";
		position: absolute;
		left: 6px;
		top: 50%;
		width: 6px;
		height: 6px;
		margin-top: -3px;
		background: var(--yellow);
		animation: toui-blink 1.2s steps(1) infinite;
	}
	.sp-nav a.is-active::after {
		content: "";
		position: absolute;
		left: 20%;
		right: 20%;
		bottom: 1px;
		height: 3px;
		background: #477CF2;
	}

	/* ---- お問い合わせモーダル ---- */
	.sp-scrim {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .55);
		z-index: 70;
		display: none;
	}
	.panel--contact {
		display: none;
		position: fixed;
		z-index: 75;
		left: 12px;
		right: 12px;
		top: 6svh;
		bottom: calc(12px + env(safe-area-inset-bottom));
		margin: 0;
		/* 縦だけスクロール。横は保険で塞ぐ(根本原因の四隅ドットは下で非表示済み。
		   iOS で別要因の 1〜2px はみ出しが出ても横ドラッグで動かないようにする・2026-09-06) */
		overflow-x: hidden;
		overflow-y: auto;
		background: #fff;
		border: 3px solid var(--navy);
		padding: 0; /* ヘッダーバーを端まで(内側余白は .panel__body) */
	}
	body.sp-contact-open {
		overflow: hidden;
	}
	body.sp-contact-open .sp-scrim {
		display: block;
	}
	body.sp-contact-open .panel--contact {
		display: block;
	}
	/* 四隅ドット(.panel::before/::after は left/right −0.3rem で枠線上に置く)は
	   overflow:auto のモーダルでは padding box で切られて見えないうえ、右側の
	   はみ出し(+2px)がモーダル内の横スクロール領域になり、実機で左右に
	   2px 動いてしまう(2026-09-06)。SP のモーダルでは出さない */
	.panel--contact::before,
	.panel--contact::after {
		display: none;
	}
	/* モーダルはヘッダーバーごと上に固定(✕に常に手が届く) */
	.panel--contact .panel__head {
		position: sticky;
		top: 0;
		z-index: 1;
	}
	.panel--contact .panel__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		font-weight: 900;
		font-size: 15px;
		cursor: pointer;
	}
	.panel--contact .c-msg {
		font-size: max(2rem, 16px);
		line-height: 1.9;
		margin-bottom: 2rem;
	}
	/* ---- 共通コンポーネントのSP上書き(従来のSP見た目を維持) ---- */
	.panels {
		display: block;
	}
	.panel {
		box-shadow: none;
		transform: none;
		border-width: 2px;
		display: block;
	}
	.panel__head {
		padding: 1.4rem 2rem;
	}
	.panel__title strong {
		font-size: max(2.1rem, 17px);
	}
	.panel__en {
		font-size: max(1.3rem, 10px);
	}
	.panel__close {
		display: none;
	}
	.panel__body {
		padding: 2.4rem 2rem 2.8rem;
		overflow: visible;
	}
	.c-h3 {
		margin: 2.6rem 0 1.2rem;
		font-size: max(1.8rem, 16px);
	}
	.c-status__row {
		font-size: max(2rem, 16px);
		gap: 1.6rem;
	}
	.c-status__row dt {
		width: 11rem;
	}
	.c-chips {
		display: block; /* inline-blockのチップを従来通り横に流す */
		gap: 0;
	}
	.c-chip {
		border-width: 2px;
		box-shadow: 0.3rem 0.3rem 0 var(--p-blue-line);
		padding: 0.4rem 1.1rem;
		margin: 0 0.6rem 1rem 0;
	}
	.c-filters {
		border-width: 2px;
		padding: 1.1rem 1.1rem 0.4rem; /* 2026-09-12 s2(旧 1.6rem 1.6rem 0.6rem) */
		gap: 0.4rem;
	}
	.c-filters__label {
		font-size: max(1.45rem, 13px); /* 2026-09-12 s2(旧 16px) */
		color: #555;
		margin: 0.4rem 0 0.4rem;
	}
	.c-works {
		gap: 0;
	}
	.c-work {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.6rem 1.2rem;
		border-width: 2px;
		box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, .15);
		padding: 1.4rem 1.8rem;
		margin-bottom: 1.4rem;
		/* タイトル 15px・年/形式ジャンル 12px(2026-09-12 確定・f1。旧 16/16/14px。1件 74→70px。
		   14/11px の f2 は 12px 下限を割るため撤回) */
		font-size: 15px;
		transform: rotate(-.4deg);
	}
	.c-work:nth-child(even) {
		transform: rotate(.4deg);
	}
	.c-work__year {
		font-size: 12px;
	}
	.c-work__tags {
		grid-column: 2;
		font-size: 12px;
		text-align: right;
	}
	.c-empty {
		font-size: max(2rem, 16px);
	}
	.c-msg {
		font-size: max(1.9rem, 14.4px);
		line-height: 2;
	}
	/* フォーム(モーダル内)はSPでは1カラム */
	.c-form {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}
	.c-field__label {
		font-size: max(1.9rem, 16px);
	}
	.c-badge {
		/* 2026-09-30:0.8倍(1.4→1.12rem)。SP は文字 12px の下限を守るため実際の文字は 12px のまま
		   (0.8倍そのままだと 9.6px)。padding はベースの 0.8倍が効く */
		font-size: max(1.12rem, 12px);
	}
	.c-field input,
	.c-field textarea,
	.c-form input[type="text"],
	.c-form input[type="email"],
	.c-form input[type="tel"],
	.c-form textarea {
		font-size: 16px; /* iOSの自動ズーム防止 */
		border-width: 2px;
	}
	/* 本文欄:CF7の rows=10 のままだと画面高の3〜4割を占めるため、
	   SPでは 4.5行相当に抑える(入力中はスクロールで足りる) */
	.c-field textarea,
	.c-form textarea {
		min-height: 0;
		height: 6.7em; /* 4.5行相当(padding+borderを含む) */
		resize: vertical;
	}
	.c-privacy {
		font-size: max(1.8rem, 15px);
	}
	/* ポリシー枠:180px は画面高を圧迫するため150pxへ(スクロールで読む) */
	.c-privacy-box {
		height: 150px;
	}
	.c-submit,
	.c-form input[type="submit"],
	.c-form button[type="submit"] {
		font-size: max(2.2rem, 17px);
		border-width: 2px;
		box-shadow: 0.5rem 0.5rem 0 var(--navy);
		padding: 1.4rem 3.4rem;
	}
	/* お問い合わせはSPではモーダル(パネル枠は使わない) */
	.panel--contact .panel__head {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	/* ✕はPC側パネルと同じ意匠(白地+濃紺枠+白の影)。
	   従来は黒地・白抜きで新デザインから浮いていた */
	.panel--contact .panel__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		background: #fff;
		color: var(--navy);
		border: 2px solid var(--navy);
		box-shadow: 2px 2px 0 rgba(255, 255, 255, .35);
		font-size: 15px;
		transform: none;
	}
	/* モーダルは overflow:auto なのでブラウザがフォーカス可能にする。
	   既定のリング(outline:auto)は意匠に合わないので、フォーカス表示は
	   残したまま意匠に合わせたものへ置き換える */
	.panel--contact:focus { outline: none; }
	.panel--contact:focus-visible {
		outline: 3px solid var(--p-blue);
		outline-offset: 2px;
	}

	/* お問い合わせモーダルの開閉:SPの .panel { display:block } より
	   後に置いて確実に効かせる(既定は非表示) */
	.panel--contact {
		display: none;
	}
	body.sp-contact-open .panel--contact {
		display: block;
	}

}

/* ==========================================================
   SPの物差し(401〜600px)の上書き — 2026-08-24(2回目の縮小)
   500〜600帯の圧迫感を抑えるため、前回(2026-08-22:553で9px・600で
   8.75px)からさらに0.9倍へ。アンカーは
     400px: 7.233px(幅比例のまま・据え置き)
     500px: 7.550px(前回8.389の0.90倍)
     553px: 8.100px(前回9.000の0.90倍)
     600px: 7.870px(前回8.748の0.90倍)
   の3区間直線。401で7.236と400(7.233)から連続し、区間の継ぎ目でも
   単調・段差なし。601px(7.25)との境界はレイアウト自体が切り替わる
   ため従来どおり。400px以下は幅に完全比例のままで不変
   ========================================================== */
@media (min-width: 401px) and (max-width: 500px) {
	html {
		font-size: calc(0.00317 * 100vw + 5.965px);
	}
}
@media (min-width: 501px) and (max-width: 553px) {
	html {
		font-size: calc(0.010377 * 100vw + 2.3615px);
	}
}
@media (min-width: 554px) and (max-width: 600px) {
	html {
		font-size: calc(-0.004894 * 100vw + 10.8065px);
	}
}

/* ==========================================================
   500〜600px帯の写真拡大 — 2026-08-24
   文字群の2回目縮小(0.9倍)で生まれた余地に合わせ、写真を1.1倍にする。
   頭頂を動かさないため、増えた高さ(0.09961×pw)ぶん下端を沈める
   (下端はFV下端の下へ出て overflow:hidden で切れる。切れるのは
   草に隠れている脚の領域のみ。草の全幅被覆線より下端が深く沈むので
   隙間ゼロは維持)。右アンカーのままだと拡大分が左へ広がり頭部左端が
   0.528×Δpw 左へ寄るため、--sp-photo-r を +0.04804×pw
   (= 0.528×(1 − 1/1.1))増やして頭部左端を保つ。キャッチの上限式は
   --sp-photo-r と --sp-pw の両方を参照しており、この2つの変化が
   ほぼ相殺されて文字サイズは不変(実測 500:41.53 / 553:44.55 /
   600:43.29px で拡大前と同値)。
   SPブロック・物差し上書きより後に置いて確実に効かせる
   ========================================================== */
@media (min-width: 500px) and (max-width: 600px) {
	.fv {
		--sp-pw: min(calc(73.782rem * 1.1),
			calc((var(--sp-layout-h) - var(--sp-nav-h) - 26.3rem) * 1.00397));
		--sp-photo-r: calc(9.105rem + 0.04804 * var(--sp-pw));
		--sp-photo-t: calc(var(--sp-layout-h) - var(--sp-nav-h) - 5.4rem - 0.99609 * var(--sp-pw));
	}
	.photo {
		bottom: calc(5.4rem - 0.09961 * var(--sp-pw));
	}
}


/* ==========================================================
   コンテンツの中央化(1664px以上)— 2026-08-25 箱基準に一本化
   基準:テキスト群左端(キャッチ11.6rem)〜CTA右端のバウンディング
   ボックスを画面中央に置く。カンプ自身の非対称(左116px/右63px)を
   打ち消すシフトは −2.65rem(左へ)。人物基準(P2/P3)は不採用。
   --wide-x = max((100vw − 192rem)/2, 0px)
              …… 1921px以上で伸びる中央化項
            + clamp(−2.65rem, (1664px − 100vw)×0.2284, 0px)
              …… 1663px以下(Macで確認済みの良好な帯)を動かさない
              ためのテーパー。1664pxで0 → 1780pxで −2.65rem に達し
              以降一定。1663↔1664 の段差ゼロ・1920↔1921 も連続
   1664〜1919px は②帯の right 基準(menu 58.84rem / cta 6.3rem)を
   引き継いでシフトする。1920px 以上も同じ right 基準に統一
   (menu はベースの left 基準と 2.6px 差があり、その実測を
   baseline-1920.json に反映する)。
   コンテンツは塊ごと平行移動・相対関係不変。
   全MQより後に置き、ベース・②帯の座標指定を確実に上書きする
   ========================================================== */
@media (min-width: 1664px) {
	html {
		--wide-x: calc(max((100vw - 192rem) / 2, 0px)
			+ clamp(-2.65rem, (1664px - 100vw) * 0.2284, 0px));
	}
	.fv__catch    { left: calc(11.6rem + var(--wide-x)); }
	.fv__role,
	.fv__name,
	.fv__en       { left: calc(12.2rem + var(--wide-x)); }
	.fv__intro    { left: calc(12.6rem + var(--wide-x)); }
	/* right 基準の要素は「1920相当の枠」の右端が画面右端から
	   (100vw − 192rem) 離れるため、その分を足し戻してから −wide-x。
	   1920px以下では max() が 0 になり right固定−テーパーだけが残る */
	.menu         { left: auto; right: calc(58.84rem - var(--wide-x) + max(100vw - 192rem, 0px)); }
	.cta,
	.cta-badge    { left: auto; right: calc(6.3rem - var(--wide-x) + max(100vw - 192rem, 0px)); }
	/* 写真:②帯と同じ「右端に収まらなければ左へ」式+シフト。
	   1920px以上では min() の第1項(71.25rem)=ベースの left と同値 */
	.photo        { left: calc(min(71.25rem, 100% - 95.13rem) + var(--wide-x)); }
	/* 装飾:②帯の写真連動式+シフト(1920px以上ではベース値と同値) */
	.deco--controller { left: calc(min(calc(min(71.25rem, 100% - 95.13rem) + 99.14rem), calc(100% - 7.92rem - 20px)) + var(--wide-x)); }
	.deco--handle     { left: calc(min(calc(min(71.25rem, 100% - 95.13rem) + 79.185rem), calc(100% - 8.28rem - 20px)) + var(--wide-x)); }
	.deco--ball       { left: calc(min(calc(min(71.25rem, 100% - 95.13rem) + 93.82rem), calc(100% - 5.36rem - 20px)) + var(--wide-x)); }
	.deco--car        { left: calc(min(calc(min(71.25rem, 100% - 95.13rem) + 102.175rem), calc(100% - 9rem - 20px)) + var(--wide-x)); }
	.deco--glove      { left: calc(76.435rem + var(--wide-x)); }
	.deco--sword      { left: calc(68.82rem + var(--wide-x)); }
	/* パネル切替(1401px以上)のパネル・ネームプレートも左端=キャッチ左端 */
	.panel,
	.nameplate--fv { left: calc(11.6rem + var(--wide-x)); }
}


/* ==========================================================
   601〜1400px:追従ナビのナビ3項目を画面中央に絶対配置 — 2026-09-03
   (2026-09-05:適用範囲を 769〜 から 601〜 に拡大。601〜768 は縮小ブロックの
   .stickybar__nav { flex: 0 1 auto } で3要素が左に詰まり、右が空いていた。
   実機737px。601〜768 の各要素の縮小段はそのまま使う)
   構成は従来どおり 左=ネームプレート/中央=ナビ/右=CTAコンパクト版。
   変更はナビの位置決めだけ:flex の余白配分(ネームプレート・CTAの
   幅に引きずられて中心がずれる)をやめ、ヘッダー幅の中央に絶対配置して
   ナビ中心=画面中心にする。ネームプレートとCTAは space-between で両端。
   タップ領域(a の padding)・追従の挙動(JS)は変更しない
   ========================================================== */
@media (min-width: 601px) and (max-width: 1400px) {
	.stickybar__inner {
		position: relative;
		justify-content: space-between;
	}
	.stickybar__nav {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		flex: none;
	}
}
/* 769〜820px:フルサイズのネームプレート(幅約240px)が中央のナビに
   密着する(769pxで隙間0)ため、601〜768px の縮小段をこの幅まで延長する。
   821px以上はフルサイズで隙間26px以上 */
@media (min-width: 769px) and (max-width: 820px) {
	.nameplate--bar .nameplate__role {
		font-size: max(0.9rem, 9px);
		margin-bottom: 0.2rem;
	}
	.nameplate--bar .nameplate__row {
		gap: 0.8rem;
	}
	.nameplate--bar .nameplate__name {
		font-size: max(2.2rem, 17px);
	}
	.nameplate--bar .nameplate__en {
		font-size: max(0.9rem, 9px);
		letter-spacing: 0.24em;
	}
}

/* ==========================================================
   1000〜1399px:名前ブロックを0.877倍 — 2026-09-03
   この帯は㉛㉜の累計1.21倍が名前・肩書き・TOUI OKAWA に掛かる一方、
   キャッチは頭部回避の6vwで頭打ちのため、名前がキャッチ「中」より
   大きく(1.047倍)見えていた。係数だけを K=0.877 倍して累計1.06倍に
   下げる(名前÷キャッチ=0.918)。位置式は不変=フォントだけ縮め、余白は
   肩書き↓名前/名前↓TOUI/TOUI↓紹介文の3か所へ自然配分。
   999px以下(601〜1000ブロック)・1401px以上は変更しない。
   999↔1000 の段差:名前 62.8→55.1px(テーパーなし・様子見)
   ========================================================== */
@media (min-width: 1000px) and (max-width: 1399px) {
	.fv__role { font-size: max(calc(0.2844 * var(--cf)), 14px); }    /* 0.3243 × 0.877 */
	.fv__name { font-size: calc(1.0503 * var(--cf)); }                /* 1.1976 × 0.877 */
	.fv__en-name { font-size: max(calc(0.2950 * var(--cf)), 14px); } /* 0.3364 × 0.877 */
	.fv__sns {
		width: calc(0.877 * min(5.81rem, 2.9vw));
		height: calc(0.877 * min(5.81rem, 2.9vw));
	}
}
/* 601〜999px にも同じ K=0.877 を延長(2026-09-03)。
   名前↓TOUI OKAWA が3〜4pxまで詰まっていたのを1000px側(12px)と揃え、
   999↔1000 の名前サイズ段差(62.8→55.1px)を解消する。
   Xアイコンは既に17〜29pxと小さいためこの帯では縮めない。
   肩書きは14px床に当たる幅(〜755px)が多く、肩書き↓名前(1〜2px)は
   今回スコープ外。新たに 600↔601 で名前 45.6→41.6px(−4px)の段差 */
@media (min-width: 601px) and (max-width: 999px) {
	.fv__role { font-size: max(calc(0.2844 * var(--cf)), 14px); }
	.fv__name { font-size: calc(1.0503 * var(--cf)); }
	.fv__en-name { font-size: max(calc(0.2950 * var(--cf)), 14px); }
}

/* ==========================================================
   Xボタン(.fv__sns)のタップ領域:見た目のアイコンは変えず、
   最低44×44pxを確保 — 2026-09-03(全帯共通)
   ::before を a の外側へ張り出させてヒット領域だけ広げる。
   横は左右均等(TOUI OKAWA との隙間は全帯26px以上あり接触しない)、
   縦は名前側 0.25:紹介文側 0.75 に配分(名前インク下端との隙間が狭い
   帯で名前の文字を覆わない。紹介文側は箱上端〜1行目インクの余白
   (行送り1.75の半分)が使える)。アイコンが44px以上の帯(1920)は
   max(0px, …) で張り出しゼロ。
   .fv__en を紹介文(DOM後方・同じz-index:5)より前面にしないと張り出し
   部分が紹介文の箱に隠れてタップ領域が縦42〜44pxに欠けるため z-index:6
   ========================================================== */
.fv__en {
	z-index: 6;
}
.fv__sns {
	position: relative;
}
.fv__sns::before {
	content: "";
	position: absolute;
	left: calc(-0.5 * max(0px, 44px - 100%));
	right: calc(-0.5 * max(0px, 44px - 100%));
	top: calc(-0.25 * max(0px, 44px - 100%));
	bottom: calc(-0.75 * max(0px, 44px - 100%));
}

/* ==========================================================
   装飾アイコンを新版(deco-*2.png・ステッカー調)に差し替え — 2026-09-04
   新版は透明マージンが一律4pxで、旧版(不均一なマージン)とキャンバス比が
   違う。配置ルール(座標・クランプ・重なり判定)は .deco の箱を基準に
   組んであるため、箱は旧版のキャンバス比(aspect-ratio)と幅のまま維持し、
   img だけを箱の中で絶対配置する:
   ・大きさ:インク外接矩形の相乗平均 √(幅×高さ) が旧版と同じになる倍率 r
     (旧インク/旧キャンバス ÷ 新インク/新キャンバス。白フチ・影を含む)
   ・位置:旧版のインク中心(箱に対する%)に新版の中心を合わせる
   旧版ファイルは切り戻し用に残す(公開前の掃除で整理)
   ========================================================== */
.deco--glove      { aspect-ratio: 227 / 227; }
.deco--sword      { aspect-ratio: 144 / 165; }
.deco--controller { aspect-ratio: 198 / 167; }
.deco--handle     { aspect-ratio: 207 / 199; }
.deco--ball       { aspect-ratio: 134 / 130; }
.deco--car        { aspect-ratio: 225 / 184; }
.deco img {
	position: absolute;
	height: auto;
	transform: translate(-50%, -50%);
}
.deco--glove img      { width: 67.3%; left: 49.8%; top: 51.1%; } /* 旧インク150×170/227 → 新174×208/182 */
.deco--sword img      { width: 106.8%; left: 49.7%; top: 50%; }  /* 旧143×165/144 → 新197×213/205 */
.deco--controller img { width: 94.9%; left: 52%; top: 50.9%; }   /* 旧174×140/198 → 新262×192/270 */
.deco--handle img     { width: 74.7%; left: 49.5%; top: 48.7%; } /* 旧151×146/207 → 新232×229/240 */
.deco--ball img       { width: 101.6%; left: 50%; top: 50%; }    /* 旧134×130/134 → 新221×223/229 */
.deco--car img        { width: 90.7%; left: 52.2%; top: 50.3%; transform: translate(-50%, -50%) rotate(6deg); } /* 旧185×135/225 → 新269×171/277。回転は従来どおり */

/* ==========================================================
   1501〜1663px:写真を幅に応じて拡大(1500で1.0倍 → 1663で1.15倍の線形)
   — 2026-09-05(顔中心固定・右見切れ許容)
   Macの実機幅(1663付近)で人物が小さく見えるため、写真を頭頂固定
   (上端19.5remクランプは従来式を倍率込みに)・顔中心固定で拡大する。
   顔中心=写真左端+0.62×幅(目の高さの頭部輪郭の中点、実測)を動かさず
   左右へ均等に広げるため、右側は画面外へ見切れる(1663で+54px。
   人物の右腕〜袖が切れる。この帯だけ右見切れを許容する改定)。
   1401〜1500は紹介文行の人物左端が紹介文右端に近い(1401〜1470は既存の
   重なり)ため1.0倍のまま。
   --ps は単位なしの倍率。tan(atan2(a, b)) = a/b で長さ同士の比を数に
   する(CSSの calc は長さ÷長さを数にできないための書き方。
   意味は clamp(1, 1 + 0.15 × (100vw − 1500px) / 163px, 1.15))。
   1664px以上(カンプ帯)は不変。1663↔1664 は写真 left 623→713・幅
   1094→951px の段差(承認済み・テーパーなし)。
   右列4点(コントローラー・ハンドル・ボール・車)は拡大前の写真左基準のまま
   ========================================================== */
@media (min-width: 1501px) and (max-width: 1663px) {
	:root {
		/* 2026-10-04:1.15倍までの拡大は廃止(写真が大きすぎて上半身が見切れるため)。式を参照している箇所はそのまま 1 で効く */
		--ps: 1;
	}
	.photo {
		width: calc(95.13rem * var(--ps));
		/* 顔中心固定:ベースの left(min(71.25rem, 100% − 95.13rem)。高さが低く
		   rem が縮むと 71.25rem 側が効き右端揃えではなくなる)を起点に、
		   拡大分の 0.62 倍(=顔中心までの距離の増分 58.98rem×(倍率−1))だけ
		   左へ戻す。2026-09-05修正:旧式は右端揃え側(100% − 95.13rem×…)のみを
		   前提にしており、高さ<1072px で顔中心が右へ飛んでいた */
		left: calc(min(71.25rem, 100% - 95.13rem) - 58.98rem * (var(--ps) - 1));
		/* 頭頂クランプ(上端19.5rem):写真高 104.23rem×倍率 */
		bottom: min(-7.9rem, calc(var(--fvh) - 19.5rem - 104.23rem * var(--ps)));
	}
	/* グローブ・剣:1501〜1600の写真基準追従を、拡大後の写真左を基準に
	   1663まで延長(1601〜1663の1920固定座標は使わない) */
	.deco--glove {
		left: max(calc(min(71.25rem, 100% - 95.13rem) - 58.98rem * (var(--ps) - 1) + 12.615rem), 20px);
		bottom: auto;
		top: min(48.635rem, calc(var(--fvh) - 20.065rem));
	}
	.deco--sword {
		left: max(calc(min(71.25rem, 100% - 95.13rem) - 58.98rem * (var(--ps) - 1) - 1rem), 20px);
		bottom: auto;
		top: min(68.425rem, calc(var(--fvh) - 8.175rem));
	}
}
/* 1601〜1700px:右列のコントローラーが端20pxクランプで左に寄り、ハンドルと
   縦8px×横最大27px重なっていた(既知)。left に上限を付けて左へ寄せると
   拡大後の頭部右輪郭に掛かる(1663で数px)ため、横は動かさず bottom を
   2rem下げて縦の重なりを外す(コントローラー下端314 → ハンドル上端326、
   斜め配置で横並びにもならない)。1600↔1601 の既存の縦段差は −84→−64px、
   1700↔1701 は +20px */
@media (min-width: 1601px) and (max-width: 1700px) {
	.deco--handle {
		bottom: 67.445rem; /* 69.445rem − 2rem */
	}
}

/* ==========================================================
   1401〜1703px:パネル展開時のFVネームプレート×メニューの重なり解消
   — 2026-09-05
   メニューは右端基準(right 58.84rem)、ネームプレートは左端基準
   (left 11.6rem)のため、幅が狭いほどメニューが左へ来て
   TOUI OKAWA・名前と重なっていた(1401で最大133px、1664〜1703でも
   32→0px。確定基準から存在)。
   ・メニュー gap 6.6rem→3rem(文字サイズ不変)
   ・メニュー右端を CTA 左端の 40px 手前へ(CTA left = 100% − 6.3rem − 43.2rem
     → right calc(49.5rem + 40px)。1664〜1703 は --wide-x の分を同じく差し引く)
     (当初 8px = right 50.3rem → 24px → 40px と拡大。px 固定で
      高さ<1072px で rem が縮んでも 40px を維持する)
   ・ネームプレートを 1401 で 0.63 倍 → 1580 で等倍に戻す直線テーパー
     (追従ヘッダーの 769〜820 縮小段と同じ考え方。px 項は幅連動)。
     係数 =(等倍 − 下限)px(rem=10 基準)÷ 179px。
     ※当初の係数は桁が 1/10 で、1703 まで 0.69〜0.72 倍のまま等倍に
       戻らず 1703↔1704 で段差が出ていた(修正済み)。
     下限 0.69→0.65→0.63:メニューを左へ寄せたぶん 1401 の
     ネームプレート→メニュー隙間が不足(24px 時 0.69 で −7px、
     40px 時 0.65 で −5px)するため。0.63 で 1401 の隙間 5px
   1704px 以上(1920 原寸)は不変。1703↔1704 でメニューが gap/右端の切替で
   左へ戻る段差あり(承認済み)
   ========================================================== */
@media (min-width: 1401px) and (max-width: 1703px) {
	.menu {
		gap: 3rem;
	}
	.nameplate--fv .nameplate__role {
		font-size: clamp(1.008rem, calc(1.008rem + (100vw - 1401px) * 0.0331), 1.6rem);
	}
	.nameplate--fv .nameplate__row {
		gap: clamp(1.512rem, calc(1.512rem + (100vw - 1401px) * 0.0496), 2.4rem);
	}
	.nameplate--fv .nameplate__name {
		font-size: clamp(2.898rem, calc(2.898rem + (100vw - 1401px) * 0.0951), 4.6rem);
	}
	.nameplate--fv .nameplate__en {
		font-size: clamp(1.26rem, calc(1.26rem + (100vw - 1401px) * 0.0413), 2rem);
	}
}
@media (min-width: 1401px) and (max-width: 1663px) {
	.menu {
		right: calc(49.5rem + 40px);
	}
}
@media (min-width: 1664px) and (max-width: 1703px) {
	.menu {
		/* CTA の right(6.3rem − wide-x + max(100vw − 192rem, 0px))と同じ項を持つ。
		   高さ<1072px で rem が縮むと 100vw > 192rem になり CTA が左へ寄るため、
		   max(...) を欠くと 1664〜1703×900/800 でメニューが CTA に重なる */
		right: calc(49.5rem + 40px - var(--wide-x) + max(100vw - 192rem, 0px));
	}
}

/* ==========================================================
   締めのコンタクトセクション(.site-footer.closing)2026-09-06 案2「濃紺の帯」
   ページ終端の収まりと最後の導線をつくる。マークアップは .panels 末尾(#contact の後)。
   ・600px以下:全幅の濃紺帯に見出し「ご依頼・お問い合わせ / CONTACT」・リード・
     黄色ボタン(#contact でモーダルを開く)・コピーライト(X の行は 2026-09-06 に
     削除。X への導線は FV のネームプレート横の X ボタンに一本化)。
     固定 CTA+受付中バッジは、このセクションの上端がナビ上線の 40px 手前まで来たら
     フェードアウト(main.js。戻すと再表示)。旧フッターの CTA 逃げ余白(183px 式)は廃止
   ・601〜1400:お問い合わせフォームが末尾にあるため導線を二重にしない。
     見出し・リード・ボタン・X は出さず、コピーライトだけの短い帯(48px 相当)
   ・1401px以上:非表示(FV に管理情報を出さない。従来どおり)
   表記は「© {年} TOUI OKAWA」。年は date('Y') で動的出力(front-page.php)
   ========================================================== */
.site-footer {
	position: relative;
	z-index: 2;
	background: var(--navy);
	color: #fff;
	font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.closing__inner {
	max-width: 900px;
	margin: 0 auto;
}
.closing__title {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.4rem;
	font-size: max(2rem, 18px);
	font-weight: 900;
	letter-spacing: 0.06em;
	color: #fff;
}
.closing__sq {
	width: 0.9em;
	height: 0.9em;
	background: var(--cta);
}
.closing__en {
	font-family: "Pixelify Sans", "DotGothic16", monospace;
	font-style: normal;
	font-size: 0.7em;
	color: var(--cta);
	letter-spacing: 0.14em;
	margin-left: 0.4em;
}
.closing__lead {
	margin: 0 0 2rem;
	font-size: max(1.5rem, 13px);
	line-height: 1.9;
	letter-spacing: 0.04em;
}
.closing__btn {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	min-height: 64px;
	padding: 14px 18px;
	background: var(--cta);
	color: var(--navy);
	border: 3px solid var(--navy);
	box-shadow: 0.6rem 0.6rem 0 rgba(255, 255, 255, .35);
	font-weight: 900;
	font-size: max(1.8rem, 16px);
	letter-spacing: 0.06em;
	text-decoration: none;
}
.closing__icon {
	width: 26px;
	height: 26px;
	flex: none;
}
.closing__arrow {
	/* FV の CTA(.cta__arrow)と同じ CSS の border 三角。黒(--ink)・8px
	   (1920 の 0.8rem と同寸)。文字「▶」は iOS で絵文字化・字形差が出るため使わない */
	margin-left: auto;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid var(--ink);
	font-size: 0;
}
.closing__x {
	display: none; /* X の行は非表示(2026-09-06)。復活させる場合は flex に戻す */
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 2rem 0 0;
	font-size: max(1.3rem, 12px);
	letter-spacing: 0.04em;
	color: #fff;
	text-decoration: none;
}
.closing__x img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}
.closing__xid {
	font-family: "Pixelify Sans", "DotGothic16", monospace;
	font-size: 1.1em;
	color: var(--cta);
}
.site-footer__copy {
	display: block;
	margin: 2rem 0 0;
	text-align: center;
	font-size: max(1.2rem, 12px);
	line-height: 1;
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: rgba(255, 255, 255, .75);
}
@media (max-width: 600px) {
	.site-footer {
		/* 最後のパネルとの間隔は .panel の margin-bottom 5rem。下は固定ナビの高さぶん逃がす */
		padding: 3.2rem 3rem calc(var(--sp-nav-h) + 2rem); /* 左右 3rem(2026-09-12。.panel の左右 margin と同値) */
	}
	.site-footer__copy {
		/* ボタン下端→コピーライト上端 4.4rem(落ち影 0.6rem を引いた見た目 3.8rem。
		   375px で 30px)。2026-09-07 に 2.4rem(見た目 12px)から +2rem(f1。+3.5rem は撤回) */
		margin-top: 4.4rem;
	}
	/* 固定 CTA+バッジのフェード(main.js が body.cta-out を付ける) */
	.cta {
		transition: opacity .3s cubic-bezier(.45, 0, .55, 1);
	}
	/* バッジ文字のグロー s1 は常時表示(2026-09-20。値は上の .cta-badge の SP ブロック)。
	   s1 で確定(2026-09-20)。広げる/薄める方向(?glow=g1〜g4 で比較)は、青い文字(輝度 0.22)の周囲が
	   文字と同じ明るさのグレーになりコントラスト比が落ちるため不採用。切替は撤去済み(CLAUDE.md ③)。
	   グローの出し入れ(body.cta-past)をやめたので、text-shadow / filter の transition と、
	   cta-out でのグロー解除は撤去した。締めでは opacity 0 でバッジごと消える
	   (アニメーションは transform / opacity のみ、の原則に戻る) */
	.cta-badge {
		transition: opacity .3s cubic-bezier(.45, 0, .55, 1);
	}
	body.cta-out .cta,
	body.cta-out .cta-badge {
		opacity: 0;
		pointer-events: none;
	}
	/* ※固定表示時のバッジ+CTA 背後の白板(.cta-wrap::before・c1)は、実機 iPhone Safari で
	   FV 内にも見えたため 2026-09-07 に撤去(不採用)。可読性はバッジ文字のグローだけで確保する */
}
@media (min-width: 601px) and (max-width: 1400px) {
	.panels {
		padding-bottom: 0;
	}
	.site-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		padding: 0 4rem;
		border-top: 3px solid var(--navy);
	}
	.site-footer::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -3px;
		height: 10px;
		pointer-events: none;
		background:
			linear-gradient(var(--navy), var(--navy)) left center / 10px 10px no-repeat,
			linear-gradient(var(--navy), var(--navy)) right center / 10px 10px no-repeat;
	}
	.closing__title,
	.closing__lead,
	.closing__btn {
		display: none;
	}
	.site-footer__copy {
		margin-top: 0;
	}
}
@media (min-width: 1401px) {
	/* 1401px以上は締めセクション(コピーライト含む)を出さない(FV に管理情報を出さない・2026-09-06) */
	.site-footer {
		display: none;
	}
}

/* ==========================================================
   600px以下:パネル間の余白を 2rem → 5rem に(2026-09-06)
   FV下端→最初のパネル(.panels の padding-top 5rem)と同じ値に揃え、縦のリズムを
   統一する。最後のパネル→締めセクション(.site-footer)も同じ 5rem(2026-09-06 に
   #works の 2rem 上書きを撤去。旧フッターの CTA 逃げ余白式は廃止)
   ========================================================== */
@media (max-width: 600px) {
	.panel {
		margin-bottom: 5rem;
	}
}

/* ==========================================================
   出演歴:検索UIの開閉・一覧のスクロール枠・SPの全画面シート(2026-09-12)
   件数表示(.c-count)は全帯で廃止。絞り込み中は「絞り込む」ボタン内の条件チップ再掲+
   ボタンの色+「クリア」で状態を示す。
   ・1401px以上:#works の .panel__body を縦 flex にし、ボタン行+検索UI(固定側)と
     .c-wlist(一覧のみスクロール)の2段。「もっと見る」20件ずつ(main.js)
   ・601〜1400:同じ構成で、.c-wlist は固定高さの枠。h1=一覧12件がちょうど収まる高さ
     (12×5.94rem+11×1.2rem)、上限 70vh)。60vh 基準の h2 案は撤回。
     枠の上下に薄いフェード(.c-wframe::before/::after。main.js が is-up/is-down を付ける)。
     overscroll-behavior は使わず、枠の底でページスクロールへ自然に移す
   ・600px以下:ページ内は .c-wpeek(最新10件+すべて見る)。.panel__body はシート
     (body.sp-works-open で fixed。お問い合わせモーダルと同じ位置・意匠・スクリム)
   ========================================================== */
/* ---- ボタン行(全帯) ---- */
.c-wtool {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-bottom: 1.6rem;
}
.c-wtool__btn {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.8rem;
	background: #fff;
	border: 0.22rem solid var(--navy);
	box-shadow: 0.3rem 0.3rem 0 var(--p-blue-line);
	padding: 0.8rem 1.4rem;
	font-size: 1.5rem;
	font-weight: 700;
	font-family: inherit;
	color: var(--ink);
	cursor: pointer;
	text-align: left;
}
.c-wtool__arrow {
	width: 0;
	height: 0;
	border-left: 0.5rem solid transparent;
	border-right: 0.5rem solid transparent;
	border-top: 0.6rem solid currentColor;
	transition: transform .2s ease;
}
.c-wtool__btn[aria-expanded="true"] .c-wtool__arrow {
	transform: rotate(180deg);
}
/* 絞り込み中:ボタンを青地に(条件チップの再掲は 2026-09-12 に撤去。表示は青地+「クリア」だけ) */
.c-wtool__btn.is-active {
	background: var(--p-blue);
	color: #fff;
	box-shadow: 0.3rem 0.3rem 0 var(--navy);
}
.c-wtool__clear {
	background: none;
	border: 0;
	padding: 0.6rem 0.4rem;
	font-size: 1.4rem;
	font-weight: 700;
	font-family: inherit;
	color: var(--p-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
/* 検索UIは既定で閉じる(ボタンで .is-open) */
.c-filters {
	display: none;
}
.c-filters.is-open {
	display: flex;
}
/* もっと見る/すべて見る */
.c-more {
	display: block;
	width: 100%;
	margin-top: 1.6rem;
	background: #fff;
	border: 0.25rem solid var(--navy);
	box-shadow: 0.4rem 0.4rem 0 var(--p-blue-line);
	padding: 1.2rem;
	font-size: 1.5rem;
	font-weight: 900;
	font-family: inherit;
	color: var(--navy);
	letter-spacing: 0.06em;
	cursor: pointer;
}
.c-more[hidden] {
	display: none;
}
/* SP 専用の要素は 601px 以上では出さない */
.c-wpeek,
.c-wsheet__head {
	display: none;
}
.c-wframe {
	position: relative;
}
.c-wlist {
	min-height: 0;
}

/* ---- 1401px以上:固定側(ボタン行+検索UI)+スクロール側(一覧のみ) ---- */
@media (min-width: 1401px) {
	#works .panel__body {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	#works .c-wsheet__body {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	#works .c-wtool {
		flex: none;
	}
	/* 検索UIを開いたとき、一覧に最低 21rem(1920×1080 で 210px=3件+間隔)を残す(2026-09-19。
	   SP シートと同じ方式)。検索UIは自然な高さ、足りないときは検索UI側が縮んで中だけスクロール。
	   以前は検索UIが flex:none で、チップが増えるほど一覧が縮んだ(用語+3 で 60px=約1件。
	   年のチップは毎年1つ増える)。閉じた状態は検索UIが display:none なので不変 */
	#works .c-filters {
		flex: 0 1 auto;
		min-height: 0;
	}
	#works .c-filters.is-open {
		overflow-y: auto;
	}
	#works .c-wframe {
		flex: 1 1 21rem;
		min-height: 21rem;
		display: flex;
		flex-direction: column;
	}
	#works .c-wlist {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		padding-right: 0.8rem; /* スクロールバーとカードの間 */
	}
}

/* ---- 601〜1400:固定高さの枠の中だけスクロール+上下フェード ---- */
@media (min-width: 601px) and (max-width: 1400px) {
	#works .c-wlist {
		/* h1:一覧12件ぶん。上限 70vh(2026-09-12 確定。1400×1080 で 78vh、1000×800 で 79vh と
		   大きすぎたため。601×1080=57vh・1000×1080=63vh は h1 のまま) */
		height: min(calc(12 * 5.94rem + 11 * 1.2rem), 70vh);
		overflow-y: auto;
		padding-right: 0.8rem;
	}
	.c-wframe::before,
	.c-wframe::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0.8rem;
		height: 3.2rem;
		pointer-events: none;
		opacity: 0;
		transition: opacity .2s ease;
		z-index: 1;
	}
	.c-wframe::before {
		top: 0;
		background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
	}
	.c-wframe::after {
		bottom: 0;
		background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
	}
	.c-wframe.is-up::before,
	.c-wframe.is-down::after {
		opacity: 1;
	}
}

/* ---- 600px以下:ページ内は最新10件+すべて見る、シートは .panel__body ---- */
@media (max-width: 600px) {
	#works .panel__body {
		display: none;
	}
	#works .c-wpeek {
		display: block;
		padding: 2.4rem 2rem 2.8rem;
	}
	.c-wpeek__all,
	.c-more {
		font-size: max(1.8rem, 16px);
		padding: 1.4rem;
	}
	.c-wtool__btn {
		font-size: max(1.8rem, 16px);
		padding: 0.8rem 1.4rem;
		border-width: 2px;
	}
	.c-wtool__clear {
		font-size: max(1.6rem, 14px);
	}
	/* シート(お問い合わせモーダルと同じ位置・枠・スクリム。z:75) */
	body.sp-works-open {
		overflow: hidden;
	}
	body.sp-works-open .sp-scrim {
		display: block;
	}
	body.sp-works-open .cta,
	body.sp-works-open .cta-badge {
		display: none;
	}
	/* SP の .panel は z-index:2 のスタッキングコンテキストなので、そのままだと fixed の
	   シートが FV・ナビ(z:65)・スクリム(z:70)の下に閉じ込められる。開いている間だけ
	   #works の z-index を auto にして、シートをルートの文脈(z:75)に出す */
	body.sp-works-open #works {
		z-index: auto;
	}
	/* シートは縦 flex(2026-09-12 改定):見出し+ボタン行+検索UI(開いたとき)を上部に固定し、
	   一覧(.c-wlist)だけがその下でスクロールする。シート自体はスクロールしない */
	body.sp-works-open #works .panel__body {
		display: flex;
		flex-direction: column;
		position: fixed;
		z-index: 75;
		left: 12px;
		right: 12px;
		top: 6svh;
		bottom: calc(12px + env(safe-area-inset-bottom));
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: #fff;
		border: 3px solid var(--navy);
	}
	body.sp-works-open .c-wsheet__body {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	body.sp-works-open .c-wtool,
	body.sp-works-open .c-filters {
		flex: none;
	}
	/* 検索UIが高すぎるとき(375×667 で 445px)は検索UI側が縮んでスクロールし、
	   一覧に最低 20rem(375px で 136px)を残す */
	body.sp-works-open .c-filters.is-open {
		flex: 0 1 auto;
		min-height: 0;
		overflow-y: auto;
	}
	body.sp-works-open .c-wframe {
		/* basis を 20rem にして「検索UIは自然な高さ、余りを一覧へ」。足りないときは
		   basis の大きい検索UI側が先に縮む(一覧は min-height で 20rem を確保) */
		flex: 1 1 20rem;
		min-height: 20rem;
		display: flex;
		flex-direction: column;
	}
	body.sp-works-open .c-wlist {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		padding-bottom: 2.8rem;
	}
	body.sp-works-open #works .panel__body:focus {
		outline: none;
	}
	body.sp-works-open #works .panel__body:focus-visible {
		outline: 3px solid var(--p-blue);
		outline-offset: 2px;
	}
	body.sp-works-open .c-wsheet__head {
		display: flex;
		flex: none;
		justify-content: space-between;
		align-items: flex-start;
	}
	body.sp-works-open .c-wsheet__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		background: #fff;
		color: var(--navy);
		border: 2px solid var(--navy);
		box-shadow: 2px 2px 0 rgba(255, 255, 255, .35);
		font-weight: 900;
		font-size: 15px;
		cursor: pointer;
		transform: none;
	}
	body.sp-works-open .c-wsheet__body {
		padding: 2rem 2rem 0;
	}
	/* ページ内(最新10件)の上の「絞り込む」:シートを検索UIを開いた状態で開く */
	#works .c-wpeek__filter {
		margin-bottom: 1.6rem;
	}
}

/* ==========================================================
   出演歴:準備中の表示(2026-09-29。設定「出演歴を公開する」がオフのとき)
   front-page.php が #works(.panel--soon)に .c-soon だけを出力する。一覧・絞り込み・
   「絞り込む」「すべて見る」・SP のシートは HTML に無い(display:none ではなくテンプレートで分岐)。
   窓の本文域の上下左右中央に「3ドット(青・紫・ピンク=見出しの2ドットの延長)/
   COMING SOON(ドット書体)+点滅カーソル/出演歴は随時更新予定です」。
   点滅は opacity のみ(.panel__blink と同じ toui-blink。reduced-motion の全体ルールで停止)。
   ・1401px以上:パネル(縦 flex・高さ固定)の本文域いっぱいに広げて中央
   ・601〜1400/600px以下:縦積みの流れの中なので最低高を持たせて中央
   ========================================================== */
.c-soon {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 3.4rem 4rem; /* .panel__body と同じ */
	text-align: center;
}
.c-soon__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}
.c-soon__dots {
	display: flex;
	gap: 0.8rem;
	margin-bottom: 2.4rem;
}
.c-soon__dots i {
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	background: var(--p-blue);
}
.c-soon__dots i:nth-child(2) {
	background: var(--p-purple);
}
.c-soon__dots i:nth-child(3) {
	background: var(--p-pink);
}
.c-soon__en {
	margin: 0;
	/* 文字と右のカーソルを合わせた全体を中央に置く(2026-10-18)。 */
	padding-left: 0;
	font-family: "Pixelify Sans", "DotGothic16", monospace;
	font-weight: 700;
	font-size: 4.2rem;
	line-height: 1;
	letter-spacing: .12em;
	color: var(--navy);
	white-space: nowrap;
}
.c-soon__cursor {
	display: inline-block;
	width: .5em;
	height: .72em; /* ベースラインから大文字の高さぶん */
	background: var(--p-blue);
	animation: toui-blink 1.2s steps(1) infinite;
}
.c-soon__msg {
	margin: 2.2rem 0 0;
	font-size: max(1.8rem, 15px); /* 601〜1400 と低い画面で 15px を割らない */
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--navy);
}
/* 折り返すときは「出演歴は/随時更新予定です」の間だけ */
.c-soon__nw {
	display: inline-block;
	white-space: nowrap;
}
@media (min-width: 601px) and (max-width: 1400px) {
	.c-soon {
		min-height: 40rem;
	}
}
@media (max-width: 600px) {
	.c-soon {
		min-height: 38rem;
		padding: 3.2rem 2rem 3.6rem;
	}
	.c-soon__dots {
		gap: max(0.8rem, 5px);
		margin-bottom: 2.6rem;
	}
	.c-soon__dots i {
		width: max(1.2rem, 8px);
		height: max(1.2rem, 8px);
	}
	.c-soon__en {
		font-size: 4.6rem;
	}
	.c-soon__msg {
		margin-top: 2.4rem;
		font-size: max(2.2rem, 14px);
	}
}

/* プロフィール窓のタイトルチップ(SP・2026-09-12):16→14px。検索チップ(.c-chip--filter)は別ルール。
   padding・間隔を詰める案(t1)は撤回 */
@media (max-width: 600px) {
	.c-prof .c-chip {
		font-size: max(1.6rem, 14px);
	}
}

/* ==========================================================
   固定ページ(page.php:プライバシーポリシーなど)2026-09-12
   本サイトのトーン(濃紺の帯・白地・見出しの四角)に合わせた最小限の1カラム。
   全帯共通。FV・固定ナビ・固定CTA は出ない(front-page.php にしかない)
   ========================================================== */
.page {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var(--ink);
	font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.page__head {
	background: var(--navy);
	padding: 1.6rem max(2.4rem, 4vw);
}
.page__home {
	color: #fff;
	font-weight: 900;
	font-size: max(1.8rem, 16px);
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
}
.page__home-en {
	margin-left: 0.6em;
	font-family: "Pixelify Sans", "DotGothic16", monospace;
	font-weight: 500;
	font-size: 0.8em;
	color: var(--cta);
	letter-spacing: 0.1em;
}
.page__main {
	flex: 1;
	width: min(760px, 100% - 2 * max(2.4rem, 4vw));
	margin: 0 auto;
	padding: max(3.2rem, 24px) 0 max(4rem, 32px);
}
.page__title {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 max(2.4rem, 20px);
	font-size: max(2.6rem, 22px);
	font-weight: 900;
	letter-spacing: 0.04em;
}
.page__title::before {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.7em;
	background: var(--cta);
	border: 0.22rem solid var(--navy);
}
.page__body {
	font-size: max(1.5rem, 14px);
	line-height: 1.9;
	letter-spacing: 0.03em;
}
.page__body h2 {
	margin: max(2.8rem, 24px) 0 max(1rem, 8px);
	padding-left: 1.2rem;
	border-left: 0.4rem solid var(--p-blue);
	font-size: max(1.8rem, 16px);
	font-weight: 900;
	line-height: 1.5;
}
.page__body p {
	margin: 0 0 max(1.2rem, 10px);
}
.page__body a {
	color: var(--p-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.page__body .privacy-date {
	margin-top: max(3rem, 24px);
	color: #666;
}
.page__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
	background: var(--navy);
	color: rgba(255, 255, 255, .75);
	padding: 2.4rem max(2.4rem, 4vw) calc(2.4rem + env(safe-area-inset-bottom, 0px));
	font-size: max(1.2rem, 12px);
	letter-spacing: 0.08em;
}
.page__back {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* プライバシーポリシーへのリンク(2026-09-12)
   ・締めセクション(600px以下)/縮退帯(601〜1400):コピーライトと同じ行
   ・フォーム内(全帯。1401px以上はコンタクトパネル):スクロール枠の直下に全文リンク */
.site-footer__privacy {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	margin-left: 1em;
}
.c-privacy-link {
	grid-column: 1 / -1;
	margin: -0.4rem 0 0;
	font-size: max(1.3rem, 12px);
}
.c-privacy-link a {
	color: var(--p-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ==========================================================
   プライバシーポリシーのモーダル(.pmodal)2026-09-12
   フッター/フォーム内のリンク(.js-privacy)から main.js が開く(body.privacy-open)。
   中身は固定ページ本文(.page__body の見出し・本文スタイルを共用)。
   601px 以上=中央の窓(最大 760px・高さ最大 80svh)、600px 以下=お問い合わせモーダルと
   同じ全画面シート。z:80(出演歴シート・お問い合わせモーダル 75 より上。フォーム内の
   リンクから開いたときに手前に来る)。JS 無効時はリンクが固定ページへ遷移する
   ========================================================== */
.pmodal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: none;
}
body.privacy-open .pmodal {
	display: block;
}
body.privacy-open {
	overflow: hidden;
}
.pmodal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}
.pmodal__win {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(760px, 100% - 2 * max(2.4rem, 24px));
	max-height: 80svh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 0.3rem solid var(--navy);
	box-shadow: 0.8rem 0.8rem 0 var(--navy);
	font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
	color: var(--ink);
}
.pmodal__win:focus {
	outline: none;
}
.pmodal__win:focus-visible {
	outline: 3px solid var(--p-blue);
	outline-offset: 2px;
}
.pmodal__head {
	flex: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.pmodal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: #fff;
	color: var(--navy);
	border: 2px solid var(--navy);
	box-shadow: 2px 2px 0 rgba(255, 255, 255, .35);
	font-weight: 900;
	font-size: 15px;
	cursor: pointer;
	transform: none;
}
.pmodal__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: max(2.4rem, 20px) max(2.8rem, 22px) max(3rem, 24px);
}
.pmodal__body h2:first-child {
	margin-top: 0;
}
@media (max-width: 600px) {
	.pmodal__win {
		left: 12px;
		right: 12px;
		top: 6svh;
		bottom: calc(12px + env(safe-area-inset-bottom));
		transform: none;
		width: auto;
		max-height: none;
		border-width: 3px;
		box-shadow: none;
	}
	.pmodal__body {
		padding: 2rem 2rem 2.8rem;
	}
	/* モーダル中は固定CTA・バッジを隠す(お問い合わせモーダル・出演歴シートと同じ扱い) */
	body.privacy-open .cta,
	body.privacy-open .cta-badge {
		display: none;
	}
}

/* 固定ページ(page.php)を窓意匠に(2026-09-12 改定):ヘッダー帯は無し。上に「トップへ戻る」、
   本文は .panel と同じ濃紺枠の窓(見出し帯+本文)、下に濃紺の帯(トップへ戻る+コピーライト) */
.page__head {
	display: none;
}
.page__top {
	display: inline-block;
	margin-bottom: max(1.6rem, 14px);
	color: var(--p-blue);
	font-size: max(1.4rem, 13px);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.page__article {
	background: #fff;
	border: 0.3rem solid var(--navy);
	box-shadow: 0.8rem 0.8rem 0 var(--navy);
}
.page__article .page__title {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 1.6rem 2.4rem;
	background: var(--navy);
	color: #fff;
	font-size: max(2rem, 18px);
	letter-spacing: 0.06em;
}
.page__article .page__title::before {
	width: 0.7em;
	height: 0.7em;
	background: var(--cta);
	border: 0;
}
.page__article .page__body {
	padding: max(2.4rem, 20px) max(2.8rem, 22px) max(3rem, 24px);
}
.page {
	background: url("../img/bg-tile-sp.svg") center top / 100% auto repeat-y #fff;
}
/* モーダル見出し:600px 以下は「プライバシーポリシー」が折り返すため英字ラベルを消し、1行に */
@media (max-width: 600px) {
	.pmodal__head .panel__title strong {
		white-space: nowrap;
	}
	.pmodal__head .panel__en {
		display: none;
	}
}

/* ==========================================================
   受付中バッジの折り返し位置(2026-09-12):入れ子マークアップ
   .cta-badge__l > 「ゲーム大会実況・」 + .cta-badge__l2 > (.cta-badge__en「MC」 + 空白 + .cta-badge__w「依頼受付中」)
   ・600px以下:.cta-badge__l2 を flex にして「ゲーム大会実況・」/「MC 依頼受付中」の2段(従来どおり)
   ・601px以上:折れるのは「MC」と「依頼」の間の空白だけ(.cta-badge__l nowrap = 「・」と「MC」の間も
     折れない。.cta-badge__w nowrap = 「依頼受付中」の途中で折れない)。601〜700px は CTA 幅 205px で
     1行に入らないため2行(「ゲーム大会実況・MC」/「依頼受付中」)、701px以上は1行
   ========================================================== */
@media (max-width: 600px) {
	.cta-badge__l {
		text-align: center;
	}
	.cta-badge__l2 {
		/* MC後の半角空白はflexの空白処理で除き、文字の字間だけを残す。 */
		display: flex;
		justify-content: center;
	}
}
@media (min-width: 601px) {
	.cta-badge__l {
		white-space: nowrap;
	}
	.cta-badge__l2 {
		white-space: normal;
	}
	.cta-badge__w {
		white-space: nowrap;
	}
}

/* 1401px 以上:FV を .fv-bg の縦中央に(--fvh が 100svh より短いときだけ効く。2026-09-13)。
   背景は .fv-bg に貼り替えて上下の帯も同じ画像で埋める(.fv は透明) */
@media (min-width: 1401px) {
	.fv-bg {
		min-height: 100svh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: url("../img/back_ver2.webp") center top / cover no-repeat;
	}
	.fv {
		flex: none;
		background: none;
	}
}

/* ==========================================================
   1401px以上の装飾は 1.2倍(2026-10-01 確定。1.4倍以上は右端余白・コントローラーとハンドルの近接で不採用)。
   幅を 1.2倍にし、各帯の位置式(left / bottom / top とクランプ)は触らず、マイナスの margin で
   「増えた分の半分」ずつ外へ広げる=中心は拡大前と同じ。
   幅(旧→新):グローブ 9.08→10.896/剣 5.76→6.912/コントローラー 7.92→9.504/ハンドル 8.28→9.936/
   ボール 5.36→6.432/車 9→10.8rem。margin は 左右=−0.1×旧幅、上下=−0.1×旧高(旧高=旧幅×画像比率)。
   1400px 以下(601〜1400・SP)は変更なし。
   調整は2つ:
   A. 右列(コントローラー・ボール・車)が「右端 20px」で止まっている比率(1700px 以下かつ幅÷高さ ≤ 1.74)
      では、右端を固定して左へ広げる(margin-left=−0.2×旧幅・margin-right=0。拡大で 20px を割らないように)
   E. 1601〜1700 かつ幅÷高さ ≤ 1.7:ハンドルを 1.1rem 下げる(コントローラーとの縦の重なりを解消)
   ========================================================== */
@media (min-width: 1401px) {
	.deco--glove      { width: 10.896rem; margin: -0.908rem; }
	.deco--sword      { width: 6.912rem;  margin: -0.66rem -0.576rem; }
	.deco--controller { width: 9.504rem;  margin: -0.668rem -0.792rem; }
	.deco--handle     { width: 9.936rem;  margin: -0.796rem -0.828rem; }
	.deco--ball       { width: 6.432rem;  margin: -0.52rem -0.536rem; }
	.deco--car        { width: 10.8rem;   margin: -0.736rem -0.9rem; }
}
/* A */
@media (min-width: 1401px) and (max-width: 1700px) and (max-aspect-ratio: 174/100) {
	.deco--controller { margin-left: -1.584rem; margin-right: 0; }
	.deco--ball       { margin-left: -1.072rem; margin-right: 0; }
	.deco--car        { margin-left: -1.8rem;   margin-right: 0; }
}
/* E */
@media (min-width: 1601px) and (max-width: 1700px) and (max-aspect-ratio: 17/10) {
	.deco--handle { margin-top: 0.304rem; margin-bottom: -1.896rem; }
}

/* ==========================================================
   2026-10-02 確定(?bd / ?txt の比較を経て既定に。切替は撤去)
   ========================================================== */
/* 受付中バッジ(1401px 以上):文字を 0.9倍(1920×1080 で 24→21.6px)。箱の幅(=CTA 幅)と位置は据え置き、中の文字だけ
   縮める。字間は em で掛け直す(親の 0.08em は px で継承されるため)。
   斜線(::before/::after)も同じ倍率(3.6→3.24rem)。0.8倍(b2)は斜線と文字が離れて見えるため不採用 */
@media (min-width: 1401px) {
	.cta-badge__txt { font-size: 0.9em; letter-spacing: 0.04em; } /* 2026-10-05:字間 0.08→0.04em(バッジを Noto に) */
	.cta-badge { --bsl-k: 0.9; } /* 2026-10-06:斜線と文字の間は文字(0.9em)基準 */
	.cta-badge::before,
	.cta-badge::after { height: 3.24rem; }
}
/* キャッチを上へ寄せる(吹き出し撤去で空いた領域の分)。動かすのはキャッチだけで、文字サイズ・肩書き以下・装飾・
   SP の --sp-catch-t(文字サイズの逆算や装飾の帯の基準)は据え置くため translate で上げる。
   空いた領域=キャッチ上端 − 旧吹き出しの上端(2026-10-02 実測):SP=--sp-catch-t − 5.83rem(375〜600 で 76〜82px)/
   601〜1399=9.6rem/1400〜1550=7.6rem/1551〜1700=13rem/1701〜=12.45rem。
   その半分(t1)を全帯に。1401〜1550 だけ全部(t2):上の余白と肩書きまでの間が均等に近いため。
   t2 を全帯にしない理由:1700px 以上でキャッチ1行目がメニューに重なる */
@media (max-width: 600px) { .fv__catch { translate: none; } } /* 2026-10-04:SP は上端を 48px に固定したので上寄せはしない */
@media (min-width: 601px) and (max-width: 1399px) { .fv__catch { translate: 0 -4.8rem; } }
@media (min-width: 1400px) and (max-width: 1400px) { .fv__catch { translate: 0 -3.8rem; } }
/* 1401px 以上は上の上寄せ(1401〜1550=7.6rem・1551〜1700=6.5rem・1701〜=6.225rem)から、キャッチを下へ戻す量を引く(2026-10-04 確定。
   ?cdn=d1|d2 の比較を経て):1401〜1700=3rem(d2)/1920 以上=1.5rem(d1)/1701〜1919=幅に応じて 3rem→1.5rem(1700 と 1920 で段差なし) */
@media (min-width: 1401px) and (max-width: 1550px) { .fv__catch { translate: 0 -4.6rem; } }
@media (min-width: 1551px) and (max-width: 1700px) { .fv__catch { translate: 0 -3.5rem; } }
@media (min-width: 1701px) { .fv__catch { translate: 0 calc(-3.225rem - 1.5rem * clamp(0, tan(atan2(var(--toui-vw) - 1700px, 220px)), 1)); } }

/* 位置調整が済むまで隠す(読み込み時に動いて見せないため。2026-10-03)。html.fv-adj は head のインライン(JS が動くときだけ)。
   テキスト群(601〜1400px)は FV 直後のインラインが最初の描画より前に計算して html.fv-adj-text を付けるので、実際に隠れて
   描画されることはない(保険)。1250〜1400px の3つのアイコンは写真の読み込み後に置くので、それまで隠れる(html.fv-adj-icons)。
   JS 無効時は隠れない */
/* テキスト群は全帯(2026-10-05。紹介文の差し替えで、600px 以下・1400px 以上でも名前ブロックを紹介文の伸びに合わせて上へずらす
   (FV 直後のインラインの introFit)ようになり、低速回線で HTML が途中まで届いた段階のずらす前の位置が 375×667 で 18 フレーム見えたため) */
html.fv-adj:not(.fv-adj-text) .fv__catch,
html.fv-adj:not(.fv-adj-text) .fv__role,
html.fv-adj:not(.fv-adj-text) .fv__name,
html.fv-adj:not(.fv-adj-text) .fv__en,
html.fv-adj:not(.fv-adj-text) .fv__intro { visibility: hidden; }
@media (max-width: 1400px) {
	html.fv-adj:not(.fv-adj-text) .photo { visibility: hidden; } /* 写真も(2026-10-04。1000px 以下の自動拡大の前の大きさが低速回線で数フレーム見えたため。2026-10-05 に 600px 以下も=縦長の SP で写真を上へ寄せる前の位置が低速回線で 9 フレーム見えたため) */
}
/* 600px 以下:写真を 3rem 左へ(画面の中央寄り。2026-10-04 確定。?spx=x2 の比較を経て)。大きさ(650px 以下の 1.1倍)と頭頂の高さは不変。
   右へはみ出していた分が画面内に戻る(375〜430 で 20〜22px)。キャッチの大きさは FV 直後のインラインが人物の輪郭で計算し直す */
@media (max-width: 600px) {
	.photo { translate: -3rem 0; }
}
/* 1400px 以下(SP を含む):装飾アイコン(グローブ・剣・コントローラー・ハンドル・ボール・車)は全て非表示(2026-10-04。同日に
   1000px 以下から拡大)。main.js の配置計算もこの帯では行わない(1401px 以上だけ)。以前の SP の帯U/L/R と幅・高さの閾値、
   601〜1400 の配置ルール(1250〜1400 の文字の右への配置・1001〜1249 の剣・グローブの判定など)は撤去 */
@media (max-width: 1400px) {
	.fv .deco { display: none; }
}
/* 1401px 以上:装飾アイコンは main.js がエリアの原則で置き終わるまで隠す(写真の読み込み後=約0.1秒)。担当エリアに入らない
   アイコンは隠したまま(data-fv-hide) */
@media (min-width: 1401px) {
	html.fv-adj:not(.fv-adj-icons) .deco,
	html.fv-arranging .deco,
	html.fv-adj .deco[data-fv-hide] { visibility: hidden; }
}

/* ==========================================================
   FV 調整一式(2026-10-04 確定。?ph / ?mid / ?gap / ?catch / ?sp の比較を経て既定に)
   ========================================================== */
/* A:1401〜1919px の写真を 0.92倍(a1)。顔の中心(写真左端+62%)と頭頂を固定して縮める(上半身が多く見える。
   1620×1080 で草より上に写る割合 69.7→84.1%)。1501〜1663 の 1.15倍拡大(--ps)は廃止(上の --ps は 1 に)。1920px 以上は不変 */
@media (min-width: 1401px) and (max-width: 1919px) {
	.photo { scale: 0.92; transform-origin: 62% 0.5%; }
}
/* B1:1150〜1400px のテキスト群を 0.9倍(s2)。--cf(文字と位置の基準)とキャッチの 6vw 上限・--d1 に掛ける。
   1100→1150 で 1 から徐々に、1300→1400 で 1 へ戻す(1149・1401 との段差を作らない) */
@media (min-width: 601px) and (max-width: 1399px) {
	.fv {
		--mkf: calc(1 - 0.1 * clamp(0, tan(atan2(var(--toui-vw) - 1100px, 50px)), 1) * clamp(0, tan(atan2(1400px - var(--toui-vw), 100px)), 1));
		--cf: calc(max(min(9.603rem, 5.247vw), 39.6px) * var(--mkf));
		--d1: calc(1.5255 * var(--cf) - 1.268 * min(1.21 * var(--cf), 6vw * var(--mkf)));
	}
	.fv .fv__catch { font-size: min(calc(1.21 * var(--cf)), calc(6vw * var(--mkf))); }
}
/* B2:1000px 以下で肩書きを 0.75rem 上へ(名前との間を広げる。4〜11→10〜17px)。1000→1050 で 0 へ */
@media (min-width: 601px) and (max-width: 1049px) {
	.fv .fv__role { translate: 0 calc(-0.75rem * clamp(0, tan(atan2(1050px - var(--toui-vw), 50px)), 1)); }
}
/* B3:850px 以下でキャッチを 1.1倍(c1w)。幅の上限(52.5vw)を外して2行のまま。850→900 で 1 へ。上端は固定。
   頭部の外接枠(写真の上 28.4%・左端 47.07%)に掛かるときは、FV 直後のインラインが --ck を掛からない倍率まで下げる(下限 1.0) */
@media (min-width: 601px) and (max-width: 899px) {
	/* 2026-10-06 確定(?cbig=b2):750px 以下は 1.2倍(旧 1.1倍)、750→800 で 1.1倍へ戻す(段差なし)。頭部の輪郭から 8px・1行目の右端を画面の
	   右から 16px 以上、を守れないときは FV 直後のインライン(catchHead)が下げる */
	.fv { --ck: calc(1.1 + 0.1 * clamp(0, tan(atan2(800px - var(--toui-vw), 50px)), 1)); }
	.fv .fv__catch { max-width: none; font-size: calc(min(calc(1.21 * var(--cf)), calc(6vw * var(--mkf, 1))) * (1 + (var(--ck) - 1) * clamp(0, tan(atan2(900px - var(--toui-vw), 50px)), 1))); }
}
/* D:650px 以下の写真を 1.1倍(d2)。頭頂と頭の左端(写真の 0.49%・47.07%)を固定して右下へ広げる。650→700 で 1 へ */
@media (max-width: 699px) {
	.photo { scale: calc(1 + 0.1 * clamp(0, tan(atan2(700px - var(--toui-vw), 50px)), 1)); transform-origin: 47.07% 0.49%; }
}

/* 横向きのスマホ・折りたたみ(2026-10-07 確定・?land=ab。601〜1399px・高さ 600px 以下・横長 4:3 以上):判定と html.fv-land・--land-k・
   --land-cta・--fvh の上書きは FV 直後のインライン(front-page.php の shift)。
   --cf(文字と縦の位置の基準)とキャッチの 6vw 上限・肩書き/ローマ字/紹介文の 14px の床を --land-k 倍(0.85〜1。床の下限 11px)に。
   受付中バッジが FV 上端から切れるときは CTA とバッジを --land-cta だけ下げる(バッジは CTA の上端から 10px 上の下端基準のまま) */
@media (min-width: 601px) and (max-width: 1399px) {
	html.fv-land .fv {
		--cf: calc(max(min(9.603rem, 5.247vw), 39.6px) * var(--mkf, 1) * var(--land-k, 1));
		--d1: calc(1.5255 * var(--cf) - 1.268 * min(1.21 * var(--cf), 6vw * var(--mkf, 1) * var(--land-k, 1)));
	}
	html.fv-land .fv .fv__catch {
		font-size: calc(min(calc(1.21 * var(--cf)), calc(6vw * var(--mkf, 1) * var(--land-k, 1))) * (1 + (var(--ck, 1) - 1) * clamp(0, tan(atan2(900px - var(--toui-vw), 50px)), 1)));
	}
	html.fv-land .fv__role { font-size: max(calc(0.268 * var(--cf)), 11px, calc(14px * var(--land-k, 1))); }
	html.fv-land .fv__en-name { font-size: max(calc(0.278 * var(--cf)), 11px, calc(14px * var(--land-k, 1))); }
	html.fv-land .fv__intro { font-size: max(calc(0.247 * var(--cf)), 11px, calc(14px * var(--land-k, 1))); }
	html.fv-land .cta { top: calc(8rem + var(--land-cta, 0px)); }
	html.fv-land .cta-badge { bottom: calc(var(--fvh) - 8rem - var(--land-cta, 0px) + 10px); }
}

/* 文字の白いにじみ+白いもや(2026-10-08 確定・?tglow=g8。g2〜g7 と比較、切替は撤去。全帯):背景の模様が文字に重なって読みにくい件。
   対象=キャッチ・肩書き・名前・TOUI OKAWA・紹介文・FV のメニュー(.menu。文字とアイコン)。SP の下部ナビ .sp-nav・追従ヘッダー .stickybar__nav・
   バッジ・CTA は対象外。位置・大きさ・色・書体は変えない(text-shadow / filter / もやはレイアウトに影響しない)。
   ① にじみ:text-shadow 2層(.33u・.67u、白 α .95/.9。u=min(1.5em,48px)=文字の大きさに比例・大きな文字は 48px で頭打ち)。
     グラデーション文字(キャッチの「実況」「熱狂」・TOUI OKAWA。background-clip:text)とメニューのアイコン(SVG の img)は text-shadow が効かない/
     字の中に透けるので filter: drop-shadow 2層(.25u・.5u、α .9/.75)で同じ見え方に。
     強い案(g6・g7:かたまりごとの drop-shadow 5層・64/96px)は、下のかたまりの大きな白い影が上の文字に重なって黒が灰色に寄る・パネル開閉で
     最大 0.1〜0.15 秒止まるため不採用。
   ② もや:文字の3つのかたまりとメニュー(アイコンを含む)の外形+48px に白 α .4(.fv__blur。位置・大きさは FV 直後のインラインの blurPos)。
     ふちは縦横 48px のグラデーションで消す。z-index 2=背景より上・アイコン(3)・写真(4)・文字(5)より下(SP では人物の後ろに隠れる)。
     下端は草の穂先まで、メニューのもやは CTA・バッジの左端で止める。1401px 以上のパネル表示中は文字のもやだけ消す(メニューのもやは残す) */
.fv__catch, .fv__role, .fv__name, .fv__intro, .menu a, .fv__catch-em, .fv__en-name { --tg-u: min(1.5em, 48px); }
.fv__catch, .fv__role, .fv__name, .fv__intro, .menu a {
	text-shadow: 0 0 calc(.33 * var(--tg-u)) rgba(255, 255, 255, .95), 0 0 calc(.67 * var(--tg-u)) rgba(255, 255, 255, .9);
}
/* グラデーション文字(.fv__catch-em は親 .fv__catch の text-shadow を継ぐので明示的に none)とメニューのアイコン */
.fv__catch-em, .fv__en-name { text-shadow: none; }
.fv__catch-em, .fv__en-name, .menu .menu__icon {
	filter: drop-shadow(0 0 calc(.25 * var(--tg-u)) rgba(255, 255, 255, .9)) drop-shadow(0 0 calc(.5 * var(--tg-u)) rgba(255, 255, 255, .75));
}
.fv__blur {
	display: block;
	position: absolute;
	z-index: 2;
	pointer-events: none;
	background: rgba(255, 255, 255, .4);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(180deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(180deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	mask-composite: intersect;
	opacity: 1;
	transition: opacity .5s var(--ease-pop) .28s;
}
@media (min-width: 1401px) {
	body.is-panel .fv__blur:not(.fv__blur--menu) {
		opacity: 0;
		transition: opacity .5s var(--ease-pop);
	}
}

/* メニュー(アイコン含む)の後ろのもやは強め(2026-10-08 確定・?mnu=m3。m1=範囲だけ・m2=濃さだけと比較、切替は撤去):範囲は外形+80px(blurPos)、
   ふちの消える幅も 80px(帯に見えないように)、濃さ α .6(文字のかたまりは 48px・α .4 のまま)。右端は CTA・バッジの左端で止める */
.fv__blur--menu {
	background: rgba(255, 255, 255, .6);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent), linear-gradient(180deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent), linear-gradient(180deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}

/* FV より下の文字の最小サイズ(2026-10-08 確定・?fmin=on。切替は撤去):読ませる文字は 601px 以上=14px・600px 以下=12px。
   601px 以上は rem が画面の高さに連動(min(幅基準, FV 高÷107.2))し、768×1024 で 7.6px・1000×800 で 7.46px・1500×900 で 8.4px になるため、
   1.5rem の項目名が 11〜13px まで縮んでいた。今の指定(Xrem)を max(Xrem, 下限) にする=下限より大きい所(1920×1080 など)は不変。
   文字が自分で大きさを持たず親から継ぐもの(チェックの選択肢の文字)は max(1em, 下限)。
   例外(小さくてよい):※ の注記 .c-formnote・必須/任意 .c-badge(601px 以上 10px のまま)・
   601〜1400 のフッターのコピーライト(12px のまま)・パネル見出し横の英字 .panel__en(下限 10px。下の別ルール)。
   プレースホルダーは入力欄と同じ大きさ(独自の指定なし)。閉じる ✕ は記号の大きさのまま、押せる範囲だけ 44×44px に(下の別ルール)。
   600px 以下の送信完了メッセージは 2026-09-30 に 14px の下限を入れたつもりが、後ろにある共通の指定(1.5rem)に上書きされて 10px だった=ここで直す */
@media (min-width: 601px) {
	.c-status__lv,
	.c-status__kana { font-size: max(1.5rem, 14px); }
	.c-status__row { font-size: max(1.6rem, 14px); }
	.panel .c-h3 { font-size: max(1.8rem, 14px); }
	.c-msg--intro { font-size: max(1.6rem, 14px); }
	.c-field__label { font-size: max(1.5rem, 14px); }
	.c-field input,
	.c-field textarea,
	.c-form input[type="text"],
	.c-form input[type="email"],
	.c-form input[type="tel"],
	.c-form textarea { font-size: max(1.6rem, 14px); }
	.c-form .wpcf7-list-item-label { font-size: max(1em, 14px); }
	.c-submit,
	.c-form input[type="submit"] { font-size: max(1.8rem, 14px); }
	.c-mailnote { font-size: max(1.4rem, 14px); }
	.c-privacy-link { font-size: max(1.3rem, 14px); }
	.c-form .wpcf7-response-output { font-size: max(1.5rem, 14px); }
	.c-form .wpcf7-not-valid-tip { font-size: max(1.3rem, 14px); }
}
@media (max-width: 600px) {
	.c-form .wpcf7-list-item-label { font-size: max(1em, 12px); }
	.c-form .wpcf7-not-valid-tip { font-size: max(1.3rem, 12px); }
	.c-form .wpcf7-response-output { font-size: max(2rem, 14px); }
}

/* FV より下の文字の最小サイズ・判断待ちだった項目(2026-10-08 確定)
   ・プライバシーポリシーのスクロール枠(本文・見出し・リンク・制定日):601px 以上 14px・600px 以下 12px。枠の高さは変えない(スクロールで読む)
   ・601〜1400 のフッター:ポリシーへのリンクだけ 14px(コピーライトは 12px のまま)
   ・パネル見出し横の英字(PLAYER PROFILE・QUEST LOG・CONTACT・PRIVACY POLICY):下限 10px(全帯)。10px 以上の画面は不変
     (1401〜1600 は 1.1rem、それ以外は 1.3rem のまま max)。見出しの和文とは縦の中心でそろう(.panel__title は align-items:center) */
@media (min-width: 601px) {
	.c-privacy-box { font-size: max(1.4rem, 14px); }
	.c-privacy-box h2 { font-size: max(1.5rem, 14px); }
}
@media (max-width: 600px) {
	.c-privacy-box { font-size: max(1.4rem, 12px); }
	.c-privacy-box h2 { font-size: max(1.5rem, 12px); }
}
@media (min-width: 601px) and (max-width: 1400px) {
	.site-footer__privacy { font-size: max(1.4rem, 14px); }
}
.panel__en { font-size: max(1.3rem, 10px); }
@media (min-width: 1401px) and (max-width: 1600px) {
	.panel__en { font-size: max(1.1rem, 10px); }
}
/* 閉じる ✕(パネル・ポリシーのモーダル):記号と枠の大きさ(25〜34px)は変えず、押せる範囲だけ中心から 44×44px に広げる(透明の ::before) */
.panel__close { position: relative; }
.panel__close::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100%, 44px);
	height: max(100%, 44px);
	translate: -50% -50%;
}



/* 読み込み時の最初の表示だけテキスト群の transition を止める(2026-10-12)。1401px 以上のテキスト群にはパネルから戻るときの
   visibility の遅延(0.28 秒)があり、読み込み時の「隠す→見せる」にも効いて表示が 0.28 秒遅れていた。html.fv-ready は最初の表示
   (html.fv-adj-text)の2フレーム後に head のインラインが付ける=パネルの開閉の動きは従来どおり。JS 無効時は fv-adj が付かないので対象外 */
html.fv-adj:not(.fv-ready) .fv__catch,
html.fv-adj:not(.fv-ready) .fv__role,
html.fv-adj:not(.fv-ready) .fv__name,
html.fv-adj:not(.fv-ready) .fv__en,
html.fv-adj:not(.fv-ready) .fv__intro { transition: none !important; }
@media (min-width: 1401px) {
	html.fv-hash-panel .fv__catch,
	html.fv-hash-panel .fv__role,
	html.fv-hash-panel .fv__name,
	html.fv-hash-panel .fv__en,
	html.fv-hash-panel .fv__intro { visibility: hidden; } /* 直リンク(#profile 等)で main.js がパネルを開くまで(2026-10-12) */
}

/* ---- キャッチ(2026-10-13 確定):画像のパーツ(一戦・を・熱戦・に・!)を箱(.fv__catch-box)の中に絶対配置 ----
   文言「一戦を熱戦に!」(2026-10-15 に読点と引用符を削除)。パーツの大きさ(--w・--h)と位置(--l-o・--t-o ほか)・箱の大きさ(--cw-*・--ch-*)は em(=キャッチの文字の大きさ)で、
   front-page.php が inc/catch-layout.php(dev/fire/build-parts.php が生成)から style 属性に入れる。o=1401px 以上の1行・p=601〜1400 の2行・
   s=600px 以下の2行。大きさの決め方(.fv__catch の font-size)はインラインの catFit・spCatch。白いにじみ(g8)は文字と同じ drop-shadow 2層
   (.25u・.5u、u=min(1.5em,48px))。width/height 属性で読み込み前から場所が確保される */
.fv .fv__catch--img { max-width: none; --tg-u: min(1.5em, 48px); }
.fv__catch-box { display: block; position: relative; width: calc(var(--cw-p) * 1em); height: calc(var(--ch-p) * 1em); }
.fv__catch-part { display: inline; }
.fv__catch-part img {
	position: absolute;
	display: block;
	margin: 0;
	max-width: none;
	width: calc(var(--w) * 1em);
	height: calc(var(--h) * 1em);
	left: calc(var(--l-p) * 1em);
	top: calc(var(--t-p) * 1em);
	filter: drop-shadow(0 0 calc(.25 * var(--tg-u)) rgba(255, 255, 255, .9)) drop-shadow(0 0 calc(.5 * var(--tg-u)) rgba(255, 255, 255, .75));
}
@media (min-width: 1401px) {
	.fv__catch-box { width: calc(var(--cw-o) * 1em); height: calc(var(--ch-o) * 1em); }
	.fv__catch-part img { left: calc(var(--l-o) * 1em); top: calc(var(--t-o) * 1em); }
}
@media (max-width: 600px) {
	.fv__catch-box { width: calc(var(--cw-s) * 1em); height: calc(var(--ch-s) * 1em); }
	.fv__catch-part img { left: calc(var(--l-s) * 1em); top: calc(var(--t-s) * 1em); }
}
/* JS 無効のとき(html.fv-adj が無い=頭部との距離を測る spCatch が動かない)の 600px 以下:CSS の式の大きさだと 375×667・390×667 で
   画像のパーツが頭部に接するので、小さくする(2026-10-13 は 0.85 倍。2026-10-14 の e1 で熱戦が 1.2倍になり 0.85 倍でも 375×667・390×667 で
   頭部に接したため 0.78 倍=頭部まで 18px 以上(375×667 18・390×667 19・390×844 19・430×667 29px)) */
@media (max-width: 600px) {
	html:not(.fv-adj) .fv .fv__catch--img { font-size: calc(var(--sp-catch-f) * 0.78); }
}

/* SPの下部文字群はA案の白背景で可読性を補助し、文字自体の白いにじみを外す。 */
@media (max-width: 600px) {
	.fv__role, .fv__name, .fv__intro { text-shadow: none; }
	.fv__en-name { filter: none; }
}

/* 1401px以上:右上のバッジとCTAを少し上へ(2026-10-18)。間の余白も2.6rem→1.4remに。 */
@media (min-width: 1401px) {
	.fv .cta-badge { top: 2.6rem; }
	.fv .cta { top: 7.2rem; }
}

/* ゲーム名のタイトルチップにも14pxの下限を設ける。検索・フォームのチップは対象外。 */
@media (min-width: 601px) {
	.c-prof .c-chip { font-size: max(1.5rem, 14px); }
}

/* 2026-10-18:PCもSPと同じ青・文字strokeに。字間は従来の.04emへ戻す。白フチは比較で選んだ強めの案。 */
@media (min-width: 601px) {
	.fv .cta-badge { --badge: #3C82F6; }
	.fv .cta-badge__txt {
		letter-spacing: .04em;
		-webkit-text-stroke: .6px var(--badge);
		paint-order: stroke fill;
		text-shadow: 3px 0px 0 #fff, 2.771639px 1.14805px 0 #fff, 2.12132px 2.12132px 0 #fff, 1.14805px 2.771639px 0 #fff, 0px 3px 0 #fff, -1.14805px 2.771639px 0 #fff, -2.12132px 2.12132px 0 #fff, -2.771639px 1.14805px 0 #fff, -3px 0px 0 #fff, -2.771639px -1.14805px 0 #fff, -2.12132px -2.12132px 0 #fff, -1.14805px -2.771639px 0 #fff, 0px -3px 0 #fff, 1.14805px -2.771639px 0 #fff, 2.12132px -2.12132px 0 #fff, 2.771639px -1.14805px 0 #fff;
	}
	.fv .cta-badge::before,
	.fv .cta-badge::after { box-shadow: 0 0 0 2px #fff; }
}

/* 2026-10-19:003.jpg参照。PC装飾の見た目のサイズと車の砂ぼこり。 */
@media (min-width:1401px) {
 .fv .deco { margin:0; }
 .fv .deco--controller { width:clamp(86px,6.51vw,124.992px); }
 .fv .deco--sword { width:clamp(70px,5.21vw,100.032px); }
 .fv .deco--handle { width:clamp(66px,5vw,96px); }
 .fv .deco--glove { width:clamp(70px,5.21vw,100.032px); }
 .fv .deco--ball { width:clamp(60px,4.48vw,86.016px); }
 .fv .deco--car { width:clamp(92px,6.77vw,129.984px); z-index:7; }
 .fv .deco img { width:100%; }
 .fv .deco--sword img { transform:translate(-50%,-50%) scaleX(-1); }
 .fv .deco--car::before { content:''; position:absolute; left:90%; bottom:5%; width:125%; height:90%; background:url('../img/deco-car-dust.svg') center/contain no-repeat; pointer-events:none; }
}

@media (min-width:1401px) {
 .fv .deco--controller img { transform:translate(-50%,-50%) rotate(-13deg); }
 .fv .deco--glove img { transform:translate(-50%,-50%) rotate(-32deg); }
}

/* ==========================================================
   404(404.php)2026-10-21 まい指定(b):トップの FV と同じ背景・写真・草の上に、PC のパネルと同じ窓
   (濃紺の枠・四隅のドット・見出し帯=.panel__head/.panel__title/.panel__blink/.panel__en を共用)を左に出し、
   中に「404」・案内・「TOPに戻る」(1401px 以上=FV が1画面に収まる帯)。1400px 以下は写真を出さず箱を中央に、600px 以下は背景を SP 用に。
   クラスは .nf だけ=トップ・固定ページには効かない
   ========================================================== */
.nf {
	--nf-g: clamp(80px, 12svh, 130px); /* 草の帯の高さ */
	--nf-ph: min(92svh, 100vw * 0.62); /* 写真の高さ(1401px 以上) */
	--nf-pad: max(4.7vw, 24px); /* 左右の余白 */
	position: relative;
	box-sizing: border-box;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: max(3rem, 24px) var(--nf-pad) calc(var(--nf-g) + 16px);
	overflow: hidden;
	background: #fff url("../img/back_ver2.webp") center top / cover no-repeat;
	color: var(--ink);
	font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.nf__photo {
	position: absolute;
	z-index: 1;
	right: 4vw;
	bottom: calc(var(--nf-g) * 0.35);
	height: var(--nf-ph);
	width: auto;
	max-width: none;
	pointer-events: none;
}
.nf__ground {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--nf-g);
	background: url("../img/deco-grass-boundary1-v9.png") left bottom / auto 100% repeat-x;
}
.nf__win {
	position: relative;
	z-index: 3;
	/* 窓の幅は写真の左端から逆算(左の余白〜写真の手前 24px。上限 1040px)。2026-10-21:rem 基準(76rem)だと高さの低い画面
	   (24 インチ・ブラウザ枠込みで 1536×730 など)で窓が小さく、写真との間が 280px ほど空いた(まい指摘)。写真の幅=高さ×0.9127(1672×1832) */
	width: min(1040px, 100vw - 4vw - var(--nf-ph) * 0.9127 - var(--nf-pad) - 24px);
	background: #fff;
	border: 0.3rem solid var(--navy);
	box-shadow: 0 1.2rem 3.6rem rgba(59, 111, 224, .16);
}
.nf__win::before,
.nf__win::after {
	content: "";
	position: absolute;
	left: -0.3rem;
	right: -0.3rem;
	height: 1rem;
	pointer-events: none;
	background:
		linear-gradient(var(--navy), var(--navy)) left center / 1rem 1rem no-repeat,
		linear-gradient(var(--navy), var(--navy)) right center / 1rem 1rem no-repeat;
}
.nf__win::before { top: -0.3rem; }
.nf__win::after { bottom: -0.3rem; }
.nf__win .panel__title {
	flex-wrap: wrap;
	row-gap: 0.4rem;
}
.nf__win .panel__title strong {
	font-size: max(2.1rem, 17px);
	white-space: nowrap;
}
.nf__win .panel__en {
	font-size: max(1.3rem, 10px);
	white-space: nowrap;
}
.nf__body {
	padding: max(3.2rem, 24px) max(4rem, 24px) max(4rem, 28px);
	text-align: center;
}
.nf__code {
	margin: 0;
	font-family: "Pixelify Sans", "DotGothic16", monospace;
	font-weight: 500;
	font-size: max(9.6rem, 64px);
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--navy);
}
.nf__msg {
	margin: max(2rem, 16px) 0 max(3.2rem, 24px);
	font-size: max(1.6rem, 14px);
	line-height: 1.9;
	letter-spacing: 0.03em;
}
.nf__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1.2em;
	box-sizing: border-box;
	min-width: min(100%, max(28rem, 220px));
	min-height: max(6.4rem, 52px);
	padding: 0 2.4em;
	background: var(--cta);
	color: var(--navy);
	border: 3px solid var(--navy);
	box-shadow: 0.6rem 0.6rem 0 var(--navy);
	font-weight: 900;
	font-size: max(1.8rem, 16px);
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.nf__btn:hover,
.nf__btn:focus-visible {
	transform: translate(0.3rem, 0.3rem);
	box-shadow: 0.3rem 0.3rem 0 var(--navy);
}
.nf__arrow {
	/* FV の CTA(.cta__arrow)・締めのボタン(.closing__arrow)と同じ CSS の border 三角。文字「▶」は iPhone の Safari で絵文字になる(2026-10-21 実機で確認)ため描画しない */
	width: 0;
	height: 0;
	border-top: max(0.8rem, 7px) solid transparent;
	border-bottom: max(0.8rem, 7px) solid transparent;
	border-left: max(0.8rem, 7px) solid currentColor;
	font-size: 0;
}
@media (prefers-reduced-motion: reduce) {
	.nf__btn {
		transition: none;
	}
}
@media (max-width: 1400px) {
	/* 1400px 以下(縦にスクロールする帯。2026-10-21 まい指定):写真を出さず、404 の箱を中央に(SP と同じ形) */
	.nf {
		--nf-g: clamp(64px, 10svh, 110px);
		justify-content: center;
		padding: 24px 3rem calc(var(--nf-g) + 24px);
	}
	.nf__photo {
		display: none;
	}
	.nf__win {
		width: min(100%, 560px);
		border-width: 3px;
	}
	.nf__win .panel__head {
		padding: max(1.4rem, 12px) max(2rem, 18px);
	}
}
@media (max-width: 600px) {
	.nf {
		--nf-g: 64px;
		justify-content: center;
		padding: 24px 3rem calc(var(--nf-g) + 24px);
		background: #fff url("../img/bg-fv-sp.webp") left top / cover no-repeat;
	}
	.nf__win {
		width: 100%;
		border-width: 2px;
	}
	.nf__win .panel__head {
		padding: 12px 14px;
	}
	.nf__win .panel__title {
		gap: 8px;
	}
	.nf__br {
		display: none;
	}
}

/* タッチ操作の端末では、開いた窓そのものに付くフォーカスの枠を出さない(2026-10-21 まい指摘)。
   窓を開いたとき main.js がキーボード操作のために窓へフォーカスを移す(2026-10-19)。iPhone の Safari はタップで開いた場合も
   :focus-visible と判定し、プライバシーポリシーの窓の外周に青い線が出ていた。PC のキーボード操作の枠と、窓の中のボタン・入力欄の枠は従来どおり */
@media (hover: none) and (pointer: coarse) {
	.pmodal__win:focus-visible,
	.panel--contact:focus-visible,
	body.sp-works-open #works .panel__body:focus-visible {
		outline: none;
	}
}

/* 横向きのスマホなど低い画面(幅 601px 以上・高さ 600px 以下)は、プライバシーポリシーの窓を画面いっぱい(上下 12px)まで使う(2026-10-21 まい指摘。
   高さ 80svh のままでは 667×375 で本文の見える高さが 243px しかなかった) */
@media (min-width: 601px) and (max-height: 600px) {
	.pmodal__win {
		max-height: calc(100svh - 24px);
	}
}

/* X アイコンと TOUI OKAWA(2026-10-21 まい指定・r2。601〜1399px。横向きのスマホ html.fv-land は対象外=従来どおり):
   タブレットで X が小さく押しづらい(縦向き 22〜23px)ので 30px 以上に。ローマ字は X ÷ 1.5 以上(横向き 17→22px・縦向き 14→20px)。
   ローマ字と X の間は X × 0.6(見た目 18〜20px。従来は gap 3.6rem+末尾の字間 0.4em で 30〜39px 空いて見えた)。末尾の字間は margin で打ち消す。
   X が大きくなった分は行の中心が変わらないよう上へ半分戻す(下の紹介文・上の名前との間を片側だけ詰めない)。--x-ic0 は帯ごとの元の大きさ。
   同日改定(まい指定):名前とローマ字・X の間を広げる。ローマ字・X の行と紹介文をいっしょに --en-down=max(0.095×--cf, 6px)(5〜7px)下げる
   (名前↓ローマ字の字面の間=名前の 0.26〜0.35倍 → 0.41〜0.45倍。1920 の 0.42倍に近づける。ローマ字↓紹介文の間は変えない) */
@media (min-width: 601px) and (max-width: 1399px) {
	html:not(.fv-land) .fv {
		--x-ic0: min(5.81rem, 2.9vw);
		--x-ic: max(calc(0.877 * min(5.81rem, 2.9vw)), 30px);
	}
	html:not(.fv-land) .fv .fv__sns { width: var(--x-ic); height: var(--x-ic); }
	html:not(.fv-land) .fv .fv__en-name { font-size: max(calc(0.2950 * var(--cf)), 14px, calc(var(--x-ic) / 1.5)); margin-right: -0.4em; }
	html:not(.fv-land) .fv { --en-down: max(calc(0.095 * var(--cf)), 6px); }
	html:not(.fv-land) .fv .fv__en { gap: calc(var(--x-ic) * 0.6); margin-top: calc(min(0px, (var(--x-ic0) - var(--x-ic)) / 2) + var(--en-down)); }
	html:not(.fv-land) .fv .fv__intro { margin-top: var(--en-down); }
}
@media (min-width: 1000px) and (max-width: 1399px) {
	html:not(.fv-land) .fv { --x-ic0: calc(0.877 * min(5.81rem, 2.9vw)); }
}

/* 短い縦向きのアプリ内表示。通常のSPは従来の100svhのまま。 */
@media (max-width: 600px) and (max-height: 600px) and (orientation: portrait) {
	.fv { --sp-layout-h: max(100svh, 667px, 170vw); }
}

/* 短画面のコンパクトCTA。固定UIはブラウザ本来の下端に置く。 */
@media (max-width: 600px) {
	html.fv-sp-compact .fv .cta-badge { display: none; }
	html.fv-sp-compact .fv .cta {
		bottom: calc(var(--sp-nav-h) + 24px);
		width: 124px;
		height: 44px;
		padding: 4px 6px;
		flex-direction: row;
		gap: 6px;
	}
	html.fv-sp-compact .fv .cta__icon { width: 24px; height: 24px; }
	html.fv-sp-compact .fv .cta__label { font-size: 12px; line-height: 1.25; }
}
@media (max-width: 375px) {
	/* 名前の右端を避ける。文字12pxと44pxのタップ高は維持する。 */
	html.fv-sp-compact .fv .cta { right: 8px; width: 110px; gap: 4px; }
	html.fv-sp-compact .fv .cta__icon { width: 16px; height: 16px; }
}

/* 横長の短画面だけ。通常の縦長SP・PCの配置は維持する。 */
@media (max-width: 600px) {
	html.fv-sp-compact-wide .fv .cta[data-short-place="left"] { left: 3.9rem; right: auto; }
	html.fv-sp-compact-wide .fv .cta[data-short-place="top"] { top: 12px; bottom: auto; }
}