@charset "utf-8";

html {
  scroll-behavior: smooth;
}

/***
* main 
**************************************/
body {
	@media (min-width: 2001px){
		background-color: #000;
	}
}

main {
	position: relative;
	overflow-x: clip;
	background-color: #000;
	width:100%;
	@media (min-width: 2001px){
		width:2000px;
		margin: 0 auto;
	}
}

.kv {
	padding-top: calc(var(--winW)* 109);
	margin-bottom: calc(var(--winW)* 42);
	position: relative;
	@media (min-width: 769px) and (max-width: 2000px) {
		padding-top: calc(var(--winW)* 152);
		margin-bottom: calc(var(--winW)* 114);
	}
	@media (min-width: 2001px){
		padding-top: 152px;
		margin-bottom: 114px;
	}
	.kv_logo {
		position: absolute;
		width: calc(var(--winW)* 240);
		left: 50%;
		top: calc(var(--winW)* 48);
		transform: translate(-50%, 0%);
		z-index: 2;
		@media (min-width: 769px) and (max-width: 2000px) {
			width: calc(var(--winW)* 474);
			top: calc(var(--winW)* 63);
			left: 50%;
			transform: translate(-50%, 0%);
			z-index: 2;
		}
		@media (min-width: 2001px){
			width: 600px;
			top: 40px;
			left: 50%;
			transform: translate(-50%, 0%);
			z-index: 2;
		}
	}
	.container {
		position: relative;
		width: calc(var(--winW)* 194);
		margin: 0 auto;
		margin-bottom: calc(var(--winW)* 44);
		padding-top: calc(var(--winW)* 14);
		padding-bottom: calc(var(--winW)* 31);
		@media (min-width: 769px) and (max-width: 2000px) {
			width: calc(var(--winW)* 649);
			padding-top: calc(var(--winW)* 20);
			padding-bottom: calc(var(--winW)* 20);
		}
		@media (min-width: 2001px){
			margin-bottom: 55px;
			width: 811.25px;
			padding-top: 25px;
			padding-bottom: 25px;
		}

		.title {
			font-size: calc(var(--winW)* 22);
			color: #fff;
			line-height: 1.3em;
			@media (min-width: 769px) and (max-width: 2000px) {
				font-size: calc(var(--winW)* 36);
			}
			@media (min-width: 2001px){
				font-size: 45px;
			}

			.word_1 {
				letter-spacing: 0.12em;
				white-space: nowrap;
			}
			.word_2 {
				letter-spacing: 0.19em;
				white-space: nowrap;
			}
			.word_3 {
				letter-spacing: 0.13em;
				white-space: nowrap;
			}
			.title_sub {
				position: absolute;
				white-space: nowrap;
				bottom: calc(var(--winW)* 4);
				left: calc(var(--winW)* 2);
				font-size: calc(var(--winW)* 8.48);
				letter-spacing: 0.16em;
				color: var(--color-gray01);
				@media (min-width: 769px) and (max-width: 2000px) {
					font-size: calc(var(--winW)* 13);
					left: auto;
					right: calc(var(--winW)* 5);
					bottom: auto;
					top: calc(var(--winW)* 21);
					letter-spacing: 0.18em;
				}
				@media (min-width: 2001px){
					font-size: 16.25px;
					right: 6.25px;
					top: 26.25px;
					letter-spacing: 0.18em;
					left: auto;
					bottom: auto;
				}
			}
		}
		.line_top {
			position: absolute;
			width: calc(var(--winW)* 32);
			border-top: solid 2px var(--color-keycolor01);
			top: 0;
			left: 0;
			@media (min-width: 769px) and (max-width: 2000px) {
				width: calc(var(--winW)* 49);
			}
			@media (min-width: 2001px){
				width: 61.25px;
			}
		}
		.line_bottom {
			position: absolute;
			width: calc(var(--winW)* 32);
			border-top: solid 2px var(--color-keycolor01);
			bottom: 0;
			right: calc(var(--winW)* 6);
			@media (min-width: 769px) and (max-width: 2000px) {
				width: calc(var(--winW)* 49);
			}
			@media (min-width: 2001px){
				width: 61.25px;
				right: 7.5px;
			}
		}
	}
	.list_car {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		@media (min-width: 769px) and (max-width: 2000px) {
			flex-direction: row;
		}
		@media (min-width: 2001px){
			width: 2000px;
			flex-direction: row;
			margin: 0 auto;
		}


		.list_item {
			flex: 1;
			background-color: var(--color-bg01);
			@media (min-width: 769px) and (max-width: 2000px) {
				flex: 1;
			}
			@media (min-width: 2001px){
				width: 12.5%;
				flex: 1;
			}

			.bgimg {
				background-color: #000;
				overflow: hidden;
				height: calc(var(--winW)* 140);
				@media (min-width: 769px) and (max-width: 2000px) {
					height: calc(var(--winW)* 400);
				}
				@media (min-width: 2001px){
					height: 500px;
				}
			}

			.anker {
				display: block;
				position: relative;
				margin-top: calc(var(--winW)* -39);
				padding-bottom: calc(var(--winW)* 14);
				@media (min-width: 769px) and (max-width: 2000px) {
					margin-top: calc(var(--winW)* -61);
					padding-bottom: calc(var(--winW)* 15);
				}
				@media (min-width: 2001px){
					margin-top: -76.25px;
					padding-bottom: 20px;
				}
				.car_img {
					display: flex;
					align-items: flex-end;
					overflow: hidden;
					@media (min-width: 769px) and (max-width: 2000px) {
						height: calc(var(--winW)* 103);
						margin-bottom: calc(var(--winW)* 13);
					}
					@media (min-width: 2001px){
						height: 128.75px;
						margin-bottom: 16.25px;
					}

				}
				.size01 {
					margin-left: calc(var(--winW)* 23);
					width: calc(var(--winW)* 106);
					margin-top: calc(var(--winW)* 19);
					@media (min-width: 769px) and (max-width: 2000px) {
						margin: 0 auto;
						width: calc(var(--winW)* 174);
						margin-top: 0;
					}
					@media (min-width: 2001px){
						margin: 0 auto;
						width: 211.25px;
						margin-top: 0;
					}

				}
				.size02 {
					margin-left: calc(var(--winW)* 23);
					width: calc(var(--winW)*104);
					margin-top: calc(var(--winW)* 5);
					@media (min-width: 769px) and (max-width: 2000px) {
						margin: 0 auto;
						width: calc(var(--winW)* 156);
						margin-top: 0;
					}
					@media (min-width: 2001px){
						margin: 0 auto;
						width: 193.75px;
						margin-top: 0;
					}

				}
				.size03 {
					margin-left: calc(var(--winW)* 22);
					width: calc(var(--winW)* 106);
					margin-top: calc(var(--winW)* 6);
					@media (min-width: 769px) and (max-width: 2000px) {
						margin: 0 auto;
						width: calc(var(--winW)* 174);
						height: calc(var(--winW)* 114);
						margin-top: 0;
					}
					@media (min-width: 2001px){
						margin: 0 auto;
						width: 213.25px;
						height: 140px;
						margin-top: 0;
					}
				}

				.name {
					display: flex;
					width: 100%;
					height: calc(var(--winW)* 40);
					text-align: center;
					color: var(--color-gray01);
					font-size: calc(var(--winW)* 9);
					letter-spacing: 0em;
					line-height: 1.375;
					justify-content: flex-end;
					align-items: center;
					padding-right: calc(var(--winW)* 31);
					margin-top: calc(var(--winW)* -30);
					@media (min-width: 769px) and (max-width: 2000px) {
						justify-content: center;
						font-size: calc(var(--winW)* 10);
						padding-right: 0;
						margin-top: 0;
					}
					@media (min-width: 2001px){
						font-size: 12.5px;
						justify-content: center;
						height: 50px;
						padding-right: 0;
						margin-top: 0;
					}
					&.name_ogushow {
						font-size: calc(var(--winW)* 9);
						@media (min-width: 769px) and (max-width: 2000px) {
							font-size: calc(var(--winW)* 10);
						}
						@media (min-width: 2001px){
							font-size: 12.5px;
						}
					}
				}
				.arrow {
					width: calc(var(--winW)* 14);
					margin: 0 auto;
					position: absolute;
					right: calc(var(--winW)* 11);
					bottom: calc(var(--winW)* 28);
					@media (min-width: 769px) and (max-width: 2000px) {
						width: calc(var(--winW)* 15);
						filter: brightness(0) saturate(100%) invert(26%) sepia(73%) saturate(0%) hue-rotate(137deg) brightness(96%) contrast(95%);
						position: static;
					}
					@media (min-width: 2001px){
						width: 18.75px;
						filter: brightness(0) saturate(100%) invert(26%) sepia(73%) saturate(0%) hue-rotate(137deg) brightness(96%) contrast(95%);
						position: static;
					}
				}

			}
			.position01 {
				@media (min-width: 769px) and (max-width: 2000px) {
					position: relative;
					margin-left: calc(var(--winW)* 54);
					margin-top: calc(var(--winW)* -74);
				}
				@media (min-width: 2001px){
					position: relative;
					margin-left: 70.25px;
					margin-top: -94px;
				}
			}
			.position02 {
				@media (min-width: 769px) and (max-width: 2000px) {
					position: relative;
					margin-left: calc(var(--winW)* 50);
					margin-top: calc(var(--winW)* -72);
				}
				@media (min-width: 2001px){
					position: relative;
					margin-left: 50px;
					margin-top: -90px;
				}
			}
			.position03 {
				@media (min-width: 769px) and (max-width: 2000px) {
					position: relative;
					margin-left: calc(var(--winW)* 43);
					margin-top: calc(var(--winW)* -85);
				}
				@media (min-width: 2001px){
					position: relative;
					margin-left: 55px;
					margin-top: -103px;
				}
			}
		}
	}
}

