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

body {
    line-height:1;
	font-family: 'Noto Sans JP', Verdana, "游ゴシック", YuGothic, sans-serif;
	color:#333333;
    font-size:62.5%;
	line-height:1.6em;
    -webkit-text-size-adjust: 100%;
	font-weight:400;
}
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*レスポンシブ用イメージ*/
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}



/* レスポンシブで画像を切り替える（CSS） */
@media screen and (min-width: 699px) {
    .sp {
        display:none !important; /* PC用画像を非表示にする */
    }
}

/* レスポンシブで画像を切り替える（CSS） */
@media screen and (max-width: 700px) {
    .pc {
        display:none !important; /* PC用画像を非表示にする */
    }
}
/*共通*/

table{
	text-align:center;
	width:96%;
	margin:30px auto;
	border-top:#e0eaea solid 1px;
}
table th,
table td{
	padding:12px 15px;
	border-bottom:#e2e8e5 solid 1px;
	vertical-align:top;
	text-align:left;
	line-height:1.8em;
}
table th{
	font-size:1.5em;
	letter-spacing:0.05em;
	font-weight:500;
	background:#f3f3f3;
	border-right:2px #cc0000 solid;
	text-align:right;
}
.data table th{
	width:15%;
}
table td{
	font-size:1.5em;
	text-align:left;
	font-weight:400;
}
table td.glay{
	background:#eef1f0;
	width:15%;
}

dl{
	text-align:center;
	width:96%;
	margin:10px auto 20px;
	border:#e0eaea solid 1px;
}
dl dt,
dl dd{
	padding:8px 15px;
	vertical-align:top;
	font-weight:normal;
	text-align:left;
	line-height:1.8em;
	font-size:1.5em;
}
dl dt{
	border-bottom:#e2e8e5 solid 1px;
	font-weight:normal;
	letter-spacing:0.05em;
}
dl dd{
	text-align:left;
}

.entry table th{
	width:20%;
}

/*中ページ共通*/

section{
	position:relative;
}
.Topinner{
	max-width:1160px;
	text-align:center;
	margin:0 auto;
	padding:0 10px;
	overflow:hidden;
}
.inner{
	max-width:1020px;
	text-align:center;
	margin:0 auto;
	padding:20px 10px;
}

section p{
	font-size:1.6em;
	line-height:2em;
	/*font-style:italic;*/
	font-weight:400;
	text-align:left;
	margin:20px 20px 30px;
	font-family:'Noto Sans JP';
}
.technology section p{
	font-size:1.5em;
	line-height:1.8em;
	text-align:left;
	margin:20px 20px 30px;
	letter-spacing:0.05em;
}

section h2.title{
	border-bottom:1px solid #007cc8;
	font-size:2.4em;
	text-align:center;
	letter-spacing:0.05em;
	line-height:1.6em;
	margin:40px auto 50px;
	position: relative;
	padding:5px 10px;
}

