@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	background: #fff;
}

a{
	color: #000;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: none;
}
a:active, a:focus,input:active, input:focus{outline:0;}

/*-------------------------------------------

ここから　共通

---------------------------------------------*/


div.main{
	background-image: url("../images/bg03.jpg");
	padding-bottom: 200px;
}


header img{
width: 100%;
}

h3{
	padding: 10px;
}

div.comment p{
	font-size: 1.3em;
	padding: 10px 30px
}


section{
	margin-top: 50px;
}


div.tsunagi03{
	text-align: center;
}
div.tsunagi03 img{
	width: 15%
}
/*
div.right
div.left{
	width: 500px;
	margin: 20px;
}
*/


/*-------------------------------------------

ふわっと表示

---------------------------------------------*/


.fadeIn_item.offs,
.offs .fadeIn_item{
  opacity: 0;
  transform: translateY(50px);
}
.fadeIn_item.ons,
.ons .fadeIn_item{
  transition: all 1s cubic-bezier(0, 0, 0.13, 0.79);
  opacity: 1;
  transform: translateY(0);
}




/*-------------------------------------------

メニューバー

---------------------------------------------*/

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

div#menu{
	background: #ffffff;
}

div#menu ul{
	display: flex;
	justify-content: center;
	align-items: center;
}

div#menu ul li{
	margin: 20px 50px 20px;
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
}
p.title{
	margin: 20px 0px;
}


/*-------------------------------------------

	コンセプト

---------------------------------------------*/

div.concept{
	text-align: center;
}


div.concept img{
	margin-top: 70px;
}


div.concept p{
	font-size: 1.3em;

}

div.shikiri {
	text-align: center;
	margin: 100px 0px;;
}

div.shikiri img{
	max-width:100%;
}

div.concept p.info span {
  display: inline-block;
}



/*-------------------------------------------

はちみつについて

---------------------------------------------*/

div.what_honey{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 35px;
}

div.what_honey p,
div.use p{
	font-size: 1.3em;
	width: 400px;
}

div.what_honey img,
div.use img{
	width: 100%;
}


div.what_honey div.right img{
	margin: 30px;
}


div.tsunagi{
	text-align: center;
}


div.use{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 35px;
}

div.use div.left{
	margin: 30px;
}

div.use ul li{
	padding: 10px 0;
	line-height: 3em;
	font-size: 1.3em;
}

div.use ul li span{
	color: #42210b;
	background-color: #c69c6d;
	padding: 10px 30px;
	border-radius: 30px;
	font-weight: bold;
}


/*-------------------------------------------

安心・安全性について

---------------------------------------------*/

div.anshin{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 35px;
}

div.anshin p{
	font-size: 1.3em;
	width: 400px;
}

div.anshin img{
	width: 100%;
}

div.anshin div.right img{
	margin: 30px;
}
/*-------------------------------------------

商品一覧

---------------------------------------------*/

div#item div.title{
	text-align: center;
}

div.item{
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;
}

div.item p.item_image{
	text-align: center;
}

div.item table{
	margin: 30px;
	border-top: solid thin;
	border-bottom: solid thin;
}

div.item td{
	height:30px;
}

div.modoru{
	text-align: center;
	margin: 50px 0px;
}

div.modoru p{
	color:#ffffff;
 	background-color:#BC5A19;
	border-radius:30px;
	width: 500px;
	display: inline-block;
	font-weight: bold;
	padding: 10px;
	font-size: 1.3em
}

div.modoru a{
    display: block;
	color:inherit;
}




/*-------------------------------------------

footer

---------------------------------------------*/


div.logo ul{
	display: flex;
	justify-content:center;
	flex-wrap: wrap;	
	align-items: center;
}

div.logo ul li{
	text-align: center;
}
footer p{
	text-align: center;
	padding: 30px;
}

div.logo img{
	max-width: 60%;
}

/*-------------------------------------------

 デザインB（タブレット

---------------------------------------------*/

@media screen and (max-width : 1024px) {
/* タブレット用レイアウト 600px以上の範囲に収めるデザインはこの中に記述 */
	
	/*ここから*/
	body{
		background-image: url("../images/bg03.jpg");
}

	/*ここまで*/
	
	div#menu ul li{
	text-align: left;
	}
	
	div.order-1{
		order: 2;
	}
	div.order-2{
		order: 1;
	}

	footer{
		background-color: #ffffff;
	}
	
	
/*　ハンバーガーボタン */

div#menu ul{
	display:block;
	text-align: left;
	}
	
	
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 32px;
  top   : 32px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
  
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #555;
  -webkit-transition: 0.5s all;
  -moz-transition   : 0.5s all;
  transition        : 0.5s all;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */

.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  width: 24px;
    background : #fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
  left: 60%;
  opacity: 0;
  -webkit-animation: active-btn17-bar02 .8s forwards;
  animation: active-hamburger-bar02 .8s forwards;
}
@-webkit-keyframes active-hamburger-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-hamburger-bar02 {
  100% {
    height: 0;
  }
}
.hamburger.active span:nth-child(3) {
  top: 16px;
  width: 24px;
  background : #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}


.hamburger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: '';
  width: 52px;
  height: 52px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0);
  transition: all .75s;
}
.hamburger.active::after {
  border: 2px solid #fff;
}

nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(0,0,0,0.7);
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;

}
	

/*-------------------------------------------

デザインC(スマホ)

---------------------------------------------*/
@media screen and (max-width : 599px) {
/* スマホ用レイアウト 1,025px以上の範囲に収めるデザインはこの中に記述 */
	
	div.main{
		padding-bottom: 10px;
	}
	
	div.concept img{
		margin-top: 20px;
	}
	
	div.concept p img{
		margin-top: 50px;
	}
	
	div.concept p.title img{
		max-width: 80%; 
	}
	
	div.concept p.map img{
		max-width: 90%;
	}
	

	div.main p{
		font-size: 1.2em;
	}

	
	div.what_honey div.right img{
		margin: 20px 0px;
}
	div.use div.left{
		margin: 0px;
}
	div.anshin div.right img{
		margin: 20px 0px;
}
	
	div.use ul li{
		font-size: 1.2em;
	}
	
	div.tsunagi{
		text-align: center;
	}
	
	div.tsunagi03 img{
		width: 40%;
	}

	div.what_honey p,
	div.use p{
	width: 100%
	}

	div.anshin p{
	width: 100%
	
	}

	
	
div.shikiri img{
	max-width:80%;
}
	div.modoru p{
	color:#ffffff;
 	background-color:#BC5A19;
	border-radius:30px;
	width: 300px;
	display: inline-block;
	font-weight: bold;
	padding: 10px;
	font-size: 1.3em
}
	
	div.item td.section{
	width: 125px;
	}
	
	footer div.logo ul li{
		padding-top: 30px;
	}
	
	
	}