@charset "utf-8";
/* CSS Document */
html,body{
	overflow-x:hidden;
}
body{
  color:#1a1919;
}
body a{
  color:#1a1919;
}
img{
	vertical-align:bottom;
  backface-visibility: hidden;
  max-width:100%;
}
.inner {
    max-width: 1100px;
}
.inner_s {
    max-width: 900px;
  margin:0 auto;
}
.bold{
  font-weight: bold;
}
main a{
  transition-duration: 0.3s;
}
main a:hover{
  opacity:0.7;
}
#main_v{
  height: 708px;
  background:url("../img/mainv_bg2.jpg") center top/cover no-repeat;
  position:relative;
}
#main_v h1{
  text-align: center;
  padding:13rem 0 0rem 0;
  width:639px;
  margin:0 auto;
  position:relative;
}
#main_v h1 picture img{
  opacity:0;
}
.scrollin{
      -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    opacity: 1;
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

#main_v .yellow{
  position:absolute;
  left: -203px;
    top: 289px;
  animation: wobbling_1 0.8s ease-in-out infinite alternate,
		wobbling_2 1.1s ease-in-out infinite alternate;
}
#main_v .pink{
  position:absolute;
  right: -208px;
    top: 211px;
  animation: wobbling_3 0.8s ease-in-out infinite alternate,
		wobbling_4 1.1s ease-in-out infinite alternate;
}
#main_v .green{
  position:absolute;
      right: -139px;
    top: 397px;
  animation: wobbling_5 0.8s ease-in-out infinite alternate,
		wobbling_6 1.1s ease-in-out infinite alternate;
}

#main_v .icon{
  position:absolute;
  right:0px;
  bottom:4rem;
}

@keyframes wobbling_1 {
	0% {
		margin-left: 8px;
	}

	100% {
		margin-left: 0px;
	}
}
@keyframes wobbling_2 {
	0% {
		margin-top: 0px;
	}

	100% {
		margin-top: 8px;
	}
}
@keyframes wobbling_3 {
	0% {
		margin-right: 8px;
	}

	100% {
		margin-right: 0px;
	}
}
@keyframes wobbling_4 {
	0% {
		margin-top: 0px;
	}

	100% {
		margin-top: 8px;
	}
}
@keyframes wobbling_5 {
	0% {
		margin-right: -8px;
	}

	100% {
		margin-right: 0px;
	}
}
@keyframes wobbling_6 {
	0% {
		margin-top: 0px;
	}

	100% {
		margin-top: -8px;
	}
}




nav{
  background-color:#198824;
}
nav ul{
  display:flex;
  justify-content: center;
  max-width:1120px;
  margin:0 auto;
}
nav ul li{
  width:25%;
}
nav ul li a{
  display:block;
  height: 90px;
  font-size:0px;
  background:url("../img/navi01.png") 0 0/contain no-repeat;  
}
nav ul li a:hover{
  opacity:1;
  background:url("../img/navi01_on.png") 0 0/contain no-repeat;  
}
nav ul li:nth-of-type(2) a{
  background:url("../img/navi02.png") 0 0/contain no-repeat;  
}
nav ul li:nth-of-type(2) a:hover{
  background:url("../img/navi02_on.png") 0 0/contain no-repeat;  
}
nav ul li:nth-of-type(3) a{
  background:url("../img/navi03.png") 0 0/contain no-repeat;  
}
nav ul li:nth-of-type(3) a:hover{
  background:url("../img/navi03_on.png") 0 0/contain no-repeat;  
}
nav ul li:nth-of-type(4) a{
  background:url("../img/navi04.png") 0 0/contain no-repeat;  
}
nav ul li:nth-of-type(4) a:hover{
  background:url("../img/navi04_on.png") 0 0/contain no-repeat;  
}

.banner{
  text-align: center;
  padding:4rem 0 12rem 0;
  background-color:#fcfbe4;
}

#intro{
  background:url("../img/bg_yellow.jpg") center top repeat;
  text-align: center;
  padding-top:14rem;
  padding-bottom:17rem;
  position:relative;
}
#intro .snack{
  margin-bottom:4rem;
}
#intro .snack img{
  opacity:0;
}

