@charset "utf-8";

/* ----------------------------------------------------------
 Frameworks
-----------------------------------------------------------*/

body, html {
	}
	/* Page Motion 
	body::after {
		position: fixed;
		right: 0; bottom: 0;
		width: 100vw; height: 100vh;
		content: "";
		visibility: hidden;
		background: #fff;
		-webkit-animation: fadeOut 0.3s linear 0.6s 1 backwards;
		animation:         fadeOut 0.3s linear 0.6s 1 backwards;
		z-index: 99999;
		}
		@-webkit-keyframes fadeOut {
			0%   { visibility: visible; opacity: 1; }
			100% { opacity: 0; }
		}
		@keyframes fadeOut {
			0%   { visibility: visible; opacity: 1; }
			100% { opacity: 0; }
		}*/
	
	
#wrapper {
	transition: all ease-out .3s .15s;
	}
	input#btnSearch:checked ~ #wrapper { transform: translateY(80px); }
	
	
	#container {
		margin-bottom: 82px;
		}
		.cntFrame {
			width: 1200px;
			margin: 0 auto;
			}
		



/*-----------------------------------------------------------
 Header
-----------------------------------------------------------*/

header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%; min-width: 1200px; 
	box-shadow: inset 0 35px 0 0 #112348;
	background: #fff;
	transition: all ease-out .3s .15s;
	z-index: 10;
	}
	header.headScroll { box-shadow: inset 0 0 0 0 #112348; }
	
	#headCnt {
		width: 1200px; height: 120px;
		margin: 0 auto;	padding: 35px 0 0;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		transition: all ease-out .3s .15s;
		}
		header.headScroll #headCnt {
			height: 60px;
			padding-top: 0;
			}
		
		#headCnt h1 {
			width: 185px;
			margin: 0 25px 0 0; padding: 12px 25px 12px 0;
			background: linear-gradient(to bottom, #333 33%, rgba(255,255,255,0) 0%) repeat-y right top;
			background-size: 1px 3px;
			}
			#headCnt h1 img {
				width: auto; height: auto;
				max-width: 100%; max-height: 100%;
				}
		
		#headCnt > p {
			margin: 0;
			color: #1f3156;
			}


	/*---------- headNav ----------*/
	
	#headNav {
		width: 200px;
		margin: -35px 0 0 auto;
		-webkit-align-self: flex-start;
		align-self: flex-start;
		}
		#headNav #hnDrawer { display: none; }
		
		/* hnLanguage */
		#headNav dl#hnLanguage {
			float: right;
			width: 130px; height: 35px;
			margin: 0;
			}
			#headNav dl#hnLanguage dt {
				position: relative;
				height: 35px;
				padding: 0 48px 0 15px;
				font-size: 0.8125rem;
				color: #fff;
				line-height: 35px;
				background: #1e335d;
				border-left: 1px dotted rgba(255,255,255,0.3);
				}
				/*.english #headNav dl#hnLanguage dt { background: #1e335d url("/common/images/icoEnglish.png") no-repeat 17px center; }
				.deutsch #headNav dl#hnLanguage dt { background: #1e335d url("/common/images/icoDeutsch.png") no-repeat 17px center; }
				.chinese #headNav dl#hnLanguage dt { background: #1e335d url("/common/images/icoChinese.png") no-repeat 17px center; }*/
				
				#headNav dl#hnLanguage dt:after {
					position: absolute;
					right: 17px; top: 45%;
					width: 7px; height: 7px;
					display: block;
					content: "";
					border-top:   2px solid #fff;
					border-right: 2px solid #fff;
					transform: translateY(-50%) rotate(135deg);
					transition: all ease-out .3s .15s;
					}
					#headNav dl#hnLanguage:hover dt:after { top: 55%; }
			
			#headNav dl#hnLanguage dd {
				position: relative;
				max-height: 0;
				overflow: hidden;
				z-index: 999;
				transition: all ease-out .3s .3s;
				}
				#headNav dl#hnLanguage:hover dd {
					max-height: 100px;
					box-shadow: 1px 0 0 0 rgba(0,0,0,0.1), -1px 0 0 0 rgba(0,0,0,0.1);
					background: #fff;
					}
				
				#headNav dl#hnLanguage dd a {
					padding: 7px 48px 7px 15px;
					display: block;
					font-size: 0.8125rem;
					color: #333;
					border-bottom: 1px solid #ccc;
					transition: all ease-out .3s;
					}
					/*#headNav dl#hnLanguage dd#hnEnglish a { background: transparent url("/common/images/icoEnglish.png") no-repeat 17px center; }
					#headNav dl#hnLanguage dd#hnDeutsch a { background: transparent url("/common/images/icoDeutsch.png") no-repeat 17px center; }
					#headNav dl#hnLanguage dd#hnChinese a { background: transparent url("/common/images/icoChinese.png") no-repeat 17px center; }*/
					
					#headNav dl#hnLanguage dd a:hover { background-color: #ddd !important; }

		/* hnSearch */
		#headNav p#hnSearch {
			float: left;
			margin: 0;
			}
			#headNav p#hnSearch label {
				width: 70px; height: 35px;
				display: block;
				background: #1e335d url("/common/images/icoSearch.png") no-repeat center center;
				border-left:  1px dotted rgba(255,255,255,0.3);
				border-right: 1px dotted rgba(255,255,255,0.3);
				cursor: pointer;
				transition: all ease-out .3s .15s;
				}
				header #headNav p#hnSearch label:hover { background-color: rgba(255,255,255,0.2); }
				input#btnSearch:checked ~ #wrapper p#hnSearch label { background: #1e335d url("/common/images/icoClose.png") no-repeat center center; }

		/* hnRequest */
		#headNav ul#hnRequest {
			clear: both;
			width: 500px;
			margin: 0 0 0 -300px; padding: 13px 0 0;
			display: -webkit-flex;
			display: flex;
			-webkit-align-items: center;
			align-items: center;
			-webkit-justify-content: flex-end;
			justify-content: flex-end;
			}
			header.headScroll #headNav ul#hnRequest { padding-top: 10px; }
			
			#headNav ul#hnRequest li {
				margin: 0 0 0 10px;
				white-space: nowrap;
				}
				#headNav ul#hnRequest li a {
					padding: 15px 40px 15px 60px;
					display: block;
					color: #fff;
					background: #1c64c3;
					border-radius: 3px;
					transition: all ease-out .3s .15s;
					}
					header.headScroll #headNav ul#hnRequest li a { padding: 5px 40px 5px 60px; }
					
					#headNav ul#hnRequest li#hnSample    a { padding-left: 50px; padding-right: 50px; background: #1c64c3; }
					/*#headNav ul#hnRequest li#hnSample    a { background: #1c64c3 url("/common/images/icoSample.png") no-repeat 20px center; }*/
					#headNav ul#hnRequest li#hnMagazine  a { background: #1c64c3 url("/common/images/icoMail.png")   no-repeat 20px center; }
					#headNav ul#hnRequest li#hnEcommerce a { background: #1c64c3 url("/common/images/icoCart.png")   no-repeat 20px center; }
					#headNav ul#hnRequest li#hnDownload  a { background: #1c64c3 url("/common/images/icoDownload02.png")   no-repeat 20px center; }
	
	
	/*---------- globalNav ----------*/
	
	#globalNav {
		position: relative;
		padding: 15px 0 15px;
		box-shadow: 0 -1px 0 0 #ccc, inset 0 -2px 0 0 #fff, inset 0 -4px 0 0 #fafafa;
		border-top:    2px solid #ddd;
		border-bottom: 1px solid rgba(0,0,0,0.05);
		transition: all ease-out .3s;
		}
		header.headScroll #globalNav { padding: 8px; }
		
		#globalNav ul {
			width: 1200px;
			margin: 0 auto; padding: 0 0 0 1px;
			background: linear-gradient(to bottom, #ccc 33%, rgba(255,255,255,0) 0%) repeat-y left top;
			background-size: 1px 3px;
			}
			#globalNav ul li {
				float: left;
				width: 240px;
				padding: 0 1px 0 0;
				background: linear-gradient(to bottom, #ccc 33%, rgba(255,255,255,0) 0%) repeat-y right top;
				background-size: 1px 3px;
				}
				#globalNav ul li:nth-of-type(1) { width: 239px; }
				
				#globalNav ul li > a {
					position: relative;
					padding: 8px 0;
					display: -webkit-flex;
					display: flex;
					-webkit-align-items: center;
					align-items: center;
					-webkit-justify-content: center;
					justify-content: center;
					font-size: 1.125rem;
					color: #222;
					text-decoration: none;
					}
					#globalNav ul li > a:before {
						position: absolute;
						left: 50%; bottom: 3px;
						width: 0; height: 2px;
						display: block;
						content: "";
						background: #1c64c3;
						transform: translateX(-50%);
						transition: all ease-out .15s .15s;
						}
					
					#globalNav ul li > a:hover:before ,
					#globalNav ul li#gnProducts:hover   a:before ,
					#globalNav ul li#gnTechnology:hover a:before { width: 40px; }
				
				/* subNav */
				#globalNav ul li .subNav {
					position: absolute;
					left: 0; bottom: 0;
					width: 100%; max-height: 0;
					margin: 0; padding: 0;
					display: block;
					background: #1c64c3;
					overflow: hidden;
					z-index: 1000;
					transform: translateY(100%);
					transition: all ease-out .3s .3s;
					}
					#globalNav ul li#gnProducts:hover   .subNav ,
					#globalNav ul li#gnTechnology:hover .subNav { max-height: 170px; }

					/* subNav dl */
					#globalNav ul li .subNav dl {
						width: 1200px; height: 170px;
						margin: 0 auto; padding: 15px 0;
						}
						#globalNav ul li .subNav dl dt {
							float: left;
							width: 25%; height: 100%;
							border-right: 5px solid #1c64c3;
							}
							#globalNav ul li .subNav dl dt a {
								height: 100%;
								display: -webkit-flex;
								display: flex;
								-webkit-align-items: center;
								align-items: center;
								-webkit-justify-content: center;
								justify-content: center;
								font-size: 1.25rem;
								line-height: 1.25;
								color: #fff;
								text-align: center;
								text-decoration: none;
								background: rgba(255,255,255,0.1);
								transition: all ease-out .3s;
								}
								#globalNav ul li .subNav dl dt a:hover { background: rgba(255,255,255,0.4); }
							
						#globalNav ul li .subNav dl dd {
							float: left;
							width: 25%; height: 50%;
							border-bottom: 1px solid #1c64c3;
							border-right:  1px solid #1c64c3;
							}
							#globalNav ul li .subNav dl dd:nth-of-type(3n) { border-right: none; }
							#globalNav ul li .subNav dl dd:nth-last-of-type(-n+3) { border-bottom: none; }
							
							#globalNav ul li .subNav dl dd a {
								height: 100%;
								display: -webkit-flex;
								display: flex;
								-webkit-align-items: center;
								align-items: center;
								-webkit-justify-content: center;
								justify-content: center;
								color: #fff;
								text-align: center;
								text-decoration: none;
								background: rgba(255,255,255,0.1);
								transition: all ease-out .3s;
								}
								#globalNav ul li .subNav dl dd a:hover { background: rgba(255,255,255,0.4); }

					/* subNav ul */
					#globalNav ul li .subNav ul {
						width: 1200px; height: 170px;
						margin: 0 auto; padding: 15px 0;
						background: none;
						}
						#globalNav ul li .subNav ul li {
							float: left;
							width: 400px; height: 50%;
							background: none;
							border: none;
							border-bottom: 1px solid #1c64c3;
							}
							#globalNav ul li .subNav ul li a {
								height: 100%;
								display: -webkit-flex;
								display: flex;
								-webkit-align-items: center;
								align-items: center;
								-webkit-justify-content: center;
								justify-content: center;
								color: #fff;
								text-align: center;
								text-decoration: none;
								background: rgba(255,255,255,0.1);
								transition: all ease-out .3s;
								}
								#globalNav ul li .subNav ul li a:before { display: none; }
								
								#globalNav ul li .subNav ul li a:hover { background: rgba(255,255,255,0.4); }



