.TopArea,
.CompanyArea,
.UnivArea,
.InstallArea {
	position: relative;
	width: 720px;
	margin: 20px 0px;
}

/***** Top ******/
.TopArea {
	font-size: 14px;
	line-height: 280%;
}
.ChartBox {
	position: relative;
	width: 720px;
	height: 390px;
	line-height: normal;
	margin: 10px 0px 20px 0px;
}
.ChartBox strong {
	font-size: 18px;
	display: block;
}
.ChartBox strong img {
	vertical-align: 2px;
}
.canvas_chart {
	position: relative;
	height: 350px;
	min-height: 350px;
	margin: 0px;
	padding: 10px 0px 0px 30px;
	float: left;
}
.ChartBox table {
	position: relative;
	background-color: #FFFFFF;
	margin: 0px 0px 0px 50px;
	float: left;
}
.ChartBox th {
	height: 40px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: lighter;
	background-color: #004F8F;
}
.ChartBox td {
	height: 40px;
}
.ChartBox td p {
	font-size: 12px;
	margin: 0px;
}
#TopRow {
	background-color: #0078FA;
	color: #FFFFFF;
}
#OotRow {
	background-color: #8F8F8F;
	color: #FFFFFF;
}
#Rank {
	width: 40px;
	text-align: center;
}
#Pref {
	width: 90px;
	padding: 0px 0px 0px 10px;
}
#Amount {
	width: 70px;
	text-align: right;
	padding: 0px 5px 0px 0px;
}
#Rate {
	width: 60px;
	text-align: right;
	padding: 0px 5px 0px 0px;
}

/***** Company *****/
.CompanyArea {
	font-size: 14px;
	line-height: 280%;
}
.MapArea {
	position: relative;
	width: 720px;
	height: 430px;
	background-image: url("../approach/map_back.gif");
	background-size: 720px 430px;
	display: block;
	margin: 0px auto;
}
.MapArea ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.Pin {
	position: absolute;
	width: 30px;
	height: 40px;
	background-image: url("../approach/pin_icn.png");
	background-size: 30px 40px;
}
#AisinPin {
	top: 140px;
	left: 190px;
	z-index: 1;
}
#AskaPin {
	top: 120px;
	left: 210px;
}
#AronPin {
	top: 50px;
	left: 150px;
}
#KondoPin {
	top: 215px;
	left: 315px;
}
#KerPin {
	top: 230px;
	left: 420px;
}
#SanshinPin {
	top: 265px;
	left: 410px;
}
#StarPin {
	top: 20px;
	left: 170px;
}
#ToyotaPin {
	top: 120px;
	left: 280px;
	z-index: 1;
}
#FujiPin {
	top: 130px;
	left: 230px;
}
#MitsubishiPin {
	top: 60px;
	left: 170px;
}
#YasukawaPin {
	top: 60px;
	left: 275px;
}
#RyoeiPin {
	top: 100px;
	left: 260px;
}

.wrap a span{
	position: absolute;
	opacity: 0;
	top: -100px;
	left: -38px;
	width: 100px;
	padding: 5px 0px;
	background-color: #3C3C3C;
	color: #FFFFFF;
	font-size: 12px;
	transition: .2s;
	transform: rotateX(90deg);
	-webkit-transform: rotateX(-90deg);
	-ms-transform: rotateX(-90deg);
	text-align: center;
	line-height: 160%;
	margin: 0px;
}
.wrap a span:after{
	position: absolute;
	top: 100%;
	left: 42px;
	height: 0;
	width: 0;
	border: 8px solid transparent;
	border-top: 8px solid #3C3C3C;
	content: "";
}
.wrap a:hover span{
	opacity: 1;
	top: -60px;
	transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	z-index: 9999;
}
.LinkPosi {
	padding-top: 140px;
	margin-top: -140px;
}
.CompanyList {
	position: relative;
	width: 720px;
	margin: 20px 0px 0px;
}
.CompanyList strong {
	font-size: 18px;
}
.CompanyList strong img {
	vertical-align: 2px;
}
.CompanyList table {
	width: 720px;
	margin: 0px;
}
.CompanyList td span {
	display: block;
	text-align: center;
	line-height: normal;
}
.CompanyList td p {
	line-height: 240%;
	margin: 0px 0px 10px 0px;
}
.CompanyList td > div {
	background-color: #004F8F;
	padding: 5px 10px;
	color: #FFFFFF;
	line-height: normal;
	display: inline-block;
}
.CompanyList th {
	padding: 10px 0px 10px;
	vertical-align: bottom;
}
#CompanyLogo {
	width: 240px;
	height: 100px;
	display: block;
	margin: 0px auto;
}

