@charset "utf-8";



/*--------------------------------------------------
  Common
--------------------------------------------------*/
main{
  display:block;
}

.nav_wrap {
    background: #fff;
}

@media screen and (max-width:799px) {
	/*SP-Tablet*/

}
@media screen and (max-width:479px) {
	/*SP*/

}

/*--------------------------------------------------
  Top Title
--------------------------------------------------*/

#top_specialty_title{
	background:url(../img/bg_title.jpg) no-repeat;
	background-size:cover;
  background-position: center center;
	padding:13rem 0 8rem;
}
#top_specialty_title h2{
	font-size:2rem;
	color:#fff;
	text-align: center;
}
#top_specialty_title .box{
  position: relative;
}
.animation_wrap{
  position:relative;
}
.animation_wrap img{
  position:absolute;
  opacity:0;
}
.top_character{
  max-width:243px;
  margin-top:1rem;
}
.top_character.effect-fade.effect-scroll img.character{
  animation-name: top_character;
  animation-duration: 500ms;
  animation-delay: 0000ms;
  animation-fill-mode: both;
  /*transition-timing-function:ease-in-out;*/
}
@keyframes top_character {
  0% {transform: translate(0,80px); opacity:0; }
  80% {transform: translate(0,-10px); opacity:1; display: initial;}
  100% {transform: translate(0,0px); opacity:1;}
}
.top_character.effect-fade.effect-scroll img.balloon{
  animation-name: top_balloon;
  animation-duration: 500ms;
  animation-delay: 500ms;
  animation-fill-mode: both;
  /*transition-timing-function:ease-in-out;*/
}
@keyframes top_balloon {
  0% {transform: translate(0,80px); opacity:0;}
  80% {transform: translate(0,-10px); opacity:1;}
  100% {transform: translate(0,0px); opacity:1;}
}
.quality_character{
  max-width:243px;
  margin-top:1rem;
  top: -390px;
  left: 580px;
}
.quality_character.effect-fade.effect-scroll img.character{
  animation-name: quality_character;
  animation-duration: 500ms;
  animation-delay: 0000ms;
  animation-fill-mode: both;
  /*transition-timing-function:ease-in-out;*/
}
@keyframes quality_character {
  0% {transform: translate(0,80px); opacity:0; }
  80% {transform: translate(0,-10px); opacity:1; display: initial;}
  100% {transform: translate(0,0px); opacity:1;}
}
.quality_character.effect-fade.effect-scroll img.balloon{
  animation-name: quality_balloon;
  animation-duration: 500ms;
  animation-delay: 500ms;
  animation-fill-mode: both;
  /*transition-timing-function:ease-in-out;*/
}
@keyframes quality_balloon {
  0% {transform: translate(0,80px); opacity:0;}
  80% {transform: translate(0,-10px); opacity:1;}
  100% {transform: translate(0,0px); opacity:1;}
}
.relief_character{
  max-width: 289px;
  margin-top: 1rem;
  top: -60px;
  left: 395px;
}
.relief_character.effect-fade.effect-scroll img.character{
  animation-name: relief_character;
  animation-duration: 500ms;
  animation-delay: 0000ms;
  animation-fill-mode: both;
  /*transition-timing-function:ease-in-out;*/
}
@keyframes relief_character {
  0% {transform: translate(0,80px); opacity:0; }
  80% {transform: translate(0,-10px); opacity:1; display: initial;}
  100% {transform: translate(0,0px); opacity:1;}
}
.relief_character.effect-fade.effect-scroll img.balloon{
  animation-name: relief_balloon;
  animation-duration: 500ms;
  animation-delay: 500ms;
  animation-fill-mode: both;
  /*transition-timing-function:ease-in-out;*/
}
@keyframes relief_balloon {
  0% {transform: translate(0,80px); opacity:0;}
  80% {transform: translate(0,-10px); opacity:1;}
  100% {transform: translate(0,0px); opacity:1;}
}

@media screen and (max-width:799px) {
	/*SP-Tablet*/

}

@media screen and (max-width:479px) {
	/*SP*/
  .top_character {
    max-width: 70%; 
    width: 70%;
    margin-left: 15%;
  }
  .quality_character{
    max-width: 70%; 
    width: 70%;
    margin-left: 15%;
    top:0;
    left:0;
    text-align: left;
  }
  .relief_character{
    max-width: 100%; 
    width: 100%;
    margin-left: 0%;
    top:0;
    left:0;
    text-align: left;
  }
}