/*-----------------------------------------------------------
 drawerNav
-----------------------------------------------------------*/



/*-----------------------------------------------------------
 localNav
-----------------------------------------------------------*/

#pageNav {
	}



/* ----------------------------------------------------------
 Contents
-----------------------------------------------------------*/

#contents {
	min-width: 1200px;
	margin: 0 0 70px;
	}
	#contents .section ,
	#contents  section {
		margin-bottom: 70px;
		}
		#contents #primary { margin-bottom: 0; }


/*---------- categoryTitle ----------*/

#categoryTitle {
	height: 250px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	background-size: cover !important;
	}
	#categoryTitle h2 {
		position: relative;
		width: 1200px;
		margin: 0 auto 1px; padding: 13px 0;
		font-size: 2.5rem;
		font-weight: bold;
		line-height: 1.1;
		}
		#categoryTitle h2:before {
			position: absolute;
			left: 1px; bottom: 0;
			width: 75px; height: 4px;
			display: block;
			content: "";
			background: #ffc200;
			}


/*---------- topicPath ----------*/

#topicPath {
	background: #fafafa;
	}
	#topicPath ol {
		width: 1200px;
		margin: 0 auto 55px; padding: 20px 0;
		font-size: 0.8125rem;
		line-height: 1.2;
		}
		#topicPath ol li {
			display: inline-block;
			}
			#topicPath ol li:after {
				height: auto;
				margin: 0 0.65rem 0 0.8rem;
				display: inline-block;
				content: "/";
				font-size: 0.8125rem;
				visibility: visible;
				}
				#topicPath ol li:nth-last-of-type(1):after { display: none; }
			
			#topicPath ol li a    ,
			#topicPath ol li span {
				display: inline-block;
				color: #333;
				}
	

