@charset "UTF-8";

/* ===================================================================
 * まるっと受注の画面のスタイル
 *
 * 画面の骨格（サイドメニュー・ヘッダ・カード・一覧・検索条件）は管理画面のCSS（marutto-juchu-mng.css）をそのまま使い、
 * ここにはこのシステムだけで使う部品（状態の色・期日の強調・使い方ガイドの図など）だけを置く。
 * 色は css/common/cmn.css の :root の定義を使う。
 * =================================================================== */

/* -------------------------------------------------------------------
 * 自社情報の印影の見本（透けた部分が分かるよう、うすい格子の上に出す）
 * ------------------------------------------------------------------- */
.office-stamp-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border: 1px solid var(--mb-border);
	border-radius: 4px;
	background: #FFFFFF;
}

.office-stamp-preview img {
	max-width: 96px;
	max-height: 96px;
}

/* -------------------------------------------------------------------
 * 状態のバッジの色（.mng-status と組み合わせて使う）
 *
 * 案件の状態（AppConst.DEAL_STATUS_LIST）・見積の状態（ESTIMATE_STATUS_LIST）・入金状況（INVOICE_PAY_STATUS_LIST）・支払状況（BILL_PAY_STATUS_LIST）
 * ------------------------------------------------------------------- */
.mng-status--ORDERED,
.mng-status--DELIVERED,
.mng-status--PAID {
	background: var(--mb-success-bg);
	color: var(--mb-success);
}

.mng-status--SUBMITTED,
.mng-status--ESTIMATED {
	background: var(--mb-navy-pale);
	color: var(--mb-navy);
}

.mng-status--NEW,
.mng-status--PARTIAL,
.mng-status--UNPAID {
	background: var(--mb-warning-bg);
	color: var(--mb-warning);
}

.mng-status--OVERDUE {
	background: var(--mb-error-bg);
	color: var(--mb-error);
}

.mng-status--DRAFT,
.mng-status--LOST {
	background: #EEEEEE;
	color: var(--mb-text-sub);
}

/* -------------------------------------------------------------------
 * 期日の強調（一覧の行・日付）
 *
 *   期日超過            ：赤（発行した請求書の入金遅れ・受け取った請求書の支払漏れ）
 *   期日が近い（7日以内）：黄（受け取った請求書。AppConst.BILL_DUE_SOON_DAYS）
 * ------------------------------------------------------------------- */
.mng-table tbody tr.office-row--overdue td {
	background: var(--mb-error-bg);
}

.mng-table tbody tr.office-row--due-soon td {
	background: var(--mb-warning-bg);
}

.office-text-overdue {
	color: var(--mb-error);
	font-weight: 700;
}

.office-text-due-soon {
	color: var(--mb-warning);
	font-weight: 700;
}

/* -------------------------------------------------------------------
 * デモ環境の案内（スマートフォン）
 *
 * 案内文が長いため、スマートフォンでは1行に収まらず「…」で切れてしまう。
 * 個人情報を入れないようにという大事な案内のため、スマートフォンだけ2行で全文を出す。
 * 案内バーの高さの変数を上書きし、固定表示の部品（サイドメニュー・ヘッダ）もその分だけ下げる。
 * ------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.office-body {
		--sb-demo-banner-height: 44px;
	}

	.office-body .sb-demo-banner {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 11px;
		line-height: 1.45;
		white-space: normal;
	}

	/*
	 * 一覧（スマートフォン）
	 *
	 * 管理画面のCSSは一覧の最小幅を720pxにして横スクロールさせているが、AI業務管理の一覧は列が多く（最大8列）、
	 * 720pxでは件名・得意先名が1文字ずつ折り返して読めなくなるため、最小幅を広げる。
	 */
	.office-body .mng-table {
		min-width: 960px;
	}

	/*
	 * 検索条件（スマートフォン）
	 *
	 * 日付の入力欄（FROM〜TO）が縮まない指定（flex-shrink-0）のため、画面幅を超えてページ全体が横に広がってしまう。
	 * スマートフォンでは各項目を1行ずつにし、日付の入力欄も画面幅に合わせて縮める。
	 */
	.office-body .mng-search__item {
		flex: 1 1 100%;
		min-width: 0;
	}

	.office-body .mng-search input[type="date"] {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
	}
}

/* -------------------------------------------------------------------
 * 注文書の取り込み・案件詳細
 * ------------------------------------------------------------------- */

/* AIの読み取りの確認が必要な行（確からしさが低い・商品が特定できない）。仕様：黄色で強調する */
.mng-table tbody tr.office-row--low td {
	background: var(--mb-warning-bg);
}

/* 元の問い合わせ（貼り付けた文章・画像・PDF）を見せる枠 */
.office-source {
	max-height: 640px;
	overflow: auto;
	padding: 14px 16px;
	background: var(--mb-bg-section);
	border: 1px solid var(--mb-border);
	border-radius: 2px;
	font-size: 13px;
	line-height: 1.8;
	white-space: pre-wrap;
	word-break: break-all;
}

.office-source img {
	display: block;
	max-width: 100%;
	height: auto;
}

.office-source iframe {
	display: block;
	width: 100%;
	height: 600px;
	border: 0;
}

/* AIの処理中の段階表示（「文章を読み取っています…」→「商品マスタと照合しています…」→…） */
.office-progress {
	padding: 20px 24px;
	background: var(--mb-navy-pale);
	border-radius: 2px;
}

.office-progress__step {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	color: var(--mb-text-sub);
}

.office-progress__step.is-active {
	color: var(--mb-navy);
	font-weight: 700;
}

.office-progress__step.is-done {
	color: var(--mb-success);
}

/* 「サンプルで試す」のカード */
.office-sample {
	height: 100%;
	padding: 14px 16px;
	background: #FFFFFF;
	border: 1px dashed var(--mb-border);
	border-radius: 2px;
}

