@charset "utf-8";

@media screen and (max-width:959px){
	#article {
		max-width: 96%;
		margin: 0 15px 20px;
		padding: 0;
	}
	#article h1 {
		max-width: 96%;
	}
	#main {
		max-width: 100%;
		box-sizing: border-box;
		margin: 15px auto 40px;
		padding:15px 15px 40px;
	}
	
	/*--------------------------------------------------------------------/
		ナビ
	/--------------------------------------------------------------------*/
	#menu {
		width: 100%;
	}
	
	/*--------------------------------------------------------------------/
		バナーエリア
	/--------------------------------------------------------------------*/
	#banner_area {
		width: 100%;
		margin: 20px 10px;
		box-sizing: border-box;
	}
	#banner_area li {
		width: 23%;
		margin: 0 10px 20px 0;
	}
}

/*--------------------------------------------------------------------/
  　画面の横幅が768pxまで
/--------------------------------------------------------------------*/
@media screen and (max-width:768px){

	/*--------------------------------------------------------------------/
		index.html
	/--------------------------------------------------------------------*/
	#topcover {
		display: none;
	}
	#topimg {
		display: block;
		width: 100%;
		height: auto;
		padding: 10px 0;
	}
	#topimg div.inner {
    	display: block;
    	width: 80%;
   		height: auto;
		padding-top: 80%; /* 高さ÷横幅×100 */
		margin: 0 auto;
   		background: url(../../images/topimg.png) no-repeat center 0;
   		background-size: cover;
	}

	/*--------------------------------------------------------------------/
		ナビ
	/--------------------------------------------------------------------*/
	#menu-box {
		margin: 0 auto 20px;
	}
	#menu {
		display: none;
		width: 100%;
	}
	#menu li {
		width: 100%;
		border-bottom:1px solid #E4A3AD;
	}
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #DA8198;
	}
	#toggle a{
		display: block;
		position: relative;
		padding: 20px 0 20px;
		border-bottom: 1px solid #E4A3AD;
		color:#FFF;
		text-align: center;
		text-decoration: none;
	}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background: #FFF;
	}
	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 6px;
		background: #DA8198;
	}
	#toggle a:before {
		margin-top:-9px;
	}
	#toggle a:after {
		margin-top: 3px;
	}
	
	/*--------------------------------------------------------------------/
		工場紹介
	/--------------------------------------------------------------------*/	
	.photo img{
		min-width:240px;
	}
	.photo{
		width:95%;
	}
	.photo .p-left{
		float:none;
	}
	.photo .p-right{
		float:none;
		width:100%;
	}
	#factory-tab {
		width:100%;
	}
	#factory-list{
		width:95%;
		margin:15px auto;
		text-align:center;		
	}
	#factory-list li{
		list-style:none;
		float:left;
		width:50%;
		height:40px;
		line-height:40px;
		background-color:#CEBCA8;
		border-right:solid 1px #fff;
		border-bottom:solid 1px #fff;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-left:0;
	}
	#factory-list li:nth-child(even) {
	  border-right: none;
	}
	#factory-list li:nth-last-child(1),
	#factory-list li:nth-last-of-type(2) {
	  border-bottom: none;
	}
	#factory-list li:nth-last-of-type(2):nth-child(even) {
	  border-bottom:solid 1px #fff
	}
	#factory-list li:after{
		content:"";
	}
	#factory-list li a{
		display: block;
		height:40px;
		padding:0;
	}
	#factory-list li a:hover{
		text-decoration:none;
		background-color:#D8CBB5;
	}

	/*--------------------------------------------------------------------/
		マップ
	/--------------------------------------------------------------------*/
	.g-text{
		float:none;
		margin: 0;
	}
	.g-map{
		position: relative;
		width:100%;
		padding-bottom: 75%; /*これが縦横比*/
		height: 0;
		overflow: hidden;
	}
	.g-map iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}
	
	/*--------------------------------------------------------------------/
		フッターエリア
	/--------------------------------------------------------------------*/
	#footer-menu {
		width: 93.75%;
		margin: 0 auto; 
		text-align: center;
		padding: 0;
		font-size: 13px;
		border-top: dotted 1px #603813;
	}
	#footer-menu ul li {
		padding: 20px 0; 
		border-bottom: dotted 1px #603813;
	}
	#footer-menu ul li a {
   		padding: 3px 0 3px 18px;
		background-image: url(../img/icon01.gif);
		background-repeat: no-repeat;
		background-position: left;
	}
	#footer-line {
		display: none;
	}

	address {
		width: 93.75%;
		padding: 20px 0;
		font-style: normal;
		text-align: center;
		font-size: 93%;
	}
}

