/************************************
** 比較棒グラフ
************************************/
.pb-bar-graph {
	box-sizing: border-box;
	max-width: 700px;
	margin: 2em auto;
	padding: 2em !important;
	color: #333;
	background: #fafafa;

	@include sp {
		padding: 2em 1em !important;
	}

	&[data-bg] {
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.07);
	}

	&:not([data-bg]) {
		background: none !important;
	}

}

.pb-bar-graph__title {
	margin: 0 auto 2em !important;
	padding: 5px 0 !important;
	font-weight: 600 !important;
	font-size: 16px;
	line-height: 1.8 !important;
	letter-spacing: 1.5px !important;
	text-align: center;

	&.-none {
		display: none;
	}

	&.-border {
		margin-bottom: 3em !important;
		border-bottom: 1px dashed #aaa;
	}
}

.pb-bar-graph .pb-bar-graph__dl {

	&[data-label="top"] {
		margin-top: 1.5em !important;
	}
}

.pb-bar-graph__dl {

	.pb-bar-graph__item {
		position: relative;
		display: flex !important;
		height: 30px;
		margin: 0 auto !important;
		padding: 0 !important;
		// font-size: 0.9em;

		@include sp {
			margin: 0 auto !important;
		}

		+ .pb-bar-graph__item {
			margin-top: 2.5em !important;

			@include sp {
				margin-top: 2em !important;
			}
		}
	}


	.pb-bar-graph__fill {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: #fbd366;
	}

	// .pb-bar-graph__em {
	// 	background: #6cd2d8;
	// }

	.pb-bar-graph__dt {
		position: relative;
		// display: flex;
		// align-items: center;
		width: 50%;
		margin: 0 !important;
		padding: 0 !important;
	}

	.pb-bar-graph__dd {
		position: relative;
		// display: flex;
		flex: 1;
		// align-items: center;
		margin: 0 !important;
		padding: 0 !important;
	}


	// .pb-bar-graph__value {
	// 	top: 5px;
	// 	right: 5px;
	// }


	&[data-bg] {

		.pb-bar-graph__item {
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.03);
		}

		.pb-bar-graph__dt {
			border-right: 2px solid #fff;
		}

		.pb-bar-graph__dd {
			background: #dfe6e8;
		}
	}

	.pb-bar-graph__label,
	.pb-bar-graph__value {
		// position: relative;
		position: absolute;
		z-index: 1;
		margin: 0;
		color: #333;
		font-weight: 600 !important;
		font-size: inherit;
		font-size: 14px !important;
		line-height: 1.5;
		white-space: nowrap !important;
		text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
	}

	// .pb-bar-graph__label {}

	.pb-bar-graph__value {
		top: 50%;
		transform: translateY(-50%);
	}

	&[data-label="top"] {

		.pb-bar-graph__label {
			top: -22px;
			left: 0;
		}
	}

	&[data-label="inner"] {

		.pb-bar-graph__label {
			top: 50%;
			left: 6px;
			margin: 0 6px;
			// color: #fff;
			transform: translateY(-50%);
		}
	}

	&[data-value="right"] {

		.pb-bar-graph__value {
			right: 6px;
			text-align: right;
		}

	}

	&[data-value="left"] {

		.pb-bar-graph__value {
			left: 6px;
		}
	}

}

.pb-bar-graph__item {

	&[data-thin] {

		.pb-bar-graph__fill {
			opacity: 0.4;

		}
	}
}

.pb-bar-graph__dd {
	justify-content: flex-start;
}


/*
 * カラー
 */
.pb-bar-graph[data-colset="y"] {

	background-color: var(--pb_colset_yellow_thin);

	.pb-bar-graph__fill {
		background-color: var(--pb_colset_yellow);
	}

}

.pb-bar-graph[data-colset="p"] {

	background-color: var(--pb_colset_pink_thin);

	.pb-bar-graph__fill {
		background-color: var(--pb_colset_pink);
	}
}

.pb-bar-graph[data-colset="g"] {

	background-color: var(--pb_colset_green_thin);

	.pb-bar-graph__fill {
		background-color: var(--pb_colset_green);
	}
}

// ブルー
.pb-bar-graph[data-colset="b"] {

	background-color: var(--pb_colset_blue_thin);

	.pb-bar-graph__fill {
		background-color: var(--pb_colset_blue);
	}
}

// カスタムカラー
.pb-bar-graph[data-colset="1"] {

	background-color: var(--pb_colset_bargraph_01_bg);

	.pb-bar-graph__fill {
		background-color: var(--pb_colset_bargraph_01);
	}
}