@charset "UTF-8";
/* CSS Document */



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/







/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 下層タイトル */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#pagetitle.index {
	background: url(../img/pagetitle.jpg) no-repeat center;
	background-size: cover;
}
#pagetitle.materials-handling {
	background: url(../img/materials-handling/pagetitle.jpg) no-repeat center;
	background-size: cover;
}
#pagetitle.chain {
	background: url(../img/chain/pagetitle.jpg) no-repeat center;
	background-size: cover;
}
#pagetitle.auto-parts {
	background: url(../img/auto-parts/pagetitle.jpg) no-repeat center;
	background-size: cover;
}
#pagetitle.precision-machine {
	background: url(../img/precision-machine/pagetitle.jpg) no-repeat center;
	background-size: cover;
}
#pagetitle.development-technology {
	background: url(../img/development-technology/pagetitle.jpg) no-repeat center;
	background-size: cover;
}


	
	
/* business
--------------------- */
#business {
	width: 100%;
	padding: 90px 0 90px 0;
	background: #0e0e0e;
}
	#business .grid {
		position: relative;
		text-align: center;
	}
		#business .grid li {
			width: 49%;
			margin-right: 2%;
			margin-bottom: 2%;
		}
		#business .grid li:nth-child(2n) {
			margin-right: 0;
		}
			#business .grid li .effect-oscar {
				position: relative;
				overflow: hidden;
				width: 100%;
				text-align: center;
				cursor: pointer;
			}
				#business .grid li .effect-oscar .pht {
					position: relative;
					display: block;
					width: 100%;
					opacity: 1;
				}

				#business .grid li .effect-oscar figcaption {
					padding: 2em;
					color: #fff;
					font-size: 1.25em;
					-webkit-backface-visibility: hidden;
					backface-visibility: hidden;
				}
				#business .grid li .effect-oscar figcaption::before,
				#business .grid li .effect-oscar figcaption::after {
					pointer-events: none;
				}
					#business .grid li .effect-oscar figcaption,
					#business .grid li .effect-oscar figcaption > a {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
					#business .grid li .effect-oscar figcaption > a {
						z-index: 1000;
						text-indent: 200%;
						white-space: nowrap;
						font-size: 0;
						opacity: 0;
					}
						#business .grid li .effect-oscar h3 {
							font-size: 32px;
							font-weight: 500;
						}
							#business .grid li .effect-oscar h3 .en {
								display: block;
								font-size: 14px;
								line-height: 1;
								text-decoration: underline;
								padding-top: 20px;
								padding-bottom: 10px;
							}

							#business .grid li .effect-oscar h3 .txt {
								display: block;
								font-size: 12px;
								letter-spacing: 2px;
								font-weight: 700;
							}

						#business .grid li .effect-oscar p {
							font-size: 12px;
							letter-spacing: 2px;
							line-height: 26px;
							font-weight: 700;
						}


		/*---------------*/
		/***** Oscar *****/
		/*---------------*/
		.effect-oscar figcaption {
			padding: 3em;
			-webkit-transition: background-color 0.5s;
			transition: background-color 0.5s;
			position: relative;
		}
		.effect-oscar figcaption:after {
			content: "";
			width: 41px;
			height: 10px;
			background: url(../../common/img/arrow_white.svg) no-repeat;
			position: absolute;
			bottom: 62px;
			left: 50%;
			margin-left: -20px;
		}

		.effect-oscar figcaption::before {
		}

		.effect-oscar h3 {
			margin: 10% 0 0 0;
			-webkit-transition: -webkit-transform 0.35s;
			transition: transform 0.35s;
			-webkit-transform: translate3d(0,10%,0);
			transform: translate3d(0,10%,0);
		}

		.effect-oscar figcaption::before,
		.effect-oscar p {
			opacity: 0;
			-webkit-transition: opacity 0.1s, -webkit-transform 0.35s;
			transition: opacity 0.35s, transform 0.35s;
			-webkit-transform: scale(0);
			transform: scale(0);
		}

		.effect-oscar:hover h3 {
			-webkit-transform: translate3d(0,-60%,0);
			transform: translate3d(0,-60%,0);
		}

		.effect-oscar:hover figcaption::before,
		.effect-oscar:hover p {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		.effect-oscar h3 .txt {
		}
		.effect-oscar:hover h3 .txt {
			opacity: 0;
			margin-top: -11%;
		}

		.effect-oscar:hover figcaption {
			background-color: rgba(0,160,247,0.6);
		}




	
	
	
/* solution
--------------------- */
#solution {
	width: 100%;
	padding: 90px 0 90px 0;
	background: #E5F5FE;
}
	#solution .pht {
		width: 100%;
		max-width: 1160px;
		margin: auto;
	}
		#solution .pht img {
			width: 100%;
			height: auto;
		}



	
	
	