/*--------------------------------------------------
  Top animation
--------------------------------------------------*/
.animation{
  position:relative;
  /*margin-top:1rem;*/
}
.img_top_plant{
  position: relative;
}
.img_top_plant_bg{
  position: absolute;
  top:0;
  left:0;
}
.img_top_sun{
  max-width:142px;
  width:9.7%;
  height:auto;
	animation-name: img_top_sun;
	animation-duration: 20000ms;
	animation-delay: 0000ms;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  position:absolute;
  top:0;
  left:72%;
}
@keyframes img_top_sun {
  0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}


.img_top_cloud_s,
.img_top_cloud_m,
.img_top_cloud_l{
  animation-delay: 0000ms;
	animation-fill-mode: both;
  animation-direction:alternate;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
  position:absolute;
}
.img_top_cloud_s{
  max-width:92px;
  width:6.2%;
  height:auto;
	animation-name: img_top_cloud_s;
	animation-duration: 1500ms;
  top:0;
  left:82%;
}
@keyframes img_top_cloud_s {
  0% {transform: translateX(0);}
	100% {transform: translateX(10%);}
}
.img_top_cloud_m{
  max-width:129px;
  width:8.7%;
  height:auto;
	animation-name: img_top_cloud_m;
	animation-duration: 2000ms;
  top:3%;
  left:64%;
}
@keyframes img_top_cloud_m {
  0% {transform: translateX(0);}
	100% {transform: translateX(10%);}
}
.img_top_cloud_l{
  max-width:231px;
  width:15.7%;
  height:auto;
	animation-name: img_top_cloud_l;
	animation-duration: 2500ms;
  top:2%;
  left:81%;
}
@keyframes img_top_cloud_l {
  0% {transform: translateX(0);}
	100% {transform: translateX(10%);}
}


.img_top_rain_blue_s01,
.img_top_rain_blue_s02,
.img_top_rain_blue_s03{
  max-width:34px;
  width:2.3%;
  height:auto;
  animation-duration: 1000ms;
	animation-fill-mode: both;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  position:absolute;
}
.img_top_rain_blue_s01{
	animation-name: img_top_rain_blue_s01;
  animation-delay: 000ms;
  top:15%;
  left:84%;
}
@keyframes img_top_rain_blue_s01 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}
.img_top_rain_blue_s02{
	animation-name: img_top_rain_blue_s02;
  animation-delay: 300ms;
  top: 5%;
  left: 94%;
}
@keyframes img_top_rain_blue_s02 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}
.img_top_rain_blue_s03{
	animation-name: img_top_rain_blue_s03;
  animation-delay: 600ms;
  top:10%;
  left:80%;
}
@keyframes img_top_rain_blue_s03 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}


.img_top_rain_blue_l01,
.img_top_rain_blue_l02,
.img_top_rain_blue_l03{
  max-width:54px;
  width:3.5%;
  height:auto;
  animation-duration: 1000ms;
	animation-fill-mode: both;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  position:absolute;
}
.img_top_rain_blue_l01{
	animation-name: img_top_rain_blue_l01;
  animation-delay: 000ms;
  top:18%;
  left:72%;
}
@keyframes img_top_rain_blue_l01 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}
.img_top_rain_blue_l02{
	animation-name: img_top_rain_blue_l02;
  animation-delay: 300ms;
  top: 8%;
  left: 81%;
}
@keyframes img_top_rain_blue_l02 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}
.img_top_rain_blue_l03{
	animation-name: img_top_rain_blue_l03;
  animation-delay: 600ms;
  top:12%;
  left:90%;
}
@keyframes img_top_rain_blue_l03 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}


.img_top_rain_gray_s01,
.img_top_rain_gray_s02,
.img_top_rain_gray_s03{
  max-width:34px;
  width:2.3%;
  height:auto;
  animation-duration: 1000ms;
	animation-fill-mode: both;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  position:absolute;
}
.img_top_rain_gray_s01{
	animation-name: img_top_rain_gray_s01;
  animation-delay: 000ms;
  top:9%;
  left:88%;
}
@keyframes img_top_rain_gray_s01 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}
.img_top_rain_gray_s02{
	animation-name: img_top_rain_gray_s02;
  animation-delay: 300ms;
  top: 16%;
  left: 81%;
}
@keyframes img_top_rain_gray_s02 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}
.img_top_rain_gray_s03{
	animation-name: img_top_rain_gray_s03;
  animation-delay: 600ms;
  top:12%;
  left:77%;
}
@keyframes img_top_rain_gray_s03 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}


