@font-face {
	font-family: "Roc Grotesk Bold";
	src: url("../fonts/RocGrotesk-ExtraWide-ExtraBold.otf")
		format("opentype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Roc Grotesk ExtraWide Bold";
	src: url("../fonts/RocGrotesk-ExtraWide-Bold.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Roc Grotesk Regular";
	src: url("../fonts/RocGrotesk-Regular.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Roc Grotesk";
	src: url("../fonts/RocGrotesk-Medium.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Yu Gothic B";
	src: url("../fonts/YuGothB.ttc") format("truetype");
	font-weight: normal;
	font-style: normal;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

.container, .container-narrow{
	max-width:none !important;
}

a {
	position: relative;
	z-index: 10;
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
	margin-bottom: 0;
	text-wrap: unset;
	text-transform: none;
}

/* Scroll offset for anchor links */
@media (max-width: 768px) {
	#bar-300mk2-kv,
	#bar-500mk2-kv,
	#bar-800mk2-kv,
	#bar-1000mk2-kv,
	#bar-1300mk2-kv {
		scroll-margin-top: 60px;
	}
}

.--body {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic",
		YuGothic, Meiryo, sans-serif;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #eee;
}

video {
	object-fit: cover;
}

img,
video {
	display: block;
}

h1 {
	/* H1 */
	font-family: "Yu Gothic B";
	font-size: 3vw;
	font-style: normal;
	font-weight: 505;
	line-height: 4.2vw;
	letter-spacing: 0.35714285714285715vw;
}
h2 {
	/* H2 */
	font-family: "Noto Sans JP";
	font-size: 1.8518518518518516vw;
	font-style: normal;
	font-weight: 500;
	line-height: 3.0423280423280423vw;
}
h3 {
	/* H3 */
	font-family: "Noto Sans JP";
	font-size: 1.3vw;
	font-style: normal;
	font-weight: 400;
	line-height: 2.5vw;
}
h4 {
	/* H4 */
	font-family: "Noto Sans JP";
	font-size: 1.1904761904761905vw;
	font-style: normal;
	font-weight: 400;
	line-height: 2.3vw;
}
.background {
	z-index: -1;
}
@media (max-width: 768px) {
	h1 {
		/* SP/H1 */
		font-family: "Yu Gothic B";
		font-size: 36px;
		font-style: normal;
		font-weight: 505;
		line-height: 160%; /* 57.6px */
		letter-spacing: 3.6px;
	}
	h2 {
		/* SP/H2 */
		font-family: "Yu Gothic B";
		font-size: 20px;
		font-style: normal;
		font-weight: 505;
		line-height: 32px; /* 160% */
	}
	h3 {
		/* SP/H3 */
		font-family: "Noto Sans JP";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 190%; /* 38.4px */
	}
	h4 {
		font-family: "Noto Sans JP";
		font-size: 13px;
		font-style: normal;
		font-weight: 500;
		line-height: 26px; /* 200% */
	}
}

.sp-only {
	display: none;
}

@media (max-width: 767px) {
	.sp-only {
		display: inline;
	}
}

/* Navigation */
.nav-mobile {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	background: #eee;
	transition: all 0.3s ease;
}
.nav-mobile-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
}
/* JBL Logo Container */
.jbl-logo-container {
	padding-left: 10px;
	padding-right: 30px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.jbl-logo-container img {
	height: 26px;
	width: auto;
}
/* Center Navigation */
.nav-mobile-center {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
}
.nav-mobile-current {
	color: #333;
	font-size: 14px;
	font-weight: 500;
	transition: color 0.3s ease;
}
.hamburger-menu {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.3s ease;
	flex-shrink: 0;
}
.hamburger-line {
	width: 100%;
	height: 2px;
	background: #333;
	transition: all 0.3s ease;
	transform-origin: center;
	border-radius: 1px;
}
.hamburger-menu.active .hamburger-line:nth-child(1) {
	/* transform: translateY(6px) rotate(45deg); */
	/* background: #fff; */
}
.hamburger-menu.active .hamburger-line:nth-child(2) {
	/* opacity: 0; */
}
.hamburger-menu.active .hamburger-line:nth-child(3) {
	/* transform: translateY(-6px) rotate(-45deg); */
	/* background: #fff; */
}

/* CTA Button */
.nav-mobile-cta-btn {
	font-family: "Noto Sans JP";
	height: 100%;
	background: #ff4713;
	color: #fff;
	border: none;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
	flex-shrink: 0;
	white-space: nowrap;
	color: #fff;
	font-style: normal;
	font-weight: 500;
	line-height: 26px;
}
.nav-mobile-cta-btn:hover {
	background: #e63e0f;
}
.nav-mobile-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 1002;
}
.nav-mobile-overlay.active {
	opacity: 1;
	visibility: visible;
}
.nav-mobile-menu {
	position: fixed;
	top: 30px;
	right: -100%;
	width: 85%;
	background: #fff;
	transition: top 0.3s ease;
	z-index: 1003;
	overflow-y: auto;
	box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.nav-mobile-menu.active {
	right: 0;
	top: 60px;
	width: 100%;
}
.nav-mobile-content {
	padding-left: 126.36px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.nav-mobile-header-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 30px;
	border-bottom: 1px solid #eee;
	margin-bottom: 30px;
}
.jbl-logo-menu {
	height: 40px;
	width: auto;
}
.close-menu {
	background: none;
	border: none;
	font-size: 32px;
	color: #666;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.3s ease;
}
.close-menu:hover {
	color: #000;
}
.nav-mobile-list {
	list-style: none;
	flex: 1;
	margin: 0;
	padding: 0;
}
.nav-mobile-item {
	margin-bottom: 20px;
}
.nav-mobile-link {
	display: block;
	padding: 15px 0;
	color: #333 !important;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: color 0.3s ease;
	position: relative;
	min-height: 44px; /* Better touch target */
	display: flex;
	align-items: center;
}
.nav-mobile-link:hover,
.nav-mobile-link.active {
	color: #ff4713 !important;
}
.nav-mobile-link.active::after {
	content: "";
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 20px;
	background: #ff4713 !important;
	border-radius: 2px;
}

/* Sticky behavior */
.nav-mobile.sticky {
	background: #eee;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.nav {
	position: fixed;
	left: 0;
	top: 0;
	background: #eee;
	z-index: 1000;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 6.6vw;
}
.nav-list {
	list-style: none;
	display: flex;
	flex: 4;
	flex-direction: column;
	justify-content: space-around;
	padding: 5.6878306878306875vh 0;
}
.jbl-logo {
	margin-top: 20px;
	width: 60px;
	height: 45px;
}
.nav-item {
	display: flex;
	justify-content: center;
	align-items: center;
}
.nav-link {
	color: #333 !important;
	font-family: "Noto Sans JP";
	text-decoration: none;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: clamp(16px,0.9259259259259258vw,22px);
	letter-spacing: 0.1em;
	display: block;
	padding: 0.5vh 0.3vw;
	transition: all 0.3s ease;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: nowrap;
	opacity: 0.2;
	position: relative;
	left: 0;
}
.nav-link:hover {
	opacity: 1;
}
.nav-link.active {
	opacity: 1;
}
.nav-link.active::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 80%;
	background: black;
	border-radius: 2px;
}
.nav-qa-wrapper {
	width: 100%;
	align-content: center;
	background: #ff4713;
	flex: 1;
	color: #fff;
}
.qa-link {
	color: #fff !important;
	opacity: 1;
	cursor: pointer;
}
.qa-link.active {
	left: 0;
}

@media (max-width: 768px) {
	.nav {
		display: none;
	}
	.nav-mobile {
		display: block;
	}
	.nav-link {
		font-size: min(2.2vh, 1.6vw, 15px);
	}
	.nav-link.active {
		opacity: 1;
	}
	.nav-link.active::before {
		left: -5px;
		width: 2px;
	}
	.nav-bottom > .nav-item > .nav-link.active::before {
		left: -2px;
		width: 2px;
	}

	/* Add top padding to .--body to account for fixed mobile nav */
	.--body {
		padding-top: 60px;
	}

	/* Mobile navigation improvements */
	.nav-mobile-container {
		gap: 12px;
	}

	.nav-mobile-menu {
		width: 100%;
	}

	.nav-mobile-link {
		font-size: 13px;
		padding: 12px 0;
	}

	/* Responsive adjustments */
	.jbl-logo-container img {
		height: 26px;
	}

	.nav-mobile-cta-btn {
		padding: 8px 12px;
		font-size: 13px;
	}

	.nav-mobile-current {
		font-size: 13px;
	}

	/* Improve touch targets */
	.close-menu {
		min-height: 44px;
		min-width: 44px;
	}
}

/* Content */
.content {
	flex: 1;
	margin-left: 6.6vw;
	min-width: 0;
}

.section {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 768px) {
	.content {
		margin-left: 0;
	}
}

.top-video-wrapper {
	display: flex;
	height: 100vh;
}

/* Top */
.top-content {
	width: calc(100vw - 6.6vw);
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	color: white;
	text-align: center;
	align-items: center;
	align-self: center;
	padding: 0 50px;
}
.top-content h1 {
	color: #fff;
	text-align: center;
	padding-bottom: 3.968253968253968vw;
}
.top-content h2 {
	color: #fff;
	font-family: "Roc Grotesk Regular";
	font-size: 10.582010582010582vw;
	font-style: normal;
	font-weight: 750;
	line-height: 10.582010582010582vw;
	letter-spacing: 0.6349206349206349vw;
	padding-bottom: 8.796296296296296vw;
}
.top-jbl-logo {
	margin-top: 80px;
	width: 120px;
	display: none;
}
@media (max-width: 768px) {
	.top-jbl-logo {
		display: block;
	}
}
.top-subtitle {
	width: 50.727513227513235vw;
	padding-bottom: 3.968253968253968vw;
}
.top-soundbars {
	width: 100%;
	padding-bottom: 8.796296296296296vw;
}
.top-soundbars img {
	width: 100%;
}
.top-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: 0;
}
.hero-content {
	margin-top: 90px;
	margin-right: 30px;
	margin-left: 30px;
	margin-bottom: 105px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
}
.hero-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.hero-image {
	/* width: 100%; */
	height: auto;
	display: block;
	object-fit: cover;
}
.hero-card span {
	color: #333;
	font-family: Roc Grotesk;
	font-weight: 700;
	font-size: 1.3227513227513228vw;
	line-height: 40px;
	text-align: center;
	padding: 10px 0;
}
.hero-link {
	width: 24px;
	height: 20px;
}
.mobile-break {
	display: none;
}

@media (max-width: 768px) {
	.mobile-break {
		display: inline;
	}

	.hero-content {
		margin: 60px 20px;
		grid-template-columns: repeat(2, 1fr);
	}
	.hero-card:first-child {
		grid-column: 1 / -1;
	}
	.hero-image:first-child {
		height: 100%;
	}
	.hero-card span {
		font-size: 3.4666666666666663vw;
	}
	.top-content {
		width: 100%;
		padding: 0 20px;
	}
	.top-content h1 {
		font-size: 24px;
		font-style: normal;
		font-weight: 505;
		line-height: 160%;
		letter-spacing: 1.68px;
		padding-bottom: 8vw;
	}
	.top-content h2 {
		font-size: 14.933333333333335vw;
		line-height: 1;
		padding-bottom: 29.333333333333332vw;
	}
	.top-content h3 {
		font-size: 14px;
		line-height: 1;
		padding-bottom: 50px;
	}
	.top-subtitle {
		width: 88.8vw;
		padding-bottom: 8vw;
	}
}

/* Questionnaire */
.qa-wrapper {
	display: flex;
	justify-content: center;
	padding: 0 3.3068783068783065vw;
	margin-bottom: 106px;
}
.qa-wrapper.qa-bottom {
	margin-bottom: 120px;
}
.qa-content {
	color: #ff4713;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 70vw;
	gap: 1.984126984126984vw;
}
.qa-modal-link {
	width: 30vw;
	cursor: pointer;
}
@media (max-width: 768px) {
	.qa-content h2 {
		/* H2 =>/H3 */
		font-family: "Noto Sans JP";
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: 240%;
	}
	.qa-wrapper {
		padding: 0 20px;
		margin-bottom: 86px;
	}
	.qa-wrapper.qa-bottom {
		margin-bottom: 54px;
	}
	.qa-content {
		flex-direction: column;
		text-align: center;
		width: 100%;
		gap: 2.666666666666667vw;
		padding: 6.133333333333333vw;
	}
	.qa-content h1 {
		font-size: 28px;
		font-style: normal;
		font-weight: 700;
		line-height: 160%;
		letter-spacing: 2.8px;
	}
	.qa-modal-link {
		width: 100%;
	}
}

/* Concept section */
.concept-video,
.concept-middle-wrapper,
.concept-video-wrapper,
.concept-bottom-wrapper,
.detachable-wrapper,
.detachable-wrapper .concept-content,
.why-jbl-wrapper {
	height: 100vh;
}

.why-jbl-wrapper {
	margin-bottom: 43px;
}

.concept-video-wrapper .concept-middle-wrapper {
	position: relative;
}
.concept-video-wrapper {
	display: flex;
}
.concept-content {
	width: calc(100vw - 6.6vw);
	position: absolute;
	height: 100%;
	color: #fff;
	z-index: 1;
}
.concept-content .concept-text {
	width: 100%;
	height: 100vh;
	align-content: center;
	padding: 0 50px;
}
.concept-content picture {
	position: absolute;
	bottom: 30px;
	right: 50px;
}
.concept-content img {
	/* width: 100%;
	height: 100%;
	object-fit: cover; */
	/* display: unset; */
	/* width: 51.71957671957672vw;
	justify-self: right; */
}
.concept-content h1 {
	padding-bottom: 40px;
}

.concept-middle-wrapper .concept-content {
	padding-left: 0;
}
.concept-middle-wrapper .concept-content picture {
	position: absolute;
	bottom: 42px;
	left: 50px;
	width: 62.07698412698412vw;
	height: unset;
}
.concept-middle-wrapper .concept-content h1,
.concept-middle-wrapper .concept-content h3 {
	padding-left: 47.22222222222222vw;
}

.detachable-wrapper .concept-content h3 {
	max-width: 46.75925925925926vw;
}
.detachable-wrapper .concept-content picture {
	position: absolute;
	width: 74.07407407407408vw;
	bottom: 44px;
	right: 48px;
	height: unset;
}

.concept-bottom-wrapper .concept-content picture {
	position: absolute;
	right: 50px;
	bottom: 72px;
	width: 54.232804232804234vw;
	height: unset;
}
.concept-bottom-wrapper .image-group {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	height: 100%;
}
.concept-bottom-wrapper .concept-content h3 {
	max-width: 44.576719576719576vw;
}

.why-jbl-wrapper .concept-content {
	align-content: center;
	padding: 0 50px;
}
.why-jbl-wrapper .concept-content img {
	width: 72.42063492063492vw;
	height: unset;
	justify-self: left;
	padding-bottom: 88px;
}
.why-jbl-wrapper .concept-content h1 {
	padding-bottom: 30px;
}
.why-jbl-wrapper .concept-content h3 {
	max-width: 66.20370370370371vw;
}
.why-jbl-wrapper .image-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100%;
}

.concept-video-wrapper .concept-video,
.concept-middle-wrapper img,
.concept-bottom-wrapper img,
.detachable-wrapper img,
.why-jbl-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.concept-video-wrapper {
	background: black;
}
.why-jbl-bg {
	width: 100%;
	height: 982px;
}

/* Intro section */
.p-intro .intro {
	height: 100vh;
	position: relative;
}
.p-intro .intro video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-intro .intro_hgroup {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	align-content: center;
	justify-items: center;
	width: 100%;
	height: auto;
	background: rgb(0 0 0 / 20%);
	opacity: 0;
	transition: opacity 1s;
}
.p-intro .intro_hgroup.is-intro-action {
	opacity: 1;
}
.p-intro .intro_hgroup picture {
	width: 74.33862433862434vw;
}
.p-intro .intro_hgroup img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-intro .intro_hgroup_txt {
	font-size: 1.8rem;
	line-height: 2;
	font-weight: 500;
	text-align: center;
	margin-top: 3.8541666667vw;
}
.intro_hgroup h3 {
	max-width: 45.83333333333333vw;
}

@media screen and (max-width: 767px) {
	.p-intro .intro_hgroup_txt {
		font-size: 2.6rem;
		line-height: 1.8461538462;
		text-align: left;
		margin: 11.1rem auto 0;
		width: 67rem;
	}
	.p-intro .intro_hgroup h3 {
		max-width: unset;
	}
}

@media (max-width: 768px) {
	.concept-video,
	.concept-middle-wrapper,
	.concept-video-wrapper,
	.concept-bottom-wrapper,
	.concept-bottom-wrapper .image-group,
	.why-jbl-wrapper {
	}
	.concept-middle-wrapper .concept-content picture {
		width: unset;
		height: 80vh;
		top: 30px;
		right: 20px;
		left: unset;
	}
	.why-jbl-wrapper {
		margin-bottom: 0px;
	}
	.concept-video:first-child {
		display: none;
	}
	.why-jbl-wrapper .concept-content,
	.concept-bottom-wrapper .concept-content,
	.concept-middle-wrapper .concept-content,
	.concept-content {
		position: absolute;
		width: 100%;
		color: #fff;
		padding: 0;
	}
	.why-jbl-wrapper .concept-content {
		padding: 0 20px;
	}
	.concept-content .concept-text {
		padding: 0 20px;
	}
	.why-jbl-wrapper .concept-content h1,
	.concept-bottom-wrapper .concept-content h1,
	.concept-middle-wrapper .concept-content h1,
	.concept-content h1 {
		padding-right: 0;
		padding-left: 0;
		color: #fff;
	}
	.concept-bottom-wrapper .concept-content h3 {
		max-width: unset;
	}
	.why-jbl-wrapper .concept-content h3,
	.concept-bottom-wrapper .concept-content h3,
	.concept-middle-wrapper .concept-content h3,
	.concept-content h2 {
		padding-left: 0;
	}
	.why-jbl-wrapper .concept-content h3 {
		max-width: unset;
	}
	.concept-video-wrapper .concept-content img {
		object-fit: unset;
		object-position: unset;
		position: absolute;
		transform: translateY(-50%) rotate(90deg);
		transform-origin: top right;
		top: 500px;
		width: 459px;
	}
	.detachable-wrapper .concept-content picture {
		width: unset;
		height: 90vh;
		position: absolute;
		top: 50px;
		right: 20px;
		height: unset;
	}
	.detachable-wrapper .concept-content h3 {
		max-width: unset;
	}
	.detachable-wrapper .concept-content img {
		position: relative;
		width: unset;
	}
	.concept-bottom-wrapper .image-group {
		grid-template-columns: 1fr;
	}

	.concept-bottom-wrapper .concept-content picture {
		position: absolute;
		width: unset;
		height: 65vh;
		top: 30px;
		right: 20px;
	}
	.p-intro .concept-content picture {
		width: unset;
		position: absolute;
		top: 100px;
		right: 20px;
	}
	.p-intro .concept-content img,
	.concept-bottom-wrapper .concept-content img {
		width: unset;
		position: relative;
	}
	.why-jbl-wrapper .concept-content img {
		width: 100%;
		padding-bottom: 34px;
	}
	.why-jbl-wrapper .image-group {
		grid-template-columns: 1fr;
	}
	.concept-middle-wrapper img {
		object-position: 20%;
	}
}

/* Lineup */

/* .sec-lineup, */
.lineup-video-wrapper video {
	height: 91.65vh;
}

.lineup-video-wrapper {
	position: relative;
}

.lineup-video-wrapper video {
	width: 100%;
	object-fit: cover;
}

.lineup-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
	position: absolute;
	top: 61.303vh;
	left: 50px;
	color: #fff;
	z-index: 1;
}