/* 返信メールの本文（そのままコピーして使えるよう、改行を保って表示する） */
.office-reply-body {
	min-height: 320px;
	font-size: 13px;
	line-height: 1.8;
}

/* AI経営分析：質問例のボタン（折り返して並べる） */
.office-question-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.office-question-list .mng-btn {
	white-space: normal;
	text-align: left;
}

/* AI経営分析：質問（吹き出し風） */
.office-question {
	display: inline-block;
	max-width: 100%;
	padding: 8px 14px;
	background: var(--mb-navy-pale);
	color: var(--mb-navy-dark);
	border-radius: 14px 14px 14px 2px;
	font-weight: 700;
}

/* AI経営分析：グラフの領域（高さを固定し、Chart.js を枠いっぱいに描く） */
.office-chart {
	position: relative;
	height: 340px;
}


@media (max-width: 575.98px) {
	.office-chart {
		height: 260px;
	}
}

/* 一覧の行の中の小さいボタン（入金を登録・支払済にする） */
.mng-btn.mng-btn--sm {
	min-height: 30px;
	padding: 0 10px;
	font-size: 12px;
}

/* ダッシュボード：金額の数字（桁が多いため、一覧の統計より小さくする） */
.mng-stat__num.office-stat-num {
	font-size: 26px;
	white-space: nowrap;
}

/* ダッシュボード：期日超過がある場合のカード（赤で目立たせる） */
.mng-stat.office-stat--alert {
	border-color: var(--mb-error);
	background: var(--mb-error-bg);
}

.mng-stat.office-stat--alert .mng-stat__num {
	color: var(--mb-error);
}

@media (max-width: 575.98px) {
	.mng-stat__num.office-stat-num {
		font-size: 19px;
	}
}

/* エラー画面（404・エラー。ログイン前でも表示するため、サイドメニューの無い中央寄せの画面） */
.office-error {
	max-width: 560px;
	margin: 12vh auto 0;
	padding: 0 16px;
}

.office-error__code {
	font-family: var(--mb-font-en);
	font-size: 56px;
	font-weight: 500;
	color: var(--mb-navy);
	line-height: 1.1;
	margin-bottom: 8px;
}

/* 見出しの横の「？」（ツールチップで説明を出す） */
.office-help {
	margin-left: 6px;
	color: var(--mb-text-sub);
	font-size: 0.9em;
	cursor: help;
}

.office-help:hover,
.office-help:focus {
	color: var(--mb-navy);
	outline: none;
}

/* ツールチップの説明文は長めのため、幅を広げて左寄せにする */
.tooltip-inner {
	max-width: 340px;
	text-align: left;
	line-height: 1.6;
}

/* -------------------------------------------------------------------
 * 使い方ガイド（guide.html）の図
 *
 * office-guide-map    ：全体の図（得意先 ⇄ このシステム ⇄ 仕入先）。スマートフォンでは縦に並べ、矢印を上下に向ける
 * office-guide-steps  ：手順の図（番号つきのカードを矢印でつなぐ）。スマートフォンでは縦に並べる
 * office-guide-status ：状態の移り方（状態のバッジを、ボタン名つきの矢印でつなぐ）
 * ------------------------------------------------------------------- */

/* ---------- 全体の図 ---------- */
.office-guide-map {
	display: grid;
	grid-template-columns: 130px minmax(120px, 170px) 1fr minmax(110px, 150px) 130px;
	gap: 12px;
	align-items: center;
}

.office-guide-map__party {
	padding: 18px 8px;
	border: 1px solid var(--mb-border);
	border-radius: 8px;
	background: var(--mb-bg-section);
	text-align: center;
}

.office-guide-map__party > i {
	font-size: 28px;
	color: var(--mb-navy);
}

.office-guide-map__party-name {
	margin-top: 6px;
	font-weight: 600;
}

.office-guide-map__party-sub {
	font-size: 11px;
	color: var(--mb-text-sub);
}

.office-guide-map__arrows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.office-guide-arrow {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mb-text);
}

.office-guide-arrow--forward {
	justify-content: flex-end;
	text-align: right;
}

.office-guide-arrow > i {
	flex-shrink: 0;
	color: var(--mb-navy);
}

/* お金の流れ（入金・支払）は金色 */
.office-guide-arrow--money > i,
.office-guide-arrow--money > span {
	color: var(--mb-gold);
	font-weight: 600;
}

.office-guide-map__system {
	padding: 14px;
	border: 2px solid var(--mb-navy);
	border-radius: 10px;
	background: var(--mb-navy-pale);
}

.office-guide-map__system-title {
	margin-bottom: 10px;
	font-weight: 700;
	color: var(--mb-navy);
	text-align: center;
}

.office-guide-map__modules {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.office-guide-module {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px;
	border: 1px solid var(--mb-border);
	border-radius: 6px;
	background: var(--mb-bg);
	color: var(--mb-text);
	font-size: 13px;
	font-weight: 600;
}

.office-guide-module:hover {
	border-color: var(--mb-navy);
	color: var(--mb-navy);
	text-decoration: none;
}

.office-guide-module > i {
	color: var(--mb-navy);
}

.office-guide-map__master {
	margin-top: 8px;
	padding: 8px 10px;
	border: 1px dashed var(--mb-navy);
	border-radius: 6px;
	background: var(--mb-bg);
	font-size: 12px;
	color: var(--mb-text-sub);
}

/* ---------- 手順の図 ---------- */
.office-guide-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 28px;
	margin-bottom: 28px;
	padding-top: 12px;   /* 手順の番号（カードの上にはみ出す）の分 */
}

.office-guide-steps:last-child {
	margin-bottom: 0;
}

