@charset "UTF-8";

/* ============================================================================
 * 0MADE の画面の土台（全画面共通）
 *
 * デザインの決まり（実装仕様書 9-1）
 *   ・グラデーション・絵文字・影付きのカードの羅列・細い英字フォントは使わない
 *   ・地は白か生成り色（#F6F5F1）、文字は #1E1E1C、強調は紺（#1F3A5F）の1色。線と余白で区切り、角丸は6px
 *   ・フォントはヒラギノ角ゴ / Noto Sans JP。本文と入力欄は16px以上（iPhoneで入力時に勝手に拡大されないように）
 *   ・タップする選択肢・ボタンは高さ48px以上
 * 色は下の変数だけを使う（画面ごとのCSSで新しい色を足さない）。
 * ========================================================================== */

:root {
	--zm-bg: #F6F5F1;          /* 生成り（地） */
	--zm-surface: #FFFFFF;     /* 白（入力欄・区切った面） */
	--zm-text: #1E1E1C;        /* 文字 */
	--zm-muted: #66645E;       /* 補足の文字 */
	--zm-line: #D8D5CC;        /* 線 */
	--zm-line-strong: #A9A59A; /* 強めの線（入力欄の枠） */
	--zm-accent: #1F3A5F;      /* 強調（紺） */
	--zm-accent-soft: #E6EBF1; /* 強調の薄い面（選択中の選択肢） */
	--zm-ok: #2F6B4F;          /* 状態：よい（緑） */
	--zm-ok-soft: #E4EFE8;
	--zm-warn: #7A5A12;        /* 状態：注意（黄） */
	--zm-warn-soft: #FBF1D6;
	--zm-danger: #A23B2A;      /* 状態：要対応・エラー（赤） */
	--zm-danger-soft: #F7E3DE;
	--zm-radius: 6px;
	--zm-tap: 48px;            /* タップできる高さの最小 */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--zm-bg);
	color: var(--zm-text);
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: 0.02em;
}

a {
	color: var(--zm-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-thickness: 2px;
}

h1, h2, h3 {
	margin: 0 0 12px;
	font-weight: 700;
	line-height: 1.4;
}

h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 17px; }

p {
	margin: 0 0 12px;
}

img {
	max-width: 100%;
}

/* 数字（申込番号・時間・件数）は桁をそろえる */
.zm-num {
	font-variant-numeric: tabular-nums;
}

.zm-muted {
	color: var(--zm-muted);
}

.zm-small {
	font-size: 14px;
}

.zm-hidden {
	display: none !important;
}

/* 画面の読み上げだけに出す */
.zm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ============================================================================
 * ボタン
 * ========================================================================== */

.zm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--zm-tap);
	padding: 10px 20px;
	border: 1px solid var(--zm-accent);
	border-radius: var(--zm-radius);
	background: var(--zm-surface);
	color: var(--zm-accent);
	font: inherit;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.zm-btn:hover {
	background: var(--zm-accent-soft);
	text-decoration: none;
}

.zm-btn:focus-visible,
.zm-choice input:focus-visible + span,
.zm-input:focus {
	outline: 3px solid rgba(31, 58, 95, 0.35);
	outline-offset: 1px;
}

/* 主な操作（1画面に1つを目安） */
.zm-btn--primary {
	background: var(--zm-accent);
	color: #FFFFFF;
}

.zm-btn--primary:hover {
	background: #18304F;
}

/* 取り消し・中止など（赤の文字。押す前に確認ダイアログを出す） */
.zm-btn--danger {
	border-color: var(--zm-danger);
	color: var(--zm-danger);
}

.zm-btn--danger:hover {
	background: var(--zm-danger-soft);
}

/* 目立たせない操作 */
.zm-btn--plain {
	border-color: var(--zm-line-strong);
	color: var(--zm-text);
	font-weight: 500;
}

.zm-btn--plain:hover {
	background: #EFEDE7;
}

.zm-btn--small {
	min-height: 40px;
	padding: 6px 14px;
	font-size: 15px;
}

.zm-btn--block {
	display: flex;
	width: 100%;
}

