html, body {
margin:0;
padding:0;
height: 100%;
}

img {
line-height: 0;
max-width: 100%;
height: auto;
}

#wrap {
max-width:750px;
margin:0 auto;
height: 100%;
}

#content {
width: 100%;
margin:0 auto;
height: 100%;
}


.bg-01 {
width: 100%;
height: auto;
position: relative;
}

.fv {
width: 100%;
height: auto;
position: relative;
}

.top{
position:relative;
height: auto;
}


.top1{
height: auto;
}

.top2{
position: absolute;
top: 0.01em;
z-index: -1;
height: auto;
}


.fv_fade{
animation: fadeIn 3.5s 1 normal;
width:100%;
position:relative;
height: auto;
}


/*@keyframes fadeIn { 
  0% {opacity: 0} 
  35% {opacity: 0} 
  100% {opacity: 1} 
}


.drop{
position:absolute;
top:-1em;
margin:0 auto;
width: 100%;
height: auto;
}


.drop-shaped{
  position: relative;
  margin:  0 auto;
  top: -20px;
  width: 20px;
  height: 20px;
  background: #005508;
  border-radius: 0% 100% 50% 50%/ 0% 50% 50% 100%;
  transform: rotate(45deg) skew(10deg, 10deg);
  animation: 1.2s cubic-bezier(.97,.03,.86,.12) 0s normal running fall;
}


@keyframes fall {
  to {
    top: 400px;
  }
}

.ripple {
  position: relative;
  margin:  0 auto;
  top: 450px;
  width: 500px;
  height: 150px;
  border-radius: 400px / 150px;
  border: 2px solid #005508;
  transform: scale(0.01,0.01);
  opacity: 0;
  animation: 3s ease-out 1.2s normal running spread;
}

@keyframes spread {
  from {
    opacity: 1;
  }
  to {
    transform: scale(1,1);
    opacity: 0;
  }
}

.delay1 {
top: 290px;
animation-delay: 1.6s;
}

.delay2 {
top: 130px;
animation-delay: 1.9s;
}

@media screen and (max-width: 749px) {
.drop{
position:absolute;
width: 100%;
top:-0.5vw;
}

@keyframes fall {
  to {
    top: 250px;
  }
}
.ripple {
  position: absolute;
left:-17vw;
  top: 52vw;
  width: 500px;
  height: 150px;px / 150px;
  border: 2px solid #005508;
  transform: scale(0.01,0.01);
  opacity: 0;
  animation: 3s ease-out 1.2s normal running spread;
}

.delay1 {
animation-delay: 1.4s;
}

.delay2 {
animation-delay: 1.6s;
}
}*/


.cta {
width: 100%;
height: auto;
position: relative;
}


.btn_area{
    position: absolute;
    bottom: 5%;
width:100%;
    cursor: pointer;
}


.btn {
  animation: btn 3s ease infinite;
animation-delay: 3s;
}

@keyframes btn {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-15px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(-15px) }
  50% { transform:translateX(0) }
  100% { transform:translateX(0) }
}


@media screen and (max-width: 749px) {
@keyframes btn {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-1.5vw) }
  30% { transform:translateX(1.5vw) }
  50% { transform:translateX(0) }
  100% { transform:translateX(0) }
}
}


.btn2 {
  animation: btn 3s ease infinite;
}

@keyframes btn2 {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-15px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(-15px) }
  50% { transform:translateX(0) }
  100% { transform:translateX(0) }
}


@media screen and (max-width: 749px) {
@keyframes btn2 {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-1.5vw) }
  30% { transform:translateX(1.5vw) }
  50% { transform:translateX(0) }
  100% { transform:translateX(0) }
}
}


.bg-02 {
width: 100%;
height: auto;
position: relative;
}


.bg-02_a{
position: absolute;
left: 1%;
bottom: 17%;
width: auto;
}


@media screen and (max-width: 749px) {
.bg-02_a {
    position: absolute;
    left: 2%;
    bottom: 15%;
    width: 40vw;
}
}



.bg-03 {
width: 100%;
height: auto;
position: relative;
}



.animation-container {
font-family: 'Open Sans';
  font-weight: 800;
  opacity: 1;
}

.animation-container svg {
display: block;
width: 100%;
}

.animation-container svg .text {
  width: 100%;
  fill: transparent;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-dasharray: 90,310;
  stroke-dashoffset: 0;
  -webkit-animation: text 10s infinite linear;
  animation: text 10s infinite linear;
}

.animation-container svg .text:nth-child(4n + 1) {
  stroke: #fff;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.animation-container svg .text:nth-child(4n + 2) {
  stroke: #fff;
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
}

