@charset "utf-8";

/*下層共通*/

#subpage #contents-primary{font-size: 18px;}

@media screen and (max-width:750px) {
	#subpage #contents-primary{font-size: 26px;}
}


article {
	width:100%;
	max-width: 1200px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	transition:0.3s;
	box-sizing:border-box;
}

@media screen and (max-width:1340px) {
  article {
    width: calc(100% - 140px);
  }
}

@media screen and (max-width:1080px) {
  article {
    width: calc(100% - 80px);
  }
}



/*------------------------------------------------------------------------------------------------------------------
　font-size
-------------------------------------------------------------------------------------------------------------------*/

#subpage h2{
	color: #4aa6db;
	line-height: 1.0;
	margin-bottom: 50px;
}

#subpage h2 span{display: block;}
#subpage h2 span.en{
	font-family: 'Inter', sans-serif;
	margin-bottom: 15px;
	color: rgba(16, 86, 147, 0.8);
	font-weight: 400;
	font-size: 16px;
}

@media screen and (max-width:750px) {
	#subpage h2 span.en{font-size: 26px;}
}



#subpage h2 span.ja{
	font-family: 'Kazesawa', sans-serif;
	transform: scale(1, 1.2); 
	letter-spacing: 0.075em;
	font-size: 40px;
}



#subpage h3{font-size: 25px;}

@media screen and (max-width:750px) {
	#subpage h3{font-size: 36px;}
}

#subpage h5{
	font-size:18px;
	font-weight:bold;
	padding-left: 25px;
	position: relative;
	letter-spacing: 0.025em;
	margin-bottom: 15px;
	color:#4aa6db;
}


@media screen and (max-width:750px) {
	#subpage h5{font-size: 26px;padding-left: 34px;}
}

#subpage h5:before{
	content: "";
	position: absolute;
	background-color: #4aa6db;
	width: 15px;
	height: 2px;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}





/*------------------------------------------------------------------------------------------------------------------
　subvisual
-------------------------------------------------------------------------------------------------------------------*/
header{
	top: 0;
	height: 96px;
}

@media screen and (max-width:1260px) {
  header{height: 86px;}
}

#subvisual{
	margin-top: 96px;
	position: relative;
	width: 100%;
	height: 350px;
	line-height: 1.2;
	overflow: hidden;
	padding: 0 190px 0 245px; 
	box-sizing: border-box;
}

@media screen and (max-width: 1600px) {
	#subvisual{	padding: 0 150px; }
}

@media screen and (max-width: 1440px) {
	#subvisual{	padding: 0 100px; }
}

@media screen and (max-width:1340px) {
  	#subvisual{padding: 0 70px; }
}

@media screen and (max-width:1260px) {
  #subvisual{margin-top: 86px;}
}


@media screen and (max-width:1080px) {
  #subvisual{padding: 0 40px; }
}


#subvisual::before {
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  background-color:#4aa6db;
/*  background-image: -moz-linear-gradient( -119deg, rgb(94,174,225) 0%, rgb(55,130,186) 60%, rgb(16,86,147) 100%);
  background-image: -webkit-linear-gradient( -119deg, rgb(94,174,225) 0%, rgb(55,130,186) 60%, rgb(16,86,147) 100%);
  background-image: -ms-linear-gradient( -119deg, rgb(94,174,225) 0%, rgb(55,130,186) 60%, rgb(16,86,147) 100%);
  background-image: linear-gradient( -119deg, rgb(94,174,225) 0%, rgb(55,130,186) 60%, rgb(16,86,147) 100%);*/	
  height: 350px;
  width: calc(100% - 190px);
}

@media screen and (max-width: 1600px) {
	#subvisual::before { width: calc(100% - 150px);	}
}

@media screen and (max-width: 1440px) {
	#subvisual::before { width: calc(100% - 100px);	}
}

@media screen and (max-width:1340px) {
  	#subvisual::before { width: calc(100% - 70px);}
}

