@charset "utf-8";

@media screen and (max-width:768px){
	#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;
	}
	
	.pc { display: none;}
	.sp { display: block;}
}

/*--------------------------------------------------------------------/
  　画面の横幅が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;
	}
	#menu li {
		width: 100%;
		border-bottom:1px solid #40B09A;
	}
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #009678;
	}
	#toggle a{
		display: block;
		position: relative;
		padding: 20px 0 20px;
		border-bottom: 1px solid #40B09A;
		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: #009678;
	}
	#toggle a:before {
		margin-top:-9px;
	}
	#toggle a:after {
		margin-top: 3px;
	}

	/*--------------------------------------------------------------------/
		マップ
	/--------------------------------------------------------------------*/
	.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;
	}
	
	/*--------------------------------------------------------------------/
		ナビ
	/--------------------------------------------------------------------*/
	#menu {
		display: none;
		width: 100%;
	}
	#menu li {
		width: 100%;
		border-bottom:1px solid #40B09A;
	}
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #009678;
	}
	#toggle a{
		display: block;
		position: relative;
		padding: 20px 0 20px;
		border-bottom: 1px solid #40B09A;
		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: #009678;
	}
	#toggle a:before {
		margin-top:-9px;
	}
	#toggle a:after {
		margin-top: 3px;
	}
	
/*--------------------------------------------------------------------/
		バナーエリア
/--------------------------------------------------------------------*/
	#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;
	}
}
@media screen and (max-width:768px){
	.img-garally ul { width: 100%; margin:0 auto; }
	.img-garally li { width: 46%; margin: 0 10px 15px; }
	.img-garally img {width: 100%; height: auto; }
}
@media screen and (max-width:640px){
	.img-garally li { width: 100%; margin: 0 0 15px; }
}

/*--------------------------------------------------------------------/
  　画面の横幅が640pxまで
/--------------------------------------------------------------------*/
@media screen and (max-width:480px){
	/*--------------------------------------------------------------------/
	    レイアウト
    /--------------------------------------------------------------------*/
	#content {
		width: 95%;
	}
	
	/*--------------------------------------------------------------------/
		ヘッダー
	/--------------------------------------------------------------------*/
	#header-bg{
		width:100%;
		height:auto;
	}
	#header-logo{
		height:0;
		padding-top:19.04%; /* 高さ÷幅×100*/
		/*background:url(../img/logo_sp.gif) 0 0 no-repeat;*/
		background-size:contain;
	}
	#article {
		width: 93%;
	}
	#article h1 {
		width: 91%;
	}
	#main {
		width: 100%;
	}
	
	/*--------------------------------------------------------------------/
		table:会社概要
	/--------------------------------------------------------------------*/
	.table01 {
		width:85%;
		padding:0 10px;
	}
	.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;}
	.table02 {
		width:90%;
		padding:0;
	}
	.table02 th,
	.table02 td{
		width:100%;
		display:block;
		border-top:none;
		padding:0.8em;
	}
	.table02 td{border-left:none;}
	.table02 tr:first-child td{border-top:none;}

	/*--------------------------------------------------------------------/
		社史概要
	/--------------------------------------------------------------------*/	
	.history dl {
		padding: 0 5px;
		overflow:hidden;
		line-height:1.5;
	}
	.history dl dt {
		float:none;
		width:100%;
		padding:10px 0.5em;
		font-weight:bold;
	}
	.history dl dd {
		margin-left:0;
		padding:0px 0.5em 10px;
		border-bottom: 1px dotted #999999;
	}

	/*--------------------------------------------------------------------/
		バナーエリア
	/--------------------------------------------------------------------*/
	#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;
	}

}