/* 共通
------------------------------*/
.btn_bg {
    width: 800px;
    height: auto;
    margin: 0 auto;
	cursor: pointer;
	position: relative;
	z-index: 1;
}
.btn_bg:hover {
	animation: inout ease-in-out 1.5s;
    animation-iteration-count: 2.35;
    -webkit-animation: inout ease-in-out 1.5s;
    -webkit-animation-iteration-count: 2.35;
}
@keyframes inout {
    0% { transform: translate(-50px, 0); }
    50% { transform: translate(10px, 0); }
    100% { transform: translate(-50px, 0); }
}
@-webkit-keyframes inout { 
    0% { -webkit-transform: translate(-50px, 0); }
    50% { -webkit-transform: translate(10px, 0); }
    100% { -webkit-transform: translate(-50px, 0); }
}

.btn_allow {
	width: 30px;
	height: 190px;
	position: absolute;
	z-index: 2;
	top: 23%;
	right: 85px;
}
.btn_bg:hover .btn_allow {
	animation: allow ease-in-out 0.75s;
    animation-iteration-count: 4.5;
    -webkit-animation: allow ease-in-out 0.75s;
    -webkit-animation-iteration-count: 4.5;
}

@keyframes allow {
    0% { transform: translate(20px, 0); }
    50% { transform: translate(0px, 0); }
    100% { transform: translate(20px, 0); }
}
@-webkit-keyframes allow { 
    0% { -webkit-transform: translate(20px, 0); }
    50% { -webkit-transform: translate(0px, 0); }
    100% { -webkit-transform: translate(20px, 0); }
}

.btn_bg.btn1 .btn_allow {
}
.btn_bg.btn2 {
	height: 390px;
}
.btn_bg.btn2 .btn_allow {
	top: 26%;
}


/* SP用
------------------------------*/
@media screen and (max-width: 768px) {
.btn_box img {
	width: 96%;
}
.btn_bg {
	width: 96%;
	height: auto;
	animation: inout ease-in-out 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation: inout ease-in-out 1.5s;
    -webkit-animation-iteration-count: infinite;
}

.btn_bg .btn_allow {
	width: 5%;
	height: auto;
	right: 5%;
	animation: allow ease-in-out 0.75s;
    animation-iteration-count: infinite;
    -webkit-animation: allow ease-in-out 0.75s;
    -webkit-animation-iteration-count: infinite;
}

.btn_bg.btn2 {
	height: auto;
}

@keyframes inout {
    0% { transform: translate(-5px, 0); }
    50% { transform: translate(5px, 0); }
    100% { transform: translate(-5px, 0); }
}
@-webkit-keyframes inout { 
    0% { -webkit-transform: translate(-5px, 0); }
    50% { -webkit-transform: translate(5px, 0); }
    100% { -webkit-transform: translate(-5px, 0); }
}

@keyframes allow {
    0% { transform: translate(2.5px, 0); }
    50% { transform: translate(0px, 0); }
    100% { transform: translate(2.5px, 0); }
}
@-webkit-keyframes allow { 
    0% { -webkit-transform: translate(2.5px, 0); }
    50% { -webkit-transform: translate(0px, 0); }
    100% { -webkit-transform: translate(2.5px, 0); }
}


}