/* header*/


.size{
width:50%;
height:auto;
}
@media screen and (max-width:767px){
.size{
width:50%;
height:auto;
}
}


/* ------------------------------ NEW FOOTER ------------------------------ */

.footerframe {
 border: none;
 margin: 0px;
 width: 100%!important;
 height: 120px!important;
 overflow: hidden;
}

@media screen and (max-width:1001px){
.footerframe {
 border: none;
 margin: 0px;
 width: 100%!important;
 height: 130px!important;
 overflow: hidden;
}
}


/* pcで見たときは"pc"のclassがついた画像が表示される */
/* ------------------------------ DISPLAY BLOCKER ------------------------------ */

.pc {
	display: block !important;
}

.sp {
    display: none !important;
}

@media screen and (max-width:767px) {
    .pc {
	display: none !important;
    }

    .sp {
	display: block!important;
    }
}

/* ------------------------------ 追従CTA(BUTTON) ------------------------------ */

.conteiner{
	overflow: hidden;
}

.navibtn {
	display: flex;
	width: 400px;
	max-width: 100%;
	bottom: 11%;
	opacity: 0;
	visibility: hidden;
	transition: 1s;
}

.navibtn.fixed {
	position: fixed;
	right:1%;
	bottom: 1%;
	z-index: +1;
	opacity: 1;
	visibility: visible;
}

.navibtn.fixed.none {
	opacity: 0;
	visibility: hidden;
	transition: 500ms;
	z-index: -1;
}

@media screen and (max-width:767px){
.navibtn {
	display: flex;
	width: 65%;
	opacity: 0;
	visibility: hidden;
	transition: 1s;
}
	
}

.padi{
	padding:30px;
}


button{
   background-color: transparent;
   border: none;
   cursor: pointer;
   outline: none;
   padding: 0;
   appearance: none;
  }

.button:hover{
	filter: brightness(110%);
	transition: all .3s;
}


h1{
  font-size: 40px;
  text-align: center;
  color: #fff;
  line-height: 150%;
  font-weight: 700;
  letter-spacing: 1px;
  font-feature-settings: 'palt' 1;
}

p{
  font-size: 21px;
  line-height: 180%;
  margin: 0 auto;
  letter-spacing: 1px;
  font-weight: 700;
  color: #1A1A1A;
}

h2{
  font-size: 45px;
  text-align: center;
  line-height: 180%;
  font-weight: 700;
  color: #fff;
}

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

h1{
  font-size: 6vw;
  text-align: center;
  color: #fff;
  line-height: 140%;
  font-weight: 700;
  letter-spacing: 1px;
  font-feature-settings: 'palt' 1;
}

p{
  font-size: 4.3vw;
  line-height: 180%;
  padding: 0 2%;
  letter-spacing: 0px;
  color: #1A1A1A;
}

h2{
  font-size: 6.5vw;
  text-align: center;
  line-height: 180%;
  padding: 0 10px;
  font-weight: 700;
  color: #fff;
}
	
.padi{
	padding:5vw;
}

}


/* 動画 */

video{
	width:350px;
	max-width:100%;
}

.video{
	padding:50px 0!important;
	text-align:center;
}

@media screen and (max-width:767px){
	
.video{
	padding:10% 0 0!important;
	text-align:center;
}

  #moviearea{
  	width: 100%;
  	margin: 0 auto;
  	padding: 3% 0 0;
  }


}

/* 動画 */


/* CTA */

.cta_area{
	margin:0 auto;
	width:650px;
	max-width:100%;
	position:relative;
	display:block;
}

.digest_cta_area{
	margin:0px auto 0;
	padding: 0 0 30px;
	width:550px;
	max-width:100%;
	position:relative;
	display:block;
}

.cta_area2{
	margin:0 auto;
	width:600px;
	max-width:100%;
	position:relative;
	display:block;
	position: relative;
}

#cta_area{
	margin:5% auto 5%;
	width:1020px;
	max-width:100%;
	position:relative;
	display:block;
}
	  
.cta_text{
	width:380px;
	margin:0 auto;
	padding:10px 0 50px;
}
	  
.digest_cta_text{
	width:300px;
	margin:0 auto;
	padding:50px 0 50px;
}

.digest_cta_button{
	width:700px;
	max-width:85%;
	margin:0 auto;
	padding:0px;
}

.cta_button{
	width:700px;
	max-width:80%;
	margin:-55px auto 0px;
	padding:0px;
}

.cta_button2{
	position:absolute;
	width:700px;
	max-width:80%;
	margin:-290px auto 0px;
	padding:0px;
	right:60px;
}

