/* Graph */

.graph {
	border-bottom: 2px solid #000;
	height: 200px;
	position: relative;
	display: flex;
	color: #000;
}
.graph::before {
	content: '';
	position: absolute;
	left: 1px;
	bottom: -6px;
	height: 10px;
	width: 10px;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	transform: rotateZ(45deg);
}
.graph::after {
	content: '';
	position: absolute;
	right: 1px;
	bottom: -6px;
	height: 10px;
	width: 10px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotateZ(45deg);
}
.graph_area {
	flex-basis: 50%;
	position: relative;
}
.graph_area__filled {
	background: #e3f1fa;
	border-left: 1px dashed #000;
	position: absolute;
	top: 0;
	right: 0;
	bottom: .5px;
}
.graph__superiority #filled-area-1,
.graph__non-inferiority #filled-area-2 {
	display: none;
}
.graph_title {
	position: absolute;
	top: 115%;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 1;
}

.graph_legend {
	position: absolute;
	bottom: 105%;
}
.graph_legend__left {
	left: 25%;
	transform: translate(-50%, 0);
}
.graph_legend__right {
	right: 25%;
	transform: translate(50%, 0);
}
.graph_legend__established,
.graph_legend__super-established {
	width: 140px;
	left: 0;
	top: 25%;
	transform: translate(0, 0);
}
.graph_legend__nonestablished,
.graph_legend__super-nonestablished {
	width: 140px;
	left: 0;
	top: 65%;
	transform: translate(0, 0);
}
.graph__superiority .graph_legend__established,
.graph__superiority .graph_legend__nonestablished,
.graph__non-inferiority .graph_legend__super-established,
.graph__non-inferiority .graph_legend__super-nonestablished {
	display: none;
}

.graph_boldline {
	border-left: 1px solid #000;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.graph__non-inferiority .graph_boldline {
	display: none;
}
.graph_zero {
	border-left: 1px dashed #000;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.graph_zero:after {
	content: '0';
	position: absolute;
	top: 101%;
	font-size: 24px;
	left: 0;
	transform: translate(-50%, 0);
}
.graph_delta {
	position: absolute;
	top: 102%;
	left: -8px;
	font-size: 24px;
	background: #fff;
	z-index: 1;
}
.graph_line {
	background: #000;
	box-sizing: content-box;
	position: absolute;
	height: 2px;
	width: 22px;
	padding: 0 31px;
	transition: .075s linear width;
}
.graph_line::before {
	content: '';
	background: #000;
	position: absolute;
	height: 14px;
	width: 2px;
	left: 0;
	top: -6px;
}
.graph_line::after {
	content: '';
	background: #000;
	position: absolute;
	height: 14px;
	width: 2px;
	right: 0;
	top: -6px;
}
.graph_line-circle {
	background: #000;
	border-radius: 50%;
	position: absolute;
	height: 15px;
	width: 15px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}