﻿/*------------------------------------------------------------------------------------------全ページ共通------------------------------------------------------------------------------------------*/

/*------------------------------NOW LOADING------------------------------*/

/*非表示*/
.is-hide{
display:none;
}

/*LOADING*/
#loader-bg{
background:#000000;
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:100;
}


#loader{
width:100%;
height:100%;
position:fixed;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
justify-content:center;
align-items:center;
}

#loader img{
display:block;
width:100px;
height:100px;
}

/*#loader{
position:fixed;
height:120px;
width:120px;
top:50%;
left:50%;
margin-left:-60px;
margin-top:-60px;
}

#loader img{
display:inline-block;
}*/


/*------------------------------プリント設定------------------------------*/

@media print{
html{
background-image:none;
}
.body{
background-image:none;
}
body{
background-image:none;
}
}

/*------------------------------html------------------------------*/

html{
min-width:1380px;
background-color:#000000;
}

/*------------------------------body------------------------------*/

body{
width:100%;
height:100%;
margin:0;
padding:0;
visibility:hidden;
}

/*------------------------------ヘッダー部------------------------------*/

.header{
width:100%;
padding-top:20px;
padding-bottom:40px;
background-color:#222222;
position:relative;
}

.title{
width:100%;
margin:0 auto 0 auto;
text-align:center;
position:relative;
z-index:11;
}

.title a{
color:#ffffff;
font-size:40pt;
border-bottom:solid 3px #d2b48c;
}

/*スマホ版メニュー用ここから*/
#menu{
display:none;
}

.hamburger-menu{
position:relative;
margin:40px auto 0 auto;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
justify-content:center;
}

.menu-btn{
display:flex;
width:100px;
height:100px;
box-sizing:border-box;
justify-content:center;
align-items:center;
background-color:#333333;
border-top:2px #bbbbbb solid;
border-left:2px #bbbbbb solid;
border-bottom:2px #bbbbbb solid;
z-index:11;
}

.menu-text{
display:flex;
height:100px;
box-sizing:border-box;
align-items:center;
background-color:#333333;
padding-left:0px;
padding-right:20px;
color:#ffffff;
font-size:30pt;
border-top:2px #bbbbbb solid;
border-right:2px #bbbbbb solid;
border-bottom:2px #bbbbbb solid;
z-index:11;
}

.menu-btn span,.menu-btn span:before,.menu-btn span:after{
position:absolute;
content:'';
display:block;
width:50px;
height:3px;
border-radius:3px;
background-color:#ffffff;
}

.menu-btn span:before{
bottom:15px;
}

.menu-btn span:after{
top:15px;
}

#menu-btn-check:checked ~ .menu-btn span{
background-color:rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}

#menu-btn-check:checked ~ .menu-btn span::before{
bottom:0;
transform:rotate(45deg);
}

#menu-btn-check:checked ~ .menu-btn span::after{
top:0;
transform:rotate(-45deg);
}

#menu-btn-check{
display:none;
}

.menu-content{
width:100%;
height:100%;
position:fixed;
top:0;
padding-top:300px;
left:100%;/*leftの値を変更してメニューを画面外へ*/
z-index:10;
background-color:#222222;
opacity:0.8;
transition:all 0.5s;/*アニメーション設定*/
}

.menu-content ul{
padding:0px 10px 0;
}

.menu-content ul li{
border-bottom:solid 1px #ffffff;
list-style:none;
}

.menu-content ul li a{
display:block;
width:100%;
font-size:35pt;
box-sizing:border-box;
color:#ffffff;
text-decoration:none;
padding:70px 30px 70px 30px;
position:relative;
}

.menu-content ul li a::before{
content:"";
width:35px;
height:35px;
border-top:solid 2px #ffffff;
border-right:solid 2px #ffffff;
transform:rotate(45deg);
position:absolute;
right:30px;
top:85px;
}

#menu-btn-check:checked ~ .menu-content{
left:0;/*メニューを画面内へ*/
}

/*スマホ版メニュー用ここまで*/


/*------------------------------スライド部------------------------------*/

.slider-area{
width:100%;
height:700px;
margin:0 auto 0 auto;
position:relative;
}

.catch-phrase-area{
width:1380px;
height:700px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:absolute;
text-align:center;
z-index:2;
}

.catch-phrase-area p{
color:#cccccc;
font-size:40pt;
margin:0 auto 0 auto;
line-height:700px;
}