.zm-btn[disabled],
.zm-btn.is-disabled {
	border-color: var(--zm-line);
	background: #EFEDE7;
	color: #9A978F;
	cursor: not-allowed;
}

/* 送信中（二重送信の防止。common.js の startProcessing） */
.mb-btn-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ============================================================================
 * 入力欄
 * ========================================================================== */

.zm-field {
	margin-bottom: 20px;
}

.zm-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
}

.zm-required {
	margin-left: 8px;
	padding: 0 6px;
	border: 1px solid var(--zm-danger);
	border-radius: 4px;
	color: var(--zm-danger);
	font-size: 13px;
	font-weight: 700;
	vertical-align: 2px;
}

.zm-optional {
	margin-left: 8px;
	color: var(--zm-muted);
	font-size: 14px;
	font-weight: 500;
}

.zm-note {
	margin: 4px 0 0;
	color: var(--zm-muted);
	font-size: 14px;
}

.zm-input {
	display: block;
	width: 100%;
	min-height: var(--zm-tap);
	padding: 10px 12px;
	border: 1px solid var(--zm-line-strong);
	border-radius: var(--zm-radius);
	background: var(--zm-surface);
	color: var(--zm-text);
	font: inherit;
	font-size: 16px;
}

textarea.zm-input {
	min-height: 120px;
	resize: vertical;
}

.zm-input::placeholder {
	color: #9A978F;
}

.zm-input.is-invalid {
	border-color: var(--zm-danger);
	border-width: 2px;
}

/* 欄のすぐ上に1行で出すエラー */
.zm-field-error {
	margin: 0 0 6px;
	color: var(--zm-danger);
	font-size: 15px;
	font-weight: 700;
}

/* パスワードの表示切り替え（common.js の setupPasswordToggle） */
.mb-password-wrap {
	position: relative;
}

.mb-password-wrap .zm-input {
	padding-right: 72px;
}

.mb-password-toggle {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 60px;
	height: 40px;
	border: 0;
	border-radius: var(--zm-radius);
	background: transparent;
	color: var(--zm-accent);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

/* ============================================================================
 * 選択肢（縦に並ぶ大きなボタン。ラジオボタンを隠して、枠全体をタップできるようにする）
 * ========================================================================== */

.zm-choice-list {
	display: grid;
	gap: 8px;
}

.zm-choice-list--2col {
	grid-template-columns: 1fr 1fr;
}

.zm-choice-list--3col {
	grid-template-columns: 1fr 1fr 1fr;
}

/* 色合い（選ぶものが多いため、スマホでも3列に収まるよう詰める） */
.zm-choice-list--color .zm-choice span {
	gap: 8px;
	min-height: 48px;
	padding: 8px 10px;
	white-space: nowrap;
}

.zm-choice-list--color .zm-choice input:checked + span {
	padding: 7px 9px;
}

.zm-choice {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}

.zm-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.zm-choice span {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 14px;
	border: 1px solid var(--zm-line-strong);
	border-radius: var(--zm-radius);
	background: var(--zm-surface);
	font-weight: 500;
}

/* 選択中（色だけでなく、左の印と太字でも示す） */
.zm-choice input:checked + span {
	border: 2px solid var(--zm-accent);
	padding: 9px 13px;
	background: var(--zm-accent-soft);
	font-weight: 700;
}

.zm-choice span::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--zm-line-strong);
	border-radius: 50%;
	background: var(--zm-surface);
}

.zm-choice input:checked + span::before {
	border: 6px solid var(--zm-accent);
}

/* 色合いの見本 */
.zm-swatch {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

/* ============================================================================
 * 区切り・お知らせ
 * ========================================================================== */

.zm-section {
	padding: 20px;
	border: 1px solid var(--zm-line);
	border-radius: var(--zm-radius);
	background: var(--zm-surface);
	margin-bottom: 16px;
}

.zm-section__title {
	margin: 0 0 12px;
	font-size: 18px;
}

.zm-notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-left: 4px solid var(--zm-accent);
	border-radius: 0 var(--zm-radius) var(--zm-radius) 0;
	background: var(--zm-accent-soft);
}

.zm-notice--warn {
	border-left-color: var(--zm-warn);
	background: var(--zm-warn-soft);
}

