@charset "utf-8";

#contentsWrap > .inner,
.oneColumn #main {
	width: 1024px;
}
.sub #contentsWrap {
	margin-top: 80px;
}
ul.tab {
	margin-bottom: 80px;
}
ul.tab.three li span, ul.tab.three li a {
	width: 340px;
}
ul.tab.three li.select span, ul.tab.three li.select a {
	width: 342px;
}

h2 {
	background-image: url(../branding/img/future/bg_ttl.png);
}
h2 img {
	margin-left: 0!important;
}
.sub.categoryTop.oneColumn h3 {
	font-weight: bold;
	font-size: 20px;
	position: relative;
	margin-bottom: 20px;
}

.sub.categoryTop.oneColumn h3 b {
	display: block;
	font-size: 40px;
	padding-bottom: 15px;
}
.sub.categoryTop.oneColumn h3 b span {
	color: #5eb6e7;
	padding-left: 15px;
}
.lead {
	font-size: 16px;
}
.map {
	margin-top: 90px;
	position: relative;
}
.map:before {
	content: "";
	width: 200vw;
	height: 340px;
	background-image: linear-gradient(-45deg, #fff 25%, #d9ecf9 25%, #d9ecf9 50%, #fff 50%, #fff 75%, #d9ecf9 75%, #d9ecf9 );
	background-size: 28px 28px;
	position: absolute;
	transform: translateX(-50vw) rotate(-7deg);
	top: 20px;
}
.map .japan {
	position: relative;
	text-align: center;
}
.map .earth {
	position: absolute;
	bottom: 190px;
	right: 0;
}
#main .map .area li .person {
	cursor: pointer;
	position: absolute;
	z-index: 1;
	opacity: 0;
	margin-top: 20px;
}
.map .area li .person:hover + .detail,
.map .area li .detail:hover {
	opacity: 1;
	z-index: 3;
	transform: translateY(0);
}
.map .area li .detail {
	position: absolute;
	width: 380px;
	background: #fff;
	box-sizing: border-box;
	padding: 25px;
	border: solid 5px #5eb6e7;
	border-radius: 10px;
	opacity: 0;
	z-index: -1;
	transform: translateY(20px);
	transition: 0.25s ease;
}
.map .area li .detail > * {
	padding-left: 120px;
}
.map .area li .detail .areaName {
	font-size: 18px;
	font-weight: bold;
	color: #5eb6e7;
	margin-bottom: 5px!important;;
}
.map .area li .detail .name dt {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 15px;
}
.map .area li .detail .name dt span {
	font-size: 16px;
}
.map .area li .detail .name dd {
	font-size: 13px;
	line-height: 1.8;
}
.map .area li .detail .comment {
	margin: 20px 0 0!important;
	font-size: 13px;
	line-height: 1.8;
	padding-left: 0;
}
.map .area li.right .detail:before {
	content: "";
	width: 66px;
	height: 29px;
	background: url(../branding/img/students/icon_detail_r.png) no-repeat;
	position: absolute;
	bottom: 60px;
	right: -66px;
}
.map .area li.left .detail:before {
	content: "";
	width: 66px;
	height: 29px;
	background: url(../branding/img/students/icon_detail_l.png) no-repeat;
	position: absolute;
	bottom: 60px;
	left: -66px;
}
.map .area li.area01 .person {
	top: -20px;
	right: 98px;
}
.map .area li.area02 .person {
	top: 163px;
	right: 240px;
}
.map .area li.area03 .person {
	top: 265px;
	right: 335px;
}
.map .area li.area04 .person {
	top: 475px;
	right: 360px;
}
.map .area li.area05 .person {
	top: 352px;
	left: 352px;
}
.map .area li.area06 .person {
	top: 560px;
	left: 302px;
}
.map .area li.area07 .person {
	top: 367px;
	left: 187px;
}
.map .area li.area08 .person {
	top: 455px;
	left: 96px;
}
.map .area li.area09 .person {
	top: 206px;
	left: 58px;
}
.map .area li.area10 .person {
	top: 495px;
	right: 25px;
}
.map .area li.area11 .person {
	top: 490px;
	right: 178px;
}
.map .area li.area01 .detail {
	top: -160px;
	right: 250px;
	background: url(../branding/img/students/img_area01_face.png) no-repeat top 30px left 30px #fff;
}
.map .area li.area02 .detail {
	top: -25px;
	right: 360px;
	background: url(../branding/img/students/img_area02_face.png) no-repeat top 30px left 30px #fff;
}
.map .area li.area03 .detail {
	top: 50px;
	right: 510px;
	background: url(../branding/img/students/img_area03_face.png) no-repeat top 30px left 30px #fff;
}
.map .area li.area04 .detail {
	top: 210px;
	right: -30px;
	background: url(../branding/img/students/img_area04_face.png) no-repeat top 30px left 30px #fff;
}
.map .area li.area05 .detail {
	top: 90px;
	right: 170px;
	background: url(../branding/img/students/img_area05_face.png) no-repeat top 30px left 30px #fff;
}
.map .area li.area06 .detail {
	top: 325px;
	right: 190px;
	background: url(../branding/img/students/img_area06_face.png) no-repeat top 30px left 30px #fff;
}
.map .area li.area07 .detail {
	top: 130px;
	right: 290px;
	background: url(../branding/img/students/img_area07_face.png) no-repeat top 30px left 30px #fff;
}
.map .area li.area08 .detail {
	top: 240px;
	left: 230px;
	background: url(../branding/img/students/img_area08_face.png) no-repeat top 30px left 30px #fff;
}
.map .area li.area09 .detail {
	top: -60px;
	left: 230px;
	background: url(../branding/img/students/img_area09_face.png) no-repeat top 30px left 30px #fff;
}
.map .area li.area10 .detail {
	top: 260px;
	left: 430px;
	background: url(../branding/img/students/img_area10_face.png) no-repeat top 30px left 30px #fff;
}
.map .area li.area11 .detail {
	top: 310px;
	left: 348px;
	background: url(../branding/img/students/img_area11_face.png) no-repeat top 30px left 30px #fff;
}
.map .graph {
	text-align: center;
	margin: -100px 0 70px!important;
}

ul.linkList {
	width: 980px;
	margin: 0 auto 40px;
}

@media screen and (max-width:1024px) {
#main {
	overflow: hidden;
}
}