.img_top_rain_gray_l01,
.img_top_rain_gray_l02,
.img_top_rain_gray_l03{
  max-width:54px;
  width:3.5%;
  height:auto;
  animation-duration: 1000ms;
	animation-fill-mode: both;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  position:absolute;
}
.img_top_rain_gray_l01{
	animation-name: img_top_rain_gray_l01;
  animation-delay: 000ms;
  top:19%;
  left:90%;
}
@keyframes img_top_rain_gray_l01 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}
.img_top_rain_gray_l02{
	animation-name: img_top_rain_gray_l02;
  animation-delay: 300ms;
  top: 11%;
  left: 88%;
}
@keyframes img_top_rain_gray_l02 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}
.img_top_rain_gray_l03{
	animation-name: img_top_rain_gray_l03;
  animation-delay: 600ms;
  top:9%;
  left:87%;
}
@keyframes img_top_rain_gray_l03 {
  0% {transform: translate(0,0); opacity:0;}
  25% { opacity:1;}
	75% { opacity:1;}
	100% {transform: translate(-200%,200%); opacity:0;}
}


.img_top_dust_s,
.img_top_dust_m,
.img_top_dust_l{
  animation-delay: 0000ms;
	animation-fill-mode: both;
  animation-direction:alternate;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
  position:absolute;
}
.img_top_dust_s{
  max-width: 68px;
  width:5%;
  height:auto;
  animation-name: img_top_dust_s;
  animation-duration: 6000ms;
  top:25%;
  left:2%;
}
@keyframes img_top_dust_s {
  0% {transform: translate(0,0);}
  25% {transform: translate(15%,5%);}
  50% {transform: translate(7.5%,15%);}
	75% {transform: translate(-2.5%,5%);}
	100% {transform: translate(-10%,10%);}
}
.img_top_dust_m{
  max-width: 100px;
  width:6.8%;
  height:auto;
  animation-name: img_top_dust_m;
  animation-duration: 5000ms;
  top: 11%;
  left: 6.6%;
}
@keyframes img_top_dust_m {
  0% {transform: translate(0,0);}
  33% {transform: translate(-15%,7.5%);}
	66% {transform: translate(-2.5%,5%);}
	100% {transform: translate(5%,20%);}
}
.img_top_dust_l{
  max-width: 135px;
  width:11%;
  height:auto;
  animation-name: img_top_dust_l;
  animation-duration: 6000ms;
  top:25%;
  left:9%;
}
@keyframes img_top_dust_l {
  0% {transform: translate(0,0);}
  20% {transform: translate(-2.5%,5%);}
  40% {transform: translate(5%,7.5%);}
	80% {transform: translate(-5%,10%);}
	100% {transform: translate(2.5%,5%);}
}


.img_top_fly{
  max-width: 27px;
  width:1.8%;
  height:auto;
  animation-name: img_top_fly;
  animation-duration: 4000ms;
  animation-fill-mode: both;
  animation-iteration-count:infinite;
  /*animation-timing-function:ease-in-out;*/
  animation-timing-function:linear;
  transform-origin: 0% -200%;
  position:absolute;
  top:65%;
  left:6.2%;
}
@keyframes img_top_fly {
  0% {transform: translate(0,0) rotate(0deg); opacity:1;}
  58% {transform: translate(0,0) rotate(-360deg); opacity:1;}
  58.1% {transform: translate(0,0) rotate(-360deg); opacity:0;}
  100% {transform: translate(0,0) rotate(-360deg); opacity:0}
}
.img_top_fly_b{
  max-width: 27px;
  width:1.8%;
  height:auto;
  animation-name: img_top_fly_b;
  animation-duration: 4000ms;
  animation-fill-mode: both;
  animation-iteration-count:infinite;
  /*animation-timing-function:ease-in-out;*/
  animation-timing-function:linear;
  transform-origin: 0% -100%;
  position:absolute;
  top:65%;
  left:6.2%;
}
@keyframes img_top_fly_b {
  0% {transform: translate(0,0) rotate(0deg); opacity:0;}
  58% {transform: translate(0,0) rotate(0deg); opacity:0;}
  58.1% {transform: translate(0,0) rotate(0deg); opacity:1;}
  100% {transform: translate(0,0) rotate(-360deg); opacity:1}
}