/*スライダー用ここから*/
@-webkit-keyframes zoomUp{
	0%{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
	100%{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}

@keyframes zoomUp{
	0%{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
	100%{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
	-webkit-animation:zoomUp 12s linear 0s;
	animation:zoomUp 12s linear 0s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

.swiper-slide{
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

.slide-img{
	height:700px;
	background-size:cover;
	background-position:center center;
}

.slide-text{
	width:100%;
	top:50%;
	position:absolute;
	color:#ffffff;
	font-size:15pt;
	font-weight:bold;
	text-align:center;
	z-index:3;
}
/*スライダー用ここまで*/

/*------------------------------各ページ背景------------------------------*/

#background-container-home{
width:100%;
position:relative;
margin:0 auto 0 auto;
background:url('/images/home/background.jpg') no-repeat center;
background-size:cover;
}

#background-container-business{
width:100%;
position:relative;
margin:0 auto 0 auto;
background:url('/images/business/background.jpg') no-repeat center;
background-size:cover;
}

#background-container-company{
width:100%;
position:relative;
margin:0 auto 0 auto;
background:url('/images/company/background.jpg') no-repeat center;
background-size:cover;
}

#background-container-contact{
width:100%;
position:relative;
margin:0 auto 0 auto;
background:url('/images/contact/background.jpg') no-repeat center;
background-size:cover;
}

#background-container-cooperate{
width:100%;
position:relative;
margin:0 auto 0 auto;
background:url('/images/cooperate/background.jpg') no-repeat center;
background-size:cover;
}

#background-container-customer-feedback{
width:100%;
position:relative;
margin:0 auto 0 auto;
background:url('/images/customer-feedback/background.jpg') no-repeat center;
background-size:cover;
}

#background-container-recruitment{
width:100%;
position:relative;
margin:0 auto 0 auto;
background:url('/images/recruitment/background.jpg') no-repeat center;
background-size:cover;
}

/*------------------------------SNS------------------------------*/

.SNS-area{
width:100%;
padding-top:50px;
padding-bottom:50px;
margin:0 auto 0 auto;
position:relative;
text-align:center;
font-size:0;
background-color:#222222;
}

.SNS-block{
width:1080px;
margin:0 auto 0 auto;
position:relative;
}

.SNS-icon{
display:block;
width:150px;
height:150px;
margin:60px 60px 60px 60px;
position:relative;
float:left;
}

.SNS-icon-link{
display:block;
width:150px;
height:150px;
top:0;
left:0;
position:absolute;
}

.SNS-area p{
clear:both;
font-size:30pt;
color:#444444;
}

.sub-title-SNS-container{
width:100%;
display:flex;
justify-content:center;
margin-top:50px;
position:relative;
text-align:center;
font-size:0;
}

.sub-title-SNS-container-left{
height:100px;
flex:1;
}

.sub-title-SNS-container-center{
height:100px;
flex-basis:300px;
border-bottom:2px #222222 solid;
background-color:#222222;
/*文字中央寄せ*/
display:-webkit-box;
display:-ms-flexbox;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
/*文字中央寄せここまで*/
border-radius:50px 50px 0 0;
}

.sub-title-SNS-container-center a{
color:#708090;
font-size:30pt;
font-weight:bold;
}

.sub-title-SNS-container-right{
height:100px;
flex:1;
}

/*------------------------------フッター部------------------------------*/

.footer{
width:100%;
position:relative;
margin:0 auto 0 auto;
}

.footer-container{
width:1380px;
margin:auto;
position:relative;
padding-top:50px;
padding-bottom:50px;
}

.footer-left{
display:table-cell;
width:600px;
padding-left:20px;
border-left:10px #111111 ridge;
vertical-align:top;
}

.footer-right{
display:table-cell;
width:780px;
padding-right:20px;
border-right:10px #111111 ridge;
vertical-align:middle;
}

.footer p{
color:#999999;
font-size:18pt;
}

/*------------------------------------------------------------------------------------------[home]------------------------------------------------------------------------------------------*/

.sub-title-infomation-area{
width:100%;
margin:0 auto 0 auto;
padding-top:30px;
padding-bottom:10px;
background-color:#111111;
opacity:0.8;
position:relative;
text-align:center;
height:330px;
}

.sub-title-infomation-container{
width:1380px;
margin:0 auto 0 auto;
position:relative;
text-align:center;
font-size:0;
}

