@charset "utf-8";

@media print, screen and (min-width : 769px){
	/* #contents_area {
		min-width: 100%;
	} */
	.mb_0 {
		margin-bottom: 0 !important;
	}
	.link {
		margin: 0 auto 20px;
		font-size: 16px;
		line-height: 24px;
		text-align: center;
	}

	.link a {
		color: #0064a1;
		display: inline-block;
	}

	.link a:after{
		content: '';
		width: 20px;
		height: 20px;
		display: inline-block;
		background-image: url(/ACCESS/n-van-e/common/img/parts_ico_btn_detail_arrow.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 20px 20px;
		position: relative;
		top: 4px;
		right: -5px;
	}

	/* メインビジュアル */
	#main_visual {
		overflow: hidden;
		position: relative;
		height: calc(100vh - 176px);
		min-height: 450.25px;
		max-height:calc((100vw - 17px) * .4125);
   		background: #000;
	}

	#main_visual .movie {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		min-height: 100%;
		transform: translateY(-50%);
	}

	#main_visual .movie video {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 101%;
		object-fit: cover;
		font-family: 'object-fit: cover;';
	}

	/* .section */
	.section {
		display: block;
		margin: 0 auto 70px;
		/* min-width: 980px; */
	}

	.section.gray {
		padding-top: 90px;
		padding-bottom: 70px;
		background-color: #d3d3d3;
	}

	.section h3 {
		margin: 0 auto 68px;
		font-size: 50px;
		font-weight: normal;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
		text-align: center;
	}

	.section h3 span {
		width: 270px;
		padding: 0 0 14px;
		border-bottom: 4px solid #444;
		display: inline-block;
	}

	.link a:after{
		content: '';
		width: 20px;
		height: 20px;
		display: inline-block;
		background-image: url(/ACCESS/n-van-e/common/img/parts_ico_btn_detail_arrow.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 20px 20px;
		position: relative;
		top: 4px;
		right: -7px;
	}

	.section_inner {
		width: 980px;
		margin: 0 auto;
	}

	.section .pic img{
		max-width: 100%;
	}

	.section .title {
		text-align: center;
		font-weight: 500;
		font-size: 31px;
		line-height: 1.5;
	}

	/*--------------------------------------------------------------
    ## section_movie
	--------------------------------------------------------------*/
	#section_movie {
		margin-bottom: 64px;
		padding: 0.1rem 0 10.3rem;
		background-color: #d9e4eb;
	}

	#section_movie .movie_tit {
		text-align: center;
		color: #666666;
		margin-top: 3.4rem;
		font-size: 50px;
		font-weight: normal;
		line-height: 1.25;
	}

	#section_movie .movie_tit img.switch_pc {
		display: inline-block;
		width: 684px;
	}

	#section_movie .mov_item_list {
		margin: 3rem auto .5rem;
		width: 980px;
		display: flex;
		flex-wrap: wrap;
	}

	#section_movie .mov_item_list li {
		position: relative;
		margin-top: 10px;
		margin-left: 10px;
		width: 237px;
		height: 421px;
		cursor: pointer;
		overflow: hidden;
	}
	#section_movie .mov_item_list li:nth-child(4n+1){
		margin-left: 0;
	}

	#section_movie .mov_item_list li a {
		display: block;
	}
	#section_movie .mov_item_list li a:hover {
		opacity: 1;
	}

	#section_movie .mov_item_list li img {
		max-width: 100%;
		vertical-align: middle;
	}

	/*--------------------------------------------------------------
    ## section_items
	--------------------------------------------------------------*/
	#section_items {
		background-color: transparent !important;
		margin-bottom: 0;
		padding-bottom: 0;
		padding-top: 56px;
	}

	#section_items .section_inner {
		width: auto;
		margin: 0;
	}

	#section_items .item_gray {
		background-color: #d3d3d3;
		padding: 68px 0 80px;
	}

	#section_items .item_list {
		display: flex;
		flex-wrap: wrap;
		width: 980px;
		margin: 0 auto 50px;
	}

	#section_items .item_list li {
		margin-bottom: 25px;
		width: calc( 50% - 15px);
		background-color: #fff;
	}

	#section_items .item_list li:nth-child(2n) {
		margin-left: 30px;
	}

	#section_items .item_list li a {
		color: #444;
	}

	#section_items .item_list .box_flex {
		position: relative;
		align-items: flex-start;
	}

	#section_items .item_list .img {
		width: 155px;
		position: relative;
		overflow: hidden;
	}

	#section_items .item_list .img img {
		width: 100%;
		vertical-align: middle;
		object-fit: cover;
		-webkit-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}

	#section_items .item_list li:hover .img img {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}

	#section_items .item_list .box {
		padding: 10px 10px;
		width: calc(100% - 155px);
		box-sizing: border-box;
	}

	#section_items .item_list h4 {
		color: #000;
		font-size: 18px;
		line-height: 1.7;
		font-weight: normal;
	}

	#section_items .item_list h4 svg {
		margin-left: 3px;
	}

	#section_items .item_list .copy {
		margin-bottom: 35px;
		font-size: 18px;
		line-height: 24px;
	}

	#section_items .item_list .link {
		margin-bottom: 0;
		position: absolute;
		right: 8px;
		bottom: 8px;
		color: #000;
		font-size: 14px;
		text-align: left;
		align-self: flex-end;
	}

	#section_items .item_list .link::after {
		position: relative;
		top: 4px;
		content: "";
		display: inline-block;
		margin-left: 10px;
		width: 18px;
		height: 20px;
		background: url(../img/parts_ico_red_arrow.png) center no-repeat;
		background-size: 18px auto;
		display: inline-block;
	}

	/* banner_acollect */
	.banner_acollect {
		text-align: center;

	}
	.banner_acollect .sp {
		display: none;
	}

	/*--------------------------------------------------------------
    ## section_tab
	--------------------------------------------------------------*/
	#section_tab {}

	#section_tab h2 {
		text-align: center;
		color: #666666;
		margin-top: 1rem;
		font-size: 50px;
		font-weight: normal;
		line-height: 1.25;
		letter-spacing: -1px;
	}

	#section_tab .section_tab_desc {
		border-radius: 14px;
		border: 1px solid #045c80;
		max-width: 527px;
		margin: 48px auto 0;
		padding: 9px;
	}

	#section_tab .section_tab_desc p {
		font-size: 19px;
		color: #045c80;
		text-align: center;
	}

	.tabs-multiple {
		margin-top: 33px;
	}

	.tabs-multiple__btn {
		display: flex;
		position: relative;
	}

	.tabs-multiple__btn button {
		color: #000;
		border: none;
		border-radius: 18px 18px 0 0;
		font-size: 21px;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
		width: calc(25 / 100 * 100%);
		margin-top: 30px;
		padding: 12px 8px 0;
		cursor: pointer;
		transition: background-color 300ms, color 300ms;
	}

	.tabs-multiple__btn button[aria-selected='true']::before {
		content: '';
		display: block;
		position: absolute;
		width: 100vw;
		height: 100%;
		top: 86px;
		left: calc(50 / 100 * 100%);
		transform: translate(-50%, 0);
		z-index: -1;
	}

	.tabs-multiple__btn button span {
		display: block;
		padding-bottom: 12px;
		line-height: 1.5;
	}

	.tabs-multiple__btn img {
		display: block;
		width: 100%;
		height: auto;
	}

	.tabs-multiple__btn button[aria-selected='false'] {
		/* background-color: $lightest-color; */
	}

	.tabs-multiple__btn button[aria-selected='false']:hover {
		/* background-color: $gray-color03; */
	}

	.tabs-multiple__btn button[aria-selected='true'] {
		padding-top: 42px;
		margin-top: 0;
	}

	.tabs-multiple__btn button[aria-selected='true']:hover {
		/* background-color: $primary-color; */
	}

	.tabs-multiple__btn[data-button="bottom"] button[aria-selected='true']::before {
		content: none;
	}

	.tabs-multiple__btn[data-button="bottom"] button {
		border-radius: 0 0 18px 18px;
		padding: 0 8px 12px;
		margin-top: 0;
		margin-bottom: 30px;
	}

	.tabs-multiple__btn[data-button="bottom"] button span {
		padding: 6px 0 0;
	}

	.tabs-multiple__btn[data-button="bottom"] button[aria-selected='true'] {
		padding-bottom: 36px;
		margin-bottom: 0;
	}

	.tabs-multiple__list-item {
		position: relative;
		display: block;
		width: 100%;
		padding-bottom: 50px;
	}

	.tabs-multiple__list-item[aria-hidden='false'] {
		display: block;
		opacity: 0;
		visibility: hidden;
		animation: tabOpen ease forwards;
	}

	.tabs-multiple__list-item[aria-hidden='true'] {
		display: none;
	}

	.tabs-multiple__list-item::before {
		content: '';
		display: block;
		position: absolute;
		width: 100vw;
		height: 100%;
		top: 0;
		left: calc(50 / 100 * 100%);
		transform: translate(-50%, 0);
		z-index: -1;
	}

	.tabs-multiple__list-item > img {
		width: 100%;
		max-width: 1402px;
		height: auto;
	}

	.tabs-multiple__list-item > h3 {
		text-align: center;
		font-size: 33px;
		font-weight: normal;
		line-height: 62px;
		letter-spacing: -0.05em;
		margin-top: 18px;
	}

	.tabs-multiple__list-item > ul {
		display: flex;
		flex-flow: wrap;
		justify-content: space-between;
		gap: 39px 0;
		margin-top: 73px;
	}

	.tabs-multiple__list-item > ul > li {
		width: 450px;
	}

	.tabs-multiple__list-item > ul > li img {
		width: 100%;
		height: auto;
	}

	.tabs-multiple__list-item > ul > li h4 {
		font-size: 21px;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
		font-weight: normal;
		margin: 16px 0 0;
	}

	.tabs-multiple__list-item > ul > li h4 span {
		font-size: 15px;
	}

	.tabs-multiple__list-item > ul > li p {
		line-height: 30px;
		font-size: 18px;
		margin: 8px 0 0;
	}

	.tabs-multiple__list-item > ul > li a {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 19px;
		width: fit-content;
		margin: 12px auto 0;
	}

	.tabs-multiple__list-item > ul > li a::after {
		content: '';
		display: inline-block;
		background: url('../common/img/parts_ico_btn_detail_arrow.png') no-repeat center / 100% auto;
		width: 20px;
		height: 20px;
		margin-left: 4px;
	}

	.tabs-multiple__list-item .section_tab_desc {
		margin-top: 58px !important;
	}

	#tabs-1-1, #tabs-1-1[aria-selected='true']::before, #tabs-1-5 {
		background-color: #e6d2d5;
	}

	#tabs-1-2, #tabs-1-2[aria-selected='true']::before, #tabs-1-6 {
		background-color: #e2e08d;
	}

	#tabs-1-3, #tabs-1-3[aria-selected='true']::before, #tabs-1-7 {
		background-color: #94c181;
	}

	#tabs-1-4 ,#tabs-1-4[aria-selected='true']::before, #tabs-1-8 {
		background-color: #b8d5e7;
	}

	#panels-1-1::before {
		background-color: #e6d2d5;
	}

	#panels-1-2::before {
		background-color: #e2e08d;
	}

	#panels-1-3::before {
		background-color: #94c181;
	}

	#panels-1-4::before {
		background-color: #b8d5e7;
	}

	/*--------------------------------------------------------------
    ## section_caution
	--------------------------------------------------------------*/
	#section_caution {
		margin: 20px auto 80px;
	}

	#section_caution .block_inner {
		width: 980px;
		margin: 0 auto;
	}

	#section_caution .caution {
		font-size: 12px;
        line-height: 20px;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
	}

	/*--------------------------------------------------------------
    ## section_supportguide
	--------------------------------------------------------------*/
	#section_supportguide {
		margin-bottom: 64px;
	}

	#section_supportguide .section_supportguide_link {
		display: block;
		margin: 0 auto;
		max-width: 644px;
	}

	#section_supportguide .section_supportguide_link img {
		display: block;
		width: 100%;
		height: auto;
	}
}

@media print, screen and (max-width : 980px){
	.tabs-multiple__list-item::before {
		width: 980px;
		left: 0;
		transform: none;
	}
}

@keyframes tabOpen {
	0% {
		opacity: 0;
		visibility: hidden;
	}

	100% {
		opacity: 1;
		visibility: visible;
	}
}

/* cta */
@media print, screen and (min-width : 769px){
	.cta .box div{
		padding-bottom: 12px;
	}

	.cta .box p {
		display: block;
	}
}

.cta_btn img {
	vertical-align: middle;
}

.fade-in {
	opacity: 0;
	transition-duration: 100ms;
	transition-property: opacity, transform, visibility;
	transition: opacity .3s, visibility .3s;
	visibility: hidden;
}

.scroll-in {
	opacity: .99;
	-ms-transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
	transition: opacity .3s, visibility .3s;
	visibility: visible;
}