@charset "utf-8";
/* ==========================================================================
   front.css ─ フロント（一般ユーザー向け）専用スタイル
   common.css の後に読み込むこと
   ※ reservation/ 用に web-ui/common/css/front.css から移植。
   　 ヘッダー・フッターは WordPress テーマを使うため、ヘッダー用ルール（.header-login）は除外。
   ========================================================================== */

/* ── ページラップ ── */
/* ヘッダーと同じインナー幅。左右パディングも 20px でそろえてあるので、
   ロゴの左端と本文の左端が一直線になる。
   フォーム系の画面だけは読みやすさを優先して個別に狭めている（HTML側の指定）。 */
.page {
	max-width: var(--inner);
	margin: 0 auto;
	padding: 32px 20px 64px;
}

/* 工場詳細（.factory-head / .program / .slot-* / .breadcrumb / .tag / .chip）の
   スタイルは、当該画面の廃止にともない削除した。 */

/* ── フォームの入力列 ─────────────────────────────────────────
   ページ幅は他の画面と統一（--inner）。ただし入力欄まで 1000px に
   広げると、氏名やメールのように短い値の欄が無意味に長くなり、
   説明文も1行が長くなって読みにくい（6-3 適切なフォーム幅 / 8-1 行長）。
   ページは広げたまま、読み書きする列だけ幅を保つ。 */
.page .f-group,
.page .pax-set,
.page .time-row,
.page .cap-bar,
.page .cap-txt {
	max-width: 34em;
}
/* 入力列（34em）の中の案内文は、行の途中で単語が分かれないよう文節で折り返す（対応ブラウザのみ。非対応は通常の折り返し）。
   PC でも収まらない長い案内は、HTML 側で文の切れ目に <br> を入れて改行位置を決めている */
.page .f-hint,
.page .cap-txt {
	word-break: auto-phrase;
}

.participant-note {
	color: var(--g-700);
}

/* 確認画面の表は入力欄ではないので幅を絞らず、カードいっぱい（100%）に広げる */

/* ── 日時選択（予約申込画面）───────────────────────────────── */
.time-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 6px;
}
/* 予約する事業所（参加日の直前に、同じラベルの下に値を出す） */
.booking-company {
	font-size: 15px;
	font-weight: 400;
	color: var(--ink);
}

/* 会員側の画面見出し（日程・人数／確認などで共通の大きさにそろえる） */
.page .card-title {
	font-size: 18px;
	letter-spacing: 0.06em;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 3px solid var(--g-400);
}
/* 入力画面の項目名と、確認画面などの表の見出しの左に帯を付ける。
   左の縦棒による強調は原則使わない方針（common.css の .info-box 付近）だが、項目や表が縦に続く画面では
   「ここから次のまとまり」という区切りの目印として意味があるため、項目名（.f-label / .time-label）と
   表の見出し（.conf-sec）に限って使う。
   .f-group の直下だけを対象にし、ラジオの選択肢（.f-radios .f-label）などには付けない */
.page .f-group > .f-label,
.page .f-group > .time-label,
.page .conf-sec,
.page .mypage-list-title {
	border-left: 4px solid var(--g-400);
	padding: 4px;
	padding-left: 8px;
	font-size: 16px;
	line-height: 1.4;
	margin-bottom: 10px;
}
.time-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.time-btn {
	padding: 12px 18px;
	border: 1px solid var(--g-800);
	color: var(--g-800);
	background: var(--white);
	border-radius: var(--radius);
	font-size: 13px;
	cursor: pointer;
	min-height: 48px;
	font-family: var(--font-sans);
	text-align: left;
	transition:
		background-color 0.15s,
		border-color 0.15s,
		color 0.15s;
}
/* hover と「選択済み」を必ず別の見た目にする（旧CSSは同一定義だった）*/
.time-btn:hover:not([aria-checked="true"]):not([disabled]) {
	background: var(--g-50);
	border-color: var(--g-800);
}
.time-btn[aria-checked="true"] {
	background: var(--g-400);
	color: var(--white);
	border-color: var(--g-400);
	font-weight: 700;
	box-shadow: none;
}
.time-btn[aria-checked="true"]::before {
	content: "\2713\00a0";
} /* 色以外の手がかり */
/* 満席（旧 .time-btn.full は #e5e5e5 で 1.26:1、かつ disabled ですらなかった）*/
.time-btn[disabled] {
	border-color: var(--lgray-d);
	color: var(--gray);
	background: #f2f2f0; /* 6.2:1 */
	cursor: not-allowed;
	text-decoration: line-through;
}
.time-note {
	font-size: 12px;
	font-weight: 700;
	display: block;
	margin-top: 2px;
}
.time-btn[aria-checked="true"] .time-note {
	color: var(--white);
}
/* 残席の注記は白背景に対し 5.9:1（#b8730a では 3.82:1 で AA に届かない） */
.time-btn:not([aria-checked="true"]):not([disabled]) .time-note {
	color: #8a5a12;
}
.time-btn[disabled] .time-note {
	color: var(--gray);
} /* 満席は警告色ではなくグレー 6.2:1 */

