@charset "utf-8";
/* @import url("/css/pages.css"); */
/* concept.css */
/*PC first*/
/*##### PC #####*/
.content_title .content_title_img{
	background: url(/shared/content_title/concept_img.jpg) no-repeat left top;
}
/* --- mainBox --- */
.mainBox{
	overflow: hidden;
}
/* --- //mainBox --- */

/* --- conceptBox --- */
.conceptBox{
	width: 960px;
	/* width: 1020px; */
    margin: 0 auto;
	padding: 30px 0 60px;
}
	.conceptBox .color001{
		color: #990000;
	}
	.conceptBox .shadow001{
		-webkit-filter: drop-shadow(3px 3px 6px rgba(0,0,0,.7));
		filter: drop-shadow(3px 3px 6px rgba(0,0,0,.7));
	}
	/* -- conceptMenuBox -- */
	.conceptBox .conceptMenuBox{
		padding-bottom: 30px;
	}
		.conceptMenuBox ul{
			display: -webkit-flex;
            -js-display: flex;
            display: -ms-flexbox;
            display: flex;
            flex-wrap:wrap;
			justify-content: center;
		}
			.conceptMenuBox ul li{
				margin-right: 30px;
			}
			.conceptMenuBox ul li:last-child{
				margin-right: 0;
			}
				.conceptMenuBox ul li a{
					display: block;
					font-size: 16px;
				    font-size: 1.6rem;
				}
	/* -- //conceptMenuBox -- */

	/* -- conceptHeadBox -- */
	.conceptBox .conceptHeadBox{
		/* padding-bottom: 60px; */
		padding: 0 10px 60px;
		border-bottom: 1px dotted #000;
		margin-bottom: 60px;
	}
		.conceptHeadBox h3{
			font-size: 24px;
			font-size: 2.4rem;
			padding-bottom: 20px;
		}
		.conceptHeadBox h4{
			font-size: 20px;
			font-size: 2.0rem;
			padding-bottom: 10px;
		}
		.conceptHeadBox > p{
			font-size: 15px;
			font-size: 1.5rem;
			line-height: 1.75;
			padding-bottom: 30px;
		}
		.conceptHeadBox ul{
			display: -webkit-flex;
            -js-display: flex;
            display: -ms-flexbox;
            display: flex;
            flex-wrap:wrap;
			/* justify-content: center; */
		}
			.conceptHeadBox ul li{
				margin-right: auto;
				width: 300px;
			}
			.conceptHeadBox ul li:last-child{
				margin-right: 0;
			}
				.conceptHeadBox ul li a{
					position: relative;
		            display: inline-block;
		            overflow: hidden;
					/* display: block; */
					color:#222;
				}
				
				.conceptHeadBox ul li p a{
					display:block;
				}
				
				.conceptHeadBox ul li a img{
					box-sizing: border-box;
					-webkit-transition: all 0.25s ease;
					-moz-transition: all 0.25s ease;
					-o-transition: all 0.25s ease;
				    transition: all 0.25s ease;
					border: 5px solid transparent;

					width: 100%;
					height: auto;
					/* outline:5px solid transparent; */
				}
				.conceptHeadBox ul li a span.star{
					opacity: 0;
	            	display: block;
	            	width: 300px;
	            	height: 600px;
	            	position: absolute;
	            	top: -150px;
	            	left: -430px;
	            	background: rgba(255, 255, 255, 0.3);

	                -webkit-transition-property: left, top, opacity;
	                   -moz-transition-property: left, top, opacity;
	                    -ms-transition-property: left, top, opacity;
	                     -o-transition-property: left, top, opacity;
	                        transition-property: left, top, opacity;
	            	-webkit-transition-duration: 0.7s, 0.5s, 0.1s;
	            	   -moz-transition-duration: 0.7s, 0.5s, 0.1s;
	            	    -ms-transition-duration: 0.7s, 0.5s, 0.1s;
	            	     -o-transition-duration: 0.7s, 0.5s, 0.1s;
	            	        transition-duration: 0.7s, 0.5s, 0.1s;
	            	-webkit-transition-timing-function: ease;
	            	   -moz-transition-timing-function: ease;
	            	    -ms-transition-timing-function: ease;
	            	     -o-transition-timing-function: ease;
	            	        transition-timing-function: ease;
	            	-webkit-transform: rotate(30deg);
	            	   -moz-transform: rotate(30deg);
	            	    -ms-transform: rotate(30deg);
	            	     -o-transform: rotate(30deg);
	            	        transform: rotate(30deg);
				}
				.conceptHeadBox ul li a:hover{
					/* -webkit-filter: drop-shadow(5px 5px 10px rgba(0,0,0,.2));
		            filter: drop-shadow(5px 5px 10px rgba(0,0,0,.2)); */
				}
					.conceptHeadBox ul li a:hover span.star{
						opacity: 0.7;
		            	top: -110px;
		            	left: 460px;
					}
					.conceptHeadBox ul li a:hover img{
						border: 5px solid #a02814;
						/* outline: 5px solid #a02814; */
						/* transform: scale(1.1); */
						/* opacity: 0.2; */
					}
				.conceptHeadBox ul li p{
					margin: 20px 0;
					font-size: 21px;
				    font-size: 2.1rem;
					color: #212121;

					position: relative;
				    font-weight:bold;
				    padding: 10px 11px 10px 15px;
				    transition: .4s;
				}
				.conceptHeadBox ul li p::before{
					position: absolute;
					display: inline-block;
					content: '';
					width: 4px;
					height: 100%;
					top: 0;
					left: 0;
					border-radius: 3px;
					background:#a02814;
				}
				.conceptHeadBox ul li p::after{
					position: absolute;
					width: 20px;
					height: 20px;
					border: 2px solid;
					border-color: #bfbfbf #bfbfbf transparent transparent;
					transform: rotate(45deg);
					content: '';
					/* font-family: "FontAwesome";
					display: inline-block;
					content: '\f105';
					color: #bfbfbf; */
					/* height: 100%; */
					right: 5px;
					top:10px;
				}
					.conceptHeadBox ul li a:hover p::after{
						border-color: #a02814 #a02814 transparent transparent;
					}
				.conceptHeadBox ul li span{
					line-height: 1.714;
					color: #505050;
				}
				.conceptHeadBox ul li span.explain{
					position: relative;
				}
	/* -- //conceptHeadBox -- */

	/* -- conceptItemBox -- */
	.conceptBox .conceptItemBox{
		display: -webkit-flex;
		-js-display: flex;
		display: -ms-flexbox;
		display: flex;
		flex-wrap:wrap;
		padding: 0 30px 60px;
		/* padding-bottom: 60px; */
	}
	.conceptBox .conceptItemBox:nth-child(odd){
		flex-direction: row-reverse;
	}
		.conceptItemBox h4{
			width: 100%;
			font-size: 20px;
			font-size: 2.0rem;
			padding-bottom: 30px;
			line-height: 1.5;
			color: #990000;
		}

		.conceptItemBox .conceptImgBox{
			display: -webkit-flex;
			-js-display: flex;
			display: -ms-flexbox;
			display: flex;
			flex-direction: column;
		}
			.conceptImgBox img{
				margin-bottom: 20px;
			}
			.conceptImgBox img:last-child{
				margin-bottom: 0;
			}
		.conceptItemBox p{
			width: 60%;
			line-height: 2.133;
			font-size: 15px;
			font-size: 1.5rem;
		}
		.conceptItemBox:nth-child(odd) .conceptImgBox{
			margin-right: auto;
		}
		.conceptItemBox:nth-child(even) p{
			margin-right: auto;
		}
	.conceptBox .conceptItemBox:last-child{
		padding-bottom: 0;
	}
	/* -- //conceptItemBox -- */

