@charset "UTF-8";

/* =========================================================
   サビデンキ 採用サイト
   Figma『サビデンキ様 確認用URL』(file: nWDCaxNzjOms3CwwuF0rpb) 基準

   レイアウト規約:
   すべてのセクションの中身は共通コンテナ .inner に入れる。
   左右余白は --content / --gutter の2変数だけで管理し、
   ページ個別の margin / padding-inline は原則書かない。
   ========================================================= */

/* ---------------------------------------------------------
   1. トークン
   --------------------------------------------------------- */
:root {
	--yellow: #f3c969;
	--yellow-light: #ffdf95;
	--yellow-strong: #ffdf25;
	--cream: #fff9ec;

	/*
	 * ホバーで浮く量。ボタン・カードで共通。
	 * 例外は MV の「サビデンキを知る」だけで、あちらは
	 * 隣の「募集要項を見る」と動きを差をつけるため個別に -2px。
	 */
	--lift-hover: -6px;
	--lift-active: -2px;

	/*
	 * ボタンのホバー時の光。
	 * 1枚目は下にずらして「浮き」、2〜3枚目はずらさず広げて
	 * 周囲のにじみを担当する（1枚だとどちらかしか表現できない）。
	 */
	--glow-hover:
		0 12px 30px rgba(243, 201, 105, 0.55),
		0 0 52px rgba(243, 201, 105, 0.5),
		0 0 92px rgba(243, 201, 105, 0.32);

	/* 光の粒として見せるドットの大きさ */
	--dot-glow-size: 32px;

	/* キャリアのステージ配色（段階が上がるほど黄色が濃くなる） */
	--stage-1: #ffffff;
	--stage-2: #ffedc3;
	--stage-3: #ffdf95;
	--stage-4: #f3c969;
	--dark: #202625;
	--night: #144e98;
	--dark-btn: #101828;
	--ink: #2f2f2f;
	--ink-strong: #191c1d;
	--white: #fff;

	--font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--font-gothic: "YuGothic", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--font-en: "Inter", var(--font-gothic);

	/* レイアウト: 余白はこの2つで一元管理する */
	--content: 1280px;
	--gutter: clamp(20px, 5.6vw, 80px);

	--section-space: clamp(64px, 8vw, 120px);
	--radius-pill: 999px;

	/* ラベルの黄色い帯を、文字の末尾からどれだけ伸ばすか */
	--label-bar-tail: 37px;

	/* ラベル用のダイヤ型アイコン（Figmaのベクター） */
	--label-icon: url("../images/shapes/label-icon.svg");
	/* 代表者署名「佐飛 康央」の字形（筆文字）。詳細は .brush のコメント参照 */
	--sign-sahi: url("../images/shapes/sign-sahi.svg");

	/* 下向き矢印（ページ内スクロールのボタン用） */
	--arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 20'%3E%3Cpath d='M4 0v18M1 15l3 3.5 3-3.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");

	/* 右向き矢印（円ボタンの下に置く） */
	--arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0 4h18M15 1l3.5 3-3.5 3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");

	/*
	 * 光の粒。芯（クリーム）から外側（黄色）へ段階的に色を混ぜている。
	 * 中間色を挟まないとクリームと黄色の境目が輪郭として見えてしまう。
	 */
	--spark: radial-gradient(circle closest-side,
		var(--cream) 0%,
		var(--cream) 16%,
		rgba(253, 242, 214, 0.97) 26%,
		rgba(249, 226, 175, 0.85) 38%,
		rgba(243, 201, 105, 0.55) 52%,
		rgba(243, 201, 105, 0.22) 70%,
		rgba(243, 201, 105, 0) 100%);
}

/* ---------------------------------------------------------
   2. リセット / ベース
   --------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* 固定ヘッダー分のアンカーオフセット */
	scroll-padding-top: 110px;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-gothic);
	font-size: 16px;
	line-height: 1.92;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	text-size-adjust: 100%;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

a:hover {
	opacity: 0.75;
}

/* ボタンやカードはホバー演出を個別に持つので、全体の減光は効かせない
   （減光すると背景が透けて、写真が白っぽく見えてしまう） */
a.btn:hover,
a.circle-btn:hover,
.voice-card__link:hover {
	opacity: 1;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, blockquote, address {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

address {
	font-style: normal;
}

button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--dark);
	color: var(--white);
}

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

/* 目には見せず、読み上げと検索には残すテキスト。
   display: none と違い、読み上げ対象から外れない。 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------
   3. 共通コンテナ
   --------------------------------------------------------- */
.inner {
	width: min(calc(100% - var(--gutter) * 2), var(--content));
	margin-inline: auto;
}

/* 下層ページの本文幅 */
.inner--narrow {
	--content: 1200px;
}

/* ---------------------------------------------------------
   4. 共通パーツ
   --------------------------------------------------------- */

/* --- セクション --- */
.section {
	position: relative;
	overflow: hidden;
	padding-block: var(--section-space);
}

.section__inner {
	position: relative;
	z-index: 1;
}

.section__lead {
	margin-top: 24px;
	max-width: 68em;
	letter-spacing: 0.1em;
	line-height: 1.92;
}

/*
 * SPだけで改行する。
 * PC・SPで改行位置が違う見出しがあり、CSSでは特定の位置で折り返せないため、
 * 改行をデータに置いて表示・非表示で切り替えている。
 */
.br-sp {
	display: none;
}

/* --- 見出し --- */
.heading {
	font-family: var(--font-mincho);
	font-weight: 800;
	color: var(--dark);
	line-height: 1.62;
	letter-spacing: 0.02em;
}

.heading--lg {
	font-size: clamp(26px, 3.4vw, 40px);
}

.heading--md {
	font-size: clamp(21px, 2.6vw, 32px);
}

/* 濃色セクション用の白文字。
   .heading より後に書くこと（同じ詳細度なので順序で勝敗が決まる）。 */
.heading--light,
.section__lead--light {
	color: var(--white);
}

/* --- セクションラベル（ダイヤアイコン + 英字） --- */
.section-label {
	display: flex;
	align-items: center;
	gap: 10px;
	/*
	 * 左端まで伸びる黄色い帯の高さ。
	 * 帯は ::before でラベルの上下中央に置くので、
	 * ここを変えれば上下に均等に伸び縮みする。
	 * Figma: PC 46px / SP 32px
	 */
	--label-bar-h: 46px;
	/* 帯の右端を「文字の末尾から」測るため、内容の幅に合わせる */
	width: fit-content;
	margin-bottom: 26px;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: clamp(16px, 1.6vw, 20px);
	letter-spacing: 0.04em;
	color: var(--dark);
}

/* ダイヤ型のアイコン。mask で描くので色は文字色（currentColor）に追従する。
   明るいセクションでは黒、濃色セクションでは黄色になる。 */
.section-label__icon,
.chapter__label__icon {
	flex: none;
	display: block;
	width: 31px;
	height: 24px;
	background: currentColor;
	-webkit-mask: var(--label-icon) no-repeat center / contain;
	mask: var(--label-icon) no-repeat center / contain;
}

/* 濃色セクションではラベルを黄色に */
.section--culture .section-label,
.section--work .section-label,
.section--career .section-label {
	color: var(--yellow);
}

/* 左端まで伸びる黄色い帯（ラベルの背景） */
.section--message .section-label,
.section--business .section-label,
.section--benefits .section-label,
.section--flow .section-label {
	position: relative;
}

.section--message .section-label::before,
.section--business .section-label::before,
.section--voice .section-label::before,
.section--voice-list .section-label::before,
.section--benefits .section-label::before,
.section--flow .section-label::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	translate: 0 -50%;
	/*
	 * 左端はビューポートの端まで。
	 * コンテナ左端からビューポート左端までの距離は、画面が広いときは
	 * 中央寄せ分 (100vw - --content) / 2、狭いときは --gutter になる。
	 */
	left: calc(-1 * max(var(--gutter), (100vw - var(--content)) / 2));
	/* 右端は文字の末尾から --label-bar-tail だけ伸ばす */
	right: calc(var(--label-bar-tail) * -1);
	height: var(--label-bar-h);
	background: var(--yellow);
}

/* --- 丸ボタン（黄色の大きな円） --- */
.circle-btn {
	display: grid;
	place-content: center;
	width: 300px;
	max-width: 100%;
	aspect-ratio: 1;
	padding: 20px;
	border-radius: 50%;
	background: var(--yellow);
	color: var(--ink);
	font-weight: 700;
	font-size: clamp(15px, 1.4vw, 18px);
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-align: center;
}

.circle-btn > span {
	display: block;
}

/* 文字の下は矢印（Figmaの 'Arrow 1'）。
   mask で描くので色は currentColor に追従する。 */
.circle-btn > span::after {
	content: "";
	display: block;
	width: 19px;
	height: 8px;
	margin: 17px auto 0;
	background: currentColor;
	-webkit-mask: var(--arrow-right) no-repeat center / contain;
	mask: var(--arrow-right) no-repeat center / contain;
	transition: width 0.25s ease;
}

.circle-btn:hover > span::after {
	width: 34px;
}

.circle-btn--sm {
	width: clamp(130px, 15vw, 210px);
	font-size: clamp(14px, 1.4vw, 18px);
}

/* CTAの2つの円。直径は .cta の --cta-circle で決まる */
.circle-btn--lg {
	width: var(--cta-circle);
}

.circle-btn--dark {
	background: var(--ink);
	color: var(--white);
}

/*
 * ホバーで少し浮き、周囲がぼやっと光る。
 * 通常時は影を持たない（Figmaの円ボタンに影は無い）ので、
 * ホバーしたときだけ黄色いにじみが出る。
 */
.circle-btn--glow {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.circle-btn--glow:hover {
	transform: translateY(var(--lift-hover));
	box-shadow: var(--glow-hover);
}

.circle-btn--glow:active {
	transform: translateY(var(--lift-active));
}

/* 矢印なし。電話番号のようにページ遷移しないものに使う
   （Figmaでも電話の円には Arrow が無い）。 */
.circle-btn--noarrow > span::after,
.circle-btn--noarrow.is-disabled > span::after {
	content: none;
}

/* --- 角丸ボタン --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-width: 245px;
	min-height: 59px;
	padding: 0 32px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.1em;
	text-align: center;
}

/* 右向き矢印。mask で描くので色は文字色に追従する。 */
.btn::after {
	content: "";
	width: 20px;
	height: 8px;
	background: currentColor;
	-webkit-mask: var(--arrow-right) no-repeat center / contain;
	mask: var(--arrow-right) no-repeat center / contain;
	transition: width 0.25s ease;
}

.btn:hover::after {
	width: 28px;
}

/*
 * 濃色のボタン（記事末尾の「一覧に戻る」・404の「TOPへ戻る」）。
 * ホバーの見せ方は .circle-btn--glow と同じで、
 * 少し浮いて周囲がぼやっと光る。通常時は影を持たない。
 */
.btn--dark {
	background: var(--dark-btn);
	color: var(--yellow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn--dark:hover {
	transform: translateY(var(--lift-hover));
	box-shadow: var(--glow-hover);
}

.btn--dark:active {
	transform: translateY(var(--lift-active));
}

/*
 * 「戻る」ボタン。.btn は inline-flex なので、
 * order で矢印（::after）を文字の前へ回し、向きを反転させる。
 * ホバーで矢印が伸びる挙動は .btn と共通。
 */
.btn--back::after {
	order: -1;
	rotate: 180deg;
}

.btn--light {
	background: var(--white);
	color: var(--dark-btn);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ホバー: 少し浮かせる（写真の上に置くので影で浮きを見せる）。
   矢印が伸びる挙動は .btn--light::after 側で共通。

   浮き量はここだけ共通の --lift-hover を使わず -2px にしている。
   隣の「募集要項を見る」と並ぶので、主役側を大きく動かして差をつける。 */
.btn--light:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(16, 24, 40, 0.3);
}

.btn--light:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.24);
}

/* 「サビデンキを知る」はページ内スクロールなので下向き矢印 */
.btn--light::after {
	width: 8px;
	height: 20px;
	-webkit-mask: var(--arrow-down) no-repeat center / contain;
	mask: var(--arrow-down) no-repeat center / contain;
	transition: height 0.25s ease;
}

.btn--light:hover::after {
	width: 8px;
	height: 28px;
}

/* ヘッダーのボタン。Figmaでは矢印が無いので出さない。 */
.btn--sm {
	min-width: 167px;
	min-height: 45px;
	padding: 0 24px;
	gap: 0;
}

.btn--sm::after,
.btn--sm:hover::after {
	content: none;
}

/*
 * 「募集要項」ボタン。背景 #101828 / 文字 #F3C969。
 * もともと常時光っているボタンなので、ホバーでは
 * 少し浮かせて光を強めるだけにする（帯を走らせると過剰になる）。
 */
.btn--glow {
	position: relative;
	background: var(--dark-btn);
	color: var(--yellow);
	box-shadow: 0 0 24px rgba(243, 201, 105, 0.7);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn--glow:hover {
	transform: translateY(var(--lift-hover));
	box-shadow: var(--glow-hover);
}

.btn--glow:active {
	transform: translateY(var(--lift-active));
}

/* 発光させたいので、リンク先未定でも減光しない */
.btn--glow.is-disabled {
	opacity: 1;
}

/* 未実装ページ（募集要項など）へのリンクは非活性表示 */
.is-disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

a.is-disabled:hover,
.is-disabled:hover {
	opacity: 0.55;
}

.is-disabled::after {
	display: none;
}

/*
 * 円ボタンはリンク先が未定でも透かさない（デザイン上ベタ塗りのため）。
 * クリックできないことは cursor と aria-disabled で伝える。
 */
.circle-btn.is-disabled {
	opacity: 1;
}

.circle-btn.is-disabled > span::after {
	display: block;
}

/* --- 文中の部分書式（Figmaの部分指定を再現） --- */

/* 黄色でハイライトされた語句。デザイン上つねに濃色背景の上に置かれる。 */
.hl {
	color: var(--yellow);
}

/* 文字の背面を通る黄色いマーカー。
   Figmaでは独立した線レイヤー（太さ6px）で表現されている。
   背景グラデーションで描いているので、折り返しても行ごとに引かれ、
   かつ文字より背面に入る。位置・太さはこの2行で調整できる。 */
.ul {
	background-image: linear-gradient(var(--yellow), var(--yellow));
	background-repeat: no-repeat;
	background-size: 100% 0.15em;
	background-position: 0 1.2em;
}

/*
 * 署名の筆文字。
 * デザインのフォント ShokakiSarariGyotai（しょかきさらり 行体）は、
 * ウェブフォントとして埋め込むには作者への届け出が必要になる。
 * そこで Figma の字形を SVG として書き出し、mask で描いている。
 * フォントファイルは同梱しておらず、出力結果の画像化は
 * 使用許諾契約書 第4条◇2 の但し書きで認められている。
 *
 * 文字そのものは読み上げと検索のために DOM に残し、視覚的にだけ隠す
 * （display: none や visibility: hidden と違い、読み上げ対象から外れない）。
 */
.brush {
	/*
	 * 字形の実寸。Figma の 32px の字面で 150.83 x 30.63px。
	 * font-size を基準にした相対値なので、文字サイズだけで拡縮できる。
	 */
	--sign-w: 4.7134em;
	--sign-h: 0.9572em;
	/*
	 * 筆の運びがベースラインより下に出る分。
	 * Figma の書き出しでは、和文（YuGothic 16px）のインク下端が y=27.59、
	 * 筆文字のインク下端が y=30.63 で、その差は 3.04px。
	 * 和文のインクはベースラインより 1.18px 下まで出るので、
	 * ベースラインからの下げ量は 3.04 + 1.18 = 4.22px。
	 * 32px の字面に対して 0.132em。
	 */
	--sign-drop: 0.132em;

	display: inline-block;
	/* Figma の指定どおり、周囲の本文の2倍 */
	font-size: 2em;
	width: var(--sign-w);
	height: var(--sign-h);
	/* 文字を箱の外へ押し出して隠す */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	/*
	 * 濃色の署名（TOP）と白の署名（下層MV）の両方で使うため、
	 * 塗りは地の文字色をそのまま拾う。
	 */
	background-color: currentColor;
	-webkit-mask: var(--sign-sahi) no-repeat center / contain;
	mask: var(--sign-sahi) no-repeat center / contain;
	/*
	 * overflow: hidden の inline-block は箱の下端がベースラインに乗る。
	 * そこから筆の運びのぶんだけ下げる。
	 *
	 * vertical-align では動かない。この字形は行内でいちばん背が高いので、
	 * vertical-align を変えると行ボックスの高さごと変わってしまい、
	 * 見た目の位置がほとんど動かないため。
	 * position は行ボックスに影響しないので、狙った量だけ確実に下がる。
	 */
	position: relative;
	top: var(--sign-drop);
	vertical-align: baseline;
}


/* --- 二重丸ドット --- */
.dot {
	flex: none;
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--yellow);
	box-shadow: inset 0 0 0 4px var(--yellow), inset 0 0 0 5px var(--cream);
	position: relative;
}

.dot::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--cream);
}

