@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)
}
.wrapper {
}

/*============================
#fv
============================*/
.wrapper #fv {
}

/*============================
#start
============================*/
.wrapper #start {
}
.wrapper .offer {
}
.wrapper .offer .p-box {
}

/*============================
.offer
============================*/
.wrapper .offer {
  margin-top: 0;
  
}

.wrapper .btn-offer {
  position: absolute;
  width: calc(630/750*100%);
  top: 32%;
  left: calc(60/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)
  }
}
.wrapper .offer .offer-bg-box {
  background-image: url(../img/offer-bg.jpg);
  background-size: contain;
  background-repeat: repeat-y;
}
.wrapper .offer .offer-acc-box {
  width: calc(630/750*100%);
  margin: 0 auto;
}
.wrapper .offer .offer-acc-box .accordion {
}
.wrapper .offer .offer-acc-box .accordion dt {
  cursor: pointer;
  position: relative;
}
.wrapper .offer .offer-acc-box .accordion dt span{
  position: absolute;
  width: min(calc(40/750*100vw),40px);
  height: min(calc(40/750*100vw),40px);
  background-color: #FFF;
  border-radius: 50%;
  top:25%;
  right:3%;
}
.wrapper .offer .offer-acc-box .accordion dt span:before,
.wrapper .offer .offer-acc-box .accordion dt span:after {
  content:"";
  display: block;
  width: min(calc(22/750*100vw),22px);
  height: min(calc(3/750*100vw),3px);
  background-color: #ff8a00;
  position: absolute;
  top:50%;
  left:20%;
  transition: all ease 0.2s;
}
.wrapper .offer .offer-acc-box .accordion dt span:before {
  transform: rotate(90deg);
}
.wrapper .offer .offer-acc-box .accordion dt.selected span:before {
  transform: rotate(0deg);
}
.wrapper .offer .offer-acc-box .accordion dd {
  display: none;
}

/*============================
#doctor
============================*/
.wrapper #doctor.js_floatStart {
}
.wrapper #doctor.js_floatStart .slider-wrap {
  position: absolute;
  top:0;
  width: 100%;
  left:0;
}
.wrapper #doctor.js_floatStart .slider-wrap.doctor {
  top:3%;
}
.wrapper #doctor.js_floatStart .slider-wrap .review-slide {
  width: 90%;
  margin: 0 auto;
}
.wrapper #doctor.js_floatStart .slider-wrap .review-slide .slick-arrow {
  position: absolute;
}
.wrapper #doctor.js_floatStart .slider-wrap .review-slide .slick-prev,
.wrapper #doctor.js_floatStart .slider-wrap .review-slide .slick-next {
  width: calc(28/675*100%);
  padding-top: calc(72/675*100%);
  background-size: cover;
  top:40%;
}
.wrapper #doctor.js_floatStart .slider-wrap .review-slide .slick-prev {
  background-image: url(../img/review-prev.png);
  left:-4%;
}

.wrapper #doctor.js_floatStart .slider-wrap .review-slide .slick-next {
  background-image: url(../img/review-next.png);
  right:-4%;
}
.wrapper #doctor.js_floatStart .slider-wrap .review-slide .slick-prev:before,
.wrapper #doctor.js_floatStart .slider-wrap .review-slide .slick-next:before{
  font-size: 0;
}

.wrapper #doctor.js_floatStart .slider-wrap .doctor-slide .slick-slide {
  margin:0 0.3%;
}
.wrapper #doctor.js_floatStart .slider-wrap .doctor-slide .slick-dots {
  position: absolute;
  bottom:-7%;
}
.wrapper #doctor.js_floatStart .slider-wrap .doctor-slide .slick-dots li {
  margin: 0 1.5%;
}
.wrapper #doctor.js_floatStart .slider-wrap .doctor-slide .slick-dots button:before {
  color: #FFF;
  opacity: 1;
  width: min(calc(25/750*100vw),25px);
  height: min(calc(25/750*100vw),25px);
  font-size: min(calc(25/750*100vw),25px);
}

.wrapper #doctor.js_floatStart .slider-wrap .doctor-slide .slick-dots li.slick-active button:before {
  color: #007519;
  opacity: 1;
}