.container_pdf {
	width: calc(var(--winW)* 240);
	margin-top: calc(var(--winW)* 30);
	margin-left: auto;
	margin-right: calc(var(--winW)* 10);
	@media (min-width: 769px) and (max-width: 2000px) {
		width: calc(var(--winW)* 300);
		margin-top: calc(var(--winW)* 39);
		margin-right: calc(var(--winW)* 231);
	}
	@media (min-width: 2001px){
		width: 375px;
		margin-top: 48.75px;
		margin-right: 288.75px;
	}

	.download_pdf {
		display: flex;
		width: 100%;
		height: calc(var(--winW)* 54);
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		border: solid 1px rgba(109, 150, 170, 0.7);
		border-radius: calc(var(--winW)* 5);
		margin-bottom: calc(var(--winW)* 5);
		padding-left: calc(var(--winW)* 17);
		padding-right: calc(var(--winW)* 17);
		@media (min-width: 769px) and (max-width: 2000px) {
			flex-direction: row-reverse;
			height: calc(var(--winW)* 70);
			margin-bottom: calc(var(--winW)* 3);
			padding-left: calc(var(--winW)* 21);
			padding-right: calc(var(--winW)* 18);
		}
		@media (min-width: 2001px){
			flex-direction: row-reverse;
			height: 87.5px;
			margin-bottom: 3.75px;
			padding-left: 26.25px;
			padding-right: 22.5px;
			border-radius: 6.25px;
		}
		@media (min-width: 769px){
			transition: 0.3s opacity ease-in-out;
		}
		&:hover {
			@media (min-width: 769px){
				opacity: 0.7;
			}
		}

		.icon {
			width: calc(var(--winW)* 29);
			@media (min-width: 769px) and (max-width: 2000px) {
				width: calc(var(--winW)* 40);
			}
			@media (min-width: 2001px){
				width: 50px;
			}
		}
		.text {
			color: var(--color-catalog);
			font-size: calc(var(--winW)* 10);
			letter-spacing: 0.1em;
			@media (min-width: 769px) and (max-width: 2000px) {
				font-size: calc(var(--winW)* 12);
			}
			@media (min-width: 2001px){
				font-size: 15px;
			}
		}
		.thamb {
			width: calc(var(--winW)* 40);
			position: relative;
			margin-bottom: calc(var(--winW)* 27);
			@media (min-width: 769px) and (max-width: 2000px) {
				width: calc(var(--winW)* 50);
			}
			@media (min-width: 2001px){
				margin-bottom: 33.75px;
				width: 62.5px;
			}
		}
	}

	.note {
		font-size: calc(var(--winW)* 8);
		color: var(--color-gray01);
		text-align: right;
		letter-spacing: 0.05em;
		@media (min-width: 769px) and (max-width: 2000px) {
			font-size: calc(var(--winW)* 8);
		}
		@media (min-width: 2001px){
			font-size: 10px;
		}
	}
}

