/* Keep the current desktop content fluid up to the 980px maximum. */
@media screen and (min-width: 768px){
	.inner,
	.assist__bnr{
		width:100% !important;
		max-width:980px !important;
	}
	.wrap-search{
		width:100% !important;
	}
	ul.lineup{
		width:auto !important;
		max-width:100% !important;
	}
}

/* Release the shared 980px desktop shell in the tablet range. */
@media screen and (min-width: 769px) and (max-width: 1023px){
	html,
	body{
		width:100% !important;
		min-width:0 !important;
		max-width:100% !important;
	}
	#wrapper,
	#container{
		width:100% !important;
		min-width:0 !important;
		max-width:100% !important;
	}
	#bscGlobalHeader,
	#bscGlobalFooter{
		min-width:0 !important;
		max-width:100% !important;
	}
	#bscGlobalHeader{
		left:0 !important;
		right:0 !important;
		width:auto !important;
	}
	ul.sns{
		width:80% !important;
		max-width:100% !important;
		margin:20px auto 0 !important;
	}
	#assist_type .inner > div:nth-child(1){
		padding-left:15px;
	}
       #assist_type .inner > div:nth-child(2){
           padding-right:15px;
       }
       #assist_itemsList #topConBg_e-bicycle{
           display:grid;
           grid-template-columns:repeat(4, minmax(0, 1fr));
           column-gap:2px;
       }
       #assist_itemsList #topConBg_e-bicycle > .assist_IL_box01,
       #assist_itemsList #topConBg_e-bicycle > .assist_IL_box02{
           width:auto;
           min-width:0;
       }
       #assist_itemsList #topConBg_e-bicycle > .assist_IL_box02{
           grid-column:span 2;
       }
       #assist_itemsList #topConBg_e-bicycle .assist_IL_box01 .assist_IL_con{
           width:100%;
       }
       #assist_itemsList #topConBg_e-bicycle .assist_IL_box02 > div{
           gap:2px;
       }
       #assist_itemsList #topConBg_e-bicycle .assist_IL_box02 > div > .assist_IL_con{
           width:calc((100% - 2px) / 2);
           min-width:0;
           margin-left:0;
       }
       #assist_lineup ul.lineup{
           margin-left:0 !important;
           margin-right:0 !important;
       }
       .controles__flex{
           width:100% !important;
           margin-left:0 !important;
           margin-right:0 !important;
       }
       #contentBanners,
       #contentBanners .gridWrap{
           width:100% !important;
           max-width:100% !important;
           margin-right:0 !important;
       }
       #contentBanners .grid{
           width:100% !important;
           margin-left:0 !important;
           margin-right:0 !important;
           box-sizing:border-box;
       }
       #contentBanners .grid-mod.w1per2{
           width:50% !important;
           box-sizing:border-box;
       }
       #contentBanners .grid-mod.w1per4{
           width:25% !important;
           box-sizing:border-box;
       }
       .assist_footer_convertion .grid{
           width:100% !important;
           margin-left:0 !important;
           margin-right:0 !important;
           box-sizing:border-box;
       }
       .assist_footer_convertion .grid-mod.w1per2{
           width:50% !important;
           box-sizing:border-box;
       }
       #bscGlobalFooter #footerSitemap > div,
       #bscGlobalFooter #footerSitemap > div > ul,
       #bscGlobalFooter #footerLinks > ul{
           width:100% !important;
           max-width:100% !important;
           min-width:0 !important;
           box-sizing:border-box;
       }
       #bscGlobalHeader #headerContent,
       #bscGlobalHeader #headerContentIn,
       #bscGlobalHeader #dropMenuWrap,
       #bscGlobalHeader #gNavi{
           width:100% !important;
           max-width:100% !important;
           min-width:0 !important;
           margin-right:0 !important;
           box-sizing:border-box;
       }
       #bscGlobalHeader #dropMenuWrap{
           left:0 !important;
           right:0 !important;
       }
}

/* Match the shared campaign banner include on small screens. */
@media screen and (max-width: 767px){
	#contentBanners > section:first-child{
		margin-left: 15px;
		margin-right: 15px;
	}

	#contentBanners > section:first-child .mb30 .noSp{
		display: none;
	}

	#contentBanners > section:first-child .mb30 .spOnly{
		display: inline !important;
	}

	#contentBanners > section:first-child .grid{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0;
		margin-left: 0;
		margin-right: 0;
	}

	#contentBanners > section:first-child .grid > .grid-mod.w1per4{
		width: calc(50% - 5px);
		margin-bottom: 10px;
		padding: 0;
		box-sizing: border-box;
	}
}