.lineup-content img:first-child {
	width: 47.08994708994709vw;
}
.lineup-content img:last-child {
	width: 41.2037037037037vw;
}

.lineup-video-group {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
}

.lineup-video:nth-child(2) {
	width: 59.523809523809526vw;
	object-position: center;
}
.lineup-video:first-child {
	flex: 1;
	object-position: right center;
	opacity: 0.8;
}
.lineup-video:last-child {
	flex: 1;
	object-position: left center;
	opacity: 0.8;
}

.lineup-products {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin: 119px 0 0;
	overflow: hidden;
}

.lineup-product {
	position: relative;
}

.lineup-product img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lineup-product-content {
	position: absolute;
	color: #fff;
	padding-left: 35px;
}

.lineup-product-content img {
	width: 23.677248677248677vw;
	margin-left: -30px;
}

.features {
	color: #fff;
	font-family: Roc Grotesk Regular;
	font-size: 1.0582010582010581vw;
	font-style: normal;
	font-weight: 400;
	line-height: 2.513227513227513vw;
	display: inline-block;
}
.features .highlight {
	color: #ff4713;
}
.detachable-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.teaser-kv-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.teaser-banner {
	position: absolute;
	top: 10.185185185185185vw;
	left: 50px;
	height: 6.613756613756613vw;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.teaser-banner-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.teaser-main-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100%;
	padding: 4.034391534391534vw 0;
}