.contents {
	margin-top: calc(var(--winW)* 50);
	@media (min-width: 769px) and (max-width: 2000px) {
		padding-left: calc(var(--winW)* 107);
		margin-top: calc(var(--winW)* 85);
	}
	@media (min-width: 2001px){
		padding-left: 133.75px;
		margin-top: 106.25px;
	}

	&#CUSTOM01{
		margin-top: calc(var(--winW)* 12);
		@media (min-width: 769px) and (max-width: 2000px) {
			margin-top: calc(var(--winW)* 12);
		}
		@media (min-width: 2001px){
			margin-top: 15px;
		}
	}

	.label {
		width: calc(var(--winW)* 74);
		height: calc(var(--winW)* 10);
		background-color: var(--color-keycolor01);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: calc(var(--winW)* 16);
		@media (min-width: 769px) and (max-width: 2000px) {
			width: calc(var(--winW)* 88);
			height: calc(var(--winW)* 10);
			margin-left: 0;
		}
		@media (min-width: 2001px){
			width: 110px;
			height: 12.5px;
			margin-left: 0;
		}
		.txt {
			color: #000;
			font-size: calc(var(--winW)* 7.5);
			letter-spacing: 0.1em;
			white-space: nowrap;
			@media (min-width: 769px) and (max-width: 2000px) {
				font-size: calc(var(--winW)* 9.2);
			}
			@media (min-width: 2001px){
				font-size: 11.5px;
			}
		}
	}

	.title_wrap {
		margin-left: calc(var(--winW)* 15);
		@media (min-width: 769px) and (max-width: 2000px) {
			margin-left: 0;
			display: flex;
			align-items: flex-end;
		}
		@media (min-width: 2001px){
			margin-left: 0;
			display: flex;
			align-items: flex-end;
		}

		.txt_normal {
			color: #fff;
			font-size: calc(var(--winW)* 34);
			line-height: 1.2;
			@media (min-width: 769px) and (max-width: 2000px) {
				margin-top: calc(var(--winW)* 0);
				font-size: calc(var(--winW)* 89);
				line-height: 1.2;
			}
			@media (min-width: 2001px){
				margin-top: 25px;
				font-size: 111.25px;
				line-height: 1.2;
			}
		}
		.txt_long {
			color: #fff;
			font-size: calc(var(--winW)* 34);
			margin-top: calc(var(--winW)* 2);
			line-height: 1.2;
			@media (min-width: 769px) and (max-width: 2000px) {
				margin-top: calc(var(--winW)* 0);
				font-size: calc(var(--winW)* 89);
				z-index: 2;
				line-height: 1.2;
			}
			@media (min-width: 2001px){
				margin-top: 15px;
				font-size: 111.25px;
				z-index: 2;
			}
			.smalltxt {
				font-size: calc(var(--winW)* 24);
				@media (min-width: 769px) and (max-width: 2000px) {
					font-size: calc(var(--winW)* 40);
				}
				@media (min-width: 2001px){
					font-size: 50px;
				}
			}
		}
		.info_wrap {
			display: flex;
			align-items: center;
			margin: calc(var(--winW)* 14);
			margin-bottom: 0;
			margin-left: 0;
			@media (min-width: 769px) and (max-width: 2000px) {
				margin-left: calc(var(--winW)* 62);
				align-items: flex-end;
				margin-bottom: calc(var(--winW)* 6);
			}
			@media (min-width: 2001px){
				margin-left: 78.25px;
				align-items: flex-end;
				margin-bottom: calc(var(--winW)* 1.5);
			}
			&.body_line {
				margin-left: calc(var(--winW)* 0);
				@media (min-width: 769px) and (max-width: 2000px) {
					margin-left: calc(var(--winW)* 12);
				}
				@media (min-width: 2001px){
					margin-left: 12px;
				}
			}
			&.crs {
				margin-left: calc(var(--winW)* 0);
				@media (min-width: 769px) and (max-width: 2000px) {
					margin-left: calc(var(--winW)* 17);
				}
				@media (min-width: 2001px){
					margin-left: 17px;
				}
			}
			&.style2 {
				margin-top: calc(var(--winW)* 10);
				@media (min-width: 769px) and (max-width: 2000px) {
					margin-top: 0;
				}
				@media (min-width: 2001px){
					margin-top: 0;
				}
			}

			.txt_by {
				font-size: calc(var(--winW)* 9);
				color: var(--color-gray01);
				line-height: 1.22;
				letter-spacing: 0.1em;
				@media (min-width: 769px) and (max-width: 2000px) {
					font-size: calc(var(--winW)* 12);
					margin-bottom: calc(var(--winW)* 8);
					line-height: 1.83;
				}
				@media (min-width: 2001px){
					font-size: 15px;
					margin-bottom: 10px;
					line-height: 1.83;
				}

			}
			.name_corp {
				color: #fff;
				font-size: calc(var(--winW)* 14);
				letter-spacing: 0.05em;
				margin-left: calc(var(--winW)* 6);
				@media (min-width: 769px) and (max-width: 2000px) {
					font-size: calc(var(--winW)* 24);
					margin-bottom: calc(var(--winW)* 8);
					margin-left: calc(var(--winW)* 8);
				}
				@media (min-width: 2001px){
					font-size: 30px;
					margin-bottom: 10px;
					margin-left: 8px;
				}
				&.m_left2 {
					@media (min-width: 769px) and (max-width: 2000px) {
						margin-left: calc(var(--winW)* 8);
					}
					@media (min-width: 2001px){
						margin-left: 10px;
					}
				}
				&.style2 {
					@media (min-width: 769px) and (max-width: 2000px) {
						margin-left: calc(var(--winW)* -210);
					}
					@media (min-width: 2001px){
						margin-left: calc(var(--winW)* -210);
					}
				}
			}
			.corp_modal {
				display: flex;
				width: calc(var(--winW)* 100);
				height: calc(var(--winW)* 26);
				background-color: var(--color-gray02);
				justify-content: center;
				align-items: center;
				margin-left: calc(var(--winW)* 21);
				color: #fff;
				font-size: calc(var(--winW)* 10);
				letter-spacing: 0.2em;
				position:relative;
				@media (min-width: 769px) and (max-width: 2000px) {
					width: calc(var(--winW)* 130);
					height: calc(var(--winW)* 36);
					margin-left: calc(var(--winW)* 21);
					font-size: calc(var(--winW)* 12);
				}
				@media (min-width: 2001px){
					width: 162.5px;
					height: 45px;
					margin-left: 26.25px;
					font-size: 15px;
				}
				@media (min-width: 769px){
					transition: 0.3s opacity ease-in-out;
				}
				&:hover {
					@media (min-width: 769px){
						opacity: 0.7;
					}
				}
				&::before {
					content: '';
					display: block;
					width: calc(var(--winW)* 24);
					border-top: solid var(--color-keycolor01) 1px;
					position: absolute;
					left: calc(var(--winW)* -12);
					@media (min-width: 769px) and (max-width: 2000px) {
						border-top: solid var(--color-keycolor01) 2px;
					}
					@media (min-width: 2001px){
						border-top: solid var(--color-keycolor01) 2px;
						width: 30px;
						left: -15px;
					}
				}
			}
		}
	}

	.main_img_txt {
		@media (min-width: 769px) and (max-width: 2000px) {
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
			margin-top: calc(var(--winW)* -6);
		}
		@media (min-width: 2001px){
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
			margin-top: calc(var(--winW)* -1.5);
		}

		.main_img {
			width: 100%;
			@media (min-width: 769px) and (max-width: 2000px) {
				width: calc(var(--winW)* 1100);
			}
			@media (min-width: 2001px){
				width: 1375px;
			}

		}
		.movie_link_wrap {
			@media (min-width: 769px) and (max-width: 2000px) {
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				align-content: flex-start;
				width: calc(var(--winW)* 392);
			}
			@media (min-width: 2001px){
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				align-content: flex-start;
				width: 490px;
			}

			.movie_modal {
				position: relative;
				display: block;
				width: calc(var(--winW)* 222);
				margin-left: auto;
				margin-right: calc(var(--winW)* 15);
				margin-top: calc(var(--winW)* -50);
				@media (min-width: 769px) and (max-width: 2000px) {
					order: 3;
					margin-top: calc(var(--winW)* 40);
					width: calc(var(--winW)* 420);
					margin-left: auto;
					margin-right: calc(var(--winW)* -55);
				}
				@media (min-width: 2001px){
					order: 3;
					margin-top: 60px;
					width: 525px;
					margin-left: auto;
					margin-right: -65px;
				}

				.movie_thmb {
					filter: brightness(0.6);

					@media (min-width: 769px){
						transition: 0.3s filter ease-in-out;
					}
					&:hover {
						@media (min-width: 769px){
							filter: brightness(0.4);
						}
					}
				}
				.play_img {
					position: absolute;
					width: calc(var(--winW)* 47);
					height: calc(var(--winW)* 47);
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					@media (min-width: 769px) and (max-width: 2000px) {
						width: calc(var(--winW)* 89);
						height: calc(var(--winW)* 89);
					}
					@media (min-width: 2001px){
						width: 111.25px;
						height: 111.25px;
					}
				}
				.play_txt {
					position: absolute;
					color: var(--color-gray02);
					writing-mode: vertical-rl;
					line-height: 1.5;
					letter-spacing: 0.1em;
					font-size: calc(var(--winW)* 8);
					left: calc(var(--winW)* -31);
					bottom: calc(var(--winW)* 16);
					@media (min-width: 769px) and (max-width: 2000px) {
						font-size: calc(var(--winW)* 10);
						bottom: auto;
						top: 0;
						left: calc(var(--winW)* -24);
					}
					@media (min-width: 2001px){
						font-size: 12.5px;
						bottom: auto;
						top: 0;
						left: -30px;
					}
				}
			}
			.main_txt {
				color: var(--color-gray01);
				display: block;
				width: calc(var(--winW)* 352);
				font-size: calc(var(--winW)* 12);
				letter-spacing: 0.05em;
				line-height: 1.83;
				margin: 0 auto;
				margin-top: calc(var(--winW)* 14);
				@media (min-width: 769px) and (max-width: 2000px) {
					order: 1;
					width: calc(var(--winW)* 355);
					margin-top: calc(var(--winW)* 20);
					margin-left: 0;
					font-size: calc(var(--winW)* 14);
					letter-spacing: 0.1em;
					line-height: 2;
				}
				@media (min-width: 2001px){
					order: 1;
					width: 443.75px;
					margin-top: 27.5px;
					margin-left: 0;
					font-size: 17.5px;
					letter-spacing: 0.1em;
					line-height: 2;
				}
			}
			.car_detail_btn {
				display: flex;
				width: calc(var(--winW)* 185);
				height: calc(var(--winW)* 40);
				background-color: var(--color-gray02);
				justify-content: flex-start;
				align-items: center;
				margin-left: calc(var(--winW)* 11.5);
				margin-top: calc(var(--winW)* 20);
				padding-left: calc(var(--winW)* 17);
				color: #fff;
				font-size: calc(var(--winW)* 10);
				letter-spacing: 0.2em;
				position: relative;
				transition: 0.3s opacity ease-in-out;
				@media (min-width: 769px) and (max-width: 2000px) {
					width: calc(var(--winW)* 240);
					height: calc(var(--winW)* 45);
					margin-left: calc(var(--winW)* 0);
					margin-top: calc(var(--winW)* 15);
					padding-left: calc(var(--winW)* 17);
					font-size: calc(var(--winW)* 12);
					transition: 0.3s opacity ease-in-out;
				}
				@media (min-width: 2001px){
					width: 300px;
					height: 55px;
					margin-left: 0;
					margin-top: 20px;
					padding-left: 20px;
					font-size: 15px;
					transition: 0.3s opacity ease-in-out;
				}
			}
			.car_detail_btn:hover {
				opacity: 0.7;
			}
			.red_arrow {
				position: absolute;
				right: calc(var(--winW)* 10);
				top: 50%;
				transform: translate(0, -50%);
				width: calc(var(--winW)* 7);
				transition: transform 0.3s ease;
				@media (min-width: 769px) and (max-width: 2000px) {
					width: calc(var(--winW)* 9);
					right: calc(var(--winW)* 20);
				}
				@media (min-width: 2001px){
					width: 9px;
					right: 25px;
				}
			}
			.car_detail_btn:hover .red_arrow {
				transform: translate(50%, -50%);
			}
		}
	}

	.point_wrap {
		margin-top: calc(var(--winW)* 23);
		height: calc(var(--winW)* 250);
		overflow: hidden;
		position: relative;
		border-bottom: solid 1px var(--color-gray02);
		@media (min-width: 769px) and (max-width: 2000px) {
			margin-top: calc(var(--winW)* 23);
			height: calc(var(--winW)* 410);
			display: inline-block;
		}
		@media (min-width: 2001px){
			margin-top: 28.75px;
			height: 512.5px;
			display: inline-block;
		}
		.swiper_parent {
			@media (min-width: 769px) and (max-width: 2000px) {
				display: inline-block;
			}
			@media (min-width: 2001px){
				display: inline-block;
			}

			.swiper-wrapper {
				@media (min-width: 769px) and (max-width: 2000px) {
					display: flex;
				}
				@media (min-width: 2001px){
					display: flex;
				}

				.swiper-slide {
					@media (min-width: 769px) and (max-width: 2000px) {
						width: calc(var(--winW)* 460);
					}
					@media (min-width: 2001px){
						width: 575px;
					}

					.point_item {
						padding-left: calc(var(--winW)* 14);
						@media (min-width: 769px) and (max-width: 2000px) {
							padding-left: calc(var(--winW)* 17);
						}
						@media (min-width: 2001px){
							padding-left: 21.25px;
						}

						.point_no {
							font-size: calc(var(--winW)* 10);
							color: var(--color-gray02);
							letter-spacing: 0.15em;
							margin-bottom: calc(var(--winW)* 5);
							@media (min-width: 769px) and (max-width: 2000px) {
								font-size: calc(var(--winW)* 14);
							}
							@media (min-width: 2001px){
								font-size: 17.5px;
								margin-bottom: 6.25px;
							}
							span {
								font-size: calc(var(--winW)* 18);
								letter-spacing: 0.05em;
								@media (min-width: 769px) and (max-width: 2000px) {
									font-size: calc(var(--winW)* 24);
								}
								@media (min-width: 2001px){
									font-size: 30px;
								}
							}
						}
						.swiper {
							.swiper-wrapper {
								margin-bottom: 28px; /*固定値*/
							}
							.swiper-pagination-bullet {
								background: var(--color-gray02);
								opacity: 1;
							}
							.swiper-pagination-bullet-active {
								background: var(--color-gray01);
							}
							.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
								margin:0 calc(var(--winW)* 4.5);
								@media (min-width: 769px) and (max-width: 2000px) {
								}
								@media (min-width: 2001px){
									margin:0 5.625px;
								}
							}
							.swiper-pagination-bullet {
								width: calc(var(--winW)* 7);
								height: calc(var(--winW)* 7);
								@media (min-width: 769px) and (max-width: 2000px) {
								}
								@media (min-width: 2001px){
									width: 8.75px;
									height: 8.75px;
								}
							}
						}
						.point_txt {
							color: var(--color-gray01);
							font-size: calc(var(--winW)* 11);
							letter-spacing: 0.05em;
							line-height: 1.81;
							padding-bottom: 2em;
							@media (min-width: 769px) and (max-width: 2000px) {
								font-size: 14px;
								letter-spacing: 0.1em;
							}
							@media (min-width: 2001px){
								font-size: 14px;
								letter-spacing: 0.1em;
							}
						}
					}
				}
			}
		}
		.gradation {
			position: absolute;
			width: 100%;
			height: 40px;
			display: block;
			bottom: 0;
			background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
			z-index: 1;
			transition: transform 0.1s;
		}
		&.open {
			.gradation {
				transform: scaleY(0);
			}
		}

	}
	.toggle_btn {
		color: #fff;
		cursor: pointer;
		display: flex;
		justify-content: center;
		cursor: pointer;
		align-items: center;
		margin-top: calc(var(--winW)* 10);
		@media (min-width: 769px) and (max-width: 2000px) {
			width: calc(var(--winW)* 1360);
		}
		@media (min-width: 2001px){
			width: 1700px;
		}

		.more,
		.close {
			font-size: calc(var(--winW)* 12);
			letter-spacing: 0.2em;
			margin-right: calc(var(--winW)* 7);
			@media (min-width: 769px) and (max-width: 2000px) {
				font-size: calc(var(--winW)* 16);
				margin-right: calc(var(--winW)* 8);
			}
			@media (min-width: 2001px){
				font-size: 20px;
				margin-right: 10px;
			}
		}
		.more {
			display: block;
		}
		.close {
			display: none;
		}
		.plusminus {
			position: relative;
			width: calc(var(--winW)* 11);
			height: calc(var(--winW)* 11);
			cursor: pointer;
			@media (min-width: 769px) and (max-width: 2000px) {
				width: calc(var(--winW)* 14);
				height: calc(var(--winW)* 14);
			}
			@media (min-width: 2001px){
				width: 17.5px;
				height: 17.5px;
			}

			&::before,
			&::after {
				content: "";
				display: block;
				background-color: var(--color-keycolor01);
				position: absolute;
				top: 50%;
				left: 0;
				transition: 0.35s;
				width: 100%;
				height: 2px;
			}

			&::before {
				transform: translateY(-50%);
			}

			&::after {
				transform: translateY(-50%) rotate(90deg);
			}
		}
		&.open {
			.plusminus {
				&::before {
				transform: translateY(-50%) rotate(-90deg);
				opacity: 0;
				}
				&::after {
					transform: translateY(-50%) rotate(0);
				}
			}
			.more {
				display: none;
			}
			.close {
				display: block;
			}
		}
	}
}