.cap-bar {
	height: 6px;
	background: var(--lgray);
	border-radius: 3px;
	margin-bottom: 4px;
	overflow: hidden;
}
.cap-fill {
	height: 100%;
	border-radius: 3px;
}
.cap-txt {
	font-size: 12px;
	color: var(--gray);
}

/* ── 参加人数の内訳 ────────────────────────────────────────────
   プログラムに年齢条件があるため、大人／子ども／学年を取得する。 */
/* 枠線は外す。legend（参加人数）と余白でまとまりは読める */
.pax-set {
	border: 0;
	padding: 0;
	margin-bottom: 18px;
}
.pax-legend {
	font-size: 13px;
	font-weight: 700;
	padding: 0 4px;
}
.pax-rows {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 10px 0;
}
.pax-col {
	flex: 1 1 150px;
}
.pax-col label {
	display: block;
	font-size: 13px;
	margin-bottom: 4px;
}
.pax-total {
	border-top: 1px solid var(--lgray);
	padding-top: 10px;
	font-size: 14px;
	font-weight: 700;
}
.pax-total output {
	font-family: var(--font-cond);
	font-size: 19px;
}
.pax-total .warn {
	color: #a3251a;
}

/* ── ガイドボックス ── */
.guide {
	background: var(--g-50);
	border-radius: var(--radius);
	padding: 12px 16px;
	font-size: 13px;
	color: var(--g-700);
	margin-bottom: 16px;
}
.guide a {
	color: var(--link);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.guide.this-year {
	width: 100%;
	max-width: 400px;
	font-weight: 700;
	font-size: 14px;
	border: 1px dashed;
}

/* ── 同意チェック ── */
.agree-item {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 14px;
	cursor: pointer;
	min-height: 44px;
}
.agree-item a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 700;
}

/* ── ステップ ─────────────────────────────────────────────────
   各ステップは固定幅（84px）にして丸の間隔をそろえる。
   丸（28px）はステップの中央にあるので、左右に 28px ずつ余白がある。
   つなぎ線には左右 -28px のマージンを付け、その余白に食い込ませて
   丸の縁から次の丸の縁まで途切れずにつなぐ。
   線の長さは残りの幅を等分（flex-grow）し、最低 56px（＝余白2つ分）を確保する。 */
.steps {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 520px;
	margin: 0 auto 28px;
}
.step {
	flex: 0 0 84px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	position: relative;
	z-index: 1; /* 線より丸を手前に */
}
.step-c {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	background: #d0d0d0;
	color: #3d3d3d;
	font-family: var(--font-cond);
}
.step-c.done {
	background: var(--g-400);
	color: var(--white);
}
.step-c.now {
	background: var(--g-700);
	color: var(--white);
}
/* 幅に収まらないラベルは折り返す。nowrap だと枠からはみ出す */
.step-l {
	font-size: 11px;
	color: var(--gray);
	text-align: center;
	line-height: 1.4;
}
.step-l.now {
	color: var(--g-700);
	font-weight: 700;
}
/* 丸（28px）の縦中心に合わせる。上寄せなので margin-top で位置を出す */
.step-line {
	flex: 1 0 56px;
	height: 2px;
	background: var(--lgray);
	margin: 13px -28px 0;
}
.step-line.done {
	background: var(--g-400);
}