/* 光の粒として見せるドット。
   育てる文化セクションの装飾と同じ --spark を使っている。
   大きさは --dot-glow-size（:root）で一括調整できる。 */
.work-card__tag .dot,
.career-step__marker .dot,
.note-box__label .dot {
	width: var(--dot-glow-size);
	height: var(--dot-glow-size);
	background: var(--spark);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: none;
}

.work-card__tag .dot::after,
.career-step__marker .dot::after,
.note-box__label .dot::after {
	content: none;
}

/* ---------------------------------------------------------
   5. ヘッダー
   --------------------------------------------------------- */
/* ヘッダーはMVの写真の上に透過で重なる（Figma準拠）。
   スクロール後は白帯に切り替えて可読性を確保する。 */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-fixed {
	background: var(--white);
	box-shadow: 0 2px 14px rgba(32, 38, 37, 0.12);
}

/* ロゴ画像は白抜き版。白帯になったら反転して濃色にする。 */
.site-header.is-fixed .site-header__logo img {
	filter: invert(1);
}

/* MVを持たないページはヘッダーの高さぶん本文を下げる */
body:not(.has-hero) .site-main {
	padding-top: 100px;
}

.site-header__inner {
	--content: 1340px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 100px;
}

.site-header__logo img {
	display: block;
	width: clamp(170px, 20vw, 298px);
	height: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.4vw, 46px);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2vw, 26px);
}

.site-nav__item a {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.1em;
	color: var(--dark);
	white-space: nowrap;
}

