/* CSS Document */

body {
	-webkit-text-size-adjust: 100%;
}

#graphMenu {
	background-color: #004080;
	color: #fff;
 	border-radius: 5px;
	margin: 3px auto;
	padding: 5px 10px;
	display: flex;
	justify-content: space-between;
}

#graphMenu form {
	
}
#graphMenu form input,
#graphMenu form select {
	color: #333;
}
#lineView {

}

.graphBg {
	padding: 15px;
	width: 100%;
  	background-color: #004080;
	margin: 10px auto;
	box-sizing: border-box;
}

/* 1250 �~ 555 */
.graphBox {
	padding-top: 15px;
	width: 1200px;
	height: 644px;
	background-color: #fff;
	position: relative;
	margin: 2em auto 3em auto;
}
.graphBox .pivot {
	position: relative;
}
.waku {
	max-width: 100%;
	width: 1200px;
	height: 644px;
}
.graph {
	max-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 1200px;
	height: 644px;
}
canvas {
	display: inline;
}

/*
.yusetsuGraphBg {
	padding: 15px;
	width: 100%;
	background-color: #6DB2B3;
	margin: 10px auto;
}

.yusetsuGraphBox {
	padding-top: 0px;
	width: 100%;
	height: 700px;
	background-color: #fff;
	position: relative;
	overflow: hidden;
}

.kandenGraphBg {
	padding: 15px;
	width: 100%;
	background-color: #6DB2B3;
	margin: 10px auto;
}
.kandenGraphBg .graphBox {
	padding-top: 0px;
	width: 100%;
	height: 360px;
	background-color: #fff;
	position: relative;
	overflow: hidden;
}
*/

/*
@media screen and (max-width: 768px) {
	#graphMenu {
		flex-direction: column;
	}
	.graphBox {
		max-width: 100%;
		height: calc(100vw * (614/1200));
		margin: 15px auto;
	}
	.waku {
		max-width: 100%;
		height: calc(100vw * (614/1200));
	}
	.graph {
		max-width: 100%;
		height: calc(100vw * (614/1200));
	}
}
*/

svg {
/*	fill: none;
	stroke: none;
	stroke-dasharray: 5000px;
	stroke-dashoffset: 5000px;
	animation: line_animation 3s both;*/
}
#graph1a,#graph1b,#graph1c {
	fill: none;
	stroke-dasharray: 5000px;
	stroke-dashoffset: 5000px;
	animation: line_animation 3s both;
}
@keyframes line_animation {
	0% {
		stroke-dashoffset: 5000px;
	}
	100% {
		stroke-dashoffset: 0px;
	}
}