@charset "UTF-8";

main {
	height: 100vh;
}
#staff {
	min-height: 700px;
	height: 100vh;
	padding: 60px 0 80px;
	background: url(../img/bg_sky.png) left top no-repeat;
	background-size: 100vw auto ;
	transition: 1s;
	overflow: hidden;
}
/*--------------------------------------
#map
--------------------------------------*/
#staff .selectvideo {
	position: absolute;
	top: 70px;
	right: 0px;
}
#staff .selectvideo select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #001d67;
	padding: 2px 40px 2px 40px;
	font-size: 16px;
	color: #fff;
}
#staff .selectvideo::before {
	display: block;
	position: absolute;
	top: 20%;
	left: 28px;
	width: 1px;
	height: 60%;
	background: #fff;
	content: "";
	font-size: 16px;
}
#staff .selectvideo::after {
	display: block;
	position: absolute;
	top: calc(50% - 2px);
	left: 12px;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 2.5px 0 2.5px;
	border-color: #fff transparent transparent transparent;
}

#staff .map {
	position: absolute;
	z-index: -1;
	top: calc(50vh - 692px);
	left: calc(50vw - 2682px);
	width: 5792px;
	height: 2856px;
	background: url(../img/map.gif)  ;
	transition: 1s;
}
#staff .point {
	position: absolute;
	width: 600px;
	text-align: center;
}
#staff .point p {
	display: inline-block;
	padding:2px 12px;
	background: #ca3b39;
	color: #fff;
	font-size: 18px;
	line-height: 1;
}
#staff .point.sweden {
	top: 640px;
	left: 2680px;
}
#staff h1 {
	color: #001d67;
	font-family: 'Noto Sans Japanese';
	font-weight: 100;
	font-size: 40px;
	letter-spacing: 0.1em;
	text-align: center;
	line-height: 1;
}
#staff h1 .icon {
	display: block;
	margin-bottom: 20px;
	text-align: center;
}
#staff h2 {
	margin-top: 20px;
	color: #001d67;
	font-size: 18px;
	text-align: center;
}
#staff h2 span {
	position: relative;
	top: -3px;
	font-size: 28px;
	margin-right: 20px;
}

/*--------------------------------------
.movie
--------------------------------------*/
.movie {
	position: absolute;
	top: 200px;
	left: 0px;
	width: 658px;
	height: 444px;
	display: inline-block;
	background: linear-gradient(-4deg, #ddd 0%,#ffffff 6%,#ffffff 100%);
	border-bottom: 1px solid #fff;
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.movie video {
	width: 658px;
	height: 370px;
}
.movie p {
	padding: 8px 0 0;
	font-size: 18px;
	line-height: 27px;
	text-align: center;
}
#staff .nav li {
	position: absolute;
	top: 0;
	left: -50px;
	width: 50px;
	height: 100%;
	cursor: pointer;
	transition: 0.5s ease-out;
	text-indent: -9999px;
}
#staff .nav li:hover {
	background: rgba(255,255,255,0.9);
	transition: 0.5s ease-out;
}
#staff .nav li:before {
	display: block;
	position: absolute;
	top: 50%;
	left: 5px;
	width: 30px;
	height: 1px;
	background: #000;
	transform: rotate(-45deg);
	content: "";
}
#staff .nav li:after {
	display: block;
	position: absolute;
	top: calc(50% + 21px);
	left: 5px;
	width: 30px;
	height: 1px;
	background: #000;
	transform: rotate(45deg);
	content: "";
}
#staff .nav li.next {
	top: 0;
	left: auto;
	right: -50px;
}
#staff .nav li.next:before {
	display: block;
	position: absolute;
	top: 50%;
	left: 15px;
	width: 30px;
	height: 1px;
	background: #000;
	transform: rotate(45deg);
	content: "";
}
#staff .nav li.next:after {
	display: block;
	position: absolute;
	top: calc(50% + 20px);
	left: 15px;
	width: 30px;
	height: 1px;
	background: #000;
	transform: rotate(-45deg);
	content: "";
}
/*--------------------------------------
attention
--------------------------------------*/
#staff .attention {
	padding: 0 5vw 30px;
	font-size: 11px;
	line-height: 1.5;
}
/*--------------------------------------
btn_message
--------------------------------------*/
a.btn_message {
	position: absolute;
	top: 700px;
	left: 200px;
	display: inline-block;
	min-height: 31px;
	padding: 7px 7px 0 45px;
	background: url(../img/icon_sketchbook.svg) left center no-repeat;
	background-size: 39px 31px ;
	color: #000;
}
a.btn_message:hover {
	color: #ca3b39;
}


.movie p span {
	position: relative;
	top: -.2em;
	display: inline-block;
	margin-right: 15px;
	font-size: 60%;
}