@charset "UTF-8";

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

body {
	background-color: #000;
	color: #FFF;
	font-family: "Oswald", 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;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: start;
}

.mv-icon__circle {
	grid-area: 1/1;
	width: min(300px, calc(300 * var(--fluidScalePx)));
}

.mv-icon__button {
	grid-area: 1/1;
	width: min(205px, calc(205 * var(--fluidScalePx)));
	padding-top: min(46px, calc(46 * var(--fluidScalePx)));
	padding-left: min(65px, calc(65 * var(--fluidScalePx)));
}

.mv-background {
	position: relative;
	display: block;
	z-index: -1;
	height: 100dvh;
}

.mv-background__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mv-background::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../images/mv_gradation.png) no-repeat bottom center;
	background-size: 100% auto;
}

.mv-background.is-visible::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

/* モーダル調整 */
.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__circle {
		width: min(450px, calc(450 * var(--fluidScalePx)));
	}

	.mv-icon__button {
		width: min(308px, calc(308 * var(--fluidScalePx)));
		padding-top: min(68px, calc(68 * var(--fluidScalePx)));
		padding-left: min(98px, calc(98 * var(--fluidScalePx)));
	}
}

/* ---------- hj ---------- */

:root {
	--fluidScalePx: 1px;
	--content-max-width: 1366px;
}

@media screen and (max-width: 1366px) {
	:root {
		--fluidScalePx: calc(1 / 1366 * 100vw);
	}
}

@media screen and (max-width: 767px) {
	:root {
		--fluidScalePx: calc(1 / 750 * 100vw);
	}

	.header__logo a {
		width: min(296px, calc(296 * var(--fluidScalePx)));
	}
}

.l_main {
	overflow: hidden;
}

br.sp-only {
	display: none;
}

@media screen and (max-width: 767px) {
	br.sp-only {
		display: block;
	}
}

.l_section {
	max-width: var(--content-max-width);
	margin-inline: auto;
	/* border: 1px solid red; */
	position: relative;
}

p.fz30 {
	font-size: 0;
}

p.fz30 span {
	font-size: min(30px, calc(30 * var(--fluidScalePx)));
	line-height: calc(70/30);
	letter-spacing: 0.28em;
}

p.fz30narrow span {
	letter-spacing: 0.12em;
}

p.fz35 {
	font-size: 0;
}

p.fz35 span {
	font-size: min(35px, calc(35 * var(--fluidScalePx)));
	line-height: calc(70/35);
	letter-spacing: 0.4em;
}

p.fz40 {
	font-size: 0;
}

p.fz40 span {
	font-size: min(40px, calc(40 * var(--fluidScalePx)));
	line-height: calc(70/40);
	letter-spacing: 0.12em;
}

@media screen and (max-width: 767px) {
	.fz35 span {
		font-size: min(35px, calc(35 * var(--fluidScalePx)));
	}

	.fz30 span {
		font-size: min(30px, calc(30 * var(--fluidScalePx)));

	}

	.fz40 span {
		font-size: min(40px, calc(40 * var(--fluidScalePx)));
	}
}

.blur_txt__01bottom>span {
	letter-spacing: 0.4em;
}


.blur_circle {
	position: absolute;
	z-index: 1;
}

.blur_txt {
	position: absolute;
	z-index: 3;
	color: transparent;
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
}

.blur_txt span {
	display: inline-block;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	will-change: opacity, text-shadow;
}

.prod_img {
	position: absolute;
	z-index: 2;
}

/* .l_section__01 ------------------------------------------------------*/
.l_section__01 {
	margin-top: min(56px, calc(56 * var(--fluidScalePx)));
	height: min(2297px, calc(2297 * var(--fluidScalePx)));
}

.blur_circle__01 {
	top: 0;
	width: min(1366px, calc(1366 * var(--fluidScalePx)));
}