/* --- //conceptBox --- */

/* --- contactBox --- */
.contents .contactBox{
	width: 960px;
	margin:0 auto;
	border-top:1px solid #9E9E9E;
	padding-top:50px;
}
	.contents .contactBox h3{
		width: 100%;
		text-align: center;
		padding-bottom: 50px;
	}

	.contents .contactBox > .box_inner{
		display: -webkit-flex;
		-js-display: flex;
		display: -ms-flexbox;
		display: flex;
		flex-wrap:wrap;
		justify-content:space-between;
		width:920px;
		margin:0 auto;
	}

	.contents .contactBox > .box_inner .contactPhoneBox{
		width:560px;
	}

		.contents .contactBox > .box_inner .contactPhoneBox p{
			font-size:1.3em;
			margin-bottom:20px;
		}

		.contents .contactBox > .box_inner .contactPhoneBox > ul{}

		.contents .contactBox > .box_inner .contactPhoneBox > ul > li{
			margin-bottom:28px;
		}

		.contents .contactBox > .box_inner .contactPhoneBox > ul > li:last-child{
			margin-bottom:0;
		}

			.contents .contactBox > .box_inner .contactPhoneBox > ul > li > ul{}

			.contents .contactBox > .box_inner .contactPhoneBox > ul > li > ul > li{
				display:inline-block;
			}

			.contents .contactBox > .box_inner .contactPhoneBox > ul > li > ul > li:last-child{
				margin-left:20px;
			}

	.contents .contactBox ul.contactLinkBox{
		width: 300px;
	}
		.contents .contactBox ul.contactLinkBox li{
			padding-bottom: 14px;
		}
		.contents .contactBox ul.contactLinkBox li:last-child{
			padding-bottom: 0;
		}
		.contents .contactBox ul.contactLinkBox li a:hover{
			filter:alpha(opacity=70);
			-moz-opacity: 0.7;
			opacity: 0.7;
		}
