@CHARSET "UTF-8";
#top {
background:url(../images/main_image.jpg) center top no-repeat ;
height: 650px;
padding-top: 230px;
box-sizing: border-box;
margin-bottom: 40px;
}
#top_logo{
background: rgba(0,0,0,0.5);
width: 100%;
}
#top h1{
text-align: center;
padding: 16px 0;
box-sizing: border-box;
font-size: 0;
}
#business {
background:url(../images/back_image.png) center top no-repeat ;
height: 2840px;
}
.bus_title{
background: #313131;
width: 100%;
margin-bottom: 40px;
}
#business h2{
width: 1000px;
margin:0 auto;
padding-left: 30px;
box-sizing: border-box;
font-size: 0;
}
#business .bus_text {
width: 760px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.6);
font-size: 18px;
padding: 30px 50px;
box-sizing: border-box;
line-height: 34px;
margin-bottom: 40px;
}
#business li{
list-style: square;
}
#business .banner{
text-align: center;
width: 100%;
font-size: 0;
margin-bottom: 60px;
}

#work h3{
width: 1000px;
margin: 0 auto;
padding-top: 100px;
box-sizing: border-box;
}

#work .create{
background:url(../images/create_image.png) center top no-repeat ;
height: 450px;
margin-bottom: 50px;
}
#work .contents{
background:url(../images/contents_image.png) center top no-repeat ;
height: 450px;
margin-bottom: 50px;
text-align: right;
}
#work .brand{
background:url(../images/brand_image.png) center top no-repeat ;
height: 450px;
margin-bottom: 50px;
}
#work .idea{
background:url(../images/idea_image.png) center top no-repeat ;
height: 450px;
margin-bottom: 50px;
text-align: right;
}

#company{
background: #313131;
width: 100%;
height: 250px;
padding-top: 30px;
box-sizing: border-box;
}
#company h2{
width: 1000px;
margin:0 auto;
padding-left: 30px;
padding-bottom: 20px;
box-sizing: border-box;
font-size: 0;
}
#company .company_text{
width: 1000px;
margin:0 auto;
padding-left: 46px;
box-sizing: border-box;
}
#company .company_text_li{
font-size: 18px;
color:#fff;
line-height: 30px;
}

@media screen and ( max-width:780px) {
	#top_logo img{
	width: 100%;
	}
	#top {
	background:url(../images/sp_main_image.jpg) center top no-repeat ;
	background-size: contain;
	padding: 18% 0;
	margin-bottom: 20px;
	height: auto;
	}
	#top h1{
	width: 28%;
	margin: 0 auto;
	}
	#business .banner img{
	width: 100%;
	}
	#business {
	background:url(../images/sp_back_image.png) center top no-repeat ;
	height: auto;
	}
	.bus_title{
	margin-bottom: 30px;
	}
	#business h2{
	width: 100%;
	padding-left: 20px;
	}
	#business h2 img{
	width: 26%;
	}
	#business .bus_text {
	width: 100%;
	font-size: 18px;
	padding: 20px 20px 20px 40px;
	line-height: 32px;
	margin-bottom: 30px;
	}
	#business .banner{
	margin-bottom: 40px;
	}
	#work .create{
	background:url(../images/sp_create_image.png) center top no-repeat ;
		height: auto;
		margin-bottom: 0;
		padding-top: 5%;
		padding-bottom: 25%;
		background-size: contain;
	}
	#work .contents{
	background:url(../images/sp_contents_image.png) center top no-repeat ;
	height: auto;
	margin-bottom: 0px;
	padding-top: 5%;
	padding-bottom: 25%;
	background-size: contain;
	}
	#work .brand{
	background:url(../images/sp_brand_image.png) center top no-repeat ;
	height: auto;
	margin-bottom: 0px;
	padding-top: 5%;
	padding-bottom: 25%;
	background-size: contain;
	}
	#work .idea{
	background:url(../images/sp_idea_image.png) center top no-repeat ;
	height: auto;
	margin-bottom: 0;
	padding-top: 5%;
	padding-bottom: 25%;
	background-size: contain;
	}
	#work h3{
	width: 45%;
	padding-top: 0;
	margin: 0;
	}
	#work h3 img{
	width: 100%;
	}
	#work .contents h3{
	margin-left: auto;
	}
	#work .idea h3{
	margin-left: auto;
	}
	#company{
	padding-top: 20px;
	height: auto;
	}
	#company h2{
	width: 100%;
	padding-left: 20px;
	}
	#company h2 img{
	width: 28%;
	}
	#company .company_text{
	width: 100%;
	font-size: 18px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 20px;
	}
}