.blur_txt__01_a {
	top: 349px;
	top: min(349px, calc(349 * var(--fluidScalePx)));
	width: 100%;
	text-align: center;
}

.blur_txt__01_b {
	top: min(424px, calc(424 * var(--fluidScalePx)));
	/* width: min(700px, calc(700 * var(--fluidScalePx))); */
	width: 100%;
	text-align: center;
}

.blur_txt__01_b>span {
	letter-spacing: 0.12em;
}

.blur_txt__01_c {
	top: min(889px, calc(889 * var(--fluidScalePx)));
	width: 100%;
	text-align: center;
}

.blur_txt__01_c>span {
	letter-spacing: 0.4em;
}

.blur_txt__01_d {
	top: min(958px, calc(958 * var(--fluidScalePx)));
	width: 100%;
	text-align: center;
}

.blur_txt__01_d>span {
	letter-spacing: 0.4em;
}

.prod_img__01 {
	top: 1025px;
	top: min(1025px, calc(1025 * var(--fluidScalePx)));
	right: -93px;
	--right: min(93px, calc(93 * var(--fluidScalePx)));
	right: calc(-1 * var(--right));
	width: 1218px;
	width: min(1218px, calc(1218 * var(--fluidScalePx)));
}

@media screen and (max-width: 767px) {
	.l_section__01 {
		margin-top: min(113px, calc(113 * var(--fluidScalePx)));
		height: min(1966px, calc(1966 * var(--fluidScalePx)));
	}

	.blur_circle__01 {
		top: 0;
		width: min(1366px, calc(1366 * var(--fluidScalePx)));
		left: 50%;
		translate: -50% 0;
	}

	.prod_img__01 {
		top: min(1066px, calc(1066 * var(--fluidScalePx)));
		right: auto;
		left: min(32px, calc(32 * var(--fluidScalePx)));
		width: min(863px, calc(863 * var(--fluidScalePx)));
	}

}

/* .l_section__02 ------------------------------------------------------*/
.l_section__02 {
	margin-top: min(223px, calc(223 * var(--fluidScalePx)));
	height: min(1072px, calc(1072 * var(--fluidScalePx)));
}

.prod_img__02 {
	width: min(1190px, calc(1190 * var(--fluidScalePx)));
	--right: min(135px, calc(135 * var(--fluidScalePx)));
	right: calc(-1 * var(--right));
}

.blur_circle__02 {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(172px, calc(172 * var(--fluidScalePx)));
	left: 0;
}

.blur_txt__02_a {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(560px, calc(560 * var(--fluidScalePx)));
	left: min(284px, calc(284 * var(--fluidScalePx)));
	text-align: left;
}



.blur_txt__02_b {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(631px, calc(631 * var(--fluidScalePx)));
	left: min(284px, calc(284 * var(--fluidScalePx)));
	text-align: left;
}



@media screen and (max-width: 767px) {
	.l_section__02 {
		margin-top: min(336px, calc(336 * var(--fluidScalePx)));
		height: min(1064px, calc(1064 * var(--fluidScalePx)));
	}

	.prod_img__02 {
		width: min(952px, calc(952 * var(--fluidScalePx)));
		right: auto;
		--left: min(33px, calc(33 * var(--fluidScalePx)));
		left: calc(-1 * var(--left));
	}

	.blur_circle__02 {
		width: min(900px, calc(900 * var(--fluidScalePx)));
		top: min(164px, calc(164 * var(--fluidScalePx)));
		--left: min(141px, calc(141 * var(--fluidScalePx)));
		left: calc(-1 * var(--left));
	}

	.blur_txt__02_a {
		width: min(400px, calc(400 * var(--fluidScalePx)));
		top: min(552px, calc(552 * var(--fluidScalePx)));
		left: min(140px, calc(140 * var(--fluidScalePx)));
	}

	.blur_txt__02_b {
		width: min(400px, calc(400 * var(--fluidScalePx)));
		top: min(623px, calc(623 * var(--fluidScalePx)));
		left: min(140px, calc(140 * var(--fluidScalePx)));
	}
}