.zm-notice--danger {
	border-left-color: var(--zm-danger);
	background: var(--zm-danger-soft);
}

.zm-notice--ok {
	border-left-color: var(--zm-ok);
	background: var(--zm-ok-soft);
}

/* エラーメッセージ・完了メッセージ（common/block/messageDisp） */
.mb-err-msg-area {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-left: 4px solid var(--zm-danger);
	background: var(--zm-danger-soft);
	color: var(--zm-danger);
	font-weight: 700;
}

.mb-success-msg-area {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-left: 4px solid var(--zm-ok);
	background: var(--zm-ok-soft);
	color: var(--zm-ok);
	font-weight: 700;
}

/* 状態の印（色だけでなく文字でも示す） */
.zm-badge {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid var(--zm-line-strong);
	border-radius: 4px;
	background: var(--zm-surface);
	color: var(--zm-text);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.zm-badge--accent { border-color: var(--zm-accent); color: var(--zm-accent); background: var(--zm-accent-soft); }
.zm-badge--ok     { border-color: var(--zm-ok); color: var(--zm-ok); background: var(--zm-ok-soft); }
.zm-badge--warn   { border-color: var(--zm-warn); color: var(--zm-warn); background: var(--zm-warn-soft); }
.zm-badge--danger { border-color: var(--zm-danger); color: var(--zm-danger); background: var(--zm-danger-soft); }
.zm-badge--muted  { border-color: var(--zm-line); color: var(--zm-muted); background: #EFEDE7; }

/* ============================================================================
 * 表
 * ========================================================================== */

.zm-table-wrap {
	overflow-x: auto;
}

.zm-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--zm-surface);
}

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

.zm-table th {
	background: #EFEDE7;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

/* 項目名と値の一覧 */
.zm-dl {
	display: grid;
	grid-template-columns: 9em 1fr;
	gap: 8px 16px;
	margin: 0;
}

.zm-dl dt {
	color: var(--zm-muted);
	font-weight: 700;
}

.zm-dl dd {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
}

@media (max-width: 600px) {
	.zm-dl {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.zm-dl dd {
		margin-bottom: 10px;
	}
}

/* ============================================================================
 * 処理中の表示（common.js の showLoading / hideLoading）
 * ========================================================================== */

.mb-loading {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 2000;
}

.mb-loading-overlay {
	position: absolute;
	inset: 0;
	background: rgba(246, 245, 241, 0.75);
}

.mb-loading-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 200px;
	padding: 18px 24px;
	border: 1px solid var(--zm-line);
	border-radius: var(--zm-radius);
	background: var(--zm-surface);
	text-align: center;
}

.mb-loading-bar {
	position: relative;
	height: 4px;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--zm-accent-soft);
}

.mb-loading-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	width: 40%;
	height: 100%;
	background: var(--zm-accent);
	animation: zm-loading-bar 1.2s linear infinite;
}

@keyframes zm-loading-bar {
	to { left: 100%; }
}

.mb-loading-text {
	font-weight: 700;
}

/* ============================================================================
 * 確認・お知らせのダイアログ（common.js の $.customConfirm / $.customAlert。<dialog> を使う）
 * ========================================================================== */

.zm-dialog {
	width: min(92vw, 440px);
	padding: 0;
	border: 1px solid var(--zm-line-strong);
	border-radius: var(--zm-radius);
	background: var(--zm-surface);
	color: var(--zm-text);
}

.zm-dialog::backdrop {
	background: rgba(30, 30, 28, 0.45);
}

.zm-dialog__body {
	padding: 24px 20px 12px;
	white-space: pre-wrap;
	text-align: center;
}

.zm-dialog__foot {
	display: flex;
	gap: 8px;
	padding: 12px 20px 20px;
}

.zm-dialog__foot .zm-btn {
	flex: 1;
}

/* トースト（jquery-toast-plugin） */
.jq-toast-single {
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	border-radius: var(--zm-radius) !important;
}

/* ============================================================================
 * ページャー（common/pager）
 * ========================================================================== */

.mng-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 16px 0;
}

.mng-pager__cnt {
	margin-right: 8px;
	color: var(--zm-muted);
	font-size: 14px;
}