@charset "utf-8";
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
a:focus {
  outline: none;
}
a {
  text-decoration: none;
}
ul, ol {
  list-style: none;
}
img{
	height:auto;
	border:0;
	vertical-align:top;
  max-width: 100%;
	margin:0;
}
video {
  vertical-align: bottom;
  width: 100%;
  outline: none;
}
.content_wrap {
  max-width: 750px;
  margin:0 auto;
  overflow: hidden;
}
.fv {
   width: 100%;
   overflow: hidden;
   position: relative;
}
.fv-panel {
  position: relative;
  width: 100%;
  height: 586px;
  float: left;
  z-index: 2;
  transition-timing-function: ease-out;
  transition-duration: 1s;
}
.fv-panel.fv-left {
   background: url(/happyvege/lp/image02/pic01.jpg) top left no-repeat;
   background-size: 100%;
}
.fv-panel.fv-right {
   background: url(/happyvege/lp/image02/pic01.jpg) bottom left no-repeat;
   background-size: 100%;
}
.fv-center {
  background: url(/happyvege/lp/image02/pic02.jpg) no-repeat;
  background-size: 100%;
  position: absolute;
  width: 100%;
  height: 1172px;
  z-index: 1;
}
.fv.active .fv-right {
  transform: translateY(100%);
  transition-delay: 1.5s;
}
.fv.active .fv-left {
  transform: translateY(-100%);
  transition-delay: 1.5s;
}
.cm {
  position: relative;
}
.cm .cm_video {
  position: absolute;
  left:10%;
  width: 80%;
  bottom:14.93%;
}
.insta_wrap {
  position: relative;
}
.insta_wrap .insta_list {
  position: absolute;
  width: 614px;
  top:240px;
  left:68px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.insta_wrap .insta_list li:nth-of-type(n+4) {
  margin-top:23px;
}
.insta_wrap .beans {
  position: absolute;
  right:-43px;
  bottom:3%;
  z-index:2;
  pointer-events: none;
}
.mfp-close {
  background: url(/happyvege/lp/image02/close.png) bottom 10px right 12px no-repeat!important;
  background-size:36px!important;
}
.uriba {
  position: relative;
}
.uriba .btn01 {
  position: absolute;
  bottom: 155px;
  left: 60px;
}
.making {
  position: relative;
}
.making .making_video {
  position: absolute;
  left:13.35%;
  width: 73.3%;
  bottom:132px;
}
.making .making_icon {
  position: absolute;
  z-index:2;
  bottom:-55px;
  left:-200px;
}
.eat {
  position: relative;
}
.eat .item01 {
  position: absolute;
  top:132px;
  left:0;
}
.rel {
  position: relative;
}
.eat .item02 {
  position: absolute;
  top:250px;
  right:37px;
}
.eat .item03 {
  position: absolute;
  top:650px;
  left:37px;
}
.eat .item04 {
  position: absolute;
  top:567px;
  right:0;
}
.eat .eatitem {
  visibility: hidden;
}
.eat .eat_active {
  visibility: visible;
}
.eat .eatl.eat_active {
  animation: fadeLeft 0.6s linear;
  animation-fill-mode: both;
  -ms-animation: fadeLeft 0.6s linear;
  -ms-animation-fill-mode: both;
  animation-delay: 0.6s;
}
.eat .eat_txt.eat_active {
  animation: fadeIn 0.8s linear;
  animation-fill-mode: both;
  -ms-animation: fadeIn 0.8s linear;
  -ms-animation-fill-mode: both;
  animation-delay: 0.6s;
}
.eat .eatr.eat_active {
  animation: fadeRight 0.6s linear;
  animation-fill-mode: both;
  -ms-animation: fadeRight 0.6s linear;
  -ms-animation-fill-mode: both;
  animation-delay: 0.6s;
}
.eat .item05 {
  position: absolute;
  top:960px;
  left:0;
}
.eat .item06 {
  position: absolute;
  top:985px;
  right:37px;
}
.run {
  position: relative;
}
.run .run01 {
  position: absolute;
  top:161px;
  left:150px;
}
.run .run02 {
  position: absolute;
  top:335px;
  left:140px;
}
.run .runitem {
  visibility: hidden;
}
.run .run_active {
  visibility: visible;
}
.run .runitem.run_active {
  animation: fadeIn 0.5s linear;
  animation-fill-mode: both;
  -ms-animation: fadeIn 0.5s linear;
  -ms-animation-fill-mode: both;
  animation-delay: 0.4s;
}
@-webkit-keyframes fadeLeft {
  0% {
    opacity: 0;
    margin-left: -100px;
    margin-top: 150px;
  }
  75% {
    opacity: 0.5;
    margin-left: 0px;
    margin-top:0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeLeft {
  0% {
    opacity: 0;
    margin-left: -100px;
    margin-top: 150px;
  }
  75% {
    opacity: 0.5;
    margin-left: 0px;
    margin-top:0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    margin-left: 0;
    margin-top: 70px;
  }
  75% {
    opacity: 0.5;
    margin-left: 0px;
    margin-top:0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    margin-left: 0;
    margin-top: 70px;
  }
  75% {
    opacity: 0.5;
    margin-left: 0px;
    margin-top:0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeRight {
  0% {
    opacity: 0;
    margin-right: -100px;
    margin-top: 150px;
  }
  75% {
    opacity: 0.5;
    margin-right: 0px;
    margin-top: 0px;
  }
  100% {
    opacity: 1;
  }
}
.slide {
  position: relative;
}
.slide .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 112px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  text-indent: -9999px;
  z-index: 100;
}

 .slide .slick-arrow:focus {
   border: none;
   outline: none;
 }
 .slide .slick-prev {
   left: 0;
   background:
   url(/happyvege/lp/image02/preview.png) no-repeat;
   background-size: contain;
   content: "";
   cursor: pointer;
 }
 .slide .slick-next {
   right: 0;
   background: url(/happyvege/lp/image02/next.png) no-repeat;
   background-size: contain;
   content: "";
   cursor: pointer;
 }
 .fixed {
  position: fixed;
  left:50%;
  bottom:0;
  width: 750px;
  transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
z-index: 4;

}
.btn04 {
  position: absolute;
  right:5px;
  bottom:10px;
  width: 235px;
}
@media(max-width:749px) {
  .content_wrap {
    width: 100%;
  }
  .fv-panel {
    position: relative;
    width: 100%;
    height: 78.12vw;
    float: left;
    z-index: 2;
    transition-timing-function: ease-out;
    transition-duration: 1s;
  }
  .fv-center {
    position: absolute;
    width: 100%;
    height: 156.24vw;
    z-index: 1;
  }
  .insta_wrap .insta_list {
    position: absolute;
    width: 81.9vw;
    top:32vw;
    left:9.05vw;
  }
  .insta_wrap .insta_list li {
    width: 25.3vw;
  }
  .insta_wrap .insta_list li:nth-of-type(n+4) {
    margin-top:3.06vw;
  }
  .insta_wrap .beans {
    position: absolute;
    width: 23.6vw;
    right:-6vw;
    bottom:4vw;
  }
  .mfp-close {
  background: url(../image02/close.png) bottom 13px right 12px no-repeat!important;
  background-size:24px!important;
  }
  .mfp-container {
    padding-left: 7%!important;
    padding-right: 7%!important;
  }
  .uriba .btn01 {
    position: absolute;
    width: 84%;
    bottom: 20.7vw;
    left: 8%;
  }
  .making .making_video {
    position: absolute;
    left:13.35%;
    width: 73.3%;
    bottom:23vw;
  }
  .making .making_icon {
    bottom:-7.33vw;
    width: 58.26vw;
    left:-26.6vw;
  }
  .eat {
    background-size: 100%;
  }
  .eat .item01 {
    position: absolute;
    top:17.6vw;
    left:0;
    width: 68vw;
  }
  .eat .item02 {
    position: absolute;
    top:33.33vw;
    right:4.933vw;
    width: 41.733vw;
  }
  .eat .item03 {
    position: absolute;
    top:86.666vw;
    left:4.933vw;
    width: 36.4vw;
  }
  .eat .item04 {
    position: absolute;
    top:75.6vw;
    right:0;
    width: 58.1333vw;
  }
  .eat .item05 {
    position: absolute;
    top:128vw;
    left:0;
    width: 66.533vw;
  }
  .eat .item06 {
    position: absolute;
    top:131.333vw;
    right:4.933vw;
    width: 35.7333vw;
  }
  .run .run01 {
    position: absolute;
    top:21.466vw;
    left:20.5vw;
    width: 58.666vw;
  }
  .run .run02 {
    position: absolute;
    top:44.666vw;
    left:19.3vw;
    width:60.066vw;
  }
  .slide .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 56px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    text-indent: -9999px;
    z-index: 100;
  }
  .coconefoot_links {
    float: left;
  }
  .fixed {
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;

  }
  .btn04 {
    position: absolute;
    right:0.7vw;
    bottom:1.4vw;
    width: 31.33vw;
  }
}