/* .l_section__03 ------------------------------------------------------*/
.l_section__03 {
	--mt: min(15px, calc(15 * var(--fluidScalePx)));
	margin-top: calc(-1 * var(--mt));
	height: min(1450px, calc(1450 * var(--fluidScalePx)));
}

.prod_img__03 {
	width: min(1120px, calc(1120 * var(--fluidScalePx)));
	--left: min(12px, calc(12 * var(--fluidScalePx)));
	left: calc(-1 * var(--left));
}

.blur_circle__03 {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(240px, calc(240 * var(--fluidScalePx)));
	--right: min(97px, calc(97 * var(--fluidScalePx)));
	right: calc(-1 * var(--right));
}

.blur_txt__03_a {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(611px, calc(611 * var(--fluidScalePx)));
	left: min(843px, calc(843 * var(--fluidScalePx)));
	text-align: left;
}

.blur_txt__03_b {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(679px, calc(679 * var(--fluidScalePx)));
	left: min(843px, calc(843 * var(--fluidScalePx)));
	text-align: left;
}

@media screen and (max-width: 767px) {
	.l_section__03 {
		margin-top: min(35px, calc(35 * var(--fluidScalePx)));
		height: min(1170px, calc(1170 * var(--fluidScalePx)));
	}

	.prod_img__03 {
		top: min(11px, calc(11 * var(--fluidScalePx)));
		width: min(896px, calc(896 * var(--fluidScalePx)));
		--left: min(230px, calc(230 * var(--fluidScalePx)));
		left: calc(-1 * var(--left));
	}

	.blur_circle__03 {
		width: min(900px, calc(900 * var(--fluidScalePx)));
		top: 0;
		right: auto;
		left: min(54px, calc(54 * var(--fluidScalePx)));
	}

	.blur_txt__03_a {
		width: min(320px, calc(320 * var(--fluidScalePx)));
		top: min(368px, calc(368 * var(--fluidScalePx)));
		left: min(340px, calc(340 * var(--fluidScalePx)));
	}

	.blur_txt__03_b {
		width: min(320px, calc(320 * var(--fluidScalePx)));
		top: min(440px, calc(440 * var(--fluidScalePx)));
		left: min(340px, calc(340 * var(--fluidScalePx)));
	}

}

/* .l_section__04 ------------------------------------------------------*/
.l_section__04 {
	margin-top: min(244px, calc(244 * var(--fluidScalePx)));
	height: min(1362px, calc(1362 * var(--fluidScalePx)));
}



.blur_circle__04 {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: 0;
	--left: min(-22px, calc(-22 * var(--fluidScalePx)));
	left: calc(-1 * var(--left));
}

.blur_txt__04_a {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(389px, calc(389 * var(--fluidScalePx)));
	left: min(127px, calc(127 * var(--fluidScalePx)));
	text-align: left;
}

.blur_txt__04_b {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(458px, calc(458 * var(--fluidScalePx)));
	left: min(127px, calc(127 * var(--fluidScalePx)));
	text-align: left;
}

.prod_img__04 {
	width: min(817px, calc(817 * var(--fluidScalePx)));
	top: min(404px, calc(404 * var(--fluidScalePx)));
	right: min(54px, calc(54 * var(--fluidScalePx)));
}

.prod_img__04_caption {
	position: absolute;
	bottom: 0;
	right: min(143px, calc(143 * var(--fluidScalePx)));
	z-index: 3;
	font-family: "Noto Sans JP", sans-serif;
	font-size: min(16px, calc(16 * var(--fluidScalePx)));
	color: #FFF;
	font-weight: 300;
}