#CompanyImg,
#CompanyImg_v,
#CompanyImg_m {
	border: solid 1px #AFAFAF;
	margin: 0px 5px;
	vertical-align: bottom;
}
#CompanyImg {
	width: 240px;
	height: 180px;
}
#CompanyImg_v {
	width: 180px;
	height: 240px;
}
#CompanyImg_m {
	width: 160px;
	height: 240px;
}
#ToMapArea {
	line-height: normal;
	font-size: 12px;
	text-align: right;
}
#ToMapArea a {
	color: #000000;
	text-decoration: none;
}
#ToMapArea a:hover {
	color: #00A6FF;
	text-decoration: underline;
}
#ToMapArea img {
	width: 12px;
	height: 12px;
	margin: 0px 6px 0px 0px;
	border: none;
}
#ListLine {
	width: 720px;
	height: 10px;
	margin: 0px;
}
#SpListLine {
	display: none;
}

/***** University *****/
.UnivArea img {
	width: 720px;
	height: 420px;
	display: block;
}

/***** Installation *****/
.InstallArea img {
	width: 720px;
	height: 420px;
	display: block;
}

/********************/
/***** Responsive *****/
/********************/
@media screen and (max-width: 560px) {
	
	.TopArea,
	.CompanyArea,
	.UnivArea,
	.InstallArea {
		position: relative;
		width: 95%;
		margin: 20px auto;
	}

	/***** Top ******/
	.TopArea {
		font-size: 12px;
		line-height: 240%;
	}
	.ChartBox {
		width: 100%;
		height: auto;
	}
	.ChartBox strong {
		font-size: 16px;
	}
	canvas {
		width: 300px !important;
		height: 300px !important;
	}
	.canvas_chart {
		width: 300px;
		height: 300px;
		min-height: 300px;
		float: none;
		display: block;
		margin: 10px auto 0px;
		padding: 0px;
	}
	.ChartBox table {
		margin: 20px auto 0px;
		float: none;
	}
	.ChartBox th {
		height: 35px;
		font-size: 12px;
	}
	.ChartBox td {
		height: 35px;
	}

	/***** Company *****/
	.CompanyArea {
		font-size: 12px;
		line-height: 240%;
	}
	.MapArea {
		width: 300px;
		height: 180px;
		background-size: 300px 180px;
	}
	.Pin {
		width: 15px;
		height: 20px;
		background-size: 15px 20px;
	}
	#AisinPin {
		top: 55px;
		left: 75px;
		z-index: 1;
	}
	#AskaPin {
		top: 45px;
		left: 85px;
	}
	#AronPin {
		top: 15px;
		left: 60px;
	}
	#KondoPin {
		top: 85px;
		left: 130px;
	}
	#KerPin {
		top: 95px;
		left: 180px;
	}
	#SanshinPin {
		top: 108px;
		left: 170px;
	}
	#StarPin {
		top: 10px;
		left: 90px;
	}
	#ToyotaPin {
		top: 50px;
		left: 120px;
		z-index: 1;
	}
	#FujiPin {
		top: 50px;
		left: 95px;
	}
	#MitsubishiPin {
		top: 23px;
		left: 70px;
	}
	#YasukawaPin {
		top: 23px;
		left: 115px;
	}
	#RyoeiPin {
		top: 40px;
		left: 108px;
	}
	.wrap a span {
		display: none;
	}
	.LinkPosi {
		padding-top: 100px;
		margin-top: -100px;
	}
	.CompanyList {
		position: relative;
		width: 100%;
		margin: 10px 0px 0px;
	}
	.CompanyList strong {
		font-size: 16px;
	}
	.CompanyList table {
		width: 100%;
		margin: 0px;
	}
	.CompanyList td p {
		line-height: 200%;
		margin: 5px 0px 10px 0px;
	}
	.CompanyList th {
		padding: 0px 0px 5px;
	}
	#CompanyLogo {
		width: 160px;
		height: 67px;
	}
	#CompanyImg,
	#CompanyImg_v,
	#CompanyImg_m {
		margin: 0px 2px 4px 2px;
	}
	#CompanyImg {
		width: 160px;
		height: 120px;
	}
	#CompanyImg_v {
		width: 120px;
		height: 160px;
	}
	#CompanyImg_m {
		width: 92px;
		height: 123px;
		float: left;
	}
	#ToMapArea {
		font-size: 10px;
	}
	#ToMapArea a:hover {
		color: #000000;
		text-decoration: none;
	}
	#ToMapArea img {
		width: 10px;
		height: 10px;
		vertical-align: -1px;
		margin: 0px 5px 0px 0px;
	}
	#ListLine {
		display: none;
	}
	#SpListLine {
		width: 100%;
		height: 10px;
		background-color: #FFFFFF;
		border-top: dotted 1px #8F8F8F;
		padding: 0px;
		margin: 10px 0px 0px;
		display: block;
	}

	/***** University *****/
	.UnivArea img {
		width: 100%;
		height: auto;
		display: block;
	}
	
	/***** Installation *****/
	.InstallArea img {
		width: 100%;
		height: auto;
		display: block;
	}

}
@media screen and (min-width: 561px) and (max-width: 800px) {
	.TopArea,
	.CompanyArea,
	.UnivArea,
	.InstallArea {
		position: relative;
		width: 95%;
		margin: 20px auto;
	}
	
	/***** Top ******/
	.TopArea {
		font-size: 12px;
		line-height: 240%;
	}
	.ChartBox {
		width: 100%;
		height: auto;
	}
	.ChartBox strong {
		font-size: 16px;
		display: block;
	}
	canvas {
		width: 350px !important;
		height: 350px !important;
	}
	.canvas_chart {
		width: 350px;
		height: 350px;
		min-height: 350px;
		padding: 0px;
		margin: 10px auto 0px;
		float: none;
	}
	.ChartBox table {
		margin: 20px auto 0px;
		float: none;
	}
	.ChartBox th {
		height: 40px;
		font-size: 12px;
	}
	.ChartBox td {
		height: 40px;
	}
	#Rank {
		width: 50px;
	}
	#Pref {
		width: 100px;
	}
	#Amount {
		width: 80px;
	}
	#Rate {
		width: 60px;
	}

	/***** Company *****/
	.CompanyArea {
		font-size: 12px;
		line-height: 240%;
	}
	.MapArea {
		width: 502px;
		height: 320px;
		background-size: 502px 320px;
	}
	.Pin {
		width: 25px;
		height: 33px;
		background-size: 25px 33px;
	}
	#AisinPin {
		top: 105px;
		left: 130px;
		z-index: 1;
	}
	#AskaPin {
		top: 85px;
		left: 145px;
	}
	#AronPin {
		top: 35px;
		left: 105px;
	}
	#KondoPin {
		top: 155px;
		left: 220px;
	}
	#KerPin {
		top: 170px;
		left: 300px;
	}
	#SanshinPin {
		top: 195px;
		left: 285px;
	}
	#StarPin {
		top: 12px;
		left: 120px;
	}
	#ToyotaPin {
		top: 90px;
		left: 205px;
		z-index: 1;
	}
	#FujiPin {
		top: 95px;
		left: 162px;
	}
	#MitsubishiPin {
		top: 45px;
		left: 122px;
	}
	#YasukawaPin {
		top: 40px;
		left: 200px;
	}
	#RyoeiPin {
		top: 75px;
		left: 190px;
	}
	.wrap a span {
		display: none;
	}
	.LinkPosi {
		padding-top: 100px;
		margin-top: -100px;
	}
	.CompanyList {
		position: relative;
		width: 100%;
		margin: 10px 0px 0px;
	}
	.CompanyList strong {
		font-size: 16px;
	}
	.CompanyList table {
		width: 100%;
		margin: 0px;
	}
	.CompanyList td p {
		line-height: 200%;
		margin: 5px 0px 10px 0px;
	}
	.CompanyList th {
		padding: 0px 0px 5px;
	}
	#CompanyLogo {
		width: 180px;
		height: 75px;
	}
	#CompanyImg,
	#CompanyImg_v,
	#CompanyImg_m {
		margin: 0px 1px 4px 1px;
	}
	#CompanyImg {
		width: 180px;
		height: 135px;
	}
	#CompanyImg_v {
		width: 135px;
		height: 180px;
	}
	#CompanyImg_m {
		width: 125px;
		height: 167px;
	}
	#ToMapArea {
		font-size: 10px;
	}
	#ToMapArea a:hover {
		color: #000000;
		text-decoration: none;
	}
	#ToMapArea img {
		width: 10px;
		height: 10px;
		vertical-align: -1px;
		margin: 0px 5px 0px 0px;
	}
	#ListLine {
		display: none;
	}
	#SpListLine {
		width: 100%;
		height: 10px;
		background-color: #FFFFFF;
		border-top: dotted 1px #8F8F8F;
		padding: 0px;
		margin: 10px 0px 0px;
		display: block;
	}

	/***** University *****/
	.UnivArea img {
		width: 100%;
		height: auto;
		display: block;
	}

	/***** Installation *****/
	.InstallArea img {
		width: 100%;
		height: auto;
		display: block;
	}

}