@charset "UTF-8";

/*--------------------------------------------------------------------
index.html	(トップページ)
top.css
--------------------------------------------------------------------*/


/*------------HeaderBg------------------------------------------------------------*/
div#HeaderBg {
	min-height: 500px;
	background: url(../../img/parts/header_bg_sp.jpg) no-repeat center center;
	background-size: 100%;
}
div#HeaderBg:before { background-color: rgba(43, 43, 43, 0); }


/*------------Header------------------------------------------------------------*/
div#Header {
	min-height: inherit;
	padding-bottom: 10px;
}

/*------------Title------------------------------------*/
div#Title,
div#Title h2 { display: none }
.IsFixed div#Title,
.IsFixed div#Title h2 { display: block; }

/*------------Contents---------------------------------------------------------------*/
div#Contents { padding-top: 130px; }

/*------------Main------------------------------------*/
div#Main h2 {
	margin-bottom: 20px;
	line-height: 1.2;
	text-align: center;
	font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "ヒラギノ明朝 Pro W3" , "HiraMinPro-W3" , Garamond , "Times New Roman" , "Sawarabi Mincho" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size: 2.8em;
	font-weight: bolder;
}

/*------------topCopy------------------------------------*/
div#topCopy {
	position: relative;
	min-height: 630px;
	padding: 90px 1em 0;
	background: url(../../img/top/main_bg.png) no-repeat center top;
	background-size: cover;
	line-height: 1.2;
	text-align: center;
	font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "ヒラギノ明朝 Pro W3" , "HiraMinPro-W3" , Garamond , "Times New Roman" , "Sawarabi Mincho" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
div#topCopy h2 {
	position: relative;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
	/*font-size: 3.33em;*/
	font-size: 2.9em;
	font-weight: bolder;
	color: #002bb0;
	text-shadow: 
		 4px  4px 5px #fff,
		-4px  4px 5px #fff,
		 4px -4px 5px #fff,
		-4px -4px 5px #fff,
		 4px  0px 5px #fff,
		 0px  4px 5px #fff,
		-4px  0px 5px #fff,
		 0px -4px 5px #fff;
}
div#topCopy h2:before {
	position: absolute;
	display: block;
	content: "";
	width: 80%;
	height: 5px;
	border: 1px solid #959595;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
div#topCopy h2 span {
	display: block;
	line-height: 1.2;
	text-align: center;
	/*font-size: 1.86rem;*/
	font-size: 1.36rem;
	font-weight: normal;
	color: #667582;
	text-shadow: none;
}
div#topCopy h3 {
	margin-top: 20px;
	font-size: 1.66em;
	font-weight: bolder;
	color: #00adff;
	text-shadow: 
		 4px  4px 5px #fff,
		-4px  4px 5px #fff,
		 4px -4px 5px #fff,
		-4px -4px 5px #fff,
		 4px  0px 5px #fff,
		 0px  4px 5px #fff,
		-4px  0px 5px #fff,
		 0px -4px 5px #fff;
}
div#topCopy p {
	line-height: 1.8;
	font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, Roboto, Verdana, "Droid Sans", sans-serif;
	font-size: 0.93em;
}
div#topCopy div#SDGs {
	width: 280px;
	margin: 40px auto 30px;
}

/*------------Works------------------------------------*/
div#Works {
	position: relative;
	width: 96%;
	margin: 80px auto 0;
}
div#Works h2 { color: #00adff; }
div#Works ul {
	position: relative;
	width: 100%;
	margin: 0 auto;
	list-style: none;
	overflow: hidden;
}
div#Works ul li {
	position: relative;
	width: 100%;
}
div#Works ul li:nth-of-type(2n) { margin-top: 40px; }
div#Works ul li div {
	position: relative;
	overflow: hidden;
}
div#Works ul li img {
	max-width: 100%;
	vertical-align: top;
	-webkit-transition: all 0.35s ease-out;
	transition: all 0.35s ease-out;
}
div#Works ul li:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
div#Works ul li a {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
	transition: all 0.35s ease-out;
}
div#Works ul li h3 {
	position: absolute;
	width: 100%;
	padding: 0.6em 0;
	background-color: rgba(0, 173, 255, 0.8);
	line-height: 1.2;
	text-align: center;
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" ,  "ヒラギノ明朝 Pro W3" , "HiraMinPro-W3" , Garamond , "Times New Roman" , "Sawarabi Mincho" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size: 1.8em;
	font-weight: bolder;
	color: #fff;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
div#Works ul li span {
	position: absolute;
	display: block;
	width: 100px;
	height: 120px;
	background: url(../../img/top/worsk_a.png) no-repeat left top;
	top: 70%;
	left: 50%;
	-webkit-transform: translate(-50% , -50%);
	    -ms-transform: translate(-50% , -50%);
	        transform: translate(-50% , -50%);
	z-index: 2;
}

/*------------News------------------------------------*/
div#News {
	width: 100%;
	margin: 80px auto 0;
	overflow: hidden;
}
div#News h2 { color: #ff7800; }
div#News div#newsList {
	width: 100%;
	height: 330px;
	margin: 0 auto;
	padding: 20px 0;
	background-color: #f4f4f4;
	overflow: auto;
}
div#News div#newsList {
	width: 100%;
	height: 390px;
	margin: 0 auto;
	overflow: auto;
}
div#News div#InNews {
	width: 96%;
	height: 100%;
	margin: 0 auto;
}
div#News div#newsList iframe {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: auto;
}

/*------------Recruit------------------------------------*/
div#Recruit {
	position: relative;
	width: 96%;
	margin: 80px auto 0;
}
div#Recruit h2 { color: #548200; }
div#Recruit div {
	position: relative;
	height: 400px;
	background: url(../../img/top/recruit_p.jpg) no-repeat center top;
	overflow: hidden;
}
div#Recruit img { display: none; }
div#Recruit a {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
	transition: all 0.35s ease-out;
}
div#Recruit h3 {
	position: absolute;
	width: 96%;
	padding: 0.6em 0;
	background-color: rgba(84, 130, 0, 0.8);
	line-height: 1.2;
	text-align: center;
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" ,  "ヒラギノ明朝 Pro W3" , "HiraMinPro-W3" , Garamond , "Times New Roman" , "Sawarabi Mincho" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size: 1.8em;
	font-weight: bolder;
	color: #fff;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
div#Recruit span {
	position: absolute;
	display: block;
	width: 100px;
	height: 120px;
	background: url(../../img/top/recruit_a.png) no-repeat left top;
	top: 60%;
	left: 50%;
	-webkit-transform: translate(-50% , -50%);
	    -ms-transform: translate(-50% , -50%);
	        transform: translate(-50% , -50%);
	z-index: 2;
}