/* keyword
--------------------- */
#keyword {
	width: 100%;
	padding: 90px 0 0 0;
}
	#keyword .title {
		text-align: center;
	}


	#keyword .boxlist {
	}
		#keyword .boxlist .box {
			width: 30.5%;
			padding-bottom: 32px;
			border-bottom: solid 1px #dddddd;
		}
			#keyword .boxlist .box .head {
				color: #ababab;
				text-align: center;
				position: relative;
			}
			#keyword .boxlist .box .head:after {
				content: "";
				width: 100%;
				height: 1px;
				background: #ddd;
				position: absolute;
				top: 11px;
				left: 0;
				z-index: -1;
			}
				#keyword .boxlist .box .head span {
					background: #fff;
					padding: 0 15px;
				}

			#keyword .boxlist .box h3 {
				font-size: 28px;
				font-weight: 700;
				line-height: 42px;
				letter-spacing: 2px;
				padding-top: 20px;
				margin-bottom: 20px;
			}
				#keyword .boxlist .box h3 span {
					color: #00a0f7;
				}

			#keyword .boxlist .box p {
				line-height: 30px;
				letter-spacing: 2px;
			}




	
	
	
/* message
--------------------- */
#message {
	width: 100%;
	padding: 100px 0 0 0;
}
	#message .textbox {
		width: 55%;
	}
		#message .textbox .title {
			padding-bottom: 40px;
		}

		#message .textbox h3 {
			font-size: 172%;
			font-weight: 700;
			line-height: 38px;
			margin-bottom: 15px;
		}

		#message .textbox p {
			line-height: 30px;
			letter-spacing: 2px;
			margin-bottom: 12px;
		}

		#message .textbox .btn {
			padding-top: 25px;
		}


	#message .pht {
		width: 40%;
	}
		#message .pht img {
			width: 100%;
			height: auto;
		}




	
	
	
/* topics
--------------------- */
#topics {
	width: 100%;
	padding: 100px 0 0 0;
}
	#topics .borderbox {
		border: solid 5px #000;
		padding: 60px;
		position: relative;
	}
		#topics .borderbox .title {
			width: 26%;
		}

		#topics .borderbox .pht {
			position: absolute;
			top: 190px;
			left: -6%;
			box-shadow: 0px 3px 10px rgba(0,0,0,0.3);
			-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.3));
			filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.3));
		}
			#topics .borderbox .pht img {
				width: 100%;
				height: auto;
			}


		#topics .borderbox .textbox {
			width: 79%;
		}
			#topics .borderbox .textbox h3 {
				font-size: 172%;
				font-weight: 700;
				line-height: 38px;
				margin-bottom: 25px;
			}

			#topics .borderbox .textbox p {
				line-height: 30px;
				letter-spacing: 2px;
				margin-bottom: 40px;
			}




	
	
	
/* products
--------------------- */
#products {
	width: 100%;
	padding: 100px 0 0 0;
}
	#products .title {
		text-align: center;
		padding-bottom: 50px;
	}


	#products .boxlist {
	}
		#products .boxlist .box {
			width: 30.5%;
		}
			#products .boxlist .box .pht img {
				width: 100%;
				height: auto;
			}

			#products .boxlist .box h3 {
				font-size: 158%;
				padding-top: 15px;
				margin-bottom: 8px;
			}

			#products .boxlist .box p {
				line-height: 30px;
				letter-spacing: 2px;
			}


	#products .btn {
		padding-top: 40px;
		margin: auto;
	}




	
	
	