.vegitable{
  position:absolute;
  top:-10rem;
  background:url("../img/vegetable.png") center top repeat-x;
  height: 164px;
  width:100%;
}
.vegitable2{
  position:absolute;
  top:-10rem;
  background:url("../img/vegetable2.png") center top no-repeat;
  height: 160px;
  width:100%;
}
#intro ul{
  max-width:800px;
  margin:0 auto;
}
#intro ul li{
  margin-bottom:2.5rem;
  position: relative;
}
#intro ul li p{
  position:absolute;
  right:2%;
  top:0px;
  width:37.5%;
  animation-duration: 2s;
}

#product{
  background:url("../img/product_bg.png") center top repeat-x;
  text-align: center;
  padding-top:12rem;
  padding-bottom:17.5rem;
  position:relative;
}
#product .kikyu{
  position:absolute;
  right:-12rem;
  top:0px;
  animation: wobbling_3 0.8s ease-in-out infinite alternate, wobbling_4 1.1s ease-in-out infinite alternate;
}
#product h2{
  margin-bottom:3em;
}
#product h2 img{
  opacity:0;
}
#product h3{
  margin-bottom:3em;
}
#product ul{
  max-width:980px;
  margin:0 auto;
}
#product ul li:nth-of-type(1){
  width:29.388%;
  animation: vertical1 3s infinite alternate;
}
#product ul li:nth-of-type(2){
  width:23.266%;
  animation: vertical1 3s infinite alternate;
  animation-delay: 1.5s;
}
#product ul li:nth-of-type(3){
  width:35.205%;
  animation: vertical1 3s infinite alternate;
  animation-delay: 3s;
}
@keyframes vertical1 {
    0% {
        transform: translate(0,0)
    }

    10% {
        transform: translate(0,0)
    }

    20% {
        transform: translate(0,-15px)
    }

    30% {
        transform: translate(0,0)
    }

    40% {
        transform: translate(0,-15px)
    }

    50% {
        transform: translate(0,0)
    }

    60% {
        transform: translate(0,0)
    }

    70% {
        transform: translate(0,0)
    }

    80% {
        transform: translate(0,0)
    }

    90% {
        transform: translate(0,0)
    }

    100% {
        transform: translate(0,0)
    }
}


#character{
  background:url("../img/character_bg_bottom.png") center bottom no-repeat , url("../img/character_bg.png") center top no-repeat;
  padding-top:12.5rem;
  padding-bottom:12.5rem;
  background-color:#37aa76;
}
#character h2{
  text-align: center;
  margin-bottom:2em;
}
#character h2 img{
  opacity:0;
}
#character h3{
  text-align: center;
}
#character h3 + p{
  text-align: right;
  margin-top:-5rem;
  margin-bottom:2rem;
}
#character ul{
  width:95%;
  margin:0 auto;
  
}
#character ul li{
	width: 48.305%;
	height:413px;
  margin-bottom:3rem;
	text-align:center;
	position: relative;
	top: 0;
	left: 0;
	float: left;
	cursor: pointer;
}


#character ul li img{
	width: 100%;
	height: 100%;
	position: absolute;
    left: 0px;
    top: 0px;
    opacity:1.0;
	border-radius: 10px;
}
@keyframes a1_1 {
    0% {
        transform: rotateY(0deg)
    }
    50% {
        transform: rotateY(90deg);
        opacity:1.0;
    }
    51% {
        opacity:0.0;
    }
    100% {
        opacity:0.0;
    }
}
@keyframes a1_2 {
    0% {
        transform: rotateY(0deg)
        opacity:0.0;
    }
    50% {
        transform: rotateY(90deg);
        opacity:0.0;
    }
    51% {
        opacity:1.0;
    }
    100% {
        transform: rotateY(0deg);
        opacity:1.0;
    }
}

.ani1_1{
	animation: a1_1 0.5s forwards;
}
.ani1_2{
	animation: a1_2 0.5s forwards;
}

@keyframes a2_1 {
    0% {
        opacity:0.0;
        transform: rotateY(0deg)
    }
    50% {
        transform: rotateY(90deg);
        opacity:0.0;
    }
    51% {
        opacity:1.0;
    }
    100% {
        transform: rotateY(0deg);
        opacity:1.0;
    }
}
@keyframes a2_2 {
    0% {
        transform: rotateY(0deg)
        opacity:1.0;
    }
    50% {
        transform: rotateY(90deg);
        opacity:1.0;
    }
    51% {
        opacity:0.0;
    }
    100% {
        opacity:0.0;
    }
}



.ani2_1{
	animation: a2_1 0.5s forwards;
}
.ani2_2{
	animation: a2_2 0.5s forwards;
}

#character .profile{
  text-align: center;
  margin-top:5rem;
}