.office-guide-steps--3 {
	grid-template-columns: repeat(3, 1fr);
}

.office-guide-steps--4 {
	grid-template-columns: repeat(4, 1fr);
}

.office-guide-step {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 16px 14px 12px;
	border: 1px solid var(--mb-border);
	border-radius: 8px;
	background: var(--mb-bg);
}

/* 次の手順への矢印（最後の手順には付けない） */
.office-guide-step:not(:last-child)::after {
	content: "\f054";
	position: absolute;
	top: 50%;
	right: -21px;
	transform: translateY(-50%);
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 14px;
	color: var(--mb-gold);
}

.office-guide-step__no {
	position: absolute;
	top: -11px;
	left: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mb-navy);
	color: #FFFFFF;
	font-family: var(--mb-font-en);
	font-size: 12px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
}

.office-guide-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--mb-navy-pale);
	color: var(--mb-navy);
	font-size: 17px;
}

.office-guide-step__title {
	margin-bottom: 4px;
	font-weight: 700;
}

.office-guide-step__text {
	flex-grow: 1;
	margin-bottom: 10px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--mb-text-sub);
}

.office-guide-step__foot {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 8px;
	border-top: 1px solid var(--mb-border);
	font-size: 11px;
}

/* 使う画面の名前 */
.office-guide-step__screen {
	color: var(--mb-navy);
	font-weight: 600;
}

.office-guide-step__screen::before {
	content: "\f2d0";
	margin-right: 4px;
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
	font-weight: 400;
}

/* 押すボタンの名前（ボタンの見た目に似せる） */
.office-guide-step__button {
	align-self: flex-start;
	padding: 1px 8px;
	border: 1px solid var(--mb-navy);
	border-radius: 4px;
	color: var(--mb-navy);
	background: var(--mb-bg);
}

.office-guide-marker {
	padding: 0 3px;
	background: var(--mb-warning-bg);
	color: var(--mb-warning);
	font-weight: 600;
}

/* ---------- 状態の移り方 ---------- */
.office-guide-status {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--mb-border);
}

.office-guide-status:last-child {
	border-bottom: none;
}

.office-guide-status__label {
	flex-shrink: 0;
	width: 160px;
	font-weight: 600;
}

.office-guide-status__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.office-guide-status__arrow {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 90px;
	font-size: 11px;
	color: var(--mb-text-sub);
	line-height: 1.3;
}

.office-guide-status__arrow > i {
	color: var(--mb-gold);
	font-size: 14px;
}

/* 一覧の表は、文字を折り返して画面の幅に収める（管理画面の表は折り返さず、スマートフォンでは横スクロールにするため） */
.mng-table.office-guide-menu-table {
	min-width: 0;
}

.office-guide-menu-table td {
	white-space: normal;
}

.office-guide-menu-table td:first-child {
	white-space: nowrap;
}

/* ---------- 画面が狭い場合（縦に並べる） ---------- */
@media (max-width: 1199.98px) {

	/* 全体の図は縦に並べる（得意先 → このシステム → 仕入先） */
	.office-guide-map {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin: 0 auto;
	}

	.office-guide-map__arrows {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 18px;
	}

	/* 左右の矢印を、上下に向ける（→ は下、← は上） */
	.office-guide-arrow > i {
		transform: rotate(90deg);
	}

	.office-guide-arrow--forward,
	.office-guide-arrow--back {
		justify-content: center;
		text-align: center;
	}

	.office-guide-steps {
		grid-template-columns: repeat(3, 1fr);
	}

	.office-guide-steps--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 折り返す場合、行の最後の矢印は出さない（3列：3つ目ごと / 2列：2つ目ごと） */
	.office-guide-steps .office-guide-step:nth-child(3n)::after,
	.office-guide-steps--4 .office-guide-step:nth-child(2n)::after {
		content: none;
	}

	.office-guide-steps--4 .office-guide-step:nth-child(3)::after {
		content: "\f054";
	}
}

