@charset "utf-8";
/* ==========================================================================
   関の工場参観日 予約システム プロトタイプ v1.3
   common.css ─ フロント / 事業所管理 の両方で使う共通スタイル
   読み込み順： common.css → admin.css（事業所）
   ※ reservation/ 用に web-ui/common/css/common.css から移植。
   　 プロトタイプ専用の画面切替(.switcher/.screen)は削除し、
   　 末尾に会員側で使う旧クラスを引き継いでいる。
   ========================================================================== */

/* ── デザイントークン ─────────────────────────────────────────
   公式サイト kojosankanbi.jp の実装CSSから抽出した値をそのまま採用する。
     メインカラー #38d430 / テキスト #121212 / 背景 #f4f4f4
     角丸 6px（カード）・ピル（ボタン） / 影なし / 罫線 rgba(18,18,18,.2)
   #38d430 は白に対し 1.98:1 しかないため「塗り」専用。
   文字色・細い罫線には同じ色相(H117/S65.6%)で明度だけ落とした派生色を使う。
   併記した比率は WCAG 2.1 相対輝度式の実測値。 */
:root {
	/* グリーンスケール（#38d430 を基準に明度のみ変化させた派生） */
	--g-50: #ebfbea; /* 淡背景。#121212 の文字で 17.41:1 */
	--g-100: #cef4cc; /* 帯・テーブル見出し地。#121212 で 15.55:1 */
	--g-400: #32b92b; /* ★メインカラー。フロント・事業所管理で共通。塗り専用。
	                     白文字とのコントラストは 2.59:1 で、WCAG AA(4.5:1) には届いていない。
	                     短いボタンラベル程度なら実用範囲だが、本文・注記は載せないこと。
	                     文字も AA を満たすなら #268821（4.54:1／同じ色相・彩度で最も明るい）。 */
	--g-600: #2aa923; /* 非テキストの罫線・アイコン。白に 3.09:1（WCAG 1.4.11）*/
	--g-700: #1f7f1a; /* リンク・小見出し・進捗バー。白に 5.11:1 */
	--g-800: #134c10; /* 白文字を載せる地。10.15:1 */
	--g-900: #0d330b; /* フッター地・フォーカスリング。14.04:1 */

	--ink: #121212; /* 公式の本文色。白に 18.73:1 */
	--white: #ffffff;
	--bg: #f3f3f3; /* 公式の背景グレー */
	--bg-subtle: #fafbfa; /* ごく淡いグレー。表の縞（偶数行） */
	--gray: #595959; /* 7.00:1 */
	--mgray: #6b6b6b; /* 5.33:1 */
	--lgray: #e5e5e5; /* 罫線・溝など非テキスト専用 */
	--lgray-d: #8a8a8a; /* 無効状態の枠線（非テキスト 3:1 確保）*/
	--border: rgba(18, 18, 18, 0.2); /* 公式のヘアライン */
	--red: #c0392b; /* 5.44:1 */
	--orange: #c43f00; /* 公式アクセント #ff4e00 を文字に使える明度へ。5.17:1 */
	--amber: #ebb700; /* 「残りわずか」の塗り。デジタル庁 Yellow-500。
	                     溝 #e5e5e5 に 1.47:1 で 3:1 は満たさないが、
	                     バーのすぐ右に件数・人数を併記しているため
	                     ダッシュボードガイドブック p37 の例外に当たる。
	                     数値の併記をやめるならこの色は使えない。 */
	--yellow: #f5a623; /* 非テキストの注意色のみ */
	--focus: #0d330b; /* フォーカスリング外側 14.04:1 */
	--focus-in: #ffffff; /* 濃色ボタン上で使う内側リング */

	--inner: 1100px; /* ヘッダーと本文で共有するインナー幅。片方だけ変えて
	                    端がずれるのを防ぐため、必ずこのトークンを参照すること */

	--radius: 6px; /* 公式のカード角丸 */
	--radius-pill: 999px;
	--shadow: none; /* 公式サイトは影を一切使わない */

	--font-sans: "Noto Sans JP", "游ゴシック", "メイリオ", "ヒラギノ角ゴ Pro W3", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
	--font-cond: "Roboto Condensed", "Roboto", "Helvetica Neue", "Segoe UI", Arial, sans-serif;

	/* ── 旧トークン名の別名（既存の var(--green) 等を壊さないため）── */
	--text: var(--ink);
	--green: var(--g-400);
	--green2: var(--g-800);
	--green3: var(--g-50);
	--green4: var(--g-100);
	--accent: var(--g-700);

	/* リンク色（会員側・事業所側共通）。白地に対し 3.2:1 で AA(4.5:1) 未満のため、リンクには必ず下線を付けること */
	--link: #009fe8;
	--link-hover: #1f6fa8;
}