.lineup {
	margin-top: calc(var(--winW)* 80);
	background: var(--color-bg01);
	padding-top: calc(var(--winW)* 40);
	padding-bottom: calc(var(--winW)* 36);
	@media (min-width: 769px) and (max-width: 2000px) {
		margin-top: calc(var(--winW)* 188);
		padding-top: calc(var(--winW)* 65);
		padding-bottom: calc(var(--winW)* 89);
	}
	@media (min-width: 2001px){
		margin-top: 200px;
		padding-top: 81.25px;
		padding-bottom: 98.5px;
	}

	.title {
		font-size: calc(var(--winW)* 24);
		text-align: center;
		color: #fff;
		letter-spacing: 0.1em;
		@media (min-width: 769px) and (max-width: 2000px) {
			font-size: calc(var(--winW)* 40);
		}
		@media (min-width: 2001px){
			font-size: 52.5px;
		}
	}
	.title_sub {
		font-size: calc(var(--winW)* 12);
		letter-spacing: 0.05em;
		margin-top: calc(var(--winW)* 16);
		margin-bottom: calc(var(--winW)* 26);
		text-align: center;
		color: var(--color-gray01);
		@media (min-width: 769px) and (max-width: 2000px) {
			font-size: calc(var(--winW)* 16);
			letter-spacing: 0.1em;
			margin-top: calc(var(--winW)* 16);
			margin-bottom: calc(var(--winW)* 32);
		}
		@media (min-width: 2001px){
			font-size: 20px;
			letter-spacing: 0.1em;
			margin-top: 20px;
			margin-bottom: 40px;
		}
	}
	.link_wrap {
		@media (min-width: 769px) and (max-width: 2000px) {
			display: flex;
			justify-content: center;
			column-gap: calc(var(--winW)* 20);
		}
		@media (min-width: 2001px){
			display: flex;
			justify-content: center;
			column-gap: 25px;
		}
		.link_item {
			display: block;
			width: calc(var(--winW)* 325);
			margin: 0 auto;
			margin-bottom: calc(var(--winW)* 25);
			@media (min-width: 769px) and (max-width: 2000px) {
				margin: 0;
				width: calc(var(--winW)* 1000);
			}
			@media (min-width: 2001px){
				margin: 0;
				width: 1000px;
			}
			@media (min-width: 769px){
				transition: 0.3s opacity ease-in-out;
			}
			&:hover {
				@media (min-width: 769px){
					opacity: 0.7;
				}
			}

			.link_txt {
				font-size: calc(var(--winW)* 12);
				color: var(--color-gray01);
				letter-spacing: 0.05em;
				margin-top: calc(var(--winW)* 18);
				@media (min-width: 769px) and (max-width: 2000px) {
					font-size: calc(var(--winW)* 14);
					letter-spacing: 0.1em;
					margin-top: calc(var(--winW)* 20);
				}
				@media (min-width: 2001px){
					font-size: 17.5px;
					letter-spacing: 0.1em;
					margin-top: 25px;
				}
			}
			.link_name {
				font-size: calc(var(--winW)* 15);
				letter-spacing: 0.05em;
				color: var(--color-gray01);
				margin-top: calc(var(--winW)* 10);
				@media (min-width: 769px) and (max-width: 2000px) {
					font-size: calc(var(--winW)* 20);
					letter-spacing: 0.1em;
					margin-top: calc(var(--winW)* 12);
				}
				@media (min-width: 2001px){
					font-size: 25px;
					letter-spacing: 0.1em;
					margin-top: 15px;
				}
			}
		}
		.link_item.order_1 {
			@media (min-width: 769px) and (max-width: 2000px) {
				order: 1;
			}
			@media (min-width: 2001px){
				order: 1;
			}
		}
		.link_item.order_2 {
			@media (min-width: 769px) and (max-width: 2000px) {
				order: 2;
			}
			@media (min-width: 2001px){
				order: 2;
			}
		}
		.link_item.order_3 {
			@media (min-width: 769px) and (max-width: 2000px) {
				order: 3;
			}
			@media (min-width: 2001px){
				order: 3;
			}
		}
	}
}
.otherlink {
	padding-top: calc(var(--winW)* 60);
	padding-bottom: calc(var(--winW)* 60);
	@media (min-width: 769px) and (max-width: 2000px) {
		padding-top: calc(var(--winW)* 60);
		padding-bottom: calc(var(--winW)* 116);
	}
	@media (min-width: 2001px){
		padding-top: 75px;
		padding-bottom: 140.5px;
	}

	.title {
		font-size: calc(var(--winW)* 30);
		color: #fff;
		text-align: center;
		letter-spacing: 0.1em;
		margin-bottom: calc(var(--winW)* 26);
		@media (min-width: 769px) and (max-width: 2000px) {
			font-size: calc(var(--winW)* 50);
			margin-bottom: calc(var(--winW)* 64);
		}
		@media (min-width: 2001px){
			font-size: 62.5px;
			margin-bottom: 80px;
		}

	}
	.link_wrap {
		@media (min-width: 769px) and (max-width: 2000px) {
			display: flex;
			flex-wrap: wrap;
			width: calc(var(--winW)* 1360);
			margin: 0 auto;
			gap: calc(var(--winW)* 20);
			/*Layout for 2 item*/
			justify-content: center; 
		}
		@media (min-width: 2001px){
			display: flex;
			flex-wrap: wrap;
			width: 1700px;
			margin: 0 auto;
			gap: 25px;
			/*Layout for 2 item*/
			justify-content: center; 
		}

		.link_item {
			display: block;
			width: calc(var(--winW)* 325);
			margin: 0 auto;
			margin-bottom: calc(var(--winW)* 20);
			@media (min-width: 769px) and (max-width: 2000px) {
				margin: 0;
				width: calc(var(--winW)* 440);
			}
			@media (min-width: 2001px){
				margin: 0;
				width: 550px;
			}
			@media (min-width: 769px){
				transition: 0.3s opacity ease-in-out;
			}
			&:hover {
				@media (min-width: 769px){
					opacity: 0.7;
				}
			}
		}
	}
}