.sub-title-infomation-container-left{
display:table-cell;
width:540px;
height:100px;
border-bottom:2px #bbbbbb solid;
}

.sub-title-infomation-container-center{
display:table-cell;
width:300px;
height:100px;
vertical-align:middle;
border:2px #bbbbbb solid;
}

.sub-title-infomation-container-right{
display:table-cell;
width:540px;
height:100px;
border-bottom:2px #bbbbbb solid;
}

.sub-title-infomation-container a{
color:#cccccc;
font-size:30pt;
font-weight:bold;
}

.infomation-area{
display:inline-block;
width:1100px;
height:180px;
margin:20px auto 0 auto;
position:relative;
overflow:auto;
font:0;
text-align:center;
box-shadow:2px 2px 10px #111111;
}

.infomation-block{
display:inline-block;
border-bottom:1px #999999 dotted;
}

.date{
display:table-cell;
width:150px;
height:50px;
color:#999999;
font-size:18pt;
vertical-align:middle;
text-align:left;
}

.message{
display:table-cell;
width:600px;
height:50px;
color:#999999;
font-size:18pt;
vertical-align:middle;
text-align:left;
}

.sub-title-contents-container{
width:1380px;
margin:0 auto 0 auto;
position:relative;
text-align:center;
font-size:0;
}

.sub-title-contents-container-left{
display:table-cell;
width:540px;
height:100px;
border-bottom:2px #d2b48c solid;
}

.sub-title-contents-container-center{
display:table-cell;
width:300px;
height:100px;
vertical-align:middle;
border:2px #d2b48c solid;
}

.sub-title-contents-container-right{
display:table-cell;
width:540px;
height:100px;
border-bottom:2px #d2b48c solid;
}

.sub-title-contents-container a{
color:#d2b48c;
font-size:30pt;
font-weight:bold;
}

.explanation{
margin:30px auto 0 auto;
position:relative;
text-align:center;
}

.explanation a{
color:#d2b48c;
font-size:18pt;
}

.contents-area{
margin:0 auto 0 auto;
position:relative;
text-align:center;
font-size:0;
}

.contents-block{
display:inline-block;
width:400px;
height:550px;
margin:60px 30px 0 30px;
position:relative;
border:0;
}

.contents{
width:400px;
height:550px;
position:relative;
}

.contents p{
width:400px;
height:50px;
margin:0 auto 0 auto;
background-color:#d2b48c;
text-align:center;
line-height:50px;
font-size:20pt;
font-weight:bold;
}

.contents-link{
display:block;
width:400px;
height:550px;
position:absolute;
top:0;
left:0;
}

.over{
position:absolute;
top:0;
left:0;
}

.contents-block:hover .over{
visibility:hidden;
}

/*------------------------------------------------------------------------------------------[home]以外共通------------------------------------------------------------------------------------------*/

.page-title-area{
width:100%;
margin:0 auto 0 auto;
padding-top:30px;
padding-bottom:10px;
background-color:#111111;
opacity:0.8;
position:relative;
text-align:center;
height:330px;
}

.page-title-container{
width:1380px;
margin:0 auto 0 auto;
position:relative;
text-align:center;
font-size:0;
}

.page-title-container-left{
display:table-cell;
width:540px;
height:100px;
border-bottom:2px #d2b48c solid;
}

.page-title-container-center{
display:table-cell;
width:300px;
height:100px;
vertical-align:middle;
border:2px #d2b48c solid;
}

.page-title-container-right{
display:table-cell;
width:540px;
height:100px;
border-bottom:2px #d2b48c solid;
}

.page-title-container a{
color:#d2b48c;
font-size:25pt;
font-weight:bold;
}

.page-explanation-area{
display:inline-block;
width:1380px;
height:180px;
margin:20px auto 0 auto;
position:relative;
}

.page-explanation-block{
width:1200px;
height:120px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background-color:#333333;
border-radius:20px;
}

.page-explanation{
width:100%;
height:80px;
line-height:80px;
letter-spacing:5px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
color:#d2b48c;
font-size:25pt;
text-align:center;
background-color:#333333;
}

.page{
position:relative;
height:1600px;
padding-top:40px;
padding-bottom:40px;
}

.page-container{
width:1380px;
height:100%;
margin:0 auto 0 auto;
position:relative;
}

/*------------------------------------------------------------------------------------------[会社概要]------------------------------------------------------------------------------------------*/

