@charset "utf-8";
/* CSS Document */
/*-----17.ボタン用動く蛍光背景リピート---------*/
.shiney_rip{
	display: inline-block;
	position: relative;
}
.shiney_rip:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  height: 100px;
  width: 3em;
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  opacity:1;
  animation: rip 1.05s ease-in-out; 
animation-iteration-count: infinite; 
-webkit-animation: rip 1.05s ease-in-out; 
-webkit-animation-iteration-count: infinite; 
 }
  
@-webkit-keyframes rip {
  0% {
    -webkit-transform: translateX(0px) skewX(-30deg);
            transform: translateX(0px) skewX(-30deg);
			opacity:1;
  }
  100% {
    -webkit-transform: translateX(20em) skewX(-30deg);
            transform: translateX(20em) skewX(-30deg);
			opacity:0;
  }
}
@keyframes rip {
  0% {
    -webkit-transform: translateX(0px) skewX(-30deg);
            transform: translateX(0px) skewX(-30deg);
			opacity:1;
  }
  100% {
    -webkit-transform: translateX(20em) skewX(-30deg);
            transform: translateX(20em) skewX(-30deg);
			opacity:0;
  }
}
@media screen and (max-width: 640px) {
	/*-----17.ボタン用動く蛍光背景リピート---------*/
.shiney_rip{
	display: inline-block;
	position: relative;
}
.shiney_rip:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  height: 100px;
  width: 3em;
  display: block;
  position: absolute;
  top: 0;
  left: 0px;
  opacity:1;
  animation: rip 1.1s ease-in-out; 
animation-iteration-count: infinite; 
-webkit-animation: rip 1.05s ease-in-out; 
-webkit-animation-iteration-count: infinite; 
 }
  
@-webkit-keyframes rip {
  0% {
    -webkit-transform: translateX(0px) skewX(-30deg);
            transform: translateX(0px) skewX(-30deg);
			opacity:1;
  }
  100% {
    -webkit-transform: translateX(24em) skewX(-30deg);
            transform: translateX(24em) skewX(-30deg);
			opacity:0;
  }
}
@keyframes rip {
  0% {
    -webkit-transform: translateX(0px) skewX(-30deg);
            transform: translateX(0px) skewX(-30deg);
			opacity:1;
  }
  100% {
    -webkit-transform: translateX(24em) skewX(-30deg);
            transform: translateX(24em) skewX(-30deg);
			opacity:0;
  }
}
}	
	.hand_right_anime::after {
	content: '\f0a4';
	font-family: 'FontAwesome';
	position:absolute;
	font-size:1em;
	left:100px;
	top:0px;
	-moz-animation: hand_right_anime 1s ease -2s infinite alternate;
-webkit-animation: hand_right_anime 1s ease -2s infinite alternate;
-o-animation: hand_right_anime 1s ease -2s infinite alternate;
-ms-animation: hand_right_anime 1s ease -2s infinite alternate;
}
@keyframes hand_right_anime { 
   0%   { -webkit-transform:  translate(0px, 0px) ;   } 
  50%   { -webkit-transform:  translate(30px, 0px); opacity:0;}
   100%  { -webkit-transform:  translate(0px, 0px); opacity: 0; } 
} 
@-webkit-keyframes hand_right_anime { 
  0%   { -webkit-transform:  translate(0px, 0px) ;   } 
  50%   { -webkit-transform:  translate(30px, 0px);   }
   100%  { -webkit-transform:  translate(0px, 0px);   } 
}  
.type-shine {
  height:100px;
  padding-top:20px;
  font-size: 60px;
  position: relative;
  overflow: hidden;
}
.type-shine:before {
  -webkit-animation: shine .6s ease 1.5s infinite;
  content:"";
  position: absolute;
  top: 0;
  left: -250px;
  width: 18em;
  height: 100%;
  transform: rotate3d(0,0,1,-45deg) translate3d(0,-120%,0);
}
@-webkit-keyframes shine {
  0% {transform: rotate3d(0,0,1,-45deg) translate3d(0,-1000%,0);background: rgba(255,255,255,0.5);}
  100% {transform: rotate3d(0,0,1,-25deg) translate3d(0,1000%,0);background: rgba(255,255,255,0.5);}
}

.wrap {
  width: 500px;
  height:100px;
  text-align: center;
  position: absolute;
  line-height:100px;
  margin: 0 auto 0;
  font-size:24px;
  }
  */span {
    display: inline;
    margin: -2px;
	color:white;
  }
*/

