/* ==========================================================================
   NEXT GENERATION ─ 下層ページ共通
   ========================================================================== */

/* --------------------------------------------------------------------------
   ページ先頭のヒーロー  .ng-sec-page-hero

   写真は加工せずそのまま入れ、文字を読ませるための幕はここでかける。
   写真を差し替えても明るさを気にしなくてよくなる。

   2通りの見せ方があり、クラスで切り替える。
     .ng-sec-page-hero            … 左を明るく（生成り）、文字は黒
     .ng-sec-page-hero.ng-invert  … 左を暗く、文字は白

   ビルダー側の構成
     セクション（背景に写真）に  ng-sec-page-hero
       ・背景画像のサイズは Cover
       ・「Fixed（固定）」はオフ
     「2027年度 新卒採用 / 中途採用」に  ng-label
     「Staff First」（h1）に             ng-title-h2
     「スタッフの幸せが、お客様の幸せ。」に ng-pull
     説明文に                            ng-body
     ボタン1つめに  ng-btn-solid ／ 2つめに  ng-btn
   -------------------------------------------------------------------------- */

.ng-sec-page-hero .uk-section {
	position: relative;
	/* ビルダーが実寸をインラインで書き込む場合があるため、画面を覆うよう固定する */
	background-size: cover !important;
	background-position: center center;
}

/* 写真の上に敷く幕。文字が乗る左側を濃く、右は写真を見せる */
.ng-sec-page-hero .uk-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(100deg,
		rgba(246, 244, 241, .97) 0%,
		rgba(246, 244, 241, .94) 30%,
		rgba(246, 244, 241, .66) 46%,
		rgba(246, 244, 241, .22) 62%,
		rgba(246, 244, 241, 0) 78%);
}

/* ヘッダーが重なる上端だけ、うっすら明るくして文字を読みやすくする */
.ng-sec-page-hero .uk-section::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 160px;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(246, 244, 241, .78) 0%,
		rgba(246, 244, 241, .34) 55%,
		rgba(246, 244, 241, 0) 100%);
}

.ng-sec-page-hero.ng-invert .uk-section::after {
	background: linear-gradient(180deg,
		rgba(20, 17, 15, .55) 0%,
		rgba(20, 17, 15, .18) 55%,
		rgba(20, 17, 15, 0) 100%);
}

/* 暗い版 */
.ng-sec-page-hero.ng-invert .uk-section::before {
	background: linear-gradient(100deg,
		rgba(20, 17, 15, .84) 0%,
		rgba(20, 17, 15, .70) 30%,
		rgba(20, 17, 15, .34) 62%,
		rgba(20, 17, 15, .14) 100%);
}

/* 文字は幕より前面に */
.ng-sec-page-hero .uk-container {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   モバイル
   文字が全幅に広がるので幕は均一に。
   背景固定（background-attachment: fixed）は iOS で正しく動かないため解除する。
   高さも全画面だと長すぎるので少し詰める。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.ng-sec-page-hero .uk-section {
		background-attachment: scroll !important;
	}

	.ng-sec-page-hero .uk-section::before {
		background: linear-gradient(180deg,
			rgba(246, 244, 241, .92) 0%,
			rgba(246, 244, 241, .95) 100%);
	}

	.ng-sec-page-hero.ng-invert .uk-section::before {
		background: linear-gradient(180deg,
			rgba(20, 17, 15, .72) 0%,
			rgba(20, 17, 15, .82) 100%);
	}
}

@media (max-width: 639px) {
	.ng-sec-page-hero .uk-height-viewport {
		min-height: 76vh !important;
	}
}

/* モバイルでヒーローの中身がヘッダーに潜らないようにする。

   ヒーローの中身は上下中央に置かれる。文章や導線が増えて枠の高さを
   超えると、はみ出したぶんが上に伸びて、透過ヘッダーの裏に隠れる。
   （2026-08-14：ファーストビューに2導線を足したときに発生）

   上に余白を確保し、中身が増えても頭が隠れないようにする。
   高さは min-height なので、余白ぶん枠が伸びるだけで済む。 */
@media (max-width: 767px) {
	.ng-sec-page-hero .uk-height-viewport {
		padding-top: 104px !important;
		padding-bottom: 48px !important;
	}
}

@supports (height: 100dvh) {
	@media (max-width: 639px) {
		.ng-sec-page-hero .uk-height-viewport {
			min-height: 76dvh !important;
		}
	}
}

/* --------------------------------------------------------------------------
   ヒーロー内の各パーツ
   -------------------------------------------------------------------------- */

/* 英字の大見出し（Staff First など）*/
.ng-sec-page-hero .ng-title-h2 {
	margin: 0;
	font-size: clamp(2rem, 5.4vw, 3.25rem);
}

.ng-sec-page-hero .ng-label {
	margin-bottom: 24px;
}

/* キャッチコピー */
.ng-sec-page-hero .ng-pull {
	max-width: 15em;
	margin-top: 18px;
}

.ng-sec-page-hero .ng-body {
	max-width: 30em;
	margin-top: 20px;
}

/* 暗い版は写真の上なので、本文を通常の反転より少し明るくする */
.ng-sec-page-hero.ng-invert .ng-body {
	color: rgba(255, 255, 255, .88);
}

.ng-sec-page-hero .uk-grid {
	margin-top: 36px;
}

@media (max-width: 479px) {
	.ng-sec-page-hero .uk-grid > .el-item {
		width: 100%;
	}

	.ng-sec-page-hero .uk-grid > .el-item > a {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   ヒーローを左右できっぱり分ける  .ng-hero-split

   .ng-sec-page-hero に足して使う。
     PC       … 左半分は生成りの無地、右半分は写真。境目は直線
     モバイル … 上が写真、下が無地。テキストは下寄せ

   写真は背景として1枚敷いたまま。境目に合わせて写り位置をずらしている。
   人物の立ち位置に合わせて background-position の値を調整する。
   -------------------------------------------------------------------------- */

.ng-sec-page-hero.ng-hero-split .uk-section {
	/* 被写体が右半分の中央に来るよう、写真を右寄りに見せる */
	background-position: 68% center;
}

.ng-sec-page-hero.ng-hero-split .uk-section::before {
	background: linear-gradient(90deg,
		var(--ng-offwhite) 0 50%,
		rgba(246, 244, 241, 0) 50%);
}

/* 暗い版 */
.ng-sec-page-hero.ng-hero-split.ng-invert .uk-section::before {
	background: linear-gradient(90deg,
		var(--ng-ink) 0 50%,
		rgba(20, 17, 15, 0) 50%);
}

/* 上端のぼかしは写真側だけ、境目を汚さない程度に弱く */
.ng-sec-page-hero.ng-hero-split .uk-section::after {
	height: 120px;
	background: linear-gradient(180deg,
		rgba(246, 244, 241, .45) 0%,
		rgba(246, 244, 241, 0) 100%);
}

.ng-sec-page-hero.ng-hero-split.ng-invert .uk-section::after {
	background: linear-gradient(180deg,
		rgba(20, 17, 15, .45) 0%,
		rgba(20, 17, 15, 0) 100%);
}

/* --- モバイル：上が写真の帯、下が無地。文字は写真に重ねない ---

   画面いっぱいの高さをやめ、写真の帯ぶんだけ上に余白を取って
   その下に文字を流す。文章が長くなっても重ならない。
   帯の高さ（--ng-hero-band）と幕の切り替え位置は同じ値を使う。 */
@media (max-width: 767px) {
	.ng-sec-page-hero.ng-hero-split {
		--ng-hero-band: 44vh;
	}

	/* 画面高さの固定を解除（UIkit がインラインで書き込むため !important）*/
	.ng-sec-page-hero.ng-hero-split .uk-height-viewport {
		min-height: 0 !important;
	}

	.ng-sec-page-hero.ng-hero-split .uk-section {
		display: block;
		background-position: center 22%;
		padding-top: var(--ng-hero-band) !important;
		padding-bottom: 56px !important;
	}

	.ng-sec-page-hero.ng-hero-split .uk-section::before {
		background: linear-gradient(180deg,
			rgba(246, 244, 241, 0) 0 var(--ng-hero-band),
			var(--ng-offwhite) var(--ng-hero-band) 100%);
	}

	.ng-sec-page-hero.ng-hero-split.ng-invert .uk-section::before {
		background: linear-gradient(180deg,
			rgba(20, 17, 15, 0) 0 var(--ng-hero-band),
			var(--ng-ink) var(--ng-hero-band) 100%);
	}

	/* 文字は帯のすぐ下から始める */
	.ng-sec-page-hero.ng-hero-split .uk-container {
		padding-top: 36px;
	}

	.ng-sec-page-hero.ng-hero-split .ng-label {
		margin-bottom: 18px;
	}
}

/* --------------------------------------------------------------------------
   下層ページのセクション余白  .ng-sec

   トップページ（ng-sec-concept など）と同じ間隔にそろえる。
   下層ページの各セクションに付けて使う。
   -------------------------------------------------------------------------- */
.uk-section.ng-sec,
.ng-sec > .uk-section {
	padding-top: 96px;
	padding-bottom: 96px;
}

@media (min-width: 960px) {
	.uk-section.ng-sec,
	.ng-sec > .uk-section {
		padding-top: 140px;
		padding-bottom: 140px;
	}
}

/* 見出しと中身の間隔もトップページと合わせる */
.ng-sec .ng-title-sub {
	margin-bottom: 48px;
}

/* --------------------------------------------------------------------------
   リクルートページ：セクションの背景を交互にする

   ヒーローの下（Philosophy）から順に、白 → オフホワイト → 白 …と交互に敷く。
   境目がはっきりして、長いページでも「どこまで読んだか」が分かりやすくなる。

   セクションごとに ng-bg-offwhite を手で付けるやり方だと、
   セクションを1つ足したり消したりするたびに、そこから下が全部ずれる。
   実際、Numbers と Team を削除した時点で並びが崩れていた。
   位置から計算させて、増減しても自動で揃うようにする。

   数え方
     偶数番目＝白、奇数番目＝オフホワイト。**`.ng-sec` を持つセクションだけ**が
     対象で、ヒーローなど持たないものは数えるだけで色は付かない。

   **2026-09-24時点の注意：この交互表示はほぼ働いていない。**
   Canva案への作り替えで、各セクションに専用のクラス（`ng-sec-about`
   `ng-sec-voices` `ng-sec-lead` `ng-sec-salon` など）が付き、
   `.ng-sec` を持つのは19個中7個だけになった。**残った7個にだけ
   飛び飛びに色が付いている状態。** 並びを整えるなら、ここを作り直すか
   セクションごとに背景を決めるかを選ぶこと。

   **Entry（最後のセクション）は白。** 2026-09-24、指示で暗い背景から
   白に変更。`:last-child` で交互表示から外している。
   （以前は `.ng-invert` の暗い背景で、締めくくりとして意図的に濃くしていた）

   ページの判別に page-id-11 を使っている。
   リクルートページ（固定ページ #11）にだけ効かせるため。
   本文用のクラスが振られていないので、これが一番確実。

   ここで背景を決めているので、ビルダー側で ng-bg-offwhite を
   付けても効かない（こちらが優先される）。付けなくてよい。
   -------------------------------------------------------------------------- */

.page-id-11 main > .ng-sec:nth-child(even) {
	background-color: var(--ng-paper);
}

.page-id-11 main > .ng-sec:nth-child(odd):not(.ng-invert):not(:last-child) {
	background-color: var(--ng-offwhite);
}

/* --------------------------------------------------------------------------
   リクルートページ、セクション別の背景色  2026-09-30

   指示で全セクションぶんを明示的に指定し直した（このリストに無い
   セクションは対象外＝現状のまま）。2026-09-24の「Message・2つの
   リード・Event・Process」個別指定と、Shop Listの薄め地指定を、
   この1ブロックに統合して置き換えている。

   クリーム＝`--ng-offwhite`、白＝`--ng-paper`。

     message      クリーム    jobs（#requirement）  白
     新卒採用      クリーム    Education             白
     中途採用      クリーム    flow（中途の流れ）     白
     event        クリーム    shooting              白
     process      クリーム    shop list（勤務地）    白
     entry        クリーム    目次                   白

   新卒採用・中途採用は同じ `.ng-sec-lead` を共有しており、どちらも
   クリームなので1つの指定で足りる。

   **`!important` で決め打ちにした（2026-09-30、実機で判明した理由で
   方針変更）。** はじめは2026-09-24までの実証済みセレクタ（`main >`
   ＋クラス重ねなど）をそのまま使ったが、education・flow-chuto・
   shooting・entry の4つがクリーム/白の狙いと逆になって残った。

   **原因は「交互表示のうちどちらの式に当たるか」がセクションごとに
   違うこと。** 奇数番目用の式（`:nth-child(odd):not(.ng-invert):not
   (:last-child)`）はクラス相当5個ぶんの強さがあり、message・event
   （偶数番目用の式、3個ぶん）と同じ書き方では勝てなかった。
   奇数・偶数のどちらに当たるかはDOM順で決まり、セクションが増減すると
   ずれる（このファイル冒頭のコメントに書かれている、まさにその弱さ）。
   数え直すたびに書き分けるのは脆いので、`!important` で交互表示より
   確実に上回らせることにした。 */
.page-id-11 .ng-sec-lead,
.page-id-11 .ng-sec-message,
.page-id-11 .ng-sec-event,
.page-id-11 .ng-sec-process,
.page-id-11 .ng-sec-entry {
	background-color: var(--ng-offwhite) !important;
}

.page-id-11 #requirement,
.page-id-11 .ng-sec-education,
.page-id-11 .ng-sec-flow-chuto,
.page-id-11 .ng-sec-shooting,
.page-id-11 .ng-sec-salon,
.page-id-11 .ng-sec-toc {
	background-color: var(--ng-paper) !important;
}

/* --------------------------------------------------------------------------
   各セクションの上端をProcessにそろえる  2026-09-24

   Message・Education・Event・Flow（中途入社後の流れ）・
   Shooting & Seminar・勤務地・Entry は「セクションサイズ：大」のまま
   残っていて、上端が140px（PC）／96px（〜959px）だった。
   01・02・Staff Interview・リード文・Processは元から70px／40pxで、
   それがこのページの基準。7つをそちらに合わせる。

   **`.page-id-11` を付けて絞っている。** `.ng-sec-salon` はトップページ
   の勤務地とクラスが同じなので、絞らないとトップにも効いてしまう。

   下の余白（padding-bottom）は触っていない。今回は「上からタイトル
   まで」だけの指示だったので、セクション同士の間隔は変えていない。 */
.page-id-11 .uk-section.ng-sec-message,
.page-id-11 .uk-section.ng-sec-education,
.page-id-11 .uk-section.ng-sec-event,
.page-id-11 .uk-section.ng-sec-flow-chuto,
.page-id-11 .uk-section.ng-sec-shooting,
.page-id-11 .uk-section.ng-sec-salon,
.page-id-11 .uk-section.ng-sec-entry {
	padding-top: 70px;
}

@media (max-width: 959px) {
	.page-id-11 .uk-section.ng-sec-message,
	.page-id-11 .uk-section.ng-sec-education,
	.page-id-11 .uk-section.ng-sec-event,
	.page-id-11 .uk-section.ng-sec-flow-chuto,
	.page-id-11 .uk-section.ng-sec-shooting,
	.page-id-11 .uk-section.ng-sec-salon,
	.page-id-11 .uk-section.ng-sec-entry {
		padding-top: 40px;
	}
}

/* --------------------------------------------------------------------------
   半分幅のカラムに置いた引用

   .ng-pull の文字サイズは画面幅を基準にしているため、
   半分幅のカラムに入れると1行に収まらず、末尾だけが次行に落ちる。
   本文セクション（.ng-sec）のカラムに置いた場合だけ、上限を少し下げる。
   ヒーローのキャッチコピーは大きいままにしたいので対象外。
   -------------------------------------------------------------------------- */
.ng-sec .uk-width-1-2\@m .ng-pull,
.ng-sec .uk-width-2-5\@m .ng-pull,
.ng-sec .uk-width-3-5\@m .ng-pull,
.ng-sec .uk-width-1-3\@m .ng-pull {
	font-size: clamp(1.05rem, 2.3vw, 1.55rem);
}

/* --------------------------------------------------------------------------
   ここで働く理由  .ng-reason

   写真とテキストを左右交互に置く。1項目 ＝ グリッド1行。
   テキスト側の入れ物に .ng-reason を付け、中の各要素にクラスを振る。

   ビルダー側の構成（1項目ぶん）
     グリッド行 ＝ 写真カラム ＋ テキストカラム
     テキストカラムの中身：
       「01」                    → ng-reason__no
       「Learn on the clock」    → ng-reason__en
       見出し（h3）              → ng-reason__title
       本文                      → ng-body
       タグのリスト              → ng-tags
     写真の入れ物                → ng-img-3x2
   -------------------------------------------------------------------------- */

/* 番号 */
.uk-panel.ng-reason__no,
.ng-reason__no {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .2em;
	color: var(--ng-green);
}

/* 英字の小見出し */
.uk-panel.ng-reason__en,
.ng-reason__en {
	margin: 3px 0 0;
	font-family: var(--ng-en);
	font-size: 13px;
	font-weight: 200;
	line-height: 1.5;
	letter-spacing: .18em;
	color: var(--ng-ink-45);
	text-transform: none;
}

/* 見出し */
.ng-reason__title {
	margin: 16px 0 0;
	font-family: var(--ng-ja);
	font-size: clamp(1.25rem, 2.6vw, 1.65rem);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .02em;
	color: var(--ng-ink);
	text-transform: none;
}

/* 本文（ng-body）とタグの間隔 */
.ng-reason__title + .uk-panel.ng-body,
.ng-reason__title + .ng-body {
	margin-top: 18px;
}

/* 項目どうしの間隔。写真とテキストが縦に並ぶモバイルでも詰まりすぎないように

   対象はビルダーが作る「行」だけに限る。tm-grid-expand が付いていない
   グリッド（Team のカード一覧など）は、折り返した段が同じ扱いになってしまい、
   2段目の左端だけ位置がずれる。 */
.ng-sec > .uk-container > .uk-grid-margin.tm-grid-expand + .uk-grid-margin.tm-grid-expand {
	margin-top: 64px;
}

@media (min-width: 960px) {
	.ng-sec > .uk-container > .uk-grid-margin.tm-grid-expand + .uk-grid-margin.tm-grid-expand {
		margin-top: 100px;
	}
}

/* --------------------------------------------------------------------------
   教育制度  .ng-track / .ng-step / .ng-points

   ヘアとアイラッシュの2本立て。各コースを段階ごとの区切りで見せる。
   段階は横並び（PC4列／タブレット2列／モバイル1列）。
   折り返しても崩れないよう、段どうしを線でつながず、
   各段の上に細い罫線と緑の点を置いて進行を表す。
   -------------------------------------------------------------------------- */

.ng-track + .ng-track {
	margin-top: 72px;
}

@media (min-width: 960px) {
	.ng-track + .ng-track {
		margin-top: 88px;
	}
}

/* コース名（英字） */
.ng-track__en {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .2em;
	color: var(--ng-green);
}

/* デビューまでの期間 */
.ng-track__title {
	margin: 6px 0 0;
	font-family: var(--ng-ja);
	font-size: clamp(1.25rem, 3vw, 1.9rem);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.ng-track__note {
	margin: 8px 0 0;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

/* 段階の並び */
.ng-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px 24px;
	margin-top: 32px;
}

@media (min-width: 640px) {
	.ng-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.ng-steps {
		grid-template-columns: repeat(4, 1fr);
		gap: 0 28px;
		margin-top: 40px;
	}
}

/* 1段階。上の罫線と緑の点で、進んでいく感じを出す */
.ng-step {
	position: relative;
	padding-top: 18px;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-step::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ng-green);
}

/* 期間 */
.ng-step__term {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

/* 身につけること */
.ng-step__head {
	margin: 5px 0 0;
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--ng-ink);
}

/* 内訳 */
.ng-step__items {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ng-step__items li {
	position: relative;
	padding-left: 13px;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

.ng-step__items li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .95em;
	width: 6px;
	height: 1px;
	background: var(--ng-beige);
}

/* --------------------------------------------------------------------------
   教育制度のポイント  .ng-points
   -------------------------------------------------------------------------- */
.ng-points {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 24px;
	margin-top: 56px;
}

@media (min-width: 960px) {
	.ng-points {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px 28px;
		margin-top: 80px;
	}
}

.ng-points__item {
	padding-top: 14px;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-points__no {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .2em;
	color: var(--ng-green);
}

.ng-points__text {
	margin: 5px 0 0;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

/* --------------------------------------------------------------------------
   アシスタントの1日  .ng-day

   時刻を縦に並べ、左に細い線を通して1日の流れを追えるようにする。
   写真と横に並べて置く前提（写真カラム＋この列）。

   ビルダー側の構成
     グリッド行 ＝ 写真カラム（ng-img-3x4）＋ テキストカラム
     テキストカラムに HTML要素で下記を貼る
   -------------------------------------------------------------------------- */

.ng-day {
	position: relative;
	margin: 0;
	padding: 0 0 0 2px;
	list-style: none;
}

/* 時刻の左に通す縦線。最初の点から最後の点まで */
.ng-day::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--ng-ink-12);
}

.ng-day__item {
	position: relative;
	padding: 0 0 0 26px;
}

.ng-day__item + .ng-day__item {
	margin-top: 26px;
}

/* 時刻の位置に置く点 */
.ng-day__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ng-paper);
	border: 1px solid var(--ng-ink-45);
}

/* 練習時間だけ、色を変えて目を留める */
.ng-day__item--key::before {
	background: var(--ng-green);
	border-color: var(--ng-green);
}

.ng-day__time {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

.ng-day__item--key .ng-day__time {
	color: var(--ng-green);
}

.ng-day__head {
	margin: 3px 0 0;
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--ng-ink);
}

.ng-day__body {
	margin: 5px 0 0;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* 締めの一文 */
.ng-day-note {
	margin: 32px 0 0;
	padding-top: 22px;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
	border-top: 1px solid var(--ng-ink-12);
}

/* 暗い背景に置いた場合 */
.ng-invert .ng-day::before { background: rgba(255, 255, 255, .18); }
.ng-invert .ng-day__item::before { background: var(--ng-ink); border-color: rgba(255, 255, 255, .5); }
.ng-invert .ng-day__head { color: #fff; }
.ng-invert .ng-day__body,
.ng-invert .ng-day-note { color: rgba(255, 255, 255, .74); }
.ng-invert .ng-day-note { border-top-color: rgba(255, 255, 255, .18); }

/* --------------------------------------------------------------------------
   スタッフの声  .ng-voice__*

   写真とインタビューを左右に並べる。
   引用らしさを出すため、リード文の左に細い線を引く。

   ビルダー側の設定
     写真の入れ物            → ng-img-3x4
     「2023年 新卒入社」     → ng-voice__meta
     氏名（h3）              → ng-voice__name
     「Rita Tamegashira」    → ng-voice__roman
     ひとことのリード文      → ng-voice__lead
     本文                    → ng-body
   -------------------------------------------------------------------------- */

.uk-panel.ng-voice__meta,
.ng-voice__meta {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .16em;
	color: var(--ng-green);
}

.ng-voice__name {
	margin: 8px 0 0;
	font-family: var(--ng-ja);
	font-size: clamp(1.35rem, 3vw, 1.9rem);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--ng-ink);
	text-transform: none;
}

.uk-panel.ng-voice__roman,
.ng-voice__roman {
	margin: 5px 0 0;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .2em;
	color: var(--ng-ink-45);
	text-transform: none;
}

/* ひとこと。左の線で引用らしく見せる */
.uk-panel.ng-voice__lead,
.ng-voice__lead {
	margin: 24px 0 0;
	padding-left: 18px;
	border-left: 1px solid var(--ng-beige);
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: .03em;
	color: var(--ng-ink);
}

/* 本文は ng-body を使う。リード文との間隔だけ足す */
.ng-voice__lead + .uk-panel.ng-body,
.ng-voice__lead + .ng-body {
	margin-top: 20px;
}

/* --------------------------------------------------------------------------
   本文の設問（2026-09-21）

   Canva案は「入社前と入社後で感じたギャップは？」のような設問を
   緑の太字にして、答えと見分けている。

   **本文は `[ng_voice_body]` で出す。** ACFのフィールドをビルダーから
   直に出すと段落が消えるため（理由は `inc/voice.php`）。
   ショートコードは `.ng-body.ng-voice__body` を返し、設問の行を
   `.ng-voice__q` にする。

   緑は `--ng-green-deep`（白地 5.40）。`--ng-green` は 2.97、
   `--ng-green-dk` でも 4.21 で、**14pxの文字には基準4.5を満たさない。**
   -------------------------------------------------------------------------- */
/* **包みを当てにしない**（2026-09-21に直した）。
   ACFのフィルタ経由だと `<p>` がそのまま返るので、
   `.ng-voice__body` という包みは付かない。
   はじめ `.ng-voice__body .ng-voice__q` と書いていて**当たらなかった**。
   `.ng-body` の色（墨70%）を継いだままで、緑になっていなかった。

   色は `.ng-voice__q` 単独（0,1,0）で足りる。
   継承には詳細度が無いので、親の `.ng-body` には負けない。 */
/* 大きさをMessageの見出し（.ng-msg__title 17px）と揃えた（2026-09-22）。
   それまでは本文と同じ14pxで、色と太さだけで差をつけていた。
   「タイトルと本文の大きさのバランスを代表と同じに」という指示どおり、
   17px（本文14pxとの比はMessageと同じ 17:14）にする。 */
.ng-voice__q {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--ng-green-deep);
}

/* 余白は `.uk-panel.ng-body > p`（margin 0／0,2,1）より強くする必要がある。
   `.ng-body` から辿って詳細度を上げる。 */
.ng-body .ng-voice__q + p,
.uk-panel.ng-body .ng-voice__q + p {
	margin-top: .4em;
}

.ng-body p + .ng-voice__q,
.uk-panel.ng-body p + .ng-voice__q {
	margin-top: 2.2em;
}

/* 声が続く場合の間隔 */
.ng-sec > .uk-container > .uk-grid-margin + .uk-grid-margin.ng-voice {
	margin-top: 110px;
}
/* --------------------------------------------------------------------------
   スタッフの声のカード  a.uk-card[href*="/voice/"]

   ビルダーの動的リスト（カード）で組まれている部分。
   リストの中の要素には個別のクラスを当てられないので、
   「リンク先が /voice/ である」ことを手がかりにしている。
   店舗カードや職種カードには当たらない。

   出てくる名前はすべてYOOthemeが付けるもの
     写真の入れ物      .uk-inline-clip
     入社年            .el-meta
     氏名              .el-title（uk-h5 が一緒に付く）
     ひとこと          .el-content（uk-h6 が一緒に付く）
     「くわしく見る」  .el-link

   uk-h5 / uk-h6 はYOOthemeのCSSで指定されており、そちらが後に読まれる。
   クラス1つ同士では負けるため、a.uk-card[href…] から書き始めて
   詳細度を上げている。
   -------------------------------------------------------------------------- */

/* カード本体。Entry欄の白抜きカードと違い、こちらは明るい地の上に置くので
   白地＋細い罫線にする。角丸2pxはサイト全体の共通値 */
a.uk-card[href*="/voice/"] {
	padding: 26px 24px 24px;
	background: var(--ng-paper);
	border: 1px solid var(--ng-ink-12);
	border-radius: 2px;
	box-shadow: none;
	text-decoration: none;
	transition:
		border-color .35s var(--ng-ease),
		transform .35s var(--ng-ease);
}

a.uk-card[href*="/voice/"]:hover {
	border-color: var(--ng-green);
	transform: translateY(-3px);
}

/* 写真。円形の設定で出力されているが、サイトのどこにも円い形が無いため
   角丸2pxに直している。円に戻すときは border-radius を 50% にする。

   元画像は200px四方で書き出される。srcset には400pxも用意されるので
   この大きさなら精細に出るが、カード幅いっぱい（約390px）まで
   広げると粗くなる。 */
a.uk-card[href*="/voice/"] .uk-inline-clip {
	width: 132px;
	border-radius: 2px;
}

a.uk-card[href*="/voice/"] .el-image {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* 入社年。詳細行の .ng-voice__meta と同じ体裁 */
a.uk-card[href*="/voice/"] .el-meta {
	/* UIkitの uk-margin-top などは !important 付きで出る。
	   余白だけは同じ書き方で上書きしないと効かない */
	margin: 18px 0 0 !important;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .16em;
	color: var(--ng-green);
	text-transform: none;
}

/* 氏名。詳細行の .ng-voice__name を、カードに収まる大きさに縮めたもの */
a.uk-card[href*="/voice/"] .el-title {
	margin: 6px 0 0 !important;
	font-family: var(--ng-ja);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--ng-ink);
	text-transform: none;
}

/* ひとこと。詳細行では左に罫を引いて引用らしくしているが、
   カードでは幅が狭く窮屈になるので罫は引かない */
a.uk-card[href*="/voice/"] .el-content {
	margin: 16px 0 0 !important;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.95;
	letter-spacing: .02em;
	color: var(--ng-ink-70);
	text-transform: none;
}

/* 「くわしく見る」。カード全体がリンクなので、これはボタンではなく
   行き先を示す目印。UIkitの下線を消して、上に細い区切り線を置く */
a.uk-card[href*="/voice/"] .el-link {
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--ng-ink-12);
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .08em;
	color: var(--ng-green);
	text-align: left;
	text-transform: none;
	min-height: 0;
}