@media (max-width: 991.98px) {

	.office-guide-steps,
	.office-guide-steps--3,
	.office-guide-steps--4 {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	/* 縦に並べた場合、矢印は下向きにして、カードの下に置く */
	.office-guide-step:not(:last-child)::after,
	.office-guide-steps .office-guide-step:nth-child(3n):not(:last-child)::after,
	.office-guide-steps--4 .office-guide-step:nth-child(2n):not(:last-child)::after {
		content: "\f078";
		top: auto;
		right: auto;
		bottom: -22px;
		left: 50%;
		transform: translateX(-50%);
	}

	.office-guide-status {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@media (max-width: 575.98px) {

	.office-guide-map__modules {
		grid-template-columns: 1fr;
	}

	.office-guide-menu-table td:first-child {
		min-width: 120px;
		white-space: normal;
	}
}

/* -------------------------------------------------------------------
 * 注文書の取り込み受付（確認待ちの一覧・確認画面）
 *
 * 状態のバッジの色（AppConst.INTAKE_STATUS_LIST）と、確認画面の注文書の表示枠（ページ切り替え・拡大）。
 * 明細の強調：商品マスタに結びつかない・自信がない行は .office-row--low（黄）、訂正あり・単価の不一致は小さな文字で出す。
 * ------------------------------------------------------------------- */
.mng-status--UNCONFIRMED {
	background: var(--mb-warning-bg);
	color: var(--mb-warning);
}

.mng-status--CONFIRMED {
	background: var(--mb-success-bg);
	color: var(--mb-success);
}

.mng-status--NOT_ORDER,
.mng-status--UNREAD {
	background: #EEEEEE;
	color: var(--mb-text-sub);
}

.mng-status--ERROR {
	background: var(--mb-error-bg);
	color: var(--mb-error);
}

/* 確認画面の注文書の表示枠（拡大すると枠の中でスクロールする） */
.office-viewer {
	height: 640px;
	overflow: auto;
	background: #F2F2F2;
	border: 1px solid var(--mb-border);
}

.office-viewer img {
	display: block;
	width: 100%;
	height: auto;
}

.office-viewer iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 明細の小さな注記（訂正あり・要確認・注文書の単価） */
.office-line-mark {
	display: inline-block;
	margin-right: 6px;
	font-size: 11px;
	color: var(--mb-warning);
}

.office-line-mark--error {
	color: var(--mb-error);
}

@media (max-width: 991.98px) {

	.office-viewer {
		height: 420px;
	}
}

/* -------------------------------------------------------------------
 * 一覧の上のボタン（一括取り込み・登録など）：スマートフォンでも1行に並べる
 * ------------------------------------------------------------------- */
.office-list-actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
}

@media (max-width: 575.98px) {

	/* 件数の下に、ボタンを横幅いっぱいで2つ並べる */
	.office-list-actions {
		width: 100%;
		margin-top: 8px;
	}

	.office-list-actions .mng-btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 10px;
	}
}

/* -------------------------------------------------------------------
 * 確認画面の明細（スマートフォン）：表をやめ、1行を1枚のカードにして縦に並べる
 *
 * 列：1 並べ替え / 2 商品・品名 / 3 数量 / 4 単位 / 5 単価 / 6 税率 / 7 納期 / 8 金額 / 9 削除
 * 横にスクロールせずに、数量・単価まで見て直せるようにする。項目名は表の見出しの代わりに CSS で出す。
 * ------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.office-body .mng-table.office-line-table {
		min-width: 0;
	}

	.office-line-table thead {
		display: none;
	}

	.office-line-table,
	.office-line-table tbody {
		display: block;
	}

	.office-line-table tr.line_tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px 10px;
		margin-bottom: 12px;
		padding: 10px 12px 12px;
		border: 1px solid var(--mb-border);
		border-radius: 6px;
		background: #FFFFFF;
	}

	.office-line-table tr.line_tr.office-row--low {
		background: var(--mb-warning-bg);
	}

	.office-line-table tr.line_tr td {
		display: block;
		padding: 0 !important;
		border: none !important;
		background: transparent !important;
		text-align: left !important;
	}

	/* 並べ替え（左上）と削除（右上） */
	.office-line-table tr.line_tr td:nth-child(1) { order: 0; }
	.office-line-table tr.line_tr td:nth-child(9) { order: 1; text-align: right !important; }

	/* 商品・品名は横幅いっぱい */
	.office-line-table tr.line_tr td:nth-child(2) { order: 2; grid-column: 1 / -1; }

	.office-line-table tr.line_tr td:nth-child(3) { order: 3; }
	.office-line-table tr.line_tr td:nth-child(4) { order: 4; }
	.office-line-table tr.line_tr td:nth-child(5) { order: 5; }
	.office-line-table tr.line_tr td:nth-child(6) { order: 6; }
	.office-line-table tr.line_tr td:nth-child(7) { order: 7; }
	.office-line-table tr.line_tr td:nth-child(8) { order: 8; align-self: end; font-weight: 700; text-align: right !important; }

	.office-line-table tr.line_tr td:nth-child(n+3):nth-child(-n+8)::before {
		display: block;
		margin-bottom: 2px;
		font-size: 11px;
		font-weight: normal;
		color: var(--mb-text-sub);
	}

	.office-line-table tr.line_tr td:nth-child(3)::before { content: "数量"; }
	.office-line-table tr.line_tr td:nth-child(4)::before { content: "単位"; }
	.office-line-table tr.line_tr td:nth-child(5)::before { content: "単価（税抜）"; }
	.office-line-table tr.line_tr td:nth-child(6)::before { content: "税率"; }
	.office-line-table tr.line_tr td:nth-child(7)::before { content: "納期"; }
	.office-line-table tr.line_tr td:nth-child(8)::before { content: "金額"; }

	/* 入力欄は枠の幅いっぱいにする（PCの表の幅の指定を外す） */
	.office-line-table tr.line_tr td input:not([type="hidden"]):not([type="checkbox"]),
	.office-line-table tr.line_tr td select {
		width: 100% !important;
	}

	.office-line-table tr.line_tr td:nth-child(2) .form-row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* -------------------------------------------------------------------
 * 請求書の修正の明細（スマートフォン）：1行を1枚のカードにして縦に並べる
 *
 * 列：1 品名 / 2 規格 / 3 数量 / 4 単位 / 5 単価 / 6 税率 / 7 金額 / 8 削除
 * ------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.office-body .mng-table.office-invoice-line-table {
		min-width: 0;
	}

	.office-invoice-line-table thead {
		display: none;
	}

	.office-invoice-line-table,
	.office-invoice-line-table tbody {
		display: block;
	}

	.office-invoice-line-table tbody tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px 10px;
		margin-bottom: 12px;
		padding: 10px 12px 12px;
		border: 1px solid var(--mb-border);
		border-radius: 6px;
		background: #FFFFFF;
	}

	.office-invoice-line-table tbody tr td {
		display: block;
		padding: 0 !important;
		border: none !important;
		text-align: left !important;
	}

	.office-invoice-line-table tbody tr td:nth-child(1) { grid-column: 1 / -1; order: 1; }
	.office-invoice-line-table tbody tr td:nth-child(8) { grid-column: 1 / -1; order: 0; text-align: right !important; }
	.office-invoice-line-table tbody tr td:nth-child(2) { grid-column: 1 / -1; order: 2; }
	.office-invoice-line-table tbody tr td:nth-child(3) { order: 3; }
	.office-invoice-line-table tbody tr td:nth-child(4) { order: 4; }
	.office-invoice-line-table tbody tr td:nth-child(5) { order: 5; }
	.office-invoice-line-table tbody tr td:nth-child(6) { order: 6; }
	.office-invoice-line-table tbody tr td:nth-child(7) { order: 7; grid-column: 1 / -1; font-weight: 700; text-align: right !important; }

	.office-invoice-line-table tbody tr td:nth-child(-n+7)::before {
		display: block;
		margin-bottom: 2px;
		font-size: 11px;
		font-weight: normal;
		color: var(--mb-text-sub);
	}

	.office-invoice-line-table tbody tr td:nth-child(1)::before { content: "品名"; }
	.office-invoice-line-table tbody tr td:nth-child(2)::before { content: "規格"; }
	.office-invoice-line-table tbody tr td:nth-child(3)::before { content: "数量"; }
	.office-invoice-line-table tbody tr td:nth-child(4)::before { content: "単位"; }
	.office-invoice-line-table tbody tr td:nth-child(5)::before { content: "単価（税抜）"; }
	.office-invoice-line-table tbody tr td:nth-child(6)::before { content: "税率"; }
	.office-invoice-line-table tbody tr td:nth-child(7)::before { content: "金額"; }

	.office-invoice-line-table tbody tr td input,
	.office-invoice-line-table tbody tr td select {
		width: 100% !important;
	}
}

/* -------------------------------------------------------------------
 * 出力テンプレートの列（スマートフォン）：1列を1枚のカードにして縦に並べる
 *
 * 列：1 並べ替え / 2 出す内容 / 3 見出し名 / 4 外す
 * ------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.office-body .mng-table.office-column-table {
		min-width: 0;
	}

	.office-column-table thead {
		display: none;
	}

	.office-column-table,
	.office-column-table tbody {
		display: block;
	}

	.office-column-table tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 6px 10px;
		margin-bottom: 10px;
		padding: 8px 10px 10px;
		border: 1px solid var(--mb-border);
		border-radius: 6px;
		background: #FFFFFF;
	}

	.office-column-table tbody tr td {
		display: block;
		padding: 0 !important;
		border: none !important;
	}

	.office-column-table tbody tr td:nth-child(1) { order: 0; }
	.office-column-table tbody tr td:nth-child(4) { order: 1; text-align: right; }
	.office-column-table tbody tr td:nth-child(2) { order: 2; grid-column: 1 / -1; }
	.office-column-table tbody tr td:nth-child(3) { order: 3; grid-column: 1 / -1; }

	.office-column-table tbody tr td:nth-child(3)::before {
		content: "見出し名";
		display: block;
		margin-bottom: 2px;
		font-size: 11px;
		color: var(--mb-text-sub);
	}
}

/* -------------------------------------------------------------------
 * 一覧のカード表示（スマートフォン）
 *
 * officeCommon.js の applyCardTables が、見出しのある表に is-card-sp を付け、各セルに data-label（見出しの文字）を写す。
 * 1行を1枚のカードにして、セルを「項目名（左）・値（右）」で縦に並べる。件名・名前のリンクのあるセルはカードの見出しにする。
 * ------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.office-body .mng-table.is-card-sp {
		min-width: 0;
	}

	.mng-table.is-card-sp thead {
		display: none;
	}

	.mng-table.is-card-sp,
	.mng-table.is-card-sp tbody,
	.mng-table.is-card-sp tfoot {
		display: block;
	}

	.mng-table.is-card-sp tbody tr,
	.mng-table.is-card-sp tfoot tr {
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
		padding: 8px 12px;
		border: 1px solid var(--mb-border);
		border-radius: 6px;
		background: #FFFFFF;
	}

	.mng-table.is-card-sp tbody tr td,
	.mng-table.is-card-sp tfoot tr td {
		display: block;
		overflow: hidden;
		padding: 5px 0 !important;
		border: none !important;
		background: transparent !important;
		text-align: right !important;
		white-space: normal !important;
		width: auto !important;
	}

	/* 項目名（左） */
	.mng-table.is-card-sp tbody tr td::before {
		content: attr(data-label);
		float: left;
		max-width: 45%;
		margin-right: 12px;
		font-size: 12px;
		font-weight: normal;
		color: var(--mb-text-sub);
		text-align: left;
	}

	.mng-table.is-card-sp tbody tr td[data-label=""]::before {
		display: none;
	}

	.mng-table.is-card-sp tbody tr td.is-card-empty {
		display: none;
	}

	/* カードの見出し（件名・名前のリンクのあるセル） */
	.mng-table.is-card-sp tbody tr td.is-card-title {
		order: -1;
		margin-bottom: 4px;
		padding-bottom: 8px !important;
		border-bottom: 1px solid var(--mb-border) !important;
		text-align: left !important;
	}

	.mng-table.is-card-sp tbody tr td.is-card-title::before {
		display: none;
	}

	.mng-table.is-card-sp tbody tr td.is-card-title .mng-table__title {
		font-size: 15px;
		font-weight: 700;
	}

	/* 入力欄のあるセルは、項目名の下に入力欄を横幅いっぱいで出す */
	.mng-table.is-card-sp tbody tr td.is-card-input {
		text-align: left !important;
	}

	.mng-table.is-card-sp tbody tr td.is-card-input::before {
		float: none;
		display: block;
		max-width: none;
		margin-bottom: 2px;
	}

	/* 色の付いた行（期日超過・期日が近い・要確認）は、カード全体に色を付ける */
	.mng-table.is-card-sp tbody tr.office-row--overdue {
		background: var(--mb-error-bg);
	}

	.mng-table.is-card-sp tbody tr.office-row--due-soon,
	.mng-table.is-card-sp tbody tr.office-row--low {
		background: var(--mb-warning-bg);
	}

	/* 行を押すと開くカードは、押せることが分かるよう右に矢印を出す */
	.mng-table.is-card-sp tbody tr.is-row-link {
		position: relative;
		padding-right: 28px;
	}

	.mng-table.is-card-sp tbody tr.is-row-link::after {
		content: "\203A";
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		font-size: 22px;
		color: var(--mb-text-sub);
	}

	.mng-table.is-card-sp tbody tr.is-row-link:hover td {
		background: transparent !important;
	}

	/* カードを並べるので、表の枠の横スクロールは要らない */
	.mng-table-wrap:has(> .is-card-sp) {
		overflow-x: visible;
	}
}

/* -------------------------------------------------------------------
 * 使い方ガイド：注文の入り方（メールの自動取り込み・紙の取り込みを並べる）
 * ------------------------------------------------------------------- */
.office-guide-route-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.office-guide-route {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--mb-border);
	border-top: 3px solid var(--mb-navy);
	border-radius: 6px;
	background: #FFFFFF;
}

.office-guide-route__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.office-guide-route__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--mb-navy-pale);
	color: var(--mb-navy);
	font-size: 22px;
}

.office-guide-route__tag {
	display: inline-block;
	margin-bottom: 4px;
	padding: 0 8px;
	border-radius: 2px;
	background: var(--mb-navy);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.8;
}

.office-guide-route__tag--hand {
	background: var(--mb-gold);
}

.office-guide-route__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.office-guide-route__lead {
	margin-bottom: 10px;
	font-size: 13.5px;
}

.office-guide-route__steps {
	flex-grow: 1;
	margin-bottom: 12px;
	padding-left: 1.4em;
	font-size: 13px;
	color: var(--mb-text-sub);
}

.office-guide-route__steps li {
	margin-bottom: 4px;
}

.office-guide-route__note {
	margin-bottom: 12px;
	font-size: 12px;
	color: var(--mb-error);
}

.office-guide-route .mng-btn {
	align-self: flex-start;
}

/* -------------------------------------------------------------------
 * 使い方ガイド：全体の流れ（入り口の2つが「確かめて確定」で合流する図。PCは横、スマートフォンは縦）
 * ------------------------------------------------------------------- */
.office-guide-flow {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
}

.office-guide-flow__sources {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.office-guide-flow__box {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
	min-width: 150px;
	padding: 12px 14px;
	border: 1px solid var(--mb-border);
	border-radius: 6px;
	background: #FFFFFF;
	font-size: 12px;
	color: var(--mb-text-sub);
}

.office-guide-flow__box > i {
	width: 20px;
	color: var(--mb-navy);
	font-size: 16px;
	text-align: center;
}

.office-guide-flow__box strong {
	display: block;
	font-size: 13.5px;
	color: var(--mb-text);
	white-space: nowrap;
}

.office-guide-flow__box--source {
	border-color: var(--mb-navy);
}

.office-guide-flow__box--main {
	background: var(--mb-navy);
	border-color: var(--mb-navy);
	color: rgba(255, 255, 255, 0.8);
}

.office-guide-flow__box--main > i,
.office-guide-flow__box--main strong {
	color: #FFFFFF;
}

.office-guide-flow__arrow {
	flex-shrink: 0;
	color: var(--mb-text-sub);
}

@media (max-width: 767.98px) {

	.office-guide-route-list {
		grid-template-columns: 1fr;
	}

	.office-guide-flow {
		flex-direction: column;
		align-items: stretch;
		overflow-x: visible;
	}

	.office-guide-flow__sources {
		flex-direction: row;
	}

	.office-guide-flow__sources .office-guide-flow__box {
		flex: 1 1 0;
		min-width: 0;
	}

	.office-guide-flow__arrow {
		text-align: center;
		transform: rotate(90deg);
	}
}

/* -------------------------------------------------------------------
 * メールで届いた注文：画面の説明と、メールの自動取り込みの設定の状態
 * ------------------------------------------------------------------- */
.office-mail-info {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.office-mail-info__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mb-navy-pale);
	color: var(--mb-navy);
	font-size: 18px;
}

.office-mail-info__body {
	min-width: 0;
	font-size: 13.5px;
}

.office-mail-info__status {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 4px;
	background: var(--mb-success-bg);
	color: var(--mb-success);
	font-size: 13px;
	word-break: break-all;
}

.office-mail-info__status--off {
	display: block;
	background: var(--mb-warning-bg);
	color: var(--mb-text);
	word-break: normal;
}

/* 使い方ガイド：メールの初期設定の案内 */
.office-guide-route__setup {
	margin-bottom: 12px;
	padding: 8px 12px;
	border-radius: 4px;
	background: var(--mb-bg-section);
	font-size: 12.5px;
}

@media (max-width: 575.98px) {

	.office-mail-info__icon {
		display: none;
	}
}

/* -------------------------------------------------------------------
 * 確認画面：続けて確認するときの案内・キーボードの操作
 * ------------------------------------------------------------------- */
.office-confirm-hint {
	margin: -8px 0 24px;
	font-size: 12px;
	color: var(--mb-text-sub);
	text-align: center;
	line-height: 2;
}

.office-confirm-hint kbd {
	padding: 1px 6px;
	border: 1px solid var(--mb-border);
	border-radius: 3px;
	background: #FFFFFF;
	color: var(--mb-text);
	font-size: 11px;
	box-shadow: 0 1px 0 var(--mb-border);
}

/* Ctrl + ↓ で移った明細を、一瞬だけ強調する */
.line_tr.is-focus-flash td,
.line_tr.is-focus-flash {
	box-shadow: inset 3px 0 0 var(--mb-navy);
	transition: box-shadow 0.2s;
}

/* -------------------------------------------------------------------
 * キャラクター「まるっと」の出番（空の一覧・全部終わったとき・はじめての案内）
 * ------------------------------------------------------------------- */