.img_top_bug{
  max-width: 55px;
  width:3.6%;
  height:auto;
  animation-name: img_top_bug;
  animation-duration: 4000ms;
  animation-fill-mode: both;
  animation-iteration-count:infinite;
  /*animation-timing-function:ease-in-out;*/
  animation-timing-function:linear;
  transform-origin: 0% -150%;
  position:absolute;
  top:85%;
  left:8.2%;
}
@keyframes img_top_bug {
  0% {transform: translate(0,0) rotate(0deg); opacity:1;}
  58% {transform: translate(0,0) rotate(360deg); opacity:1;}
  58.1% {transform: translate(0,0) rotate(360deg); opacity:0;}
  100% {transform: translate(0,0) rotate(360deg); opacity:0}
}
.img_top_bug_b{
  max-width: 55px;
  width:3.6%;
  height:auto;
  animation-name: img_top_bug_b;
  animation-duration: 4000ms;
  animation-fill-mode: both;
  animation-iteration-count:infinite;
  /*animation-timing-function:ease-in-out;*/
  animation-timing-function:linear;
  transform-origin: 0% -75%;
  position:absolute;
  top:85%;
  left:8.2%;
}
@keyframes img_top_bug_b {
  0% {transform: translate(0,0) rotate(0deg); opacity:0;}
  58% {transform: translate(0,0) rotate(0deg); opacity:0;}
  58.1% {transform: translate(0,0) rotate(0deg); opacity:1;}
  100% {transform: translate(0,0) rotate(360deg); opacity:1}
}


.wave{
  position: absolute;
  overflow: hidden;
  width: 44.35%;
  height: 13%;
  top: 66.89%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  z-index: 5;
}


/*.img_top_wave_s_l,
.img_top_wave_m_l,
.img_top_wave_l_l{
  max-width:745px;
  width:38.35%;
  animation-delay: 0000ms;
  animation-fill-mode: both;
  animation-iteration-count:infinite;
  position:absolute;
  bottom:18.3%;
  left:30.8%;
  z-index:0;
}
.img_top_wave_s_r,
.img_top_wave_m_r,
.img_top_wave_l_r{
  max-width:745px;
  width:38.35%;
  animation-delay: 0000ms;
  animation-fill-mode: both;
  animation-iteration-count:infinite;
  position:absolute;
  bottom:18.3%;
  left:69.1%;
  z-index:0;
}
.img_top_wave_s_l{
  height:auto;
  animation-name: img_top_wave_s_l;
  animation-duration: 3000ms;
}
@keyframes img_top_wave_s_l {
  0% {transform: translateX(0);}
  25% {transform: translateX(-20%);}
  50% {transform: translateX(-50%);}
  75% {transform: translateX(-70%);}
  100% {transform: translateX(-100%);}
}
.img_top_wave_s_r{
  height:auto;
  animation-name: img_top_wave_s_r;
  animation-duration: 3000ms;
}
@keyframes img_top_wave_s_r {
  0% {transform: translateX(0);}
  25% {transform: translateX(-20%);}
  50% {transform: translateX(-50%);}
  75% {transform: translateX(-70%);}
  100% {transform: translateX(-100%);}
}
.img_top_wave_m{
  height:auto;
  animation-name: img_top_wave_m;
  animation-duration: 5000ms;
}
@keyframes img_top_wave_m {
  0% {transform: translateX(0);}
  25% {transform: translateX(-15%);}
  50% {transform: translateX(-20%);}
  75% {transform: translateX(-40%);}
  100% {transform: translateX(-50%);}
}
.img_top_wave_l{
  height:auto;
  animation-name: img_top_wave_l;
  animation-duration: 8000ms;
}
@keyframes img_top_wave_l {
  0% {transform: translateX(0);}
  25% {transform: translateX(-20%);}
  50% {transform: translateX(-15%);}
  75% {transform: translateX(-35%);}
  100% {transform: translateX(-50%);}
}
*/