a.uk-card[href*="/voice/"] .el-link::before {
	display: none;
}

/* UIkit の uk-button-text はホバー時に下線を引く。カード全体で
   反応させたいので、その下線は使わない */
a.uk-card[href*="/voice/"] .el-link::after {
	display: none;
}

/* 「くわしく見る」の上の余白は、区切り線の padding で作っている。
   ビルダーが付ける uk-margin-top と二重になるので打ち消す */
a.uk-card[href*="/voice/"] .uk-margin-top:has(> .el-link) {
	margin-top: 20px !important;
}

/* 狭い画面では2枚並ぶ。余白と文字を詰めて、1行の字数を確保する */
@media (max-width: 639px) {
	a.uk-card[href*="/voice/"] {
		padding: 20px 18px 18px;
	}

	a.uk-card[href*="/voice/"] .uk-inline-clip { width: 102px; }
	a.uk-card[href*="/voice/"] .el-meta { margin-top: 14px !important; font-size: 10px; }
	a.uk-card[href*="/voice/"] .el-title { font-size: 16px; }
	a.uk-card[href*="/voice/"] .el-content { margin-top: 12px !important; font-size: 12px; line-height: 1.9; }
}


/* --------------------------------------------------------------------------
   スタッフの声の個別ページ：戻るボタン  .ng-voice-back

   [ng_voice_back] が出力する。ビルダーのテンプレートに置いて使う。
   お知らせの「お知らせ一覧へ」（.ng-news-back）と同じ考え方だが、
   こちらは本文がACFから出ていて post_content が空なので、
   the_content にぶら下げられない。ショートコードにしてある。

   矢印は左向き。ボタン自体の体裁は .ng-btn（線のボタン）に任せる。
   -------------------------------------------------------------------------- */

.ng-voice-back {
	margin: 56px 0 0;
	padding-top: 40px;
	border-top: 1px solid var(--ng-ink-12);
	text-align: center;
}

/* 左向きの矢印。ホバーで少し左へ出る */
.ng-voice-back__arrow {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-left: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform .35s var(--ng-ease);
}

.ng-voice-back a:hover .ng-voice-back__arrow {
	transform: rotate(45deg) translate(-3px, 3px);
}

/* --------------------------------------------------------------------------
   オーナーメッセージ  .ng-msg__*

   左に写真と肩書き、右に本文。本文は番号つきの2話構成。

   人物まわり（肩書き・氏名・ローマ字）は Voices と同じクラスを使う。
     ng-voice__meta / ng-voice__name / ng-voice__roman

   ビルダー側の設定
     写真の入れ物          → ng-img-1x1
     「代表取締役」        → ng-voice__meta
     「市村 充利」         → ng-voice__name
     「Mitsutoshi…」       → ng-voice__roman
     「01」「02」          → ng-msg__no
     各話の見出し          → ng-msg__title
     各話の本文            → ng-body
     締めの一文            → ng-pull
   -------------------------------------------------------------------------- */

/* 話の番号。ビルダーの「余白なし」指定を上書きするため !important を付ける */
.uk-panel.ng-msg__no,
.ng-msg__no {
	margin: 0 !important;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .2em;
	color: var(--ng-green-deep);
}

/* 2話目以降は上に間隔を空ける */
.ng-body + .uk-panel.ng-msg__no,
.ng-body + .ng-msg__no {
	margin-top: 48px !important;
}

/* 話の見出し（2026-09-22、緑に変更）
   `--ng-green` は白地 2.97 で、17pxは大きい文字の基準（3.0）にも僅かに
   届かない。`--ng-green-deep`（白地 5.40）を使う。
   下の「01」「02」も同じ `--ng-green` だったので、揃えて直した
   （11pxの小さい文字はなおさら4.5が要る）。 */
.uk-panel.ng-msg__title,
.ng-msg__title {
	margin: 8px 0 0 !important;
	font-family: var(--ng-ja);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--ng-green-deep);
}

.ng-msg__title + .uk-panel.ng-body,
.ng-msg__title + .ng-body {
	margin-top: 14px !important;
}

/* 区切り線 */
.ng-sec hr {
	margin: 44px 0;
	border: 0;
	border-top: 1px solid var(--ng-ink-12);
}

/* 左カラムの肩書きまわりを写真から少し離す */
.ng-img-1x1 + .ng-voice__meta,
.ng-img-1x1 + .uk-panel.ng-voice__meta {
	margin-top: 20px !important;
}

/* --------------------------------------------------------------------------
   一緒に働く人たち  .ng-team

   ★2026-08-14 現在、どこからも使われていない。
     クライアントの依頼でリクルートページのTeamセクションを削除したため。
     スタッフの入退社で更新の手間がかかり、退職者の情報が残るのを避けたい、
     という理由だった。復活する可能性を考えて残してある。
     1年経っても使われていなければ消してよい。
     （※ スタッフ一覧ページ /staff/ の .ng-stafflist とは別物。あちらは現役）

   トップページのスタッフ欄と同じ見せ方。
   グリッド要素の外側に .ng-team を付ける。

   ビルダー側の設定
     グリッドの外側 → ng-team
     （画像・役職・氏名・所属サロンは、そのままで整います）
   -------------------------------------------------------------------------- */

/* 画像 */
.ng-team .el-item .el-image {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform .8s var(--ng-ease);
}

.ng-team .el-item > a:first-child,
.ng-team .el-item > picture:first-child {
	display: block;
	overflow: hidden;
}

.ng-team .el-item:hover .el-image {
	transform: scale(1.04);
}

/* 役職 */
.ng-team .el-item .el-meta {
	margin-top: 12px;
	font-family: var(--ng-en);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .2em;
	color: var(--ng-green);
	text-transform: none;
}

/* 氏名 */
.ng-team .el-item .el-title {
	margin-top: 2px;
	font-family: var(--ng-mix);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .08em;
	color: var(--ng-ink);
	text-transform: none;
}

.ng-team .el-item .el-title a {
	color: inherit;
	text-decoration: none;
	transition: color .35s var(--ng-ease);
}

.ng-team .el-item .el-title a:hover {
	color: var(--ng-green-dk);
}

/* 所属サロン */
.ng-team .el-item > .el-content {
	margin-top: 2px;
	font-family: var(--ng-ja);
	font-size: 10px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: .06em;
	color: var(--ng-ink-45);
}

/* 導入文とグリッドの間隔 */
.ng-team {
	margin-top: 40px;
}

/* --------------------------------------------------------------------------
   応募フォーム  .ng-form

   Contact Form 7 が出力するマークアップに合わせている。
   フォーム側のクラスは設定済みなので、ビルダーでの指定は不要。
   -------------------------------------------------------------------------- */

.ng-form {
	max-width: 640px;
}

.ng-form__row {
	margin: 0 0 26px;
}

.ng-form__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .1em;
	color: var(--ng-ink);
}

/* 必須の印 */
.ng-form__req {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 7px;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: .1em;
	color: #fff;
	background: var(--ng-green);
	border-radius: 2px;
	vertical-align: 1px;
}

/* 項目の補足 */
.ng-form__note {
	display: block;
	margin: -4px 0 8px;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--ng-ink-45);
}

/* 入力欄 */
.ng-form input[type="text"],
.ng-form input[type="email"],
.ng-form input[type="tel"],
.ng-form textarea {
	width: 100%;
	padding: 13px 14px;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ng-ink);
	background: var(--ng-paper);
	border: 1px solid var(--ng-ink-12);
	border-radius: 2px;
	box-sizing: border-box;
	transition: border-color .3s var(--ng-ease);
	-webkit-appearance: none;
	appearance: none;
}

.ng-form input::placeholder,
.ng-form textarea::placeholder {
	color: var(--ng-ink-45);
	opacity: 1;
}

.ng-form input:focus,
.ng-form textarea:focus {
	outline: none;
	border-color: var(--ng-green);
}

.ng-form textarea {
	resize: vertical;
	min-height: 140px;
}

/* ラジオボタン。押しやすいよう項目全体を囲む */
.ng-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ng-form .wpcf7-list-item {
	margin: 0;
}

.ng-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	letter-spacing: .04em;
	color: var(--ng-ink);
	background: var(--ng-paper);
	border: 1px solid var(--ng-ink-12);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .3s var(--ng-ease), background-color .3s var(--ng-ease);
}

.ng-form .wpcf7-list-item label:hover {
	border-color: var(--ng-ink-45);
}

.ng-form input[type="radio"],
.ng-form input[type="checkbox"] {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--ng-green);
	flex: none;
}

/* 選択中は枠を濃くする */
.ng-form .wpcf7-list-item label:has(input:checked) {
	border-color: var(--ng-green);
	background: rgba(76, 168, 92, .06);
}

/* 同意のチェック */
.ng-form__consent {
	margin: 32px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--ng-ink-12);
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.ng-form__consent .wpcf7-list-item label {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 13px;
}

.ng-form__consent a {
	color: var(--ng-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ng-ink-45);
}

.ng-form__consent a:hover {
	color: var(--ng-green-dk);
	border-color: var(--ng-green-dk);
}

/* 送信ボタン */
/* Cloudflare Turnstile。
   ウィジェット自体の見た目はCloudflare側の制御下にあるため、
   ここでは周りの余白だけを整える。 */
.ng-form__turnstile {
	margin: 24px 0 0;
}

.ng-form__turnstile iframe {
	max-width: 100%;
}

.ng-form__submit {
	margin: 32px 0 0;
}

.ng-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 260px;
	min-height: 60px;
	padding: 0 40px;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .14em;
	color: #fff;
	background: var(--ng-ink);
	border: 1px solid var(--ng-ink);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .35s var(--ng-ease), border-color .35s var(--ng-ease);
	-webkit-appearance: none;
	appearance: none;
}

.ng-form input[type="submit"]:hover {
	background: var(--ng-green);
	border-color: var(--ng-green);
}

.ng-form input[type="submit"]:disabled {
	opacity: .5;
	cursor: default;
}

@media (max-width: 479px) {
	.ng-form input[type="submit"] {
		width: 100%;
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   Contact Form 7 のメッセージ
   -------------------------------------------------------------------------- */
.wpcf7 form .wpcf7-response-output {
	margin: 28px 0 0;
	padding: 16px 18px;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	border-width: 1px;
	border-radius: 2px;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ng-green);
	background: rgba(76, 168, 92, .07);
	color: var(--ng-ink);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #c0563f;
	background: rgba(192, 86, 63, .06);
	color: #8f3d2c;
}

/* 項目ごとのエラー */
.ng-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: .04em;
	color: #c0563f;
}

.ng-form .wpcf7-not-valid {
	border-color: #c0563f;
}

/* 送信中の表示 */
.wpcf7-spinner {
	margin-left: 14px;
}

/* --------------------------------------------------------------------------
   応募フォーム：暗い背景に置いた場合

   Entry セクションは黒地なので、入力欄と文字を反転させる。
   -------------------------------------------------------------------------- */

.ng-invert .ng-form__label {
	color: #fff;
}

.ng-invert .ng-form__note {
	color: rgba(255, 255, 255, .55);
}

/* 入力欄。背景は少しだけ明るくして、枠と合わせて位置を分かるようにする */
.ng-invert .ng-form input[type="text"],
.ng-invert .ng-form input[type="email"],
.ng-invert .ng-form input[type="tel"],
.ng-invert .ng-form textarea {
	color: #fff;
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .24);
}

.ng-invert .ng-form input::placeholder,
.ng-invert .ng-form textarea::placeholder {
	color: rgba(255, 255, 255, .42);
}

.ng-invert .ng-form input:focus,
.ng-invert .ng-form textarea:focus {
	border-color: var(--ng-green);
	background: rgba(255, 255, 255, .1);
}

/* ラジオボタン */
.ng-invert .ng-form .wpcf7-list-item label {
	color: #fff;
	background: transparent;
	border-color: rgba(255, 255, 255, .24);
}

.ng-invert .ng-form .wpcf7-list-item label:hover {
	border-color: rgba(255, 255, 255, .5);
}

.ng-invert .ng-form .wpcf7-list-item label:has(input:checked) {
	border-color: var(--ng-green);
	background: rgba(76, 168, 92, .16);
}

/* 同意欄 */
.ng-invert .ng-form__consent {
	color: #fff;
	border-top-color: rgba(255, 255, 255, .18);
}

.ng-invert .ng-form__consent a {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .5);
}

.ng-invert .ng-form__consent a:hover {
	color: #fff;
	border-bottom-color: var(--ng-green);
}

/* 送信ボタンは白ベタに反転 */
.ng-invert .ng-form input[type="submit"] {
	color: var(--ng-ink);
	background: #fff;
	border-color: #fff;
}

.ng-invert .ng-form input[type="submit"]:hover {
	color: #fff;
	background: var(--ng-green);
	border-color: var(--ng-green);
}

/* 送信後・エラーのメッセージ */
.ng-invert .wpcf7 form .wpcf7-response-output {
	color: #fff;
}

.ng-invert .wpcf7 form.sent .wpcf7-response-output {
	background: rgba(76, 168, 92, .16);
	border-color: var(--ng-green);
}

.ng-invert .wpcf7 form.invalid .wpcf7-response-output,
.ng-invert .wpcf7 form.failed .wpcf7-response-output {
	color: #ffd9cf;
	background: rgba(192, 86, 63, .18);
	border-color: #c0563f;
}

.ng-invert .ng-form .wpcf7-not-valid-tip {
	color: #ffb3a0;
}

.ng-invert .ng-form .wpcf7-not-valid {
	border-color: #ffb3a0;
}

/* --------------------------------------------------------------------------
   WordPress が段落に入れる自動改行を打ち消す

   Contact Form 7 のフォーム本体は wpautop を通るため、
   ラベルと入力欄の間に <br> が入って余白が二重になる。
   -------------------------------------------------------------------------- */
.ng-form__row > br,
.ng-form__consent > br,
.ng-form__submit > br {
	display: none;
}

/* --------------------------------------------------------------------------
   応募の導線カード（Entry セクション）

   UIkit の Card 要素で組まれている。セクションの id="entry" を起点にしている。
   この id はヒーローとトップページのバンドからのリンク先でもあるので、
   変更しないこと。

   **2026-09-24、背景を暗い写真から白に変えた**（指示）。
   それまでは暗い背景に合わせて「白文字・白の細い枠・墨34%の半透明の地」に
   していた。白地に置くとそれが**灰色の箱に白文字**になり読めなくなったので、
   明るい背景向けに作り直した。

   **手段の名前（`.el-meta`）は `--ng-green-deep`。** 10pxと小さいので
   基準4.5が要る。`--ng-green`（#4ca85c）は白地2.97で届かない。
   -------------------------------------------------------------------------- */

#entry .uk-card,
#entry .uk-card-default {
	display: block;
	padding: 22px 24px;
	background: var(--ng-paper);
	border: 1px solid var(--ng-ink-12);
	border-radius: 2px;
	box-shadow: none;
	text-decoration: none;
	transition: border-color .35s var(--ng-ease), background-color .35s var(--ng-ease);
}

#entry .uk-card:hover {
	background: var(--ng-offwhite);
	border-color: var(--ng-green-dk);
}

/* 手段の名前（LINE / Instagram / Tel） */
#entry .el-meta {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .2em;
	color: var(--ng-green-deep);
	text-transform: none;
}

/* 見出し */
#entry .el-title {
	margin: 6px 0 0;
	font-family: var(--ng-mix);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--ng-ink);
	text-transform: none;
}

/* 電話番号は欧文書体で少し大きく */
#entry a[href^="tel:"] .el-title {
	font-family: var(--ng-en);
	font-size: 21px;
	letter-spacing: .06em;
}

/* 補足 */
#entry .el-content {
	margin: 8px 0 0;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* 外部サイトへ移動することを示す */
#entry a[href^="http"] .el-title::after {
	content: "↗";
	margin-left: 8px;
	font-size: 11px;
	opacity: .5;
}

/* カードどうしの間隔

   対象はカードを並べているグリッドだけに限る。
   ビルダーが作る行（tm-grid-expand）まで含めてしまうと、
   右の列が12px下がり、左のカードと上辺がそろわなくなる。 */
#entry .uk-grid:not(.tm-grid-expand) > * + *,
#entry .uk-grid:not(.tm-grid-expand) > .uk-grid-margin {
	margin-top: 12px;
}

/* 左右の列の間隔（モバイルでは導線とフォームを離す） */
@media (max-width: 959px) {
	#entry .uk-width-1-2\@m + .uk-width-1-2\@m {
		margin-top: 48px;
	}
}

/* --------------------------------------------------------------------------
   Entry セクションの背景写真  ※2026-09-24から休眠

   **背景を白にしたので、いまは当たる要素が無い。** 写真の背景を
   戻すことになれば、このまま使える。
   **消せるのは、Entryを白背景のままにすると決まってから。**
   戻すときは上の導線カードも暗い背景向けに戻すこと（git履歴にある）。

   フォームは文字が多いので、写真がそのまま透けると読みづらい。
   暗幕をかけたうえで、写真自体もぼかす。
   ぼかしは overlay の backdrop-filter で行うので、写真の差し替えに影響しない。
   -------------------------------------------------------------------------- */

#entry [class*="uk-background-"] {
	position: relative;
	background-size: cover !important;
}

#entry [class*="uk-background-"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: rgba(20, 17, 15, .78);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* 中身は暗幕より前面に */
#entry .uk-container {
	position: relative;
	z-index: 1;
}

/* 背景固定は iOS で正しく動かないため、モバイルでは解除 */
@media (max-width: 767px) {
	#entry [class*="uk-background-"] {
		background-attachment: scroll !important;
	}

	#entry [class*="uk-background-"]::before {
		background: rgba(20, 17, 15, .86);
	}
}

/* --------------------------------------------------------------------------
   入力欄のコントラストを上げる
   写真の上に重なるぶん、枠と背景をはっきりさせる
   -------------------------------------------------------------------------- */

.ng-invert .ng-form input[type="text"],
.ng-invert .ng-form input[type="email"],
.ng-invert .ng-form input[type="tel"],
.ng-invert .ng-form textarea {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .34);
}

.ng-invert .ng-form input::placeholder,
.ng-invert .ng-form textarea::placeholder {
	color: rgba(255, 255, 255, .52);
}

.ng-invert .ng-form__note {
	color: rgba(255, 255, 255, .62);
}

.ng-invert .ng-form .wpcf7-list-item label {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .3);
}

/* --------------------------------------------------------------------------
   連絡先パネルの下、会社名と採用担当者  2026-09-24

   `#entry .el-title` / `#entry .el-content` は電話・LINE・Instagramの
   カードにも掛かる共通の指定で、この行もそれをそのまま受けて
   会社名がカードの見出しと同じ17pxになっていた。カードでは無い
   （`.uk-card` を持たない）ので、浮いて見えていた。

   **サイトの他の場所（フッターの会社概要、`.ng-footer-company`）に
   そろえた。** 値は12〜13px・墨系。あちらと違って項目名（dt）を
   伴わない単なる2行なので、ラベルの10px・字間広めまでは使わない。

   この行だけを選ぶのに、`.uk-grid-match` を目印にしている。
   3枚のカードの列は `.uk-grid-column-small`、この行の列だけ
   `.uk-grid-match` で、クラスがビルダー側で既に分かれている。 */
#entry .uk-grid-match .el-title {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

#entry .uk-grid-match .el-content {
	margin-top: 4px;
	font-size: 12px;
	color: var(--ng-ink-70);
}

/* 導線カードを暗い写真に合わせて濃くしていた上書き。

   **2026-09-24、止めた。** 背景を白にしたので、これが残っていると
   上の明るい指定を上書きして灰色の箱に戻ってしまう。
   写真の背景を戻すときに、上の「背景写真」とあわせて復活させる。
   **消せるのは、Entryを白背景のままにすると決まってから。**

#entry .uk-card,
#entry .uk-card-default {
	background: rgba(20, 17, 15, .34);
	border-color: rgba(255, 255, 255, .22);
}

#entry .uk-card:hover {
	background: rgba(20, 17, 15, .48);
	border-color: var(--ng-green);
}

#entry .el-content {
	color: rgba(255, 255, 255, .68);
}
*/

/* --------------------------------------------------------------------------
   フォームを枠で囲む

   応募フォームは「ここで入力する場所」と分かるよう、ひとまとまりにする。
   見出しはフォーム本体（Contact Form 7）の中に入れているので、
   ビルダー側で別に置く必要はない。
   -------------------------------------------------------------------------- */

