@charset "UTF-8";

body { font-family: メイリオ, ヒラギノ, Helvetica, Arial, Osaka,  MS PGothic ; }
.cl  { clear: both; }

#sp-lnavi {
	height:0px;
	margin:0;
	padding:0;
}


#sp-lnavi .home img{

}

#lnavi {
	display:none;
}

@media screen and (min-width: 675px) {

#sp-lnavi {

	display: none!important;

}


}

@media screen and (max-width: 674px) {



/* ---------------------------------------------------

	display: none/block;

--------------------------------------------------- */
.pc,
#nav,
#fixed-menu,
#footer #inner ul#f-link,
#footer #inner ul#f-menu,
#footer #inner #f-sitemap,
#pagetop { display: none; }

.sp,
#header-sp,
#footer #inner ul#f-sitemap-sp,
menu { display: block; }



/* ---------------------------------------------------

	base

--------------------------------------------------- */
body {
	min-width: 100%;
	position: relative;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	}
	/* ------------------------------------------- */
	body:after {
		display: block;
		height: 0px;
		clear: both;
		color: rgba(255, 255, 255, 1);
		font-size: 1px;
		}
		body { zoom: 1; }

* img { vertical-align: bottom; }



/* ---------------------------------------------------

	second-page anchor-link

--------------------------------------------------- */
#sec1,
#sec2,
#sec3,
#sec4,
#sec5,
#sec6,
#sec7,
#sec8,
#sec9,
#sec10,
#sec11,
#sec12,
#sec13,
#sec14,
#sec15 {
	margin: -25% 0 0;
	/*margin: -50% 0 0\9;*/
	padding: 25% 0 0;
	/*padding: 50% 0 0\9;*/
	}



/* ---------------------------------------------------

	container

--------------------------------------------------- */
#container {
	overflow: hidden;
	width: 100%;
	margin-top: -30px;
	margin-bottom: -120px;
	}



/* ---------------------------------------------------

	header-sp

--------------------------------------------------- */
#header-sp {
	background: #fff;
	display: block;
	top: 0;
	width: 100%;
	z-index: 9998;
	position:fixed;
	}

	#header-sp #h-logo {
		float: left;
		width: 50%;
		}
		#header-sp #h-logo img { height: 50px; }

	#header-sp #lang {
		float: right;
		width: 30%;
		}

	#header-sp #menu_button {
		display: block;
		float: right;
		list-style: none;
		}
		#header-sp #menu_button p img { height: 50px; display:none; }

	#header-sp #mail_button {
		display: block;
		float: right;
		list-style: none;
		}
		#header-sp #mail_button p img { height: 50px; display:none; }