@media screen and (max-width: 767px) {
	.l_section__04 {
		margin-top: min(155px, calc(155 * var(--fluidScalePx)));
		height: min(1387px, calc(1387 * var(--fluidScalePx)));
	}

	.prod_img__04 {
		width: min(653px, calc(653 * var(--fluidScalePx)));
		top: min(601px, calc(601 * var(--fluidScalePx)));
		right: 0;
	}

	.blur_circle__04 {
		width: min(900px, calc(900 * var(--fluidScalePx)));
		top: 0;
		left: auto;
		right: min(39px, calc(39 * var(--fluidScalePx)));
	}


	.blur_txt__04_a {
		width: min(654px, calc(654 * var(--fluidScalePx)));
		top: min(315px, calc(315 * var(--fluidScalePx)));
		left: min(40px, calc(40 * var(--fluidScalePx)));
	}

	.blur_txt__04_b {
		width: min(654px, calc(654 * var(--fluidScalePx)));
		top: min(455px, calc(455 * var(--fluidScalePx)));
		left: min(40px, calc(40 * var(--fluidScalePx)));
	}

	.prod_img__04_caption {
		right: min(45px, calc(45 * var(--fluidScalePx)));
		--bottom: min(7px, calc(7 * var(--fluidScalePx)));
		bottom: calc(-1 * var(--bottom));
		font-size: min(24px, calc(24 * var(--fluidScalePx)));
	}

}

/* .l_section__05 ------------------------------------------------------*/
.l_section__05 {
	margin-top: min(87px, calc(87 * var(--fluidScalePx)));
	height: min(1194px, calc(1194 * var(--fluidScalePx)));
}

.prod_img__05 {
	width: min(1797px, calc(1797 * var(--fluidScalePx)));
	top: min(395px, calc(395 * var(--fluidScalePx)));
	left: 50%;
	translate: -50% 0;
}

.blur_circle__05 {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: 0;
	left: min(577px, calc(577 * var(--fluidScalePx)));
}

.blur_txt__05_a {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(345px, calc(345 * var(--fluidScalePx)));
	left: min(892px, calc(892 * var(--fluidScalePx)));
	text-align: left;
}

.blur_txt__05_b {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(417px, calc(417 * var(--fluidScalePx)));
	left: min(892px, calc(892 * var(--fluidScalePx)));
	text-align: left;
}

.blur_txt__05_c {
	width: min(900px, calc(900 * var(--fluidScalePx)));
	top: min(486px, calc(486 * var(--fluidScalePx)));
	left: min(892px, calc(892 * var(--fluidScalePx)));
	text-align: left;
}

@media screen and (max-width: 767px) {
	.l_section__05 {
		margin-top: min(111px, calc(111 * var(--fluidScalePx)));
		height: min(1092px, calc(1092 * var(--fluidScalePx)));
	}

	.prod_img__05 {
		width: min(1000px, calc(1000 * var(--fluidScalePx)));
		top: min(647px, calc(647 * var(--fluidScalePx)));
		--left: min(163px, calc(163 * var(--fluidScalePx)));
		left: calc(-1 * var(--left));
		translate: 0;
	}

	.blur_circle__05 {
		width: min(900px, calc(900 * var(--fluidScalePx)));
		top: 0;
		left: min(46px, calc(46 * var(--fluidScalePx)));
	}


	.blur_txt__05_a {
		width: min(400px, calc(400 * var(--fluidScalePx)));
		top: min(344px, calc(344 * var(--fluidScalePx)));
		left: min(336px, calc(336 * var(--fluidScalePx)));
	}

	.blur_txt__05_b {
		width: min(400px, calc(400 * var(--fluidScalePx)));
		top: min(413px, calc(413 * var(--fluidScalePx)));
		left: min(336px, calc(336 * var(--fluidScalePx)));
	}

	.blur_txt__05_c {
		width: min(400px, calc(400 * var(--fluidScalePx)));
		top: min(484px, calc(484 * var(--fluidScalePx)));
		left: min(336px, calc(336 * var(--fluidScalePx)));
	}

}