@media screen and (max-width:1080px) {
  #subvisual::before { width: calc(100% - 40px);}
}




#subvisual .bg-subvisual{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;	
	height: 300px;
	position: relative;
	z-index: 2;
}


#subvisual .bg-subvisual:before{
	content: "";
	position: absolute;
	height: 300px;
	width: calc(100% + 195px);
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;	
	right: -190px;
	top:0;
}

@media screen and (max-width: 1600px) {
	#subvisual .bg-subvisual:before{
		width: calc(100% + 150px);
		right: -150px;	
	}
}
@media screen and (max-width: 1440px) {
	#subvisual .bg-subvisual:before{
		width: calc(100% + 100px);
		right: -100px;	
	}
}

@media screen and (max-width:1340px) {
  	#subvisual .bg-subvisual:before{ width: calc(100% + 70px);right: -70px;}
}

@media screen and (max-width:1080px) {
  #subvisual .bg-subvisual:before{ width: calc(100% + 40px);right: -40px;}
}

#subvisual .bg-subvisual::after{
	content:"";
	position:absolute;
	right: -190px;
	top:0;
	background-color:rgba(74,166,219,0.4);
	height: 300px;
	width: calc(100% + 195px);
}

@media screen and (max-width: 1600px) {
	#subvisual .bg-subvisual::after{
		width: calc(100% + 150px);
		right: -150px;	
	}
}
@media screen and (max-width: 1440px) {
	#subvisual .bg-subvisual::after{
		width: calc(100% + 100px);
		right: -100px;	
	}
}

@media screen and (max-width:1340px) {
  	#subvisual .bg-subvisual::after{ width: calc(100% + 70px);right: -70px;}
}



#subvisual .bg-subvisual h1{
	position: relative;
	text-align: center;
	color:#fff;
	font-weight: bold;
	font-family: 'Kazesawa', sans-serif;
	transform: scale(1, 1.2); 
	font-size: 45px;
	z-index: 5;
	
}

@media screen and (max-width:750px) {
	#subvisual .bg-subvisual h1{font-size: 50px;}
}



/*------------------------------------------------------------------------------------------------------------------
　パンくずリスト
-------------------------------------------------------------------------------------------------------------------*/

#subvisual .breadcrumb ul{
	list-style: none;
	margin:15px 0;
	padding: 0;
	position: relative;
}

@media screen and (max-width:750px) {
	#subvisual .breadcrumb ul{margin:10px 0;}
}


#subvisual .breadcrumb ul li{
	position: relative;
	display: inline-block;
	color: #fff;
	margin-right: 30px;
	font-size: 16px;
}

@media screen and (max-width:750px) {
	#subvisual .breadcrumb ul li{font-size: 24px;}
}


#subvisual .breadcrumb ul li::after{
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent #fff;
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
}

#subvisual .breadcrumb ul li:last-of-type::after{content: none;}


#subvisual .breadcrumb ul li a{color: #fff;text-decoration: none;}
#subvisual .breadcrumb ul li a:hover{text-decoration: underline;}

/*------------------------------------------------------------------------------------------------------------------
 submenu
-------------------------------------------------------------------------------------------------------------------*/

#subpage .submenu{
	padding: 100px 0 0;
	box-sizing: border-box;
}

#subpage .submenu ul{
	list-style: none;
	padding: 0 55px;
	margin: 0;
	width: calc(100% + 55px);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

@media screen and (max-width: 1260px) {
	#subpage .submenu ul{
		padding: 0 ;
		width: calc(100% + 40px);
	}
}

@media screen and (max-width: 1080px) {
	#subpage .submenu ul{
		padding: 0 ;
		width: calc(100% + 30px);
	}
}

@media screen and (max-width: 980px) {
	#subpage .submenu ul{
		flex-wrap: wrap;
	}
}

#subpage .submenu ul li{
	width: calc(25% - 55px);
	margin-right: 55px;
	box-sizing: border-box;
}

@media screen and (max-width: 1260px) {
	#subpage .submenu ul li{
		width: calc(25% - 40px);
		margin-right: 40px;
	}
}

