/* ==========================================================================
   NEXT GENERATION ─ ヘッダー（ナビゲーション）
/* スクロール前：白の半透明（2026-09-08、クライアント要望）

   .30 まで落としている（2026-09-08、クライアント判断）。
   真っ黒な写真を最悪ケースにすると .85 が下限だが、
   **実際のスライドは明るいトーンで揃っており、今後もそうする方針**
   のため、最悪ケースではなく実際の写真で判断している。

   写真が変わったら、ヘッダーの帯にかかる部分の明るさを測り直すこと。
   暗い写真を入れると墨の文字が読めなくなる。 */
.tm-header .uk-navbar-container.uk-navbar-transparent {
	background: rgba(255, 255, 255, .3);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* スクロール後：白 */
.tm-header .uk-navbar-container.uk-navbar-sticky {
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 var(--ng-ink-12);
}

/* バーの高さ */
.tm-header .uk-navbar-item {
	min-height: 76px;
}

/* ビルダーウィジェットの余白を殺す */
.tm-header .uk-navbar-item .uk-grid-margin,
.tm-header .uk-navbar-item .uk-margin {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   ロゴ
   -------------------------------------------------------------------------- */
.tm-header .ng-logo,
.tm-header .ng-logo a {
	font-family: var(--ng-en);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .2em;
	white-space: nowrap;
	text-decoration: none;
	transition: color .4s var(--ng-ease);
}

.tm-header .ng-logo .ng-logo-sub {
	display: block;
	margin-top: 3px;
	font-family: var(--ng-ja);
	font-size: 9px;
	font-weight: 300;
	letter-spacing: .12em;
}

/* --------------------------------------------------------------------------
   グローバルナビ
   -------------------------------------------------------------------------- */
.tm-header .ng-nav .uk-subnav {
	margin: 0 0 0 -32px;
	align-items: center;
}

.tm-header .ng-nav .uk-subnav > * {
	padding-left: 32px;
}

.tm-header .ng-nav .uk-subnav .el-link {
	display: block;
	font-family: var(--ng-en);
	/* クライアント要望で拡大。13px →15px（09-05）→17px（09-08）。
	   字間も .12em → .10em に詰めている。大きくしたぶん、
	   同じ字間だと間延びして「はっきり」した印象から遠のくため。 */
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .1em;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	transition: color .35s var(--ng-ease), opacity .35s var(--ng-ease);
}

/* 和文（span.ng-nav-ja） */
.tm-header .ng-nav .uk-subnav .ng-nav-ja {
	display: block;
	margin-top: 3px;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   Recruit ボタン
   Subnav要素で組まれているため、リンク自体をピル型にする
   -------------------------------------------------------------------------- */
.tm-header .ng-recruit-btn .uk-subnav {
	margin: 0;
}

.tm-header .ng-recruit-btn .uk-subnav > * {
	padding-left: 0;
}

.tm-header .ng-recruit-btn .uk-subnav .el-link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 4px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--ng-en);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .14em;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color .35s var(--ng-ease),
	            color .35s var(--ng-ease),
	            border-color .35s var(--ng-ease);
}

.tm-header .ng-recruit-btn .uk-subnav .ng-nav-ja {
	margin-top: 1px;
	font-size: 9px;
	letter-spacing: .1em;
	opacity: .72;
}

/* --------------------------------------------------------------------------
   状態ごとの色
   -------------------------------------------------------------------------- */

/* ---- 既定：白いヘッダーのページ ----

   アクセス・スタッフ・お知らせのように、ヘッダーを写真に重ねない
   ページでは、YOOtheme は素の .uk-navbar-container を出す。
   .uk-navbar-transparent も .uk-navbar-sticky も付かないため、
   下のどの指定も当たらない。ここが「白地の上」の既定になる。
   ボタンだけは面で見せたいので、黒地に白文字にする。

   ナビの文字は黄緑（2026-09-05、クライアント要望）。
   白地では明るい黄緑だとコントラストが足りず読みにくいので、
   濃いほうの --ng-ygreen-dk を使う（白地 5.79）。          */
.tm-header .ng-nav .uk-subnav .el-link {
	color: var(--ng-ygreen-dk);
}

.tm-header .ng-nav .uk-subnav .ng-nav-ja {
	color: var(--ng-ink-45);
}

.tm-header .ng-nav .uk-subnav .el-link:hover {
	color: var(--ng-ygreen);
	opacity: 1;
}

.tm-header .ng-recruit-btn .uk-subnav .el-link {
	background: var(--ng-ink);
	border-color: var(--ng-ink);
	color: #fff;
}

.tm-header .ng-recruit-btn .uk-subnav .el-link:hover {
	background: var(--ng-green);
	border-color: var(--ng-green);
	color: #fff;
	opacity: 1;
}

/* ---- スクロール前 ----

   幕が白なので、下層ページの白いヘッダーと同じ考え方にする。

   ロゴは YOOtheme が暗いヘッダー用に白版（.uk-logo-inverse）へ差し替える。
   白い幕の上では白ロゴが消えるので、通常版に戻す。
   theme.1.css は当CSSより後に読まれ、ロゴのHTMLはテーマが出力していて
   クラスを足せないため、ここだけ !important で押し切る。 */
.tm-header .uk-navbar-transparent .uk-logo img:not(.uk-logo-inverse) {
	display: block !important;
}

.tm-header .uk-navbar-transparent .uk-logo img.uk-logo-inverse {
	display: none !important;
}

.tm-header .uk-navbar-transparent .ng-logo,
.tm-header .uk-navbar-transparent .ng-logo a,
.tm-header .uk-navbar-transparent .ng-nav .uk-subnav .el-link {
	color: var(--ng-ink);
}

.tm-header .uk-navbar-transparent .ng-logo .ng-logo-sub,
.tm-header .uk-navbar-transparent .ng-nav .uk-subnav .ng-nav-ja {
	color: #5a5754;
}

.tm-header .uk-navbar-transparent .ng-logo a:hover,
.tm-header .uk-navbar-transparent .ng-nav .uk-subnav .el-link:hover {
	color: var(--ng-ygreen-dk);
	opacity: 1;
}


/* Recruitボタンは黒い面に白い文字（面と文字で18.80）。
   白い幕の中で唯一の濃い面になり、導線として立つ。
   和文はうっすら落として主従をつける。
   ホバーは黄緑の面に反転させ、押せることを示す。 */
.tm-header .uk-navbar-transparent .ng-recruit-btn .uk-subnav .el-link {
	background: var(--ng-ink);
	border-color: var(--ng-ink);
	color: #fff;
}

.tm-header .uk-navbar-transparent .ng-recruit-btn .uk-subnav .el-link .ng-nav-ja {
	color: #fff;
	opacity: .72;
}

.tm-header .uk-navbar-transparent .ng-recruit-btn .uk-subnav .el-link:hover {
	background: var(--ng-ygreen-dk);
	border-color: var(--ng-ygreen-dk);
	color: #fff;
}


/* ---- スクロール後：黒文字 ---- */
.tm-header .uk-navbar-sticky .ng-logo,
.tm-header .uk-navbar-sticky .ng-logo a {
	color: var(--ng-ink);
}

.tm-header .uk-navbar-sticky .ng-nav .uk-subnav .el-link {
	color: var(--ng-ygreen-dk);
}

.tm-header .uk-navbar-sticky .ng-logo .ng-logo-sub,
.tm-header .uk-navbar-sticky .ng-nav .uk-subnav .ng-nav-ja {
	color: var(--ng-ink-45);
}

.tm-header .uk-navbar-sticky .ng-logo a:hover,
.tm-header .uk-navbar-sticky .ng-nav .uk-subnav .el-link:hover {
	color: var(--ng-ygreen);
	opacity: 1;
}

.tm-header .uk-navbar-sticky .ng-recruit-btn .uk-subnav .el-link {
	background: var(--ng-ink);
	border-color: var(--ng-ink);
	color: #fff;
}

.tm-header .uk-navbar-sticky .ng-recruit-btn .uk-subnav .el-link:hover {
	background: var(--ng-green);
	border-color: var(--ng-green);
	color: #fff;
}

/* --------------------------------------------------------------------------
   モーション低減
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tm-header * { transition-duration: .001ms !important; }
}

/* ==========================================================================
   モバイルメニュー（ドロワー）

   PCのナビ（.ng-nav）をそのまま複製して使っているため、
   横並びのままだと2行に折り返して読みづらい。ここで縦積みに組み替える。
   ヘッダー内の指定とは別系統なので、#tm-dialog-mobile を起点にする。
   ========================================================================== */

#tm-dialog-mobile .uk-modal-body {
	width: 100%;
	padding: 96px 32px 48px;
}

