@charset "utf-8";

/* CSS Document */

/* cta_style  ------------------------------------------------------------------------------------------------------------------------*/
/* キラリと光らせる1 */
.cta_style1{
	display:inline-block;
	position:relative;
	overflow:hidden;
	/*border-radius: 15px;*/ /*ボタン角が丸い場合コメント解除*/
}
.cta_style1::before {
	content:"";
	height:100%;
	width:30px;
	position:absolute;
	top:-180px;
	left:0;
	background-color: #fff;
	opacity:0;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	animation: cta_style1 2s ease-in-out infinite;
	-webkit-animation: cta_style1 2s ease-in-out infinite;
}
@keyframes cta_style1 {
	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;}
}

/* キラリと光らせる2 */
.cta_style2 {
	position:relative;
    overflow: hidden;
	/*border-radius: 15px;*/ /*ボタン角が丸い場合コメント解除*/
}
.cta_style2::before {
    display: block;
    position: absolute;
    left: -30%;
    top: -40%;
    content: "";
    width: 80px;
    height: 250px;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,.9)),color-stop(100%,rgba(255,255,255,0)));
    animation: cta_style2 2.5s infinite linear;
    -webkit-animation: cta_style2 2.5s infinite linear;
}
@keyframes cta_style2 {
    0% {left: -30%;}
    20% {left: 120%;}
    100% {left: 120%;}
}

/* キラリと光らせる3 */
.cta_style3 {
    position: relative;
    overflow: hidden;
	/*border-radius: 15px;*/ /*ボタン角が丸い場合コメント解除*/
}
.cta_style3:before {
    content: "";
    width: 200%;
    height: 200%;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );
    position: absolute;
    top: -50%;
    left: -50%;
	 animation: cta_style3 1.5s infinite linear;
    -webkit-animation: cta_style3 2.5s infinite linear;
}
@keyframes cta_style3 {
  from, 0% { -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);transform: translate3d( -100%, 0, 0) rotate(45deg);opacity: 0;}
  20% {-webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);transform: translate3d( -100%, 0, 0) rotate(45deg);opacity: 1;}
  70% {-webkit-transform: translate3d( 100%, 0, 0) rotate(45deg);transform: translate3d( 100%, 0, 0) rotate(45deg);opacity: 1;}
  80% {-webkit-transform: translate3d( 100%, 0, 0) rotate(45deg);transform: translate3d( 100%, 0, 0) rotate(45deg);opacity: 0;}
  to, 100% {-webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);transform: translate3d( -100%, 0, 0) rotate(45deg);opacity: 0;}
}

/* 横に揺れる */
.cta_style4{
    animation: cta_style4 2s infinite;
}
@keyframes cta_style4 {
    0% {transform: translate(2px, 0px);}
    5% {transform: translate(-2px, 0px);}
    10% {transform: translate(2px, 0px);}
    15% {transform: translate(-2px, 0px);}
    20% {transform: translate(2px, 0px);}
    25% {transform: translate(-2px, 0px);}
    30% {transform: translate(0px, 0px);}
}

/* 上下に振動する */
.cta_style5{
	animation: cta_style5 2s infinite;
}
@keyframes cta_style5{
	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);}
}

/* ぽよよんと跳ねる */
.cta_style6{
  animation: cta_style6 2.5s infinite;
  opacity: 1;
}
@keyframes cta_style6 {
  0%, 40% {transform: skew(0deg, 0deg);}
  5% {transform: skew(5deg, 5deg);}
  10% {transform: skew(-4deg, -4deg);}
  15% {transform: skew(3deg, 3deg);}
  20% {transform: skew(-2deg, -2deg);}
  25% {transform: skew(1deg, 1deg);}
  30% {transform: skew(-0.6deg, -0.6deg);}
  35% { transform: skew(0.3deg, 0.3deg);}
}
 
/* どきどき収縮 */
.cta_style7{
  animation: cta_style7 2s ease-out infinite;
  opacity: 1;
}
@keyframes cta_style7 {
  0%, 40%, 60%, 80% {transform: scale(1.0);}
  50%, 70% {transform: scale(0.95);}
}

/* 拡大縮小 */
.cta_style8{
    -webkit-animation: cta_style8 2.0s infinite ease-in-out;
    animation: cta_style8 2.0s infinite ease-in-out;
}
@keyframes cta_style8 {
	0%, 100% {transform: scale(0.9);}
	50% {transform: scale(1.0);}
}

/* ぷにぷに */
.cta_style9 {
	animation: cta_style9 0.8s infinite;
}
@keyframes cta_style9 {
	0% {transform: scale(1, 1);}
	50% {transform: scale(0.98, 1.15)}
}

/* もちもち */
.cta_style10 {
    animation: cta_style10 3s infinite;
}
@keyframes cta_style10 {
    0% {transform: scale(1, 0.8);}
    20% {transform: scale(0.8, 1.1);}
    95% {transform: scale(1, 1);}
    100% {transform: scale(1, 0.8);}
}