.teaser-left-section {
	padding: 0 70px 0 50px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.teaser-text-content {
	color: #333;
	margin-top: 15vw;
	font-family: "Noto Sans JP";
	font-size: 1.4vw;
	font-style: normal;
	font-weight: 500;
	line-height: 2.7vw;
}

.teaser-product-shot {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.6455026455026456vw;
}

.teaser-product-image {
	width: 85%;
	height: auto;
	object-fit: cover;
}

#bar-1000mk2-kv .teaser-product-image {
	/*width: 23.743386243386244vw;*/
}
#bar-800mk2-kv .teaser-product-image {
	/*aspect-ratio: 373/242;*/
}
.teaser-right-section {
	position: relative;
	overflow: hidden;
}

.teaser-lifestyle-scene {
	width: 100%;
	height: 100%;
}

.teaser-lifestyle-scene img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.teaser-lifestyle-video {
	width: 100%;
	aspect-ratio: 1/1.12;
	object-fit: cover;
	object-position: center;
}

.imax-wrapper {
	margin-bottom: 70px;
}
.imax-content {
	position: absolute;
	color: #eee;
	padding-top: 19.17989417989418vw;
	padding-left: 3.3068783068783065vw;
}
.imax-content h1 {
	padding-bottom: 2.6455026455026456vw;
}
.imax-content h2 {
	padding-bottom: 1.3227513227513228vw;
}
.imax-bg-wrapper img {
	width: 100%;
}

