/* ==========================================================================
   NEXT GENERATION ─ トップページ
   セクション外枠のクラス（ng-sec-*）を起点に、中身は子孫セレクタで指定する。
   ビルダー側で設定するクラスを最小限にするための方針。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ヒーロー（スライドショー）  .ng-sec-hero
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ここから下の「暗幕」「キャッチコピー」「説明文」は、
   2026-09-08 時点でヒーローに文字を置いていないため効いていない。

   クライアントがCanvaで作った写真に店名のロゴが入っているため、
   サイト側の文字は載せないことになった（2026-09-08、依頼者の判断）。
   暗幕も文字を読ませるためのものなので、あわせて役目を終えている。

   すぐには消さず、公開前の片付けまで残す。方針が戻る可能性と、
   同じ作りを他のセクションで使い回す可能性があるため。
   文字を戻すときはビルダーで要素を足し、下の停止ルールを消すだけでよい。
   -------------------------------------------------------------------------- */

/* 写真の上に敷く暗幕。下側を濃くして文字を読みやすくする */
.ng-sec-hero .uk-slideshow-items > .el-item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(20, 17, 15, .46) 0%,
		rgba(20, 17, 15, .08) 26%,
		rgba(20, 17, 15, .24) 48%,
		rgba(20, 17, 15, .86) 100%);
}

/* 暗幕を止めている（2026-09-08）。
   ヒーローに文字が無くなり、写真を暗くしているだけになったため。
   「全体的に明るくしたい」というクライアント要望の確認用。

   **戻すときは、この1つのルールだけを消す。**
   上の暗幕の指定はそのまま残してある。 */
.ng-sec-hero .uk-slideshow-items > .el-item::after {
	content: none;
}

/* 文字は暗幕より前面に */
.ng-sec-hero .uk-position-cover {
	z-index: 2;
}

/* キャッチコピー */
.ng-sec-hero .el-title {
	font-family: var(--ng-ja);
	font-size: clamp(1.6rem, 6.4vw, 3.25rem);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .04em;
	color: #fff;
	text-shadow: 0 1px 24px rgba(20, 17, 15, .35);
}

/* 説明文 */
.ng-sec-hero .el-content,
.ng-sec-hero .el-content p {
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 2.2;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .88);
	max-width: 34em;
}

/* 左右の矢印を控えめに */
.ng-sec-hero .el-slidenav {
	color: rgba(255, 255, 255, .7);
	transition: color .35s var(--ng-ease);
}

.ng-sec-hero .el-slidenav:hover {
	color: #fff;
}

/* --------------------------------------------------------------------------
   ヒーローの高さ

   PCは16:9の帯、スマホは全画面（2026-09-08、クライアント要望）。
   写真はPC用（横長）とスマホ用（縦長）をYOOthemeの機能で出し分ける。

   もとはPCも画面の高さいっぱいだった。画面が縦長のノートPCでは
   ほぼ正方形に切り抜かれ、横長の写真が活きなかった。
   16:9にすると下に次のセクションの頭が見え、続きがあることも伝わる。

   スライドショーの min-height はビルダーがインラインで
   「max(300px, 100vh)」と書くので、!important でないと外せない。
   -------------------------------------------------------------------------- */

/* ---- PC・タブレット：16:9 ---- */
@media (min-width: 640px) {
	.ng-sec-hero.uk-height-viewport {
		min-height: 0;
	}

	.ng-sec-hero .uk-slideshow-items {
		min-height: 0 !important;
		aspect-ratio: 16 / 9;
		/* 横に広い画面では16:9でも画面の高さを超える。
		   その場合は高さで頭打ちにして、左右を切る */
		max-height: calc(100vh - 76px);
	}
}

/* ---- スマホ：全画面 ----
   dvh はアドレスバーの伸縮を考慮した単位。対応していない環境では vh を使う。 */
@media (max-width: 639px) {
	.ng-sec-hero.uk-height-viewport,
	.ng-sec-hero .uk-slideshow-items {
		min-height: 100vh !important;
	}
}

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

/* ---- スマホも横長（16:9）にする（2026-10-21、クライアント要望） ----
   それまではスマホ専用の縦長スライドショー（uk-hidden@s）を全画面で出していた。
   打ち合わせで「スマホも横長の写真に」となり、ビルダー側で
     ・PC用のスライドショー（uk-visible@s）を「常に表示」に
     ・スマホ用のスライドショーを無効化（消さずに残す）
   に切り替える。写真は 2400×1350 の16:9で、右側に店名ロゴが入っているので、
   比率を変えて切り抜かずに16:9のまま全体を見せる。

   **写真はヘッダーの下から始める。** 16:9 だとスマホでは高さが約210pxしかなく、
   これまでどおりヘッダー（80px）を写真に重ねると、上の4割が隠れて顔にかかる。
   写真を80px下げ、ヘッダーはスクロール前から白地にする（文字色は YOOtheme が
   下の白地を見て自動で黒にする）。PCは今までどおり写真に重ねる。

   **ビルダーの切り替え前後のどちらでも崩れないように、状態で分けている。**
   「表示の指定が無いスライドショー」（uk-hidden@s も uk-visible@s も付いていない）が
   ヒーローにあるときだけ効く。切り替える前は何も変わらない。
   縦長に戻すときは、ビルダーで元の表示設定に戻すだけでよい。この指定は自動で効かなくなる。 */
