@charset "UTF-8";










/* ----------------------------------------------------------------------------------------------------



	base



--------------------------------------------------- */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
html,
body	{
	height: 100%;
	width: 100%;
	}

body {
	background: rgba(20, 20, 20, 1);
	color: rgba(0, 0, 0, 1);
	font-family: Meiryo, Osaka, メイリオ, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	position: relative;
	/*
	font-family: Helvetica, Arial, Osaka, "MS PGothic", "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF";
	font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝";
	*/
	}

a,
a:hover {
	color: rgba(0, 0, 0, 1);
	text-decoration: none;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
	}
	a:link { color: rgba(50, 50, 50, 1); }
	a:visited { color: rgba(50, 50, 50, 1); }

img {
	margin: 0;
	padding: 0;
	}

ul { list-style: none; }

h1,
h2,
h3,
h4,
h5,
h6 { font-weight: lighter; }









/* ----------------------------------------------------------------------------------------------------



	font-face



-------------------------------------------------- */










/* ----------------------------------------------------------------------------------------------------



	anchor position



-------------------------------------------------- */

 {
	margin: 0;
	padding: 0;
	}










/* ----------------------------------------------------------------------------------------------------



	display: none;



-------------------------------------------------- */

#fbm { display: none; }










/* ----------------------------------------------------------------------------------------------------



	btn



-------------------------------------------------- */

.btn-entry {}










/* ----------------------------------------------------------------------------------------------------



	common



-------------------------------------------------- */

.inner {
	margin: 0 auto;
	overflow: hidden;
	width: 1000px;
	}










/* ----------------------------------------------------------------------------------------------------



	spm



-------------------------------------------------- */

#spm {
	display: block;
	position: fixed;
	right: 5%;
	top: 5%;
	z-index: 9999;
	}










/* ----------------------------------------------------------------------------------------------------



	header



-------------------------------------------------- */

#header {
	background: rgba(255, 255, 255, 1) url(/recruit/career/theme/img/header/intro-001.png) 50% 60% no-repeat;
	/*background: rgba(250, 220, 0, 1) url(/recruit/career/theme/img/header/intro-001.png) center bottom no-repeat;*/
	overflow: hidden;
	padding: 3% 5%;
	position: relative;

	/*-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/
	}
	body > #header { height: 65%; }

	#header h1 {
		float: left;
		margin: 0;
		}

	#header h2 {
		bottom: 8%;
		display: block;
		float: left;
		left: 0;
		text-align: center;
		position: absolute;
		width: 100%;
		}

	#header #h-menu {
		float: right;
		padding: 10px 0 0;
		}
		#header #h-menu #h-social {
			text-align: right;
			}
			#header #h-menu #h-social li { display: inline-block; }

		#header #h-menu .btn-entry {
			background: rgba(250, 220, 0, 1);
			color: rgba(0, 0, 0, 1);
			display: block;
			padding: 10px 40px;
			margin: 10px 0 0;

			-wbekit-box-shadow: 3px 3px 0 rgba(250, 220, 0, 0.3);
			-moz-box-shadow: 3px 3px 0 rgba(250, 220, 0, 0.3);
			-ms-box-shadow: 3px 3px 0 rgba(250, 220, 0, 0.3);
			-o-box-shadow: 3px 3px 0 rgba(250, 220, 0, 0.3);
			box-shadow: 3px 3px 0 rgba(250, 220, 0, 0.3);
			}
			#header #h-menu .btn-entry:hover {
				background: rgba(250, 220, 0, 0.6);
				margin: 13px -3px 0 0;
				box-shadow: none;
				}










/* ----------------------------------------------------------------------------------------------------



	nav



-------------------------------------------------- */