.img_top_wave_s,
.img_top_wave_m,
.img_top_wave_l{
  max-width:1490px;
  width:200%;
  animation-delay: 0000ms;
  animation-fill-mode: both;
  animation-iteration-count:infinite;
  position:absolute;
  bottom:0%;
  left:0%;
  z-index:0;
}
.img_top_wave_s{
  height:auto;
  animation-name: img_top_wave_s;
  animation-duration: 3000ms;
}
@keyframes img_top_wave_s {
  0% {transform: translateX(0);}
  25% {transform: translateX(-10%);}
  50% {transform: translateX(-25%);}
  75% {transform: translateX(-35%);}
  100% {transform: translateX(-50%);}
}
.img_top_wave_m{
  height:auto;
  animation-name: img_top_wave_m;
  animation-duration: 5000ms;
}
@keyframes img_top_wave_m {
  0% {transform: translateX(0);}
  25% {transform: translateX(-15%);}
  50% {transform: translateX(-20%);}
  75% {transform: translateX(-40%);}
  100% {transform: translateX(-50%);}
}
.img_top_wave_l{
  height:auto;
  animation-name: img_top_wave_l;
  animation-duration: 8000ms;
}
@keyframes img_top_wave_l {
  0% {transform: translateX(0);}
  25% {transform: translateX(-20%);}
  50% {transform: translateX(-15%);}
  75% {transform: translateX(-35%);}
  100% {transform: translateX(-50%);}
}

.img_top_light{
  height:auto;
  position:absolute;
  width:35.75%;
  top:35.1%;
  left:31.4%;
  animation-name: img_top_light;
  animation-iteration-count:infinite;
  animation-duration: 1000ms;
  animation-direction:alternate;
  animation-fill-mode: both;
  z-index:1;
}
@keyframes img_top_light {
  0% {opacity:0;}
  33.3% {opacity:1;}
  100% {opacity:1;}
}


.img_top_leaf_l_l{
  height:auto;
  position:absolute;
  width:4.79%;
  top:49.77%;
  left:32.64%;
  animation-name: img_top_leaf_l_l;
  animation-iteration-count:infinite;
  animation-duration: 2500ms;
  /*animation-direction:alternate;*/
  animation-fill-mode: both;
  transform-origin: bottom right;
  z-index:1;
}
@keyframes img_top_leaf_l_l {
  0% {transform:rotate(0deg);}
  33.3% {transform:rotate(5deg) translate(3%,2%);}
  50% {transform:rotate(15deg);}
  100% {transform:rotate(0deg);}
}
.img_top_stem_l{
  height:auto;
  position:absolute;
  width:1.6%;
  top:53.86%;
  left:36.38%;
  animation-name: img_top_stem_l;
  animation-iteration-count:infinite;
  animation-duration: 2500ms;
  /*animation-direction:alternate;*/
  animation-fill-mode: both;
  transform-origin: bottom left;
  z-index:1;
}
@keyframes img_top_stem_l {
  0% {transform:rotate(0deg);}
  33.3% {transform:rotate(5deg);}
  50% {transform:rotate(5deg);}
  100% {transform:rotate(0deg);}
}
.img_top_leaf_l_r{
  height:auto;
  position:absolute;
  width:4.61%;
  top:50.9%;
  left:37.9%;
  animation-name: img_top_leaf_l_r;
  animation-iteration-count:infinite;
  animation-duration: 2500ms;
  /*animation-direction:alternate;*/
  animation-fill-mode: both;
  transform-origin: bottom left;
  z-index:1;
}
@keyframes img_top_leaf_l_r {
  0% {transform:rotate(0deg);}
  33.3% {transform:rotate(5deg) translate(3%,2%);}
  50% {transform:rotate(5deg)}
  100% {transform:rotate(0deg);}
}