/* ドロワー上部のロゴ。PCでは使わない */
.site-nav__logo {
	display: none;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	/* 上だけ広くして、3本線とMENUの塊をわずかに下げる */
	padding: 12px 6px 6px;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--dark);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle__bars {
	position: relative;
	/*
	 * 上下の線は擬似要素で、この箱の外（上 -8px / 下 +8px）に置いている。
	 * 箱の高さは中央の線の 2px しかないため、そのままだと 2px を基準に
	 * 中央揃えされ、見た目が 4px 上へずれて MENU の文字にも重なる。
	 * 見た目どおりの高さになるよう、上下に余白を確保する。
	 */
	margin-block: 9px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before {
	top: -8px;
}

.nav-toggle__bars::after {
	top: 8px;
}

.nav-toggle__label {
	font-family: var(--font-en);
	font-size: 8px;
	letter-spacing: 0.12em;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ---------------------------------------------------------
   6a. オープニング
   Figmaの2つの「MV」フレームから発展させた「電気がつく」演出:
     ① 128:777 濃色背景 ＋ ロゴ ＋ 上端のぼかした円（ランプ）
     ② 128:773 ①に加えて、下へ広がる光の束

   以下の時刻は --intro-hold: 0s（既定）のとき。
   ランプが単独で光っている時間を伸ばしたい場合は --intro-hold だけを変える
   （束から先の遅延はすべてこの値を足して算出しているので、
     この一覧の 0.55s 以降の時刻がそのぶん後ろへずれる）。

   0.10s ランプ（上端中央のぼやけた光）が現れ始める
   0.40s 暗闇にロゴがうっすら浮かぶ
   0.55s ランプから下へ、まっすぐ明るくなっていく（形は固定しマスクを伸ばす）
   0.63s 光の先端がロゴに届き、照らし出される
   1.35s 束が横へ広がり、黄色い光が画面全体を満たす
        （このとき濃色の背景は光の下でフェードアウトする）
   1.35s 暗い背景が引き始める（＝この時点からTOPが見えてくる）
   1.50s 黄色い光がだんだん白い光に変わる（明るくなる）
        このとき黄色い束は光の下で消しきる
   1.70s 光が最も強くなる（覆い切らず、TOPは透けて見える）
        頂点で止めず、そのまま引き始める
   1.85s 暗さが消えきる
   2.05s 束が広がりきる
   2.10s 光が抜けて明るくなりきる（残光なし）

   濃色の背景が「光の下で」消えるので、暗→明が一続きに見える。
   すべてCSSアニメーションで完結し、pointer-events: none なので
   JSが動かなくても操作を妨げない。
   --------------------------------------------------------- */
.intro {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	overflow: hidden;
	/* 覆っている間もクリックを妨げない */
	pointer-events: none;
	/*
	 * 最初の暗い背景の濃さ。
	 * 1 でベタ塗り。下げるとTOPが暗く透けて見え、
	 * 「照明が落ちている」ような見え方になる。
	 */
	--intro-dark: 0.97;
	/*
	 * 光がいちばん強いときの濃さ。
	 * 1 にすると画面を覆い切ってしまい、「照明が点いた」ではなく
	 * 「白いフラッシュ」に見えるので、TOPが透ける程度にとどめる。
	 */
	--intro-glow: 0.6;
	/*
	 * 光の白さ。1 で純白、下げるほど電球色（暖色）になる。
	 * 全域で同じ値にすること。中心だけ濃くすると周辺に黄色い輪が出る。
	 */
	--intro-white: 0.8;
	/*
	 * 最初のぼやけた光（ランプ）を単独で見せておく時間。
	 * 束から先の遅延はすべてこの値を足しているので、
	 * ここだけを変えれば余韻の長さを調整できる。
	 * 0 で元のテンポ。増やすとランプの余韻が伸びる。
	 * main.js の後始末のタイマーはこの値を読んで自動で伸びる。
	 */
	--intro-hold: 0s;
	animation: intro-end 0.01s linear calc(2.15s + var(--intro-hold)) forwards;
}

@keyframes intro-end {
	to {
		visibility: hidden;
	}
}

/* 濃色の背景。光が満ちている間に消えるので、暗転を挟まずTOPへ繋がる。 */
.intro__bg {
	position: absolute;
	inset: 0;
	background: rgb(32 38 37 / var(--intro-dark));
	/*
	 * 光が最も強い時点（1.75s）より前に引き始め、1.95sで消えきる。
	 * 「暗さが引く」と「光が差す」が重なることで、画面が切り替わるのではなく
	 * その場が明るくなったように見える。
	 */
	animation: intro-fade-out 0.5s ease calc(1.35s + var(--intro-hold)) forwards;
}

/*
 * 上端をまたぐランプ。
 * Figma は 120px / 上から-40px / LAYER_BLUR 100（CSSでは半分の50px）だが、
 * 演出の起点としてもっと強く見せたいので、径を大きくしぼかしを抑えている。
 * 強さはこの2つで決まる（大きく／ぼかしを弱くするほど強い）。
 */
.intro__lamp {
	--intro-lamp-size: 190px;
	--intro-lamp-blur: 56px;

	position: absolute;
	top: -40px;
	left: 50%;
	translate: -50% 0;
	width: var(--intro-lamp-size);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yellow);
	filter: blur(var(--intro-lamp-blur));
	opacity: 0;
	animation:
		intro-lamp 0.6s ease 0.1s forwards,
		intro-fade-out 0.5s ease calc(1.4s + var(--intro-hold)) forwards;
}

@keyframes intro-lamp {
	from {
		opacity: 0;
		scale: 0.6;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

/*
 * ランプから下へ伸びる光の束。伸びきったあと横へ広がって画面を満たす。
 * Figma: 902x794 の VECTOR（グラデ #FFDF25 → #FFDF6B → #FFDF95・上から下）。
 * ベクターの実パスは書き出せなかったため、ランプ径から下辺全幅へ広がる
 * 台形で近似している。
 */
.intro__beam {
	/*
	 * 輪郭のぼかし。
	 * 横に広がる段（intro-beam-widen）では scale で横に7倍されるため、
	 * ぼけ幅も横方向だけ大きくなる（このときは光が画面を覆っているので問題ない）。
	 */
	--intro-beam-blur: 9px;
	/*
	 * 束の傾き。
	 * まったく同じ束を2枚、この角度だけ逆向きに傾けて重ねることで、
	 * 光源は一点のまま、下に向かって二手に開く光になる。
	 * 回転の軸は transform-origin: top center ＝ 束の頂点なので、
	 * 傾けても頂点（ランプの位置）は動かない。
	 * 0 にすると完全に重なって1本に見える。
	 */
	--intro-beam-tilt: 0deg;

	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
	rotate: var(--intro-beam-tilt);
	width: 62.64%;
	height: 102%;
	/*
	 * 形は ::before に持たせ、切り抜き済みの結果をこの要素の filter でぼかす。
	 * clip-path は filter のあとに切り抜く仕様なので、同じ要素に
	 * filter をかけても縁は硬いまま残ってしまう。
	 * filter → mask の順に適用されるため、下の出現マスクはこのまま効く。
	 */
	filter: blur(var(--intro-beam-blur));
	/*
	 * 上端から下へ伸ばすマスク。図形は最終形のまま固定し、
	 * 見える範囲だけを広げる（scaleで縦に伸ばすと下端が
	 * 振り下ろされるように動いてしまうため）。先端は少しぼかす。
	 */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: top center;
	mask-position: top center;
	-webkit-mask-size: 100% 0%;
	mask-size: 100% 0%;
	transform-origin: top center;
	opacity: 0;
	animation:
		/* 上から下へまっすぐ明るくなる */
		intro-beam-reveal 0.8s cubic-bezier(0.25, 0.85, 0.35, 1) calc(0.55s + var(--intro-hold)) forwards,
		/* 伸びきったあと横へ広がって画面を満たす */
		intro-beam-widen 0.7s cubic-bezier(0.55, 0, 0.7, 1) calc(1.35s + var(--intro-hold)) forwards,
		/*
		 * 束は forwards で残り続けるので必ず消す。
		 * ただし光が引くのと同時に消すと、白が薄まるほど下の黄色が
		 * 見えてしまう。白い光に覆われている間（〜1.95s）に消しきる。
		 */
		intro-fade-out 0.3s ease calc(1.5s + var(--intro-hold)) forwards;
}

/*
 * 束の形と色。ランプ径から下辺全幅へ広がる台形。
 *
 * 上端はランプと同じ色・同じ濃度（--yellow）にしている。
 * Figmaのグラデーションは #FFDF25 から始まるが、ランプ（--yellow）より
 * 鮮やかで濃いため、重なる根元に色の段差が出てしまう。
 * ここを揃えると、ランプから束へ一続きの光として見える。
 *
 * 中腹から下の不透明度は、2枚重ねた結果がFigmaの 0.55 / 0.15 に
 * なるよう1枚あたりを下げている（1-(1-a)^2 = 目標 の a）。
 * そのまま2枚重ねると倍近く濃くなってしまう。
 */
.intro__beam::before {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: polygon(43.35% 0, 56.65% 0, 100% 100%, 0 100%);
	background-image: linear-gradient(
		to bottom,
		var(--yellow) 0%,
		rgba(255, 223, 107, 0.33) 45%,
		rgba(255, 223, 149, 0.08) 100%
	);
}

/*
 * 左右へ傾ける2枚。
 * 幅・ぼかし・色・動きはすべて同じで、傾ける向きだけが逆。
 * 幅やぼかしに差をつけると、片方が手前・片方が奥に見えてしまうため揃えている。
 * 束はもともと片側23°に広がっているので、2.5°は控えめな開きにあたる。
 */
.intro__beam--left {
	--intro-beam-tilt: -2.5deg;
}

.intro__beam--right {
	--intro-beam-tilt: 2.5deg;
}

@keyframes intro-beam-reveal {
	from {
		-webkit-mask-size: 100% 0%;
		mask-size: 100% 0%;
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	to {
		-webkit-mask-size: 100% 150%;
		mask-size: 100% 150%;
		opacity: 1;
	}
}

@keyframes intro-beam-widen {
	from {
		scale: 1 1;
	}

	to {
		scale: 7 1;
	}
}

/*
 * 画面全体を満たす黄色い光。
 * 束の広がりだけでは上の左右の角が暗く残るため、
 * ランプの位置（上中央）を中心にした放射で全体を覆う。
 */
.intro__flood {
	position: absolute;
	inset: -20%;
	background-image: radial-gradient(
		130% 105% at 50% 0%,
		#ffdf25 0%,
		#ffdf6b 38%,
		#ffdf95 75%,
		#ffdf95 100%
	);
	opacity: 0;
	animation: intro-flood 0.8s linear calc(1.3s + var(--intro-hold)) forwards;
}

/*
 * 頂点で保持しない。
 * 保持を挟むと「うっすら白いTOP」が停滞して間延びして見えるので、
 * 上がりきったらそのまま抜けて、束が広がる勢いのまま明るくなりきる。
 */
@keyframes intro-flood {
	0% {
		opacity: 0;
		animation-timing-function: ease-out;
	}

	/* 光が最も強くなる（1.3s + 0.8s×0.5 = 1.7s） */
	50% {
		opacity: var(--intro-glow);
		animation-timing-function: cubic-bezier(0.35, 0.1, 0.75, 1);
	}

	/* そのまま引いて明るくなりきる（2.1s） */
	100% {
		opacity: 0;
	}
}

/*
 * 「明るくなる」を出すため、黄色い光の上に白い光を重ねて色を移す。
 * グラデーションの色そのものはCSSで補間できないので、
 * 白い層の不透明度を上げることで 黄色 → 白 に見せている。
 * 親（.intro__flood）が消えるとき一緒に消えるので、退場の指定は不要。
 */
.intro__flood::after {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * 濃さは --intro-white で全域一律に決める。
	 * ストップごとに違う不透明度を与えると、周辺だけ下の黄色が透けて
	 * 黄色い輪として残ってしまうので避ける。
	 */
	background-image: radial-gradient(
		130% 105% at 50% 0%,
		rgb(255 255 255 / var(--intro-white)) 0%,
		rgb(255 253 246 / var(--intro-white)) 45%,
		rgb(255 251 240 / var(--intro-white)) 100%
	);
	opacity: 0;
	animation: intro-whiten 0.45s ease calc(1.5s + var(--intro-hold)) forwards;
}

@keyframes intro-whiten {
	to {
		opacity: 1;
	}
}

/*
 * ロゴは最初ほとんど見えず、光の束が届いた瞬間に照らし出される。
 * 光の先端（マスクの 72%〜100%）がロゴ中心に届くのは、束が伸び始めてから
 * 0.63s と計算できる。
 *   ビーム要素の高さ = ビューポートの102% / ロゴ中心 = 要素高さの49%
 *   → mask-size 49〜68% に達する時刻 = 開始から 0.63〜0.67s
 *
 * 「うっすら浮かぶ」と「照らし出される」を1本のアニメーションの
 * 割合キーフレームで書くと --intro-hold に追従できないため、2本に分けている。
 * こうすると、間の「薄いまま待つ」時間が自動的に伸縮する。
 */
.intro__logo {
	position: relative;
	width: min(298px, 62vw);
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
	opacity: 0;
	animation:
		/* 0.20〜0.40s 暗闇にうっすら浮かぶ */
		intro-logo-dim 0.2s ease-out 0.2s forwards,
		/* 光の先端が届いて照らし出される */
		intro-logo-lit 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) calc(0.63s + var(--intro-hold)) forwards,
		intro-fade-out 0.45s ease calc(1.35s + var(--intro-hold)) forwards;
}

@keyframes intro-logo-dim {
	from {
		opacity: 0;
		translate: 0 6px;
	}

	to {
		opacity: 0.1;
		translate: 0 0;
	}
}

@keyframes intro-logo-lit {
	to {
		opacity: 1;
	}
}

@keyframes intro-fade-out {
	to {
		opacity: 0;
	}
}

/* 動きを減らす設定では見せない */
@media (prefers-reduced-motion: reduce) {
	.intro {
		display: none;
	}
}

/* ---------------------------------------------------------
   6. メインビジュアル（TOP）
   --------------------------------------------------------- */
.mv {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(780px, 78vh);
	padding-block: clamp(56px, 8vw, 96px);
	overflow: hidden;
	color: var(--white);
}

.mv__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mv__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* hero.png はMV枠（1440x780）にトリミング済みなので中央でよい */
	object-position: center;
}

.mv__inner {
	position: relative;
	z-index: 1;
}

.mv__label {
	display: inline-block;
	margin-bottom: 28px;
	padding: 10px 14px;
	background: var(--yellow);
	color: var(--dark);
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(13px, 1.3vw, 16px);
	letter-spacing: 0.1em;
	line-height: 1.2;
}

.mv__title {
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: clamp(34px, 5.6vw, 64px);
	line-height: 1.45;
	letter-spacing: 0.02em;
}

.mv__lead {
	margin-top: 22px;
	font-weight: 700;
	font-size: clamp(15px, 1.5vw, 18px);
	letter-spacing: 0.1em;
	line-height: 1.5;
}

.mv__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	margin-top: 55px;
}

/* ---------------------------------------------------------
   7. 装飾（黄色の斜め帯）
   --------------------------------------------------------- */
.band {
	position: relative;
	overflow: hidden;
}

.band > .section {
	overflow: visible;
}

/*
 * 背景のスポットライト。
 *
 * Figmaでは静的なベクター（band-*.svg）だが、ここでは
 * 「くさび形の枠」と「その中を通り抜ける光」の2層に分けている。
 *
 *   .beam          … Figmaのベクターと同じ形。clip-path で切り抜いた固定の枠。
 *   .beam::before  … 枠の4倍の大きさを持つ光。手前が明るく先へ抜ける
 *                    グラデーションで、これを枠の中で移動させる。
 *
 * 枠が固定されたまま光だけが動くので、形が広がるのではなく
 * 光が「差し込む」ように見える。
 *
 * クラスの役割（.beam 自身に付ける。1ページに複数置いて個別に光らせるため）:
 *   （無印）        JSが動いていない状態。光が届いた静止した見た目。
 *   .is-beam-armed  JSが制御を引き受けた。光は枠の外へ退避し、完全に消えている。
 *   .is-lit         発火。光が走る。
 *
 * 光が消えきるのはグラデーションの 62% 地点（枠の1.24倍）なので、
 * 退避量は 64% にしている（62%未満だと発火前に残光が出る）。
 */
.beam {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.beam::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	/* 枠の4倍（縦横2倍） */
	width: 200%;
	height: 200%;
}

.beam.is-beam-armed::before {
	opacity: 0;
}

.beam.is-beam-armed.is-lit::before {
	animation-duration: 0.85s;
	animation-timing-function: cubic-bezier(0.4, 0.9, 0.6, 1);
	animation-fill-mode: both;
	will-change: transform, opacity;
}

/* --- 代表メッセージ: 左上から右下へ --- */
.beam--message {
	inset: -1% -12% -22% 3%;
	/* band-message.svg と同じ頂点（1607x1282 の座標を%に換算） */
	clip-path: polygon(0 0, 10.3% 0, 100% 62.56%, 71% 100%);
}

.beam--message::before {
	background-image: linear-gradient(
		to bottom right,
		rgba(255, 223, 37, 0.45) 0%,
		rgba(255, 223, 149, 0.3) 24%,
		rgba(255, 223, 149, 0.22) 48%,
		rgba(255, 223, 149, 0) 62%
	);
}

.beam--message.is-beam-armed::before {
	transform: translate(-64%, -64%);
}

.beam--message.is-beam-armed.is-lit::before {
	animation-name: beam-sweep-diagonal;
}

@keyframes beam-sweep-diagonal {
	from {
		transform: translate(-64%, -64%);
		opacity: 0;
	}

	6% {
		opacity: 1;
	}

	to {
		transform: translate(0, 0);
		opacity: 1;
	}
}

/* --- 事業紹介: セクション上辺の中央から下へ --- */
.beam--business {
	/*
	 * Figmaの実測値は inset 0 -4.51% 0 -4.58% で左右ほぼ同じ。
	 * 完全に中央から照らすため、左右を揃えて -4.55% にしている。
	 */
	inset: 0 -4.55%;
	/*
	 * band-business.svg と同じ形（1571x3008 の座標を%に換算）。
	 * 上辺の幅 14.32% は原寸どおりで、中心をちょうど 50% に置いている
	 * （Figmaの原寸は 43.27%〜57.59% = 中心 50.43% でわずかに右寄り）。
	 */
	clip-path: polygon(42.84% 0, 57.16% 0, 100% 100%, 0 100%);
}

.beam--business::before {
	background-image: linear-gradient(
		to bottom,
		rgba(255, 223, 37, 0.45) 0%,
		rgba(255, 223, 149, 0.3) 24%,
		rgba(255, 223, 149, 0.22) 48%,
		rgba(255, 223, 149, 0) 62%
	);
}

.beam--business.is-beam-armed::before {
	transform: translateY(-64%);
}

.beam--business.is-beam-armed.is-lit::before {
	animation-name: beam-sweep-down;
}

@keyframes beam-sweep-down {
	from {
		transform: translateY(-64%);
		opacity: 0;
	}

	6% {
		opacity: 1;
	}

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

/* --- 福利厚生: 右上から左下へ --- */
.beam--benefits {
	/* Figma実測 inset: 1.82% -3.40% 0 -35.14% */
	inset: 1.82% -3.4% 0 -35.14%;
	/* band-benefits.svg と同じ頂点（1995x2374 の座標を%に換算）。
	   細い側（光源）が右上、広い側が下辺。 */
	clip-path: polygon(97.84% 0, 0 100%, 88.80% 100%, 100% 5.23%);
}

.beam--benefits::before {
	/* 光源が右上なので、ブロックの右端を枠の右端に合わせる */
	left: auto;
	right: 0;
	background-image: linear-gradient(
		to bottom left,
		rgba(255, 223, 37, 0.45) 0%,
		rgba(255, 223, 149, 0.3) 24%,
		rgba(255, 223, 149, 0.22) 48%,
		rgba(255, 223, 149, 0) 62%
	);
}

.beam--benefits.is-beam-armed::before {
	transform: translate(64%, -64%);
}

.beam--benefits.is-beam-armed.is-lit::before {
	animation-name: beam-sweep-downleft;
}

@keyframes beam-sweep-downleft {
	from {
		transform: translate(64%, -64%);
		opacity: 0;
	}

	6% {
		opacity: 1;
	}

	to {
		transform: translate(0, 0);
		opacity: 1;
	}
}

/*
 * --- 下層ページの背景の光 ---
 * 形と光の向きは2種類だけで、代表メッセージ・社員インタビューで共用する。
 * 位置（inset）はページごとに異なるので下の位置指定で分けている。
 *
 * Figmaの枠にはフッターが含まれるが実装の <article> には含まれないため、
 * 上下の%は article の高さに換算した値を使っている。
 */

/* 右上から左下へ差す形（Figma: 2117x2614 のベクター） */
.beam--tr {
	clip-path: polygon(100% 0, 91.14% 0, 0 63.22%, 27.35% 100%);
}

/* 光源が右上なので、ブロックの右端を枠の右端に合わせる */
.beam--tr::before {
	left: auto;
	right: 0;
	background-image: linear-gradient(
		to bottom left,
		rgba(255, 223, 37, 0.45) 0%,
		rgba(255, 223, 149, 0.3) 24%,
		rgba(255, 223, 149, 0.22) 48%,
		rgba(255, 223, 149, 0) 62%
	);
}

.beam--tr.is-beam-armed::before {
	transform: translate(64%, -64%);
}

.beam--tr.is-beam-armed.is-lit::before {
	animation-name: beam-sweep-downleft;
}

/* 左上から右下へ差す形（Figma: 1648x2366 のベクター） */
.beam--tl {
	clip-path: polygon(0 5.01%, 4.88% 0, 100% 51.69%, 100% 100%);
}

.beam--tl::before {
	background-image: linear-gradient(
		to bottom right,
		rgba(255, 223, 37, 0.45) 0%,
		rgba(255, 223, 149, 0.3) 24%,
		rgba(255, 223, 149, 0.22) 48%,
		rgba(255, 223, 149, 0) 62%
	);
}

.beam--tl.is-beam-armed::before {
	transform: translate(-64%, -64%);
}

.beam--tl.is-beam-armed.is-lit::before {
	animation-name: beam-sweep-diagonal;
}

/* 位置: 代表メッセージ */
.beam--msg-upper {
	inset: 11.66% -3.68% 49.26% -43.33%;
}

.beam--msg-lower {
	inset: 57.81% -5.9% 6.82% -8.54%;
}

/*
 * 位置: 社員インタビュー。
 * 2人でページの高さが違うため Figma 上の値も 1〜4% ずれるが、
 * テンプレートが共通なので2ページの平均値を使っている。
 */
.beam--iv-upper {
	inset: 10.23% -2.71% 55.51% -44.3%;
}

.beam--iv-lower {
	inset: 61.08% -6% 7.91% -8.44%;
}

/* 動きを減らす設定では走らせず、静止した状態で見せる
   （JS側でも .is-beam-armed を付けないようにしている） */
@media (prefers-reduced-motion: reduce) {
	.beam.is-beam-armed::before,
	.beam.is-beam-armed.is-lit::before {
		animation: none;
		transform: none;
		opacity: 1;
	}
}

/* ---------------------------------------------------------
   8. TOP: 代表メッセージ
   --------------------------------------------------------- */
.message {
	display: grid;
	grid-template-columns: minmax(0, 560fr) minmax(0, 540fr);
	gap: clamp(32px, 6vw, 93px);
	align-items: start;
	margin-top: 40px;
}

.message__body {
	margin-top: 30px;
	font-size: 16px;
	line-height: 1.52;
	letter-spacing: 0.1em;
}

.message__body p + p {
	margin-top: 1.5em;
}

.message__sign {
	margin-top: 30px;
	letter-spacing: 0.1em;
}

/*
 * 肩書きと署名の間隔。
 * Figma では 24.55px 空いている（「長」のインク右端から「佐」のインク左端まで）。
 * データには Figma と同じ半角スペース3つが入っているが、
 * HTML では連続する空白が1つに畳まれるため 6.16px しか空かない。
 * その差を足して Figma に合わせる。
 * 下層MVの署名は flex の gap: 24px で足りているので、こちらだけで調整する。
 */
.message__sign .brush {
	margin-left: 18.4px;
}

.message__figure img {
	width: 100%;
	aspect-ratio: 540 / 674;
	object-fit: cover;
}

/* セクションの右下からはみ出して配置する（Figma準拠）。
   .section の overflow: hidden で、はみ出した分は切れる。 */
.message__more {
	/* 円の直径。はみ出し量もこの値から出すので1箇所で管理する */
	--more-size: clamp(210px, 22vw, 314px);

	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	/* Figmaでは右へ43px・下へ51px（円の直径314pxに対して約14%・16%）はみ出す */
	translate: 14% 16%;
}

.message__more .circle-btn {
	width: var(--more-size);
}

/* ---------------------------------------------------------
   9. TOP: 育てる文化
   --------------------------------------------------------- */
/* 背景写真はビューポートに固定し、スクロールすると流れて見えるようにする
   （background-attachment: fixed によるパララックス）。 */
.section--culture {
	background-color: var(--night);
	/* culture-bg.webp は culture-bg.png から tools/optimize-images.py で生成している */
	background-image: url("../images/culture/culture-bg.webp");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var(--white);
}

/*
 * SPのパララックス用の背景写真。
 *
 * iOS Safari は background-attachment: fixed を実質サポートしていない。
 * そこで狭い画面では写真を <img> で置き、position: sticky で
 * 画面上端に留めることで「背景だけ止まって見える」動きを作る。
 * JS も translate も使わないので、環境差が出にくい。
 *
 * PCでは非表示にして、従来の background-attachment: fixed を使う
 * （確認済みの写真の見え方をそのまま残すため）。
 */
.section__parallax {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/*
 * 画面の高さぶんだけ写真を置き、スクロール中は上端に貼りつく。
 * 高さ 100vh ＋ object-fit: cover なので、
 * background-size: cover ＋ fixed とまったく同じ見え方になる。
 */
.section__parallax img {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

/* 夜空に散る光の粒。
   中心を #FFF9EC、外側へ #F3C969 をぼかして発光させる。 */
.section--culture::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		var(--spark), var(--spark), var(--spark), var(--spark),
		var(--spark), var(--spark), var(--spark), var(--spark),
		var(--spark), var(--spark), var(--spark), var(--spark),
		var(--spark), var(--spark);
	background-size:
		20px 20px, 10px 10px, 13px 13px, 24px 24px,
		11px 11px, 17px 17px, 10px 10px, 22px 22px,
		13px 13px, 15px 15px, 10px 10px, 18px 18px,
		11px 11px, 14px 14px;
	background-position:
		40% 3%, 31% 9%, 47% 15%, 56% 23%,
		37% 31%, 19% 36%, 62% 40%, 87% 46%,
		12% 53%, 71% 61%, 27% 71%, 84% 79%,
		52% 86%, 34% 93%;
}

.culture {
	display: grid;
	gap: clamp(48px, 6vw, 80px);
	margin-top: clamp(48px, 6vw, 80px);
}

.culture__item {
	display: grid;
	grid-template-columns: minmax(0, 600fr) minmax(0, 600fr);
	gap: clamp(28px, 4vw, 80px);
	align-items: center;
}

/* 偶数番目は画像を右に */
.culture__item:nth-child(even) .culture__figure {
	order: 2;
}

.culture__figure img {
	width: 100%;
	aspect-ratio: 600 / 401;
	object-fit: cover;
}

.culture__num {
	font-family: var(--font-en);
	font-weight: 400;
	font-size: clamp(34px, 3.6vw, 48px);
	line-height: 1.2;
	color: var(--yellow);
}

.culture__heading {
	margin-top: 12px;
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: clamp(21px, 2.6vw, 32px);
	line-height: 1.62;
}

.culture__body {
	margin-top: 24px;
	letter-spacing: 0.1em;
}

/* ---------------------------------------------------------
   10. TOP: サビデンキの仕事
   --------------------------------------------------------- */
.section--work {
	background: var(--dark);
	color: var(--white);
}

.work-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 23px;
	margin-top: clamp(40px, 5vw, 60px);
}

.work-card {
	/* Figma: カードは 303x463、内側の余白は20px */
	--card-h: 463px;
	--card-pad: 20px;
	/*
	 * Figma ではタイトルの上端がカード上端から283px（高さの61%）に固定されていて、
	 * 本文の長さに関わらず4枚のタイトルが横に揃う。下揃えではない。
	 * カードが低くなるSPでも同じ割合を保つ。
	 */
	--card-title-ratio: 0.61;
	--card-title-top: calc(var(--card-h) * var(--card-title-ratio));

	position: relative;
	min-height: var(--card-h);
	padding: var(--card-pad);
	overflow: hidden;
	isolation: isolate;
}

/*
 * タグ・タイトル・本文を行に割り当てる。
 * 1行目にタイトル位置までの高さを持たせることで、
 * 本文の長さが違ってもタイトルの高さが揃う。
 */
.work-card__body {
	display: grid;
	grid-template-rows: calc(var(--card-title-top) - var(--card-pad)) auto auto;
	align-content: start;
}

.work-card__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 差し替え後の画像はあらかじめ暗く調整されているため、
   暗幕は文字が乗る下部だけ、ごく薄くかける。 */
.work-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(32, 38, 37, 0) 0%, rgba(32, 38, 37, 0) 38%, rgba(32, 38, 37, 0.5) 100%);
}

