@charset "UTF-8";
/* CSS Document */

#globalNav ul .navOutsourcing:before, #globalNav ul .navOutsourcing:after {
	width: 50%;
}
.mainVisual{position:relative;
	margin-bottom:20px;}
.mainVisual .mainTitle{
	position:absolute;
	font-size: 9vw;
	margin-left:4%;
	color:#fff;
	line-height: 1;
	font-weight: 100;
	padding:30px;
	/*border:solid 1px #fff;*/
	letter-spacing: -5px;
	top: 48%;
	transform: translate(0%, -48%);
	}
.mainVisual .mainTitle span{
	display: inline-block;
	padding:0px 10px 10px 10px;
		background-color: #1b1b1b;
	margin-bottom:5px;
	}
section {
	margin-bottom: 80px;
}
.gray{color:#808080; 
	font-size: 13px;
}
/*=======================
■募集中の案件
========================*/	
#openPosition  {
	max-width: 800px;
	margin:0 auto 60px auto;}
#openPosition li {
	text-align: left;
	margin:5px 0px;
	padding:5px 10px;
	border-radius: 6px;
	font-weight: bold;
	}
#openPosition li span {
	display: block;
	font-weight: normal;}
	
#openPosition li.active {
	background-color: #ffcc00;
		}
#openPosition li.inactive {
	background-color: #f2f2f2;
	color:#808080;
		}
/*=======================
■Q$A
========================*/	
#qa{
	background: #fafafa;
	padding:60px 0;
	margin-bottom:-20px;}
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	font-family: 'FontAwesome', sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa dt,.cp_qa dd {
	display: block;
	position: relative;
	padding: 20px 30px;
	margin:0px 0px 10px 50px;
	border-radius: 3px;
	text-align: left;
	background: #fff;
	box-shadow: 1px 1px 10px 0px rgba(94,0,71,0.1);
}
.cp_qa dl {
	display: flex;
	flex-direction: column;
	margin-bottom:20px;
}
.cp_qa dt {
	font-weight: bold;
}
.cp_qa dd {
	height:100%;
}

/* 吹き出し▶︎ */
.cp_qa dt::before,.cp_qa dd::before{
	position: absolute;
	z-index: 99;
	top: 0.5em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
}
/* 質問吹き出し▶︎ */
.cp_qa dt::before, .cp_qa dd::before {
	left: -0.5em;
	border-width: 5px 8.7px 5px 0;
	border-color: transparent #fff; transparent transparent;
	
}
/* ?!アイコン */
.cp_qa dt::after, .cp_qa dd::after {
	font-size: 20px;
	position: absolute;
	top: 0px;
	color: #ffffff;
	border-radius: 50%;
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 1.2em;
	left: -50px;
	margin: 0 0.5em 0 0;
	padding: 7px 12px;
	font-family: 'Righteous', cursive;
	
}
/* ?アイコン */
.cp_qa dt::after {
	background: #b50000;
	content: 'Q';
	
}
.cp_qa dd::after {
	background: #840064;
	content: 'A';
	padding: 8px 13px;
}

/*=======================
■会社紹介
========================*/		
#company {
	background-image: url(./images/recruit_bg.png);
	background-repeat: repeat;
	background-size: 250px 250px;
	background-position: center center;
	padding:60px 0px;
}

.companyInfo {
	text-align: left;
	margin:20px auto;
}
.companyInfo div {
	max-width:100%;
	padding:20px;

}
.companyInfo div img {
	width:100%;
	height: auto;
	vertical-align: bottom;
	box-shadow: 1px 1px 10px 0px rgba(94,0,71,0.2);
	margin-bottom:5px;
	
}
.companyInfo div .cName {
	font-weight: bold;
	font-size: 18px;
	padding-bottom:5px;
}
.btn{margin-bottom:20px;}

/*=======================
■募集要項
========================*/	
.application h5{
	text-align:center;
	color: #fff;
	background: #840064;
	margin: 0 auto 20px auto;
	padding: 6px;
	border-radius: 20px;
	}
.application h6{
	color:#840064;
	margin:30px 0 10px;
	padding-bottom:5px;
	border-bottom: 1px solid #840064;
	}
/*=======================
■応募フォーム
========================*/	
div.application > div > div{
	margin:15px 0px;
	padding:40px;
	background: #fafafa;
	text-align: left;
	border-radius: 6px;
	flex:1;}
	
#mail_form dt{
	margin:0;
	padding:0;
	font-weight: bold;
	}
#mail_form dd{
	margin-bottom:20px;
	padding:0;
		
	}
#mail_form dl dd span{
	display : block;
	color : #b50000;
	font-size:12px;
}
#mail_form dl dt span {
    display: inline-block;
    background: #b50000;
	color:#fff;
    font-size: 10px;
    padding: 2px 5px;
    margin-right: 5px;
    vertical-align: 1px;
    border-radius: 3px;
    line-height: 10px;
}
form#mail_form .label{
	display: none;
}
.destination{
	border: 1px solid #ddd;	
	padding:20px;
	background:#fff;
	}
#mail_form input, #mail_form textarea, #mail_form select {
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 6px;
	width: 100%;
	background: #ffffff;
	font-size: 16px;
}
#mail_form input #mail_form select {
  height: 36px;
}
#mail_form #mail_submit_button {
	height: 36px;
	font-weight: 500;
	color: #fff;
	border: 0px;
	background: -webkit-gradient(linear, left top, right top, from(b50000), to(#840064));
	background: -webkit-linear-gradient(left, #b50000, #840064);
	background: -moz-linear-gradient(left, #b50000, #840064);
	background: -o-linear-gradient(left, #b50000, #840064);
	background: linear-gradient(to right, #b50000, #840064);
	border-radius: 36px;
	box-shadow: 3px 3px 15px 0px rgba(94,0,71,0.5);
	margin: 0 auto -20px auto;
	position: relative;
	transition-property: all;
	transition-duration: 0.5s;
	max-width: 150px;
}
#mail_form #mail_submit_button a:hover {
	background: rgba(181,0,0,1);
}
#mail_form #mail_submit_button:hover {
	box-shadow: 0px 0px 0px 0px rgba(94,0,71,0.5);
}
#mail_form #mail_submit_button a:link {
	color: #fff;
}
#mail_form #mail_submit_button a:visited {
	color: #fff;
}
#mail_form #mail_submit_button a:hover {
	color: #fff;
}
#mail_form #mail_submit_button a:active {
	color: #fff;
}
#form_submit{
	display: flex;}
form#mail_form dl dt span.optional{
	display: none;
}
span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #ffffff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}
.pcbr{display:none;
	}
.spbr{display:block;
	}
@media (min-width:769px) {
.mainVisual{
	margin-bottom:60px;}
.mainVisual .mainTitle{
	font-size: 7vw;
	margin-left:10%;

	}	
	.container{width:90%;
	}

.pcbr{display:block;
	}
.spbr{display:none;
	}

#openPosition li span {
	display: inline-block;
	float: right;
	text-align: right;
	font-weight: normal;}
.companyInfo {
	display: flex;
	justify-content: center;	
}
.companyInfo div {
	flex:1;
}
.cp_qa  {
	margin:0 auto;
	display: flex;}
.cp_qa dl {
	display: flex;

	flex: 1;
	padding:0px 20px}
.cp_qa dd {
	display: flex;
	
	}
.application{
	display: flex;
	}
.application > div{
	flex:1;
	}
.application > div  {
	margin:20px;
	display:flex
	}
#appGuide h3{margin-bottom:-30px;}
	}