/* ---------------------------------------------------

	sp-drawer-menu

--------------------------------------------------- */
menu {
    position: fixed;
    overflow: auto;
    top: 0;
    margin: 0;
    padding: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    z-index: 9999;
	}
	menu:after {
		display: block;
		height: 0px;
		clear: both;
		color: rgba(255, 255, 255, 1);
		font-size: 1px;
		content: ".";
		}
		menu { zoom: 1; }
	menu div {
		float: left;
		width: 20%;
	    height: 100%;
	    /*
	    background: url(../img/nav/bg-so-menu-active.png) top center repeat-y;
	    */
		}
	menu ul {
		background: #694e91;
		color: #fff;
		float: left;
	    height: 100%;
		width: 80%;
		}
		menu ul li {
			background: #694e91;
			border-top: 1px solid #694e91;
			display: block;
			}
		menu ul li.nolink {
			background: #72559d;
			border-top: 1px solid #72559d;
			display: block;
			font-size: 100%;

			padding: 5%;
			}
		menu ul li a {
			background: #72559D;
			border-bottom: 1px solid #72559D;
			color: #dfe1e5!important;
			display: block;
			font-size: 100%;

			padding: 5%;

			}
		menu ul li.cs {
			border-top: none;
			color: #dfe1e5!important;
			display: block;
			font-size: 70%;
			padding: 5%;
			width: 100%;
			}
		menu ul li.child-menu {
			background: #694e91;
			border-bottom: none;
			display: block;
			padding: 0 0 0 5%;
			}
			menu ul li.child-menu ul {
				float: none;
				width: 100%;
				}
				menu ul li.child-menu ul li { overflow: hidden; }
				menu ul li.child-menu ul li a {
					background: #694e91;

					font-size: 100%;
					}
				menu ul li a:before,
				menu ul li.cs:before,
				menu ul li.child-menu ul li a:before {
					color: #fff;
					content: '>';
					display: inline-block;
					float: right;
					font-size: 80%;
					padding: 0 3% 0 0;
					text-align: left;
					}
					menu ul li a:before { padding: 1% 3% 0 0; }
				menu ul li.child-menu ul li:first-child { border-top: none; }
				menu ul li.child-menu ul li:last-child a { border-bottom: none; }

		menu ul li#menu-first { margin: 30% 0 0; }

		menu ul li.menu-main-ttl a:before { display: none; }
		menu ul li.menu-main-ttl.nolink { padding: 5%; }
		menu ul li.menu-main-ttl.addlink a:before { padding: 5%; }
			menu ul li.menu-main-ttl.addlink a:before {
				color: #fff;
				content: '>';
				display: inline-block;
				float: right;
				font-size: 80%;
				padding: 0 3% 0 0;
				text-align: left;
				}

		menu ul li#sdm-head {
			position:fixed;
			width:80%;
			overflow: hidden;
			background: -moz-linear-gradient(top center, #694e91 0%, #694e91 100%);/* Firefox */
			background: -webkit-gradient(linear, center top, center bottom, from(#694e91), to(#694e91));/* Chrom 縺ｨ Safari */			
			background: linear-gradient(top center, #30827c 0%, #694e91 100%);/* 蜈ｱ騾� */
			}
			menu ul li#sdm-head p { padding: 3% 5%; }
			menu ul li#sdm-head p:nth-child(1) {
				float: left;
				text-align: left;
				width: 37%;
				}
			menu ul li#sdm-head p:nth-child(2) {
				float: right;
				text-align: right;
				width: 63%;
				}
				menu ul li#sdm-head p a {
					background: none;
					border-bottom: none;
					}
					menu ul li#sdm-head p a.close { color: #fff; }
					menu ul li#sdm-head p a.close:before { display: none; }
				menu ul li#sdm-head p img {
					vertical-align: middle;
					width: 50%;
					}

		body.menu_open #container {

			}



/* ---------------------------------------------------

	main-view

--------------------------------------------------- */
#main-view {}
	#main-view h1 {
		font-size: 120%;
		padding: 5% 0;
		}

	/*	home
	----------------------------------------------- */
	#home #main-view {
		margin: 15% 0 0;
		padding: 0;
		}

	/*	home
	----------------------------------------------- */
	#second #main-view {
		margin: 15% 0 0;
		padding: 2% 0 25%;
		}
	#second #main-view.noimg { padding: 2% 0 0; }
	#second #main-view h1 { padding: 5% 0; }

	#second #main-view.about,
	#second #main-view.csr,
	#second #main-view.csr.activity,
	#second #main-view.innovation,
	#second #main-view.innovation.capacitor,
	#second #main-view.product.quality,
	#second #main-view.product.car,
	#second #main-view.product.twowheel,
	#second #main-view.product.catalyst,
	#second #main-view.product.chemical,
	#second #main-view.product.about-chemical,
	#second #main-view.recruit,
	#second #main-view.technology { background-size: 100%; }



/* ---------------------------------------------------

	breadcrumb

--------------------------------------------------- */
#breadcrumb {
	border-bottom: 1px solid #ddd;
	left: 0;
	margin: 0 auto;
	padding: 0 2% 2%;
	position: relative;
	top: 0;
	width: 95%;
	}
	#breadcrumb span { font-size: 70%; }



/* ---------------------------------------------------

	con

--------------------------------------------------- */
#con { width: 100%; }

	/* home & second */
	#con .main,
	#con .side,
	#home #con .main,
	#home #con .side,
	#second #con .main,
	#second #con .side {
		float: none;
		margin: 0 auto;
		width: 90%;
		}


	/*	main
	----------------------------------------------- */
	#second #con .main,
	#con .main { margin: 30px auto 0; }


	/*	side
	----------------------------------------------- */
	#con .side.nomenu { margin: 30px auto 0; }
	#con .side #side-menu #side-menu-ttl {
		background: #00a49e;
		border: none;
		color: #fff;
		font-size: 100%;
		padding: 5%;
		}
		#con .side #side-menu ul li:last-child { border-bottom: 2px solid #00a49e; }
		#con .side #side-menu ul li a {
			font-size: 80%;
			padding: 4%;
			}
		#con .side #side-menu ul li#sm-second { font-size: 90%; }
			#con .side #side-menu ul li#sm-second ul li a { padding: 4%; }

	#con .side p { text-align: center; }


	/*	following menu
	----------------------------------------------- */
	#con .side #side-inner.floating {
		position: relative;
		top: 0;
		width: auto;
		}
	#con .side #side-inner.pinned-bottom {
		bottom: 0;
		position: relative;
		width: auto;
		_position: relative;
		}



