/*スマホサイト**********************************************************************/
@media screen and (max-width:680px) {



.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
    width: 50px;
	height: 50px;
	margin: 0px auto 0px auto;
	justify-content: center;
	align-items: center;
/*    background-color: #00FF00;*/
}
.cp_arrows .cp_arrow {
	position: absolute;
	top: 80%;/*スタート地点から動かす距離*/
	left: 20%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	opacity: 0;
}
.cp_arrows .cp_arrowfirst {
	-webkit-animation: arrow-move08 2s ease-in-out infinite;
	        animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
	-webkit-animation: arrow-move08 2s 1s ease-in-out infinite;
	        animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 30px;
	height: 3px;
	content: '';
	background: #27969A;/*矢印の色*/
}
.cp_arrows .cp_arrow:before {
	-webkit-transform: rotate(30deg) translateX(-39%);
	        transform: rotate(30deg) translateX(-39%);
	-webkit-transform-origin: top left;
	        transform-origin: top left;
}
.cp_arrows .cp_arrow:after {
	-webkit-transform: rotate(-30deg) translateX(39%);
	        transform: rotate(-30deg) translateX(39%);
	-webkit-transform-origin: top right;
	        transform-origin: top right;
}
@-webkit-keyframes arrow-move08 {
	0% {
		top: 30%;/*スタート地点*/
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	70% {
		opacity: 0;
	}
}
@keyframes arrow-move08 {
	0% {
		top: 30%;/*スタート地点*/
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	70% {
		opacity: 0;
	}
}



}










/*PCサイト**************************************************************************/
@media screen and (min-width:681px) {



.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
    width: 50px;
	height: 50px;
	margin: 15px auto 15px auto;
	justify-content: center;
	align-items: center;
/*    background-color: #00FF00;*/
}
.cp_arrows .cp_arrow {
	position: absolute;
	top: 100%;/*スタート地点から動かす距離*/
	left: 20%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	opacity: 0;
}
.cp_arrows .cp_arrowfirst {
	-webkit-animation: arrow-move08 2s ease-in-out infinite;
	        animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
	-webkit-animation: arrow-move08 2s 1s ease-in-out infinite;
	        animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 30px;
	height: 3px;
	content: '';
	background: #27969A;/*矢印の色*/
}
.cp_arrows .cp_arrow:before {
	-webkit-transform: rotate(30deg) translateX(-39%);
	        transform: rotate(30deg) translateX(-39%);
	-webkit-transform-origin: top left;
	        transform-origin: top left;
}
.cp_arrows .cp_arrow:after {
	-webkit-transform: rotate(-30deg) translateX(39%);
	        transform: rotate(-30deg) translateX(39%);
	-webkit-transform-origin: top right;
	        transform-origin: top right;
}
@-webkit-keyframes arrow-move08 {
	0% {
		top: 10%;/*スタート地点*/
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	70% {
		opacity: 0;
	}
}
@keyframes arrow-move08 {
	0% {
		top: 10%;/*スタート地点*/
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	70% {
		opacity: 0;
	}
}



}