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

	br { display: none;}
	br.sp {display: block;}

	img { width: 100%;}


	.section {
		margin-bottom: 50px;
		display: block;
	}
	.section.gray {
		padding: 50px 0;
		background: #d3d3d3;
	}

	/* メインビジュアル */
	#main_visual {
		margin: 0 auto;
		color: #fff;
	}

	#main_visual {
		overflow: hidden;
		position: relative;
		height: calc(180vh - 76px);
		max-height:calc((180vw - 17px) * .4825);
   		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: 100%;
		object-fit: cover;
		font-family: 'object-fit: cover;';
	}

	#main_visual .img_slider div {
		margin-bottom: 0;
	}

	#main_visual .img_slider img {
		font-size: 0;
		line-height: 0;
	}

	#main_visual .img_slider .slider_cont {
		padding: 20px 0 70px;
	}

	#main_visual .img_slider .slider_cont .copy {
		width: 100%;
		margin: 0 auto 25px;
		font-size: 18px;
		line-height: 25px;
		text-align: center;
		position: absolute;
		top: 10px;
	}

	#main_visual .img_slider .slider_cont .logo {
		margin: 0 auto 10px;
	}

	#main_visual .img_slider .slider_cont .img {
		width: 100%;
		margin: 50px auto 0;
		position: relative;
	}

	#main_visual .img_slider .img img {
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
	}

	#main_visual .img_slider .slider_inner {
		padding: 0;
	}

	#main_visual .img_slider .slider_inner .img img.on {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	#main_visual .img_slider .slider_inner.on .img img.on {
		opacity: 1;
	}

	#main_visual .img_slider .slider_inner.on .img img.off {
		opacity: 0;
	}

	#main_visual .img_slider .slider_cont .switch_title {
		width: 37%;
		height: 70px;
		padding: 8px 0 8px 15px;
		font-size: 13px;
		line-height: 22px;
		color: #444;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #fff;
		box-sizing: border-box;
	}

	#main_visual .img_slider .slider_cont .equip_switch {
		width: 64%;
		height: 70px;
		padding: 8px 15px 32px 0;
		position: absolute;
		overflow: hidden;
		bottom: 0;
		right: 0;
		box-sizing: border-box;
		background-color: #fff;
	}

	#main_visual .img_slider .slider_cont .equip_switch li {
		width: calc(50% - 4px);
		width: -webkit-calc(50% - 4px);
		height: 22px;
		margin-right: 8px;
		font-size: 14px;
		line-height: 22px;
		float: left;
		background-color: #ddd;
		text-align: center;
		cursor: pointer;
		box-sizing: border-box;
		vertical-align: middle;
		position: relative;
	}

	#main_visual .img_slider .slider_cont .equip_switch li:last-child {
		margin-right: 0;
	}

	#main_visual .img_slider .slider_cont .equip_switch li span {
		position: relative;
		display: block;
	}

	#main_visual .img_slider .slider_cont .equip_switch li span::after {
		content: "";
		width: 100%;
		border-bottom: 4px solid transparent;
		position: absolute;
		bottom: -9px;
		left: 0;
		display: inline-block;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
	}

/* 装着 */
	#main_visual .slider_inner.on .slider_cont .equip_switch li.on {
		background-color: #444;
		color: #fff;
	}

	#main_visual .slider_inner.on .slider_cont .equip_switch li.on span::after {
		border-bottom-color: #444;
	}

	#main_visual .slider_inner.on .slider_cont .equip_switch li.off {
		color: #444;
	}

	#main_visual .slider_inner.on .slider_cont .equip_switch li.off span::after {
		bottom: -4px;
	}


