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

.AddWrapper480x480 {
	width: 100%;
	height: auto;
	max-width: 480px;
	margin: auto;
	}

.AddContainer480x480 {
	position: relative;
	padding-bottom: 100%;
	height: 0; 
	overflow: hidden;
	border:1px solid #CCC;
	box-sizing: border-box;
	}


.CFBanner480x480 {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #CCC;
	font-family: 'Kanit', sans-serif;
	color:#4b4b4a;
	box-sizing: border-box;
}

.CFClickArea {
	display: block;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index: 1000;
}



.CFBanner480x480 .CFBlockBlue {
	display: block;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 106.66%;
	background: #009BB4;
	transform: skewY(-3.2deg) translateY(-85.93%);
	z-index: 10;
}

.CFBanner480x480 .CFMotoLogo {
	display: block;
	position: absolute;
	top:4.16%;
	left:4.3%;
	width: 45%;
	height: auto;
	z-index:11;
}

.CFBanner480x480 .CFMotoExperience {
	display: block;
	position: absolute;
	width: auto;
	height: 8%;
	z-index:8;
}

.CFBanner480x480 .CFSlide1 .CFMotoExperience {
	top:22%;
	left:4.3%;
	animation-name: CFExperience1-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(0px);
}

@keyframes CFExperience1-480x480 {
	0%		{transform:translateX(0px)}
	23.5%	{transform:translateX(0px)}
	25%		{transform:translateX(1000%)}
	100%	{transform:translateX(1000%)}
}

	
	

.CFBanner480x480 .CFSlide2 .CFMotoExperience {
	top:22%;
	left:4.3%;
	animation-name: CFExperience2-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(-1000%);
}

@keyframes CFExperience2-480x480 {
	0%		{transform:translateX(-1000%)}
	23.5%	{transform:translateX(-1000%)}
	25%		{transform:translateX(0)}
	48.5%	{transform:translateX(0)}
	50%		{transform:translateX(1000%)}
	100%	{transform:translateX(1000%)}
}


.CFBanner480x480 .CFSlide3 .CFMotoExperience {
	top:18%;
	right:4.3%;
	animation-name: CFExperience3-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(-1000%);
}
@keyframes CFExperience3-480x480 {
	0%		{transform:translateX(-1000%)}
	48.5%	{transform:translateX(-1000%)}
	50%		{transform:translateX(0)}
	73.5%	{transform:translateX(0)}
	75%		{transform:translateX(1000%)}
	100%	{transform:translateX(1000%)}
}


.CFBanner480x480 .CFSlide4 .CFMotoExperience {
	top:22%;
	left:4.3%;
	animation-name: CFExperience4-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(-1000%);
}

@keyframes CFExperience4-480x480 {
	0%		{transform:translateX(-1000%)}
	73.5%	{transform:translateX(-1000%)}
	75%		{transform:translateX(0)}
	98.5%	{transform:translateX(0)}
	100%	{transform:translateX(1000%)}
}


.CFBanner480x480 .CFMotoJMFootPrint {
	display: block;
	position: absolute;
	bottom:-29.16%;
	right:-9.50%;
	height: 50%;
	width: auto;
	z-index:2;
	opacity: .8;
}

.CFBanner480x480 .CFMotoLink {
	display: block;
	position: absolute;
	bottom:4%;
	left:0;
	width: 100%;
	height: auto;
	z-index:2;
	font-weight: 600;
	color: #009BB4;
	text-align: center;
	font-size: 3.5vw;
	line-height: 3.2vw;
}

.CFBanner480x480 a.CFMotoLink {
	color: #009BB4;
	text-decoration: none;
}

.CFBanner480x480 a.CFMotoLink:hover {
	text-decoration: underline;
}

.CFBanner480x480 .CFMotoLink .CFPrice {
	margin-right: 2vw;
}





.CFBanner480x480 .CFBlockWhite {
	display: block;
	position: absolute;
	bottom:0;
	right:0;
	width: 100%;
	height: 40%;
	background: #FFF;
	box-sizing: border-box;
	z-index: 1;
}


.CFBanner480x480 .CFBlockImg {
	display: block;
	position: absolute;
	top:12%;
	left:0;
	width: 100%;
	height: 50%;
	background: no-repeat center center;
}

.CFBanner480x480 .CFSlide0 .CFBlockImg {
	background-image: url(../images/cf-foto1.jpg);
	animation-name: CFSlide0-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(0);
}

@keyframes CFSlide0-480x480 {
	0%		{transform:translateX(-100%)}
	98.5%	{transform:translateX(-100%)}
	100%	{transform:translateX(0)}
}


.CFBanner480x480 .CFSlide1 .CFBlockImg {
	background-image: url(../images/cf-foto1.jpg);
	animation-name: CFSlide1-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(0);
}

@keyframes CFSlide1-480x480 {
	0%		{transform:translateX(0px)}
	23.5%	{transform:translateX(0px)}
	25%	{transform:translateX(100%)}
	100%	{transform:translateX(100%)}
}

.CFBanner480x480 .CFSlide2 .CFBlockImg {
	background-image: url(../images/cf-foto2.jpg);
	animation-name: CFSlide2-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(-100%)
}