.ng-form {
	padding: 32px 30px 34px;
	border: 1px solid var(--ng-ink-12);
	border-radius: 2px;
	box-sizing: border-box;
}

@media (max-width: 639px) {
	.ng-form {
		padding: 24px 20px 26px;
	}
}

/* 暗い背景の上では、枠を白の細線にして中を少し沈ませる */
.ng-invert .ng-form {
	background: rgba(20, 17, 15, .34);
	border-color: rgba(255, 255, 255, .22);
}

/* フォームの見出し */
.ng-form-title {
	margin: 0 0 26px;
	padding-bottom: 16px;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .16em;
	color: var(--ng-ink);
	border-bottom: 1px solid var(--ng-ink-12);
	text-transform: none;
}

.ng-invert .ng-form-title {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .22);
}

/* 枠の中に入るので、フォームの最大幅指定は解除する */
.ng-form {
	max-width: none;
}

/* --------------------------------------------------------------------------
   会社概要  .ng-company / .ng-offices / .ng-philosophy

   [ng_company] の出力。中身はPHP側（inc/company.php）にまとめてある。
   -------------------------------------------------------------------------- */

/* 会社情報の表 */
.ng-company {
	margin: 0;
	max-width: 720px;
}

.ng-company__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 18px 0;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-company__row:last-child {
	border-bottom: 1px solid var(--ng-ink-12);
}

@media (min-width: 640px) {
	.ng-company__row {
		grid-template-columns: 140px 1fr;
		gap: 24px;
		padding: 20px 0;
	}
}

.ng-company dt {
	margin: 0;
	padding-top: .3em;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

.ng-company dd {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

/* 事業所の一覧。THE LOCAL のような複合施設は中の店を入れ子で並べる */
.ng-offices {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 720px;
}

.ng-offices__item {
	padding: 18px 0;
	border-bottom: 1px solid var(--ng-ink-12);
}

.ng-offices__item:first-child {
	border-top: 1px solid var(--ng-ink-12);
}

.ng-offices__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

/* 所在地などの補足 */
.ng-offices__note {
	margin: 4px 0 0;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: .06em;
	color: var(--ng-ink-45);
}

/* 複合施設の中に入っている店 */
.ng-offices__sub {
	margin: 14px 0 0;
	padding: 0 0 0 18px;
	list-style: none;
	border-left: 1px solid var(--ng-ink-12);
}

.ng-offices__sub-item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 7px 0;
}

.ng-offices__sub-item .ng-offices__name {
	flex: 1 1 auto;
	font-size: 13px;
}

/* 階数 */
.ng-offices__floor {
	flex: none;
	width: 24px;
	font-family: var(--ng-en);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--ng-green);
}