/* --- //contactBox --- */

/*技術への取り組み用サブメニュー*/
.conCateHeadBox ul.lower{
	display: -webkit-flex;
	-js-display: flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	width: 90%;
}
	ul.lower li{
		box-sizing: border-box;
		width: 33.33%;
		margin-bottom: 20px;
	}
	ul.lower li:nth-child(3n),
	ul.lower li:last-child{
		margin-right: 0;
	}
	
	ul.lower li.nav_cellulosefiber{
		width:auto;
	}
	
		ul.lower li a{
			display: inline-block;
			color: #a02814;
			font-size: 15px;
			font-size: 1.5rem;
			border-bottom: 1px solid #ffffff;
			padding-bottom: 2px;
		}
			ul.lower li a:hover{
				color: #a02814;
				border-bottom: 1px solid #a02814;
			}
		ul.lower li a::before{
			font-family: "FontAwesome";
			content: "\f105";
			padding: 0 5px;
			background: #a02814;
			margin-right: 5px;
			color: #fff;
			border-radius: 3px;
		}

/*技術への取り組み用問い合わせ*/
.gijutsu_contactBox{}

	.gijutsu_contactBox > .box_header{
		text-align:center;
		margin-bottom:1.2em;
		font-size:1.2em;
	}
	
	.gijutsu_contactBox > .box_inner .contactPhoneBox{
		display:flex;
		justify-content:center;
		margin-bottom:15px;
	}
	
	/*
	.gijutsu_contactBox > .box_inner .contactPhoneBox li:first-child{
		margin-right:30px;
	}
	*/
	
	.gijutsu_contactBox > .box_inner .tel_reception{
		text-align:center;
		font-size:1.1em;
		margin-bottom:25px;
	}
	
		.gijutsu_contactBox > .box_inner .tel_reception span{
			margin-right:1em;
		}
		
	.gijutsu_contactBox > .box_inner .contactLinkBox{
		display:flex;
		justify-content:center;
	}
	
		.gijutsu_contactBox > .box_inner .contactLinkBox li{
			width:280px;
		}
		
		.gijutsu_contactBox > .box_inner .contactLinkBox li.btn_shiryo_seikyu{
			margin-right:20px;
		}
		
		.gijutsu_contactBox > .box_inner .contactLinkBox li a{
			width:100%;
			padding:10px 0 12px 0;
			font-size:1.2em;
			box-sizing:border-box;
			color: #a02814;
			display: block;
			border: 1px solid #a02814;
			text-align:center;
		}
		
		.gijutsu_contactBox > .box_inner .contactLinkBox li a:hover{
			background:rgba(160,40,20,0.1);
		}
		
		.gijutsu_contactBox > .box_inner .contactLinkBox li.btn_shiryo_seikyu a:before{
			content:url(/shared/icon_shiryo_seikyu.png);
			margin-right:15px;
			position:relative;
			top:3px;
		}
		
		.gijutsu_contactBox > .box_inner .contactLinkBox li.btn_otoiawase a:before{
			content:url(/shared/icon_otoiawase.png);
			margin-right:15px;
			position:relative;
			top:3px;
		}

