@charset "UTF-8";
/*!
 * EVEKYU Member System - 会員マイページ
 *
 * 設計方針：
 *  - LINE の Web View（スマホ縦画面）を基準にしたモバイルファースト
 *  - テーマの影響を受けないよう、使う要素には必ず色・余白を明示する
 *  - タップ領域は最低 44px、入力欄の文字は 16px（iOS の自動ズーム防止）
 *  - 色はすべて CSS 変数に集約。配色変更は :root の値だけで完結する
 */

/* ─────────────────────────────────────────────
   デザイントークン
   ───────────────────────────────────────────── */
.ems-app {
	/* 基調色（信頼感のある深いティール） */
	--ems-primary: #0f6f66;
	--ems-primary-dark: #0a544d;
	--ems-primary-light: #e6f4f2;

	/* 面と枠 */
	--ems-bg: #f5f6f7;
	--ems-surface: #ffffff;
	--ems-surface-alt: #fafbfb;
	--ems-border: #dfe3e6;
	--ems-border-strong: #c4cace;

	/* 文字 */
	--ems-text: #1f2933;
	--ems-text-muted: #62707b;
	--ems-text-faint: #8b969e;

	/* 状態色 */
	--ems-success: #0f7b3e;
	--ems-success-bg: #e9f6ee;
	--ems-warning: #8a5a00;
	--ems-warning-bg: #fdf5e3;
	--ems-danger: #b3261e;
	--ems-danger-bg: #fdecea;
	--ems-info: #14608f;
	--ems-info-bg: #e8f2f9;

	/* 寸法 */
	--ems-radius: 10px;
	--ems-radius-sm: 6px;
	--ems-gap: 16px;

	/* 文字サイズの段階（画面ごとに散らかさないよう1か所に集約） */
	--fs-caption: 12px;
	--fs-meta: 13px;
	--fs-small: 14px;
	--fs-body: 16px;
	--fs-card: 17px;
	--fs-title: 22px;
	--fs-display: 28px;

	/* 下端に固定するナビの高さ。本文の下余白と揃える */
	--ems-nav-height: 62px;
	--ems-shadow: 0 1px 2px rgba(31, 41, 51, 0.06), 0 1px 3px rgba(31, 41, 51, 0.08);

	--ems-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;

	background: var(--ems-bg);
	color: var(--ems-text);
	font-family: var(--ems-font);
	font-size: 16px;
	line-height: 1.75;
	padding: var(--ems-gap) var(--ems-gap) calc(var(--ems-nav-height) + 32px);
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}

.ems-app *,
.ems-app *::before,
.ems-app *::after {
	box-sizing: inherit;
}

.ems-app img {
	max-width: 100%;
	height: auto;
}

/* ─────────────────────────────────────────────
   カード
   ───────────────────────────────────────────── */
.ems-card {
	background: var(--ems-surface);
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius);
	box-shadow: var(--ems-shadow);
	padding: 16px;
	margin-bottom: var(--ems-gap);
}

.ems-card__title {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ems-border);
	color: var(--ems-text);
	font-size: 15px;
	font-weight: 600;
}

/* ─────────────────────────────────────────────
   見出し・テキスト
   ───────────────────────────────────────────── */
.ems-heading {
	margin: 0;
	font-size: var(--fs-title);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.ems-subheading {
	margin: 16px 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ems-text);
}

.ems-text-dim {
	color: var(--ems-text-muted);
	font-size: 14px;
}

.ems-text-accent {
	color: var(--ems-primary);
	font-weight: 600;
}

.ems-text-danger {
	color: var(--ems-danger);
}

/* ─────────────────────────────────────────────
   稼働状況（ホームのみ）
   ───────────────────────────────────────────── */
.ems-status-card {
	background: linear-gradient(140deg, var(--ems-primary) 0%, var(--ems-primary-dark) 100%);
	border: none;
	color: #ffffff;
	padding: 24px 16px;
}


.ems-status-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ems-status-item {
	padding: 12px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--ems-radius-sm);
}

.ems-status-item__label {
	display: block;
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--fs-caption);
	letter-spacing: 0.04em;
}

.ems-status-item__value {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.ems-status-item__value small {
	font-size: var(--fs-small);
	font-weight: 400;
}

.ems-status-item__note {
	display: block;
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--fs-caption);
}

/* 進捗バー */

/* ─────────────────────────────────────────────
   ボトムナビゲーション

   画面上部を本文に使えるよう、移動手段は下端に固定する。
   片手で親指が届く位置でもある。
   ───────────────────────────────────────────── */
.ems-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	background: var(--ems-surface);
	border-top: 1px solid var(--ems-border);
	box-shadow: 0 -2px 12px rgba(22, 33, 31, 0.06);
	/* iPhone のホームバーに隠れないようにする */
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.ems-nav__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: var(--ems-nav-height);
	padding: 4px 2px;
	color: var(--ems-text-muted);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.ems-nav__item svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	stroke-width: 1.7;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ems-nav__item.is-active {
	color: var(--ems-primary);
	font-weight: 700;
}

.ems-nav__item.is-active svg {
	stroke-width: 2.2;
}

.ems-nav__item:focus-visible {
	outline: 2px solid var(--ems-primary);
	outline-offset: -3px;
}

/* ログアウトはナビから外し、本文の末尾に控えめに置く */
.ems-nav__logout {
	margin: 32px 0 0;
	padding: 0;
	border: none;
	text-align: center;
}

.ems-nav__logout a {
	color: var(--ems-text-faint);
	font-size: var(--fs-meta);
	text-decoration: underline;
}

/* ─────────────────────────────────────────────
   画面の見出し
   ───────────────────────────────────────────── */
.ems-screen-head {
	margin-bottom: 16px;
}

.ems-screen-head .ems-text-dim {
	margin: 6px 0 0;
}

.ems-empty-state {
	padding: 32px 16px;
	text-align: center;
	color: var(--ems-text-muted);
	font-size: var(--fs-small);
}

/* ─────────────────────────────────────────────
   ボタン
   ───────────────────────────────────────────── */
.ems-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 12px 20px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border-strong);
	border-radius: var(--ems-radius);
	color: var(--ems-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.ems-button:hover,
.ems-button:focus-visible {
	background: var(--ems-surface-alt);
	border-color: var(--ems-primary);
	color: var(--ems-primary-dark);
}

.ems-button--primary {
	background: var(--ems-primary);
	border-color: var(--ems-primary);
	color: #ffffff;
}

.ems-button--primary:hover,
.ems-button--primary:focus-visible {
	background: var(--ems-primary-dark);
	border-color: var(--ems-primary-dark);
	color: #ffffff;
}

.ems-button--danger {
	border-color: var(--ems-danger);
	color: var(--ems-danger);
}

.ems-button:disabled,
.ems-button[aria-disabled="true"] {
	background: var(--ems-surface-alt);
	border-color: var(--ems-border);
	color: var(--ems-text-faint);
	cursor: not-allowed;
}

.ems-button.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* テキストリンク風のボタン */
.ems-linkbutton {
	display: inline-block;
	min-height: 32px;
	padding: 4px 0;
	background: none;
	border: none;
	color: var(--ems-info);
	font-family: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.ems-linkbutton:hover {
	color: var(--ems-primary-dark);
}

/* ─────────────────────────────────────────────
   案件カード
   ───────────────────────────────────────────── */
.ems-job-card {
	background: var(--ems-surface);
	border: 1px solid var(--ems-border);
	border-left: 4px solid var(--ems-primary);
	border-radius: var(--ems-radius);
	box-shadow: var(--ems-shadow);
	padding: 16px;
	margin-bottom: var(--ems-gap);
}

.ems-job-card.is-past {
	border-left-color: var(--ems-border-strong);
	opacity: 0.7;
}

.ems-job-card__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.ems-job-card__meta {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	gap: 4px 12px;
	margin-bottom: 10px;
	font-size: 14px;
}

.ems-job-card__meta > span:nth-child(odd) {
	color: var(--ems-text-muted);
}

.ems-job-card__reward {
	margin: 0 0 12px;
	color: var(--ems-primary-dark);
	font-size: 16px;
	font-weight: 700;
}

/* ─────────────────────────────────────────────
   募集枠
   ───────────────────────────────────────────── */
.ems-slot {
	padding: 14px;
	margin-bottom: 12px;
	background: var(--ems-surface-alt);
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius);
}

.ems-slot:last-child {
	margin-bottom: 0;
}

.ems-slot__date {
	margin: 0 0 2px;
	font-size: 16px;
	font-weight: 700;
}

.ems-slot__label {
	margin-left: 6px;
	color: var(--ems-text-muted);
	font-size: 14px;
	font-weight: normal;
}

.ems-slot__time {
	margin: 0 0 6px;
	font-size: 15px;
}

.ems-slot__meta {
	margin: 0 0 4px;
	color: var(--ems-text-muted);
	font-size: 13px;
}

/* ─────────────────────────────────────────────
   バッジ
   ───────────────────────────────────────────── */
.ems-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.ems-badge--open {
	background: var(--ems-success-bg);
	color: var(--ems-success);
}

.ems-badge--screening {
	background: var(--ems-info-bg);
	color: var(--ems-info);
}

.ems-badge--closed,
.ems-badge--finished {
	background: var(--ems-surface-alt);
	color: var(--ems-text-muted);
}

.ems-badge--danger {
	background: var(--ems-danger-bg);
	color: var(--ems-danger);
}

/* ─────────────────────────────────────────────
   定義リスト
   ───────────────────────────────────────────── */
.ems-detail-list {
	display: grid;
	grid-template-columns: 7em 1fr;
	gap: 8px 12px;
	margin: 12px 0 0;
	font-size: 14px;
}

.ems-detail-list dt {
	color: var(--ems-text-muted);
}

.ems-detail-list dd {
	margin: 0;
	word-break: break-word;
}

.ems-detail-list a {
	color: var(--ems-info);
}

.ems-richtext {
	margin-top: 12px;
	font-size: 15px;
}

.ems-richtext p {
	margin: 0 0 10px;
}

.ems-tel {
	display: inline-block;
	margin-top: 4px;
	color: var(--ems-danger);
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
}

/* ─────────────────────────────────────────────
   フォーム
   ───────────────────────────────────────────── */
.ems-field {
	margin-bottom: var(--ems-gap);
}

.ems-field__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
}

