@charset "utf-8";

/*リセット*/
html,body,h1,h2,h3,h4,p,ul,li{
margin:0;
padding:0;
line-height:1.0;
font-family:'Yu Gothic';
}
ul{
list-style:none;
}
a{
text-decoration:none;
color:inherit;
display: block;
}
img{
vertical-align:bottom;
border:none;
height:auto;
max-width:100%;
}

/*全体共通*/
.container{
max-width:960px;
margin:0 auto;
}

#recruit .recruit-container,#work .work-container,#company .company-container{
background:url(../img/recruitnew2.png) no-repeat;
background-size:40%;
max-width:960px;
margin:0 auto;
}

/*ヘッダー*/
header{
color:#fff;
background:#364679;
padding:20px 0;
}
header>.container{
display: flex;
justify-content:space-between;
}
header h1{
margin-left:5px;
padding:10px 0px 5px;
padding-left:11%;
background: url(../img/logo1.svg) no-repeat left center;
background-size:50px auto;
font-size:210%;
text-shadow:5px 5px 10px #505050;
}
header .top-box{
width:50%;
}
header .top-box p{
line-height:1.5;
font-size:110%;
font-weight:bold;
padding-left:45px;
}

/*ナビゲーション*/
.pcnav ul{
display: flex;
margin-top:30px;
}
.pcnav li{
font-size:15px;
margin-right:3px;
}
.pcnav a{
display: block;
padding:5px;
}
.pcnav a:hover{
color: #39c;
background: #fff;
padding:5px;
}

/*スマホ用*/
.spnav{
position: absolute;
width:100%;
background:rgba(195,195,195,0.9);
top:21vh;
display:none;
}
.spnav li{
height: 80px;
line-height: 80px;
text-align: center;
font-size: 22px;
color: #fff;
}
.spnav a{
display: block;
border-top: 1px solid #fff;
}
.spnav li:first-child a{
border-top: none;
}
.btn{
text-align: center;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 5px;
font-size: 45px;
color: #fff;
border:2px solid #fff;
position: absolute;
top:10px;
right: 10px;
overflow: hidden;
display: none;
}

/*フッター*/
footer{
color:#fff;
background:#364679;
padding:10px 0;
margin-top:30px;
}
footer p{
background:rgba(240,240,240,0.3);
line-height:1.5;
font-weight:bold;
padding:0 10px;
}
footer p:first-of-type{
font-size:25px;
}

/*topだけ*/
/*keyvis*/
#home .keyvis{
height:80vh;
background:url(../img/header-1920-750-3.png) no-repeat left center/cover;
}
#home .keyvis p{
color: #fff;
text-shadow:5px 4px 4px #222;
display: block;
margin:0 auto;
font-weight:bold;
font-family: 'Noto Serif JP', serif;
}
#home .key1{
padding-top:142px;
padding-left:40px;
font-size:450%
}
#home .key2{
font-size:390%;
padding-top:13px;
padding-left:90px;
}

/*homeのmain,mailのmain用*/
#mail .mailcontainer{
background:url(../img/recruitnew2.png) no-repeat left top/cover;
background-size:35%;
max-width:960px;
margin:0 auto;
}
#mail .mail-main{
display: flex;
justify-content:space-between;
}
#home .home-main{
background:url(../img/recruitnew2.png) no-repeat;
background-size:40%;
display: flex;
justify-content:space-between;
padding:20px;
margin-top:20px;
}
#mail .box{
background:rgba(195,195,195,0.8);
width:31%;/*960/3*/
padding:20px;
margin-left:15px;
}
#mail .box:last-of-type,#home .box:last-of-type{
margin-right:15px;
}

/*後から追加したトップのh4周りのやつ*/
#home .addbox{
width:100%;
margin-bottom:15px;
border-top:2px solid #959595;
text-align:center;
}
#home .addbox p{
font-size:17px;
line-height:23px;
}
#home .addbox p1{
font-size:22px;
line-height:45px;
padding:10px;
}
#home .addbox .example{
width:15%;
height:15%;
margin:0px;
box-sizing: none;
border:none;
}
#home .addbox .example2{
width:15%;
height:15%;
margin:0px;
box-sizing: none;
border:none;
}


