@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Limelight&family=Noto+Sans+JP:wght@100..900&display=swap');


/* 幅 */
.top-content{
  width: 106rem;
  padding: 2rem;
}

 @media (max-width: 768px) {
.top-content{
  width: 100%;
}


 }

/* MV */

.hero{
  position: relative;
  height: 68vw;
  background-color: var(--main-color);
}

#swiper-wrapper{
  position: relative;
}

#swiper-wrapper{
  position: relative;
}

#swiper-wrapper .swiper-slide{
  position: absolute;
  display: none;
  
}

#swiper-wrapper .swiper-slide:first-child{
  position: absolute;
  display: block;
  transition: opacity 2s ease;
}

#dots{
  position: absolute;
  bottom: 0.5rem;
  right: 0;
}

.inner-dots{
  display: flex;
  width: 8rem;
  justify-content: center;
  gap: 2rem;
  margin-right: 12rem;
  align-items: center;
}

.hero-btn{
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #545252;
  z-index: 10;

}

.hero-btn.active{
  background-color: #e69c2f;

}


 @media (max-width: 768px) {

  .hero{
    height: 69vw;
  }


#dots{
  bottom: 0.4rem;
  right: -8rem;
  z-index: 0;
}

 }




/* title */
.top-ttl{
margin: 0 auto;
width: 28rem;
position: relative;
}

.top-news .top-ttl::before{
  content: '';
  position: absolute;
  width: 18%;
  height: 42%;
  top: -4rem;
  left: 30%;
  background: url('../img/bee-y.svg');
  background-repeat: no-repeat;
  transform: translateX(50%);
  background-position: center;
  background-size: contain;
}


/* header */
.header{
  background-color: var(--main-color);
  position: absolute;
  z-index: 10;
  left: 10rem;
  padding:5rem;
  height: 68vw;
}

.header__nav-list li{
  position: relative;
}

  .header__nav-list li::before{
    content: "";
    background: url(../img/bee-b.svg);
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    opacity: 0;
    position: absolute;
    top:2rem;
    left: -4rem;
    transition: 0.3s ease-in-out;
  }


   .header__sns li{
    position: relative;
   }

  .header__sns li::before{
    content: "";
    background: url(../img/bee-b.svg);
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    opacity: 0;
    position: absolute;
    top:4rem;
    left: -4rem;
    transition: 0.3s ease-in-out;
  }




.header__nav-list li{
  padding: 1.8rem 0;
  position: relative;
}

 @media (max-width: 768px) {

  .header{
    background-color: transparent;
    left: 0;

  }


 }

/* Top news */
.top-news{
  margin: 0 auto;
  background:var(--main-bg) ;
  padding: 4rem 0;
}

.top-news .top-content{
  margin: 0 auto;
  padding-bottom: 8rem;
}


.CMS-NEWS-INDEX {
  display: flex;
  gap: 2rem;
  color: #fff;
  width: 30rem;

}

.CMS-NEWS-MORE-READ{
  display: none;
}

 @media (max-width: 768px) {

.CMS-NEWS-INDEX{
  width: 100%;
  flex-direction: column;
}

 }

/* concept */
.concept{
  background: url(../img/sub-bg.jpg);
  padding: 8rem 4rem 8rem 4rem;
}

.about-concept{
  margin: 0 auto;
  width: 140rem;
  padding-bottom: 6rem;
  position: relative;
}

.about-concept-txt{
  width: 47rem;
  margin: 0 auto;

}

 @media (max-width: 768px) {

  .concept{
    padding-bottom: 38rem;
  }

  .about-concept{
    width: 100%;
    padding-top: 4rem;

  }

  .about-concept-txt{
    padding-top: 38rem;
  }



 }


.sub-ttl{
  font-size:4rem;
  text-align: center;
  line-height: 1.2;
  padding-bottom: 4rem;
}

.sub-ttl span{
  font-size: 3rem;
}

.about-concept-txt .top-ttl{
  width: 42rem;
  position: relative;
}

.about-concept-txt .top-ttl::before{
   content: '';
  position: absolute;
  width: 18%;
  height: 42%;
  top: -5rem;
  left: 30%;
  background: url('../img/bee-b.svg');
  background-repeat: no-repeat;
  transform: translateX(50%);
  background-position: center;
  background-size: contain;
}

.about-concept-txt p{
  text-align: center;
}

.about-concept{
  position: relative;
}


/* concept蜂 */
.deco-concept{
  width: 14rem;
  position: absolute;
  top: -29%;
  right: 30%;
}

/* concept装飾画像調整 */
.concept-img{
  display: flex;
  gap: 58rem;
  position: relative;
}

.concept-img figure img,.concept-img-bottom figure img{
  border-radius: 4rem;
  position: relative;
}

.about-concept .concept-img:nth-of-type(1) figure:nth-of-type(1){
  position: absolute;
  left: -20rem;
  top: -4rem;
  width: 48rem;
  border-radius: 4rem;
}