.ems-field__required {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	background: var(--ems-danger-bg);
	border-radius: var(--ems-radius-sm);
	color: var(--ems-danger);
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}

.ems-app input[type="text"],
.ems-app input[type="search"],
.ems-app input[type="tel"],
.ems-app input[type="email"],
.ems-app input[type="number"],
.ems-app input[type="date"],
.ems-app input[type="time"],
.ems-app input[type="url"],
.ems-app input[type="password"],
.ems-app select,
.ems-app textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 12px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border-strong);
	border-radius: var(--ems-radius-sm);
	color: var(--ems-text);
	font-family: inherit;
	font-size: 16px; /* iOS の自動ズームを防ぐため 16px 未満にしない */
	line-height: 1.5;
}

.ems-app textarea {
	min-height: 96px;
	resize: vertical;
}

.ems-app input:focus,
.ems-app select:focus,
.ems-app textarea:focus {
	border-color: var(--ems-primary);
	outline: 2px solid var(--ems-primary-light);
	outline-offset: 0;
}

.ems-app input[type="file"] {
	width: 100%;
	padding: 10px 0;
	font-family: inherit;
	font-size: 14px;
}

.ems-field__hint {
	margin: 6px 0 0;
	color: var(--ems-text-muted);
	font-size: 13px;
	line-height: 1.6;
}

.ems-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 15px;
}

.ems-check input {
	width: 20px;
	height: 20px;
}

.ems-form--inline {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ems-border);
}

/* ─────────────────────────────────────────────
   資格リスト
   ───────────────────────────────────────────── */
.ems-license-list {
	list-style: none;
	margin: 12px 0;
	padding: 0;
}

.ems-license {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 12px 0;
	border-bottom: 1px solid var(--ems-border);
	font-size: 14px;
}

.ems-license:last-child {
	border-bottom: none;
}

.ems-license__name {
	font-size: 15px;
	font-weight: 600;
}

.ems-license__expires {
	color: var(--ems-text-muted);
	font-size: 13px;
}

.ems-license__file {
	color: var(--ems-info);
	font-size: 13px;
}

.ems-license__delete {
	margin-left: auto;
}

.ems-license__delete .ems-linkbutton {
	color: var(--ems-danger);
}

/* ─────────────────────────────────────────────
   通知
   ───────────────────────────────────────────── */
.ems-alert {
	padding: 12px 14px;
	margin-bottom: var(--ems-gap);
	background: var(--ems-info-bg);
	border-left: 4px solid var(--ems-info);
	border-radius: var(--ems-radius-sm);
	color: var(--ems-info);
	font-size: 14px;
}

.ems-alert p {
	margin: 0 0 6px;
}

.ems-alert p:last-child {
	margin-bottom: 0;
}

.ems-alert ul {
	margin: 6px 0 0 18px;
	padding: 0;
}

.ems-alert--warning {
	background: var(--ems-warning-bg);
	border-left-color: var(--ems-warning);
	color: var(--ems-warning);
}

.ems-alert--danger {
	background: var(--ems-danger-bg);
	border-left-color: var(--ems-danger);
	color: var(--ems-danger);
}

.ems-alert .ems-button {
	margin-top: 8px;
}

/* ─────────────────────────────────────────────
   タブレット以上
   ───────────────────────────────────────────── */
@media (min-width: 720px) {
	.ems-app {
		max-width: 720px;
		margin: 0 auto;
		padding: 24px;
	}

	.ems-button {
		width: auto;
		min-width: 220px;
	}

	/* 画面が広ければナビは上に戻し、固定をやめる */
	.ems-nav {
		position: static;
		margin-bottom: 24px;
		border: 1px solid var(--ems-border);
		border-radius: var(--ems-radius);
		box-shadow: var(--ems-shadow);
		padding-bottom: 0;
	}

	.ems-nav__item {
		flex-direction: row;
		gap: 8px;
		min-height: 54px;
		font-size: var(--fs-meta);
	}

	.ems-status-grid {
		grid-template-columns: repeat(3, 1fr);
	}

}

@media (prefers-reduced-motion: reduce) {
	.ems-app *,
	.ems-app *::before,
	.ems-app *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ─────────────────────────────────────────────
   実績・お支払い
   ───────────────────────────────────────────── */
.ems-amount-large {
	margin: 0 0 12px;
	color: var(--ems-primary-dark);
	font-size: 24px;
	font-weight: 700;
}

/* 口座名義の変換プレビュー（銀行へ渡る表記） */
.ems-kana-preview {
	margin-top: 4px;
	padding: 6px 10px;
	background: var(--ems-primary-light);
	border-left: 3px solid var(--ems-primary);
	color: var(--ems-primary-dark);
	font-weight: 600;
}

/* ナビゲーション末尾のログアウト */
.ems-nav__logout {
	margin: 6px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--ems-border);
	text-align: right;
}

.ems-nav__logout a {
	color: var(--ems-text-muted);
	font-size: 13px;
	text-decoration: underline;
}

.ems-nav__logout a:hover {
	color: var(--ems-danger);
}

/* ─────────────────────────────────────────────
   交通費明細の入力行
   ───────────────────────────────────────────── */
.ems-expense-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ems-expense-row {
	position: relative;
	padding: 14px;
	background: var(--ems-surface-alt);
	border: 1px solid var(--ems-border);
	border-left: 3px solid var(--ems-primary);
	border-radius: var(--ems-radius-sm);
}

.ems-expense-row__num {
	margin: 0 0 10px;
	color: var(--ems-primary-dark);
	font-size: 13px;
	font-weight: 700;
}

.ems-expense-row .ems-field {
	margin-bottom: 12px;
}

.ems-expense-row .ems-field:last-of-type {
	margin-bottom: 8px;
}

.ems-expense-row .ems-field__label {
	font-size: 13px;
}

/* 乗車駅 → 降車駅 */
.ems-expense-station__pair {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 6px;
}

.ems-expense-arrow {
	color: var(--ems-text-muted);
	font-size: 18px;
}

.ems-expense-row .ems-check {
	min-height: 36px;
	margin-top: 4px;
	font-size: 14px;
}

.ems-expense-remove {
	color: var(--ems-danger) !important;
	font-size: 13px;
}

@media (max-width: 32rem) {
	.ems-expense-station__pair {
		grid-template-columns: 1fr;
	}

	.ems-expense-arrow {
		display: none;
	}
}

/* ─────────────────────────────────────────────
   支払明細書
   ───────────────────────────────────────────── */
.ems-statement {
	padding: 28px 24px;
	background: #ffffff;
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius);
	box-shadow: var(--ems-shadow);
	color: #1f2933;
	font-size: 14px;
}

.ems-statement__head {
	text-align: center;
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 2px solid #1f2933;
}

.ems-statement__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
}

.ems-statement__period {
	margin: 6px 0 0;
	color: #62707b;
	font-size: 14px;
}

.ems-statement__parties {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.ems-statement__to {
	flex: 1 1 200px;
}

.ems-statement__name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	border-bottom: 1px solid #1f2933;
	padding-bottom: 4px;
}

.ems-statement__name span {
	font-size: 14px;
	font-weight: normal;
}

.ems-statement__code {
	margin: 4px 0 0;
	color: #62707b;
	font-size: 12px;
}

.ems-statement__from {
	flex: 0 1 auto;
	text-align: right;
	font-size: 13px;
	line-height: 1.7;
}

.ems-statement__from p {
	margin: 0;
}

.ems-statement__issuer-name {
	font-weight: 700;
	font-size: 15px;
}

/* 支払額 */
.ems-statement__total {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	padding: 14px 18px;
	background: var(--ems-primary-light);
	border-left: 4px solid var(--ems-primary);
}

.ems-statement__total-label {
	font-size: 14px;
	font-weight: 600;
}

.ems-statement__total-value {
	font-size: 26px;
	font-weight: 700;
	color: var(--ems-primary-dark);
	font-variant-numeric: tabular-nums;
}

.ems-statement__paydate {
	margin-left: auto;
	font-size: 13px;
	color: #475856;
}