/* ---------------------------------------------------

	footer

--------------------------------------------------- */
#footer {}

	#footer #inner {
		padding: 0;
		width: 100%;
		}

		#footer #inner ul#f-sitemap-sp {
			border-bottom: none;
			list-style: none;
			margin: 3em auto 0;
			overflow: hidden;
			}
			#footer #inner ul#f-sitemap-sp li {
				background: #eff1f3;
				font-size: 80%;
				margin: 0 0 1px;
				}
				#footer #inner ul#f-sitemap-sp li a {
					display: block;
					padding: 3% 5%;
					}
				#footer #inner ul#f-sitemap-sp li a:before {
					content: '>';
					display: inline-block;
					float: right;
					}
				#footer #inner ul#f-sitemap-sp li#fss-rec a span {
					background: url(/common/img/common/icon-external-links.png) right center no-repeat;
					background-size: 25%;
					padding: 0 5% 0 0;
					}

	#footer #f-copy {
		border-top: 1px solid #e4e4e4;
		}
		#footer #f-copy p {
			font-size: 70%;
			padding: 0 0 2em;
			line-height: 1.5em;
			}
			#footer #f-copy p:first-child { padding: 0; }
			#footer #f-copy p img { width: 50%; }
			#footer #f-copy p span {
				display: block;
				}

		#footer #f-copy p#copy {
			font-size: 50%;
			border-top: 1px solid #d4d4d4;
			padding: 1.5em 0;
			}



/* ---------------------------------------------------

	btm-menu

--------------------------------------------------- */
#btm-menu {
	bottom: 0;
	display: block;
	left: 0;
	overflow: hidden;
	position: fixed;
	width: 100%;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	-ms-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	-o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	}
	#btm-menu li { float: left; }
	#btm-menu li a {
		color: #fff;
		display: block;
		font-size: 80%;
		}
		#btm-menu li a span {
			display: block;
			width: 100%;
			}
	#btm-menu li:nth-child(1) {
		width: 50%;
		background: -moz-linear-gradient(top center, #378e8b 0%, #1e817d 100%);/* Firefox */
		background: -webkit-gradient(linear, center top, center bottom, from(#378e8b), to(#1e817d));/* Chrom 縺ｨ Safari */			
		background: linear-gradient(top center, #378e8b 0%, #1e817d 100%);/* 蜈ｱ騾� */
		}
	#btm-menu li:nth-child(2) {
		width: 50%;
		background: -moz-linear-gradient(top center, #bcc4c8 0%, #b3bdc1 100%);/* Firefox */
		background: -webkit-gradient(linear, center top, center bottom, from(#bcc4c8), to(#b3bdc1));/* Chrom 縺ｨ Safari */			
		background: linear-gradient(top center, #bcc4c8 0%, #b3bdc1 100%);/* 蜈ｱ騾� */
		}
	#btm-menu li:nth-child(3) {
		border-top: 1px solid #fff;
		text-align: center;
		width: 100%;
		background: -moz-linear-gradient(top center, #878787 0%, #565656 100%);/* Firefox */
		background: -webkit-gradient(linear, center top, center bottom, from(#878787), to(#565656));/* Chrom 縺ｨ Safari */			
		background: linear-gradient(top center, #878787 0%, #565656 100%);/* 蜈ｱ騾� */
		}
		#btm-menu li:nth-child(1) a {
			background: url(/common/img/common/icon-contact.png) 5% center no-repeat;
			background-size: 10%;
			padding: 6% 5% 6% 20%;
			}
		#btm-menu li:nth-child(2) a {
			background: url(/common/img/common/icon-catalog.png) 5% center no-repeat;
			background-size: 10%;
			padding: 6% 5% 6% 20%;
			}
		#btm-menu li:nth-child(3) a { padding: 3% 5%; }
			#btm-menu li:nth-child(1) a span { background: url(/common/img/common/icon-arrow.png) right center no-repeat; }
			#btm-menu li:nth-child(2) a span { background: url(/common/img/common/icon-arrow.png) right center no-repeat; }


	.slick-slider img{ width: 100%; }

	
}