@charset "UTF-8";

/* ------------------------------
base
------------------------------ */
img {
	display: block;
	width: 100%;
	height: auto;
}

body {
	background-color: #000;
	color: #FFF;
	font-family: "Oswald", "Noto Sans JP", sans-serif;
	line-height: 1.75;
}

/* ------------------------------
common
------------------------------ */
.section-inner {
	max-width: var(--content-max-width);
	margin-inline: auto;
}
.section-title-wrap {
	text-align: center;
}
.section-title {
	position: relative;
	display: inline-block;
	text-transform: uppercase;
	text-align: center;
}
.section-title__sub {
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1;
	color: #75DC15;
	letter-spacing: 0.2em;
}
.section-title__main {
	font-size: 6.25rem;
	font-weight: 700;
	line-height: 1.2;
	color: #FFF;
	letter-spacing: 0.1em;
}
.section-title__bg {
	position: absolute;
	top: calc(-7.4 * var(--fluid-scale));
	left: calc(-15.5 * var(--fluid-scale));
	background: url(/lp/bj/assets/images/bg_pattern.svg) no-repeat center / contain;
	width: calc(69.42 * var(--fluid-scale));
	height: calc(30.98 * var(--fluid-scale));
	z-index: -1;
}
@media screen and (max-width: 1366px) {
	.section-title__sub {
		font-size: calc(2 * var(--fluid-scale));
	}
	.section-title__main {
		font-size: calc(10 * var(--fluid-scale));
	}
}
@media screen and (max-width: 767px) {
	.section-title__sub {
		font-size: calc(1.5 * var(--fluid-scale));
	}
	.section-title__main {
		font-size: calc(5 * var(--fluid-scale));
		line-height: 1.3;
	}
	.section-title__bg {
		top: calc(-3.3 * var(--fluid-scale));
		left: calc(-8.2 * var(--fluid-scale));
		width: calc(34.71 * var(--fluid-scale));
		height: calc(15.049 * var(--fluid-scale));
	}
}

/* ---------- mv ---------- */
.mv {
	position: relative;
	z-index: 1;
	cursor: pointer;
}

.mv-title {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}
.mv-icon {
	position: absolute;
	right: calc(10 * var(--fluid-scale));
	bottom: calc(10 * var(--fluid-scale));
	width: calc(18 * var(--fluid-scale));
	height: calc(18 * var(--fluid-scale));
}
.mv-background {
	position: relative;
	display: block;
	z-index: -1;
	height: 100svh;
	overflow: hidden;
}
.mv-background__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scale: 1 1.01;
}
.mv-background.is-visible::before {
	content: "";
	position: absolute;
	inset: -1px;
	inset: 0;
	background: #005894;
	mix-blend-mode: multiply;
	z-index: 1;
}

/* モーダル調整 */
.modal-video-body {
	max-width: 1366px;
}
.modal-video-close-btn {
	cursor: pointer;
}

@media screen and (max-width: 767px) {
	.mv-title {
		position: absolute;
		top: 27%;
		translate: -50% 0;
	}
	.mv-title .main-copy__logo {
		width: min(400px, calc(35 * var(--fluid-scale)));
	}
	.main-copy__model-number {
    font-size: min(24px, calc(2 * var(--fluid-scale)));
    margin-top: min(26px, calc(2 * var(--fluid-scale)));
  }
  .main-copy__debut {
    font-size: min(36px, calc(3 * var(--fluid-scale)));
    margin-top: min(48px, calc(4 * var(--fluid-scale)));
  }
	.mv-icon {
		right: min(30px, calc(2.25 * var(--fluid-scale)));
		bottom: min(30px, calc(2.25 * var(--fluid-scale)));
		width: min(150px, calc(13.5 * var(--fluid-scale)));
		height: min(150px, calc(13.5 * var(--fluid-scale)));
	}
}

/* ---------- design ---------- */
.design {
	padding: calc(8 * var(--fluid-scale)) 0 0;
	overflow-x: clip;
}
.design-content {
	position: relative;
}
.design-content .section-title-wrap{
	position: absolute;
	top: calc(24 * var(--fluid-scale));
	left: calc(14 * var(--fluid-scale));
}
.design-image {
	translate: calc(39 * var(--fluid-scale)) 0;
	width: calc(127.8 * var(--fluid-scale));
}
@media screen and (max-width: 767px) {
	.design {
		padding: calc(12 * var(--fluid-scale)) 0 0;
	}
	.design-content .section-title-wrap{
		position: static;
	}
	.design-image {
		translate: calc(1.75 * var(--fluid-scale)) 0;
		width: calc(48.05 * var(--fluid-scale));
		margin-top: calc(4.5 * var(--fluid-scale));
	}
}