/* 内訳 */
.ems-statement__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 22px;
	font-size: 13px;
}

.ems-statement__table th,
.ems-statement__table td {
	padding: 7px 10px;
	border-bottom: 1px solid var(--ems-border);
	text-align: left;
}

.ems-statement__table thead th {
	background: var(--ems-surface-alt);
	border-bottom: 2px solid var(--ems-border-strong);
	font-size: 12px;
	color: #475856;
}

.ems-statement__table .ems-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ems-statement__table tfoot th {
	text-align: right;
	font-weight: 500;
	color: #475856;
}

.ems-statement__grand th,
.ems-statement__grand td {
	border-top: 2px solid #1f2933;
	border-bottom: none;
	font-size: 16px;
	font-weight: 700;
	padding-top: 10px;
}

/* 振込先 */
.ems-statement__bank {
	padding: 14px 16px;
	background: var(--ems-surface-alt);
	border: 1px solid var(--ems-border);
	font-size: 13px;
}

.ems-statement__bank h2 {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
}

.ems-statement__bank p {
	margin: 0 0 3px;
}

.ems-statement__note {
	color: #62707b;
	font-size: 11px;
}

.ems-statement__issued {
	margin: 16px 0 0;
	text-align: right;
	color: #62707b;
	font-size: 12px;
}

/* ─────────────────────────────────────────────
   印刷（PDF保存）時
   ───────────────────────────────────────────── */
@media print {
	/* 明細書だけを残し、サイトのヘッダー・メニュー等は出さない */
	body * {
		visibility: hidden;
	}

	.ems-statement,
	.ems-statement * {
		visibility: visible;
	}

	.ems-statement {
		position: absolute;
		inset: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		border: none;
		box-shadow: none;
		font-size: 11pt;
	}

	.ems-statement-actions,
	.ems-nav {
		display: none !important;
	}

	.ems-statement__total {
		background: none;
		border-left: 3px solid #000;
	}

	.ems-statement__table thead th,
	.ems-statement__bank {
		background: none;
	}

	.ems-statement__table {
		page-break-inside: auto;
	}

	.ems-statement__table tr {
		page-break-inside: avoid;
	}

	@page {
		margin: 16mm;
	}
}

/* LINE連携コード */
.ems-link-code {
	margin: 12px 0;
	padding: 16px;
	background: var(--ems-primary-light);
	border: 2px dashed var(--ems-primary);
	border-radius: var(--ems-radius);
	color: var(--ems-primary-dark);
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-align: center;
	user-select: all;
}

/* 現場チェックイン */
.ems-checkin-form { margin-bottom: 10px; }

.ems-checkin-done {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 8px;
	padding: 10px 12px;
	background: var(--ems-success-bg);
	border-left: 3px solid var(--ems-success);
	border-radius: var(--ems-radius-sm);
	color: var(--ems-success);
	font-size: 14px;
}

.ems-checkin-done__label { font-weight: 700; }

/* ─────────────────────────────────────────────
   ログイン画面

   サイトのトップに置く前提。ナビが無いぶん上下の余白を広く取り、
   入力欄に視線が向くようにする。
   ───────────────────────────────────────────── */
.ems-login {
	max-width: 420px;
	margin: 0 auto;
	padding: 32px 0 48px;
}

.ems-login__title {
	margin: 0 0 20px;
	color: var(--ems-primary-dark);
	font-size: var(--fs-title);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.ems-login__card {
	padding: 24px 20px;
}

.ems-login__card .ems-text-dim {
	margin: 0 0 20px;
}

/* wp_login_form() が出力する要素に合わせる */
.ems-app .login-username,
.ems-app .login-password {
	margin: 0 0 16px;
}

.ems-app .login-username label,
.ems-app .login-password label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--fs-small);
	font-weight: 700;
}

.ems-app .login-remember {
	margin: 0 0 20px;
	font-size: var(--fs-small);
}

.ems-app .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

.ems-app .login-remember input {
	width: 20px;
	height: 20px;
	accent-color: var(--ems-primary);
}

.ems-app .login-submit {
	margin: 0;
}

.ems-app .login-submit input[type="submit"] {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: 12px 24px;
	background: var(--ems-primary);
	border: 1px solid var(--ems-primary);
	border-radius: var(--ems-radius-sm);
	color: #ffffff;
	font-family: inherit;
	font-size: var(--fs-body);
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(15, 111, 102, 0.3);
}

.ems-app .login-submit input[type="submit"]:hover,
.ems-app .login-submit input[type="submit"]:focus-visible {
	background: var(--ems-primary-dark);
	border-color: var(--ems-primary-dark);
}

.ems-login__forgot {
	margin: 16px 0 0;
	text-align: center;
	font-size: var(--fs-meta);
}

.ems-login__forgot a {
	color: var(--ems-info);
}

.ems-login__note {
	margin: 20px 0 0;
	color: var(--ems-text-faint);
	font-size: var(--fs-meta);
	text-align: center;
	line-height: 1.7;
}

/* ─────────────────────────────────────────────
   テーマとの調整

   マイページは中で独自の見出しを出すため、テーマが出すページタイトルは隠す。
   テンプレートを直接編集させないための措置。
   ───────────────────────────────────────────── */
.ems-hide-page-title .wp-block-post-title,
.ems-hide-page-title .entry-title,
.ems-hide-page-title .page-title {
	display: none;
}

/*
 * 本文の左右余白はマイページ側で持つため、テーマの制約を外す。
 * 幅の上限は器（.ems-shell）で決める。ここで掛けると
 * サイドバーを引いた残りが狭くなりすぎる。
 */
.ems-mypage-body .ems-app {
	max-width: none;
}

/* ─────────────────────────────────────────────
   事務局ポータル
   ───────────────────────────────────────────── */
.ems-tasks {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ems-tasks__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border);
	border-left: 5px solid var(--ems-primary);
	border-radius: var(--ems-radius);
	box-shadow: var(--ems-shadow);
	color: var(--ems-text);
	text-decoration: none;
}

.ems-tasks__item--warn { border-left-color: #dba617; }
.ems-tasks__item--danger { border-left-color: var(--ems-danger); }

.ems-tasks__count {
	flex: 0 0 auto;
	min-width: 48px;
	color: var(--ems-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ems-tasks__item--warn .ems-tasks__count { color: var(--ems-warn); }
.ems-tasks__item--danger .ems-tasks__count { color: var(--ems-danger); }

.ems-tasks__body { min-width: 0; }

.ems-tasks__label {
	display: block;
	font-size: var(--fs-body);
	font-weight: 700;
}

.ems-tasks__hint {
	display: block;
	margin-top: 2px;
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
}

/* 日付の切り替えなど、1行に収める小さなフォーム */
.ems-inline-form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.ems-inline-form .ems-field__label {
	flex: 1 1 100%;
	margin-bottom: 0;
}

.ems-inline-form input[type="date"] { flex: 1 1 160px; }
.ems-inline-form .ems-button { flex: 0 0 auto; width: auto; min-width: 90px; }

/* 到着状況のまとめ */
.ems-today-summary {
	display: flex;
	justify-content: space-around;
	gap: 12px;
	text-align: center;
}

.ems-today-summary__item {
	font-size: var(--fs-meta);
	color: var(--ems-text-muted);
}

.ems-today-summary__item strong {
	display: block;
	color: var(--ems-text);
	font-size: 26px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.ems-today-summary__item.is-ok strong { color: var(--ems-ok); }
.ems-today-summary__item.is-warn strong { color: var(--ems-danger); }

.ems-job-card.is-waiting::before { background: var(--ems-danger); }

.ems-applicant-kana {
	display: block;
	margin-top: 2px;
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
	font-weight: 400;
}

/* 確定・見送りなどの操作 */
.ems-decide {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.ems-decide form { flex: 1 1 0; }
.ems-decide .ems-button { width: 100%; }

/* 交通費の確認 */
.ems-expense-review {
	margin: 12px 0;
	padding: 12px;
	background: var(--ems-surface-alt);
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius-sm);
}

.ems-expense-review__row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 0;
	border-bottom: 1px solid var(--ems-border);
	font-size: var(--fs-small);
}

.ems-expense-review__row:last-child { border-bottom: none; }

.ems-expense-review__name { flex: 1 1 140px; font-weight: 700; }
.ems-expense-review__name small { display: block; color: var(--ems-text-muted); font-weight: 400; }
.ems-expense-review__claim { color: var(--ems-text-muted); font-variant-numeric: tabular-nums; }

.ems-expense-review__amount {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-meta);
}

.ems-expense-review__amount input { width: 100px; min-height: 44px; }

/* 名目は文章なので、金額欄より広く取る */
.ems-expense-review__note { flex: 1 1 220px; }
.ems-expense-review__note input { width: 100%; }

.ems-report-total {
	margin: 12px 0 0;
	font-size: var(--fs-small);
}

.ems-report-total strong {
	font-size: var(--fs-card);
	font-variant-numeric: tabular-nums;
}




/* ─────────────────────────────────────────────
   本文とナビの器

   狭い画面では本文だけを縦に流し、ナビは下端に固定したまま。
   広い画面では左にナビ、右に本文の2列にする。
   ───────────────────────────────────────────── */
.ems-shell__main {
	min-width: 0;
}

/* ─────────────────────────────────────────────
   入口タイル

   文字だけの一覧より、指で狙いやすく目的地も分かりやすい。
   ───────────────────────────────────────────── */
.ems-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 12px;
	margin: 28px 0 0;
}

.ems-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 14px 20px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius);
	box-shadow: var(--ems-shadow);
	color: var(--ems-text);
	text-align: center;
	text-decoration: none;
}