.company{
width:1200px;
height:100%;
margin:0 auto 0 auto;
background-color:rgba(250,240,230,0.9);
position:relative;
padding:30px;
box-sizing:border-box;
}

.company-table{
width:100%;
height:100%;
font-size:18pt;
border-collapse:collapse;
}

.company-table-heading{
height:80px;
padding-left:20px;
background-color:rgba(210,180,140,0.7);
text-align:left;
font-weight:normal;
}

.company-table-category{
width:150px;
padding-left:20px;
}

.company-table-years{
width:150px;
padding-left:20px;
}

.company-table-content{
padding-left:20px;
}

.company-table-access1{
padding-left:20px;
}

.company-table-access2{
padding-left:20px;
}

.company-table-map{
width:300px;
text-align:center;
}

.map-button{
display:inline-block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
color:#ffffff;
background-color:#444444;
border-radius:20px;
text-decoration:none;
}

.map-button:hover{
display:inline-block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
color:#ffffff;
background-color:#b0c4de;
border-radius:20px;
}

/*------------------------------------------------------------------------------------------[会社概要→アクセス]------------------------------------------------------------------------------------------*/

.access{
width:1200px;
height:100%;
margin:0 auto 0 auto;
background-color:rgba(250,240,230,0.9);
position:relative;
padding:30px;
box-sizing:border-box;
display:flex;
flex-direction:column;
}

.access-heading{
width:100%;
position:relative;
padding-left:20px;
background-color:rgba(210,180,140,0.7);
flex-basis:80px;
box-sizing:border-box;
line-height:80px;
font-size:18pt;
}

.access-map-area{
width:100%;
position:relative;
flex:1;
}

.access-map{
border:0;
}

/*------------------------------------------------------------------------------------------[事業紹介]------------------------------------------------------------------------------------------*/

.business{
width:1380px;
height:100%;
margin:0 auto 0 auto;
position:relative;
padding:30px;
box-sizing:border-box;
display:flex;
flex-direction:column;
}

.business-explanation{
width:100%;
position:relative;
flex-basis:150px;
color:#bbbbbb;
font-size:18pt;
text-align:center;
}

.business-area{
width:100%;
position:relative;
flex:1;
}

.business-table{
width:600px;
height:100%;
margin:0 auto;
font-size:16pt;
border-collapse:collapse;
color:#bbbbbb;
border:0px;
text-align:center;
}

.business-table-place{
padding-left:20px;
vertical-align:middle;
}

.business-table-job{
padding-left:20px;
vertical-align:middle;
}

/*------------------------------------------------------------------------------------------[お客様の声]------------------------------------------------------------------------------------------*/

.customer-feedback{
width:1380px;
height:100%;
margin:0 auto 0 auto;
position:relative;
padding:30px;
box-sizing:border-box;
display:flex;
flex-direction:column;
}

/*------------------------------------------------------------------------------------------[提携企業様ご紹介]------------------------------------------------------------------------------------------*/

.cooperate{
width:1380px;
height:100%;
margin:0 auto 0 auto;
position:relative;
padding:30px;
box-sizing:border-box;
display:flex;
flex-direction:column;
}

.cooperate-explanation-1{
width:100%;
position:relative;
flex-basis:100px;
color:#bbbbbb;
font-size:18pt;
text-align:center;
vertical-align:middle;
}

.cooperate-explanation-1 p{
display:inline-block;
}

.cooperate-explanation-2{
width:100%;
position:relative;
flex-basis:150px;
color:#bbbbbb;
font-size:18pt;
text-align:center;
vertical-align:middle;
}

.cooperate-explanation-2 p{
display:inline-block;
}


.cooperate-area{
width:100%;
position:relative;
flex:1;
}

.cooperate-table{
width:800px;
height:100%;
margin:0 auto;
font-size:16pt;
border-collapse:collapse;
color:#bbbbbb;
border:0px;
}

.cooperate-table-company{
padding-left:20px;
vertical-align:middle;
}

.cooperate-table-address{
padding-left:20px;
vertical-align:middle;
}

/*------------------------------------------------------------------------------------------[求人情報]------------------------------------------------------------------------------------------*/

.recruitment{
width:1380px;
height:100%;
margin:0 auto 0 auto;
position:relative;
padding:30px;
box-sizing:border-box;
}

.recruitment-table{
width:100%;
height:100%;
font-size:20pt;
border-collapse:collapse;
color:#bbbbbb;
line-height:60px;
}

