@charset "UTF-8";
/************************************
******FV A
************************************/
.a_fv_wrap{
	background: url("../img/a_fv_bg.webp")no-repeat center top;
	background-size: contain;
	padding: 18% 0 72%;
}
.a_fv_head{
	position: absolute;
	z-index: 2;
	width: 96%;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
}
.a_fv_head_arrow1{
	position: absolute;
	top: 3%;
	left: 3%;
	width: 4.557%;
	animation: a_fv_head_arrow 1.5s ease-in 0s infinite;
}
.a_fv_head_arrow2{
	position: absolute;
	top: 3%;
	right: 3%;
	width: 4.557%;
	animation: a_fv_head_arrow 1.5s ease-in 0s infinite;
}
@-webkit-keyframes a_fv_head_arrow {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  30%,60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 70%, 0);
    transform: translate3d(0, 70%, 0);
  }
}
@keyframes a_fv_head_arrow {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  30%,60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 70%, 0);
    transform: translate3d(0, 70%, 0);
  }
}
.a_fv_sign{
	position: absolute;
	z-index: 2;
	width: 35.625%;
	top: -12%;
	right: 2%;
	animation-name: fadeInRight_fv;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes fadeInRight_fv {
0%,90% {
     opacity: 0;
     transform: translateX(20%);
  }
  100% {
     opacity: 1;
     transform: translateX(0);
  }
}
.a_fv_title_bg{
	position: absolute;
	z-index: 1;
	bottom: 0.3%;
	left: 0;
	right: 0;
	margin: auto;
	height: auto;
}
.a_fv_title{
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	margin: auto;
	width: 38.375%;
	bottom: 29%;
}
.a_fv_baloon1{
	position: absolute;
	z-index: 2;
	width: 23.25%;
	left: -3.2%;
	top: 15%;
}
.a_fv_baloon2{
	position: absolute;
	z-index: 2;
	width: 23.25%;
	right: -3.2%;
	top: 15%;
}
.a_fv_baloon3{
	position: absolute;
	z-index: 2;
	width: 19.375%;
	left: 3%;
	bottom: 19%;
}
.a_fv_baloon4{
	position: absolute;
	z-index: 2;
	width: 19.375%;
	right: 3%;
	bottom: 19%;
}
.a_fv_baloon5{
	position: absolute;
	z-index: 2;
	width: 19.375%;
	left: 0;
	right: 0;
	bottom: 4%;
	margin: 0 auto;
}
.a_fv_baloon1 img{
	animation: rubberBand 2.5s ease 0.1s infinite;
}
.a_fv_baloon2 img{
	animation: rubberBand 2.5s ease 0.4s infinite;
}
.a_fv_baloon3 img{
	animation: rubberBand 2.5s ease 0.7s infinite;
}
.a_fv_baloon4 img{
	animation: rubberBand 2.5s ease 1s infinite;
}
.a_fv_baloon5 img{
	animation: rubberBand 2.5s ease 1.3s infinite;
}
.a_fv_light_1{
	position: absolute;
	z-index: 2;
	width: 6.5%;
	left: 23%;
	bottom: 33%;
	animation:blink 1.5s ease 0.2s infinite;
}
.a_fv_light_2{
	position: absolute;
	z-index: 2;
	width: 4.5%;
	right: 24%;
	bottom: 38%;
	animation:blink 1.5s ease 0.6s infinite;
}
.a_fv_light_3{
	position: absolute;
	z-index: 2;
	width: 4.5%;
	left: 23%;
	top: 9%;
	animation:blink 1.5s ease 1.2s infinite;
}
.a_fv_light_4{
	position: absolute;
	z-index: 2;
	width: 6.5%;
	left: 27%;
	bottom: 5%;
	animation:blink 1.5s ease 0.2s infinite;
}
.a_fv_light_5{
	position: absolute;
	z-index: 2;
	width: 4.5%;
	right: 18%;
	bottom: 19%;
	animation:blink 1.5s ease 1.2s infinite;
}

.a_fv_fire1_1{
	position: absolute;
	z-index: -2;
	width: 31%;
	left: 0.5%;
	bottom: -16%;
	opacity: 0;
	animation:fade_fire 3s ease 1.5s infinite;
}
.a_fv_fire1_2{
	position: absolute;
	z-index: -2;
	width: 31%;
	right: 0.5%;
	bottom: -10%;
	opacity: 0;
	animation:fade_fire 3s ease 0.1s infinite;
}
.a_fv_fire1_3{
	position: absolute;
	z-index: -2;
	width: 18%;
	left: -6%;
	bottom: 4%;
	opacity: 0;
	animation:fade_fire 3s ease 0.1s infinite;
}
.a_fv_fire1_4{
	position: absolute;
	z-index: -2;
	width: 18%;
	right: -5%;
	bottom: 4%;
	opacity: 0;
	animation:fade_fire 3s ease 1.1s infinite;
}
.a_fv_fire1_5{
	position: absolute;
	z-index: -1;
	width: 10%;
	left: 19%;
	bottom: 2%;
	opacity: 0;
	animation:fade_fire 3s ease 0.7s infinite;
}
.a_fv_fire1_6{
	position: absolute;
	z-index: -1;
	width: 10%;
	right: 19%;
	bottom: 2%;
	opacity: 0;
	animation:fade_fire 3s ease 1.7s infinite;
}
.a_fv_fire2_1{
	position: absolute;
	z-index: -1;
	width: 12.5%;
	left: 11.5%;
	bottom: -6%;
	opacity: 0;
	animation:fade_fire 3s ease 0.4s infinite;
}
.a_fv_fire2_2{
	position: absolute;
	z-index: -1;
	width: 12.5%;
	right: 9.5%;
	bottom: -4%;
	opacity: 0;
	animation:fade_fire 3s ease 1.2s infinite;
}
.a_fv_fire2_3{
	position: absolute;
	z-index: 1;
	width: 18.75%;
	left: 23.5%;
	bottom: 19%;
	opacity: 0;
	animation:fade_fire 2.5s ease 1.2s infinite;
}
.a_fv_fire2_4{
	position: absolute;
	z-index: 1;
	width: 11.25%;
	right: 26.5%;
	bottom: 39%;
	opacity: 0;
	animation:fade_fire 2.5s ease 0.1s infinite;
}
.a_fv_fire2_5{
	position: absolute;
	z-index: 1;
	width: 22.75%;
	left: -2%;
	bottom: -8%;
	opacity: 0;
	animation:fade_fire 3s ease 1.2s infinite;
}
.a_fv_fire2_6{
	position: absolute;
	z-index: 1;
	width: 25%;
	right: -1%;
	bottom: -11%;
	opacity: 0;
	animation:fade_fire 3s ease 0.2s infinite;
}
@keyframes fade_fire {
    0% {opacity: 0;-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);}
	30%,50% {opacity: 1;-webkit-transform: translate3d(0, -1%, 0);
    transform: translate3d(0, -1%, 0);}
    100% {opacity: 0;-webkit-transform: translate3d(0, 3%, 0);
    transform: translate3d(0, 3%, 0);}
}
@-webkit-keyframes fade_fire {
    0% {opacity: 0;-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);}
	30%,50% {opacity: 1;-webkit-transform: translate3d(0, -1%, 0);
    transform: translate3d(0, -1%, 0);}
    100% {opacity: 0;-webkit-transform: translate3d(0, 3%, 0);
    transform: translate3d(0, 3%, 0);}
}

