/* ==========================================================================
   NEXT GENERATION ─ 共通パーツ
   ページやセクションをまたいで使い回す部品。
   ここに書いたクラスは、どのセクションでも同じ見た目になる。

   ※ YOOtheme の theme.css は当CSSより後に読み込まれるため、
     UIkit の既定値と競合する箇所はクラスを1つ多く重ねて詳細度を上げている。
   ========================================================================== */

/* --------------------------------------------------------------------------
   セクション見出し（英字＋和文のペア）
   例）Concept／わたしたちについて
   -------------------------------------------------------------------------- */
.ng-title-h2 {
	margin: 0;
	font-family: var(--ng-en);
	font-size: clamp(2.25rem, 7vw, 4rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .04em;
	color: var(--ng-ink);
	text-transform: none;
}

.uk-panel.ng-title-sub,
.ng-title-sub {
	margin-top: 14px;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .22em;
	color: var(--ng-ink-45);
}

/* 章番号つきの小見出し（「01 – CONCEPT」「02 – MENU」など）。
   店舗個別ページで使う。ng-title-sub と同じ立ち位置だが、
   **番号を持つ見出しなので色で区別する**（灰色ではなく緑）。

   小さい文字なのでコントラスト比4.5が要る。--ng-green（2.97）や
   --ng-green-dk（4.21）では足りないため、--ng-green-deep を使う。 */
.uk-panel.ng-sec-num,
.ng-sec-num {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .22em;
	color: var(--ng-green-deep);
	text-transform: uppercase;
}

.ng-invert .ng-sec-num { color: var(--ng-ygreen-hi); }

/* --------------------------------------------------------------------------
   本文・リード・注釈
   -------------------------------------------------------------------------- */
.uk-panel.ng-lead,
.ng-lead {
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 300;
	line-height: 2.2;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.uk-panel.ng-body,
.ng-body {
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2.4;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* 本文の中の強調（2026-09-21）

   **ブラウザ任せでは太くならない。** `<b>` `<strong>` の既定は
   `font-weight: bolder` で、これは**親からの相対指定**。
   親が300のとき bolder は **400にしかならない**（300→400／400→700）。
   本文は300なので、書いても見た目がほとんど変わらなかった。

   500にする。Noto Sans JP は 300／400／500 を読み込んでいるので
   **擬似的な太らせ（滲む）は起きない。** 700は読み込んでいないので使わない。

   あわせて墨70%→100%にする。太さだけより、濃さと組み合わせたほうが
   この細い本文では効く。記事本文（`.uk-article strong`）は400＋墨100%で、
   そちらは長文なので控えめにしてある。**ここは売り込みの文なので一段強い。**

   `<b>` も受けるのは、担当者がどちらで書いても成り立たせるため。
   **意味の上では `<strong>` が正しい**（重要だから太くしている）。 */
.uk-panel.ng-body b,
.uk-panel.ng-body strong,
.ng-body b,
.ng-body strong {
	font-weight: 500;
	color: var(--ng-ink);
}

/* 段落が続く場合の間隔。1行ぶんより少し広めに空けて読みやすくする */
.uk-panel.ng-body > p,
.ng-body > p {
	margin: 0;
}

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

.uk-panel.ng-note,
.ng-note {
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink-45);
}

/* 引用・強調したい一文 */
.uk-panel.ng-pull,
.ng-pull {
	font-family: var(--ng-ja);
	font-size: clamp(1.15rem, 4.5vw, 2rem);
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .05em;
	color: var(--ng-ink);
}

/* --------------------------------------------------------------------------
   ボタン

   ng-btn / ng-btn-solid は、リンク自体に付けても、外側の要素に付けても
   同じ見た目になるようにしている。
     a.ng-btn        … リンクに直接付けた場合
     div.ng-btn > a  … ビルダーでラッパーに付けた場合（中のリンクをボタン化）
   -------------------------------------------------------------------------- */

/* ボタン本体（リンク） */
a.ng-btn,
a.ng-btn-solid,
.ng-btn > a,
.ng-btn > .uk-button,
.ng-btn-solid > a,
.ng-btn-solid > .uk-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 32px;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .14em;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	text-transform: none;
	border: 1px solid var(--ng-ink);
	border-radius: 999px;
	transition: background-color .35s var(--ng-ease),
	            color .35s var(--ng-ease),
	            border-color .35s var(--ng-ease);
}

/* ラッパーに付いている場合は、外側は素の入れ物に戻す
   （uk-text-center などの配置指定がそのまま効くようにする） */
div.ng-btn,
div.ng-btn-solid,
span.ng-btn,
span.ng-btn-solid {
	display: block;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* 線のボタン */
a.ng-btn,
.ng-btn > a,
.ng-btn > .uk-button {
	background: transparent;
	color: var(--ng-ink);
}

a.ng-btn:hover,
.ng-btn > a:hover,
.ng-btn > .uk-button:hover {
	background: var(--ng-ink);
	color: #fff;
	border-color: var(--ng-ink);
}

/* 塗りのボタン */
a.ng-btn-solid,
.ng-btn-solid > a,
.ng-btn-solid > .uk-button {
	background: var(--ng-ink);
	color: #fff;
}

a.ng-btn-solid:hover,
.ng-btn-solid > a:hover,
.ng-btn-solid > .uk-button:hover {
	background: var(--ng-green);
	border-color: var(--ng-green);
	color: #fff;
}

/* 暗い背景の上に置く場合（セクションに ng-invert を付ける） */
.ng-invert a.ng-btn,
.ng-invert .ng-btn > a,
.ng-invert .ng-btn > .uk-button {
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
	background: transparent;
}

.ng-invert a.ng-btn:hover,
.ng-invert .ng-btn > a:hover,
.ng-invert .ng-btn > .uk-button:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ng-ink);
}