/* ── リセット ──
   会員側は WordPress テーマのヘッダー・フッターと同じページに載るため、
   要素セレクタは事業所側（body.corporate）と会員側の本文（.reservation-main）に限定する。
   :where() で包んでいるので詳細度は元の要素セレクタと同じ（クラス指定より弱い）まま。 */
:where(body.corporate, .reservation-main),
:where(body.corporate, .reservation-main) * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body.corporate {
	-webkit-text-size-adjust: 100%;
}
/* 背景・文字の基本設定。会員側は main の中だけ（ヘッダー・フッターは WP テーマの白背景のまま） */
body.corporate,
.reservation-main {
	font-family: var(--font-sans);
	background: var(--bg);
	color: var(--text);
	font-size: 14px;
	line-height: 1.7;
}

/* 見出しをタグ化しても見た目が変わらないようにする。
   これが無いと <div class="card-title"> を <h2> にした瞬間 font-size が 2em になる。
   必ずコンポーネント定義より前に置くこと。 */
:where(body.corporate, .reservation-main) :is(h1, h2, h3, h4, h5, h6) {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}
:where(body.corporate, .reservation-main) :is(ul, ol) {
	list-style: none;
}
:where(body.corporate, .reservation-main) fieldset {
	border: 0;
}
:where(body.corporate, .reservation-main) legend {
	padding: 0;
}
:where(body.corporate, .reservation-main) table {
	border-collapse: collapse;
}
:where(body.corporate, .reservation-main) img {
	max-width: 100%;
	height: auto;
}

/* JS で hidden を付けた要素を、display 指定のあるクラスより優先して隠すため !important */
[hidden] {
	display: none !important;
}

/* ── フォーカス可視化 ──────────────────────────────────────────
   旧 .f-input:focus は outline:none ＋ 光彩 #e8f0eb（白に対し 1.16:1）で
   実質不可視だった。二重リングにして白背景でも緑ボタン上でも見えるようにする。 */
:where(body.corporate, .reservation-main) :focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 1px;
}
.btn:focus-visible {
	outline: 3px solid var(--focus-in);
	outline-offset: 0;
	box-shadow: 0 0 0 6px var(--focus);
}

/* ── 別タブで開くリンク ──────────────────────────────────────
   【4-7】新規タブが開くことを目で見て分かるようにする。
   .sr-only の「（新しいタブで開きます）」だけだと読み上げ利用者にしか伝わらない。
   アイコンフォントが落ちても消えないよう、Unicode の矢印を使う。 */
:where(body.corporate, .reservation-main) a[target="_blank"]::after {
	content: "\2197";
	display: inline-block;
	margin-left: 0.25em;
	font-size: 0.85em;
	text-decoration: none;
	vertical-align: baseline;
}

/* ── スクリーンリーダー用 ── */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
}
.skip-link:focus {
	position: static;
	display: block;
	background: var(--g-800);
	color: var(--white);
	padding: 12px 20px;
	text-align: center;
	font-weight: 700;
	text-decoration: none;
}

/* ── アイコン（Font Awesome）────────────────────────────────────
   CDN が落ちても意味が失われないよう、アイコンには必ず .sr-only の
   テキストを併記すること。本実装時は同梱版に差し替え可能。 */