/*---------- Format ----------*/

#primary {
	}
	#contents h3 {
		margin: 0 0 35px;
		font-size: 1.875rem;
		/*line-height: 1.25;*/
		text-align: center;
		}
		.heAdvance #contents h3 {
			position: relative;
			margin: 0 0 25px; padding: 10px 0;
			font-size: 1.75rem;
			font-family: 'Crimson Text', 游明朝,"Yu Mincho",YuMincho, "Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
			line-height: 1.125;
			text-align: left;
			}
			.heAdvance #contents h3:after {
				position: absolute;
				left: 0; bottom: 0;
				width: 45px; height: 3px;
				display: block;
				content: "";
				visibility: visible;
				background: #557fd6;
				}
	
	#contents .leadTxt {
		margin: 0 0 60px;
		font-size: 1.25rem;
		text-align: center;
		}
		
	#contents h4 {
		position: relative;
		margin: 0 0 25px; padding: 10px 0;
		font-size: 1.75rem;
		font-family: 'Crimson Text', 游明朝,"Yu Mincho",YuMincho, "Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
		line-height: 1.125;
		}
		#contents h4:after {
			position: absolute;
			left: 0; bottom: 0;
			width: 45px; height: 3px;
			display: block;
			content: "";
			visibility: visible;
			background: #557fd6;
			}

	#contents h5 {
		position: relative;
		margin: 0 0 15px; padding: 10px 0 10px 20px;
		font-size: 1.25rem;
		line-height: 1.125;
		}
		#contents h5:before {
			position: absolute;
			left: 0; top: 50%;
			width: 12px; height: 12px;
			display: block;
			content: "";
			background: #557fd6;
			border-radius: 2px;
			transform: translateY(-50%);
			}
			
		/*#contents h5:before {
			position: absolute;
			left: 0; top: 50%;
			width: 17px; height: 4px;
			display: block;
			content: "";
			background: #557fd6;
			box-shadow: 0 0 0 1px #557fd6;
			border: 1px solid #fff;
			transform: translateY(-50%);
			border-radius: 3px 3px 0 0;
			}*/

	#contents h6 {
		margin: 0 0 15px; padding: 13px 8px;
		background: #f1f3f9;
		}


	
