/*
Theme Name: METAL HOUSE ver.02
Theme URI: 
Author: grid inc.
Author URI: 
Description: 
Version: 1.1

*/

@charset "utf-8";
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Cardo');

/*スタイルリセット*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
	font-size: 100%;
}
.clear{ clear:both;}
li {list-style-type: none;}
/*clearfix*/
.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clearfix {display:inline-table;}

/* Hides from IE-mac ¥*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

body {
	font:14px/1.6 "メイリオ", "meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Osaka", sans-serif ;
	*font-size:small;
	*font:x-small;
	font/*\**/: 14px/1.6\9;
	vertical-align:baseline;
	font-style: normal;
	letter-spacing: normal;
	color: #111111;
	background: #000;
	}


/* リンク指定
----------------------------------------------- */
a:link {color: #7B6600; text-decoration: none;}
a:visited {color: #685816;text-decoration: none;}
a:hover {color: #90840e; text-decoration: underline;}
a img{ border: none;}
.new{font-family: 'Fjalla One', sans-serif; font-size: 11px; color: #E12499;}
.todetail{ text-align: right; padding: 3px}

.tobtn{ text-align: center;}
.btn{ padding: 0.6em 1.0em; background: #1d1d1d; color: #FFF; margin: 2.0em auto ;display: inline-block; border-radius: 6px;}
.btn:link,.btn:visited{color: #FFF;}
.btn:hover{ background: #D1d1d1; text-decoration: none;}
.imgcenter{ display: block; margin: auto; padding: 1.8em 0;}
.text-s{ font-size: 0.9rem;}

header,footer{ width: 987px; margin: 0 auto; background: #FFF;}
#main,#footer-nav{margin: 0 auto; background: #FFF}
#main{ width:891px;padding: 48px;}
#footer-nav{ width: 951px;padding: 48px 18px;}
/**/
header{ background: url(/img/metal.jpg) center top; height: 240px;}
.home { height: auto;}
header h1{margin: 0 2% 0 3%; padding: 36px 0 0}
header h2{ text-align: center; padding: 1.0em 0;}

header p.lead{margin: 28px 0% 0 3%; font-size:1.0em; line-height: 1.8em;}
.top-gallery{ float: right; margin: 0 0 0 3%;}
.top-gallery::after{ clear: both; display: block; content: ""; height: 0;}
nav { background: #FFF; font-size: 0.86em; clear: both; top: -60px; z-index: 10; position: relative;}
.home nav{top: 0; z-index: 0;}
nav ul { display: table; width: 100%; }
nav ul li{ display: table-cell; text-align: center; }
nav ul li a{ padding: 0.8em 8px; display: inline-block;}
nav ul li a:link,nav ul li a:visited{ color: #111111; }
nav ul li:hover{ background: #000; color: #FFF;}
nav ul li a:hover{color: #FFF; text-decoration: none;}
.hamburger-menu{ display: none;}

.headervisual{ width: 587px;height: 240px; float: right; }
.customer .headervisual{background: url(/img/mainvisual_customer.jpg) no-repeat;background-size: cover;}
.about .headervisual{background: url(/img/mainvisual_about.jpg) no-repeat;background-size: cover;}
.company .headervisual{background: url(/img/mainvisual_company.jpg) no-repeat;background-size: cover;}
.craftmanship .headervisual{background: url(/img/mainvisual_craft2.jpg) no-repeat right center;background-size: cover; }
.gallery .headervisual{background: url(/img/mainvisual_gallery.jpg) no-repeat;background-size: cover;}
.products .headervisual{background: url(/img/mainvisual_products.jpg) no-repeat;background-size: cover;}
.contact .headervisual{background: url(/img/mainvisual_toiawase.jpg) no-repeat;background-size: cover;}
.works .headervisual{background: url(/img/mainvisual_works.jpg) no-repeat;background-size: cover;}
.category-blog .headervisual,.single-format-standard .headervisual,.category .headervisual{background: url(/img/mainvisual_blog.jpg) no-repeat;background-size: cover;}


/**/
#page-top{ position: fixed; bottom: 24px; right: 24px; z-index: 999;}
#page-top a{ color: #000;}
#footer-nav{ clear: both; border-top: 2px solid #000;}
#footer-nav ul{ display: table;width: 100%; margin: auto;  }
#footer-nav ul li{display: table-cell; padding: 0 1% 0 1%; width: 18%;}
#footer-nav ul li h4{ text-align: center; }
#footer-nav ul li p{ height: 6.0em; font-size: 0.9em;}
#footer-nav ul li  img{ display: block; margin: auto; width: 100%; height: auto; }

footer{clear: both; padding: 4.0em 0 0; margin: auto;}
footer ul{display: table;width: 99%; margin: auto auto auto 1%; padding: 24px 0 0;}
footer ul li{ display:inline-block;font-size: 0.96em; padding: 0.4em 0 0 1%; margin: 0 0 0 0; list-style: disc;  width: 18%; }
footer ul li a:link,footer ul li a:visited,footer ul li a:hover{ color: #111111; }
footer ul li a:before{content: "●";}
footer ul::after{  clear: both; display: block; content: ""; height: 0; font-size: 0.9em; padding: 0.6em 0;}
footer .bottom{background: url(/img/metal.jpg) center top; text-align: center; padding: 0.8em 0 0.4em; font-size: 0.82em;}
footer .sns{ text-align: center; padding: 1.0em 0;}
footer .sns img{ padding: 0 0.3em;}


/*common*/
.label{ background: url(/img/metal.jpg) center top; color: #FFF;  padding: 0.4em 1.0em ;color: #000; font-weight: normal; }

#main h1{ font-size: 1.5em; margin: 0 0 1.6em -48px; width: 300px; padding: 0.3em 0 0.3em 70px; }
#main h2{margin: 0 0 0.6em 0;}
#main h3{margin: 0 0 0.6em 0;font-size: 1.2em;}
#main h2.phead{ float: left;  margin: 0 2.0em 0 0px; border-right: 4px solid #111; padding: 0 1.0em 0 80px; font-size: 1.5em; font-weight: normal; line-height: 1.0em; background: url(/img/sign.jpg) no-repeat;  ;}
#main h2.phead .caps{ font-size: 0.7em; display: block; margin-bottom: 0.8em;}
#main .lead1{ padding: 0 1.0em; overflow: hidden; margin: 0 0 4.0em 0;}
#main .lead1::after{clear: both; display: block; content: ""; height: 20px;}
#main .lead2{margin: 2.0em 0 3.0em 0;}
#main::after{clear: both; display: block; content: ""; height: 0; }
#main a img,#footer-nav a img{transition: 0.6s ;}
#main a:hover img,#footer-nav a:hover img{opacity: 0.3;}

/*top*/
#slide {width:570px;height:535px;margin:0 auto 0 12px ;position:relative;}
#slide img {position:absolute;left:0;top:0;}

.home p.lead{ font-size: 0.9em;margin-bottom: -1.0em; }
.topblog{ width: 60%; float: left; margin: 0 5% 60px 0;  padding: 0 0 18px 0; border-bottom: 1px solid #DDD;}
.topblog ul{ margin: 1.0em 0;}
.topblog li{margin: 0 1.0em 0.8em 1.0em; border-bottom: dashed 1px #ddd;}
.topblog li:before{content: "\f105";font-family: FontAwesome; }
.topblog li span.date{ font-size: 0.9em; padding: 0 0 0 1.0em;}
#top-leftbanner li { margin-bottom: 12px; }
#top-leftbanner li img{ border-radius: 6px; box-shadow: 2px 2px 2px rgba(0,0,0,0.4);}
.story { padding: 36px 0 0;}
.story .block img{border-radius: 6px; }
.story .block p{ margin-bottom: 1.2em;}
.story .left{ float: left; clear: both; margin: 0 4% 2.0em 0%; }
.story .block-r{ overflow: hidden;}
.story .block-r .photo-r img{ width: 100%; height: auto;}
.story .left iframe{width: 452px;}
.story .block{ clear: left; margin: 0 1% 3.0em;}
.story::after{clear: both; display: block; content: ""; height: 0; }


/*customer*/
.customercont{ margin: 3.0em 0 5.0em;}
.customercont::after{clear: both; display: block; content: ""; height: 0; }
#originalorder{ }
#originalorder li,#adminparts li{padding: 0 0 0 310px; min-height:101px; margin: 2.0em 0; border-bottom: dotted #DDD 1px; padding-bottom: 1.0em; }
#originalorder li:first-child{ background: url(/img/customer/img_sec_2_1.jpg) no-repeat left top;}
#originalorder li:nth-child(2){ background: url(/img/customer/img_sec_2_2.jpg) no-repeat left top;}
#originalorder li:nth-child(3){ background: url(/img/customer/img_sec_2_3.jpg) no-repeat left top;}
#originalorder li:nth-child(4){ background: url(/img/customer/img_sec_2_4.jpg) no-repeat left top;}
#originalorder li h4,#adminparts li h4{ margin: -1.0em 0 0.2em; font-size: 1.2em;}
#originalorder li p,#adminparts li p{overflow: hidden;}
.no{ font-size: 34px; float: left; padding: 0 1.0em 0em 0.4em; font-family: 'Cardo', serif; margin:0px 0 48px 0; }
#adminparts li:first-child{ background: url(/img/customer/img_sec_1_1.jpg) no-repeat left top;}
#adminparts li:nth-child(2){ background: url(/img/customer/img_sec_1_2.jpg) no-repeat left top;}
#adminparts li:nth-child(3){ background: url(/img/customer/img_sec_1_3.jpg) no-repeat left top;}
.flow-left{ width: 343px; float: left; margin: 0 0 0 0;}
.flow-right{width: 518px; float:right; }
.flow-right iframe{ width: 100%; height: 291px;}
.flow-right img,.flow-right iframe{ margin-bottom: 200px;}
.flow-left li{ margin: 0 0 20px 0; padding: 0 0 0px 0; }
.flow-left li::after { content: "\f0d7";font-family: FontAwesome; text-align: center; font-size: 60px; color: #858383; margin: auto; display: block; padding: 0; line-height: 1.0em; }
.flow-left li:last-child::after{ content: none;}
.flow-left h4{ background: #111; color: #FFF; text-align: center; font-size: 1.3em; padding: 0.3em 0; border-radius:  6px 6px 0 0; margin: 0 0 0.8em 0;}
.flow-left li p{margin: 0 0 0.6em 0;}
.qa{ }
.qa .q{ font-weight: bold; color: #009de5; font-size: 1.1em;}
#main .qa h3.label{margin-bottom: 3.0em }
.qa .a{ margin-bottom: 3.0em}
.qa .q::before{ content: "Q:"; font-size: 1.3rem; padding: 0 0.8em 0 0;}
.qa .a::before{ content: "A:"; font-size: 1.3rem; padding: 0 0.8em 0 0;font-weight: bold; }


/*works*/
.work{ }
.workcont:first-child{ margin-top: 60px;}
.workcont{border-bottom: dotted 2px #888;margin: 28px 0px 0; padding: 12px 0 36px 0;}
.workcont::after{clear: both; display: block; content: ""; height: 0;}
.workcont .leftp{ float: left; margin: 0 24px 60px 0;}
.workcont .photo2{ }
.workcont p{ margin: 0 0 1.0em ; }

/*craftmanship*/
.point3::before{clear: both; display: block; content: ""; height: 0;}
.point3{ margin: 88px 14px 0;}
.point3::after{clear: both; display: block; content: ""; height: 0;}
.point3 li{ float: left; width: 28%; margin: 0 2.5%; height: 420px;}
#main .point3 li h3{ text-align: center; font-size: 0.8rem; height:2.3em; line-height: 1.1em;}
#main .point2 li h3{ text-align: center; font-size: 1.1rem; height:2.3em; line-height: 1.1em;}

.section2{ clear: both;  height: 1px;  border: 0; background: #888; margin: 60px 0; }
.point2{ margin: 88px 14px 0;}
.point2 li{float: left; width: 45%; margin: 0 2.5% ; height: 460px;}
.point2::after{clear: both; display: block; content: ""; height: 0;}
.point2 p{ margin: 0 0 1.0em 0; height: 6.0em; }
.point2 p.record{ height: auto; margin: 0;}


/*メタルハウスについて*/
.aboutcont{ margin: 3.0em 38px 5.0em; }
.aboutcont .text1{ margin-bottom: 0.8em;}

.timelinechart{}
.timelinechart .era{width: 60px; color: #FFF; }
.timelinechart .year{ width: 200px; color: #FFF; background: #1D1D1D;}
.timelinechart .taisyo{background: #1D1D1D;}
.timelinechart .showa{background: #3F3F3F;}
.timelinechart .heisei{background: #808080;}
.timelinechart td{ padding: 1.0em;}
.aboutcont .point2 p{ height: auto;}
.aboutcont .point2 li{ height: 340px; margin-bottom: 48px;}
.about #main .point2 li h3{ margin: 0; height: auto; padding: 0 0 0.2em;}
.about #main .point2 li p{text-align: center;}
.about #main .point2 li p img{ width: 100%; height: auto;}
.aboutcont p{ margin-bottom: 1.0em; }
.originalstep h4{ background: #000; width: 100px; color: #FFF; text-align: center; margin-bottom: 0.8em;}
.aboutcont .imgcenter{width: 100%; height: auto;}

/*商品*/
.products-cont ul.point3 li{ border: 1px solid #ddd; border-radius: 6px; margin-bottom: 2.0em; padding: 1.0em 1%; width: 26%; height: 380px;}
.products-cont ul li img{ width: 100%; height: auto;}
.products-cont ul li .tobtn .btn{ text-align: center; margin: auto; display: block; margin: 1.0em 5% }
.catalogdownload{ margin: 2.0em 3%;}
.catalogdownload li{ background: #EFEFEF; padding: 1.0em 0; margin-bottom: 1.0em}
.pdf{ }
.pdf::before{content: "\f1c1";font-family: FontAwesome;padding: 0 0.4em; font-size: 40px;}


/*会社概要*/
.content{margin: 3.0em 28px 5.0em;}
.historymain{  background: url(/img/company/bg.png) no-repeat; color: #FFF; padding: 48px 28px; border-radius: 8px; background-size: cover; }
.pg-history-3{ margin:  80px 40px 80px 60px; font-size: 1.1em; font-weight: bold;}
.pg-history-3 dt{ float: left; width: 80px; }
.pg-history-3 dd{  overflow: hidden; margin-bottom: 2.0em; }
.pg-history-3  .sidephoto{ float: right;  margin: 60px 0 0 0}
.pg-history-3  .sidephoto li{ margin-bottom: 24px;}
.companyprofile{ margin: 68px 0;}
.companyprofile td,.companyprofile th{ vertical-align: top}
.companyprofile th{ border-right: dotted 1px #000; padding-right: 18px;text-align:left;}
.companyprofile td{padding-bottom: 28px; padding: 0 0 28px 48px;}
.access-tex{ float: left; margin: 0 48px 24px 0;}
.googlemap iframe{ width: 600px; height: 300px}


/**/
.contact .content p{ margin-bottom: 1.0em; }
.content .strong{ font-weight: bold;}
.contactinfo{ margin: 48px ; border: 4px solid #DDD;  padding: 20px; }
.contactinfo table{ margin: 0 48px;}
.contactinfo table th, .contactinfo table td{vertical-align: top; padding: 12px;}
.contactinfo table th{ padding: 12px 48px 0 0; white-space: nowrap; }
.contactinfo  .tel{ font-size: 2.0em;vertical-align: top; }
.content .innerbox{ margin: 28px;}
.content .innerbox li{  list-style: circle; margin-bottom: 1.0em;}

/*blog*/
#left{ width: 67%; float: left; margin: 0 3% 0 0%;}
#side{ width: 28%; float: right; margin: 0 0% 0 2%;}
#side::after{clear: both; display: block; content: ""; height: 0;}

#main  h1.blogtile{ margin: 0 0 0.2em 0; padding: 0.1em 0; width: auto; border-bottom: 3px solid #333; font-size: 1.6rem}
.eacharticle{ padding: 48px 0 0 0px; border-bottom: 1px solid #888;  margin-bottom: 160px}
.datetime{ font-size: 0.9em; color: #999;}
.catname{ margin: 0 0 3.0em 0;}
.article-footer{ text-align: right; font-size: 0.9em; padding: 80px 0 0 0;}
.blogcont{}
.blogcont img{ max-width: 100%; height: auto; /*display: block; margin: 1.0em auto ; */}
.blogcont p{ margin-bottom: 1.2em;}
.navigation{ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 1.0em 0;}
.next-entries{ float: left; width: 45%;}
.previous-entries{ float: right;width: 45%; text-align: right;}
.navigation::after{ clear: both; height: 0; display: block; content: ""; }
.information{ font-weight: bold; border-bottom: 1px solid #959595; border-top: 1px solid #959595; padding: 12px 0}

#side ul{ margin-bottom: 60px;}
#side ul li{ border-bottom:  1px dotted #ddd; padding-bottom: 0.3em; margin-bottom: 1.0em;}
#side  input[type="text"]{ padding: 0.3em;}




@media screen and (max-width : 768px){
	header,footer{ max-width: 987px; width: 100%; }
	#main{ width:100%;padding: 48px 0;}
	#footer-nav{ width:100%;padding: 48px 0;}
	#footer-nav ul li p{ height: 7.0em; }
	footer ul{display: table;width: 100%;margin: 0;}
	footer ul li{ display:inline-block;width: 19%; margin: 0; }
	header h1{ position: absolute; top:0; }
	.home header h1,.english header h1{ position: relative; top:0;  }
	.home header h1 img,.english header h1 img{ width: 180px; height: auto }
	.headervisual{ width: 487px;height: 240px; float: right; }
	nav { font-size: 9px; }
	.content img{ max-width: 100%; height: auto;}
	
	/*top*/
	.home p.lead{ font-size: 10px;}
	#slide {width:510px;height:535px; overflow: hidden;}
	#slide img {position:absolute;right:0;top:0; }
	.topblog{ width: 52%;}
	#top-leftbanner li img{ max-width: 100%; height: auto;}
	
	/*customer*/
	p.lead3,p.lead1{ margin: 1.0em 2%;}
	.flow-left{ width: 48%; }
	.flow-right{width: 48%; }
	.flow-left li p img{width: 100%;max-width: 100%; height: auto;}
	.flow-right img{ max-width: 100%; height: auto;}
	.no{ margin:0px 0 90px 0; }
	.customercont{margin: 3.0em 2% 5.0em;}
	
	/*works*/
	.workcont .leftp{ float: left; margin: 0 1% 0 0; width: 40%;}
	.workcont p{overflow: hidden; margin: 0 1%;}
	#main .workcont h3{ margin: 0 1%;}
	.workcont{ margin: 28px 2% 0;}
	
	/*craftmanship*/
	.point2 li img,.point3 li img{ max-width: 100%; height: auto;}
	
	/*blog*/
	#left{ width: 67%; float: left; margin: 0 1% 0 1%;}
	#side{ width: 28%; float: right; margin: 0 1% 0 0%;}
}


@media screen and (max-width : 766px){
	img{ max-width: 100%; height: auto;display:block}
	div,section,article{max-width: 100%;}
	
	header,footer{ width: 100%; margin: 0 auto; background: #FFF;}
	#main,#footer-nav{ padding: 48px 1%;width:98%;margin: 0 auto; background: #FFF; }
	#main{ padding-top: 12px; margin: 0 0; clear: both; }
	header{ background: url(/img/metal.jpg) center top; height: auto;}
	header::after{ }
	header h1{margin: 0 0 0 0; padding:  0px 0px 0px 0px; position: absolute; top:0px; left: 0;background: url(/img/metal.jpg) center top; width: 94%; height: 66px;}
	header h1 img{ width: 200px; height: auto; max-height:40px ;padding: 16px 0 0 12px;}
	header.home h1{ position: static; height: auto;}
	header.home h1 img{padding: 24px 0 0 3%;  }
	header h2{ text-align: center; padding: 2.0em 0;}
	.headervisual{ height: 180px; width: 100%; background-position: center center; margin: 40px 0 0 0; }
	
	nav ul{ padding: 48px 0 0 0;}
	nav ul ,nav ul li{ display: block; width: 100%; font-size: 0.9rem; font-weight: bold; line-height: 1.0em;}
	nav{ position: absolute; top: 0; right: 0;width: 100%; }
	.hamburger-menu {display: inline-block;height: 30px;padding: 18px 18px;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	position: absolute;  top: 0; right: 0;
	background: rgba(0,0,0,1.0);
	z-index: 9999; 
	}
	
	.hamburger-menu:hover {cursor: pointer;}
	.hamburger-menu .menu-item {background: #FFF;display: block;height: 3px;margin: 0 0 6px;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	width: 30px;}
	.hamburger-menu.open .menu-item {margin: 0 0 5px;}
	.hamburger-menu.open .menu-item:first-child {
	-webkit-transform: rotate(45deg);
	      transform: rotate(45deg);
	-webkit-transform-origin: 4px;
	      transform-origin: 4px;
	}
	.hamburger-menu.open .menu-item:nth-child(2) {opacity: 0;}
	.hamburger-menu.open .menu-item:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	 transform: rotate(-45deg);
	-webkit-transform-origin: 4px;
	transform-origin: 4px;
	}
	
	.home .hamburger-menu{background: rgba(0,0,0,0.0);}
	.home .hamburger-menu .menu-item{background: #FFF;}
	.home .hamburger-menu.open .menu-item{background: #000;}
	.mobile-header-nav{ z-index: 990; background: #FFF; width: 100%; position: absolute; margin: 0; display: none;}
	
	/*footer*/
	#footer-nav ul{ display: block;width: 100%; margin: auto;  }
	#footer-nav ul li{display: block; padding: 0 1% 0 1%; width: 48%; float: left; margin-bottom: 48px;}
	#footer-nav ul::after{clear: both; display: block; content: ""; height: 0; }
	#footer-nav ul li p{ margin: 0 0 0 0;height: 6.0em; }
	footer{ padding: 0; }
	footer .sns img{ display: inline;}
	footer ul,footer ul li{display: block; width: 98%; margin: 0 1%}
	
	/*common*/
	#main h1{margin: 0px 0 1.6em 0; width: auto; padding: 0.3em 0.3em 0.3em 1.0em; text-align: center;}
	#main h2{margin: 0.6em 0; text-align: left; padding: 0.3em;}
	#main h2.phead{ float: left;  margin: 0 0em 1.0em 2%; font-size: 1.1rem;}
	#main .lead1{ padding: 0; clear: both;text-align: left; margin: 0 2% 1.0em;}
	#main .lead1::after{clear: both; display:inline;}
	#main h3{ font-size: 0.8rem; text-align: center;}
	.content .innerbox{ margin: 14px 3%;}
	
	/*top*/
	.home p.lead{ font-size: 0.9rem;}
	#slide {width:100%;height:335px; overflow: hidden; z-index: 0; }
	#slide ul li{width:100%;height: auto; }
	#slide  ul li img{width: 100%; height: auto;}
	#top-leftbanner li img{ display: inline; }
	#top-leftbanner li { text-align: center;}
	.topblog{ width: 98%;margin: 0 1% 60px 1%; padding: 0; float: none;}
	.story .left{ float: none;width: 100%;margin: 0; }
	.story .left iframe,.story .block p{width:98%; margin: 0 1% 1.0em;}
	.story .left::after{ clear: both;}
	.story .block img{ width: 100%; height: auto;}
	
	/*customer*/
	.customercont{ margin: 3.0em 1% 5.0em;}
	.customercont::after{display: inline;}
	.customercont ol{ margin: 0;}
	#originalorder li,#adminparts li{ padding: 128px 0 12px 0;}
	.no{ padding: 0 0.2em 0 0; margin: -6px 0 190px 0;}
	.flow-left,.flow-right{ width:100%; float: none; margin: 0 ;}
	.flow-right{ display: none;}
	.flow-left li img{ width: 100%; height: auto;}
	#originalorder li:first-child,#originalorder li:nth-child(2),#originalorder li:nth-child(3),#originalorder li:nth-child(4),#adminparts li:first-child,#adminparts li:nth-child(2),#adminparts li:nth-child(3){background-size: contain;}

	
	/*works*/
	.works #main .lead1{ margin: 0 2%; }
	.workcont:first-child{ margin: -80px 0 0 0;}
	.workcont .leftp{ float: none; margin: 0 0 0 0; width: auto;}
	
	/*craftmanship*/
	.craftmanship .point3{ margin: 2.0em 0 0; }
	.point2{margin: 24px 0 0;}
	.point3{ margin: 2.0em auto;}
	.point3 li{ float: none; width: 96%; margin: 0 2% 48px; height: auto;} 
	.point2 li{float: none; width: 96%; margin: 0 2% 48px; height: auto;}
	.point2 p{ margin: 0 0 0.6em 0; height: auto; }
	.point2 p.record{ height: auto; margin: 0;}
	.craftmanship li img{ width: 100%; height: auto; }
	
	/*contact*/
	.contactinfo{ margin: 48px 0 ; border: 4px solid #DDD;  padding: 4%; }
	.contactinfo table{ margin: 0 1%; }
	.contactinfo table th, .contactinfo table td{ display: block; padding: 0; text-align: center;}
	.contactinfo table td{ padding-bottom: 2.0em}
	.contactinfo  .tel{ font-size: 1.6em; }
	.content .innerbox li{ margin-left: 1.0em;}
	
	/*about*/
	.aboutcont{ margin: 3.0em 5% 5.0em; }
	.timelinechart .era, .timelinechart .year{ width: auto; white-space: nowrap; padding: 0 0.2em}
	.products-cont ul.point3 li{ float:none; padding: 0 0%; width: 96%; height:auto;}
	.aboutcont .point2 li{ height: auto;}
	
	/*gallery*/
	.gallery #main .lead1{margin: 0;}
	#foogallery-gallery-640 a{ width: 30%; margin: 1.5%; display: inline;float: left}
	
	/*会社概要*/
	.content{margin: 3.0em 2% 5.0em;}
	.historymain{padding: 0px auto; }
	.company #main .lead1{margin: 0;}
	#main .historymain .lead1{  margin: 0 0 1.0em 0;}
	.pg-history-3{ margin:  0px 2% 30px 2%; font-size: 1.1em; font-weight: bold; clear: both;}
	.pg-history-3  .sidephoto{ display: none;}
	.googlemap iframe{ width: 100%; height: 300px}
	.company h3{ clear: both;}
	.companyprofile th,.companyprofile td{ display: block; border: none;}
	.companyprofile td{ padding: 0 0 28px 0;}
	
	/*blog*/
	.category-blog  #main .lead1{ display: none;}
	#left{ width: 96%; float: none; margin: 0 2%;}
	#side{ width: 96%; float: none; margin: 0 2%; clear: both; padding: 48px 0 0 0;}
	#main h1.blogtile{ text-align: left; font-size: 1.4rem; line-height: 1.4em;}
	.eacharticle{ padding: 0 0 0 0px; border-bottom: 1px solid #888;  margin-bottom: 48px}
	.eacharticle .datetime{ text-align: left; clear: both;}
}

@media screen and (max-width : 320px){
	header h1 img{ width: 180px; height: auto;}
	header.home h1 img{padding: 12px 0 0 12px;  }

}