/* 縦に積む */
#tm-dialog-mobile .ng-nav .uk-subnav {
	display: block;
	margin: 0;
}

/* UIkit が折り返し用に付ける余白と字下げを打ち消す */
#tm-dialog-mobile .ng-nav .uk-subnav > * {
	margin-top: 0;
	padding-left: 0;
}

#tm-dialog-mobile .ng-nav .uk-subnav .el-item {
	border-top: 1px solid var(--ng-ink-12);
}

#tm-dialog-mobile .ng-nav .uk-subnav .el-item:last-child {
	border-bottom: 1px solid var(--ng-ink-12);
}

/* 1項目ぶんの高さを確保して押しやすくする（44px以上） */
#tm-dialog-mobile .ng-nav .uk-subnav .el-link {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 20px 2px;
	font-family: var(--ng-en);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .1em;
	color: var(--ng-ygreen-dk);
	text-align: left;
	text-transform: none;
	text-decoration: none;
	transition: color .35s var(--ng-ease);
}

#tm-dialog-mobile .ng-nav .uk-subnav .el-link:hover {
	color: var(--ng-ygreen);
}

/* 和文は英字の右に小さく添える */
#tm-dialog-mobile .ng-nav .uk-subnav .ng-nav-ja {
	display: inline;
	margin: 0;
	font-family: var(--ng-ja);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
}