.cta_button3{
	width:700px;
	max-width:80%;
	margin:-55px auto 0px;
	padding:0px;
}

 .finger{
   position: absolute;
   width: 80px;
   top: -130px;
   right: -4%;
   z-index: 2;
   max-width: 100%;
 }

 .cta_finger{
   position: absolute;
   width: 80px;
   top: 100px;
   right: 6%;
   z-index: 2;
   max-width: 100%;
 }

 .digest_cta_finger{
   position: absolute;
   width: 70px;
   top: 80px;
   right: 5%;
   z-index: 2;
   max-width: 100%;
 }

 .cta_finger2{
   position: absolute;
   width: 80px;
   top: 460px;
   right: 3%;
   z-index: 2;
   max-width: 100%;
 }

 .cta_finger3{
   position: absolute;
   width: 80px;
   top: 100px;
   right: 8%;
   z-index: 2;
   max-width: 100%;
 }

 .cta_finger4{
   position: absolute;
   width: 80px;
   top: 180px;
   right: 4%;
   z-index: 2;
   max-width: 100%;
 }


 .frame_scroll iframe{
 	width: 600px;
 	margin: 50px auto 0;
 	border: solid #888 1px;
 	padding: 10px;
 	max-width: 100%;
 	box-sizing: border-box;
  background: #fff;
 }

 .font_size_11{
   font-size: 11px;
   line-height: 170%;
 }



 @media screen and (max-width:767px){
.cta_area{
	margin:0 auto;
	width:100%;
	max-width:100%;
	position:relative;
	display:block;
}

  .finger{
    position: absolute;
    width: 17%;
    top: -27vw;
    right: 2%;
    z-index: 2;
  }
	 
  .cta_finger{
    position: absolute;
    width: 13%;
    top: 67%;
    right: 2%;
    z-index: 2;
  }

  .cta_finger2{
    position: absolute;
    width: 13%;
    top: 70%;
    right: 7%;
    z-index: 2;
  }

  .cta_finger3{
    position: absolute;
    width: 17%;
    top: 46%;
    right: -4%;
    z-index: 2;
  }
	 
  .cta_finger4{
    position: absolute;
    width: 13%;
    top: 65%;
    right: 2%;
    z-index: 2;
  }

 .digest_cta_finger{
   position: absolute;
   width: 14vw;
   top: 14vw;
   right: 0;
   z-index: 2;
   max-width: 100%;
 }
	 
 .digest_cta_area{
	margin:0 auto;
	padding: 0 0 4vw;
	width:100%;
	max-width:100%;
	position:relative;
	display:block;
 }
	 
  .cta_text{
    width: 60vw;
    margin: 0 auto -3vw;
    max-width: 100%;
	  padding: 8vw 0 0;
  }
	 
.digest_cta_button{
	max-width:90%;
	padding:0vw 0 2vw;
}
	 
.cta_button{
	max-width:90%;
	margin:0 auto ;
	padding:4vw 0 2vw;
}
	 
.cta_button2{
	margin:0 auto;
	position: absolute;
	max-width:80%;
	padding:0vw 0 2vw;
	top:58vw;
	right: 10vw;
}
	 
.cta_button3{
	max-width:100%;
	padding:0;
}

}

/* CTA */



a.hover_btn img{
   transition:all 0.5s ease;
   }
a:hover.hover_btn img{
   opacity: 0.7;
   filter: alpha(opacity=70);
   }

   .header_icon {
   	transform-origin:center top;
   	animation:show 1s both;
   }




/* header */

.header{
  background: url("../img/header/header_bg_pc.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment:scroll;
  padding: 0 0 2% 0;
  position:relative;
}

.header_top img{
  width: 520px;
	padding:15px 0 5px;
  margin:0 auto;
}


.header_main01{
  width: 500px;
  max-width:100%;
  margin: 0 auto;
  padding:30px 0 0;
}

.movie_area_text{
	margin:60px auto 0px;
	width:650px;
}


.movie{
    position: relative;
	margin: -407px auto 270px;
	width: 100%;
	max-width:365px;
	aspect-ratio: 16 / 9;
}

.movie iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 100% !important;
  height: 91% !important;
}




.hover_btn{
  box-shadow:  0 0 30px rgba(0,0,0,0.5);
}

.hover_btn:hover{
  box-shadow:  0 0 20px rgba(0,0,0,0.5);
}

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

.header{
background: url("../img/header/header_bg_sp.png");
background-position: top;
background-size: cover;
background-repeat: no-repeat;
padding: 0;
width:100%;
}

.header_main01{
width: 100%;
margin: 0 auto;
padding:6vw 0 0;
}
	  
.movie_area_text{
	margin:5vw auto 0;
	width:90%;
}
	 