.users-voice-wrapper {
	display: flex;
	background: #f6871f;
	margin-bottom: 120px;
	padding: 106px 50px 160px;
}
.users-voice-content {
	display: flex;
	flex-direction: column;
	gap: 103px;
}
.users-voice-movie-wrapper {
	display: flex;
	gap: 8.531746031746032vw;
}
.users-voice-movie {
	width: 46vw !important;
	height: auto !important;
	aspect-ratio: 787/431;
	border: none;
}
.users-voice-movie-pc {
	display: block;
}
.users-voice-movie-sp {
	display: none;
}
.users-voice-text {
	color: #333;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.users-voice-text h1 {
	font-family: Roc Grotesk ExtraWide Bold;
	font-size: 3.571428571428571vw;
	font-weight: 700;
	padding-bottom: 40px;
}
.users-voice-text h2 {
	padding-bottom: 20px;
}
.jbl-link.users-voice-link {
	color: #333 !important;
	background: unset;
}

.jbl-link.users-voice-link img {
	width: 0.992063492063492vw;
	height: 0.992063492063492vw;
}

@media screen and (max-width: 767px) {
	.jbl-link.users-voice-link img {
		width: 12px;
		height: 12px;
	}
}

.users-voice-link-wrapper {
	margin-top: 10px;
	border: 1px solid #333;
}

