@charset "utf-8";
/* CSS Document */

/*------------------------------------------
              Mobile 、tablet
------------------------------------------*/
@media only screen and (min-width : 1001px){
	.service-list ul{ min-width:900px;}	
	.service-list li{ width: 25%;}	
}
@media only screen and (min-width : 1201px) and (max-width : 1400px){
	.slogan-home h1{ 
		font-size:30px;
		margin:25px 0 80px 0px;
	}
}

@media only screen and (max-width : 1200px){
	
	.page-home, 
	.page-work,
	.page-contact{ 
		position:absolute;
	}
	
	.page-work,
	.work-box,
	.case-list{
		opacity:1;	
	}
	
	.page-contact, #map0,
	.page-contact .text{ 
		opacity:1;
	}
	
	
	.slogan-home{
		position:relative;
		top:0;
		left:auto;
		text-align:center;
		margin-top:180px;
		
		-webkit-transform:none;
			-ms-transform:none;
				transform:none;
	}

	.slogan-home h1{ 
		font-size:38px;
		margin:20px 0 50px 0px;
	}
	
	.device{
		position:relative;
		top:0;
		left:auto;
		right:auto;
		margin-top:60px;
			
		-webkit-transform-origin :left top;
		-ms-transform-origin: left top;
		transform-origin: left top;
	}

	/*about*/
	.page-about .content{
		height:auto;
		padding:80px 0;
	}
	
	.page-about .text{
		height:auto;		
		top:auto;
		-webkit-transform:translateY(0);
			-ms-transform:translateY(0);
				transform:translateY(0);
	}
	
	.title-about{
		position:static;
		float:left;
		width:100%;
		height:170px;
		left:0;
		margin-left:0;
	}
	
	/*work*/	
	.work-box{ display:none;}
	
	.case-list{
		position:relative;
		left:50%;
		top:0;
		margin-top:12%;
		margin-bottom:12%;
		
		-webkit-transform-origin: center;
		-ms-transform-origin: center;
		transform-origin: center;
	}
	
	/*contact*/
	.page-contact .w-area{ white-space: normal;	}
	
	
}

@media only screen and (max-width : 1000px){
	/*footer*/		
	.page-footer .content{ height:170px;}
	.page-footer .text{ background:none;}
	.link, .share, .link li{ display:block;}	
	.page-footer .t1{ text-align:left; }
	.share ul{
		text-align:left;
		margin-top:-4px;
		margin-left:0;
	}	
	.share li{
		margin-left:0;
		margin-right:10px;
	}
}

@media only screen and (max-width : 780px){
	.tablet,
	.mobile, 	
	.img-cover,
	.line-group{ display:none;}	
	
	.device{
		position:relative;
		top:0;
		right:auto;
		width:100%;
		margin:40px 0 80px;
		box-shadow: 0px 0px 10px #888;
	}
	.pc{ 
		position:static; 
		left:0; 
		height:100%;
	}		
	.pc .open{ 
		margin:0; 
		width:100%; 
		height:100%;
	}

	.heading{
		position:absolute;
		right:10%;
		font-size:28px;
	}
	.page-about .text{ 
		float:none; 
		width:auto;
	}	
	.title-about{ float:none;}
	.slogan-about{font-size:14px;}	
	
	/*service*/
	.service-list ul{ width:100%; min-width:0;}	
	.service-list li{ height:160px; padding:0;}	
	.service-photo{ 
		height:80px; 
		padding:0;
		
		-webkit-transform:scale(0.8);
			-ms-transform:scale(0.8);
				transform:scale(0.8);
	}
	
	/*contact*/
	.page-contact h1{ margin-top:60px;}
	.page-contact .text-wrap{
		padding:40px 0;
		background:none;
	}
	
	.page-contact .text{
		width:100%;
		padding:0 8%;
		margin:20px 0;
	}
	.page-contact .w-area{
		position:relative;
		top:0;

		-webkit-transform:translate(-50%, 0);
			-ms-transform:translate(-50%, 0);
				transform:translate(-50%, 0);
	}
}
	
@media only screen and (max-width : 520px){
	.slogan-home h1{ 
		font-size:28px;
		letter-spacing:3px;
		margin:20px 0 30px 0px;
	}
	.slogan-home p{display:block;}
	.page-home .dsic{display:none;}
	
	/*work*/
	.case-list{
		margin-top:0%;
		margin-bottom:0%;
	}
	
	/*service*/
	.service-list li{ width:50%;}
	
	/*footer*/
	.footer-logo{ position:relative;}
	.page-footer .content{ height:240px;}
	.page-footer .text{
		position:absolute;
		margin-left:110px;
		left:5%;
		right:0;
	}
}