#home .box{
background:rgba(195,195,195,0.8);
width:31%;/*960/3*/
margin-left:15px;
}
#home .box a{
display: block;
overflow: hidden;
padding:20px 10px;
}
#home .box a:hover{
opacity:0.5;
}
#home .box .more{
background:#8e8e8e;
float:right;
padding:5px;
color: #fff;
}
#home .box .more i{
margin-right:5px;
}
#home .box p:first-of-type{
line-height:1.5;
height:6em;
margin-bottom:3px;
}
#mail .box p{
line-height:1.5;
}

#home .box p{
font-size:18px;
padding-left:10px;
}
#home img{
margin-bottom:15px;
box-sizing: border-box;
border:2px solid #959595;
}


/*mailのアイコン用のやつ*/
.box .fa-sticky-note,.box .fa-phone, .box .fa-envelope{
background:#fff;
text-align:center;
color:#364679;
height:150px;
width:150px;
font-size:80px;
border:1px solid #fff;
border-radius:50%
}
.box .fa-sticky-note,.box .fa-phone, .box .fa-envelope{
display: block;
line-height:150px;
margin:0 auto 20px;
}

/*mail用の上のp*/
#mail .mail-text{
text-align:center;
font-size:19px;
margin-bottom:20px;
line-height:1.2;
}
/*mail用中のp*/
#mail .mail-adres,#mail .mail-tel, #mail .mail-mail{
border:1px solid #364679;
text-align:center;
width:80%;/*14em*/
display: block;
margin:0 auto;
padding:3px;
margin-bottom:10px;
font-size:18px;
}



/*work用,recruit用共通*/
/*メイン*/
#work .work-main,#recruit .recruit-main{
padding:0px 10px;
margin-bottom:20px;
}
#work .box,#recruit .box{
display:flex;
margin-top:30px;
}
#work .text,#recruit .text{
width:50%;
background:rgba(195,195,195,0.5);
padding:30px 20px 0 20px;
}
#work .text p,#recruit .text p{
line-height:1.5;
font-size:18px;
}
#work .box img,#recruit .box img{
width:50%;
}
#work .box:nth-child(even),#recruit .box:nth-child(even){
flex-direction: row-reverse;
}


/*全部のh2用*/
h2{/*h2広げるとtopの領域が変*/
background:#fff;
text-align:center;
border:2px solid #a0a0a0;
padding:10px;
margin:20px auto 10px;
width:6em;
}
/*全部のh3用*/
h3{
width:35%;/*7em*/
border-bottom:2px solid #a8a7a7;
padding-bottom:5px;
text-align:center;
margin-bottom:20px;
}
#company h3{
margin:30px auto 20px;
width:10em;
}
/*トップの追加コンテンツ用のh4用*/
h4{
background:#fff;
text-align:center;
border:2px solid #a0a0a0;
padding:10px;
margin:20px auto 10px;
width:15em;
font-size:23px;
}

/*recruit表用,company表用*/
#recruit .recruit-tab,#company .company-tab{
padding:0px 10px 20px 10px;
}

#recruit table,#company table{
width:100%;
background:rgba(195,195,195,0.8);
border-collapse:collapse;
}
#recruit th,#recruit td,#company th,#company td{
border-bottom:1px solid #fff;
padding:10px;
line-height:1.5;
}

/*company地図用*/
#company .acces{
padding:0px 10px 10px 10px;
margin-bottom:20px;
}
#company .wrap{
background: #fff;
overflow: hidden;
margin-bottom:10px;
background:rgba(195, 195, 195,0.8);
}
#company .wrap img{
width:60%;
height:auto;
float:right;
}
#company .wrap .text{
float: left;
width:40%;
padding:0;
margin:0;
}
#company .wrap .text p{
font-size:20px;
text-align: center;
padding-top:80px;
}

#company .map{
position: relative;
height:0;
overflow:hidden;
padding-bottom:300px;
}
#company .googlemap{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}

.sidebar{
padding:0 10px;
}
.sidebar a:hover{
opacity:0.5;
}