.ems-tile:hover,
.ems-tile:focus-visible {
	border-color: var(--ems-primary);
	box-shadow: 0 2px 10px rgba(15, 111, 102, 0.14);
}

.ems-tile:focus-visible {
	outline: 2px solid var(--ems-primary);
	outline-offset: 2px;
}

.ems-tile__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--ems-primary-light);
}

.ems-tile__icon svg {
	width: 30px;
	height: 30px;
	stroke: var(--ems-primary);
	stroke-width: 1.7;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ems-tile__label {
	font-size: var(--fs-card);
	font-weight: 700;
	line-height: 1.4;
}

.ems-tile__hint {
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
	line-height: 1.6;
}

/* ナビの氏名欄。下端固定のときは場所を取るので出さない */

/* ─────────────────────────────────────────────
   広い画面：左サイドメニュー ＋ 右本文
   ───────────────────────────────────────────── */
@media (min-width: 720px) {
	.ems-shell {
		display: grid;
		grid-template-columns: 206px minmax(0, 1fr);
		gap: 22px;
		align-items: start;
		max-width: 1080px;
		margin: 0 auto;
	}

	/* DOM は本文が先。order で見た目だけ入れ替える */
	.ems-shell__main {
		order: 2;
	}

	.ems-shell > .ems-nav {
		order: 1;
	}

	.ems-nav {
		position: sticky;
		/* テーマのヘッダーが固定表示なので、その下に潜り込ませない */
		top: calc(var(--evekyu-header-height, 60px) + 16px);
		flex-direction: column;
		margin: 0;
		padding: 0 0 8px;
		background: var(--ems-surface);
		border: 1px solid var(--ems-border);
		border-radius: var(--ems-radius);
		box-shadow: var(--ems-shadow);
	}



	.ems-nav__item {
		flex: 0 0 auto;
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
		min-height: 48px;
		padding: 10px 14px;
		border-bottom: 1px solid var(--ems-border);
		border-left: 3px solid transparent;
		font-size: var(--fs-small);
		text-align: left;
	}

	.ems-nav__item:last-of-type {
		border-bottom: none;
	}

	.ems-nav__item.is-active {
		background: var(--ems-primary-light);
		border-left-color: var(--ems-primary);
	}


	.ems-tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ─────────────────────────────────────────────
   ログイン画面

   余計なものを置かず、入力欄だけに視線が向くようにする。
   ───────────────────────────────────────────── */
.ems-login {
	max-width: 560px;
	padding: 40px 0 56px;
}

.ems-login__logo {
	margin: 0 0 28px;
	text-align: center;
}

.ems-login__logo img {
	max-width: 240px;
	max-height: 64px;
	width: auto;
	height: auto;
}

.ems-login__brand {
	margin: 0 0 28px;
	color: var(--ems-text);
	font-size: var(--fs-title);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: center;
	line-height: 1.4;
}

/* 見出しは横線を通した中央の枠に置く */
.ems-login__title {
	position: relative;
	margin: 0 0 32px;
	text-align: center;
}

.ems-login__title::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 1px solid var(--ems-border-strong);
}

.ems-login__title span {
	position: relative;
	display: inline-block;
	min-width: 190px;
	padding: 9px 32px;
	background: var(--ems-bg);
	border: 1px solid var(--ems-text);
	border-radius: 999px;
	color: var(--ems-text);
	font-size: var(--fs-card);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

/* 枠や影は付けず、背景の上に直接置く */
.ems-login__card {
	max-width: 420px;
	margin: 0 auto;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

.ems-login__card .ems-alert {
	margin-bottom: 20px;
}

.ems-app .login-submit {
	text-align: center;
}

.ems-app .login-submit input[type="submit"] {
	display: inline-block;
	width: auto;
	min-width: 300px;
	max-width: 100%;
	border-radius: 999px;
}

.ems-login__forgot {
	margin: 24px 0 0;
	font-size: var(--fs-small);
}

.ems-login__forgot a {
	color: var(--ems-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 32rem) {
	.ems-app .login-submit input[type="submit"] {
		width: 100%;
		min-width: 0;
	}
}

/* 720px 以上ではナビが下端に固定されないので、その分の余白は要らない */
@media (min-width: 720px) {
	.ems-app {
		padding-bottom: 48px;
	}
}

/* ログイン画面にはナビが無い */
.ems-app:not(:has(.ems-nav)) {
	padding-bottom: 48px;
}

/* ─────────────────────────────────────────────
   事務局ポータル：一覧・フォーム・表

   会員マイページと同じ器（見出し帯＋サイドバー）に載せる。
   ───────────────────────────────────────────── */

/* 画面が7つあるので、狭い幅では下端のメニューを横スクロールさせる。
   詰めて並べると1つ1つが小さくなり、押し間違えるため。 */
.ems-staff .ems-nav {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ems-staff .ems-nav::-webkit-scrollbar {
	display: none;
}

.ems-staff .ems-nav__item {
	flex: 0 0 auto;
	min-width: 68px;
}

@media (min-width: 720px) {
	.ems-staff .ems-nav {
		overflow: visible;
	}

	.ems-staff .ems-nav__item {
		flex: 0 0 auto;
		min-width: 0;
	}
}

/* ── 一覧（案件・会員で共用） ── */
.ems-joblist {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 24px;
}

.ems-joblist__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius);
	box-shadow: var(--ems-shadow);
	color: var(--ems-text);
	text-decoration: none;
}

.ems-joblist__item:hover,
.ems-joblist__item:focus-visible {
	border-color: var(--ems-primary);
}

.ems-joblist__main {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ems-joblist__title {
	font-size: var(--fs-card);
	font-weight: 700;
	line-height: 1.45;
}

.ems-joblist__meta {
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
	line-height: 1.5;
}

/* ── 状態バッジ ── */
.ems-state {
	display: inline-block;
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: var(--fs-caption);
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.ems-state--ok {
	background: var(--ems-success-bg);
	color: var(--ems-success);
}

.ems-state--info {
	background: var(--ems-info-bg);
	color: var(--ems-info);
}

.ems-state--warn {
	background: var(--ems-warning-bg);
	color: var(--ems-warning);
}

.ems-state--danger {
	background: var(--ems-danger-bg);
	color: var(--ems-danger);
}

/* ── 絞り込み ── */
.ems-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.ems-filter .ems-input {
	flex: 1 1 160px;
	min-width: 0;
}

.ems-filter .ems-button {
	flex: 0 0 auto;
	width: auto;
	min-width: 110px;
}

.ems-pager {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 24px 0 0;
}

.ems-pager .ems-button {
	width: auto;
	min-width: 120px;
}

/* ── フォーム ── */
.ems-label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.5;
}

.ems-hint {
	margin: 6px 0 0;
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
	line-height: 1.6;
}

.ems-required {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--ems-danger-bg);
	color: var(--ems-danger);
	font-size: var(--fs-caption);
	font-weight: 700;
	vertical-align: 2px;
}

.ems-actions {
	margin: 24px 0;
}

.ems-link-back {
	color: var(--ems-text-muted);
	font-size: var(--fs-small);
	text-decoration: none;
}

.ems-link-back:hover {
	color: var(--ems-primary-dark);
	text-decoration: underline;
}

/* 既定の .ems-button が控えめな見た目なので、--ghost は明示用の別名 */
.ems-button--ghost {
	background: var(--ems-surface);
}

.ems-button--danger {
	background: var(--ems-surface);
	border-color: var(--ems-danger);
	color: var(--ems-danger);
}

.ems-button--danger:hover,
.ems-button--danger:focus-visible {
	background: var(--ems-danger-bg);
	border-color: var(--ems-danger);
	color: var(--ems-danger);
}

.ems-card--danger {
	border-color: var(--ems-danger);
}

.ems-list {
	margin: 8px 0 0;
	padding-left: 1.35em;
	font-size: var(--fs-small);
	line-height: 1.7;
}

.ems-muted {
	display: block;
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
	line-height: 1.5;
}

/* ── 定義リスト（会員の基本情報・振込先） ── */
.ems-deflist {
	margin: 16px 0 0;
	border-top: 1px solid var(--ems-border);
}

.ems-deflist > div {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ems-border);
	font-size: var(--fs-small);
}

.ems-deflist dt {
	flex: 0 0 34%;
	margin: 0;
	color: var(--ems-text-muted);
	font-weight: 500;
}

.ems-deflist dd {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
	font-weight: 600;
	word-break: break-word;
}

/* ── 資格の確認 ── */
.ems-license-check {
	padding: 16px 0;
	border-bottom: 1px solid var(--ems-border);
}

.ems-license-check:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.ems-license-check__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	font-size: var(--fs-card);
}

.ems-license-check__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.ems-license-check__form .ems-input {
	flex: 1 1 100%;
}

.ems-license-check__form .ems-button {
	flex: 1 1 auto;
	width: auto;
	min-width: 150px;
}

/* ── 表（報酬の集計結果） ── */
.ems-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 8px;
}