.shop-now-wrapper {
	display: flex;
	margin-bottom: 60px;
	padding: 0 50px;
}
.shop-now-content {
	width: 100%;
	color: #fff;
	background: #333;
	padding: 54px 60px 67px;
}
.shop-now-text {
	display: flex;
	gap: 48px;
	margin-bottom: 15px;
}
.shop-now-text h1 {
	font-family: Roc Grotesk ExtraWide Bold;
	font-size: 3.571428571428571vw;
	font-style: normal;
	font-weight: 700;
	line-height: 4.497354497354497vw;
}
.shop-now-text h2 {
	font-family: Roc Grotesk;
	align-content: flex-end;
	font-size: 2.1164021164021163vw;
	font-style: normal;
	font-weight: 700;
	line-height: 2.1164021164021163vw;
}
.divider {
	height: 1px;
	background: #fff;
	margin-bottom: 40px;
}
.shop-now-product {
	display: flex;
	gap: 2.1164021164021163vw;
	height: 14.880952380952381vw;
}
.shop-now-product-image {
	background: #eee;
	width: 33.06878306878307vw;
	/*	padding: 10px 50px;*/
}
.shop-now-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shop-now-links {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: auto;
}
.shop-now-link {
	color: #fff !important;
	border: 1px solid #ff4713;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	width: 21.296296296296298vw;
	padding: 0 30px;
}
.shop-now-link:first-child {
	grid-column: 1 / -1;
	width: 100%;
	aspect-ratio: unset;
	background: #ff4713;
	border: none;
}
.shop-now-link img {
	position: absolute;
	right: 30px;
	width: 15px;
	height: 15px;
}
.shop-now-text h4 {
	text-wrap: nowrap;
}

.product-teaser-wrapper {
	padding: 0 50px;
	margin-bottom: 100px;
}
.product-teaser-content {
	padding: 6.481481481481481vw 5.423280423280423vw;
	background: #8f7b6a;
	color: #fff;
	display: flex;
	gap: 56px;
}
.product-teaser-text {
	display: flex;
	flex-direction: column;
}
.product-teaser-text h2 {
	margin-bottom: 1.5873015873015872vw;
}
.product-teaser-text img {
	width: 42.26190476190476vw;
	margin-bottom: 3.3068783068783065vw;
}
.product-teaser-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	aspect-ratio: 415/322;
}

.check-now-wrapper {
	padding: 0 50px;
	margin-bottom: 4.034391534391534vw;
}
.check-now-wrapper.bar500 {
	margin-bottom: 105px;
}
.check-now-content {
	padding: 70px;
	background: #333;
	color: #fff;
}
.check-now-content h1 {
	font-family: Roc Grotesk ExtraWide Bold;
	font-size: 3.571428571428571vw;
	font-weight: 700;
	line-height: 4.497354497354497vw;
	margin-bottom: 2.2486772486772484vw;
}
.check-now-content h2 {
	font-family: Roc Grotesk;
	font-size: 2.380952380952381vw;
	font-weight: 700;
	line-height: 2.1164021164021163vw;
	margin-bottom: 0.7936507936507936vw;
	color: #fff;
}
.check-now-products {
	display: flex;
	gap: 2.7116402116402116vw;
}
.check-now-product {
	width: 50%;
	display: flex;
	flex-direction: column;
}
.check-now-product-image {
	width: 100%;
	height: 250px;
	object-fit: cover;
	background: #eee;
	margin-top: 1.7857142857142856vw;
	margin-bottom: 2.7116402116402116vw;
}
.check-now-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.jbl-link {
	color: #fff !important;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	padding: 0 30px;
	background: #ff4713;
	height: 48px;
}
.jbl-link img {
	position: absolute;
	right: 30px;
	width: 15px;
	height: 15px;
}

#bar-300mk2-kv .teaser-lifestyle-video,
#bar-500mk2-kv .teaser-lifestyle-video {
	aspect-ratio: unset;
}
#bar-500mk2-kv .teaser-text-content {
	margin-top: 15vw;
}
#bar-300mk2-kv .teaser-left-section {
	order: 2;
}
#bar-300mk2-kv .teaser-banner {
	right: 50px;
	left: unset;
}
#bar-300mk2-kv .teaser-main-content {
	margin-bottom: 30px;
}

#bar-500mk2-kv .teaser-main-content {
	margin-bottom: 30px;
}

.sw-main-wrapper {
	position: relative;
}
.sw-main-wrapper .sw-wrapper {
	margin-left: 560px;
}
.sw-side-wrapper {
	position: absolute;
	top: 0;
	left: 50px;
	width: 422.21px;
}
.sw-side-content {
	display: flex;
	flex-direction: column;
}
.sw-side-content-title {
	margin-bottom: 3.968253968253968vw;
}
.sw-side-content-product {
	width: 365px;
}

/* SB content */

.sb-wrapper {
	background: #bfbfbf;
	margin-bottom: 90px;
}
.sb-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6.547619047619048vw;
	padding-left: 50px;
	padding-top: 101px;
	padding-bottom: 99px;
}
.sb-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1.917989417989418vw;
}
.sb-title-image {
	width: 47.42063492063492vw;
}
.sb-subtitle-image {
	width: 21.494708994708994vw;
}
.sb-bottom-wrapper {
	display: flex;
	gap: 3.6375661375661372vw;
}
.sb-text-content {
	color: #333;
}
.sb-subtitle {
	margin-bottom: 2.6455026455026456vw;
}

.sb-image-content {
	width: 52.910052910052904vw;
	object-fit: cover;
	aspect-ratio: 800/346;
}
.sb-image-content-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.sb-wrapper {
		margin-bottom: 37px;
	}
	.sb-content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 10vw;
		padding: 80px 20px;
	}
	.sb-title {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 3.2vw;
	}
	.sb-title-image {
		width: 100%;
	}
	.sb-subtitle-image {
		width: 40.53333333333333vw;
	}
	.sb-bottom-wrapper {
		display: flex;
		flex-direction: column;
		gap: 10.666666666666668vw;
	}
	.sb-subtitle {
		margin-bottom: 5.333333333333334vw;
	}
	.sb-image-content {
		width: 100%;
	}
}