.ng-offices__name {
	font-family: var(--ng-mix);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.ng-offices__type {
	flex: none;
	font-family: var(--ng-ja);
	font-size: 10px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: .1em;
	color: var(--ng-ink-45);
	text-align: right;
}

/* 経営理念 */
.ng-philosophy__title {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: clamp(1.15rem, 2.6vw, 1.6rem);
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.ng-philosophy__body {
	margin: 20px 0 0;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 2.2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* 暗い背景の上に置いた場合 */
.ng-invert .ng-company__row,
.ng-invert .ng-offices__item,
.ng-invert .ng-offices__sub {
	border-color: rgba(255, 255, 255, .18);
}

.ng-invert .ng-offices__note {
	color: rgba(255, 255, 255, .55);
}

.ng-invert .ng-company dt,
.ng-invert .ng-offices__type { color: rgba(255, 255, 255, .55); }

.ng-invert .ng-company dd,
.ng-invert .ng-offices__name,
.ng-invert .ng-philosophy__title { color: #fff; }

.ng-invert .ng-philosophy__body { color: rgba(255, 255, 255, .74); }

/* --------------------------------------------------------------------------
   募集要項  .ng-req

   新卒／中途の切り替えは YOOtheme の Switcher 要素が行う。
   ここでは、その切り替えつまみ（UIkit の subnav / tab）を
   サイトの見た目に合わせる。

   ビルダー側の設定
     Switcher 要素の外側に  ng-req
     各項目の中身は HTML 要素に貼る（ng-req__table / ng-perks）
   -------------------------------------------------------------------------- */

/* つまみの並び。UIkit の既定の字下げと余白を打ち消す */
.ng-req .uk-subnav,
.ng-req .uk-tab {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 40px;
	padding: 0;
	border: 0;
}

.ng-req .uk-subnav > *,
.ng-req .uk-tab > * {
	padding-left: 0;
	margin: 0;
}

.ng-req .uk-tab::before {
	display: none;
}

/* つまみ本体 */
.ng-req .uk-subnav > * > a,
.ng-req .uk-tab > * > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	min-height: 56px;
	padding: 8px 28px;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .1em;
	color: var(--ng-ink);
	background: transparent;
	border: 1px solid var(--ng-ink-12);
	border-bottom: 1px solid var(--ng-ink-12);
	border-radius: 999px;
	text-transform: none;
	text-decoration: none;
	transition: background-color .35s var(--ng-ease),
	            border-color .35s var(--ng-ease),
	            color .35s var(--ng-ease);
}

.ng-req .uk-subnav > * > a:hover,
.ng-req .uk-tab > * > a:hover {
	color: var(--ng-ink);
	border-color: var(--ng-ink-45);
}

/* 選択中 */
.ng-req .uk-subnav > .uk-active > a,
.ng-req .uk-tab > .uk-active > a {
	color: #fff;
	background: var(--ng-ink);
	border-color: var(--ng-ink);
}

/* 中身の入れ物 */
.ng-req .uk-switcher {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 暗い背景の上に置いた場合 */
.ng-invert .ng-req .uk-subnav > * > a,
.ng-invert .ng-req .uk-tab > * > a {
	color: #fff;
	border-color: rgba(255, 255, 255, .24);
}

.ng-invert .ng-req .uk-subnav > .uk-active > a,
.ng-invert .ng-req .uk-tab > .uk-active > a {
	color: var(--ng-ink);
	background: #fff;
	border-color: #fff;
}

/* --------------------------------------------------------------------------
   募集要項の表
   -------------------------------------------------------------------------- */

.ng-req__year {
	margin: 0 0 22px;
	font-family: var(--ng-mix);
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--ng-ink);
}

.ng-req__table {
	margin: 0;
	max-width: 820px;
}

.ng-req__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 18px 0;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-req__row:last-of-type {
	border-bottom: 1px solid var(--ng-ink-12);
}

@media (min-width: 640px) {
	.ng-req__row {
		grid-template-columns: 120px 1fr;
		gap: 24px;
		padding: 20px 0;
	}
}

.ng-req__table dt {
	margin: 0;
	padding-top: .3em;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

.ng-req__table dd {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ng-req__table dd span {
	display: block;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

/* 注記（※ではじまる行）は小さく */
.ng-req__table dd span.ng-req__note {
	margin-top: 4px;
	font-size: 11px;
	color: var(--ng-ink-45);
}

/* --------------------------------------------------------------------------
   待遇・福利厚生
   -------------------------------------------------------------------------- */

.ng-perks {
	margin: 44px 0 0;
}

.ng-perks__head {
	margin: 0 0 16px;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

.ng-perks__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 820px;
}

.ng-perks__list li {
	padding: 7px 14px;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: .06em;
	color: var(--ng-ink-70);
	border: 1px solid var(--ng-ink-12);
	border-radius: 999px;
}

/* 暗い背景の上に置いた場合 */
.ng-invert .ng-req__year { color: #fff; }
.ng-invert .ng-req__row { border-color: rgba(255, 255, 255, .18); }
.ng-invert .ng-req__table dt,
.ng-invert .ng-perks__head { color: rgba(255, 255, 255, .55); }
.ng-invert .ng-req__table dd span { color: #fff; }
.ng-invert .ng-req__table dd span.ng-req__note { color: rgba(255, 255, 255, .55); }
.ng-invert .ng-perks__list li {
	color: rgba(255, 255, 255, .8);
	border-color: rgba(255, 255, 255, .2);
}

/* --------------------------------------------------------------------------
   採用までの流れ  .ng-flow

   4ステップを横に並べる。番号を大きく置き、矢印でつなぐ。
   モバイルは縦積みで、番号の左に線を通す。
   -------------------------------------------------------------------------- */

.ng-flow {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.ng-flow {
		grid-template-columns: repeat(4, 1fr);
		gap: 0 28px;
	}
}

.ng-flow__item {
	position: relative;
	padding: 0 0 0 46px;
}

.ng-flow__item + .ng-flow__item {
	margin-top: 30px;
}

/* モバイル：番号の左に線を通して、上から下へ流れて見せる */
.ng-flow__item::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 34px;
	bottom: -30px;
	width: 1px;
	background: var(--ng-ink-12);
}

.ng-flow__item:last-child::before {
	display: none;
}

@media (min-width: 768px) {
	.ng-flow__item {
		padding: 0;
	}

	.ng-flow__item + .ng-flow__item {
		margin-top: 0;
	}

	/* PC：番号の右に矢印を出す */
	.ng-flow__item::before {
		content: "";
		left: auto;
		right: -20px;
		top: 13px;
		bottom: auto;
		width: 12px;
		height: 1px;
		background: var(--ng-ink-12);
	}

	.ng-flow__item::after {
		content: "";
		position: absolute;
		right: -20px;
		top: 9px;
		width: 6px;
		height: 6px;
		border-top: 1px solid var(--ng-ink-12);
		border-right: 1px solid var(--ng-ink-12);
		transform: rotate(45deg);
	}

	.ng-flow__item:last-child::after {
		display: none;
	}
}

/* 番号 */
.ng-flow__no {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	font-family: var(--ng-en);
	font-size: 22px;
	font-weight: 200;
	line-height: 1.2;
	letter-spacing: .06em;
	color: var(--ng-green);
}

@media (min-width: 768px) {
	.ng-flow__no {
		position: static;
		font-size: 26px;
	}
}

.ng-flow__head {
	margin: 0;
	padding-top: 2px;
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--ng-ink);
}

@media (min-width: 768px) {
	.ng-flow__head {
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--ng-ink-12);
	}
}

.ng-flow__body {
	margin: 8px 0 0;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* --------------------------------------------------------------------------
   採用の考え方（流れの前に置く一言）
   -------------------------------------------------------------------------- */

.ng-flow-note {
	margin: 0 0 48px;
	padding-left: 20px;
	border-left: 1px solid var(--ng-beige);
	max-width: 42em;
}

.ng-flow-note__lead {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.ng-flow-note__body {
	margin: 12px 0 0;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* --------------------------------------------------------------------------
   美容学生の方へ  .ng-student

   採用の流れ（ng-flow）とは別のセクションに置く。
   選考の段階と混ざって見えないよう、番号は使わず、
   アイコン付きのカードで「今できること」として並べる。
   -------------------------------------------------------------------------- */

.ng-student {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.ng-student {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}

.ng-student__item {
	padding: 26px 26px 28px;
	background: var(--ng-paper);
	border: 1px solid var(--ng-ink-12);
	border-radius: 2px;
}

/* アイコン。Numbers と同じ細い線で揃える */
.ng-student__icon {
	display: block;
	width: 24px;
	height: 24px;
	color: var(--ng-green);
}

.ng-student__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ng-student__head {
	margin: 16px 0 0;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.ng-student__body {
	margin: 8px 0 0;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* 暗い背景の上に置いた場合 */
.ng-invert .ng-flow__item::before,
.ng-invert .ng-flow__item::after,
.ng-invert .ng-flow__head { border-color: rgba(255, 255, 255, .18); }
.ng-invert .ng-flow__item::before { background: rgba(255, 255, 255, .18); }
.ng-invert .ng-flow__head { color: #fff; }
.ng-invert .ng-flow__body,
.ng-invert .ng-flow-note__body { color: rgba(255, 255, 255, .74); }
.ng-invert .ng-flow-note__lead { color: #fff; }
.ng-invert .ng-student__item {
	background: transparent;
	border-color: rgba(255, 255, 255, .18);
}
.ng-invert .ng-student__head { color: #fff; }
.ng-invert .ng-student__body { color: rgba(255, 255, 255, .74); }

/* --------------------------------------------------------------------------
   ページ途中の応募リンク  .ng-cta

   長いページの区切りに、控えめに置く。
   ボタンにすると主張が強く読書を止めてしまうので、
   細い罫線で挟んだテキストリンクにしている。

   ビルダー側：HTML要素に貼るだけ。リンク先は #entry
   -------------------------------------------------------------------------- */

.ng-cta {
	margin: 0;
	padding: 26px 0;
	border-top: 1px solid var(--ng-ink-12);
	border-bottom: 1px solid var(--ng-ink-12);
	text-align: center;
}

.ng-cta__note {
	display: block;
	margin-bottom: 8px;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .08em;
	color: var(--ng-ink-45);
}

.ng-cta a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .14em;
	color: var(--ng-ink);
	text-decoration: none;
	transition: color .35s var(--ng-ease);
}

.ng-cta a:hover {
	color: var(--ng-green-dk);
}

/* 下向きの矢印。この先にある、と示す */
.ng-cta__arrow {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .35s var(--ng-ease);
}

.ng-cta a:hover .ng-cta__arrow {
	transform: rotate(45deg) translate(1px, 1px);
}

@media (prefers-reduced-motion: reduce) {
	.ng-cta a:hover .ng-cta__arrow {
		transform: rotate(45deg) translate(-2px, -2px);
	}
}

/* 前後のセクションから少し離す */
.ng-sec .ng-cta {
	margin-top: 72px;
}

@media (min-width: 960px) {
	.ng-sec .ng-cta {
		margin-top: 96px;
	}
}

/* 暗い背景の上に置いた場合 */
.ng-invert .ng-cta {
	border-color: rgba(255, 255, 255, .18);
}

.ng-invert .ng-cta a { color: #fff; }
.ng-invert .ng-cta a:hover { color: var(--ng-green); }
.ng-invert .ng-cta__note { color: rgba(255, 255, 255, .55); }

/* --------------------------------------------------------------------------
   ページ送り  .uk-pagination

   お知らせが増えて2ページ目以降ができたときに出る。
   数字だけを並べ、現在地は下線で示す。
   -------------------------------------------------------------------------- */

.ng-newslist .uk-pagination,
.uk-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.uk-pagination > * {
	padding-left: 0;
}

.uk-pagination > * > a,
.uk-pagination > * > span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	font-family: var(--ng-en);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .08em;
	color: var(--ng-ink-45);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .35s var(--ng-ease), border-color .35s var(--ng-ease);
}

.uk-pagination > * > a:hover {
	color: var(--ng-ink);
	border-bottom-color: var(--ng-ink-12);
}

/* いま見ているページ */
.uk-pagination > .uk-active > span,
.uk-pagination > .uk-active > a {
	color: var(--ng-ink);
	border-bottom-color: var(--ng-ink);
}

/* 「前へ」「次へ」は少し離して置く */
.uk-pagination .uk-margin-auto-left > a,
.uk-pagination .uk-margin-auto-right > a {
	gap: 8px;
	font-family: var(--ng-ja);
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--ng-ink);
}

.uk-pagination .uk-margin-auto-left > a:hover,
.uk-pagination .uk-margin-auto-right > a:hover {
	color: var(--ng-green-dk);
	border-bottom-color: var(--ng-green-dk);
}

/* 「…」の省略記号 */
.uk-pagination > .uk-disabled > span {
	color: var(--ng-ink-45);
	min-width: 28px;
	padding: 0;
}

/* 暗い背景の上に置いた場合 */
.ng-invert .uk-pagination > * > a,
.ng-invert .uk-pagination > * > span { color: rgba(255, 255, 255, .55); }
.ng-invert .uk-pagination > .uk-active > span,
.ng-invert .uk-pagination > .uk-active > a {
	color: #fff;
	border-bottom-color: #fff;
}

/* --------------------------------------------------------------------------
   写真なしのページ見出し  .ng-page-head

   ヒーロー写真を置かないページ（お知らせ一覧など）の、見出しだけの部分。

   ng-sec を2つ並べると、下の余白と上の余白が重なって
   96＋96＝192px 空いてしまう。見出しと中身が離れすぎるため、
   見出し側の下余白をなくし、次のセクションの上余白も詰める。

   ビルダー側：見出しだけのセクションに ng-sec ではなく ng-page-head を付ける
   -------------------------------------------------------------------------- */

.uk-section.ng-page-head {
	padding-top: 88px;
	padding-bottom: 0;
}

@media (min-width: 960px) {
	.uk-section.ng-page-head {
		padding-top: 120px;
	}
}

/* 見出しの直後に続くセクションは、上の余白を詰める */
.ng-page-head + .uk-section {
	padding-top: 40px;
}

@media (min-width: 960px) {
	.ng-page-head + .uk-section {
		padding-top: 52px;
	}
}

/* 和文の副見出しと中身の間隔 */
.ng-page-head .ng-title-sub {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   写真つきのページ見出し（店舗個別ページ）

   .ng-page-head はもともと「写真なし」用に作ったクラスで、
   店舗個別ページで初めて写真の上に重ねた（2026-09-13）。
   そのままでは和文の副見出しが墨色45%のまま写真に埋もれる。

   **文字の下に幕を敷く。** 写真の明るい部分では白い文字でも読めないため。
   5枚の写真すべてについて、文字が乗る範囲の画素を測って決めた。

   | | |
   |---|---|
   | 幕なし | 最悪の画素（ほぼ純白）で 1.00〜1.72。まったく読めない |
   | 幕55% | 白100%で 4.76。ただし読みがなを薄くする余地がない |
   | **幕66〜70%** | 白100%の見出しで 7.26、**白72%の読みがなで 4.70** |

   薄い読みがなを成立させるために幕を濃くしている。逆ではない。
   下端から320pxで0まで抜くので、写真の上のほうは暗くならない。

   **写真を差し替えたら測り直すこと。** いま4枚に純白に近い画素があり、
   そこが効いている。より明るい写真が来ると足りなくなる。
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   店舗個別ページの見出し（2026-09-19）

   **写真をやめた。** クライアントが毎回用意できない見込みのため
   （2026-09-19、平山さんの判断）。

   写真を敷いていたときの `min-height: 50vh` が**インライン指定で残り**、
   見出しの上に344pxの空白ができていた。インラインはCSSより強いので
   `!important` で消す。

   下の「写真つきのページ見出し」の指定（幕・白い読みがな）は
   `uk-light` が付いているときだけ効くので、写真なしでは当たらない。
   写真を戻したくなったらそのまま使える。
   -------------------------------------------------------------------------- */
.single-salon .ng-page-head {
	min-height: 0 !important;
}

.ng-page-head.uk-light .uk-background-cover {
	position: relative;
}

.ng-page-head.uk-light .uk-background-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .70) 0,
		rgba(0, 0, 0, .66) 100px,
		rgba(0, 0, 0, .52) 200px,
		rgba(0, 0, 0, 0) 320px
	);
}

/* 幕より前に出す。これが無いと文字が幕の下に隠れる */
.ng-page-head.uk-light .uk-background-cover > * {
	position: relative;
	z-index: 1;
}

/* 読みがな。**墨色のままだと写真に沈む**ので白に変える。
   薄さは幕の濃さと対で決めてある（白72%で 4.70）。
   これ以上薄くすると基準を割る。 */
.ng-page-head.uk-light .ng-title-sub {
	color: rgba(255, 255, 255, .72);
}

.ng-page-head.uk-light .ng-page-lead {
	color: rgba(255, 255, 255, .82);
}

/* 見出しの下に置く短い導入文  .ng-page-lead

   一覧ページで「ここに何が並んでいるのか」を1〜2行で伝える。
   長い行は読みにくいので幅を絞る。 */
.ng-page-head .ng-page-lead {
	max-width: 640px;
	margin-top: 24px !important;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2.2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

@media (min-width: 960px) {
	.ng-page-head .ng-page-lead {
		margin-top: 32px !important;
		font-size: 15px;
	}
}

/* --------------------------------------------------------------------------
   お知らせの個別ページ  .single-post

   YOOtheme の既定の記事テンプレートに、サイトの体裁を当てる。
   ビルダーでレイアウトを組む必要がないので、記事を書く人の手間も増えない。
   -------------------------------------------------------------------------- */

.single-post .tm-main {
	padding-top: 88px;
	padding-bottom: 96px;
}

@media (min-width: 960px) {
	.single-post .tm-main {
		padding-top: 120px;
		padding-bottom: 140px;
	}
}

/* 本文の幅。長い行は読みにくいので絞る */
.single-post .uk-article {
	max-width: 720px;
	margin: 0 auto;
}

/* 日付
   投稿者名は inc/news.php で出力そのものを止めている。
   ここでは残った日付の見た目だけを整える。 */
.single-post .uk-article-meta {
	margin: 0 0 14px !important;
}

.single-post .uk-article-meta,
.single-post .uk-article-meta time {
	font-family: var(--ng-en);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

/* 見出し */
.single-post .uk-article-title {
	margin: 0 0 32px !important;
	padding-bottom: 28px;
	font-family: var(--ng-ja);
	font-size: clamp(1.4rem, 3.4vw, 2rem);
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ng-ink);
	border-bottom: 1px solid var(--ng-ink-12);
	text-transform: none;
}

/* 本文 */
.single-post .uk-article > [property="text"] {
	margin-top: 0 !important;
}

.single-post .uk-article p {
	margin: 0 0 1.8em;
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 300;
	line-height: 2.2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

.single-post .uk-article strong {
	font-weight: 400;
	color: var(--ng-ink);
}

.single-post .uk-article h2,
.single-post .uk-article h3 {
	margin: 48px 0 16px;
	font-family: var(--ng-ja);
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.single-post .uk-article h2 { font-size: 19px; }
.single-post .uk-article h3 { font-size: 16px; }

.single-post .uk-article ul,
.single-post .uk-article ol {
	margin: 0 0 1.8em;
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 300;
	line-height: 2.2;
	color: var(--ng-ink-70);
}

.single-post .uk-article img {
	width: 100%;
	height: auto;
	margin: 8px 0 1.8em;
}

.single-post .uk-article a {
	color: var(--ng-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ng-ink-45);
	transition: color .35s var(--ng-ease), border-color .35s var(--ng-ease);
}

.single-post .uk-article a:hover {
	color: var(--ng-green-dk);
	border-color: var(--ng-green-dk);
}

/* 一覧へ戻る */
.ng-news-back {
	margin: 56px 0 0 !important;
	padding-top: 32px;
	border-top: 1px solid var(--ng-ink-12);
	text-align: center;
}

.single-post .uk-article .ng-news-back a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .14em;
	color: var(--ng-ink);
	border: 0;
}

.single-post .uk-article .ng-news-back a:hover {
	color: var(--ng-green-dk);
}

/* 左向きの矢印 */
.ng-news-back__arrow {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-left: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform .35s var(--ng-ease);
}

.single-post .uk-article .ng-news-back a:hover .ng-news-back__arrow {
	transform: rotate(45deg) translate(2px, 2px);
}

/* 前後の記事へ */
.single-post .uk-article > nav {
	margin: 40px 0 0 !important;
}

.single-post .uk-article > nav .uk-pagination {
	justify-content: space-between;
	margin: 0;
}

.single-post .uk-article > nav .uk-pagination a {
	font-family: var(--ng-ja);
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--ng-ink-45);
	border: 0;
}

.single-post .uk-article > nav .uk-pagination a:hover {
	color: var(--ng-ink);
}

/* --------------------------------------------------------------------------
   店舗の地図  .ng-access__map

   [ng_access parts="…,map"] を指定したときに、各店舗の下に出る。
   住所から自動で作るので、住所を直せば地図も一緒に変わる。
   -------------------------------------------------------------------------- */

.ng-access__map {
	position: relative;
	margin-top: 20px;
	aspect-ratio: 4 / 3;
	background: var(--ng-sand, #efeae3);
	border: 1px solid var(--ng-ink-12);
	overflow: hidden;
}

.ng-access__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* 地図は色数が多いので、少し彩度を落としてページに馴染ませる */
	filter: saturate(.85) contrast(.96);
}

@media (min-width: 768px) {
	.ng-access__map {
		aspect-ratio: 3 / 2;
	}
}

/* アクセスページでは、店舗ごとに縦に積む */
.ng-access--page .ng-access {
	grid-template-columns: 1fr;
	gap: 0;
}

.ng-access--page .ng-access__item + .ng-access__item {
	margin-top: 64px;
	padding-top: 64px;
	border-top: 1px solid var(--ng-ink-12);
}

@media (min-width: 960px) {
	/* 左に情報、右に地図 */
	.ng-access--page .ng-access__item {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 48px;
		align-items: start;
	}

	.ng-access--page .ng-access__name,
	.ng-access--page .ng-access__data {
		grid-column: 1;
	}

	.ng-access--page .ng-access__map {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
		aspect-ratio: 4 / 3;
	}

	.ng-access--page .ng-access__item + .ng-access__item {
		margin-top: 80px;
		padding-top: 80px;
	}
}

/* --------------------------------------------------------------------------
   スタッフ一覧  .ng-stafflist

   1人1行。左に顔写真、右に役職と氏名。行全体がリンクになる。
   -------------------------------------------------------------------------- */

.ng-stafflist .el-item {
	height: 100%;
}

.ng-stafflist .el-item > a {
	text-decoration: none;
	color: inherit;
}

/* 顔写真 */
.ng-stafflist .el-image {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform .8s var(--ng-ease);
}

.ng-stafflist .el-item picture {
	display: block;
	overflow: hidden;
}

.ng-stafflist .el-item > a:hover .el-image {
	transform: scale(1.04);
}

/* 役職 */
.ng-stafflist .el-meta {
	margin-top: 0;
	font-family: var(--ng-en);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .2em;
	color: var(--ng-green);
	text-transform: none;
}

/* 氏名 */
.ng-stafflist .el-title {
	margin-top: 4px;
	font-family: var(--ng-mix);
	font-size: clamp(1.1rem, 2.4vw, 1.5rem);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--ng-ink);
	text-transform: none;
}

/* 行の中で上下中央に置く */
@media (min-width: 640px) {
	.ng-stafflist .el-item > a > .uk-grid {
		align-items: center;
	}
}

/* 写真の幅を抑える。1人1行なので、写真が大きすぎると間延びする。
   ビルダーの列指定（1-3@s）は残したまま、中の写真だけを絞る。 */
@media (min-width: 640px) {
	.ng-stafflist .el-item picture,
	.ng-stafflist .el-item .el-image {
		max-width: 200px;
	}
}

/* 行どうしの余白は罫線で見せるので詰める */
.ng-stafflist .uk-grid > * {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   スタッフ個別ページ  .ng-staff-info

   [ng_staff] の出力。氏名の下に置く前提。
   -------------------------------------------------------------------------- */

.ng-staff-info__roman {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .2em;
	color: var(--ng-ink-45);
	text-transform: none;
}

/* プロフィールの表 */
.ng-staff-info__profile {
	margin: 28px 0 0;
}

.ng-staff-info__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 14px 0;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-staff-info__row:last-child {
	border-bottom: 1px solid var(--ng-ink-12);
}

@media (min-width: 640px) {
	.ng-staff-info__row {
		grid-template-columns: 116px 1fr;
		gap: 20px;
		padding: 15px 0;
	}
}

.ng-staff-info__profile dt {
	margin: 0;
	padding-top: .3em;
	font-family: var(--ng-ja);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

.ng-staff-info__profile dd {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.ng-staff-info__profile dd a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--ng-ink-12);
	transition: color .35s var(--ng-ease), border-color .35s var(--ng-ease);
}

.ng-staff-info__profile dd a:hover {
	color: var(--ng-green-dk);
	border-color: var(--ng-green-dk);
}

/* 本人からのコメント。引用らしく左に線を引く */
.ng-staff-info__comment {
	margin: 32px 0 0;
	padding-left: 18px;
	border-left: 1px solid var(--ng-beige);
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2.2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* 暗い背景の上に置いた場合 */
.ng-invert .ng-staff-info__row { border-color: rgba(255, 255, 255, .18); }
.ng-invert .ng-staff-info__profile dt,
.ng-invert .ng-staff-info__roman { color: rgba(255, 255, 255, .55); }
.ng-invert .ng-staff-info__profile dd { color: #fff; }
.ng-invert .ng-staff-info__comment { color: rgba(255, 255, 255, .74); }

/* スタッフ一覧のアンカー。固定ヘッダーに隠れないよう上に余白を取る */
.ng-staff-anchor {
	display: block;
	position: relative;
	top: -100px;
	visibility: hidden;
}

.ng-stafflist .el-item {
	scroll-margin-top: 100px;
}

/* --------------------------------------------------------------------------
   ビルダーを使わない固定ページ（プライバシーポリシーなど）

   お知らせの個別ページと同じ体裁を当てる。
   長い規約文でも読み進められるよう、見出しの間隔を広めに取る。
   -------------------------------------------------------------------------- */

.page .tm-main {
	padding-top: 88px;
	padding-bottom: 96px;
}

@media (min-width: 960px) {
	.page .tm-main {
		padding-top: 120px;
		padding-bottom: 140px;
	}
}

.page .uk-article {
	max-width: 720px;
	margin: 0 auto;
}

.page .uk-article-meta {
	display: none;
}

.page .uk-article-title {
	margin: 0 0 40px !important;
	padding-bottom: 28px;
	font-family: var(--ng-ja);
	font-size: clamp(1.5rem, 3.6vw, 2.1rem);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--ng-ink);
	border-bottom: 1px solid var(--ng-ink-12);
	text-transform: none;
}

.page .uk-article > [property="text"] {
	margin-top: 0 !important;
}

.page .uk-article p {
	margin: 0 0 1.6em;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2.2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

.page .uk-article h2 {
	margin: 52px 0 16px;
	padding-bottom: 10px;
	font-family: var(--ng-ja);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .06em;
	color: var(--ng-ink);
	border-bottom: 1px solid var(--ng-ink-12);
}

.page .uk-article h3 {
	margin: 32px 0 10px;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.page .uk-article ul,
.page .uk-article ol {
	margin: 0 0 1.6em;
	padding-left: 1.3em;
}

.page .uk-article li {
	margin-bottom: 6px;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

.page .uk-article strong {
	font-weight: 400;
	color: var(--ng-ink);
}

.page .uk-article a {
	color: var(--ng-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ng-ink-45);
}

.page .uk-article a:hover {
	color: var(--ng-green-dk);
	border-color: var(--ng-green-dk);
}

/* 制定日 */
.ng-policy-date {
	margin-top: 56px !important;
	padding-top: 24px;
	border-top: 1px solid var(--ng-ink-12);
	font-size: 12px !important;
	letter-spacing: .1em;
	color: var(--ng-ink-45) !important;
	text-align: right;
}

/* --------------------------------------------------------------------------
   サロン一覧  .ng-salonlist

   1店1段。写真を主役にし、段ごとに写真の左右を入れ替える。
   店舗数が少ないので、カードを並べるより1店ずつ見せたほうが印象に残る。

   ビルダーの動的リストが吐く入れ子（.el-item > .uk-grid）を、
   PCではCSSグリッドで組み直している。ビルダー側で列幅を
   何に設定しても崩れないようにするため。
   -------------------------------------------------------------------------- */

.ng-salonlist .el-item + .el-item,
.ng-salonlist > .uk-grid > * + * .el-item {
	margin-top: 0;
}

/* 段と段の間。区切り線は引かず、余白だけで分ける */
.ng-salonlist > .uk-grid > * + * {
	margin-top: 72px;
}

/* テキスト側の並び順。
   ビルダーは「タイトル → メタ」の順で吐くが、
   業態のラベルは店名の上に置きたい。並べ替えはCSSで行い、
   ビルダー側の順序を気にしなくてよいようにする。 */
.ng-salonlist .el-item > .uk-grid > :last-child {
	display: flex;
	flex-direction: column;
}

.ng-salonlist .el-meta  { order: 1; }
.ng-salonlist .el-title { order: 2; }
.ng-salonlist .el-content { order: 3; }

/* 写真。店ごとに縦横比がまちまちなので、4:3に揃える */
.ng-salonlist picture,
.ng-salonlist .el-image {
	display: block;
	width: 100%;
}

.ng-salonlist .el-image {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	background: var(--ng-sand, #efeae3);
}

/* 業態（メタ）。ビルダーの既定の体裁を打ち消す */
.ng-salonlist .el-meta {
	margin: 0 0 10px !important;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .12em;
	text-transform: none;
	color: var(--ng-green-dk) !important;
}

/* 店名 */
.ng-salonlist .el-title {
	margin: 0 !important;
	font-family: var(--ng-en);
	font-size: 26px;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: .06em;
	color: var(--ng-ink);
}

.ng-salonlist .el-title a {
	color: inherit;
	text-decoration: none;
	transition: color .35s var(--ng-ease);
}

.ng-salonlist .el-title a:hover {
	color: var(--ng-green-dk);
}

.ng-salonlist .el-content {
	margin-top: 18px !important;
}

/* 写真とテキストの間（モバイル） */
.ng-salonlist .el-item > .uk-grid > * + * {
	margin-top: 24px;
}

@media (min-width: 960px) {
	/* 写真とテキストを横に並べる。写真をやや大きく取る */
	.ng-salonlist .el-item > .uk-grid {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		gap: 0 64px;
		align-items: center;
		margin: 0;
	}

	/* uk-width-* と uk-grid の余白を無効にして、グリッドに任せる */
	.ng-salonlist .el-item > .uk-grid > * {
		width: auto;
		max-width: none;
		padding-left: 0;
		margin-top: 0;
	}

	/* 偶数番目の段は写真を右に置く */
	.ng-salonlist > .uk-grid > :nth-child(even) .el-item > .uk-grid > :first-child {
		order: 2;
	}

	.ng-salonlist > .uk-grid > * + * {
		margin-top: 104px;
	}

	.ng-salonlist .el-title {
		font-size: 32px;
	}
}

/* --------------------------------------------------------------------------
   プロダクト一覧  .ng-productlist

   商品は「もの」なので、サロン一覧のように1件ずつ大きく見せるより、
   写真を揃えて並べたほうが比べやすい。PCで2列、モバイルで1列。

   いまは1件しかないため、1件だけのときは中央に置く。
   端に寄っていると「読み込みに失敗したのかな」と思わせてしまう。
   -------------------------------------------------------------------------- */

/* 並び順。
   ビルダーは「写真 → 商品名 → ブランド名」の順で吐くが、
   ブランド名は商品名の上に置きたい。並べ替えはCSSで行い、
   ビルダー側の順序を気にしなくてよいようにする。 */
.ng-productlist .el-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 写真は <a>（リンクあり）か <picture>（リンクなし）で包まれる */
.ng-productlist .el-item > a,
.ng-productlist .el-item > picture { order: 1; }
.ng-productlist .el-meta           { order: 2; }
.ng-productlist .el-title          { order: 3; }
.ng-productlist .el-content        { order: 4; }

/* 写真。商品ごとに縦横比がまちまちなので4:3に揃える */
.ng-productlist picture,
.ng-productlist .el-image {
	display: block;
	width: 100%;
}

.ng-productlist .el-image {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	background: var(--ng-sand, #efeae3);
}

/* ブランド名（メタ）。商品名の上に小さく置く */
.ng-productlist .el-meta {
	margin: 24px 0 8px !important;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .14em;
	text-transform: none;
	color: var(--ng-ink-45) !important;
}

/* 商品名。名前が長いので、サロン一覧より小さめにする */
.ng-productlist .el-title {
	margin: 0 !important;
	font-family: var(--ng-en);
	font-size: 19px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.ng-productlist .el-title a {
	color: inherit;
	text-decoration: none;
	transition: color .35s var(--ng-ease);
}

.ng-productlist .el-title a:hover {
	color: var(--ng-green-dk);
}

.ng-productlist .el-content {
	margin-top: 16px !important;
}

/* 説明文は4行で丸める。全文は個別ページで読ませる */
.ng-productlist .ng-product-info__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

@media (min-width: 640px) {
	.ng-productlist > .uk-grid > * + * {
		margin-top: 0;
	}

	.ng-productlist .el-title {
		font-size: 21px;
	}
}

/* 商品が1件しかないときは中央に置く */
.ng-productlist > .uk-grid > :only-child {
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   プロダクト一覧のアンカー

   個別ページを作らないため、商品へのリンクは /product/#product-◯◯ に
   なる。固定ヘッダーに隠れないよう上に余白を取る。
   （inc/product-list-only.php）
   -------------------------------------------------------------------------- */

.ng-product-anchor {
	display: block;
	position: relative;
	top: -100px;
	visibility: hidden;
}

.ng-productlist .el-item {
	scroll-margin-top: 100px;
}

/* --------------------------------------------------------------------------
   募集要項のパネル  .ng-jobs / .ng-job-panel

   リクルートページに職種を並べる。職種が増えても崩れないよう、
   PCで2列・モバイルで1列のグリッドにする。

   キャッチの長さは職種によって変わるため、パネルの高さを揃えたうえで
   ボタンだけを下端に寄せる。ボタンの位置がばらつくと、
   並んだときに視線が落ち着かない。

   ビルダー側：セクションに ng-sec を付け、中に [ng_jobs] を置くだけ。
   -------------------------------------------------------------------------- */

.ng-jobs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 768px) {
	.ng-jobs {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}

/* PCでは3列。職種が5つ並ぶと2列では縦に長く、1枚あたりも大きすぎた。
   3列にすると1画面に収まり、職種どうしを見比べやすくなる。
   タブレット幅（768〜1199px）は3列だと窮屈なので2列のままにする。 */
@media (min-width: 1200px) {
	.ng-jobs {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}

.ng-job-panel {
	/* ボタンの ::after がこの箱いっぱいに広がる基準になる */
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 30px 30px;
	background: #fff;
	border: 1px solid var(--ng-ink-12);
	border-radius: 2px;
	transition: border-color .35s var(--ng-ease), box-shadow .35s var(--ng-ease);
}

@media (min-width: 768px) {
	.ng-job-panel {
		padding: 40px 36px 36px;
	}
}

/* 3列では1枚の幅が狭くなるぶん、内側の余白を詰める */
@media (min-width: 1200px) {
	.ng-job-panel {
		padding: 32px 28px 28px;
	}
}

.ng-job-panel:hover {
	border-color: var(--ng-ink-45);
	box-shadow: 0 10px 30px rgba(20, 17, 15, .06);
}

/* ここから下、色と見出しの指定は .ng-jobs .ng-job-panel まで書いて強くしている。
   ビルダーを使わない固定ページに置いた場合、`.page .uk-article p / a / h3`
   （クラス2つ＋要素）のほうが強く、文字色や字の大きさを持っていかれるため。
   パネルはどのページに置いても同じ見た目になるようにする。 */

/* 区分のラベル。
   ★2026-08-14 現在、使われていない。職種のタイトル自体が
     「（新卒）美容師・アイリスト」の形になり、別にラベルを添えると
     区分が2回続くため、パネルからは外した（inc/job.php）。
     タイトルの書き方が変わったときに戻せるよう残してある。 */
.ng-jobs .ng-job-panel .ng-job-panel__cat {
	margin: 0 0 12px;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .14em;
	color: var(--ng-green-dk);
}

/* 職種名 */
.ng-jobs .ng-job-panel .ng-job-panel__title {
	margin: 0;
	font-family: var(--ng-mix);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

@media (min-width: 768px) {
	.ng-jobs .ng-job-panel .ng-job-panel__title {
		font-size: 22px;
	}
}

/* 3列では職種名が2行に折り返しやすいので、少し落とす */
@media (min-width: 1200px) {
	.ng-jobs .ng-job-panel .ng-job-panel__title {
		font-size: 19px;
	}
}

.ng-jobs .ng-job-panel .ng-job-panel__catch {
	margin: 14px 0 0;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* 雇用形態と給与。個別ページの表と同じ体裁にして、
   パネルから詳細へ進んだときに同じ形が続くようにする */
.ng-job-panel__spec {
	margin: 24px 0 0;
}

.ng-job-panel__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 14px 0;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-job-panel__row:last-of-type {
	border-bottom: 1px solid var(--ng-ink-12);
}

@media (min-width: 480px) {
	.ng-job-panel__row {
		grid-template-columns: 76px 1fr;
		gap: 16px;
		align-items: baseline;
	}
}

.ng-jobs .ng-job-panel .ng-job-panel__spec dt {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

.ng-jobs .ng-job-panel .ng-job-panel__spec dd {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

/* ボタン。パネルの高さが違っても下端で揃うよう、上に余白を寄せる */
.ng-job-panel__more {
	margin: 28px 0 0 !important;
	margin-top: auto !important;
	padding-top: 28px;
}

.ng-jobs .ng-job-panel .ng-job-panel__more a.ng-btn-solid {
	display: flex;
	width: 100%;
	/* ボタンの既定は content-box。そのままだと width:100% に
	   左右のパディングが足され、パネルからはみ出す */
	box-sizing: border-box;
	min-height: 54px;
	font-size: 13px;
	/* 固定ページの `a` 用の指定（下線・文字色）を打ち消す */
	color: #fff;
	border-bottom: 0;
}

/* パネルのどこを押しても個別ページへ進めるようにする。
   見出しもリンクにすると入れ子になり、HTMLとして成り立たないため、
   リンクはこのボタン1つに保ったまま、当たり判定だけを広げる */
.ng-jobs .ng-job-panel .ng-job-panel__more a.ng-btn-solid::after {
	content: "";
	position: absolute;
	inset: 0;
	/* 角丸はパネルに合わせる。inherit にするとボタンのピル型（999px）を
	   受け継ぎ、当たり判定が楕円に切り取られて四隅が反応しなくなる */
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ng-job-panel {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   募集要項ページの区分バッジ  .ng-job-cat

   タイトルの上に置く小さな札。新卒と中途を、ページを開いた瞬間に
   見分けられるようにする。パネル側は文字だけの緑、こちらは緑地に白。
   一覧では控えめに、個別ページでは言い切る、という強弱をつけている。

   ビルダー側：タイトルの上のテキスト要素に ng-job-cat を付ける
   -------------------------------------------------------------------------- */

/* ビルダーのテキスト要素には .uk-panel が付く。
   UIkitの theme.css は当CSSより後に読まれ、クラス1つ同士では
   .uk-panel の display: flow-root が勝って札が横幅いっぱいに広がる。
   クラスを2つ重ねて詳細度を上げる。 */
.ng-job-cat,
.uk-panel.ng-job-cat {
	display: inline-block;
	margin: 0 0 14px !important;
	padding: 5px 14px;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .14em;
	color: #fff;
	background: var(--ng-green);
	border-radius: 2px;
}

/* 区分と職種名はひと組で読ませたいので、見出し側の上余白を落とす。
   ビルダーの見出しは既定で40pxほど空くため、そのままだと札が
   宙に浮いて、どちらに属する札か分かりにくくなる。 */
.ng-job-cat + h1,
.ng-job-cat + h2 {
	margin-top: 0 !important;
}

/* 暗い背景のセクションに置いた場合も読めるようにしておく */
.ng-invert .ng-job-cat {
	color: #fff;
	background: var(--ng-green);
}

/* --------------------------------------------------------------------------
   募集要項の個別ページ  .ng-job-detail

   条件の表。募集要項は「読み比べるもの」なので、
   項目名と内容の位置を揃えて、行を追いやすくする。

   ビルダー側
     セクション   ng-sec
     見出し（h1） 投稿タイトル
     コンテンツ   Content（[ng_job] の出力が入る）
   -------------------------------------------------------------------------- */

.ng-job-detail__catch {
	margin: 0 0 40px;
	max-width: 720px;
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 300;
	line-height: 2.2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

.ng-job-detail__table {
	margin: 0;
	max-width: 820px;
}

.ng-job-detail__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 18px 0;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-job-detail__row:last-of-type {
	border-bottom: 1px solid var(--ng-ink-12);
}

@media (min-width: 640px) {
	.ng-job-detail__row {
		grid-template-columns: 132px 1fr;
		gap: 24px;
		padding: 20px 0;
	}
}

.ng-job-detail__table dt {
	margin: 0;
	padding-top: .3em;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

.ng-job-detail__table dd {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

/* --------------------------------------------------------------------------
   フォームの読み取り専用の欄

   「ご希望の職種」はページから入るため書き換えられない。
   入力できる欄と同じ見た目だと「打てない」と誤解されるので、
   地を少し落として、触る欄ではないことを見た目で伝える。
   -------------------------------------------------------------------------- */

.ng-form input[readonly] {
	background: var(--ng-offwhite);
	color: var(--ng-ink-70);
	border-color: var(--ng-ink-12);
	cursor: default;
}

.ng-form input[readonly]:focus {
	border-color: var(--ng-ink-12);
	box-shadow: none;
}

/* 暗い背景のセクションに置いた場合。
   募集要項ページ（白地）とリクルートページ（写真の上）の
   両方に同じフォームが載るため、どちらでも読めるようにする。 */
.ng-invert .ng-form input[readonly] {
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .65);
	border-color: rgba(255, 255, 255, .18);
}

.ng-invert .ng-form input[readonly]:focus {
	border-color: rgba(255, 255, 255, .18);
}

/* --------------------------------------------------------------------------
   Entry欄の「募集要項から応募する」導線  .ng-entry-cta

   応募フォームは募集要項ページに置き、リクルートページからは
   そこへ送る。職種を読んでから応募してもらうことで、
   応募者と会社の双方でミスマッチが減る。

   フォームが入っていた右半分を置き換えるため、
   枠と余白はフォーム（.ng-form）と同じにして、左のカード群との
   釣り合いを保つ。

   ビルダー側
     パネル（外側）  ng-entry-cta
       見出し h4     ng-entry-cta__title
       テキスト      ng-entry-cta__body
       ボタン        ng-btn-solid  ／ リンク先 #requirement
   -------------------------------------------------------------------------- */

.ng-entry-cta {
	padding: 32px 30px 34px;
	border: 1px solid var(--ng-ink-12);
	border-radius: 2px;
	box-sizing: border-box;
}

.ng-invert .ng-entry-cta {
	border-color: rgba(255, 255, 255, .24);
	background: rgba(20, 17, 15, .34);
}

.ng-entry-cta .ng-entry-cta__title {
	margin: 0 !important;
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .1em;
	color: var(--ng-ink);
}

.ng-invert .ng-entry-cta .ng-entry-cta__title {
	color: #fff;
}

.ng-entry-cta .ng-entry-cta__body {
	margin: 16px 0 0 !important;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

.ng-invert .ng-entry-cta .ng-entry-cta__body {
	color: rgba(255, 255, 255, .78);
}

/* ボタンは枠いっぱい。左のカード群と視覚的な重さを合わせる */
.ng-entry-cta .ng-btn-solid,
.ng-entry-cta a.ng-btn-solid {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	min-height: 56px;
	margin-top: 26px;
}

/* --------------------------------------------------------------------------
   募集要項の条件表（ビルダーのリストで組む場合）  .ng-job-spec

   ショートコード [ng_job] と同じ見た目になるようにしてある。
   どちらで組んでもページの体裁は変わらないので、
   ビルダーで項目を足し引きしたい場合はこちらを使う。

   ビルダー側
     リスト要素の外側 → ng-job-spec
     各項目のタイトル → 項目名（雇用形態・給与 など）
     各項目のメタ     → 対応するフィールド

   リストが吐く入れ子（.el-item > .uk-grid）を、CSSグリッドで
   組み直している。ビルダー側で列幅を何に設定しても崩れないようにするため。
   -------------------------------------------------------------------------- */

.ng-job-spec,
ul.ng-job-spec {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 820px;
}

.ng-job-spec > .el-item {
	margin: 0;
	padding: 18px 0;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-job-spec > .el-item:last-child {
	border-bottom: 1px solid var(--ng-ink-12);
}

/* 中身が空の項目は行ごと隠す。
   ビルダーのリストは、値が空でも項目名だけを書き出してしまう。
   「歩合・手当」の右が白いままだと、書き忘れのように見える。
   値のある行だけを残すことで、職種ごとに条件が違っても表が締まる。 */
.ng-job-spec > .el-item:not(:has(.el-meta)) {
	display: none;
}

/* 項目名と内容を左右に置く */
.ng-job-spec > .el-item > .uk-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	margin: 0;
}

.ng-job-spec > .el-item > .uk-grid > * {
	width: auto;
	max-width: none;
	padding-left: 0;
	margin-top: 0;
}

@media (min-width: 640px) {
	.ng-job-spec > .el-item {
		padding: 20px 0;
	}

	.ng-job-spec > .el-item > .uk-grid {
		grid-template-columns: 132px 1fr;
		gap: 24px;
	}
}

.ng-job-spec .el-title {
	margin: 0 !important;
	padding-top: .3em;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

/* 内容。フィールドの改行をそのまま活かす。
   ビルダーのリストは改行をHTMLに変換しないため、
   pre-line を指定しないと「給与」の2行が1行に潰れる。 */
.ng-job-spec .el-meta {
	margin: 0 !important;
	font-family: var(--ng-ja);
	font-size: 14px !important;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--ng-ink) !important;
	white-space: pre-line;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   ページ内リンクの着地点

   リクルートページのヘッダーは、スクロールすると画面上部に固定される
   （高さ76px）。そのままアンカーへ飛ぶと、見出しがヘッダーの下に潜って
   「押したのに何も起きていない」ように見える。

   idを持つセクションに余白を持たせて、見出しから読み始められるようにする。
   -------------------------------------------------------------------------- */

.ng-sec[id],
.ng-page-head[id],
.ng-sec-page-hero[id],
.ng-sec-voices[id],
.ng-sec-interview[id],
#chutotitle,
#shinsotsu {
	scroll-margin-top: 100px;
}

/* --------------------------------------------------------------------------
   募集職種のグループ見出し  .ng-job-group

   「新卒採用」「中途採用」でパネルを2つに分ける。タブにすると、
   閉じている側の職種は存在自体が伝わらないため、見出しで分けて
   どちらも見える形にした。

   ヒーローからの導線は、この見出しのidを指す。

   ビルダー側
     見出し h3 → ng-job-group ／ idに job-shinsotsu もしくは job-chuto
     その下に [ng_jobs category="新卒"] / [ng_jobs category="中途"]
   -------------------------------------------------------------------------- */

.ng-job-group {
	margin: 56px 0 24px !important;
	font-family: var(--ng-mix);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .1em;
	color: var(--ng-ink);
	/* 固定ヘッダーの下に潜らせない */
	scroll-margin-top: 100px;
}

@media (min-width: 768px) {
	.ng-job-group {
		margin-top: 72px !important;
		font-size: 20px;
	}
}

/* 見出しの下に細い線を引いて、グループの始まりをはっきりさせる */
.ng-job-group::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	margin-top: 14px;
	background: var(--ng-green);
}

/* 見出しの上に、見えない余白を持たせる。

   ヒーローのリンクは uk-scroll（UIkitの滑らかスクロール）で動く。
   これは scroll-margin-top を見ずに、固定ヘッダーの高さぶんだけ
   ずらして止まる。そのため見出しがヘッダーの真下に貼りつき、
   窮屈に見えていた。上に余白を作り、その余白ごと隠れてもらう。 */
.ng-job-group::before {
	content: "";
	display: block;
	height: 28px;
	margin-top: -28px;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   ファーストビューの2導線  .ng-hero-path

   「美容学生の方へ」と「キャリアが浅い方・ブランクのある方へ」。
   クライアントの依頼で、新卒（学生）を主・中途を従として見せ分ける。

   学生向けは枠で囲んでボタンを置き、中途はテキストリンクにとどめる。
   同じ強さで2つ並べると、どちらを見ればよいか決められなくなる。
   主従をつけることで、学生の視線がまず1つ目に止まる。

   ビルダーのリスト要素で組むため、中の見出し・本文・リンクには
   個別にクラスを当てられない。外側の ng-hero-path だけを手がかりに、
   ビルダーが吐く .el-title / .el-content / .el-link を直接整える。

   ビルダー側
     学生向け  ng-hero-path ng-hero-path--main  ／ リンク先 #job-shinsotsu
     中途向け  ng-hero-path                     ／ リンク先 #job-chuto
   -------------------------------------------------------------------------- */

/* リストの入れ物が余白を持つので、2つの間隔はここで作る */
.ng-hero-path {
	box-sizing: border-box;
}

/* 学生向け。枠で囲んで、ここが入口だと分かるようにする */
.ng-hero-path.ng-hero-path--main {
	padding: 22px 24px 24px;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 2px;
	background: rgba(20, 17, 15, .28);
}

@media (min-width: 768px) {
	.ng-hero-path.ng-hero-path--main {
		padding: 26px 28px 28px;
	}
}

/* 見出し */
.ng-hero-path .el-title {
	margin: 0 !important;
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .1em;
	color: #fff;
}

/* 主の側だけ一段大きく。依頼の「学生向けを一番目立つように」に対応する */
.ng-hero-path--main .el-title {
	font-size: 17px;
}

@media (min-width: 768px) {
	.ng-hero-path--main .el-title {
		font-size: 19px;
	}
}

/* 本文 */
.ng-hero-path .el-content {
	margin-top: 10px !important;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 2;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .82);
}

.ng-hero-path--main .el-content {
	font-size: 14px;
}

/* リンクの外側の余白 */
.ng-hero-path .el-content + .uk-margin-top,
.ng-hero-path .uk-margin-top:last-child {
	margin-top: 16px !important;
}

/* --- 学生向けのリンクはボタンにする --- */
.ng-hero-path--main .el-link,
.ng-hero-path--main a.el-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 52px;
	padding: 0 28px;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .14em;
	line-height: 1.4;
	color: var(--ng-ink);
	background: #fff;
	border: 1px solid #fff;
	border-radius: 999px;
	text-decoration: none;
	text-transform: none;
	transition: background-color .35s var(--ng-ease),
	            color .35s var(--ng-ease),
	            border-color .35s var(--ng-ease);
}

.ng-hero-path--main .el-link:hover {
	background: var(--ng-green);
	border-color: var(--ng-green);
	color: #fff;
}

/* --- 中途のリンクは下線付きの文字にとどめ、従に見せる --- */
.ng-hero-path:not(.ng-hero-path--main) .el-link,
.ng-hero-path:not(.ng-hero-path--main) a.el-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 4px;
	min-height: 0;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .08em;
	color: #fff;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .45);
	border-radius: 0;
	text-decoration: none;
	text-transform: none;
	transition: color .35s var(--ng-ease), border-color .35s var(--ng-ease);
}

.ng-hero-path:not(.ng-hero-path--main) .el-link::after {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
	transition: width .35s var(--ng-ease);
}

.ng-hero-path:not(.ng-hero-path--main) .el-link:hover {
	border-color: #fff;
}

.ng-hero-path:not(.ng-hero-path--main) .el-link:hover::after {
	width: 26px;
}

/* --------------------------------------------------------------------------
   Entry欄の職種カード  .ng-entry-jobs

   [ng_job_links] が出力する。左の3枚（LINE・Instagram・電話）と並べる。
   あちらが「気軽に聞く」窓口、こちらが「職種を決めて応募する」窓口。

   カードの見た目は #entry .uk-card の指定がそのまま効くよう、
   同じクラスを出力している。ここでは並べ方だけを決める。

   ビルダー側
     見出し  ng-entry-jobs__title
     その下に [ng_job_links]
   -------------------------------------------------------------------------- */

/* クラスを2回書いて詳細度を上げている。
   見出しには uk-h3 などの体裁クラスが一緒に付き、YOOthemeのCSSは
   当CSSより後に読まれる。クラス1つ同士では負けて、文字色と大きさを
   持っていかれる（暗い背景に暗い文字で、ほぼ読めなくなる）。
   uk-h1〜h6 のどれが付いても効くよう、この書き方にしてある。 */
.ng-entry-jobs__title.ng-entry-jobs__title {
	margin: 0 0 20px !important;
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .08em;
	/* 2026-09-24、白から墨70%へ。Entryが暗い背景だった頃の色が
	   そのまま残っていて、白地では見えなくなっていた（指示で発覚）。 */
	color: var(--ng-ink-70);
	text-transform: none;
}

/* ビルダーはショートコードを .uk-panel.uk-margin で包む。
   見出しの下余白と二重になるので、包みの余白を打ち消して
   見出し側の20pxだけを効かせる。 */
.uk-margin:has(> .ng-entry-jobs) {
	margin-top: 0 !important;
}

.ng-entry-jobs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

/* 職種が増えても縦に伸びすぎないよう、広い画面では2列にする。
   左のカードは3枚だが、こちらは職種の数だけ増えるため。 */
@media (min-width: 960px) {
	.ng-entry-jobs {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

.ng-entry-jobs__item {
	display: flex;
}

.ng-entry-jobs__item > .uk-card {
	width: 100%;
	box-sizing: border-box;
}

/* 職種名は行数が変わるので、カードの高さを揃える */
.ng-entry-jobs .el-title {
	font-size: 15px;
}

/* 給与の1行。空の職種では出力そのものが無い */
.ng-entry-jobs .el-content {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .72);
}

/* --------------------------------------------------------------------------
   店舗個別ページ 01 – CONCEPT / 02 – MENU の写真の縦横比

   写真は店舗ごとに縦横まちまち（Big up のラウンジは横位置、
   Lua の個室は縦位置）。**そのまま出すと段の高さが店舗ごとに変わり、
   5店を見比べたときに別のページのように見える。**
   欄ごとに比率を決めて、どの店でも同じ形に収める。

   **どちらも横長（4:3）。** 2026-09-13、クライアント判断。
   いったんメニュー側を縦長（3:4）にしたが、横長にそろえ直した。

   切り抜きはブラウザ側（object-fit: cover）で行う。
   ビルダーの画像要素に寸法を指定していないので、YOOtheme は写真を
   そのままの比率で出しており、**元の画素はすべて残っている**。

   縦長をやめたことで、横位置の写真でも拡大にならなくなった。
   （3:4は580px幅で773px高になり、横位置の写真だと左右を大きく捨てた
   うえで引き伸ばすことになっていた）
   -------------------------------------------------------------------------- */
/* .ng-sec-salon-menu は休止中のセクション。当たる先が戻ったときのために
   セレクタだけ残してある（2026-09-13） */
.ng-sec-salon-concept .el-image,
.ng-sec-salon-menu .el-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   店舗個別ページ 03 – ACCESS  .ng-sec-salon-access

   トリートメント欄と同じ組み方にそろえる（2026-09-13、クライアント要望）。
   左に小さなラベル、右に内容。罫線は項目の上下に引き、
   項目どうしは線を共有する。

   ビルダー側：セクションに ng-sec-salon-access を付ける
   -------------------------------------------------------------------------- */
.uk-section.ng-sec-salon-access {
	/* 2026-09-19に白へ（指示）。ヒーローから写真を外してページ全体が
	   白基調になったので、ここだけグレーだと浮いていた。 */
	background-color: var(--ng-paper);
}

/* 見出し「アクセス」を、上のコンセプトの見出しと同じ大きさにそろえる
   （2026-09-13、クライアント要望）。

   `.ng-title-h2` は clamp で最大64pxまで伸びる共通の見出し。
   トップの「Shop List」のような英字の大見出し用で、ここでは大きすぎた。

   **書体も `--ng-en` から `--ng-mix` に変えている。** `--ng-en` は
   Jost → Helvetica Neue → Arial で、**和文のグリフを持たない**。
   「アクセス」だと最後の総称フォントまで落ちて、サイトの他の和文
   （Noto Sans JP）と揃わなくなる。 */
.ng-sec-salon-access .ng-title-h2 {
	font-family: var(--ng-mix);
	font-size: 22px;
	line-height: 1.7;
	letter-spacing: .06em;
}

/* UIkit の uk-list-divider は2件目以降にしか線を引かない。
   上下に引きたいので、こちらで引き直す。 */
.ng-sec-salon-access .uk-list > .el-item {
	margin-top: 0;
	padding: 16px 0;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-sec-salon-access .uk-list > .el-item:last-child {
	border-bottom: 1px solid var(--ng-ink-12);
}

/* ラベルの列幅をそろえる。
   ビルダーの「自動」のままだと ADDRESS 72px・TEL 33px と幅が変わり、
   **内容の頭の位置が行ごとにずれる**。最低幅を決めて左端をそろえる。
   min-width にしてあるので、これより長いラベルが来ても切れない
   （その行だけずれる）。 */
.ng-sec-salon-access .uk-list .el-item .uk-width-auto {
	flex: 0 0 auto;
	min-width: 92px;
}

@media (max-width: 639px) {
	.ng-sec-salon-access .uk-list .el-item .uk-width-auto {
		min-width: 78px;
	}
}

/* ラベル（ADDRESS / TEL / HOURS / CLOSED）。
   トリートメントの番号と同じ役回りだが、**色は緑にしない。**
   緑は「番号」の印にしてあり、4つ並ぶラベルまで緑にすると印が薄まる。 */
.ng-sec-salon-access .uk-list .el-title {
	padding-top: 3px;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .18em;
	color: var(--ng-ink-70);
	text-transform: uppercase;
}

/* 郵便番号。住所の上に小さく添える */
.ng-sec-salon-access .uk-list .el-meta {
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .1em;
	/* --ng-ink-45 は白地でも 3.03 で基準4.5を割る。70%（7.05）にする */
	color: var(--ng-ink-70);
	text-transform: none;
}

.ng-sec-salon-access .uk-list .el-content {
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

/* 電話番号は欧文で組む（住所と同じ書体だと数字が詰まって見える） */
.ng-sec-salon-access .uk-list .el-content a[href^="tel:"] {
	font-family: var(--ng-en);
	font-size: 15px;
	letter-spacing: .06em;
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Instagramの行（2026-09-19）

   表の外に置いていた `.ng-salon-sns` をやめて、表の1行に入れた（指示）。
   罫線が2本並んで、中身のない行があるように見えていたのも解消する。

   **リンクは下線で示す。** 表の他の値（住所・電話・営業時間）は
   ただの文字なので、同じ見た目だと押せることが伝わらない。
   `uk-link` の既定色（#2d2e33）だと本文の墨色とわずかに違うだけで、
   色の差では気づけない。

   2つのセレクタで受けているのは、行の中身が
   ・`[ng_salon_instagram inline]`   → `.ng-salon-ig__link`
   ・ビルダーでフィールドに直結      → ただの `a`
   のどちらでも成り立つようにするため。**前者が正**（荒川沖店は
   アカウントが2つあり、フィールド直結だと1つ目しか出ない）。

   **包みの `.ng-salon-ig` を当てにしない**（2026-09-19）。
   ビルダーの行に「リンク」設定が残っていると、出力が
   `<a><span class="ng-salon-ig">…</span></a>` になる。
   **`<a>` は入れ子にできないので、ブラウザがHTMLを組み直す。**
   包みは空になり、中のリンク2本は兄弟として外に出される。
   荒川沖店のアカウント2つが横に並んだのはこれが原因。

   そのため**改行はリンク自身に持たせている**（`display: block`）。
   包みが生きていても壊れていても同じ見た目になる。
   `width: fit-content` は下線が列いっぱいに伸びるのを防ぐため。
   -------------------------------------------------------------------------- */
.ng-sec-salon-access .uk-list .el-content .ng-salon-ig__link,
.ng-sec-salon-access .uk-list .el-content a[href*="instagram.com"] {
	display: block;
	width: fit-content;
	font-family: var(--ng-en);
	font-size: 14px;
	letter-spacing: .04em;
	color: var(--ng-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ng-ink-12);
	padding-bottom: 2px;
	transition: color .35s var(--ng-ease), border-color .35s var(--ng-ease);
}

/* 行の間。包みの `gap` ではなくここで空けるのは上のとおり */
.ng-sec-salon-access .uk-list .el-content .ng-salon-ig__link + .ng-salon-ig__link,
.ng-sec-salon-access .uk-list .el-content a[href*="instagram.com"] + a[href*="instagram.com"] {
	margin-top: 6px;
}

.ng-sec-salon-access .uk-list .el-content .ng-salon-ig__link:hover,
.ng-sec-salon-access .uk-list .el-content .ng-salon-ig__link:focus-visible,
.ng-sec-salon-access .uk-list .el-content a[href*="instagram.com"]:hover,
.ng-sec-salon-access .uk-list .el-content a[href*="instagram.com"]:focus-visible {
	color: var(--ng-green-deep);
	border-bottom-color: var(--ng-green-deep);
}

/* 予約ボタンと表のあいだ */
.ng-sec-salon-access .ng-btn-solid,
.ng-sec-salon-access .ng-btn {
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   横長の図版  .ng-figure-wide （2026-09-21 → 2026-09-22 方針変更）

   新卒教育カリキュラムと中途入社後の流れ。クライアントが**画像で**と
   決めた（2026-09-21）。

   **スマホでは読めない。** 1920px幅の原稿で本文が15〜16px。
   375pxの画面に横いっぱいで置くと 375 ÷ 1920 × 15 ≒ 3px にしかならない。

   はじめは「タップで拡大」で当座をしのぐ予定だった（ライトボックス＋
   但し書き）。2026-09-22、平山さんが縦組みのスマホ版を正式に依頼する
   ことになり、この中継ぎをやめ、届くまでスマホでは非表示にする方針にした。

   **2026-09-22、その非表示を一時的に外している。** はじめは
   「実際にスマホでどれだけ読みにくいか確認したい」という理由だったが、
   同日中に**平山さんがCodexで縦組みの見本を1枚（Education用）作り、
   PC用の図と並べてスマホに両方表示させる運用に変わった。**

   **この縦組みの見本はクライアント支給ではない。** 方向性を確認して
   もらうためのたたき台。**PCとスマホ、両方をクライアントに見せるのが
   目的**なので、PC用画像の非表示は外したままでよい。意図的な状態。

   正式なスマホ版（Education・中途入社後の流れの両方）が届いたら、
   下の「出し分け」に置き換える。そのとき、PC用画像も並べて見せる
   運用を続けるかどうか平山さんに確認すること。

   ビルダー側の作業は「画像を置いて `ng-figure-wide` を付ける」だけ。
   リンクは無し（ライトボックス不要）。

   縦組み版が届いたら、画像を2つ置いて `uk-visible@s` / `uk-hidden@s` で
   出し分ける。UIkitの標準機能なので、こちらの指定は要らない。
   -------------------------------------------------------------------------- */
.ng-figure-wide img {
	display: block;
	width: 100%;
	height: auto;
}

/* 2026-09-22、確認のため一時的にコメントアウト。
   縦組み版が届いたら削除して uk-visible@s / uk-hidden@s に置き換える。
@media (max-width: 767px) {
	.ng-figure-wide {
		display: none;
	}
}
*/

/* --------------------------------------------------------------------------
   リクルートのヒーロー（パネルスライダー）  .ng-sec-recruit-hero
   2026-09-21

   Canva P1（新卒）・P2（中途）の2枚。左に写真、右にコピー。
   **新卒と中途は別々の人に向けた2つの入口**なので、
   どちらも見つけてもらえることが最優先。

   ビルダー側
     セクション          ng-sec-recruit-hero   ← **これ1つだけ**
     緑の一行            ng-rhero__lead（コンテンツ欄にHTMLで）
     本文                ng-body ／ 条件の2行 ng-note
     ボタン              ng-btn

   **スライド1枚ごとのクラスは要らない。** YOOthemeが `el-item` `el-title`
   `el-meta` `el-image` を必ず出すので、セクションから辿れる。

   はじめ各スライドに `ng-rhero` を付ける形にしていたが、**2枚目に付け忘れて
   写真の比率だけ直らなかった**（2026-09-21）。枚数が増えるたびに
   付け忘れが起きる書き方をやめ、`el-item` から辿るようにした。
   タイトルとメタも同じ理由でクラスを付けていない。

   **テーマ既定の書体が当たっていたので上書きしている。**
   タイトルが Playfair Display、リードが PT Serif で出ていた。
   どちらも**和文のグリフを持たない**ので、総称フォントまで落ちて
   サイトの他の和文と揃わなくなる。メタは #b4b5ba で白地 2.2 しかなく、
   基準4.5を大きく割っていた。
   -------------------------------------------------------------------------- */

/* 写真。Canvaは左半分・全高で、比率は 1803:2160（0.835）。
   もとは 2:3（0.667）で、Canvaより細長かった。 */
.ng-sec-recruit-hero .el-item .el-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1803 / 2160;
	object-fit: cover;
}

/* 見出しとメタを同じ行に並べる（Canvaと同じ）。
   `uk-margin-top` は `!important` 付きなので、こちらも `!important` が要る。 */
.ng-sec-recruit-hero .el-item .el-title,
.ng-sec-recruit-hero .el-item .el-meta {
	display: inline-block;
	vertical-align: baseline;
}

.ng-sec-recruit-hero .el-item .el-title {
	margin: 0 !important;
	font-family: var(--ng-mix);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.ng-sec-recruit-hero .el-item .el-meta {
	margin: 0 0 0 18px !important;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .12em;
	/* 既定の #b4b5ba は白地 2.2。12pxなので 4.5 が要る。70%で 7.05 */
	color: var(--ng-ink-70);
	text-transform: none;
}

/* ボタン。Canvaでは見出しのすぐ下、緑の一行より上にある */
.ng-sec-recruit-hero .el-item .el-content > p:first-child {
	margin: 26px 0 0;
}

/* 緑の一行。Canvaは緑の太字で、本文と役割が違う。
   `--ng-green` は白地 2.97、`--ng-green-dk` でも 4.21 で足りない。
   `--ng-green-deep` は 5.40。 */
.ng-sec-recruit-hero .el-item .ng-rhero__lead {
	margin: 40px 0 0;
	font-family: var(--ng-ja);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-green-deep);
}

.ng-sec-recruit-hero .el-item .ng-rhero__lead + .ng-body {
	margin-top: 14px;
}

.ng-sec-recruit-hero .el-item .ng-body + .ng-note {
	margin-top: 18px;
}

/* スライダーの送り。2つの入口のうち片方が隠れるので、
   **見つけられることを優先して**点と矢印をはっきり出す。 */
.ng-sec-recruit-hero .uk-dotnav > * > * {
	border-color: var(--ng-ink-45);
}

.ng-sec-recruit-hero .uk-dotnav > .uk-active > * {
	background-color: var(--ng-ink);
	border-color: var(--ng-ink);
}

@media (max-width: 959px) {
	/* 縦に積むので、写真と文字の間を空ける */
	.ng-sec-recruit-hero .el-item .el-title {
		font-size: 24px;
	}

	.ng-sec-recruit-hero .el-item .ng-rhero__lead {
		margin-top: 30px;
		font-size: 16px;
	}
}

/* --------------------------------------------------------------------------
   ヒーローの手書き「Recruit」（2026-09-21）

   Canva P1・P2 で見出しの上に置かれている飾り。

   **書体ではなくSVGにした。** 7文字の飾りのために書体を1つ読み込むのは
   割に合わない。**アウトライン化してあるので書体の配信許諾も要らない。**
   `<text>` を含まない `<path>` だけのSVG（8.6KB）。

   （2026-09-21、平山さんが書体を見つけてIllustratorで作成。
   それまでは Canva の書き出しから起こした透過PNGを当てていた。
   `mask-image` の URL を差し替えるだけで入れ替わった。）

   **`mask-image` で置いている。** 色をCSS側（トークン）で決められる。
   SVGの `<path>` に `fill` 指定が無く既定の黒なので、
   マスク（アルファ）としてそのまま使える。

   元の色は Canva から測って #66bd93（`--ng-green-band`、クライアントが
   2026-09-19に指定した緑）だったが、**2026-09-23、同じヒーロー内の
   リード文と同じ `--ng-green-deep`（#367741）に揃えた**（指示）。
   ヒーローの中で緑を使っているのはこの2つだけなので、色が2種類あると
   ちぐはぐに見えていた。

   **これは飾りで、意味上の見出しは「新卒募集」。**
   だから `::before` の背景にしてある。DOMに出ないので読み上げにも乗らない。
   白地とのコントラストは 5.42（前は2.27）。**読ませる文字ではない**ので
   基準の対象外だが、濃くしたぶん見えやすくもなった。

   ビルダー側の作業は無し。セクションの `ng-sec-recruit-hero` だけで
   2枚とも付く（枚数が増えても同じ）。
   -------------------------------------------------------------------------- */
.ng-sec-recruit-hero .el-item .el-title::before {
	content: "";
	display: block;
	/* viewBox 548.45 × 325.95（比 1.683）。ベクターなので拡大しても滲まない */
	width: 128px;
	aspect-ratio: 548.45 / 325.95;
	margin-bottom: 2px;
	/* リード文（ng-rhero__lead）と同じ緑。2026-09-23 */
	background-color: var(--ng-green-deep);
	-webkit-mask: url(../img/recruit-script.svg) no-repeat left center / contain;
	        mask: url(../img/recruit-script.svg) no-repeat left center / contain;
}

/* 見出しとメタを同じ行に並べているので、飾りだけは行を分ける。
   `el-title` は inline-block なので、::before を block にすると
   見出しの上に乗る。 */

/* --------------------------------------------------------------------------
   ヒーローの細い枠（2026-09-21）

   Canva P1・P2 にある枠線。**モバイルでは出さない**（指示）。
   縦に積むと枠が細長くなって意味をなさないため。

   Canvaの実測（3840pxで書き出して測定、括弧内は1920換算）

     余白  スライド端から 100px（50px）= 縦 4.6% ／ 横 2.6%
     太さ  4px（2px）→ 1200幅では 1.25px なので **1px**
     色    #655d5c。`--ng-ink-70` は白地で #5b5857 で、差は20。**ほぼ同じ**

   **枠は写真の上に重なっている。** 左の線も写真の上に出ていることを
   画素で確認した（x=100〜103 が上下の全域で線の色）。
   写真のほうが枠より外にはみ出す形。だから `::after` を後ろに回さない。

   **余白を % にしてある。** 縦は高さ、横は幅に対する割合なので、
   写真の大きさが変わってもCanvaと同じ比率のまま。
   px で置くと、写真の比率を変えたときにずれる。
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
	.ng-sec-recruit-hero .el-item {
		position: relative;
	}

	.ng-sec-recruit-hero .el-item::after {
		content: "";
		position: absolute;
		inset: 4.6% 2.6%;
		border: 1px solid var(--ng-ink-70);
		/* 枠の上でリンクが押せなくならないように */
		pointer-events: none;
	}
}

/* --------------------------------------------------------------------------
   スライダーの停止ボタン  .ng-slider-pause （2026-09-21）

   JSがドットの入れ物に足す（`assets/js/30-slider-autoplay.js`）。
   ビルダー側の作業は無い。

   WCAG 2.2.2（レベルA）。5秒以上ひとりでに動き続けるものには
   止める手段が要る。UIkit の `pauseOnHover` はホバー中だけで、
   **スマホにホバーは無い。**

   **入れ物を640px未満でも出している。** ビルダー既定の `uk-visible@s` は
   そこで消すが、消すと**スマホで2枚目があることが誰にも分からなくなる。**
   ドットも矢印も停止ボタンも出ず、指で払う以外に手が無くなるため
   （2026-09-21に気づいて直した）。

   `uk-visible@s` は `display: none !important`。詳細度は同じ (0,1,0) で、
   **`theme.1.css` のほうが後に読まれるので普通に書くと負ける。**
   セクションから辿って (0,2,0) にして勝たせている。

   印は文字を使わず、四角2つと三角をCSSで描く。
   「❚❚」「▶」は環境で見え方が変わるため。
   -------------------------------------------------------------------------- */
.ng-slider-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

/* スマホでも出す。ドットが「2枚ある」印になり、停止ボタンも押せる */
@media (max-width: 639px) {
	.ng-sec-recruit-hero .ng-slider-nav {
		display: flex !important;
	}
}

/* 入れ物を横並びにしたので、ドットの側の中央寄せは不要になる */
.ng-slider-nav > .uk-dotnav {
	margin: 0;
}

.ng-slider-pause {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--ng-ink-45);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color .35s var(--ng-ease);
}

.ng-slider-pause:hover,
.ng-slider-pause:focus-visible {
	border-color: var(--ng-ink);
}

.ng-slider-pause::before {
	content: "";
	display: block;
}

/* 動いているとき＝押すと止まる。一時停止の印（縦棒2本） */
.ng-slider-pause[data-state="running"]::before {
	width: 7px;
	height: 8px;
	border-left: 2px solid var(--ng-ink-70);
	border-right: 2px solid var(--ng-ink-70);
}

/* 止まっているとき＝押すと動く。再生の印（三角） */
.ng-slider-pause[data-state="paused"]::before {
	width: 0;
	height: 0;
	margin-left: 2px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid var(--ng-ink-70);
}

/* --------------------------------------------------------------------------
   リクルート 01「どんな会社なの？？」  .ng-sec-about （2026-09-21）

   Canva P3。左にテキスト（3-5）、右に写真（2-5）、垂直中央。
   いままでの Philosophy と差し替え。

   **ページのH1はここ。**「スタッフの幸せが、お客様の幸せ」。
   Canvaではこの2行が最後にあるが、最後に来る見出しは下に何も従えないので
   上に移した。問いかけ → 答え → 説明 の流れになる。

   Canvaの実測（3840pxで書き出し、括弧内は1920換算）

     01        帯 210px（105）  #66bd93
     会社名     帯 103px（52）   #655d5c
     問いかけ   帯  88px（44）   #66bd93
     本文      帯  60px（30）   #655d5c

   **緑はCanvaのミント（#66bd93）を使っていない。白地で 2.27 しかない。**
   小さい文字には4.5、大きい文字でも3.0が要る。問いかけは19pxなので
   まるで足りない。サイトの `--ng-green-deep`（5.40）にそろえた。
   数字だけミントにすると section の中で緑が2種類になるので、こちらも同じ。

   **大きさはCanvaの実寸ではなく、サイトの段階に合わせている。**
   Canvaの本文は1920換算30pxで、そのまま比率で移すと本文が21pxになる。
   サイトの本文は14pxなので、ここだけ大きくなって浮く。
   **上下関係（01 ≫ H1 > 会社名 > 問いかけ > 本文）だけ保っている。**
   -------------------------------------------------------------------------- */

/* 章の番号。**`ng-sec-num`（11pxの小さいラベル）とは別物。**
   名前が1文字違いで紛らわしいので、02の章を作るときに改名を考える。 */
.ng-sec-about .ng-sec-no {
	margin: 0;
	font-family: var(--ng-en);
	font-size: clamp(44px, 5vw, 64px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--ng-green-deep);
}

.ng-sec-about .ng-about__company {
	margin: 18px 0 0;
	font-family: var(--ng-mix);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .08em;
	color: var(--ng-ink);
}

.ng-sec-about .ng-about__q {
	margin: 6px 0 0;
	font-family: var(--ng-ja);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ng-green-deep);
}

/* ページのH1 */
.ng-sec-about .ng-about__lead {
	margin: 40px 0 0;
	font-family: var(--ng-mix);
	font-size: clamp(24px, 2.8vw, 32px);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

/* H1に続く一文。見出しの一部ではないので本文寄りの扱い */
.ng-sec-about .ng-about__lead-sub {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--ng-ink);
}

/* 本文は `.ng-body` の既定のまま。H1側との間隔だけ足す */
.ng-sec-about .ng-about__lead-sub + p {
	margin-top: 1.8em;
}

.ng-sec-about .uk-panel.ng-body {
	margin-top: 26px;
}

/* 2026-10-01、指示でモバイル・タブレット（〜959px）も横並びに変更。
   写真がフルサイズに広がって大きすぎるとの指示。
   PC（960px以上）と同じ「左に文字・右に写真」を保ったまま、写真を
   半分幅に縮める。

   **PCの `uk-flex-first@m`（文字を先頭＝左に回す指定）は `@m` 以上
   にしか効かない。** 960px未満はDOM順（写真→文字）のまま横に並ぶと
   写真が左に来てしまうので、`order` で明示的に入れ替える。 */
@media (max-width: 959px) {
	.ng-sec-about .uk-container > .uk-grid {
		flex-wrap: nowrap;
	}

	/* 写真列（DOM順では先頭）。半分幅にして右へ */
	.ng-sec-about .uk-grid-item-match.uk-flex-middle.uk-width-2-5\@m {
		width: 50%;
		order: 2;
	}

	/* 文字列。半分幅にして左へ */
	.ng-sec-about .uk-width-3-5\@m.uk-flex-first\@m {
		width: 50%;
		order: 1;
	}

	/* 横並びになったので、縦積み用だったここの余白は詰める */
	.ng-sec-about .ng-about__lead {
		margin-top: 20px;
	}
}

/* --------------------------------------------------------------------------
   リクルート 02「会社理念」  .ng-sec-philosophy （2026-09-21）

   Canva P4。1列のテキストの下に、画面端まで届く写真の帯。

   Canvaの実測（3840pxで書き出し、括弧内は1920換算）

     02       帯 210px（105）  #66bd93
     会社理念   帯 132px（66）   #655d5c
     引用      帯 107px（54）   #66bd93
     本文      帯  60px（30）   #655d5c
     写真の帯   y1487〜2160 = 673px（336）／**全幅**／比 5.71

   **ぼかしは要らない。** 帯の上が紙に溶けて見えるのは、
   写真そのものの上端が建物の白い壁と空だから。画素で確かめた
   （帯の上端の直前が 244,242,241 で紙とほぼ同じ）。
   グラデーションのマスクを足すと、かえって不自然になる。

   緑は01と同じ理由で `--ng-green-deep`。
   Canvaのミント #66bd93 は白地 2.27 で基準に届かない。
   -------------------------------------------------------------------------- */

/* 帯を画面端まで広げるので、はみ出しを刈る。
   `100vw` はスクロールバーの幅を含むため、これが無いと横スクロールが出る。
   `clip` は `hidden` と違ってスクロールの入れ物を作らない。 */
.ng-sec-philosophy {
	overflow-x: clip;
}

.ng-sec-philosophy .ng-sec-no {
	margin: 0;
	font-family: var(--ng-en);
	font-size: clamp(44px, 5vw, 64px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--ng-green-deep);
}

.ng-sec-philosophy .ng-philosophy__title {
	margin: 14px 0 0;
	font-family: var(--ng-mix);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .08em;
	color: var(--ng-ink);
}

.ng-sec-philosophy .ng-philosophy__quote {
	margin: 10px 0 0;
	font-family: var(--ng-ja);
	font-size: 23px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ng-green-deep);
	/* スマホで「感／謝される」と語の途中で折れていた。
	   `keep-all` で語のまとまりを保ち、それでも入らないときだけ
	   `break-word` で逃がす（はみ出させない）。 */
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 本文。**幅を止める。**
   Canvaの3行はそれぞれ1行に収まる独立した文で、いちばん長い行が46文字。
   サイトの14pxで1200px幅だと85文字入ってしまい、読み進めるのがつらい。
   720pxならCanvaと同じく3行とも1行に収まる。 */
.ng-sec-philosophy .uk-panel.ng-body {
	max-width: 720px;
	margin-top: 26px;
}

.ng-sec-philosophy .ng-philosophy__quote + p {
	margin-top: 1.4em;
}

/* 写真の帯。画面端まで広げる */
.ng-sec-philosophy .ng-philosophy__band {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	/* `uk-margin` の `* + .uk-margin { margin-top: 20px }` が `!important`。
	   詳細度では勝っているのに margin-top だけ負けていた
	   （`width` と `margin-left` は効いていたので気づきにくい）。 */
	margin-top: 54px !important;
}

/* --------------------------------------------------------------------------
   帯を上げて、本文の最後の2行に重ねる（2026-09-21、指示）
   → 2026-10-01、平山さんが02欄に写真列（.uk-width-1-2@m、本文の隣）を
     追加したのに伴い無効化。

   本文は14px・行の高さ2.4なので1行 34px。段落の間が22px。
   **最後の2段落（34＋22＋34＝90px）を重ねる。**
   本文の下マージン20pxと相殺されるので、指定は -110px。

   **文字が写真の上に来るようにする。** 帯はDOM上で本文の後ろにあり、
   そのままだと写真が文字を覆う。本文に `z-index` を与えて前に出す。

   **読めることは画素で確かめた。** 文字が重なる範囲は
   写真の横18〜57%・上から19〜38%で、建物の白い壁と空。
   いちばん暗い画素でも墨70%との比が **6.21〜6.86**。基準4.5を満たす。

   | 画面幅 | 重なるのは写真の上から | 最暗部との比 |
   |---|---|---|
   | 960 | 37.6% | 6.21 |
   | 1200 | 30.1% | 6.66 |
   | 1869 | 19.3% | 6.86 |

   **モバイルではやらない。** 帯が114pxしかないので、重ねると
   写真の濃い部分（木部・窓）に文字が乗って読めなくなる。960px以上だけ。

   **2026-10-01に判明：この想定は「本文の隣に写真が無い」前提だった。**
   本文の右列に新しい写真（4人・DSC_1098）が追加されたことで、同じ行の
   高さが変わり、-110pxの引き上げが本文ではなく新しい写真の下70px前後に
   食い込むようになっていた（新しい写真の下辺が隠れて見える不具合）。
   本文との重ね演出はこの新しい写真列と両立しないため無効化し、帯は
   他の帯と同じ通常の間隔（54px、上の指定）で下に置く形に戻す。
   消していないのは、将来また「本文の隣に写真が無い」構成に戻すときの
   ため。そのときはこの `@media` ブロックを復活させればよい。

   **2026-10-01、さらに指示で追記。** 今度は逆に「帯の白グラデーションが
   上の行（新しい写真・本文）の後ろに少し重なるように」という指示。
   前回とは重なる向きが逆（帯が前面ではなく背面）なので、写真・本文側の
   行を `z-index` で帯より前に出し、帯だけを引き上げる。帯が隠れることは
   あっても、上の行（写真・本文）が隠れることはない。 */
@media (min-width: 960px) {
	.ng-sec-philosophy .uk-container > .uk-grid:first-child {
		position: relative;
		z-index: 1;
	}

	.ng-sec-philosophy .ng-philosophy__band {
		position: relative;
		z-index: 0;
		margin-top: -150px !important;
	}
}

.ng-sec-philosophy .ng-philosophy__band img {
	display: block;
	width: 100%;
	/* **写真の比そのまま**（1569×478 = 3.282）。
	   Canvaの帯は 5.71 だが、そこに合わせると縦を43%捨てることになる。
	   平山さんが帯の形に切って傾きも直した写真を用意したので、
	   **切らずに全部見せる**（2026-09-21、指示）。

	   比が写真と同じなので `cover` でも切り取りは起きない。
	   `min-height` は外した。置くと狭い画面で切れ始める。 */
	aspect-ratio: 1569 / 478;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   リクルート「Staff Interview」の扉  .ng-sec-voices （2026-09-21）

   Canva P5。ミント地に4名の顔写真を横並び、下に役職と氏名。

   **文字はCanvaの #545454 を使っていない。** ミント地で 3.34 しかなく、
   小さい文字の基準4.5に届かない。サイトの墨100%なら **8.30**。
   `--ng-title-sub` の墨45%も、この地の上では薄すぎるので70%（4.59）に上げる。

   写真の比はCanvaが 0.888（282×318）。書き出した顔写真も 566×637 で同じ。

   **番号（01〜04）と緑の枠は、この扉には無い。**
   Canvaではインタビュー本体（P6・P7）のほうに付いている。
   -------------------------------------------------------------------------- */
.uk-section.ng-sec-voices {
	background-color: var(--ng-green-band);
}

/* 見出し。ミント地では墨45%が薄すぎる。
   **このセクションの中だけ**に閉じること。`.ng-title-sub` は
   サイト共通で、白地では墨45%のままと決めてある（2026-09-19）。 */
.ng-sec-voices .ng-title-h2 {
	color: var(--ng-ink);
}

.ng-sec-voices .uk-panel.ng-title-sub,
.ng-sec-voices .ng-title-sub {
	color: var(--ng-ink-70);
}

/* 顔写真 */
.ng-sec-voices .el-item img,
.ng-sec-voices .el-image {
	display: block;
	width: 100%;
	aspect-ratio: 282 / 318;
	object-fit: cover;
}

/* 役職 */
.ng-sec-voices .el-meta {
	margin: 16px 0 0 !important;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .1em;
	color: var(--ng-ink);
}

/* 氏名 */
.ng-sec-voices .el-title {
	margin: 2px 0 0 !important;
	font-family: var(--ng-mix);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--ng-ink);
}

/* --------------------------------------------------------------------------
   扉から各インタビューへのリンク（2026-09-22）

   扉の4枚は、下に続くインタビューへの飛び先。
   **リンクは項目ごとにビルダーで `#furuta` のように指定する。**

   押せることが分かるように、写真をわずかに持ち上げる。
   文字の色は変えない。ミント地で墨100%（8.30）を保ちたいため。
   -------------------------------------------------------------------------- */
.ng-sec-voices a.el-item,
.ng-sec-voices .el-item a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ng-sec-voices a.el-item img,
.ng-sec-voices .el-item a img {
	transition: transform .45s var(--ng-ease), opacity .45s var(--ng-ease);
}

.ng-sec-voices a.el-item:hover img,
.ng-sec-voices a.el-item:focus-visible img,
.ng-sec-voices .el-item a:hover img,
.ng-sec-voices .el-item a:focus-visible img {
	transform: translateY(-4px);
	opacity: .88;
}

@media (max-width: 639px) {
	/* 2列になるので、行のあいだを空ける */
	.ng-sec-voices .uk-grid > * {
		margin-top: 28px;
	}

	.ng-sec-voices .el-title {
		font-size: 15px;
	}
}

/* --------------------------------------------------------------------------
   リクルート インタビュー本体  .ng-sec-interview （2026-09-22）

   Canva P6・P7。左に番号＋枠つきの写真＋役職＋氏名、右に本文。
   2件目と4件目は左右を入れ替える。

   Canvaの実測（3840pxで書き出し、括弧内は1920換算）

     写真の枠  564×636（282×318／比 0.888）  線 6px（3px）ミント
     番号      高さ208px（104）  ミント  写真の左
     役職・氏名 写真の下、中央

   **番号の大きさはCanvaの比率で移していない。**
   Canvaの写真はスライド幅の14%だが、こちらは列いっぱいで38%ある。
   写真に対する比（1/3）で移すと240px相当になって暴れる。
   **ページに対する比で置いた**（Canvaは1920に対して144px＝7.5%、
   こちらは1200に対して72px＝6%）。01・02の章番号（64px）とも揃う。

   **緑は `--ng-green-deep`。** Canvaのミントは白地 2.27 で、
   大きい文字の基準3.0にも届かない。写真の枠だけは飾りなのでミント。
   -------------------------------------------------------------------------- */

/* 番号の自動採番。人が増えても振り直される */
#tm-main {
	counter-reset: ng-interview;
}

.ng-sec-interview {
	counter-increment: ng-interview;
}

/* 写真の列を「番号｜写真」の2列にして、下に役職と氏名を敷く */
.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"no   photo"
		"gap  role"
		"gap  name";
	align-items: start;
	column-gap: 18px;
}

.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match)::before {
	grid-area: no;
	content: counter(ng-interview, decimal-leading-zero);
	font-family: var(--ng-en);
	font-size: 72px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--ng-green-deep);
}

.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) > *:nth-child(1) { grid-area: photo; }
.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) > *:nth-child(2) { grid-area: role; }
.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) > *:nth-child(3) { grid-area: name; }

/* 写真。Canvaと同じ比と枠 */
.ng-sec-interview .el-image {
	display: block;
	width: 100%;
	aspect-ratio: 282 / 318;
	object-fit: cover;
	border: 2px solid var(--ng-green-band);
}

/* 役職 */
.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) > *:nth-child(2) {
	margin-top: 16px !important;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .1em;
	color: var(--ng-ink-70);
}

/* 氏名 */
.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) > *:nth-child(3) {
	margin-top: 2px !important;
	font-family: var(--ng-mix);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--ng-ink);
}

/* 本文。ビルダー側に `ng-body` が付いていないので、ここで同じ体裁にする */
.ng-sec-interview .uk-grid > div:nth-child(2) .uk-panel {
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2.4;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

.ng-sec-interview .uk-grid > div:nth-child(2) p {
	margin: 0;
}

.ng-sec-interview .ng-voice__q + p {
	margin-top: .4em;
}

.ng-sec-interview p + .ng-voice__q {
	margin-top: 2.2em;
}

/* 2件目・4件目は左右を入れ替える。

   `:nth-child(even of .ng-sec-interview)` は**インタビューだけを数える**ので、
   上に別のセクションが増えても崩れない。単なる `:nth-child(even)` だと
   `#tm-main` の中の位置で決まってしまい、1つ挟まるだけで逆になる。 */
#tm-main > :nth-child(even of .ng-sec-interview) .uk-grid {
	flex-direction: row-reverse;
}

/* 入れ替えた側は、番号と写真の並びも鏡にする */
#tm-main > :nth-child(even of .ng-sec-interview) .uk-grid > div:first-child:not(.uk-grid-item-match) {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"photo no"
		"role  gap"
		"name  gap";
}

/* 結束さんの枠（`uk-grid-item-match uk-flex-middle`）はPC表示でも同じ問題。

   上の「浅い3人用」の指定に `:not(.uk-grid-item-match)` を足した
   （スマホの節にある経緯コメント参照）ため、結束さんの枠はPCでも
   グリッド化・番号の `::before` から外れてしまい、**02の番号だけが
   PCで消えていた**（2026-09-29、平山さんの指摘で発覚。写真・役職・
   氏名はDOM順そのままの見た目でたまたま違和感が無く、番号だけが
   欠けているのに気づきにくかった）。

   スマホ用に作った「1段深い本当の3つ子の親」を狙う指定を、PC版の
   グリッド・番号・入れ替えにもそれぞれ複製する。 */
.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"no   photo"
		"gap  role"
		"gap  name";
	align-items: start;
	column-gap: 18px;
}

.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child::before {
	grid-area: no;
	content: counter(ng-interview, decimal-leading-zero);
	font-family: var(--ng-en);
	font-size: 72px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--ng-green-deep);
}

.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(1) { grid-area: photo; }
.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(2) { grid-area: role; }
.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(3) { grid-area: name; }

.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(2) {
	margin-top: 16px !important;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .1em;
	color: var(--ng-ink-70);
}

.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(3) {
	margin-top: 2px !important;
	font-family: var(--ng-mix);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--ng-ink);
}

/* 結束さんは2件目（偶数）なので、PCの左右入れ替えもこちらに複製 */
#tm-main > :nth-child(even of .ng-sec-interview) .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"photo no"
		"role  gap"
		"name  gap";
}

@media (max-width: 959px) {
	/* 縦に積むので入れ替えは要らない。番号は小さく */
	#tm-main > :nth-child(even of .ng-sec-interview) .uk-grid {
		flex-direction: row;
	}

	/* 2026-09-29、クライアント要望でスマホ・タブレットの写真を横長に、少し小さく。
	   PC（960px以上）は元の縦長比（282/318）のまま変えない。
	   写真は`align-items: start`（5402行）で自分の縦横比ぶんの高さしか
	   取らないので、右列の割り当て高さ（144px、下の固定行の合計）より
	   低くなっても崩れない。単に右列の下側に余白ができるだけ。 */
	.ng-sec-interview .el-image {
		aspect-ratio: 4 / 3;
	}

	/* 2026-09-29、指示でスマホの並びを変更。

	   **前は「番号｜写真」を上段に置き、役職・氏名は写真の下（写真と
	   同じ列）に敷いていた。写真が列いっぱい（1fr）になり、幅の
	   ほとんどを占めていた。**

	   **写真を右列に固定幅で小さくし、役職・氏名は番号と同じ左列に
	   移した。** 写真は4行ぶんにまたがせて縦に長くする。

	   **左列は「番号／空きの行／役職／氏名」の4段。すべて `auto` ではなく
	   実測した固定値にしている。**

	   はじめ空きの行だけ `1fr`、残り3行を `auto` にしていたが、
	   **写真（4行にまたがる1つのセルの中身）が144pxを要求すると、
	   ブラウザは `1fr` の行だけでなく `auto` の行にもその分を配ってしまう
	   仕様がある。** 役職の行が本来の文字の高さ（20.4px）より
	   だいぶ高い40px超になり、狙いと違う場所に余白ができていた。

	   **全部の行を固定値にして、合計をちょうど写真の高さ（144px）に
	   そろえた。**
	     48px（番号 = 48px の1行ぶん）
	     + 48.4px（空きの行。余りをここだけに集める）
	     + 20.4px（役職 = 12px × 行の高さ1.7）
	     + 27.2px（氏名 = 17px × 行の高さ1.6）
	     = 144px
	   これで数字は写真の上辺、氏名は写真の下辺にちょうど揃い、
	   役職と氏名の間はそれぞれの文字の高さぶんしか空かない。

	   **`#tm-main` を付けて強さを上げている。** 4件目（宮本さん）は
	   2件目（結束さん）と違って入れ子が浅く、この行がそのまま
	   写真・役職・氏名の親に当たる。ところがそこには「左右入れ替え」の
	   既存指定（`#tm-main > :nth-child(even of .ng-sec-interview) ...`）
	   も同じ要素に当たっており、あちらは `#tm-main` という**ID**を
	   含むぶん強く、列の指定（128px）が `auto` に上書きされて写真が
	   57px まで潰れていた（2026-09-29に発覚）。

	   ID同士でそろえてもまだ負けた。あちらは
	   `:nth-child(even of .ng-sec-interview)` の中の `.ng-sec-interview`
	   ぶんも強さに数えられるため、ID込みでもわずかに足りない。
	   クラスを1つ重ねてさらに合わせる。 */
	#tm-main .ng-sec-interview.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) {
		grid-template-columns: 1fr 148px;
		grid-template-rows: 48px 48.4px 20.4px 27.2px;
		grid-template-areas:
			"no    photo"
			"gap   photo"
			"role  photo"
			"name  photo";
		column-gap: 16px;
		row-gap: 0;
	}

	.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match)::before {
		font-size: 48px;
	}

	/* 役職・氏名は左揃え。

	   **ビルダーが `uk-text-center` を付けていた。** UIkitの文字揃え
	   ユーティリティは `!important` 付きなので、`!important` を
	   付けずに書くと必ず負ける（このサイトで繰り返し出ている落とし穴）。 */
	.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) > *:nth-child(2),
	.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) > *:nth-child(3) {
		text-align: left !important;
	}

	.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) > *:nth-child(2) {
		margin: 0 !important;
	}

	.ng-sec-interview .uk-grid > div:first-child:not(.uk-grid-item-match) > *:nth-child(3) {
		margin: 0 !important;
	}

	/* 結束さんの枠（`kessoku`）だけ、ビルダーがもう1段余分に
	   入れ物を作っている（`uk-grid-item-match uk-flex-middle`）。

	   **「2件目・4件目（偶数）」で判定しようとしたが誤りだった。**
	   4件目の宮本さんは偶数でも余分な入れ物が無く、他の3人と同じ
	   直下3つ子の作り。位置（奇数・偶数）と入れ子の深さは無関係で、
	   結束さんの枠だけがたまたま深い。**位置ではなく、この特有の
	   クラスがあるかどうかで判定し直す。**

	   同じセレクタを書いても、この1段のせいで `nth-child` の数え先が
	   ずれる。直下の子が1つ（3つをまとめて包んだ箱）しか無くなり、
	   上の `nth-child(1)`（写真の割り当て）がこの箱まるごとに当たって
	   しまい、役職・氏名の行が消え、写真エリアの中に3つとも詰め込まれて
	   意図しない位置に出ていた。

	   **その1段はそのまま残し、当てる先だけ1段深くする。**
	   はじめ `display: contents` でこの段を無かったことにしようとしたが、
	   この段は `.uk-grid`（`flex-direction: row-reverse` の行）の
	   直接の子として幅・並びを担っていた。透明にすると行の計算が崩れ、
	   写真や見出しが他の内容と重なって表示された（2026-09-29に発覚）。
	   段は残し、グリッドは1段下の「本当の3つ子の親」にだけ当てる。

	   **↑これだけでは直らなかった（2026-09-29、続き）。** 結束さんの枠
	   （`uk-grid-item-match uk-flex-middle`）自体も `.uk-grid > div:first-child`
	   に該当してしまうため、上のほうにある「浅い3人用」の指定
	   （`display:grid` や `::before` の番号、`grid-template-columns` など）
	   もこの枠に二重に当たっていた。枠は1つ子（この下のpanel）しか
	   持たないのに3つ子前提のグリッドを敷かれ、`::before` の番号も
	   枠側とpanel側の両方に出て、写真・見出し・番号が重なって見えていた。
	   浅い3人向けの指定（本セクション冒頭〜上の役職・氏名の指定まで）に
	   `:not(.uk-grid-item-match)` を足し、結束さんの枠を除外した。

	   **これでもまだ直らなかった（2026-09-29、さらに続き）。** 結束さんの
	   枠では、写真の列（左）だけでなく**本文の列（右、`uk-width-3-5`）も
	   同じ `uk-grid-item-match uk-flex-middle` を持っていた。** この
	   セレクタに `:first-child` が付いていなかったため、本文側の枠にも
	   「写真用の4段固定グリッド（合計144px）」が当たってしまい、本文の
	   実際の高さ（十行以上）が144pxの箱に押し込められ、次のセクションと
	   本文が重なって見えていた。**`.uk-grid` の中で本当に1番目（写真側）
	   だけに絞るため、`:first-child` を足した。** 本文側は2番目の子なので
	   これで対象から外れる。

	   **PC版の「02」番号を直したときに、また壊した（2026-09-29、
	   タブレット・スマホで発覚）。** PC用に追加した「入れ替え」の
	   指定（`#tm-main > :nth-child(even of .ng-sec-interview) .uk-grid >
	   div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child`）
	   はメディアクエリの外（常時有効）で、`#tm-main` というIDと
	   `:nth-child(even of .ng-sec-interview)` の強さ（`.ng-sec-interview`
	   ぶんも数えられる）を持つため、下のこの指定（IDなし）より強く、
	   スマホでも勝ってしまっていた。結果、結束さんの枠だけスマホでも
	   写真が列いっぱいに広がり、役職・氏名が写真の上に重なって表示された。

	   宮本さん側（浅い3人向け）の指定は元々 `#tm-main` とクラスの重複で
	   強さを合わせてあったが、結束さん用（この深い方）の指定にはまだ
	   その補強をしていなかった。**同じ補強をここにも足し、後の方に
	   書かれているぶん（メディアクエリ内）で勝てるようにする。** */
	#tm-main .ng-sec-interview.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child {
		display: grid;
		grid-template-columns: 1fr 148px;
		grid-template-rows: 48px 48.4px 20.4px 27.2px;
		grid-template-areas:
			"no    photo"
			"gap   photo"
			"role  photo"
			"name  photo";
		align-items: start;
		column-gap: 16px;
		row-gap: 0;
	}

	#tm-main .ng-sec-interview.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child::before {
		grid-area: no;
		content: counter(ng-interview, decimal-leading-zero);
		font-family: var(--ng-en);
		font-size: 48px;
		font-weight: 300;
		line-height: 1;
		letter-spacing: .02em;
		color: var(--ng-green-deep);
	}

	#tm-main .ng-sec-interview.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(1) { grid-area: photo; }
	#tm-main .ng-sec-interview.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(2) { grid-area: role; }
	#tm-main .ng-sec-interview.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(3) { grid-area: name; }

	#tm-main .ng-sec-interview.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(2),
	#tm-main .ng-sec-interview.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(3) {
		text-align: left !important;
		margin: 0 !important;
		font-family: var(--ng-ja);
		font-size: 12px;
		font-weight: 500;
		line-height: 1.7;
		letter-spacing: .1em;
		color: var(--ng-ink-70);
	}

	#tm-main .ng-sec-interview.ng-sec-interview .uk-grid > div.uk-grid-item-match.uk-flex-middle:first-child > div:first-child > *:nth-child(3) {
		font-family: var(--ng-mix);
		font-size: 17px;
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: .06em;
		color: var(--ng-ink);
	}
}

/* --------------------------------------------------------------------------
   募集要項（Jobs）の見出し周りの余白  #requirement （2026-09-22）

   このセクションだけ「セクションサイズ：大」のまま（旧ページの設定を
   引き継いでいる）。上下のpaddingが140px、見出し直下の行間が100px。
   新しく組んだセクション（01・02・Staff Interviewなど）は70pxなので、
   Messageの下に来ると見出しの周りだけ間延びして見えていた。

   **ビルダーの「セクションサイズ」設定は変えていない。** 募集要項は
   下に続く行（新卒採用・中途採用のパネル群）の余白もこの設定に
   乗っているので、セクション全体を「デフォルト」に変えると
   パネル同士の間隔まで一緒に詰まってしまう。**見出しの上下だけを
   `#requirement` で個別に指定する。**

   下側（見出し直下の最初の行との間）は「1行目＋2行目」の隣接だけを
   `:first-child + .uk-grid-margin` で狙う。3行目以降（新卒／中途の
   パネル間隔）はそのまま100pxを保つ。

   **2026-09-24、上端だけ70pxに変更。** 各セクションの「上からタイトル
   まで」をProcessの70px（PC）／40px（〜959px）にそろえる指示。
   ここは元々「セクション全体の大きさ」から独立させて上端だけを
   個別指定していたので、下の行間・パネル間隔には影響しない。 */
#requirement {
	padding-top: 70px !important;
}

