/* ******************************************************

	Wordpress default style

******************************************************* */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, p{
	border: 0;
	font-size:100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
:focus{/* remember to define focus styles! */
	outline: 0;
}
ul{
	list-style: none;
}
ol{
	margin-left:28px;
	line-height:150%;
}
table{/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
/*	border-spacing: 0;*/
}
caption, th, td{
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after{
	content: "";
}
blockquote, q{
	quotes: "" "";
}
a img{
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
	/*display: block;*/
}

/* =Global
----------------------------------------------- */

input, textarea{
	color: #373737;
	font-weight: 300;
	line-height: 1.625;
}

hr{
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.625em;
}
strong{
	font-weight: bold;
}
cite, em, i{
	font-style: italic;
}
blockquote{
	font-style: italic;
	font-weight: normal;
	margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite{
	font-style: normal;
}
blockquote cite{
	color: #666;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
pre{
	background: #f4f4f4;
	line-height: 1.5;
	margin-bottom: 1.625em;
	overflow: auto;
	padding: 0.75em 1.625em;
}
abbr, acronym, dfn{
	border-bottom: 1px dotted #666;
	cursor: help;
}
address{
	display: block;
	margin: 0 0 1.625em;
}
ins{
	background: #fff9c0;
	text-decoration: none;
}
sup,
sub{
	font-size: 10px;
	height: 0;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}
sup{
	bottom: 1ex;
}
sub{
	top: .5ex;
}

/* Forms */
input[type=text],
input[type=password],
textarea{
/*	background: #fafafa;
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	border: 1px solid #9F9F9F;
	color: #888;*/
}
#index input[type=text],
#index input[type=password],
#index textarea{
/*	border: 1px solid #676767;*/
}
input[type=text]:focus,
textarea:focus{
/*	color: #373737;*/
}
textarea{
/*	padding-left: 3px;
	width: 98%;*/
}
input{
/*	padding: 3px;*/
}
input#searchsubmit{
/*	display: none;*/
}

/* Links */
a{
	color: #221815;
	text-decoration: none;
}
a:focus,
a:active,
a:hover{
	color:#53372f;
	text-decoration: none;
}


/* error404 */
.error404 #primary{
	float: none;
	margin: 0;
}
.error404 #primary #content{
	margin: 0 7.6%;
	width: auto;
}
span.red{
	color: #FF2F44;
}

/* =IE7
----------------------------------------------- */

#ie7 article.intro{
	margin-left: -7.6%;
	margin-right: -7.6%;
	padding-left: -7.6%;
	padding-right: -7.6%;
	max-width: 1000px;
}
#ie7 section.featured-post{
	margin-left: -7.6%;
	margin-right: -7.6%;
	max-width: 850px;
}
#ie7 section.recent-posts{
	margin-right: 7.6%;
}

/* =IE8 
----------------------------------------------- */ 
 
#ie8 section.feature-image.large img{ 
	width: 100%; 
}

/* ******************************************************

	Content Layout
	
******************************************************* */

body{
	background:#FFF;
	color: #221815;
}

#bg-all{
	width:100%;
/*	height:100%;*/
	background:url(/common/img/bg_pattern01.png) repeat;
/*	margin: 0 auto;*/
}

#layout-all{
	width: 1000px;
	background:#FFF;
	margin: 0 auto;
}
#content{
	margin: 0 0 50px 0;
	border:0;
	padding:0;
}
#main-content{
	float: left;
	margin: 0 0 0 50px;
	width: 680px;
	padding:50px 0 20px 0;
	min-height:350px;
}

/* ********************************************
	clear
********************************************* */
.clear{
	clear:both;
	height:0;
	margin:0;
	padding:0;
	font-size:0;
	_font-size:0;
	line-height:0;
	_line-height:0;
}
.clearFix{
	height         :auto !important;
	height         :1px;
	min-height     :1%;  /* for IE 7*/
	/*\*//*/display:inline-table;/**/
}
.clearFix:after{
	content        :".";
	display        :block;
	clear          :both;
	height         :0;
	font-size      :1%;
	line-height    :1%;
	visibility     :hidden;
}

/* ******************************************************

	Header
	
******************************************************* */
#header{
	width:100%;
	height:165px;
	background:url(../img/bg_header.png) repeat-x left bottom;
	padding:0 0 0 0;
	margin-top:0px;
}
#header-content{
	width:1000px;
	margin:0 auto;
	padding:0 0 0 0;
}

