@charset "utf-8";

/*===============================================
 新車 car.css
===============================================*/
/*=======================================================
 - ～767.9px	：スマートフォン画面(ヘッダーメニューはハンバーガーのみ)
 - 768px ～		：タブレット・PC環境に切り替え(ヘッダーメニューはハンバーガーのみ)
 - 960px ～		：ヘッダーメニューが2種類に(ハンバーガー + オープン状態)
 - ～1099.9px	：コンテンツ幅最大値(ニュース記事など)
 - ～1399.9px	：サイトデザイン最大幅
●基本割合
・2等分：width:48%
・3等分：width:30.6%;
・4等分：width:22%;
・2分割：width:30%＆66% or 38%＆58%
=======================================================*/
@media screen and (max-width: 767.9px) {
}

@media print, screen and (min-width: 768px) {
}
@media print, screen and (min-width: 960px) {
}
@media print, screen and (min-width: 1100px) {
}
@media print, screen and (min-width: 1400px) {
}



/*===============================================
 ラインアップ
===============================================*/
/*
 カテゴリーリンク
===============================================*/
.category_link_wrap {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	width: 100%;
}

.category_link_wrap li {
	align-items: center;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	cursor: pointer;
	display: flex;
	font-size: .9em;
	justify-content: center;
	padding: 1em 1.75em;
	position: relative;
	text-align: center;
	width: 50%;
}

@media screen and (max-width: 767.9px) {
	.category_link_wrap li {
		padding: .5em .75em .5em 0;
	}
	.category_link_wrap li:first-child {
		width: 100%;
	}
	.category_link_wrap li:nth-last-of-type(2):after {
		background: #ccc;
		bottom: -1px;
		content: '';
		height: 1px;
		left: 0;
		position: absolute;
		width: 100%;
	}
	.category_link_wrap li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
		width: calc(50% + 1px);
	}

}

@media print, screen and (min-width: 768px) and (max-width: 959.9px) {
	.category_link_wrap li {
		width: calc(100% / 3);
	}

	.category_link_wrap li:nth-last-of-type(3):after {
		background: #ccc;
		bottom: -1px;
		content: '';
		height: 1px;
		left: 0;
		position: absolute;
		width: 100%;
	}

	.category_link_wrap li:last-child {
		border-right: 1px solid #ccc;
		width: calc(100% / 3 + 1px);
	}

/*
	.category_link_wrap:before,
	.category_link_wrap:after {
		border-top: 1px solid #ccc;
		content: '';
		display: block;
		order: 1;
		width: calc(100% / 3);
	}

	.category_link_wrap:after {
		width: calc(100% / 3 - 1px);
	}
*/
}

@media print, screen and (min-width: 960px) {
	.category_link_wrap li {
		width: 25%;
	}

/*
	.category_link_wrap:after {
		border-left: 1px solid #ccc;
		border-top: 1px solid #ccc;
		content: '';
		display: block;
		width: 25%;
	}
*/
}

@media print, screen and (min-width: 1100px) {
	.category_link_wrap li {
		padding: 1em 2em;
	}
}

@media print, screen and (min-width: 1200px) {
	.category_link_wrap li {
		padding: 1em 3.1em;
	}
}

.category_link_wrap li:before {
	border-bottom: 2px solid #332c29;
	border-left: 2px solid #332c29;
	content: '';
	display: block;
	height: .5em;
	pointer-events: none;
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translate(0, -50%) rotate(-45deg);
	width: .5em;
}

@media screen and (max-width: 767.9px) {
	.category_link_wrap li:before {
		right: 1em;
		transform: translate(0, -50%) rotate(-45deg);
	}
}

.category_link_wrap li.active,
.category_link_wrap li.hover {
	background: #000;
	color: #fff;
}

.category_link_wrap li.active:before,
.category_link_wrap li.hover:before {
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
}


/*
 車両
===============================================*/
.sblock.car:not(.show) {
	display: none;
}

.car_wrap {
	margin: 2.5em 0 0;
}

.car_wrap:before,
.car_wrap:after {
	content: '';
	display: block;
	width: 100%;
}

.car_wrap:before {
	order: 1;
}

.car_wrap:after {
	order: 2;
}

.car_wrap li {
	background: #fff;
	display: flex;
	flex-direction: column;
	margin: 0 0 2em;
	padding: 0 4%;
	position: relative;
	width: 100%;
	z-index: 2;
}

@media print, screen and (min-width: 768px) {
	.car_wrap li {
		padding: 0 2%;
		width: 30%;
	}

	.car_wrap:before,
	.car_wrap:after {
		width: 30%;
	}
}

@media print, screen and (min-width: 960px) {
	.car_wrap li {
		width: 23%;
	}

	.car_wrap:before,
	.car_wrap:after {
		width: 23%;
	}
}

.car_link {
	display: block;
	margin: 0 0 .4em;
}

.car_link span {
	display: block;
	text-align: center;
}

.car_link .car_name {
	font-size: max(1.4rem, min(3vw, 1.6rem)); /* 古いSafari用 */
	font-size: clamp(1.4rem, 3vw, 1.6rem);
	margin: 0;
}

