div.navi{
	width:1080px;
	overflow:hidden;
	margin:0 auto 35px;
/*	position: relative;
	top: 50%;*/

}
div.navi div.navi_area,
div.navi div.navi_line,
div.navi div.navi_condition{
	float:left;
	margin-right:20px;
}
div.navi div.navi_basic{
	float:right;
}
/*-------------------------------------------
*navi_area
--------------------------------------------*/
div.navi div.navi_area .svg-wrapper {
	background:url("../images/img_menu_area.jpg") no-repeat scroll 50% 50% #e64d3d;
	height: 110px;
	margin: 0 auto;
	padding: 5px;
	position: relative;
	top: 50%;
	transform: translateY(0%);
	width: 245px;	
}
/*-------------------------------------------
*navi_line
--------------------------------------------*/
div.navi div.navi_line .svg-wrapper {
	background:url("../images/img_menu_line.jpg") no-repeat scroll 50% 50% #f39b13;
	height: 110px;
	margin: 0 auto;
	padding: 5px;
	position: relative;
	top: 50%;
	transform: translateY(0%);
	width: 245px;	
}
/*-------------------------------------------
*navi_condition
--------------------------------------------*/
div.navi div.navi_condition .svg-wrapper {
	background:url("../images/img_menu_condition.jpg") no-repeat scroll 50% 50% #297fb8;
	height: 110px;
	margin: 0 auto;
	padding: 5px;
	position: relative;
	top: 50%;
	transform: translateY(0%);
	width: 245px;	
}
/*-------------------------------------------
*navi_basic
--------------------------------------------*/
div.navi div.navi_basic .svg-wrapper {
	background:url("../images/img_menu_basic.jpg") no-repeat scroll 50% 50% #26ad60;
	height: 110px;
	margin: 0 auto;
	padding: 5px;
	position: relative;
	top: 50%;
	transform: translateY(0%);
	width: 245px;	
}
/*-------------------------------------------
*共通
--------------------------------------------*/
div.navi div.navi_area .shape,
div.navi div.navi_line .shape,
div.navi div.navi_condition .shape,
div.navi div.navi_basic .shape {
	stroke-dasharray: 140 540;
	stroke-dashoffset: -364;
	stroke-width: 3px;
	fill: transparent;
	stroke: #ffffff;
	border-bottom: 5px solid black;
	transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

/*ハック*/
div.navi div.navi_area .shape,
div.navi div.navi_line .shape,
div.navi div.navi_condition .shape,
div.navi div.navi_basic .shape:not(:target) {
  stroke-dashoffset: -408\9; /* IE9 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/*IE10*/
div.navi div.navi_area .shape,
div.navi div.navi_line .shape,
div.navi div.navi_condition .shape,
div.navi div.navi_basic .shape {
	stroke-dasharray: 140 540;
	stroke-dashoffset: -408;
	stroke-width: 3px;
	fill: transparent;
	stroke: #ffffff;
	border-bottom: 5px solid black;
	transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
div.navi div.navi_area .shape,
div.navi div.navi_line .shape,
div.navi div.navi_condition .shape,
div.navi div.navi_basic .shape {
	stroke-dashoffset: -407;
}
}
/*ハック*/

div.navi div.navi_area .text,
div.navi div.navi_line .text,
div.navi div.navi_condition .text,
div.navi div.navi_basic .text {
	font-family: 'Roboto Condensed';
	font-size: 22px;
	line-height: 32px;
	letter-spacing: 8px;
	color: #fff;
	top: -127px;
	left: 2px;
	position: relative;
}
div.navi div.navi_area .svg-wrapper:hover .shape,
div.navi div.navi_line .svg-wrapper:hover .shape,
div.navi div.navi_condition .svg-wrapper:hover .shape,
div.navi div.navi_basic .svg-wrapper:hover .shape {
	stroke-width: 2px;
	stroke-dashoffset: 0;
	stroke-dasharray: 760;
}