/* ── 確認テーブル ── */
.conf-tbl {
	width: 100%;
	font-size: 14px;
}
/* 囲み枠はやめ、行を目で追うための横罫だけ残す（事業所管理の一覧と同じ扱い）*/
.conf-tbl th {
	width: 160px;
	background: var(--bg);
	padding: 10px 14px;
	text-align: left;
	font-weight: 700;
	font-size: 13px;
	border-bottom: 1px solid var(--white);
	color: var(--ink);
}
.conf-tbl td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--lgray);
	font-weight: 500;
	color: var(--ink);
}
/* 確認画面：グループごとに外枠で1つの塊として見せ、小見出しで何の項目かを示す */
.conf-tbl {
	border: 1px solid var(--lgray);
}
.conf-sec {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	margin: 24px 0 8px;
}
.info-box + .conf-sec,
.form-error-summary + .conf-sec {
	margin-top: 4px;
}
/* 完了画面：カードは中央寄せだが、表は確認画面と同じく左寄せで読ませる */
.complete-summary {
	text-align: left;
	margin-bottom: 20px;
}
.complete-summary .conf-sec {
	margin-top: 0;
}
.complete-summary .res-no {
	color: var(--g-800);
	font-size: 20px;
}
.conf-tbl tr:last-child th,
.conf-tbl tr:last-child td {
	border-bottom: 0;
}

/* ── 完了 ── */
.done-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--g-400);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	font-size: 26px;
	color: var(--white);
}
.res-no {
	font-family: var(--font-cond);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* ── マイページ ── */
.mypage-hero {
	background: var(--g-400);
	color: var(--white);
	padding: 22px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px 20px;
	flex-wrap: wrap;
}
.mypage-hero h2 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.mypage-hero p {
	font-size: 13px;
	color: var(--white);
	margin-top: 3px;
}
/* ここは枠線を残す。予約カードは白地の .card の中に白地で並ぶので、
   枠が無いと1件ずつの境目が地色だけでは読めなくなる。
   （他のブロックは背景 --bg の上に白で置かれるので、明度差で境目が出る）*/
.res-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 12px;
	background: var(--white);
}
.res-card.is-cancelled {
	background: #fafafa;
}
.res-card.is-cancelled .res-head {
	background: #f0f0f0;
	border-bottom-color: var(--border);
}
.res-card.is-cancelled .res-name {
	color: var(--gray);
}
/* 見出し帯は緑のヒーローと重ならないよう無彩色にする（バッジと日時を引き立てる） */
.res-head {
	background: #f1f1f1;
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	border-bottom: 1px solid var(--lgray);
	flex-wrap: wrap;
}
.res-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--g-800);
}
.res-body {
	padding: 14px 16px;
}
.res-dl {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 5px 14px;
	font-size: 13px;
}
.res-dl dt {
	color: var(--gray);
	font-size: 12px;
}
/* 値は標準の太さ。当日必要な予約番号・開催場所だけ個別に強める（マイページ節） */
.res-dl dd {
	color: var(--text);
	font-weight: 400;
}
.res-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--lgray);
	flex-wrap: wrap;
}
/* 予約カードの操作ボタン（内容変更・キャンセル）を横に並べる。狭い画面では折り返す */
.res-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.cancel-deadline {
	font-size: 13px;
	color: var(--red);
	font-weight: bold;
}
.cancel-deadline.expired {
	color: #a3251a;
	font-weight: 700;
}
.res-body a:not(.btn) {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── ログイン ── */
.login-wrap {
	min-height: calc(100vh - 108px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 40px 20px;
	background: var(--bg);
}
.login-box {
	background: var(--white);
	border-radius: var(--radius);
	padding: 36px;
	width: 100%;
	max-width: 400px;
	box-shadow: var(--shadow);
}
.login-logo {
	text-align: center;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--lgray);
	padding-bottom: 20px;
}

.register-guide {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--lgray);
	text-align: center;
	font-size: 13px;
	color: var(--gray);
}

.register-guide a {
	font-size: 16px;
	font-weight: 700;
}

