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

body{
	margin:0;
	min-width: 375px;
}

.inner{
   width:100%;
   overflow:hidden;
}

body h1{
	font-size: 1.2em;
	color:ghostwhite;
	background-color:tomato;
	width: 375px;
	height: 50px;
	text-align:center;
	line-height: 50px;
	font-family:Tahoma, Geneva, "sans-serif";
	position: fixed;
	margin:0;
	padding:0;
	border:0;
	border-radius: 0px 0px 20px 20px;
}
/*ヒーローエリア*/		
img{
	width: 375px;
	padding-top: 40px;
	margin-right: 0px;
	padding-right: 0px;
	margin-left: 0px;
	border: 0px;
}


h2{
	height: 60px;
	text-align: center;
	margin-top: 80px;
	padding-top: 40px;
	margin-left: auto;
	margin-right: auto;
	font-family:Arial, Helvetica, "sans-serif";
	font-size: 1em;

	background:url("image/hukidashi.png");
	background-size: cover;
	}
	

.font1 {
	font-size:16px;
	text-align: center;
	margin-top: 60px;
	width:300px;
	line-height: 2;
	margin-left: auto;
	margin-right: auto;
	font-family:Arial, Helvetica, "sans-serif";
	margin-bottom: -20px;
	}



ul{list-style: none;
}

.horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 0 0;
  display: -ms-flexbox;
  display: flex; 
  margin-top: -140px;
  marginleft:-100px;
}

.item{
	 /* 横スクロール用 */
      display: inline-block;
      width: 60%;

      /* 見た目調整 */
      height:600px;
      margin: 20px; 
	  margin-top: -30px;
}

.item img{
	margin-left: -80px;
}

/*商品紹介フォント*/
.font2 {
	font-size:14px;
	width: 170px;
	padding: center;
	pedding-top:-100px;
	margin-left: 20px;
	margin-right: auto;
	margin-top:-170px;
	font-family:Arial, Helvetica, "sans-serif";
}

h3{
	height: 60px;
	text-align: center;
	margin-top: 0px;
	padding-top: 40px;
	margin-left: auto;
	margin-right: auto;
	font-family:Arial, Helvetica, "sans-serif";
	font-size: 1em;
	
	background:url(image/hukidashi.png);
	background-size: cover;
}

.star img{
	margin-left: 20px;
	margin-top:-170px;
}

.star p{
	
	font-size:14px;
	width: 200px;
	padding: center;
	pedding-top:-100px;
	margin-left:95px;
	margin-right: auto;
	margin-top:-170px;
	font-family:Arial, Helvetica, "sans-serif";
}

.btn-border {
  display: inline-block;
  max-width: 180px;
  text-align: center;
  border: 2px solid #50C8BE;
  font-size: 12px;
  font-family:Arial, Helvetica, "sans-serif";
  color: #50C8BE;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
  margin-left: 90px;
  margin-top: 70px;
}

.btn-border:hover {
  background-color: #50C8BE;
  border-color:#90C8BE;
  color: #FFF;
}


.font3{
	font-size:16px;
	text-align:left;
	margin-top:-150px;
	width:300px;
	line-height: 2;
	margin-left: 50px;
	margin-right: auto;
	font-family:Arial, Helvetica, "sans-serif";
	margin-bottom: 80px;
}


.btn-border2 {
  display: inline-block;
  max-width: 180px;
  text-align: center;
  border: 2px solid #50C8BE;
  font-size: 12px;
  font-family:Arial, Helvetica, "sans-serif";
  color: #50C8BE;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
  margin-left: 120px;
  margin-top: 30px;
  margin-bottom: 100px;
}

.btn-border2:hover {
  background-color: #50C8BE;
  border-color:#90C8BE;
  color: #FFF;
}

h1 ul{
	font-family:Arial, Helvetica, "sans-serif";
	width: 150px;
}

ul li{
	padding-bottom: 0px;
}
.people img{
	width: 50px;
	float: left;
	margin-top: -40px;
	margin-left: -8px;
}

.font4{
	font-size:14px;
	width: 230px;
	margin-left: 20px;
	margin-right: auto;
	font-family:Arial, Helvetica, "sans-serif";
	padding-left: 50px;
	margin-top: 0px;
}


.grapefruit{
	margin-top: -30px;
	margin-left: 90px;
}


.btn-border3 {
  display: inline-block;
  max-width: 180px;
  text-align: center;
  border: 2px solid #50C8BE;
  font-size: 12px;
  font-family:Arial, Helvetica, "sans-serif";
  color: #50C8BE;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
  margin-left: 140px;
  margin-top: 20px;
  margin-bottom: 100px;
}

.btn-border3:hover {
  background-color: #50C8BE;
  border-color:#90C8BE;
  color: #FFF;
}