.a_fv_below_fuki{
	position: absolute;
	z-index: 2;
	top: -5%;
	left: 0;
	right: 0;
	margin: auto;
	width: 46.75%;
}
.a_fv_bt{
	position: absolute;
	z-index: 2;
	width: 84%;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 13%;
}
@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}
.shiny-btn {
    position: relative;
	cursor: pointer;
	transition: .2s;
    display: block;
    width: 100%;
    background:url("../img/a_fv_bt.webp")no-repeat center center;
	background-size: cover;
	padding: 27.3809% 0 0;
	border-radius: 8vw;
    overflow: hidden;
	border: 0.3vw solid #2d6431;
}
.shiny-btn:hover {
    background:url("../img/a_fv_bt_over.webp")no-repeat center center;
	background-size: cover;
}
.shiny-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .8) 100%, rgba(255, 255, 255, 0) 0%);
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.a_fv_bt_free{
	position: absolute;
	z-index: 3;
	width: 18.45%;
	right: -3%;
	top: -5%;
}
@media screen and (min-width: 750px) {
.shiny-btn {
	border-radius: 60px;
	border: 2px solid #2d6431;
}
}
/************************************
******FV B
************************************/
.word,
.char {
  -webkit-animation-delay: var(--del);
  animation-delay: var(--del);
  -webkit-animation-direction: var(--dir, normal);
  animation-direction: var(--dir, normal);
  -webkit-animation-duration: var(--dur);
  animation-duration: var(--dur);
  -webkit-animation-iteration-count: var(--it, infinite);
  animation-iteration-count: var(--it, infinite);
  -webkit-animation-name: var(--name);
  animation-name: var(--name);
  -webkit-animation-timing-function: var(--tf);
  animation-timing-function: var(--tf);
  -webkit-animation-fill-mode: var(--fill, forwards);
  animation-fill-mode: var(--fill, forwards);
  display: inline-block;
  position: relative;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  z-index: 1; }
