@charset "utf-8";
/* CSS Document */



/*Animation copy TOPメインめくれる文字
-----------------------------------------------------------*/
@-webkit-keyframes passing-bar{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-bar{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}


/* css */
.passing .passing-box {
	display: block;
}
.passing .passing-bar {
	position: relative;
	display: inline-block;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	width:100%;
	margin-bottom:5px;
}
/*.passing .last {
	margin-bottom:0;
}*/

.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
    background: #ff3333;
}

.passing .passing-txt {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	padding: 5px 5%;
	color: #fff;
	filter:drop-shadow(2px 2px 3px rgba(0,0,0,0.9));/*画像上でも透過するbox-shadowに代わるもの*/
	font-weight: normal !important;
	line-height: 1.75;
	font-size: 30px;
}

@media screen and (max-width:700px) {
	
.passing .passing-txt {
	padding: 5px 2.5%;
	font-size: 24px;
}

}

@media screen and (max-width:500px) {
	
.passing .passing-txt {
	font-size: 20px;
}

}

@media screen and (max-width:400px) {
	
.passing .passing-txt {
	font-size: 18px;
}

}

@media screen and (max-width:350px) {
	
.passing .passing-txt {
	font-size: 16px;
}

}





/*.css-selector {
    background: linear-gradient(270deg, #000000, #666, #000000, #666);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 15s ease infinite;
    -moz-animation: AnimationName 15s ease infinite;
    animation: AnimationName 15s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}*/





.passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
	animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation:passing-txt 0s ease .5s 1 normal forwards;
}


.passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
	animation: passing-bar 2s ease 0s 1 normal forwards;
}

.passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation:passing-txt 2s ease .5s 1 normal forwards;
}