.kzf-wrap {
	margin: 30px 0;
	border: 1px solid #eee;
	border-radius: 6px;
	overflow: hidden;
	font-size: 15px;
}

/* EDINETの開示データを加工して表示しているため、出典を明記する。
   業績比較ページの表記位置・見た目（カードの外、ページの背景の上）に揃える */
.kzf-data-source-note {
	margin: 8px 0 0;
	text-align: right;
	font-size: 11px;
	color: #999;
}
.kzf-data-source-note a {
	color: #999;
}

.kzf-header {
	background: #F36C21;
	color: #fff;
	padding: 14px 18px;
	font-weight: bold;
	font-size: 18px;
}

.kzf-period {
	color: #333;
	font-weight: normal;
	font-size: 13px;
}

.kzf-period span {
	display: inline-block;
	margin-right: 24px;
}

.kzf-tabs {
	display: flex;
	gap: 4px;
	padding: 10px 18px 0;
	background: #FFF5EF;
}

.kzf-tab-btn {
	flex: 1 1 0;
	min-width: 0;
	appearance: none;
	border: none;
	cursor: pointer;
	background: #FBC4A1;
	color: #8A3B0F;
	font-weight: bold;
	font-size: 14px;
	padding: 10px 8px;
	border-radius: 6px 6px 0 0;
	font-family: inherit;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kzf-tab-btn:hover {
	background: #F9AE7C;
}

.kzf-tab-btn.is-active {
	background: #F36C21;
	color: #fff;
}

.kzf-tab-panel[hidden] {
	display: none;
}

.kzf-section-title {
	background: #FCEEE4;
	color: #B4490F;
	font-weight: bold;
	padding: 9px 18px;
	border-top: 2px solid #F36C21;
	font-size: 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.kzf-view-toggle {
	display: inline-flex;
	margin-left: auto;
	border: 1px solid #E8600F;
	border-radius: 4px;
	overflow: hidden;
	background: #FFF5EF;
}
.kzf-view-btn {
	border: 0;
	background: transparent;
	color: #B4490F;
	font-weight: bold;
	font-size: 12px;
	width: 84px;
	padding: 5px 0;
	text-align: center;
	cursor: pointer;
	line-height: 1.2;
}
.kzf-view-btn.is-active {
	background: #E8600F;
	color: #fff;
}

.kzf-bs-view[hidden] {
	display: none;
}

.kzf-bs-multi-chart,
.kzf-grouped-multi-chart {
	width: 100% !important;
	height: 100% !important;
}

.kzf-bs-multi-wrap {
	margin: 20px 18px 24px;
	height: 320px;
}

.kzf-grouped-wrap.is-horizontal {
	height: 420px;
}

/* BS・PL・CFの「単年」「5年比較」の6つの表示で、ページ全体の縦の長さを揃える。
   グラフの大きさやグラフ同士の余白は一切変えず、足りない分は
   一番下（折れ線グラフの下）にだけ余白を足す。共通の高さは、
   6つのうち最も高い表示（CFの5年比較＋折れ線グラフ）に合わせている。 */
.kzf-panel-body {
	display: flow-root;
	min-height: 766px;
}

/* 単年PLの棒グラフの上の余白。後ろにある .kzf-bs-chart-wrap の margin に上書きされて
   効いていなかったため、詳細度を上げている。現在の約3倍の余白（約12px→約36px）。 */
.kzf-bs-chart-wrap.kzf-pl-bar-chart-wrap {
	margin-top: 24px;
}

.kzf-table {
	width: 100%;
	border-collapse: collapse;
}

.kzf-table th,
.kzf-table td {
	padding: 8px 18px;
	border-bottom: 1px solid #f2f2f2;
	text-align: left;
	font-weight: normal;
}

.kzf-table th {
	width: 55%;
	color: #555;
}

.kzf-table td {
	text-align: right;
	font-weight: bold;
	color: #222;
	font-variant-numeric: tabular-nums;
}

.kzf-empty {
	padding: 18px;
	color: #888;
	margin: 0;
}

.kzf-bs-area {
	display: flex;
	align-items: flex-start;
	gap: 0;
	width: 66.6667%;
	margin: 20px auto 24px;
}

.kzf-area-block {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.kzf-area-block-title {
	font-size: 13px;
	font-weight: bold;
	color: #666;
	text-align: center;
	margin-bottom: 2px;
}

.kzf-area-block-total {
	font-size: 11px;
	color: #999;
	text-align: center;
	margin-bottom: 6px;
}

.kzf-area-stack {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 340px;
}

.kzf-area-cell {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	min-height: 64px;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8px 10px;
	overflow: hidden;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
	transform: scale(0);
	transform-origin: center center;
	opacity: 0;
}

.kzf-area-cell:hover {
	filter: brightness(1.1);
}

/* タブ・ページ切替のたびにJSで付け外しし、
   各要素が中心点から膨れるように表示させる */
.kzf-area-cell.kzf-area-cell-in {
	transform: scale(1);
	opacity: 1;
}

.kzf-area-cell-label {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.kzf-area-cell-value {
	font-size: 12px;
	font-weight: bold;
	margin-top: 4px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

.kzf-area-current-assets {
	background: #A9D4E8;
	color: #fff;
}

.kzf-area-fixed-assets {
	background: #5B8FC7;
	color: #fff;
}

.kzf-area-current-liab {
	background: #E89898;
	color: #fff;
}

.kzf-area-fixed-liab {
	background: #D9707C;
	color: #fff;
}

.kzf-area-net-assets {
	background: #8FC98F;
	color: #fff;
}

.kzf-area-total-assets {
	background: #5B8FC7;
	color: #fff;
}

.kzf-area-total-liab {
	background: #D9707C;
	color: #fff;
}

.kzf-bs-chart-wrap {
	margin: 0 18px 22px;
	height: 280px;
}

.kzf-bs-line-chart {
	width: 100% !important;
	height: 100% !important;
}

/* 折れ線グラフ：タブ・ページ切替のたびに左から右へ伸びるように
   clip-pathで右側からワイプ表示する（JSでクラスを付け外しする） */
.kzf-line-chart-wrap {
	position: relative;
	clip-path: inset( 0 100% 0 0 );
}
.kzf-line-chart-wrap::before {
	content: attr( data-unit );
	position: absolute;
	top: 2px;
	left: 4px;
	font-size: 11px;
	color: #333;
	line-height: 1;
	pointer-events: none;
}
.kzf-line-chart-wrap.kzf-line-in {
	clip-path: inset( 0 0 0 0 );
	transition: clip-path 0.9s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.kzf-bs-chart-note {
	margin: 0;
	padding: 14px;
	background: #FAFAFA;
	border: 1px dashed #ddd;
	border-radius: 6px;
	color: #888;
	font-size: 13px;
	text-align: center;
}

@media (max-width: 600px) {
	.kzf-tabs {
		padding: 8px 10px 0;
		gap: 3px;
	}

	.kzf-tab-btn {
		font-size: 12px;
		padding: 8px 4px;
	}

	.kzf-bs-chart-wrap {
		margin: 0 10px 18px;
		height: 220px;
	}

	.kzf-panel-body {
		min-height: 694px;
	}

	.kzf-bs-chart-wrap.kzf-pl-bar-chart-wrap {
		margin-top: 24px;
	}

	.kzf-bs-multi-wrap {
		margin: 16px 10px 20px;
		height: 260px;
	}

	.kzf-bs-area {
		gap: 0;
		width: auto;
		margin: 16px 10px 20px;
	}

	.kzf-area-stack {
		height: 260px;
		gap: 0;
	}

	.kzf-area-block-title {
		font-size: 11px;
		margin-bottom: 2px;
	}

	.kzf-area-block-total {
		font-size: 10px;
		margin-bottom: 4px;
	}

	.kzf-area-cell {
		min-height: 48px;
		border-radius: 0;
		padding: 6px 6px;
	}

	.kzf-area-cell-label {
		font-size: 13px;
	}

	.kzf-area-cell-value {
		font-size: 10px;
	}
}
/* 折れ線グラフの単位表示は、JSがグラフごとに選んだ単位（data-unit）に従う */