@charset "UTF-8";
@import "../../common/css/reset.css";
@import "../../common/css/base.css";
@import "../../common/css/recruit.css";

/**************************************************/
/* 採用情報 トップページ */
/**************************************************/
.liquidBox{width:100%;max-width:1000px;margin:0 auto;}
.liquidBox img{width:100%;height:auto;}

.link a:hover{text-decoration:none;}

.spview{display:none;}

#header .liquidBox,
#global .liquidBox,
#footer .liquidBox{max-width:1200px;}


/* メインビジュアル
--------------------------------------------------*/
#visual{overflow:hidden;}
#visual .liquidBox{position:relative;max-width:1200px;overflow:hidden;}
#visual #mainvisual{position:absolute;top:0;width:100%;height:100%;background:url(../img/mainvisual.png) no-repeat top center;background-size:cover;opacity:0;transition: opacity  4s ease 4s;z-index:1;}
#visual .title{position:absolute;top:50%;left:50%;z-index:2;width:63.5%;max-width:762px;margin-top:-10.41%;margin-left:-31.75%;opacity:0;transition:4s ease 1s;transition-property: opacity;}
#visual .title:after{content:'';display:block;position:absolute;left:0;width:100%;top:0;height:100%;background:url(../img/visual_title2.png) no-repeat center;background-size:100%;transition:4s ease 4s;opacity:1;transition-property: opacity;z-index:1;}
#visual .title img{opacity:0;transition:4s ease 4s;transition-property: opacity;position:relative;z-index:2;}

#kv{padding-top:56.25%;position:relative;transition:4s ease 0s;}
#kv video{display:block;position:absolute;left:0;width:100%;top:0;height:100%;}

#visual.on #mainvisual{opacity:1;}
#visual.on .title{opacity:1;}
#visual.on .title:after{opacity:0;}
#visual.on .title img{opacity:1;}
#kv.hidden{opacity:0;}


/* リード文
--------------------------------------------------*/
#lead{padding:90px 0 100px;}
#lead h3{font-size:34px;font-weight:normal;line-height:44px;text-align:left;margin:0 auto 25px;position:relative;}
#lead h3 span{display:inline-block;background-color:#FFF;padding-right:0.7em;position:relative;z-index:2;}
#lead h3:after{content:'';display:block;left:0;bottom:22px;width:100%;border-top:1px solid #000;position:relative;}
#lead p{margin:0 auto 35px;font-size:16px;line-height:1.7em;}
#lead p.image{max-width:300px;}


/* 社長メッセージ
--------------------------------------------------*/
#message{padding:100px 0 107px;z-index:1;/*2*/}
#message .liquidBox{position:relative;text-align:center;z-index:4;}
#message h2{width:326px;margin:0 auto;}
#message p{color:#fff;font-size:18px;text-align:center;}
#message p.line{display:inline-block;margin:25px auto 45px;padding:0 10px 5px;font-weight:bold;border-bottom:2px solid #fff;}
#message p.link{position:absolute;top:auto;bottom:0;left:50%;width:544px;height:144px;margin:0 0 -144px -277px;}
#message p.link a{display:block;width:500px;height:70px;margin:37px 22px;line-height:70px;text-align:center;
-webkit-box-shadow:0px 0px 25px 7px rgba(0,0,0,0.3);
        box-shadow:0px 0px 25px 7px rgba(0,0,0,0.3);
background:#fff url(../img/btn_arrow.png) no-repeat;background-position:top 17px right 10px;transition: background .5s ease 0s;}
.pc #message p.link a:hover{background-color:#eee;}

#message:before{content:'';display:block;width:100%;opacity:0.6;background:#e94c11;position:absolute;top:0;bottom:0;margin:0 auto 132px;left:0;z-index:3;}
#message .base{position:absolute;width:100%;top:0;bottom:0;margin:0 auto 132px;z-index:2;overflow:hidden;}
.base .bg{position:absolute;top:0;left:300%;width:91%;z-index:1;}
.base .bg img{width:100%;/*664px*/height:auto;}
.base #messageBg1{left:-33%;}
.base #messageBg2{left:50%;margin-left:-35%;}
.base #messageBg3{left:53%;}
#message:after{content:'';display:block;position:relative;padding:100px 0 0;z-index:1;}



@media screen and (max-width: 767px){
.liquidBox{width:97.33%;}

.pcview{display:none;}
.spview{display:block;}

#header .liquidBox,
#global .liquidBox,
#footer .liquidBox{width:100%;}


/* メインビジュアル
--------------------------------------------------*/
#visual .liquidBox{width:100%;}


/* リード文
--------------------------------------------------*/
#lead{padding:12% 0 60px;}
#lead h3{font-size:18px;line-height:30px;margin:0 auto 15px;}
#lead h3 span{display:inline;padding-right:0.5em;}
#lead h3:after{bottom:15px;}
#lead p{margin:0 auto 4.79%;font-size:13px;}
#lead p.image{max-width:243px;}


/* 社長メッセージ
--------------------------------------------------*/
#message{padding:13.33% 0 60px;}
#message .liquidBox{}
#message h2{width:184px;}
#message p{font-size:14px;}
#message p.line{margin:10px auto 25px;}
#message p.link{width:320px;height:72px;margin:0 0 -97px -160px;}
#message p.link a{width:300px;height:45px;margin:13.5px 10px;line-height:45px;
-webkit-box-shadow:0px 0px 13px 4px rgba(0,0,0,0.3);
        box-shadow:0px 0px 13px 4px rgba(0,0,0,0.3);
background:#fff url(../img/sp/btn_arrow.png) no-repeat;background-position:top 12px right 8px;background-size:35px 21px;}

#message:before{margin-bottom:85px;}
#message .base{margin-bottom:85px;}
.base .bg{width:127%;}
.base #messageBg1{left:-55%;}
.base #messageBg2{margin-left:-40%;}
.base #messageBg3{left:43%;}
#message:after{padding-top:85px;}

}


/**************************************************/