/* ---------- interior ---------- */
.interior {
	padding: calc(33 * var(--fluid-scale)) 0 0;
	overflow-x: clip;
}
.interior-image-wrap {
	display: grid;
	justify-content: center;
	max-width: var(--content-max-width);
	margin-top: calc(-39.5 * var(--fluid-scale));
}
.interior-image {
	width: calc(194.5 * var(--fluid-scale));
	translate: calc(3 * var(--fluid-scale)) 0;
}
@media screen and (max-width: 767px) {
	.interior {
		padding: calc(12 * var(--fluid-scale)) 0 0;
	}
	.interior .section-title__bg {
		top: calc(-2.2 * var(--fluid-scale));
		left: calc(-5.5 * var(--fluid-scale));
	}
	.interior-image-wrap {
		margin-top: calc(-1 * var(--fluid-scale));
	}
	.interior-image {
		width: calc(59.35 * var(--fluid-scale));
		translate: calc(1 * var(--fluid-scale)) 0;
	}
}

/* ---------- operation ---------- */
.operation {
	padding: calc(14 * var(--fluid-scale)) 0 0;
	overflow-x: clip;
}
.operation .section-title-wrap {
	translate: -18.5% 0;
}
.operation-image {
	width: calc(136.6 * var(--fluid-scale));
	margin-top: calc(-31 * var(--fluid-scale));
}
@media screen and (max-width: 767px) {
	.operation {
		padding: calc(8 * var(--fluid-scale)) 0 calc(8 * var(--fluid-scale));
	}
	.operation .section-title__bg {
		top: calc(-2.2 * var(--fluid-scale));
		left: calc(-3.5 * var(--fluid-scale));
	}
	.operation .section-title-wrap {
		translate: 0 0;
	}
	.operation-image {
		width: calc(45.15 * var(--fluid-scale));
		translate: -5% 0;
		margin-top: calc(-7 * var(--fluid-scale));
	}
}

/* generation */
.generation {
	--height-scale: calc(10 / 1000 * 100svh);
	position: relative;
	margin-top: calc(22 * var(--fluid-scale));
	overflow-x: clip;
	display: grid;
	justify-content: center;
}
.generation__inner {
	padding: min(calc(6 * var(--fluid-scale)), calc(6 * var(--height-scale))) 0 0;
	width: 1920px;
	height: 100svh;
	margin-inline: auto;
}
.generation-bg {
	position: absolute;
	top: 5%;
	left: 50%;
	translate: -50% 0;
	width: min(calc(144 * var(--fluid-scale)), calc(144 * var(--height-scale)));
	height: min(calc(90 * var(--fluid-scale)), calc(90 * var(--height-scale)));
	z-index: -1;
	background: radial-gradient(
    ellipse at center,
    #1554DD 0%,
    #000 73%
  );
}
.generation .section-title-wrap {
	max-width: var(--content-max-width);
	margin-inline: auto;
}
.generation .section-title__sub {
	color: #FFF;
}
.generation .section-title__main {
	color: #75DC15;
}

.generation-image {
	width: min(calc(217.8 * var(--fluid-scale)), calc(217.8 * var(--height-scale)));
	margin-top: min(calc(7 * var(--fluid-scale)), calc(7 * var(--height-scale)));
	will-change: opacity, transform;
}
@media screen and (min-width: 768px) {
	.generation .section-title__sub {
		font-size: min(calc(2 * var(--fluid-scale)), calc(2 * var(--height-scale)));
	}
	.generation .section-title__main {
		font-size: min(calc(10 * var(--fluid-scale)), calc(10 * var(--height-scale)));
	}
}
@media screen and (max-width: 767px) {
	.generation {
		margin-top: 0;
	}
	.generation__inner {
		padding: calc(8 * var(--fluid-scale)) 0 0;
	}
	.generation-bg {
		top: 8%;
		width: calc(45 * var(--fluid-scale));
		height: calc(35 * var(--fluid-scale));
	}
	.generation-image {
		width: calc(81.5 * var(--fluid-scale));
		margin-top: calc(4 * var(--fluid-scale));
	}
}