@media (max-width: 959px) {
	#requirement {
		padding-top: 40px !important;
	}
}

#requirement > .uk-container > .uk-grid-margin:first-child + .uk-grid-margin {
	margin-top: 70px !important;
}

/* --------------------------------------------------------------------------
   募集職種のリード文  .ng-sec-lead （2026-09-22）

   Canva P10（新卒採用）・P12（中途採用、予定）で使う共通の型。
   小さなピル型ラベル → 大きな見出し（2行） → 4行の本文 → 締めの一文。
   すべて中央揃え、写真なし。**同じクラスをP12（中途採用リード）にも使う。**

   ビルダー側：セクションに `ng-sec-lead`、中にテキストウィジェット1つ
   （コード表示）で以下を貼る。

     <p class="ng-lead__eyebrow">新卒採用</p>
     <p class="ng-lead__title">見出し1行目<br>見出し2行目</p>
     <p class="ng-lead__body">1行目<br>2行目<br>3行目<br>4行目</p>
     <p class="ng-lead__closing">締めの一文</p>

   Canvaの色はほぼ1色（#655d5c、墨70%に近い）。**見出しだけ `--ng-ink`
   に上げて、この一文が主役だと分かるようにした。** ピルの地は
   `--ng-sand`（引用・プレースホルダ用のベージュ）で、墨70%との
   コントラストは 5.89。

   **行間の余白はCanvaの実測をそのまま移していない。** Canvaは
   1920pxの全幅キャンバスでの間隔（見出しの上97px・下129px・
   締めの上140px）。サイトは中央に幅を絞った段組みなので、
   同じpxで置くと間延びする。**縮尺ではなく、見た目の呼吸感で
   合わせている。**
   -------------------------------------------------------------------------- */