.about-concept .concept-img:nth-of-type(1) figure:nth-of-type(2){
  position: absolute;
 right: 4rem;
  top: 0;
  width: 28rem;
  
}

.about-concept .concept-img-bottom figure:nth-of-type(1){
  position: absolute;
  width: 28rem;
  bottom: -12rem;
  left: 0;

}


.about-concept .concept-img-bottom figure:nth-of-type(2){
  position: absolute;
  right: 0;
  bottom: -12rem;
}

.about-concept .concept-img-bottom figure:nth-of-type(2) img{
  width: 32rem; 
  height: 30rem;
  object-fit: cover;
  object-position: left;
  border-radius: 4rem 0 0 4rem;
}

.bg-box{
  position: absolute;
  top: 0rem;      
  left: 1rem;
  width: 100%;
  height: 100%;
  background-color: orange;
  border-radius: 4rem;
  z-index: 0;
}

.concept-img-bottom figure:nth-of-type(2) .bg-box {
  width: 97%;
}


 @media (max-width: 768px) {

  .about-concept .concept-img:nth-of-type(1) figure:nth-of-type(2){
    right: -5rem;
  }

  .about-concept .concept-img-bottom figure:nth-of-type(1){
   bottom: -38rem;
  }

    .about-concept .concept-img-bottom figure:nth-of-type(2){
   bottom: -46rem;
   right: -6rem;
  }

    .deco-concept{
    top: -9rem;
  }



 }

/* メニュー */
.menu{
  background: url('../img/main-bg.jpg');
  padding: 8rem 0;

}

.about-menu{
  margin: 0 auto;
  position: relative;

 
}

.about-menu-inner{
  background: url('../img/sub-bg.jpg');
   border-radius: 2.4rem;
   position: relative;
   padding: 4rem;
   margin: 8rem 0;
}

.about-menu-inner::after{
  content: '';
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  border: #000 solid 3px;
  border-radius: 2.4rem;
  
}

.menu-inner-detail{
  width: 52rem;
  margin-left:auto;
  padding: 8rem 6rem 44rem 2rem;
}

.about-menu-inner .view-more{
  margin-left: 0;
  margin-top: 4rem;
  z-index: 1;
  position: relative;
}

.menu .top-ttl{
  margin-left: 0;
  position: absolute;
  top: 0rem;
  z-index: 1;
  width: 27rem;
}

.about-menu-inner .sub-ttl{
  text-align: start;
}

/* メニュー画像 */
.menu-img{
  position: absolute;
  top: 38rem;
  left: 10rem;
}

.menu-img figure:nth-of-type(1){
  width: 32rem;
  padding-bottom: 1.8rem;
}

.menu-img figure:nth-of-type(2){
  width: 42rem;
}

.menu-food1{
  position: absolute;
  top:8rem;
  left: -4rem;
  width: 42rem;
  z-index: 1;
}

/* メニューデコ */
.deco-menu-bee{
  width: 14rem;
  position: absolute;
  right: 0;
  top: -4rem;
  z-index: 1;
}
.menu-food2{
  position: absolute;
  width: 42rem;
  bottom: 20rem;
  right: -6rem;
  z-index: 1;
}

.deco-menu-bee2{
  position: absolute;
  width: 14rem;
  right: 34rem;
  bottom: 0;
  z-index: 1;
}

.deco-menu-ttl{
  position: absolute;
  width: 32rem;
  bottom: 2rem;
  right: -4rem;
  z-index: 1;
}


@media (max-width: 767px) {
.menu{
  padding: 10rem 0;
}

.menu-inner-detail 
{
  width: 100%;
}

.menu .top-ttl{
  left: 27%;
  top: 2rem;
  width: 32rem;
}

.about-menu-inner .sub-ttl{
  padding: 4rem 0;
}

.about-menu-inner p{
  padding-bottom: 34rem;
}

.menu-img 
{
  display: flex;
  gap: 2rem;
  left: 4.5rem;
  top:79rem;
  height: fit-content;

}
.menu-food1{
  top: -24rem;
}

.menu-food2 
{
  bottom: 16rem;
  right: 0;
}

.menu-img figure:nth-of-type(1) 
{
  width:27rem;
}

.menu-img figure:nth-of-type(2){
  width: 35rem;
}

.deco-menu-bee2{
  left: 0;
  width: 20rem;
}

.deco-menu-ttl {
  right: 0;

}


}

/* メニュードリンク */

.top-drink{
  position: relative;
  background-color: #fffbcc;
  border-radius: 30rem;
  border: solid orange 10px;
  margin: 0 6rem;
  
}

.top-drink-detail{
  position:relative;
}

.drink-txt{
  padding: 6rem 4rem;
  width: 50rem;
 margin: 0 auto;

}

.drink-txt p{
  padding-bottom: 3rem;
}

.drink-txt figure{
  width: 18rem;
  position: absolute;
  right: 1rem;
  top: -4rem;
}

.top-drink-detail .top-ttl{
  position:absolute;
  top: -6rem;
  left: -4rem;
  width: 24rem;

}