/* ==========================================================================
   モバイルヘッダー  .tm-header-mobile

   PCのヘッダー（.tm-header）とは別の要素なので、指定も分けて書く。
   状態の切り替えは同じで、YOOtheme が付け替えるクラスに乗る。
     スクロール前 … .uk-navbar-transparent
     スクロール後 … .uk-navbar-sticky

   ビルダー側で設定するクラス
     .ng-mobile-logo  ロゴ
     .ng-recruit-btn  Recruitボタン（ボタン要素の外側）
   ========================================================================== */

.tm-header-mobile .uk-navbar-container {
	transition: background-color .4s var(--ng-ease),
	            box-shadow .4s var(--ng-ease);
}

/* スクロール前：暗い半透明 */
.tm-header-mobile .uk-navbar-container.uk-navbar-transparent {
	background: linear-gradient(180deg, rgba(20, 17, 15, .48), rgba(20, 17, 15, .18));
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/* スクロール後：白 */
.tm-header-mobile .uk-navbar-container.uk-navbar-sticky {
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 var(--ng-ink-12);
}

/* --------------------------------------------------------------------------
   ロゴ
   -------------------------------------------------------------------------- */
.tm-header-mobile .ng-mobile-logo a {
	display: block;
	font-family: var(--ng-en);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .14em;
	white-space: nowrap;
	text-decoration: none;
	text-transform: none;
	transition: color .35s var(--ng-ease);
}

/* --------------------------------------------------------------------------
   Recruit ボタン（ボタン要素）

   ラベルが「Recruit」だけでも「Recruit＋リクルート」でも収まるようにする。
   -------------------------------------------------------------------------- */
.tm-header-mobile .ng-recruit-btn {
	margin: 0;
}

.tm-header-mobile .ng-recruit-btn > a,
.tm-header-mobile .ng-recruit-btn > .uk-button {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 3px 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--ng-en);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .12em;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color .35s var(--ng-ease),
	            color .35s var(--ng-ease),
	            border-color .35s var(--ng-ease);
}

.tm-header-mobile .ng-recruit-btn .ng-nav-ja {
	display: block;
	margin-top: 1px;
	font-family: var(--ng-ja);
	font-size: 8px;
	font-weight: 300;
	letter-spacing: .08em;
	opacity: .72;
}

/* --------------------------------------------------------------------------
   状態ごとの色
   -------------------------------------------------------------------------- */

/* ---- 既定：白いヘッダーのページ（PC側と同じ考え方） ---- */
.tm-header-mobile .ng-recruit-btn > a,
.tm-header-mobile .ng-recruit-btn > .uk-button {
	background: var(--ng-ink);
	border-color: var(--ng-ink);
	color: #fff;
}

/* ---- スクロール前：白文字 ---- */
.tm-header-mobile .uk-navbar-transparent .ng-mobile-logo a {
	color: #fff;
}

.tm-header-mobile .uk-navbar-transparent .uk-navbar-toggle {
	color: #fff;
}

.tm-header-mobile .uk-navbar-transparent .ng-recruit-btn > a,
.tm-header-mobile .uk-navbar-transparent .ng-recruit-btn > .uk-button {
	background: #fff;
	border-color: #fff;
	color: var(--ng-ink);
}

