@charset "UTF-8";
html {
  position: relative;
  min-height: 100%;
}
body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3","メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS P Gothic",Verdana,Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: #3e3e3e;
  min-width: 1280px;
}
* {
  margin: 0;
  padding: 0;
}

a {
  color: #333;
}

img {
  display: block;
}

a img {
  border: none;
}
a:hover{
  opacity: 0.8;
  text-decoration: none;
}
.clearfix {
  display: block;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

ul,
ol,
li {
  list-style-type: none;
}
.pc-view{
  display: inline;
}
.sp-view {
  display: none;
}

header{
  background: #fff;
  z-index: 2;
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}
main .process h2,
section.plan .top,
section.master_pieces,
header h1{
  width: 1100px;
}
header h1{
  margin: 0 auto;
  line-height: 60px;
  height: 60px;
}
header h1 img{
  display: inline;
}
#wrapper{}

main{
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  padding-top: 700px;
  overflow: hidden;
}
main img.kv{
  width: auto;
  max-width: 1920px;
  margin: 0px auto 0;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -960px;
}
main p.lead{
  text-align: center;
  font-size: 18px;
  line-height: 35px;
  margin: 80px 0 60px;
}
main a.btn{
  width: 454px;
  margin: 0 auto;
  display: block;
  z-index: 2;
  position: relative;
}
main a.btn img{
  width: 100%;
}
main .company_detail {
  margin-top: 70px;
  background: url('../../images/recruit2020/gradation_bg02.png');
  background-repeat: no-repeat;
  background-position: 50% 70px;
}
main .interview .left,
main .company_detail .left{
  float: left;
  padding-right: 40px;
}
main .interview .left .inner,
main .company_detail .left .inner{
  float: right;
}
main .company_detail .left .inner ul li {
  margin-bottom: 20px;
  font-size: 0;
}
main .company_detail .left .inner ul li:last-child{
  margin-bottom: 0px;
}
main .company_detail .left .inner ul li .label{
  width: 110px;
  text-align: center;
  border: 1px solid #3e3e3e;
  margin-right: 10px;
}
main .company_detail .left .inner ul li p,
main .company_detail .left .inner ul li .label{
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}
main .interview .right,
main .company_detail .right{
  float: right;
  padding-left: 40px;
  margin-top: 130px;
}
main .plan ul.texts li,
main .plan ul.images,
main .interview .right,
main .interview .left,
main .company_detail .right,
main .company_detail .left{
  background: #e9faff;
}
main .interview .right,
main .interview .left,
main .company_detail .right,
main .company_detail .left{
  width: 44%;
  padding-top: 40px;
  padding-bottom: 40px;
  font-size: 16px;
}
main .interview .right .inner,
main .interview .left .inner,
main .company_detail .left .inner,
main .company_detail .right .inner{
  width: 460px;
}
main .company_detail .right h2,
main .company_detail .left h2{
  margin-bottom: 25px;
}
main .interview .right p.text,
main .interview .left p.text,
main .company_detail .right p.text,
main .company_detail .left p.text{
  line-height: 34px;
}

main .company_detail .left p.text{
  min-height: 185px;
}
main .company_detail .right p.text{
  min-height: 220px;
}
main .company_detail .left p.text{
  width: 330px;
}
main section.process{
  margin: 0 0 80px;
  background-image: url(../../images/recruit2020/process_bg.png);
  background-position: 0 122px;
  background-repeat-y: no-repeat;
  background-repeat-x: repeat;
  height: 894px;
}
main section.process img.process{
	margin: 0 auto;
}
main .process h2{
  margin: 0 auto;
  margin-bottom: 50px;
}

main .master_pieces{
  margin: 0 auto 70px;
}
main .master_pieces h2{
  padding-left: 57px;
  margin-bottom: 30px;
}
main .master_pieces ul{
  font-size: 0;
  text-align: center;
}
main .master_pieces ul li{
  display: inline-block;
  vertical-align: top;
  margin-right: 40px;
}
main .master_pieces ul li img{
	width: 100%;
}
main .master_pieces ul li:nth-child(4n){
  margin-right: 0px;
}
main .master_pieces ul li p{
  font-size: 16px;
  text-align: center;
  margin-top: 15px;
  line-height: 20px;
}
main .master_pieces ul li p span{
  font-size: 12px;
  display: block;
}
main .master_pieces .bx-wrapper{
  position: relative;
  margin: 0 auto;
}
main .master_pieces a.bx-next,
main .master_pieces a.bx-prev{
  position: absolute;
  text-indent: -9999px;
  top: 50%;
  width: 20px;
  height: 34px;
  margin-top: -42px;
}
main .master_pieces a.bx-prev{
  left: -60px;
  background: url(../../images/recruit2020/prev.png) no-repeat;
}
main .master_pieces a.bx-next{
  right: -60px;
  background: url(../../images/recruit2020/next.png) no-repeat;
}



main .detail{
  position: relative;
}
main .detail:before{
  content: "";
  background-image: url(../../images/recruit2020/bg_green.png);
  background-position: 0 90px;
  background-repeat-y: repeat;
  background-repeat-x: repeat;
  height: 800px;
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 80px;
}
main .detail:after{
  content: "";
  background-image: url(../../images/recruit2020/bg_gray.png);
  background-position: 0 90px;
  background-repeat-y: repeat;
  background-repeat-x: repeat;
  height: 1025px;
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 780px;
}
main .detail .guideline,
main .detail .company{
  width: 980px;
  padding: 60px;
  background: #e9faff;
  margin: 0 auto 40px;
  z-index: 2;
  position: relative;
}
main .detail .guideline{
  background: #fff;
  margin: 0 auto 70px;
}
main .detail .guideline h2 img,
main .detail .company h2 img{
  margin: 0 auto 30px;
}
main .detail .guideline ul,
main .detail .company ul{
  font-size: 0;
}
main .detail .guideline ul li,
main .detail .company ul li{
  font-size: 16px;
  padding: 15px 20px;
  border-bottom: 3px dotted #d2d2d2;
}
main .detail .guideline ul li:last-child,
main .detail .company ul li:last-child{
  border-bottom: none;
}
main .detail .guideline ul li p,
main .detail .guideline ul li .label,
main .detail .company ul li p,
main .detail .company ul li .label{
  display: inline-block;
  vertical-align: middle;
}
main .detail .guideline ul li .label,
main .detail .company ul li .label{
  width: 65px;
  text-align: center;
  margin-right: 50px;
  font-weight: bold;
}
main .detail .guideline ul li p,
main .detail .company ul li p{
  line-height: 28px;
}

main .interview{
  position: relative;
  margin-top: 260px;
  background: url('../../images/recruit2020/gradation_bg.png');
  background-repeat: no-repeat;
  background-position: 50% 80%;
  margin-bottom: 30px;
}



main .interview h2{
  position: absolute;
  top: -190px;
  right: 50%;
  margin-right: -540px;
}
main .interview .right,
main .interview .left{
  padding-top: 150px;
}
main .interview .right p.text,
main .interview .left p.text{
  min-height: 180px;
}
main .interview .right p.text.comingsoon,
main .interview .left p.text.comingsoon{
	font-weight: bold;
	line-height: 180px;
	text-align: center;
	font-size: 18px;
}
main .interview .right p.text strong,
main .interview .left p.text strong{
  display: block;
  margin-top: 10px;
}
main .interview .right img,
main .interview .left img{
  margin: -340px 0 30px;
}
main .interview h3{
  font-size: 20px;
  line-height: 23px;
  margin-bottom: 10px;
}
main .interview h3 span{
  font-size: 14px;
  font-weight: normal;
  display: block;
}
main .interview .right p.text{
	font-size: 16px;
	line-height: 32px;
}
main .plan .top{
  margin: 0 auto;
}
main .plan .top p.text{
  margin: 40px 0;
  font-size: 16px;
}
main .plan .top img.career{
  margin: 0 0 40px;
}
main .plan ul.texts,
main .plan ul.images{
  font-size: 0;
  text-align: center;
  margin-bottom: 40px;
}
main .plan ul.texts li,
main .plan ul.images li{
  display: inline-block;
  vertical-align: top;
}
main .plan ul.texts li{
  padding: 30px;
  width: 470px;
  height: 130px;
  font-size: 14px;
  text-align: left;
  margin-right: 40px;
}
main .plan ul.texts li:last-child{
  margin-right: 0px;
}
main .plan ul.texts li h4{
  font-size: 18px;
  margin-bottom: 8px;
}
footer{
  line-height: 100px;
  text-align: center;
  background: #00dae2;
  color: #fff;
  margin-top: 0px;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
footer a{
  color: #fff;
}
.popup,
.layer {
	display: none;
}
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 959px){
	body,
	#wrapper{
		min-width: initial;
	}
	header{
		padding: 0 3%;
	}
	main p.lead{
		font-size: 15px;
		line-height: 35px;
		margin: 40px 0 30px;
	}
	main a.btn{
		width:300px;
	}
	main .interview .right .inner,
	main .interview .left .inner,
	main .company_detail .left .inner,
	main .company_detail .right .inner{
		width: 310px;
	}
	main .company_detail .right h2 img{
		width: 100%;
	}
	section.plan .top,
	section.master_pieces,
	header h1{
		width: auto;
	}
	main .master_pieces .bx-wrapper{
		padding: 0 25px;
	}
	main .master_pieces a.bx-next{
		right: 0;
	}
	main .master_pieces a.bx-prev{
		left: 0;
	}

	main .detail .guideline,
	main .detail .company{
		width: 90%;
		padding: 3%;
	}
	main .detail .guideline ul li p,
	main .detail .company ul li p{
		width:530px;
	}
	main .interview h2{
		margin-right:-370px;
	}
	main .interview .right img,
	main .interview .left img{
		width: 320px;
	}
	main .plan .top{
		padding: 0 3%;
	}
	main .plan ul.texts{
		width: 640px;
		margin: 0 auto;
	}
	main .plan ul.images {
		padding: 5% 0;
	}
	main .plan ul.texts li{
		padding: 20px;
		width: auto;
		display: block;
		margin-right: 0;
		margin-bottom: 3%;
	}
}
/** smart phone **/
@media screen and (max-width: 767px){
	.pc-view{
		display: none;
	}
	.sp-view {
		display: inline;
	}
	body,
	#wrapper{
		min-width: initial;
	}
	section.plan .top,
	section.master_pieces,
	header h1{
		width: auto;
	}
	header h1{
		line-height: 40px;
		height: 40px;
		padding: 0 3%;
	}
	header h1 img{
		width: 130px;
	}
	main{
		padding-top: 0;
	}
	main img.kv {
		max-width: initial;
		margin: 0% auto 0;
		position: static;
		width: 100%;
	}
	main img.kv.sp-view{
		display: block;
	}
	main p.lead {
		font-size: 13px;
		line-height: 26px;
		margin: 10% 0;
	}
	main a.btn{
		width: 90%;
	}
	main .company_detail {
		margin-top: 15%;
		background-position: 50% 60px;
		background-size: auto 88%;
	}
	main .interview .left,
	main .company_detail .left{
		float: none;
		padding-right: 0;
	}
	main .interview .right .inner,
	main .interview .left .inner,
	main .company_detail .left .inner,
	main .company_detail .right .inner{
		width: auto;
	}
	main .interview .right,
	main .interview .left,
	main .company_detail .right,
	main .company_detail .left{
		width: 92%;
		padding-top: 5%;
		padding-bottom: 5%;
		font-size: 12px;
	}
	main .interview .left .inner,
	main .company_detail .left .inner{
		float: none;
		padding: 5%;
	}
	main .company_detail .left .inner ul li p,
	main .company_detail .left .inner ul li .label{
		font-size: 12px;
	}
	main .company_detail .left .inner ul li .label{
		width: 25%;
		margin-right: 3%;
	}
	main .company_detail .left p.text {
		width: 68%;
	}
	main .interview .right p.text,
	main .interview .left p.text,
	main .company_detail .right p.text,
	main .company_detail .left p.text{
		line-height: 24px;
		min-height: initial;
	}
	main .company_detail .left .inner ul li {
		margin-bottom: 5%;
	}
	main .interview .right,
	main .company_detail .right{
		padding-left: 0%;
		margin-top: 30px;
	}
	main .interview .right .inner,
	main .company_detail .right .inner{
		padding: 0 5%;
	}
	main .company_detail .left .inner h2 img{
		width: 147px;
	}
	main .company_detail .right .inner h2 img{
		width: 264px;
	}
	main .company_detail .right h2,
	main .company_detail .left h2{
		margin-bottom: 8%;
	}

	main section.process{
		margin: 10% 0 0%;
		height: auto;
		background-image: none;
	}
	main .process h2{
		width: auto;
		margin-bottom: 5%;
	}
	main .process h2 img{
		width: 289px;
		margin: 0 auto;
	}
	main section.process img.process{
		width: 94%;
	}

	main .master_pieces {
		margin: 10% auto 10%;
	}
	main .master_pieces h2 {
		padding-left: 0;
		margin-bottom: 5%;
	}
	main .master_pieces h2 img{
		width: 258px;
		margin: 0 auto;
	}
	main .master_pieces ul li{
		margin-right: 0;
		display:block;
	}
	main .master_pieces ul li img{
		width: 100%;
		margin: 0 auto;
	}
	main .master_pieces .bx-viewport{
		overflow: auto !important;
		width: 80% !important;
		margin: 0 auto !important;
	}
	main .master_pieces a.bx-prev{
		left: 4%;
		background: url(../../images/recruit2020/prev.png) no-repeat;
		background-size: contain;
		width: 12px;
		height: auto;
		margin-top: -35px;
	}
	main .master_pieces a.bx-next {
		right: 4%;
		background: url(../../images/recruit2020/next.png) no-repeat;
		background-size: contain;
		width: 12px;
		height: auto;
		margin-top: -35px;
	}
	main .detail .guideline,
	main .detail .company{
		width: 83%;
		padding: 8% 5%;
	}
	main .detail .guideline h2 img,
	main .detail .company h2 img {
		margin: 0 auto 5%;
	}
	main .detail .company h2 img {
		width: 261px;
	}
	main .detail .guideline h2 img{
		width: 212px;
	}
	main .detail .guideline ul li,
	main .detail .company ul li{
		font-size: 12px;
		padding: 8px 5px;
		border-bottom: 2px dotted #d2d2d2;
	}
	main .detail .guideline ul li .label,
	main .detail .company ul li .label{
		margin-right: 5%;
		width: 20%;
	}
	main .detail .guideline ul li p,
	main .detail .company ul li p {
		line-height: 20px;
		width: 72%;
	}
	main .detail .guideline{
		margin: 0 auto 8%;
	}
	main .detail:before{
		height: 50%;
		top: 3%;
	}
	main .detail:after{
		height: 45.5%;
		top: 53%;
	}
	main .interview{
		margin-top: 20%;
		background-position: 50% 360px;
		background-size: auto 80%;
		padding-bottom: 10%;
	}
	main .interview h2{
		position: static;
		margin-right: 0;
	}
	main .interview h2 img{
		width: 270px;
		margin-left: auto;
		padding-right: 3%;
	}
	main .interview .right img,
	main .interview .left img {
		margin: -45% 0 5%;
		width: 90%;
	}
	main .interview .right,
	main .interview .left{
		margin-top: 40%;
	}
	main .interview .right p.text {
		font-size: 12px;
	}
	main .interview .right p.text.comingsoon,
	main .interview .left p.text.comingsoon{
		line-height: 80px;
	}
	main .interview h3{
		font-size: 18px;
		line-height: 22px;
		margin-bottom: 3%
	}
	main .interview h3 span{
		font-size: 12px;
	}
	main .plan{
		margin-top: 15%;
	}
	main .plan .top h2,
	main .plan .top p.text{
		padding: 0 3%;
	}
	main .plan .top h2 img{
		width: 225px;
	}
	main .plan .top img.career{
		width: 94%;
		margin: 5% auto 8%;
	}
	main .plan .top p.text {
		margin: 5% 0;
		font-size: 12px;
		line-height: 20px;
	}
	main .plan ul.images{
		margin-bottom: 8%;
	}
	main .plan ul.images li{
		width: 50%;
	}
	main .plan ul.images li img{
		width: 100%;
	}
	main .plan ul.texts{
		padding: 0 3%;
		margin-bottom: 8%;
	}
	main .plan ul.texts li{
		padding: 5%;
		width: auto;
		height: auto;
		font-size: 12px;
		line-height: 20px;
		margin-right: 0;
		display: block;
		margin-bottom: 5%;
	}
	footer {
		line-height: 50px;
		margin-top: 0%;
		font-size: 10px;
	}
	.layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99998;
		display: none;
		background: rgba(255,255,255,0.7);
		cursor: pointer;
	}
	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		text-align: center;
		z-index: 99999;
		display: none;
		width: 100%;
		height: auto;
	}
	.popup .inner {
		position: relative;
		padding: 12% 3%;
	}
	.popup .inner a.close img,
	.popup .inner>img{
		width: 100%;
	}
	.popup .inner a.close {
		display: block;
		top: 3%;
		right: 5%;
		width: 20px;
		position: absolute;
	}
}