body{
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
}

main{
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
  img {
  width:100%;
  max-width: 100%;
  height: auto;
  }
}

.fv{
  position: relative;
  text-align: center;
}

.one_title{
  position: absolute;
  top: 38%;
  right: 74%;
}

.three_title{
  position: absolute;
  top: 31%;
  right: 42%;
}

.five_title{
  position: absolute;
  top: 25%;
  left: 60%;
}

@media screen and (max-width: 768px) {
  .one_title{
    width: 21%;
    top: 38%;
    right: 73%;
  }
  
  .three_title{
    width: 31%;
    top: 30%;
    right: 41%;
  }
  
  .five_title{
    width: 37%;
    top: 25%;
    left: 60%;
  }}

/*titleアニメーション*/

.scale-in-bottom{-webkit-animation:scale-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both}
 @-webkit-keyframes scale-in-bottom{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}}@keyframes scale-in-bottom{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}}
 
 .scale-in-bottom_02{-webkit-animation:scale-in-bottom .5s cubic-bezier(.25,.46,.45,.94) .5s both;animation:scale-in-bottom .5s cubic-bezier(.25,.46,.45,.94) .5s both}
 @-webkit-keyframes scale-in-bottom{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}}@keyframes scale-in-bottom{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}}

 .scale-in-bottom_03{-webkit-animation:scale-in-bottom .5s cubic-bezier(.25,.46,.45,.94) 1s both;animation:scale-in-bottom .5s cubic-bezier(.25,.46,.45,.94) 1s both}
 @-webkit-keyframes scale-in-bottom{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}}@keyframes scale-in-bottom{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}}


 .btn_area{
  position: relative;
}
/*フォーム上*/

 .ib{
  position: absolute;
  top:6%;
  width: 100%;
  /* padding: 5% 0; */
}

@media screen and (max-width: 768px) {
  .ib{
    width: 92%;
    left: 4%;
    top: 4%;
  }
}

.btn_frame{
  position: relative;
  top: 10%;
}

.input{
	margin:0 auto;
	width:90%;
	padding:15px;
	font-size:1.5rem;
	text-align: center;
}

.input img{
	width:100%;
}

@media screen and (max-width: 768px) {
  .input{
    margin:0 auto;
    width:96%;
    padding:6px;
    font-size:1rem;
    text-align: center;
  }
}

input:first-child{
  border: 5px solid #5eb85d;
  background-color: #fff;
  border-radius: 10px;
  margin: 0%  0 3%;
}

@media screen and (max-width: 768px) {
  input:first-child{
    border: 5px solid #5eb85d;
    padding: 3%;
  }
}

.submit{
	margin: -2% 0% 10% 0%;
}

@media screen and (max-width: 768px) {
  .submit{
    margin: -4% 0% 10% 0%;
  }
  }

/*ボタンアニメーション*/
.pulsate-fwd{-webkit-animation:pulsate-fwd 1.5s ease-in-out infinite both;animation:pulsate-fwd 1.5s ease-in-out infinite both}
 @-webkit-keyframes pulsate-fwd{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulsate-fwd{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}

/*カウントアップ*/
.present{
  position: relative;
}

.number p {
  position: absolute;
  color: #5eb85d;
  font-size: 90px;
  font-weight: bold;
  top: 12%;
  left: 30%;
}

@media screen and (max-width: 768px) {
  .number p {
    font-size: 50px;
    top: 11%;
    left: 33%;
  }
}

/*カウントダウン*/
.countdown_area {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 800px;
  font-size: 120px;
  font-weight: bold;
  color: #222932;
}

@media screen and (max-width: 768px) {
  .countdown_area {
    top: 64%;
    width: 100%;
    font-size: 70px;
  }
}

 /*フッター*/

footer {
  border-top: 2px solid #5eb85d;
  padding: 5% 0 0 0;
  position: relative;
  z-index: 9999;
  color: #fff;
  background:#5eb85d;
  margin-top: auto;
}

footer a {
  color: #fff;
  text-decoration: underline;
}

.copy {
  text-align: center;
  padding: 10px 0;
  color: #fff;
  font-size: 11px;
}

/* fadeUp*/
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
  animation-name: fadeUpAnime;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
  opacity: 0;
}

/*** サンクス ***/

.fv_thx{
  position: relative;
  text-align: center;
}

.title_thx{
  position: absolute;
  top: 16%;
  left: -33%;
  right: 0;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .title_thx{
    top: 17%;
    left: 6%;
    width: 20%;
  }}


/*矢印アニメーション*/
.shake-vertical{-webkit-animation:shake-vertical 3s cubic-bezier(.455,.03,.515,.955) infinite both;animation:shake-vertical 3s cubic-bezier(.455,.03,.515,.955) infinite both}
 @-webkit-keyframes shake-vertical{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}20%,40%,60%{-webkit-transform:translateY(8px);transform:translateY(8px)}80%{-webkit-transform:translateY(6.4px);transform:translateY(6.4px)}90%{-webkit-transform:translateY(-6.4px);transform:translateY(-6.4px)}}@keyframes shake-vertical{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}20%,40%,60%{-webkit-transform:translateY(8px);transform:translateY(8px)}80%{-webkit-transform:translateY(6.4px);transform:translateY(6.4px)}90%{-webkit-transform:translateY(-6.4px);transform:translateY(-6.4px)}}

  .arrow{
    position: absolute;
    top: 56%;
    left: 0;
    right: 0;
    width: 90%;
    margin: auto;
    text-align: center;
  }

 .btn_thx{
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .arrow{
    top: 55%;
    width: 30%;
  }

  .btn_thx{
  top: 61%;
  width: 82%;
}}

.present_thx{
  position: relative;
}

.arrow_btm{
  position: absolute;
  top: 62%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
  text-align: center;
}

.btn_thx_btm{
position: absolute;
top: 67%;
left: 0;
right: 0;
width: 90%;
margin: auto;
text-align: center;
}

@media screen and (max-width: 768px) {
  .arrow_btm{
    top: 62%;
    width: 30%;
  }

  .btn_thx_btm{
  top: 69%;
  width: 82%;
}}