.recruitment-table-comment{
padding-left:40px;
padding-top:30px;
padding-bottom:30px;
vertical-align:top;
}

.recruitment-table-comment span{
display:inline-block;
}

.recruitment-table-category{
width:150px;
padding-left:40px;
padding-top:30px;
padding-bottom:30px;
vertical-align:top;
}

.recruitment-table-content{
padding-left:10px;
padding-top:30px;
padding-bottom:30px;
vertical-align:top;
}

.recruitment-table-content span{
display:inline-block;
}

/*------------------------------------------------------------------------------------------[お問合せ]------------------------------------------------------------------------------------------*/

.contact{
width:1380px;
height:100%;
margin:0 auto 0 auto;
position:relative;
padding:30px;
box-sizing:border-box;
display:flex;
flex-direction:column;
}

.contact p{
width:100%;
color:#bbbbbb;
font-size:16pt;
text-align:center;
}

/*フォームここから*/
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
color:#aca49c;
font-size:0.875em;
}

input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder{
color:#bbb5af;
}

input::-moz-placeholder,textarea::-moz-placeholder{
color:#aca49c;
font-size:0.875em;
}

input:focus::-moz-placeholder,textarea:focus::-moz-placeholder{
color:#bbb5af;
}

input::placeholder,textarea::placeholder{
color:#aca49c;
font-size:0.875em;
}

input:focus::placeholder,textarea::focus:placeholder{
color:#bbb5af;
}

input::-ms-placeholder,textarea::-ms-placeholder{
color:#aca49c;
font-size:0.875em;
}

input:focus::-ms-placeholder,textarea:focus::-ms-placeholder{
color:#bbb5af;
}

/* on hover placeholder */

input:hover::-webkit-input-placeholder,textarea:hover::-webkit-input-placeholder{
color:#e2dedb;
font-size:0.875em;
}

input:hover:focus::-webkit-input-placeholder,textarea:hover:focus::-webkit-input-placeholder{
color:#cbc6c1;
}

input:hover::-moz-placeholder,textarea:hover::-moz-placeholder{
color:#e2dedb;
font-size:0.875em;
}

input:hover:focus::-moz-placeholder,textarea:hover:focus::-moz-placeholder{
color:#cbc6c1;
}

input:hover::placeholder,textarea:hover::placeholder{
color:#e2dedb;
font-size:0.875em;
}

input:hover:focus::placeholder,textarea:hover:focus::placeholder{
color:#cbc6c1;
}

input:hover::placeholder,textarea:hover::placeholder{
color:#e2dedb;
font-size:0.875em;
}

input:hover:focus::-ms-placeholder,textarea:hover::focus:-ms-placeholder{
color:#cbc6c1;
}

#form{
position:relative;
width:700px;
margin:0px auto 0px auto;
box-sizing:border-box;
}

.contact label{
display:table-cell;
width:700px;
height:50px;
vertical-align:middle;
font-family:'Lato',sans-serif;
font-size:0.875em;
padding:50px 15px 0px 15px;
background:transparent;
outline:none;
color:#aca49c;
}

.contact input{
font-family:'Lato',sans-serif;
font-size:0.875em;
width:700px;
height:50px;
padding:0px 15px 0px 15px;
background:transparent;
outline:none;
color:#726659;
border:solid 1px #b3aca7;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
box-sizing:border-box;
}

.contact input:hover{
background:#b3aca7;
color:#444444;
}

.contact textarea{
width:700px;
max-width:700px;
height:300px;
max-height:300px;
padding:15px;
background:transparent;
outline:none;
color:#726659;
font-family:'Lato',sans-serif;
font-size:0.875em;
border:solid 1px #b3aca7;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
box-sizing:border-box;
}

.contact textarea:hover{
background:#b3aca7;
color:#444444;
}

.contact textarea::-webkit-scrollbar{
width:10px;
}

.contact textarea::-webkit-scrollbar-track{
background:#ffffff;
border:none;
border-radius:10px;
box-shadow:inset 0 0 2px #777;
}

.contact textarea::-webkit-scrollbar-thumb{
background:#cccccc;
border-radius:10px;
box-shadow:none;
}

#submit{
width:700px;
padding:0;
margin:30px 0px 0px 0px;
font-family:'Lato',sans-serif;
font-size:0.875em;
color:#b3aca7;
outline:none;
cursor:pointer;
border:solid 1px #b3aca7;
box-sizing:border-box;
}

#submit:hover{
color:#444444;
}