@media screen and (min-width: 769px){
	.dd-feature01__charge-visual{
		position: absolute;
		top: -5.1952vw;
		left: 56%;
		width: 37.75%;
		aspect-ratio: 165 / 93.64;
		margin-top: 0;
	}
	.dd-feature01__charge-visual:before{
		background:
			radial-gradient(circle closest-side at 28.46% 50%, #87813b 0 99%, transparent 100%),
			radial-gradient(circle closest-side at 71.84% 50%, #87813b 0 99%, transparent 100%);
	}
}

@media screen and (max-width: 768px){
	.dd-feature01__charge-visual{
		position: absolute;
		top: 9vw;
		right: 4vw;
		bottom: auto;
		left: auto;
		width: 44vw;
		margin-top: 0;
		aspect-ratio: 160.28 / 145.73;
	}
}

.dd-parallax__movie-placeholder iframe{
	position: absolute;
	/* Cover fractional-pixel seams at responsive iframe edges. */
	inset: -1px !important;
	display: block;
	width: calc(100% + 2px) !important;
	height: calc(100% + 2px) !important;
	border: 0;
	background: #000;
}
.dd-feature01__movie-placeholder iframe,
.dd-feature02__movie-placeholder iframe,
.dd-feature03__movie-placeholder iframe{
	position: absolute;
	/* Keep the player inside its clipped placeholder without creating a
	   transformed iframe layer. iOS Safari can briefly paint that layer white
	   when the shared menu releases a fixed body. */
	inset: -1px !important;
	display: block;
	width: calc(100% + 2px) !important;
	height: calc(100% + 2px) !important;
	border: 0;
	background: #000;
}
.dd-feature-card__movie iframe{
	position: absolute;
	inset: -1px !important;
	display: block;
	width: calc(100% + 2px) !important;
	height: calc(100% + 2px) !important;
	border: 0;
	background: #000;
}

.dd-parallax__movie-placeholder,
.dd-feature01__movie-placeholder,
.dd-feature02__movie-placeholder,
.dd-feature03__movie-placeholder,
.dd-feature-card__movie{
	overflow: hidden;
}

.dd-feature02__layer--03,
.dd-feature03__layer--03{
	pointer-events: none;
}
.dd-feature02__footer,
.dd-feature02__banner,
.dd-feature03__btn{
	pointer-events: auto;
}

/* Compact the desktop composition before the mobile breakpoint so text does not
   collide with the lower specification artwork. */
@media screen and (min-width: 769px) and (max-width: 1023px){
	.dd-feature01__heading p,
	.dd-feature03__heading p{
		font-size: clamp(10px, 1.25vw, 17px);
	}
	.dd-feature01__charge > p,
	.dd-feature03__description{
		font-size: clamp(9px, 1.17vw, 16px);
	}
	.dd-feature01__charge > p strong,
	.dd-feature03__description strong{
		font-size: clamp(12px, 1.46vw, 20px);
	}
	.dd-feature03__description br.dispPc{
		display: none;
	}
	.dd-feature03__description strong{
		font-size: clamp(10px, 1.245vw, 17px);
		padding-bottom: clamp(2px, 0.293vw, 4px);
		margin-bottom: clamp(3px, 0.44vw, 6px);
	}
	.dd-feature01__spec{
		bottom: 7%;
	}
	.dd-feature09{
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Keep the desktop typography proportional as the legacy PC layouts narrow.
   The existing SP rules below 768px remain unchanged. */
@media screen and (min-width: 768px){
	.dd-feature09__content h3{
		font-size: clamp(14px, 1.5vw, 18px);
	}
	.dd-feature09__content p{
		font-size: clamp(10px, 1.2vw, 14px);
	}
	.dd-feature09__heading-top{
		font-size: clamp(11px, 1.2vw, 14px);
	}
	.dd-feature09__heading-bottom{
		font-size: clamp(13px, 1.5vw, 18px);
	}
	.battery-type__description dt{
		font-size: clamp(12px, 1.5vw, 18px);
	}
	.battery-type__description dd{
		font-size: clamp(9px, 1.2vw, 14px);
	}
	.battery-type__description dd span{
		font-size: clamp(10px, 1.35vw, 16px);
	}
}

/* Keep the 980px area readable without changing the narrower tablet band. */
@media screen and (min-width: 900px){
	.dd-feature09__content h3,
	.dd-feature09__heading-bottom{
		font-size: clamp(14px, 1.65vw, 18px);
	}
	.dd-feature09__content p,
	.dd-feature09__heading-top{
		font-size: clamp(10px, 1.35vw, 14px);
	}
	.battery-type__description dt{
		font-size: clamp(12px, 1.65vw, 18px);
	}
	.battery-type__description dd{
		font-size: clamp(9px, 1.25vw, 14px);
	}
	.battery-type__description dd span{
		font-size: clamp(10px, 1.4vw, 16px);
	}
}

/* Keep the black feature section full-width and cap article scaling at 1300px. */
@media screen and (min-width: 769px){
	.dd-features2026.dd-features{
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		overflow: visible;
	}
	.dd-feature01,
	.dd-feature02,
	.dd-feature03{
		width: 93.56vw;
		max-width: 1300px;
	}
	.dd-feature01__stage,
	.dd-feature02__stage,
	.dd-feature03__stage{
		max-height: 600px;
	}
	.dd-feature01,
	.dd-feature03{
		margin-left: auto;
		margin-right: 0;
	}
	.dd-feature02{
		margin-left: 0;
		margin-right: auto;
	}
}

/* At 1440px and wider, keep the same capped feature stages in a centered
   1440px canvas. Only their outer anchoring and the flat color bands change;
   all inner element positions and sizes stay shared with the desktop rules. */
@media screen and (min-width: 1440px){
	.dd-features2026.dd-features{
		--dd-feature-canvas-gutter: calc(50vw - 720px);
	}
	.dd-feature01,
	.dd-feature03{
		margin-left: calc(var(--dd-feature-canvas-gutter) + 140px);
	}
	.dd-feature02{
		margin-left: var(--dd-feature-canvas-gutter);
	}
	.dd-feature01::after,
	.dd-feature03::after,
	.dd-feature02::before{
		content: "";
		position: absolute;
		z-index: 0;
		height: 600px;
		opacity: 1;
		transition: opacity .7s ease;
		pointer-events: none;
	}
	.dd-feature01::after{
		top: 80px;
		left: 100%;
		width: var(--dd-feature-canvas-gutter);
		background: #aba74a;
	}
	.dd-feature03::after{
		top: 0;
		left: 100%;
		width: var(--dd-feature-canvas-gutter);
		background: #021242;
	}
	.dd-feature02::before{
		top: 0;
		right: 100%;
		width: var(--dd-feature-canvas-gutter);
		background: #c75916;
	}
}

/* Reveal the extended flat-color bands in sync with each feature background. */
@media screen and (min-width: 1440px){
	.dd-feature01.is-reveal-ready::after,
	.dd-feature02.is-reveal-ready::before,
	.dd-feature03.is-reveal-ready::after{
		opacity: 0;
	}
	.dd-feature01.is-reveal-ready.is-reveal-2::after,
	.dd-feature02.is-reveal-ready.is-reveal-2::before,
	.dd-feature03.is-reveal-ready.is-reveal-2::after{
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce){
	.dd-feature01.is-reveal-ready::after,
	.dd-feature02.is-reveal-ready::before,
	.dd-feature03.is-reveal-ready::after{
		opacity: 1;
		transition: none;
	}
}

/* Keep feature 02 flush to the left edge through the 1440px layout. */
@media screen and (min-width: 769px) and (max-width: 1440px){
	.dd-feature02{
		margin-left: 0;
	}
	.dd-feature02::before{
		content: none;
	}
}

/* Keep one shared desktop composition across the 1440px anchoring change. */
@media screen and (min-width: 769px){
	.dd-feature01__heading{
		top: 6.1%;
		left: 7%;
		width: 29%;
	}
	.dd-feature01__charge{
		top: 46.7%;
		left: 7%;
		width: 33.92%;
	}
	.dd-feature01__person{
		left: 49.5%;
		bottom: -6.8%;
		display: block;
		width: 21.5%;
	}
	.dd-feature01__movie-placeholder{
		top: 4.1%;
		right: 17.2%;
		width: 23.8462%;
		aspect-ratio: 9 / 16;
	}
	.dd-feature01__spec{
		left: 7%;
		bottom: 6.88%;
		width: 27.85%;
	}
	.dd-feature01__layer--03::before{
		bottom: 4.13%;
		width: 36%;
		height: 30.49%;
	}
	.dd-feature01__notes{
		grid-template-columns: 30.2% 34.5%;
		padding-left: 7%;
	}

	.dd-feature02__heading{
		top: 5.41%;
		left: 46%;
		width: 24.58%;
	}
	.dd-feature02__visual{
		top: 31.46%;
		right: 10.5%;
		width: 9.34%;
	}
	.dd-feature02__movie-placeholder{
		top: 4.13%;
		left: 17.6%;
		width: 23.8462%;
		aspect-ratio: 9 / 16;
	}
	.dd-feature02__description{
		top: 42.27%;
		left: 46%;
		width: 25.07%;
	}
	.dd-feature02__footer{
		bottom: 4.13%;
		width: 26.8%;
		padding-bottom: 2.9%;
		clip-path: polygon(3.4% 0%, 100% 0, 100% 100%, 0% 100%, 0% 9.5%);
	}
	.dd-feature02__banner{
		width: 76%;
	}
	.dd-feature02__notes{
		padding-left: 17.6%;
	}

	.dd-feature03__heading{
		top: 6.69%;
		left: 7%;
		width: 29%;
	}
	.dd-feature03__visual{
		top: 6.69%;
		left: 25.7%;
		width: 14.25%;
	}
	.dd-feature03__movie-placeholder{
		top: 4.13%;
		right: 17.2%;
		width: 23.8462%;
		aspect-ratio: 9 / 16;
	}
	.dd-feature03__description{
		top: 43.45%;
		left: 7%;
		width: 33.92%;
		line-height: 1.6;
	}
	.dd-feature03__spec{
		left: 8.2%;
		bottom: 6.9%;
		width: 18%;
	}
	.dd-feature03__btn{
		left: 44.5%;
		bottom: 4.13%;
		width: 11.50%;
	}
	.dd-feature03__layer--03::before{
		bottom: 4.13%;
		width: 27.32%;
		height: 12.63%;
	}
	.dd-feature03__notes{
		padding-left: 7%;
	}
}

/* Keep 1366px viewport-based details fixed beyond their original basis. */
@media screen and (min-width: 1366px){
	.dd-feature01__charge-visual{
		top: -70.97px;
	}
	.dd-feature02__footer > picture{
		width: 227px;
	}
	.dd-feature02__banner{
		top: 15px;
	}
}

/* Keep the large-screen banner stack clear of the page-top control. */
@media screen and (min-width: 1025px){
	#mvimg .mvimg-banner-warranty{
		bottom: 71px !important;
	}
	#mvimg .mvimg-banner-lineup{
		bottom: 163px !important;
	}
}

/* Keep the desktop banners 20px from the right edge. */
@media screen and (min-width: 769px){
	#mvimg .mvimg-banner{
		left: auto;
		right: 20px;
		width: 170px;
		height: 86px;
	}
}

/* Below the page-top button's hide breakpoint, keep the compact banner stack. */
@media screen and (min-width: 769px) and (max-width: 980px){
	#mvimg .mvimg-banner-warranty{
		bottom: 50px !important;
	}
	#mvimg .mvimg-banner-lineup{
		bottom: 142px !important;
	}
}