#nav {
	background: rgba(20, 20, 20, 1);
	}
	#nav ul {
		overflow: hidden;
		text-align: center;
		}
		#nav ul li {
			float: left;
			display: inline-block;
			padding: 2% 0;
			width: 33.33333333333333%;
			}
			#nav ul li a {
				border-left: 1px solid rgba(50, 50, 50, 1);
				color: rgba(255, 255, 255, 1);
				display: block;
				text-align: center;
				padding: 0 5%;
				width: 100%;
				}
				#nav ul li a:hover {
					-webkit-text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
					-moz-text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
					-ms-text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
					-o-text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
					text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
					}
			#nav ul li:nth-child(3) a { border-right: 1px solid rgba(50, 50, 50, 1); }

			#nav ul#n-first {
				border-bottom: 1px solid rgba(50, 50, 50, 1);
				}
			#nav ul#n-second {
				margin: 0 auto;
				text-align: center;
				width: 30%;
				}
				#nav ul#n-second li { padding: 3% 0 5%; }










/* ----------------------------------------------------------------------------------------------------



	cjob



-------------------------------------------------- */

#cjob { overflow: hidden; }
	#cjob li {
		float: left;
		text-align: center;
		width: 33.33333333333333%;
		}
    #cjob li:nth-child(1) { background: url(/recruit/career/theme/img/common/pattern/border-blue.png) rgba(5, 140, 210, 1); }
		#cjob li:nth-child(2) { background: url(/recruit/career/theme/img/common/pattern/border-green.png) rgba(0, 175, 145, 1); }
		#cjob li:nth-child(3) { background: url(/recruit/career/theme/img/common/pattern/border-orange.png) rgba(255, 170, 35, 1); }

		#cjob li a {
			color: rgba(255, 255, 255, 1);
			display: block;
			padding: 8% 5%;
			}
		#cjob li h3 {}
		#cjob li h3 img { border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
		#cjob li h3 p {
			display: block;
			font-size: 200%;
			padding: 10px 0;
			}

		#cjob li h2 { font-size: 95%; }

		#cjob li p.btn-detail {
			background: rgba(255, 255, 255, 1);
			display: inline-block;
			font-size: 90%;
			margin: 20px auto 0;
			padding: 10px 20px;
			
			-webkit-transition-duration: 0.5s;
			-moz-transition-duration: 0.5s;
			-ms-transition-duration: 0.5s;
			-o-transition-duration: 0.5s;
			transition-duration: 0.5s;

			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-ms-border-radius: 5px;
			-o-border-radius: 5px;
			border-radius: 5px;
			}
			#cjob li:nth-child(1) p.btn-detail { color: rgba(5, 140, 210, 1); }
			#cjob li:nth-child(2) p.btn-detail { color: rgba(0, 175, 145, 1); }
			#cjob li:nth-child(3) p.btn-detail { color: rgba(255, 170, 35, 1); }
				#cjob li a:hover p.btn-detail {
					color: rgba(255, 255, 255, 1);
					-webkit-box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
					-moz-box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
					-ms-box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
					-o-box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
					box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
					}
					#cjob li:nth-child(1) a:hover p.btn-detail { background: rgba(5, 140, 210, 1); }
					#cjob li:nth-child(2) a:hover p.btn-detail { background: rgba(0, 175, 145, 1); }
					#cjob li:nth-child(3) a:hover p.btn-detail { background: rgba(255, 170, 35, 1); }










/* ----------------------------------------------------------------------------------------------------



	cfeature



-------------------------------------------------- */

