@charset "utf-8";
/* CSS Document */
/*===============================================
●style.css 画面の横幅が1350px以上
===============================================*/
@media screen and (min-width: 1350px){
.sp{
  display:none;
}
.pagetop {
 bottom: 20px;
 right: 55px;
}
.small{
    font-size: 80%;
}
.inner{
    width: 80%;
    max-width: 1260px;
    margin: 0 auto;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 100%;/*rem算出をしやすくするために*/
}
.btn,
a.btn,
button.btn {
  font-size: 100%;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 0.5rem;
}
a.btn-border {
  border: 3px solid #fff;
  border-radius: 0;
  background: none;
  font-size: 200%;
}

a.btn-border:before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;
  border: 1px solid #fff;
}
a.btn-border:hover:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}
a.btn-flat {
  overflow: hidden;
  padding: 5px 100px;
  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #F5540D;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
a.btn-st {
  padding: 16px 20px;
  color: #fff;
  border-radius: 0;
  background: #F5540D;
  width: 320px;
  margin: 48px auto;
}
.more{
    margin-top: 24px;
    width: 150px;
    font-size: 120%;
	color: #5e5e5e;
	border-bottom: 3px solid #5e5e5e;
    border-top: 3px solid #5e5e5e;
    padding-left: 10px;
}
/*
-------------------ヘッダーとフッター-------------------------
*/
body {
	margin:0;
	padding:0;
	min-width:900px;
    line-height: 2;
}
#header {
	height: 850px;
    background-color:#5a5a5a;
	overflow: hidden;
}
.header_area{
	position: relative;
	margin: 0 auto;
	width: 1280px;
	z-index: 1000;
}
#header-menu{
	height: 90px;
    background-color:#000;
	color: #fff;
	padding: 15px 0;
}
#header-menu nav{
	width:100%;
    margin-bottom: 0px;
    font-size: 90%;
}
#header-menu nav .header-in{
	width:95%;
	max-width:1500px;
	min-width:1024px;
	margin:0 auto;
	z-index:999;
}
#header-menu nav .logo{
	width:40px;
	margin-top:20px;
    float: left;
    color: #82AE41;
    line-height: 1.5;
    padding-bottom: 7px;
}
#header-menu .header-right{
    float: right;
}
#header-menu .pc{
    float: left;
    margin:30px 30px 0px;
}
#header-menu .header-right li{
    display: inline-block;
    margin: 70px 0 0 10px
}
#header-menu li{
    display: inline-block;
    color: #B3B3B3;
}
#header-menu li a{
    color: #fff;
    padding: 2px 7px;
    -webkit-transition: 0.2s;
    -moz-transition:0.2s;
    -o-transition:0.2s;
    -ms-transition:0.2s;
    transition: 0.2s;
}
#header-menu li a:hover{
    color: #fff;
    background-color:#F5540D;
    border-radius: 2px;
}
#header-menu .nav-right{
    font-size: 90%;
    float: right;
    padding: 5px 15px;
    border-radius: 5px;
    background-color:#F5540D;
    font-weight: bold;
    color: #fff;
    margin-top: 13px;
}
#footer .footer-recruit{
	background-image: url("../common/f-recruit-bg.jpg");
	background-size: cover;
	padding: 100px;
}
#footer .footer-recruit li{
    display: inline-block;
}
#footer .footer-recruit .re-btn{
    font-size: 150%;
	border: 3px #FFFFFF solid;
    width: 300px;
    margin: 50px 20px 20px;
}
#footer .footer-menu{
	background-color:#E3E3E3;
	padding: 100px 0 40px;
}
#footer .footer-menu .info,
#footer .footer-menu .f-menu-li{
float: left;
}
#footer .footer-menu .info{
	width: 370px;
}
#footer .footer-menu .info img{
	margin-bottom: 25px;
}
#footer .footer-menu .f-menu-title{
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 10px;
	width: 170px;
}
#footer .footer-menu .btn-f{
	padding: 5px 20px;
	background-color: #F5540D;
    border-radius: 5px;
	color: #fff;
	margin:10px 0 0 0;
	width: 140px;
}
#footer .copy{
	color: #fff;
	background-color: #000;
	padding: 15px 0;
}
#footer .f-wrapper{
	border-top: 1px solid;
	margin-top: 50px;
	padding-top: 25px;
}
/*
-------------　　　　　　見出し　　　　　-------------------
*/
.h2-box .h2-us-title{
    font-size: 60px;
    line-height: 1;
}
.h2-box .h2-jp-title{
    font-size: 20px;
    padding-left: 0px;
}
.h2-box .h2-jp-title:before{
        content: "■ ";
        color: #F5540D;
}
.h2-centering{
    text-align: center;
}
.h2-centering .h2-us-title{
    font-size: 60px;
    line-height: 1;
}
.h2-centering .h2-jp-title{
    font-size: 20px;
    padding-left: 0px;
}
/*
-------------　　　　　TOP　　　　　　-------------------
*/
.first-pr{
    padding: 100px 0;
}
.first-pr .text-box{
    width: 650px;
	float: left;
}
.first-pr .pr-image{
    width: 500px;
	float: right;
}
#top .top-strong{
	padding: 150px 0;
    text-align: center
}
#top .top-strong li{
	display: inline-block;
    margin: 32px 40px;
}
#top .top-strong .more{
	margin:40px auto 0;
}
/*
-------------　　　　　　見出し　　　　　-------------------
*/
.link-area-s{
    padding: 120px 0;
    background-color: #f4f4f4;
    background-image:url(../)
}
/*
-------------child共通-------------------
*/
.text-box{
    margin-top: 25px;
}
.child-container{
	padding:50px 0px 200px;
}
.second-pr{
    padding: 150px 0;
	background-color: #D5D5D5;
}
.content{
	padding: 150px 0 50px;
}
.service-01  .content-bg{
	position:absolute;
	z-index: -100;
	top:1800px;
	right:0;
}
.service-02 .content-bg{
	position:absolute;
	z-index: -100;
	top:2500px;
	right:0;
}
.sprit-menu .left,.sprit-menu .right{
    width: 50%;
    padding: 150px;
    text-align: center;
    border-bottom: 1px #fff solid;
}
.sprit-menu .left{
    float: left;
    background-color: #5a5a5a;
    border-right: 1px #fff solid;
}
.sprit-menu .right{
    float: right;
    background-color: #666666;;
}
.sprit-menu .sprit-transportation{
    background-image: url("../common/sprit-02.jpg");
    background-size: cover;
}
.sprit-menu .sprit-company{
    background-image: url("../common/sprit-03.jpg");
    background-size: cover;
}
.sprit-menu .sprit-safty{
    background-image: url("../common/sprit-04.jpg");
    background-size: cover;
}
.sprit-menu .sprit-house{
    background-image: url("../common/sprit-07.jpg");
    background-size: cover;
}
.sprit-menu .sprit-world{
    background-image: url("../common/sprit-06.jpg");
    background-size: cover;
}
.sprit-menu .sprit-used{
    background-image: url("../common/sprit-05.jpg");
    background-size: cover;
}
#child-title{
	padding: 40px 0;
}
.ct-s1{
	background-image: url("../service/img/ct-s1-pc.jpg");
}
/*
-------------料金表-------------------
*/
.price-box{
	padding: 100px 0;
	text-align: center;
	margin: 25px auto;
	width: 100%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
.price-box .more{
    margin: 0 auto;
}
.price-box p{
	margin-bottom: 25px;
}
/*
-------------ポリシー-------------------
*/
.policy{
	padding-top: 50px;
}
.policy h3{
	font-size: 150%;
	font-weight: bold;
	margin-bottom: 25px;
}
.policy .wrapper{
	margin: 0 0 50px;
}
/*
-------------事業内容-------------------
*/
.works .wrapper{
	height: 640px;
	margin-top: 128px;
}
.works01{
	background-image: url("../service/img/strengths01bg.jpg");
	background-repeat: no-repeat;
	background-position: center right;
}
.works02{
	background-image: url("../service/img/strengths01bg.jpg");
	background-repeat: no-repeat;
	background-position: center right;
}

.strengths .left,.strengths .right{
	height: 800px;
}
.strengths .right .wrapper{
	width: 600px;
	float: right;
	margin-right: 200px;
}
.strengths .text-box{
	background-color: rgba(255,255,255,0.7) ;
    
}
.strengths01{
	background-image: url("../service/img/strengths01bg.jpg");
	background-repeat: no-repeat;
	background-position: center right;
}
.strengths02{
	margin: 0 calc(50% - 50vw);
	background-image:  url("../service/img/strengths02bg.jpg");
	background-repeat: no-repeat;
	background-position: left 200px top 0px, left 0px bottom 50px;
}
.strengths03{
	background-image: url("../service/img/strengths03bg.jpg");
	background-repeat: no-repeat;
	background-position: bottom right;
}
/*
-------------業務実績-------------------
*/
.case{
    width: 880px;
    margin: 82px auto;
    padding: 56px 24px;
    border-top: 1px solid #2e2e2e;
    border-bottom: 1px solid #2e2e2e;
}
.case .wrapper{
    width:100%;
    margin: 32px auto;
    padding: 24px 24px;
    background-color: #F7F7F7;
    border-radius: 5px;
}
.case .wrapper .left{
    float: left;
}
.case .wrapper .left img{
    width: 400px;
}
.case .wrapper .right{
    float: right;
}
.case .wrapper .right .title{
    font-size: 120%;
    font-weight: bold;
}
/*
-------------お問い合わせ-------------------
*/
#form{
	width:100%;
	margin:50px auto;
	padding:20px 50px 50px;
}
#form table{
	width:900px;
	margin:0 auto;
}
#form .form_ate{
	font-size:90%;
	width:900px;
	margin:50px auto;
}
#form th{
	text-align:left;
	width:200px;
	vertical-align: top;
}
#form input{
	width:70%;
}
#form .res{
	width:50px;
}
#form textarea{
	width:80%;
	height:100px;
}
#form .hei{
	height:50px;
}
#form th .subumit{
	width:50%;
	margin:25px auto;
}
#form .subumit{
	width:200px;
	margin:25px auto;
}
/*
-------------会社について------------------
*/
.greeting-message{
    background-color: #fff;
}
.greeting-message .text-box{
	width: 55%;
    float: left;
}
.greeting-message .greeting-image{
    background-image: url("../company/img/greeting-image.jpg");
	background-size: cover;
    background-position: center;
	width: 40%;
    height: 800px;
    float: right;
}
 .company-profile{
	padding: 100px 0;
	margin:0 auto;
}
 .profile-table{
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
	margin: 50px 0 0;
	padding: 100px;
}
 .profile-table-left{
	float: left;
}
 .profile-table-right{
	float: right;
}
.company-profile table{
	margin-top: 50px;
}
.company-profile table td{
	padding:10px ;
	border-bottom:none;
}
.company-profile table th{
	padding:10px;
	text-align:left;
	width:200px;
}
.company-profile table .line{
	padding-top:5px;
	margin-top:10px;
	border-top:#DBDBDB dotted 1px;
}
#company .map{
	margin: 50px 0px;
}
#company .map .each{
	float: left;
	margin-right: 75px;
}
#company .map .each iframe{
	width: 450px;
}
/*
-------------求人情報------------------
*/
#recruit .recruite-copy{
    margin-top: 64px;
}
#recruit .recruite-copy .title{
    font-size: 500%;
}
#recruit .recruite-copy .sub-title{
    font-size: 250%;
}
#recruit .recruit-first-title .image-box{
    background-image: url("../recruit/img/top-01.jpg");
    background-size: cover;
    height: 500px;
    width:70%;
    float: right;
    margin-top: 48px;
}
#recruit .recruit-link .image-box{
    background-image: url("../recruit/img/top-01.jpg");
    background-size: cover;
    height: 800px;
    width:50%;
    float: left;
    margin-top: 80px;
}
#recruit .recruit-link .title-box{
    float:left;
    margin-top: 48px;
	border: 2px solid #000;
	padding: 100px 160px;
	margin: 240px 0px 0px -88px;
}
#recruit .recruit-link .image-box2{
    background-image: url("../recruit/img/top-02.jpg");
    background-size: cover;
    height: 500px;
    width:30%;
    float: right;
    margin-top: -160px;
}
#recruit .recruit-link .image-box3{
    background-image: url("../recruit/img/message-04-00.jpg");
    background-size: cover;
    height: 800px;
    width:50%;
    float: left;
    margin-top: 80px;
}
#recruit .recruit-link .image-box4{
    background-image: url("../service/img/strengths01bg.jpg");
    background-size: cover;
    height: 500px;
    width:30%;
    float: right;
    margin-top: -160px;
}
#recruit .recruit-first-title .title-box{
    background-color: #F5540D;
    color: #fff;
    width: 45%;
    padding: 100px;
    margin: -250px 0 160px;
    float: left;
}