.img_top_leaf_c_l{
  height:auto;
  position:absolute;
  width:4.79%;
  top:49.77%;
  left:44.94%;
  animation-name: img_top_leaf_c_l;
  animation-iteration-count:infinite;
  animation-duration: 3000ms;
  /*animation-direction:alternate;*/
  animation-fill-mode: both;
  transform-origin: bottom right;
  z-index:1;
}
@keyframes img_top_leaf_c_l {
  0% {transform:rotate(0deg);}
  33.3% {transform:rotate(5deg) translate(3%,2%);}
  50% {transform:rotate(15deg);}
  100% {transform:rotate(0deg);}
}
.img_top_stem_c{
  height:auto;
  position:absolute;
  width:1.6%;
  top:53.86%;
  left:48.69%;
  animation-name: img_top_stem_c;
  animation-iteration-count:infinite;
  animation-duration: 3000ms;
  /*animation-direction:alternate;*/
  animation-fill-mode: both;
  transform-origin: bottom left;
  z-index:1;
}
@keyframes img_top_stem_c {
  0% {transform:rotate(0deg);}
  33.3% {transform:rotate(5deg);}
  50% {transform:rotate(5deg);}
  100% {transform:rotate(0deg);}
}
.img_top_leaf_c_r{
  height:auto;
  position:absolute;
  width:4.61%;
  top:50.9%;
  left:50.07%;
  animation-name: img_top_leaf_c_r;
  animation-iteration-count:infinite;
  animation-duration: 3000ms;
  /*animation-direction:alternate;*/
  animation-fill-mode: both;
  transform-origin: bottom left;
  z-index:1;
}
@keyframes img_top_leaf_c_r {
  0% {transform:rotate(0deg);}
  33.3% {transform:rotate(5deg) translate(3%,2%);}
  50% {transform:rotate(5deg)}
  100% {transform:rotate(0deg);}
}


.img_top_leaf_r_l{
  height:auto;
  position:absolute;
  width:4.79%;
  top:49.77%;
  left:58.34%;
  animation-name: img_top_leaf_r_l;
  animation-iteration-count:infinite;
  animation-duration: 2000ms;
  /*animation-direction:alternate;*/
  animation-fill-mode: both;
  transform-origin: bottom right;
  z-index:1;
}
@keyframes img_top_leaf_r_l {
  0% {transform:rotate(0deg);}
  33.3% {transform:rotate(5deg) translate(3%,2%);}
  50% {transform:rotate(15deg);}
  100% {transform:rotate(0deg);}
}
.img_top_stem_r{
  height:auto;
  position:absolute;
  width:1.6%;
  top:53.86%;
  left:62.09%;
  animation-name: img_top_stem_r;
  animation-iteration-count:infinite;
  animation-duration: 2000ms;
  /*animation-direction:alternate;*/
  animation-fill-mode: both;
  transform-origin: bottom left;
  z-index:1;
}
@keyframes img_top_stem_r {
  0% {transform:rotate(0deg);}
  33.3% {transform:rotate(5deg);}
  50% {transform:rotate(5deg);}
  100% {transform:rotate(0deg);}
}
.img_top_leaf_r_r{
  height:auto;
  position:absolute;
  width:4.61%;
  top:50.9%;
  left:63.47%;
  animation-name: img_top_leaf_r_r;
  animation-iteration-count:infinite;
  animation-duration: 2000ms;
  /*animation-direction:alternate;*/
  animation-fill-mode: both;
  transform-origin: bottom left;
  z-index:1;
}
@keyframes img_top_leaf_r_r {
  0% {transform:rotate(0deg);}
  33.3% {transform:rotate(5deg) translate(3%,2%);}
  50% {transform:rotate(5deg)}
  100% {transform:rotate(0deg);}
}


.img_top_blink_1,
.img_top_blink_2,
.img_top_blink_3,
.img_top_blink_4{
  height:auto;
  position:absolute;
  width:1.85%;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-fill-mode: both;
  z-index:1;
}
.img_top_blink_1{
  top:58.25%;
  left:24.36%;
  animation-duration: 1000ms;
  animation-name: img_top_blink_1;
}
@keyframes img_top_blink_1 {
  0% {opacity:0;}
  100% {opacity:1;}
}
.img_top_blink_2{
  top:46.18%;
  left:27.33%;
  animation-duration: 1250ms;
  animation-name: img_top_blink_2;
}
@keyframes img_top_blink_2 {
  0% {opacity:0;}
  100% {opacity:1;}
}
.img_top_blink_3{
  top:50.3%;
  left:69.8%;
  animation-duration: 1500ms;
  animation-name: img_top_blink_3;
}
@keyframes img_top_blink_3 {
  0% {opacity:0;}
  100% {opacity:1;}
}
.img_top_blink_4{
  top:60.6%;
  left:73.3%;
 animation-duration: 1750ms;
 animation-name: img_top_blink_4;
}
@keyframes img_top_blink_4 {
  0% {opacity:0;}
  100% {opacity:1;}
}