#header .logo{
	width:200px;
	margin:58px 0 0 25px;
	float:left;
}

#header #menu{
	width:700px;
	float:left;
	margin:77px 0 0 60px;
}
#header #menu ul{
	margin: 0 0 84px 0 ;
	width:700px;
}
#header #menu ul li{
	float:left;
	margin:0 0 0 0;
}
#header #menu ul li.info{
	margin:0 0 0 50px;

}

#header #submenu{
	width:213px;
	float:right;
	margin:0 10px 0 0;
}
#header #submenu ul{
	margin: 0 0 0 0 ;
	width:213px;
}
#header #submenu ul li{
	float:left;
	margin:0 0 0 0;

}


/* ******************************************************

	Footer
	
******************************************************* */

#footer{
	border-top:1px solid #c0132b;
	width:100%;
	padding:18px 0 60px 0;
}
#footer-content{
	width:1000px;
	margin:0 auto;
}
#footer-content p{
	text-align:right;
	font-size:0.7em

}
#footer-content p img{
	position:relative;
	top:5px;
	margin:0 10px 0 15px;
}




/* ******************************************************

	Index
	
******************************************************* */
#index-header{
	height:640px !important;
	background:url() no-repeat top center;
	position:relative;
}
#index-header #header{
	position:absolute;
	top:480px;
}

.banner{
	float:left;
	margin:0 10px 25px 25px;
}

/* *******************************************************************

	Second Common

******************************************************************* */

#layout{
	width:1000px;
	margin:39px auto 0 auto;
	padding-bottom:67px;
}



/* *****************************************

	Company

******************************************* */	

table.companyinfo{
	width:690px;
	margin:0 0 60px 175px;
}
table.companyinfo th{
	width:170px;
	padding:0 0 15px 0;
	font-size:0.9em;
}
table.companyinfo td{
	line-height:200%;
	padding:0 0 15px 0;
	font-size:0.9em;
}
table.companyinfosc{
	width:3px;
	line-height:200%;
	padding:0 0 15px 0;
	font-size:0.9em;
}



/* *******************************************************************

	Products
	
******************************************************************* */

.prd-title {

	margin:0 0 33px 25px;
}
.prd-banner {
	width:1050px;
	margin:0 0 60px 25px;
}
.prd-banner li{
	float:left;
	margin:0 15px 0 0;
}
.prd-box{
	width:1120px;
	margin:0 0 60px 0;
}
.prd-sm-title{
	margin:0 0 20px 6px;
}
.prd-box .box-content{
	width:320px;
	margin:0 20px 0 6px;
	float:left;
}
.prd-box .box-content p.heading{
	font-size:1.2em;
	margin:0 0 20px 0;
}
.prd-box .box-content p{
	font-size:0.8em;
	line-height:160%;
}

.thumbnaillist{
	width:340px;
}

.thumbnaillist li{
	float:left;
	margin:0 10px 0 0;
}
.mainimglist{
	margin:0 0 10px 0;
}

/* ******************************************************

	Responsive Design
	
******************************************************* */

/* スマホ表示: 750px以下 */
@media screen and (max-width: 750px) {
	/* メインイメージ */
	#index-header {
		height: 400px !important;
		padding-top: 120px;
		box-sizing: border-box;
	}
	
	#index-header #header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		background: #fff;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}
	
	/* ヘッダー */
	#header {
		height: auto;
		padding: 20px 0;
	}
	
	#header-content {
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	#header .logo {
		float: none;
		width: 150px;
		margin: 0 auto 20px;
		text-align: center;
	}
	
	#header .logo img {
		width: 100%;
		height: auto;
	}
	
	#header #menu {
		width: 100%;
		float: none;
		margin: 0;
		text-align: center;
	}
	
	#header #menu ul {
		width: 100%;
		margin: 0;
		text-align: center;
	}
	
	#header #menu ul li {
		float: none;
		display: inline-block;
		margin: 5px;
		vertical-align: middle;
	}
	
	#header #menu ul li img {
		height: 39px;
		width: auto;
	}
	
	/* company_info.pngを非表示 */
	#header #menu ul li.info {
		display: none;
	}
	
	/* バナーセクション */
	#layout {
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.banner {
		float: none;
		width: 100%;
		margin: 0 0 15px 0;
	}
	
	.banner img {
		width: 100%;
		height: auto;
	}
	
	/* フッター */
	#footer-content {
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
}