#cfeature { overflow: hidden; }
	#cfeature h2 {
		color: rgba(255, 255, 255, 1);
		text-align: center;
		padding: 5% 0;
		}
	#cfeature li {
		background-position: center center;
		background-repeat: no-repeat;
		float: left;
    position: relative;
		width: 50%;

		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
    
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
		}
    #cfeature li:after{
      content: "";
      display: inline-block;
      height: 20px;
      position: absolute;
      left: calc(50% - 10px);
      top: calc(100% - 45px);
      transform: rotateZ(45deg);
      
      -webkit-transition-duration: 0.5s;
      -moz-transition-duration: 0.5s;
      -ms-transition-duration: 0.5s;
      -o-transition-duration: 0.5s;
      transition-duration: 0.5s;
      
      width: 20px;
      }
		#cfeature li:nth-child(2) { background-image: url(/recruit/career/theme/img/features/concept/thumb-001.png); }
    #cfeature li:nth-child(2):after{
      border-bottom: 3px rgba(255, 255, 255, 1) solid;
      border-right: 3px rgba(255, 255, 255, 1) solid;
      }
		#cfeature li:nth-child(3) { background-image: url(/recruit/career/theme/img/features/message/thumb-001.png); }
    #cfeature li:nth-child(3):after{
      border-bottom: 3px rgba(0, 0, 0, 1) solid;
      border-right: 3px rgba(0, 0, 0, 1) solid;
      }
    #cfeature li:hover{opacity: 0.8;}
    #cfeature li:hover:after{
      top: calc(100% - 35px);
      }

		#cfeature li a {
			display: block;
			padding: 5% 5% 20%;
			}
			#cfeature li:nth-child(2) a {
				color: rgba(255, 255, 255, 1);
				}
			#cfeature li:nth-child(3) a {
				}

			#cfeature li h3 {
				font-size: 40px;
				padding: 2% 0 0;
				}
			#cfeature li h4 { font-size: 15px; }
			#cfeature li p { font-size: 20px; }










/* ----------------------------------------------------------------------------------------------------



	job



-------------------------------------------------- */

#job-wrap {}