.icon {
	width: 1.15em;
	text-align: center;
	margin-right: 0.4em;
	flex-shrink: 0;
}
.icon-only {
	margin-right: 0;
}

/* ── ヘッダー ── */
.site-header {
	background: var(--white);
	border-bottom: 4px solid var(--g-400);
	padding: 0;
}
.header-inner {
	max-width: var(--inner);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	gap: 16px;
}
.logo {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.logo-ja {
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: 0.12em;
}
.logo-en {
	font-family: var(--font-cond);
	font-size: 10px;
	color: var(--mgray);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
/* nav は狭い画面で横スクロールする。ログインCTAはこの外側に置くこと（front.css）。
   min-width:0 が無いと nav の中身の最小幅で flex アイテムが押し広がり、
   overflow-x が効かずにヘッダー全体がはみ出す。 */
.header-nav {
	display: flex;
	gap: 24px;
	align-items: center;
	min-width: 0;
}
.header-nav a {
	font-size: 13px;
	color: var(--text);
	text-decoration: none;
	padding: 11px 2px;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.header-nav a:hover {
	color: var(--g-700);
	text-decoration: underline;
}

/* ── カード ── */
/* 枠線は置かない。地色（白）と背景（--bg）の明度差で塊は読めるので、
   枠線は情報を足しておらず、線が増えるほど視線が止まる場所が増える。 */
.card {
	background: var(--white);
	border-radius: var(--radius);
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: var(--shadow);
}
.card-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--lgray);
}
/* 見出しは太字＋下線で示す（左の縦棒による強調は使わない方針） */
.info-box {
	background: #fffbeb;
	border-radius: var(--radius);
	padding: 12px 16px;
	font-size: 13px;
	color: #8b4513;
	margin-bottom: 16px;
}

/* ── 進捗バーの塗り色 ────────────────────────────────────────
   緑＝余裕 / 黄＝残りわずか / 赤＝逼迫 の信号機の並びにする。
   以前の「残りわずか」は #c43f00 で、逼迫の #c0392b との差が 1.05:1 しかなく、
   2段階が実質同じ色に見えていた。黄色にすると赤との差が 2.93:1 になる。

   クラス名は色ではなく状態で持つ。色を変えるたびに名前が嘘になるため。 */
.cap-ok {
	background: var(--g-700);
} /* 溝 #e5e5e5 に対し 4.06:1。明るい緑 #32b92b は 1.57:1 で不可 */
.cap-warn {
	background: var(--amber);
} /* 溝に 1.47:1。件数の併記が前提（--amber のコメント参照）*/
.cap-danger {
	background: var(--red);
} /* 溝 #e5e5e5 に対し 4.32:1 */

/* ── ボタン ── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 22px;
	border-radius: var(--radius);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--font-sans);
	border: none;
	text-decoration: none;
	white-space: nowrap;
	min-height: 44px;
	transition:
		background-color 0.15s,
		border-color 0.15s,
		color 0.15s;
}
.btn-primary {
	background: var(--g-400);
	color: var(--white);
} /* 公式メインカラー＋白文字 */
/* hover は明るくせず暗い側へ。#2aa923 だと白文字が 3.09:1 で AA を割る */
.btn-primary:hover {
	background: var(--g-700);
}
.btn-outline {
	background: var(--white);
	border: 2px solid var(--g-700);
	color: var(--g-700);
}
.btn-outline:hover {
	background: var(--g-50);
}
.btn-gray {
	background: var(--white);
	border: 1px solid var(--border);
	color: var(--gray);
}
.btn-gray:hover {
	border-color: var(--g-600);
	color: var(--g-700);
}
.btn-danger {
	background: var(--red);
	color: var(--white);
}
.btn-danger:hover {
	background: #a32320;
}
.btn-sm {
	padding: 8px 14px;
	font-size: 12px;
	min-height: 44px;
}
.btn-full {
	width: 100%;
}
.btn[disabled],
.btn[aria-disabled="true"] {
	background: #f2f2f0;
	border: 1px solid var(--lgray-d);
	color: var(--gray);
	cursor: not-allowed;
}
.btn[disabled]:hover {
	background: #f2f2f0;
	color: var(--gray);
}
.btn-plain {
	background: none;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	cursor: pointer;
}

/* ── フォーム ── */
.f-group {
	margin-bottom: 18px;
}
.f-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 5px;
}
.f-req {
	color: var(--red);
	font-size: 11px;
	margin-left: 4px;
	font-weight: 700;
}
.f-opt {
	color: var(--mgray);
	font-size: 11px;
	margin-left: 4px;
}
.f-input {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 16px; /* 16px 未満だと iOS Safari がフォーカス時に自動ズームする */
	min-height: 48px;
	font-family: var(--font-sans);
	background: var(--white);
	transition: border-color 0.15s;
}
textarea.f-input {
	min-height: 0;
}
/* 入力欄は外側にリングを出さず、欄の内側に 2px のリングを描く。
   内側なので欄の寸法が動かず、隣のラベルやボタンにも被らない。
   ボタン・リンク・チェックボックスは外側リングのまま（小さい要素は内側だと潰れる）。 */