/* ----------------------------------------------------------
 Library
-----------------------------------------------------------*/

dl.newsList {
	}
	dl.newsList dt {
		float: left;
		width: 14.5rem;
		padding: 15px 0 0 5px;
		}
		dl.newsList dt:after { transform: translateY(-5%); }
		
	dl.newsList dd {
		padding: 15px 5px 15px 16rem;
		background: linear-gradient(to right, #333 25%, rgba(255,255,255,0) 0%) repeat-x left bottom;
		background-size: 4px 1px;
		}
		dl.newsList dd a { color: #333; }


p.btnInquiry {
	margin: 30px 0;
	text-align: center;
	}
	p.btnInquiry a {
		position: relative;
		padding: 20px 80px;
		display: inline-block;
		color: #fff;
		background: #1c64c3;
		border-radius: 3px;
		}
		p.btnInquiry a:before {
			position: absolute;
			right: 15px; top: 50%;
			width: 12px; height: 12px;
			display: block;
			content: "";
			border-top:   2px solid #fff;
			border-right: 2px solid #fff;
			transform: translateY(-50%) rotate(45deg);
			transition: all ease-out .3s;
			}
			p.btnInquiry a:hover:before { right: 7px; }


/* ----------------------------------------------------------
 Pickup Nav
-----------------------------------------------------------*/

#pickupNav {
	min-width: 1200px;
	padding: 30px 0;
	background: transparent url("/common/images/bgPickup.jpg") no-repeat center center;
	background-size: 100% auto;
	}
	#pickupNav ul {
		}
		#pickupNav ul li {
			float: left;
			width: 285px;
			margin: 0 0 0 20px;
			}
			#pickupNav ul li:nth-of-type(1) { margin-left: 0; }
			
			#pickupNav ul li a {
				height: 170px;
				padding: 20px 60px 20px 20px;
				display: -webkit-flex;
				display: flex;
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-align-items: center;
				align-items: center;
				font-size: 1.125rem;
				font-weight: bold;
				color: #333;
				line-height: 1.25;
				text-decoration: none;
				background: #fff;
				background-size: cover !important;
				transition: all ease-out .3s;
				}
				#pickupNav ul li#pnDrawing  a { background: transparent url("/common/images/pnDrawing.jpg")  no-repeat center center; }
				#pickupNav ul li#pnCustom   a { background: transparent url("/common/images/pnCustom.jpg")   no-repeat center center; }
				#pickupNav ul li#pnSample   a { background: transparent url("/common/images/pnSample.jpg")   no-repeat center center; }
				#pickupNav ul li#pnMagazine a { background: transparent url("/common/images/pnMagazine.jpg") no-repeat center center; }
				
				#pickupNav ul li a:hover { box-shadow: inset 0 0 0 10px rgba(255,255,255,0.3), inset 0 0 0 3px rgba(255,255,255,0.6); }