#job-wrap div {}

	#job-wrap div h2 {
		display: block;
		margin: 0 auto;
		padding: 5% 0 3%;
		text-align: center;
		width: 80%;
		}
		#job-wrap div h2 img {
			display: inline-block;
			padding: 0 3%;
			}
		#job-wrap div h2 p {
			display: block;
			font-size: 120%;
			padding: 1% 0;
			}
		#job-wrap div h2 small {
			color: rgba(255, 255, 255, 1);
			display: block;
			font-size: 60%;
			}

		#job-wrap #designer,
		#job-wrap #designer h2 { border-bottom: 5px solid rgba(5, 140, 210, 1); }

		#job-wrap #engineer,
		#job-wrap #engineer h2 { border-bottom: 5px solid rgba(0, 175, 145, 1); }

		#job-wrap #planner,
		#job-wrap #planner h2 { border-bottom: 5px solid rgba(255, 170, 35, 1); }

		#job-wrap #designer h2 img { border-bottom: 1px solid rgba(5, 140, 210, 1); }
		#job-wrap #engineer h2 img { border-bottom: 1px solid rgba(0, 175, 145, 1); }
		#job-wrap #planner h2 img { border-bottom: 1px solid rgba(255, 170, 35, 1); }

		#job-wrap #designer h2 p { color: rgba(5, 140, 210, 1); }
		#job-wrap #engineer h2 p { color: rgba(0, 175, 145, 1); }
		#job-wrap #planner h2 p { color: rgba(255, 170, 35, 1); }

		#job-wrap div .inner {
			background-repeat: no-repeat;
			padding: 10%;
			width: 100%;
			
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-ms-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			}
			#job-wrap #designer .inner {
				background-color: rgba(5, 140, 210, 1);
				background-image: url(/recruit/career/theme/img/job/bg-designer.png);
				background-position: right top;
				}
			#job-wrap #engineer .inner {
				background-color: rgba(0, 175, 145, 1);
				background-image: url(/recruit/career/theme/img/job/bg-engineer.png);
				background-position: left top;
				}
			#job-wrap #planner .inner {
				background-color: rgba(255, 170, 35, 1);
				background-image: url(/recruit/career/theme/img/job/bg-planner.png);
				background-position: right top;
				}

			#job-wrap div .inner li {}

				#job-wrap div .inner li:nth-child(1) {}
				#job-wrap div .inner li:nth-child(2) {
					background: rgba(255, 255, 255, 0.2);
					border: 1px solid rgba(255, 255, 255, 1);
					margin: 5% auto 0;
					width: 60%;

					-webkit-box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
					-moz-box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
					-ms-box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
					-o-box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
					box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
					}
					#job-wrap #designer .inner li:nth-child(1),
					#job-wrap #planner .inner li:nth-child(1) { margin: 0 40% 0 0; }
					#job-wrap #engineer .inner li:nth-child(1) { margin: 0 0 0 40%; }

				#job-wrap div .inner li h3 {
					display: inline-block;
					color: rgba(255, 255, 255, 1);
					font-size: 120%;
					}
					#job-wrap div .inner li:nth-child(1) h3 {
						font-style: italic;
						font-size: 200%;
						padding: 1% 3%;
						}
					#job-wrap div .inner li:nth-child(2) h3 {
						text-align: center;
						padding: 3% 0 0;
						width: 100%;
						}
						#job-wrap #designer .inner li:nth-child(1) h3 { background: rgba(5, 140, 210, 0.2); }
						#job-wrap #engineer .inner li:nth-child(1) h3 { background: rgba(0, 175, 145, 0.2); }
						#job-wrap #planner .inner li:nth-child(1) h3 { background: rgba(255, 170, 35, 0.2); }

				#job-wrap div .inner li div {
					font-size: 90%;
					line-height: 1.75em;
					letter-spacing: 0.1em;
					display: block;
					}
					.bt-first {
						padding: 3% 5%;
						background: rgba(255, 255, 255, 0.2);
						}
					.bt-second { padding: 2% 4% 3%; }
					#job-wrap div .inner li p { color: rgba(255, 255, 255, 1); }
					#job-wrap #engineer .inner li p span {
						background: rgba(0, 175, 145, 1);
						color: rgba(255, 255, 255, 1);
						display: inline-block;
						margin: 0 0 5px;
						padding: 2px 10px;

						-webkit-border-radius: 3px;
						-moz-border-radius: 3px;
						-ms-border-radius: 3px;
						-o-border-radius: 3px;
						border-radius: 3px;
						}

			#job-wrap div .inner .btn-entry {
				color: rgba(255, 255, 255, 1);
				display: block;
				margin: 5% auto 0;
				padding: 2% 5%;
				text-align: center;
				width: 30%;
				}
				#job-wrap #designer .inner .btn-entry {
					background: rgba(5, 140, 210, 1);
					-webkit-box-shadow: 3px 3px 0 rgba(5, 140, 210, 0.2);
					-moz-box-shadow: 3px 3px 0 rgba(5, 140, 210, 0.2);
					-ms-box-shadow: 3px 3px 0 rgba(5, 140, 210, 0.2);
					-o-box-shadow: 3px 3px 0 rgba(5, 140, 210, 0.2);
					box-shadow: 3px 3px 0 rgba(5, 140, 210, 0.2);
					}
				#job-wrap #engineer .inner .btn-entry {
					background: rgba(0, 175, 145, 1);
					-webkit-box-shadow: 3px 3px 0 rgba(0, 175, 145, 0.2);
					-moz-box-shadow: 3px 3px 0 rgba(0, 175, 145, 0.2);
					-ms-box-shadow: 3px 3px 0 rgba(0, 175, 145, 0.2);
					-o-box-shadow: 3px 3px 0 rgba(0, 175, 145, 0.2);
					box-shadow: 3px 3px 0 rgba(0, 175, 145, 0.2);
					}
				#job-wrap #planner .inner .btn-entry {
					background: rgba(255, 170, 35, 1);
					-webkit-box-shadow: 3px 3px 0 rgba(255, 170, 35, 0.2);
					-moz-box-shadow: 3px 3px 0 rgba(255, 170, 35, 0.2);
					-ms-box-shadow: 3px 3px 0 rgba(255, 170, 35, 0.2);
					-o-box-shadow: 3px 3px 0 rgba(255, 170, 35, 0.2);
					box-shadow: 3px 3px 0 rgba(255, 170, 35, 0.2);
					}
					#job-wrap #designer .inner .btn-entry:hover {
						-webkit-box-shadow: 0 0 30px rgba(5, 140, 210, 1);
						-moz-box-shadow: 0 0 30px rgba(5, 140, 210, 1);
						-ms-box-shadow: 0 0 30px rgba(5, 140, 210, 1);
						-o-box-shadow: 0 0 30px rgba(5, 140, 210, 1);
						box-shadow: 0 0 30px rgba(5, 140, 210, 1);
						}
					#job-wrap #engineer .inner .btn-entry:hover {
						-webkit-box-shadow: 0 0 30px rgba(0, 175, 145, 1);
						-moz-box-shadow: 0 0 30px rgba(0, 175, 145, 1);
						-ms-box-shadow: 0 0 30px rgba(0, 175, 145, 1);
						-o-box-shadow: 0 0 30px rgba(0, 175, 145, 1);
						box-shadow: 0 0 30px rgba(0, 175, 145, 1);
						}
					#job-wrap #planner .inner .btn-entry:hover {
						-webkit-box-shadow: 0 0 30px rgba(255, 170, 35, 1);
						-moz-box-shadow: 0 0 30px rgba(255, 170, 35, 1);
						-ms-box-shadow: 0 0 30px rgba(255, 170, 35, 1);
						-o-box-shadow: 0 0 30px rgba(255, 170, 35, 1);
						box-shadow: 0 0 30px rgba(255, 170, 35, 1);
						}










