@charset "utf-8";

/**********************************************
* 
* TOP
*
***********************************************/
.l-content {
	padding-top: 0;
	padding-bottom: 0;
	color: #fff;
	background: #000315;
}

.BgContent {
	background-image: url(../../images/top/bg_mainvisual.jpg), url(../../images/top/bg_content.png);
	background-position: center top, bottom right;
	background-size: 100% auto, auto auto;
	background-repeat: no-repeat, no-repeat;
}

.MainVisual {
	text-align: center;
	color: #fff;
	position: relative;
	height: 100vh;
	display: flex;
	align-items: stretch;
	margin-bottom: 110px;
}

.tabletview .MainVisual {
	height: 54vw;
}

.MainVisual .l-container {
	display: flex;
	flex-direction: column;
}

.MainVisual .Mark {
	text-align: right;
	padding: 120px 0 0;
	width: 100%;
	height: auto;
}

.MainVisual .Title_lv1 {
	color: #fff;
	margin: 0 0 25px;
	font-size: 3.5rem;
}

.MainVisual .TextBox {
	margin: auto 0 0;
}

.Text {
	line-height: 2;
}

.object,
.object02,
.object03,
.object04 {
	position: relative;
}

.object::after {
	content: "";
	position: absolute;
	background: url(../../images/top/right_obj.png);
	width: 1079px;
	height: 1109px;
	background-size: contain;
	top: 60px;
	right: 0;
	z-index: 0;
}

.object02::after {
	content: "";
	position: absolute;
	background: url(../../images/top/right_obj02.png);
	width: 875px;
	height: 765px;
	background-size: contain;
	top: -10vw;
	right: 0;
	z-index: 0;
}

.object03::after {
	content: "";
	position: absolute;
	background: url(../../images/top/right_obj03.png);
	width: 1092px;
	height: 921px;
	background-size: contain;
	top: -10vw;
	right: 0;
	z-index: 0;
}

.object04::after {
	content: "";
	position: absolute;
	background: url(../../images/top/left_obj.png) no-repeat;
	width: 52vw;
	height: 100vw;
	background-size: contain;
	top: -31vw;
	left: 0;
	z-index: 0;
}

.comingsoon {
	position: relative;
}

.comingsoon::after {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	content: "COMING SOON";
	border: 1px solid #fff;
	background: #666;
	z-index: 2;
}

.choosing {
	background: url(../../images/top/bg_choosing.png) no-repeat top 20px center;
	background-size: cover;
	padding: 10.8vw 0 0;
	height: 1080px;
}

.choosing .l-container {
	margin-right: 11.4vw;
	width: 75%;
}

.choosing .ChoosingBox {
	display: flex;
	width: 100%;
}

.choosing .ChoosingBox .TextBox {
	width: 576px;
}

.choosing .ChoosingBox .ImgBox {
	max-width: 790px;
	margin-top: 70px;
}

.choosing .ChoosingBox .ImgBox img {
	width: 100%;
	height: auto;
}

.concept {
	background: url(../../images/top/bg_concept.png) no-repeat top left;
	background-size: cover;
	height: 1205px;
	display: flex;
	align-items: center;
	margin-top: -5vw;
}

.lineup {
	background: url(../../images/top/bg_lineup.png) no-repeat top -6vw left;
	background-size: cover;
	height: 886px;
	padding-top: 100px;
}

.lineup .Btn {
	margin: 0 0 0 auto;
}

.ModelList {
	width: 85%;
	margin: 100px auto 0;
	position: relative;
	z-index: 2;
}

.customer {
	background: url(../../images/top/bg_customer.png) no-repeat top right;
}

.technology {
	margin-top: 7.8vw;
	padding-bottom: 70px;
}
.TechnologyList {
	display: flex;
	flex-direction: column;
	align-items: end;
}

.TechnologyList li a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: #fff;
	padding: 10px;
}


.TechnologyList li a:hover {
	background-color: rgba(11,49,143,0.8);
}

.TechnologyList li a::after {
	content: "";
	position: absolute;
	background: url(../../images/i_arrow.svg) no-repeat;
	background-size: contain;
	width: 14px;
	height: 14px;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
}

.TechnologyList li + li {
	margin-top: 38px;
}

.TechnologyList li a {
	transition: .5s;
}
.TechnologyList li a dl {
	width: 270px;
	padding: 0 30px;
}

.TechnologyList li:nth-of-type(2) a dl {
	width: 400px;
}

.TechnologyList li:nth-of-type(3) a dl {
	width: 500px;
}

.TechnologyList li a dl dt {
	display: flex;
	color: #fff;
	font-size: 1.8rem;
	font-family: 'Noto Serif SC', serif;
}

.banner {
	margin-top: 150px;
	padding: 70px 0;
	background: rgba(0, 0, 0, 0.6);
}

.bannerList {
	display: flex;
	flex-wrap: wrap;
}

.bannerList > * {
	width: calc((100% / 2) - 15px);
	margin-right: 30px;
}

