@charset "UTF-8";

html {
  scroll-behavior: smooth
}

/*----------------------------------------
general
----------------------------------------*/



html{
  scroll-behavior: smooth;
}

body {
	background: #fff;
}



.wrapper img {
	width: 100%;
	margin: 0;
	padding: 0;
	height: auto;
	display: block;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
}
.wrapper a {
	display: block;
}

.wrapper ul,
.wrapper dl,
.wrapper ol{
  list-style: none;
}
.wrapper ul li,
.wrapper dl dt,
.wrapper dl dd,
.wrapper ol li{
	line-height: 0;
	font-size: 0;
}

.wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.wrapper *{
  position: relative;
  box-sizing: border-box;
}

.wrapper a{
  transition: all ease 0.3s;
}
.wrapper a:hover{
  filter: brightness(1.1)
}
/*============================
#fv
============================*/

.wrapper .fv-front {
  position: absolute;
  width: calc(331/750*100%);
  top: 10%;
  left: 50%;
  transform: translateX(-50%);

}

/*============================
.offer
============================*/

.wrapper .offer {

}

.wrapper .btn-offer {
  position: absolute;
  width: calc(662/750*100%);
  top: 44%;
  left: calc(45/750*100%);
  animation: btn_animation 1s infinite;
}

@keyframes btn_animation {
    0% {
        transform: scale(1, 0.8);
    }
    20% {
        transform: scale(0.8, 1.1);
    }
    95% {
      transform: scale(1, 1);
  }
  100% {
      transform: scale(1, 0.8);
  }
}


@keyframes purun{
  from,to{
    transform:scale(1, 1)
  }
  5%{
    transform:scale(.85, 1.15)
  }
  10%{
    transform:scale(1.1, .9)
  }15%{
    transform:scale(.9, 1.1)
  }20%{
    transform: scale(1,1)
  }

}

/*============================
#recipe
============================*/
.wrapper #recipe {
  background-color: #f8b62d;
  padding-bottom: 10%;
}

.wrapper #recipe .recipe-item-slider {
  position: absolute;
  top:15%;
  width: 100%;
}

.wrapper #recipe .recipe-front {
  position: absolute;
  width: calc(338/750*100%);
  top:calc(45/750*100%);
  left:calc(30/750*100%);
  z-index:3;
}

.wrapper #recipe .recipe-main-slider {
  width: calc(632/750*100%);
  margin: 0 auto;
}

.wrapper #recipe .slick-dots {
  bottom:-3%;
}
.wrapper #recipe .slick-dots li {
  margin: 0 2%!important;
  width: min(calc(19/750*100vw),19px);
  height: min(calc(19/750*100vw),19px);
}
.wrapper #recipe .slick-dots li button {
  width: min(calc(19/750*100vw),19px);
  height: min(calc(19/750*100vw),19px);
  padding:0;
  font-size: 0;

}
.wrapper #recipe .slick-dots li button:before {
  opacity: 1;
  background-color: #FFF;
  width: min(calc(19/750*100vw),19px);
  height: min(calc(19/750*100vw),19px);
  border-radius: 20px;
  font-size: 0;
}

.wrapper #recipe .slick-dots li.slick-active button:before {
  opacity: 1;
  background-color: #ea5514;
}

.wrapper #recipe .slick-prev,.wrapper #recipe .slick-next {
  width: calc(80/632*100%);
  padding-top: calc(160/632*100%);
  background-size: cover;
  z-index:2;
  font-size: 0;
  top:44%;
  position: absolute;
}
.wrapper #recipe .slick-prev:before,.wrapper #recipe .slick-next:before {
  font-size: 0;
}

.wrapper #recipe .slick-prev,.slick-prev:hover {
  left:-10%;
  background-image: url(../img/recipe-slide-prev.png);
  background-size: cover;
}
.wrapper #recipe .slick-next, .slick-next:hover{
  right:-10%;
  background-image: url(../img/recipe-slide-next.png);
  background-size: cover;
}

.wrapper #recipe .slick-next:focus, .slick-next:hover {
  background-image: url(../img/recipe-slide-next.png);
  background-size: cover;
}
.wrapper #recipe .slick-prev:focus, .slick-prev:hover{
  background-image: url(../img/recipe-slide-prev.png);
  background-size: cover;
}
.carousel {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scroll-left 30s linear infinite;
}

.carousel.reverse .carousel-track {
  animation: scroll-right 30s linear infinite;
}

.carousel img {
  width: auto;
  height: auto;
  width: calc(250/3000*100%);
  margin-right: 0; 
  flex-shrink: 0;
}
@media (max-width:750px) {
  .carousel img {
    width: calc(250/750*100vw);
  }
  .carousel-track img {
    width: calc(250/750*100vw);
  }
}


/* 左方向に流れる */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 右方向に流れる（逆向き） */
@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.recipe-item-slider-wrapper {

  width: 100%;
  position: absolute;
  top:15%;
}

.recipe-item-slider {
  display: flex;
  gap: 0;
  animation: scroll-left 30s linear infinite;
  z-index:2;
}


.recipe-item-slider img {
  width: 100%;
  display: block;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/*============================
#diet
============================*/

.wrapper #diet {
  margin-top: -3%;
}
/*============================
#faq
============================*/
.wrapper #faq {
  background-color: #d3bb99;
  padding-bottom: 5%;
}
.wrapper #faq .accordion {
  width: calc(690/750*100%);
  margin: 0 auto 5%;
  box-shadow: 0px min(calc(5/750*100vw),5px)  min(calc(20/750*100vw),20px)  0px rgba(0,0,0,0.1);
 
}

.wrapper #faq .accordion dt {
  cursor: pointer;
}

.wrapper #faq .accordion dt .icon-wrap {
  position: absolute;
  width: calc(44/690*100%);
  padding-top: calc(44/750*100%);
  position: absolute;
  top:40%;
  right:4%;
  border: 2px solid #FFF;
  border-radius: 100%;
}
.wrapper #faq .accordion dt .icon-wrap:before,
.wrapper #faq .accordion dt .icon-wrap:after {
  position: absolute;
  content:"";
  display: block;
  width: calc(25/44*100%);
  padding-top: calc(4/44*100%);
  background-color: #FFF;
  top:47%;
  left:21%;
  transition: all ease 0.2s;
}

.wrapper #faq .accordion dt .icon-wrap:before {
  transform: rotate(90deg);
}
.wrapper #faq .accordion dt.selected .icon-wrap:before {
  transform: rotate(0deg);
}

.wrapper #faq .accordion dd {
  display: none;
}


/* ---------------------------------------------
 追従ボタン
--------------------------------------------- */
.bl_floatArea {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .4s;
  box-sizing: border-box;
}
.bl_floatArea.is_show {
  visibility: visible;
  opacity: 1;
}
.bl_floatArea_inner {
  max-width: 750px;
  margin: auto;
  padding: 0;
  box-sizing: border-box;
  padding: 0 ;
}

/* ボタン */
.bl_floatArea_btn {
  display: block;
  width: calc(662/750*100%);
  padding-bottom: 1%;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}