.f-input:focus,
.f-input:focus-visible {
	outline: none;
	border-color: var(--g-700);
	box-shadow: inset 0 0 0 2px var(--g-700);
}
/* エラー中の欄はフォーカスしても赤のまま。緑に変わると直ったように見えてしまう */
.f-input[aria-invalid="true"]:focus,
.f-input[aria-invalid="true"]:focus-visible {
	border-color: var(--red);
	box-shadow: inset 0 0 0 2px var(--red);
}
.f-hint {
	font-size: 12px;
	color: var(--mgray);
	margin-top: 5px;
}
.f-select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6b6b'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}
/* 旧プロトタイプは 13px で、指の太い高齢者には小さすぎた。WCAG 2.5.8 の 24px を満たす */
:where(body.corporate, .reservation-main) :is(input[type="checkbox"], input[type="radio"]) {
	width: 18px;
	height: 18px;
	accent-color: var(--g-700);
	flex-shrink: 0;
}

/* ── ラジオの横並び（.f-radios / .f-radio）────────────────────────
   事業所側（参加者一覧の絞り込み）と会員側（予約申込の来場方法）で共通。
   選択色・サイズは上の input[type="radio"] の共通指定（--g-700 / 18px）に従う。*/
/* .f-inline が flex-direction:column なので、ここで明示的に横並びへ戻す */
.f-radios {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2px 16px;
	align-items: center;
	align-self: flex-start;
}
.f-radios .f-label {
	flex: 1 1 100%;
	margin-bottom: 2px;
}
/* 会員側は WP テーマの label / input の指定と同じページに載るため、
   .f-radios .f-radio と2クラス重ねて詳細度を上げ、テーマ側の指定に負けないようにする */
.f-radios .f-radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1.4;
	min-height: 44px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
/* テーマ側で付いている余白・位置ずらし・縦位置を打ち消し、ラベルの文字と中心をそろえる */
.f-radios .f-radio input[type="radio"] {
	margin: 0;
	position: static;
	top: auto;
	vertical-align: middle;
	flex-shrink: 0;
}
@media (max-width: 600px) {
	.f-radios {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
}

/* パスワード表示切替 */
.f-wrap-pw {
	position: relative;
}
.f-wrap-pw .f-input {
	padding-right: 58px;
}
/* ── パスワードの表示切替 ──────────────────────────────────────
   目のアイコン1つで表す。アイコンだけだと意味が伝わらないので
   title（ツールチップ）と .sr-only のラベルを必ず併記する。
   オン／オフは「アイコンの形」「枠と地の有無」「aria-pressed」の
   3つで表し、色だけに頼らない（1-9 フリップフロップ対策）。 */
.pw-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius);
	color: var(--g-700);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}
.pw-toggle:hover {
	background: var(--g-50);
	border-color: var(--g-100);
}
.pw-toggle:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 1px;
}
/* オン（表示中）＝オフの見た目に「枠」と「地」を足した状態 */
.pw-toggle[aria-pressed="true"] {
	background: var(--g-50);
	border-color: var(--g-400);
	color: var(--g-800);
}