.ems-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-meta);
	white-space: nowrap;
}

.ems-table th,
.ems-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--ems-border);
	text-align: left;
	vertical-align: top;
}

.ems-table thead th {
	background: var(--ems-surface-alt);
	color: var(--ems-text-muted);
	font-size: var(--fs-caption);
	font-weight: 700;
	white-space: nowrap;
}

.ems-table tfoot th {
	background: var(--ems-surface-alt);
	border-bottom: none;
	font-weight: 700;
}

.ems-table .ems-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* 出力対象から外れた行は、金額を数えないことがひと目で分かるように薄くする */
.ems-row-excluded {
	background: var(--ems-danger-bg);
	color: var(--ems-text-muted);
}

/* ── 勤務枠エディタ ── */
.ems-shifts__rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 14px;
}

.ems-shift {
	padding: 14px;
	background: var(--ems-surface-alt);
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius);
}

.ems-shift__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ems-border);
}

.ems-shift__title {
	font-size: var(--fs-small);
	font-weight: 700;
}

.ems-shift__locked {
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
}

.ems-shift__remove {
	padding: 4px 10px;
	background: none;
	border: 1px solid var(--ems-border-strong);
	border-radius: var(--ems-radius-sm);
	color: var(--ems-danger);
	font-family: inherit;
	font-size: var(--fs-meta);
	cursor: pointer;
}

.ems-shift__remove:hover {
	background: var(--ems-danger-bg);
	border-color: var(--ems-danger);
}

.ems-shift__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}

.ems-shift__field--wide {
	grid-column: 1 / -1;
}

.ems-shift__label {
	display: block;
	margin-bottom: 5px;
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
	font-weight: 700;
}

.ems-shift__input {
	display: block;
}

/* 管理画面向けの幅指定クラスを、フロントでも意味が通る形にする */
.ems-app .ems-input-narrow,
.ems-app .small-text {
	width: auto;
	max-width: 100%;
	min-width: 120px;
	display: inline-block;
}

.ems-app .large-text {
	width: 100%;
}

.ems-app .ems-inline-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 14px;
	font-size: var(--fs-small);
	line-height: 1.6;
}

.ems-app .ems-inline-check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-height: 0;
	accent-color: var(--ems-primary);
}

/* ─────────────────────────────────────────────
   PC表示の作り込み

   スマートフォンを基準に組んであるため、そのまま広げると
   余白が足りず、入力欄だけが間延びする。ここで整える。
   ───────────────────────────────────────────── */
@media (min-width: 1024px) {
	.ems-app {
		--ems-gap: 20px;
		font-size: 16px;
	}

	.ems-shell {
		grid-template-columns: 244px minmax(0, 1fr);
		gap: 36px;
	}

	/* カードの中身が窮屈に見えないよう、余白を一段広げる */
	.ems-app .ems-card {
		padding: 26px 28px;
	}

	.ems-nav__item {
		min-height: 52px;
		padding: 12px 18px;
		font-size: var(--fs-body);
	}

	.ems-joblist__item {
		padding: 18px 22px;
	}

	.ems-tiles {
		gap: 16px;
	}

	.ems-tile {
		padding: 28px 18px 24px;
	}

	/*
	 * 入力欄が画面幅いっぱいに伸びると、氏名や日付のような短い項目まで
	 * 異様に長くなって読みにくい。中身に合った幅で止める。
	 */
	.ems-form .ems-field > .ems-input,
	.ems-form .ems-field > input[type="text"],
	.ems-form .ems-field > input[type="tel"],
	.ems-form .ems-field > input[type="email"],
	.ems-form .ems-field > input[type="url"],
	.ems-form .ems-field > input[type="number"],
	.ems-form .ems-field > input[type="date"],
	.ems-form .ems-field > input[type="time"],
	.ems-form .ems-field > select {
		max-width: 460px;
	}

	.ems-form .ems-field > textarea {
		max-width: 720px;
	}

	/* 送信ボタンは押す場所が決まっているほうが迷わない。左端に寄せる */
	.ems-actions .ems-button {
		width: auto;
		min-width: 240px;
	}

	.ems-table {
		font-size: var(--fs-small);
	}

	.ems-table th,
	.ems-table td {
		padding: 12px 16px;
	}

	/* 説明文が横に伸びすぎると目が戻れなくなる */
	.ems-screen-head .ems-text-dim,
	.ems-card > .ems-text-dim {
		max-width: 72ch;
	}
}

/* さらに広い画面。器の幅は増やさず、周りの余白で受ける */
@media (min-width: 1360px) {

	.ems-shell {
		gap: 44px;
	}
}

/* マウス操作の画面では、押せるものが分かるよう反応を付ける */
@media (hover: hover) {
	.ems-tile,
	.ems-joblist__item,
	.ems-nav__item {
		transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	}

	.ems-nav__item:hover {
		background: var(--ems-surface-alt);
		color: var(--ems-primary-dark);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ems-tile,
	.ems-joblist__item,
	.ems-nav__item {
		transition: none;
	}
}

/* ─────────────────────────────────────────────
   事務局ポータル：PC前提のレイアウト

   会員マイページと違い、事務局は座って広い画面で使う。
   器を広く取り、1画面に入る情報量を増やす。
   ───────────────────────────────────────────── */
@media (min-width: 720px) {
}

@media (min-width: 1024px) {
	/* 幅・余白・文字の大きさは、ファイル末尾の「情報の密度を上げる」で決める */
	.ems-staff .ems-joblist {
		gap: 8px;
	}
}

/* ─────────────────────────────────────────────
   ダッシュボード：数字のタイル
   ───────────────────────────────────────────── */
.ems-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
	gap: 12px;
	margin: 0 0 var(--ems-gap);
}

.ems-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border);
	border-left: 4px solid var(--ems-border-strong);
	border-radius: var(--ems-radius);
	box-shadow: var(--ems-shadow);
	color: var(--ems-text);
	text-decoration: none;
}

a.ems-stat:hover,
a.ems-stat:focus-visible {
	border-color: var(--ems-primary);
	border-left-color: var(--ems-primary);
}

.ems-stat__value {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.ems-stat__label {
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.4;
	/* 「本日の勤務枠」が1文字ずつ縦積みになるのを防ぐ */
	word-break: keep-all;
	overflow-wrap: normal;
}

.ems-stat__note {
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
	line-height: 1.5;
}

/* 対応が要るものだけ色を付ける。全部に色を付けると、どれも目立たない */
.ems-stat--plain {
	/* 見るだけの数字。既定の枠線のまま色を足さない */
	border-left-color: var(--ems-border-strong);
}

.ems-stat--ok {
	border-left-color: var(--ems-success);
}

.ems-stat--warn {
	border-left-color: var(--ems-warning);
}

.ems-stat--warn .ems-stat__value {
	color: var(--ems-warning);
}

.ems-stat--danger {
	border-left-color: var(--ems-danger);
}

.ems-stat--danger .ems-stat__value {
	color: var(--ems-danger);
}

@media (min-width: 1024px) {
	.ems-stats--dash {
		grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	}

	.ems-stat__value {
		font-size: 34px;
	}
}

/* ─────────────────────────────────────────────
   これからの予定
   ───────────────────────────────────────────── */
.ems-upcoming__date {
	margin: 16px 0 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ems-border);
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
	font-weight: 700;
}

.ems-upcoming__date:first-child {
	margin-top: 0;
}

.ems-upcoming__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 4px;
	color: var(--ems-text);
	font-size: var(--fs-small);
	text-decoration: none;
}

.ems-upcoming__row:hover {
	background: var(--ems-surface-alt);
}

.ems-upcoming__title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ems-upcoming__meta {
	flex: 0 0 auto;
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
}

/* ─────────────────────────────────────────────
   月間カレンダー
   ───────────────────────────────────────────── */
.ems-monthnav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 var(--ems-gap);
}

.ems-monthnav__arrow {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border-strong);
	border-radius: var(--ems-radius-sm);
	color: var(--ems-text);
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

.ems-monthnav__arrow:hover {
	border-color: var(--ems-primary);
	color: var(--ems-primary-dark);
}

.ems-monthnav__label {
	min-width: 8em;
	font-size: var(--fs-title);
	font-weight: 700;
	text-align: center;
}

.ems-monthnav__today,
.ems-monthnav__new {
	color: var(--ems-primary-dark);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
}

.ems-monthnav__new {
	margin-left: auto;
}

.ems-monthnav__today:hover,
.ems-monthnav__new:hover {
	text-decoration: underline;
}

/*
 * 7列は狭い画面だと1マスが指より小さくなる。
 * 幅を確保したうえで横スクロールさせ、潰さない。
 */
.ems-calendar {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 12px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius);
	box-shadow: var(--ems-shadow);
}

.ems-calendar__head,
.ems-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(104px, 1fr));
	min-width: 728px;
}

.ems-calendar__dow {
	padding: 9px 6px;
	background: var(--ems-surface-alt);
	border-bottom: 1px solid var(--ems-border);
	font-size: var(--fs-meta);
	font-weight: 700;
	text-align: center;
}