.work-card__tag {
	/* 1行目の箱は高いので、中身は箱の上端に置く */
	align-self: start;
	display: flex;
	align-items: center;
	gap: 7px;
	letter-spacing: 0.1em;
}

.work-card__title {
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 20px;
	/*
	 * 字間はFigmaでは 0.1em（20pxで2px）だが、それだと12文字の見出しが
	 * 使える幅263pxに対して264pxで1pxだけ溢れ、最後の1文字だけが
	 * 2行目に落ちてしまう（そのカードだけ本文が38px下がる）。
	 * 0.07em なら12文字で256.8pxに収まる（13文字は254.1pxを超えるので入らない）。
	 */
	letter-spacing: 0.07em;
	line-height: 1.92;
	color: var(--yellow);
}

.work-card__text {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.78;
}

.work__catch {
	position: relative;
	z-index: 1;
	margin-top: clamp(48px, 6vw, 80px);
	text-align: center;
}

.work__catch-text {
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: clamp(22px, 3vw, 36px);
	line-height: 1.62;
	color: var(--white);
}

/* セクション下端が円の中心に来るように置く。
   .section の overflow: hidden で下半分が切れ、半円の光になる。
   Figmaはほぼ全面をぼかしたレイヤーブラーなので blur も強くかける。 */
.work__glow {
	position: absolute;
	left: 50%;
	bottom: 0;
	translate: -50% 50%;
	width: min(350px, 62vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yellow);
	filter: blur(60px);
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
}

/* ---------------------------------------------------------
   11. TOP: 事業紹介
   --------------------------------------------------------- */
.biz-main {
	display: grid;
	grid-template-columns: minmax(0, 513fr) minmax(0, 767fr);
	align-items: stretch;
	margin-top: clamp(40px, 5vw, 56px);
	background: var(--white);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.biz-main__image {
	width: 100%;
	height: 100%;
	aspect-ratio: 513 / 266;
	object-fit: cover;
}

.biz-main__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: clamp(24px, 3vw, 40px);
}

.biz-main__title {
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: clamp(20px, 2vw, 24px);
	letter-spacing: 0.06em;
}

.biz-main__text {
	font-size: 14px;
	line-height: 1.9;
}

/*
 * 事業紹介の見出し。狭い画面ではJSがこの中身を <button> へ移し、
 * タップで本文を開く形にする（開閉の見た目は @media 側）。
 *
 * ボタンの既定の装飾を消すのはここ（基本側）で行う。
 * 幅の切り替えでボタンが残ったままPC幅になっても、
 * 見出しと同じ見え方が保たれるようにするため。
 */
.biz-acc__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-align: left;
	cursor: default;
}

.biz-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 37px;
	margin-top: 37px;
}

.biz-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.biz-card__image {
	width: 100%;
	aspect-ratio: 402 / 220;
	object-fit: cover;
}

.biz-card__title {
	margin: 20px 20px 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.biz-card__text {
	margin: 10px 20px 20px;
	font-size: 14px;
	line-height: 1.9;
}

/* ---------------------------------------------------------
   12. TOP: 未経験からの、リアル。
   --------------------------------------------------------- */
/*
 * Figma: 1440pxで 600px のカードが 80px の間隔で2枚。
 * 4vw だと1440pxでは57.6pxしか開かず（80pxになるのは2000px以上）、
 * カードが11px太くなってしまうので 5.56vw（=80/1440）で測る。
 * 1列になるSPでは上下の間隔になり、375pxで32px（Figmaと同じ）。
 */
.voice-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 5.56vw, 80px);
	margin-top: clamp(40px, 5vw, 56px);
}

.voice-card__link {
	display: grid;
	gap: 20px;
	transition: transform 0.35s ease;
}

/* ホバーでカードごと浮かせる */
.voice-card__link:hover {
	transform: translateY(var(--lift-hover));
}

.voice-card__link:active {
	transform: translateY(var(--lift-active));
}

/*
 * 円ボタンは写真の右下角にはみ出させ、カードの枠で切り取る。
 * はみ出した分が切れることで、円の右側と下側が角にフィットする。
 *
 * Figma: 600x428 のカードに対し、直径 210px の円の中心が (520, 360)。
 * 右へ25px・下へ37px はみ出す。
 *
 * カードは aspect-ratio が固定なので、半径を「幅比」と「高さ比」の
 * 2つの%で持っても常に真円になる（17.5% × 600/428 = 24.53%）。
 */
.voice-card__media {
	position: relative;
	display: block;
	/* はみ出した円を角で切り取る */
	overflow: hidden;
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25);
	transition: box-shadow 0.35s ease;

	--hole-rx: 17.5%;
	--hole-ry: 24.53%;
	--hole-cx: 86.67%;
	--hole-cy: 84.11%;
}

.voice-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 600 / 428;
	object-fit: cover;
}

/*
 * カードのどこにホバーしても、円が光り、影が強まる。
 * 浮きはカード全体（.voice-card__link）にかけている。
 * 円だけを動かすと、角にぴったり合わせた形が崩れてしまうため。
 * .voice-card__media の overflow: hidden により、光はカード内に収まる。
 */
.voice-card__link:hover .voice-card__media {
	box-shadow: 0 16px 28px rgba(0, 0, 0, 0.3);
}

.voice-card__link:hover .circle-btn {
	box-shadow: var(--glow-hover);
}

.voice-card__media .circle-btn {
	position: absolute;
	transition: box-shadow 0.3s ease;
	width: calc(var(--hole-rx) * 2);
	left: calc(var(--hole-cx) - var(--hole-rx));
	top: calc(var(--hole-cy) - var(--hole-ry));
	/* 円の大きさに追従させる（固定20pxだと狭い画面で文字が入らない） */
	padding: 8%;
}

/* Figma: 見出しの行送り46.0 の下端から補足の行送り28.4 の上端まで10px */
.voice-card__body {
	display: grid;
	gap: 10px;
}

/* Figma: Shippori Mincho 700 / 24px / 行送り46.0（1.9185）/ 字間2.4（0.1em） */
.voice-card__title {
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: clamp(16px, 2vw, 24px);
	line-height: 1.9185;
	letter-spacing: 0.1em;
}

/*
 * Figma: YuGothic 500 / 16px / 行送り28.37（1.7731）/ 字間0。
 * 行送りの比はSP（12px / 21.28）でも同じなので、倍率で持つ。
 */
.voice-card__sub {
	line-height: 1.7731;
	letter-spacing: 0;
}

/*
 * カードの下に置く一覧ページへの導線。
 * TOPには2人だけ出すので、残りはここから一覧へ送る。
 *
 * 代表メッセージの円ボタン（.message__more）と同じ見え方にしている。
 * ただしあちらは写真に重ねるので absolute、こちらはカードの文章に
 * 重なってはいけないので流し込みのまま、負のマージンで右下へはみ出させる。
 * はみ出した分は .section の overflow: hidden で切れる。
 */
.voice-more {
	/* 円の直径。はみ出し量もこの値から出すので1箇所で管理する */
	--more-size: clamp(210px, 22vw, 314px);
	/* はみ出し量（直径に対する割合）。代表メッセージの円と同じ値。 */
	--more-out-x: 0.14;
	--more-out-y: 0.16;

	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(32px, 3.5vw, 56px);
	/*
	 * 下は「セクションの下余白ぶんを食べてから、さらに --more-out-y」なので
	 * --section-space を足している。
	 *
	 * 計算は変数に入れずここで行う。calc を変数に持たせると宣言した場所で
	 * 値が確定してしまい、あとから --more-size を上書きしても追従しない。
	 */
	margin-right: calc(var(--more-size) * var(--more-out-x) * -1);
	margin-bottom: calc(var(--more-size) * var(--more-out-y) * -1 - var(--section-space));
}

.voice-more .circle-btn {
	width: var(--more-size);
}

/* ---------------------------------------------------------
   13. TOP: キャリアアップ
   --------------------------------------------------------- */
.section--career {
	background: url("../images/career/career-bg.webp") center / cover no-repeat;
	color: var(--white);
}

.career-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 49px;
	margin-top: clamp(40px, 5vw, 56px);
}

.career-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* カード上端のタイムライン（ドット＋横線） */
.career-step__marker {
	display: flex;
	align-items: center;
	gap: 17px;
}

.career-step__marker::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.45);
}

.career-step__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}

/*
 * ステージ名のピル。Figmaでは段階が上がるほど黄色が濃くなる
 * 4段階の配色になっている（白 → #FFEDC3 → #FFDF95 → #F3C969）。
 */
.career-step__stage {
	padding: 4px 13.5px;
	border-radius: var(--radius-pill);
	background: var(--stage-bg, var(--yellow));
	color: var(--dark);
	font-size: 14px;
	line-height: 1.6;
}

.career-steps > .career-step:nth-child(1) {
	--stage-bg: var(--stage-1);
}

.career-steps > .career-step:nth-child(2) {
	--stage-bg: var(--stage-2);
}

.career-steps > .career-step:nth-child(3) {
	--stage-bg: var(--stage-3);
}

.career-steps > .career-step:nth-child(4) {
	--stage-bg: var(--stage-4);
}

.career-step__period {
	font-size: 14px;
	letter-spacing: 0.06em;
}

.career-step__title {
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.6;
}

.career-step__list {
	display: grid;
	gap: 5px;
	font-size: 14px;
	line-height: 1.6;
}

/*
 * 行頭のハイフンは福利厚生（.benefit-group__list）と同じ。
 * 半角ハイフン＋空白の幅は約0.8emなので、ぶら下げインデントも0.8em。
 * 全角ハイフンの1emのままだと、折り返した行が1行目の本文より右にずれる。
 */
.career-step__list li {
	padding-left: 0.8em;
	text-indent: -0.8em;
}

.career-step__list li::before {
	content: "- ";
	color: var(--yellow);
}

.career-step__note {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.45);
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.68;
}

.career__sub {
	margin-top: clamp(56px, 7vw, 96px);
}

.career-quals {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 81px;
	margin-top: 40px;
}

/*
 * Figmaでは1つ目・2つ目のフレームに右側だけ1pxの白いストロークが
 * 入っていて、それが項目間の仕切り線になっている。
 */
.career-qual {
	display: grid;
	gap: 14px;
	align-content: start;
}

.career-qual:not(:last-child) {
	border-right: 1px solid var(--white);
}

/* 取得時期は黄色のピル */
.career-qual__when {
	justify-self: start;
}

/* Figmaでは角丸なしの長方形 */
.career-qual__when span {
	display: inline-block;
	padding: 3px 20px;
	background: var(--yellow);
	color: var(--dark);
	letter-spacing: 0.04em;
}

.career-qual__title {
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 20px;
}

.career-qual__text {
	font-size: 14px;
	line-height: 1.8;
}

/* ---------------------------------------------------------
   14. TOP: 福利厚生
   --------------------------------------------------------- */
.benefit-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 4vw, 56px) 80px;
	align-items: start;
	margin-top: clamp(40px, 5vw, 56px);
}

.benefit-group__title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(32, 38, 37, 0.4);
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: clamp(20px, 2vw, 24px);
}

.benefit-group__title img {
	flex: none;
	width: 53px;
	height: 53px;
	object-fit: contain;
}

.benefit-group__list {
	display: grid;
	gap: 6px;
	margin-top: 20px;
}

.benefit-group__list li {
	/*
	 * 行頭のハイフンぶんだけ下げる（ぶら下げインデント）。
	 * 半角ハイフン＋空白の幅は約0.8em。全角ハイフンだった頃の
	 * 1.2em のままだと、折り返した行が1行目の本文より右にずれる。
	 */
	padding-left: 0.8em;
	text-indent: -0.8em;
	letter-spacing: 0.04em;
	line-height: 1.7;
}

/*
 * 行頭のハイフン。
 * Figma では半角ハイフン（U+002D）で、その1文字だけ --yellow。
 * 以前は全角ハイフン（U+FF0D）を濃色の50%で出していたため、
 * 長さも色も違っていた。
 */
.benefit-group__list li::before {
	content: "- ";
	color: var(--yellow);
}

.pickup {
	margin-top: clamp(48px, 6vw, 72px);
}

.pickup__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

/* Figmaでは角丸なしの長方形 */
.pickup__en {
	padding: 7px 20px;
	background: var(--yellow);
	color: var(--dark);
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
}

.pickup__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin-top: 28px;
}

.pickup__item {
	position: relative;
	padding: clamp(20px, 2.4vw, 30px);
	background: var(--white);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

/*
 * 右上の黄色い光。
 * Figma: 395x241 のカードに対し、直径132pxの円が右から30px・上から18px の位置。
 * （上位置は指示により 40px に調整）
 * レイヤーブラー 88.2 → CSSの blur() は半分相当なので 44px。
 * カードの overflow: hidden で外にはみ出した分は切れる。
 */
.pickup__item::after {
	content: "";
	position: absolute;
	right: 7.6%;
	top: 40px;
	width: 33.4%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yellow);
	filter: blur(44px);
}

.pickup__no,
.pickup__title,
.pickup__text {
	position: relative;
	z-index: 1;
}

.pickup__no {
	font-family: var(--font-en);
	font-weight: 600;
	/* Figma: Inter 600 20px / 行送り24.2（SPは14px / 16.9で同じ倍率） */
	font-size: 20px;
	line-height: 1.21;
	color: var(--yellow);
}

.pickup__title {
	margin-top: 8px;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.6;
}

.pickup__text {
	margin-top: 10px;
	line-height: 1.8;
}

/* ---------------------------------------------------------
   15. TOP: 選考の流れ
   --------------------------------------------------------- */
.section--flow {
	padding-top: 0;
}

.flow-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 15px;
	margin-top: clamp(40px, 5vw, 56px);
}

.flow-step {
	position: relative;
	padding-top: 44px;
}

/* 横線はドットの中心から右へ伸ばす（Figmaも x=14 から始まっている）。
   left: 0 だとドットの左に線がはみ出す。 */
.flow-step::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 14px;
	right: 0;
	height: 1px;
	background: rgba(32, 38, 37, 0.3);
}

/*
 * タイムライン上のドット。
 * Figmaは直径27pxの円にレイヤーブラー15＋芯12px という光の粒なので、
 * ほかの箇所と同じ --spark で描く。
 * 横線（::before の top: 13px）とドットの中心が重なるように置く。
 */
