@charset "UTF-8";
/* ------------------------------
body
------------------------------ */
body{
width:100%;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, メイリオ, sans-serif;
}
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

a{
	display:block;
}



@media only screen and (min-width: 600px) {
/* ------------------------------
header
------------------------------ */

.header{
	width:100%;
	position:fixed;
	height:95px;
	top:0;
	background-color:#fff;
	box-shadow: 0px 0px 5px #e0e0e0;
}
.header .top{
 	width:630px;
	margin:0 auto;
	padding:10px 0;
}
.header h1{
	width:180px;
	float:left;
}
.nav{
	width:450px;
	float:left;
}
.nav li{
	float: left;
	width:150px;
	//padding:10px 15px;
}

.nav li a:hover{
	background:url("../images/menu_heart.png") no-repeat center;
}
.f_side{
	width:100%;
}
.side_r{
position:fixed;
top:60px;
right:0;
width:10%;
height:100%;
background:url("../images/side1.png") repeat;
background-size:100%;
text-indent:-3000px;
}
.side_l{
position:fixed;
top:60px;
left:0;
width:10%;
height:100%;
background:url("../images/side2.png") repeat;
background-size:100%;
text-indent:-3000px;
}

#section1{
	margin-top:94px;
}
#concept{
	width:100%;
	margin:20px 0;
}
#product{
	width:100%;
	padding:170px 0 10px;
	background:url("../images/product_b.jpg") no-repeat center;
}
#product .product{
	width:80%;
	margin:0 auto;
	}
#product .product .left{
	float:left;
	width:30%;
	text-align:center;
}
#product .product .right{
	float:right;
	width:30%;
	text-align:center;
}
#product2{
width:100%;
padding:20px 0;
margin:0 auto;
text-align:center;
background:url("../images/product_b_b.jpg") no-repeat center;
}
#product2 li{
	margin-top:15px;
	text-align:center;
}
.twitter{
	width:400px;
	margin:0 auto;
}



}



@media only screen and (max-width: 600px) {

.header{
	width:100%;
}
.header .top{
 	width:80%;
	margin:0 auto;
	padding:10px 0;
}
.header h1{
	width:30%;
	margin:0 auto;
}
.nav{
	width:80%;
	margin:0 auto;
}
.nav li{
	float: left;
	width:33%;
	text-align:center;
	padding:10px 0;
}
.nav li a:hover{
	background:url("../images/menu_heart.png") no-repeat center;
	background-size:30px 30px;
}

.f_side{
	width:100%;
}
.side_r{
position:fixed;
top:0;
right:0;
height:100%;
width:10%;
background:url("../images/side1.png") repeat;
background-size:100%;
text-indent:-3000px;
}
.side_l{
position:fixed;
top:0;
left:0;
height:100%;
width:10%;
background:url("../images/side2.png") repeat;
background-size:100%;
text-indent:-3000px;
}
#concept{
	width:100%;
	margin:20px 0;
}
#product{
	width:100%;
	padding:0 0 30px;
	background:url("../images/product_b_b.jpg") repeat;
	//background-size:60%;
}
#product .product{
	width:70%;
	margin:0 auto;
	padding-top:180px;
	text-align:center;
	background:url("../images/product_b_s.jpg") no-repeat center;
	background-position : center 0;
	background-size:100%;
	}
#product .product img{
		width:100%;
	}
#product .btn img{
		width:70%;
	}


#product{
	//background-color:#fff8eb;
	//text-indent:-3000px;
	//height: 0;
	/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
	//padding-top: 76.33%;
	//background: url("../img/section01_img_sp.png") 0 0 no-repeat;
	//background-size: contain;
}
#product2{
width:100%;
padding:20px 0;
margin:0 auto;
text-align:center;
background:url("../images/product_b_b.jpg") no-repeat center;
}
#product2 li{
	margin-top:15px;
	text-align:center;
}

.twitter{
	width:80%;
	margin:0 auto;
}


}

#twitter{
	
	width:100%;
	margin:0 auto0;
	padding:50px 0;
	background:url("../images/twitter_bg.jpg") repeat;
}




#footer{
	clear:both;
	width:100%;
	padding:70px 0 40px;
	background:#018bba;
	text-align:center;
}
#footer p{
	color:#fff;
}