@media screen and (max-width:640px){
	img{
		max-width: 100%;
		height: auto;
		width /***/: auto; /* IE8 */
		border: 0;　
	}
	html {
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
	}
	
	/*--------------------------------------------------------------------/
		バナーエリア
	/--------------------------------------------------------------------*/
	#banner_area {
		width: 100%;
		margin: 20px 10px;
	}
	#banner_area li {
		width: 47.5%;
		margin: 0 2% 20px 0;
	}
	#banner_area li.end {
		margin: 0 2% 20px 0;
	}
}

/*--------------------------------------------------------------------/
  　画面の横幅が640pxまで
/--------------------------------------------------------------------*/
@media screen and (max-width:480px){
	body {
		background:none;
		background-color:#FCEBF3;
	}
	
	/*--------------------------------------------------------------------/
		ヘッダー
	/--------------------------------------------------------------------*/
	#header-bg{
		width:100%;
		height:auto;
	}
	#header-logo{
		height:0;
		padding-top:18.18%; /* 高さ÷幅×100*/
		background:url(../img/logo_sp.gif) 0 0 no-repeat; /* androidバグ用に再記述 */
		background-size:contain;
	}
	#article {
		width: 93%;
	}
	#article h1 {
		width: 91%;
	}
	#main {
		width: 100%;
	}

	/*--------------------------------------------------------------------/
		社史概要
	/--------------------------------------------------------------------*/	
	.history dl,
	.history2 dl {
		padding: 0 5px;
		overflow:hidden;
		line-height:1.5;
	}
	.history dl dt,
	.history2 dl dt {
		float:none;
		width:100%;
		padding:10px 0.5em;
		font-weight:bold;
	}
	.history dl dd,
	.history2 dl dd {
		margin-left:0;
		padding:0px 0.5em 10px;
		border-bottom: 1px dotted #999999;
	}
	
	/*--------------------------------------------------------------------/
		table:会社概要
	/--------------------------------------------------------------------*/
	.table01 {
		width:90%;
		padding:0;
	}
	.table01 th,
	.table01 td{
		width:100%;
		display:block;
		border-top:none;
		padding:0.8em;
	}
	.table01 tr:first-child {border-top:none;}
	.table01 tr:first-child th{border-top:1px solid #ccc;}

	/*--------------------------------------------------------------------/
		table:工場紹介コンクリート
	/--------------------------------------------------------------------*/
	.table02{display:none;}
	.table03{
		display:table;
		width:97%;
		margin:0 10px;
		text-align:center;
	}
	.table03 th,
	.table03 td{
		border:1px solid #ccc;
		padding:5px;
	}
	.table03 th{
		background-color:#f2f2f2;
		text-align:center;
		font-weight:normal;
	}
	
	/*--------------------------------------------------------------------/
		バナーエリア
	/--------------------------------------------------------------------*/
	#banner_area {
		width: 100%;
		margin: 20px 10px;
	}
	#banner_area li {
		width: 96%;
		margin: 0 auto 15px;
	}
	#banner_area li.end {
		margin: 0 auto 15px;
	}

	/*--------------------------------------------------------------------/
		グループサイトへ戻る
	/--------------------------------------------------------------------*/
	#group-back img{
		text-align:center;
		width: 90%;
		max-width: 450px;
		min-width: 140px;
	}
	#group-back {
		margin: 0 auto;
	}
}