.flow-step::after {
	content: "";
	position: absolute;
	top: calc(13px - var(--dot-glow-size) / 2);
	left: calc(13.5px - var(--dot-glow-size) / 2);
	width: var(--dot-glow-size);
	height: var(--dot-glow-size);
	background: var(--spark);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.flow-step__no {
	position: absolute;
	top: 32px;
	left: 0;
	font-family: var(--font-en);
	font-weight: 300;
	font-size: 20px;
	letter-spacing: 0.08em;
}

.flow-step__title {
	margin-top: 28px;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 20px;
}

.flow-step__note {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.7;
}

/* ---------------------------------------------------------
   16. TOP: 写真帯 / CTA
   --------------------------------------------------------- */
.gallery-band {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery-band img {
	width: 100%;
	aspect-ratio: 360 / 487;
	object-fit: cover;
	display: block;
}

/*
 * Figma（セクション 1440x551）での配置:
 *   テキスト  x=128  y=346〜491（下端から60px上）
 *   円ボタン  x=720/1060  y=321〜621（下端で切れて 70px 分はみ出す）
 * つまり内容は下寄せで、円ボタンだけ下にはみ出して切れる。
 */
.cta {
	/*
	 * 円ボタンの直径。見切れ量の計算にも使うので、ここを唯一の出どころにする。
	 * Figma（1440px）で300px。狭い画面ではそのまま比率で縮む（300/1440 = 20.83vw）。
	 * 下限180pxが効くのは864px以下で、そこはSPの並びに切り替わっている。
	 */
	--cta-circle: clamp(180px, 20.83vw, 300px);
	/* テキスト下端からセクション下端までの距離 */
	--cta-pad-bottom: 60px;

	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 551px;
	overflow: hidden;
	color: var(--white);
}

.cta__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

/*
 * Figmaは「左に文章・右に円2つ」の横並び。
 *
 * 折り返しを許すと、幅が足りなくなった時点で「文章の下に円が2つ」という
 * Figmaに無い2段組みに切り替わってしまう（1400px付近から発生していた）。
 * ここでは折り返さず、中身をすべて画面幅に比例させて縮める。
 * 横に並びきらなくなる900px以下は、下の @media でSPの並びにする。
 */
.cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: space-between;
	/* Figma（1440px）で56px → 56/1440 = 3.89vw */
	gap: clamp(24px, 3.89vw, 56px);
	/* テキストの下端をセクション下端から60px上に置く */
	padding-bottom: var(--cta-pad-bottom);
}

.cta__text {
	/* Figmaではコンテナ左端よりさらに内側から始まる（1440pxで48px） */
	padding-left: clamp(0px, 3.33vw, 48px);
	/*
	 * flex の既定（min-width: auto）だと文章の箱が最小内容幅より縮まず、
	 * 円を押し出してしまう。余りは文章側で吸収させる。
	 */
	min-width: 0;
}

.cta__heading {
	font-family: var(--font-mincho);
	font-weight: 700;
	/* Figma（1440px）で40px → 40/1440 = 2.78vw */
	font-size: clamp(24px, 2.78vw, 40px);
	line-height: 1.4;
}

.cta__lead {
	margin-top: 20px;
	font-size: 14px;
	line-height: 2;
}

.cta__actions {
	display: flex;
	/* 円2つは常に横並び。縮むのは直径のほうで受ける。 */
	flex-wrap: nowrap;
	flex: none;
	/* Figma（1440px）で40px → 40/1440 = 2.78vw */
	gap: clamp(24px, 2.78vw, 40px);
	/*
	 * 円の下側をセクションの下端で切る。
	 * テキスト下端の位置まで戻したうえで、Figmaと同じ割合
	 * （直径300pxの円で70px）だけ下へ伸ばす。
	 *
	 * 見切れ量はここで計算する。--cta-circle を使う式を .cta 側に置くと、
	 * その時点の直径で値が確定してしまい、SPで直径を上書きしても
	 * 見切れ量が追従しない。
	 */
	margin-bottom: calc((var(--cta-pad-bottom) + var(--cta-circle) * 70 / 300) * -1);
}

/* ---------------------------------------------------------
   17. 下層ページ共通
   --------------------------------------------------------- */
/* デザインでは帯が下寄せ。上半分に人物の顔が入るようにする。 */
.lower-mv {
	position: relative;
	display: grid;
	padding-right: var(--gutter);
	/*
	 * MVの高さ。Figma は 780px。縦の短い画面では下限で止める。
	 */
	--mv-h: clamp(600px, 84vh, 780px);
	min-height: var(--mv-h);
	/*
	 * 文字の位置は「上から何割か」で決める。
	 * 以前は下揃え＋固定の下余白だったため、画面の高さで MV が縮むと
	 * 文字が上へ寄って写真の顔にかかることがあった
	 * （900px高で 41.5%、700px高では 32.9% まで上がっていた）。
	 * 比率で決めれば、画面の高さが変わっても構図が保たれる。
	 *
	 * Figma は 54%（MV 780px の 421px）だが、人物の顔にかかりやすいため
	 * 少し下げている。位置を調整したいときはこの値だけを変える。
	 */
	--mv-title-ratio: 0.6;
	align-items: start;
	padding-block: calc(var(--mv-h) * var(--mv-title-ratio)) clamp(40px, 4.7vw, 68px);
	overflow: hidden;
	color: var(--white);
}

.lower-mv__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.lower-mv__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

/* 下層MVは文字が濃色の帯に乗るため、写真はほぼそのまま見せる */
.lower-mv__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 24, 40, 0.12) 0%, rgba(16, 24, 40, 0.22) 100%);
}

/* タイトル帯は画面左端まで、プロフィールは右端まで届く（Figma準拠） */
.lower-mv__body {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: start;
	gap: 14px;
	width: 100%;
}

.lower-mv__stack {
	display: grid;
	justify-items: start;
	gap: 6px;
	width: 100%;
	min-width: 0;
}

.lower-mv__title {
	display: grid;
	justify-items: start;
	gap: 6px;
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: clamp(22px, 3.6vw, 48px);
	line-height: 1.62;
}

.lower-mv__band {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	padding: 10px clamp(20px, 4.2vw, 60px);
	background: var(--dark-btn);
}

.lower-mv__sub {
	font-weight: 500;
	font-size: clamp(16px, 1.8vw, 24px);
	letter-spacing: 0.1em;
	line-height: 1.92;
}

.lower-mv__profile {
	justify-self: end;
	/*
	 * 肩書きと氏名（筆文字）を横に並べる。
	 * flex にすることで、間隔を gap で、揃えを align-items で指定できる。
	 * 文字サイズが 16px と 29.6px で違うので、箱の下端ではなく
	 * ベースラインで揃える。
	 */
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 16px clamp(20px, 3vw, 40px);
	background: var(--dark-btn);
	/* 右端まで抜けるので、コンテナ右余白のぶんを打ち消す */
	margin-right: calc(var(--gutter) * -1);
	padding-right: calc(clamp(20px, 3vw, 40px) + var(--gutter));
}

/*
 * 氏名と肩書きが別要素になっている社員インタビューだけ縦に積む。
 * 代表メッセージは1行のテキストなので、grid にすると
 * 素のテキストと筆文字の <span> が別の行に分かれてしまう。
 */
.lower-mv__profile:has(.lower-mv__person) {
	display: grid;
	gap: 2px;
	/* Figmaの指定どおり左揃え */
	text-align: left;
}

.lower-mv__person {
	font-family: var(--font-mincho);
	font-weight: 500;
	font-size: clamp(17px, 1.6vw, 21px);
	letter-spacing: 0.1em;
}

.lower-mv__role {
	letter-spacing: 0.1em;
}

.lower-head {
	padding-block: clamp(48px, 6vw, 80px) 0;
}

/* --- 記事本体 --- */
/* 背景の光を配置する基準。はみ出した光はここで切る。 */
.article {
	position: relative;
	overflow: hidden;
}

/*
 * 背景のぼやけた光。
 * Figma: 350pxの円にレイヤーブラー348.2（CSSの blur() は半分相当で174px）。
 * 上下の%は、フッターを含まない <article> の高さに換算した値。
 */
.article__glow {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: 350px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yellow);
	filter: blur(174px);
}

/* 代表メッセージ: Chapter 02 の直前・右寄り */
.article--message .article__glow--1 {
	top: 33.49%;
	left: 68.89%;
}

/* 代表メッセージ: Chapter 03 の直前・右寄り */
.article--message .article__glow--2 {
	top: 50.11%;
	left: 66.67%;
}

/* 代表メッセージ: 結びの一文のあたり・中央寄り */
.article--message .article__glow--3 {
	top: 95.16%;
	left: 40.62%;
}

/* 社員インタビュー（2ページの平均値） */
.article--interview .article__glow--1 {
	top: 30.66%;
	left: 69.09%;
}

.article--interview .article__glow--2 {
	top: 52.64%;
	left: 70.07%;
}

.article__inner {
	position: relative;
	z-index: 1;
	/* MVとの間隔。リード文の光の筋をMV直下まで伸ばす計算にも使う。 */
	--article-pad: clamp(56px, 7vw, 96px);
	padding-block: var(--article-pad);
	/* 章と章の間隔。光の筋の長さの計算にも使う。 */
	--chapter-gap: clamp(64px, 8vw, 112px);
	/*
	 * 章ラベル1行の高さ。光の粒と光の筋の縦位置の基準。
	 * font-size 20px × 本文の行間 1.92 の実測値で、ラベル側にも同じ値を効かせている。
	 */
	--label-line: 38.4px;
	/*
	 * ブロックの上端から光の粒の中心までの距離。
	 * ラベルはブロックの最初の子なので、1行の高さの半分＝ラベルの中心になる。
	 */
	--dot-center: calc(var(--label-line) / 2);
	/* 光の筋をブロックの下端よりさらに伸ばす長さ */
	--streak-extend: 90px;
}

/* 章と同じく、光の粒と下へ伸びる筋の基準になる */
.article__lead {
	position: relative;
	margin-bottom: clamp(40px, 5vw, 64px);
	letter-spacing: 0.1em;
	line-height: 1.93;
}

.chapter + .chapter,
.promise {
	margin-top: var(--chapter-gap, clamp(64px, 8vw, 112px));
}

.chapter__label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	/* --label-line とずれると光の粒の位置が合わなくなるので、ここで固定する */
	line-height: var(--label-line);
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.04em;
	color: var(--yellow);
}

/*
 * 章の先頭のドットは光の粒。ラベルが現れるのと同時に点灯する。
 * Figmaでも 22px の円にレイヤーブラー、中心に 9px のクリーム色という
 * 光の粒として描かれている。
 */
.chapter {
	position: relative;
}

.chapter__label .dot {
	position: absolute;
	left: -60px;
	top: calc(var(--dot-center) - var(--dot-glow-size) / 2);
	width: var(--dot-glow-size);
	height: var(--dot-glow-size);
	background: var(--spark);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: none;
}

.chapter__label .dot::after {
	content: none;
}

/* ラベルが現れたら、粒がふっと灯る */
.chapter__label.is-visible .dot {
	animation: dot-ignite 0.7s ease both;
}

@keyframes dot-ignite {
	from {
		opacity: 0;
		scale: 0.4;
	}

	60% {
		opacity: 1;
		scale: 1.15;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

/*
 * 粒が灯ったあと、下へスーッと伸びる光の筋。
 * 粒の中心から始まり、次の章の粒の中心まで届く。
 */
.chapter__streak {
	position: absolute;
	/* ドット（32px・left -60px）の中心に合わせる */
	left: -45px;
	/*
	 * 粒の下端から出す。中心から出すと筋が粒の芯を横切って隠してしまう。
	 */
	top: calc(var(--dot-center) + var(--dot-glow-size) * 0.3);
	bottom: calc(-1 * var(--streak-extend));
	width: 2px;
	/* 末端は消える。消え始めを遅らせて、見える長さを稼いでいる。 */
	background-image: linear-gradient(
		to bottom,
		var(--yellow) 0%,
		rgba(243, 201, 105, 0.6) 72%,
		rgba(243, 201, 105, 0) 100%
	);
	transform-origin: top center;
	scale: 1 0;
	transition: scale 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) 0.35s;
	pointer-events: none;
}

/*
 * リード文の筋だけは光の粒を持たず、MVの下端から始まる。
 * リード文は .article__inner の最初の子なので、
 * 上の余白ぶん戻せばちょうどMVの境目に届く。
 */
.article__lead .chapter__streak {
	top: calc(-1 * var(--article-pad));
}

/* ラベル（リード文では本文）が現れたら、筋が下へ伸びる */
.chapter__label.is-visible ~ .chapter__streak,
.article__lead.is-visible .chapter__streak {
	scale: 1 1;
}


.chapter__heading {
	margin-top: 18px;
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: clamp(21px, 2.8vw, 32px);
	line-height: 1.62;
	color: var(--ink-strong);
}

.article__body {
	margin-top: 32px;
	letter-spacing: 0.1em;
	line-height: 1.93;
}

.article__body p + p {
	margin-top: 1.5em;
}

/*
 * 引用。Figmaでは先頭に2pxの縦ライン（フレームの左ストローク）が入る。
 * 以前は下線として実装していたが、これは誤りだった。
 * 余白 10px 0 10px 30px も Figma の指定どおり。
 */
.article__quote {
	margin-top: 40px;
	padding: 10px 0 10px 30px;
	border-left: 2px solid var(--yellow);
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: clamp(18px, 2vw, 24px);
	letter-spacing: 0.04em;
	line-height: 1.99;
	color: var(--ink-strong);
}

.article__figure,
.article__figures {
	margin-top: clamp(40px, 5vw, 56px);
}

.article__figure img {
	width: 100%;
	aspect-ratio: 1200 / 620;
	object-fit: cover;
}

.article__figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 42px;
}

.article__figures img {
	width: 100%;
	aspect-ratio: 579 / 319;
	object-fit: cover;
}

/* 記事の最後に置く戻り導線。ページの終わりなので中央に置く。 */
.article__back {
	margin-top: clamp(56px, 7vw, 96px);
	text-align: center;
}

/* --- 画像つきトピックカード --- */
/*
 * 画像＋白いパネルのカード。
 * 記事の背景が白いため、影がないと白いパネルの輪郭が見えず
 * カードとして認識できない。Figmaにも影が指定されている
 * （offset -4,4 / blur 12.2 / 黒25%）。
 */
.topic-card {
	display: grid;
	grid-template-columns: minmax(0, 347fr) minmax(0, 853fr);
	align-items: stretch;
	margin-top: clamp(40px, 5vw, 56px);
	background: var(--white);
	box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.25);
	/* テキストが短くても、Figmaのカードと同程度の高さを保つ */
	min-height: 283px;
}

/*
 * 画像は絶対配置にして、カードの高さに影響させない。
 * 通常の配置だと、縦長の写真を入れたときにカードが写真の比率まで
 * 引き伸ばされてしまう（347px幅に対して521pxなど）。
 * カードの高さはテキスト量で決まり、写真はそこに合わせて切り取られる。
 */
.topic-card__image {
	position: relative;
	overflow: hidden;
}

.topic-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.topic-card__body {
	padding: 40px;
}

.topic-card__title {
	margin-bottom: 24px;
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.62;
}

.topic-card__body p {
	letter-spacing: 0.06em;
	line-height: 1.54;
}

.topic-card__body p + p {
	margin-top: 1.2em;
}

/* --- 濃色のまとめボックス --- */
.note-box {
	position: relative;
	margin-top: clamp(40px, 5vw, 56px);
	padding: clamp(28px, 3.4vw, 44px);
	background: var(--dark);
	color: var(--white);
	overflow: hidden;
}

/*
 * 右側のぼやけた光。
 * Figma: 147pxの円にレイヤーブラー97.3（CSSの blur() は半分相当で49px）。
 * 枠の内側（右20px・上26px）に置かれ、overflow: hidden で切られる。
 */
.note-box::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 26px;
	width: 147px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yellow);
	filter: blur(49px);
}

/* Figmaの本文は枠の内寸いっぱい。ぼかした光は背面なので避ける必要がない。 */
.note-box > * {
	position: relative;
	z-index: 1;
}

.note-box__label {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: 21px;
	letter-spacing: 0.1em;
}

.note-box__heading {
	margin-top: 20px;
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: clamp(21px, 2.6vw, 32px);
	line-height: 1.62;
}

.note-box__text {
	margin-top: 20px;
	letter-spacing: 0.1em;
	line-height: 1.93;
}

/* --- 代表メッセージ 末尾の約束ブロック --- */
.promise__intro,
.promise__outro {
	letter-spacing: 0.1em;
	line-height: 1.93;
}

.promise__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin-block: 32px;
}

.promise__item {
	position: relative;
	padding: 20px 40px;
	background: var(--dark);
	color: var(--white);
	overflow: hidden;
}

.promise__item p {
	position: relative;
	z-index: 1;
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: clamp(18px, 2vw, 24px);
	line-height: 1.62;
}

/*
 * 右下のぼやけた光。
 * Figma: 80pxの円にレイヤーブラー64.2（CSSの blur() は半分相当で32px）。
 * カードからはみ出さず内側に置かれている（right 12px / bottom 7px）。
 * .promise__item の overflow: hidden で、にじみはカード内に収まる。
 */
.promise__mark {
	position: absolute;
	right: 12px;
	bottom: 7px;
	width: 80px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yellow);
	filter: blur(32px);
}

.promise__outro {
	margin-top: 32px;
}

/*
 * 結びの一文。
 * データには「一緒に、」のうしろに改行が入っているが、
 * PC・SPともFigmaは1行なので効かせない。
 */