#paint{
  background:url("../img/paint_bg.png") center top no-repeat;
  text-align: center;
  padding-top:13rem;
  padding-bottom:13rem;
  position:relative;
  background-color:#1eb9ef;
}
#paint .move{
  position:absolute;
      animation: wobbling_3 0.8s ease-in-out infinite alternate, wobbling_4 1.1s ease-in-out infinite alternate;
}
#paint .move01{
      top: 135px;
    right: 75%;
}
#paint .move02{
  top: 147px;
    right: 14%;
  animation-delay: 1s;
}
#paint .move03{
  top: 74%;
    right: 77%;
  animation-delay: 1s;
}
#paint .move04{
  top: 70%;
    right: 4%;
  
}

#paint h2{
  margin-bottom:1.8em;
}
#paint h2 img{
  opacity:0;
}
#paint h3{
  margin-bottom:2.5em;
}
#paint ul{
  max-width:940px;
  margin:0 auto;
}
#paint ul li{
  margin-bottom:5rem;
  width:46.49%;
}
#paint ul li p{
  margin-bottom:1em;
}
#paint ul li p + img{
  width:180px;
}
#paint ul li:last-child{
  margin-left:26.755%;
}

#history{
  background:url("../img/bg_yellow.jpg") center top repeat;
  text-align: center;
  padding-top:15rem;
  padding-bottom:17rem;
  position:relative;
}
#history h2{
  margin-bottom:1.3em;
}
#history h2 img{
  opacity:0;
}
#history h3{
  margin-bottom:2em;
}
#history .inner > div{
  max-width:980px;
  margin:0 auto;
}
#qa{
  background:url("../img/qa_bg.jpg") center top repeat;
  padding-top:11rem;
  padding-bottom:17rem;
  position:relative;
  text-align: center;
  margin-bottom:10rem;
}
#qa h2{
  margin-bottom:2em;
}
#qa h2 img{
  opacity:0;
}
#qa .vegitable{
  top:auto;
  bottom:-5rem;
}
#qa li{
  margin-bottom:3rem;
}
#qa dl{
  max-width: 940px;
  margin:0 auto;
}
#qa dl div{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom:4rem;
}
#qa dl div dt{
  width:48.937%;
  height: 276px;
  margin-bottom:-17%;
  opacity:0;
}
#qa dl div dd{
  width:66.383%;
  position:relative;
  margin-left:33.617%;
  opacity:0;
  animation-delay: 0.3s;
}





/*------------------
TOPに戻るボタン
--------------------*/
  #back-top {
             position: fixed;
             bottom: 3rem;
			 right:2rem;
			 z-index:9998;
			 display:none;
  }
  #back-top a {
             width: 5.1rem;
             display: block;
             text-decoration: none;
             color: #bbb;
  }
  #back-top a:hover {
             color: #000;
  }
  /* arrow icon (span tag) */
  #back-top span {
             width: 5.1rem;
             height: 5.1rem;
             display: block;
             background: url(../img/btn_top.png) center center /contain no-repeat;
  }
	#back-top.fixed{
             bottom: 6rem;
	}


@media screen and (min-width: 768px) and (max-width: 1120px) {
  nav ul li a{
    height: 8.5vw;
  }
}

@media screen and (min-width: 768px) and (max-width: 900px) {

#character h3 + p {
    margin-top: 2rem;
}
    #character ul li {
    width: 45vw;
    height: 45vw;
  }
  .inner_s {
    padding: 0em 1.2rem;
}
  #paint ul{
    padding: 0em 1.2rem;
  }
  
  #paint .move01 {
    right: 82%;
}
  #paint .move02 {
    right: 1%;
  }
  #paint .move03 {
    top: 82%;
    right: 83%;
}
  #paint .move04 {
    top: 77%;
    right: -4%;
}
  
  

  
  
  
}