.animation-container svg .text:nth-child(4n + 3) {
  stroke: #fff;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

.animation-container svg .text:nth-child(4n + 4) {
  stroke: #fff;
  -webkit-animation-delay: -8s;
  animation-delay: -8s;
}

.animation-container svg .text:nth-child(4n + 5) {
  stroke: #fff;
  -webkit-animation-delay: -10s;
  animation-delay: -10s;
}


@-webkit-keyframes text {
  100% {
    stroke-dashoffset: -400;
  }
}


@media screen and (max-width: 749px) {

.animation-container svg .text {
  width: 100%;
  fill: transparent;
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-dasharray: 90,310;
  stroke-dashoffset: 0;
  -webkit-animation: text 10s infinite linear;
  animation: text 10s infinite linear;
}

.animation-container svg .text:nth-child(4n + 1) {
  stroke: #fff;
  -webkit-animation-delay: -3s;
  animation-delay: -2s;
}

.animation-container svg .text:nth-child(4n + 2) {
  stroke: #fff;
  -webkit-animation-delay: -6s;
  animation-delay: -4s;
}

.animation-container svg .text:nth-child(4n + 3) {
  stroke: #fff;
  -webkit-animation-delay: -10s;
  animation-delay: -6s;
}
}


.animation{
  opacity : 0;
  visibility: hidden;
  transition: 1s;
  transform: translateY(80px);
}

/*アニメーション要素までスクロールした時のスタイル*/
.active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.animation2{
  opacity : 0;
  visibility: hidden;
  transition: 1s;
  transition-delay: 0.1s; 
  transform: translateX(-80px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active2{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0.1s; 
}


.animation3{
  opacity : 0;
  visibility: hidden;
  transition: 1s;
  transition-delay: 0.1s; 
}

/*アニメーション要素までスクロールした時のスタイル*/
.active3{
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  position: relative;
}


.active3:before,
.active3:after {
  animation: 1s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1;
}

.active3:before {
  animation-name: active3-before;
  left: 0;
  right: 50%;
}

.active3:after {
  animation-name: active3-after;
  left: 50%;
  right: 0;
}

@keyframes active3-before {
  100% {
    transform: translateY(100%);
  }
}

@keyframes active3-after {
  100% {
    transform: translateY(-100%);
  }
}



.animation4{
  opacity : 0;
  visibility: hidden;
  transition: 1s;
  transition-delay: 0.2s; 
  transform: translateY(-80px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active4{
  opacity: 1;
  visibility: visible;
  transition-delay: 0.2s; 
  transform: translateX(0);
}


.animation5 {
    animation-name: fuwafuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

@keyframes fuwafuwa {
    0% {
        transform: translate(0,5px);
    }

    100% {
        transform: translate(0,-5px)
    }
}


.animation6 {
    animation-name: fuwafuwa2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

@keyframes fuwafuwa2 {
    0% {
        transform: translate(0,-5px);
    }

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




.animation7{
  opacity : 0;
  visibility: hidden;
  transition: 1s;
  transition-delay: 0.1s; 
  transform: translateX(-80px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active7{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0.1s; 
}


.animation8{
}

/*アニメーション要素までスクロールした時のスタイル*/
.active8 {
animation: boyon 0.5s ease normal;
animation-delay: 0.8s;
}

@keyframes boyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  60%  { transform: scale(0.9, 1.2) translate(0%, -50%); }
  75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
  85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}



.TextTyping span {
display: none;
font-family: 'M PLUS Rounded 1c', sans-serif;
}

/*文字列後ろの線の設定*/
.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}




.bg-04 {
width: 100%;
height: auto;
position: relative;
}

.bg-05 {
width: 100%;
height: auto;
position: relative;
}


.bg-05_a {
position: absolute;
bottom: 38%;
width: 100%;
font-size: 14em;
}


.bg-05_b {
position: absolute;
bottom: 73%;
width: 100%;
}


@media screen and (max-width: 749px) {
.bg-05_a {
position: absolute;
bottom: 58vw;
width: 100%;
font-size: 14em;
}
}


.bg-06 {
width: 100%;
height: auto;
position: relative;
}


.bg-06_a {
position: absolute;
bottom: 38%;
width: 100%;
font-size: 14em;
}


.bg-06_b {
position: absolute;
bottom: 73%;
width: 100%;
}


.bg-07 {
width: 100%;
height: auto;
position: relative;
}

.bg-07_1 {
width: 100%;
height: auto;
position: relative;
}


.bg-07_2 {
width: 100%;
height: auto;
position: relative;
}


.bg-07_3 {
width: 100%;
height: auto;
position: relative;
}


.bg-08 {
width: 100%;
height: auto;
position: relative;
}

.bg-08_a{
position: absolute;
bottom: 85%;
width: auto;
}


.bg-08_b{
position: absolute;
bottom: 37%;
width: auto;
}


.bg-08_c{
position: absolute;
bottom: 19%;
left: 15%;
width: auto;
}


.bg-08_d{
position: absolute;
left: 55%;
bottom: 19%;
width: auto;
}


@media screen and (max-width: 749px) {
.bg-08_a{
position: absolute;
bottom: 85%;
width: auto;
}


.bg-08_b{
position: absolute;
bottom: 37%;
width: auto;
}


.bg-08_c{
position: absolute;
bottom: 19%;
left: 15%;
width: 35vw;
}



.bg-08_d{
position: absolute;
left: 55%;
bottom: 19%;
width: 35vw;
}
}


.bg-09 {
width: 100%;
height: auto;
position: relative;
}


.bg-10 {
width: 100%;
height: auto;
position: relative;
}


.bg-10_a{
position: absolute;
bottom: 75%;
left: 5%;
width: 90%;
font-size:2.2em;
font-weight:100;
color:#6aa089;
}

.bg-10_b{
position: absolute;
bottom: 19%;
left:5%;
width: auto;
}

.bg-10_c{
position: absolute;
bottom: 14%;
left:50%;
width: auto;
}

@media screen and (max-width: 749px) {
.bg-10_a{
position: absolute;
bottom: 75%;
width: 90%;
font-size: 4vw;
font-weight:100;
color:#6aa089;
overflow: hidden;
}


.bg-10_b{
position: absolute;
bottom: 25vw;
left:5%;
width:50vw;
}

.bg-10_c{
position: absolute;
bottom: 14%;
left:50%;
width: 50vw;
}
}



.bg-11 {
width: 100%;
height: auto;
position: relative;
}


.bg-12 {
width: 100%;
height: auto;
position: relative;
}



.bg-13 {
width: 100%;
height: auto;
position: relative;
}


.cta_mid {
width: 100%;
height: auto;
position: relative;
}