.promise__closing br {
	display: none;
}

.promise__closing {
	margin-top: 120px;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: clamp(22px, 3vw, 36px);
	line-height: 1.62;
	color: var(--ink-strong);
	text-align: center;
}

.notice {
	padding: 24px;
	background: rgba(243, 201, 105, 0.18);
	border-left: 4px solid var(--yellow);
}

.post-list__item + .post-list__item {
	margin-top: 12px;
	border-top: 1px solid rgba(32, 38, 37, 0.15);
	padding-top: 12px;
}

.post-list__item a {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
}

/* ---------------------------------------------------------
   18. 社員インタビュー一覧
   --------------------------------------------------------- */

/*
 * Figma: 「社員インタビュー一覧」(466:287) 1440x2020 / フッターは y=1459 から。
 *
 *   写真帯      y   0〜487（ヘッダーが透過で重なる）
 *   ラベルの帯  y 607〜653（高さ46・中心630）
 *   見出し      y 682〜747
 *   カード      y 807〜1339
 *   フッター    y 1459
 *
 * カードはTOPの .voice-card をそのまま使う（Figmaでも同じコンポーネント）。
 * ここではページ固有の余白・背景の光だけを持たせる。
 */
.section--voice-list {
	/*
	 * 上の余白は「ラベルの黄色い帯の中心」をFigmaの位置に合わせて決める。
	 * 帯（.section-label::before）はラベルの上下中央に置かれるので、
	 * 写真帯の下端から帯の中心までの距離から、ラベルの高さの半分を引く。
	 *   PC: 帯の中心630 − 写真帯487 = 143 − 38.4/2 = 124px
	 *   SP: 帯の中心556 − 写真帯508 =  48 − 24/2   =  37px
	 * （ラベルの高さはPCが文字の行送り38.4px、SPはアイコンの24px）
	 *
	 * 下の余白はカード下端からフッターまで（PC 120px / SP 32px）。
	 */
	padding-block: clamp(37px, 8.61vw, 124px) clamp(32px, 8.33vw, 120px);

	/* 背景のぼやけた光（Figma: 350pxの円・レイヤーブラー348.2） */
	--voice-glow-size: 350px;
	--voice-glow-blur: 174px;
	/* 円の中心。Xは画面幅比、Yはセクション上端からの距離。 */
	--voice-glow-x: 81.6%;
	--voice-glow-y: 228px;
}

/* Figma: ラベルの帯の下端653 から見出しの上端682 まで29px（帯とラベルの差4pxを足して33px） */
.section--voice-list .section-label {
	margin-bottom: clamp(28px, 2.29vw, 33px);
}

/* Figma: 見出しの下端747 からカードの上端807 まで60px */
.section--voice-list .voice-cards {
	margin-top: clamp(32px, 4.17vw, 60px);
}

/*
 * 光は .section の overflow: hidden で切り取られる。
 * 本文（.section__inner）は z-index: 1 なので、この光より前に出る。
 */
.voice-list__glow {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	top: var(--voice-glow-y);
	left: var(--voice-glow-x);
	translate: -50% -50%;
	width: var(--voice-glow-size);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yellow);
	filter: blur(var(--voice-glow-blur));
}

/*
 * ページ送り。Figmaに指定が無いため、サイト共通の「黄色い丸」の調子に合わせている。
 * 数字・矢印・省略記号（…）すべてを同じ大きさの丸に揃えるので、
 * 件数が増えて桁が変わっても列の高さがぶれない。
 */
.pager {
	--pager-size: 48px;
	margin-top: clamp(40px, 5vw, 72px);
}

.pager__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 1vw, 14px);
}

.pager__item a,
.pager__item .current,
.pager__item .dots {
	display: grid;
	place-content: center;
	width: var(--pager-size);
	height: var(--pager-size);
	border-radius: 50%;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	color: var(--dark);
}

/* リンクになっているページ番号と矢印 */
.pager__item a {
	border: 1px solid rgba(32, 38, 37, 0.3);
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pager__item a:hover {
	background: var(--yellow);
	border-color: var(--yellow);
	box-shadow: var(--glow-hover);
}

/* 表示中のページ。丸ボタンと同じく、常に光らせておく。 */
.pager__item .current {
	background: var(--yellow);
	box-shadow: 0 0 24px rgba(243, 201, 105, 0.7);
}

/* 省略記号は枠を出さない */
.pager__item .dots {
	opacity: 0.6;
}

/* 前へ／次への矢印。ボタンと同じ mask を使うので色は文字色に追従する。 */
.pager__arrow {
	display: block;
	width: 20px;
	height: 8px;
	background: currentColor;
	-webkit-mask: var(--arrow-right) no-repeat center / contain;
	mask: var(--arrow-right) no-repeat center / contain;
}

.pager__arrow--prev {
	rotate: 180deg;
}

/* ---------------------------------------------------------
   19. フッター
   --------------------------------------------------------- */
.site-footer {
	position: relative;
	padding-block: clamp(72px, 9vw, 120px) 40px;
	background: var(--dark);
	color: var(--white);
	overflow: hidden;
}

/*
 * 右上のぼかした光。
 * Figma: 350pxの円が、フッター(1440x561)の右端から60px外・上端から87px外に
 * はみ出す位置。レイヤーブラー 308 → CSSの blur() は半分相当なので 154px。
 * フッターの overflow: hidden で、はみ出した分は切れる。
 */
.site-footer__glow {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	top: -87px;
	right: -60px;
	width: 350px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yellow);
	filter: blur(154px);
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(32px, 4vw, 56px);
}

.site-footer__logo img {
	display: block;
	width: clamp(200px, 22vw, 298px);
	height: auto;
}

.site-footer__address {
	margin-top: 40px;
	font-weight: 700;
	line-height: 1.5;
}

/*
 * Figmaではナビの上端がロゴの下端（フッター上から179px）に揃っている。
 * ブランド側と同じ位置から始めると59px上にずれるため下げる。
 * ロゴ幅が可変なので、下げ幅も同じ比率（59/1440 = 4.1vw）で追従させる。
 */
.site-footer__nav {
	display: flex;
	gap: 40px;
	margin-top: clamp(36px, 4.1vw, 59px);
}

.site-footer__list {
	display: grid;
	gap: 18px;
	align-content: start;
	min-width: 160px;
	font-weight: 700;
}

.site-footer__copy {
	grid-column: 1 / -1;
	margin-top: clamp(32px, 4vw, 56px);
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 12px;
}

/* ---------------------------------------------------------
   20. レスポンシブ
   --------------------------------------------------------- */
@media (max-width: 1180px) {
	.work-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.career-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}

	.career-quals {
		gap: 32px;
	}

	/* 3列でなくなると行末に線が残るので消す */
	.career-qual:not(:last-child) {
		border-right: 0;
	}

	.flow-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 15px;
	}
}