/* ---- スクロール後：黒文字 ---- */
.tm-header-mobile .uk-navbar-sticky .ng-mobile-logo a {
	color: var(--ng-ink);
}

.tm-header-mobile .uk-navbar-sticky .uk-navbar-toggle {
	color: var(--ng-ink);
}

.tm-header-mobile .uk-navbar-sticky .ng-recruit-btn > a,
.tm-header-mobile .uk-navbar-sticky .ng-recruit-btn > .uk-button {
	background: var(--ng-ink);
	border-color: var(--ng-ink);
	color: #fff;
}

/* 画面が狭いときは、ロゴとボタンが折り返さないよう詰める */
@media (max-width: 399px) {
	.tm-header-mobile .ng-mobile-logo a {
		font-size: 12px;
		letter-spacing: .1em;
	}

	.tm-header-mobile .ng-recruit-btn > a,
	.tm-header-mobile .ng-recruit-btn > .uk-button {
		padding: 3px 14px;
		font-size: 11px;
	}

	.tm-header-mobile .uk-navbar-item,
	.tm-header-mobile .uk-navbar-toggle {
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* ==========================================================================
   ドロワー内の Recruit ボタン  .ng-drawer-cta

   メニューを開いた人に、いちばん進んでほしい先を大きく置く。
   ビルダー側：Mobile Dialog にボタン要素を追加し、外側に .ng-drawer-cta
   ========================================================================== */
#tm-dialog-mobile .ng-drawer-cta {
	margin-top: 40px;
}

#tm-dialog-mobile .ng-drawer-cta > a,
#tm-dialog-mobile .ng-drawer-cta > .uk-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 64px;
	padding: 10px 24px;
	background: var(--ng-ink);
	border: 1px solid var(--ng-ink);
	border-radius: 999px;
	font-family: var(--ng-en);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .16em;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color .35s var(--ng-ease), border-color .35s var(--ng-ease);
}

#tm-dialog-mobile .ng-drawer-cta > a:hover,
#tm-dialog-mobile .ng-drawer-cta > .uk-button:hover {
	background: var(--ng-green);
	border-color: var(--ng-green);
}

#tm-dialog-mobile .ng-drawer-cta .ng-nav-ja {
	display: block;
	margin-top: 3px;
	font-family: var(--ng-ja);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .72);
}

/* ボタンに添える一言（テキスト要素に .ng-drawer-note） */
#tm-dialog-mobile .ng-drawer-note {
	margin-top: 14px;
	font-family: var(--ng-ja);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: .06em;
	color: var(--ng-ink-45);
	text-align: center;
}

/* ==========================================================================
   明るい背景に重なるヘッダー

   ヘッダーを写真に重ねるページでは、YOOtheme が背景の明暗に応じて
   .uk-light（明るい文字）／.uk-dark（暗い文字）を付け分ける。
   既定は白文字にしてあるので、.uk-dark のときだけ黒文字に戻す。
   リクルートページのように、ヒーロー左側が明るいページで効く。
   ========================================================================== */

/* ---- PC ---- */
.tm-header .uk-navbar-transparent.uk-dark .ng-logo,
.tm-header .uk-navbar-transparent.uk-dark .ng-logo a,
.tm-header .uk-navbar-transparent.uk-dark .ng-nav .uk-subnav .el-link {
	color: var(--ng-ink);
}

.tm-header .uk-navbar-transparent.uk-dark .ng-logo .ng-logo-sub,
.tm-header .uk-navbar-transparent.uk-dark .ng-nav .uk-subnav .ng-nav-ja {
	color: var(--ng-ink-45);
}

.tm-header .uk-navbar-transparent.uk-dark .ng-logo a:hover,
.tm-header .uk-navbar-transparent.uk-dark .ng-nav .uk-subnav .el-link:hover {
	color: var(--ng-green);
	opacity: 1;
}

.tm-header .uk-navbar-transparent.uk-dark .ng-recruit-btn .uk-subnav .el-link {
	background: var(--ng-ink);
	border-color: var(--ng-ink);
	color: #fff;
}

.tm-header .uk-navbar-transparent.uk-dark .ng-recruit-btn .uk-subnav .el-link:hover {
	background: var(--ng-green);
	border-color: var(--ng-green);
	color: #fff;
}

/* ---- モバイル ---- */
.tm-header-mobile .uk-navbar-transparent.uk-dark .ng-mobile-logo a,
.tm-header-mobile .uk-navbar-transparent.uk-dark .uk-navbar-toggle {
	color: var(--ng-ink);
}