/* Compare content */
.compare{
	margin:0;
}
.compare-wrapper {
	margin-bottom: 12vw;
	position: relative;
	width: 100%;
	padding: 0 20px;
}
.compare-title {
	color: #ff4713;
	font-family: Roc Grotesk;
	font-size: 3.571428571428571vw;
	font-style: normal;
	font-weight: 700;
	line-height: 64.497354497354497vw8;
}
.compare-content {
	overflow-x: scroll;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	cursor: -webkit-grab;
	cursor: -moz-grab;
}

.compare-content:active {
	cursor: grabbing;
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
}

/* Remove grab cursor on PC (desktop) */
@media (min-width: 769px) {
	.compare-content {
		cursor: default;
	}
	.compare-content:active {
		cursor: default;
	}
}
.compare-content img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.compare-table {
	display: grid;
	grid-auto-flow: column;
	gap: 50px;
}
.compare-product {
	color: #333;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.compare-product-image {
	width: 250px;
	object-fit: cover;
}
.compare-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.compare-product h4 {
	align-self: self-end;
}
.arrows-wrapper {
	display: grid;
	grid-auto-flow: column;
	gap: 17px;
}
.compare-product-title {
	color: #333;
	font-family: "Roc Grotesk Regular";
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 40px;
}
.compare-arrow-text {
	color: #333;
	text-align: center;
	font-family: "Noto Sans JP";
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 32px;
}
.compare-title {
	color: #ff4713;
	font-family: "Roc Grotesk Bold";
	font-size: 54px;
	font-style: normal;
	font-weight: 700;
	line-height: 68px;
	margin-bottom: 40px;
}
.custom-scrollbar.compare {
	bottom: -7.87037037037037vw;
}
@media (max-width: 768px) {
	.compare-content img {
		width: 270%;
		max-width: none;
	}
	.compare-title {
		font-size: 8vw;
		font-style: normal;
		font-weight: 700;
		line-height: 10.698133vw;
	}
	.compare-product-title {
		font-size: 13.513px;
		font-style: normal;
		font-weight: 700;
		line-height: 22.522px;
	}
	.compare-arrow-text {
		font-family: "Noto Sans JP";
		font-size: 13px;
		font-style: normal;
		font-weight: 500;
		line-height: 26px;
	}
	.compare-product-image {
		width: 142px;
		object-fit: cover;
	}
	.custom-scrollbar.compare {
		bottom: -14.293333vw;
		margin: 5.2%;
		max-width: 88%;
		display: block !important;
	}
}

@media (max-width: 768px) {
	.lineup-video-group {
		grid-template-columns: 1fr;
	}

	.lineup-video:first-child,
	.lineup-video:last-child {
		display: none;
	}

	.lineup-video:nth-child(2) {
		width: 100%;
		grid-column: 1 / -1;
	}
	.lineup-products {
		grid-template-columns: 1fr;
		margin-top: 0px;
	}

	.teaser-kv-wrapper {
		padding: 60px 0;
	}

	.teaser-banner {
		position: relative;
		left: 0;
		top: 0;
		width: 93%;
		height: auto;
		margin-bottom: 20px;
	}

	.teaser-banner-image {
		height: 100%;
		object-fit: contain;
	}

	.teaser-main-content {
		grid-template-columns: 1fr;
		padding: 0;
	}

	.teaser-text-content {
		font-size: 3.4666666666666663vw;
		font-style: normal;
		font-weight: 500;
		line-height: 26px;
		margin: 0;
		margin-bottom: 6px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.teaser-left-section {
		padding: 0;
	}

	.teaser-product-shot {
		padding: 0;
		margin: 0;
		margin-bottom: 40px;
	}
	.teaser-product-image {
		width: 80%;
	}
	#bar-1000mk2-kv .teaser-product-image {
		width: 70%;
	}
	.lineup-content {
		gap: 20px;
		left: 0;
	}

	.lineup-content {
		width: 100%;
		padding: 0 20px;
	}
	.lineup-content img:first-child {
		width: 100%;
		height: auto;
	}
	.lineup-content img:last-child {
		width: 100%;
		height: auto;
	}
	.lineup-product-content {
		padding-left: 35px;
	}
	.lineup-product-content img {
		width: 68vw;
		margin-left: -30px;
	}
	.features {
		font-size: 1.6773333333333333vw;
		font-style: normal;
		line-height: 3.2vw;
	}

	.imax-wrapper {
		margin-bottom: 60px;
	}
	.imax-content {
		padding-top: 35.733333333333334vw;
		padding-left: 5.333333333333334vw;
		padding-right: 5.333333333333334vw;
	}
	.imax-content h1 {
		padding-bottom: 10.666666666666668vw;
	}
	.imax-content h2 {
		padding-bottom: 5.333333333333334vw;
	}

	.users-voice-wrapper {
		margin-bottom: 0;
		padding: 119px 20px 129px;
	}
	.users-voice-movie-wrapper {
		flex-direction: column-reverse;
		gap: 40px;
	}
	.users-voice-title {
		aspect-ratio: 1/1;
	}
	.users-voice-movie {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 374/664;
	}
	.users-voice-movie-pc {
		display: none;
	}
	.users-voice-movie-sp {
		display: block;
	}
	.users-voice-content {
		gap: 41px;
	}
	.users-voice-text {
		gap: 0;
	}
	.users-voice-text h1 {
		font-size: 9.6vw;
		padding-bottom: 20px;
	}
	.users-voice-text h2 {
		padding-bottom: 8px;
	}

	.shop-now-wrapper {
		margin: 0;
		padding: 0;
	}
	.shop-now-content {
		padding: 60px 20px;
	}
	.shop-now-text {
		flex-direction: column;
		gap: 8px;
	}
	.shop-now-text h1 {
		font-style: normal;
		font-weight: 700;
		font-size: 32px;
		line-height: 51.2px;
	}
	.shop-now-text h2 {
		font-size: 18px;
		font-style: normal;
		font-weight: 700;
		line-height: 32px;
	}
	.shop-now-product {
		flex-direction: column;
		height: auto;
	}
	.shop-now-product-image {
		width: 100%;
		padding: 17px 10px;
	}
	.shop-now-link {
		width: 100%;
		height: auto;
		padding: 10px;
	}
	.shop-now-link img {
		right: 16px;
		width: 12px;
		height: 12px;
	}

	.detachable-wrapper h3 {
		/* SP/H4 */
		font-family: "Noto Sans JP";
		font-size: 13px;
		font-style: normal;
		font-weight: 500;
		line-height: 26px; /* 200% */
	}

	.product-teaser-wrapper {
		padding: 0;
		margin-bottom: 60px;
	}

	.product-teaser-content {
		padding: 46px 20px;
		background: #8f7b6a;
		color: #fff;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.product-teaser-text {
		gap: 3.2vw;
		flex-direction: column;
	}
	.product-teaser-text h2 {
		margin-bottom: 0;
	}

	.product-teaser-text img {
		width: 81.33333333333333vw;
		margin-bottom: 12px;
	}
	.product-teaser-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
		aspect-ratio: 415/322;
	}

	.check-now-wrapper {
		padding: 0;
		margin-bottom: 80px;
	}
	.check-now-content {
		padding: 60px 20px;
	}
	.check-now-content h1 {
		font-size: 31px;
		font-weight: 700;
		line-height: 49.6px;
		margin-bottom: 8px;
	}
	.check-now-content h2 {
		font-size: 18px;
		font-weight: 700;
		line-height: 32px;
		margin-bottom: 8px;
	}
	.check-now-products {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.check-now-product .divider {
		margin-bottom: 16px;
	}
	.check-now-product {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.check-now-product-image {
		width: 100%;
		height: 250px;
		object-fit: cover;
		background: #eee;
		margin-bottom: 16px;
	}
	.check-now-product-image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.jbl-link {
		color: #fff !important;
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		text-decoration: none;
		padding: 0 30px;
		background: #ff4713;
		height: 64px;
	}
	.jbl-link img {
		position: absolute;
		right: 30px;
		width: 15px;
		height: 15px;
	}
	#bar-300mk2-kv .teaser-text-content,
	#bar-500mk2-kv .teaser-text-content {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	#bar-300mk2-kv .teaser-left-section {
		order: unset;
	}
	#bar-300mk2-kv .teaser-banner {
		left: 0;
	}
	.sw-side-wrapper {
		width: 100%;
		padding: 0 20px;
		position: relative;
		top: unset;
		left: unset;
	}
	.sw-side-content {
		justify-content: space-between;
		margin-bottom: 40px;
		align-items: center;
	}
	.sw-side-content-title {
		margin-bottom: 0;
	}
	.sw-side-content-product {
		width: 80%;
	}
	.sw-side-content picture {
		align-self: start;
	}
	.sw-main-wrapper .sw-wrapper {
		margin-left: 0;
		padding-left: 20px;
	}
}