@keyframes CFSlide2-480x480 {
	0%		{transform:translateX(-100%)}
	23.5%	{transform:translateX(-100%)}
	25%	{transform:translateX(0)}
	48.5%	{transform:translateX(0)}
	50%	{transform:translateX(100%)}
	100%	{transform:translateX(100%)}
}


.CFBanner480x480 .CFSlide3 .CFBlockImg {
	background-image: url(../images/cf-foto3.jpg);
	animation-name: CFSlide3-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(-100%)
}

@keyframes CFSlide3-480x480 {
	0%		{transform:translateX(-100%)}
	48.5%	{transform:translateX(-100%)}
	50%		{transform:translateX(0)}
	73.5%	{transform:translateX(0)}
	75%		{transform:translateX(100%)}
	100%	{transform:translateX(100%)}
}


.CFBanner480x480 .CFSlide4 .CFBlockImg {
	background-image: url(../images/cf-foto4.jpg);
	animation-name: CFSlide4-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	transform:translateX(-100%)
}

@keyframes CFSlide4-480x480 {
	0%		{transform:translateX(-100%)}
	73.5%	{transform:translateX(-100%)}
	75%		{transform:translateX(0)}
	98.5%	{transform:translateX(0)}
	100%	{transform:translateX(100%)}
}


.CFBanner480x480 .CFLabel {
	display: table;
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 38%;
	box-sizing: border-box;
	z-index: 2;
	padding: 0.5% 5.7% 10% 5.7%;
	box-sizing: border-box;
	transform:translateY(40%);	
}

.CFBanner480x480 .CFLabel .CFH1 {
	font-weight: 500;
	font-size: 9.2vw;
	line-height: 11vw;
}

.CFBanner480x480 .CFLabel .CF-CFMOTO {
	font-weight: 500;
	font-size: 6.8vw;
	line-height: 6.8vw;
}

.CFBanner480x480 .CFLabel .CFH1.Zaruka {
	color: #009BB4;
	font-size: 13vw;
	line-height: 14.5vw;
	font-weight: 600;
}

.CFBanner480x480 .CFLabel .CFH2 {
	font-size: 1.9vw;
	font-weight: 500;
	line-height: 2.2vw;
}

.CFBanner480x480 .CFLabel .CFH3 {
	font-weight: 400;
	font-size: 4.8vw;
	line-height: 5.1vw;
}



	
	

.CFBanner480x480 .CFLabel .Center {
	display: table-cell; 
	vertical-align: middle; 
	text-align: center;
	width: 100%; 
	height: auto;
	position: static;
}

.CFBanner480x480 .CFSlide0 .CFLabel {
	animation-name: CFLabel0-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
}

@keyframes CFLabel0-480x480 {
	0%		{transform:translateY(100%)}
	98.5%	{transform:translateY(100%)}
	100%	{transform:translateY(0)}
}


	
	

.CFBanner480x480 .CFSlide1 .CFLabel {
	animation-name: CFLabel1-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
}

@keyframes CFLabel1-480x480 {
	0%		{transform:translateY(0)}
	23.5%	{transform:translateY(0)}
	25%		{transform:translateY(100%)}
	100%	{transform:translateY(100%)}
}

.CFBanner480x480 .CFSlide2 .CFLabel {
	animation-name: CFLabel2-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
}

@keyframes CFLabel2-480x480 {
	0%		{transform:translateY(100%)}
	23.49%	{transform:translateY(100%)}
	25%		{transform:translateY(0px)}
	48.49%	{transform:translateY(0px)}
	48.5%	{transform:translateY(100%)}
	100%	{transform:translateY(100%)}
}

.CFBanner480x480 .CFSlide3 .CFLabel {
	animation-name: CFLabel3-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
}

@keyframes CFLabel3-480x480 {
	0%		{transform:translateY(100%)}
	48.49%	{transform:translateY(100%)}
	50%		{transform:translateY(0px)}
	73.49%	{transform:translateY(0px)}
	73.5%	{transform:translateY(100%)}
	100%	{transform:translateY(100%)}
}


.CFBanner480x480 .CFSlide4 .CFLabel {
	animation-name: CFLabel4-480x480;
	animation-duration: 25s;
	animation-iteration-count: infinite;
}

@keyframes CFLabel4-480x480 {
	0%		{transform:translateY(100%)}
	73.49%	{transform:translateY(100%)}
	75%		{transform:translateY(0px)}
	98.49%	{transform:translateY(0px)}
	98.5%	{transform:translateY(100%)}
	100%	{transform:translateY(100%)}
}



@media (min-width: 480px) {
	
	.CFBanner480x480 .CFLabel .CFH1 {
	font-size: 2.9em;
	line-height: 1.15em;
	}
	
	.CFBanner480x480 .CFLabel .CF-CFMOTO {
	font-size: 2.2em;
	line-height: 1.0em;
}

	.CFBanner480x480 .CFLabel .CFH1.Zaruka {
	font-size: 3.8em;
	line-height: 1.2em;
	}

	.CFBanner480x480 .CFLabel .CFH2 {
	font-size: 1.35em;
	line-height: 1.3em;
	}

	.CFBanner480x480 .CFLabel .CFH3 {
	font-size: 1.5em;
	line-height: 1.2em;
	}
	
	.CFBanner480x480 .CFMotoLink {
	font-size: 1.15em;
	line-height: 1.15em;
	}
}