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


img{width:100%;}


/*共通*/
.inner{max-width:1000px;width:95%;}
.pc{display:inherit;}
.sp{display:none;}


/*ヘッダー*/
header{
	background:#fff;
	border-bottom:1px #888 solid;
	width:100%;
	z-index:999;
	}


/*ナビ*/
.navi{background:#FFF;width:100%;/*position:fixed;*/z-index:999;}
.navi .left{float:left;width:36%;max-width:360px;padding:15px 1% 0 0.2%;}
.navi .right{float:right;width:60%;max-width:600px;}
.main {
  width: 100%;
}

.navi_wrap ul{display:table;width:100%;}
.navi_wrap ul li{
	display:table-cell;
	width:20%;
	border-left:1px #FFF solid;
	}
.navi_wrap ul li a{display:block;color:#333;text-align:center;padding:20px 0;}
.navi_wrap ul li.search a{background:#0071bc;color:#FFF;}



nav ul li div{position:absolute;}
nav ul li div ul{margin:10px 0 0 -120px;}
nav ul li div li{padding:10px 20px;background:#000;}
nav ul li div li:hover{}


/*メインイメージ*/
.main_img img{display:block;}

/*メイン下*/
.main_text{color:#FFF;background:#467896;padding:5% 0;line-height:2;}

/*ムービー*/
.movie_wrap{padding:5% 0;}
.movie{max-width:800px;width:90%;margin:0 auto;}

/*社員紹介*/
.member_wrap{padding:5% 0 0;}
.member_wrap h2 img{max-width:330px;width:33%;display:block;margin:0 auto;}

.member_wrap .photo_right{margin:5% 0;}
.member_wrap .photo_right .left{float:left;width:55%;}
.member_wrap .photo_right .right{float:right;max-width:420px;width:42%;}

.member_wrap .photo_left{margin:5% 0;}
.member_wrap .photo_left .right{float:left;max-width:420px;width:42%;}
.member_wrap .photo_left .left{float:right;width:55%;}

.member_wrap .text_area{}
.member_wrap .text_area h3{
	font-size: 38px;
	line-height: 0.9em;
	border-left: 5px #467896 solid;
	padding-left: 0.2em;
	padding-bottom: 0.1em;
	margin-bottom:0.5em;
}

.member_wrap .text_area .work{display:block;font-size:24px;}
.member_wrap .text_area h4{font-size:48px;line-height:1em;margin-bottom:0.5em;}
.member_wrap .text_area h4 span{font-size:24px;padding-left:0.5em;}
.member_wrap .text_area p{line-height:2em;}

/*スライダー*/
.slide_wrap{background:#a0cccc;padding:10px 0;margin-bottom:10%;}
.slide-items{
	width: auto;
	background: #fff;
	padding: 3% 5%;
	margin: 20px;
	max-width: 960px;
}

.slide-items h2{font-size:32px;color:#00a99d;line-height:1.2em;}
.slide-items h3{font-size:32px;padding:3% 0;line-height:1.2em;}
.slide-items p{text-align:left;line-height:2em;}

.slick-slide{ height:auto!important;text-align:center;}

.slick-next{ right:0!important; }
.slick-prev{ left:0!important; }
.slick-arrow{ z-index:2!important; }

.slick-arrow:before{
    content:""!important;
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
}

.slick-next:before{
    background: url(../img/top/arrow_r.gif)!important;
    background-size: contain!important;
}

.slick-prev:before{
    background: url(../img/top/arrow_l.gif)!important;
    background-size: contain!important;
}


/*社員の一日*/
.oneday_wrap{padding:0;}
.oneday_wrap h2 img{max-width:330px;width:33%;display:block;margin:0 auto 5%;}

.oneday_wrap .text_area h4{font-size:48px;line-height:1em;margin-bottom:0.2em;}
.oneday_wrap .text_area h4 span{font-size:24px;padding-left:0.5em;}
.oneday_wrap .text_area p{line-height:2em;}
	
.day1_pr{background:#467896;color:#FFF;padding:5%;}
.day1_pr .left{float:left;width:50%;}
.day1_pr .right{float:right;max-width:450px;width:45%;}

.day2_pl{background:#467896;color:#FFF;padding:5%;}
.day2_pl .left{float:right;max-width:450px;width:45%;}
.day2_pl .right{float:left;width:50%;}


.arrow_wrap img{display:block;width:7%;max-width:71px;margin:0 auto;}

.flow_wrap{max-width:1100px;margin:3% auto 10%;}
.flow_wrap ul{display:table;margin-bottom:2%;}
.flow_wrap ul li{display:table-cell;vertical-align:top;padding:0.2%;line-height:1.6em;}
.flow_wrap ul li.work_photo{max-width:300px;width:28%;}
.flow_wrap ul li.arrow{max-width:43px;width:4%;}
.flow_wrap ul li.lr{max-width:59px;width:5%;}
.flow_wrap ul li.rr{max-width:43px;width:4%;}

.flow_wrap ul li.arrow img,.flow_wrap ul li.lr img,.flow_wrap ul li.rr img{
	display:block;margin-top:12vw;
	}

.flow_wrap .time{color:#00a99d;font-size:28px;}
.flow_wrap h4{font-size:28px;line-height:1.4;}

/*職場紹介*/
.workplace_wrap{background:url(../img/top/work_bg.gif);padding:5% 0;}
.workplace_wrap h2 img{max-width:500px;width:50%;display:block;margin:0 auto 5%;}

.workplace_wrap .photo_list{}
.workplace_wrap .photo_list li{margin:0 2% 2% 0;width:32%;max-width:320px;float:left;}
.workplace_wrap .photo_list img{display:block;}
.workplace_wrap .photo_list li:nth-child(3n){margin-right:0;}

/*お仕事紹介*/
.jobs_wrap{padding:5% 0;}
.jobs_wrap h2 img{max-width:180px;width:18%;display:block;margin:0 auto;}
.jobs_wrap h3{font-size:48px;text-align:center;margin-bottom:5%;line-height:1.2;}

.jobs_btn_wrap{margin:5% 0;}
.jobs_btn_wrap li{margin:0 4% 4% 0;width:48%;max-width:480px;float:left;}
.jobs_btn_wrap li:nth-child(2n){margin-right:0;}

.jobs_btn_wrap h3{font-size:48px;text-align:center;}
.jobs_btn_wrap2{margin:5% 0;}
.jobs_btn_wrap2 li{margin:0 4% 4% 0;width:48%;max-width:480px;float:left;}
.jobs_btn_wrap2 li:nth-child(2n){margin-right:0;}


.jobs_btn_wrap3{margin:5% 0;}
.jobs_btn_wrap3 a{display:block;width:48%;max-width:480px;margin:0 auto;}
.jobs_btn_wrap3 a:first-child{float:left;}
.jobs_btn_wrap3 a:last-child{float:right;}


/*Youtube*/
.youtube {
  position: relative;
  width: 100%;
  height:70vw;
  max-height:500px;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  max-height:500px;
}


/*ページタイトル*/
.page_title{padding:4% 0;background:#003e6b;}
.jobs_title img{max-width:150px;width:50%;margin:0 auto;display:block;}


/*JOBS*/
.table_title{line-height:1.2em;font-size:1.5em;font-weight:bold;margin-bottom:2%;}
.jobs_table{width:100%;font-size:1.1em;margin:0 0 5% 0;line-height:1.8em;font-size:0.9em;}
.jobs_table th{background:#467896;width:20%;color:#FFF;padding:1%;border:1px #333 solid;vertical-align:top;}
.jobs_table td{padding:1%;border:1px #333 solid;}

.btn_wrap{padding:3% 0 10%;}
.btn_wrap a{
	width:12em;
	background:#22b573;
	padding:0.5em;
	font-size:32px;
	color:#FFF;
	display:block;
	margin:0 auto;
	text-align:center;
	}

.job_textarea h2{line-height:1.2em;font-size:48px;font-weight:bold;text-align:center;margin:7% 0;}
.job_textarea h3{line-height:1.2em;font-size:1.5em;font-weight:bold;margin-bottom:2%;}
.job_textarea section{margin-bottom:5%;}
.job_textarea p{display:block;}
.job_textarea .tokucyo{margin:1% 0 0;}
.job_textarea .tokucyo div{
	float:left;
	padding:5px 10px;
	margin:0 5px 5px 0;
	background:#003e6b;
	color:#FFF;
	}

.job_photo li{float:left;width:32%;max-width:320px;margin:0 2% 2% 0;}
.job_photo li:nth-child(3n){margin:0 0 2%;}


/*フローティングバナー*/
.btm_bnr{}
.btm_bnr a{
	display:block;
	width:200px;
	height:50px;
	background:#f00 url(../img/top/bnr_text_w.png) center no-repeat;
	background-size:80%;
	border:1px #F00 solid;
	border-radius:50px 0 0 50px;
	padding:5px 20px;
	position:fixed;
	right:0;
	bottom:90px;
	z-index:999;
	border-right:none;
	}
.btm_bnr a:hover{
	background:#fff url(../img/top/bnr_text.png) center no-repeat;
	background-size:80%;
	border:1px #f00 solid;
	border-right:none;
}


/*フローティングバナー2*/
.f_banner{
	display:block;
	width:300px;
	position:fixed;
	right:0;
	bottom:80px;
	z-index:999;
	}

.f_banner a:hover img {
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}


@media only screen and (min-width: 1100px) {
.flow_wrap ul li.arrow img,.flow_wrap ul li.lr img,.flow_wrap ul li.rr img{
	display:block;margin-top:150px;
	}
}


@media only screen and (max-width: 840px) {
.pc{display:none;}
.sp{display:block;}


/*フローティングバナー*/
.btm_bnr{}
.btm_bnr a{
	display:block;
	width:100%;
	height:8vw;
	background:#f00 url(../img/top/bnr_text_w.png) center no-repeat;
	background-size:45%;
	border:none;
	border-top:1px #f00 solid;
	border-radius: 0;
	padding:10px 0;
	position:fixed;
	right:0;
	bottom:0;
	}
.btm_bnr a:hover{
	background:#fff url(../img/top/bnr_text.png) center no-repeat;
	background-size:45%;
	border:none;
	border-top:1px #888 solid;
}

/*ヘッダー*/
header{background:#fff;border-bottom:1px #888 solid;min-height:70px;position:fixed;width:100%;z-index:999;}
header h1.logo{float:left;width:70%;max-width:360px;padding:2% 1% 0 0.2%;}

/*メイン*/
.main{font-size:0.8em;line-height:2;}

/*スライダー*/
.slide-items{padding: 10%;}
.slide-items h2{font-size:24px;}
.slide-items h3{font-size:24px;}

/*タイトル*/
.member_wrap h2 img{max-width:330px;width:63%;}
.oneday_wrap h2 img{max-width:330px;width:63%;}
.workplace_wrap h2 img{max-width:500px;width:73%;}
.jobs_wrap h2 img{max-width:180px;width:30%;}



/*写真右*/
.member_wrap .photo_right .left{float:none;width:100%;margin-bottom:5%;}
.member_wrap .photo_right .right{float:none;max-width:840px;width:100%;}

.day1_pr .left{float:none;width:100%;margin-bottom:5%;}
.day1_pr .right{float:none;max-width:840px;width:100%;}
.day2_pl .left{float:none;width:100%;margin-bottom:5%;}
.day2_pl .right{float:none;max-width:840px;width:100%;}

.arrow_wrap img{display:block;width:16%;max-width:71px;margin:0 auto;}

/*写真左*/
.member_wrap .photo_left .left{float:none;width:100%;margin-bottom:5%;}
.member_wrap .photo_left .right{float:none;max-width:840px;width:100%;}


/*社員の一日*/
.flow_wrap .time{font-size:21px;}
.flow_wrap h4{font-size:18px;}

/*職場紹介*/
.workplace_wrap .photo_list li{margin:0 2% 2% 0;width:49%;}
.workplace_wrap .photo_list li:nth-child(3n){margin-right:2%;}
.workplace_wrap .photo_list li:nth-child(2n){margin-right:0;}

/*お仕事情報*/
.jobs_wrap h3{font-size:28px;}
.jobs_btn_wrap2 li{margin:0 auto 4%;width:80%;max-width:480px;float:none;}
.jobs_btn_wrap2 li:nth-child(2n){margin-right:auto;}


/*JOBS*/
.jobs_table{font-size:1em;}
.jobs_table th{width:100%;border:none;float:left;}
.jobs_table td{width:100%;border:none;float:left;}

.btn_wrap a{font-size:21px;}

.job_textarea h2{font-size:32px;margin:10% 0;}
.job_textarea h3{font-size:21px;}
.job_textarea .tokucyo{margin:3% 0 0;}

.job_photo li{float:left;width:49%;max-width:320px;margin:0 2% 2% 0;}
.job_photo li:nth-child(3n){margin:0 2% 2%;}
.job_photo li:nth-child(2n){margin:0 0 2%;}

.jobs_btn_wrap li{margin:0 0 4% 0;width:100%;max-width:840px;float:none;}


/*ナビ*/
nav ul li div{position:absolute;}
nav ul li div ul{margin:10px 0 0 -120px;}
nav ul li div li{padding:10px 20px;background:#000;}
nav ul li div li:hover{}

/*navi開閉部分*/
    .nav-wrap{
		display:block;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        width: 100%;
		float:left;
		z-index:200;
}
    .gnav {
      list-style-type: none;
      background: #fff;
      width: 100%;
      /*　z-indexは.wrapper部分でpositionを使用した場合は適切な数字（一番大きい値）に変更*/
      z-index: 200;
	  top: 70px;
      position: relative;
	  border-top:1px #888 solid;
}

    .gnav li {
      border-bottom: 1px solid #333;
}
	.gnav li:hover {
      background: #ddd;
}

    .gnav li a {
      display: block;
      text-decoration: none;
      /* (44-16)/2=14px */
      padding: .5rem 1rem;
  	  color:#003459;
}
    /*ハンバーガーボタン*/

    .icon-animation {
      width: 70px;
      height: 70px;
      display: block;
      cursor: pointer;
      float: right;
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
	  background:#fff;
	  border-left:1px #888 solid;
	  border-bottom:1px #888 solid;
}
.icon-animation .menutext {
      position: absolute;
      top: 110%;
        font-size:11px;
     font-weight:bold;
 font-feature-settings : "palt";

        text-align:left;
}
    
.icon-animation span {
      width: 45px;
      height: 3px;
      display: block;
      background: #003459;
      position: absolute;
      left: 50%;
      top: 45%;
      margin-left: -23px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
	  border-radius: 3px;		/* CSS3草案 */
	  -webkit-border-radius: 3px;	/* Safari,Google Chrome用 */
	  -moz-border-radius: 3px;	/* Firefox用 */
}

 .icon-animation .top {
      -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      transform: translateY(-10px);
}

.icon-animation .bottom {
      -webkit-transform: translateY(10px);
      -ms-transform: translateY(10px);
      transform: translateY(10px);
}

.is-open .middle {
      background: rgba(51, 51, 51, 0);
}

.is-open .top {
      -webkit-transform: rotate(-45deg) translateY(0px);
      -ms-transform: rotate(-45deg) translateY(0px);
      transform: rotate(-45deg) translateY(0px);
}

.is-open .bottom {
      -webkit-transform: rotate(45deg) translateY(0px);
      -ms-transform: rotate(45deg) translateY(0px);
      transform: rotate(45deg) translateY(0px);
}

.main{padding-top:70px;}

footer .icon_wrap{margin:10px auto;width:280px;}


/*フローティングバナー*/
.f_banner{
	display:block;
	width:100%;
	position:fixed;
	right:0;
	bottom:0;
	z-index:999;
	}

.f_banner a:hover img {
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}


/*その他*/
.jobs_btn_wrap3{}
.jobs_btn_wrap3 a{display:block;width:100%;margin:0 auto;}
.jobs_btn_wrap3 a:first-child{float:none;}
.jobs_btn_wrap3 a:last-child{float:none;}


/* shivering */
@keyframes shivering {
  0%{
    transform: rotateZ(0);
  }
  50% {
    transform: rotateZ(3deg);
  }
 100% {
    transform: rotateZ(0deg);
  }  
}