/* スピードをコントロールするエリア */
.speed-control-area {
	position: sticky;
	right: 0;
	bottom: min(calc(5 * var(--fluid-scale)), calc(5 * var(--height-scale)));
	margin: max(calc(-20 * var(--fluid-scale)), calc(-20 * var(--height-scale))) 0 0 auto;
	padding-right: 32px;
	width: min(calc(20 * var(--fluid-scale)), calc(20 * var(--height-scale)));
	pointer-events: none;
}
.speed-control-area.is-visible {
	pointer-events: visible;
}
@media screen and (max-width: 767px) {
	.speed-control-area {
		bottom: calc(1 * var(--fluid-scale));
		margin: calc(-15 * var(--fluid-scale)) auto 0;
		padding-right: 0;
		width: calc(15 * var(--fluid-scale));
	}
}

.speed-control-area__inner {
	border-radius: 10px;
	box-shadow: 0 0 12px 6px rgba(255, 255, 255, 1);
	position: relative;
	display: grid;
	grid-template-areas: "stack";
	touch-action: none;
	transition: box-shadow 0.3s;
	will-change: box-shadow;
	cursor: pointer;
}
@media (any-hover: hover) {
	.speed-control-area__inner:hover {
		box-shadow: 0 0 16px 8px #75DC15;
	}
}

.speed-control-area__img{
	grid-area: stack;
	opacity: 0;
}
.speed-control-area__guide {
	position: absolute;
	top: 50%;
	left: min(calc(0.65 * var(--fluid-scale)), calc(0.65 * var(--height-scale)));
	translate: 0 -50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	pointer-events: none;
}
@media screen and (max-width: 767px) {
	.speed-control-area__guide {
		left: calc(0.5 * var(--fluid-scale));
	}
}

/* スクロールガイド真ん中のアイコン */
.speed-control-area__guide-icon {
	width: min(calc(2.2 * var(--fluid-scale)), calc(2.2 * var(--height-scale)));
	padding: min(calc(1.3 * var(--fluid-scale)), calc(1.3 * var(--height-scale))) 0;
}
@media screen and (max-width: 767px) {
	.speed-control-area__guide-icon {
		width: calc(3.2 * var(--fluid-scale));
		padding: calc(1.2 * var(--fluid-scale)) 0;
	}
}

/* スピードテキスト */
.speed-control-area__speed-txt {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: calc(20 / 14);
	opacity: 0.4;
}
.speed-control-area__inner.is-deceleration .speed-control-area__speed-txt.up {
	opacity: 1;
}
.speed-control-area__inner.is-acceleration .speed-control-area__speed-txt.down {
	opacity: 1;
}
.speed-control-area__speed-txt.up {
	margin-bottom: min(calc(0.2 * var(--fluid-scale)), calc(0.2 * var(--height-scale)));
}
.speed-control-area__speed-txt.down {
	margin-top: min(calc(0.2 * var(--fluid-scale)), calc(0.2 * var(--height-scale)));
}
@media screen and (max-width: 1366px) {
	.speed-control-area__speed-txt {
		font-size: min(calc(1.4 * var(--fluid-scale)), calc(1.4 * var(--height-scale)));
	}
}
@media screen and (max-width: 767px) {
	.speed-control-area__speed-txt {
		font-size: calc(1.05 * var(--fluid-scale));
		line-height: calc(30 / 21);
	}
}

/* スクロールガイドの線 */
.speed-control-area__guide-line-wrap {
	display: grid;
	justify-content: center;
}
.speed-control-area__guide-line-arrow {
	display: block;
	width: 1px;
	height: min(calc(0.7 * var(--fluid-scale)), calc(0.7 * var(--height-scale)));
	background-color: #FFF;
	opacity: 0.4;
	position: relative;
}
.speed-control-area__guide-line {
	display: block;
	width: 1px;
	background-color: #FFF;
	opacity: 0.4;
}
@media screen and (max-width: 767px) {
	.speed-control-area__guide-line-arrow {
		height: calc(0.5 * var(--fluid-scale));
	}
}