/* employees
--------------------- */
#employees {
	width: 100%;
	padding: 100px 0 0 0;
}
	#employees .title {
		text-align: center;
		padding-bottom: 50px;
	}


	#employees .boxlist {
	}
		#employees .boxlist .linkbox {
			width: 30.5%;
			margin-right: 4.25%;
		}
		#employees .boxlist .linkbox:nth-child(3) {
			margin-right: 0;
		}
			#employees .boxlist .linkbox a {
				display: block;
				overflow: hidden;
			}
				#employees .boxlist .linkbox .pht a img {
					width: 100%;
					height: auto;
					-moz-transition: -moz-transform 0.2s linear;
					-webkit-transition: -webkit-transform 0.2s linear;
					-o-transition: -o-transform 0.2s linear;
					-ms-transition: -ms-transform 0.2s linear;
					transition: transform 0.2s linear;
				}
				#employees .boxlist .linkbox .pht a:hover img {
					-webkit-transform: scale(1.05);
					-moz-transform: scale(1.05);
					-o-transform: scale(1.05);
					-ms-transform: scale(1.05);
					transform: scale(1.05);
				}

			#employees .boxlist .linkbox .tag {
				padding-top: 20px;
			}




	
	
	
/* office
--------------------- */
#office {
	width: 100%;
	padding: 100px 0 0 0;
}
	#office .title {
		text-align: center;
		padding-bottom: 50px;
	}


	#office .pht img {
		width: 100%;
		height: auto;
	}







/* モーダルCSS */
.modalArea {
	display: none;
	position: fixed;
	overflow-y: auto;
	z-index: 1000000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
	.modalArea .modalBg {
		width: 100%;
		height: 100%;
		background-color: rgba(30,30,30,0.9);
	}



	.modalArea .modalWrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%,-50%);
		width: 70%;
		max-width: 1000px;
		max-height: 80vh;
		overflow-y: scroll;
		background-color: #fff;
	}
		.modalArea .modalWrapper .headarea {
			background: #00a0f7;
		}
			.modalArea .modalWrapper .headarea .text {
				width: 50%;
				padding: 50px;
				color: #fff;
			}
				.modalArea .modalWrapper .headarea .text dl {
					padding-bottom: 20px;
				}
					.modalArea .modalWrapper .headarea .text dl dt {
						font-size: 93%;
					}
					.modalArea .modalWrapper .headarea .text dl dd {
						font-size: 129%;
					}

				.modalArea .modalWrapper .headarea .text h3 {
					font-size: 36px;
					line-height: 1.3em;
					margin-bottom: 8px;
				}


			.modalArea .modalWrapper .headarea .pht {
				width: 50%;
			}
			.chain .modalWrapper .headarea .pht {
				background: url(../img/chain/message_pht.jpg) no-repeat center;
				background-size: cover;
			}
			.materials-handling .modalWrapper .headarea .pht {
				background: url(../img/materials-handling/message_pht.jpg) no-repeat center;
				background-size: cover;
			}
			.development-technology .modalWrapper .headarea .pht {
				background: url(../img/development-technology/message_pht.jpg) no-repeat center;
				background-size: cover;
			}
			.auto-parts .modalWrapper .headarea .pht {
				background: url(../img/auto-parts/message_pht.jpg) no-repeat center;
				background-size: cover;
			}
			.precision-machine .modalWrapper .headarea .pht {
				background: url(../img/precision-machine/message_pht.jpg) no-repeat center;
				background-size: cover;
			}


		.modalArea .modalWrapper .textarea {
			padding: 50px 50px 10px 50px;
		}
			.modalArea .modalWrapper .textarea .cell {
				margin-bottom: 40px;
			}
				.modalArea .modalWrapper .textarea .cell h3 {
					font-size: 172%;
					color: #00a0f7;
					line-height: 1.6em;
					margin-bottom: 15px;
				}

				.modalArea .modalWrapper .textarea .cell p {
					line-height: 32px;
				}



	.modalArea .closeModal {
		width: 50px;
		height: 50px;
		line-height: 50px;
		background: #000;
		font-size: 129%;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
	}