section h3{
	font-size:2.2em;
	line-height:1.8em;
	padding:10px 0;
	margin:30px 20px 20px;
	text-align:left;
	font-style:italic;
	color:#000;
	border-bottom:3px solid #000;
	position:relative;
}
section h3:after{
	position:absolute;
	content:"";
	border-bottom:3px solid #cc0000;
	bottom:-3px;
	left:0;
	width:500px;
}
section h4{
	font-size:1.8em;
	color:#007cc8;
	line-height:1.8em;
	letter-spacing:0.05em;
	padding:8px 10px;
	margin:50px 30px 0px;
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;

    text-align: center; /* for no-flexbox browsers */
}
section h4:before, section h4:after{
    border-top: 2px solid #dfdfdf;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}
section h4:before {
    margin-right: 0.5em;
	}
section h4:after {
    margin-left: 0.5em;
	}
	

.content{
	position:relative;
}
.three_line{
	position:absolute;
	right:5%;
	max-width:30%;
	top:-60px;
	z-index:999;
}
.three_linen{
	position:absolute;
	right:5%;
	max-width:30%;
	top:-90px;
	z-index:1;
}
@media screen and (max-width: 800px){

section h3{
	font-size:2em;
	line-height:1.8em;
	padding:10px 0;
	margin:10px 20px 20px;
	text-align:left;
	font-style:italic;
	color:#000;
	border-bottom:3px solid #000;
}

section p{
	font-size:1.5em;
	line-height:1.8em;
	text-align:left;
	margin:10px 10px 20px;
}

}

@media screen and (max-width: 700px){

.inner{
	max-width:1200px;
	text-align:center;
	margin:0 auto;
	padding:10px 10px;
}

section h2.title{
	font-size:2.0em;
	margin:30px auto 20px;
}
section h3{
	font-size:1.8em;
	line-height:1.6em;
	padding:6px 0;
	margin:10px 10px 20px;
}
section h3:after{
	width:300px;
}
section h4{
	font-size:1.5em;
	margin:10px auto;
}

table{
	margin:20px auto;
}
table th{
	display:block;
	width:100%;
	text-align:left !important;
	font-size:1.3em;
	border-bottom:none;
	padding:8px 15px 3px;
	border-right:none;
	border-top:2px solid #cc0000;
	border-bottom:1px solid #dfdfdf;
}
.data table th{
	width:100%;
}
table td.glay{
	width:100%;
	background:#f9f9f9;
}
table td{
	display:block;
	width:100%;
	font-size:1.4em;
	padding:3px 15px 8px;
}
dl{
	text-align:center;
	width:96%;
	margin:0px auto 10px;
	border:#e0eaea solid 1px;
}
dl dt,
dl dd{
	line-height:1.6em;
	font-size:1.4em;
}

}


@media screen and (max-width: 480px){
section h2.title{
	font-size:1.8em;
}
section h3:after{
	position:absolute;
	content:"";
	border-bottom:3px solid #cc0000;
	bottom:-3px;
	left:0;
	width:100px;
}
section p{
	font-size:1.4em;
	line-height:1.8em;
	text-align:left;
	margin:10px 10px 20px;
}
}

/*トップページ*/
.maintop{
	  margin:65px auto 20px;
	  position:relative;
	  /*background:url(../img/recruit/recruit_main.png) center top no-repeat;*/
	  background-size:cover;
	  max-width:1200px;
	text-align:center;
}

.maintop h2{
	margin:0 auto;
	position:absolute;
  top: 12%;
  left:0;
  right:0;
	text-align:center;
      animation-duration: 2s;
      animation-name: fade-in;
}
.maintop .rectxt{
	margin:0 auto;
	position:absolute;
  bottom: 10%;
  left:0;
  right:0;
	text-align:center;
      animation-duration: 3s;
      animation-name: fade-in;
}


.rectxtsp{
	display:none;
}

    @keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      30% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

@media screen and (max-width: 990px){
.maintop h2{
  top: 6%;
  max-width:80%;
}
.maintop .rectxt{
  bottom: 6%;
  max-width:80%;
}
}

@media screen and (max-width: 800px){

.maintop{
	  margin:65px auto 0;
}
.maintop h2{
	margin:0 auto;
	position:absolute;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
	text-align:center;
	max-width:80%;
}
.maintop .rectxt{
	display:none;
}
.rectxtsp{
	display:block;
	background:#007cc8;
	padding:30px 20px;
}
.rectxtsp p{
	color:#fff;
	font-size:1.4em;
	line-height:1.6em;
	font-style:italic;
}
}

@media screen and (max-width: 700px){

.maintop{
	  margin:105px auto 0;
}
}

.top_btntech{
	overflow:hidden;
	margin:20px auto;
}
.top_btntech .ttechl{
	width:50%;
	text-align:left;
	padding:0 10px 0 0;
	float:left;
}
.top_btntech .ttechr{
	width:50%;
	text-align:right;
	padding:0 0 0 10px;
	float:right;
}

.top_btn{
	overflow:hidden;
	margin:20px auto;
}
.tbtnsp{
	display:none;
}
.tbtnl{
	width:20%;
	text-align:left;
	padding:0 10px 0 0;
	float:left;
}
.tbtnm{
	width:20%;
	text-align:center;
	padding:0 5px 0 5px;
	float:left;
}
.tbtnr{
	width:20%;
	text-align:right;
	padding:0 0 0 10px;
	float:right;
}


@media screen and (min-width:800px){

.tbtnwh {
  position: relative;
  overflow: hidden;
  -webkit-transition: .5s;
  transition: .5s;
  display:block;
}
.tbtnwh:after {
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  content: '';
  width: 0;
  bottom: 0;
  background: rgba(255,255,255,0.3);
  height: 120%;
  left: -10%;
  -webkit-transform: skewX(-10deg);
          transform: skewX(-10deg);
}
.tbtnwh:hover {
  cursor: pointer;
}
.tbtnwh:hover:after {
  width: 100%;
  left: 0;
}
.tbtnwh:hover:after {
  left: -10%;
  width: 120%;
}

.tbtnred {
  position: relative;
  overflow: hidden;
  -webkit-transition: .5s;
  transition: .5s;
  display:block;
}
.tbtnred:after {
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  content: '';
  width: 0;
  bottom: 0;
  background: rgba(255,0,0,0.2);
  height: 120%;
  left: -10%;
  -webkit-transform: skewX(-10deg);
          transform: skewX(-10deg);
}
.tbtnred:hover {
  cursor: pointer;
}
.tbtnred:hover:after {
  width: 100%;
  left: 0;
}
.tbtnred:hover:after {
  left: -10%;
  width: 120%;
}

.tbtnbk {
  position: relative;
  overflow: hidden;
  -webkit-transition: .5s;
  transition: .5s;
  display:block;
}
.tbtnbk:after {
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  content: '';
  width: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  height: 120%;
  left: -10%;
  -webkit-transform: skewX(-10deg);
          transform: skewX(-10deg);
}
.tbtnbk:hover {
  cursor: pointer;
}
.tbtnbk:hover:after {
  width: 100%;
  left: 0;
}
.tbtnbk:hover:after {
  left: -10%;
  width: 120%;
}
}

.TopNews h2{
	font-size:2.2em;
	border-bottom:1px solid #007cc8;
	padding:12px 10px;
	margin:10px auto;
	
}


@media screen and (max-width:1000px){

.swiper-container {
	  height:450px;
    }
}
@media screen and (max-width:800px){

.swiper-container {
	  height:350px;
    }
	
.topnews{
	width:100%;
	float:none;
	padding:20px;
	height:auto;
}

}
@media screen and (max-width:700px){

.top_btntech{
	margin:10px auto;
}
.top_btntech .ttechl{
	width:100%;
	text-align:center;
	padding:0 0 10px 0;
	float:none;
}
.top_btntech .ttechr{
	width:100%;
	text-align:center;
	padding:0;
	float:none;
}

.top_btn{
	margin:10px auto;
	max-width:560px;
	background:#222;
}
.tbtnsp{
	display:block;
	width:33.333%;
	text-align:center;
	float:left;
	padding:5px;
}
.tbtnl{
	width:33.333%;
	text-align:center;
	padding:5px;
	float:left;
}
.tbtnm{
	width:33.333%;
	text-align:center;
	padding:5px;
	float:left;
}
.tbtnr{
	width:33.333%;
	text-align:center;
	padding:5px;
	float:left;
}

.TopNews h2{
	font-size:2.0em;
	
}
}
@media screen and (max-width:480px){

.top_btn{
	margin:10px auto;
}
.tbtnsp{
	width:50%;
}
.tbtnl{
	width:50%;
}
.tbtnm{
	width:50%;
}
.tbtnr{
	width:50%;
}
}


/*BESTEX*/

.bestex .main{
	background:url(../img/recruit/bestex_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:430px;
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-pack:center;/*--- IE10 ---*/
	justify-content:center;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;
	position:relative;
	margin-top:65px;
}

.bestex .faq{
	margin:20px auto;
}
.bestex .bestexq{
	background:url(../img/recruit/bestex_q.png) left 10px no-repeat;
	padding:10px 10px 10px 60px;
	border-bottom:3px solid #111;
	font-size:2.2em;
	font-style:italic;
	line-height:50px;
	text-align:left;
	font-weight:600;
	letter-spacing:0.05em;
}
.bestex .bestexa{
	font-size:1.6em;
	line-height:1.5em;
	font-style:italic;
	text-align:left;
	padding:20px 10px;
	font-weight:500;
	letter-spacing:0.05em;
}
.bestex .faqFL{
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-wrap:wrap;/*--- IE10 ---*/
	flex-wrap:wrap;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;
}
.bestex .faqFL .faqP{
	width:50%;
	padding:5px;
}

/*EDUCATION*/

.education .main{
	background:url(../img/recruit/education_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:430px;
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-pack:center;/*--- IE10 ---*/
	justify-content:center;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;
	position:relative;
	margin-top:65px;
}

.education section .line{
	position:relative;
	text-align:center;
	margin:50px auto 30px;
	width:100%;
}


.education section .line:before {
	content:"";
	position:absolute;
	top:7px;
	left:0;
	right:0;
	width:100%;
	border-bottom:10px solid #2180c2;
	z-index:-1;
}


/*MESSAGE*/

.message01 .main{
	background:url(../img/recruit/message01_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:680px;
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-pack:center;/*--- IE10 ---*/
	justify-content:center;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;
	position:relative;
	margin-top:65px;
}
.message02 .main{
	background:url(../img/recruit/message02_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:680px;
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-pack:center;/*--- IE10 ---*/
	justify-content:center;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;
	position:relative;
	margin-top:65px;
}
.message03 .main{
	background:url(../img/recruit/message03_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:680px;
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-pack:center;/*--- IE10 ---*/
	justify-content:center;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;
	position:relative;
	margin-top:65px;
}
.message04 .main{
	background:url(../img/recruit/message04_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:680px;
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-pack:center;/*--- IE10 ---*/
	justify-content:center;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;
	position:relative;
	margin-top:65px;
}
.message05 .main{
	background:url(../img/recruit/message05_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:680px;
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-pack:center;/*--- IE10 ---*/
	justify-content:center;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;
	position:relative;
	margin-top:65px;
}

.message01 .main .mescatch,
.message02 .main .mescatch,
.message03 .main .mescatch,
.message04 .main .mescatch,
.message05 .main .mescatch{
	position:absolute;
	bottom:5%;
	left:5%;
	max-width:70%;
	text-align:center;
}

.charactor{
	background:#000;
	color:#fff;
	padding:10px 10px;
	text-align:center;
	font-style:italic;
}
.charactor .busho{
	font-size:2.2em;
	line-height:1.5em;
	display:inline-block;
	font-weight:600;
	margin:0 10px;
}
.charactor .school{
	font-size:1.8em;
	line-height:1.5em;
	display:inline-block;
	font-weight:600;
	margin:0 10px;
}


/*DATA*/

.data .main{
	background:url(../img/recruit/data_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:430px;
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-pack:center;/*--- IE10 ---*/
	justify-content:center;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;
	position:relative;
	margin-top:65px;
}
.data .tabmenu{
        width: 100%;}
     
.data .tab{
        overflow: hidden;
        margin: 0;
        padding: 0;
        list-style: none;}
     
.data .tab li{
        background: #efefef;
        cursor: pointer;
        display: inline-block;
        width: 30%;
        padding:1em;
		font-size:1.6em;
		font-weight:400;
		margin-top:20px;}
     
 .data .tab li.select{
            background: #007cc8;
			background:#cd0000;
			color:#fff;}
     
.data .content div{
        padding: .6em;}
     
.data .hide{
        display:none;}
		
@media screen and (max-width:700px){
.data .tab li{
        width: 45%;
		font-size:1.5em;}
}
		
/*CONTACT*/

.contact .main{
	background:url(../img/recruit/contact_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:430px;
	display:-ms-flexbox;/*--- IE10 ---*/
	display:flex;
	-ms-flex-pack:center;/*--- IE10 ---*/
	justify-content:center;
	-ms-flex-align:center;/*--- IE10 ---*/
	align-items: center;
	position:relative;
	margin-top:65px;
}

.telbox{
	overflow:hidden;
	margin:10px 5% 20px;
	border:1px solid #eaeeec;
	padding:20px 30px;
	text-align:center;
	background:#f3f3f3;
}
.tel{
	font-size:3.5em;
	text-align:center;
	font-weight:bold;
	/*color:#BF2225;*/
}

.w60{
	width:60%;
}
.wbig{
	width:80%;
}
.btm{
	width:50%;
	background:#000000;
	color:#fff;
	padding:8px 5px;
	margin:0px 25% 10px;
	text-decoration:none;
	line-height:1.8em;
	letter-spacing:0.1em;
	display:block;
}
.btm:hover{
	background:#cd0000;
}
.careerbtn a{
	width:40%;
	background:#000000;
	color:#fff;
	padding:12px 5px;
	margin:0px 25% 10px;
	text-decoration:none;
	line-height:1.8em;
	letter-spacing:0.1em;
	display:block;
	font-size: 1.4em;
}
.careerbtn a:hover{
	background:#cd0000;
}

@media screen and (max-width:700px){

.bestex .main,
.education .main,
.message01 .main,
.message02 .main,
.message03 .main,
.message04 .main,
.message05 .main,
.data .main,
.contact .main{
	margin-top:100px;
}

.tel{
	font-size:2.5em;
	/*color:#BF2225;*/
}
}

@media screen and (max-width:930px) { 
.telbox{
	margin:10px 1%;
}
}

@media screen and (max-width: 800px){
.bestex .main,
.education .main,
.data .main,
.contact .main{
	height:380px;
}
.message01 .main,
.message02 .main,
.message03 .main,
.message04 .main,
.message05 .main{
	height:600px;
}
	
}


@media screen and (max-width: 700px){
.education section h3:before {
	content:"";
	position:absolute;
	top:22px;
	left:0;
	right:0;
	width:100%;
	border-bottom:10px solid #2180c2;
	z-index:-1;
}
.charactor .busho{
	font-size:1.8em;
	display:block;
	font-weight:600;
}
.charactor .school{
	font-size:1.5em;
	display:block;
	font-weight:500;
}
.message01 .main,
.message02 .main,
.message03 .main,
.message04 .main,
.message05 .main{
	height:500px;
}
}

@media screen and (max-width: 620px){
.bestex .main,
.education .main,
.data .main,
.contact .main{
	height:300px;
}
	
.message01 .main,
.message02 .main,
.message03 .main,
.message04 .main,
.message05 .main{
	height:400px;
}
.bestex .main img,
.education .main img,
.data .main img,
.contact .main img{
	width:80%;
	margin-left:10%;
}
.bestex .bestexq{
	font-size:2.0em;
}
.bestex .bestexa{
	font-size:1.4em;
}

}


@media screen and (max-width: 480px){
.bestex .main,
.education .main,
.data .main,
.contact .main{
	height:200px;
}
.message01 .main,
.message02 .main,
.message03 .main,
.message04 .main,
.message05 .main{
	height:400px;
}
.bestex .main img,
.education .main img,
.data .main img,
.contact .main img{
	width:60%;
	margin-left:20%;
}
.bestex .faqFL .faqP{
	width:100%;
	text-align:center;
	padding:5px;
}
.tel{
	font-size:2em;
	/*color:#BF2225;*/
}
}


.pagetop{
	position:fixed;
	bottom:30px;
	right:20px;
	z-index:100;
}