/* .l_section__last ------------------------------------------------------*/
.l_section__last {
	margin-top: min(579px, calc(579 * var(--fluidScalePx)));
	margin-bottom: min(134px, calc(134 * var(--fluidScalePx)));
	height: auto;
	display: grid;
	justify-content: center;
}

img.last__logo {
	width: min(1000px, calc(1000 * var(--fluidScalePx)));
}

.last__text_middle {
	font-family: "Roboto Condensed", sans-serif;
	font-size: min(40px, calc(40 * var(--fluidScalePx)));
	font-weight: 700;
	line-height: 1;
	margin-top: calc(-1em * 16 / 40);
	letter-spacing: 0.4em;
	text-align: center;
}

.last__text_bottom {
	margin-top: min(97px, calc(97 * var(--fluidScalePx)));
	font-family: "noto serif jp", sans-serif;
	font-size: min(30px, calc(30 * var(--fluidScalePx)));
	font-weight: 500;
	letter-spacing: 0.3em;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.l_section__last {
		margin-top: min(678px, calc(678 * var(--fluidScalePx)));
		margin-bottom: min(250px, calc(250 * var(--fluidScalePx)));
		display: block;
		height: min(526px, calc(526 * var(--fluidScalePx)));
		position: relative;
	}

	img.last__logo {
		width: min(800px, calc(800 * var(--fluidScalePx)));
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% 0;
	}

	.last__text_middle {
		margin-top: 0;
		position: absolute;
		top: min(255px, calc(255 * var(--fluidScalePx)));
		left: 50%;
		translate: -49% 0;
		font-size: min(40px, calc(40 * var(--fluidScalePx)));
	}

	.last__text_bottom {
		position: absolute;
		margin-top: 0;
		--bottom: min(5px, calc(5 * var(--fluidScalePx)));
		bottom: calc(-1 * var(--bottom));
		left: 50%;
		translate: -49% 0;
		font-size: min(50px, calc(50 * var(--fluidScalePx)));
		width: min(800px, calc(800 * var(--fluidScalePx)));
	}

}




/* 
bluranimation 
https://codepen.io/onge/pen/KwdZpE
*/

/* 
span {
	color: transparent;
	animation: blur 10s ease-out infinite;
	-webkit-animation: blur 10s ease-out infinite;
}

span:nth-child(1) {
	animation-delay: 0.1s;
	-webkit-animation-delay: 0.1s;
}

span:nth-child(2) {
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
}

span:nth-child(3) {
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}

span:nth-child(4) {
	animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
}

span:nth-child(5) {
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}

span:nth-child(6) {
	animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
}

span:nth-child(7) {
	animation-delay: 0.7s;
	-webkit-animation-delay: 0.7s;
}

@keyframes blur {
	0% {
		text-shadow: 0 0 100px #fff;
		opacity: 0;
	}

	5% {
		text-shadow: 0 0 90px #fff;
	}

	15% {
		opacity: 1;
	}

	20% {
		text-shadow: 0 0 0px #fff;
	}

	80% {
		text-shadow: 0 0 0px #fff;
	}

	85% {
		opacity: 1;
	}

	95% {
		text-shadow: 0 0 90px #fff;
	}

	100% {
		text-shadow: 0 0 100px #fff;
		opacity: 0;
	}
}

@-webkit-keyframes blur {
	0% {
		text-shadow: 0 0 100px #fff;
		opacity: 0;
	}

	5% {
		text-shadow: 0 0 90px #fff;
	}

	15% {
		opacity: 1;
	}

	20% {
		text-shadow: 0 0 0px #fff;
	}

	80% {
		text-shadow: 0 0 0px #fff;
	}

	85% {
		opacity: 1;
	}

	95% {
		text-shadow: 0 0 90px #fff;
	}

	100% {
		text-shadow: 0 0 100px #fff;
		opacity: 0;
	}
} */