@charset "utf-8";
/* CSS Document */
h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
	box-sizing: border-box;
}
body {


    font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,sans-serif;
    /*font-family:"HiraginoKaku-W3-90msp-RKSJ-H","繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3","・ｭ・ｳ 繧ｴ繧ｷ繝・け", "MS Gothic", "Osaka・咲ｭ牙ｹ・, Osaka-mono, monospace;*/
    font-size: 20px;
    *font-size: small;
    *font: x-small;
    text-align: center;
    text-size-adjust: 100%;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    max-height: 999999px;

}

.SPpage {
	display: none;
}

#wrap_pc {
    margin: 0 auto;

}

.header_bg{	   
background-color:#FFF;
box-shadow: 0px 3px 3px #d6d6d6; 
	   	background-size: cover;
		width:100%;
	       position: sticky;/*固定する*/
       position: -webkit-sticky;/*Safari用ベンダープレフィックス*/
       top: 0;/*ブラウザの上からの距離はゼロ*/
	   z-index:50;
}
.header{
	max-width:1100px;
	margin:0 auto;


}
img {
    vertical-align: bottom;
	max-width:1600px;
}

a {
    transition: 0.5s;
}


	
.pcNav {

  }
.pcNav_inr {
    max-width: 1100px;

position: relative;

  }
  


.logo a{
	text-decoration: none;
}
	
.logo:hover{
opacity:.6
}

.pcNav ul {
    display: flex;
    justify-content: space-between;

  }
.pcNav ul li {
    height: 48px;
	display: inline;
	margin-top:50px;

  }
 .gNav01{
	 margin-left:50px;
 }
.gNav a {
    font-size: 20px;
    letter-spacing: 0.05em;
    display: block;
    color: #0087af;
    transition: 0.3s;
    border-bottom: solid 1px #fff;
	text-decoration:none;
		position: absolute;
	bottom: 10px;
  }
.gNav a:hover {
    color: #0087af;
    border-bottom: solid 1px #0087af;
  }


.gNav_logo a {
    font-size: 20px;
    letter-spacing: 0.05em;
    display: block;
    color: #0087af;
    transition: 0.3s;

	text-decoration:none;
		position: absolute;
	bottom: 10px;
  }



.contact{
			margin-bottom: 20px;
}
 .contact a{
 border: 2px solid #0087af;
 border-radius: 10px;
     font-size: 20px;
    letter-spacing: 0.05em;
	    display: block;
    color: #0087af;
		text-decoration:none;
		padding:8px;

 }
 .contact a:hover {
    color: #fff;

	background-color:#0087af;
  }
  
  
 .top{
	 width:100%;
	 background-image:url(../images/common/top_bn.jpg);
	background-position:center center;
	background-size: cover;
	 height:200px;

	 position:relative;
 }
  
 .top_txt{
	 position:absolute;
	 font-size:36px;
	 font-weight:bold;
	 letter-spacing:0.3em;
	 color:#fff;
	 top:45%;
	 left:45%;

	 
	 
 }
.bg-slider {
	width: 100%;
	height: 650px;
	margin-top:10px;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: flex-end; 
	justify-content:center; 
}
.bg-slider__title{
	color: #FFF;
	font-size: 48px;
	line-height: 1.5;
	font-weight: bold;
	text-align:left;
	text-shadow: 2px 2px 3px #777;

}

.mgr-30{
	margin-right:30px;
}

.text{
	font-size:24px;

}

.lead_txt{
font-family:"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,sans-serif; 
	line-height: 3;
	margin-top:50px;
		font-weight: bold;
		letter-spacing:0.3em;
}


.works{
	
	max-width:1100px;
	height:580px;
	margin:0 auto;	
		position:relative;
	
}
.works_img{
	text-align:left;

	margin-top:30px;

}
.menu{
	position:absolute;
	max-width:520px;
	right:0;
	bottom:20%;
}


.link3 a{
	  border: 2px solid #0087af;
 border-radius: 10px;
     font-size: 20px;
    letter-spacing: 0.05em;
	    display: block;
    color: #0087af;
		text-decoration:none;
		padding:8px;
		position:absolute;
		bottom:0;
		right:30px;

		width:200px;


 }
 .link3 a:hover {
    color: #fff;
 border: 2px solid #0087af;
	background-color:#0087af;
  }
  

.mt50{
	margin-top:50px;
}
.mt30{
	margin-top:30px;
}

.mb10{
	margin-bottom:10px;
}
.mb30{
	margin-bottom:30px;
}

.pt50{
	padding-top:50px;
}

.recruit{
		max-width:1100px;
	height:530px;
	margin:0 auto;	
		position:relative;
		margin-top:30px;
	
	
}

.recruit_bg{
	position:absolute;
	background-color:#f4f3f1;
	width:65%;
	height:350px;
	left:30px;
	
	
}

.rec_img {
	width:65%;
	box-sizing:border-box;
	
}
	
.rec_img01{
	position:absolute;
	top:60px;
	left:40%;
	box-shadow: -15px -15px 0px 0 rgb(0, 135, 175);

	
}