.ng-sec-lead {
	text-align: center;
}

.ng-sec-lead .uk-container > .uk-grid-margin {
	/* 2026-09-30、見出しを約1.63倍に拡大したのに合わせて幅も同じ比率に
	   （720×1.63≒1174px）。そのままだと見出し1行目「美容業界の当たり前
	   『型』にはめません」が720px幅に収まらず、`<br>` の意図した2行では
	   なく3行目に割れて折り返していた。 */
	max-width: 1174px;
	margin-left: auto;
	margin-right: auto;
}

/* 2026-09-30、クライアントから最新のCanvaスクリーンショットと現サイトの
   比較が届き、「文字サイズをCanvaくらいに」と指示。両画像（同じ文言）を
   自身の画像幅で正規化してテキスト幅を実測し、比率を出した。

     ピル　　1554pxの文字幅132 / 2000pxの文字幅78 → 現状比 約2.18倍
     見出し　同947・946 / 745・745 → 現状比 約1.63倍（2行とも一致）
     本文　　同405 / 259 → 現状比 約2.01倍
     締め　　同1002 / 648 → 現状比 約1.99倍

   line-heightは元から単位なし（1.6／1.7／2.1／1.9）なので、font-sizeを
   上げれば自動で追随する。`.ng-lead__title` の `clamp()` は3値とも同じ
   比率（約1.63）でスケールし、レスポンシブの曲線自体は変えていない。
   ピルの padding も同じ比率で拡大し、箱と文字の比率を保った。

   スマホ（〜639px、下の別ブロック）は今回のCanva比較が無いため未変更。 */
