/* =====================================
 *  ANIMATION
 * ===================================== */

.sc-box {
	opacity: 0;
}


@-webkit-keyframes fadeUp {
	0% {
		-webkit-transform: translate(0,30px);
		-ms-transform: translate(0,30px);
		-o-transform: translate(0,30px);
		transform: translate(0,30px);
	}
	100% {
		-webkit-transform: translate(0,0);
		-ms-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
		opacity: 1;
	}
}
@keyframes fadeUp {
	0% {
		-webkit-transform: translate(0,30px);
		-ms-transform: translate(0,30px);
		-o-transform: translate(0,30px);
		transform: translate(0,30px);
	}
	100% {
		-webkit-transform: translate(0,0);
		-ms-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
		opacity: 1;
	}
}

.fadeUp {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-name: fadeUp;
	animation-name: fadeUp;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}




@-webkit-keyframes hdIn {
	100% {
		background-color: #e50020;
	}
}
@keyframes hdIn {
	100% {
		background-color: #e50020;
	}
}


@-webkit-keyframes mvIn {
	0% {
		opacity: 0;
		background-position: center -30px;
	}
	100% {
		opacity: 1;
		background-position: center center;
	}
}
@keyframes mvIn {
	0% {
		opacity: 0;
		background-position: center -30px;
	}
	100% {
		opacity: 1;
		background-position: center center;
	}
}


@-webkit-keyframes mvTtlIn {
	100% {
		width: 100%;
	}
}
@keyframes mvTtlIn {
	100% {
		width: 100%;
	}
}


@-webkit-keyframes mainBlock1 {
	100% {
		opacity: 1;
	}
}
@keyframes mainBlock1 {
	100% {
		opacity: 1;
	}
}

.degs1 .mainBlock1 {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-name: mainBlock1;
	animation-name: mainBlock1;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}


.loadIn {
	-webkit-animation-duration: 0.8s;
	animation-duration: 0.8s;
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-name: hdIn;
	animation-name: hdIn;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}


.loadIn .mvPage {
	-webkit-animation-duration: 0.8s;
	animation-duration: 0.8s;
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-name: mvIn;
	animation-name: mvIn;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}


.loadIn .mvInner .ttl2:before {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-name: mvTtlIn;
	animation-name: mvTtlIn;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}




@-webkit-keyframes spMenuIn {
	1% {
		-webkit-transform: translateX(-30px);
		-ms-transform: translateX(-30px);
		-o-transform: translateX(-30px);
		transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes spMenuIn {
	1% {
		-webkit-transform: translateX(-30px);
		-ms-transform: translateX(-30px);
		-o-transform: translateX(-30px);
		transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}


.spGnav li.in {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-name: spMenuIn;
	animation-name: spMenuIn;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}



@media ( max-width: 767px ) {
	.degs1 .mainBlock1 {
		-webkit-animation-delay: 1.1s;
		animation-delay: 1.1s;
	}
}







@media ( min-width: 768px ) {

	/* hover */
	a.tdu:hover {
		text-decoration: none;
	}


	.logo a,
	.gNav li a [class*="txt"],
	.postList1 .postThumb,
	.postList1 .postItem .postTtl,
	.btnMore1,
	.btnMore1 .inTxt [class*="txt"],
	.btnMore1 .txtEn,
	.btnMore2,
	[class^='navBox'] li .navTtl .txtMain,
	[class^="navBox"] li .navThumb,
	[class^="navBox"] li .navThumb img,
	.footNav li a,
	.linkNav li a,
	.bnrBox,
	.dlList .dlLink a,
	.btnMore4 a,
	.link02,
	.gridBox01 .boxItem a.topInner,
	.siteHeader .catchCopy a {
		-webkit-transition: 0.2s;
		-o-transition: 0.2s;
		transition: 0.2s;
	}


	.logo a:hover {
		opacity: 0.7;
	}


	.btnMore2:hover,
	.bnrBox:hover,
	.siteHeader .catchCopy a:hover {
		opacity: 0.8;
	}


	.home_nav_honda_w a:hover .navLayer {
		left: -300px;
	}

	.home_nav_honda_w a:hover:before {
		right: 0;
	}

	.home_nav_honda_e a:hover:before {
		left: 0;
	}

	.home_nav_honda_e a:hover .navLayer {
		right: -300px;
	}


	@-webkit-keyframes btnR {
		30% {
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			-o-transform: scale(1.1);
			transform: scale(1.1);
		}
		100% {
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
		}
	}
	@keyframes btnR {
		30% {
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			-o-transform: scale(1.1);
			transform: scale(1.1);
		}
		100% {
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
		}
	}

	.btnR a:hover, .btnTour a:hover, .btnRequest a:hover {
		-webkit-animation-duration: 0.3s;
		animation-duration: 0.3s;
		-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
		animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
		-webkit-animation-name: btnR;
		animation-name: btnR;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}


	.gNav li a:hover [class*="txt"] {
		color: #e50020;
	}


	.postList1 .postItem a:hover .postThumb {
		opacity: 0.8;
	}

	.postList1 .postItem a:hover .postTtl {
		color: #e50020;
	}


	.postList2 .postItem a:hover {
		text-decoration: underline;
	}


	.btnMore1:hover {
		color: #e50020;
		-webkit-box-shadow: none;
		box-shadow: none;
		background-size: 95% 95%;
	}

	.btnMore1:hover .txtEn {
		color: #e50020;
	}


	[class^='navBox'] li a:hover .navTtl .txtMain {
		color: #e50020;
	}

	[class^="navBox"] li a:hover .navThumb {
		opacity: 0.8;
	}

	[class^="navBox"] li a:hover .navThumb img {
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		-o-transform: scale(1.05);
		transform: scale(1.05);
	}


	.compData .snsIco:hover img,
	.compData .snsIco-w:hover img {
		-webkit-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		-o-transform: translateY(-5px);
		transform: translateY(-5px);
	}


	.footNav li a:hover {
		color: #e50020;
	}


	.linkNav li a:hover,
	.dlList .dlLink a:hover,
	.link02:hover {
		background-color: rgba(229,0,32,0.8);
	}

	.linkNav.departNav li a:hover{
		background-color: #fff;
	}


	.gridBox01 .boxItem a.topInner:hover {
		background-color: rgba(0,0,0,0.8);
	}


	.btnMore4 a:hover {
		color: #fff;
		background-color: #e50020;
	}


	


	.pagenav a.page-numbers:hover {
		color: #fff;
		background-color: #aaa;
	}

	.pagenav a.page-numbers_np:hover {
		color: #aaa;
	}



	/* transition */
	.trs02 {
		-webkit-transition: 0.2s;
		-o-transition: 0.2s;
		transition: 0.2s;
	}

}