.ems-calendar__dow--sun {
	color: var(--ems-danger);
}

.ems-calendar__dow--sat {
	color: var(--ems-info);
}

.ems-calendar__cell {
	min-height: 108px;
	padding: 6px;
	border-right: 1px solid var(--ems-border);
	border-bottom: 1px solid var(--ems-border);
}

/* 7列目とグリッド末尾の線は器の枠と重なるので消す */
.ems-calendar__cell:nth-child(7n) {
	border-right: none;
}

.ems-calendar__cell--empty {
	background: var(--ems-surface-alt);
}

.ems-calendar__cell.is-sun .ems-calendar__date,
.ems-calendar__cell.is-holiday .ems-calendar__date {
	color: var(--ems-danger);
}

.ems-calendar__cell.is-sat .ems-calendar__date {
	color: var(--ems-info);
}

.ems-calendar__cell.is-today {
	background: var(--ems-primary-light);
}

.ems-calendar__cell.is-today .ems-calendar__date {
	color: var(--ems-primary-dark);
	font-weight: 700;
}

.ems-calendar__date {
	margin-bottom: 4px;
	font-size: var(--fs-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ems-calendar__items {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* ── マスの中の勤務枠 ── */
.ems-chip {
	display: flex;
	align-items: baseline;
	gap: 4px;
	padding: 3px 6px;
	border-radius: 4px;
	border-left: 3px solid currentColor;
	font-size: var(--fs-caption);
	line-height: 1.45;
	text-decoration: none;
}

.ems-chip__time {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.ems-chip__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ems-chip__count {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* 人が足りていないほど強い色。埋まっていれば落ち着かせる */
.ems-chip--empty {
	background: var(--ems-danger-bg);
	color: var(--ems-danger);
}

.ems-chip--partial {
	background: var(--ems-warning-bg);
	color: var(--ems-warning);
}

.ems-chip--full {
	background: var(--ems-success-bg);
	color: var(--ems-success);
}

.ems-chip--draft {
	background: var(--ems-surface-alt);
	color: var(--ems-text-muted);
}

.ems-chip:hover {
	filter: brightness(0.96);
}

.ems-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 var(--ems-gap);
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
}

.ems-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ems-legend__swatch {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	border-left: 3px solid currentColor;
}

@media (min-width: 1024px) {
	.ems-calendar__head,
	.ems-calendar__grid {
		min-width: 0;
	}

	.ems-calendar__cell {
		min-height: 132px;
		padding: 8px;
	}

	.ems-chip {
		font-size: var(--fs-meta);
	}
}

/* ─────────────────────────────────────────────
   テーマの本文幅から抜ける

   テーマは記事用に本文幅を絞っている。ポータルはその中に
   収まると、サイドバーを引いた残りが極端に狭くなる。
   body クラスに頼ると構成次第で外れるので、
   :has で「中にポータルがある器」を直接掴んで解放する。
   ───────────────────────────────────────────── */
body .evekyu-page:has(.ems-app),
body .evekyu-content:has(.ems-app),
body .entry-content:has(.ems-app),
body .page-content:has(.ems-app) {
	max-width: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

.ems-app {
	width: 100%;
}

/* ─────────────────────────────────────────────
   事務局ポータル：横幅をしっかり使う
   ───────────────────────────────────────────── */
/* 事務局は座って使うので、会員側のような入力欄の幅制限はかけない。
   1画面に収まる情報量を優先する。 */
@media (min-width: 1024px) {
	.ems-staff .ems-form .ems-field > .ems-input,
	.ems-staff .ems-form .ems-field > input[type="text"],
	.ems-staff .ems-form .ems-field > input[type="tel"],
	.ems-staff .ems-form .ems-field > input[type="email"],
	.ems-staff .ems-form .ems-field > input[type="url"],
	.ems-staff .ems-form .ems-field > select {
		max-width: 560px;
	}

	.ems-staff .ems-form .ems-field > textarea {
		max-width: 100%;
	}

	/*
	 * 案件・会員のフォームは項目が多いので2列に流して縦を短くする。
	 * カードをグリッドにし、既定では全ての子を全幅に置く。
	 * 入力項目だけを列に落とすので、見出しや表には影響しない。
	 */
	.ems-staff .ems-form .ems-card {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 24px;
		align-items: start;
	}

	.ems-staff .ems-form .ems-card > * {
		grid-column: 1 / -1;
	}

	.ems-staff .ems-form .ems-card > .ems-field {
		grid-column: auto;
	}

	/* 長文を書く欄だけは幅がいる */
	.ems-staff .ems-form .ems-card > .ems-field:has(textarea) {
		grid-column: 1 / -1;
	}

	.ems-staff .ems-form .ems-card > .ems-field > textarea {
		max-width: 100%;
	}
}

/* ─────────────────────────────────────────────
   事務局ポータル：画面幅を最後まで使う

   テーマや固定ページの構造に本文幅が残っていても、
   親の max-width に縛られずに画面いっぱいへ広げる。
   ビューポート幅ぶんの負のマージンで器の外へ出す。
   ───────────────────────────────────────────── */
.ems-mypage-body .ems-app.ems-staff,
.ems-staff-body .ems-app.ems-staff {
	/*
	 * width を auto にすると、上限を掛ける指定が1つでも残っていたときに
	 * そちらが勝ってしまう。100vw を直接指定して結果を固定する。
	 */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
	padding-left: clamp(16px, 2vw, 40px);
	padding-right: clamp(16px, 2vw, 40px);
}

/*
 * 100vw はスクロールバーの幅を含むため、環境によっては数ピクセル溢れる。
 * clip なら余りを切り落としつつ、ヘッダーの sticky が壊れない
 * （hidden だと sticky が効かなくなる）。
 */
.ems-staff-body {
	overflow-x: clip;
}

/* 見出し帯も画面端まで伸ばす */

@media (min-width: 1024px) {
	/* 器の上限を外し、余白だけで受ける（列幅は末尾の密度指定で決める） */
	.ems-staff .ems-shell {
		max-width: none;
	}

	/*
	 * auto-fit は空のトラックを潰すので、6枚なら6等分になる。
	 * 画面が狭まれば自動で折り返す。
	 */
	.ems-staff .ems-stats--dash {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 16px;
	}

	/* やること と 予定 を左右に */
	.ems-dash-cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	.ems-dash-cols > .ems-card {
		margin-bottom: 0;
	}
}

@media (min-width: 1600px) {
	/* さらに広ければ、予定側を広く取る（件数が多いのはこちら） */
	.ems-dash-cols {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

/* ─────────────────────────────────────────────
   集計期間の切り替え（月間・年間・全期間）
   ───────────────────────────────────────────── */
.ems-spans {
	display: inline-flex;
	margin: 0 0 14px;
	padding: 3px;
	background: var(--ems-surface-alt);
	border: 1px solid var(--ems-border);
	border-radius: 999px;
}

.ems-spans__item {
	padding: 6px 16px;
	border-radius: 999px;
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

.ems-spans__item:hover {
	color: var(--ems-primary-dark);
}

.ems-spans__item.is-active {
	background: var(--ems-surface);
	border: 1px solid var(--ems-border-strong);
	color: var(--ems-primary-dark);
	font-weight: 700;
	/* 枠のぶん高さが変わらないよう、余白で相殺する */
	padding: 5px 15px;
}

/* 会員種別 */
.ems-member-type {
	margin: 0 0 4px;
	font-size: var(--fs-title);
	font-weight: 700;
	line-height: 1.4;
}

/* ─────────────────────────────────────────────
   狭い画面：メニューを右からの引き出しにする

   項目が6〜8個あるので、下端に横並びで詰めると
   1つ1つが指より小さくなる。ヘッダーのボタンで開閉する。
   ───────────────────────────────────────────── */
@media (max-width: 719px) {
	.ems-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		width: min(80vw, 320px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 0 env(safe-area-inset-bottom, 0);
		background: var(--ems-surface);
		border-top: none;
		border-left: 1px solid var(--ems-border);
		box-shadow: -8px 0 28px rgba(22, 33, 31, 0.18);
		/* 閉じている間はキーボード操作でも辿れないようにする */
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.22s ease, visibility 0.22s;
	}

	.ems-nav-open .ems-nav {
		visibility: visible;
		transform: none;
	}

	/* 引き出しの中では、氏名を先頭に出す（広い画面と同じ作り） */



	.ems-nav__item {
		flex: 0 0 auto;
		flex-direction: row;
		justify-content: flex-start;
		gap: 12px;
		min-height: 54px;
		padding: 12px 18px;
		border-bottom: 1px solid var(--ems-border);
		border-left: 3px solid transparent;
		font-size: var(--fs-body);
		font-weight: 600;
		text-align: left;
	}

	.ems-nav__item svg {
		width: 22px;
		height: 22px;
		flex: 0 0 auto;
	}

	.ems-nav__item.is-active {
		background: var(--ems-primary-light);
		border-left-color: var(--ems-primary);
	}

	/* 背景の覆い。触ったら閉じる処理は JS 側で拾う */
	.ems-nav-open::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(22, 33, 31, 0.45);
	}

	/* 下端に固定していた分の余白が要らなくなる */
	.ems-app {
		padding-bottom: 40px;
	}

	/* 事務局側も同じ扱いにする（横スクロールの指定を打ち消す） */
	.ems-staff .ems-nav {
		overflow-x: hidden;
		overflow-y: auto;
	}

	.ems-staff .ems-nav__item {
		min-width: 0;
	}
}

/* 引き出しは動きを抑える設定でも位置だけ切り替える */
@media (max-width: 719px) and (prefers-reduced-motion: reduce) {
	.ems-nav {
		transition: none;
	}
}

/* ─────────────────────────────────────────────
   新規登録
   ───────────────────────────────────────────── */
.ems-login__register {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 28px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--ems-border);
	text-align: center;
}

.ems-login__register span {
	color: var(--ems-text-muted);
	font-size: var(--fs-small);
}

.ems-login__register .ems-button {
	width: auto;
	min-width: 260px;
	max-width: 100%;
	border-radius: 999px;
}

.ems-register .ems-field {
	margin-bottom: 18px;
}

/* 自動投稿よけ。画面から消しても、読み上げ機には残さない */
.ems-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ─────────────────────────────────────────────
   引き出しメニューの閉じるボタン

   広い画面ではサイドバーになるので出さない。
   ───────────────────────────────────────────── */
.ems-nav__close {
	display: none;
}

@media (max-width: 719px) {
	.ems-nav__close {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 6px;
		flex: 0 0 auto;
		width: 100%;
		min-height: 48px;
		padding: 12px 16px;
		background: var(--ems-surface-alt);
		border: none;
		border-bottom: 1px solid var(--ems-border);
		color: var(--ems-text-muted);
		font-family: inherit;
		font-size: var(--fs-small);
		font-weight: 600;
		cursor: pointer;
	}

	.ems-nav__close:hover,
	.ems-nav__close:focus-visible {
		background: var(--ems-primary-light);
		color: var(--ems-primary-dark);
	}

	.ems-nav__close svg {
		width: 20px;
		height: 20px;
		stroke: currentColor;
		stroke-width: 2;
		fill: none;
		stroke-linecap: round;
	}
}

/* ログインフォーム（自前で組んだもの） */
.ems-loginform .login-remember {
	margin: 0 0 20px;
	font-size: var(--fs-small);
}

.ems-loginform .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

.ems-loginform .login-remember input {
	width: 20px;
	height: 20px;
	min-height: 0;
	accent-color: var(--ems-primary);
}

/* ─────────────────────────────────────────────
   集計期間：タブ＋年月の選択
   ───────────────────────────────────────────── */
.ems-spanbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}

.ems-spanbar .ems-spans {
	margin: 0;
}

.ems-spanpick {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ems-app .ems-spanpick__select {
	width: auto;
	min-width: 88px;
	min-height: 38px;
	padding: 4px 28px 4px 10px;
	font-size: var(--fs-meta);
	border-radius: var(--ems-radius-sm);
}

.ems-spanpick__go {
	min-height: 38px;
	padding: 4px 14px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border-strong);
	border-radius: var(--ems-radius-sm);
	color: var(--ems-text);
	font-family: inherit;
	font-size: var(--fs-meta);
	font-weight: 600;
	cursor: pointer;
}

.ems-spanpick__go:hover,
.ems-spanpick__go:focus-visible {
	border-color: var(--ems-primary);
	color: var(--ems-primary-dark);
}

/* いま何を数えているかを、数字のすぐ上に書く */
.ems-status-card__span {
	margin: 0 0 12px;
	/* カードは濃い緑の背景。灰色だと沈むので白系にする。 */
	color: #ffffff;
	font-size: var(--fs-meta);
	font-weight: 600;
}

/* ─────────────────────────────────────────────
   書類のダウンロード一覧
   ───────────────────────────────────────────── */
.ems-doclist {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ems-border);
}

.ems-doclist__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 0;
	border-bottom: 1px solid var(--ems-border);
}

.ems-doclist__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ems-doclist__title {
	font-size: var(--fs-card);
	font-weight: 700;
	line-height: 1.4;
}

.ems-doclist__meta {
	color: var(--ems-text-muted);
	font-size: var(--fs-meta);
}

.ems-doclist .ems-button {
	width: auto;
	min-width: 140px;
	flex: 0 0 auto;
}

@media (max-width: 32rem) {
	.ems-doclist .ems-button {
		width: 100%;
	}
}

/* ─────────────────────────────────────────────
   実績カードの中の期間切り替え

   カードが濃い緑なので、外に置いたときの配色のままだと
   枠も文字も沈む。カードの上で見える色に置き換える。
   ───────────────────────────────────────────── */
.ems-status-card .ems-spans {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.28);
}

.ems-status-card .ems-spans__item {
	color: rgba(255, 255, 255, 0.82);
}

.ems-status-card .ems-spans__item:hover {
	color: #ffffff;
}

.ems-status-card .ems-spans__item.is-active {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--ems-primary-dark);
}

.ems-status-card .ems-spanpick__select {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
}

/* プルダウンの中身は白背景に戻す（そのままだと白文字で読めない） */
.ems-status-card .ems-spanpick__select option {
	background: #ffffff;
	color: var(--ems-text);
}

.ems-status-card .ems-spanpick__go {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
}

.ems-status-card .ems-spanpick__go:hover,
.ems-status-card .ems-spanpick__go:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--ems-primary-dark);
}

