@charset "UTF-8";


/* slider animation */



.index .main_box.effect .overlay{
  transition:2s cubic-bezier(0, 1.01, 0.36, 0.99) 2.5s;
  transition-property:filter,opacity;
  background:#1B9531;
  position:absolute;
  top:-130px;
  right:0;
  bottom:0;
  left:0;
  z-index:10;
  opacity:1;
  filter:blur(0);
  pointer-events: none;
}
.index .main_box.effect.animated .overlay{
  opacity:0;
  filter:blur(10px);
}
.index .main_box.effect .overlay .svg {
  width: 400px;
  height: 95px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

.index .main_box.effect .overlay .svg .st0 {
  fill: #fff;
  stroke: #fff;
}

.index .main_box.effect .overlay .svg .st0 {
  fill-opacity: 0;
  fill: #fff;
  -webkit-transition: fill-opacity 0.8s;
  transition: fill-opacity 0.8s;
}

.index .main_box.effect .overlay .svg.draw .st0 {
  fill-opacity: 1;
}




.index .main_box #main_slide .slick-slide li .left_box .image img{
  transition:1s ease;
  transform: translate(-50%, -50%) scale(1.05);
}

.index .main_box #main_slide .slick-slide.slick-active li .left_box .image img{
  transform: translate(-50%, -50%) scale(1);
}
.index .main_box #main_slide .slick-slide li .left_box h2{
  transition:1s ease;
  transform: translateY(-20%);
}

.index .main_box #main_slide .slick-slide.slick-active li .left_box h2{
  transform: translateY(-50%);
}

.index .main_box #main_slide .slick-slide li .right_box .image img{
  transition:1s ease;
  transform: translate(-50%, -50%) scale(1.2);
}

.index .main_box #main_slide .slick-slide.slick-active li .right_box .image img{
  transform: translate(-50%, -50%) scale(1);
}


.index .main_box .left_box::before{
  content: " ";
  width:100%;
  height:100%;
  display: block;
  position:absolute;
  background:#1B9531;
  right:0;
  bottom:0;
  left:0;
}

.index .main_box.effect .left_box{

}

.index .main_box.effect.animated .left_box{
  
}




.index .aniv_box .sentence_box.effect{
  transition:0.5s cubic-bezier(0, 1.01, 0.36, 0.99) 0.5s;
  transition-property:transform,opacity;
  opacity:0;
  transform:translateX(100px);
}

.index .aniv_box .sentence_box.effect.animated{
  opacity:1;
  transform:translateX(0);
}

.index .aniv_box .image_box.effect p{
  transition:0.5s cubic-bezier(0, 1.01, 0.36, 0.99) 0.5s;
  transition-property:width;
  width:0;
  position:relative;
}
.index .aniv_box .image_box.effect.animated p{
  width:100%;
}
.index .aniv_box .image_box.effect p img{
  transition:1s cubic-bezier(0.03, 0.61, 0.09, 0.99) 1s;
  transition-property:transform;
  transform:scale(1.1,1.1) translate(-50%, -50%);
}
.index .aniv_box .image_box.effect.animated p img{
  width:auto;
  transform:scale(1,1) translate(-50%, -50%);
}
.index .aniv_box .image_box p:after{
  content: "  ";
  width:100%;

  height:100%;
  display: block;
  background:#1B9531;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  z-index:1;
}
.index .aniv_box .image_box.effect p:after{
  transition:0.5s cubic-bezier(0.1, 0.8, 0.29, 1.01) 1s;
  transition-property:width,min-width;
  width:100%;
  min-width:960px;
}
.index .aniv_box .image_box.effect.animated p:after{
  width:0;
  min-width:0;
}




.index .products_box li.effect .image_box{
  transition:0.5s cubic-bezier(0, 1.01, 0.36, 0.99) 0.5s;
  transition-property:width;
  display: block;
  width:0%;
  max-height:180px;
  height:30%;
  position:relative;
  overflow: hidden;
}
.index .products_box li.effect.animated .image_box{
  width:100%;
  height:30%;
}
.index .products_box li.effect .image_box img{
  width:100%;
  transition:1s cubic-bezier(0.03, 0.61, 0.09, 0.99) 1s;
  transition-property:transform;
  transform:scale(1.1,1.1);
}
.index .products_box li.effect.animated .image_box img{
  transform:scale(1,1);
}
.index .products_box li .image_box:after{
  content: "  ";
  width:100%;
  height:100%;
  display: block;
  background:#1B9531;
  margin: 0 0 0 auto;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  z-index:1;
}
.index .products_box li.effect .image_box:after{
  transition:0.5s cubic-bezier(0.1, 0.8, 0.29, 1.01) 1s;
  transition-property:width,min-width;
  width:653px;
  min-width:653px;
}
.index .products_box li.effect.animated .image_box:after{
  width:0;
  min-width:0;
}







.index .pickup_box .effect.slide_box{
  transition:0.9s cubic-bezier(0.1, 0.8, 0.29, 1.01) .7s;
  transition-property:transform,opacity;
  transform:translate(100px);
  opacity:0;

}
.index .pickup_box .effect.animated.slide_box{
  transform:translate(0);
  opacity:1;


}
.index .pickup_box.effect::before{
  transition:0.9s cubic-bezier(0.1, 0.8, 0.29, 1.01) 0.5s;
  transition-property:width,opacity,min-width;
  width:0;
  min-width:0;
  opacity:1;

}
.index .pickup_box.effect.animated::before{
  width:74.844vw;
  min-width:1437px;
  opacity:1;


}






.index .news_box.effect ul{
  transition:0.9s cubic-bezier(0.1, 0.8, 0.29, 1.01) 0.5s;
  transition-property:transform,opacity;
  transform:translateX(100px);
  opacity:0;
}
.index .news_box.effect.animated ul{
  transform:translateX(0);
  opacity:1;
  height: 315px;
  overflow-y: scroll;
}


.index .facebook_box.effect .fb-page{
  transition:0.9s cubic-bezier(0.1, 0.8, 0.29, 1.01) 0.5s;
  transition-property:transform,opacity;
  transform:translateX(100px);
  opacity:0;
}
.index .facebook_box.effect.animated .fb-page{
  transform:translateX(0);
  opacity:1;
}


.index .sns_box.effect .text_box{
  transition:0.9s cubic-bezier(0.1, 0.8, 0.29, 1.01) 0.5s;
  transition-property:transform,opacity;
  transform:translateX(100px);
  opacity:0;
}
.index .sns_box.effect.animated .text_box{
  transform:translateX(0);
  opacity:1;
}


.index .bnr_box.effect ul{
  transition:0.9s cubic-bezier(0.1, 0.8, 0.29, 1.01) 0.5s;
  transition-property:transform,opacity;
  transform:translateX(100px);
  opacity:0;
}
.index .bnr_box.effect.animated ul{
  transform:translateX(0);
  opacity:1;
}