@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');



/* RESET
----------------------------------------------------------------------------------------------------*/
a,article,body,dd,div,dl,dt,em,form,footer,header,h1,h2,h3,h4,h5,h6,html,i,iframe,img,label,legend,li,nav,ol,p,section,main,span,table,tbody,tfoot,thead,time,tr,th,td,ul,video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;white-space:normal;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left}
/* ※採用情報ページ【お問い合わせフォーム内(備考欄)箇所が消える為にこのtextarea箇所をコメントアウト
textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left}*/
article,footer,header,nav,section,main{display:block}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}

/* ----------------------------------------------

 * 設定をしなおす

---------------------------------------------- */
body {
  margin: 0 auto;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6em;

  font-family: 'Roboto',"游ゴシック Medium", "Yu Gothic Medium","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  
  
  font-weight: 500;
  color: #4b4c4c;
  -webkit-text-size-adjust: 100%;
}

@media only screen and ( max-width : 768px ) {
  body {font-size: 14px;}
}

table {
  margin : 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

img {
  vertical-align: middle;
  border: none;
}


/* ----------------------------------------------

 * アンカータグの設定

---------------------------------------------- */
a {
  outline:none;
  color: #333;
}

a:hover {
  text-decoration: none;
}



/* ----------------------------------------------

 * 要素を左右中央寄せ

---------------------------------------------- */

.taC {
  text-align: center !important;
}

.taR {
  text-align: right !important;
}

.taL {
  text-align: left !important;
}



*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;/*　*behavior:url(/scripts/boxsizing.htc)　*/}
/*　↑　boxsizing.htc　は、IE7以下で必要に応じてbox-sizingを使用する　*/

.container{margin:0 auto}
.clr:after,.col:after,.container:after,.group:after,.row:after{content:"";display:table;clear:both}
.row{padding-bottom:0}
.col{display:block;float:left;width:100%}
@media (min-width:769px),print{.gutters .col{margin-left:2%}.gutters .col:first-child{margin-left:0}.gutters .colR:first-child{margin-right:0}.sp{display:none}}
@media(max-width:768px){.sp_none{display:none !important;}}

img {
    max-width: 100%;
    height: auto;
    width /***/:auto;　/*IE8のみ適用*/
}

@media only screen and ( max-width : 768px ) {
  .sbox {
    margin-bottom: 20px;
  }
  .container {
    padding: 0 30px;
  }
  
  /*section {
    padding: 100px 0;
  }*/
  
}

@media only screen and ( max-width : 480px ) {
  .container {
    padding: 0 20px;
  }
}
@media only screen and ( max-width : 374px ) {
  .container {
    padding: 0 10px;
  }
}

@media print, screen and ( min-width : 769px ) {
  .sbox {
    margin-bottom: 25px;
  }
  .container {
    width: 1080px;
  }
  
/*  section {
    padding: 200px 0;
  }*/
  
}

/* ---------------------------------------------------------------------------------------------

　   HEADER

--------------------------------------------------------------------------------------------- */

#header {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  z-index: 99;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;

}


#heading {
	background-color:#0054a7;
	height:3px;
}


/*　ココからはPC時【スマホ時のトグルメニュー以外】のメニュ設定　*/

#gNav a:hover {
  color: #999;
}
nav li a {
	/*  font-size: 13px;*/
　letter-spacing: 0.2em;
　
font-size: 14px;
font-weight:bold;
}

/*  PC時サブメニューグラデーション箇所　*/
nav .sub-menu,.mean-container .mean-nav ul ul {
 /*  background: #fff;*/


/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ccf4fd+100&0.75+0,0.75+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0.75) 0%, rgba(204,244,253,0.75) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.75) 0%,rgba(204,244,253,0.75) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0.75) 0%,rgba(204,244,253,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfffffff', endColorstr='#bfccf4fd',GradientType=0 ); /* IE6-9 */

  
}



@media only screen and ( max-width : 768px ) {
  #header {
    padding: 0;
    height: 60px;
}
  

  
  #gNav .nav {
    overflow-y: auto;
    height: 100vh;
  }
  .mean-nav .container {
    padding: 0;
  }
  nav li .fa {
    display: none;
  }
}

/*　iPhone6・7・8plusとそれと同等の端末用【425px】だが、【※.pcImgと.spImgに合わせて】581px調整　*/
@media only screen and ( max-width : 581px ) {
	
	.h_logo img {
	/* 2019_04_04大事※下記ロゴの大きさのサイズでは無く max-width:100% の指定にしないとロゴがボケる */  
	max-width:100%;
	width:60%!important;
	
    position: absolute;
    top: 18px;
    left: 5px;
    z-index: 9999!important;
	display:block;
  }
	
	.h_tel img {
	/* 2019_04_04大事※下記ロゴの大きさのサイズでは無く max-width:100% の指定にしないとロゴがボケる */  
	max-width:100%!important;
	
	
	
    padding: 0;
	
	position: absolute;
    top: 5px;
	left:65%;
     z-index: 100;
  }
	
}