/* ─────────────────────────────────────────────
   メニューを文字だけにしたことによる調整

   アイコンを外したので、高さと余白を文字に合わせ直す。
   ───────────────────────────────────────────── */
.ems-nav__item {
	gap: 0;
}

/* 下端固定だった頃の名残で、狭い幅では縦積みの想定だった */
@media (max-width: 719px) {
	.ems-nav__item {
		justify-content: flex-start;
		min-height: 52px;
		padding: 12px 20px;
	}
}

@media (min-width: 720px) {
	.ems-nav__item {
		padding-left: 16px;
	}
}

/* 実績カードの見出し（氏名を外した後） */

/* ─────────────────────────────────────────────
   実績カードの氏名

   カードは濃い緑の背景。氏名を主、集計期間の見出しを従として置く。
   ───────────────────────────────────────────── */
.ems-status-card__name {
	margin: 0 0 16px;
	font-size: var(--fs-title);
	font-weight: 700;
	line-height: 1.3;
}

.ems-status-card__name small {
	display: block;
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--fs-meta);
	font-weight: 400;
}

/* メニューの先頭にあった氏名欄を外したぶん、上の余白を戻す */
@media (max-width: 719px) {
	.ems-nav__item:first-of-type {
		border-top: none;
	}
}

@media (min-width: 720px) {
	.ems-nav {
		padding-top: 8px;
	}
}

/* ─────────────────────────────────────────────
   案件一覧の行（本体＋操作）
   ───────────────────────────────────────────── */
.ems-joblist__row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.ems-joblist__row .ems-joblist__item {
	flex: 1 1 auto;
	min-width: 0;
}

.ems-joblist__actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.ems-joblist__actions .ems-button {
	width: auto;
	min-width: 84px;
	height: 100%;
}

@media (max-width: 32rem) {
	.ems-joblist__row {
		flex-direction: column;
		gap: 6px;
	}

	.ems-joblist__actions .ems-button {
		width: 100%;
		height: auto;
		min-height: 42px;
	}
}

/* ─────────────────────────────────────────────
   勤務枠の見出しとコピーボタン
   ───────────────────────────────────────────── */
.ems-shift__copy {
	margin-left: auto;
	margin-right: 12px;
	padding: 4px 12px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border-strong);
	border-radius: var(--ems-radius-sm);
	color: var(--ems-primary-dark);
	font-family: inherit;
	font-size: var(--fs-meta);
	font-weight: 600;
	cursor: pointer;
}

.ems-shift__copy:hover,
.ems-shift__copy:focus-visible {
	background: var(--ems-primary-light);
	border-color: var(--ems-primary);
}

.ems-shift__copy[hidden] {
	display: none;
}

/* ─────────────────────────────────────────────
   カードの見出しと、右側の操作ボタン
   ───────────────────────────────────────────── */
.ems-cardhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.ems-cardhead .ems-card__title {
	margin: 0;
}

.ems-cardhead__action {
	width: auto;
	min-width: 0;
	flex: 0 0 auto;
	padding: 8px 16px;
	min-height: 40px;
	font-size: var(--fs-small);
}

@media (max-width: 32rem) {
	.ems-cardhead__action {
		width: 100%;
	}
}

/* カードの中の小見出し */
.ems-subhead {
	margin: 26px 0 10px;
	padding-top: 18px;
	border-top: 1px solid var(--ems-border);
	font-size: var(--fs-card);
	font-weight: 700;
	line-height: 1.4;
}

.ems-subhead:first-of-type {
	margin-top: 18px;
}

/* ─────────────────────────────────────────────
   資格をまとめて登録する欄
   ───────────────────────────────────────────── */
.ems-newlicenses__rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 14px;
}

.ems-newlicense {
	padding: 14px;
	background: var(--ems-surface-alt);
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius);
}

.ems-newlicense__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ems-border);
}

.ems-newlicense__title {
	font-size: var(--fs-small);
	font-weight: 700;
}