#recruit .recruit-first-title .h2-us-title{
    font-size: 500%;
}
#recruit .recruit-first-title .h2-jp-title{
    font-size: 200%;
    margin-top: -40px;
}

.recruit .sprit-menu{
    text-align: left;
	color: #fff;
}
.recruit .sprit-menu .title,
.recruit-link .title{
	font-size: 400%;
	text-align: left;
}
.recruit .sprit-menu .sub,
.recruit-link .sub{
	font-size: 150%;
	text-align: left;
	margin-top: -24px;
}
.recruit .sprit-menu a.link,
.recruit-link a.link{
	color: #fff;
	font-size: 150%;
	float: left;
	border-bottom: 3px solid #fff;
	margin-top: 24px;
}
.recruit-link a.link{
	color: #5e5e5e;
	border-bottom: 3px solid #5e5e5e;
}
.recruit .sprit-menu .left,.sprit-menu .right{
    width: 50%;
    padding: 150px;
    text-align: center;
}
.recruit .sprit-menu .left{
    float: left;
    background-color: #5a5a5a;
}
.recruit .sprit-menu .right{
    float: right;
    background-color: #666666;;
}
.recruit .sprit-menu .sprit-company{
    background-image: url("../recruit/img/re-sprit-01.jpg");
    background-size: cover;
}
.recruit .sprit-menu .sprit-works{
    background-image: url("../recruit/img/re-sprit-02.jpg");
    background-size: cover;
}
.recruit .sprit-menu .sprit-message{
    background-image: url("../recruit/img/re-sprit-03.jpg");
    background-size: cover;
}
.recruit .sprit-menu .sprit-flow{
    background-image: url("../recruit/img/re-sprit-04.jpg");
    background-size: cover;
}
#recruit .message .title{
    font-weight: bold;
    font-size: 200%;
}
#recruit .message .message-list ul{
	text-align: center;
}
#recruit .message .message-list li{
	display: inline-block;
}
#recruit .message .message-list li img{
	width: 80%;
}
#recruit .message .message-list li .name{
	font-size: 140%;
	font-weight: bold;
}
#recruit .message .message-list li .since{
	font-size: 100%;
	font-weight: bold;
	width: 60%;
	margin: 0 auto;
	border-top: 2px solid #5e5e5e;
}