@media screen and (max-width: 767px) {
  .inner {
    padding: 0rem 4vw;
}
  .inner_s {
    padding: 0rem 4vw;
}
#main_v {
    background: url(../img/mainv_bg_sp2.jpg) center top/100% no-repeat;
  height: 136vw;
}
  #main_v .inner{
    padding:0px;
  }
  #main_v h1 {
        padding: 14rem 14.5% 0rem;
    text-align: center;
    margin-bottom:0px;
    width:auto;
}
  #main_v .yellow {
        left: 5vw;
    top: 98vw;
    width: 25vw;
}
  #main_v .pink {
    right: 33vw;
    top: 106vw;
    width: 25vw;
}
 #main_v .green {
    right: 5vw;
    top: 78vw;
    width: 22vw;
} 
  
  nav ul{
    flex-wrap: wrap;
  }
  nav ul li{
    width:50%;
  }
  nav ul li a{
    height: auto;
  }
  
  .banner{
    padding: 6rem 4% 2rem 4%;
  }
  
  .vegitable {
    top: -13vw;
    background: url(../img/vegetable_sp.png) center top/100% no-repeat;
    height: 24vw;
    width: 100%;
}
  .vegitable2 {
    top: -13vw;
    background: url(../img/vegetable_sp.png) center top/100% no-repeat;
    height: 24vw;
    width: 100%;
}
  #intro {
    padding-top: 9rem;
    padding-bottom: 11rem;
}
  #intro .snack {
    margin-bottom: 2rem;
    padding:0 6%;
}
  #intro ul li p {
    right: 10.5%;
    top: 59vw;
    width: 83.5%;
}
  #product {
    background: url(../img/product_bg_top.png) center 5rem/100% no-repeat , url(../img/product_bg_bottom.png) center bottom/100% no-repeat;
    background-color:#1eb9ef;
    padding-bottom: 14.5rem;
}
  #product h2{
    padding:0 5%;
    margin-bottom: 1em;
  }
  #product h3{
    padding:0 11%;
  }
  #product ul li:nth-of-type(1){
  width:53%;
    
}
#product ul li:nth-of-type(2){
  width: 42%;
}
#product ul li:nth-of-type(3){
  width:77.205%;
  margin-left:11%;
  margin-top:10vw;
}
  
  #character {
    background: url(../img/character_bg_top.png) center 99%/100% no-repeat , url(../img/character_bg_top.png) center top/100% no-repeat;
    background-color:#37aa76;
    padding-top: 10.5rem;
    padding-bottom: 13.5rem;
}
  #character h2{
    padding:0 8%;
    margin-bottom: 1em;
  }
  #character h3{
    padding:0 8%;
  }
  #character h3 + p {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding:0 32%;
}
  #character ul {
    width: auto;
}
  #character ul li{
    width: 83vw;
    height: 83vw;
    margin:0 auto 3rem;
}
  #character .banner {
    margin-top: 3rem;
}
  
  
#paint {
    background: url(../img/paint_bg_top.png) center top/100% no-repeat , url(../img/paint_bg_bottom.png) center bottom/100% no-repeat;
    padding-top: 7rem;
    padding-bottom: 20rem;
    background-color: #1eb9ef;
}
  #paint .move01 {
    width: 23vw;
    top: 44vw;
    right: 56%;
}
  #paint .move02 {
    width: 23vw;
    top: 47vw;
    right: 20%;
}
  #paint .move03 {
    width: 21vw;
    top: 462vw;
    right: 59%;
}
  #paint .move04 {
        width: 39vw;
    top: 454vw;
    right: 12%;
}
  
  
  
  #paint h2{
    padding:0 10%;
    margin-bottom:1.3em;
  } 
  #paint h3{
    padding:0 15%;
    margin-bottom:7em;
  }
  #paint ul {
    max-width: 90%;
    margin: 0 auto;
    display:block;
}
  #paint ul li{
    width:100%;
  }
  #paint ul li p + img{
    width:60%;
  }
  #paint ul li:last-child {
    margin-left: 0%;
}
  #history {
    padding-top: 11rem;
    padding-bottom: 11rem;
}
  #history h2{
    padding:0 8%;
    margin-bottom: 1em;
  }
  #history h3{
    padding:0 8%;
  }
  
  #qa {
    background: url(../img/qa_bg_top.jpg) center top/100% no-repeat;
    background-color:#fcfbe4;
    padding-top: 13rem;
    padding-bottom: 3rem;
    position: relative;
    text-align: center;
    margin-bottom: 10rem;
}
  #qa h2{
    padding:0 11%;
  }
  #qa .inner{
    padding:0px;
  }
  #qa li {
    margin-bottom: 6rem;
}
  #qa dl div dt {
    width: 76.937%;
    height: auto;
    margin-left: 3%;
    margin-bottom: 7vw;
}
  #qa dl div dd {
    width: 90%;
    margin-left: 10%;
}
  
  
  
/*------------------
TOPに戻るボタン
--------------------*/
#back-top {
    bottom: 8rem;
    right: 1rem;
}
	#back-top.fixed{
    bottom: 8rem;
	}
}