/**
 * Careers page — Dark theme + Full hero
 */

/* ---- Page background ---- */
body {
	background: #1a1a1a;
}

/* ---- New sqLoader (dark) ---- */
#sqLoader{background:#0a0a0f}
#sqLoader .sq-beam{background:linear-gradient(90deg,transparent 0%,#a855f7 25%,#00f5ff 50%,#a855f7 75%,transparent 100%);box-shadow:0 0 16px 3px rgba(0,245,255,.35),0 0 40px 6px rgba(168,85,247,.18)}
#sqLoader .sq-glow{background:radial-gradient(circle,rgba(0,245,255,.12) 0%,rgba(168,85,247,.06) 40%,transparent 70%)}

/* ======== PAGE REVEAL ANIMATION ======== */
.cp-hero--full {
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.cr-lead,
.cr-jobs,
.cr-form-section {
	opacity: 0;
	transform: translateY(60px);
	transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.cp-page-revealed .cp-hero--full    { opacity: 1; transform: none; transition-delay: 0s; }
.cp-page-revealed .cr-lead          { opacity: 1; transform: none; transition-delay: 0.15s; }
.cp-page-revealed .cr-jobs          { opacity: 1; transform: none; transition-delay: 0.25s; }
.cp-page-revealed .cr-form-section  { opacity: 1; transform: none; transition-delay: 0.35s; }

/* ======== HEADER: transparent over hero ======== */
.site-header.scrolled {
	background: transparent;
	backdrop-filter: none;
	border-bottom-color: transparent;
	padding: 0;
	transition: background 0.4s ease, border-color 0.4s ease;
}
.site-header.scrolled .logo-text            { color: var(--color-white); }
.site-header.scrolled .logo-sub             { color: rgba(255,255,255,0.6); }
.site-header.scrolled .header-divider       { background: rgba(255,255,255,0.3); }
.site-header.scrolled .header-site-name     { color: rgba(255,255,255,0.8); }
.site-header.scrolled .header-nav-link      { color: rgba(255,255,255,0.85); }
.site-header.scrolled .header-nav-link:hover { color: var(--color-white); }
.site-header.scrolled .all-menu-label       { color: #fff; }
.site-header.scrolled .all-menu-lines span  { background: #fff; }
.site-header.scrolled .hamburger span       { background: var(--color-white); }
.site-header.scrolled .header-register-btn  { color: #fff; border-color: rgba(255,255,255,0.4); }
.site-header.scrolled .header-account-btn   { color: #fff; }
.site-header.scrolled .header-erp-btn       { color: #fff; border-color: rgba(255,255,255,0.4); }
.site-header.scrolled .header-lang__btn     { color: rgba(255,255,255,0.6); }
.site-header.scrolled .header-lang__btn:hover { color: #fff; }
.site-header.scrolled .header-lang__btn--active { color: #fff; }
.site-header.scrolled .header-lang__sep     { color: rgba(255,255,255,0.3); }
.site-header.scrolled .header-nav-menu a    { color: rgba(255,255,255,0.85); }
.site-header.scrolled .header-nav-menu a:hover { color: #fff; }
.site-header.scrolled .header-nav-menu li:nth-child(-n+2) a { color: #fff; border-color: rgba(255,255,255,0.4); }

/* Header solid — after scrolling past hero */
.site-header.cp-header-solid {
	background: rgba(255,255,255,0.97) !important;
	backdrop-filter: blur(10px);
	border-bottom-color: var(--color-gray-200) !important;
	padding: 5px 0;
}
.site-header.cp-header-solid .logo-text            { color: var(--color-black) !important; }
.site-header.cp-header-solid .logo-sub             { color: var(--color-gray-500) !important; }
.site-header.cp-header-solid .header-divider       { background: var(--color-gray-300) !important; }
.site-header.cp-header-solid .header-site-name     { color: var(--color-gray-600) !important; }
.site-header.cp-header-solid .header-nav-link      { color: var(--color-gray-700) !important; }
.site-header.cp-header-solid .header-nav-link:hover { color: var(--color-accent) !important; }
.site-header.cp-header-solid .all-menu-label       { color: var(--color-gray-800) !important; }
.site-header.cp-header-solid .all-menu-lines span  { background: var(--color-gray-800) !important; }
.site-header.cp-header-solid .hamburger span       { background: var(--color-black) !important; }
.site-header.cp-header-solid .header-register-btn  { color: var(--color-gray-700) !important; border-color: var(--color-gray-300) !important; }
.site-header.cp-header-solid .header-account-btn   { color: var(--color-gray-700) !important; }
.site-header.cp-header-solid .header-erp-btn       { color: var(--color-gray-700) !important; border-color: var(--color-gray-300) !important; }
.site-header.cp-header-solid .header-lang__btn     { color: var(--color-gray-400) !important; }
.site-header.cp-header-solid .header-lang__btn:hover { color: var(--color-gray-700) !important; }
.site-header.cp-header-solid .header-lang__btn--active { color: var(--color-gray-900) !important; }
.site-header.cp-header-solid .header-lang__sep     { color: var(--color-gray-300) !important; }
.site-header.cp-header-solid .header-nav-menu a    { color: var(--color-gray-700) !important; }
.site-header.cp-header-solid .header-nav-menu a:hover { color: var(--color-accent) !important; }
.site-header.cp-header-solid .header-nav-menu li:nth-child(-n+2) a { color: var(--color-black) !important; border-color: var(--color-gray-300) !important; }

/* ======== HEADER: at-top offset ======== */
.site-header.scrolled .header-left  { padding-top: 35px; }
.site-header.scrolled .header-right { padding-top: 15px; }
.site-header.scrolled .mob-lang     { padding-top: 38px; }
.site-header.cp-header-solid .header-left  { padding-top: 0 !important; }
.site-header.cp-header-solid .header-right { padding-top: 0 !important; }
.site-header.cp-header-solid .mob-lang     { padding-top: 0 !important; }
@media (max-width: 768px) {
	.site-header.scrolled .header-right { padding-top: 34px; }
}

/* ======== LEAD ======== */
.cr-lead {
	background: #222;
	padding: 80px 0;
	text-align: center;
}
.cr-lead-text {
	font-size: clamp(16px, 2.5vw, 20px);
	line-height: 2;
	color: rgba(255,255,255,0.8);
	max-width: 700px;
	margin: 0 auto;
}

/* ======== JOB LISTINGS ======== */
.cr-jobs {
	background: #272727;
	padding: 100px 0;
}
.cr-jobs .section-title-en {
	color: #fff;
}
.cr-jobs .section-title-ja {
	color: var(--color-gray-400);
}

/* Job Card */
.cr-job-card {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 8px;
	padding: 48px;
	margin-bottom: 40px;
}
.cr-job-card:last-of-type {
	margin-bottom: 0;
}
.cr-job-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 36px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cr-job-num {
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 200;
	color: var(--color-accent);
	line-height: 1;
}
.cr-job-title {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 4px;
}
.cr-job-en {
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 2px;
	color: rgba(255,255,255,0.4);
}

/* Job Table */
.cr-job-table {
	width: 100%;
	border-collapse: collapse;
}
.cr-job-table tr {
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cr-job-table tr:last-child {
	border-bottom: none;
}
.cr-job-table th {
	width: 140px;
	padding: 16px 20px 16px 0;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	vertical-align: top;
	white-space: nowrap;
}
.cr-job-table td {
	padding: 16px 0;
	font-size: 15px;
	color: rgba(255,255,255,0.6);
	line-height: 1.8;
}

/* Apply Button */
.cr-job-apply {
	display: inline-block;
	margin-top: 32px;
	padding: 12px 36px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.3s, color 0.3s;
}
.cr-job-apply:hover {
	background: var(--color-accent);
	color: #fff;
}

/* ======== FORM SECTION (light card on dark bg) ======== */
.cr-form-section {
	background: var(--color-gray-100, #f5f5f5);
	padding: 100px 0;
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
	.cr-job-card {
		padding: 28px 20px;
	}
	.cr-job-header {
		gap: 14px;
	}
	.cr-job-num {
		font-size: 36px;
	}
	.cr-job-title {
		font-size: 20px;
	}
	.cr-job-table th {
		display: block;
		width: 100%;
		padding: 12px 0 4px;
	}
	.cr-job-table td {
		display: block;
		padding: 0 0 12px;
	}
	.cr-job-table tr {
		display: block;
		padding: 4px 0;
	}
}