/* Above the page-top button's 980px hide breakpoint, restore the stacked gap. */
@media screen and (min-width: 981px) and (max-width: 1024px){
	#mvimg .mvimg-banner-warranty{
		bottom: 71px !important;
	}
	#mvimg .mvimg-banner-lineup{
		bottom: 163px !important;
	}
}

/* Scale the PC belt-drive note with the viewport without affecting touch layouts. */
@media screen and (hover: hover) and (pointer: fine){
	.dd-feature03__description-note{
		font-size: clamp(10px, 0.833333vw, 12px);
	}
}

/* Let the PC description reflow naturally before the 1024px layout. */
@media screen and (min-width: 769px) and (max-width: 1023px){
	.dd-feature03__description .dd-feature03__description-note{
		font-size: clamp(8px, 1.1vw, 12px);
	}
}

/* Allow feature 02 footnotes to wrap before their combined line overflows. */
@media screen and (min-width: 769px) and (max-width: 840px){
	.dd-feature02__notes{
		align-items: flex-start;
		flex-wrap: wrap;
		row-gap: 0.25em;
		white-space: normal;
	}
	.dd-feature02__notes p{
		flex: 0 1 auto;
		min-width: 0;
		white-space: normal;
	}
}

/*
 * The shared mobile menu temporarily fixes the body and offsets it by the
 * current scroll position. Keeping body as an overflow container at the same
 * time can make iOS Safari clip the page and its fixed header after scrolling.
 * Horizontal clipping is still handled by html and #wrapper in local.css.
 */
@media screen and (max-width: 768px){
	body{
		overflow-x: visible !important;
		overflow-y: visible !important;
	}
}