@media screen and (max-width: 1080px) {
	#subpage .submenu ul li{
		width: calc(25% - 30px);
		margin-right: 30px;
	}
}

@media screen and (max-width: 980px) {
	#subpage .submenu ul li{
		width: calc(50% - 30px);
		margin-bottom: 30px;
	}
}

#subpage .submenu ul li a{
	display: block;
	width: 100%;
	text-decoration: none;
	color: #fff;
	background-color: #4aa6db;
	box-sizing: border-box;
	padding: 15px 40px 15px 30px;
	line-height: 1;
	position: relative;
}

#subpage .submenu ul li a:hover{
	color: #fff;
	background-color: #2A6DAF;	
	
}

#subpage .submenu ul li a::before {
	content: '';
	width: 10px;
	height: 10px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	position: absolute;
	right: 30px;
	top: 50%;
	margin-top: -5px;
	transform: rotate(135deg);
}

@media screen and (max-width: 1260px) {
	#subpage .submenu ul li a::before {
		right: 20px;
	}
}





/*------------------------------------------------------------------------------------------------------------------
 submenu-banner
-------------------------------------------------------------------------------------------------------------------*/

#subpage .submenu-banner{
	width: 100%;
	box-sizing: border-box;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}


#subpage .submenu-banner ul{
	list-style: none;
	margin: auto;
	padding: 0;
	width: calc(100% + 30px);
	box-sizing: border-box;
}

#subpage .submenu-banner ul:after {
  display: block;
  content: "";
  clear: both;
}

#subpage .submenu-banner ul li{
	width: calc(33.333% - 30px);
  margin-right: 30px;
  float: left;
	box-sizing: border-box;
	margin-bottom: 20px;
  display: block;
}

@media screen and (max-width: 850px) {
  #subpage .submenu-banner ul{
    width: 100%;
  }
	#subpage .submenu-banner ul li{
		width: 100%;
    float: none;
    margin-left: auto;
    margin-right: auto;
		
	}
}*

/*@media screen and (max-width: 900px) {
	#subpage .submenu-banner ul li{
		width: calc(50% - 20px);
		
	}
}*/


#subpage .submenu-banner ul li a{
	display: block;
	width: 100%;
	padding:40px 20px;
	position: relative;
	box-sizing: border-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-decoration: none;
	color: #fff;
	font-size: 22px;
}

@media screen and (max-width: 850px) {
  #subpage .submenu-banner ul li a{
    padding:60px 20px;
  }
}

@media screen and (max-width: 750px) {
	#subpage .submenu-banner ul li a{
		font-size: 30px;
	}
}

#subpage .submenu-banner ul li a:hover{filter: brightness(1.1);}

#subpage .submenu-banner ul li:nth-of-type(1) a{background-image: url("../image/company/banner/overview-btn.jpg");}
#subpage .submenu-banner ul li:nth-of-type(2) a{background-image: url("../image/company/banner/guidelines-btn.jpg?v3");}
#subpage .submenu-banner ul li:nth-of-type(3) a{background-image: url("../image/company/banner/joseikatudo-btn.jpg?v2");}
#subpage .submenu-banner ul li:nth-of-type(4) a{background-image: url("../image/company/banner/safety-btn.jpg?v2");}
#subpage .submenu-banner ul li:nth-of-type(5) a{background-image: url("../image/company/banner/joseikatudo-btn.jpg?v2");}



#subpage .submenu-banner ul li a:before{
	content: "";
	position: absolute;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	top: 5px;
	left: 5px;
	border: 1px solid #fff;
	box-sizing: border-box;
}

#subpage .submenu-banner ul li a:after{
	content: "";
	position: absolute;
	width: 62px;
	height: 7px;
	right: 15px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);	
	background-image: url("../image/company/company/banner/arrow.png");
	background-repeat: no-repeat;
	box-sizing: border-box;
}

#subpage .submenu-banner ul li a img {
  max-width: 100%;
}