.movie{
	margin: -81vw auto 38vw;
	max-width: 72%;
}


   .hover_btn{
     box-shadow:  0 0 10px rgba(0,0,0,0.5);
   }
	 
   .hover_btn:hover{
     box-shadow:  0 0 5px rgba(0,0,0,0.5);
   }

}

 /* header */


 /* Movie */

 .inner_frame{
   width: 550px;
   margin: 50px auto;
   max-width: 80%;
   background: #fff;
   padding: 25px ;
   position: relative;
 }


 .inner_frame2{
   background: #fff;
   width: 500px;
   margin: 40px auto 30px;
   max-width: 85%;
   padding: 25px;
   position: relative;
	 border: 5px solid;
	 border-image: linear-gradient(45deg,#c59447 0%,#f0cb4c 25%,#c59447 50%,#f0cb4c 75%,#c59447 100%) 1;
 }

 .inner_frame3{
   width: 500px;
   margin: 50px auto ;
   max-width: 80%;
   background: #fff;
   padding: 25px;
   position: relative;
 }

 .inner_frame4{
   width: 550px;
   margin: 290px auto 80px;
   max-width: 80%;
   background: #fff;
   padding: 25px;
   position: relative;
 }

 .inner_frame5{
   width: 800px;
   margin: 100px auto;
   max-width: 86%;
   background: #FFEBEE;
   padding: 50px ;
   position: relative;
 }


.inner_text{
  padding: 0 0 0 50px;
}



@media screen and (max-width:767px){
  .movie_section{
    background: url("../img/movie_bg_sp.png");
    background-position: center;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding: 0 0 15% 0;
  }

  .inner_frame{
    width: 90%;
    margin: 5vw auto 0vw;
    background: #fff;
    padding: 5% ;
  } 

.inner_frame2{
width: 80%;
max-width: 80%;
margin: 4% auto 0;
padding: 5%;
border: 3px solid;
border-image: linear-gradient(45deg,#c59447 0%,#f0cb4c 25%,#c59447 50%,#f0cb4c 75%,#c59447 100%) 1;
}
	
.inner_frame3{
width: 90%;
margin: 5vw auto 0;
background: #fff;
padding: 5vw;
}
	
.inner_frame4{
width: 90%;
margin: 37% auto 0;
background: #fff;
padding: 7% 5% 9%;
}
	
.inner_frame2 p{
	padding-top:0;
	font-size: 4.9vw;
}
		
	
  .inner_frame5{
    width: 88%;
    margin: 13vw auto 0vw;
    background: #FFEBEE;
    padding: 7% 7%;
	border-radius:2vw;
  } 
	

 .inner_text{
   padding: 0 0 0 2%;
 }


}

/* Movie */


/* intro */

.img_01{
  width: 550px;
  margin: 0 auto;
  max-width: 95%;
  padding: 0 0 50px;
}

.benefit_img01{
  width: 550px;
  margin: 0 auto;
  max-width: 95%;
  padding: 40px 0;
}

.img_02{
  width: 400px;
  margin: 0 auto;
  max-width: 100%;
  padding: 30px 0;
}

.img_03{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0;
}

.img_11{
  width: 500px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0;
}

.monitor{
  width: 600px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0;
}

.steps{
  width: 400px;
  margin: 0 auto;
  max-width: 100%;
  padding: 30px 0;
}

.voice{
  width: 500px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0 0;
}

.youtube{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0 50px;
}

.thumbnail{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 0px 0 50px;
}


.before{
	width:700px;
	margin:0 auto;
	max-width:100%;
	padding-bottom:50px;
}

.which{
	width:700px;
	margin:0 auto;
	max-width:100%;
	padding-bottom:50px;
}

.after_title{
	width:800px;
	margin:0 auto;
	max-width:100%;
	padding-bottom:50px;
}

.mockup{
  width: 500px;
  margin: 0 auto;
  max-width: 100%;
  padding: 220px 0 0;
}


.hover{
  transition:0.5s;
}

.hover:hover{
	opacity:0.8;
	
}


@media screen and (max-width:767px){
	
.img_01{
  width: 90%;
  margin: 0 auto;
  max-width: 100%;
  padding: 0 0 5vw;
}

.benefit_img01{
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  padding:8vw 0 5vw;
}

.img_02{
  width: 60%;
  max-width: 100%;
  padding: 5vw 0;
}
	
.img_03{
  width: 95%;
  max-width: 100%;
  padding: 5vw 0;
}
	
.img_11{
  width: 95%;
  max-width: 100%;
  padding: 5vw 0;
}
	
.monitor{
  width: 100%;
  max-width: 100%;
  padding: 5vw 0;
}
	
.steps{
  width: 100%;
  max-width: 100%;
  padding: 5vw 0;
}
		
.voice{
  width: 96%;
  margin: 0 auto;
  max-width: 100%;
  padding: 8% 0 0;
}

	
.youtube{
  width: 90%;
  margin: 0 auto;
  max-width: 100%;
  padding: 8% 0 8%;
}
	
.thumbnail{
  width: 90%;
  margin: 0 auto;
  max-width: 100%;
  padding: 0% 0 8%;
}
	
.mockup{
  width: 75%;
  margin: 0 auto;
  max-width: 100%;
  padding: 20% 5% 7% 0%;
}
	
.before{
	max-width:95%;
	margin:0 auto;
	padding-bottom:5vw;
}
	
.which{
	max-width:85%;
	margin:0 auto;
	padding:5vw 0;
}
	
.after_title{
	max-width:90%;
	margin:0 auto;
	padding:10vw 0 8vw;
}

	
}




/* intro */



/* dijest_section */
.digest_section{
	background: url(../img/digest/digest_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.digest_title{
	margin: 0 auto;
	width: 550px;
}

.digest_box{
	background: rgba(255, 206, 0, 0.5);
    margin: 0 auto;
    width: 550px;
}

.digest_img{
	margin: 0 auto;
	width: 650px;
	padding: 20px 0 ;
}

.digest_img02{
	margin: 0 auto;
	width: 500px;
}

.digest_img03{
	margin: 0 auto;
	padding: 30px 0 0;
	width: 500px;
}

.digest_img04{
	margin: 0 auto;
	padding: 30px 0;
	width: 550px;
}

.arrow{
	margin: 0 auto;
	width: 60px;
	padding: 30px 0 ;
}
@media screen and (max-width:767px){
.digest_section{
	background: url(../img/digest/digest_bg_sp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
}	
	
.digest_title{
	margin: 0 auto;
	width: 100%;
}
	
.digest_box {
	background:none;

        margin: 0 auto;
        padding: 5vw 0 0;
        width: 100%;
}
	
.digest_img{
	margin: 0 auto;
	width: 100%;
	padding: 5vw 0 ;
}

.digest_img02{
	margin: 0 auto;
	width: 90vw;
}

.digest_img03{
	margin: 0 auto;
	width: 90vw;
	padding: 6vw 0 0;
}

.arrow{
	margin: 0 auto;
	width: 15vw;
	padding: 5vw 0 4vw;
}

	
}
/* dijest_section */



/* section_01 */

  .contents_01{
    background:url("../img/contents_01bg_pc.png");
  	background-position: center;
    background-size: cover;
	background-repeat: no-repeat;
    background-attachment: scroll;
    padding: 0 0 9% 0;
  }


.contents01_header{
	padding-top:30px;
	width:800px;
	max-width:80%;
	margin:0 auto;
}

#red_header{
    background:url("../img/red_header_pc.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:40px 0 60px;
	  position: relative;
}

.red_header{
    background:url("../img/red_header_pc.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:80px 0 100px;
	  position: relative;
}

.yellow_header2{
    background:url("../img/yellow_header_pc2.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:80px 0 100px;
	  position: relative;
}

.yellow_bottom{
    background:url("../img/yellow_bottom_pc.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:100px 0 30px;
	  position: relative;
}

#orange_header{
    background:url("../img/orange_header.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:40px 0 60px;
	  position: relative;
}

.balloon{
  position: relative;
}
.balloon:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #0067d0 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}


.contents_subtitle{
    background:radial-gradient(#007DB5,#0B4889);
	  padding:50px 0 ;
	  position: relative;
}

.red_header_text{
	margin:0 auto;
	width:440px;
}

.blue_header_text{
	margin:0 auto;
}


.yellow_header_text{
	margin:0 auto;
	width:550px;
}
@media screen and (max-width:767px){
.yellow_header_text{
	margin:0 auto;
	width:100%;
}
}









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


  .contents_01{
	  
    background:url("../img/contents_01bg_sp.png");
  	background-position: top;
    background-size: cover;
	background-repeat: no-repeat;
    background-attachment: scroll;
    padding: 0 0 9% 0;
  }
	
.contents01_header{
	padding:1%;
	width:100%;
}
	
  .contents_subtitle{
    padding: 5% 5%;
  }
  .contents_subtitle img{
	max-width:100%;
  }
	
  #red_header{
    background:url("../img/red_header_sp.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
    padding: 8% 0 9%;
  }
	
  .red_header{
    background:url("../img/red_header_sp.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:80px 0 100px;
	  position: relative;
  }
	
  .blue_header{
    background:url("../img/blue_header_sp.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
    padding: 9% 5%;
  }
	
  .blue_header2{
    background:url("../img/blue_header_sp.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
    padding: 9% 5%;
  }
		
  .yellow_header2{
    background:url("../img/yellow_header_sp2.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
    padding: 9% 5%;
  }
	
  .yellow_bottom{
    background:url("../img/yellow_header_sp2.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
    padding: 18% 2% 4%;
  }
	
  #orange_header{
    background:url("../img/orange_header_sp.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:6% 0 6%;
	  position: relative;
  }
	
.red_header_text{
	width:68%;
}
	
  #red_header img{
	max-width:100%;
  }
  .red_header img{
	max-width:90%;
  }
  .blue_header img{
	max-width:100%;
  }
	
  .blue_header2 img{
	max-width:55%;
  }
	
  .yellow_header img{
	max-width:90%;
  }
	
	
}



/* section_01 */

/* section_02 */

.contents02_header{
	padding:0;
	width:550px;
	margin:0 auto;
}

.contents_02{
	background:url("../img/bg/contents02_bg_pc.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding-bottom:50px;
}

  .contents_02_title{
    background:#7f0000;
	  padding: 0px;
	  position: relative;
  }


.benefit_titles{
	position:absolute;
	width:900px;
	top:-100px;
	left:0px;
}

.benefit_step{
	width:550px;
	margin: 0 auto 30px;
}

.benefit_steps{
	margin:0 auto;
	width: 600px;
}

.benefit_contents{
	padding:30px 0px;
}

.benefit_arrow{
	margin: 0 auto;
	width:100px;
}

  @media screen and (max-width:767px){
	  
.contents_02{
	background:url("../img/bg/contents02_bg_sp.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: scroll;
	  padding-bottom:5vw;

}
	  
	  .contents02_header{
		padding: 0;
		width:100%;
	}  
	  
.benefit_steps{
	margin:0 auto;
	width: 600px;
}
	  
.benefit_titles{
	top:-8vw;
}
	  
	  
.benefit_step{
	width:90%;
	margin:18vw auto 0vw;
}
	  
.benefit_contents{
	width:90%;
	padding:5vw;
}
	  
.benefit_arrow{
	margin: 0 auto;
	width:15vw;
}
	  	  
.vertical_line{
	left:-55px;
/*	width:5px;*/
	height:280%;
}



  }


/* contents_02*/


/* contents_03 */

.contents03_header{
	padding: 0;
	width:550px;
	margin:0 auto;
}

.contents_03{
	background:url("../img/bg/contents03_bg.png");
      background-position: center;
      background-repeat: repeat;
      background-size: cover;
      background-attachment: fixed;
	padding:0px 0 50px;
	position:relative;	
}

.contents_03_title{
	background:url("../img/contents_03_title.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:10px 0px 20px;
	  position: relative;
}

.contents03_header_box{
	position:absolute;
	margin:0 auto;
	width:100%;
	top:-100px;
}


  @media screen and (max-width:767px){
.contents_03_bg{
	background:url("../img/bg/contents03_bg_sp.png");
      background-position: center;
      background-repeat: repeat;
      background-size: cover;
      background-attachment: scroll;
	padding:0% 0 3%;
	
}  
	  
.contents03_header{
	padding:0%;
	width:100%;
}
	  
	  
.contents_03{
	padding-bottom: 5vw;
      background-attachment: scroll;
}
.contents_03_title{
	padding:7vw 0px 6vw;
}
	  
.contents03_header_box{
  top:-17vw;
}
}

/* contents_03 */



/* contents_04 */

.contents04_header{
	padding: 50px 0 30px;
	width:600px;
	margin:0 auto;
}

.contents_04{
	background:url("../img/bg/contents04_bg.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding-bottom:80px;
	position: relative;
}

  .contents_04_title{
    background:url("../img/contents04_header_bg.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:10px 0px 20px;
	  position: relative;
  }


.contents_03_title h1{
	font-size:40px;
	margin:0 auto;
	text-shadow: #000 1px 0 8px;
}

.contents_04_title h1{
	font-size:40px;
	margin:0 auto;
	text-shadow: #000 1px 0 8px;
}

.arrows{
	margin:0 auto;
	width:380px;
	padding:30px 0;
}

@media screen and (max-width:767px){
	  
.contents_04{
	background:url("../img/bg/contents04_bg_sp.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding-bottom:5vw;
}
	  
.contents04_header{
	padding:6vw 0 1vw;
	width:90%;
}  
	
	
	.arrows{
		width:60%;
		padding:4vw 0 6vw;
	}
}


/* contents_04 */



/* contents_05 */

.contents_05{
	background:url("../img/contents_05_bg.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding-bottom: 10px;
}

.contents_05_title{
	background:#FFD10D;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding:10px 0px 20px;
	position: relative;
}

.contents_05_header_text{
	margin:0 auto;
	width:600px;
	padding:40px 0 25px;
}

.previous_movie{
	margin:0 auto;
	width:600px;
	padding-bottom:10px;
}

.previous_movie_text{
	margin:0 auto;
	width:600px;
	padding-bottom:80px;
}


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

.contents_05{
	background:url("../img/contents_05_bg_sp.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding-bottom: 1vw;
}
	
	
.previous_movie{
	width:90%;
}
	
.previous_movie_text{
	width:90%;
	padding-bottom: 11vw;
}
	
	.contents_05_header_text{
		width:90%;
		padding: 6vw 0 2vw;
	}
	
}

/* contents_05 */


/* contents_06 */

.contents06_header{
	padding: 40px 0;
	width:650px;
	margin:0 auto;
}

.contents_06{
	background:url("../img/bg/contents_06_bg.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding-bottom:0px;
}

.contents_06_title{
	background:linear-gradient(-90deg,#d10710 0%,#9c0000 100%);
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  position: relative;
}



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

.contents_06{
	background:url("../img/bg/contents_06_bg_sp.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding-bottom:0vw;
}
	
.contents06_header{
	padding:5vw 0 ;
	width:100%;
}  

}


/* contents_06 */

/* contents_after06 */
.contents_after06_header{
	padding: 35px 0 10px;
	width:550px;
	margin:0 auto;
}

.contents_after06{
	background:url("../img/bg/contents_after06_bg.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding-bottom:1px;
}

.contents_after06_title{
	background:#ffd607;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:10px 0px 20px;
	  position: relative;
}

.benefit_title{
	position:absolute;
	width:900px;
	top:-270px;
	left:0px;
}

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

.contents_after06{
	background:url("../img/bg/contents_after06_bg_sp.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding-bottom:5vw;
}
	
.contents_after06_header{
	padding:5vw 0 0vw;
	width:85%;
}  

.benefit_title{
	top:-33vw;
}
	
}

/* contents_after06 */


/* contents_07 */


.contents07_header{
	padding: 0;
	width:750px;
	margin:0 auto;
}

.contents_07{
	background:url("../img/bg/contents07_bg.png");
      background-position: center;
      background-repeat: repeat;
      background-size: cover;
      background-attachment: fixed;
	padding:1px;
	position:relative;	
}

.contents_07_title{
	background:#000;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:0;
	  position: relative;
}

.step_img{
	margin: 0 auto;
	padding: 0 0 30px;
}

.text_center{
	background-position: center;
	font-size:30px;
	text-align: center;
	line-height: 1.5;
}

.practitioner{
	margin:-72px auto 0;
	width:450px;
	padding:30px 0 0;
}

.screenshot{
	margin:0 auto;
	width:600px;
	padding: 30px 0;
}

.screenshot2{
	margin:0 auto;
	width:600px;
	padding-bottom: 30px;
}

@media screen and (max-width:767px){
	
.contents_07{
	padding: 0 0 5vw;
	background:url("../img/bg/contents07_bg_sp.png");
      background-position: center;
      background-repeat: repeat;
      background-size: cover;
    background-attachment: scroll;
}
.contents_07_bg{
	padding:0% 0 3%;
}  
	  
.contents07_header{
	padding:0%;
	width:100%;
}
	  
	  
.contents_07_title{
	padding:0;
}

.text_center{
	font-size:4.5vw;
}

.step_img{
	margin: 0 auto;
	padding: 0 0 3vw;
}
	
	
.contents_07_text{
	width:95%;
	padding-left:6vw;
	font-size:4.5vw;
}

.contents_07_text_center{
	width:90%;
	font-size:5.2vw;
}

.screenshot{
	padding: 5vw 0;
}

.screenshot2{
	padding: 0vw 0 5vw;
}
	
.practitioner{
	width:100%;
	padding: 7vw 0 0vw;
}
	
}

/* contents_07 */



/* contents_08 */

.contents08_header{
	padding: 0;
	width:750px;
	margin:0 auto;
}

.contents_08{
	background:url("../img/bg/contents_08_bg.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding-bottom:60px;
	position: relative;
}


.contents_08_title{
	background:#ffbe0d;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:0;
	  position: relative;
}

.contents_08_title h1{
	font-size:40px;
	margin:0 auto;
	text-shadow: #000 1px 0 8px;
}

@media screen and (max-width:767px){
	  
.contents_08{
	background:url("../img/bg/contents_08_bg_sp.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding-bottom:5vw;
}
	  
.contents08_header{
	padding:0;
	width:100%;
}  
}

/* contents_08 */


/* contents_09 */

.contents_09{
	background:url("../img/contents_09_bg.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding-bottom: 80px;
}


.contents09_header{
	padding: 50px 0 30px;
	width:420px;
	margin:0 auto;
}

.reason{
	margin:-130px auto 0;
	width:310px;
	padding:30px 0 15px;
}

@media screen and (max-width:767px){
	
.contents_09{
	background:url("../img/contents_09_bg_sp.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding:0 0 5vw;
}
	
.contents09_header{
	padding:0vw;
	width:60%;
}  

.reason{
	margin: -18vw auto 0;
	width:70%;
	padding: 5vw 0 2vw;
}	
}
/* contents_09 */


/* contents_10 */

.contents10_header{
	padding: 80px 0 70px;
	width:800px;
	margin:0 auto;
}

.contents_10{
	background:url("../img/bg/contents_06_bg.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding-bottom:50px;
}

.contents_10_title{
	background:linear-gradient(-90deg,#d10710 0%,#9c0000 100%);
	background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  position: relative;
}



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

.contents_10{
	background:url("../img/bg/contents_06_bg_sp.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding-bottom:5vw;
}
	
.contents10_header{
	padding:8vw 0;
	width:95%;
}  

}



/* contents_10 */


.frame_scroll{
width: 65%;
margin: 0 auto;
max-width: 100%;
	position:absolute;
	top:210px;
	left:18%;
	
}

.frame_scroll iframe{
width: 600px;
margin: 0 auto;
border: solid #888 1px;
padding: 10px;
max-width: 100%;
box-sizing: border-box;
}


  @media screen and (max-width:767px){
	  
	  
.frame_scroll{
	width: 90%;
	margin: 0 auto;
	max-width: 95%;
	position:absolute;
	top:64%;
	left:5%;
}

.frame_scroll iframe{
	width: 600px;
	margin: 0 auto;
	border: solid #888 0.5vw;
	padding: 3%;
	max-width: 100%;
	box-sizing: border-box;
	height: 80px;
}

  }





.terasawa{
	position:absolute;
	width:300px;
	max-width:45%;
	margin:0 auto;
	right:0;
}


/* ------------------------------ qa ------------------------------ */



.section_10 {
	padding:100px 0 120px;
	background-color: #EEEEEE;
	background-position: top;
    background-repeat: no-repeat;
	background-size: cover;
    background-attachment: fixed;
}

.section_10 h2{
	padding-bottom:20px;
	font-size:50px;
	color:#232323;
}

.qa-list{
	width:800px;
	max-width:90%;
}


.qa-list p{
	font-size:18px;
}


.qa-list dl {
    position: relative;
    margin: 30px 0 0;
    cursor: pointer;
}
.qa-list dl:first-child {
  margin-top: 0;
}
.qa-list dl::after {
    position: absolute;
    top: 27px;
    right: 26px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.qa-list .open::after {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
    font-weight: bold;
    background: #FFF;
	border-radius:10px;
	line-height: 1.8;

}
.qa-list dl dt::before {
    line-height: 1;
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    content: 'Q.';
    font-weight: bold;
    color: #3285bf;
}
.qa-list dl dd::before {
    line-height: 1;
    position: absolute;
    left: 20px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #E00003;
}
.qa-list dl dd {
    position: relative;
    margin: 5px 0 0;
    padding: 20px 20px 20px 60px;
    background: #fff5f6;
	border-radius: 10px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
	font-size:16px;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

.content div{
	margin: 0 auto 0;
	padding:20px 0;
	width: 1000px;
	text-align: left;
	justify-content: center;
	align-items: center;
}


@media screen and (max-width: 767px) {
	
.section_10 {
	padding:5% 0 20%;
}

	
	
 .qa-list dl {
    margin: 15px 0 0;
}
.qa-list dl:after {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 16px 16px 16px 50px;
	line-height: 1.6;
	font-size:17px;
}
.qa-list dl dt::before {
    top: 20px;
    left: 20px;
}
.qa-list dl dd::before {
    left: 20px;
    margin-top: 5px;
}
.qa-list dl dd {
    margin: 5px 0 0;
    padding: 16px 16px 16px 50px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
	
.content div{
	width: 750px;
    max-width: 90%;
	padding: 0 0 0 0;
	text-align: left;
	justify-content: center;
	align-items: center;
}
}
/* contents_10 */

/* contents_11 */
.contents_11{
    background: url("../img/contents_11_bg.png");
    background-position:top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
}

.contents_box{
	width:1000px;
}


a{text-decoration: none;}
img{
	max-width:100%;
	display: block;
	margin: 0;
	padding:0;
	vertical-align: bottom;
}

.container{
	width: 100%;
	max-width: 100%;
	position: relative;
	overflow: hidden;
}

@media screen and (max-width: 767px) {
	
.contents_11{
    background: url("../img/contents_11_bg_sp.png");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
}
	
	.contents_box{
	width:90%;
}
	
	
}



/*footer*/

footer a,
footer p{
	color:#fff;
	font-size:12px;
}

.footer_contents{
	padding:20px;
}

footer{
	background-color:#000;
	text-align:center;
}



.table_area h2{
  color: #000;
  font-size: 30px;
  text-align: center;
}

.mark_img{
  width: 600px;
  margin: 0 auto;
  max-width: 100%;
  display: flex;
  align-self: flex-start;
}


.table_area{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
}

.google_partner{
  width: 200px;
  height: 45px;
  max-width: 100%;
  margin-top: 40px;
  margin-left: 40px;
}

.border_line{
  border-bottom: solid #99C7CE 1px;
  padding: 5% 0;
}

.header_logo{
  width: 30%;
  padding: 2%;
}




footer .copyright{
	font-size: 10px;
	text-align: center;
	color: #fff;
  line-height: 120%;
  width: 100%;
  background-color: #000;
  padding: 10px 0;
  font-weight: 300;
}

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

.copyright a:hover{
  color: #2682BC;
}

.framescrolltxt p {
  line-height: 100%;
	font-size:4vw;
}


/* 特商法に基づく表記 */

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

  .form_font_red{
    background-color: #AF0223;
    color: #fff;
    padding: 0 4px 1px 3px;
    border-radius: 5px;
    margin-left: 10px;
    font-size: 3.5vw;
  }

  .table_area h2{
    color: #000;
    font-size: 6vw;
    text-align: center;
  }

  .table_area{
    width: 90%;
    margin: 0 auto;
    padding-bottom: 3%;
  }

  .google_partner{
    width: 90%;
    height: 70%;
    max-width: 100%;
    margin-top: 7%;
    margin-left: 0;
    margin-bottom: 5%;
  }

  .border_line{
    border-bottom: solid #99C7CE 1px;
    padding: 5% 0;
  }

  .mark_img{
    width: 90%;
    margin: 0 auto;
    flex-wrap: wrap;
  }


  .framescrolltxt p {
    line-height: 150%;
  }
	

footer .copyright{
	font-size: 10px;
	text-align: center;
	color: #fff;
  line-height: 120%;
  width: 100%;
  background-color: #000;
	padding:0;
  font-weight: 300;
}


  /* 特商法に基づく表記 */

}

/*
@media screen and (min-width:768px){

.thankyou{
  background-color: rgba(255,0,0,0.4);
  margin-top: 30px;
  padding: 30px;
  text-align:center ;
}

.grecaptcha-badge {
  visibility: hidden;
}
*/



/*文字装飾*/

.background_r{
	border:2px dashed #FFFF00;
	padding:0 10px;
}


.font_size_30{
	font-size: 30px;
}

.font_size_40{
	font-size: 40px;
}


.font_size_50{
	font-size: 50px;
}


.font_size_60{
	font-size: 60px;
}

.font_size_90{
	font-size: 90px;
}


.font_size_9sp{
	font-size: 9vw;
}

.font_size_15sp{
	font-size: 15vw;
}

.font_size_7sp{
	font-size: 7vw;
}


.font_size_7sp{
	font-size: 7vw;
}


.font_size_8sp{
	font-size: 8vw;
}

.font_size_5sp{
	font-size: 5vw;
	line-height: 150%;

}

.font_size_4sp{
	font-size: 4vw;
	line-height: 150%;
}


.font_size_6sp{
	font-size: 6vw;
}


.font_size_27{
	font-size: 27px;
}

.font_size_25{
	font-size: 25px;
}

.font_size_21{
	font-size: 21px;
}


.font_size_30{
	font-size: 30px;
}

.font_size_18{
	font-size: 18px;
}


.font_size_15{
	font-size: 15px;
	line-height: 170%;
}

.font_w{
	font-weight: 700;
}

.font_w_900{
	font-weight: 900;
}


.italic{
  font-style: italic;
}

.border_b{
	text-decoration: underline;
}

.border_r{
	text-decoration: underline #F02D06;
}

.border_pink{
	text-decoration: underline #DD6D8D;
}

.border_w{
	text-decoration: underline #fff;
}

.border_ol{
	text-decoration: underline #f97417;
}

.border_bl{
	text-decoration: underline #2682BC;
}

.border_gr{
	text-decoration: underline #008E45;
}

.border_rbl{
	text-decoration: underline;
	color: #095593;
}

.border_y{
	text-decoration: underline #FFFF00;
}

.border_line_orange{
  border-bottom: solid #F75D08 5px;
}


.font_ol{
  color: #FF6600;
}

.font_red{
	color: #ED1C24;
}

.font_y{
	color: #FFFF00;
}

.font_bl{
	color: #0D0DD3;
}

.font_rbl{
	color: #095593;
}


.font_wh{
	color: #fff;
}

.font_bk{
	color: #1A1A1A;
}


.font_red02{
	color: #E72D32;
}

.font_gr{
	color: #3AAC36;
}

.font_bk{
	color: #ED2087;
}


.text_marker{
	background: #FFFF00;
	text-shadow: none;
	color:#000;
	font-weight: 800;
}


.text_marker_b{
	background: #095593;
	text-shadow: none;
}

.text_marker_r{
	background: #F02D06;
	text-shadow: none;
}

.text_marker_bk{
	background: #000;
	padding:10px 20px 10px 28px;
}

.border_line_pink{
  background: linear-gradient(transparent 50%, #FFE9E9 50%);
}

.border_line_blue{
  background: #3286A8;
  padding: 0 0 1% 2%;
  color: #fff;
}

.border_line_yellow{
  background: linear-gradient(transparent 70%, #FFFF00 50%);
}
	
	
	.bold{
		font-weight:700;
	}

@media screen and (max-width:767px){
	
	.font_size_27{
	font-size: 4.9vw;
}
	
	.font_size_30{
		font-size:5.6vw;
	}
	
	.text_marker_bk{
	background: #000;
	padding:5px 10px 5px 15px;
}

}


/********************************************
* Now Loading
********************************************/
#overlay{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height:100%;
  display: none;
  background: rgba(0,0,0,0.6);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner {
  width: 80px;
  height: 80px;
  border: 4px #ddd solid;
  border-top: 4px #999 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}




/*グラデーション*/


/* 拡大・縮小 */

.keyform5{
	animation-name: anim_sc;
	transform: scale(0.95,0.95);
}
@keyforms anim_sc {
	100% {
		transform: scale(1,1);
	}
}

.animation{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 0.7s;
}



/*点滅*/

.flash{
	animation: flash 1.5s linear infinite;
}

@keyforms flash {
	0%,100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}




/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
.fuwafuwa {
	-webkit-animation-name: fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
	-webkit-animation-duration: 1.8s;
	-webkit-animation-iteration-count: infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function: ease;
	-moz-animation-name: fuwafuwa;
	-moz-animation-duration: 1.5s;
	-moz-animation-iteration-count: infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function: ease;
}
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -15px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -15px);}
	100% {-moz-transform:translate(0, 0);}
}

.bound {
	animation: bound 3s infinite;
}
@keyframes bound {
	0% { transform:translateY(0) }
	5% { transform:translateY(0) }
	10% { transform:translateY(0) }
	20% { transform:translateY(-10px) }
	25% { transform:translateY(0) }
	30% { transform:translateY(-10px) }
	50% { transform:translateY(0) }
	100% { transform:translateY(0) }
}




/* フェードインアニメーション */

.fadein{opacity : 0;transform : translate(0, 30px);transition : all 700ms;}
.fadein_right {opacity: 0; transform: translate(100px,0); transition: all 1000ms;}
.fadein_left {opacity: 0;	transform: translate(-100px,0); transition: all 1000ms;}
.fadein.scrollin,.fadein_right.scrollin,.fadein_left.scrollin{opacity : 1;transform : translate(0, 0);}



/*フェードインさせる */

.fadeIn {
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
/* 拡大・縮小 */

.keyframe5{
	animation-name: anim_sc;
	transform: scale(0.95,0.95);
}
@keyframes anim_sc {
	100% {
		transform: scale(1,1);
	}
}

.animation {
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1s;
}

   .shake {
       animation: shake 3s infinite;
   }
   @keyframes shake {
       0% {
           transform: translate(0px, 2px);
       }
       5% {
           transform: translate(0px, -2px);
       }
       10% {
           transform: translate(0px, 2px);
       }
       15% {
           transform: translate(0px, -2px);
       }
       20% {
           transform: translate(0px, 2px);
       }
       25% {
           transform: translate(0px, -2px);
       }
       30% {
           transform: translate(0px, 0px);
       }
   }

   .reflection{
   display:inline-block;
   position:relative;
   overflow:hidden;
   z-index: 1;
   border-radius: 22px;
   }
.reflection2{
   display:inline-block;
   overflow:hidden;
   z-index: 1;
   border-radius: 42px;
   }

   .reflection:after {
   content:"";
   height:100%;
   width:30px;
   position:absolute;
   top:-180px;
   left:0;
   background-color: #fff;
   opacity:0;
   -webkit-transform: rotate(45deg);
   -webkit-animation: reflection 2s ease-in-out infinite;
   }

.reflection2:after {
   content:"";
   height:100%;
   width:30px;
   position:absolute;
   top:-180px;
   left:0;
   background-color: #fff;
   opacity:0;
   -webkit-transform: rotate(45deg);
   -webkit-animation: reflection 2s ease-in-out infinite;
   }


@media screen and (max-width:767px){
	
.reflection{
   border-radius: 15px;
   }
.reflection2{
   border-radius: 20px;
   }
	
}

   @keyframes reflection {
   0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
   80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
   81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
   100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
   }

@keyframes reflection2 {
   0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
   80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
   81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
   100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
   }


   .puyon {
     animation: puyon 1.5s linear 0s 1 ;
     animation-iteration-count:infinite;
   }
   @keyframes puyon {
     0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
     40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
     50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
     60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
     70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
     80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
     100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
   }

   .btn_animation {
   	display: block;
   	cursor: pointer;
   	border-radius: 20px;
   	-webkit-animation: btnwrapanime 11s infinite;
   	animation: btnwrapanime 1.5s infinite;
   	-webkit-box-shadow: 0 0 0 0 rgba(0, 188, 0, 1);
   	box-shadow: 0 0 0 0 rgba(0, 188, 0, 1); }
   @-webkit-keyframes btnwrapanime {
   	70% {
   		-webkit-box-shadow: 0 0 0 50px rgba(233, 30, 99, 0);
   		box-shadow: 0 0 0 50px rgba(233, 30, 99, 0); }
   	100% {
   		-webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
   		box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
   @keyframes btnwrapanime {
   	70% {
   		-webkit-box-shadow: 0 0 0 50px rgba(233, 30, 99, 0);
   		box-shadow: 0 0 0 50px rgba(233, 30, 99, 0); }
   	100% {
   		-webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
   		box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
   	@media (max-width: 750px) {
   		@-webkit-keyframes btnwrapanime {
   			70% {
   				-webkit-box-shadow: 0 0 0 25px rgba(233, 30, 99, 0);
   				box-shadow: 0 0 0 25px rgba(233, 30, 99, 0); }
   			100% {
   				-webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
   				box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
   		@keyframes btnwrapanime {
   			70% {
   				-webkit-box-shadow: 0 0 0 25px rgba(233, 30, 99, 0);
   				box-shadow: 0 0 0 25px rgba(233, 30, 99, 0); }
   			100% {
   				-webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
   				box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } } }