body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 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;
}
.title{
  position: absolute;
  top: 34%;
  right: 0;
  left: 0;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .title{
    width: 90%;
    top: 33%;
  }
}

/*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}}

 .btn_area{
  position: relative;
  height: 390px;
}

@media screen and (max-width: 768px) {
  .btn_area{
    height: 210px;
  }
}

/*フォーム上*/

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

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

.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: 8px solid #000000;
  background-color: #fff;
  border-radius: 10px;
  margin: 0%  0 3%;
}

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

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

@media screen and (max-width: 768px) {
  .submit{
    margin: -2% 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)}}


.step{
  position: relative;
}

.step_content{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 93%;
  top: 20%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .feature_h2,.feature_content{
    width: 83%;
  }
  
  }

  .point{
    position: relative;
  }
  
  .point_content{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 93%;
    top: 13%;
    text-align: center;
  }
  @media screen and (max-width: 768px) {
    .feature_h2,.feature_content{
      width: 83%;
    }
    
    }

    
    .voice{
      position: relative;
    }
    
    .voice_content{
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: 93%;
      top: 15%;
      text-align: center;
    }
    @media screen and (max-width: 768px) {
      .feature_h2,.feature_content{
        width: 83%;
      }
      
      }
    



 /*フッター*/

footer {
  border-top: 2px solid #eb6100;
  padding: 5% 0 0 0;
  position: relative;
  z-index: 9999;
  color: #fff;
  background:#eb6100;
  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: 22%;
  left: 24%;
  right: 0;
  width: 80%;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .title_thx{
    top: 21%;
    width: 60%;
    left: 28%;
  }}


/*タイトルアニメーション*/

.slide-top{-webkit-animation:slide-top .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .5s cubic-bezier(.25,.46,.45,.94) both}
 @-webkit-keyframes slide-top{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes slide-top{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}}

  .shake-vertical{-webkit-animation:shake-vertical 1.5s ease-in infinite both;animation:shake-vertical 1.5s ease-in infinite both}

 @-webkit-keyframes shake-vertical{
  0%,100%{-webkit-transform:translateY(0);
  transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-4px);
  transform:translateY(-4px)}20%,40%,60%{-webkit-transform:translateY(4px);
  transform:translateY(4px)}80%{-webkit-transform:translateY(3.4px);
  transform:translateY(3.4px)}90%{-webkit-transform:translateY(-3.4px);
  transform:translateY(-3.4px)}}@keyframes shake-vertical{0%,100%{-webkit-transform:translateY(0);
  transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-4px);transform:translateY(-4px)}20%,40%,60%{-webkit-transform:translateY(4px);
  transform:translateY(4px)}80%{-webkit-transform:translateY(3.4px);transform:translateY(3.4px)}90%{-webkit-transform:translateY(-3.4px);
  transform:translateY(-3.4px)}} 
 
.btn_area_thx{
  position: relative;
}

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

@media screen and (max-width: 768px) {
  .btn_thx{
  top: 48%;
  width: 82%;
}}

.present_thx{
  position: relative;
}

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

@media screen and (max-width: 768px) {
  .present_txt{
    top: 17%;
    width: 82%;
  }
  
}

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

@media screen and (max-width: 768px) {
  .btn_thx_bottom{
  top: 67%;
  width: 82%;
}}