@media print, screen and (min-width: 768px) {
	.car_link .car_name {
		font-size: max(1.3rem, min(1.5vw, 1.4rem));	/* 古いSafari用 */
		font-size: clamp(1.3rem, 1.5vw, 1.4rem);
	}
}

.car_link .car_power {
	font-size: .8em;
}

.car_link .car_logo {
	margin: 0 0 .4em;
}

.car_link .car_logo img {
	height: max(1em, min(3vw, 1.5em)); /* 古いSafari用 */
	height: clamp(1em, 3vw, 1.5em);
	margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
	.car_link .car_logo img {
		max-height: .8em;
	}
}

.car_link .car_body {
	background: #fff;
	margin: 0 auto 15px;
	padding: calc(100% * 300 / 500) 3% 0;
	position: relative;
	width: 100%;
}

.car_link .car_body img {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* グラデーション + 四角ボタン */
:root,div,span,p,li,button {
	--gra_squarebtn_width-car: 2.6em;
}

.car_wrap .gra_squarebtn,
.customize .gra_squarebtn {
	background: linear-gradient(to right, #ff475a 0%, #c50d1f var(--gra_squarebtn_width), #000 var(--gra_squarebtn_width), #000 100%);
	height: var(--gra_squarebtn_width-car);
	line-height: calc(var(--gra_squarebtn_width-car) - .1em);
	margin: 0 auto;
	padding: 0 0 0 3.4em;
	min-width: initial;
	width: 85%;
}

.car_wrap .gra_squarebtn:before,
.customize .gra_squarebtn:before {
	padding: 0;
}

.car_wrap .gra_squarebtn:after,
.customize .gra_squarebtn:after {
	height: .8em;
	left: 1.1em;
	width: .8em;
}

@media print, screen and (min-width: 520px) {
	.car_wrap .gra_squarebtn,
	.customize .gra_squarebtn {
		width: 60%;
	}
}

@media print, screen and (min-width: 768px) {
	.car_wrap .gra_squarebtn,
	.customize .gra_squarebtn {
		background: linear-gradient(to right, #ff475a 0%, #c50d1f 1.6em, #000 1.6em, #000 100%);
		padding: 0 0 0 2.2em;
		width: 100%;
	}

	.customize .gra_squarebtn {
		width: 65%;
	}

	.car_wrap .gra_squarebtn:before,
	.customize .gra_squarebtn:before {
		width: 1.6em;
	}

	.car_wrap .gra_squarebtn:after,
	.customize .gra_squarebtn:after {
		height: .65em;
		left: .55em;
		width: .65em;
	}
}

.car_wrap .gra_squarebtn span,
.customize .gra_squarebtn span {
	font-size: max(1.4rem, min(2vw, 1.5rem));	/* 古いSafari用 */
	font-size: clamp(1.4rem, 2vw, 1.5rem);
}

@media screen and (min-width: 960px) {
	.car_wrap .gra_squarebtn span,
	.customize .gra_squarebtn span {
		font-size: max(1.1rem, min(1.4vw, 1.5rem));	/* 古いSafari用 */
		font-size: clamp(1.1rem, 1.4vw, 1.5rem);
	}
}



/*===============================================
 新車ラインアップ バナースライド設定
===============================================*/
/*
@media screen and (max-width: 767.9px) {
	.page_carlineup .content_wrap {
		padding: calc(100vw * .3) 0 0;
	}

	.page_carlineup .title_wrap_inner .img {
		bottom: calc(-280px + (250px - 100%) / 2);
		width: 70%;
	}
}

@media print, screen and (min-width: 768px) {
	.page_carlineup .content_wrap {
		padding: calc(100vw * .2) 0 0;
	}

	.page_carlineup .title_wrap_inner .img {
		height: auto;
		top: 45%;
	}
}

@media print, screen and (min-width: 960px) {
	.page_carlineup .title_wrap_inner .img {
		top: -3em;
	}
}
*/

.carslide {
	box-shadow: 0 2px 10px 0 rgb(125, 125, 125, .2);
}

@media print, screen and (min-width: 520px) {
	.carslide {
		box-shadow: 0 2px 20px 0 rgb(125, 125, 125, .2);
	}
}

.page_carlineup .inview .title_wrap_inner .img .carslide img {
	animation: none;
	position: static;
	transform: none;
}



/*===============================================
 特別仕様車
===============================================*/
/*
 カスタマイズ
===============================================*/
@media screen and (max-width: 767.9px) {
	.customize {
		width: 100%;
	}

	.customize:first-child {
		margin: 0 0 3em;
	}
}

@media print, screen and (min-width: 768px) {
	.customize {
		margin: 0 5%;
		width: 40%;
	}
}

.customize .img {
	margin: 0 0 1em;
}

.customize .title {
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 1em;
	text-align: center;
}

.customize .text {
	margin: 0 0 1em;
}

.customize .link_wrap a {
	margin: 0 auto;
}