/*-----------------------------------------------------------
 Footer
-----------------------------------------------------------*/

footer {
	min-width: 1200px;
	padding: 40px 0 0;
	box-shadow: inset 0 -59px 0 0 #f3f3f3, inset 0 -60px 0 0 #ddd;
	}
	footer a { color: #333; }
	
	#footNav {
		width: 1200px;
		margin: 0 auto 45px;
		}
		#footNav dl ,
		#footNav ul {
			float: left;
			width: 285px;
			margin: 0 0 0 20px;
			}
			#footNav dl:nth-of-type(1) { margin-left: 0; }
			
			#footNav dl dt ,
			#footNav ul li {
				margin: 0 0 15px;
				}
				#footNav dl dt a ,
				#footNav ul li a {
					padding: 8px 15px;
					display: block;
					background: #eee;
					}
					#footNav dl dt a:hover ,
					#footNav ul li a:hover {}
				
			#footNav dl dd {
				margin: 0 0 5px; padding: 0 0 0 15px;
				font-size: 0.875rem;
				background: transparent url("/common/images/icoDotArrow.gif") no-repeat 2px 0.55rem;
				}
				#footNav dl dt + dd { margin-top: -5px; }

		#footNav p {
			float: right;
			margin: 10px 0;
			}


	#footCnt {
		width: 1200px; height: 60px;
		margin: 0 auto;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		}
		
		#footCnt ul {
			width: 880px;
			margin: 0;
			}
			#footCnt ul li {
				float: left;
				padding: 3px 20px;
				background: linear-gradient(to bottom, #333 25%, rgba(255,255,255,0) 0%) repeat-y right top;
				background-size: 1px 4px;
				}
				#footCnt ul li a {
				position: relative;
				}
				#footCnt ul li:nth-of-type(1) { padding-left: 15px; }
				#footCnt ul li:nth-last-of-type(1) { background: none; }
				#footCnt ul li:nth-of-type(2) {
					padding-right: 30px;
					}
					#footCnt ul li:nth-of-type(2) a::after {
						position: absolute;
						right: -18px; top: 5px;
						width: 15px; height: 14px;
						display: block;
						content: "";
						background: transparent url("/common/images/icoBlank.gif") no-repeat
						}
			
			#footCnt p {
				margin: 0;
				}
				#footCnt p#linkedin { width: 50px; }
				
				#footCnt p#copyright {
					width: 185px;
					padding: 0 20px 0 15px;
					text-align: right;
					white-space: nowrap;
					}
				#footCnt p#pageTop {
					width: 60px;
					}
					#footCnt p#pageTop a {
						position: relative;
						height: 60px;
						display: block;
						text-indent: 100%;
						white-space: nowrap;
						overflow: hidden;
						background: #1e3055;
						}
						#footCnt p#pageTop a:before {
							position: absolute;
							left: 50%; top: 58%;
							width: 15px; height: 15px;
							display: block;
							content: "";
							border-top:   4px solid #fff;
							border-right: 4px solid #fff;
							transform: translate(-50%,-50%) rotate(-45deg);
							transition: all ease-out .3s;
							}
							#footCnt p#pageTop a:hover:before { top: 45%; }