/* SPECS SECTION*/

#sec-specs {
	background: #333;
	padding: 150px 52px 253px 52px;
}
#sec-specs h1 {
	color: #ff4713;
	font-family: "Roc Grotesk Bold";
	font-size: 3.571428571428571vw;
	font-style: normal;
	font-weight: 700;
	line-height: 4.497354497354497vw;
	margin-bottom: 2.6455026455026456vw;
}
.comparison-table {
	width: 100%;
	color: #fff;
	text-align: center;
	font-family: "Noto Sans JP";
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 32px;
	border-collapse: collapse;
	white-space: nowrap;
	overflow: hidden;
}
.comparison-table,
.comparison-table th,
.comparison-table td {
	border: 1px solid #fff;
	padding: 20px 20px;
}
.comparison-table th {
	font-weight: 600;
}

/* Custom scrollbar */

.table-container {
	position: relative;
	margin-bottom: 43px;
}
.table-scroll {
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	cursor: grab;
	cursor: -webkit-grab;
	cursor: -moz-grab;
}

.table-scroll:active {
	cursor: grabbing;
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
}
.table-scroll::-webkit-scrollbar {
	display: none;
}
/* and hide the native indicator by using overflow:hidden instead */
@media (pointer: coarse), (max-width: 1024px) {
	.table-scroll {
		overflow: hidden; /* prevents native scroll indicator */
		touch-action: pan-y; /* allow vertical page scroll; we'll handle horizontal */
	}
}
.custom-scrollbar {
	width: 100%;
	height: 10px; /* Increased height for better interaction */
	background: #bfbfbf;
	border-radius: 3px;
	cursor: pointer;
	position: absolute;
	bottom: -43px; /* exactly 43px below table */
	left: 0;
	z-index: 10; /* Ensure it's above other elements */
}
.custom-thumb {
	height: 100%;
	background: #ff4713;
	width: 100px; /* initial width, JS updates dynamically */
	border-radius: 3px;
	position: relative;
	cursor: grab;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	pointer-events: auto; /* Ensure it's interactive */
}

.custom-thumb:active {
	cursor: grabbing;
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
}

@media (max-width: 768px) {
	#sec-specs {
		padding: 73px 0 253px 20px;
	}
	#sec-specs h1 {
		font-size: 8vw;
		font-style: normal;
		font-weight: 700;
		line-height: 10.698133vw;
	}
	.comparison-table {
		font-size: 13px;
		font-style: normal;
		font-weight: 500;
		line-height: 26px;
	}
}