/* ----------------------------------------------------------------------------------------------------



	features



-------------------------------------------------- */

#features-wrap {}

	#features-wrap div { color: rgba(255, 255, 255, 1); }

	#features-wrap div h2 {
		color: rgba(255, 255, 255, 1);
		font-size: 200%;
		text-align: center;
		padding: 5% 0 3%;
		}
		#features-wrap div h2 small {
			display: block;
			font-size: 50%;
			padding: 1.5% 0 1%;
			}

	#features-wrap #concept {}
	#features-wrap #message {}

		#features-wrap div .inner {
			padding: 0;
			width: 100%;
			}
		#features-wrap #concept .inner {}
		#features-wrap #message .inner {}

			#features-wrap div .inner div { padding: 5%; }
			#features-wrap #concept .inner div:nth-child(1) {}
			#features-wrap #concept .inner div:nth-child(2) {  }

			#features-wrap #concept .inner div:nth-child(1) {
				background: url(/recruit/career/theme/img/features/concept/bg-001.png) center top no-repeat;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-ms-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				}
			#features-wrap #concept .inner div:nth-child(2) {
				color: rgba(0, 0, 0, 1);
				background: rgba(215, 225, 225, 1) url(/recruit/career/theme/img/features/concept/bg-002.png) center top no-repeat;
				}
			#features-wrap #message .inner div {
				background: url(/recruit/career/theme/img/features/message/bg-001.png) center top no-repeat;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-ms-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				}

			#features-wrap div .inner div h3 {
				text-align: center;
				font-size: 160%;
				padding: 0 0 2%;
				}
				#features-wrap #concept .inner div:nth-child(1) h3 {}
				#features-wrap #concept .inner div:nth-child(2) h3 {}

				#features-wrap div .inner div p {
					font-size: 90%;
					line-height: 1.75em;
					margin: 0 auto;
					width: 30%;
					}

				#features-wrap div .inner div .btn-es {
					background: rgba(255, 60, 60, 1);
					color: rgba(255, 255, 255, 1);
					display: block;
					margin: 2% auto 0;
					text-align: center;
					padding: 1%;
					width: 25%;

					-webkit-box-shadow: 3px 3px 0 rgba(255, 60, 60, 0.2);
					-moz-box-shadow: 3px 3px 0 rgba(255, 60, 60, 0.2);
					-ms-box-shadow: 3px 3px 0 rgba(255, 60, 60, 0.2);
					-o-box-shadow: 3px 3px 0 rgba(255, 60, 60, 0.2);
					box-shadow: 3px 3px 0 rgba(255, 60, 60, 0.2);
					}
					#features-wrap div .inner div .btn-es:hover {
						-webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 1);
						-moz-box-shadow: 0 0 20px rgba(255, 255, 255, 1);
						-ms-box-shadow: 0 0 20px rgba(255, 255, 255, 1);
						-o-box-shadow: 0 0 20px rgba(255, 255, 255, 1);
						box-shadow: 0 0 20px rgba(255, 255, 255, 1);
						}