.ng-lead__eyebrow {
	display: inline-block;
	margin: 0;
	padding: 15px 48px;
	background-color: var(--ng-sand);
	border-radius: 999px;
	font-family: var(--ng-ja);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .12em;
	color: var(--ng-ink-70);
}

.ng-lead__title {
	margin: 24px 0 0;
	font-family: var(--ng-mix);
	font-size: clamp(36px, 5.2vw, 52px);
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ng-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}

.ng-lead__body {
	margin: 48px 0 0;
	font-family: var(--ng-ja);
	font-size: 28px;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
	word-break: keep-all;
	overflow-wrap: break-word;
}

.ng-lead__closing {
	margin: 56px 0 0;
	font-family: var(--ng-ja);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}

@media (max-width: 639px) {
	/* 2026-09-22、バランスの改善。

	   375px幅で、コンテンツの実効幅は345px。見出し22pxのままだと、
	   Canvaどおりの1行目「美容業界の当たり前『型』にはめません」（18字）が
	   345×1.04÷22文字幅 ≒ 411px必要で収まらない。`<br>` で2行のつもりが、
	   `keep-all` が『型』の後ろで先に折り返し、2行目「にはめません」だけが
	   短く浮いた3行になっていた（本文の2行目も同じ理由で4行→5行に）。

	   **文字を小さくして、`<br>` どおりの行数に戻す。**
	   見出し17px・本文13pxなら、いちばん長い行（本文2行目24字）でも
	   345px幅に収まる。 */
	/* 2026-09-30追記。見出し・本文・締めには元からこのモバイル専用の
	   上書きがあったが、ピル（`.ng-lead__eyebrow`）だけは無く、デスクトップの
	   基準値をそのまま受けていた。Canva比較で基準値を12px→26pxに上げた際、
	   モバイルのピルも26pxになり、345px幅の中で見出しより大きい巨大な
	   楕円になっていた。ピルだけは元の12px・7px 22pxに戻す。 */
	.ng-lead__eyebrow {
		padding: 7px 22px;
		font-size: 12px;
	}

	.ng-lead__title {
		margin-top: 20px;
		font-size: 17px;
	}

	.ng-lead__body {
		margin-top: 36px;
		font-size: 13px;
	}

	.ng-lead__closing {
		margin-top: 40px;
		font-size: 14px;
	}
}

/* 2026-09-30、見出しをCanva比で拡大した副作用の修正。
   タブレット幅（640〜959px）では `clamp(36px, 5.2vw, 52px)` が768px幅で
   約40pxまで育ってしまい、コンテナ幅（1174pxだが実際はタブレット幅に
   収まるぶんしか使えない）に対して見出し1行目が収まらず、`<br>` の
   意図した2行ではなく3行に割れていた（デスクトップは1174px確保できる
   ので問題なし。スマホは〜639pxの別指定で元から対象外）。
   タブレットだけ、2行に収まっていた旧サイズ（32px）に戻す。 */
@media (min-width: 640px) and (max-width: 959px) {
	.ng-lead__title {
		font-size: 32px;
	}
}

/* --------------------------------------------------------------------------
   社内イベント・撮影会＆外部セミナー  .ng-sec-event / .ng-sec-seminar
   （2026-09-22）

   Canva P14・P15。3列×2行の写真グリッド。写真は6:5（1200×1000）で統一。
   グリッド自体はビルダーの標準（`uk-child-width-1-3@m`）のままでよく、
   こちらは写真の比率だけそろえる。
   -------------------------------------------------------------------------- */
.ng-sec-event .el-item img,
.ng-sec-seminar .el-item img {
	display: block;
	width: 100%;
	aspect-ratio: 6 / 5;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   採用までの流れ  .ng-sec-flow-steps （2026-09-22）

   Canva P16。緑カード4枚、各カードに番号バッジ・タイトル・本文。

   **文字は白にしていない。** カード地 `--ng-green-band`（#66bd93）は
   白地2.27で、濃い文字しか置けない（`00-tokens.css` に既存の注記どおり）。
   タイトルは墨100%（8.30）、本文は墨70%（4.59）。

   番号バッジは**白枠・中は円96px（前の150%）**（2026-09-22、指示で
   さらに変更）。「STEP」と数字の2行はそのまま。

   **円の中をカードと同じ `--ng-green-band` にしてほしい、という指示
   だったが、そのままでは白文字が置けない**（白地2.27。00-tokens.css
   に既にある注記のとおり）。**文字色を墨（`--ng-ink`、8.30）に
   変えている。** カードのタイトルと同じ色なので、円がカードに
   なじみつつ、文字だけはっきり見える形にした。

   **「STEP」と数字を、CSSの擬似要素だけで2段に分けている。**
   `content` は1つの擬似要素につき1種類の大きさしか持てないので、
   `::before` を円（STEPの文字を含む）、`::after` を数字だけの
   透明なレイヤーにして、同じ位置に重ねている。
   `::after` には枠も地色も付けていないので、`::before` の円がそのまま
   透けて見える。

   アイコン（電話・チャットのイラスト）は素材が無いので今回は入れていない。
   必要になったら足す。

   ビルダー側：グリッドウィジェット1つ、4項目。画像・メタは無し、
   タイトルとコンテンツだけ。入れ物に `ng-sec-flow-steps`。
   -------------------------------------------------------------------------- */
.ng-sec-flow-steps {
	counter-reset: ng-flow-step;

	/* カードの緑。2026-09-22、指示で明度を少し下げた（-8%）。

	   **トークンの `--ng-green-band`（#66bd93）自体は変えていない。**
	   あれは Voices の帯、インタビューの写真枠、トップでも使っている。
	   ここだけ下げたいので、このセクション限りの変数にしてある。

	   明度を下げると白文字は少し見やすくなるが（2.27 → 2.71）、
	   基準4.5にはまるで届かない。白文字で4.5を満たすには
	   #398460（-19.9%）まで暗くする必要があり、Canvaの色から離れる。 */
	--ng-flow-card: #4baf7f;
}

.ng-sec-flow-steps .el-item {
	position: relative;
	padding: 152px 28px 32px;
	background-color: var(--ng-flow-card);
	border-radius: 16px;
	text-align: center;
	counter-increment: ng-flow-step;
}

/* バッジの円。「STEP」の文字もここに含める（上半分） */
.ng-sec-flow-steps .el-item::before {
	content: "STEP";
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	width: 96px;
	height: 96px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 20px;
	background-color: var(--ng-flow-card);
	border: 2px solid var(--ng-paper);
	border-radius: 50%;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	/* 白文字（白地2.27）。白枠だけ見せたいので、文字が薄く沈むのは
	   承知のうえ、平山さんの指示で確定にした（2026-09-22）。
	   基準4.5には届かないが、ここは意匠として据え置く。 */
	color: var(--ng-paper);
}

/* 数字だけの透明レイヤー。円の下半分に重ねる */
.ng-sec-flow-steps .el-item::after {
	content: counter(ng-flow-step, decimal-leading-zero);
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	width: 96px;
	height: 96px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 17px;
	font-family: var(--ng-en);
	font-size: 28px;
	font-weight: 600;
	/* 白文字で確定（上のSTEPと同じ理由、2026-09-22） */
	color: var(--ng-paper);
	pointer-events: none;
}

/* タイトル。2026-09-22、字間を詰めて少し大きく（17px/.1em → 18px/.04em）。

   **18pxなのは、いちばん長い「サロン見学 お問い合わせ」が1行に
   収まる上限だから。** PCの列幅270px から左右のpadding 28px を引いて
   214px。19pxだと 19×11字×1.04 ≒ 217px で溢れ、1枚目だけ2行になる。
   18pxなら約206pxで収まる。 */
.ng-sec-flow-steps .el-title {
	margin: 0 0 0 !important;
	font-family: var(--ng-mix);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

/* 本文。2026-09-22、大きく・少し太く・justify揃えに変更
   → 2026-09-29、やはり左寄せに戻す指示（justifyはやめ）。 */
.ng-sec-flow-steps .el-content {
	margin-top: 12px;
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .04em;
	/* 白文字。2026-09-22、見比べたうえで平山さんが「一旦これでOK」と判断。

	   **カード地 #4baf7f に対して2.71で、基準4.5を割っている。**
	   バッジ（装飾）と違い、ここは読ませる文章なので、**公開前に
	   もう一度見直す候補**として残す。戻すなら `var(--ng-ink-70)`
	   （カード地が#4baf7f のとき4.18。#66bd93 なら4.59）。 */
	color: var(--ng-paper);
	text-align: left;
}

/* カード間の「く」の字（2026-09-22）

   01→02→03→04 と進んでいることを示す。01〜03の右に置く。

   **`.el-item` ではなく「列」に付ける。** `.el-item` は列の唯一の子なので、
   `.el-item:not(:last-child)` は**どれにも当たらない**（最初に書いた矢印が
   一度も出ていなかったのはこれが理由）。加えて `.el-item` の
   `::before` / `::after` はバッジの円と数字で既に使っている。
   列の擬似要素なら空いている。

   **PCは右向き、タブレット以下（1列になる960px未満）は下向き。**
   グリッドが `uk-child-width-1-4@m` なので、960pxが列数の変わり目。

   置き場所は「カードとカードの隙間の真ん中」。PCの隙間は40px
   （UIkitの標準、次の列の `padding-left`）。20pxの四角を回した形なので
   見た目の幅は約28px、隙間に収まる。
   タブレット以下は行間を56pxに広げて、その真ん中に置く。 */
.ng-sec-flow-steps .uk-grid > * {
	position: relative;
}

.ng-sec-flow-steps .uk-grid > *:not(:last-child)::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border-top: 3px solid var(--ng-green-dk);
	border-right: 3px solid var(--ng-green-dk);
}

/* PC：右向き。

   2026-09-29、指示でPCも14px・線2pxに縮めた（タブレット・スマホと
   同じ大きさ）。位置は「隙間の半分＋矢印の半分7px」で中心に合わせる。

   **UIkitの列の隙間は960px以上でずっと40pxではない。** 実測すると
   960〜1199pxは20px、1200px以上で40pxに変わる（UIkitの `@l` ブレーク
   ポイント）。40px前提の位置のままだと、960〜1199pxで隙間からはみ出し
   隣のカードに重なっていた（指摘で発覚）。狭いほうを既定にして、
   1200px以上だけ広いほうに差し替える。 */
@media (min-width: 960px) {
	.ng-sec-flow-steps .uk-grid > *:not(:last-child)::after {
		top: 50%;
		/* 隙間20pxの中心＝10+7＝17px */
		right: -17px;
		transform: translateY(-50%) rotate(45deg);
		width: 14px;
		height: 14px;
		border-width: 2px;
	}
}

@media (min-width: 1200px) {
	.ng-sec-flow-steps .uk-grid > *:not(:last-child)::after {
		/* 隙間40pxの中心＝20+7＝27px */
		right: -27px;
	}
}

/* タブレット以下：下向き。行間56pxの中心（カード下端から28px）に置く

   **行間は `.uk-grid-margin` を含めて指定すること。** 折り返した列には
   UIkit が `uk-grid-margin` を付け、`.uk-grid > .uk-grid-margin` で
   20pxを指定してくる。`.ng-sec-flow-steps .uk-grid > *` では**同じ強さ**で、
   `theme.1.css` が後から読まれるぶん負ける（2026-09-22に踏んだ。
   1枚目だけ効いて2〜4枚目が20pxのままになり、矢印が隠れた）。
   1枚目はそもそも上の余白が要らないので、この指定で過不足ない。 */
@media (max-width: 959px) {
	/* 2026-09-29、指示でタブレットもスマホと同じ小さい矢印・間隔に
	   そろえた（矢印20px→14px・線3px→2px、間隔56px→40px）。
	   数値そのものは下の `.ng-sec-flow-steps .uk-grid > *:not(:last-child)::after`
	   （幅・線）にまとめてある。ここでは位置だけ決める。 */
	.ng-sec-flow-steps .uk-grid > .uk-grid-margin {
		margin-top: 40px;
	}

	.ng-sec-flow-steps .uk-grid > *:not(:last-child)::after {
		left: 50%;
		bottom: -27px;
		transform: translateX(-50%) rotate(135deg);
		width: 14px;
		height: 14px;
		border-width: 2px;
	}
}

/* --------------------------------------------------------------------------
   Process の一文  .ng-flow-lead （2026-09-22）

   「まずはお気軽にサロン見学にお越しください」。カードの上に置く呼びかけ。

   **色は `--ng-green-dk`（#3d8b4a、白地4.21）。** カードと同じ
   #4baf7f は白地2.71で、大きい文字の基準3.0にも届かなかった。
   同系で少しだけ濃いこの色なら、カードと並べても違和感が無い。

   **24px を下回らせないこと。** 4.21 は「大きい文字」の基準3.0は
   満たすが、普通の文字の基準4.5には届かない。**24px以上でないと
   基準を割る。** このサイトは Noto Sans JP の700を読み込んでいないので
   （600が上限）、「太字なら18.66pxから」の条件は使えない。
   小さくしたくなったときは、色のほうを `--ng-green-deep`（5.42）に
   変えること。

   `uk-margin` が !important なので、余白はこちらも !important で打ち消す。
   -------------------------------------------------------------------------- */
.ng-flow-lead {
	margin-top: 28px !important;
	font-family: var(--ng-ja);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ng-green-dk);
}

/* --------------------------------------------------------------------------
   採用までの流れ — カードのアイコン （2026-09-22）

   タイトルと本文の間に入れる。**ビルダーの入力欄には書かない。**
   コンテンツ欄にHTMLを書くと、あとで文章を打ち直したときにタグごと
   消える（スタッフの声の `##` が実際にそれで消えた）。
   アイコンは内容ではなく装飾なので、CSS側に置く。

   **`mask` で置いているので、色はCSSの変数に追従する。**
   今日だけでカードの緑を2回変えている。画像として置くと色が焼き付き、
   そのたびに作り直しになる。

   **SVGは「透明地・単色」に正規化してある**（`tools/` ではなく
   `inbox/2026-09-22/` で変換した。1024角・図形は最大800）。
   受け取った素材は作りがまちまちだった。
     - 電話・Instagram・LINE … 透明地に黒。そのまま使える
     - セット面 … 枠が**白で塗られていた**。そのままだとマスクが
       四角く抜けて白い四角になる。塗りを `none` にしてある
     - 面接・封筒 … こちらで作った

   **STEP 01 の3点は1つの擬似要素に重ねている。** `mask-image` は
   カンマ区切りで複数指定できるので、要素を増やさずに3点並べられる。

   **3点も48pxにした。** 40pxだとLINEの文字がつぶれて「白い丸」に
   しか見えなかった。48px×3＋間隔16px×2＝176pxで、カードの本文幅
   214pxに収まる。

   **何番目かは「列」で数えること。** `.el-item` は列の唯一の子なので、
   `.el-item:nth-child(2)` と書くと**4枚すべてに当たる**（2026-09-22に
   踏んだ）。`.uk-grid > *:nth-child(2)` と、列のほうを数える。
   -------------------------------------------------------------------------- */
.ng-sec-flow-steps .el-content::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 20px;
	background-color: var(--ng-paper);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* STEP 01 お問い合わせ … 電話・LINE・Instagram の3点 */
.ng-sec-flow-steps .uk-grid > *:nth-child(1) .el-content::before {
	width: 176px;
	-webkit-mask-image: url(../img/ng-flow-tel.svg), url(../img/ng-flow-line.svg), url(../img/ng-flow-insta.svg);
	mask-image: url(../img/ng-flow-tel.svg), url(../img/ng-flow-line.svg), url(../img/ng-flow-insta.svg);
	-webkit-mask-position: left center, center center, right center;
	mask-position: left center, center center, right center;
	-webkit-mask-size: 48px 48px;
	mask-size: 48px 48px;
}