/*　GoogleMobileデベロッパー【小 320px】　*/
@media only screen and ( max-width : 320px ) {
	
	.h_tel img {
	/* 2019_04_04大事※下記ロゴの大きさのサイズでは無く max-width:100% の指定にしないとロゴがボケる */  
	max-width:100%;
		
    padding: 0;
	
	position: absolute;
    top: 5px;
	left:63%;
     z-index: 100;
  }
	
}

/*　画面サイズが582px【※.pcImgと.spImgに合わせて】から768pxまでは、logo と tel箇所ここを読み込む　*/
@media screen and (min-width:582px) and ( max-width:768px) {
  .h_logo img {
	width:40%;
	
    padding: 0;
	
	position: absolute;
    top: 10px;
    left: 0px;
	z-index:999!important;/*←これが無いとクリックしても反応無いので注意*/


  }
  
  .h_tel img {
	/* 2019_04_04大事※下記ロゴの大きさのサイズでは無く max-width:100% の指定にしないとロゴがボケる */  
    max-width:30%;
	max-width:100%!important;
	
    padding: 0;
	
	position: absolute;
    top: 15%;
    left: 45%;
	z-index:999!important;/*←これが無いと電話番号箇所をクリックしてもされないので注意*/
	
	
  }

}

/*　画面サイズが769pxから1280pxまでは、logo と tel箇所ここを読み込む　*/
@media screen and (min-width:769px) and ( max-width:1280px) {
  .h_logo img {
	/* 2019_04_04大事※下記ロゴの大きさのサイズでは無く max-width:100% の指定にしないとロゴがボケる */  
	max-width:23%!important;
	
    padding: 0 0 0 5px;
	
	position: absolute;
    top: 10px;
    left: 0px;

  }
  
  .h_tel img {
	/* 2019_04_04大事※下記ロゴの大きさのサイズでは無く max-width:100% の指定にしないとロゴがボケる */  
    max-width:18%!important;

	
    padding: 0px;
	
	position: absolute;
    top: 25%;
    left: 24%;
  }

}

@media print, screen and ( min-width : 1281px ) {
	
	 .h_logo img {
	/* 2019_04_04大事※下記ロゴの大きさのサイズでは無く max-width:100% の指定にしないとロゴがボケる */  
	max-width:100%!important;
	
    padding: 0px;
	
	position: absolute;
    top: 6px;
    left: 20px;

  }
  
  .h_tel img {
	/* 2019_04_04大事※下記ロゴの大きさのサイズでは無く max-width:100% の指定にしないとロゴがボケる */  
	max-width:100%!important;
	
    padding: 0 0 0 0px;
	
	position: absolute;
    top: 10px;

    left: 360px;
  }


}	


@media print, screen and ( min-width : 769px ) {
  #header {
    height: 80px;
    height: 90px;
    height: 45px;
  }
  

  
  
  #h_top {
    display: flex;
    justify-content: space-between;
    align-items: center;

	/*　2018_11_22挿入 */
	width:100%!important;
		
  }
  
  /* 2019_04_04挿入→　※top: -10px;は、上の位置に挿入。	right:3%;は、これによってデフォルトの横幅1052pxでメニューの一部が見えなくなる不具合を解消 */
  #gNav {
	position: absolute;
    top: -15px;
	right:3%;
	right:1.5%;

    
    
  }
  
  #gNav ul {
    position: relative;
    display: flex;
  }
  #gNav li {
    position: relative;
    margin-right: 3em;
  }
  #gNav li:last-child {
    margin-right: 0;
  }
  #gNav li i {
    font-size: 16px;
    margin-left: 5px;
  }
  #gNav li a {
    position: relative;
    display: block;
    text-align: center;
    line-height: 80px;
	
    color: #004ea2;/* 2019_09_05 大画面(PC時)グローバルメニューlink色を紺色に変更 */

  }
  
  #gNav li > a:hover {
   	
    color: #898989 !important;/* 2019_09_05 大画面(PC時)グローバルメニュー【マウスオーバー時】link色を灰色に変更 */
    color: #d8eefc !important;/* 2019_09_05 大画面(PC時)グローバルメニュー【マウスオーバー時】link色を灰色に変更 */

  }
  
  
  #gNav .sub-menu {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    display: block;
    position: absolute;
    top: 50px;
	
    left: 50%;
	
	
	
    margin-left: -100px;
    width: 200px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
  }
  #gNav .sub-menu a {
    padding: 10px;
    display: block;
    border-bottom: none;
    padding: 20px;
    line-height: 1.2em;
  }
  #gNav .sub-menu a:hover:after {
    content: none;
  }
  #gNav .sub-menu li {
    display: block;
    font-size: 16px;
    padding: 0;
    margin: 0;
  }
  #gNav .sub-menu li:last-child {
    border-bottom: none;
  }
  #gNav ul > li:hover {
    -webkit-transition: all .5s;
    transition: all .5s;


	
  }
  #gNav ul > li:hover a,#gNav .current-menu-item a,#gNav .current-menu-parent a {
	 /* 薄いブルー系 */
    color: #bfd0ff; 
  }
  #gNav li:hover ul.sub-menu {
    top: 80px;
	