.ng-invert a.ng-btn-solid,
.ng-invert .ng-btn-solid > a,
.ng-invert .ng-btn-solid > .uk-button {
	background: #fff;
	border-color: #fff;
	color: var(--ng-ink);
}

/* --------------------------------------------------------------------------
   タグ
   -------------------------------------------------------------------------- */
.ng-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ng-tags .uk-subnav,
.ng-tags.uk-subnav {
	margin: 0;
	gap: 8px;
}

.ng-tags .uk-subnav > *,
.ng-tags.uk-subnav > * {
	padding-left: 0;
}

/* ビルダーのリスト要素は項目の間に「, 」を書き出す。
   入れ物の文字を0にして区切り文字だけ消し、中身で元に戻す。 */
.ng-tags .el-item {
	font-size: 0;
	letter-spacing: 0;
}

.ng-tags .el-link,
.ng-tags .el-item > .el-content,
.ng-tags li > * {
	display: inline-block;
	padding: 6px 14px;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--ng-ink-70);
	border: 1px solid var(--ng-ink-12);
	border-radius: 999px;
	text-transform: none;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   定義リスト（住所・営業時間・募集要項など）
   Description List 要素に .ng-dl を付ける
   -------------------------------------------------------------------------- */
.ng-dl.uk-list > li,
.ng-dl > .el-item {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-dl .uk-width-small {
	width: 108px;
}

.ng-dl .el-title {
	font-family: var(--ng-ja);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
	padding-top: .25em;
}

.ng-dl .el-content {
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

/* --------------------------------------------------------------------------
   セクションの背景と余白
   -------------------------------------------------------------------------- */

/* 交互に敷くグレージュ

   YOOtheme の .uk-section-default（白背景）は当CSSより後に読み込まれ、
   クラス1つ同士では負けてしまう。セレクタを重ねて詳細度を上げる。 */
.ng-bg-offwhite,
.uk-section.ng-bg-offwhite,
.uk-section-default.ng-bg-offwhite,
.uk-section-muted.ng-bg-offwhite {
	background-color: var(--ng-offwhite);
}

.ng-bg-white,
.uk-section.ng-bg-white,
.uk-section-default.ng-bg-white,
.uk-section-muted.ng-bg-white {
	background-color: var(--ng-paper);
}

/* 背景画像つきセクションなど、内側の .uk-section が実体になる構成にも効かせる */
.ng-bg-offwhite > .uk-section { background-color: var(--ng-offwhite); }
.ng-bg-white    > .uk-section { background-color: var(--ng-paper); }

/* 暗い背景（文字を白に反転）

   YOOtheme の .uk-section-default（白背景）は当CSSより後に読み込まれ、
   クラス1つ同士では負けてしまう。セレクタを重ねて詳細度を上げる。 */
.ng-invert,
.uk-section.ng-invert,
.uk-section-default.ng-invert,
.uk-section-muted.ng-invert {
	background-color: var(--ng-ink);
	color: #fff;
}

.ng-invert .ng-title-h2 { color: #fff; }
.ng-invert .ng-title-sub,
.ng-invert .ng-note { color: rgba(255, 255, 255, .5); }
.ng-invert .ng-lead,
.ng-invert .ng-pull { color: #fff; }
.ng-invert .ng-body { color: rgba(255, 255, 255, .74); }
.ng-invert .ng-dl > .el-item { border-top-color: rgba(255, 255, 255, .16); }
.ng-invert .ng-dl .el-title { color: rgba(255, 255, 255, .5); }
.ng-invert .ng-dl .el-content { color: #fff; }
.ng-invert .ng-tags .el-link,
.ng-invert .ng-tags li > * {
	color: rgba(255, 255, 255, .8);
	border-color: rgba(255, 255, 255, .2);
}

/* --------------------------------------------------------------------------
   画像の比率をそろえる
   -------------------------------------------------------------------------- */
.ng-img-4x3 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.ng-img-3x4 img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.ng-img-1x1 img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.ng-img-16x9 img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* --------------------------------------------------------------------------
   [ng_salon] ショートコードの出力
   -------------------------------------------------------------------------- */
.ng-salon-info > * + * {
	margin-top: 14px;
}

/* 業態。店名のすぐ上に置く小さなラベル */
.ng-salon-info__type {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .12em;
	color: var(--ng-green-dk);
}

/* 読みがな。店名が欧文なので、読み方を添える */
.ng-salon-info__kana {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: .1em;
	color: var(--ng-ink-45);
}

/* 併設店の名前 */
.ng-salon-info__sub {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .1em;
	color: var(--ng-ink-70);
}

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

.ng-salon-info__lead {
	margin: 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-salon-info__tel {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 15px;
	letter-spacing: .06em;
}

.ng-salon-info__tel a {
	color: var(--ng-ink);
	text-decoration: none;
}

.ng-salon-info__hours,
.ng-salon-info__last,
.ng-salon-info__closed {
	margin: 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-salon-info__hours span,
.ng-salon-info__last span {
	display: block;
}

/* --------------------------------------------------------------------------
   店舗のコンセプトと施術メニュー（2026-09-13）

   店舗個別ページ用。ビルダーのどのセクションに置くかは平山さんが決めるので、
   ここでは**字面だけ**を整える。余白や列組みは置き場所が決まってから。
   -------------------------------------------------------------------------- */
.ng-salon-concept__title {
	margin: 0;
	font-family: var(--ng-mix);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: .06em;
	color: var(--ng-ink);
	text-transform: none;
}

.ng-salon-concept__text {
	margin: 18px 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);
}

/* **2026-09-13から休止中。** 店舗ページのトリートメントの欄そのものが
   無くなったため、当たる先がない。消していないのは、Big up に実際の
   メニュー原稿が残っていて欄を戻す判断がありうるため。
   復活させないと決まったら、ここと `ng_salon_menu()` をまとめて消せる。

   以下、休止前の指定。

   1列に縦積み（2026-09-13、クライアント要望）。
   罫線は項目の上下に引く。項目どうしは線を共有し、最後の1件だけ
   下にも引いて閉じる。**項目のあいだに余白を入れない**のは、
   余白があると線が「区切り」ではなく「飾り」に見えるため。 */
.ng-salon-menu {
	display: block;
}

/* 番号は左の細い列に置き、名称と説明は右に積む。
   説明が無い項目でも番号の位置が動かないよう、行を跨がせる。 */
.ng-salon-menu__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--ng-ink-12);
}

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

/* 01 02 03。飾りなので読み上げからは外してある（aria-hidden）。
   色は章番号（.ng-sec-num）と同じ緑にして、**番号は緑**という
   決まりをページの中で一貫させる。11pxなのでコントラスト比4.5が要り、
   --ng-ink-45（約3.1）は使えない。 */
.ng-salon-menu__no {
	grid-column: 1;
	grid-row: 1 / 3;
	padding-top: 2px;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .1em;
	color: var(--ng-green-deep);
}

.ng-salon-menu__name {
	grid-column: 2;
	margin: 0;
	font-family: var(--ng-mix);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .08em;
	color: var(--ng-ink);
	text-transform: none;
}

.ng-salon-menu__desc {
	grid-column: 2;
	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-salon-info__more {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 13px;
	letter-spacing: .1em;
}

.ng-salon-info__more a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ng-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ng-ink-45);
	padding-bottom: 4px;
	transition: color .35s var(--ng-ease), border-color .35s var(--ng-ease);
}

.ng-salon-info__more a::after {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
	transition: width .35s var(--ng-ease);
}

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

.ng-salon-info__more a:hover::after {
	width: 26px;
}

.ng-salon-info__more-text {
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .08em;
}

.ng-salon-info__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

/* セクション内では少し小さめのボタンにする */
.ng-salon-info__actions .ng-btn,
.ng-salon-info__actions .ng-btn-solid {
	min-height: 46px;
	padding: 0 24px;
	font-size: 12px;
}

/* --------------------------------------------------------------------------
   番号つきのキャプション  .ng-caption

   写真の下に「01 ／ EYEBROW WAX ／ 眉毛ワックス」の3段で添える。
   [ng_caption] が出力する。
   -------------------------------------------------------------------------- */
.ng-caption {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* 番号。**数字は欧文で組む。** 和文書体の数字は字幅が広く、
   2桁が間延びして見える */
.ng-caption__no {
	font-family: var(--ng-en);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .1em;
	color: var(--ng-green-deep);
}

.ng-caption__en {
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .16em;
	color: var(--ng-ink);
	text-transform: uppercase;
}

.ng-caption__jp {
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: .08em;
	/* PENの muted（#8C8C8C）は白地で 3.36。11pxでは基準4.5に届かないので
	   サイトの --ng-ink-70（7.05）を使う */
	color: var(--ng-ink-70);
}

/* --------------------------------------------------------------------------
   店舗のSNS（Instagram）  .ng-salon-sns

   ※2026-09-19に一度休眠したが、**2026-09-23、リクルートの「勤務地」で
     復活した。** 下の注意書きは当時のもの。**もう消せない。**

   コンセプト欄の文章の下に置いていた（2026-09-13）。
   荒川沖店だけヘアとアイで2つあるので、1つでも2つでも収まる形にしてある。

   **2026-09-19、Instagramはアクセス欄の表の1行に移した**（指示）。
   コンセプト欄そのものが無くなったので置き場所も無くなった。
   見た目はここの指定を `50-page.css` の `.ng-salon-ig__link` に移してある。

   **消せるのは、表の形が固まってコンセプト欄を戻さないと決めてから。**
   独立したブロックとして置き直すことになれば、そのまま使える。
   → 実際に置き直すことになった（勤務地のカード）。カード用の調整は
     `50-page.css` の `.ng-salon-info--work` にある。
   -------------------------------------------------------------------------- */
.ng-salon-sns {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-salon-sns__label {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .22em;
	/* 「番号は緑」の決まりに合わせない。これは番号ではなくラベル */
	color: var(--ng-ink-70);
	text-transform: uppercase;
}

.ng-salon-sns__list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.ng-salon-sns__list > li + li {
	margin-top: 4px;
}

.ng-salon-sns__list a {
	display: inline-block;
	font-family: var(--ng-mix);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.8;
	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);
}

.ng-salon-sns__list a:hover {
	color: var(--ng-green-deep);
	border-bottom-color: var(--ng-green-deep);
}

/* --------------------------------------------------------------------------
   [ng_access] の出力（トップ・アクセスページ共通）

   店舗を横並びにし、各店を「店名＋定義リスト」で見せる。
   -------------------------------------------------------------------------- */
.ng-access {
	display: grid;
	gap: 40px;
}

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

/* 店名 */
.ng-access__name {
	margin: 0;
	padding-bottom: 12px;
	font-family: var(--ng-mix);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--ng-ink);
	border-bottom: 1px solid var(--ng-ink-12);
	text-transform: none;
}

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

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

/* 併設店（Lua by Big up など） */
.ng-access__sub {
	display: block;
	margin-top: 4px;
	font-family: var(--ng-mix);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .12em;
	color: var(--ng-green);
}

/* 定義リスト */
.ng-access__data {
	margin: 14px 0 0;
}

.ng-access__row {
	display: grid;
	grid-template-columns: 68px 1fr;
	gap: 10px;
	padding: 5px 0;
}

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

.ng-access__data dd {
	margin: 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-access__data dd span {
	display: block;
}

.ng-access__data 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-access__data dd a:hover {
	color: var(--ng-green-dk);
	border-color: var(--ng-green-dk);
}

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

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

.ng-invert .ng-access__data dt { color: rgba(255, 255, 255, .5); }
.ng-invert .ng-access__data dd { color: #fff; }

/* --------------------------------------------------------------------------
   ラベル（小さな囲み文字）
   「2027年度 新卒採用」のような、見出しに添える一言に使う。
   -------------------------------------------------------------------------- */
.ng-label,
.uk-panel.ng-label {
	display: inline-block;
	padding: 6px 16px;
	font-family: var(--ng-ja);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .2em;
	color: var(--ng-ink-70);
	border: 1px solid var(--ng-ink-12);
	border-radius: 999px;
}

.ng-invert .ng-label,
.ng-invert .uk-panel.ng-label {
	color: #fff;
	border-color: rgba(255, 255, 255, .4);
}

/* --------------------------------------------------------------------------
   数字で見る  .ng-num

   ★2026-08-14 現在、どこからも使われていない。
     クライアントの依頼でリクルートページのNumbersセクションを削除したため。
     人数や設立年は更新されないから不要、という判断だった。
     復活する可能性を考えて残してある。1年経っても使われていなければ消してよい。
     （※ ショートコードの [ng_num] とは別物。あちらは会社概要などで現役）

   HTML要素に貼り付けて使う。アイコンはSVGを直接書いているので、
   アイコンフォントや外部ファイルの読み込みは発生しない。

   強弱のつけ方
     .ng-num__item          … 白地に細い罫線
     .ng-num__item--key     … 黒地に白文字（特に見せたい項目に付ける）
   -------------------------------------------------------------------------- */
.ng-num {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

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

.ng-num__item {
	display: flex;
	flex-direction: column;
	padding: 24px 18px 22px;
	background: var(--ng-paper);
	border: 1px solid var(--ng-ink-12);
	border-radius: 2px;
}

@media (min-width: 768px) {
	.ng-num__item {
		padding: 34px 28px 30px;
	}
}

/* 特に見せたい項目 */
.ng-num__item--key {
	background: var(--ng-ink);
	border-color: var(--ng-ink);
}

/* アイコン */
.ng-num__icon {
	display: block;
	width: 26px;
	height: 26px;
	color: var(--ng-green);
}

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

/* 数字 */
.ng-num__value {
	margin: 20px 0 0;
	/* 数字が増えている間、桁ごとに幅が揺れないよう等幅にする */
	font-variant-numeric: tabular-nums;
	font-family: var(--ng-en);
	font-size: clamp(2.3rem, 8vw, 3.6rem);
	font-weight: 200;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--ng-ink);
}

.ng-num__item--key .ng-num__value {
	color: #fff;
}

/* 単位（名・年・%など）は数字より小さく、同じ下端にそろえる */
.ng-num__unit {
	margin-left: 5px;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	letter-spacing: .08em;
}

/* 項目名 */
.ng-num__label {
	margin: 18px 0 0;
	padding-top: 14px;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .14em;
	color: var(--ng-ink);
	border-top: 1px solid var(--ng-ink-12);
}

.ng-num__item--key .ng-num__label {
	color: #fff;
	border-top-color: rgba(255, 255, 255, .22);
}

/* 補足 */
.ng-num__note {
	margin: 7px 0 0;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--ng-ink-45);
}

.ng-num__item--key .ng-num__note {
	color: rgba(255, 255, 255, .62);
}

/* 暗い背景のセクションに置いた場合 */
.ng-invert .ng-num__item {
	background: transparent;
	border-color: rgba(255, 255, 255, .18);
}

.ng-invert .ng-num__value,
.ng-invert .ng-num__label {
	color: #fff;
}

.ng-invert .ng-num__label {
	border-top-color: rgba(255, 255, 255, .18);
}

.ng-invert .ng-num__note {
	color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
   数字ブロックを Grid 要素で組んだ場合

   ビルダーの Grid で1項目ずつ置くと、
     .ng-num__item（= el-item）> .el-content > 中身
   と階層が1つ増え、ビルダー側の余白も入る。そこを吸収する。

   列組みは UIkit のグリッドに任せるので、自前のCSSグリッドは解除する。
   -------------------------------------------------------------------------- */

/* 外側に ng-num が付いたままでも崩れないようにする */
.ng-num:has(> .uk-grid),
.ng-num:has(> [uk-grid]) {
	display: block;
	gap: 0;
}

/* ビルダーが入れる上余白を消す（uk-margin-top は !important のため上書きする）*/
.ng-num__item > .el-content,
.ng-num__item > .el-content.uk-margin-top {
	margin-top: 0 !important;
}

/* Grid の項目として置かれた場合も、カードとして成立させる */
.uk-grid > * > .ng-num__item.el-item {
	height: 100%;
}