.ems-newlicense__remove {
	padding: 4px 10px;
	background: none;
	border: 1px solid var(--ems-border-strong);
	border-radius: var(--ems-radius-sm);
	color: var(--ems-danger);
	font-family: inherit;
	font-size: var(--fs-meta);
	cursor: pointer;
}

.ems-newlicense__remove:hover {
	background: var(--ems-danger-bg);
	border-color: var(--ems-danger);
}

.ems-newlicense__remove[hidden] {
	display: none;
}

/* 新規登録は枠なしのカードなので、最初の小見出しの上線を消す */
.ems-register .ems-subhead:first-of-type {
	margin-top: 8px;
	padding-top: 0;
	border-top: none;
}

/* 報酬一覧の中の書類リンク */
.ems-doclink {
	display: inline-block;
	margin-top: 4px;
	color: var(--ems-primary-dark);
	text-decoration: underline;
}

/* 発行済み書類の補助行（作り直し） */
.ems-doclist__sub {
	padding: 0 0 12px;
	border-bottom: 1px solid var(--ems-border);
	text-align: right;
}

.ems-doclist__sub .ems-linkbutton {
	background: none;
	border: none;
	padding: 0;
	color: var(--ems-text-muted);
	font-family: inherit;
	font-size: var(--fs-meta);
	text-decoration: underline;
	cursor: pointer;
}

.ems-doclist__sub .ems-linkbutton:hover {
	color: var(--ems-primary-dark);
}

/* 指名する会員の選択欄（事務局の勤務枠エディタ） */
.ems-invite-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 4px 12px;
	max-height: 220px;
	overflow-y: auto;
	padding: 10px 12px;
	background: var(--ems-surface);
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius-sm);
}

.ems-invite-picker .ems-inline-check {
	margin-right: 0;
}

.ems-invite-picker small {
	margin-left: 6px;
	color: var(--ems-text-faint);
	font-size: var(--fs-caption);
}

/* ─────────────────────────────────────────────
   五十音で絞り込む帯
   ───────────────────────────────────────────── */
.ems-kanabar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	padding: 6px;
	background: var(--ems-surface-alt);
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius);
}

.ems-kanabar__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 40px;
	padding: 4px 10px;
	border-radius: var(--ems-radius-sm);
	color: var(--ems-text);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
}

.ems-kanabar__item:hover {
	background: var(--ems-surface);
	color: var(--ems-primary-dark);
}

.ems-kanabar__item.is-active {
	background: var(--ems-primary);
	color: #ffffff;
}

/* ─────────────────────────────────────────────
   事務局ポータル：情報の密度を上げる

   事務局はPCの大きな画面で、座って長時間使う。会員マイページ
   （スマートフォンの指操作が前提）と同じ余白のままだと、
   1画面に入る情報が少なく、案件の入力画面が延々と縦に伸びる。

   ここは 1024px 以上の .ems-staff にだけ効く。スマートフォンでの
   タップしやすさは会員側と同じまま残す。

   このファイルの後ろに置いてあるのは、前に書いた
   「.ems-staff .ems-card { padding: 22px 24px }」など、
   余白を広げていた指定を打ち消すため。
   ───────────────────────────────────────────── */
@media (min-width: 1024px) {
	.ems-staff .ems-app,
	.ems-staff {
		--ems-gap: 14px;
	}

	/* ── 器 ── */
	.ems-staff .ems-shell {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 24px;
	}

	.ems-staff .ems-nav__item {
		min-height: 36px;
		padding: 6px 12px;
		font-size: var(--fs-meta);
	}

	.ems-staff .ems-screen-head {
		margin-bottom: 10px;
	}

	.ems-staff .ems-screen-head .ems-heading {
		font-size: 19px;
	}

	.ems-staff .ems-screen-head .ems-text-dim {
		margin-top: 2px;
		font-size: var(--fs-meta);
	}

	/* ── カード ── */
	.ems-staff .ems-card {
		padding: 12px 16px;
	}

	.ems-staff .ems-card__title {
		margin-bottom: 8px;
		padding-bottom: 6px;
		font-size: 14px;
	}

	.ems-staff .ems-subheading {
		margin: 10px 0 3px;
		font-size: 13px;
	}

	.ems-staff .ems-text-dim {
		font-size: var(--fs-meta);
	}

	/* ── 入力欄 ── */
	.ems-staff .ems-field {
		margin-bottom: 10px;
	}

	.ems-staff .ems-field__label,
	.ems-staff .ems-label {
		margin-bottom: 3px;
		font-size: var(--fs-meta);
	}

	.ems-staff .ems-field__hint,
	.ems-staff .ems-hint {
		margin-top: 2px;
		font-size: 12px;
		line-height: 1.45;
	}

	/*
	 * 16px は iOS の自動ズーム対策。PCでは要らないので詰める。
	 * 高さも、指ではなくマウスで狙う前提の 34px まで落とす。
	 */
	.ems-staff input[type="text"],
	.ems-staff input[type="search"],
	.ems-staff input[type="tel"],
	.ems-staff input[type="email"],
	.ems-staff input[type="number"],
	.ems-staff input[type="date"],
	.ems-staff input[type="time"],
	.ems-staff input[type="url"],
	.ems-staff input[type="password"],
	.ems-staff select,
	.ems-staff textarea {
		min-height: 34px;
		padding: 5px 9px;
		font-size: var(--fs-small);
	}

	.ems-staff textarea {
		min-height: 62px;
	}

	.ems-staff input[type="file"] {
		padding: 4px 0;
		font-size: var(--fs-meta);
	}

	.ems-staff .ems-check {
		min-height: 28px;
		font-size: var(--fs-small);
	}

	/* ── ボタン ── */
	.ems-staff .ems-button {
		width: auto;
		min-height: 34px;
		padding: 5px 16px;
		font-size: var(--fs-small);
	}

	.ems-staff .ems-actions {
		margin: 0 0 10px;
	}

	/* ログイン画面は押す場所が1つしかないので、横いっぱいのまま残す */
	.ems-staff .ems-login .ems-button {
		width: 100%;
		min-height: 44px;
	}

	.ems-staff .ems-actions .ems-button {
		min-width: 0;
	}

	/* ── 表 ── */
	.ems-staff .ems-table {
		font-size: var(--fs-meta);
	}

	.ems-staff .ems-table th,
	.ems-staff .ems-table td {
		padding: 6px 10px;
	}

	/* ── ダッシュボードのタイル ── */
	.ems-staff .ems-stat {
		padding: 10px 14px;
	}

	.ems-staff .ems-stat__value {
		font-size: 26px;
	}

	/* ── 案件一覧 ── */
	.ems-staff .ems-joblist__item {
		padding: 8px 14px;
	}

	/* ── 勤務枠エディタ ── */
	.ems-staff .ems-shifts__rows {
		gap: 10px;
		margin-bottom: 10px;
	}

	.ems-staff .ems-shift {
		padding: 10px 12px;
	}

	.ems-staff .ems-shift__head {
		margin-bottom: 8px;
		padding-bottom: 6px;
	}

	.ems-staff .ems-shift__grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 8px 12px;
	}

	.ems-staff .ems-shift__label {
		margin-bottom: 2px;
		font-size: 12px;
	}

	/*
	 * 長文欄も列に落とす。2列で1列あたり 370px 以上あり、数行の入力には
	 * 十分。全幅のまま縦に積むと、持ち物・服装・備考だけで画面1つぶんの
	 * 高さになっていた。
	 */
	.ems-staff .ems-form .ems-card > .ems-field:has(textarea) {
		grid-column: auto;
	}

	.ems-staff .ems-form .ems-card > .ems-field > textarea {
		max-width: 100%;
	}

	/* ── 明細・調整額の確認 ── */
	.ems-staff .ems-expense-review {
		margin: 8px 0;
		padding: 8px 10px;
	}

	.ems-staff .ems-expense-review__row {
		padding: 6px 0;
	}
}

@media (min-width: 1600px) {
	/* 広い画面でもメニューは太らせない。本体に幅を回す */
	.ems-staff .ems-shell {
		grid-template-columns: 216px minmax(0, 1fr);
		gap: 28px;
	}
}

/*
 * 広い画面では、案件フォームの入力項目を3列・4列へ流す。
 * 項目そのものは短いので、2列のままだと右側が空くだけで
 * 縦の長さが減らない。長文欄（textarea）は全幅のまま。
 */
@media (min-width: 1440px) {
	.ems-staff .ems-form .ems-card {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 18px;
	}

	.ems-staff .ems-form .ems-field > .ems-input,
	.ems-staff .ems-form .ems-field > input[type="text"],
	.ems-staff .ems-form .ems-field > input[type="tel"],
	.ems-staff .ems-form .ems-field > input[type="email"],
	.ems-staff .ems-form .ems-field > input[type="url"],
	.ems-staff .ems-form .ems-field > select {
		max-width: 100%;
	}
}

@media (min-width: 1760px) {
	.ems-staff .ems-form .ems-card {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* 長文欄が4列ぶんの幅いっぱいだと、一行が長すぎて読み返せない */
	.ems-staff .ems-form .ems-card > .ems-field:has(textarea) > textarea {
		max-width: 1100px;
	}
}