.login-logo-ja {
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}
.login-logo-en {
	font-family: var(--font-cond);
	font-size: 10px;
	color: var(--mgray);
	letter-spacing: 0.15em;
}
.login-logo-sub {
	font-size: 12px;
	color: var(--gray);
	margin-top: 8px;
}
.login-box a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── 操作列 ── */
.row-end {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 20px;
	flex-wrap: wrap;
}

/* ── レスポンシブ ─────────────────────────────────────────── */
@media (max-width: 767px) {
	.page {
		padding: 20px 16px 48px;
	}
	.steps {
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: 6px;
	}
	.row-end .btn {
		flex: 1 1 auto;
	}
	.login-box {
		padding: 24px 20px;
	}

	.row-end {
		flex-direction: column-reverse;
	}
}
@media (max-width: 480px) {
	/* ラベル列が幅の45%を占めてしまうため、狭い画面では縦積みにする */
	.conf-tbl,
	.conf-tbl tbody,
	.conf-tbl tr,
	.conf-tbl th,
	.conf-tbl td {
		display: block;
		width: auto;
	}
	.conf-tbl th {
		border-bottom: 0;
	}
	.conf-tbl td {
		border-top: 0;
	}
	.res-dl {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.res-dl dt {
		margin-top: 8px;
		font-size: 12px;
	}
	.res-dl dt:first-of-type {
		margin-top: 0;
	}
}

/* ── 印刷（予約控えとして持参されることを想定）── */
@media print {
	.steps,
	.row-end,
	.guide,
	.done-icon {
		display: none !important;
	}
	.page {
		max-width: none;
		padding: 0;
	}
	.res-no {
		font-size: 22pt;
	}
}

/* ── 主要CTAのピル化 ───────────────────────────────────────────
   公式サイトのボタンは border-radius 35〜50px のピル型。
   業務画面（admin）は角丸のままにしたいので front 側だけで上書きする。 */
.btn-primary,
.btn-outline {
	border-radius: var(--radius-pill);
	padding-left: 26px;
	padding-right: 26px;
}
.btn-full {
	padding-left: 22px;
	padding-right: 22px;
}

/* 【6-3】電話番号のように桁数が決まっている欄は、幅そのものが
   「どれくらい入力するのか」のヒントになる。全幅にしない。 */
.f-w-tel {
	max-width: 15em;
}

/* ==========================================================================
   システム追加分（web-ui の front.html には無い要素）
   ========================================================================== */
/* 入力欄＋ボタンの横並び（会員登録の郵便番号＋住所検索） */
.f-inline {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.f-inline .f-input {
	flex: 1;
	min-width: 0;
}
.f-inline .btn {
	flex: none;
}

/* 予約申込：時間帯ごとの残席表示（ボタン＋残席バー＋注記を縦に並べる） */
.slot-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}
.slot-item .time-btn {
	align-self: flex-start;
}
.slot-item .cap-bar {
	margin-top: 8px;
}
/* 時間帯の欄だけは入力列（34em）に絞らず、区切り線をカードの幅いっぱいに引く。
   残席バーと注記は .page .cap-bar / .page .cap-txt の 34em のまま */
.page .slot-group,
.page .slot-row {
	max-width: none;
}
.slot-row {
	gap: 0;
}
/* 表示中の時間帯どうし・参加者の行どうしの間に点線を引く。
   時間帯は選んだ参加日の分だけ、参加者は人数分だけが表示されるので、表示中の2つ目以降に引く（先頭には引かない） */
.slot-item:not([hidden]) ~ .slot-item:not([hidden]),
.member-row:not([hidden]) ~ .member-row:not([hidden]) {
	border-top: 1px dashed var(--border);
	margin-top: 12px;
	padding-top: 18px;
}

/* 予約申込：参加者1人分の入力行（行どうしの間隔と点線は時間帯と共通。上の .slot-item の点線を参照） */
.member-row {
	margin-bottom: 0;
}
.member-fields {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.member-fields .member-self {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
}
/* accent-color だとチェックマークの色をブラウザが白/黒で自動に決め、--green では黒になるため自作する。
   フォーカスリングは common.css の :focus-visible がそのまま効く */
.member-fields .member-self input {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 2px solid var(--g-600);
	border-radius: 3px;
	background: var(--white);
	cursor: pointer;
}
.member-fields .member-self input:checked {
	border-color: var(--green);
	background: var(--green);
}
.member-fields .member-self input:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0;
	width: 6px;
	height: 10px;
	border: solid var(--white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* 他の行で本人を選んでいて押せない状態 */
.member-fields .member-self input:disabled {
	border-color: var(--lgray);
	background: var(--bg);
	cursor: not-allowed;
}
.member-fields .member-self:has(input:disabled) {
	color: var(--gray);
	cursor: not-allowed;
}
.member-fields .member-name {
	flex: 2 1 140px;
}
.member-fields .member-type {
	flex: 1 1 110px;
}
.member-fields .member-age {
	flex: 1 1 80px;
}

/* ご注意事項（事業所ごとの自由記述をそのまま出す） */
.notice-box {
	background: var(--bg);
	border: 1px solid var(--lgray);
	padding: 12px 14px;
	font-size: 13px;
	color: var(--gray);
	margin-bottom: 18px;
	line-height: 1.9;
}
.notice-box h2 {
	color: var(--text);
	margin-bottom: 4px;
	font-weight: 700;
}
.notice-box pre {
	font-family: inherit;
	white-space: pre-wrap;
	margin: 0;
}

/* 確認画面：hidden で送る値の表示用（会員登録の確認） */
.conf-tbl + .row-end,
.conf-tbl + .f-error {
	margin-top: 18px;
}

/* ── リンク色 ────────────────────────────────────────────────
   会員側の本文（main）内のリンクは青にそろえる。ボタン型のリンク（.btn）は除く。
   WP テーマ側の a の色（緑）より優先させるため .reservation-main で囲む。
   ※ #3498db は白地に対し 3.2:1 で、WCAG AA（本文 4.5:1）には届かない。
     下線を必ず付け、色だけでリンクと分かる状態にしないこと。 */
.reservation-main a:not(.btn) {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.reservation-main a:not(.btn):hover {
	color: var(--link-hover);
}

/* ── フォームの幅の例外 ───────────────────────────────────────
   ガイド文・エラーのまとめ（.guide / .form-error-summary）はカード幅いっぱいに出す。
   入力欄は 34em が基本だが、住所・参加者行・ご要望のように値が長くなる欄は
   .f-wide を付けてカード幅いっぱいに広げる。 */
.page .f-group.f-wide {
	max-width: none;
}

/* ── 送信ボタン ───────────────────────────────────────────────
   主要ボタンは全幅にせず、一定幅（300px）で中央に置く。
   確認画面などの「戻る＋確定」の並び（.row-end）も中央寄せにそろえる。 */
.form-submit {
	text-align: center;
	margin: 24px 0 14px;
}
.btn-submit {
	min-width: 300px;
}
.page .row-end {
	justify-content: center;
}
.page .row-end .btn-primary {
	min-width: 300px;
}
@media (max-width: 480px) {
	.btn-submit,
	.page .row-end .btn-primary {
		min-width: 0;
		width: 100%;
	}
}

/* ==========================================================================
   マイページ
   ========================================================================== */
.mypage-hero-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
/* 緑地の上に置くボタン。白枠・白文字（緑地 #32b92b 上の白は太字の短いラベルに限る） */
.btn-hero {
	background: transparent;
	border: 1px solid var(--white);
	color: var(--white);
	border-radius: var(--radius-pill);
}
.btn-hero:hover {
	background: rgba(255, 255, 255, 0.16);
	color: var(--white);
}
.mypage-body {
	padding: 20px;
}
.mypage-list-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	gap: 10px;
	flex-wrap: wrap;
}
/* 見出しの左帯などは入力画面の項目名と共通（.page .f-group > .f-label 付近）。
   右の件数と縦位置をそろえるため、下の余白は見出しではなく .mypage-list-head 側で取る */
.page .mypage-list-head .mypage-list-title {
	font-weight: 700;
	margin-bottom: 0;
}

/* 状態の説明（申込済／確定） */
.status-guide {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 6px 20px;
	font-size: 12px;
	color: var(--gray);
	margin-bottom: 14px;
}
.status-guide > div {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* 予約カードの見出し */
/* 情報の優先度（強い順）
   1. 日時（いつ行くか）…… 最大・太字
   2. 開催場所・予約番号（当日必要）・状態バッジ …… 太字
   3. 社名・人数・イベント種別（補足）…… 標準〜小さめ
   4. キャンセル期限・キャンセル操作 …… 小さめ・グレー・枠線ボタン */
.res-when {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: 0.02em;
	line-height: 1.35;
}
.res-head-main {
	flex: 1 1 auto;
	min-width: 0;
}
/* 1行目：社名（左）＋予約状況バッジ（右寄せ固定）。下線は行全体に引く（見出しの幅いっぱい） */
.res-name-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-bottom: 6px;
	margin-bottom: 8px;
	border-bottom: 1px dashed var(--border);
}
/* 社名は黒。幅が足りないときは省略せず折り返す（バッジ側は縮めない） */
.res-head .res-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	overflow-wrap: anywhere;
}
.res-name-row .badge {
	flex-shrink: 0;
	margin-left: auto;
	white-space: nowrap;
}
.res-when-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
}
/* イベント種別のタグ（WP の工場ページのタグに合わせる：黒の太枠・角丸なし・太字） */
.res-types {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}
.res-type {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--ink);
	border-radius: 0;
	letter-spacing: 0.04em;
}
.res-card.is-cancelled .res-type {
	color: var(--gray);
	border-color: var(--gray);
}
.res-card.is-cancelled .res-head .res-name {
	color: var(--gray);
}
/* キャンセル済みは見返す程度なので、日時も強調しない */
.res-card.is-cancelled .res-when {
	color: var(--gray);
	font-size: 14px;
	font-weight: 500;
}