.headline--float .char {
  --name: float;
  --dur: 2200ms;
  --del: calc(var(--char-index) * -0.5s);
  --tf: ease-in-out;
  --dir: alternate; }
  .headline--float .char:nth-child(2n) {
    --name: float-alt; }
@-webkit-keyframes float {
  from {
    -webkit-transform: translate(2%, -10%) rotate(-1deg);
    transform: translate(2%, -10%) rotate(-1deg); }
  to {
    -webkit-transform: translate(-2%, 5%) rotate(3deg);
    transform: translate(-2%, 5%) rotate(3deg); } }
@keyframes float {
  from {
    -webkit-transform: translate(2%, -10%) rotate(-1deg);
    transform: translate(2%, -10%) rotate(-1deg); }
  to {
    -webkit-transform: translate(-2%, 5%) rotate(3deg);
    transform: translate(-2%, 5%) rotate(3deg); } }
@-webkit-keyframes float-alt {
  from {
    -webkit-transform: translate(0%, -5%) rotate(-1deg);
    transform: translate(0%, -5%) rotate(-1deg); }
  to {
    -webkit-transform: translate(2%, 10%) rotate(3deg);
    transform: translate(2%, 10%) rotate(3deg); } }
@keyframes float-alt {
  from {
    -webkit-transform: translate(0%, -5%) rotate(-1deg);
    transform: translate(0%, -5%) rotate(-1deg); }
  to {
    -webkit-transform: translate(2%, 10%) rotate(3deg);
    transform: translate(2%, 10%) rotate(3deg); } }

.loop_wrap {
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	margin: auto;
    display: flex;
    width: 100%;
    overflow: hidden;
	padding: 1% 0;
  }
.loop_wrap div {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 8vw;
	letter-spacing: 0.1em;
	padding: 1% 4% 1% 0;
    overflow: hidden;
	color: #fff;
	font-family: 'Josefin Sans', sans-serif;
  }
.loop_wrap div:nth-child(odd) {
animation: loop 50s -25s linear infinite;
}
.loop_wrap div:nth-child(even) {
animation: loop2 50s linear infinite;
}
@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
  }
.loop1{top: -3%;}
.loop2{top: 6%;}
.loop3{top: 15%;}
.loop4{top: 24%;}
.loop5{top: 33%;}
.loop6{top: 42%;}
.loop7{top: 51%;}
.loop8{top: 60%;}
.loop9{top: 69%;}
.loop10{top: 78%;}
.loop11{top: 86%;}
.loop12{top: 94%;}
@media screen and (min-width: 750px) {
.loop_wrap div {
    font-size: 60px;
	padding: 1% 20px 1% 0;
  }
}
/************************************
******FV
************************************/
.b_fv_light_top1{
	position: absolute;
	z-index: 2;
	width: 30%;
	top: 14%;
	left: -9%;
	opacity: 0;
	animation: blink_fv 2s ease-in 1s infinite;
}
.b_fv_light_top2{
	position: absolute;
	z-index: 2;
	width: 30%;
	top: 14%;
	right: -10%;
	opacity: 0;
	animation: blink_fv 2s ease-in 0.1s infinite;
}
.b_fv_light_top3{
	position: absolute;
	z-index: 2;
	width: 20%;
	top: 17%;
	left: 6%;
	opacity: 0;
	animation: blink_fv 2s ease-in 1.6s infinite;
}
.b_fv_light_top4{
	position: absolute;
	z-index: 2;
	width: 20%;
	top: 17%;
	right: 5%;
	opacity: 0;
	animation: blink_fv 2s ease-in 1.3s infinite;
}
.b_fv_light_top5{
	position: absolute;
	z-index: 2;
	width: 12%;
	top: 19.5%;
	left: 17%;
	opacity: 0;
	animation: blink_fv 2s ease-in 0.5s infinite;
}
.b_fv_light_top6{
	position: absolute;
	z-index: 2;
	width: 12%;
	top: 19.5%;
	right: 16%;
	opacity: 0;
	animation: blink_fv 2s ease-in 0.9s infinite;
}
.b_fv_light_main1{
	position: absolute;
	z-index: 2;
	width: 16%;
	top: 45.5%;
	left: 20%;
	opacity: 0;
	animation: blink_fv 1.5s ease-in 0.1s infinite;
}
.b_fv_light_main2{
	position: absolute;
	z-index: 2;
	width: 25%;
	top: 39.5%;
	right: 15%;
	opacity: 0;
	animation: blink_fv 1.5s ease-in 0.9s infinite;
}
.b_fv_light_main3{
	position: absolute;
	z-index: 2;
	width: 20%;
	top: 53.5%;
	left:40%;
	opacity: 0;
	animation: blink_fv 1.5s ease-in 1.4s infinite;
}
.b_fv_light_main4{
	position: absolute;
	z-index: 2;
	width: 12%;
	top: 51.5%;
	left:35%;
	opacity: 0;
	animation: blink_fv 1.5s ease-in 1.2s infinite;
}
.b_fv_light_main5{
	position: absolute;
	z-index: 2;
	width: 12%;
	top: 48.5%;
	right:38%;
	opacity: 0;
	animation: blink_fv 1.5s ease-in 0.8s infinite;
}
.b_fv_light_main6{
	position: absolute;
	z-index: 2;
	width: 12%;
	top: 64.5%;
	right:23%;
	opacity: 0;
	animation: blink_fv 1.5s ease-in 0.2s infinite;
}
.b_fv_light_main7{
	position: absolute;
	z-index: 2;
	width: 12%;
	top: 64.5%;
	left:25%;
	opacity: 0;
	animation: blink_fv 1.5s ease-in 1.5s infinite;
}
@-webkit-keyframes blink_fv{
    0% {opacity:0;}
	50% {opacity:1;}
    100% {opacity:0;}}