@media (max-width: 900px) {
	/*
	 * iOS Safari では background-attachment: fixed が効かないので、
	 * CSSの背景写真をやめて .section__parallax の <img> に任せる。
	 */
	.section--culture {
		background-image: none;
		/*
		 * sticky は「いちばん近いスクロール領域」を基準にする。
		 * .section の overflow: hidden は自分自身をスクロール領域にしてしまい、
		 * 中の sticky がページのスクロールに反応しなくなる。
		 * 見た目が同じで、スクロール領域を作らない clip-path で切る。
		 */
		overflow: visible;
		clip-path: inset(0);
	}

	.section__parallax {
		display: block;
	}

	html {
		scroll-padding-top: 84px;
	}

	.site-header__inner {
		min-height: 72px;
	}

	body:not(.has-hero) .site-main {
		padding-top: 72px;
	}

	/*
	 * ドロワーは濃色（Figma: #202625）。
	 * ヘッダーは帯を敷かず、ロゴは白のまま重ねる
	 * （以前はドロワーが白だったため、帯を白くしてロゴを反転させていた）。
	 */
	.site-header:has(.site-nav.is-open) {
		background: transparent;
	}

	/*
	 * ドロワーが画面上端まで覆うので、ヘッダーのロゴは隠す。
	 * Figmaのドロワーにはロゴが1つ（298pxの大きいもの）しかない。
	 * visibility なら場所は残るので、右の閉じるボタンの位置は動かない。
	 */
	.site-header:has(.site-nav.is-open) .site-header__logo {
		visibility: hidden;
	}

	/*
	 * 閉じるボタンは白にする。
	 * 3本線は濃色（--dark）なので、同じ濃色のドロワーに重なると見えなくなる。
	 */
	.site-header:has(.site-nav.is-open) .nav-toggle {
		color: var(--white);
	}

	/*
	 * 白くするのは×を作る2本（擬似要素）だけ。
	 * 中央の線は開いている間 transparent にして×にしているので、
	 * ここで色を付けると3本線に戻ってしまう。
	 */
	.site-header:has(.site-nav.is-open) .nav-toggle__bars::before,
	.site-header:has(.site-nav.is-open) .nav-toggle__bars::after {
		background: var(--white);
	}

	/*
	 * 閉じるボタンはドロワーより前に出す。
	 * .site-nav はこのボタンと同じ .site-header の中にあり、
	 * z-index: 90 を持つため、指定しないとドロワーが上に重なって
	 * ボタンが隠れてしまう（ヘッダー全体のz-indexは効かない）。
	 */
	.nav-toggle {
		display: flex;
		position: relative;
		z-index: 91;
	}

	/*
	 * Figma（ハンバーガーメニュー 375x490）:
	 *   背景 #202625 / ロゴ298x59 を上部中央 / ナビ4項目を中央寄せ /
	 *   最後に募集要項ボタン 280x40
	 */
	.site-nav {
		position: fixed;
		/*
		 * Figmaのドロワーは画面の上端から濃色で覆う。
		 * 以前はヘッダーの下（72px）から始めていたため、
		 * 上のヘッダー分だけ後ろのMV写真が透けていた。
		 */
		inset: 0;
		z-index: 90;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 0;
		/* Figma: ロゴの上端が y=60 */
		padding: 60px var(--gutter) 48px;
		background: var(--dark);
		color: var(--white);
		translate: 100% 0;
		visibility: hidden;
		transition: translate 0.3s ease, visibility 0.3s;
		overflow-y: auto;
	}

	/*
	 * 右上のぼかした光。
	 * Figma: 157pxの円が上-34px・右-26px、レイヤーブラー122
	 * （CSSの blur() は半分相当なので61px）。
	 * ドロワーの外にはみ出した分は overflow で切れる。
	 */
	.site-nav::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: -34px;
		right: -26px;
		width: 157px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--yellow);
		filter: blur(61px);
		pointer-events: none;
	}

	/* Figma: ロゴはヘッダー直下（y=60）に幅298pxで中央 */
	.site-nav__logo {
		display: block;
		margin: 0 auto;
	}

	.site-nav__logo img {
		display: block;
		width: min(298px, 79.5vw);
		height: auto;
	}

	/* Figma: ロゴ下端(119) → 1項目目(183) の間隔 64px */
	.site-nav__list {
		margin-top: 64px;
	}

	/* Figma: ナビ最後(333) → ボタン上端(385) の間隔 52px */
	.site-nav__cta {
		margin-top: 52px;
	}

	.site-nav a {
		color: var(--white);
	}

	.site-nav.is-open {
		translate: 0 0;
		visibility: visible;
	}

	/* Figma: 16px 太字・中央寄せ・項目の間隔42px（文字24px＋余白18px） */
	.site-nav__list {
		flex-direction: column;
		align-items: center;
		gap: 18px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
	}

	/*
	 * Figma: 募集要項ボタンは 280x45（背後の光の矩形が280x40）。
	 * 高さは既定のままでFigmaと一致するので指定しない。
	 * 文字はドロワーでは白（ヘッダーやMVでは黄色）。
	 */
	.site-nav__cta .btn {
		min-width: min(280px, 74.7vw);
		color: var(--white);
	}

	.message,
	.culture__item,
	.biz-main,
	.voice-cards,
	.benefit-groups,
	.promise__list,
	.topic-card,
	.article__figures {
		grid-template-columns: minmax(0, 1fr);
	}

	.culture__item:nth-child(even) .culture__figure {
		order: 0;
	}

	/*
	 * CTAはFigmaのPCデザイン（文章の右に円2つ）を画面幅に比例して
	 * 縮めているが、900px以下では横に並びきらない。
	 * ここからSPと同じ「文章の下に円2つ」に切り替える。
	 */
	.cta__inner {
		flex-wrap: wrap;
	}

	.cta__actions {
		/* Figma(SP): 円は149px、間隔29px、下端から27pxはみ出して切れる */
		--cta-gap: 29px;
		/*
		 * 内側の幅を2等分。ただしPCの300pxより大きくはしない
		 * （900px近くでは2等分すると円が385pxまで膨らんでしまう）。
		 */
		--cta-circle: min(calc((100% - var(--cta-gap)) / 2), 300px);
		flex: 1 0 100%;
		/*
		 * 円は画面の中央に置く。375pxでは2つで幅いっぱいになるので
		 * 見た目は変わらないが、上限300pxが効く広い画面では
		 * 左に寄らず中央にそろう。
		 */
		justify-content: center;
		gap: var(--cta-gap);
		/*
		 * 見切れる割合はPC（直径300pxで70px）と違い、SPは149pxで27px。
		 * PC用の式が効いたままだと切れ過ぎる。
		 */
		margin-bottom: calc((var(--cta-pad-bottom) + var(--cta-circle) * 27 / 149) * -1);
	}

	.cta__text {
		padding-left: 0;
	}

	/*
	 * 1カラムになると2つのカードが別の行に入るため、
	 * 放っておくと行数の違いで高さがずれる。
	 * 行の高さを 1fr で揃えると、両方が高いほうに合う。
	 */
	.promise__list {
		grid-auto-rows: 1fr;
	}

	/*
	 * SPデザインでは 写真 → 見出し → 本文 → 署名・ボタン の順。
	 * PCは左に文章・右に写真の2列なので、1列になるSPだけ写真を先に出す。
	 */
	.message__figure {
		order: -1;
	}

	/*
	 * 1カラムになると写真がセクション内の最後に来る。
	 * PCと同じ「写真の右下に重ねて右へはみ出す」関係を保つため、
	 * PCでの重なり（円の直径の47%）と right へのはみ出し（14%）を
	 * そのままの割合で負のマージンにする。
	 * .message__more は .inner の外にあるので、右端は画面の端になる。
	 */
	.message__more {
		/*
		 * static のままだと z-index が効かず、
		 * .section__inner（z-index: 1）の下に潜って写真に隠れる。
		 */
		position: relative;
		translate: none;
		display: flex;
		justify-content: flex-end;
		margin-top: calc(var(--more-size) * -0.47);
		margin-right: calc(var(--more-size) * -0.14);
	}

	.biz-cards,
	.pickup__list,
	.career-quals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * ギャラリーはSPでも4枚を横一列。
	 * Figma（スマホTOP）では 94x127 が隙間なく4枚並ぶ。
	 * 基本の指定（4列・縦横比 360/487 = 0.739）がそのままFigmaと合うので、
	 * 以前入れていた2列の上書きをやめる。
	 */

	/*
	 * Figma（スマホフッター 375x809）:
	 *   ロゴ298pxを中央 / 住所12pxを中央 / ナビは1列・中央寄せ16px太字 /
	 *   区切り線327px / コピーライト12pxを中央
	 * すべて中央揃えなので、内側の並びも中央に寄せる。
	 */
	/* Figma: 上の余白60px・下17px */
	.site-footer {
		padding-block: 60px 17px;
	}

	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		/*
		 * 行間はこのあとの各要素の margin-top で決める。
		 * grid の gap を残すと margin と二重になって間隔が広がる。
		 */
		gap: 0;
	}

	/* Figma: 幅298px（画面の79.5%）で中央 */
	.site-footer__logo img {
		width: min(298px, 79.5vw);
		margin-inline: auto;
	}

	/* Figma: ロゴ下端(119) → 住所(175) の間隔56px、12px / 行送り18 */
	.site-footer__address {
		margin-top: 56px;
		font-size: 12px;
		line-height: 1.5;
	}

	/*
	 * ナビは1列。以前は2列にしていたが、SPデザインでは
	 * 11項目すべてが縦一列に並ぶ。
	 * 2つのリストの間も項目間と同じ18pxにして、
	 * 一続きの列に見えるようにする。
	 */
	.site-footer__nav {
		margin-top: 52px;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	/* Figma: 16px 太字・中央寄せ・項目の間隔42px（文字24px＋余白18px） */
	.site-footer__list {
		min-width: 0;
		gap: 18px;
		font-size: 16px;
		line-height: 1.5;
		text-align: center;
	}

	/* Figma: ナビ下端(705) → 線(757) 52px、線 → コピー(774) 17px */
	.site-footer__copy {
		/* 区切り線を本文幅いっぱいに引くため、中央寄せでも幅は詰めない */
		width: 100%;
		margin-top: 52px;
		padding-top: 17px;
	}

	/*
	 * Figma: 右上のぼかし光は 157px・上-34px・右-26px・ぼかし122
	 * （CSSの blur() は半分相当なので61px）。
	 */
	.site-footer__glow {
		top: -34px;
		right: -26px;
		width: 157px;
		filter: blur(61px);
	}

	/*
	 * ぼやけた光。PCはFigmaどおり右上だが、SPでは本文が縦に伸びて
	 * 枠が高くなり、光だけが上に取り残される。右下の角へ移す。
	 */
	.note-box::after {
		right: 12px;
		top: auto;
		bottom: 12px;
		width: 120px;
	}

	/*
	 * 光の粒と光の筋は、PCでは本文の左外（left: -60px / -45px）に置いている。
	 * SPにはその余白が無いので、章の左に筋のための余白を作り、
	 * そこへ粒と筋を入れて縦のタイムラインにする。
	 */
	.article__inner {
		/* 本文の開始位置（＝筋のための左余白） */
		--streak-gutter: 24px;
		/*
		 * 章の左端から見た、光の粒と筋の中心。
		 * 0 にすると、粒の中心がコンテナの左端（ページの左余白の内側の線）
		 * にちょうど乗り、粒の半分が本文の外へ出る。
		 */
		--streak-x: 0px;
	}

	.article__lead,
	.chapter {
		padding-left: var(--streak-gutter);
	}

	/*
	 * 粒の位置は .chapter__label（position: relative）が基準で、
	 * その左端は本文の開始位置。余白のぶん戻してから中心を合わせる。
	 */
	.chapter__label .dot {
		left: calc(var(--streak-x) - var(--dot-glow-size) / 2 - var(--streak-gutter));
	}

	/* 筋は章が基準。2px幅なので中心を粒に合わせる */
	.chapter__streak {
		left: calc(var(--streak-x) - 1px);
	}

	/*
	 * 背景のスポットライト。
	 * PCは article の高さに対する割合で置いているが、SPではページが
	 * 縦に長くなるためくさび形が極端に縦長になり（縦横比 0.81 → 0.18）、
	 * 光の始まりもページの中途半端な位置（Chapter 01 の下）に来ていた。
	 * Figmaのベクターと同じ縦横比を保ち、高さは幅から決める。
	 */
	.article {
		/*
		 * 上の光の開始位置。
		 * 光はMVの裏に隠れるので、MVの下端より手前から始めておけば、
		 * 見た目の開始位置は必ず本文の先頭になる。
		 * MVは最も低い場合でも約690pxなので、それを超えない値にする
		 * （MVの高さの式に合わせようとすると、clampの下限が効く画面で
		 *   ずれて本文の途中から始まってしまう）。
		 */
		/*
		 * 上の光はMVのすぐ下から差す（Figmaでは MV の 7〜9px 下）。
		 * MVの高さは
		 *   --mv-h × --mv-title-ratio（見出しまでの余白 = 682×0.6 = 409px）
		 *   ＋ 見出しの帯・署名の帯・下の余白（SPでの実測 299px）
		 * なので、同じ式で追う。画面の高さが変わっても追従する。
		 */
		--beam-top: calc(clamp(600px, 84vh, 780px) * 0.6 + 307px);
	}

	/*
	 * TOPページの3つの光。
	 * SPデザイン（Figma: スマホTOP）では、PCとは縦横比の違う別ベクターが
	 * 使われている。PCの値をそのまま使うと、縦に長いセクションの中で
	 * くさび形が細い筋状に潰れ、とくに福利厚生の光が見えなくなる。
	 *
	 * inset と clip-path は Figma のSPフレームの実測値から算出:
	 *   代表メッセージ 408x1070 / 事業内容 459x4737 / 福利厚生 560x2895
	 * グラデーションの向き（光源の位置）はPCと同じなので ::before は流用する。
	 */
	.beam--message {
		inset: -1.5% -10.93% -5.39% 2.13%;
		clip-path: polygon(0 0, 16.31% 1.4%, 99.92% 88.32%, 48.8% 100%);
	}

	/*
	 * businessの光。Figmaのままだと帯（business＋voice）の高さ5050pxを
	 * 使って少しずつ広がるため、画面幅いっぱいになるのが4000px近く下で、
	 * SPでは「細い筋」に見えて広がりが伝わらなかった。
	 *
	 * そこでFigmaの角度は使わず、上端から927px（＝「空調設備」のカードの
	 * 中央あたり）で画面幅いっぱいに開く形にしている。
	 * 927pxは帯の高さに依らない実寸で書いているので、
	 * 下のカードが増減しても開き方は変わらない。
	 * 開ききったあとは幅いっぱいのまま下へ流し、光はグラデーションで消す。
	 */
	.beam--business {
		inset: -0.04% -11.47% 0 -10.93%;
		clip-path: polygon(43.27% 0, 57.59% 0, 100% 927px, 100% 100%, 0 100%, 0 927px);
	}

	/*
	 * 広がりきったあとに幅いっぱいの光がそのまま残ると
	 * 「差し込む光」ではなく一面の黄色い霞になってしまうので、
	 * 帯の上端からの実寸で徐々に弱める
	 * （％だと帯の高さによって弱まる位置が変わってしまう）。
	 *
	 * ただし完全に消すと下半分から光が無くなってしまうため、
	 * 2200px以降は 0.12 を下限として残し、帯の下端まで薄く照らす。
	 * 最後の色は指定位置より下にもそのまま伸びるので、
	 * 帯が長くなっても薄い光は途切れない。
	 */
	.beam--business::before {
		background-image: linear-gradient(
			to bottom,
			rgba(255, 223, 37, 0.45) 0px,
			rgba(255, 223, 149, 0.3) 560px,
			rgba(255, 223, 149, 0.2) 1200px,
			rgba(255, 223, 149, 0.12) 2200px
		);
	}

	.beam--benefits {
		inset: 0.21% -0.8% 0 -48.53%;
		clip-path: polygon(100% 0, 0 100%, 89.85% 100%, 100% 7.98%);
	}

	/*
	 * 上の光。Figmaのスマホ版ベクター 475.5x1581.5（縦横比0.3007）。
	 * PC版（0.81）よりずっと細く、角度も立っている。
	 * 位置は代表メッセージ（左-102.5px）と社員インタビュー（左-85px）の平均。
	 * 形は左右のinsetで決まる幅（100+25+1.8=126.8%）と縦横比から出る。
	 */
	.beam--msg-upper,
	.beam--iv-upper {
		inset: var(--beam-top) -1.8% auto -25%;
		aspect-ratio: 475.5 / 1581.5;
		/*
		 * 頂点はFigmaのパスに書かれている順のまま並べること。
		 * polygon() は書いた順に線をつなぐので、順番を入れ替えると
		 * 辺が交差して蝶ネクタイのような形になってしまう。
		 * （右上の細い辺 → 左下 → 下 → 右へ戻る）
		 */
		clip-path: polygon(100% 0, 0 65.06%, 13.46% 100%, 100% 9.67%);
	}

	/*
	 * 下の光。Figmaのスマホ版ベクター 561.5x1927.5 が元。
	 *
	 * Figmaのこのベクターは塗り不透明度30%の一様な塗りで、
	 * 台形の縁がそのまま出る形をしている。そのためFigmaでは
	 * 台形の辺が画面の外に来る位置に置いて縁を隠している。
	 *
	 * 幅の狭いSPでは4辺すべてを画面外に追い出せないので、
	 * 「長い2辺の向きは変えずに、遠い側だけ引き伸ばす」ことで
	 * 切り口を画面の外へ出している。
	 *   頂点2を起点に先頭側の辺を、頂点1を起点に後ろ側の辺を
	 *   それぞれ1.16倍に延長 → 枠 640.7x2235.9（縦横比0.2866）
	 * 辺の角度は元のまま（71.8669° / 77.5515°）なので、
	 * 画面に映る光の形は変わらない。
	 *
	 * これで4つの頂点はすべて画面外（左-75/-8.5px、右418.6/565.7px）。
	 * 光は画面の右端まで届き、その先で切れるので縁が見えない。
	 */
	.beam--msg-lower,
	.beam--iv-lower {
		inset: var(--beam-low) -50.85% auto -20%;
		aspect-ratio: 640.7 / 2235.9;
		clip-path: polygon(0 0, 10.38% 0.67%, 100% 79.09%, 77.04% 100%);
	}

	/* 上端はページの高さに対する割合。Figmaのスマホ版の位置。 */
	.article--message {
		--beam-low: 61.9%;
	}

	.article--interview {
		--beam-low: 53.5%;
	}

	/*
	 * 背景のぼやけた光。
	 * Figmaのスマホ版は157pxの円にレイヤーブラー121.9
	 * （CSSの blur() は半分相当で61px）。
	 * PCの350px/174pxのままだと、幅375pxでは画面全体が
	 * ぼんやり明るくなるだけでぼやの形が分からなくなる。
	 */
	.article__glow {
		width: 157px;
		filter: blur(61px);
	}

	/*
	 * 位置もFigmaのスマホ版に合わせる（円が小さくなったぶん、
	 * PCと同じ % のままでは中心が96pxずれてしまう）。
	 * top はページの高さに対する割合、left は画面幅に対する割合。
	 */
	.article--message .article__glow--1 {
		top: 28.9%;
		left: 54.7%;
	}

	.article--message .article__glow--2 {
		top: 56.9%;
		left: 54.7%;
	}

	/* 結びの一文の後ろ。Figmaでもほぼ画面中央なので中央に置く。 */
	.article--message .article__glow--3 {
		top: 97.2%;
		left: 50%;
		translate: -50% 0;
	}

	.article--interview .article__glow--1 {
		top: 27.7%;
		left: 64.3%;
	}

	.article--interview .article__glow--2 {
		top: 49.8%;
		left: 58.1%;
	}

	/*
	 * 画像やカードを筋の余白まで広げると、光の粒と筋を覆ってしまう。
	 * 本文と同じ幅にそろえる。
	 */
}