.view-more-drink{
  text-align: start;
  font-family: "Limelight", sans-serif;
}

@media (max-width: 767px) {

.top-drink{
  width: 100%;
  margin: 0 auto;

}

.drink-txt{
  padding: 6rem 1rem;
}

.drink-txt figure{
  right: 0;
 top: 35rem;
}


}


/* gallery */
.gallery{
  background: url(../img/sub-bg.jpg);
  padding: 4rem 2rem;
  position: relative;
}
.gallery-inner{
  display: flex;
  align-items: center;
  margin: 0 auto;
  overflow: hidden;
}

.gallery-inner .top-ttl{
  position: relative;
}

.gallery-inner .top-ttl::after{
  content: '';
  position: absolute;
  background: url(../img/bee-b.svg);
  width: 18%;
  height: 40%;
  left: -4rem;
  top: 1rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.gallery-deco{
  width: 16rem;
  position: absolute;
  top: -8rem;
  right: 8rem;
}

  

/* Galleryスライダー */
.gallery__slider {
  height: 25.2rem;
  padding: 1.3rem 0;
  margin: 2rem 0 0;
}

@media (max-width: 767px) {
  .gallery__slider {
    margin: 3rem 0 5rem;
  }

  .gallery-inner .top-ttl{
  width: 36rem;
}
}

.gallery__slider .swiper-wrapper {
  transition-timing-function: linear;
}

.gallery__slider .swiper-slide {
  width: 31.1rem;
}



/* Access */
.access{
  background: url(../img/main-bg.jpg);
  padding: 8rem 0;
}

.access-inner{
 
  margin: 0 auto;

}

/* access画像 */
.access-img{
  position: relative;
}

.access-img figure:nth-of-type(1){
  width: 40rem;
  position: absolute;
  top: 36rem;

}

.access-img figure:nth-of-type(2){
  width: 38rem;
  position: absolute;
  left: -21rem;
 
}

.access-deco{
  width: 14rem;
  position: absolute;
  bottom: 0rem;
  right: -6rem;
}


.access-detail{
  margin-left: auto;
  width: 50%;
  position: relative;
}
.access-detail .top-ttl{
  margin-left: 2rem;
  margin-right:auto;
  padding-bottom: 4rem;
  width: 32rem;
  position: relative;
}

.access-detail .top-ttl::after{
  content: '';
  background:url(../img/bee-y.png);
  background-repeat: no-repeat;
  background-size:contain ;
  width:29%;
  height: 47%;
  position: absolute;
  top: 1.8rem;
  left: -7rem;
}

.access-detail .view-more{
  margin: 0;
  margin-right: auto;

}

@media (max-width: 767px) {

.access-detail {
  width: 100%;

}

.access-detail .top-ttl{
margin: 2rem auto;
}


.access-img{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.access-img figure:nth-of-type(1),.access-img figure:nth-of-type(2){
  position:static;
  width: 100%;
}

.access-deco {
  bottom: 11rem;
  right: 0;

}

.access-detail .view-more{
  margin: 0 auto;
}

}


/* access店情報リスト */
.access__list {
  border-top: solid 1px #fff;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 5rem;
  color: #fff;
  
}

.access__list dt,
.access__list dd {
  letter-spacing: 0.05em;
  padding: 2.7rem 1.6rem;
}

.access__list dt {
  width: max(75px, 13rem);
  font-weight: 700;
}

.access__list dd {
  width: calc(100% - max(75px, 13rem));
  border-bottom: solid 1px #fff;
}

@media (min-width: 768px) {
  .access__list dt {
    border-bottom: solid 1px #fff;
  }
}

@media (max-width: 767px) {
  .access__list dt,
  .access__list dd {
    width: 100%;
  }

  .access__list dt {
    padding: 2rem 1.6rem 1rem;
  }

  .access__list dd {
    padding: 0 1.6rem 2rem;
  }
}




/* top google map */

.top-map {
  height: 37.2rem;
}

/* sns */

.top-sns{
  background: url(../img/main-bg.jpg);
  padding: 8rem 0;
  position: relative;
}

.top-xicon{
width: 26rem;
margin: 0 auto;
position: relative;
}

.top-xicon::after{
  content: '';
  position: absolute;
  top: 0;
  width: 25%;
  height: 25%;
  background: url(../img/tiara.png);
  background-repeat: no-repeat;
  background-size: contain;
  right: 0;
  top: -2rem;
}

/* 装飾 */

.fork-knives{
  position: absolute;
  width: 18rem;
  left: 22rem;
}
.deco-pizza{
  position: absolute;
  width: 26rem;
  right: 12rem;
  bottom: 12rem;
}

.kirakira{
  width: 8rem;
  position:absolute;
  left: -12rem;
  top: 0;
}

.star{
  width: 8rem;
  position:absolute;
  right: -10rem;
  bottom: 0;
}

@media (max-width: 767px) {

.fork-knives{
  left: 4rem;
  bottom: 0;
}

.deco-pizza{
  width: 21rem;
  right: 0rem;
  bottom: 24rem;
}


}