/* 2019_04_04PC時ナビメニューマウスオーバー時のサブメニュー表示位置　*/
    top: 60px;

    visibility: visible;
    opacity: 1;
    z-index: 9999;
  }
  #gNav li ul li:after {
    content: none;
  }
 #gNav li:hover ul.sub-menu a {
    color: #111;
    color: #004ea2;/* 2019_09_05 大画面(PC時)グローバルメニュー内サブメニューlink色を紺色に変更 */

  }
  
  /* ここは大画面PCグローバルメニューのサブメニュー箇所 */
  #gNav .sub-menu li a:hover {
    background: #fff;
	background: #004ea2!important;
	
    color: #fff!important;/*文字色2019_07_01白に変更*/
	
	opacity:0.7;/*透明度*/


  }
  #gNav .contact_btn a:hover {
    color: #fff;
  }
}

/*　画面サイズが768pxから1023pxまではここを読み込む【グローバルメニュー横幅に納める為】　*/
@media screen and (min-width:769px) and ( max-width:1023px) {
	#gNav li {
   margin-right: 2em;
   margin-right: 1.5em;

   font-size:10px; 
   font-size:11px;   
  
  }
  
  #gNav li span {
	  display:none;
  }

}

/*　画面サイズが1024pxから1360pxまではここを読み込む【グローバルメニュー横幅に納める為（※MacノートSafari含む1288px含む)】　*/
@media screen and (min-width:1024px) and ( max-width:1360px) {
	#gNav li {
   margin-right: 1.9em;

   font-size:15px;   
  
  }
  
  #gNav li span {
	  display:none;
  }

}




/* ----------------------------------------------

 * リンクのディレイ設定

---------------------------------------------- */

a,a:hover,a:hover img {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}

a:hover,a:hover img {
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}


a:visited,a:visited img {
  filter: alpha(opacity=100);
  -moz-opacity:1.00;
  opacity:1.00;
}



/* リクルートバナー画像箇所
※通常だとマウスオーバー時の挙動が確認できない為に挿入修正*/
.recruitWrap a:hover img {
  -webkit-transition: 0.5s!important; 
  -moz-transition: 0.5s!important;
  -o-transition: 0.5s!important;
  transition: 0.5s!important;
  text-decoration: none!important;
}

.recruitWrap a:hover img {
  filter: alpha(opacity=80)!important;
  -moz-opacity:0.80!important;
  opacity:0.80!important;
}


/* ※2019_10_03　下記内容で、今の所移動ブレ無し【各ページの３事業バナー箇所】*/
.services3,
.services3 a:link img,
.services3 a:hover img,
.services3 img {
  margin:0!important;
  width:100%!important;
  display:block!important;
  padding: 0;

  float: left;

}

@media only screen and (min-width:651px) {
	.services3{
	width:  33.33333333%!important;
    padding: 0px 10px;
	}
	
}





/* 各３サービスバナー画像箇所
※この箇所大事・・・Mac　Safari環境のマウスアウトに消える防止【transitionを0で改善】*/
.services3 a:link img,
.services3 a:hover img,
.services3 img {
  -webkit-transition: 0s!important;
  -moz-transition: 0s!important;
  -o-transition: 0s!important;
  transition: 0s!important;
  
  display:block!important;
}

.services3 a:hover img {
  filter: alpha(opacity=80)!important;
  -moz-opacity:0.80!important;
  opacity:0.80!important;

  display:block!important;

}

.services3 a:visited img,
.services3 a:link img {
  filter: alpha(opacity=100)!important;
  -moz-opacity:1.00!important;
  opacity:1.00!important;
  
  display:block!important;
}