/* 当日スタッフに伝える予約番号は少し大きく */
.res-num {
	font-family: var(--font-cond);
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: 0.04em;
	line-height: 1.3;
}
.res-dl .res-dd-wide {
	font-weight: 500;
	color: var(--ink);
}
.res-map {
	margin-left: 8px;
	font-size: 12px;
	white-space: nowrap;
}

/* PC では項目を2列に並べて縦の長さを抑える（開催場所は長いので2列分使う） */
@media (min-width: 768px) {
	.res-dl {
		grid-template-columns: 6em 1fr 6em 1fr;
		align-items: baseline;
	}
	.res-dl .res-dd-wide {
		grid-column: 2 / -1;
	}
}

/* キャンセルボタン：取り消しは後戻りできないので塗りではなく枠線で控えめに */
.btn-danger-outline {
	background: var(--white);
	border: 1px solid var(--red);
	color: var(--red);
}
.btn-danger-outline:hover:not([disabled]) {
	background: #fef5f5;
}
.btn-danger-outline[disabled] {
	border-color: var(--lgray-d);
	color: var(--gray);
	background: #f2f2f0;
	cursor: not-allowed;
}

.mypage-empty {
	padding: 20px 0;
	font-size: 13px;
	color: var(--gray);
}
.mypage-cta {
	margin: 6px 0 20px;
}

/* キャンセル済みは畳んでおく */
.cancelled-list {
	border-top: 1px solid var(--lgray);
	padding-top: 14px;
}
.cancelled-list summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	color: var(--gray);
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
}
.cancelled-list summary::-webkit-details-marker {
	display: none;
}
.cancelled-list summary::before {
	content: "\25B6";
	font-size: 10px;
	transition: transform 0.15s;
}
.cancelled-list[open] summary::before {
	transform: rotate(90deg);
}
.cancelled-list[open] summary {
	margin-bottom: 10px;
}

/* ── キャンセル待ち（定員到達後の受付）──────────────────────────────
   入力・確認・完了画面で、キャンセル待ちとしての申込になることを案内する。左線の強調は使わず、.info-box の背景色で示す */
.waitlist-notice p + p {
	margin-top: 6px;
}
.waitlist-notice-ttl {
	font-weight: 700;
}
/* 時間帯の下の受付状況。キャンセル待ちは注意色（文字に使える橙 5.17:1）、満席はグレー */
.cap-txt-wait {
	color: var(--orange);
	font-weight: 700;
}
.cap-txt-full {
	color: var(--gray);
}