/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1200px) {
	.concept-img {
 		position:absolute;
		right:0px;
		top:0px;
		z-index:99;
		width: 340px;
	}
	.header h1{
		position: absolute;
		left: 50%;
		width: 484px;
		margin-left: -240px;
		margin-top: 16%;
		z-index: 99;
	}
	
	.menu h2{
		display: block;
		margin-top: 40px;
	}
}


@media only screen and (max-width: 991px) {
	/****Ipad Portrait 768 Container 750 ****/
	body{ font-size:13px;}
	p{ line-height:20px ;}
	h2{ font-size:30px}
	h6{ font-size:16px;}
	h3{ font-size:15px;}
	.logo { margin:0;width:180px;float: left;}
	.service-list{ margin-bottom:20px; font-size:15px;}
	.featured-work p.padding-b{ padding-bottom:15px;}
	.main-section{ padding:0 0 70px;}
	.form{ margin:0;}
	.contact-info-box{ margin:20px 0;}
	.main-nav-outer{width: 100%; padding:20px 0;position:relative;}
	.main-nav{ display:none; position:absolute; left:0; width:100%; top:74px; margin:0 auto; flote : none; background:#fff;}
	.main-nav li{ display:block;}
	.main-nav li.small-logo{ display:none;}
	.main-nav li a{
		display:inline-block;
		text-transform:uppercase;
		font-family:"FOT-筑紫A丸ゴシック Std M", "TsukuARdGothicStd-M", '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
		text-decoration: none;
		margin:17px 24px;
		padding-bottom: 14px;
		transition:all 0.3s ease-in-out;
		-moz-transition:all 0.3s ease-in-out;
		-webkit-transition:all 0.3s ease-in-out;
	}
	.res-nav_click{ display:block;}
	.header h1{
		position: absolute;
		left: 50%;
		width: 351px;
		height: 103px;
		margin-left: -176px;
		margin-top: 16%;
		z-index: 99;
	}
	.concept-img {
	  position:absolute;
	  right:0px;
	  top:30px;
	  z-index:99;
	  width: 300px;
	}
	#news ul {width: 100%;max-width:640px;margin-top: 14px; float:left;}
	.news-section h2 {float:left;margin:0;padding:0;width:180px;height: auto;}
	.news-section h2 img{
		margin: 0;
		padding: 0;
	}
	
	.news-section ul li dl{
		margin: 0;
		padding: 0;
	}
	#news ul li dl dd {
	  float:left;
	  max-width: 460px;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	
	.news-section ul li dl dt {
	  float:left;
	  margin:0;
	  padding:0 18px 0 0;
	}
	
	.menu-box:nth-of-type(2n) {
	  margin: auto;
	}
	
}


@media only screen and (max-width: 837px) {
	/****Mobile Landscape 480 Container 100% ****/
	body{ font-size:12px;}
	.header h1{position: absolute;left: 50%;width: 251px;height: 103px;margin-left: -126px;margin-top: 16%;z-index: 99;}
	h2{ font-size:26px;}
	h3{ font-size:14px;}
	h6{ font-size:16px; margin-bottom:40px;}
	p{ line-height:18px;}
	.service-list{ font-size:12px; margin-bottom:20px;}
	.main-section{ padding:0 0 70px;}
	.concept-lead p{line-height: 24px;}
	.concept-box{ max-width:307px; width:auto; float:none; margin:0 auto;}
	.concept-box:nth-of-type(3n){ margin:0 auto}
	.menu-box{ max-width:307px; width:auto; height:auto; float:none; margin:0 auto 40px;}
	.menu-box:nth-of-type(3n){ margin:0 auto 40px;}
	.copyright{ font-size:12px;}
	.main-section.contact{ padding:60px 0 70px}
	.main-section.contact{ background-size:contain;}
	.menu-block h4, .access h4{text-align:center; margin: 0 auto 20px;}
	.menu-block p{text-align:center;}
	.concept-img {
	  position:absolute;
	  right:0px;
	  top:30px;
	  z-index:99;
	  width: 240px;
	}
	.news-section h2 {float:left;margin:0;padding:0;width:140px;height: auto;}
	#news ul {width: 100%;max-width:540px;margin-top: 10px; float:left;}
	.news-section ul li dl{width: 540px;margin: 0;padding: 0;}
	#news ul li dl dd {float:left; width: 340px;white-space: nowrap;text-overflow: ellipsis;}
	.footer .related-companycont h4{
		float: left;
		padding: 20px 40px 0 0;
	}
	.footer .related-companycont{
		float: left;
		width: 100%;
		padding-bottom: 20px;
	}
}

@media only screen and (max-width: 697px) {
	/****Mobile Landscape 480 Container 100% ****/
	h3.concept-line1 { font-size:18px;}
	.company-list dt {width: 100%;display: block;clear: both;}
	.company-list dd {padding:20px 20px 16px 20px;display: table;clear: both;width: 100%;}
	.news-section h2 {float:left;margin:0;padding:0;width:140px;height: auto;}
	#news ul {width: 100%;max-width:500px;margin-top: 10px; float:left;}
	.news-section ul li dl{width: 500px;margin: 0;padding: 0;}
	#news ul li dl dd {float:left; width: 300px;white-space: nowrap;text-overflow: ellipsis;}
	.footer .related-companycont h4{
		float: left;
		padding: 20px 40px 0 0;
	}
	.footer .related-companycont{
		float: left;
		width: 100%;
		padding-bottom: 20px;
	}
	
}


@media only screen and (max-width: 479px) {
	h3{ font-size:12px;}
	h3.concept-line1 {
	  font-size:16px;
	  margin:0 0 20px;
	  text-align:center;
	  display: block;
	}
	
	.menu-box {
	margin-bottom: 0;
	padding:0;
	}
	
	.concept-lead p {
	  line-height:1.9;
	  margin:0 auto;
	  text-align: center;
	}
	
	.concept-img {
	  position:relative;
	  display: block;
	  margin: 0 auto;
	  width: 80%;
	}
	/****Mobile Portrait 320 ****/
	.contact-info-box{ margin-left:0px;}
	.news-section h2 {display: none;}
	#news{padding: 0;margin-bottom: 20px;display: block;}
	#news ul{margin: 20px auto 10px;padding-left: 15px;}
	.news-section ul li dl{width: 100%;margin: 0;padding: 0;}
	#news ul li dl dd {float:left; width: 160px;white-space: nowrap;text-overflow: ellipsis;}

	/* add */
	.header h1{
		position: absolute;
		left: 50%;
		width: 200px;
		margin-left: -100px;
		margin-top: 60px;
		z-index: 99;
	}
	
	.main-section.concept {padding-top: 120px;
	}
	
	.menu-box{
		min-height: 0;
	}
		
	#news ul li dl{
	  font-size: 80%;
	}
	
	.company-list li dt{
	display: table-cell;
	border-bottom-color:#4DBCBF;
	border-bottom-style:solid;
	border-bottom-width:1px;
	width: 100px;
	font-weight: normal;
	padding: 0px 20px 16px 20px;
	vertical-align:middle;
	}
	
	.foot_nav{display: none;}
	
	.footer .companycont .tel-fax {
	  font-size:100%;
	  padding-top:6px;
	}
	
	.footer .related-companycont h4{
		display: none;
	}
	.footer .related-companycont ul li {
	  float:none;
	  width: 100%;
	  text-align: center;
	  padding: 0;
	}
	.footer .copyright{font-size:9px;}
	
	#pagetop{
		display: none;
	}
	
}