span { animation-duration: 1.75s;
@each $div, $time in (l, 0), (o, 0.125), (a, 0.25), (d, 0.375), (i, 0.5), (n, 0.625), (g, 0.75) {
  .#$div {
    animation: shrinkgrow $animation-duration ease-in-out infinite;
    animation-delay: $animation-duration * $time;
  }

@keyframes shrinkgrow {
  0% { transform: scale(0); }
  12.5% { transform: scale(1); }
  25% { transform: scale(1); }
  33% { transform: scale(0); }
  100% { transform: scale(0); }
}

.blinking{
  -webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
.shimmer {
	text-align: center;
		background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1)), color-stop(0.0, rgba(255,255,255,0.1)));
	background: -moz-gradient(linear, left top, right top, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1)), color-stop(0.0, rgba(255,255,255,0.1)));
	background: gradient(linear, left top, right top, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1)), color-stop(0.0, rgba(255,255,255,0.1)));
	-webkit-background-size: 50px 100%;
	-moz-background-size: 50px 100%;
	background-size: 50px 100%;
		-webkit-animation-name: shimmer;
	-webkit-animation-timing-fuction:linear;
	-moz-animation-timing-fuction:linear;
	animation-timing-fuction:linear;
	-moz-animation-name: shimmer;
	animation-name: shimmer;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #0000ff;
  
}
.shimmer::after {
	background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1)), color-stop(0.0, rgba(255,255,255,0.1)));
	background: -moz-gradient(linear, left top, right top, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1)), color-stop(0.0, rgba(255,255,255,0.1)));
	background: gradient(linear, left top, right top, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1)), color-stop(0.0, rgba(255,255,255,0.1)));
	-webkit-background-size: 50px 100%;
	-moz-background-size: 50px 100%;
	background-size: 50px 100%;
	-webkit-animation-name: shimmer;
	-moz-animation-name: shimmer;
	animation-name: shimmer;
	-webkit-animation-duration: 5200s;
	-moz-animation-duration: 5200s;
	animation-duration: 5200s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #0000ff;
	-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
}
@-moz-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-webkit-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-o-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
.shimmer2 {
  text-align: center;
  color: rgba(255,255,255,0.1);
  background: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff), color-stop(0.5, #fff));
  background: -moz-gradient(linear, left top, right top, from(#fff), to(#fff), color-stop(0.5, #fff));
  background: gradient(linear, left top, right top, from(#fff), to(#fff), color-stop(0.5, #fff));
  -webkit-background-size: 50px 100%;
  -moz-background-size: 50px 100%;
  background-size: 50px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #fff;
  background-image: -webkit-linear-gradient(270deg,rgba(0,0,255,0.5) 0%,rgba(0,0,184,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(0,0,255,0.5) 0%,rgba(0,0,184,1.00) 100%);
	text-decoration:none;
	}
.shimmer2 a {
	padding: 30px 30px 30px 40px;
    font-size: 30px;
    text-align: left;
    border-radius: 10px;
	display:block;
	text-decoration:none;
	line-height:30px;
	position:relative;
	margin:0 auto;
	overflow: hidden;
}
@-moz-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-webkit-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-o-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
.star1::after {
	content:url('../img/star1.png');
	position: absolute;
    top: -10px;
    left: 10px;
    width: 10px;
	height:10px;
	z-index:1;
	-webkit-animation:blink1 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink1 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink1{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink1{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink1{
    0% {opacity:0;}
    100% {opacity:1;}
}
.star2::before {
	content:url('../img/star2.png');
	position: absolute;
    top: -30px;
    left: 30px;
    width: 10px;
	height:10px;
	z-index:1;
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink2 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink2{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink2{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink2{
    0% {opacity:0;}
    100% {opacity:1;}
}
.star3::after {
	content:url('../img/star3.png');
	position: absolute;
    top: -80px;
    left: 10px;
    width: 10px;
	height:10px;
	z-index:1;
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink3 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink3{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink3{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink3{
    0% {opacity:0;}
    100% {opacity:1;}
}
.star4::after {
	content:url('../img/star4.png');
	position: absolute;
    top: -10px;
    right: 10px;
    width: 10px;
	height:10px;
	z-index:1;
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink4 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink4{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink4{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink4{
    0% {opacity:0;}
    100% {opacity:1;}
}
.star5::after {
	content:url('../img/star5.png');
	position: absolute;
    top: -10px;
    right: 10px;
    width: 10px;
	height:10px;
	z-index:1;
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink5 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink5{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink5{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink5{
    0% {opacity:0;}
    100% {opacity:1;}
}
.star6::after {
	content:url('../img/star6png');
	position: absolute;
    top: -10px;
    right: 10px;
    width: 10px;
	height:10px;
	z-index:1;
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink6 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink6{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink6{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink6{
    0% {opacity:0;}
    100% {opacity:1;}
}
	/*---------------------アニメーションＣＳＳ----------------------------*/
p.prefix_sample {
	background-color:red;
-moz-animation: anime1 1s ease -2s infinite alternate;
-webkit-animation: anime1 1s ease -2s infinite alternate;
-o-animation: anime1 1s ease -2s infinite alternate;
-ms-animation: anime1 1s ease -2s infinite alternate;
}
.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
p.prefix_sample::before{
left: 30px;
box-sizing: border-box;
width: 30px;
height: 80px;
border-right: 30px solid transparent;
border-left: 30px solid #7a0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
}
p.prefix_sample::after{
left: 0;
width: 30px;
height: 56px;
border-left: 30px solid #7a0;
}
@-moz-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: transparent;}
100% {width: 20px; height: 50px; background-color: transparent;}
}
@-webkit-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: transparent;}
100% {width: 20px; height: 50px; background-color: transparent;}
}
@-o-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: transparent;}
100% {width: 20px; height: 50px; background-color: transparent;}
}