.office-chara-empty {
	padding: 28px 16px 20px;
	text-align: center;
}

.office-chara-empty img {
	margin-bottom: 12px;
	animation: office-chara-sway 2.4s ease-in-out infinite;
	transform-origin: 50% 100%;
}

.office-chara-empty__title {
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--mb-navy);
}

.office-chara-empty__text {
	margin: 0;
	font-size: 13px;
	color: var(--mb-text-sub);
}

@keyframes office-chara-sway {
	0%, 100% { transform: rotate(-3deg); }
	50%      { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {

	.office-chara-empty img {
		animation: none;
	}
}

/* 確認画面：いつもと違う明細の目印（初めての商品・数量がいつもより多い／少ない） */
.office-line-mark--usual {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 3px;
	background: #FFF4E0;
	color: #8A5A00;
	font-size: 12px;
}

/* -------------------------------------------------------------------
 * 覚えたことを見せる（確認画面の得意先の下・ダッシュボードの読み取りの様子）
 * ------------------------------------------------------------------- */
.office-learned {
	color: var(--mb-navy);
}

.office-read-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
	padding: 10px 16px;
	border: 1px solid var(--mb-border);
	border-radius: 6px;
	background: #FFFFFF;
	font-size: 13px;
	color: var(--mb-text-sub);
}

.office-read-summary > i {
	color: var(--mb-navy);
}

.office-read-summary strong {
	color: var(--mb-text);
	font-size: 15px;
}

/* -------------------------------------------------------------------
 * 確認画面：明細と注文書の照らし合わせ
 *
 * viewer-sheet：1ページ分の注文書（拡大・縮小はこの幅を変える）。viewer-mark：選んだ明細の位置を光らせる枠。
 * PCでは、明細を下へ進めても注文書が見えるよう、注文書の枠を画面に貼り付ける。
 * ------------------------------------------------------------------- */
.viewer-sheet {
	position: relative;
	width: 100%;
}

.viewer-sheet .viewer-img {
	width: 100%;
	cursor: pointer;
}

.viewer-mark {
	position: absolute;
	left: 1%;
	right: 1%;
	border: 2px solid #E0A100;
	border-radius: 4px;
	background: rgba(255, 196, 0, 0.18);
	pointer-events: none;
}

.viewer-mark.is-pulse {
	animation: office-mark-pulse 0.9s ease-out 1;
}

@keyframes office-mark-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(224, 161, 0, 0.55); }
	100% { box-shadow: 0 0 0 12px rgba(224, 161, 0, 0); }
}

/* 注文書で光らせている明細 */
.line_tbody .line_tr.is-located td:first-child {
	box-shadow: inset 3px 0 0 #E0A100;
}

.line_tbody .line_tr.is-located {
	outline: 2px solid rgba(224, 161, 0, 0.6);
	outline-offset: -2px;
}

/* 「注文書で見る」 */
.office-line-locate {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 6px 4px 0;
	padding: 1px 8px;
	border: 1px solid var(--mb-border);
	border-radius: 3px;
	background: #FFFFFF;
	color: var(--mb-navy);
	font-size: 11.5px;
	line-height: 1.8;
	cursor: pointer;
}

.office-line-locate:hover {
	border-color: var(--mb-navy);
}

@media (min-width: 992px) {

	/* 注文書の枠を画面に貼り付ける（明細を下へ進めても横に見える） */
	.office-viewer {
		position: sticky;
		top: 80px;
		height: calc(100vh - 160px);
		min-height: 480px;
	}

	/* 横並びのときは、明細を選ぶと光るので「注文書で見る」は出さない */
	.office-line-locate {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.viewer-mark.is-pulse {
		animation: none;
	}
}

/* 確認画面（PC）：注文書のその行の切り抜き（画面の下に浮かせる） */
.office-line-snippet {
	position: fixed;
	left: 264px;
	right: 24px;
	bottom: 16px;
	z-index: 1030;
	max-width: 880px;
	margin: 0 auto;
	border: 2px solid #E0A100;
	border-radius: 6px;
	background: #FFFFFF;
	box-shadow: 0 8px 24px rgba(7, 42, 64, 0.18);
	overflow: hidden;
}

.office-line-snippet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 10px;
	background: #FFF4E0;
	color: #8A5A00;
	font-size: 12px;
	font-weight: 700;
}

.office-line-snippet__close {
	border: none;
	background: none;
	color: #8A5A00;
	cursor: pointer;
}

.office-line-snippet__view {
	overflow: hidden;
	background: #FFFFFF;
}

.office-line-snippet__view img {
	display: block;
	max-width: none;
}

@media (max-width: 991.98px) {

	.office-line-snippet {
		display: none !important;
	}
}

/* 切り抜きを出している間は、下の明細が隠れないよう本文の下に余白をとる */
@media (min-width: 992px) {

	body.has-line-snippet .mng-main {
		padding-bottom: 220px;
	}
}

/* 自社情報：見積書・請求書の見本のリンク */
.office-sample-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* 販売管理ソフトへ出力：出力した後に明細を直した注文 */
.office-edited-export {
	border-left: 4px solid var(--mb-error);
}

.office-edited-export .mng-card__title {
	color: var(--mb-error);
}

/* 確認画面：二重登録の注意 */
.office-duplicate-alert {
	border: 1px solid #E8B4B3;
	border-left: 4px solid var(--mb-error);
	background: var(--mb-error-bg);
	color: var(--mb-text);
}

.office-duplicate-alert strong {
	color: var(--mb-error);
}

/* 確認画面：商品を選ぶボタン */
.office-product-pick {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 31px;
	padding: 4px 10px;
	border: 1px solid var(--mb-border);
	border-radius: 4px;
	background: #fff;
	color: var(--mb-text);
	font-size: 13px;
	text-align: left;
}