/*============================
#rakuten
============================*/
.wrapper #rakuten .caution{
  text-align: left;
  font-size: min(calc(16/750*100vw),16px);
  position: absolute;
  bottom:5%;
  left:5%;

}
.wrapper #rakuten .caution a {
  color: #000;
  text-decoration: none;
}
/*============================
#influencer
============================*/
.wrapper #influencer {
}
.wrapper #influencer .p-box {
}
.wrapper #influencer .p-box h2 {
  position: relative;
  z-index:3;
}
.wrapper #influencer .p-box .influ-movie-01 {
  position: absolute;
  width: 60%;
  top: 20%;
  right: 5%;
  z-index:1;
}
.wrapper #influencer .p-box .influ-movie-02 {
  position: absolute;
  width: 60%;
  top: 9%;
  left: 5%;
  z-index:1;
}
.wrapper #influencer .p-box .influ-movie-03 {
  position: absolute;
  width: 60%;
  top: 6%;
  right: 5%;
  z-index:1;
}

/*============================
#recipe
============================*/
.wrapper #recipe {
}

/*============================
#onayami
============================*/
.wrapper #onayami {
}

/*============================
#greentea
============================*/
.wrapper #greentea {
}
.wrapper #greentea .p-box {
}
.wrapper #greentea .p-box .slide-box {
}
.wrapper #greentea .p-box .slide-box .carousel.fv-slider01 {
}
.wrapper #greentea .p-box .slide-box .carousel.fv-slider01 .carousel-track {
}

/*============================
#secret
============================*/
.wrapper #secret {
}
.wrapper #secret * {
  position: relative;
  z-index:2;
}
.wrapper #secret .p-box {
}

.wrapper #secret .p-box .anime-01 {
  position: absolute;
  z-index:1;
  top:0;
  width: 80%;
  left:10%;
}
.wrapper #secret .p-box .anime-02 {
  position: absolute;
  z-index:1;
  top:0;
  width: 80%;
  left:10%;
}


/*============================
#teaflex
============================*/
.wrapper #teaflex {
}
.wrapper #teaflex .p-box h3{
  position: relative;
  z-index:2;
}
.wrapper #teaflex .p-box .teaflex-movie-01 {
  position: absolute;
  z-index:1;
  top:2%;
  left:0;
  width: 95%;
  height: auto;
}
.wrapper #teaflex .p-box .teaflex-movie-02 {
  position: absolute;
  z-index:1;
  top: 28%;
  left: 46%;
  width: calc(365/750*100%);
  height: auto;
  border-radius: min(calc(10/750*100vw),10px);
  overflow: hidden;
}

/*============================
#faq
============================*/
.wrapper #faq.js_floatEnd {
}
.wrapper #faq.js_floatEnd .accordion {
}
.wrapper .bl_floatArea.js_floatArea {
}
.wrapper .bl_floatArea.js_floatArea .bl_floatArea_inner {
}
.wrapper .bl_floatArea.js_floatArea .bl_floatArea_inner .bl_floatArea_btn {
}

.wrapper #greentea .p-box .slide-box {
  position: absolute;
  top:17%;
}

.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/2080*100%);
  margin-right: 0.7%; 
  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%);
  }
}


/*============================
#faq
============================*/
.wrapper #faq {
  background-color: #d9e0b7;
  padding-bottom: 5%;
}
.wrapper #faq .accordion {
  width: calc(690/750*100%);
  margin: 0 auto 5%;
  border-radius: min(calc(10/750*100vw),10px);
  overflow: hidden;
 
}

.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:before,
.wrapper #faq .accordion dt:after {
  position: absolute;
  content:"";
  display: block;
  width: calc(25/750*100%);
  padding-top: calc(4/750*100%);
  background-color: #cabda4;
  top:50%;
  right:5%;
  transition: all ease 0.2s;
  z-index:2;
}

.wrapper #faq .accordion dt:before {
  transform: rotate(90deg);
}
.wrapper #faq .accordion dt.selected: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(630/750*100%);
  padding-bottom: 1%;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}