/* ── エラー表示（旧プロトタイプには CSS 自体が存在しなかった）── */
.f-input[aria-invalid="true"] {
	border-color: var(--red);
	border-width: 2px;
	background: #fff8f8;
}
.f-error {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #a3251a;
	margin-top: 5px;
	font-weight: 700;
}
.form-error-summary {
	border: 2px solid var(--red);
	background: #fef5f5;
	padding: 14px 16px;
	margin-bottom: 18px;
}
.form-error-summary strong {
	display: block;
	font-size: 14px;
	color: #a3251a;
	margin-bottom: 6px;
}
/* 誤りのある項目へのリンク一覧（押すとその欄へ移動する） */
.form-error-summary ul {
	margin: 0;
	padding-left: 1.4em;
	list-style: disc;
	font-size: 13px;
}
.form-error-summary li + li {
	margin-top: 4px;
}
.form-error-summary a {
	color: #a3251a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── 状態表示 ── */
.badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	min-width: 100px;
	text-align: center;
}
/* 以前の運用の「申込済」（未確定の状態）用。今は申込済も確定（.badge-confirmed）で表示するため予約ステータスでは使っていない。
   以前は淡い緑で、マイページの予約カード見出し（--g-50 の淡い緑）と同化して読めなかったため黄系にした */
.badge-ok {
	background: #fef3c7;
	color: #92400e;
} /* 7.1:1 */
.badge-ng {
	background: #fee2e2;
	color: #991b1b;
} /* 6.80:1 */
/* 確定。キャンセル待ち（黄）・キャンセル（赤）と見分けるため青系にする */
.badge-confirmed {
	background: #dbeafe;
	color: #1e40af;
} /* 7.53:1 */
/* キャンセル待ち。確定（青）・キャンセル（赤）と見分けるため、以前の申込済（.badge-ok）と同じ黄系にする */
.badge-wait {
	background: #fef3c7;
	color: #92400e;
} /* 7.1:1 */
.empty-state {
	text-align: center;
	padding: 48px 20px;
	background: var(--white);
}
.empty-ttl {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
}
.empty-tips {
	font-size: 13px;
	color: var(--gray);
	line-height: 2;
	margin-bottom: 16px;
}
.is-busy {
	opacity: 0.6;
	pointer-events: none;
}
.unit {
	font-size: 14px;
	font-weight: 400;
	margin-left: 2px;
	color: var(--gray);
}

/* ── 横スクロールさせる領域（テーブル等）── */
.tbl-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ── モーダル ── */
.modal-bg {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 300;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.modal-bg.show {
	display: flex;
}
.modal-box {
	background: var(--white);
	border-radius: var(--radius);
	padding: 26px;
	width: 100%;
	max-width: 440px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.modal-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--lgray);
}
.modal-btns {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 18px;
	flex-wrap: wrap;
}
body.modal-open {
	overflow: hidden;
}

/* ── フッター ── */
.site-footer {
	background: var(--g-900);
	color: rgba(255, 255, 255, 0.88);
	font-size: 11px;
	text-align: center;
	padding: 16px;
}