/* 1400px */
@media screen and (max-width: 1400px) {




	
	
	
/* keyword
--------------------- */
#keyword .boxlist .box h3 {
	letter-spacing: 0.9px;
}



	
	
	
/* topics
--------------------- */
#topics .borderbox {
	padding: 6%;
}
#topics .borderbox .title {
	width: 25%;
}

#topics .borderbox .textbox {
	width: 73%;
}




	




}









/* 1160px */
@media screen and (max-width: 1160px) {


	
	
/* business
--------------------- */
#business {
	padding: 90px 0 50px 0;
}
	#business .title .en,
	#business .title h2 {
		text-align: center;
	}


	#business .grid {
		position: relative;
		text-align: center;
	}
		#business .grid li {
			width: 49%;
			margin-right: 2%;
			margin-bottom: 30px;
		}
		#business .grid li:nth-child(2n) {
			margin-top: 0;
		}
			#business .grid li .pht,
			#business .grid li figcaption {
				display: none !important;
			}
	
			#business .grid li .sp {
				display: block;
				font-size: 20px;
				font-weight: 500;
				color: #fff;
			}
				#business .grid li .sp img {
					width: 100%;
					height: auto;
					padding-bottom: 10px;
				}




	
	
	
/* keyword
--------------------- */
#keyword .boxlist {
	display: block;
}
	#keyword .boxlist .box {
		width: 100%;
		margin-bottom: 50px;
		padding-bottom: 0;
		border-bottom: none;
	}
	#keyword .boxlist .box:nth-child(3) {
		margin-bottom: 0;
	}
		#keyword .boxlist .box h3 {
			letter-spacing: 3px;
			text-align: center;
		}




	
	
	
/* message
--------------------- */
#message .textbox {
	width: 50%;
}


#message .pht {
	width: 45%;
	padding-top: 120px;
}




	
	
	
/* topics
--------------------- */
#topics .borderbox {
	display: block;
	padding: 10%;
}
	#topics .borderbox .title {
		width: 106%;
		text-align: center;
		padding-bottom: 50px;
	}
	

	#topics .borderbox .pht {
		width: 30%;
		top: -6%;
		left: -6%;
	}

	
	#topics .borderbox .textbox {
		width: 100%;
	}
		#topics .borderbox .textbox h3 {
			text-align: center;
		}
	
		#topics .borderbox .textbox p {
			margin-bottom: 20px;
		}
	

	#topics .borderbox .btn {
		margin: auto;
	}




	
	
	
/* employees
--------------------- */
#employees .boxlist .linkbox .tag {
	padding-top: 10px;
}
	#employees .boxlist .linkbox .tag li {
		margin-top: 10px;
	}







/* モーダルCSS */
.modalArea .modalWrapper {
	width: 90%;
	max-width: 90vh;
	max-height: 90vh;
}
	.modalArea .modalWrapper .headarea .text {
		width: 60%;
	}
		.modalArea .modalWrapper .headarea .text dl {
			padding-bottom: 10px;
		}
		.modalArea .modalWrapper .headarea .text h3 {
			font-size: 30px;
		}


	.modalArea .modalWrapper .headarea .pht {
		width: 40%;
	}


	.modalArea .modalWrapper .textarea {
		padding: 30px 30px 10px 30px;
	}
		.modalArea .modalWrapper .textarea .cell {
			margin-bottom: 20px;
		}
			.modalArea .modalWrapper .textarea .cell h3 {
				font-size: 158%;
			}

			.modalArea .modalWrapper .textarea .cell p {
				line-height: 30px;
			}







}

	







/* max 767px */
@media screen and (max-width: 767px) {


	
	
/* business
--------------------- */
#business {
	padding: 60px 0 25px 0;
}
	#business .title {
		padding-bottom: 40px !important;
	}


	#business .grid li .sp {
		font-size: 108%;
	}


	
	
/* solution
--------------------- */
#solution {
	padding: 60px 0;
}




	
	
	
/* keyword
--------------------- */
#keyword {
	padding: 60px 0 0 0;
}
	#keyword .boxlist .box {
		margin-bottom: 40px;
	}
		#keyword .boxlist .box h3 {
			font-size: 24px;
			line-height: 32px;
			padding-top: 15px;
			margin-bottom: 15px;
		}

		#keyword .boxlist .box p {
			font-size: 93%;
			line-height: 2em;
		}




	
	
	