.flow {
  width:100%;
}
.flow .flow_rl {
  background: url(../img/img_top_flow_rl.png);
  background-size: 200% 100%;
  position: absolute;
  width: 4.11%;
  height: 16.21%;
  overflow: hidden;
  top: 73.8%;
  z-index: 9;
  left: 23.8%;
  overflow: hidden;
}
.flow .flow_rl img{
  animation-name: img_flow_rl;
  animation-duration: 5000ms;
  /*animation-delay: 0ms;*/
  animation-fill-mode: both;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  opacity:0.5;
  width: 200%;
}
@keyframes img_flow_rl {
  0% {transform:translate(0%, 0%) rotate(0deg) scale(1.1);}
  40% {transform:translate(0%, 0%) rotate(-360deg) scale(1.1);}
  100% {transform:translate(0%, 0%) rotate(-360deg) scale(1.1);}
}
.flow .flow_y {
    background: #65AADD;
    position: absolute;
    width: 44.5%;
    height: 4.1%;
    overflow: hidden;
    top: 85.9%;
    z-index: 10;
    left: 27.8%;
    text-align: left;
}
.flow .flow_y img{
  animation-name: img_flow_y;
  animation-duration: 5000ms;
  /*animation-delay: 0ms;*/
  animation-fill-mode: both;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  width:50%;
  height:400%;
  opacity:0.5;
}
@keyframes img_flow_y {
  0% {transform:translateX(-100%);}
  20% {transform:translateX(-100%);}
  80% {transform:translateX(200%);}
  100% {transform:translateX(200%);}
}
.flow .flow_rr {
  background: url(../img/img_top_flow_r.png);
  background-size: 200% 100%;
  position: absolute;
  background-position: top right;
  width: 4.11%;
  height: 16.21%;
  overflow: hidden;
  top: 73.8%;
  z-index: 9;
  left: 72.2%;
  overflow: hidden;
/*  background: url(../img/img_top_flow_r.png);
  background-size: 100% 100%;
  position: absolute;
  width: 8.22%;
  height: 16.21%;
  overflow: hidden;
  top: 73.8%;
  z-index: 9;
  left: 67.5%;
  overflow: hidden;*/
}
.flow .flow_rr img{
  animation-name: img_flow_rr;
  animation-duration: 5000ms;
  /*animation-delay: 0;*/
  animation-fill-mode: both;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  opacity:0.5;
    width: 200%;
    margin-left: -100%;
}
@keyframes img_flow_rr {
  0% {transform:translate(0%, 0%) rotate(0deg) scale(1.1);}
  60% {transform:translate(0%, 0%) rotate(0deg) scale(1.1);}
  100% {transform:translate(0%, 0%) rotate(-360deg) scale(1.1);}
}


.wall{
  width: 47%;
  height: 20.5%;
  border: 4px solid #777;
  position: absolute;
  border-top: none;
  z-index:10;
  top: 62%;
  left: 50%;
  opacity:0.5;
  box-sizing: border-box;
  transform: translateX(-50%);
}


@media screen and (max-width:799px) {
  /*SP-Tablet*/

}

@media screen and (max-width:479px) {
  /*SP*/
  .wall{
    border:2px solid #bbb;
    border-top:none;
    top: 62%;
    width:46.5%;
  }
  .animation {
    width: 120%;
    margin-left: -10%;
  }


}