/*スマホ用設定*/
@media screen and (max-width:900px){
#home .keyvis{
background:url(../img/header-900-400-3.png) no-repeat left center/cover;
}
#home .key1{
padding-top:105px;
font-size:400%;
}
#home .key2{
padding-top:8px;
font-size:300%;
}

header h1{
font-size:180%;
background-size:45px;
padding-left:12%;
}
header .top-box p{
font-size:100%;
}
/*keyvis*/
#home .keyvis{
height:70vh;
}
.pcnav li{
font-size:13px;
}
}

@media screen and (max-width:767px){
#home .keyvis{
height:60vh;
background:url(../img/header-780-400-3.png) no-repeat left center/cover;
}
#home .key1{
padding-top:90px;
font-size:350%;
padding-left:10px;
}
#home .key2{
font-size:230%;
padding-left:40px;
}

.pcnav{
display: none;
}
.btn{
display: block;
}

/*header用*/
header{
padding:10px 0;
}
header> .container{
display: contents;
}
header h1{
padding-left:8%;
font-size:190%;
background-size:40px;
}
header .top-box{
width:100%;
}

/*footer用*/
footer{
margin-top:20px;
padding:5px;
}
footer p:first-of-type{
font-size:20px;
}

/*home用mail用*/
#home .home-main,#mail .mail-main{
display:block;
}
#home .box,#mail .box{
width:97%;
box-sizing: border-box;
}
#mail .box,#home .box{
margin-bottom:20px;
}
#mail .mail-text{
background:rgba(240,240,240,0.6);
padding:5px;
}
#home .box p:first-of-type{
line-height:1.5;
height:5em;
margin-bottom:0px;
}
#home .box .more{
padding:10px 30px;
}
#home img{
width:100%;
margin:20px 0;
}
/*work用*/
#work .box,#recruit .box{
display:block;
}
#work .text,#recruit .text{
width:100%;
padding:20px 0px 30px;
}
#work .box img,#recruit .box img{
width:100%;
}
#work .text p,#recruit .text p{
padding:0px 30px;
}

/*h3*/
#work h3,#recruit h3{
width:25%;
padding-left:10px;
}

#recruit th,#company th{
width:20%;
}

#company .wrap .text p{
font-size:17px;
text-align: center;
}
}

@media screen and (max-width:500px){
#home .keyvis{
height:50vh;
background:url(../img/header-500-350-3.png)no-repeat left center/cover;
}
#home .key1{
padding-top:85px;
font-size:250%;
padding-left:5px;
}
#home .key2{
font-size:150%;
padding-left:30px;
}

header{
padding:5px 0;
}
header h1{
padding-left:10%;
font-size:140%;
background-size:30px;
}
footer{
margin-top:10px;
}
footer p{
line-height:1.3;
font-size:13px;
}
footer p:first-of-type{
font-size:15px;
}


.btn{
width:40px;
height:40px;
line-height:40px;
font-size:30px;
top:5px;
right:5px;
}
header .top-box p{
font-size:80%;
padding-left:10px;
}
/*mail用*/
#mail .mail-text{
font-size:15px;
margin-bottom:15px;
}

#home .home-main{
padding:15px 10px 10px 0px;
}
#home .box a{
padding:5px 10px 20px 10px;
}
#home img{
width:100%;
margin:20px 0 30px;
}
#home h2{
margin:10px auto;
}

/*三角形*/
#mail .mailcontainer{
background-size:50%;
}
#recruit .recruit-container,#work .work-container,#company .company-container,#home .home-main{
background-size:50%;
}

/*recruit work用*/
#recruit .text,#work .text{
padding:15px 0px;
}
#recruit .text p,#work .text p{
padding:0px 15px;
font-size:15px;
}

/*h2 h3*/
h3{
margin-bottom:15px;
}
#work h3,#recruit h3{
width:40%;
padding-left:5px;
}

/*表*/
#recruit th,#company th{
width:29%;
padding:10px 0px;
}
#recruit td,#company td{
font-size:85%;
}

/*地図*/

#company .wrap .text p{

font-size:10px;
text-align: center;
}

}