#recruit .message .main-photo{
	width: 60%;
	background-color:#999;
	height: 450px;
	margin-top: -550px;
	float: left;
}
#recruit .message .main-photo-bg{
	width: 100%;
	background-color:#F5540D;
	height: 500px;
	color: #222;
	font-weight: bold;
}
#recruit .message .message-name{
	width: 35%;
	margin-top: 64px;
	float: right;
    color: #fff;
}
#recruit .message .message-name .name{
	font-size: 400%;
}
#recruit .message .message-name .sub{
	font-size: 200%;
	margin-top: -24px;
}
#recruit .message .first-wrapper{
    width: 1200px;
    margin: 128px auto;
}
#recruit .message .first-wrapper .left{
    width: 500px;
    float: left;
}
#recruit .message .first-wrapper .right{
    float: right;
}
#recruit .message .second-wrapper{
    width: 1200px;
    margin: 128px auto;
    text-align: center;
}
#recruit .message .third-wrapper{
    width: 1200px;
    margin: 128px auto;
}
#recruit .message .third-wrapper .left{
    float: left;
}
#recruit .message .third-wrapper .right{
    width: 500px;
    float: right;
}
#recruit .flow {
    width: 1200px;
    margin: 0 auto;
}
#recruit .flow .wrapper{
    margin-bottom: 64px;
}
#recruit .flow .wrapper .title{
    border-bottom:1px solid #000;
    margin-bottom: 32px;
    font-size: 180%;
    font-weight: bold;
}
#recruit .flow .wrapper p{
    margin-bottom: 16px;
}
#recruit .flow .wrapper .time{
    background-color: #F5540D;
    color: #fff;
    padding: 20px;
    border-radius: 50px;
    margin-right: 24px;
}
#recruit .message-photo{
    background-image: url("../recruit/img/message-00.jpg");
    background-size: cover;
}
#recruit .message02-photo1{
    background-image: url("../recruit/img/message-02-0.jpg");
    background-size: cover;
}
#recruit .message02-photo2{
    background-image: url("../recruit/img/message-02-00.jpg");
    background-size: cover;
}
#recruit .message03-photo{
    background-image: url("../recruit/img/message-03-00.jpg");
    background-size: cover;
}
#recruit .message04-photo1{
    background-image: url("../recruit/img/message-04-0.jpg");
    background-size: cover;
}
#recruit .message04-photo2{
    background-image: url("../recruit/img/message-04-00.jpg");
    background-size: cover;
}
#recruit .flow-photo{
    background-image: url("../recruit/img/flow-00.jpg");
    background-size: cover;
}
video {
	width:100%;
	position:relative;
	right: 0;
	top:0;
	z-index:-100;
}
.pattern {
  width: 100%;
  height: 95%;
  background: url(http://www.webcreatorbox.com/sample/images/yokojima.png);
  z-index: -200;
}

 #topimg .btn{
	font-size: 150%;
    border: 2px solid #fff;
    border-radius: 0px;
    padding: 10px 20px;
    margin-top: 24px;
}
 #topimg .btn{
    color: #fff;
	font-size: 120%;
    border: 2px solid #fff;
    border-radius: 0px;
    padding: 8px 32px;
    margin-top: 24px;
    -webkit-transition: 0.7s;
    -moz-transition:0.7s;
    -o-transition:0.7s;
    -ms-transition:0.7s;
    transition: 0.7s;
}
#recruit #topimg .btn:hover{
    background-color: #F5540D;
    border: 2px solid #F5540D;
}
}