/*modal*/
.info_open {
	.modaal-inner-wrapper {
		padding-left: 10px;
		padding-right: 10px;

		.modaal-container {
			@media (min-width: 769px) {
				max-width: 760px;
			}
		}
		.modaal-content-container {
			padding: 0;
		}
		.modal_contents {
			background-color: var(--color-gray01);
			padding-left: calc(var(--winW)* 36);
			padding-bottom: calc(var(--winW)* 60);
			@media (min-width: 769px) {
				padding-left: 88px;
				padding-bottom: 88px;
			}

			.close_btn {
				width: calc(var(--winW)* 40);
				height: calc(var(--winW)* 40);
				margin-left: auto;
				background-color: #000;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				@media (min-width: 769px) {
					width: 80px;
					height: 80px;
				}
				.close_img {
					width: calc(var(--winW)* 18);
					@media (min-width: 769px) {
						width: 24px;
					}
				}
			}
			.name {
				margin-top: calc(var(--winW)* 32);
				margin-bottom: calc(var(--winW)* 37);
				font-size: calc(var(--winW)* 20);
				letter-spacing: 0.1em;
				@media (min-width: 769px) {
					font-size: 30px;
					margin-top: -8px;
					margin-bottom: 58px;
				}

			}
			.wrap_item {
				@media (min-width: 769px) {
					display: flex;
					margin-bottom: 36px;
				}

				.item_name {
					font-size: calc(var(--winW)* 12);
					letter-spacing: 0.1em;
					margin-bottom: calc(var(--winW)* 14);
					@media (min-width: 769px) {
						margin-bottom: 0;
						font-size: 14px;
						display: block;
						width: 175px;
					}
				}
				.item_text {
					font-size: calc(var(--winW)* 12);
					letter-spacing: 0.1em;
					margin-bottom: calc(var(--winW)* 42);
					@media (min-width: 769px) {
						margin-bottom: 0;
						font-size: 14px;
					}
				}
				.item_link {
					font-size: calc(var(--winW)* 12);
					letter-spacing: 0.04em;
					text-decoration: underline;
					@media (min-width: 769px) {
						font-size: 14px;
					}
				}
			}

		}
	}
}