@media (max-width: 639px) {
	.ng-sec-hero .ng-top-slider:not(.uk-hidden\@s):not(.uk-visible\@s) .uk-slideshow-items {
		min-height: 0 !important;
		aspect-ratio: 16 / 9;
	}

	/* uk-padding-remove-top が !important なので、こちらも !important */
	.ng-sec-hero.uk-height-viewport:has(.ng-top-slider:not(.uk-hidden\@s):not(.uk-visible\@s)) {
		min-height: 0 !important;
		padding-top: 80px !important;
	}

	body:has(.ng-sec-hero .ng-top-slider:not(.uk-hidden\@s):not(.uk-visible\@s)) .tm-header-mobile .uk-navbar-container.uk-navbar-transparent {
		background: #fff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* キャッチと説明文の余白もモバイルで詰める */
@media (max-width: 639px) {
	.ng-sec-hero .el-content {
		font-size: 12px;
		line-height: 2;
	}
}

/* --------------------------------------------------------------------------
   コンセプト  .uk-section.ng-sec-concept
   -------------------------------------------------------------------------- */
.uk-section.ng-sec-concept {
	padding-top: 96px;
	padding-bottom: 96px;
}

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

/* 見出しと本文の間隔 */
.ng-sec-concept .ng-title-sub {
	margin-bottom: 56px;
}

/* 本文（クラス未設定でも読みやすくなるよう、段落にも当てる） */
.ng-sec-concept .uk-panel > p,
.ng-sec-concept .uk-panel.uk-margin {
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2.4;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* 画像 */
.uk-section.ng-sec-concept img {
	width: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   これから作るセクション用の受け皿
   （クラスを付けた時点で効きはじめる）
   -------------------------------------------------------------------------- */

/* サロン一覧  .uk-section.ng-sec-salon */
.uk-section.ng-sec-salon,
.uk-section.ng-sec-staff,
.uk-section.ng-sec-product,
.uk-section.ng-sec-news,
.uk-section.ng-sec-access {
	padding-top: 96px;
	padding-bottom: 96px;
}

@media (min-width: 960px) {
	.uk-section.ng-sec-salon,
	.uk-section.ng-sec-staff,
	.uk-section.ng-sec-product,
	.uk-section.ng-sec-news,
	.uk-section.ng-sec-access {
		padding-top: 140px;
		padding-bottom: 140px;
	}
}

/* 見出し下の余白は全セクション共通 */
.ng-sec-salon .ng-title-sub,
.ng-sec-staff .ng-title-sub,
.ng-sec-product .ng-title-sub,
.ng-sec-news .ng-title-sub,
.ng-sec-access .ng-title-sub {
	margin-bottom: 48px;
}

/* リクルート誘導バンド  .uk-section.ng-sec-recruit-band */
.uk-section.ng-sec-recruit-band {
	padding-top: 88px;
	padding-bottom: 88px;
}

@media (min-width: 960px) {
	.uk-section.ng-sec-recruit-band {
		padding-top: 120px;
		padding-bottom: 120px;
	}
}

/* --------------------------------------------------------------------------
   サロン  .ng-sec-salon
   -------------------------------------------------------------------------- */

/* カード：ボタンを下端に揃える */
.ng-sec-salon .el-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

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

.ng-sec-salon .el-item > a:first-child {
	display: block;
	overflow: hidden;
}

.ng-sec-salon .el-item > a:first-child:hover .el-image {
	transform: scale(1.04);
}

/* 業態（ヘア & アイラッシュ など）
   10pxの小さな文字なので、--ng-green（白地 2.97）では読めない。
   色相はそのままに暗くした --ng-green-deep（白地 5.40）に変えた（2026-09-13）。 */
.ng-sec-salon .el-item .el-meta {
	margin-top: 18px;
	font-family: var(--ng-ja);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .2em;
	color: var(--ng-green-deep);
	text-transform: none;
}

/* 店名 */
.ng-sec-salon .el-item .el-title {
	margin-top: 6px;
	font-family: var(--ng-mix);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--ng-ink);
	text-transform: none;
}

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

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

/* 本文（ショートコードの出力）を下まで伸ばし、ボタンを底に寄せる */
.ng-sec-salon .el-item > .el-content {
	margin-top: 12px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.ng-sec-salon .ng-salon-info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.ng-sec-salon .ng-salon-info__actions {
	margin-top: auto;
	padding-top: 20px;
}

/* スライダーの左右余白 */
.ng-sec-salon .uk-slider-items {
	margin-left: -24px;
}

.ng-sec-salon .uk-slider-items > * {
	padding-left: 24px;
}

@media (max-width: 639px) {
	.ng-sec-salon .el-item .el-title { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   サロンカードのボタン（ご予約／この店舗を見る）

   2026-09-13、クライアント要望でボタンの横並びにした。
   それまでは、セクション下部の「店舗一覧を見る」ボタンと競合しないよう
   控えめなテキストリンクにしていた（下線だけ）。今回それをやめている。

   カードは3列なので幅が狭い。共通のピル型（min-height 56px／padding 0 32px）
   のままでは2つ入らないので、**このセクションだけ小さくする**。
   文字は折り返さず、幅が足りないぶんは左右の余白を削って吸収する。
   -------------------------------------------------------------------------- */
.ng-sec-salon .ng-salon-info__actions {
	gap: 8px;
	padding-top: 18px;
	flex-wrap: nowrap;
	/* 960px 未満は1列になりカードが765pxまで広がる。
	   そのままだと1つ378pxの間延びしたボタンになるので、頭を押さえる。
	   3列のとき（カード282px）には効かない値 */
	max-width: 420px;
}

/* 2つを等幅にする。`flex: 1 1 auto` だと「ご予約」が3文字ぶんに縮み、
   「この店舗を見る」が残り全部を取って、主従が逆に見える
   （実測 72px 対 294px）。基準を 0 にそろえて半分ずつ持たせる */
.ng-sec-salon .ng-salon-info__actions .ng-btn,
.ng-sec-salon .ng-salon-info__actions .ng-btn-solid {
	flex: 1 1 0;
	min-width: 0;
	min-height: 42px;
	padding: 0 10px;
	gap: 5px;
	font-size: 11px;
	letter-spacing: .06em;
}

/* 外部サイト（ホットペッパー）へ移動することを示す。
   「この店舗を見る」はサイト内なので付けない */
.ng-sec-salon .ng-salon-info__actions a[target="_blank"]::after {
	content: "↗";
	font-size: 9px;
	opacity: .55;
}

/* 960px 未満では店舗が1列（カード幅いっぱい）になるので、横並びのままでよい。
   積む指定を入れると、幅765pxのボタンが2段になって間延びした（2026-09-13）。 */

/* --------------------------------------------------------------------------
   プロダクト  .ng-sec-product

   Canva案に合わせて、商品カードの並びから**ブランドを見せるコラージュ**に
   作り替えた（2026-09-13）。商品名も価格も出さず、Aujua と Beyou の
   2ブランドを見せて、詳細は店で聞いてもらう構成。

   ビルダー側で当てるクラス：
     リード（月に一度のサロンケアより…）  ng-product-lead
     ブランド名の行（ミルボン『Aujua』…） ng-product-brands
     本文（髪と頭皮の状態を…）            ng-body（既存）
   -------------------------------------------------------------------------- */

/* コラージュの中で文字が主役になる唯一の場所なので、共通の .ng-lead（15px）
   より大きくする。ただし**3列の1列＝約370pxに収まる大きさにとどめる。**
   42pxでは「毎日のホームケア」が「毎日のホ／ームケア」と割れていた。 */
.ng-sec-product .ng-product-lead {
	margin: 0 0 26px;
	font-family: var(--ng-mix);
	font-size: 24px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
	text-transform: none;
	/*
	 * **文節の途中で折り返させない。** 原稿は
	 * 「月に一度のサロンケアより 毎日のホームケア」と、意味の切れ目に
	 * 半角スペースが入っている。既定では和文はどこでも折れるため、
	 * 373pxの列では「…より 毎日／のホームケア」と割れていた。
	 *
	 * keep-all は和文の連なりを1語として扱い、スペースでだけ折る。
	 * overflow-wrap は保険で、1文節が列幅より長いときだけ中で折る
	 * （文字がはみ出すよりまし）。
	 */
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* ブランド名の行。リードより小さく、本文より大きい。
   『Aujua』『Beyou』が二重かぎ括弧で入るので、字間は詰めておく */
.ng-sec-product .ng-product-brands {
	margin: 22px 0 0;
	font-family: var(--ng-ja);
	font-size: 15px;
	font-weight: 400;
	line-height: 2.1;
	letter-spacing: .02em;
	color: var(--ng-ink);
	text-transform: none;
}

.ng-sec-product .ng-product-brands + .uk-panel,
.ng-sec-product .ng-product-brands + .ng-body {
	margin-top: 14px;
}

@media (max-width: 959px) {
	.ng-sec-product .ng-product-lead {
		font-size: 20px;
		margin-bottom: 20px;
	}

	.ng-sec-product .ng-product-brands {
		font-size: 14px;
	}
}

/* ユーカリの葉（Beyouのオイル）と Aujua のボトルの壁の縦横比をそろえる
   （2026-09-19、指示。PC・モバイルとも）。

   元の比率が違っていて、並べると下端がずれていた。

     ユーカリ  2560×2048（1.25）
     Aujua     1600×1200（1.33）

   **4:3 に寄せる。** 壁のほうは元の比率そのままで切り抜きが起きない。
   ユーカリは上下を6%ほど落とすが、ボトルが中央にあるので影響しない。
   -------------------------------------------------------------------------- */
.ng-sec-product .ng-product-row > :nth-child(1) > .uk-margin:last-child img,
.ng-sec-product .ng-product-row > :nth-child(2) > :first-child img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Product のモバイル（2026-09-19）

   3列が縦に積まれ、写真が画面幅いっぱいで4枚続く。
   **ユーカリの葉（Beyouのオイル）と Aujua のボトルの壁を横並びにする**（指示）。

   リクルート帯と同じやり方。列に `display: contents` を当てて枠を消すと、
   中身が行の直接の子になり、幅を個別に決められる。
   この2枚は**もともと隣り合っている**（1列目の最後と2列目の最初）ので、
   幅を半分ずつにすれば同じ行に並ぶ。並べ替えは要らない。

   2026-09-19に `ng-product-row` のクラスを付けてもらったので、
   構造頼みのセレクタ（`:not(.uk-child-width-1-1)` で見出しの行と
   区別していた）から、クラス指定に寄せ替えた。
   -------------------------------------------------------------------------- */
@media (max-width: 959px) {
	.ng-sec-product .ng-product-row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: 8px;
		margin-left: 0;
	}

	.ng-sec-product .ng-product-row > * {
		display: contents;
	}

	.ng-sec-product .ng-product-row > * > * {
		width: 100%;
		padding-left: 0;
	}

	/* ユーカリの葉（1列目の最後）と Aujua の壁（2列目の最初）。
	   上の余白をそろえる。列が違うため既定では20pxずれる。
	   UIkit の `uk-margin` は `!important` 付き。 */
	.ng-sec-product .ng-product-row > :nth-child(1) > .uk-margin:last-child,
	.ng-sec-product .ng-product-row > :nth-child(2) > :first-child {
		width: calc((100% - 8px) / 2);
		margin-top: 20px !important;
	}
}

/* --------------------------------------------------------------------------
   セクションの背景（白とグレージュを交互に敷く）
   ローカル版と同じリズム。ビルダー側で背景を指定していない前提。
   -------------------------------------------------------------------------- */
.uk-section.ng-sec-concept { background-color: var(--ng-paper); }
.uk-section.ng-sec-salon   { background-color: var(--ng-offwhite); }
.uk-section.ng-sec-staff   { background-color: var(--ng-paper); }
.uk-section.ng-sec-product { background-color: var(--ng-offwhite); }
.uk-section.ng-sec-news    { background-color: var(--ng-paper); }
.uk-section.ng-sec-access  { background-color: var(--ng-offwhite); }

/* --------------------------------------------------------------------------
   スタッフ  .ng-sec-staff
   -------------------------------------------------------------------------- */

/* 見出し下のリード文 */
.ng-sec-staff .ng-title-sub + .uk-panel {
	margin-top: 18px;
	max-width: 32em;
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 2.2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

.ng-sec-staff .el-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

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

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

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

/* 役職 */
.ng-sec-staff .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-sec-staff .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-sec-staff .el-item .el-title a {
	color: inherit;
	text-decoration: none;
	transition: color .35s var(--ng-ease);
}

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

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

/* カード間の余白 */
.ng-sec-staff .uk-slider-items {
	margin-left: -24px;
}

.ng-sec-staff .uk-slider-items > * {
	padding-left: 24px;
}

/* --------------------------------------------------------------------------
   プロダクト  .ng-sec-product

   カード構成
     画像 → ブランド名（メタ）→ 商品名（タイトル）
          → 種類・内容量・金額・説明文（コンテンツ）
   最大3点を横並びで見せる。点数が減っても崩れないよう左詰めにしている。
   -------------------------------------------------------------------------- */

/* カード：高さをそろえる */
.ng-sec-product .el-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

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

.ng-sec-product .el-item > a:first-child,
.ng-sec-product .el-item > picture:first-child,
.ng-sec-product .el-item > .uk-inline:first-child {
	display: block;
	overflow: hidden;
}

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

/* ブランド名 */
.ng-sec-product .el-item .el-meta {
	margin-top: 16px;
	font-family: var(--ng-mix);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .2em;
	color: var(--ng-green);
	text-transform: none;
}

/* 商品名 */
.ng-sec-product .el-item .el-title {
	margin-top: 6px;
	margin-bottom: 0;
	font-family: var(--ng-mix);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--ng-ink);
	text-transform: none;
}

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

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

/* コンテンツ
   本文（Content）＝ [ng_product] の出力を入れた場合と、
   ACFの「説明文」を直接つないだ場合の、どちらでも同じ見た目になるようにする。 */
.ng-sec-product .el-item > .el-content {
	margin-top: 10px;
	font-family: var(--ng-ja);
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* 説明文フィールドを直接つないだ場合：改行を活かし、4行で丸める */
.ng-sec-product .el-item > .el-content:not(:has(.ng-product-info)) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	white-space: pre-line;
}

/* カード間の余白 */
.ng-sec-product .uk-slider-items {
	margin-left: -32px;
}

.ng-sec-product .uk-slider-items > * {
	padding-left: 32px;
}

/* --------------------------------------------------------------------------
   [ng_product] の出力（トップ・一覧・個別ページ共通）
   -------------------------------------------------------------------------- */

/* 商品種類：小さな囲みラベル */
.ng-product-info__type {
	display: inline-block;
	margin: 0;
	padding: 4px 12px;
	font-family: var(--ng-ja);
	font-size: 10px;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .1em;
	color: var(--ng-ink-45);
	border: 1px solid var(--ng-ink-12);
	border-radius: 999px;
}

/* 内容量と金額 */
.ng-product-info__spec {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 10px 0 0;
	font-family: var(--ng-en);
	line-height: 1.6;
}

.ng-product-info__volume {
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--ng-ink-45);
}

.ng-product-info__price {
	font-size: 15px;
	letter-spacing: .06em;
	color: var(--ng-ink);
}

/* 説明文：カードの高さがそろうよう4行で丸める（全文は個別ページで） */
.ng-product-info__desc {
	margin: 12px 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-sec-product .ng-product-info__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

/* 個別ページでは説明文を少し大きく、全文表示する */
.single-product .ng-product-info__desc {
	font-size: 14px;
	line-height: 2.2;
}

/* --------------------------------------------------------------------------
   お知らせの一覧  .ng-newslist

   トップページのNews欄と、お知らせ一覧ページの両方で使う。
   1行 ＝ 日付（el-title）＋ 見出し（el-content）の2カラム。
   モバイルでは日付が上、見出しが下に積む。

   セクション側の余白は別のクラスが持つ。
     トップページ    … ng-sec-news
     お知らせ一覧    … ng-sec
   こうしておくと、片方の見た目を変えても、もう片方は影響を受けない。

   ※ .el-content は「一覧を見る」ボタンにも付いているため、
     行の中身は必ず .el-item を挟んで指定する。
   -------------------------------------------------------------------------- */

/* 1行ずつ罫線で区切る。最後の行だけ下にも引いて、リストを閉じる */
.ng-newslist .uk-list.uk-list-divider > li {
	margin-top: 0;
	padding: 18px 0;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-newslist .uk-list.uk-list-divider > li:last-child {
	border-bottom: 1px solid var(--ng-ink-12);
}

/* 日付 */
.ng-newslist .el-item .el-title {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
	text-transform: none;
}

/* 見出し */
.ng-newslist .el-item .el-content {
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

/* 見出しがリンクになっている場合 */
.ng-newslist .el-item .el-content a,
.ng-newslist .el-item .el-title a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--ng-ease);
}

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

/* 日付の列幅をそろえる（デスクトップのみ。モバイルは上下に積む） */
@media (min-width: 960px) {
	.ng-newslist .el-item .uk-width-auto\@m {
		width: 140px;
	}
}

/* モバイルは日付と見出しの間を詰める */
@media (max-width: 959px) {
	.ng-newslist .el-item .uk-grid-small > * {
		padding-left: 0;
	}

	.ng-newslist .el-item .uk-grid-small > * + * {
		margin-top: 2px;
	}
}

/* 一覧ボタンの上の余白 */
.ng-sec-news .ng-btn {
	margin-top: 48px;
}

/* --------------------------------------------------------------------------
   アクセス  .ng-sec-access

   中身は [ng_access] が出力する。見た目の指定は 30-common.css 側。
   ここではセクション内での余白だけを持たせる。
   -------------------------------------------------------------------------- */
.ng-sec-access .ng-access {
	margin-top: 0;
}

/* 「アクセス・道案内を見る」ボタン */
.ng-sec-access .ng-btn {
	margin-top: 48px;
}

/* --------------------------------------------------------------------------
   リクルート誘導バンド  .ng-sec-recruit-band

   写真の上に文字を重ねる。求人が主目的のサイトなので、
   スクロールの終盤で一度しっかり足を止めてもらう場所。

   ビルダー側の構成
     セクション（背景写真）に  ng-invert ng-sec-recruit-band
     「2027年度 新卒採用」に   ng-label
     キャッチコピーに          ng-pull
     補足の一文に              ng-body
     ボタン1つめに             ng-btn-solid
     ボタン2つめに             ng-btn
   -------------------------------------------------------------------------- */

.uk-section.ng-sec-recruit-band,
.ng-sec-recruit-band .uk-section {
	position: relative;
	padding-top: 96px;
	padding-bottom: 96px;
}

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

/* 写真の上に敷く暗幕。文字が乗る左側を濃くして、右は写真を見せる */
.ng-sec-recruit-band .uk-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(100deg,
		rgba(20, 17, 15, .86) 0%,
		rgba(20, 17, 15, .74) 34%,
		rgba(20, 17, 15, .46) 68%,
		rgba(20, 17, 15, .34) 100%);
}

/* モバイルは文字が全幅に広がるので、全体を均一に暗くする */
@media (max-width: 767px) {
	.ng-sec-recruit-band .uk-section::before {
		background: linear-gradient(180deg,
			rgba(20, 17, 15, .74) 0%,
			rgba(20, 17, 15, .82) 100%);
	}
}

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

/* 見出しまわりの余白 */
.ng-sec-recruit-band .ng-title-sub {
	margin-bottom: 32px;
}

.ng-sec-recruit-band .ng-label {
	margin-bottom: 22px;
}

/* キャッチコピー。長い行を作らず、2〜3行で読ませる */
.ng-sec-recruit-band .ng-pull {
	max-width: 17em;
	margin-top: 0;
}

.ng-sec-recruit-band .ng-body {
	max-width: 32em;
	margin-top: 16px;
}

/* --------------------------------------------------------------------------
   リクルート帯の「派手」版  .ng-recruit-lime

   クライアント要望「特にこだわりはないです！派手にしたいです！」と
   Canva案（黄緑の面）に合わせた（2026-09-13）。

   **暗幕＋写真をやめて、鮮やかな黄緑の面に濃い文字を置く。**
   サイト全体が白・オフホワイト・墨の落ち着いた調子なので、
   ここだけ色を振り切ることで「別の声で話す場所」になる。

   ビルダー側：セクションから ng-invert と uk-light を外し、
   ng-recruit-lime を足す。背景写真は外してよい（黄緑で覆われる）。

   **この面には濃い文字しか置けない。** 白は 1.18 で読めない。
   -------------------------------------------------------------------------- */
/*
 * 外側の枠には `uk-section` が付いていない（付いているのは内側）。
 * `.uk-section.ng-…` と書くと当たらない。
 */
.ng-sec-recruit-band.ng-recruit-lime {
	background-color: var(--ng-green-band);
}

/* 背景写真の上に緑を95%でかぶせる（2026-09-19）。
   写真の気配だけ残す濃さ。

   **新しい緑 #66bd93 は輝度が半分以下（旧 #c1ff72 の 0.841 → 0.413）で、
   透かすほど文字が苦しくなる。** 写真の全画素を最悪ケースにした実測：

     膜 70%  墨 4.45 ／ 墨70% 3.09
     膜 85%  墨 6.17 ／ 墨70% 3.85
     膜 95%  墨 7.54 ／ 墨70% 4.36  ← いまここ
     膜100%  墨 8.30 ／ 墨70% 4.59

   **95%では墨70%の文字が 4.36 で基準4.5にわずかに届かない。**
   対象は和文の副見出し（リクルート）と補足の一文の2つ。
   **墨75%にすれば 4.87 で満たす**ので、濃さを変えたくないときはそちらで。

   色に透明度だけ足す書き方が古いブラウザで使えないため、ここだけ数値で書く。
   `--ng-green-band` と同じ #66bd93。 */
.ng-recruit-lime .uk-section::before {
	background: rgba(102, 189, 147, .95);
}

/*
 * クラスを2つ重ねて強くしている。**暗幕版の指定がこの下にある**ためで、
 * `.ng-recruit-lime .ng-body` だけでは
 * `.ng-sec-recruit-band .ng-body`（白88%）に後出しで負ける。
 * 実際に補足の一文が白いままになり、黄緑の上で 1.18 になっていた。
 */
.ng-sec-recruit-band.ng-recruit-lime .ng-title-h2,
.ng-sec-recruit-band.ng-recruit-lime .ng-pull,
.ng-sec-recruit-band.ng-recruit-lime .ng-label {
	color: var(--ng-ink);
}

/*
 * ここだけ墨75%（共通の `--ng-ink-70` ではない）。
 *
 * **膜95%で写真が透けるぶん、70%では 4.36 で基準4.5を割る。**
 * 75%にすると 4.87 で満たす。見た目の差はほとんど分からない。
 *
 * トークンにしていないのは、この2か所と膜95%が対になった値で、
 * 他所で使うと意味を取り違えるため。**膜の濃さを変えたら測り直す。**
 */
.ng-sec-recruit-band.ng-recruit-lime .ng-title-sub,
.ng-sec-recruit-band.ng-recruit-lime .ng-body {
	color: rgba(20, 17, 15, .75);
}

/* 1つめのボタン（求人詳細）。黄緑の面に墨のボタンで、いちばん目を引く */
.ng-recruit-lime a.ng-btn-solid,
.ng-recruit-lime .ng-btn-solid > a,
.ng-recruit-lime .ng-btn-solid > .uk-button {
	background: var(--ng-ink);
	border-color: var(--ng-ink);
	color: #fff;
}

/*
 * ホバーで共通の緑（#4ca85c）に変わると、白い文字が 2.97 になって読めない。
 * 黄緑の面の上では白いボタンに変える。面との境目もはっきりする。
 */
.ng-recruit-lime a.ng-btn-solid:hover,
.ng-recruit-lime .ng-btn-solid > a:hover,
.ng-recruit-lime .ng-btn-solid > .uk-button:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ng-ink);
}

/* 2つめのボタン（サロン見学）。線だけにして主従を付ける */
.ng-recruit-lime a.ng-btn,
.ng-recruit-lime .ng-btn > a,
.ng-recruit-lime .ng-btn > .uk-button {
	background: transparent;
	border-color: var(--ng-ink);
	color: var(--ng-ink);
}

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

/* --------------------------------------------------------------------------
   帯の中の写真3枚（2026-09-19、Canva案の構図）

   Canva（1366px幅）の実測。内容の幅は1248pxで、コンテナ1240pxとほぼ同じ。

     左   x  59  幅 358  上から 150  下端 690  高さ 540  比率 2:3
     中央 x 436  幅 540  上から 325  下端 696  高さ 371  比率 1.46（横長）
     右   x 1002 幅 306  上から 137  下端 527  高さ 390  比率 4:5

   中央の列の文字（帯の上からの位置と高さ）
     Recruit       85 / 26
     新卒・中途採用 156 / 39
     スタッフの幸せ 215 / 20
     ボタン         254 / 52
     写真           325 / 371

   **左と中央は下端がほぼ揃い、右だけ163px高い位置で終わる。**
   ビルダー側で左・中央に uk-flex-bottom が付いているのはそのため。
   右は下に余白を持たせて浮かせる。

   文字は中央の列に入り、センター揃え。
   -------------------------------------------------------------------------- */

/* 余白を詰める（2026-09-19）。

   Canvaの帯は768px。整形前は**1226px**あった。内訳は
   上下の余白140px×2と、3つの行のあいだの40px×3。

     上下の余白  140 → 72
     行の間      40 → 24

   クライアントが「余白部分が気になります」と書いているのはここ。 */
.ng-recruit-lime .uk-section {
	padding-top: 40px;
	padding-bottom: 40px;
}

@media (min-width: 960px) {
	.ng-recruit-lime .uk-section {
		padding-top: 72px;
		padding-bottom: 72px;
	}
}

.ng-recruit-lime .uk-container > .uk-grid-margin {
	margin-top: 24px;
}

/* 見出しのかたまりの中も詰める。
   Recruit → リクルート → 新卒・中途採用募集中 が離れすぎていた */
.ng-recruit-lime .ng-title-sub {
	margin-bottom: 14px;
}

.ng-recruit-lime .ng-label {
	margin-bottom: 0;
}

/* 列幅。ビルダー既定の 1-4 / 1-2 / 1-4（25/50/25）では中央が広すぎる。
   Canvaの 358 / 540 / 306 に合わせる（列間の余白ぶんを足した割合） */
@media (min-width: 960px) {
	.ng-recruit-lime .ng-recruit-row > :nth-child(1) { width: 29.5%; }
	.ng-recruit-lime .ng-recruit-row > :nth-child(2) { width: 44.5%; }
	.ng-recruit-lime .ng-recruit-row > :nth-child(3) { width: 26%; }
}

/* 写真。**3枚とも比率が違う。** 中央だけ横長 */
.ng-recruit-lime .ng-recruit-row img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.ng-recruit-lime .ng-recruit-row > :nth-child(1) img { aspect-ratio: 2 / 3; }
/* 中央は 540×371。ボタンと写真が続いているため、粗く測ると
   写真の高さを442と読み違える。細かく見ると 371（比率1.46）。 */
.ng-recruit-lime .ng-recruit-row > :nth-child(2) img { aspect-ratio: 540 / 371; }
.ng-recruit-lime .ng-recruit-row > :nth-child(3) img { aspect-ratio: 4 / 5; }

/* 3枚の上端の位置。Canvaは 左150 / 中央254 / 右137（帯の上から）。
   見出しのかたまりが始まる位置（約40）を起点にすると、
   行の上端からは 左110 / 中央285 / 右97 になる。

   **ビルダーの `uk-flex-bottom`（下端そろえ）を上端そろえに変える。**
   下端でそろえると、写真の高さが違うぶん上端がばらけて、
   Canvaの位置に合わせられない。 */
@media (min-width: 960px) {
	.ng-recruit-lime .ng-recruit-row > * {
		align-items: flex-start;
	}

	.ng-recruit-lime .ng-recruit-row > :nth-child(1) > * {
		margin-top: 110px;
	}

	.ng-recruit-lime .ng-recruit-row > :nth-child(3) > :first-child {
		margin-top: 97px;
	}
}

/* 中央の文字のかたまりを詰める。**ここが帯の高さを決めている。**

   キャッチ「スタッフの幸せが、お客様の幸せ。」は32pxだと
   528pxの列に収まらず2行（122px）になっていた。28pxで1行に収まる。
   1行にすると61px縮む。

   `max-width` を外しているのは、共通の指定（17em）で折り返していたため。 */
.ng-recruit-lime .ng-recruit-row .ng-pull {
	max-width: none;
	margin-top: 16px;
	font-size: 28px;
	line-height: 1.6;
	white-space: nowrap;
}

.ng-recruit-lime .ng-recruit-row .ng-body {
	max-width: none;
	margin-top: 8px;
}

.ng-recruit-lime .ng-recruit-row .ng-title-h2 {
	line-height: 1;
}

.ng-recruit-lime .ng-recruit-row .ng-title-sub {
	margin-top: 8px;
	margin-bottom: 10px;
}

/* ボタン。中央の列に入っているが、既定では左寄せなので中央に寄せる。
   `.ng-recruit-row` 自身も `.uk-grid` なので、**子孫だけを狙う**
   （この書き方なら行そのものには当たらない）。 */
.ng-recruit-lime .ng-recruit-row .uk-grid {
	margin-top: 22px;
	justify-content: center;
}

/* 写真の上 */
.ng-recruit-lime .ng-recruit-row > :nth-child(2) .uk-margin:last-child {
	margin-top: 26px;
}

/* 狭い画面では1行に収まらないので折り返しを許す */
@media (max-width: 1199px) {
	.ng-recruit-lime .ng-recruit-row .ng-pull {
		font-size: 24px;
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
   右の写真に業態のテキストを重ねる（2026-09-19、指示）

     hair/care/headspa
     hair&make/kitsuke
     eyelash/lash extensions
     eyebrow/face wax/esthetic

   写真の下に置いていたものを、写真の上に載せる。

   **上2行が写真の上、下2行が写真の下（緑の面）**に来る位置に置く。

   **可読性は基準を満たしていない。** 重なる範囲は明暗差が大きく
   （輝度 0.014〜0.905）、黒い文字は写真の暗い部分で読めなくなる。
   幕を敷けば解決するが、**幕も白文字も外すという判断**（2026-09-19、指示）。
   飾りとして扱い、同じ内容は他の場所（会社概要・リクルートページ）に
   文字として載っている。

   いったん敷いた幕の実測は残しておく：幕40% 3.10 ／ 50% 4.29 ／ 60% 6.14。
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
	/* 写真とテキストを同じマス目に置いて重ねる。
	   DOMの並びは変えられないので、grid で重ねる */
	.ng-recruit-lime .ng-recruit-row > :nth-child(3) {
		display: grid;
		grid-template-columns: 1fr;
		/*
		 * **列自身が行の高さまで伸びないようにする。**
		 * 伸びるとマス目も行の高さになり、`align-self: end` の文字が
		 * 写真の下端ではなく列の最下部（写真より100px下）に落ちる。
		 */
		align-self: start;
	}

	.ng-recruit-lime .ng-recruit-row > :nth-child(3) > * {
		grid-area: 1 / 1;
	}

	/* 写真の枠が下に20pxの余白を持っていて、マス目がそのぶん高くなる。
	   下端そろえの文字が写真の下に20pxはみ出すので消す。
	   UIkit の `uk-margin` は `!important` 付き。 */
	.ng-recruit-lime .ng-recruit-row > :nth-child(3) > .uk-margin {
		margin-bottom: 0 !important;
	}

	/*
	 * **下2行が写真からはみ出す位置に下げる。**
	 * 1行22pxなので、2行ぶん＝44px。
	 *
	 * `transform` を使っているのは、負のマージンが効かないため。
	 * この要素は `uk-panel uk-margin` を持っていて、すぐ上の
	 * `> .uk-margin { margin-bottom: 0 !important }` が自分にも当たる。
	 * UIkit の余白ユーティリティは `!important` 付きで、
	 * それを打ち消す指定もろとも競合する。
	 * `transform` なら余白の取り合いに巻き込まれず、列の高さも変えない。
	 */
	.ng-recruit-lime .ng-recruit-row > :nth-child(3) > .uk-panel {
		align-self: end;
		padding: 0 20px;
		transform: translateY(44px);
		z-index: 2;
		color: var(--ng-ink);
	}
}

/* 文字。テーマ既定の16px・PT Serif のままだったので整える */
.ng-recruit-lime .ng-recruit-row > :nth-child(3) > .uk-panel {
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	line-height: 2;
	letter-spacing: .1em;
}

/* 960px未満は重ねない（縦積みになり、文字を乗せる必然性がない）。
   緑の面の上に置くので墨75%。白は 2.27 で読めない */
@media (max-width: 959px) {
	.ng-recruit-lime .ng-recruit-row > :nth-child(3) > .uk-panel {
		color: rgba(20, 17, 15, .75);
	}

	/* ------------------------------------------------------------------
	   モバイルの並び替え（2026-09-19）

	   欲しい順番
	     1. 見出し 〜 補足（…最短1年半でデビュー）
	     2. 写真3点
	     3. ボタン
	     4. 業態のテキスト

	   **ビルダーにモバイル専用の要素を足す必要はない。**
	   3つの列に `display: contents` を当てて枠だけ消すと、
	   中身が行の直接の子になり、`order` で1つずつ並べ替えられる。
	   要素を二重に持つと、原稿の直しが2か所になり、
	   読み上げにも両方が現れる。

	   列の中にもう1枚パネルが挟まっている（col1・col2）ので、
	   そちらにも `display: contents` が要る。
	   ------------------------------------------------------------------ */
	.ng-recruit-lime .ng-recruit-row,
	.ng-recruit-lime .ng-recruit-row > *,
	.ng-recruit-lime .ng-recruit-row > * > .uk-panel.uk-width-1-1 {
		display: contents;
	}

	/* 折り返しありの横並びにする。文字は全幅で1行ずつ、
	   写真3点だけ3分の1幅にして同じ行に並べる。
	   `flex-direction: column` では3枚を1行に置けない。 */
	.ng-recruit-lime .ng-recruit-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		column-gap: 4px;
		margin-left: 0;
	}

	/* `.ng-label` を外しているのは、全幅にすると
	   「新卒・中途採用募集中」の囲みが横に伸びてしまうため。
	   セレクタが強いので `:not()` で除くほうが確実 */
	.ng-recruit-lime .ng-recruit-row > * > .uk-panel.uk-width-1-1 > *:not(.ng-label),
	.ng-recruit-lime .ng-recruit-row > * > .uk-margin,
	.ng-recruit-lime .ng-recruit-row > * > .uk-panel {
		width: 100%;
		padding-left: 0;
	}

	/* 1. 見出しから補足まで */
	.ng-recruit-lime .ng-recruit-row .ng-title-h2  { order: 1; }
	.ng-recruit-lime .ng-recruit-row .ng-title-sub { order: 2; }
	.ng-recruit-lime .ng-recruit-row .ng-label     { order: 3; }
	.ng-recruit-lime .ng-recruit-row .ng-pull      { order: 4; }
	.ng-recruit-lime .ng-recruit-row .ng-body      { order: 5; }

	/* 2. 写真3点 */
	.ng-recruit-lime .ng-recruit-row > :nth-child(1) .uk-margin { order: 6; }
	.ng-recruit-lime .ng-recruit-row > :nth-child(2) .uk-margin:has(picture) { order: 7; }
	.ng-recruit-lime .ng-recruit-row > :nth-child(3) .uk-margin:has(picture) { order: 8; }

	/* 3. ボタン */
	.ng-recruit-lime .ng-recruit-row .uk-margin:has(> .uk-grid) { order: 9; }

	/* 4. 業態のテキスト */
	.ng-recruit-lime .ng-recruit-row > :nth-child(3) > .uk-panel { order: 10; }

	/*
	 * 写真3点を横並びに（2026-09-19、指示）。
	 *
	 * **切り抜かない。** 以前は `max-height` で頭を押さえていたが、
	 * `object-fit: cover` で上下が切れて人物が見切れていた。
	 * 幅で決めれば比率はそのまま。
	 *
	 * 高さは3枚とも違う（2:3 / 1.46 / 4:5）ので**下端でそろえる**。
	 * 上でそろえると下がばらけて落ち着かない。
	 */
	/* **上の `width: 100%` と同じ深さで書く。** 浅いセレクタだと、
	   内側のパネルに入っている左と中央の写真だけ全幅のまま残る。 */
	.ng-recruit-lime .ng-recruit-row > * > .uk-panel.uk-width-1-1 > .uk-margin:has(picture),
	.ng-recruit-lime .ng-recruit-row > * > .uk-margin:has(picture) {
		max-width: none;
		margin-top: 16px !important;
		margin-bottom: 0 !important;
	}

	/* 3等分ではなく、**中央を大きく左右を小さく**（2026-09-19、指示）。
	   28 : 44 : 28 で合計100%（列間の隙間ぶんを引いてから割る）。

	   **`width: 100%` と同じ深さで書くこと。** 左と中央の写真は
	   列の中のパネルにもう1段入っているので、浅く書くと全幅に負ける。
	   （3等分にしたときも同じ罠を踏んだ） */
	.ng-recruit-lime .ng-recruit-row > :nth-child(1) > .uk-panel.uk-width-1-1 > .uk-margin:has(picture),
	.ng-recruit-lime .ng-recruit-row > :nth-child(3) > .uk-margin:has(picture) {
		width: calc((100% - 8px) * .28);
	}

	.ng-recruit-lime .ng-recruit-row > :nth-child(2) > .uk-panel.uk-width-1-1 > .uk-margin:has(picture) {
		width: calc((100% - 8px) * .44);
	}

	.ng-recruit-lime .ng-recruit-row .uk-margin:has(> .uk-grid) {
		margin-top: 28px !important;
	}

	.ng-recruit-lime .ng-recruit-row > :nth-child(3) > .uk-panel {
		margin-top: 24px !important;
		text-align: center;
		transform: none;
	}
}

/* 緑の膜。写真の四角が帯から浮かないようにする。
   `picture` は既定が inline で高さを持たないので block にする */
.ng-recruit-lime .ng-recruit-row picture {
	display: block;
	position: relative;
}

.ng-recruit-lime .ng-recruit-row picture::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(102, 189, 147, .1);
}

/* 中央の列の文字はセンター揃え。Canvaに合わせる */
.ng-recruit-lime .ng-recruit-row .ng-pull,
.ng-recruit-lime .ng-recruit-row .ng-body {
	max-width: none;
	text-align: center;
}

/* 見出しもセンター揃え */
.ng-recruit-lime .ng-title-h2,
.ng-recruit-lime .ng-title-sub,
.ng-recruit-lime .ng-label {
	text-align: center;
}

.ng-recruit-lime .ng-label {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}

/* 中身が空のテキスト要素（改行だけ残っている）を出さない。
   ビルダーから消すまでの暫定 */
.ng-recruit-lime .ng-recruit-row .uk-panel:not(.ng-pull):not(.ng-body):empty,
.ng-recruit-lime .ng-recruit-row .uk-panel.ng-recruit-empty {
	display: none;
}

/* ボタンの並び */
.ng-sec-recruit-band .uk-grid {
	margin-top: 40px;
}

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

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

/* 写真の上なので、補足の一文は通常の反転より少し明るくする */
.ng-sec-recruit-band .ng-body {
	color: rgba(255, 255, 255, .88);
}

/* モバイルでは背景写真が拡大されすぎるため、幅に合わせて収める。
   ビルダーが background-size をインラインで書き込むので !important が要る。 */
@media (max-width: 767px) {
	.ng-sec-recruit-band .uk-section {
		background-size: cover !important;
	}
}

/* --------------------------------------------------------------------------
   スタッフのカードにリンクを設定した場合

   カード全体が <a> に包まれる形に変わり、写真だけを囲む指定が効かなくなる。
   また YOOtheme が余白のクラスを uk-margin-top から uk-margin-small-top に
   差し替えるため、文字の間隔も詰まる。ここで元の見た目に戻す。
   -------------------------------------------------------------------------- */

/* 包んでいるリンクは、見た目の上では存在しないものとして扱う */
.ng-sec-staff .el-item > a {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* 写真のはみ出しを切る位置を、リンクの中の picture に移す */
.ng-sec-staff .el-item > a > picture,
.ng-sec-staff .el-item > a > .uk-inline {
	display: block;
	overflow: hidden;
}

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

/* 余白をリンクなしのときと同じにそろえる。
   UIkit の余白クラス（uk-margin-top など）は !important 付きなので、
   こちらも同じ強さで指定する。 */
.ng-sec-staff .el-item .el-meta {
	margin-top: 12px !important;
}

.ng-sec-staff .el-item .el-title {
	margin-top: 2px !important;
}

.ng-sec-staff .el-item .el-content {
	margin-top: 2px !important;
}

/* リンクにしても氏名の色は変えない。ホバーのときだけ変える */
.ng-sec-staff .el-item > a .el-title {
	color: var(--ng-ink);
	transition: color .35s var(--ng-ease);
}

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

/* --------------------------------------------------------------------------
   スタッフ一覧（/staff/）の行間

   1人1行なので、罫線だけだと詰まって見える。行の内側に余白を取る。
   リンクの有無で見え方が変わらないよう、余白は el-item に持たせる。
   -------------------------------------------------------------------------- */
.ng-stafflist .el-item {
	padding-top: 44px;
	padding-bottom: 44px;
	border-top: 1px solid var(--ng-ink-12);
}

@media (min-width: 960px) {
	.ng-stafflist .el-item {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

.ng-stafflist .uk-grid > *:last-child .el-item {
	border-bottom: 1px solid var(--ng-ink-12);
}

/* 行の中にリンクがある場合は、余白と罫線を二重に持たせない */
.ng-stafflist .el-item > a {
	display: block;
	padding: 0;
	border: 0;
}

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

   ヒーローの下（Concept）から順に、白 → オフホワイト → 白 …と交互に敷く。
   リクルートページと同じ考え方（50-page.css の同名の節を参照）。

   セクションごとに ng-bg-offwhite を手で付けるやり方だと、
   セクションを1つ足したり消したりするたびに、そこから下が全部ずれる。
   実際、アクセス欄を非表示にした時点で Shop List と Product が
   続けてオフホワイトになっていた（2026-09-05）。

   数え方
     #tm-main の子は、1番目がヒーロー、2番目以降が各セクション。
     ヒーローは写真なので対象外（.ng-sec-hero を除く）。
     2番目（Concept）から始まるので、偶数＝白、奇数＝オフホワイト。

   トップページのセクションは .ng-sec-concept のように用途ごとの名前が付く。
   下層ページの .ng-sec とは別の名前なので、部分一致で拾っている。
   セクションを足すときは ng-sec-◯◯ の形で名前を付けること。

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

.page-id-2 #tm-main > [class*="ng-sec"]:not(.ng-sec-hero):nth-child(even) {
	background-color: var(--ng-paper);
}

.page-id-2 #tm-main > [class*="ng-sec"]:not(.ng-sec-hero):nth-child(odd) {
	background-color: var(--ng-offwhite);
}

/* --------------------------------------------------------------------------
   Shop List と Product をグリッドにした（2026-09-08、ビルダー側で変更）

   店舗が増えるため、横スクロールのスライダーをやめて並べきる形にした。
   PCで3列、モバイルで1列。

   商品はいま1点しかなく、3列のグリッドでは左端に寄って、
   右に大きな空きができる。読み込みに失敗したように見えるので中央に置く。
   一覧ページ（.ng-productlist）でも同じことをしている。

   2点のときも中央に寄せる。3列のうち2つが左に寄るより、
   まとまって見えるほうが自然。3点以上になれば自動で通常の並びに戻る。
   -------------------------------------------------------------------------- */
.ng-sec-product .uk-grid:has(> :last-child:nth-child(-n+2)) {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Shop List 下部の「店舗一覧を見る」ボタン

   カードの列とボタンの間隔が20pxしかなく、カード内の
   「この店舗を見る」と近すぎて、どちらもカードの一部に見えていた。
   セクションの締めくくりだと分かるよう、上を大きく空ける。
   （2026-09-05、クライアント要望。56px→88pxに追加で広げた）

   UIkit の .uk-margin が付いているので、同じ強さでは上書きできない。
   -------------------------------------------------------------------------- */
.ng-sec-salon .ng-btn.uk-text-center {
	margin-top: 88px !important;
}

@media (max-width: 639px) {
	.ng-sec-salon .ng-btn.uk-text-center {
		margin-top: 56px !important;
	}
}

/* --------------------------------------------------------------------------
   トップページの写真の並び（4枚組）

   Concept と Academy の写真行。画像ごとに元の縦横比が違うため、
   下端が1〜5pxずれて「揃えたつもりが揃っていない」状態になる。
   3:4に切り抜いて揃える。

   ビルダーの「4列」グリッド（uk-child-width-1-4@m）を手がかりにしている。
   店舗一覧（3列）やヒーロー（1列）には当たらない。
   写真行を足すときも、4列で組めばここが効く。
   -------------------------------------------------------------------------- */
.page-id-2 #tm-main .uk-grid[class*="uk-child-width-1-4"] img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Concept の見出しと本文  .ng-sec-concept

   ビルダーが出す素の h1 / h2 は、テーマ既定の太さ（400）と字間で出る。
   サイト全体の見出し（細く、字間を開ける）に合わせる。

   見出しに ng- のクラスは付いていない。ビルダーの動的リストや
   テキスト要素では個別クラスを当てられない箇所があるため、
   セクションのクラスを起点にタグで拾っている。
   -------------------------------------------------------------------------- */

.ng-sec-concept h2:not(.ng-title-h2),
.ng-sec-concept h1 {
	font-family: var(--ng-ja);
	font-weight: 300;
	letter-spacing: .06em;
	line-height: 1.75;
	color: var(--ng-ink);
}

.ng-sec-concept h2:not(.ng-title-h2) {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.ng-sec-concept h1 {
	font-size: clamp(1.5rem, 3vw, 2.4rem);
}

/* 提供メニューの一覧（hair/care/headspa など4行）。
   英字の羅列なので、行間を開けて一覧として読ませる */
.ng-sec-concept .el-content.uk-panel {
	font-family: var(--ng-en);
	font-size: 13px;
	font-weight: 300;
	line-height: 2.4;
	letter-spacing: .08em;
	color: var(--ng-ink-70);
}

/* --------------------------------------------------------------------------
   大切な方の大切な日  .ng-sec-day

   写真4枚は3:4に揃えたうえで、2枚目と4枚目を下げて段差をつける。
   大きさを変えずに位置だけずらすので、規則が読み取れて
   「意図してそうしている」と伝わる。1枚だけ縦長だと事故に見える。

   写真の入れ方が均等ではない（1・2枚目は内側のグリッド、
   3・4枚目はそれぞれ別の列）ため、下げる対象を2か所に分けて指定する。
   -------------------------------------------------------------------------- */

.ng-sec-day img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* 段差。横に4枚並ぶときだけ効かせる。

   外側のグリッドは3列でできている。
     1列目 … 写真1・2（内側にもうひとつグリッドがある）＋見出し＋説明
     2列目 … 写真3
     3列目 … 写真4＋PHOTO STUDIO

   写真の並びは 1・2・3・4 だが、入れ物は「1列目に2枚」なので、
   2枚目と4枚目を下げるには2か所を別々に指定する必要がある。 */
@media (min-width: 960px) {
	/* 2枚目：1列目の中にあるグリッドの、2つ目 */
	.ng-sec-day > .uk-container > .uk-grid > :first-child .uk-grid > * + * {
		margin-top: 44px;
	}

	/* 4枚目：外側グリッドの3列目。PHOTO STUDIOのボタンごと下がる */
	.ng-sec-day > .uk-container > .uk-grid > :nth-child(3) {
		margin-top: 44px;
	}
}

/* スマホでは、1列目の中の2枚だけが半分の幅（168px）になり、
   3・4枚目が全幅（345px）になって大きさが揃わない。
   3・4枚目も半分にして、2枚ずつ2段に揃える。 */
@media (max-width: 639px) {
	.ng-sec-day > .uk-container > .uk-grid > :nth-child(2),
	.ng-sec-day > .uk-container > .uk-grid > :nth-child(3) {
		width: 50%;
	}
}

/* 見出し。英字＋和文の対にしていない欄なので、和文だけで見出しを立てる */
.ng-sec-day h3 {
	margin: 40px 0 0;
	font-family: var(--ng-ja);
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .08em;
	color: var(--ng-ink);
}

.ng-sec-day .uk-panel:not(.ng-title-sub) {
	font-family: var(--ng-ja);
	font-size: 13px;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* PHOTO STUDIO。いまは小さな文字のままでボタンに見えないので、
   店舗一覧の「この店舗を見る」と同じ、下線付きのテキストリンクにそろえる */
.ng-sec-day .uk-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 0;
	padding: 0 0 4px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ng-ink-12);
	border-radius: 0;
	font-family: var(--ng-en);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .14em;
	line-height: 1.6;
	color: var(--ng-ink);
	text-transform: uppercase;
	transition: color .35s var(--ng-ease), border-color .35s var(--ng-ease);
}

.ng-sec-day .uk-button:hover {
	color: var(--ng-ygreen-dk);
	border-bottom-color: var(--ng-ygreen-dk);
}

/* --------------------------------------------------------------------------
   Academy  .ng-sec-academy

   まだ始まっていない欄。「coming soon…」を見出しの直後に置き、
   これから始まるものだと分かるようにする。
   -------------------------------------------------------------------------- */

/* 「coming soon…」。緑の小さな英字で、他の欄のラベルと同じ扱いにする */
.ng-sec-academy .ng-title-sub + div {
	margin: 0 0 10px;
	font-family: var(--ng-en);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .2em;
	color: var(--ng-ygreen-dk);
	text-transform: uppercase;
}

/* スクールの説明文 */
.ng-sec-academy .uk-panel:not(.ng-title-sub) {
	font-family: var(--ng-ja);
	font-size: 14px;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--ng-ink-70);
}

/* 説明文と写真の間を空ける */
.ng-sec-academy .uk-panel:not(.ng-title-sub) + .uk-margin {
	margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Academy の写真の並び（2026-09-19、Canva案に合わせる）

   Canvaの実測（1366px幅）

     4枚とも 306 × 397（比率 0.771）。隙間13px。**段差なし。**
     キャプションもない。

   2026-09-13にPENの案から取り入れた**段差（0/72/24/96）と高さの違い
   （470/410/500/430）、番号つきキャプションはすべて外した。**
   クライアントから「canvaと同じサイズで」と指示があったため。

   `[ng_caption]` のショートコードとCSS（`.ng-caption`）は残してある。
   汎用の部品で、他の場所でも使えるため。
   -------------------------------------------------------------------------- */
.page-id-2 #tm-main .ng-academy-gallery .uk-grid > * img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 306 / 397;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   セクションの上下の余白をそろえる（2026-09-10、依頼者の指示）

   ビルダーでセクションを作るときの余白設定がまちまちで、
   140px（Concept・Product・Shop List・News）と
   70px（大切な日・Academy）が混ざっていた。90pxにそろえる。

   140pxは1画面の1/6ほどを余白が占める。セクションが7つある
   いまの構成では冗長で、90pxでも区切りは十分に伝わる。

   ヒーローの下だけは0にする。セクションの境目は
   「下の余白＋次の上の余白」で180px空くが、背景色が交互に変わるので
   目には2つに割れて見える。一方ヒーローの下は写真から白へ続くため、
   同じ数値でも一続きの空白として見え、間延びする。

   UIkit の .uk-section が付いていて theme.1.css は当CSSより後に
   読まれるため、クラス1つでは負ける。page-id と #tm-main で強くしている。
   -------------------------------------------------------------------------- */

.page-id-2 #tm-main > [class*="ng-sec"]:not(.ng-sec-hero) {
	padding-top: 56px;
	padding-bottom: 56px;
}

@media (min-width: 960px) {
	.page-id-2 #tm-main > [class*="ng-sec"]:not(.ng-sec-hero) {
		padding-top: 90px;
		padding-bottom: 90px;
	}
}

.page-id-2 #tm-main > .ng-sec-hero {
	padding-bottom: 0;
}