/* STEP 02 サロン見学 */
.ng-sec-flow-steps .uk-grid > *:nth-child(2) .el-content::before {
	-webkit-mask-image: url(../img/ng-flow-kengaku.svg);
	mask-image: url(../img/ng-flow-kengaku.svg);
}

/* STEP 03 面接 */
.ng-sec-flow-steps .uk-grid > *:nth-child(3) .el-content::before {
	-webkit-mask-image: url(../img/ng-flow-interview.svg);
	mask-image: url(../img/ng-flow-interview.svg);
}

/* STEP 04 合否のご連絡

   **01と同じ電話。** Canva もそうだった。こちらから封筒を提案したが
   （01にも電話が入るため）、平山さんの指示で電話に戻した（2026-09-22）。

   封筒は `assets/img/ng-flow-mail.svg` に残してある。使っていないが、
   戻したくなったときのために置いておく。**2026年内に使う話が出なければ
   消してよい。** */
.ng-sec-flow-steps .uk-grid > *:nth-child(4) .el-content::before {
	-webkit-mask-image: url(../img/ng-flow-tel.svg);
	mask-image: url(../img/ng-flow-tel.svg);
}

/* --------------------------------------------------------------------------
   勤務地のカード  .ng-salon-info--work （2026-09-23）

   リクルートの Shop List（＝勤務地）。Canva P17 は
   **写真・店名（右にInstagram）・TEL・住所・Access** の並び。
   出す項目は `inc/shortcodes.php` の `ng_salon_content_parts()` で決めている。

   **店名もPHP側で出している**（`head` の項目）。ビルダーのタイトル欄は空。

   はじめは店名をタイトル欄に任せていたが、**店名とInstagramが別の親になり**、
   同じ行に並べるために `display: contents` とグリッドが必要だった。
   そこで4つの落とし穴を踏んだので（クラスの強さ、行だけ指定すると2列目が
   できる、マスクが擬似要素を切り抜く、横に広がる要素が列幅を奪う）、
   **店名ごとPHPで出す形に変えて、93行のCSSごと捨てた。**
   いまは普通の横並び1行で済んでいる。
   -------------------------------------------------------------------------- */
.ng-salon-info__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* もとのタイトル欄（.el-title）と同じ字面に合わせてある */
.ng-salon-info__name {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--ng-ink);
}

.ng-salon-info--work .ng-salon-ig-icons {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ng-salon-info--work .ng-salon-info__tel {
	margin-top: 16px;
}

.ng-salon-info--work .ng-salon-info__address {
	margin-top: 4px;
}

/* --- アイコン本体と吹き出し ---------------------------------------------

   **マスクはリンク自体に掛けない。`::before` に逃がす。**
   `mask` は**その要素の擬似要素まで一緒に切り抜く**ので、リンクに掛けると
   吹き出し（`::after`）もInstagramの形に刈り取られて見えなくなる
   （2026-09-23に踏んだ）。 */
.ng-salon-ig-icon {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}

.ng-salon-ig-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--ng-ink-70);
	-webkit-mask: url(../img/ng-flow-insta.svg) no-repeat center / contain;
	        mask: url(../img/ng-flow-insta.svg) no-repeat center / contain;
	transition: background-color .15s;
}

.ng-salon-ig-icon:hover::before,
.ng-salon-ig-icon:focus-visible::before {
	background-color: var(--ng-ink);
}

/* 吹き出し。`data-label` は PHP が Hair / Eye を入れている。墨地に白で 18.8 */
.ng-salon-ig-icon::after {
	content: attr(data-label);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 8px;
	border-radius: 4px;
	background-color: var(--ng-ink);
	font-family: var(--ng-en);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--ng-paper);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
}

.ng-salon-ig-icon:hover::after,
.ng-salon-ig-icon:focus-visible::after {
	opacity: 1;
}

/* 勤務地のアクセスボタン（2026-09-23）

   トップの Shop List はボタンが2つあり、`flex: 1 1 0` で等幅に分けている
   （`40-top.css`）。勤務地は「アクセス」1つだけなので、そのままでは
   カード幅いっぱいに伸びる。**半分にして左に寄せる**（指示）。

   **`.ng-sec-salon` から4つ並べること。** 打ち消す相手が
   `.ng-sec-salon .ng-salon-info__actions .ng-btn` でクラス3つある。
   入れ物は `display: flex` のままなので、寄せ先の指定は要らない
   （既定で左から並ぶ）。 */
.ng-sec-salon .ng-salon-info--work .ng-salon-info__actions .ng-btn {
	flex: 0 0 50%;
}

/* --------------------------------------------------------------------------
   Entry の連絡先パネル（電話・LINE・Instagram） 2026-09-24

   下の求人カード（`.ng-entry-jobs`）とは別扱い。連絡先は `.el-item > .uk-card`、
   求人は `.ng-entry-jobs__item > .uk-card` なので、親の違いで分けている。

   - 地は `--ng-sand`（少し濃いクリーム、指示）。枠線は消し、面で見せる
   - 番号とIDは同じ大きさ（電話番号に合わせて欧文21px、指示）。
     いちばん長い `@nextgeneration_recruit` が21pxで242px。
     本文欄はPC 380px、スマホ約297pxなので1行に収まる
   - アイコンは緑（指示）

   **アイコンの塗り替え方。** アイコンはビルダーの画像欄の `<img>` で、
   CSSの色では塗れない。そこで `object-position` で元の絵を枠の外へ
   追い出し、要素の背景を緑にして、同じ形のSVGで型抜きしている。
   型は「採用までの流れ」で正規化した `ng-flow-*.svg` を使い回す。
   **白で描かれていた `line.svg` もこれで緑になる**（画像の差し替え不要）。

   **緑は `--ng-green-dk`。** 図形は3.0以上が要る。クリーム地で
   `--ng-green` は2.48で届かず、`--ng-green-dk` は3.52。
   手段名（10px、`--ng-green-deep`）はクリーム地で4.53。基準4.5は満たす。

   どの型を当てるかはリンク先で見分けている（tel: / line.me / instagram.com）。
   手段が増えたらここに1行足す。

   **2026-10-02、指示で地を半透明の黒、文字を白に変更（アイコンは緑のまま）。**
   上の「地は --ng-sand」はこれで置き換わった。同じパネルが募集要項の個別
   ページのEntry（写真の上）にも出るので、両方が同じ見た目になる。

   **不透明度は88%。** アイコンの緑（--ng-green-dk）を変えずに、図形の基準
   3.0を保てる下限がこのあたり。リクルートページのEntryは無地のクリーム地で、
   88%なら合成色は #2f2c2a 前後、緑との比は約3.2。80%まで下げると2.4に落ちる。
   もっと透かしたいときは、アイコンを明るい緑（--ng-green など）に変えること。
   文字の白は、この地の上で13以上あり問題ない。
   -------------------------------------------------------------------------- */
#entry .el-item > .uk-card {
	background: rgba(20, 17, 15, .88);
	border-color: transparent;
}

#entry .el-item > .uk-card:hover {
	background: rgba(20, 17, 15, .94);
	border-color: var(--ng-green-dk);
}

/* 手段名（小）・番号やID（大）・補足・外部リンクの矢印を白に */
#entry .el-item > .uk-card .el-meta,
#entry .el-item > .uk-card .el-title,
#entry .el-item > .uk-card .el-content {
	color: var(--ng-paper);
}

/* 番号・IDの大きさ。**上限21px、狭い画面ではカード幅に合わせて縮む。**

   2026-09-24、スマホではみ出した（指示で修正）。320px幅では
   `@nextgeneration_recruit` ＋「↗」が約261px要るのに、文字の欄は
   160pxしか無く、81pxはみ出していた。

   カードを「サイズの基準（container）」にして、文字の大きさを
   カード幅の 7.6% とした（`cqi`）。3枚とも同じ幅なので同じ大きさになる。
   320px幅で約18px、375px幅以上とPCは21pxで止まる。
   7.6% は「最長のIDの幅（21pxで242px）＋矢印19px」が収まる値から出した。 */
#entry .el-item > .uk-card {
	container-type: inline-size;
}

#entry .el-item > .uk-card .el-title {
	font-family: var(--ng-en);
	font-size: min(21px, 7.6cqi);
	letter-spacing: .06em;
}

/* スマホ幅ではアイコンを上、文字を下に積んでいた
   → 2026-09-30、指示で「アイコン左・文字右」の横並びに変更
   （はじめ左右逆に実装し、指示で直した）。

   もとは横並びのままだと、アイコンの列（80px）のぶん文字の欄が
   削られ、長いIDがはみ出す/機種によって折り返しが変わる、という
   問題があって縦積みにしていた（2026-09-24）。今回は積まずに
   横並びに戻す。DOM順どおり（アイコン→文字）で見た目もアイコンが
   左になるので、`flex-direction` は既定の `row` のままでよい。

   **文字の基準（container）をカード全体から文字欄だけに変更。**
   下の「番号・IDの大きさ」の `cqi` はカード幅を基準にしていたが、
   横並びに戻すとアイコン列（70px固定）＋間隔ぶんが文字欄から
   引かれ、同じ7.6%では収まらなくなった（375px幅で実測21px→
   必要幅263pxに対し実際の文字欄225px、320px幅で実測18.24px→
   同231pxに対し170pxで、どちらもはみ出していた）。
   文字欄の `<div class="uk-width-expand">` 自体をcontainerにして、
   そちらを基準にした%（7% → 375px幅で16.5px・320px幅で12.6px、
   どちらも実測の必要幅に対して余裕を持って収まる）に差し替える。 */
@media (max-width: 639px) {
	#entry .el-item > .uk-card > .uk-grid > .uk-width-expand {
		container-type: inline-size;
	}

	#entry .el-item > .uk-card .el-title {
		font-size: min(21px, 7cqi);
	}
}

#entry .el-item > .uk-card img {
	object-position: -99999px 0;
	background-color: var(--ng-green-dk);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

#entry .el-item > .uk-card[href^="tel:"] img {
	-webkit-mask-image: url(../img/ng-flow-tel.svg);
	        mask-image: url(../img/ng-flow-tel.svg);
}

#entry .el-item > .uk-card[href*="line.me"] img,
#entry .el-item > .uk-card[href*="lin.ee"] img {
	-webkit-mask-image: url(../img/ng-flow-line.svg);
	        mask-image: url(../img/ng-flow-line.svg);
}

#entry .el-item > .uk-card[href*="instagram.com"] img {
	-webkit-mask-image: url(../img/ng-flow-insta.svg);
	        mask-image: url(../img/ng-flow-insta.svg);
}

/* --------------------------------------------------------------------------
   Entry の一文「『サロン見学希望』とご連絡ください。」 2026-09-24

   お気軽にご相談くださいのリード文と、連絡先パネルの間にある一文。
   電話をかけるときの合言葉なので、そこだけ目立たせる（指示）。

   **ビルダー側でクラスを付け、「サロン見学希望」だけ太字にしてもらう
   前提。** 太字（`<b>`/`<strong>`）にした部分だけ大きく緑にする。
   地の文（「とご連絡ください。」）は墨70%のまま。

   いままでテーマ既定の灰色（#6c6d74）だった。白地で5.15はあり基準は
   満たしていたが、サイトのトークンではなかったので `--ng-ink-70` に
   そろえた。
   -------------------------------------------------------------------------- */
#entry .ng-entry-quote {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--ng-ink-70);
}

#entry .ng-entry-quote b,
#entry .ng-entry-quote strong {
	font-size: 21px;
	font-weight: 600;
	color: var(--ng-green-dk);
}

/* --------------------------------------------------------------------------
   ページ最下部の目次  .ng-sec-toc （2026-09-29）

   ロゴ＋Instagram/LINEアイコン＋2列10項目のリンク一覧。
   平山さんが用意したお手本（参考画像）から寸法を実測して数値化した。

   お手本の画像は2114px幅で、ロゴの実測966px。いまのロゴ画像は
   何も指定しなくても480px（原寸）で出ており、966÷480≒2.01なので、
   **お手本はほぼ等倍スクリーンショット（2倍で撮っただけ）と分かった。**
   ここを基準に、他の寸法もすべて2で割って実寸に直している。

   実測（お手本 → 実寸）
     文字の大きさ　　約30px（会社概要のカク1字の送り幅から算出）
     行の中心間隔　　151px → 75px（行の空きは約44px相当）
     数字→ラベルの間　33px → 16px
     アイコン　　　　158px → 79px、間隔68px → 34px

   **Jostは500までしか読み込んでいない**（200/300/400/500）。
   600や700を指定すると読み込んでいない太さの代わりにブラウザが
   勝手に太らせる「疑似ボールド」になり、輪郭が滲む
   （このサイトで既に踏んでいる落とし穴）。数字は上限の500にしている。
   -------------------------------------------------------------------------- */

/* アイコン（Instagram・LINE） */
.ng-sec-toc img[src*="logo-insta"],
.ng-sec-toc img[src*="logo-line"] {
	width: 79px;
	height: 79px;
}

/* 2026-09-29、修正。UIkitの `uk-child-width-1-2` は50%幅を
   `flex-basis` と `padding-left` で作る古典的グリッドで、
   `column-gap` を効かせても無視される。max-widthで箱を絞ると、
   その中で改めて50%ずつに割られ、アイコンが重なって縮んだ
   （56pxまで潰れた）。**flexに作り替えて、本物の `gap` を使う。** */
.ng-sec-toc .uk-grid.uk-child-width-1-2:has(img[src*="logo-insta"]) {
	display: flex !important;
	justify-content: center;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	gap: 34px;
}

.ng-sec-toc .uk-grid.uk-child-width-1-2:has(img[src*="logo-insta"]) > * {
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto;
	padding-left: 0 !important;
}

/* 番号（例「01.」） */
.ng-sec-toc .el-item .el-title {
	margin: 0;
	font-family: var(--ng-en);
	/* 2026-09-30、半分(13px)は縮小しすぎとの指示で1.5倍に戻す（13px×1.5≒19.5px） */
	font-size: clamp(15px, 1.65vw, 19.5px);
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--ng-green-band);
}

/* ラベル（例「会社概要」） */
.ng-sec-toc .el-item .el-meta {
	margin: 0;
	font-family: var(--ng-mix);
	font-size: clamp(15px, 1.65vw, 19.5px);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ng-ink-70);
	text-transform: none;
}

/* 番号とラベルの間隔 */
.ng-sec-toc .el-item .uk-grid-small {
	column-gap: 16px;
}

/* 行と行の間隔 */
.ng-sec-toc .uk-grid-row-small > * {
	margin-top: 44px !important;
}

.ng-sec-toc .uk-grid-row-small > .uk-first-column {
	margin-top: 0 !important;
}

/* 2026-09-30、指示でスマホだけ番号とラベルの間隔を詰める。
   「07. 社内イベント・行事」が375px幅で1行に収まらず、
   「社内イベント・行」「事」の2行に割れていた（ラベル列の実寸142.6pxに
   対し使える幅144.7pxしか無く、フォント読み込みや丸め誤差だけで
   簡単に溢れる際どさだった）。間隔を16px→8pxに詰めて8px分の余裕を作った。

   **それでも1行に収まらなかった（2026-09-30、続き）。** 間隔を詰めた後の
   実測でも、ラベルの実寸（147.7px）に対し使える幅（152.7px）との差は
   5px程度しか無く、フォントの丸め誤差だけで再び溢れていた。指示どおり
   文字も少し縮める（15px→14px）。数字・ラベルとも14pxなら実寸は
   137.9px程度になり、使える幅との差が16px前後まで広がって安定する。 */
@media (max-width: 639px) {
	.ng-sec-toc .el-item .uk-grid-small {
		column-gap: 8px;
	}

	.ng-sec-toc .el-item .el-title,
	.ng-sec-toc .el-item .el-meta {
		font-size: 14px;
	}
}

/* リンクに下線を敷かない（見出し的に扱う） */
.ng-sec-toc .el-item a {
	text-decoration: none;
}

.ng-sec-toc .el-item a:hover .el-meta {
	color: var(--ng-ink);
}

/* --------------------------------------------------------------------------
   Process カード、960px未満は横並びに  2026-09-29

   PCは「上にバッジ、下に本文」のまま。タブレット・スマホ（〜959px）は
   「左にバッジ、右に本文」にして縦の高さを削る（指示。はじめスマホ
   だけだったが、タブレットも同じにと後から広げた）。
   960px未満向けの矢印（カード間の「く」の字）はそのまま使えるので
   触っていない。

   **バッジは擬似要素（`::before` `::after`）で、実体のある要素ではない。**
   フレックスの子にはできないので、絶対配置の位置を「上中央」から
   「左上」に変え、本文側に左パディングでバッジの逃げを作る形にした。

   バッジは96px→72pxに縮小（0.75倍）。中の文字も同じ比率で縮めてある。

   **左パディングの内訳**：カード端の余白28px＋バッジ72px＋バッジと
   本文の間16px＝116px。 */
@media (max-width: 959px) {
	/* カード内のpaddingを半分に（2026-09-29、指示）。
	   端の余白28px→14px、バッジと本文の間16px→8pxに。バッジ自体の
	   大きさ（72px）は変えていない。
	   左paddingの内訳＝端14px＋バッジ72px＋間隔8px＝94px。
	   本文の実効幅は201px→237pxに広がる（「お電話、LINE、Instagram、」を
	   1行に収めたい、という指示にも効く）。 */
	.ng-sec-flow-steps .el-item {
		padding: 14px 14px 14px 94px;
		text-align: left;
	}

	.ng-sec-flow-steps .el-item::before {
		top: 14px;
		left: 14px;
		transform: none;
		width: 72px;
		height: 72px;
		padding-top: 15px;
		font-size: 8px;
	}

	.ng-sec-flow-steps .el-item::after {
		top: 14px;
		left: 14px;
		transform: none;
		width: 72px;
		height: 72px;
		padding-bottom: 13px;
		font-size: 21px;
	}

	.ng-sec-flow-steps .el-title {
		font-size: 16px;
		line-height: 1.3;
	}

	/* タイトル→アイコン→本文の間を詰める（2026-09-29、指示で2回目）。
	   PC/タブレットの値（本文の上12px・アイコンの下20px→タブレット16px・
	   行の高さ1.9）はそのまま。スマホだけ縮める。

	   **`.el-content` にはビルダーが `uk-margin-top` を付けている。**
	   UIkitの余白ユーティリティは `!important` 付きで、20pxに固定される。
	   ここに `!important` を付けないと、6pxを指定したつもりでも20pxの
	   ままになる（実際そうなっていた。CLAUDE.mdに書いてある落とし穴）。 */
	.ng-sec-flow-steps .el-content {
		margin-top: 4px !important;
		line-height: 1.5;
	}

	.ng-sec-flow-steps .el-content::before {
		margin: 0 0 6px;
	}
}

/* --------------------------------------------------------------------------
   採用までの流れ、スマホ版の調整  2026-09-30

   1. カードのアイコン（`.el-content::before`）を消す（指示）。
   2. カード上の呼びかけ（`.ng-flow-lead`）が375px幅で1行に収まらず
      2行に折れていた。実測すると、コンテンツの実効幅345pxに対し
      24px時の実寸は549px（22文字＋文字間隔ぶん）で、1行に収めるには
      約15px以下が必要。安全マージンを見て14pxにした。

      **24px未満にする場合は色を変えること（同じ`.ng-flow-lead`の
      上のコメントに明記済み）。** 現在の `--ng-green-dk`（白地4.21）は
      「大きい文字」の基準3.0はクリアするが24px未満だと普通の文字の
      基準4.5を満たさない。14pxでは大きい文字の例外が使えないので、
      `--ng-green-deep`（白地5.42）に替えて基準を満たす。
   3. カードのタイトル（黒文字、`.el-title`）を中央揃えに（指示）。
   4. **さらに指示で再配置（2026-09-30、続き）。** 上段＝タイトル（中央
      揃え、カード全幅）、下段＝左にバッジ（STEP 01）・右に本文、という
      2段組みに変える。

      **バッジ（`::before`/`::after`）はCSS Gridの `grid-area` に乗せる。**
      タブレット（640〜959px）は今までどおり `position: absolute` で
      「バッジが左上、タイトルと本文がその右」の1段組み（下の
      `@media (max-width: 959px)`ブロック）のまま。ここではスマホ
      （〜639px）だけ `.el-item` を `display: grid` にして丸ごと上書きし、
      `position: static` に戻したバッジを2行目の左セルに、タイトルを
      1行目（2列ぶん）に、本文を2行目の右セルに、それぞれ配置し直す。
      バッジは高さ72pxの円なので `align-self: start` で上端をタイトル側と
      揃える（`stretch` だと本文の行数ぶん縦に伸びてしまう）。 */
@media (max-width: 639px) {
	.ng-sec-flow-steps .el-content::before {
		display: none;
	}

	.ng-flow-lead {
		font-size: 14px;
		color: var(--ng-green-deep);
	}

	.ng-sec-flow-steps .el-item {
		display: grid;
		grid-template-columns: 72px 1fr;
		grid-template-areas:
			"title   title"
			"badge   content";
		column-gap: 8px;
		row-gap: 10px;
		padding: 14px;
	}

	.ng-sec-flow-steps .el-item::before,
	.ng-sec-flow-steps .el-item::after {
		grid-area: badge;
		position: static;
		align-self: start;
	}

	.ng-sec-flow-steps .el-title {
		grid-area: title;
		text-align: center;
	}

	.ng-sec-flow-steps .el-content {
		grid-area: content;
		margin-top: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   Message、オーナー写真をスマホ・タブレットで左に・文字を右に
   2026-09-29、2026-09-29追記（タブレットにも拡張）

   PC（`uk-width-2-5@m` が効く960px以上）は「写真の下に3行」のまま。
   〜959px（スマホ・タブレット）は、写真を左・文字を右の横並びにし、
   スタッフの声の写真（右寄せ・128×144px）とは逆に左寄せにする
   （指示）。はじめスマホ（〜639px）だけに入れていたが、タブレットは
   960px未満なので `uk-width-2-5@m` が効かず、写真が全幅で上、文字が
   下という旧レイアウトのままだった。同じ指定を〜959pxに広げた。

   写真は `.ng-img-3x4`（3:4固定）。幅を指定すれば高さは比率で決まる。
   2026-09-29、さらに指示で「画面の半分くらい」に変更。固定148pxを
   やめ、箱（`.uk-width-2-5@m`）に対して50%幅にした。

   **箱の高さも固定pxではなく `aspect-ratio` にした。** 写真幅が
   ビューポート幅に応じて変わるため、高さも連動させる必要がある。
   写真は箱の50%幅・3:4固定なので、写真の高さ＝箱の幅×0.5×4/3＝
   箱の幅×2/3。これは箱自体の縦横比が3:2であることと同じなので、
   箱に `aspect-ratio: 3/2` を指定すれば、写真の実際の高さと箱の
   高さが常に一致する（テキストの `bottom` 起点がずれない）。

   **絶対配置で下から積む。** 写真・肩書・氏名・ローマ字はビルダー上は
   別々の要素（兄弟）。`grid-template-areas` で組むと、ビルダーの
   `uk-margin-top`（!important）や行の自動配分でmarginの取り合いになり
   行間が詰まらなかった（2026-09-29に判明）。写真の高さで決まる箱の中に
   氏名たちを `position: absolute; bottom` で直接置き、marginの取り合いを
   回避している。 */
@media (max-width: 959px) {
	/* **行がそろわなかった理由（2026-09-29に判明）。**
	   `grid-template-areas` で写真を3行にまたがらせていたが、
	   「肩書」に付いていたビルダーの `uk-margin-top`（!important、20px）
	   を打ち消せておらず、1行目のマスがその分ふくらんで2行目・3行目を
	   押し下げていた。さらに行をまたぐ写真の高さを3行に自動配分する
	   挙動も重なり、marginを詰めても見た目の行間が縮まなかった。

	   **grid はやめて、絶対配置で下から積む形にした。** 写真の高さで
	   決まる箱の中に、氏名たちを `position: absolute; bottom` で
	   直接置く。marginの取り合いも行の自動配分も関係なくなる。 */
	.ng-sec-message .uk-width-2-5\@m {
		position: relative;
		aspect-ratio: 3 / 2;
		padding-left: calc(50% + 16px);
	}

	.ng-sec-message .ng-img-3x4 {
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		margin: 0;
	}

	.ng-sec-message .ng-voice__meta {
		position: absolute;
		left: calc(50% + 16px);
		bottom: 63px;
		margin: 0 !important;
	}

	.ng-sec-message .ng-voice__name {
		position: absolute;
		left: calc(50% + 16px);
		bottom: 26px;
		margin: 0 !important;
		line-height: 1.2;
		white-space: nowrap;
	}

	.ng-sec-message .ng-voice__roman {
		position: absolute;
		left: calc(50% + 16px);
		bottom: 0;
		margin: 0 !important;
		white-space: nowrap;
	}
}