/* ----------------------------------------------------------------------------------------------------



	relation



-------------------------------------------------- */

#relation { padding: 8% 0; }

	#relation h2 {
		color: rgba(255, 255, 255, 1);
		font-size: 120% !important;
		padding: 0 0 2%;
		text-align: center;
		}

	#relation ul {
		overflow: hidden;
		margin: 0 auto;
		width: 60% !important;
		}
		#relation ul li {
			border: none !important;
			float: left;
			margin: 0 !important;
			text-align: center;
			padding: 1% 0;
			width: 50% !important;
			}
			#relation ul li:nth-child(1) { background: rgba(175, 20, 20, 1); }
			#relation ul li:nth-child(2) { background: rgba(110, 145, 170, 1) !important; }
			#relation ul li img { width: 100%; }










/* ----------------------------------------------------------------------------------------------------



	footer



-------------------------------------------------- */

#footer { text-align: center; }
	
	#footer .inner { width: 100%; }

	#footer p { padding: 2% 2% 0.5%; }

	#footer ul { text-align: center; }
		#footer ul li {
			background: none !important;
			display: inline-block;
			border: none !important;
			margin: 0 !important;
			padding: 0 0.5% 2%;
			width: auto !important;
			box-shadow: none !important;
			}
			#footer ul li a {
				color: rgba(255, 255, 255, 0.6);
				font-size: 80%;
				}
		#footer #copy {
			color: rgba(255, 255, 255, 1);
			background: rgba(0, 0, 0, 1);
			font-size: 70%;
			padding: 3%;
			}







/* ----------------------------------------------------------------------------------------------------



	pagetop



-------------------------------------------------- */

#pagetop {
	background: rgba(250, 220, 0, 1);
	color: rgba(0, 0, 0, 1);
	cursor: pointer;
	font-size: 70%;
	padding: 20px;
	position: fixed;
	right: 2em;
	text-align: center;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	}










/* ----------------------------------------------------------------------------------------------------



	Fullscreen Overlay Styles Effects

	Powered by codrops on Tympanus.net
	http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/

	codrops : http://tympanus.net/codrops/



--------------------------------------------------- */

/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(110, 140, 170, 0.8);
	z-index: 999999;
	}

/* Overlay closing cross */
#trigger-overlay { cursor: pointer; }

.overlay .overlay-close {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: url(/recruit/career/theme/img/common/btn/close.png) no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
	}

/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
	}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 5);
	min-height: 54px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	}

.overlay ul li a {
	border-bottom: 1px dotted rgba(255, 255, 255, 0.6);
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	font-weight: lighter;
	display: block;
	color: #fff;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
	}

.overlay ul li a:hover,
.overlay ul li a:focus { color: #f0f0f0; }

/* Effects */
.overlay-genie {
	background: transparent;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.2s, visibility 0s 0.6s;
	transition: opacity 0.3s 0.2s, visibility 0s 0.6s;
	}

.overlay-genie.open {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	z-index: 9999;
	}

.overlay-genie svg {
	position: absolute;
	top: 0;
	left: 0;
	}

.overlay-genie .overlay-path { fill: rgba(110, 140, 170, 0.8); }

.overlay-genie nav {
	opacity: 0;
	-webkit-transform: scale(0.8) translateY(-48%);
	transform: scale(0.8) translateY(-48%);
	-webkit-transition: opacity 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
	transition: opacity 0.3s 0.3s, transform 0.3s 0.3s;
	}

.overlay-genie .overlay-close {
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	}

.overlay-genie.open nav,
.overlay-genie.open .overlay-close {
	opacity: 1;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	}

.overlay-genie.open nav {
	-webkit-transform: scale(1) translateY(-50%);
	transform: scale(1) translateY(-50%);
	}

.overlay-genie.close nav,
.overlay-genie.close .overlay-close {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	}

@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}










/* ----------------------------------------------------------------------------------------------------





	media print

	
	


-------------------------------------------------- */

@media print {

}