@charset "utf-8";
@media screen and (max-width : 768px){
	br { display: none; }

	img { width: 100%; }

	.section .anchor {
		position: absolute;
		right: 100%;
		top: -87px;
	}

	.section h3 {
		padding: 10px 0;
		background: #000;
		text-align: center;
		color: #fff;
		font-size: 23px;
		line-height: 33px;
	}

	.block_inner {
		margin: 0 20px;
	}

	.section .link {
		margin: 50px auto 0;
		text-align: center;
	}
	#contents_area .section .link a {
		display: inline-block;
		color: #0064a1;
		font-size: 16px;
		line-height: 20px;
	}
	.section .link a:after {
		content: '';
		display: inline-block;
		position: relative;
		right: -10px;
		width: 20px;
		height: 20px;
		background: url(../../common/img/parts_ico_btn_detail_arrow.png) 50% 0 / 100% no-repeat;
		vertical-align: top;
	}

	.section .link.frame a {
		padding: 15px 20px;
		border: 1px solid;
		border-radius: 2px;
	}

	#footer_topic_path {
		margin-top: 85px;
	}


/* ----------------------------------------
	Animation
---------------------------------------- */

	.anim_ready .scroll_anim {
		opacity: 0;
		backface-visibility: hidden;
	}

	.anim_ready .scroll_anim:not(.block) {
		transform: translateY(50px);
	}

	.anim_ready .anim_end {
		opacity: 1;
		transition: .75s;
		transition-property: opacity;
	}

	.anim_ready .scroll_anim.anim_end:not(.block) {
		transform: translateY(0) !important;
		transition-property: opacity, transform;
	}


/* ----------------------------------------
	section_mv
---------------------------------------- */

	#mv {
		position: relative;
		margin: auto;
		padding-top: 75%;
	}
	#mv img {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: auto;
		height: 100%;
	}
	
	#mv .casual {
		opacity: 0;
	}

	#mv_on {
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
	}

	.anim_ready #mv_on {
		opacity: 0;
		width: 0;
	}

	.anim_sp #mv_on {
		animation: mv_on_sp 3s infinite;
	}

	#mv.anim_sp .casual {
		animation: mv_casual_sp 6s infinite;
	}


/* ----------------------------------------
	section_style
---------------------------------------- */

	#section_style,
	#section_style .block+.block {
		margin-top: 80px;
	}

	#section_style .block_title {
		text-align: center;
	}
	#section_style .block_title::before {
		content: '';
		display: block;
		width: 1px;
		height: 100px;
		margin: 0 auto 20px;
		background: #000;
	}

	.anim_ready #section_style .block_title::before {
		height: 0;
	}

	.anim_ready #section_style .anim_end .block_title::before {
		height: 100px;
		transition: 1.5s height;
	}

	#section_style .block_title p {
		margin: 25px 20px 0;
		font-size: 14px;
		line-height: 2;
	}
	#section_style .block_title h4 img {
		height: 30px;
	}
	#section_style .block_title h4+p {
		margin-top: 30px;
		letter-spacing: .1em;
		font-size: 20px;
		line-height: 1;
	}
	#section_style .block_title figure {
		margin-top: 30px;
	}


	#section_style [data-item] {
		margin-top: 50px;
	}
	#section_style li>div {
		margin-top: 10px;
	}

	#section_style .copy {
		font-size: 18px;
		line-height: 1.5;
	}

	#section_style .item {
		margin-top: 20px;
	}
	#section_style .item li {
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
		font-size: 14px;
		line-height: 1.5;
	}
	#section_style .item li+li {
		margin-top: .5em;
	}
	#section_style .item small {
		margin-left: 10px;
		font-weight: normal;
		font-size: 12px;
	}
	#section_style .item br+small {
		margin-left: 0;
	}

	#section_style .block_inner>figure {
		margin-top: 50px;
	}
}

@-webkit-keyframes mv_on_sp {
	0% {
		opacity: 1;
		width: 0;
	}
	80% {
		opacity: 1;
		width: 100%;
	}
	90% {
		opacity: 0;
		width: 100%;
	}
	100% {
		opacity: 0;
		width: 0;
	}
}
@keyframes mv_on_sp {
	0% {
		opacity: 1;
		width: 0;
	}
	80% {
		opacity: 1;
		width: 100%;
	}
	90% {
		opacity: 0;
		width: 100%;
	}
	100% {
		opacity: 0;
		width: 0;
	}
}

@-webkit-keyframes mv_casual_sp {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes mv_casual_sp {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}