@charset "UTF-8";
/* CSS Document */
html{
	font-size: 62.5%; /*16px*62.5%=10px*/
	overflow: auto;
}

body{
	font-family: 'Lora', serif;
	font-family: 'Noto Serif JP', serif;
	overflow-x: hidden;
}

img{
	max-width: 100%;
	height: auto;
}

h1{
	text-transform: uppercase;
	font-family: 'Lora', serif;
	font-size: 6rem;
	text-align: center;
}

h2{
	font-size: 3rem;
	text-align: center;
	position: relative;
}
h2::before{
	position: absolute;
	content: '';
	border-bottom: solid 3px #528a9d;
	width: 10vw;
	bottom: -30px;
	border-radius: 30px;
	left: calc(50% - 70px);
}
h3{
	font-size: 2rem;
	border-bottom: solid 1px #333;
	padding-bottom: 10px;
	margin: 30px 0 20px;
}
a:link{
	color: #000; 
}
a:visited{
	color: #000; 
} 
a:hover { 
	color:rgba(224,224,224,1.00); 
	transition: all 0.2s;
} 
a:active { 
	color: #1b4b62; 
} 
.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

/* 画面外にいる状態 */
.fadein-right {
	opacity : 0;
	transform : translate(-50%, 0);
	transition : all 2s;
}

/* 画面内に入った状態 */
.fadein-right.scrollin {
	opacity : 1;
	transform : translate(0, 0);
} 

/* 画面外にいる状態 */
.fadein-left {
	opacity : 0;
	transform : translate(50%, 0);
	transition : all 2s;
}

/* 画面内に入った状態 */
.fadein-left.scrollin {
	opacity : 1;
	transform : translate(0, 0);
} 
/*loading*/

.loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background: #a19073;
}
.loading_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.loading-one {
  display: inline-block;
  border-top: 1px dashed #fff;
  border-bottom: 1px dashed #fff;
}
.loading-one p.loading-txt {
	animation: flash 1s linear infinite;
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.25em;
  line-height: 2.0;
  padding: 2em 0;
}
@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

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

         header

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

.header-body{
	margin: 0 10vw;
}
.logo{
	width: 130px;
}
i {
	font-size: 20px;
	margin: 10px 0;
  display: inline-block;
  position: fixed;
  padding: 0.5em 0.5em;
  text-decoration: none;
  background: #528a9d;/*ボタン色*/
  color: #FFF;
	border-radius: 50px;
	left: 74%;
	width: 40px;
	text-align: center;
	z-index: 1;
}
.fas:hover{
	background-color: #a19073;
	transition: .1s
}

.head{
	display: flex;
	padding: 50px 5vw 30px;
}
.top-img-pc{
	text-align: center;
}
.top-img-pc>img{
	width: 100%;
}
.top-img-sp{
	display: none;
}
/*---------------------------

				 navigation

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

.head-right{
	padding-top: 20px;
}
.nav-list{
	font-size: 1.8rem;
	text-transform: uppercase;
	right: 5vw;
	padding: 20vw 10vw 50px 5vw;
}
.nav-list>li{
	padding: 20px 0;
}
.nav-list>li:first-of-type::after{
	position: relative;
	left: 16px;
	content: "\f07a";
	font-family: FontAwesome;
	}
.navigation{
		position: fixed;
		top:0;
		right: -120%;
		z-index: 10;
		width: 40%;
		height: 120%;
    transition: all 0.6s;
	}
	.navigation.on {
		right: 0;
		background-color: #fff;
	}
	.black-cover.on{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 9;
		background: rgba(3,3,3,.5);
		display: block;
	}

.btn-trigger{
	-webkit-appearance:none;
	appearance:none;
	display: inherit;
	position: fixed;
	right: 15vw;
	z-index: 110;
	width: 60px;
	height: 20px;
	border: none;
	outline: none;
	background-color: transparent;
	
}
.btn-trigger span{
	position: absolute;
	display: block;
	width: 60px;
	height: 1px;
	background-color: #000;
	transition: all 0.5s;
}
.btn-trigger span:first-of-type{
	top: 0;
}
.btn-trigger span:last-of-type{
	bottom: 0;
}
.btn-trigger.on span:first-of-type{
	transform: rotate(45deg);
	top: 10px;
}
.btn-trigger.on span:last-of-type{
	transform: rotate(-45deg);
	bottom: 10px;
}

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

				 section

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

.section-body{
	margin: 0 10vw;
	padding: 200px 0;
	position: relative;
}
.section-title-bottom{
	text-align: center;
}
.section-title-bottom>img{
	width: 270px;
	height: 50px;
}

.section-body2{
	margin: 0 20vw;
	padding-top: 200px
}
.section-body3{
	padding: 100px 0;
	position: relative;
}
.section-body4{
	width: 60%;
	padding: 0px 0;
	margin-right: auto;
	margin-left: auto;
}


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

				explain

 --------------------------*/