/*--------------------------------------------------
  Specialty
--------------------------------------------------*/
#specialty_content{
	background:url(../img/bg_content.jpg) ;
	padding:5rem 0;
  overflow:hidden;
}
#specialty_content .copy{
	text-align: center;
	font-size:1.875rem;
	color:#00A213;
	margin-bottom: 3rem;
}
#specialty_content .specialty_box{
	background:#fff;
	border-radius:20px;
	position:relative;
	margin-bottom:6rem;
}
#specialty_content h3{
  font-family: dnp-shuei-mgothic-std, sans-serif;
  font-weight: 600;
  font-style: normal;
	position:absolute;
	top:0;
	left:0;
	font-weight:normal;
	background:#00A213;
	font-size:1.25rem;
	border-radius:20px 0 20px 0;
	padding:0.5rem 2rem ;
	display: inline-block;
	color:#fff;
	margin-bottom:1.5rem;
  z-index: 10;
}
#specialty_content p{
	padding-bottom:1.5rem;
}
#specialty_content .animation_caption{
  font-size: 0.8rem;
  padding: 0;
  text-align: center;
  color: #626262;
  z-index: 111110;
  margin-bottom: 2rem;
  line-height: 1;
}
#specialty_content .specialty_wrap{
	padding:2rem 3rem 2rem 3rem;
}
#specialty_content .specialty_wrap .shuei_b{
  font-size:1.25rem;
}
#specialty_content .specialty_wrap .flex{
	justify-content:space-between;
}
#specialty_content .text{
	font-size:0.875rem;
	line-height: 2;
	padding-bottom:0;
}
#specialty_content .left{
	width:57%;
    margin-top: 3rem;
}
#specialty_content .right{
	width:40%;
}
#specialty_content .orijin_wrap{
	position:relative;
}
/*#specialty_content .orijin_animetion {
	max-width:340px;
}*/
#specialty_content .orijin_animetion{
  text-align: center;
}
#specialty_content .orijin_animetion img{
	position: absolute;
  /*left: 50%;*/
  top: 0;
  z-index: 1;
}
#specialty_content .effect-fade .orijin_animetion img.character{
	max-width:340px;
	opacity:0;
}
#specialty_content .effect-fade.effect-scroll .orijin_animetion img.character{
	max-width:340px;
	animation-name: animation_orijin_character;
	animation-duration: 500ms;
	animation-delay: 0000ms;
	animation-fill-mode: both;
	/*transition-timing-function:ease-in-out;*/
}
@keyframes animation_orijin_character {
	0% {transform: translate(-50%,0); opacity:0; }
	80% {transform: translate(-50%,-90px); opacity:1; display: initial;}
	100% {transform: translate(-50%,-80px); opacity:1;}
}
#specialty_content .orijin_animetion img.balloon{
	max-width:340px;
	opacity:0;
}
#specialty_content .effect-scroll .orijin_animetion img.balloon{
	animation-name: animation_orijin_balloon;
	animation-duration: 500ms;
	animation-delay: 500ms;
	animation-fill-mode: both;
	/*transition-timing-function:ease-in-out;*/
}
@keyframes animation_orijin_balloon {
	0% {transform: translate(-50%,0); opacity:0;}
	80% {transform: translate(-50%,-90px); opacity:1;}
	100% {transform: translate(-50%,-80px); opacity:1;}
}
#specialty_content .orijin{
	background:#FFF39B;
	padding:2rem 3rem;
	box-sizing: border-box;
	border-radius:20px;
	color:#00A213;
	justify-content:space-between;
	z-index:2;
	position:relative;
}
#specialty_content .orijin_left{
	width:45%;
}
#specialty_content .orijin_right{
	width:50%;
}
#specialty_content .orijin_title{
	font-size:1.375rem;
}
#specialty_content .orijin_text{
	font-size:0.875rem;
	line-height:2;
	margin-top:1rem;
	padding-bottom: 0;
}


@media screen and (max-width:799px) {
	/*SP-Tablet*/

}

@media screen and (max-width:479px) {
	/*SP*/
  #specialty_content .specialty_wrap {
    padding: 1rem 2rem 3rem;
  }
	#specialty_content .specialty_box {
	    text-align: center;
      margin-bottom:8rem;
	}
	#specialty_content h3 {
		border-radius: 0 0 20px 20px;
		position:static;
	}
	#specialty_content .orijin {
		padding: 2rem 2rem;
	}
	#specialty_content .orijin_left,
	#specialty_content .orijin_right {
	    width: 100%;
	}
	#specialty_content .orijin_title{
		font-size:1.375rem;
	    margin: 0 auto;
	}
  #specialty_content .specialty_wrap .shuei_b{
    font-size:1.125rem;
  }
	#specialty_content .left{
		order: 2;
	    width: 100%;
	}
	#specialty_content .left p{
		order: 2;
	    width: 100%;
	}
	#specialty_content p{
	    text-align:left;
	}
	#specialty_content .right{
		order: 1;
	    width: 100%;
	}
  #specialty_content .relief_character{
    max-width: 290px;
    position: relative;
    right: 0%;
    bottom: -14%;
  }
  #specialty_content .effect-fade.effect-scroll .orijin_animetion img.character{
    max-width:340px;
    animation-name: animation_orijin_character;
    animation-duration: 500ms;
    animation-delay: 0000ms;
    animation-fill-mode: both;
    /*transition-timing-function:ease-in-out;*/
  }
  @keyframes animation_orijin_character {
    0% {transform: translate(-50%,0); opacity:0; }
    80% {transform: translate(-50%,-90px); opacity:1; display: initial;}
    100% {transform: translate(-50%,-80px); opacity:1;}
  }
}