/* message
--------------------- */
#message  {
	padding: 60px 0 0 0;
}
#message .inner {
	display: block;
}
	#message .textbox {
		width: 100%;
	}
		#message .textbox .title {
			text-align: center;
		}
	
		#message .textbox h3 {
			font-size: 20px;
			line-height: 1.7em;
			letter-spacing: 1px;
			margin-bottom: 15px;
		}
	
		#message .textbox p {
			font-size: 93%;
			line-height: 2em;
		}
	
		#message .textbox .btn {
			padding-top: 12px;
		}


	#message .pht {
		width: 105%;
		margin-left: -5.5%;
		padding-top: 35px;
	}




	
	
	
/* topics
--------------------- */
#topics {
	padding-top: 60px;
}
	#topics .borderbox {
		display: block;
		padding: 40px 30px 35px 30px;
	}
		#topics .borderbox .title {
			width: 106%;
			text-align: center;
			padding-bottom: 50px;
		}


		#topics .borderbox .pht {
			width: 100%;
			position: static;
			margin-bottom: 30px;
		}


		#topics .borderbox .textbox {
			width: 100%;
		}
			#topics .borderbox .textbox h3 {
				font-size: 20px;
				line-height: 1.7em;
				letter-spacing: 1px;
				margin-bottom: 15px;
			}

			#topics .borderbox .textbox p {
				font-size: 93%;
				line-height: 2em;
			}


		#topics .borderbox .btn {
			padding-top: 8px;
			margin: auto;
		}




	
	
	
/* products
--------------------- */
#products {
	padding: 60px 0 0 0;
	overflow: hidden;
}
	#products .boxlist {
		display: block;
	}
		#products .boxlist .box {
			width: 100%;
			margin-bottom: 30px;
		}
			#products .boxlist .box:nth-child(1) .pht,
			#products .boxlist .box:nth-child(3) .pht {
				width: 105%;
				margin-left: -5.5%;
			}
			#products .boxlist .box:nth-child(2) .pht {
				width: 105.5%;
			}
				#products .boxlist .box .pht img {
					width: 100%;
					height: auto;
				}

			#products .boxlist .box h3 {
				font-size: 143%;
				padding-top: 10px;
				margin-bottom: 4px;
			}

			#products .boxlist .box p {
				font-size: 93%;
				line-height: 2em;
			}


	#products .btn {
		padding-top: 0;
	}




	
	
	
/* employees
--------------------- */
#employees {
	padding: 60px 0 0 0;
}
#employees .inner {
	padding: 0;
}
	#employees .boxlist {
		display: block;
	}
		#employees .boxlist .linkbox {
			width: 100%;
		}
		#employees .boxlist .linkbox .tag {
			padding-top: 0;
			position: absolute;
			bottom: 20px;
			left: 20px;
		}




	
	
	
/* office
--------------------- */
#office {
	padding: 60px 0 0 0;
}
#office .inner {
	padding: 0;
}







/* モーダルCSS */
.modalArea .modalWrapper .headarea {
	display: block;
}
	.modalArea .modalWrapper .headarea .text {
		width: 100%;
		padding: 25px 25px 17px 25px;
	}
		.modalArea .modalWrapper .headarea .text dl {
			padding-bottom: 5px;
		}
			.modalArea .modalWrapper .headarea .text dl dt {
				font-size: 79%;
				line-height: 1;
			}
			.modalArea .modalWrapper .headarea .text dl dd {
				font-size: 108%;
			}

		.modalArea .modalWrapper .headarea .text h3 {
			font-size: 158%;
		}
		.modalArea .modalWrapper .headarea .text p {
			font-size: 86%;
		}


	.modalArea .modalWrapper .headarea .pht {
		width: 100%;
		height: 180px;
	}


	.modalArea .modalWrapper .textarea {
		padding: 25px 25px 10px 25px;
	}
		.modalArea .modalWrapper .textarea .cell h3 {
			font-size: 143%;
			line-height: 1.4em;
			padding-top: 5px;
			margin-bottom: 10px;
		}

		.modalArea .modalWrapper .textarea .cell p {
			font-size: 93%;
			line-height: 2em;
		}







}