/* speed up line */
.speed-control-area__guide-line-wrap.up .speed-control-area__guide-line {
	translate: 0 -1px;
	height: min(calc(3.1 * var(--fluid-scale)), calc(3.1 * var(--height-scale)));
}
.speed-control-area__guide-line-wrap.up .speed-control-area__guide-line-arrow::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: min(calc(0.6 * var(--fluid-scale)), calc(0.6 * var(--height-scale)));
	background-color: #FFF;
	rotate: 45deg;
	transform-origin: top;
}
.speed-control-area__inner.is-deceleration .speed-control-area__guide-line-wrap.up .speed-control-area__guide-line,
.speed-control-area__inner.is-deceleration .speed-control-area__guide-line-wrap.up .speed-control-area__guide-line-arrow,
.speed-control-area__inner.is-deceleration .speed-control-area__guide-line-wrap.up .speed-control-area__guide-line-arrow::before {
	opacity: 1;
}
.speed-control-area__inner.is-deceleration .speed-control-area__guide-line-wrap.up .speed-control-area__guide-line {
	animation: scroll-up 1.2s infinite;
}
@keyframes scroll-up {
	0% {
    clip-path: inset(100% 0 0 0);
  }
  30% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 100% 0);
  }
}

@media screen and (max-width: 767px) {
	.speed-control-area__guide-line-wrap.up .speed-control-area__guide-line {
		height: calc(2.5 * var(--fluid-scale));
	}
	.speed-control-area__guide-line-wrap.up .speed-control-area__guide-line-arrow::before {
		height: calc(0.6 * var(--fluid-scale));
	}
}
/* speed down line */
.speed-control-area__guide-line-wrap.down .speed-control-area__guide-line {
	height: min(calc(2.9 * var(--fluid-scale)), calc(2.9 * var(--height-scale)));
}
.speed-control-area__guide-line-wrap.down .speed-control-area__guide-line-arrow::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: min(calc(0.6 * var(--fluid-scale)), calc(0.6 * var(--height-scale)));
	background-color: #FFF;
	rotate: 45deg;
	transform-origin: bottom;
}
.speed-control-area__inner.is-acceleration .speed-control-area__guide-line-wrap.down .speed-control-area__guide-line,
.speed-control-area__inner.is-acceleration .speed-control-area__guide-line-wrap.down .speed-control-area__guide-line-arrow,
.speed-control-area__inner.is-acceleration .speed-control-area__guide-line-wrap.down .speed-control-area__guide-line-arrow::before {
	opacity: 1;
}
.speed-control-area__inner.is-acceleration .speed-control-area__guide-line-wrap.down .speed-control-area__guide-line {
	animation: scroll-down 1.2s infinite;
}
@keyframes scroll-down {
	0% {
    clip-path: inset(0 0 100% 0);
  }
  30% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(100% 0 0 0);
  }
}
@media screen and (max-width: 767px) {
	.speed-control-area__guide-line-wrap.down .speed-control-area__guide-line {
		height: calc(2.5 * var(--fluid-scale))
	}
	.speed-control-area__guide-line-wrap.down .speed-control-area__guide-line-arrow::after {
		height: calc(0.6 * var(--fluid-scale));
	}
}

/* ガイドテキスト */
.speed-control-area__guide-txt {
	font-size: min(calc(1.4 * var(--fluid-scale)), calc(1.4 * var(--height-scale)));
	font-weight: 700;
	line-height: calc(20 / 14);
	text-align: center;
	margin-bottom: min(calc(1.5 * var(--fluid-scale)), calc(1.5 * var(--height-scale)));
}
.speed-control-area__guide-txt.pc {
	display: block;
}
.speed-control-area__guide-txt.sp {
	display: none;
}

@media screen and (max-width: 767px) {
	.speed-control-area__guide-txt {
		font-size: calc(1.2 * var(--fluid-scale));
		line-height: calc(20 / 12);
		margin-bottom: calc(1.5 * var(--fluid-scale));;
	}
	.speed-control-area__guide-txt.pc {
		display: none;
	}
	.speed-control-area__guide-txt.sp {
		display: block;
	}
}

/* レバー画像 */
.speed-control-area__inner.is-deceleration .speed-control-area__img01 {
	opacity: 1;
}
.speed-control-area__inner.is-acceleration .speed-control-area__img02 {
	opacity: 1;
}

/* ---------- animation ---------- */
.split-txt,
.split-txt--generation {
	overflow: hidden;
}

.split-txt .txt,
.split-txt--generation .txt {
	position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.split-txt .spans,
.split-txt--generation .spans {
  display: inline-block;
}