.office-product-pick:hover,
.office-product-pick:focus {
	border-color: var(--mb-navy);
	outline: none;
}

.office-product-pick > i {
	color: var(--mb-text-sub);
	flex-shrink: 0;
}

.office-product-pick__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.office-product-pick__label.is-empty {
	color: var(--mb-text-sub);
}

/* 商品を選ぶ一覧（PCは中央、スマホは下から） */
.office-picker {
	position: fixed;
	inset: 0;
	z-index: 1060;
}

.office-picker__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
}

.office-picker__panel {
	position: absolute;
	top: 10vh;
	left: 50%;
	transform: translateX(-50%);
	width: 520px;
	max-width: calc(100% - 32px);
	max-height: 75vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
}

.office-picker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid var(--mb-border);
	font-weight: 700;
}

.office-picker__close {
	border: none;
	background: none;
	color: var(--mb-text-sub);
	font-size: 18px;
	padding: 0 4px;
}

.office-picker__search {
	padding: 10px 14px;
	border-bottom: 1px solid var(--mb-border);
}

.office-picker__list {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
}

.office-picker__group {
	padding: 8px 14px 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--mb-text-sub);
	background: var(--mb-bg-section);
}

.office-picker__item {
	display: block;
	width: 100%;
	padding: 9px 14px;
	border: none;
	border-bottom: 1px solid #EFEFEC;
	background: #fff;
	text-align: left;
	font-size: 14px;
	color: var(--mb-text);
}

.office-picker__item:hover {
	background: var(--mb-bg-section);
}

.office-picker__item.is-selected {
	background: var(--mb-navy-pale);
	font-weight: 700;
}

.office-picker__item small {
	display: block;
	color: var(--mb-text-sub);
}

.office-picker__none {
	padding: 16px 14px;
	color: var(--mb-text-sub);
	font-size: 13px;
}

body.is-picker-open {
	overflow: hidden;
}

@media (max-width: 767.98px) {

	.office-picker__panel {
		top: auto;
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		height: 85vh;
		max-height: 85vh;
		border-radius: 12px 12px 0 0;
	}

	.office-picker__search .form-control {
		font-size: 16px;
	}

	.office-picker__item {
		padding: 12px 16px;
	}
}

/* APIキーが未設定のときの案内（AIを使う画面） */
.office-key-alert {
	border: 1px solid #E8B4B3;
	border-left: 4px solid var(--mb-error);
	background: var(--mb-error-bg);
	color: var(--mb-text);
}

.office-key-alert .font-weight-bold {
	color: var(--mb-error);
}

/* ログイン画面：利用規約・プライバシーポリシーへのリンク */
.mng-login__legal {
	margin-top: 20px;
	text-align: center;
	font-size: 12px;
}

.mng-login__legal a {
	margin: 0 8px;
	color: var(--mb-text-sub);
}

/* 利用規約・プライバシーポリシー */
.office-legal-body {
	background: var(--mb-bg-section);
}

.office-legal-header {
	padding: 12px 16px;
	background: #fff;
	border-bottom: 1px solid var(--mb-border);
}

.office-legal-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mb-text);
	font-weight: 700;
	text-decoration: none;
}

.office-legal-header__brand:hover {
	color: var(--mb-navy);
	text-decoration: none;
}

.office-legal {
	max-width: 820px;
	margin: 24px auto;
	padding: 32px 40px;
	background: #fff;
	border: 1px solid var(--mb-border);
	border-radius: 6px;
	line-height: 1.8;
}

.office-legal__title {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 700;
}

.office-legal__lead {
	margin-bottom: 24px;
}

.office-legal section {
	margin-bottom: 22px;
}

.office-legal h2 {
	margin: 0 0 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--mb-border);
	font-size: 16px;
	font-weight: 700;
}

.office-legal ol {
	margin: 0;
	padding-left: 1.5em;
}

.office-legal li {
	margin-bottom: 4px;
}

.office-legal__footer-note {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--mb-border);
	color: var(--mb-text-sub);
	font-size: 13px;
}

.office-legal-footer {
	padding: 8px 16px 32px;
	text-align: center;
	font-size: 13px;
}

.office-legal-footer a {
	margin: 0 10px;
	color: var(--mb-text-sub);
}

@media (max-width: 767.98px) {

	.office-legal {
		margin: 0;
		padding: 20px 16px;
		border: none;
		border-radius: 0;
	}

	.office-legal__title {
		font-size: 20px;
	}
}

/* メールで届いた注文：届かない日が続いているときの知らせ */
.office-mail-info__quiet {
	margin-top: 6px;
	color: var(--mb-warning);
	font-size: 13px;
	font-weight: 700;
}

/* お試し環境の案内（AIを使う画面の上に出す。見本の結果を返していること・御社の注文書で試せること） */
.office-demo-alert {
	border: 1px solid #E6D3A8;
	border-left: 4px solid var(--mb-warning);
	background: var(--mb-warning-bg);
	color: var(--mb-text);
}

/* 御社の注文書で試す：取り込んだ注文書（ページを縦に並べる） */
.office-trial-preview {
	max-height: 720px;
	overflow: auto;
	background: #F2F2F2;
	border: 1px solid var(--mb-border);
	padding: 8px;
}

.office-trial-preview__page {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 8px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

@media (max-width: 991px) {
	.office-trial-preview {
		max-height: 420px;
	}
}

/* 使い方ガイド：画面ごとの使い方（左に操作名、右に説明。幅と折り返しは office-guide-menu-table） */
.office-guide-detail th {
	width: 200px;
	white-space: normal;
	vertical-align: top;
}

.office-guide-jump a {
	display: inline-block;
	margin: 0 14px 6px 0;
}

@media (max-width: 767px) {
	.office-guide-detail th {
		width: 110px;
	}
}