@charset "UTF-8";

/* ヒーローエリア（ローディング画面） */
#loading {
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #fff; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  transition: all 0.3s; 
  z-index: 200;
}

#loading img {
	display: block;
}

.loaded {
	opacity: 0;
	visibility: hidden;
}

/* 国分工場紹介 */
.about {
	padding: 80px 0px 80px;
	max-width: 1050px;
	margin: 0 auto;
}

.about ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.about ul li {
	flex: 0 0 350px;
}

.about ul img {
	display: block;
}

/* 会社概要 */
.company {
	background-image: url(../img/front_bg2.png);
	background-repeat: no-repeat;
	background-position: left center;
	padding: 0;
}

.company h2,
.company p,
.company a {
	color: #fff;
	text-align: left;
	margin-bottom: 10px;
}

.company div.head {
	border-bottom: 1px #fff solid;
	margin-bottom: 20px;
}

.company .text {
	background-color: #ff5e14;
	padding: 60px 30px;
}
.company .photo {
	padding: 0;
}

.company .photo img {
	width: 100%;
	height: auto;
	display: block;
}

/* 製品紹介 */
.work {
	padding: 80px 30px 80px;
	background: url(../img/front_bg.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

.work p {
	text-align: center;
	margin-bottom: 20px;
}

.work ul img {
	display: block;
	width: 100%;
	height: auto;
}

/* スタッフインタビュー */
.staff {
	padding: 80px 30px 80px;
	background: #eef1f6;
}

.staff p {
	text-align: center;
	margin-bottom: 20px;
}

.staff ul img {
	display: block;
	width: 100%;
	height: auto;
}

/* パートナー企業 */
.part {
	padding: 80px 30px 80px;
}

.part p {
	text-align: center;
	margin-bottom: 20px;
}

.part p.count-up {
	font-size: 100px;
	font-family: Libre Baskerville;
	font-weight: bold;
}

/* 最新NEWS */
.news {
	padding: 80px 30px 80px;
	background: #eef1f6;
}

.news img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 10px;
}

.news img.arrow {
	display: inline-block;
	width: 14px;
	height: 16px;
	margin: 0;
}


/* 大きい画面用の設定 */
@media(min-width:768px) {
	/* ヒーローエリア */
	/* 会社概要 */
	.company .container {
	display: flex;
	max-width: 1050px;
	margin: 0 auto;
	}
	.company .text {
	flex: 0 0 50%;
	}
	/* 製品紹介 */
	.work {
	padding: 60px 0px;
	}
	.work ul {
	display: flex;
	justify-content: flex-end;
	}
	.work ul li {
	padding-left: 10px;
	max-width: 400px;
	}
	/* スタッフインタビュー */
	.staff ul {
	display: flex;
	justify-content: center;
	max-width: 1050px;
	margin: 0 auto;
	}
	.staff ul li {
	padding: 10px;
	}
	/* 最新NEWS */
	.news .container {
	display: flex;
	justify-content: center;
	max-width: 1050px;
	margin: 0 auto;
	}
	.news article {
	padding: 10px;
	}
}