@-moz-keyframes blink_fv{
    0% {opacity:0;}
	50% {opacity:1;}
    100% {opacity:0;}}
@keyframes blink_fv{
    0% {opacity:0;}
	50% {opacity:1;}
    100% {opacity:0;}}
.b_fv_head_arrow1{
	position: absolute;
	bottom: 30%;
	left: 1.5%;
	width: 2.75%;
	animation: b_fv_head_arrow 1.5s ease-in 0s infinite;
}
.b_fv_head_arrow2{
	position: absolute;
	bottom: 30%;
	right: 1.5%;
	width: 2.75%;
	animation: b_fv_head_arrow 1.5s ease-in 0s infinite;
}
@-webkit-keyframes b_fv_head_arrow {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  30%,60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 70%, 0);
    transform: translate3d(0, 70%, 0);
  }
}
@keyframes b_fv_head_arrow {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  30%,60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 70%, 0);
    transform: translate3d(0, 70%, 0);
  }
}
.b_fv_wrap{
	position: relative;
	z-index: -1;
	background: url("../img/b_fv_bg.webp")no-repeat center center;
	background-size: cover;
}
.b_fv_read{
	width: 92.25%;
	margin: 0 auto;
	padding: 11% 0 4%;
}
.b_fv_circle{
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	margin: auto;
	top: -2.8%;
	width: 60%;
	animation:20s linear infinite rotation1;
}
.b_fv_main{
	margin: -8% 0 0;
	padding: 0 0 2%;
}
.b_fv_baloon1{
	position: absolute;
	z-index: 1;
	width: 25%;
	left: 2%;
	top: 6%;
	animation: rubberBand 2.5s ease 0.1s infinite;
}
.b_fv_baloon2{
	position: absolute;
	z-index: 1;
	width: 18.125%;
	right: 4%;
	top: 11%;
	animation: rubberBand 2.5s ease 0.4s infinite;
}
.b_fv_baloon3{
	position: absolute;
	z-index: 1;
	width: 24%;
	left: -2%;
	bottom: 28%;
	animation: rubberBand 2.5s ease 0.7s infinite;
}
.b_fv_baloon4{
	position: absolute;
	z-index: 1;
	width: 25.5%;
	right: -3%;
	bottom: 26%;
	animation: rubberBand 2.5s ease 1s infinite;
}
.b_fv_baloon5{
	position: absolute;
	z-index: 1;
	width: 25.125%;
	right: 31%;
	bottom: 3%;
	animation: rubberBand 2.5s ease 1.3s infinite;
}
.b_fv_title{
	position: absolute;
	z-index: 1;
	width: 38%;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 29%;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
.b_fv_below_fuki{
	position: absolute;
	z-index: 2;
	top: -5%;
	left: 0;
	right: 0;
	margin: auto;
	width: 46.75%;
}
@media screen and (min-width: 750px) {
}