.explain-sec{
	width: 50%;
	padding: 130px 0px 150px 10px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* .explain-div{
	text-align: center;

} */
 .explain-text{
	font-size: 1.6rem;
	font-family: 'Noto Serif JP', serif;
	padding: 10px 0px 30px 0px;
	text-align: left;
	line-height: 23px;
 }

 .explain-img{
	padding: 10px 0px 30px 0px;
 }
 @media screen and (max-width: 1024px){
	.explain-sec{
		width: 90%;
		padding: 130px 0px 50px 10px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	
	/* .explain-div{
		text-align: center;
	
	} */
	 .explain-text{
		font-size: 1.2rem;
		font-family: 'Noto Serif JP', serif;
		padding: 10px 0px 30px 0px;
		text-align: left;
		line-height: 20px;
	 }
	 
	 .explain-img{
		padding: 10px 0px 30px 0px;
	 }
	}

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

				 button

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

.read-more{
	max-width: 200px;
	padding: 20px 20px;
	background-color: #1b4b62;
  color: #fff;
	font-size: 2rem;
  text-align: center;
	margin: 0 0 0 50%;
  position: relative;
  z-index: 1;
  transition: .3s;
}
.read-more::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #a19073;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease .3s;
}

.read-more:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
.bg-fixed-pc{
	background-image: url("../img/middle-photo.jpg");
	background-attachment: fixed;
	height: 30vw;
	background-size: cover;
	background-position: 0 60%;
	position: relative;
}

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

				 about

 --------------------------*/
.about-description{
	display: flex;
	padding: 80px 0;
	justify-content: space-between;
	align-items: center;
	
}
.about-concept>img{
	width: 25vw;
}
.about-text-pc{
	font-size: 1.3vw;
	line-height: 2;
	margin: 0 auto;
}
.about-text-sp{
	display: none;
}


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

				 service

 --------------------------*/
.concept-body-1{
	display: flex;
}
.concept-body-2{
	display: flex;
	flex-direction: row-reverse;
	padding-top: 100px;
	clear: both;
	justify-content: flex-end;
	text-align: right;
}
.concept-body-3{
	display: flex;
	margin: 0 0 0 auto;
	padding-top: 100px;
}
.concept-text-1{
	margin: 0 0 0 auto;
}
.concept-text-1>img{
	margin-right: 5vw;
	width: 100px;
	height: 200px;
}
.concept-text-2>img{
	margin-left: 5vw;
	width: 100px;
	height: 180px;
}
.concept-text-3{
	margin: 0 0 0 auto;
}
.concept-text-3>img{
	margin-right: 5vw;
	width: 100px;
	height: 180px;
}
.concept-1, .concept-2, .concept-3>img{
	width: 550px;	
}
.concept-text{
	font-size: 1.4rem;
	line-height: 1.5em;
	margin-top: 20px;
}
.concept-text-sp1, .concept-text-sp2{
	display: none;
}
	
	/* detail */
	
	.about-detail{
		padding: 150px 0;
		font-size: 2rem;
		text-align: center;
		line-height: 1.8;
	}
.honey-type{
	display: flex;
	background-color: #d0c7b9;
	justify-content: space-between;
	padding: 50px 4vw;
	text-align: center;
	position: relative;
	margin-top: 10px;
	flex-wrap: wrap;
}
.honey-type>img{
	height: 28vw;
	background-color: #fff;
	box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, .3);
}
.acasia, .tochi, .rose{
	position: absolute;
  font-size: 1.4rem;
	bottom: 0;
  transform: translateY(-50%) translateX(1em);
}
.honey-type-li{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
.honey-type-li>li{
	width: 30%;
	padding: 5px;
	margin-left: auto;
	margin-right: auto;
}
/*---------------------------

				product

 --------------------------*/
.bee-img{
	width: 20vw;
	position: absolute;
	top: -10vw;
	left: -10vw;
}
.product-body{
	padding: 	150px 0 100px;
}
.product{
	display: flex;
	text-align: center;
}
.product3>a>img{
	padding-top: 1px;
}
.product-text{
	display: inline-block;
	padding: 20px 0;
	text-align: left;
}
.product-name{
	font-size: 1.4rem;
	line-height: 20px;
}
.product-price{
	display: inline-block;
	padding-top: 10px;
	font-size: 2rem;
}
.product-price-top{
	display: inline-block;
	padding-top: 10px;
	font-size: 1.5rem;
	text-decoration-line: line-through;
	text-decoration-style:solid;
	text-decoration-color: black;
}
.discount {
	text-decoration-line: line-through;
	text-decoration-style:solid;
	text-decoration-color: black;
	font-size: 1.4rem;
  }
.tax{
	font-size: 1.4rem;
}
.product1>a:hover,.product2>a:hover,.product3>a:hover{
  opacity: 0.6;
  transition: 0.3s;
}
/* 入荷待ちテスト　開始 */
.product-ind{
	position: relative;
}
.soldout{
	position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    padding:0;
    margin:0;
    font-size:2.0rem;
    color: red;
}
/* 入荷待ちテスト　終了 */
/*---------------------------

				footer

 --------------------------*/
.footer-body{
	background-color: #a19073;
	color: #fff;
	padding: 100px 15vw;
}
.vertical{
	writing-mode: vertical-rl;
	float: right;
	font-size: 1.4rem;
}
.footer-menu{
	padding: 0 10px;
	color: #fff;
}
.footer-menu:hover{
		color: #1b4b62; 
		transition: .0.2s;
} 
.goodnow{
	text-align: center;
	font-size: 1.2rem;
}
.goodnow img{
	width: 150px;
}
.address{
	line-height: 2em;
	padding-top: 50px;
}
small{
	display: inline-block;
	padding-top: 80px;
}

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

				company

 --------------------------*/
.company {
	width: 50%;
	font-size: 2rem;
	margin: 0 auto;
	padding: 150px 0 100px;
}
.company dl{
	display: flex;
	border-bottom: solid 1px #000;
	padding: 10px;
	margin-bottom: 25px;
}
.company dt{
	width: 25%;
	padding-right: 5%;
}

.company dd{
	width: 70%;
}
/*---------------------------

				p-l-g

 --------------------------*/
.privacy-law-guide{
	padding: 0 10vw;
	margin: 100px 0 0;
	font-size: 1.6rem;
	line-height: 1.5;
}
.p-l-g-headline{
	margin-bottom: 20px;
}
.p-l-g-content{
	padding-left: 60px;
	counter-reset: number 0;
	position: relative;
}
.p-l-g-content>li{
	margin: 10px 0 15px;
	
}
.p-l-g-content>li::before{
	position: absolute;
	counter-increment: number 1;
	content: counter(number,lower-alpha)'.';
	margin-left: -30px;
}
.law-padding{
	padding-bottom: 10px;
}
.product{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
.product>li{
	width: 33%;
}

@media screen and (max-width:1919px){
	.section-body2{
		margin: 0 10vw;
	}
	.product{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}
	.product>li{
		width: 33%;
	}
}
@media screen and (max-width:1024px){
	.bg-fixed-pc{
		display: none;
	}
	/* .honey-type{
		display: block;
	}
	.honey-type>img{
		display: block;
		height: 100vw;
	} */
	.product{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}
	.product>li{
		width: 33%;
	}
	.bg-fixed-sp{
		background-image: url("../img/middle-photo.jpg");
		-webkit-background-size: cover;
		background-size: cover;
		height: 60vw;
		background-position: 0 60%;
	}
	i{
		left: 65%;
	}
	.section-body4{
		width: 90%;
		padding: 0px 0;
		margin-right: auto;
		margin-left: auto;
		
	}
	.honey-type-li{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		
		
	}
	.honey-type-li>li{
		width: 45%;
		padding: 5px;
		margin-left: auto;
		margin-right: auto;
	}
	.soldout{
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		padding:0;
		margin:0;
		font-size:2rem;
		color: red;
	}
}

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

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

					 header

	--------------------------*/
	.header-body{
	margin: 0 0;
	}
	.head{
		padding-left: 10vw;
	}
	.fas{
		display: none;
	}
	.top-img-sp{
		display: block;
		width: 100%;
	}
	.top-img-sp{
		text-align: center;
		background-size: cover;
		background-image: url("../img/BEELOVED.png");
		background-repeat: no-repeat;
		background-position: center center;
		min-height: 50vw;
		/* margin-left: 7%;
		margin-right: 7%; */
	}
	.top-img-sp>img{
		display: none;
	}
	.top-img-pc{
		display: none;
	}
	/*---------------------------

					 navigation

	 --------------------------*/
	.navigation{
		width: 80%;
	}
	.btn-trigger{
		right: 10vw;
		}
	.nav-list{
		padding: 150px 22px 65px 58px;
		right: 100px;
	}

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

					 section

	 --------------------------*/
	h1{
		font-size: 3rem;
	}
	h2{
		font-size: 2rem;
	}
	h2::before {
		border-bottom: solid 2px #528a9d;
    width: 35vw;
	}
	h3{
		font-size: 1.6rem;
	}
	.section-body{
		margin: 0 50px;
		padding: 80px 0;
	}
	.section-title-bottom>img{
		width: 100px;
		height: 20px;
	}
	.section-body2{
		margin: 0;
		padding-top: 80px;
	}
	.section-body3{
		margin: 0 50px;
		padding: 70px 0;
	}
	.section-body4{
		width: 90%;
		padding: 0px 0px;
		margin-right: auto;
		margin-left: auto;
	}

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

					 about

	 --------------------------*/
	.about-description{
		display: block;
		padding: 20px 0 50px;
		justify-content: space-between;
		align-items: center;

	}
	.about-concept>img{
		width: 60vw;
	}
	.about-text-pc{
		display: none;
	}
	.about-text-sp{
		display: block;
		font-size: 1.5rem;
		line-height: 2;
		text-align: justify;
		text-justify: inter-ideograph;
	}
	.about-concept{
		text-align: center;
		padding: 20px 0;
		}
	.concept-1>img, .concept-2>img, .concept-3>img{
		width: 80vw;
	}
	.concept-1{
		margin-left: 20vw;
	}
	
	.concept-3{
		margin-left: 20vw;
	}
	.concept-2{
		margin-right: 20vw;
	}
	.concept-text{
	font-size: 1.2rem;
	margin-top: 15px;
}
	.concept-text-1,.concept-text-2,.concept-text-3{
		display: none;
	}
	.concept-text-sp1{
		display: block;
		font-size: 1.4rem;
		padding-bottom: 5px;
	}
	.concept-text-sp2{
		display: block;
		font-size: 2rem;
	}

	.about-detail{
		font-size: 1.4rem;
		margin: 0 10vw;
		padding: 100px 0;
	}
	.about-detail-sp{
		display: none;
	}
	.honey-type>img{
		margin: 0 auto 30px;
		height: 90vw;

	}
	.honey-type-li{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}
	.honey-type-li>li{
		width: 95%;
		padding: 5px;
		margin-left: auto;
		margin-right: auto;
	}
	.honey-type{
	display:block;
	background-color: #d0c7b3;
	justify-content: space-between;
	padding: 0px 0vw;
	text-align: center;
	position: relative;
	margin-top: 10px;
}
	/*---------------------------

					 button

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

	.read-more{
		font-size: 1.4rem;
		padding: 15px 20px;
		margin: 0 0 0 40%;
	}
	.bg-fixed-pc{
		display: none;
	}
	.bg-fixed-sp{
		background-image: url("../img/middle-photo.jpg");
		-webkit-background-size: cover;
		background-size: cover;
		height: 60vw;
		background-position: 0 60%;
	}

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

				product(online-shop)

	 --------------------------*/
	.bee-img{
		width: 20vw;
		top: 20vw;
		left: -20vw;
	}
	.product-body{
		padding: 	80px 0;
	}
	.product{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}
	.product>li{
		width: 50%;
	}
	.product2{
		padding-bottom: 32px;
	}
	.product-text{
		display: inline-block;
		padding: 20px 0;
		text-align: left;
	}
	.product-name{
		font-size: 1rem;
	}
	.product-price{
		display: inline-block;
		padding-top: 10px;
		font-size: 1.4rem;
	}
	.tax{
		font-size: 1rem;
	}
	.soldout{
		position: absolute;
		top:45%;
		left:50%;
		transform: translate(-50%,-50%);
		padding:0;
		margin:0;
		font-size:1.5rem;
		color: red;
	}
	/*---------------------------

					footer

	 --------------------------*/
	.footer-body{
		padding: 50px 20px;
	}
	.footer-menu{
		padding: 0 10px;
	}
	.goodnow{
		text-align: center;
		font-size: 1.2rem;
	}
	.goodnow>img{
		width: 120px;
	}
	.address{
		line-height: 2em;
		padding-top: 20px;
	}
	small{
		display: inline-block;
		padding-top: 20px;
	}
	/*---------------------------

					 company

	 --------------------------*/
	.company{
		width: 90%;
		font-size: 1.4rem;
		padding: 100px 0 50px;
	}
	.company dt{
		width: 30%;
	}
	.company dd{
		width: 65%;
	}
	
	/*---------------------------

					 p-l-g

	 --------------------------*/
	.privacy-law-guide{
		font-size: 1.3rem;
	}
	
	.p-l-g-content{
    padding-left: 30px;
	}
}