/* ----------------------------------------------------------
 cookieAgreementDialog
-----------------------------------------------------------*/

#js-cookieAgreementDialog {
	padding: 15px;
	text-align: center;
	border-radius: 3px;
	}
	#js-cookieAgreementDialog strong#js-cAD-title {
		margin: 0 0 10px; padding: 5px 10px;
		display: block;
		
		background: #f1f3f9;
		}
	
	#js-cookieAgreementDialog #js-cAD-message {
		margin: 0 0 20px;
		text-align: left;
		}
	
	#js-cookieAgreementDialog button {
		position: relative;
		padding: 12px 60px;
		display: inline-block;
		color: #fff;
		cursor: pointer;
		background: #1d2f54;
		border: none;
		border-radius: 5px;
		transition: all ease-out .3s;
		}
		#js-cookieAgreementDialog button:hover { background: #526b9e; }



/* ----------------------------------------------------------
 Drawer Navigation
-----------------------------------------------------------*/

#btnDrawer ,
label[for="btnDrawer"] { display: none; }

/*---------- drawerNav ----------*/

#drawerNav { display: none; }


/* ----------------------------------------------------------
 Search
-----------------------------------------------------------*/

#btnSearch { display: none; }

#searchSec {
	position: fixed;
	left: 0; top: -80px;
	width: 100%; height: 80px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	color: #fff;
	background: #112348;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	transition: all ease-out .3s .15s;
	z-index: 9;
	}
	input#btnSearch:checked ~ #searchSec { top: 0px; }
	

	form.form.gsc-search-box { margin: 0; }
	
	table.gsc-search-box ,
	table.gsc-search-box table {
		margin: 0;
		background: none;
		box-sizing: content-box;
		border: none;
		}
		table.gsc-search-box th ,
		table.gsc-search-box td {
			padding: 0;
			background: none;
			box-sizing: content-box;
			border: none;
			}
			.gsc-input-box {
				box-sizing: content-box;
				border-radius: 3px;
				}

	.cse button.gsc-search-button-v2, button.gsc-search-button-v2 {
		margin: 0; padding: 14px 35px ;
		}