.movie_open {
	.modaal-video-container {
		max-width: none;
		max-height: none;
	}
	.modaal-inner-wrapper {
		@media (max-width: 768px) {
			padding-left: 0;
			padding-right: 0;
		}
	}
	.modaal-video-wrap {
		@media (max-width: 768px) {
			margin: auto;
		}
	}

	.modaal-close:after,
	.modaal-close:before {
		width: 2px;
	}
	.modaal-close:focus, .modaal-close:hover {
		background: none;
	}
	.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
		background: var(--color-gray01);
	}
}

.nav {
	position: fixed;
	bottom: 0px;
	z-index: 1000;
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	height: 90px;
	display: flex;
	@media (min-width: 808px){
		width: 100%;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}
	&::-webkit-scrollbar{
		display: none;
	}

	.inner_bk {
		background-color: rgb(43 43 43 / 70%);
		backdrop-filter: blur(14px);
		position: relative;
		bottom: -25px;
		width: max-content;
		@media (min-width: 808px) {
			width: 100%;
		}
	}
	.list {
		display: flex;
		width: max-content;
		padding: 0 15px;
		column-gap: 15px;
		align-items: flex-start;
		@media (min-width: 808px) {
			margin: 0 auto;
		}

		.anker {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-end;

			.car_img {
				width: 75.12px;
				margin-top: -10px;
				margin-bottom: 3px;
			}
			.car_img.size_2 {
				width: calc(75.12px * 0.91);
			}
			.car_img.size_3 {
				width: calc(75.12px * 1.02);
			}
			.car_img.size_4 {
				width: calc(75.12px * 0.78);
			}
			.car_img.size_5 {
				width: calc(75.12px * 1.04);
			}
			.car_img.size_6 {
				width: calc(75.12px * 0.99);
			}
			.car_img.size_7 {
				width: calc(75.12px * 0.95);
			}
			.car_img.size_8 {
				width: calc(75.12px * 1.12);
			}
			.car_name {
				font-size: 9px;
				color: var(--color-gray01);
				height: 30px;
				display: flex;
				align-items: center;
				line-height: 1.4;
				text-align: center;
			}
		}
	}
}

/*nav active*/
.nav {
	transform: translateY(100%);
	transition: 0.3s transform ease-in-out;
	&.active {
		transform: translateY(0);
	}
}