/* スマホ表示: Products.html用 */
@media screen and (max-width: 750px) {
	/* ページ内リンクバナー: 2x2 */
	.prd-banner {
		width: 100% !important;
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	.prd-banner li {
		float: left;
		width: calc(50% - 10px);
		margin: 5px;
	}
	
	.prd-banner li img {
		width: 100%;
		height: auto;
	}
	
	/* 製品タイトル */
	.prd-title {
		margin: 20px 0 20px 20px;
	}
	
	.prd-title img {
		max-width: 100%;
		height: auto;
	}
	
	.prd-sm-title {
		margin: 20px 0 20px 20px;
	}
	
	.prd-sm-title img {
		max-width: 100%;
		height: auto;
	}
	
	/* 製品ボックス: 縦1列 */
	.prd-box {
		width: 100% !important;
		margin: 0 0 80px 0 !important;
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	.prd-box .box-content {
		float: none;
		width: 100% !important;
		margin: 0 0 20px 0 !important;
	}
	
	/* サムネイル画像 */
	.mod_thumbnail .mainimglist img {
		width: 100%;
		height: auto;
	}
	
	.thumbnaillist {
		width: 100% !important;
	}
	
	.thumbnaillist ul {
		display: flex;
		justify-content: space-between;
	}
	
	.thumbnaillist li {
		flex: 1;
		margin: 0 2px !important;
	}
	
	.thumbnaillist li img {
		width: 100%;
		height: auto;
	}
	
	/* テキスト */
	.prd-box .box-content p {
		font-size: 16px;
		line-height: 180%;
	}
	
	.prd-box .box-content p.heading {
		font-size: 18px;
		margin: 0 0 15px 0;
	}
	
	/* Facebook & ECボタン */
	.fb-like-box {
		width: 100% !important;
		margin: 20px 0;
	}
	
	.prd-box a img[alt*="公式オンラインストア"],
	.prd-box a img[alt*="公式オンラインストア"] {
		width: 100%;
		max-width: 300px;
		height: auto;
		display: block;
		margin: 0 auto;
	}
}

/* スマホ表示: Company.html用 */
@media screen and (max-width: 750px) {
	/* 会社概要画像 */
	#layout p[style*="margin"] {
		margin: 20px auto !important;
		text-align: center;
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	#layout p[style*="margin"] img {
		max-width: 100%;
		height: auto;
	}
	
	/* テーブルをカード型に */
	table.companyinfo {
		width: 100% !important;
		margin: 0 0 40px 0 !important;
		padding: 0 20px;
		box-sizing: border-box;
		display: block;
	}
	
	table.companyinfo tr {
		display: block;
		margin-bottom: 20px;
		border-bottom: 1px solid #e0e0e0;
		padding-bottom: 15px;
	}
	
	table.companyinfo th {
		display: block;
		width: 100% !important;
		padding: 0 0 5px 0 !important;
		font-weight: bold;
		font-size: 14px;
		color: #666;
	}
	
	table.companyinfo td {
		display: block;
		width: 100% !important;
		padding: 0 !important;
		font-size: 16px;
		line-height: 180%;
	}
	
	table.companyinfo td.companyinfosc {
		display: none;
	}
}

/* スマホ表示: Lubricants.html用 */
@media screen and (max-width: 750px) {
	/* 潤滑油ページのコンテンツ */
	#layout > p[style*="margin"] {
		margin: 20px auto !important;
		text-align: center;
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	#layout > p[style*="margin"] img {
		max-width: 100%;
		height: auto;
	}
	
	#layout > div {
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	#layout > div p {
		font-size: 16px;
		line-height: 180%;
		margin-bottom: 20px;
	}
	
	/* ECボタン（中央配置） */
	#layout div[align="center"] {
		text-align: center;
		padding: 20px;
	}
	
	#layout div[align="center"] img {
		max-width: 100%;
		height: auto;
	}
}

/* PC表示: 750pxより大きい */
@media screen and (min-width: 751px) {
	/* 1000pxを超えてもレイアウトを維持 */
	#layout-all {
		width: 100%;
		max-width: none;
	}
	
	#index-header {
		width: 100%;
		max-width: none;
	}
	
	#header-content,
	#layout,
	#footer-content {
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
}