.tm-header-mobile .uk-navbar-transparent.uk-dark .ng-recruit-btn > a,
.tm-header-mobile .uk-navbar-transparent.uk-dark .ng-recruit-btn > .uk-button {
	background: var(--ng-ink);
	border-color: var(--ng-ink);
	color: #fff;
}

/* ==========================================================================
   暗いヒーローのページは、重なるヘッダーを白文字に戻す

   YOOtheme はページごとの設定で .uk-light / .uk-dark を付けるが、
   ヒーローの明暗（ng-invert の有無）と食い違うことがある。
   ページ側の状態を見て自動で合わせる。
     ヒーローが暗い（.ng-invert）→ ヘッダーは白文字
   これでページごとの設定を触らなくてよくなる。
   ========================================================================== */

/* ---- PC ---- */
body:has(.ng-sec-page-hero.ng-invert) .tm-header .uk-navbar-transparent.uk-dark .ng-logo,
body:has(.ng-sec-page-hero.ng-invert) .tm-header .uk-navbar-transparent.uk-dark .ng-logo a,
body:has(.ng-sec-page-hero.ng-invert) .tm-header .uk-navbar-transparent.uk-dark .ng-nav .uk-subnav .el-link {
	color: #fff;
}

body:has(.ng-sec-page-hero.ng-invert) .tm-header .uk-navbar-transparent.uk-dark .ng-logo .ng-logo-sub,
body:has(.ng-sec-page-hero.ng-invert) .tm-header .uk-navbar-transparent.uk-dark .ng-nav .uk-subnav .ng-nav-ja {
	color: rgba(255, 255, 255, .68);
}

body:has(.ng-sec-page-hero.ng-invert) .tm-header .uk-navbar-transparent.uk-dark .ng-logo a:hover,
body:has(.ng-sec-page-hero.ng-invert) .tm-header .uk-navbar-transparent.uk-dark .ng-nav .uk-subnav .el-link:hover {
	color: #fff;
	opacity: .7;
}

body:has(.ng-sec-page-hero.ng-invert) .tm-header .uk-navbar-transparent.uk-dark .ng-recruit-btn .uk-subnav .el-link {
	background: #fff;
	border-color: #fff;
	color: var(--ng-ink);
}

body:has(.ng-sec-page-hero.ng-invert) .tm-header .uk-navbar-transparent.uk-dark .ng-recruit-btn .uk-subnav .el-link:hover {
	background: var(--ng-green);
	border-color: var(--ng-green);
	color: #fff;
	opacity: 1;
}

/* ---- モバイル ---- */
body:has(.ng-sec-page-hero.ng-invert) .tm-header-mobile .uk-navbar-transparent.uk-dark .ng-mobile-logo a,
body:has(.ng-sec-page-hero.ng-invert) .tm-header-mobile .uk-navbar-transparent.uk-dark .uk-navbar-toggle {
	color: #fff;
}

body:has(.ng-sec-page-hero.ng-invert) .tm-header-mobile .uk-navbar-transparent.uk-dark .ng-recruit-btn > a,
body:has(.ng-sec-page-hero.ng-invert) .tm-header-mobile .uk-navbar-transparent.uk-dark .ng-recruit-btn > .uk-button {
	background: #fff;
	border-color: #fff;
	color: var(--ng-ink);
}

/* --------------------------------------------------------------------------
   ロゴ画像（2026-08-14 テキストから画像に変更）

   YOOtheme のロゴ機能で SVG を2枚設定してある。
     logo-wide.svg        … 白い背景の上（黒い版）
     logo-wide-white.svg  … 写真に重なるとき（白い版、uk-logo-inverse）

   画像は 180×27 で書き出されている。PCはこのままでよいが、
   モバイル（375px）では右側に133pxしか残らず、
   Recruitボタンとハンバーガーが縦に折り返してヘッダーが180pxまで伸びる。
   画面幅に応じてロゴを縮める。
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.tm-header-mobile .uk-logo img {
		width: 140px;
		height: auto;
	}
}

/* さらに狭い画面では、ロゴのマークと文字が潰れない範囲まで詰める */
@media (max-width: 413px) {
	.tm-header-mobile .uk-logo img {
		width: 118px;
	}

	.tm-header-mobile .uk-logo {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ロゴ画像の左右余白。文字ロゴのときと同じ位置に揃える */
.tm-header .uk-logo,
.tm-header-mobile .uk-logo {
	padding-top: 0;
	padding-bottom: 0;
}