@media screen and (max-width:480px){
/*##### SP #####*/
	.content_title .content_title_img{
		background-size:contain;
		background-position:left center;
	}

	/* --- conceptBox --- */
	.conceptBox{
		width: 100%;
	}
		/* -- conceptMenuBox -- */
		.conceptBox .conceptMenuBox{

		}
			.conceptMenuBox ul{

			}
				.conceptMenuBox ul li{
				    margin-right: 10px;
				}
				.conceptMenuBox ul li:last-child{

				}
					.conceptMenuBox ul li a{

					}
		/* -- //conceptMenuBox -- */

		/* -- conceptHeadBox -- */
		.conceptBox .conceptHeadBox{
			padding: 0 0 60px;
		}
			.conceptHeadBox h3{
				text-align: center;
			}
				.conceptHeadBox h3 img{
					width: 90%;
					height: auto;
				}
			.conceptHeadBox h4{

			}
			.conceptHeadBox p{

			}
			.conceptHeadBox > ul{
				justify-content: center;
			}
				.conceptHeadBox > ul li{
					margin-right: 0;
				}
		/* -- //conceptHeadBox -- */

		/* -- conceptItemBox -- */
		.conceptBox .conceptItemBox{
		    align-items: center;
			justify-content: center;
			padding: 0 0 60px;
		}
		.conceptBox .conceptItemBox:nth-child(odd){
			flex-direction: column;
		}
			.conceptItemBox h4{
				width: auto;
			}
			.conceptItemBox:last-child h4{

			}
				.conceptItemBox:last-child h4 img{
					width: 100%;
					height: auto;
				}
			.conceptItemBox .conceptImgBox{
				flex-wrap: wrap;
			    flex-direction: row;
				padding-bottom: 0;
			}
				.conceptImgBox img{
					width: auto;
					height: auto;
					margin-bottom: 0;
				}
				.conceptImgBox img:last-child{
					margin: 0 auto;
				}
			.conceptItemBox p{
				width: 100%;
				padding-bottom: 30px;
			}
			.conceptItemBox:nth-child(odd) .conceptImgBox{
				margin: 0 auto;
			}
			.conceptItemBox:nth-child(odd) p{

			}
		.conceptBox .conceptItemBox:last-child{

		}
		/* -- //conceptItemBox -- */

	/* --- //conceptBox --- */

	/* --- contactBox --- */
	.contents .contactBox{
		width:auto;
	}

	.contents .contactBox h3{
		padding-bottom:20px;
	}

	.contents .contactBox > .box_inner{
		width:auto;
	}
	
	.contents .contactBox > .box_inner .contactPhoneBox{
		width:auto;
	}
	
		.contents .contactBox > .box_inner .contactPhoneBox img{
			max-width:100%;
			height:auto;
		}

	.contents .contactBox > .box_inner .contactPhoneBox p{
		font-size:1.1em;
		line-height:1.4em;
		margin-bottom:10px;
	}

	.contents .contactBox > .box_inner .contactPhoneBox > ul{
		text-align:center;
	}

	.contents .contactBox > .box_inner .contactPhoneBox > ul > li{
		margin-bottom:20px;
	}

	.contents .contactBox > .box_inner .contactPhoneBox > ul > li > ul > li:last-child{
		margin:5px 0 0 0;
	}

	.contents .contactBox ul.contactLinkBox{
		width:100%;
		text-align:center;
		margin-top:20px;
	}
	/* --- //contactBox --- */

/*技術への取り組み用サブメニュー*/
.conCateHeadBox ul.lower{
	margin: 0 auto;
	flex-direction: column;
	width: auto;
}
	ul.lower li{
		margin-right: 0;
		margin-bottom: 10px;
		width: 100%;
	}
	ul.lower li:last-child{
		margin-bottom: 0;
	}
	
/*技術への取り組み用問い合わせ*/
.gijutsu_contactBox{}

	.gijutsu_contactBox > .box_header{
		font-size:5vw;
		line-height:1.4em;
	}
	
	.gijutsu_contactBox > .box_inner .contactPhoneBox{
		flex-direction:column;
		padding:0 10px;
		margin-bottom:0;
	}
	
	.gijutsu_contactBox > .box_inner .contactPhoneBox li img{
		max-width:100%;
		height:auto;
	}
	
	.gijutsu_contactBox > .box_inner .contactPhoneBox li:first-child{
		margin-right:0;
	}
	
	.gijutsu_contactBox > .box_inner .tel_reception{
		font-size:1em;
		margin-bottom:20px;
		padding-top:0.5em;
	}
	
	.gijutsu_contactBox > .box_inner .contactLinkBox{
		flex-direction:column;
	}
	
		.gijutsu_contactBox > .box_inner .contactLinkBox li{
			width:100%;
			margin-bottom:20px;
		}
		
		.gijutsu_contactBox > .box_inner .contactLinkBox li:last-child{
			margin-bottom:0;
		}
		
		.gijutsu_contactBox > .box_inner .contactLinkBox li.btn_shiryo_seikyu{
			margin-right:0;
		}
		
		.gijutsu_contactBox > .box_inner .contactLinkBox li a{
			padding:10px 0 12px 0;
			font-size:5vw;
		}

}