.rec_img02{
	position:absolute;
	top:60px;
	right:20px;

	
}

.rec_img03{
	position:absolute;
	top:275px;
	right:20px;

	
}


.rec_title{
	position:absolute;
	top:100px;
	left:15%;
	writing-mode: vertical-rl;
	color:#000;
		font-size: 48px;
	line-height: 1.5;
text-indent: -2em;
	
}

.recruit2{
			max-width:1100px;
			height:100px;

	margin:0 auto;	
		position:relative;

	
	
}
.rec_txt{
	font-size:17px;
	text-align:left;
		line-height: 2;
			padding-left:50px;
			position:absolute;
}




 .link2 a{
	  border: 2px solid #0087af;
 border-radius: 10px;
     font-size: 20px;
    letter-spacing: 0.05em;
	    display: block;
    color: #0087af;
		text-decoration:none;
		padding:8px;
		position:absolute;
		bottom:30%;
		right:30px;

		width:200px;


 }
 .link2 a:hover {
    color: #fff;
 border: 2px solid #0087af;
	background-color:#0087af;
  }
  

.top_bnr{
	max-width:100%;
	width:1100px;
	margin:0 auto;
	padding-top:80px;
	position:relative;
}

.top_bnr li{
	list-style:none;
		display: inline-block;
		width:45%;

}

.business_txt{
				height:293px;

				background-image:url(../images/top/business_bnr.jpg);
				background-position:center center;
	background-repeat:no-repeat;
	box-sizing: border-box;


}



.company_txt{
				height:293px;

				background-position:center center;
				background-image:url(../images/top/company_bnr.jpg);
	background-repeat:no-repeat;
	box-sizing: border-box;

}


 .link a{
	 width:20%;
 border: 2px solid #FFF;
 border-radius: 10px;
     font-size: 20px;
    letter-spacing: 0.05em;
	    display: block;
    color: #FFF;
		text-decoration:none;
		padding:8px;
		position:absolute;
		bottom:20%;
		margin-left:12.5%;


 }
 .link a:hover {
    color: #fff;
 border: 2px solid #0087af;
	background-color:#0087af;
  }
  



.pc_foot{
				height:60px;
	background-color:#0087af;
	width:100%;
	margin:0 auto;
}

.pc_foot_inr{
		max-width:1100px;
		margin:0 auto;
		position:relative;
}
.ft_logo{
	position:absolute;
	left:10px;
	top:10px;
}

.copy{
font-size:12px;
	color:#FFF;
	position:absolute;
	right:10px;
	top:30px;
}


.con_bnr_bg{
	width:100%;
	background-color:#FFF;
	height:140px;

}

.con_bnr{
		position:relative;
		max-width:1100px;
		margin:0 auto;
}
.con_txt{
	text-align:left;
	position:absolute;
	left:100px;
	top:22px;

}
.mark{
	position:absolute;
	left:45%;
	top:-18px;
}

.con_txt p{
	font-family:"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,sans-serif; 
			font-weight: bold;
			letter-spacing:0.1em;
}
.con_btn a{
	  border: 2px solid #0087af;
 border-radius: 10px;
     font-size: 20px;
    letter-spacing: 0.05em;
	    display: block;
    color: #0087af;
		text-decoration:none;
		padding:8px;
		position:absolute;
		top:45px;
		right:30px;

		width:200px;


 }
 .con_btn a:hover {
    color: #fff;
 border: 2px solid #0087af;
	background-color:#0087af;
  }
  
	
.ft_nav_bg{
			max-width:1100px;
			position:relative;
			height:120px;
			margin:0 auto;
			padding-top:15px;


}


.gray_bg{
	width:100%;
	background-color:#f4f3f1;
}
.big{
	font-size:large;}
		.big_26{
	font-size:26px;
	}
		.big_34{
	font-size:34px;
	}
		.big_22{
	font-size:22px;
	}
	.big_x{
	font-size:30px;
	}
	.bold{
		font-weight:bold;
	}
.info{

	position:absolute;
	left:10px;
	text-align:left;
		font-size: 15px;
}
.ft_nav{
	position:absolute;
	right:10px;
	bottom:10px;
}
.ft_nav li {
		display: inline;
	margin-left:10px;
	margin-right:10px;
	font-size: 15px;
	list-style:none;

}
.ft_nav a{
	color:#000;
	text-decoration:none;

}

.ft_nav a:hover {
text-decoration: underline;

}




.fadein {
	opacity : 0.01;
	transform : translate(0, 50px);
	transition : all 500ms;
	}


.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
	
	
	
	
	.topics{
width:900px;
max-width:100%;
	margin:0 auto 20px;
	height:auto;

 padding:20px 0;
}


.topics dl {
padding: 8px 0;

border-bottom: 1px solid #ccc;
	font-size:1rem;
}

.topics dt {
padding-bottom: 5px;
	font-size:1rem;
	text-align:left !important;
}

@media screen and (min-width: 768px) {
.topics dt {
clear: left;
float: left;
width: 10%;
}
.topics dd {
margin-left: 11%;
}
}