/* 非装着 */
	#main_visual .slider_inner.off .slider_cont .equip_switch li.on {
		color: #444;
	}

	#main_visual .slider_inner.off .slider_cont .equip_switch li.off {
		background-color: #444;
		color: #fff;
	}

	#main_visual .slider_inner.off .slider_cont .equip_switch li.off span::after {
		border-bottom-color: #444;
	}

	#main_visual .slider_inner.off .slider_cont .equip_switch li.on span::after {
		bottom: -4px;
	}

	/* section */
	.section_inner {
		padding: 0 15px;
	}
	.section h3 {
		margin: 0 25px 30px;
		font-size: 23px;
		text-align: center;
		font-weight: normal;
	}
	.section h3 span {
		width: 160px;
		padding: 0 0 10px;
		border-bottom: 3px solid #444;
		display: inline-block;
		white-space: nowrap;
	}

	.link {
		margin: 0 20px 20px;
		font-size: 16px;
		line-height: 24px;
		text-align: center;
	}

	.link a {
		color: #0064a1;
	}

	.link a:after{
		content: '';
		width: 20px;
		height: 20px;
		display: inline-block;
		background-image:url(../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;
	}

	/*--------------------------------------------------------------
    ## section_movie
	--------------------------------------------------------------*/
    #section_movie {
		margin-bottom: 26px;
        padding: 5px 0 41px;
		background-color: #d9e4eb;
		margin-top: -1px;
		position: relative;
		z-index: 1;
	}

	#section_movie .section_inner {
		padding: 0;
	}

    #section_movie .movie_tit {
		margin-top: 18px;
		padding: 0 16px;
		text-align: center;
		font-size: 25px;
		font-weight: normal;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
		line-height: 1.25;
		letter-spacing: -1px;
	}

	#section_movie .mov_item_list {
		margin: 0 auto 0;
		padding: 0 7.5px;
		display: flex;
		flex-wrap: wrap;
	}

	#section_movie .mov_item_list li {
		position: relative;
		text-align: center;
		margin-left: 7.5px;
		margin-bottom: 8px;
		width: calc(50% - 4px);
		cursor: pointer;
	}

	#section_movie .mov_item_list li:nth-child(2n+1){
		margin-left: 0;
	}

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

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

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

	/*--------------------------------------------------------------
    ## section_items
	--------------------------------------------------------------*/
	/* アイテム */
	#section_items {
		padding-bottom: 42px;
		margin-bottom: 0;
	}

	#section_items .box_flex {
		display: flex;
		justify-content: flex-start;
	}

	.item_list {
		margin: 0 17px 70px;
	}

	.item_list li {
		position: relative;
		margin: 0 0 12px;
		background-color: #fff;
	}

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

	#section_items .item_list .img {
		width: 38.6%;
		position: relative;
		overflow: hidden;
	}

	#section_items .item_list .img img {
		width: 100%;
		vertical-align: middle;
		object-fit: cover;
	}

	.item_list li .box {
		padding: 8px 7px;
		box-sizing: border-box;
	}


	.item_list li .box h4 {
		margin: 0 0 15px;
		font-size: 3.5vw;
		line-height: 1.6;
		font-weight: normal;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
	}

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

	.item_list li .box .copy {
		margin: 0 0 15px;
		font-size: 16px;
		line-height: 24px;
	}

	.item_list li .box > *:last-child {
		margin-bottom: 0;
	}

	#section_items .item_list .link {
		margin: 0;
		position: absolute;
		right: 2.4vw;
		bottom: 2vw;
		color: #000;
		font-size: 2.7vw;
		text-align: left;
		line-height: 1.2;
		align-self: flex-end;
	}

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

	 /* banner_acollect */
	 .banner_acollect {
        margin: 40px 15px 0;
    }
	.banner_acollect .pc {
		display: none;
	}



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

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

	#section_tab .section_tab_desc {
		border-radius: 14px;
		border: 1px solid #045c80;
		max-width: 264px;
		margin: 24px auto 0;
		padding: 4px;
	}

	#section_tab .section_tab_desc p {
		font-size: 10px;
		color: #045c80;
		text-align: center;
		letter-spacing: -0.05em;
	}

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

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

	.tabs-multiple__btn button {
		color: #000;
		border: none;
		border-radius: 7px 7px 0 0;
		font-size: 10px;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
		width: calc(25 / 100 * 100%);
		margin-top: 11px;
		padding: 2px 3px 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: 32px;
		left: calc(50 / 100 * 100%);
		transform: translate(-50%, 0);
		z-index: -1;
	}

	.tabs-multiple__btn button span {
		display: block;
		padding-bottom: 2px;
		line-height: 1;
        min-height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
	}

	.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: 13px;
		margin-top: 0;
	}

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

	.tabs-multiple__btn[data-button="bottom"] {
		margin-bottom: 16px;
	}

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

	.tabs-multiple__btn[data-button="bottom"] button {
		border-radius: 0 0 7px 7px;
		padding: 0 2px 1px;
		margin-top: 0;
		margin-bottom: 11px;
	}

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

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

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

	.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: 12px;
		font-weight: normal;
		line-height: 21px;
		letter-spacing: -1px;
		margin-top: 24px;
	}

	.tabs-multiple__list-item > ul {
		display: flex;
		flex-flow: wrap;
		justify-content: center;
		gap: 34px 0;
		margin-top: 25px;
	}

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

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

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

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

	.tabs-multiple__list-item > ul > li p {
		line-height: 22px;
		font-size: 14px;
		margin: 13px 0 0;
		letter-spacing: -0.03em;
	}

	.tabs-multiple__list-item > ul > li a {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 13px;
		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: 14px;
		height: 14px;
		margin-left: 4px;
	}

	.tabs-multiple__list-item .section_tab_desc {
		margin-top: 30px !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: 0 15px 80px;
	}

	#section_caution .caution {
		font-size: calc(21 / 750 * 100vw);
        line-height: calc(35 / 750 * 100vw);
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
	}

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

	#section_supportguide .section_supportguide_link {
		display: block;
	}

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

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

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