.bannerList > *:nth-of-type(2n) {
	margin-right: 0;
}

.bannerList > * a {
	display: block;
	color: #fff;
	text-align: center;
	transition: .5s;
}

.bannerList > * a:hover p {
	background-color: #fff;
	color: #000315;
}

.bannerList > * a:hover p::after {
	background: url(../../images/i_arrow_blue.svg) no-repeat;
}

.bannerList > * a img {
	width: 100%;
}

.bannerList > * a p {
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	transition: .5s;
}

.bannerList > * a p::after {
	content: "";
	position: absolute;
	background: url(../../images/i_arrow.svg) no-repeat;
	background-size: contain;
	width: 14px;
	height: 14px;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
}

@media (max-width: 767px) {
	.Btn {
		width: 80%;
	}

	.BgContent {
		background: none;
	}

	.MainVisual {
		height: 100%;
		background: url(../../images/top/bg_mainvisual_sp.jpg) no-repeat #000614 top 70px center;
		background-size: contain;
		margin-bottom: 40px;
	}

	.MainVisual .Mark img {
		width: 25vw;
		height: auto;
	}

	.MainVisual .TextBox {
		margin: 170px 0 0;
	}

	.MainVisual .Title_lv1 {
		color: #fff;
		margin: 0 0 25px;
		font-size: 2rem;
	}

	.MainVisual .Mark {
		padding: 90px 0 0;
	}

	.object::after {
		width: 100vw;
		height: 100vw;
		top: -110px;
		background-size: 100%;
	}

	.object02::after {
		content: "";
		position: absolute;
		background: url(../../images/top/right_obj02_sp.png);
		width: 100vw;
		height: 100vw;
		background-size: 100%;
		top: -25vw;
		right: 0;
		z-index: 0;
	}

	.object03::after {
		content: "";
		position: absolute;
		background: url(../../images/top/right_obj03_sp.png);
		width: 100vw;
		height: 100vw;
		background-size: 100%;
		top: -35vw;
		right: 0;
		z-index: 0;
	}

	.object04::before {
		content: "";
		position: absolute;
		background: url(../../images/top/right_obj02_sp.png);
		width: 100vw;
		height: 130vw;
		background-size: 100%;
		top: -23vw;
		right: 0;
		z-index: 0;
	}

	.object04::after {
		content: "";
		position: absolute;
		background: url(../../images/top/left_obj.png) no-repeat;
		width: 100vw;
		height: 150vw;
		background-size: 100%;
		top: auto;
		bottom: -50vw;
		left: 0;
		z-index: 0;
	}

	.choosing {
		background: url(../../images/top/bg_choosing.png) no-repeat bottom -20px center;
		background-size: cover;
		padding: 10.8vw 0 55vw;
		height: auto;
	}

	.choosing .l-container {
		margin-right: 0;
		width: 100%;
	}

	.choosing .ChoosingBox {
		display: block;
	}

	.choosing .ChoosingBox .TextBox {
		width: 100%;
	}

	.choosing .ChoosingBox .ImgBox {
		max-width: 80%;
		text-align: right;
		margin: 70px 10px 0 auto;
	}

	.choosing .ImgBox img {
		width: 70%;
		height: auto;
	}

	.customer {
		background: none;
		margin-top: 40px;
	}

	.customer img {
		width: 100%;
		height: auto;
	}

	.concept {
		background: url(../../images/top/bg_concept.png) no-repeat bottom 0 left;
		background-size: 150% auto;
		height: 175vw;
		align-items: flex-start;
		margin-top: 30px;
		position: relative;
		z-index: 3;
	}

	.lineup {
		display: block;
		background: none;
		height: auto;
		margin-top: 15vw;
		padding-top: 40px;
	}

	.lineup .Btn {
		margin: 0 auto 0 0;
	}

	.ModelList {
		width: auto;
		margin: 40px auto 0;
		padding: 0 15px;
	}

	.customer img {
		width: 100%;
		height: 42vw;
		object-fit: cover;
		object-position: 100% 0;
	}

	.technology {
		margin-top: 80px;
	}

	.TechnologyList {
		margin-top: 40px;
	}

	.TechnologyList figure {
		width: 25vw;
	}

	.TechnologyList figure img {
		width: 100%;
		height: auto;
	}
	.TechnologyList li {
		width: 100%;
	}
	.TechnologyList li a dl {
		width: calc(100% - 25vw);
		padding: 0 25px 0 15px;
	}

	.TechnologyList li:nth-of-type(2) a dl,
	.TechnologyList li:nth-of-type(3) a dl {
		width: calc(100% - 25vw);
	}

	.banner {
		margin-top: 80px;
		padding: 60px 0;
	}

	.bannerList > * {
		width: 100%;
		margin-right: 0;
	}

	.bannerList > * img {
		width: 100%;
		height: auto;
	}

	.bannerList > * a p {
		padding: 8px 20px;
		position: relative;
		line-height: 1.5;
	}
}