/* ── レスポンシブ（共通シェル）───────────────────────────────── */
@media (max-width: 767px) {
	/* 1段目＝ロゴ＋ログインCTA、2段目＝横スクロールする nav。
     CTA を nav と同じ行に置くと、nav がスクロールした時点で押せなくなる。 */
	.header-inner {
		flex-wrap: wrap;
		row-gap: 8px;
		padding: 12px 16px;
		gap: 10px;
	}
	.logo {
		flex: 1 1 auto;
		min-width: 0;
		order: 1;
	}
	.header-login {
		order: 2;
		flex: 0 0 auto;
	}
	.header-nav {
		order: 3;
		width: 100%;
		gap: 14px;
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	.header-nav a {
		white-space: nowrap;
	}
	.card {
		padding: 16px;
	}
	.modal-btns .btn {
		flex: 1 1 auto;
	}
}
/* 375px ではロゴとCTAが1行に収まらないため、CTAの文言を「ログイン」だけに縮める。
   読み上げには「/ マイページ」を残す（視覚的にだけ隠す）。 */
@media (max-width: 479px) {
	.header-inner {
		padding: 10px 12px;
		gap: 8px;
	}
	.login-long {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}
@media (max-width: 400px) {
	.logo-ja {
		font-size: 16px;
	}
	.logo-en {
		font-size: 9px;
		letter-spacing: 0.12em;
	}
}

/* ── 印刷（共通土台）── */
@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.modal-bg {
		display: none !important;
	}
	body {
		background: var(--white);
		font-size: 10.5pt;
		color: #000;
	}
	.card {
		box-shadow: none;
		border: 1px solid #999;
		break-inside: avoid;
	}
	.btn {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   会員側（旧 common.css から引継ぎ）
   会員テンプレート（user/）が使っていて、新デザインに定義が無いクラス。
   front.css と重複していたもの（.page .steps .conf-tbl .res-* 等）は削除済み。
   残りは現行デザインに対応するクラスが無いもの。
   ========================================================================== */
.sec-label {
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--green);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.sec-title {
	font-family: "Noto Serif JP", serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--green3);
}
.factory-head-img {
	width: 100%;
	height: 200px;
	background: linear-gradient(160deg, #c8dece 0%, #e8f0eb 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	color: var(--green4);
	border-bottom: 1px solid var(--border);
}
.factory-head-body {
	padding: 20px 24px;
}
.factory-tags {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}
.tag-green {
	color: var(--green);
	border-color: var(--green);
	background: var(--green3);
}
.tag-req {
	color: var(--red);
	border-color: #f5c6c6;
	background: #fef5f5;
}
.factory-name {
	font-family: "Noto Serif JP", serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 6px;
}
.factory-meta {
	font-size: 13px;
	color: var(--gray);
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
.factory-meta span {
	display: flex;
	align-items: center;
	gap: 5px;
}
.program-title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.program-meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.chip-req {
	background: #fffbeb;
	color: #7d5c00;
	border-color: #fde68a;
}
.program-desc {
	font-size: 13px;
	color: var(--gray);
	margin-bottom: 14px;
	line-height: 1.8;
}
.cap-green {
	background: var(--green);
}
.cap-orange {
	background: var(--yellow);
}
.cap-red {
	background: var(--red);
}
.btn-line {
	background: #06c755;
	color: var(--white);
}
.btn-line:hover {
	background: #05a844;
}
.f-static {
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 14px;
	background: var(--bg, #f7f7f7);
	color: var(--text);
	word-break: break-all;
	min-height: 20px;
}
.divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	color: var(--mgray);
	font-size: 12px;
}
.divider::before,
.divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--lgray);
}
.auth-choice {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}
.auth-item {
	border: 1px solid var(--border);
	padding: 14px 16px;
	border-radius: var(--radius);
	cursor: pointer;
	display: flex;
	gap: 12px;
	transition: border-color 0.15s;
}
.auth-item:hover,
.auth-item.is-selected {
	border-color: var(--green);
	background: var(--green3);
}
.auth-item input {
	margin-top: 3px;
	accent-color: var(--green);
}
.auth-item-title {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 3px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.auth-item-desc {
	font-size: 12px;
	color: var(--gray);
}
.badge-done {
	background: #e0e7ff;
	color: #3730a3;
}
.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: flex-start;
}
.note-txt {
	font-size: 12px;
	color: var(--mgray);
	background: var(--bg);
	padding: 10px 14px;
	border-radius: var(--radius);
	margin-top: 14px;
}
.flash {
	padding: 12px 16px;
	border-radius: var(--radius);
	font-size: 13px;
	margin-bottom: 16px;
}
.flash-error {
	background: #fef5f5;
	color: var(--red);
}
.flash-success {
	background: var(--green3);
	color: var(--green2);
}