/* Swiper */
.sw-wrapper {
	margin-left: 50px;
	margin-bottom: 109px;
}
.swiper-container {
	overflow: hidden;
	width: 100%;
	margin-bottom: 40px;
	user-select: none;
}
.swiper-wrapper {
	display: flex;
	transition: transform 0.4s ease;
}
.swiper-slide {
	display: flex;
	flex-direction: column;
}
.slide-image {
	width: 500px;
	aspect-ratio: 1/0.7;
	object-fit: cover;
}
.slide-content {
	color: #333;
	padding-top: 40px;
}
.slide-title {
	margin-bottom: 20px;
}
.swiper-btn-container {
	display: flex;
	gap: 20px;
}
.swiper-button {
	width: 5.357142857142857vw;
	aspect-ratio: 1/1;
	cursor: pointer;
}
.swiper-button-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
@media (max-width: 768px) {
	.slide-image {
		width: 300px;
	}
	.swiper-button {
		width: 11.200000000000001vw;
	}
	.sw-wrapper {
		margin-left: 20px;
		margin-bottom: 60px;
	}
}

/* Modal */
.--modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}
.--modal {
	background: #333;
	border-radius: 5px;
	padding: 40px;
	width: 90%;
	max-width: 60vw;
	min-height: 500px;
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
}
.close-btn {
	position: absolute;
	top: 20px;
	left: 20px;
	background: none;
	border: none;
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1001;
	touch-action: manipulation;
	transition: all 0.2s ease;
}
.close-btn img {
	width: 30px;
	height: 30px;
}
.close-btn:hover {
	color: #ff4713;
	transform: scale(1.1);
}
.close-btn:active {
	transform: scale(0.95);
}
.--modal-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	padding-bottom: 20px;
}
.--modal h1 {
	color: #fff;
	margin-bottom: 40px;
}
.--modal h2 {
	color: #fff;
	text-align: center;
	font-family: "Roc Grotesk";
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 40px;
	margin-bottom: 40px;
	margin-top: 30px;
}
.--modal h3 {
	color: #ff4713;
	margin-bottom: 31px;
}
.--modal h4 {
	color: #fff;
}
.product-image-container {
	height: 30vh;
	background: #eeeeee;
}
.product-image {
	width: 100%;
	height: 100%;
	aspect-ratio: 142/75;
	object-fit: contain;
}
.--modal .jbl-link {
	margin-bottom: 20px;
}
.answers {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	margin-bottom: 30px;
}
.answers button {
	background: #2a2a2a;
	border: 1px solid #fff;
	color: #fff;
	padding: 15px 20px;
	cursor: pointer;
	text-transform: uppercase;
	flex: 1;
	transition: all 0.3s ease;
	/* H3 */
	font-family: "Noto Sans JP";
	font-size: 1.3vw;
	font-style: normal;
	font-weight: 400;
	line-height: 2.5vw;
}
.answers button h3 {
	margin: 0;
}
.answers button:hover {
	background: #fff;
	color: #2a2a2a;
}
.back-button-container {
	position: absolute;
	bottom: 0;
	min-height: 20px;
}
.preview-link {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
}
.preview-link:hover {
	color: #ff0000 !important;
}
.back-button-placeholder {
	height: 20px;
	width: 1px;
}
.product-link {
	display: inline-block;
	background: #ff0000;
	color: #fff !important;
	padding: 15px 30px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: bold;
	margin: 20px 0;
	transition: background 0.3s ease;
}
.product-link:hover {
	background: #cc0000;
}

@media (max-width: 768px) {
	.--modal {
		padding: 40px 20px;
		width: 95%;
		max-width: none;
		min-height: 450px;
	}
	.--modal h1 {
		font-size: 2rem;
		margin-bottom: 20px;
	}
	.--modal h2 {
		font-size: 1.3rem;
		margin-bottom: 15px;
	}
	.--modal h3 {
		font-size: 1rem;
		margin-bottom: 30px;
	}
	.answers {
		gap: 15px;
	}
	.answers button {
		padding: 12px 15px;
		flex: 1;
		font-family: "Noto Sans JP";
		font-size: 13px;
		font-style: normal;
		font-weight: 500;
		line-height: 26px;
	}
	.close-btn {
		top: 0;
		left: 0;
		font-size: 20px;
		width: 44px;
		height: 44px;
	}
	.close-btn img {
		width: 20px;
		height: 20px;
	}
	.preview-link {
		bottom: 15px;
		left: 15px;
		font-size: 0.8rem;
	}
	.product-image-container {
		height: 20vh;
	}
}

/* -----------------
footer
-------------------- */
.l-footer {
	padding-block: 0 15rem;
	background: #333;
	margin-left: 6.6vw; /* Match the content margin */
	width: calc(100% - 6.6vw); /* Adjust width to account for margin */
}
@media screen and (max-width: 767px) {
	.l-footer {
		margin-left: 0; /* Remove left margin on mobile */
		width: 100%; /* Full width on mobile */
	}
}
.l-footer .logo {
	/* margin: 9rem auto 0; */
	margin: 5.952380952380952vw auto 0;
	width: 8.796296296296296vw;
	/* width: 13.3rem; */
}

.l-footer .list_item._x {
	width: 3.7698412698412698vw;
}
.l-footer .list_item._youtube {
	width: 11.507936507936508vw;
}
.l-footer .list_item._instagram {
	width: 3.968253968253968vw;
}
.l-footer .list_link {
	display: block;
}

@media screen and (max-width: 767px) {
	.l-footer .logo {
		margin-top: 13.333333333333334vw;
		width: 17.733333333333334vw;
	}
	.l-footer .list_item._x {
		width: 28.5px;
	}
	.l-footer .list_item._youtube {
		width: 87px;
	}
	.l-footer .list_item._instagram {
		width: 30px;
	}
}
.l-footer .logo_link {
	display: block;
}
.l-footer .list {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
	gap: 7.5rem;
	margin-top: 2.6455026455026456vw;
}

@media screen and (max-width: 767px) {
	.l-footer .list {
		margin-top: 8vw;
		gap: 37.5px;
	}
}

.c-wrap {
	margin-inline: auto;
	width: calc(670 / 750 * 100%);
	max-width: 120rem;
}
.c-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media screen and (min-width: 768px) {
	.c-wrap {
		margin-inline: auto;
		width: calc(670 / 750 * 100%);
		max-width: 120rem;
	}
}