* {
	box-sizing: border-box;
}

body {
	--elsa-block-action-height: 30px;
	--elsa-form-control-line-height: 2;
	--elsa-form-control-padding-block: 3px;
	--elsa-form-control-padding-inline: 8px;
	--elsa-form-control-border-width: 1px;
	--elsa-form-control-height: calc(2em + var(--elsa-form-control-padding-block) + var(--elsa-form-control-padding-block) + var(--elsa-form-control-border-width) + var(--elsa-form-control-border-width));
	--elsa-button-default-bg: #d2d2d2;
	--elsa-button-default-color: #555;
	--elsa-button-hover-bg: var(--elsa-primary-color, #24333f);
	--elsa-button-hover-color: var(--elsa-primary-contrast, #fff);
	--elsa-button-danger-hover-bg: #b42318;
	/* V2（elsa/css/reset.css）と同じ書体スタック。 */
	font-family: "メイリオ", meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
	color: #333;
	margin: 0;
	padding: 0 0 0 210px;
}

/*
	V2（elsa/css/reset.css）と同じく、フォーム部品へ本文の書体を継承させる。

	指定がないとブラウザ既定（Arial等）になり、同じフォーム上でTEXTと
	Selectorの書体が食い違う。V3では2026-08-05までこの状態だった。
	文字サイズは各ブロックの指定を尊重するため、ここでは書体だけを揃える。
*/

button,
input,
select,
textarea {
	font-family: inherit;
}

#elsaLayout {
	max-width: none;
	margin: 0;
	padding: 30px;
	color: var(--elsa-form-text-color, #333);
	font-size: var(--elsa-form-font-size, 16px);
}

body.elsaHasNavigation {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	align-items: stretch;
	min-height: 100vh;
	min-height: 100dvh;
	padding-left: 0;
}

body.elsaHasNavigation #elsaLayout {
	grid-row: 1;
	grid-column: 2;
	width: 100%;
	min-width: 0;
}

.elsaPageTitleBlock { display: block; }
.elsaBreadcrumb { font-size: var(--elsa-breadcrumb-font-size, 32px); }
.elsaBreadcrumb > ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: var(--elsa-breadcrumb-spacing, 20px) 0 0; padding: 0; list-style: none; }
.elsaBreadcrumb li { display: inline-flex; align-items: baseline; min-width: 0; }
.elsaBreadcrumb li + li::before { margin-right: 6px; color: #7a8791; content: "›"; }
.elsaBreadcrumbAncestor { color: #667085; }
.elsaBreadcrumbCurrent { max-width: 100%; flex-wrap: wrap; column-gap: .2em; }
.elsaBreadcrumb .elsaPageTitle { font-size: inherit; }
.elsaPageTitle { margin: 0; overflow-wrap: anywhere; }
.elsaDeveloperPageBadge { color: var(--elsa-button-danger-hover-bg, #b42318); font-weight: 700; white-space: nowrap; }

.elsaLineBlock { width: 100%; padding-top: var(--elsa-line-top-spacing, 8px); border-bottom: 2px solid #a2a2a2; }
.elsaLineTitle { display: inline-block; margin: 0; padding: 0 10px; border: 2px solid #a2a2a2; border-bottom: 0; border-radius: 5px 5px 0 0; background: #a2a2a2; color: #fff; font-size: inherit; font-weight: normal; line-height: normal; }
.block.elsaLineRow { display: block; width: 100%; padding-top: 0; }

.elsaHistoryBlock { margin: var(--elsa-block-spacing, 8px) 0 0; }
.elsaHistoryBlock--titleless { margin-top: var(--elsa-block-spacing, 8px); }
.elsaHistoryTitle { margin: .83em 0; font-size: 1.5em; }
.elsaHistoryItems { display: grid; gap: 8px; }
.elsaHistoryItem { overflow: hidden; border: 1px solid #d2d2d2; border-radius: 4px; background: #fff; }
.elsaHistorySummary { display: flex; flex-wrap: wrap; align-items: center; min-height: var(--elsa-form-control-height); padding: var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline); gap: 4px 12px; cursor: pointer; line-height: var(--elsa-form-control-line-height); }
.elsaHistorySummary:hover, .elsaHistorySummary:focus-visible { background: #f5f7f9; }
.elsaHistoryTimestamp { font-variant-numeric: tabular-nums; }
.elsaHistoryEvent { font-weight: 600; }
.elsaHistoryActor, .elsaHistoryOverview { color: #667085; }
.elsaHistoryDetail { max-height: 420px; margin: 0; padding: 12px; overflow: auto; border-top: 1px solid #d2d2d2; background: #f8fafc; color: inherit; font: 0.875em/1.6 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.elsaHistoryEmpty { margin: 0; padding: 12px; border: 1px solid #d2d2d2; border-radius: 4px; background: #f8fafc; }
.elsaCapacityBlock { width: 100%; margin: 8px 0 24px; }
.elsaCapacityTrack { position: relative; width: 100%; height: 50px; overflow: hidden; border-radius: 4px; background: var(--elsa-button-default-bg); }
.elsaCapacityFill { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; background: var(--elsa-primary-color, #24333f); transition: width .2s ease; }
.elsaCapacityContent { position: absolute; inset: 0; z-index: 1; color: var(--elsa-form-text-color, #333); pointer-events: none; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.elsaCapacityValue { position: absolute; inset: 4px 8px auto; margin: 0; font-size: inherit; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; text-align: center; }
.elsaCapacityNote { position: absolute; right: 6px; bottom: 3px; max-width: calc(100% - 12px); margin: 0; font-size: .8em; line-height: 1.2; text-align: right; }
.elsaCapacityUnavailable { margin: 0; padding: 12px; border: 1px solid #d2d2d2; border-radius: 4px; background: #f8fafc; }

/* トップページはLINEと内容の間隔を会社別の共通設定へ揃える。 */
.elsaDashboardSections { display: grid; gap: var(--elsa-line-top-spacing, 8px); }
.elsaDashboardSection { display: grid; gap: var(--elsa-block-spacing, 8px); }
.elsaDashboardSection > .elsaLineBlock { padding-top: 0; }
.elsaDashboardSection > .elsaCapacityBlock,
.elsaDashboardSection > .elsaConnectionStatusBlock,
.elsaDashboardSection > .elsaHistoryBlock,
.elsaDashboardSectionContent > .elsaAlertBlock { margin: 0; }

.elsaConnectionStatusBlock { width: 100%; margin: 8px 0 24px; }
.elsaConnectionStatusGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 320px)); justify-content: start; gap: 8px; }
.elsaConnectionStatusCard { --elsa-connection-color: #b58f00; --elsa-connection-icon-color: #ffd400; display: grid; gap: 8px; padding: 10px; border: 1px solid #d2d2d2; border-left: 5px solid var(--elsa-connection-color); border-radius: 5px; background: var(--elsa-form-bg-color, #fff); }
.elsaConnectionStatusCard.is-healthy { --elsa-connection-color: #17823b; --elsa-connection-icon-color: #00a83b; }
.elsaConnectionStatusCard.is-error { --elsa-connection-color: #c9342f; --elsa-connection-icon-color: #e60012; }
.elsaConnectionStatusHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.elsaConnectionStatusHeader h3 { margin: 0; font-size: 1em; }
.elsaConnectionStatusSignal { flex: 0 0 auto; width: 3em; height: 3em; padding: 0; color: var(--elsa-connection-icon-color); background: transparent; }
.elsaConnectionStatusSignal svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.elsaConnectionStatusSignal path { vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision; }
.elsaConnectionStatusItems { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.elsaConnectionStatusItems li { display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; }
.elsaConnectionStatusItemName { font-weight: 700; }
.elsaConnectionStatusItems li > span:not(.elsaConnectionStatusItemName), .elsaConnectionStatusItems time { grid-column: 1 / -1; color: var(--elsa-muted-text-color, #666); font-size: .85em; }
.elsaConnectionStatusLink { justify-self: end; font-weight: 600; line-height: 1.25; }

#elsaNav {
	display: flex;
	position: relative;
	width: 210px;
	min-height: 100vh;
	min-height: 100dvh;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	background: var(--elsa-primary-color, #24333f);
	color: var(--elsa-menu-text-color, #fff);
	font-size: var(--elsa-menu-font-size, 16px);
	overflow: visible;
	box-shadow: none;
}

.elsaNavBrand {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 210px;
	height: 210px;
	padding: 0;
	color: var(--elsa-menu-text-color, #fff);
	font-size: 1.1em;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--elsa-menu-border-color, #fff);
}

.elsaNavBrand img { display: block; width: auto; height: auto; max-width: 210px; max-height: 210px; object-fit: contain; object-position: center; }

.elsaNavMenu { display: flex; flex: 0 0 auto; flex-direction: column; min-width: 0; }
.elsaNavMenu a, .elsaNavLogout { color: var(--elsa-menu-text-color, #fff); text-decoration: none; }
.elsaNavMenu a,
.elsaNavBranchToggle { display: flex; align-items: center; width: 210px; min-height: 45px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--elsa-menu-border-color, #fff); background: var(--elsa-primary-color, #24333f); color: var(--elsa-menu-text-color, #fff); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.elsaNavMenu > .elsaNavLeaf { width: 210px; min-height: 45px; border: 0; border-bottom: 1px solid var(--elsa-menu-border-color, #fff); background: var(--elsa-primary-color, #24333f); }
.elsaNavMenu a:hover, .elsaNavMenu a:focus-visible,
.elsaNavBranchToggle:hover, .elsaNavBranchToggle:focus-visible { background: color-mix(in srgb, var(--elsa-primary-color, #24333f) 82%, #fff); outline: none; }
.elsaNavBranchToggle { position: relative; }
.elsaNavBranchToggle::after { width: 0; height: 0; margin-left: auto; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid currentColor; content: ""; transform: rotate(0); transition: transform 0.2s ease; }
.elsaNavBranch.is-open > .elsaNavBranchToggle::after { transform: rotate(90deg); }
.elsaNavChildren { max-height: 0; overflow: hidden; background: var(--elsa-submenu-color, var(--elsa-primary-color, #24333f)); transition: max-height 0.2s ease; }
.elsaNavChildren > .elsaNavLeaf { width: 210px; min-height: 45px; padding-left: 12px; border: 0; border-bottom: 1px solid var(--elsa-menu-border-color, #fff); background: var(--elsa-submenu-color, var(--elsa-primary-color, #24333f)); }
.elsaNavChildren > .elsaNavBranch > .elsaNavBranchToggle { width: 210px; padding-left: 12px; background: var(--elsa-submenu-color, var(--elsa-primary-color, #24333f)); }
.elsaNavChildren > .elsaNavLeaf:hover, .elsaNavChildren > .elsaNavLeaf:focus-visible,
.elsaNavChildren > .elsaNavBranch > .elsaNavBranchToggle:hover, .elsaNavChildren > .elsaNavBranch > .elsaNavBranchToggle:focus-visible { background: color-mix(in srgb, var(--elsa-submenu-color, var(--elsa-primary-color, #24333f)) 82%, #fff); }
.elsaNavLeaf.elsaNavLevel3 { padding-left: 12px; background: var(--elsa-grandchild-menu-color, var(--elsa-submenu-color, var(--elsa-primary-color, #24333f))); }
.elsaNavBranch.elsaNavLevel3 > .elsaNavBranchToggle { padding-left: 12px; background: var(--elsa-grandchild-menu-color, var(--elsa-submenu-color, var(--elsa-primary-color, #24333f))); }
.elsaNavLeaf.elsaNavLevel3:hover, .elsaNavLeaf.elsaNavLevel3:focus-visible,
.elsaNavBranch.elsaNavLevel3 > .elsaNavBranchToggle:hover, .elsaNavBranch.elsaNavLevel3 > .elsaNavBranchToggle:focus-visible { background: color-mix(in srgb, var(--elsa-grandchild-menu-color, var(--elsa-submenu-color, var(--elsa-primary-color, #24333f))) 82%, #fff); }

.elsaNavUser { display: flex; flex: 0 0 auto; align-items: stretch; min-width: 0; color: var(--elsa-menu-text-color, #fff); background: var(--elsa-primary-color, #24333f); border-bottom: 1px solid var(--elsa-menu-border-color, #fff); }
.elsaNavUserInfo { display: flex; flex-direction: column; justify-content: center; width: 210px; min-height: 64px; padding: 9px 12px; overflow: hidden; color: var(--elsa-menu-text-color, #fff); }
.elsaNavUserInfo > span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elsaNavCompanyName { font-size: 1.05em; font-weight: 700; }
.elsaNavUserName { margin-top: 2px; font-size: 0.85em; }
.elsaNavLogout { display: flex; align-items: center; width: 210px; min-height: 45px; padding: 0 12px; border-bottom: 1px solid var(--elsa-menu-border-color, #fff); background: var(--elsa-primary-color, #24333f); }
.elsaNavLogout:hover, .elsaNavLogout:focus-visible { background: color-mix(in srgb, var(--elsa-primary-color, #24333f) 82%, #fff); outline: none; }
.elsaNavToggleButton { display: none; }
.elsaVisuallyHidden { 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: 670px) {
	body, body.elsaHasNavigation { display: block; padding-left: 0; }
	#elsaLayout { padding: 86px 16px 16px; }
	#elsaNav { position: static; width: 0; height: 0; min-height: 0; padding: 0; overflow: visible; box-shadow: none; }
	.elsaNavBrand { position: fixed; z-index: 32; top: 0; right: 0; left: 0; display: flex; width: 100%; height: 70px; padding: 10px; border-bottom: 1px solid var(--elsa-menu-border-color, #9bb0c1); border-radius: 0 0 22px 22px; background: #fafafa; box-shadow: 5px 0 10px 1px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; }
	.elsaNavBrand.is-mobile-menu-open { border-radius: 0; background: #fafafa; box-shadow: none; }
	.elsaNavBrand img { width: 50px; height: 50px; max-width: 50px; max-height: 50px; object-fit: contain; background: var(--elsa-primary-color, #0078d7); }
	.elsaNavUser { display: none; }
	.elsaNavToggleButton { position: fixed; z-index: 33; right: 20px; bottom: 20px; left: auto; display: block; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: var(--elsa-primary-color, #24333f); cursor: pointer; }
	.elsaNavToggleButton > span { position: absolute; left: 14px; display: inline-block; width: 45%; height: 3px; border-radius: 2px; background: var(--elsa-menu-text-color, #fff); transition: all 0.2s ease; }
	.elsaNavToggleButton > span:nth-child(1) { top: 15px; }
	.elsaNavToggleButton > span:nth-child(2) { top: 23px; }
	.elsaNavToggleButton > span:nth-child(3) { top: 31px; }
	.elsaNavToggleButton.is-mobile-menu-open > span:nth-child(1) { top: 18px; left: 18px; width: 30%; transform: translateY(6px) rotate(-45deg); }
	.elsaNavToggleButton.is-mobile-menu-open > span:nth-child(2) { opacity: 0; }
	.elsaNavToggleButton.is-mobile-menu-open > span:nth-child(3) { top: 30px; left: 18px; width: 30%; transform: translateY(-6px) rotate(45deg); }
	.elsaNavMenu { position: fixed; z-index: 30; right: 0; bottom: -100%; left: 0; display: flex; width: 100%; height: calc(100dvh - 70px); padding: 0 0 70px; overflow-y: scroll; overscroll-behavior-y: contain; background: #fafafa; transition: bottom 0.2s ease; }
	#elsaNav.is-mobile-menu-open .elsaNavMenu { bottom: 0; }
	.elsaNavMenu a, .elsaNavBranchToggle { width: 80%; margin: 0 auto; color: #555; }
	.elsaNavMenu > .elsaNavLeaf, .elsaNavMenu > .elsaNavBranch > .elsaNavBranchToggle { min-height: 65px; border: 0; border-top: 1px solid var(--elsa-menu-border-color, #9bb0c1); background: transparent; }
	.elsaNavMenu > .elsaNavLogout { min-height: 65px; border: 0; border-top: 1px solid var(--elsa-menu-border-color, #9bb0c1); background: transparent; }
	.elsaNavMenu > :first-child > .elsaNavBranchToggle,
	.elsaNavMenu > :first-child.elsaNavLeaf { border-top: 0; }
	.elsaNavBranchToggle::after { border: 0; border-right: 5px solid transparent; border-bottom: 5px solid var(--elsa-menu-border-color, #9bb0c1); border-left: 5px solid transparent; transform: none; }
	.elsaNavBranch.is-open > .elsaNavBranchToggle::after { transform: rotate(180deg); }
	.elsaNavChildren { background: transparent; }
	.elsaNavChildren > .elsaNavLeaf, .elsaNavChildren > .elsaNavBranch > .elsaNavBranchToggle { width: 80%; min-height: 55px; padding-left: 30px; border: 0; background: transparent; }
	.elsaNavChildren > .elsaNavLeaf { position: relative; }
	.elsaNavChildren > .elsaNavLeaf::before { position: absolute; left: 14px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid var(--elsa-menu-border-color, #9bb0c1); content: ""; }
	.elsaNavMenu a:hover, .elsaNavMenu a:focus-visible,
	.elsaNavBranchToggle:hover, .elsaNavBranchToggle:focus-visible { background: transparent; }
	.elsaNavLeaf.elsaNavLevel3, .elsaNavBranch.elsaNavLevel3 > .elsaNavBranchToggle { padding-left: 30px; }
}

@media (max-width: 480px) { #elsaLayout { padding: 78px 8px 8px; } .elsaNavUser { gap: 8px; } }

@media (prefers-reduced-motion: reduce) {
	.elsaNavBrand, .elsaNavToggleButton > span, .elsaNavMenu, .elsaNavChildren, .elsaNavBranchToggle::after { transition-duration: 0.01ms; }
}

body.elsaLoginPage {
	min-height: 100vh;
	min-height: 100dvh;
	padding-left: 0;
	background: #f3f5f7;
}

.elsaLoginPage #elsaLayout {
	min-height: 100vh;
	min-height: 100dvh;
	padding: 24px;
}

.elsaLoginShell {
	display: grid;
	min-height: calc(100vh - 48px);
	min-height: calc(100dvh - 48px);
	place-items: center;
}

.elsaLoginCard {
	width: min(100%, 560px);
	padding: 32px;
	border: 1px solid #dfe3e6;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(36, 51, 63, 0.10);
}

.elsaLoginCard h1 {
	margin: 0 0 20px;
	text-align: center;
}

.elsaLoginCard > .elsaAlertBlock {
	margin: 0 0 8px;
}

.elsaCommandBlock--wide {
	display: block;
	width: 100%;
	height: var(--elsa-block-action-height);
	min-height: var(--elsa-block-action-height);
	margin-top: 20px;
}

@media (max-width: 640px) {
	.elsaLoginPage #elsaLayout { padding: 16px; }
	.elsaLoginShell { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
	.elsaLoginCard { padding: 24px 16px; }
}

@media (max-width: 360px) {
	.elsaLoginPage #elsaLayout { padding: 8px; }
	.elsaLoginShell { min-height: calc(100vh - 16px); min-height: calc(100dvh - 16px); }
	.elsaLoginCard { padding: 20px 12px; }
}

.block {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding-top: 0;
}

.block + .block { padding-top: var(--elsa-block-spacing, 8px); }

/*
	ブロック自身が持つblock_spacingは先行する登録ブロックがある場合だけ有効。
	link/scriptなど非ブロック要素が先にあっても、配置領域の最初のブロックは0にする。
*/
#elsaLayout > [data-block-type]:not([data-block-type] ~ [data-block-type]) { margin-top: 0; }

/* LIST自身は通常の配置領域外周へ余白を作らない。 */
.block.list { padding-top: 0; }

/* #elsaLayout直下では、登録ブロックと共通field rowの兄弟間だけへ設定値を適用する。 */
#elsaLayout > [data-block-type] ~ [data-block-type],
#elsaLayout > .block ~ [data-block-type] { margin-top: var(--elsa-block-spacing, 8px); }
#elsaLayout > [data-block-type] ~ .block,
#elsaLayout > .block ~ .block { padding-top: var(--elsa-block-spacing, 8px); }

.block .left {
	width: 200px;
	display: flex;
	flex-shrink: 0;
}

.block .left p {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-end;
	min-height: var(--elsa-form-control-height);
	margin: 0;
	padding: var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline) var(--elsa-form-control-padding-block) 3px;
	font-size: 1em;
	line-height: var(--elsa-form-control-line-height);
	font-weight: bold;
	border: 1px solid #d2d2d2;
	border-right: none;
	border-radius: 4px 0 0 4px;
	background: #eeeeee;
}

.block .right {
	width: calc(100% - 200px);
	flex: 1 1 auto;
	flex-wrap: wrap;
	min-width: 0;
	min-height: var(--elsa-form-control-height);
	display: flex;
	align-items: center;
}

/*
	非一覧入力フィールドはラベルを上部タブとして本体へ接続する。
	elsa_field_draw()が付ける専用クラスへ限定し、LIST・LINE・配置用.blockへ波及させない。
*/
.block.elsaFieldRow {
	--elsa-field-control-border-color: var(--elsa-field-tab-background-color, #aaa);
	--elsa-field-control-border-radius: 0 4px 4px 4px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	width: 100%;
}

.block.elsaFieldRow > .left {
	position: relative;
	z-index: 1;
	display: block;
	width: max-content;
	max-width: 100%;
}

.block.elsaFieldRow > .left p {
	justify-content: flex-start;
	min-height: 0;
	padding: 4px 10px;
	border: 1px solid var(--elsa-field-tab-background-color, #aaa);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	background: var(--elsa-field-tab-background-color, #aaa);
	color: var(--elsa-field-tab-text-color, #fff);
	font-size: var(--elsa-field-tab-font-size, 16px);
	font-weight: normal;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.block.elsaFieldRow > .right {
	display: flex;
	width: 100%;
	min-width: 0;
	min-height: var(--elsa-form-control-height);
	margin-top: -1px;
}

.block.elsaEditListSpacing + .block.elsaEditListSpacing {
	margin-top: var(--elsa-block-spacing, 8px);
}

@media (max-width: 670px) {
	.block.elsaFieldRow {
		--elsa-field-control-border-radius: 0 0 4px 4px;
		max-width: 100%;
	}

	.block.elsaFieldRow > .left,
	.block.elsaFieldRow > .left p {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	.block.elsaFieldRow--file {
		width: min(100%, var(--elsa-field-row-width, 200px));
	}
}

/* TEXTの外観は配置先ではなく、ブロック自身のクラスだけで決定する。 */

.elsaText {
	width: 100%;
	min-height: var(--elsa-form-control-height);
	padding: var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline);
	border: var(--elsa-form-control-border-width) solid var(--elsa-field-control-border-color, #d2d2d2);
	border-radius: var(--elsa-field-control-border-radius, 4px);
	color: inherit;
	font-size: 1em;
	line-height: var(--elsa-form-control-line-height);
	background: #fff;
}

/* 高さの固定は単一行だけに適用し、textareaのrowsを妨げない。 */

input.elsaText {
	height: var(--elsa-form-control-height);
}

textarea.elsaText {
	resize: vertical;
}

.elsaSelectorSuggest {
	position: relative;
	width: 100%;
}

.elsaSelectorSuggestInput {
	width: 100%;
}

.elsaSelectorField,
.elsaSelectorSuggestInput {
	width: 100%;
	height: var(--elsa-form-control-height);
	min-height: var(--elsa-form-control-height);
	padding: var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline);
	border: var(--elsa-form-control-border-width) solid var(--elsa-field-control-border-color, #d2d2d2);
	border-radius: var(--elsa-field-control-border-radius, 4px);
	color: inherit;
	font: inherit;
	line-height: var(--elsa-form-control-line-height);
}

.elsaSelectorField[multiple] {
	height: auto;
	min-height: calc(var(--elsa-form-control-height) + var(--elsa-form-control-height) + var(--elsa-form-control-height));
}

.elsaSelectorSuggestSelections {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.elsaSelectorSuggestChip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #eaf4ff;
}

.elsaSelectorSuggestRemove {
	display: inline-grid;
	place-items: center;
	width: 1.4em;
	height: var(--elsa-block-action-height);
	min-height: var(--elsa-block-action-height);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.elsaSelectorSuggestList {
	position: absolute;
	z-index: 10;
	top: calc(100% + 2px);
	left: 0;
	width: 100%;
	max-height: 15rem;
	overflow-y: auto;
	border: 1px solid #d2d2d2;
	border-radius: 4px;
	background: #fff;
}

.elsaSelectorSuggestOption {
	display: block;
	width: 100%;
	padding: 8px;
	border: none;
	border-bottom: 1px solid #e0e0e0;
	background: #fff;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.elsaSelectorSuggestOption:hover,
.elsaSelectorSuggestOption:focus {
	background: #eaf4ff;
}

.elsaSelectorSuggestMore {
	display: block;
	width: 100%;
	height: var(--elsa-block-action-height);
	min-height: var(--elsa-block-action-height);
	padding: 0 8px;
	border: none;
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
	font: inherit;
	cursor: pointer;
}

.elsaSelectorSuggestRemove:focus-visible,
.elsaSelectorSuggestMore:focus-visible {
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: 2px;
}

@media (hover: hover) {
	.elsaSelectorSuggestMore:hover {
		background: var(--elsa-button-hover-bg);
		color: var(--elsa-button-hover-color);
	}

	.elsaSelectorSuggestRemove:hover {
		background: var(--elsa-button-danger-hover-bg);
		color: #fff;
	}
}

.elsaSelectorSuggestStatus {
	min-height: 1.4em;
	margin: 4px 0 0;
	color: #667085;
	font-size: .875em;
}

.elsaSelectorSuggestStatus[data-state="error"] {
	color: #b42318;
}

.elsaFieldStatic {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--elsa-form-control-height);
	padding: var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline);
	border: 1px solid var(--elsa-field-control-border-color, #d2d2d2);
	border-radius: var(--elsa-field-control-border-radius, 4px);
	color: inherit;
	line-height: var(--elsa-form-control-line-height);
}

.button {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	height: var(--elsa-block-action-height);
	min-height: var(--elsa-block-action-height);
	padding: 0 15px;
	margin: 4px 8px 4px 0;
	border: none;
	border-radius: 4px;
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
	text-decoration: none;
	font-family: inherit;
	font-size: 1em;
	line-height: 1;
	vertical-align: middle;
	cursor: pointer;
}

.button:focus-visible {
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: 2px;
}

.button:disabled {
	opacity: 0.6;
	cursor: default;
}

.button:disabled:hover,
.button:disabled:focus {
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
}

.button-danger {
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
}

.button-danger:disabled:hover,
.button-danger:disabled:focus {
	background: var(--elsa-button-default-bg);
}

.elsaCommonPlusIcon {
	display: inline-block;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("../php/blocks/icons/plus.svg") center / contain no-repeat;
	mask: url("../php/blocks/icons/plus.svg") center / contain no-repeat;
	vertical-align: -0.125em;
	flex: 0 0 auto;
}

@media (hover: hover) {
	.button:not(:disabled):hover {
		background: var(--elsa-button-hover-bg);
		color: var(--elsa-button-hover-color);
	}

	.button-danger:not(:disabled):hover {
		background: var(--elsa-button-danger-hover-bg);
		color: #fff;
	}
}

.elsaController {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0;
}

.elsaControllerButton {
	height: var(--elsa-block-action-height);
	min-height: var(--elsa-block-action-height);
	padding: 0 15px;
	margin: 0;
	border-radius: 5px;
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
	font-size: 14px;
	line-height: 2;
}


.elsaStatusBlock {
	color: #475467;
	flex: 0 0 100%;
	min-height: 1.4em;
	text-align: center;
}
.elsaStatusBlock:empty { display: none; }

.elsaStatusBlock[data-state="success"] { color: #067647; }
.elsaStatusBlock[data-state="error"] { color: #b42318; }

.elsaAlertDialog,
.elsaConfirmationBlock {
	background: transparent;
	border: 0;
	max-width: min(520px, calc(100vw - 32px));
	padding: 0;
	width: 100%;
}

.elsaAlertDialog::backdrop,
.elsaConfirmationBlock::backdrop { background: rgba(17, 24, 39, .55); }
.elsaAlertDialogPanel,
.elsaConfirmationPanel { background: #fff; border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, .28); display: grid; gap: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 24px; }
.elsaAlertDialogTitle,
.elsaConfirmationTitle { font-size: 1.25em; margin: 0; }
.elsaAlertDialogMessage,
.elsaConfirmationMessage { margin: 0; overflow-wrap: anywhere; }
.elsaAlertDialogField,
.elsaConfirmationField { display: grid; gap: 6px; }
.elsaAlertDialogActions,
.elsaConfirmationActions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.elsaAlertDialogValidation { color: #b42318; font-size: .875em; }

.elsaListContainer {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.elsaListContainer--form { margin-top: var(--elsa-block-spacing, 8px); }
.block.edit > .right > .elsaListContainer--form,
.block.insert > .right > .elsaListContainer--form { margin-top: 0; }

.elsaListTools {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
	gap: 8px;
	margin: 0;
}

.elsaListTools .elsaListSearch {
	display: block;
	grid-column: span 4;
	min-width: 0;
}

.elsaListSearchField { position: relative; min-width: 0; }
.elsaListTools .elsaListSearch input[type="search"] {
	min-width: 0;
	padding-right: 70px;
}
.elsaListSearch input[type="search"]::-webkit-search-cancel-button { appearance: none; }
.elsaListSearchControls {
	position: absolute;
	top: 50%;
	right: 5px;
	display: flex;
	align-items: center;
	gap: 4px;
	transform: translateY(-50%);
}
.elsaListTools .elsaListSearchClearOnly { grid-column: span 1; }

.elsaListFilterDetails { grid-column: span 7; min-width: 0; }
.elsaListFilterDetails > summary {
	display: none;
	cursor: pointer;
	font-weight: 600;
}
.elsaListFilterPanel {
	display: grid !important;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	align-items: end;
	gap: 8px;
}

.elsaListFilter {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
}

.elsaListFilter > span { white-space: nowrap; }
.elsaListFilterRange { grid-column: span 3; }
.elsaListFilterText { grid-column: span 1; }
.elsaListFilterSelect { grid-column: span 1; }
.elsaListFilterClear,
.elsaListSearchHelpButton {
	flex: 0 0 28px;
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	width: 28px;
	height: var(--elsa-block-action-height);
	min-height: var(--elsa-block-action-height);
	padding: 0;
	border: 1px solid #b8c0c7;
	border-radius: 50%;
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
	font-size: 1em;
	line-height: 1;
	text-decoration: none;
}
.elsaListFilterClear[hidden],
.elsaListSearchHelp[hidden],
.elsaListSearchError[hidden] { display: none; }
.elsaListFilterClear { background: var(--elsa-button-default-bg); color: var(--elsa-button-default-color); }
.elsaListFilterClear > span { font-size: 1.25em; }
.elsaListSearchHelpButton > span { font-size: 1em; font-weight: 700; }
.elsaListFilterClear:focus-visible,
.elsaListSearchHelpButton:focus-visible { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: 2px; }
@media (hover: hover) {
	.elsaListFilterClear:hover,
	.elsaListSearchHelpButton:hover { border-color: var(--elsa-button-hover-bg); background: var(--elsa-button-hover-bg); color: var(--elsa-button-hover-color); }
}
.elsaListSearchHelp {
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid #d3d8dc;
	border-radius: 4px;
	background: #f8f9fa;
	font-size: .9em;
}
.elsaListSearchHelp ul { margin: 6px 0; padding-left: 1.4em; }
.elsaListSearchHelp p { margin: 0; }
.elsaListSearchHelp code { white-space: nowrap; }
.elsaListSearchError { margin: 6px 0 0; color: #b42318; font-size: .9em; }
.elsaListTools input[type="search"],
.elsaListTools input[type="text"],
.elsaListTools input[type="date"] {
	width: 100%;
	height: var(--elsa-form-control-height);
	min-height: var(--elsa-form-control-height);
	padding: var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline);
	border: 1px solid #b8c0c7;
	border-radius: 4px;
	font: inherit;
	line-height: var(--elsa-form-control-line-height);
}

.elsaListFilterRange {
	margin: 0;
	padding: 0;
	border: 0;
}

.elsaListFilterRange legend { padding: 0; }
.elsaListRangeControls {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 8px;
}
.elsaListFilterRange label { display: block; min-width: 0; }
.elsaListFilterRange label > span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
.elsaListFilterRange input { width: 100%; }

.elsaListTools select {
	width: 100%;
	height: var(--elsa-form-control-height);
	min-height: var(--elsa-form-control-height);
	padding: var(--elsa-form-control-padding-block) 28px var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline);
	border: 1px solid #b8c0c7;
	border-radius: 4px;
	font: inherit;
	line-height: var(--elsa-form-control-line-height);
	background-color: #fff;
}

@media (max-width: 1200px) {
	.elsaListTools .elsaListSearch { grid-column: span 12; }
	.elsaListFilterDetails { grid-column: span 10; }
	.elsaListFilterRange { grid-column: span 6; }
	.elsaListFilterText { grid-column: span 6; }
	.elsaListFilterSelect { grid-column: span 4; }
}

@media (max-width: 670px) {
	.elsaListFilterDetails { grid-column: span 10; }
	.elsaListFilterDetails > summary {
		display: list-item;
		padding: 7px 10px;
		border: 1px solid #b8c0c7;
		border-radius: 4px;
		background: #fff;
	}
	.elsaListFilterDetails:not([open]) > .elsaListFilterPanel { display: none !important; }
	.elsaListFilterPanel { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 8px; }
	.elsaListFilterRange,
	.elsaListFilterText { grid-column: span 12; }
	.elsaListFilterSelect { grid-column: span 6; }
}

.elsaListSort {
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.elsaListSort > span[aria-hidden="true"] {
	display: inline-block;
	transform: scaleY(.5);
	transform-origin: center;
}

.elsaListSort:hover,
.elsaListSort:focus-visible { text-decoration: underline; }

.elsaListScroll {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	contain: inline-size paint;
	margin: 0;
	border: 1px solid #d2d2d2;
	border-radius: 4px;
}

.elsaListTools + .elsaListScroll,
.elsaListReorderStatus:has(.elsaStatusBlock:not(:empty)) + .elsaListScroll {
	margin-top: var(--elsa-block-spacing, 8px);
}

.elsaList {
	width: 100%;
	border-spacing: 0;
}

.elsaList th,
.elsaList td {
	min-width: 10em;
	border-right: 1px solid #d2d2d2;
	border-bottom: 1px solid #d2d2d2;
	text-align: left;
	vertical-align: middle;
	line-height: 1.4;
}

.elsaList th {
	padding: 7px 8px;
	background: #eeeeee;
	font-weight: 700;
	white-space: nowrap;
}

.elsaList td {
	padding: 4px 8px;
	overflow-wrap: anywhere;
}

.elsaList td.elsaListCellField { padding: 0; }

.elsaList th.elsaListActionHeading,
.elsaList td.elsaListCellAction {
	width: 1%;
	min-width: 2em;
	padding: 3px;
	text-align: center;
}

.elsaList th:last-child,
.elsaList td:last-child { border-right: none; }

.elsaList tbody tr:last-child td { border-bottom: none; }
.elsaList tbody tr:nth-child(even) td { background: #fafafa; }
.elsaList tbody tr:hover td { background: #f2f7fa; }

.elsaText[data-list-field="true"],
.elsaSelectorField[data-list-field="true"],
.elsaSelectorSuggestInput--list {
	width: 100%;
	min-width: 8em;
	min-height: calc(2em + var(--elsa-form-control-padding-block) + var(--elsa-form-control-padding-block));
	height: calc(2em + var(--elsa-form-control-padding-block) + var(--elsa-form-control-padding-block));
	padding: var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline);
	border: 0;
	border-radius: 0;
	line-height: var(--elsa-form-control-line-height);
	background: transparent;
}

.elsaText[data-list-field="true"]:disabled,
.elsaSelectorField[data-list-field="true"]:disabled,
.elsaSelectorSuggestInput--list:disabled {
	color: inherit;
	opacity: 1;
}

.elsaListNav {
	margin: 12px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.elsaListAction {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 2em;
	min-width: 2em;
	height: var(--elsa-block-action-height);
	min-height: var(--elsa-block-action-height);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
	font: inherit;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
}

.elsaListAction:focus-visible {
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: 2px;
}

@media (hover: hover) {
	.elsaListAction:hover {
		background: var(--elsa-button-hover-bg);
		color: var(--elsa-button-hover-color);
	}

	.elsaListAction--delete:hover {
		background: var(--elsa-button-danger-hover-bg);
		color: #fff;
	}
}

.elsaListActionIcon {
	display: block;
	width: 1.2em;
	height: 1.2em;
	background: currentColor;
	-webkit-mask: var(--elsa-list-action-icon) center / contain no-repeat;
	mask: var(--elsa-list-action-icon) center / contain no-repeat;
}

.elsaListAction--view { --elsa-list-action-icon: url("../php/blocks/list_action/icons/view.svg"); }
.elsaListAction--edit { --elsa-list-action-icon: url("../php/blocks/list_action/icons/edit.svg"); }
.elsaListAction--download { --elsa-list-action-icon: url("../php/blocks/list_action/icons/download.svg"); }
.elsaListAction--correct { --elsa-list-action-icon: url("../php/blocks/list_action/icons/correct.svg"); }
.elsaListAction--apply { --elsa-list-action-icon: url("../php/blocks/list_action/icons/apply.svg"); }
.elsaListAction--delete { --elsa-list-action-icon: url("../php/blocks/list_action/icons/delete.svg"); }

.elsaColorControl {
	gap: 10px;
	padding: 0 8px;
	border: 1px solid var(--elsa-field-control-border-color, #d2d2d2);
	border-radius: var(--elsa-field-control-border-radius, 0 4px 4px 0);
}

.elsaColorControl input[type="color"] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	flex: 0 0 40px;
	width: 40px;
	min-width: 40px;
	height: 30px;
	min-height: 30px;
	padding: 0;
	border: 1px solid #d2d2d2;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}

.elsaColorControl input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

.elsaColorControl input[type="color"]::-webkit-color-swatch,
.elsaColorControl input[type="color"]::-moz-color-swatch {
	border: 0;
	border-radius: 0;
}

.elsaColorControl output {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.elsaFileBlock {
	--elsa-file-action-size: 20px;
	--elsa-file-icon-stroke: 3px;
	--elsa-file-button-default-bg: var(--elsa-button-default-bg);
	--elsa-file-button-hover-bg: var(--elsa-button-hover-bg);
	--elsa-file-button-icon: var(--elsa-button-default-color);
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	padding: 0;
}

.elsaFileBlockPreviewSurface {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	background-color: #fff;
}

.elsaFileBlockPreview {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.elsaFileBlockDocumentPreview { border: 0; }

.elsaFileBlock.has-preview .elsaFileBlockPreviewSurface {
	position: absolute;
	inset: 0;
}

.elsaFileBlockPreviewSurface.is-transitioning {
	opacity: 0;
	transition: opacity 0.15s ease;
}

.elsaFileBlockPreviewSurface.is-transitioning.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.elsaFileBlockPreviewSurface.is-transitioning { transition-duration: 0.01ms; }
}

.elsaFileBlock.has-preview .elsaFileBlockDropZone { padding: 0; }

.elsaFileBlockTextPreview {
	box-sizing: border-box;
	padding: 8px;
	resize: none;
	border: 0;
	background: #fff;
	color: #222;
	font: 0.85em/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.elsaFileBlockTypePreview {
	display: grid;
	place-items: center;
	width: min(72%, 120px);
	aspect-ratio: 4 / 5;
	border: 2px solid #7d8790;
	border-radius: 6px;
	background: #fff;
	color: #4a545c;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.elsaFileBlockTypePreview.is-pdf {
	border-color: #c73b32;
	color: #c73b32;
}

.elsaFileBlockTypePreview.is-office {
	border-color: #2e659d;
	color: #2e659d;
}

.elsaFileBlock [data-file-rotate][hidden] { display: none !important; }

.elsaListInfinite {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	min-height: 1px;
	padding: 0;
}

.elsaListInfinite[hidden] { display: none; }
.elsaListInfinite:has(> .button:not([hidden])),
.elsaListInfinite:has(> [data-list-status]:not(:empty)) { padding: var(--elsa-block-spacing, 8px) 0 0; }

.elsaListInfinite [data-list-load-next][hidden] { display: none; }

.elsaListNav > .button,
.elsaListNav > .button:hover,
.elsaListNav > .button:focus,
.elsaListInfinite > .button,
.elsaListInfinite > .button:hover,
.elsaListInfinite > .button:focus,
.elsaListInfinite > .button:disabled,
.elsaListInfinite > .button:disabled:hover {
	background: var(--elsa-button-default-bg);
	color: var(--elsa-button-default-color);
}

.elsaListNav > .button:focus-visible,
.elsaListInfinite > .button:focus-visible {
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: 2px;
}

@media (hover: hover) {
	.elsaListNav > .button:hover,
	.elsaListInfinite > .button:hover {
		background: var(--elsa-button-hover-bg);
		color: var(--elsa-button-hover-color);
	}
}

.elsaListInfinite [data-list-status] { color: #56636d; }

.elsaFileBlockReplace {
	display: none;
	position: absolute;
	z-index: 2;
	inset: 0;
	cursor: default;
}

.elsaFileBlock.has-file .elsaFileBlockReplace { display: block; }

.elsaFileBlockInput {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.elsaFileBlockDropZone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 var(--elsa-file-drop-width, 200px);
	width: var(--elsa-file-drop-width, 200px);
	max-width: 100%;
	min-height: var(--elsa-file-drop-min-height, var(--elsa-file-drop-height, 200px));
	height: var(--elsa-file-drop-height, 200px);
	aspect-ratio: var(--elsa-file-drop-aspect-ratio, auto);
	padding: 8px;
	border: 1px solid var(--elsa-field-control-border-color, #d2d2d2);
	border-radius: var(--elsa-field-control-border-radius, 0 4px 4px 0);
	background: #fff;
	color: #47545e;
	text-align: center;
	overflow: hidden;
}

.elsaFileBlockPrompt { position: relative; z-index: 1; }
.elsaFileBlock.has-file .elsaFileBlockPrompt { display: none; }
.elsaFileBlockFileName { position: relative; z-index: 1; max-width: 100%; overflow-wrap: anywhere; }

.elsaFileBlockActions {
	position: absolute;
	z-index: 3;
	top: 5px;
	right: 5px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	font-size: 10px;
	padding: 3px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.7);
}

.elsaFileBlock:not(.has-file) .elsaFileBlockActions { display: none; }

.elsaFileBlockMenu {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 20px;
	height: var(--elsa-block-action-height);
	min-height: var(--elsa-block-action-height);
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	outline: none;
}

.elsaFileBlockMenu span {
	display: block;
	flex: 0 0 4px;
	width: 100%;
	height: 4px;
	border-radius: 5px;
	background: var(--elsa-file-button-default-bg);
}

.elsaFileBlockMenu:focus span {
	background: var(--elsa-file-button-default-bg);
}

.elsaFileBlock--compactWide {
	--elsa-file-drop-width: 100%;
	--elsa-file-drop-height: 96px;
}

/*
	商品画像は正方形にする。各モールへ登録する商品画像が正方形のため、
	登録時と同じ見え方で確認できる。高さは呼び出し側が
	--elsa-file-square-size で指定でき、既定は140px。
*/

.elsaFileBlock--compactSquare {
	--elsa-file-drop-width: 100%;
	--elsa-file-drop-height: var(--elsa-file-square-size, 140px);
}

.elsaFileBlockMenu:focus-visible {
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: 2px;
}

.elsaFileBlockPicker,
.elsaFileBlockAdd,
.elsaFileBlockPreviewAction,
.elsaFileBlockDownloadAction,
.elsaFileBlockRotate,
.elsaFileBlockDelete {
	display: none;
	position: relative;
	width: var(--elsa-file-action-size);
	height: var(--elsa-block-action-height);
	min-height: var(--elsa-block-action-height);
	margin-top: 3px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--elsa-file-button-default-bg);
	cursor: pointer;
}

.elsaFileBlockActions:hover .elsaFileBlockAction,
.elsaFileBlockActions.is-open .elsaFileBlockAction { display: grid; place-items: center; }
.elsaFileBlockAdd:not(.elsaFileBlockAddAction) {
	display: grid;
	place-items: center;
	position: absolute;
	z-index: 2;
	top: 8px;
	right: 8px;
	margin: 0;
}
.elsaFileBlock.has-file .elsaFileBlockAdd:not(.elsaFileBlockAddAction) { display: none; }
.elsaFileBlockPicker:focus,
.elsaFileBlockAdd:focus,
.elsaFileBlockPreviewAction:focus,
.elsaFileBlockDownloadAction:focus,
.elsaFileBlockRotate:focus,
.elsaFileBlockDelete:focus {
	background: var(--elsa-file-button-default-bg);
}

@media (hover: hover) {
	.elsaFileBlockMenu:hover span,
	.elsaFileBlockPicker:hover,
	.elsaFileBlockAdd:hover,
	.elsaFileBlockPreviewAction:hover,
	.elsaFileBlockDownloadAction:hover,
	.elsaFileBlockRotate:hover {
		--elsa-file-button-icon: var(--elsa-button-hover-color);
		background: var(--elsa-file-button-hover-bg);
	}

	.elsaFileBlockDelete:hover {
		--elsa-file-button-icon: #fff;
		background: var(--elsa-button-danger-hover-bg);
	}
}

.elsaFileBlockPicker::before,
.elsaFileBlockPicker::after,
.elsaFileBlockAdd::before,
.elsaFileBlockAdd::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: var(--elsa-file-icon-stroke);
	border-radius: 1px;
	background: var(--elsa-file-button-icon);
	content: "";
	transform: translate(-50%, -50%);
}

.elsaFileBlockPicker::after,
.elsaFileBlockAdd::after { transform: translate(-50%, -50%) rotate(90deg); }

.elsaFileBlockPreviewAction::before {
	position: absolute;
	inset: 4px;
	background: var(--elsa-file-button-icon);
	content: "";
	-webkit-mask: url("../php/blocks/list_action/icons/view.svg") center / contain no-repeat;
	mask: url("../php/blocks/list_action/icons/view.svg") center / contain no-repeat;
}

.elsaFileBlockDownloadAction::before {
	position: absolute;
	bottom: 2px;
	left: 50%;
	width: 0.9em;
	height: 0.9em;
	box-sizing: border-box;
	border: 3px solid var(--elsa-file-button-icon);
	border-top: 0;
	border-right: 0;
	content: "";
	transform: rotate(-45deg);
	transform-origin: bottom left;
}
.elsaFileBlockDownloadAction::after {
	position: absolute;
	top: 2px;
	left: calc(50% - 1.5px);
	width: 3px;
	height: 13px;
	box-sizing: border-box;
	border-radius: 50%,50%,0,0;
	background: var(--elsa-file-button-icon);
	content: "";
}

.elsaFileBlockRotate { display: none; position: relative; width: 2em; height: 2em; padding: 0; border: 0; border-radius: 50%; font-family: inherit; font-size: 100%; }
.elsaFileBlockRotate::before {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	width: 1em;
	height: 1em;
	background: var(--elsa-file-button-icon);
	content: "";
}
.elsaFileBlockRotate:hover {
	animation: elsa-file-block-v2-rotate 1s infinite;
}
@keyframes elsa-file-block-v2-rotate {
	0% {
	}
	100% {
		transform: rotate(90deg);
		transition: transform 0.3s linear;
	}
}
.elsaFileBlockDelete {
	width: 20px;
	height: 20px;
	border: 0;
}
.elsaFileBlockDelete::before {
	position: absolute;
	top: 9px;
	left: 50%;
	width: 10px;
	height: 9px;
	box-sizing: border-box;
	border: var(--elsa-file-icon-stroke) solid var(--elsa-file-button-icon);
	border-top: 0;
	border-radius: 0 0 2px 2px;
	content: "";
	transform: translateX(-50%);
}
.elsaFileBlockDelete::after {
	position: absolute;
	top: 5px;
	left: 50%;
	width: 14px;
	height: 5px;
	background:
		linear-gradient(var(--elsa-file-button-icon), var(--elsa-file-button-icon)) center bottom / 14px var(--elsa-file-icon-stroke) no-repeat,
		linear-gradient(var(--elsa-file-button-icon), var(--elsa-file-button-icon)) center top / 5px var(--elsa-file-icon-stroke) no-repeat;
	content: "";
	transform: translateX(-50%);
}

.elsaFileBlock.is-dragover .elsaFileBlockDropZone {
	border-color: #028dff;
	background: #eaf4ff;
	color: #075d9f;
}

.elsaAiRequestImages { width: min(100%, 920px); }
.elsaAiRequestImageDrop { display: grid; place-items: center; gap: 6px; min-height: 150px; padding: 20px; border: 2px dashed #9aa6ad; background: #f8fafb; cursor: pointer; text-align: center; }
.elsaAiRequestImageDrop:hover,
.elsaAiRequestImageDrop:focus-visible,
.elsaAiRequestImageDrop.is-dragover { border-color: var(--elsa-primary-color, #24333f); background: #f1f7fa; outline: none; }
.elsaAiRequestImageDrop small { color: #56636d; }
.elsaAiRequestImageDropIcon { position: relative; width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 4px; }
.elsaAiRequestImageDropIcon::before,
.elsaAiRequestImageDropIcon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.elsaAiRequestImageDropIcon::after { transform: translate(-50%, -50%) rotate(90deg); }
.elsaAiRequestImageGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 12px; }
.elsaAiRequestImageGrid:empty { display: none; }
.elsaAiRequestImageCard { position: relative; display: grid; grid-template-rows: 150px auto; min-width: 0; border: 1px solid #c8d0d5; background: #fff; }
.elsaAiRequestImageCard img { display: block; width: 100%; height: 150px; object-fit: contain; background: #eef1f3; }
.elsaAiRequestImageCard > a { display: block; }
.elsaAiRequestImageMeta { display: grid; gap: 8px; min-width: 0; padding: 10px; }
.elsaAiRequestImageMeta > p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elsaAiRequestImageMeta textarea { box-sizing: border-box; width: 100%; min-height: 64px; resize: vertical; }
.elsaAiRequestImageDescription { min-height: 42px; color: #39464d; white-space: normal !important; overflow-wrap: anywhere; }
.elsaAiRequestImageRemove { position: absolute; top: 6px; right: 6px; width: 32px; height: var(--elsa-block-action-height); min-height: var(--elsa-block-action-height); padding: 0; border: 1px solid #b8c0c7; border-radius: 50%; background: var(--elsa-button-default-bg); color: var(--elsa-button-default-color); cursor: pointer; }
.elsaAiRequestImageRemove:focus-visible { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: 2px; }
@media (hover: hover) { .elsaAiRequestImageRemove:hover { border-color: var(--elsa-button-danger-hover-bg); background: var(--elsa-button-danger-hover-bg); color: #fff; } }
.elsaAiRequestImageRemove::before,
.elsaAiRequestImageRemove::after { content: ""; position: absolute; left: 8px; top: 14px; width: 14px; height: 2px; background: currentColor; transform: rotate(45deg); }
.elsaAiRequestImageRemove::after { transform: rotate(-45deg); }
.elsaAiRequestImageCount,
.elsaAiRequestImageEmpty { margin: 8px 0 0; color: #56636d; }

@media (max-width: 640px) {
	.elsaAiRequestImageGrid { grid-template-columns: 1fr; }
	.elsaAiRequestImageCard { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: minmax(112px, auto); }
	.elsaAiRequestImageCard img { height: 100%; min-height: 112px; }
}

.elsaImportBlock {
	display: grid;
	gap: 12px;
	width: 100%;
}

.elsaImportBlockDropZone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 24px;
	border: 2px dashed #aeb8c4;
	border-radius: 8px;
	background: #f8fafc;
	cursor: pointer;
}

.elsaImportBlockLarge .elsaImportBlockDropZone {
	min-height: clamp(280px, 42vh, 440px);
	padding: 40px;
	font-size: 1.15em;
}

.elsaImportBlock.is-dragover .elsaImportBlockDropZone {
	border-color: #028dff;
	background: #eaf4ff;
}

.elsaImportBlockPrompt { font-weight: 600; }
.elsaImportBlockLimit { margin-top: 6px; color: #667085; font-size: 0.85em; }
.elsaImportBlockQueue { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.elsaImportBlockQueue li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #d2d2d2; border-radius: 4px; }
.elsaImportBlockQueue li.is-complete { border-color: #53a653; background: #f0fff0; }
.elsaImportBlockQueue li.is-error { border-color: #b42318; background: #fff1f0; }
.elsaImportBlockFileName { overflow-wrap: anywhere; }
.elsaImportBlockStatus { flex: 0 0 auto; }
.elsaImportBlockResult { flex: 0 0 auto; }
.elsaImportBlockErrors { color: #b42318; }
.elsaImportBlockErrors p { margin: 3px 0; }
.elsaImportBlockStart { justify-self: center; }

.elsaImportPlayground { max-width: 960px; }
.elsaImportPlaygroundActions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

.elsaCheckLabel {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--elsa-form-control-height);
	padding: var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline);
	border: 1px solid var(--elsa-field-control-border-color, #d2d2d2);
	border-radius: var(--elsa-field-control-border-radius, 0 4px 4px 0);
	gap: 8px;
	line-height: var(--elsa-form-control-line-height);
}

.elsaError { color: #b42318; }

@media (max-width: 640px) {

	.block .left,
	.block .right {
		width: 100%;
		flex-basis: 100%;
	}

	.block .left p {
		padding: var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline);
		justify-content: flex-start;
		border-right: 1px solid #d2d2d2;
		border-bottom: none;
		border-radius: 4px 4px 0 0;
	}

	.elsaFieldStatic {
		border-radius: 0 0 4px 4px;
	}

	.elsaColorControl,
	.elsaFileBlockDropZone,
	.elsaCheckLabel {
		border-radius: 0 0 4px 4px;
	}

	.elsaColorControl {
		padding-left: 0;
	}

}
.elsaCheckboxLabel{
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:var(--elsa-form-control-height);
	padding-inline:8px;
	border-radius:5px;
	line-height:var(--elsa-form-control-line-height);
	cursor:pointer;
}
.elsaCheckboxLabel:hover{
	background:var(--elsa-primary-color, #24333f);
	color:#fff;
}
.elsaCheckboxLabel > input[type="checkbox"]{
	position:absolute;
	opacity:0;
	pointer-events:none;
}
.elsaCheckboxLabel > input[type="checkbox"] + span{
	box-sizing:border-box;
	display:inline-block;
	position:relative;
	width:24px;
	height:24px;
	flex:0 0 24px;
	border:2px solid #b7c0c8;
	border-radius:5px;
	background:#fff;
}
.elsaCheckboxLabel > input[type="checkbox"]:checked + span:after{
	content:"";
	position:absolute;
	left:4px;
	top:5px;
	width:11px;
	height:6px;
	border-left:3px solid var(--elsa-primary-color, #24333f);
	border-bottom:3px solid var(--elsa-primary-color, #24333f);
	transform:rotate(-50deg);
}
.elsaCheckboxLabel > input[type="checkbox"]:focus-visible + span{
	outline:2px solid var(--elsa-primary-color, #24333f);
	outline-offset:2px;
}
.elsaCheckboxLabel > input[type="checkbox"]:disabled + span{
	background:#e9ecef;
}
.elsaCheckboxGroup{
	display:flex;
	flex-wrap:wrap;
	gap:4px 16px;
	box-sizing:border-box;
	width:100%;
	min-height:var(--elsa-form-control-height);
	border:var(--elsa-form-control-border-width) solid var(--elsa-field-control-border-color, #d2d2d2);
	border-radius:var(--elsa-field-control-border-radius, 4px);
	background:#fff;
	overflow:hidden;
}
.elsaSwitchGroup{
	display:inline-flex;
	flex-wrap:wrap;
	gap:0;
	box-sizing:border-box;
	max-width:100%;
	min-height:var(--elsa-form-control-height);
	border:var(--elsa-form-control-border-width) solid var(--elsa-field-control-border-color, #d2d2d2);
	border-radius:var(--elsa-field-control-border-radius, 4px);
	background:#fff;
	overflow:hidden;
}
.elsaSwitchChoice{
	position:absolute;
	opacity:0;
	pointer-events:none;
}
.elsaSwitchChoice + label{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:64px;
	min-height:calc(var(--elsa-form-control-height) - (2 * var(--elsa-form-control-border-width)));
	padding:var(--elsa-form-control-padding-block) 12px;
	border:0;
	border-right:1px solid #b7c0c8;
	border-radius:0;
	background:#fff;
	text-align:center;
	line-height:var(--elsa-form-control-line-height);
	cursor:pointer;
}
.elsaSwitchChoice + label:not(:first-of-type){
	margin-left:0;
}
.elsaSwitchChoice + label:last-of-type{
	border-right:0;
	border-radius:0;
}
/* LIST cells use the compact common-button height without changing normal field SWITCHes. */
.elsaList .elsaSwitchGroup{
	flex-wrap:nowrap;
	width:max-content;
	height:30px;
	min-height:30px;
	border-radius:4px;
}
.elsaList .elsaSwitchChoice + label{
	height:calc(30px - (2 * var(--elsa-form-control-border-width)));
	min-height:calc(30px - (2 * var(--elsa-form-control-border-width)));
	padding-top:0;
	padding-bottom:0;
}
.elsaSwitchChoice:checked + label{
	z-index:1;
	border-color:var(--elsa-primary-color, #24333f);
	background:var(--elsa-primary-color, #24333f);
	color:#fff;
}
.elsaSwitchChoice:focus-visible + label{
	outline:2px solid var(--elsa-primary-color, #24333f);
	outline-offset:-3px;
}
.elsaSwitchChoice:disabled + label{
	cursor:default;
	opacity:.6;
}
.elsaPageMessages:empty { display: none; }
.elsaPageMessages { display: grid; gap: 8px; margin: 0; }
.elsaFeedbackOverlay { position: fixed; top: 12px; left: 50%; z-index: 1400; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow-y: auto; transform: translateX(-50%); pointer-events: none; }
.elsaFeedbackOverlayItem { box-sizing: border-box; width: 100%; min-width: 0; box-shadow: 0 10px 28px rgba(20, 36, 48, .2); pointer-events: auto; animation: elsaFeedbackEnter 180ms ease-out both; }
.elsaFeedbackOverlayItem.is-leaving { animation: elsaFeedbackLeave 220ms ease-in both; }
@keyframes elsaFeedbackEnter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes elsaFeedbackLeave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }
.elsaAlertBlock { margin: var(--elsa-block-spacing, 8px) 0 0; }
.elsaPageMessage { align-items: flex-start; background: #fff1f0; border: 1px solid #f2a8a2; border-left: 4px solid #b42318; border-radius: 6px; color: #7a271a; display: flex; gap: 12px; justify-content: space-between; padding: 12px 14px; }
.elsaPageMessage.is-success { background: #ecfdf3; border-color: #75d89a; border-left-color: #067647; color: #05603a; }
.elsaPageMessage.is-info { background: #eff8ff; border-color: #84caff; border-left-color: #1570ef; color: #1849a9; }
.elsaPageMessage.is-warning { background: #fffaeb; border-color: #fec84b; border-left-color: #dc6803; color: #7a2e0e; }
.elsaPageMessageClose { appearance: none; flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: currentColor; cursor: pointer; }
.elsaPageMessageClose::before { content: "\00d7"; font-size: 20px; line-height: 1; }
.elsaPageMessageClose:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (hover: hover) { .elsaPageMessageClose:hover { background: rgba(0, 0, 0, .08); } }
@media (prefers-reduced-motion: reduce) { .elsaFeedbackOverlayItem, .elsaFeedbackOverlayItem.is-leaving { animation: none; } }
@media (max-width: 640px) { .elsaFeedbackOverlay { top: 8px; width: calc(100vw - 24px); max-height: calc(100vh - 16px); } }
.elsaAlertBlock[data-alert-placement] { margin: 0; }
.elsaAlertDialog[data-alert-placement="modal"] { margin: auto; }
.elsaAlertDialog--panel { width: min(720px, calc(100vw - 32px)); }
.elsaAlertDialog--panel .elsaAlertDialogPanel { position: relative; max-height: calc(100vh - 48px); overflow: auto; }
.elsaAlertDialog--panel .elsaAlertDialogTitle:empty { display: none; }
.elsaAlertDialogDragHandle { cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; }
.elsaAlertDialogClose { position: absolute; top: 10px; right: 10px; appearance: none; width: 1.75em; height: var(--elsa-block-action-height); min-height: var(--elsa-block-action-height); padding: 0; border: 0; border-radius: 50%; background: var(--elsa-button-default-bg); color: var(--elsa-button-default-color); cursor: pointer; font: inherit; line-height: 1; }
.elsaAlertDialogClose::before { content: "\00d7"; font-size: 1.1em; }
.elsaAlertDialogClose:focus-visible { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: 2px; }
@media (hover: hover) { .elsaAlertDialogClose:hover { background: var(--elsa-button-hover-bg); color: var(--elsa-button-hover-color); } }
.elsaPageMessageClose { appearance: none; width: 1.5em; height: var(--elsa-block-action-height); min-height: var(--elsa-block-action-height); padding: 0; border: 0; border-radius: 50%; background: var(--elsa-button-default-bg); color: var(--elsa-button-default-color); cursor: pointer; font: inherit; line-height: 1; }
.elsaPageMessageClose:focus-visible { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: 2px; }
@media (hover: hover) { .elsaPageMessageClose:hover { background: var(--elsa-button-hover-bg); color: var(--elsa-button-hover-color); } }
.elsaToastRegion { bottom: 20px; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; position: fixed; right: 20px; z-index: 10000; }
.elsaToast { background: #1f2937; border: 0; border-left: 4px solid #ef4444; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.22); color: #fff; opacity: 1; padding: 12px 16px; transform: translateY(0); transition: opacity .2s, transform .2s; }
.elsaToast.is-success { border-left-color: #32d583; }
.elsaToast.is-leaving { opacity: 0; transform: translateY(8px); }
.elsaFieldError { background: transparent; border: 0; color: #b42318; display: block; flex: 0 0 100%; font-size: .875em; margin: 6px 0 0 !important; padding: 0; white-space: pre-line; }

@media (max-width: 640px) {
	.elsaAlertBlock { margin: var(--elsa-block-spacing, 8px) 0 0; }
	.elsaAlertDialog { margin: auto; max-width: calc(100vw - 24px); }
	.elsaAlertDialogPanel { max-height: calc(100vh - 24px); padding: 18px; }
	.elsaAlertDialogActions > .button { flex: 1 1 auto; }
}
.elsaField[aria-invalid="true"], .has-error input, .has-error select, .has-error textarea, [data-file-block].has-error [data-file-dropzone], [data-import-block].has-error [data-import-dropzone], [data-ai-request-images].has-error [data-ai-request-image-drop] { border-color: #d92d20 !important; box-shadow: 0 0 0 1px #d92d20; }
@media (max-width: 640px) { .elsaToastRegion { bottom: 12px; left: 12px; max-width: none; right: 12px; } }