@media (max-width: 600px) {
	/* ---------------------------------------------------------
	   SPデザイン（Figma: スマホTOP 375px）の書式に合わせる。

	   行送りは Figma の px を文字サイズで割った比率で持たせている
	   （文字サイズだけ変えても行間の見え方が崩れないようにするため）。
	   字間は Figma の px を em に換算（12pxでls1.2 → 0.1em）。
	   --------------------------------------------------------- */

	/* SPデザインの改行位置を有効にする */
	.br-sp {
		display: inline;
	}

	/* Figma: 本文の基準 12px / 行送り22.8 / 字間2.0 */
	body {
		font-size: 12px;
		line-height: 1.9;
	}

	/* Figma: Inter 600 12px / 行送り14.5 / 字間0 */
	.section-label {
		font-size: 12px;
		line-height: 1.21;
		letter-spacing: 0.04em;
	}

	/* Figma: ラベル横のダイヤは 21x16（PCは 31x24） */
	.section-label__icon {
		width: 21px;
		height: 16px;
	}

	/* Figma: 黄色い帯の高さは32px（PCは46px） */
	.section-label {
		--label-bar-h: 32px;
	}

	/*
	 * Figma: 黄色い「PICKUP!」は Inter 600 12px / 行送り14.5、
	 * 帯の内側は 3px 20px（PCは 20px / 7px 20px）。
	 */
	.pickup__en {
		padding: 3px 20px;
		font-size: 12px;
		line-height: 1.21;
	}

	/* Figma: 「PICKUP 01」は Inter 600 14px（PCは20px）。行送りは基本側の1.21で一致 */
	.pickup__no {
		font-size: 14px;
	}

	/* Figma: Shippori Mincho 800 24px / 行送り38.8 / 字間0 */
	.heading--lg {
		font-size: 24px;
		line-height: 1.62;
		letter-spacing: 0;
		/*
		 * Figmaでは見出しだけ本文の列より約9px広く使い、
		 * 「そう呼ばれる会社になりたい。」（24px×14文字＝336px）が
		 * 1行に収まっている。同じ幅を使えるように右へ広げる。
		 */
		margin-right: -9px;
	}

	/* Figma: 12px / 行送り23.0 / 字間1.2 */
	.section__lead {
		font-size: 12px;
		line-height: 1.92;
	}

	/* Figma: Shippori Mincho 32px / 行送り46.3 / 字間0 */
	.mv__title {
		font-size: 32px;
		line-height: 1.45;
		letter-spacing: 0;
	}

	/* Figma: 14px / 行送り21.0 / 字間1.4 */
	.mv__lead {
		font-size: 14px;
		line-height: 1.5;
	}

	/* Figma: 12px / 行送り18.1 / 字間1.2 */
	.message__body {
		font-size: 12px;
		line-height: 1.51;
	}

	/*
	 * 署名。Figmaのこの行は部分書式が入っていて、既定の16pxが効くのは
	 * 肩書きと氏名の間の空白だけ。
	 *   「代表取締役社長」→ 12px
	 *   「佐飛 康央」（筆文字）→ 21px
	 * 以前は既定値だけを見て全体を16pxにしていたため、
	 * 署名が横に長くなって右下のボタンと重なっていた。
	 */
	.message__sign {
		font-size: 12px;
		line-height: 1.92;
	}

	.message__sign .brush {
		/* Figma: 21px（肩書き12pxに対して1.75倍） */
		font-size: 1.75em;
		/*
		 * Figmaでは間に16pxの空白が3つ入って18.5px空く。
		 * HTMLでは連続する空白が1つ（約5.8px）に畳まれるので差を足す。
		 */
		margin-left: 12.7px;
	}

	/* Figma: Inter 32px / 行送り51.7 */
	.culture__num {
		font-size: 32px;
		line-height: 1.62;
	}

	/* Figma: Shippori Mincho 800 21px / 行送り33.9 */
	.culture__heading {
		font-size: 21px;
		line-height: 1.61;
	}

	/* Figma: 12px / 行送り23.0 / 字間1.2 */
	.culture__body,
	.work-card__tag {
		font-size: 12px;
		line-height: 1.92;
	}

	/* Figma: Shippori Mincho 700 16px / 行送り30.7 / 字間1.6 */
	.work-card__title {
		font-size: 16px;
		line-height: 1.92;
	}

	/*
	 * Figma: Shippori Mincho 800 24px / 行送り38.8 / 字間0。
	 * 改行はデータ側の <br class="br-sp"> が担う。
	 * clamp の下限22pxのままではFigmaより2px小さかった。
	 */
	.work__catch-text {
		font-size: 24px;
		line-height: 1.6154;
	}

	/* Figma: 12px / 行送り22.8 / 字間2.0 */
	.biz-main__text,
	.biz-card__text {
		font-size: 12px;
		line-height: 1.9;
		letter-spacing: 0.167em;
	}

	/*
	 * Figma: 仕事のカード本文だけ 12px / 行送り21.3 / 字間0。
	 * 字間を入れると1行に入る文字数が減って3行になり、カードが高くなる。
	 * タイトルとの間隔も0（Figmaではタイトル下端と本文上端が接する）。
	 */
	.work-card__text {
		font-size: 12px;
		line-height: 1.775;
		letter-spacing: 0;
		margin-top: 0;
	}

	/* Figma: Shippori Mincho 600 16px / 行送り24.0 / 字間0 */
	.biz-main__title,
	.biz-card__title {
		font-size: 16px;
		line-height: 1.5;
	}

	.work-cards,
	.biz-cards,
	.pickup__list,
	.career-steps,
	.career-quals,
	.flow-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	/* --- 事業紹介: タップで開く（JSが .is-acc / .is-open を付ける） --- */

	/* カード同士の間隔を詰める（PCは40px / 37px） */
	.biz-cards {
		gap: 24px;
		margin-top: 24px;
	}

	/*
	 * PICKUPも同じ間隔にそろえる。
	 * Figmaのスマホ版も項目の送りが197pxで、
	 * 項目の高さ172.8pxとの差＝24pxになっている。
	 */
	.pickup__list {
		gap: 24px;
	}

	/*
	 * 本文は閉じているあいだ隠す。
	 * JSが動かないときは .is-acc が付かないので、そのまま開いた状態になる。
	 */
	.biz-main.is-acc .biz-main__text,
	.biz-card.is-acc .biz-card__text {
		display: none;
	}

	.biz-main.is-acc.is-open .biz-main__text,
	.biz-card.is-acc.is-open .biz-card__text {
		display: block;
	}

	/* 本文が消えるぶんの下余白をカード側で持つ（見出しが底に付かないように） */
	.biz-card.is-acc:not(.is-open) {
		padding-bottom: 20px;
	}

	/* 写真もタップで開閉できるので、指で押せることを分かるようにする */
	.biz-main.is-acc .biz-main__image,
	.biz-card.is-acc .biz-card__image {
		cursor: pointer;
	}

	.biz-acc__btn {
		cursor: pointer;
	}

	/* 開閉の印。閉じているとき下向き、開くと上向き。 */
	.biz-acc__btn::after {
		content: "";
		flex: none;
		width: 9px;
		height: 9px;
		margin-right: 3px;
		border-right: 2px solid var(--yellow);
		border-bottom: 2px solid var(--yellow);
		rotate: 45deg;
		translate: 0 -2px;
		transition: rotate 0.25s ease, translate 0.25s ease;
	}

	.is-open .biz-acc__btn::after {
		rotate: -135deg;
		translate: 0 2px;
	}

	/* --- キャリアアップ: 横スワイプ（カルーセル） --- */

	/*
	 * 4つのステップと3つの資格は、1列に積むと画面の何倍もの高さになり
	 * 全体像が見えなくなる。SPでは横スワイプにする。
	 *
	 * CSSのスクロールスナップだけで作っている（JSなし）。
	 * いったん画面端まではみ出させてから内側に余白を戻すことで、
	 * 次のカードが右端から覗き、横に動くことが見て分かる形にしている。
	 */
	.career-steps,
	.career-quals {
		display: flex;
		gap: 16px;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--gutter);
		-webkit-overflow-scrolling: touch;
		/* スクロールバーは出さない（覗いているカードが目印になる） */
		scrollbar-width: none;
	}

	.career-steps::-webkit-scrollbar,
	.career-quals::-webkit-scrollbar {
		display: none;
	}

	.career-step,
	.career-qual {
		/* 次のカードが少し覗く幅。狭い画面でも本文が読める下限を持たせる */
		flex: 0 0 min(78%, 280px);
		scroll-snap-align: start;
	}

	/* 仕切り線はカード間の余白が代わりになるので出さない */
	.career-qual:not(:last-child) {
		border-right: 0;
	}

	/*
	 * 1列になるので、光の粒と線を縦のタイムラインに組み替える。
	 * 粒は左端、線は粒の中心から次の粒までまっすぐ下へ伸ばし、
	 * 文章は線の右側へ寄せる。
	 */
	.flow-step {
		padding-top: 0;
		padding-left: 40px;
	}

	/* PCが右端まで引くのと同じで、縦でもそのステップの下端まで引く */
	.flow-step::before {
		top: 13px;
		left: 13.5px;
		right: auto;
		bottom: 0;
		width: 1px;
		height: auto;
	}

	.flow-step__no {
		position: static;
		/* 行の高さを粒の中心（上から13px）に合わせる */
		line-height: 26px;
	}

	.flow-step__title {
		margin-top: 8px;
	}

	/* Figma(SP): カードは 327x338、内側の余白21px、タイトルの上端は上から251px */
	.work-card {
		--card-h: 338px;
		--card-pad: 21px;
		--card-title-ratio: 0.743;
		/* Figmaでは下だけ14px（本文下端324 → カード下端338） */
		padding-bottom: 14px;
	}

	.mv__actions {
		gap: 16px;
	}

	/* 円が小さくなるので、余白と文字を詰めて中身が入るようにする */
	.circle-btn {
		padding: 12px;
		font-size: 12px;
	}

	/* CTAの並び（文章の下に円2つ）は 900px 以下の指定でまとめている */

	/*
	 * 背景写真の寄せ方。
	 * SPデザインでは横長の写真から左寄りの縦長部分（横9.0%〜43.4%）を
	 * 切り出して、空から川までが縦に入る構図にしている。
	 * cover では横44.7%が見えるので、その中心をFigmaと同じ26.2%へ寄せる。
	 */
	.cta__media img {
		object-position: 7% 50%;
	}

	.btn {
		min-width: 100%;
	}

	.topic-card {
		min-height: 0;
	}

	/* 1カラムでは画像が絶対配置のままだと潰れるので、比率で高さを与える */
	.topic-card__image {
		aspect-ratio: 16 / 10;
	}

	.topic-card__body {
		padding: 24px;
	}

	/*
	 * 帯はPCと同じく画面の右端まで抜く。
	 * 1行では収まらないので、肩書きと氏名を2段に分ける。
	 * 氏名（筆文字）を持つ代表メッセージ側だけが対象で、
	 * 社員インタビュー側（.lower-mv__person を持つ）は grid のままにする。
	 */
	/*
	 * 代表メッセージを読むボタン。
	 * SPデザイン（Figma: スマホ代表メッセージ 375x1001）では
	 * 直径132pxの円がセクションの右下に置かれ、
	 * 右へ11px・下へ30pxはみ出して切れている。
	 * PCと同じ絶対配置に戻し、はみ出し量だけをSPの値にする。
	 * 切り取りは .section の overflow: hidden が行う。
	 */
	.message__more {
		/* 375pxで132px。狭い画面では比率で縮み、広い画面では132pxで止まる */
		--more-size: min(35.2vw, 132px);

		position: absolute;
		right: 0;
		bottom: 0;
		margin: 0;
		translate: 8.33% 22.73%;
	}

	.lower-mv__profile:has(.brush) {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	/* ---------------------------------------------------------
	   下層ページ（代表メッセージ・社員インタビュー）の文字
	   Figma:「スマホ代表メッセージ下層」276:5837
	         「スマホ社員インタビュー慎太郎さん下層」280:334
	   2ページで同じ値なので、まとめて指定する。
	   --------------------------------------------------------- */

	/*
	 * MVの見出し。Figmaのスマホ版は1枚の帯（336x176・内側 10px 24px）に
	 * 4行が入る。PCは1行ごとに別の帯なので、SPだけ帯を h1 側へ移す。
	 * 行の変わり目はデータ側の <br class="br-sp"> が担う。
	 *
	 * Figma: Shippori Mincho 800 / 24px / 行送り38.8 / 字間0
	 */
	.lower-mv__title {
		display: block;
		width: fit-content;
		padding: 10px 24px;
		background: var(--dark-btn);
		font-size: 24px;
		line-height: 1.6154;
		letter-spacing: 0;
	}

	.lower-mv__title .lower-mv__band {
		display: inline;
		padding: 0;
		background: none;
	}

	/* Figma: 12px / 行送り23.0 / 字間1.2（社員インタビューのMV説明文） */
	.lower-mv__sub {
		font-size: 12px;
		line-height: 1.9167;
		letter-spacing: 0.1em;
	}

	/*
	 * 署名の帯。Figma: 内側 10px 24px（PCは16px）、
	 * 文字は 12px / 行送り23 / 字間1.2。
	 * 筆文字は .brush の font-size: 2em がそのまま24pxになりFigmaと一致する。
	 */
	.lower-mv__profile {
		padding: 10px 24px;
		padding-right: calc(24px + var(--gutter));
		font-size: 12px;
		line-height: 1.9167;
		letter-spacing: 0.1em;
	}

	/* Figma: 氏名16px / 肩書き12px（社員インタビュー） */
	.lower-mv__person {
		font-size: 16px;
		line-height: 1.9185;
		letter-spacing: 0.1em;
	}

	.lower-mv__role {
		font-size: 12px;
		line-height: 1.9167;
		letter-spacing: 0.1em;
	}

	/*
	 * 章ラベル。Figma: Inter 500 / 12px / 行送り14.5 / 字間0。
	 * --label-line は光の粒と光の筋の縦位置の基準でもあるので合わせて変える。
	 * --dot-center は --label-line から出す計算なので、ここでも入れ直す
	 * （計算を入れた変数は宣言した場所で値が決まるため）。
	 */
	.article__inner {
		--label-line: 14.5px;
		--dot-center: 7.25px;
		/*
		 * 光の筋と粒の中心を Figma の x=24 に合わせる。
		 * 本文の左端は 21px（.inner の余白）＋ 24px（--streak-gutter）＝ 45px で、
		 * 筋はそこから --streak-gutter 戻した位置が基準になる。
		 */
		--streak-x: 3px;
	}

	.chapter__label {
		font-size: 12px;
		letter-spacing: 0;
	}

	/* Figma: ダイヤのアイコンは 17x13.1（PCは 31x24） */
	.chapter__label__icon {
		width: 17px;
		height: 13.1px;
	}

	/* Figma: 章の光の粒は19px（外側の円）。ノートの粒だけ22px。 */
	.chapter {
		--dot-glow-size: 19px;
	}

	/* Figma: Shippori Mincho 800 / 16px / 行送り25.8 / 字間0 */
	.chapter__heading {
		font-size: 16px;
		line-height: 1.6125;
	}

	/* Figma: YuGothic 500 / 12px / 行送り23.2 / 字間1.2 */
	.article__body,
	.article__lead,
	.promise__intro,
	.promise__outro {
		font-size: 12px;
		line-height: 1.9333;
		letter-spacing: 0.1em;
	}

	/* Figma: Shippori Mincho 600 / 14px / 行送り27.8 / 字間0.56 */
	.article__quote {
		font-size: 14px;
		line-height: 1.9857;
		letter-spacing: 0.04em;
	}

	/* Figma: Shippori Mincho 700 / 16px / 行送り25.8 / 字間0 */
	.topic-card__title {
		font-size: 16px;
		line-height: 1.6125;
		letter-spacing: 0;
	}

	/* Figma: YuGothic 500 / 12px / 行送り18.5 / 字間0.72 */
	.topic-card__body p {
		font-size: 12px;
		line-height: 1.5417;
		letter-spacing: 0.06em;
	}

	/* Figma: 小見出しと本文は12px / 行送り23.2 / 字間1.2 */
	.note-box__label,
	.note-box__text {
		font-size: 12px;
		line-height: 1.9333;
		letter-spacing: 0.1em;
	}

	.note-box__label {
		--dot-glow-size: 22px;
	}

	/* Figma: Shippori Mincho 700 / 21px / 行送り33.9 / 字間0 */
	.note-box__heading {
		font-size: 21px;
		line-height: 1.6143;
		letter-spacing: 0;
	}

	/*
	 * 約束のカード。Figma（SP）はどちらも 307x109 で高さが揃っており、
	 * 文字は上下中央、カードの間隔は24px。
	 * 高さは ≤900 の grid-auto-rows: 1fr で揃うので、
	 * ここでは Figma の109pxを下限として置いている。
	 */
	.promise__list {
		gap: 24px;
	}

	.promise__item {
		display: grid;
		align-content: center;
		min-height: 109px;
	}

	/*
	 * 右上のぼやけた光。Figma（SP）では80pxの円が
	 * カードの上端から1px・右へ20pxはみ出した位置にある。
	 * はみ出しは .promise__item の overflow: hidden で切れる。
	 */
	.promise__mark {
		top: 1px;
		right: -20px;
		bottom: auto;
	}

	/* Figma: Shippori Mincho 700 / 14px / 行送り22.6 / 字間0 */
	.promise__item p {
		font-size: 14px;
		line-height: 1.6143;
		letter-spacing: 0;
	}

	/* Figma: Shippori Mincho 600 / 16px / 行送り25.8 / 字間0 */
	.promise__closing {
		font-size: 16px;
		line-height: 1.6125;
		letter-spacing: 0;
	}

	/* --- 社員インタビュー一覧（SP） --- */

	/*
	 * Figma（スマホ社員インタビュー一覧 470:439）
	 *   写真帯      y   0〜508（2列×2段）
	 *   ラベルの帯  y 540〜572（中心556）
	 *   見出し      y 596〜635
	 *   カード      y 667〜982 / 1014〜1329
	 *   フッター    y 1361
	 *
	 * 上下の余白は基本指定の clamp() が375pxでSPの値になるので、
	 * ここでは光の大きさと位置だけを差し替える。
	 */
	.section--voice-list {
		/* Figma: 157pxの円・レイヤーブラー121.9（CSSでは約61px） */
		--voice-glow-size: 157px;
		--voice-glow-blur: 61px;
		--voice-glow-x: 79.1%;
		--voice-glow-y: 48px;
	}

	/*
	 * 一覧ページの写真帯だけ2列×2段にする。
	 * Figmaでは 187x253（＝縦横比0.739）が2列2段。
	 * 基本の縦横比 360/487 = 0.739 と同じなので、列数だけ変えれば寸法が合う。
	 * TOPの写真帯（4枚を横一列）は Figma 通りそのまま。
	 */
	.gallery-band--hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Figma（スマホ）: カード 327x234 に対して直径132pxの円。
	 * 中心は左から278px・上から189px。右へ17px・下へ21pxはみ出して切れる。
	 * 半径は「幅比」と「高さ比」の2つの%で持つ（20.18% x 327/234 = 28.2%）。
	 */
	.voice-card__media {
		--hole-rx: 20.18%;
		--hole-ry: 28.2%;
		--hole-cx: 85.02%;
		--hole-cy: 80.77%;
	}

	/* Figma: 見出しの下端956 から補足の上端961 まで5px */
	.voice-card__body {
		gap: 5px;
	}

	/*
	 * Figma: Shippori Mincho 700 / 16px / 行送り30.7（1.9185）。
	 * 字間は0.1emだと「「電気は、なくならないと思ったんです」」（19文字）が
	 * 2行になってしまう。Figmaもこのカードだけ0.06emに詰めて1行に収めているので、
	 * SPでは0.06emで揃える。
	 */
	.voice-card__title {
		letter-spacing: 0.06em;
	}

	/*
	 * Figmaのスマホでは、カード見出しの黄色いマーカーが無い
	 * （PCには太さ6pxの線がある）。マーカーの実体は .ul の背景。
	 */
	.voice-card__title .ul {
		background-image: none;
	}

	/*
	 * 一覧への円ボタンは、代表メッセージの円（Figma: 132px）と同じ大きさに。
	 * はみ出し量は割合で持っているので、直径を変えるだけで追従する。
	 */
	.voice-more {
		--more-size: min(35.2vw, 132px);
		/* 代表メッセージのSPと同じはみ出し量（右8.33% / 下22.73%） */
		--more-out-x: 0.0833;
		--more-out-y: 0.2273;
	}

	/* ページ送りの丸は、狭い画面では小さくして1行に収める */
	.pager {
		--pager-size: 40px;
	}

	.pager__item a,
	.pager__item .current,
	.pager__item .dots {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------
   21. スクロール演出（JSが付与するクラス）
   --------------------------------------------------------- */
.js-reveal {
	opacity: 0;
	translate: 0 24px;
	transition: opacity 0.7s ease, translate 0.7s ease;
}

.js-reveal.is-visible {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal {
		opacity: 1;
		translate: 0 0;
	}
}