@font-face {
	font-family: Local Noto Sans JP;
	src: local("Noto Sans JP"), local("Noto Sans CJK JP Regular");
}

:root {
	--font-base: "Local Noto Sans JP", "Noto Sans Japanese", "Noto Sans JP", "Roboto", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-roboto: "Roboto", "Noto Sans", system-ui, sans-serif;
	--font-roboto-cond: "Roboto Condensed", "Noto Sans", system-ui, sans-serif;
	--size-rate: 1;
	--col_orange: #FF8400;
	--col_black: #333;
	--col_cargo: #F09B00;
	--col_blue: #305CCD;
	--col_basic: #7067A9;
	--col_charge: #58BFDF;
	--col_charge_bg: #D4EFF7;
	--caution_red: #ff0000;
}

html {
	scrollbar-gutter: stable;
}

body {
	font-family: var(--font-base);
}

section {
	overflow: hidden;
}

#main_contents a,
#main_contents .btn {
	transition-property: all;
	transition: 0.2s linear;
}

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

figure {
	margin: 0;
}

.sponly {
	display: none;
}
.pconly{
	display: block;
}



h1,
h2,
h3,
h4 {
	margin: 0;
	padding: 0;
}

h3 {
	border-bottom: none;
	padding-bottom: 0;
}

.fc_red {
	color: var(--caution_red);
}


/* SWIPER OVERRIDE SETTINGS START */
.swiper-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 18px;
}

/* デフォルトの矢印ボタンの「位置指定（absolute）」を解除する */
.swiper-controls .swiper-button-prev,
.swiper-controls .swiper-button-next {
	position: static;
	margin: 0;
	width: 22px;
	height: 22px;
	background: white;
	padding: 7px;
	border-radius: 15px;
}

::slotted(svg),
svg {
	fill: #333;
}

/* 矢印の形や色をカンプに合わせる（例：青色にするなど） */
.swiper-controls .swiper-button-prev::after,
.swiper-controls .swiper-button-next::after {
	font-size: 20px;
	/* 矢印のサイズ */
	font-weight: bold;
}

/* ページネーション（ドット）の幅を自動にする */
.swiper-controls .swiper-pagination {
	position: static;
	width: auto;
	background: white;
	border-radius: 15px;
	/* 角丸はお好みで調整 */

	/* --- 高さ調整のコア設定 --- */
	height: 24px;
	/* 全体の高さを24pxに固定 */
	display: flex;
	/* 中のドットを並べる */
	align-items: center;
	/* 上下中央に配置 */
	justify-content: center;
	padding: 0 12px;
	/* 左右の余白（上下パディングは不要になります） */
	box-sizing: border-box;
	/* パディングを含めて24pxにする設定 */
}

.swiper-pagination-bullet {
	transition: all 0.3s;
	width: 6px;
	/* ドットの基本サイズ */
	height: 6px;
	margin: 0 4px !important;
	/* ドット間の間隔 */
}

.swiper-pagination-bullet-active {
	width: 24px;
	border-radius: 10px;
}

@media (min-width: 769px) {

	/* id="natural" の中にあるページネーション（白枠ごと）を非表示にする */
	#natural .content_area .swiper-controls .swiper-pagination {
		display: none !important;
	}

	/* もし矢印ボタンを消したことで .swiper-controls（外枠）に設定した 
       margin-top: 30px; などの余白だけがポツンと残って気になる場合は、
       枠自体を非表示（以下）にしても大丈夫です。
    */
	#natural .content_area .swiper-controls {
		display: none !important;
	}
}
/* 
.swiper-button-lock,
.swiper-pagination-lock {
	display: flex !important;
	opacity: 0.65;
	cursor: default;
	pointer-events: none;
} */

.slider_wrap {
	max-width: 940px;
	margin: 0 auto;
	padding:0 20px 5vw;
}
@media (min-width:1300px) {
	.slider_wrap {
			max-width: 71.2vw;
		}
}
@media (max-width:767px) {
.slider_wrap {
    margin: 0 0 8vw 18.2vw;
		padding: 0 0 5vw;
}

.swiper-controls {
	margin-top: 1vw;
	justify-content: flex-start;
	margin-left: calc(52% - 31vw);
}

.swiper-controls .swiper-button-prev, .swiper-controls .swiper-button-next {
    width: 5vw;
    height: 5vw;
    padding: 1.9%;
    border-radius: 18px;
}

.swiper-controls .swiper-pagination {
    height: 5vw;
    padding: 0 1vw;
    border-radius: 18px;
    gap: 0.1vw;
}

.swiper-pagination-bullet {
    width: 1.8vw;
    height: 1.8vw;
}

.swiper-pagination-bullet-active {
    width: 8vw;
    border-radius: 12px;
}
.swiper-button-lock,
.swiper-pagination-lock {
	display: flex !important;
	opacity: 0.65;
	cursor: default;
	pointer-events: none;
}
}

/* SWIPER OVERRIDE SETTINGS END */













.content-wrapper {
	width: 85.7vw;
	margin: 0 auto;
	position: relative;
}

/* MVまわり */
.kv_wrap {
	position: relative;
	width: 100%;
	line-height: 0;
	/* 画像下の隙間防止 */
}

/* 背景画像 */
.kv_img img {
	width: 100%;
	height: auto;
	display: block;
}

/* オーバーレイ（中央配置） */
.kv_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 上下左右中央 */
	z-index: 10;
}

.mv_logo {
	position: absolute;
	width: 40.5vw;
	max-width: 650px;
	text-align: center;
	top: 5.5vw;
}

.mv_logo img {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

/* 「エブリイ アクセサリー」の日本語テキスト */
.mv_logo_sub {
	color: #fff;
	font-size: 1.3vw;
	letter-spacing: 0.1em;
	font-weight: bold;
	text-align: center;
	padding: 0;
	margin: 3px 0 18px;
}

.kv_img {
	width: 100vw;
}

.dot {
	position: absolute;
	width: 8px;
	height: 8px;
	transform: rotate(45deg);
}

.dot-tl {
	top: 14px;
	left: 14px;
	background: #ffcc00;
}

.dot-tr {
	top: 14px;
	right: 14px;
	background: #00cc00;
}

.dot-bl {
	bottom: 14px;
	left: 14px;
	background: #ff6600;
}

.dot-br {
	bottom: 14px;
	right: 14px;
	background: #0066ff;
}

/* 右下 */

/* --- レスポンシブ --- */
@media (max-width: 768px) {
	.mv_logo {
		width: 94vw;
		padding: 3vw 6vw 0;
		top: 41.5%;
		left: 50%;
		transform: translateX(-50%);
		max-width: 95vw;
	}

	.mv_logo_sub {
		font-size: 2.55vw;
		margin: 0px 0 2vw;
	}

	.dot {
		width: 1.2vw;
		height: 1.2vw;
	}

	.dot-tl {
		top: 1.8vw;
		left: 1.8vw;
	}

	.dot-tr {
		top: 1.8vw;
		right: 1.8vw;
	}

	.dot-bl {
		bottom: 1.8vw;
		left: 1.8vw;
	}

	.dot-br {
		bottom: 1.8vw;
		right: 1.8vw;
	}
}

/* ページ内リンク */
.inpage_link {
	text-align: center;
	padding: 66px 20px;
}

.section_ttl {
	font-weight: bold;
	color: #888;
	margin: 2px 0 10px;
	padding: 0;
	font-size: clamp(20px, 1.8vw, 24px);
	text-align: center;
}

.link_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 23px;
	max-width: 1500px;
	margin: 0 auto;
}

.link_container a {
	flex: 0 0 18.9vw;
	max-width: 320px;
	min-width: 150px;
	transition: all 0.3s;
}

.link_container a:hover {
	opacity: 0.8;
	transform: translateY(3px);
}

.link_container img {
	width: 100%;
	/* コンテナ幅に合わせる */
	height: auto;
	display: block;
}

/* --- スマホ版（SP）の調整 --- */
@media (max-width: 768px) {
	.inpage_link {
		padding: 13vw 20px;
	}

	.section_ttl {

		font-size: 5.3vw;

	}

	.link_container {
		gap: 5vw;
		max-width: 69vw;
	}

	.link_container a {
		flex: 0 0 46%;
		max-width: none;
		min-width: 0;
	}



}




/* 動画エリア */
.video_wrap {
	max-width: 700px;
	margin: 0 auto 30px;
}

.video-itm {
	display: block;
	position: relative;
	line-height: 0;
	transition: opacity 0.3s;
}

.video-itm:hover {
	opacity: 0.8;
}

.video-itm img {
	width: 100%;
	height: auto;

}






/* ブラックスタイル文字群 */
/* セクション全体の余白 */
.product-section {
	padding-bottom: 20px;
}

/* ビジュアルユニット */
.car_mv {
	position: relative;
	width: 100%;
	line-height: 0;
}

.car_mv_inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	padding: 4.34vw 0 0 8.7vw;
}

/* タイトルテキストの装飾 */
.car_title {
	line-height: 1.2;
	font-family: var(--font-roboto-cond);
}


.car_name {
	color: #fff;
	font-size: 52px;
	font-weight: 800;
	padding: 0;
	line-height: 105%;
	margin: 0 0.2rem 0 0;
}

.car_grade {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.1vw;
}

.style_name {
	color: #fff;
	font-size: 52px;
	font-weight: 800;
	display: block;
	letter-spacing: 0.1rem;
}

/* 背景画像 */
.kv_img img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- 下部の価格・スペックエリア調整 --- */
.accessory-set {
	margin: 0 auto;
	padding: 21px 25px;
}

/* --- スマホ版（SP）レイアウト --- */
@media (max-width: 768px) {
	.car_mv_inner {
		padding: 5.4vw 4.7vw;
	}

	.car_name {
		font-size: 11.7vw;
		margin: 0 1.7vw 0 0;
	}

	.car_grade {
		font-size: 4vw;
	}

	.style_name {
		font-size: 11vw;
	}

	/* スペックエリアをSPでは縦並びにする */
	.price-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.price-value {
		font-size: 28px;
	}
}

/* ベース */
.accessory-set {
	max-width: 80.3vw;
	color: #333;
}

/* タイトル：下線 */
.set-title {
	font-size: 31px;
	color: #333;
	border-bottom: 1px solid #333;
	padding-bottom: 12px;
	margin-bottom: 11px;
}

.set-title span {
	font-size: 24px;
}

/* 価格エリア：横並び＆下揃え */
.price-header {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	margin-bottom: 3px;
}

/* ラベル：JOINなど */

.label-group {
	margin-bottom: 5px;
}

.label {
	background: #DE9618;
	color: #fff;
	padding: 0px 7px;
	font-size: 12px;
	border-radius: 3px;
	margin-right: 4px;
}

/* 価格数字の強調 */
.price-group {
	display: flex;
	align-items: baseline;
	/* 文字の底辺で揃える */
}

.price-label {
	font-weight: bold;
	margin-right: 3px;
	font-size: 20px;
}

.price-value {
	font-size: 39px;
	font-weight: bold;
	line-height: 1;
}

.price-unit {
	font-size: 21px;
	font-weight: 700;
}

.work-time {
	border: 1px solid #333;
	padding: 0px 8px;
	margin-left: 10px;
	font-size: 14px;
	border-radius: 3px;
}

/* 詳細テキスト */
.description {
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	margin: 0;
}

/* ここまで */

.note {
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 150%;
	margin: 10px 0 0 0;
}

/* ボタン：枠線と矢印 */
.btn-estimate {
	display: block;
	text-align: center;
	border: 1px solid #333;
	padding: 9px 0;
	margin-top: 16px;
	text-decoration: none;
	color: #333;
	font-weight: bold;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
	background-color: white;
	max-width: 800px;
	margin: 0 auto;
}

.btn-estimate:hover {
	text-decoration: none;
	transform: translateY(2px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-estimate::after {
	content: "";
	background: url(../../img/hustler/black_arrow.png) center /cover;
	width: 10px;
	height: 18px;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

/* --- スマホ版（SP）レイアウト --- */
@media (max-width: 768px) {
	.accessory-set {
		max-width: 94vw;
		padding: 2.4vw 3vw;
	}

	.set-title span {
		font-size: 5.4vw;
		color: #333;
	}

	.set-title {
		font-size: 7vw;
		border-bottom: 1px solid #333;
		line-height: 1.4;
		margin: -2vw 0 3vw 0;
		padding: 0 0 2.5vw 0;
	}

	.price-header {
		align-items: flex-start;
		gap: 0;
		margin-bottom: 3vw;
	}

	.label {
		background: #DE9618;
		color: #fff;
		padding: 0px 2.2vw;
		font-size: 3vw;
		border-radius: 3px;
		margin-right: 4px;
	}

	.price-group {
		width: 100vw;
	}

	.price-label {
		font-size: 5.3vw;
	}

	.price-value {
		font-size: 8.5vw;
	}

	.price-unit {
		font-size: 5vw;
	}

	.work-time {
		padding: 0 2vw;
		margin: 0 0 0 3.0vw;
		font-size: 4.2vw;
		border-radius: 3px;
	}

	.description {
		font-size: 3.12vw;
	}

	.note {
		font-size: 3.12vw;
	}

	.btn-estimate {
		padding: 2.2vw 0;
		margin-top: 4.5vw;
		font-size: 4.4vw;
		width: 80%;
	}

	.btn-estimate::after {
		width: 5vw;
		height: 5vw;
		right: 4vw;
	}

	.product-section {
		padding-bottom: 8vw;
	}

}


/*                                                                                          blackstyle_items*/

.item_list_section {

	width: 100%;
}

.item_list_section.black01,
.item_list_section.black02 {
	background: url("../../img/hustler/bk_black_items.png") no-repeat center center;
	background-size: cover;
	padding: 40px 0 27px;
	margin: 0 0 25px 0vw;
}

.item_list_section.exterior {
	background-color: #E5F2F6;
	padding-bottom: 2vw;
	margin-bottom: 5vw;
}

.item_list_section.interior,
#interior .movie_shorts {
	background-color: #FAE2E5;
}

.item_list_section.luggage,
#luggage .movie_shorts {
	background-color: #F9F3D9;
}

.item_list_section.basic,
#basic .movie_shorts {
	background-color: #EEF4E1;
}

.item_leadtxt {
	text-align: center;
}

.item_leadtxt p {
	display: inline-block;
	position: relative;
	font-weight: bold;
	font-size: 24px;
	color: #333;
	margin: 30px 0 0;
	width: 72vw;
	text-align: center;
	height: 47px;
}

/* テキスト横のラインを再現する場合（任意） */
/* .item_leadtxt p::before
 {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 2px;
	background-color: #305CCD;
} */


.item_list_inner {
	/* max-width: 1000px; */
	margin: 0 auto;
	width: 71vw;
}


@media (max-width: 768px) {

	.item_list_section.black01,
	.item_list_section.black02 {
		/* スマホは白無しの黒背景に戻す */
		background: url("../../img/hustler/bk_black.png") repeat center center;
		background-size: auto;
	}

	.item_list_inner {
		margin: 0 auto;
		width: 97vw;
	}


	.item_leadtxt p {
		font-size: 5.0vw;
		padding: 0;
		width: auto;
	}


}

/* アイテムを並べるFlexコンテナ */
.item_grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 44px 1.5vw;
	position: relative;
	padding-top: 40px;
}

.item_grid::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 2px;

}

#exterior .item_grid::before {
	background-color: #305CCD;
}

#interior .item_grid::before {
	background-color: #DD707C;
}

#luggage .item_grid::before {
	background-color: #D9B300;
}

#basic .item_grid::before {
	background-color: #8FAF4E;
}

.black01 .item_grid,
.black02 .item_grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 17px 20px;
	padding-left: 4vw;
	width: 75vw;
	padding-top: 0;
}

.item_card {
	cursor: pointer;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.black01 .item_card,
.black02 .item_card {
	flex: 0 0 30.5%;
}

.exterior .item_card {
	flex: 0 0 31.8%;
}

.interior .item_card,
.luggage .item_card,
.basic .item_card {
	flex: 0 0 23.7%;
}

.item_list_section.interior .item_list_inner,
.item_list_section.luggage .item_list_inner,
.item_list_section.basic .item_list_inner {
	width: auto;
	display: flex;
	margin: 0 4vw;
	justify-content: center;
}

.item_card figure {

	line-height: 0;
	border-radius: 8px;
	overflow: hidden;
}

.item_card figure img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: bottom;
	transition: transform 0.4s ease;
}

.item_card img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.item_name {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	line-height: 150%;

}

.black01 .item_name,
.black02 .item_name {
	color: white;
}

.item_card a {
	text-decoration: none;
	display: block;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
}

.item_card a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 1;
}

/* 文字の設定（::after） */
.item_card a::after {
	content: "詳しく見る";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.1em;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 2;
	white-space: nowrap;
}

.item_card a:hover::before,
.item_card a:hover::after {
	opacity: 1;
}

.item_card:hover figure {
	/* 2. 浮き上がりに合わせて影を強くする */
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

.item_card:hover figure img {
	/* 3. 枠の中で画像だけをズームさせる */
	transform: scale(1.1);
}


/* --- スマホ版（SP）の調整 --- */
@media (max-width: 768px) {
	.item_list_section {
		background-position: center center;
		padding: 1vw 0 2vw;

	}

	.item_leadtxt {
		text-align: center;
		margin-bottom: 2.2vw;
		FONT-WEIGHT: 600;
	}

	.item_grid {
		width: 89vw;
		gap: 7vw 5vw;
	}

	.item_list_section.black01,
	.item_list_section.black02 {
		padding: 11vw 0 27px;
		margin: 0 0 25px 0vw;
	}

	.black01 .item_grid,
	.black02 .item_grid {
		width: 95vw;
		gap: 4vw 4vw;
	}

	.black01 .item_card,
	.black02 .item_card {
		flex: 0 0 47%;
	}

	.exterior .item_card,
	.interior .item_card,
	.luggage .item_card,
	.basic .item_card {
		flex: 0 0 42vw;
	}

	.item_name {
		font-size: 3.5vw;
	}

	.exterior .item_list_inner,
	.interior .item_list_inner,
	.luggage .item_list_inner,
	.basic .item_list_inner {
		width: 89vw;
		margin: 2vw auto;
	}

}

.movie_shorts {
	padding: 22px 0 35px;
	text-align: center;
	margin-bottom: 62px;
}

.movie_ttl {
	font-weight: bold;
	font-size: 25px;
	color: #333;
	margin-bottom: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* カンプのアイコン（ビデオカメラ）を擬似要素で入れる場合 */
.movie_ttl::before {
	content: "";
	display: inline-block;
	width: 42px;
	height: 31px;
	background: url("../../img/hustler/icon_movie.svg") no-repeat center / contain;
	vertical-align: middle;
}

#luggage .movie_ttl::before {
	background: url("../../img/hustler/icon_movie2.svg") no-repeat center / contain;
}

#basic .movie_ttl::before {
	background: url("../../img/hustler/icon_movie3.svg") no-repeat center / contain;
}

.movie_grid {
	display: flex;
	justify-content: center;
	gap: 15px;
	max-width: 900px;
	margin: 0 auto;
}



.movie_item a {
	display: block;
	line-height: 0;
	border-radius: 12px;
	overflow: hidden;
}

/* ホバー演出：既存のアイテムカードとトーンを合わせる */
.movie_item a:hover {
	/* transform: translateY(-5px); */
}

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

/* スマホ対応 */
@media (max-width: 768px) {
	.movie_ttl {
		font-size: 5.3vw;
		gap: 3vw;
		margin: 0 0 6vw 0;
	}

	.movie_ttl::before {
		width: 9.1vw;
		height: 9.1vw;
	}

	.movie_shorts {
		padding: 0 0 60px;
	}

	.movie_grid {
		gap: 10px;
		padding: 0 15px;
		flex-wrap: wrap;
	}

	.movie_item {
		flex: 0 0 46%;
		/* スマホ2列 */
	}
}

#exterior {
	margin-top: 5vw;
}

@media(max-width:768px) {
	#exterior {
		margin-top: 10.5vw;
	}
}

/*                                                                                          option*/
.option {
	padding: 45px 0 4.43vw;
	background-color: #fff;
	color: #000;
	background: url(../../img/hustler/bg_others.webp) no-repeat center top / cover;
}

.option .section-headline {
	font-size: 28px;
	color: #333;
	font-weight: bold;
	text-align: center;
	letter-spacing: .15em;
	width: 322px;
	margin: auto;
	border-bottom: 1px solid #ccc;
	padding: 0 0 10px;
}

.option-box {
	width: 85.7vw;
	margin: auto;
	position: relative;
	padding: 40px 0;
	border-bottom: 1px solid rgba(0, 98, 160, 0.5);
}

.option-box__title {
	font-size: 18px;
	font-weight: bold;
	color: #305ccd;
	text-align: center;
	margin: 0 0 20px;
	border: none;
}

.option-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	z-index: 1;
}

.option-inner .option-img {
	margin: 0 33px 0 0;
}

.option-inner .option-img.filter {
	width: 27.5vw;
}

.option-inner .option-img.aircoorde {
	width: 32.7vw;
}

.option-inner .option-img.yoman {
	width: 32.7vw;
}

.option-data {
	flex: 1 1 0%;
}

.option-data__text {
	font-size: 14px;
	margin: 0 0 16px;
	text-align: left;
}

.option-data__text--strong {
	text-align: left;
	vertical-align: top;
	font-size: 18px;
	font-weight: bold;
	color: #305ccd;
	margin: 0 0 15px;
}

.option-data .option-data__text--strong {
	color: #305CCD;
}

.option-data__text--strong__notes {
	font-size: 10px;
	display: inline-block;
	vertical-align: top;
	padding: 3px 0 0;
}

.option-data__pm25 {
	margin: 0 0 7px;
}

.option-data__pm25 img {
	max-width: 187px;
}

.option-data__logo img {
	max-width: 250px;
}

.option-data__item-name {
	font-size: 19px;
	font-weight: bold;
	text-align: left;
	margin: 0;
}

.option-data__item-name--ja {
	font-size: 10px;
	letter-spacing: .45em;
	display: block;
	line-height: .5;
}

.option-data__price {
	font-size: 16px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0 0 10px;
}

.option-data__price--value {
	font-size: 24px;
	font-weight: bold;
}

.option-data__price--value__cautions {
	font-size: 12px;
	color: #f00;
	border: 1px solid #f00;
	padding: 6px;
	margin: 0 0 0 24px;
}

.option-data__price_mult {
	align-items: center;
	display: grid;
	grid-template-columns: 5.7vw 1fr;
	gap: 0.3vw 0.5vw;
	margin-bottom: 1vw;
}

.option-data__price_mult dt {
	background-color: #338D27;
	color: #fff;
	font-size: 0.86vw;
	font-weight: 400;
	padding: 0.5vw;
	text-align: center;
}

.option-data__price_mult dd {
	color: #5c5c5c;
	margin: 0;
}

.option-data__price_time {
	border: 1px solid #000;
	border-radius: 0.4vw;
	margin-left: 0.8em;
	padding: 0.1em 0.5em;
}

.option-data__notes {
	font-size: 12px;
	text-align: left;
	text-indent: -2.5em;
	padding: 0 0 0 2.5em;
	margin: 0;
}

.option-data__notes.type-02 {
	text-indent: 0;
	padding: 0 0 0 0;
}

.option-data__logo {
	margin: 0 0 10px;
}

.option-data__link {
	margin: 20px 0 0;
}

.option-data__link a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 310px;
	height: 38px;
	font-size: 19px;
	font-weight: bold;
	color: #233f93;
	background: #fff;
	border: 1px solid #233f93;
	-webkit-transition: .3s ease all;
	transition: .3s ease all;
}

.option-data__link a:hover {
	background: #233f93;
	color: #fff;
	text-decoration: none;
}

.catalog {
	background-color: #fff;
	color: #000;
	border-bottom: 1px solid rgba(38, 38, 38, .15);
	padding-bottom: calc(var(--size-rate) * 100px);
}

.catalog .section-headline {
	width: 100%;
	height: 50px;
	border-radius: 25px;
	border: 2px solid var(--col_black);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 19px;
	font-weight: bold;
	color: var(--col_black);
	margin: 0 0 17px;
}

.catalog .catalog-inner {
	width: 85.7vw;
	margin: auto;
	position: relative;
	z-index: 1;
}

.catalog .catalog-bnr {
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.catalog .catalog-bnr a img {
	width: 100%;
}

.catalog .catalog-bnr a {
	display: block;
	width: 24%;
}




.catalog_intro {
	display: flex;
	margin-top: 2.928257687vw;
	margin-bottom: 2.562225476vw;
}

.catalog_intro>div {
	width: 50%;
}

.catalog_intro>div>h3 {
	font-style: normal;
	font-weight: 700;
	font-size: clamp(24px, 2.34vw, 40px);
	line-height: 150%;
	color: var(--col_navy);
}

.catalog_intro>div>p {
	font-style: normal;
	font-weight: 700;
	font-size: clamp(14px, 1.32vw, 22px);
	line-height: 175%;
	color: var(--col_black);
}


.main_contents-area .kv_wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	position: relative;
}




h1 {
	color: #000;
	font-size: 1.43vw;
	text-align: center;
}

.catalog-notes__list--item {
	font-size: 12px;
	margin-bottom: 6px;
	line-height: 140%;
}

.catalog-notes__list {
	text-indent: -0.7em;
	padding-left: 0.7em;
}

@media (max-width: 767px) {
	.catalog-notes__list {
		text-indent: -0.7em;
		padding-left: 0.7em;
	}

	.catalog-notes__list {
		width: 95%;
		margin: 0 auto;
		padding-top: 10px;
	}
}

.est_time_caption--blank {
	display: inline-block;
	width: 30px;
	height: 17px;
	background: #FFFFFF;
	border: 1px solid #333333;
	border-radius: 3px;
	margin: 0 2px;
	vertical-align: bottom;
}

.est_time_caption {
	display: inline;
	background: #FFFFFF;
	border: 1px solid #333333;
	border-radius: 3px;
	padding: 0 4px;
	margin-right: 1px;
}


@media (max-width:767px) {
	.sponly {
		display: block;
	}
	.pconly{
		display: none;
	}

	.main_contents-area {
		max-width: 100%;
		overflow: hidden;
	}



	.content-wrapper {
		padding: 0 4vw;
		width: 100%;
	}

	#main img {
		width: 100%;
	}

	#top-mv {
		position: relative;
	}

	#top-mv img {
		width: 100%;
	}


	.cat-main {
		margin-bottom: 30px;
		padding-top: 40px;
	}

	.cat-ttl {
		font-size: 20px;
		padding-left: 27px;
	}

	#cat02 .cat-main {
		padding-bottom: 0;
	}

	.cat-main {
		margin-bottom: 0;
		padding-top: 27px;
	}

	.cat-ttl {
		font-size: 20px;
		padding-left: 17px;
		margin: 0;
	}

	.main_contents-area img.cat_icn {
		width: 40px;
		height: 40px;
		margin: 0 10px 0 0;
		padding: 4px 3px 8px 3px;
		border-radius: 50%;
	}


	.option {
		padding: 8vw 5vw;
		width: 100%;
		overflow: hidden;
	}

	.option p {
		color: #333;
	}

	.option-data__price {
		font-size: 12px;
	}

	.option-box__title {
		font-size: 16px;
	}

	.option-inner {
		display: block;
	}

	.option-box {
		width: 100%;
		padding: 10vw 0;
	}

	.option-inner .option-img.filter {
		min-width: 100%;
		margin-bottom: 5vw;
	}

	.option-inner .option-img.aircoorde {
		min-width: 100%;
		margin-bottom: 5vw;
	}

	.option-data__pm25 img {
		max-width: 37.5%;
	}

	.option-data__text--strong {
		font-size: 16px;
	}

	.option-data__item-name {
		font-size: 17px;
		margin-bottom: 10px;
	}

	.option-data__notes {
		font-size: 10px;
		text-align: left;
		text-indent: -2.5em;
		padding: 0 0 0 2.5em;
	}

	.option-data__logo {
		width: 60%;
		margin: 20px 0;
	}

	.option-data__logo.yoman {
		margin: 20px auto;
	}

	.option-data__link a {
		width: 100%;
	}

	.option-inner .option-img.yoman {
		margin-bottom: 5vw;
		min-width: 100%;
	}

	.option-data__price_mult {
		grid-template-columns: 80px 1fr;
		gap: 20px 7px;
		margin-bottom: 12px;
	}

	.option-data__price_mult dt {
		font-size: 12px;
		padding: 5px;
		text-align: center;
	}

	.option-data__price_time {
		border: 1px solid #000;
		border-radius: 0.4vw;
		margin-left: 0.8em;
		padding: 0.1em 0.5em;
	}

	.catalog {
		margin-bottom: 10vw;
	}

	.catalog .section-headline {
		margin-top: 21px;
		font-size: 86%;
		margin: 0px auto 20px;
	}

	.catalog .catalog-inner {
		width: 100%;
		padding: 0 5vw;
	}

	.catalog .catalog-bnr {
		margin-bottom: 0;
		gap: 4vw;
	}

	.catalog .catalog-bnr a img {
		width: 100%;
	}

	.catalog .catalog-bnr a {
		display: block;
		width: 43vw;
	}

	footer .l-sitemap {
		padding-top: 75px;
	}

	.wrap {
		width: 100%;
	}

	.kv_name {
		font-family: var(--font-base);
		font-style: normal;
		font-weight: 400;
		font-size: clamp(13.483px, 3.595vw, 18px);
		line-height: 150%;
		text-align: center;
		color: #333333;
	}

	.catalog_intro>div>p {
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
		line-height: 175%;
		color: var(--col_black);
	}
}

@media only screen and (max-width: 767px) {
	img {
		max-width: 100%;
	}
}

@media (max-width: 576px) {
	.catalog .catalog-bnr a {
		display: block;
		width: 100%;
	}
}















.styles_section {
	background-color: #00466B;
	position: relative;
	/* padding-bottom: 5.3vw; */
}

.tough_styles,
.tough_styles .interior_area {
	background-color: #00466B;
	/* padding-top: 12vw; */
}

.offroad_styles,
.offroad_styles .interior_area {
	background-color: #42525A;
}

.stylish_styles,
.stylish_styles .interior_area {
	background-color: #B63B5D;
	}

.natural_styles,
.natural_styles .interior_area {
	background-color: #7CAD26;
		}

.offroad_styles,
.stylish_styles,
.natural_styles {
	margin-top: 4.7vw;
}

.kv_area {
	position: relative;
	width: 100%;
	padding-bottom: 1vw;
}

.tough_styles .kv_area {
	background: url("../../img/hustler/img_tough_bg.webp") no-repeat center top;
	background-size: cover;
}

.offroad_styles .kv_area {
	background: url("../../img/hustler/img_offroad_bg.webp") no-repeat center top;
	background-size: cover;
}

.stylish_styles .kv_area {
	background: url("../../img/hustler/img_stylish_bg.webp") no-repeat center top;
	background-size: cover;
}

.natural_styles .kv_area {
	background: url("../../img/hustler/img_natural_bg.webp") no-repeat center top;
	background-size: cover;
}

.interior_area {
	margin-top: 5vw;
}

.tough_slider_interior {
	margin-top: 4vw;
}

.interior_ttl {
	width: 14.641vw;
	margin: 0 auto;
	/* margin: 10vw auto; */
}

.kv_inner {
	max-width: 78vw;
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-direction: row;
	padding: 5vw 0 1vw;
}

.car_logo {
	padding: 0;
	width: 36vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.car_logo>img {
	width: 25vw;
	margin-top: 4vw;
}

.offroad_styles .car_logo>img {
	width: 28.3vw;
	margin-top: 4vw;
}
.offroad_slider_02{
	padding-bottom: 2.8vw;
}

.kv_area>div>h2>p {

	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 150%;
	text-align: center;

	color: #FFFFFF;

	text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);

}

.car_visual {
	width: 43vw;
	line-height: 0;
}

.car_visual>img {
	margin-top: 3vw;
}

/* 3. コンテンツエリアを上に食い込ませる */
.content_area {
	position: relative;
	z-index: 20;
	/* margin-top: -49vw; */
}

.slider_before_interior {
	margin-top: 67px;
	padding-bottom: 2vw;
}

.action-area {
	margin: 1vw 20px 6vw;
}
.offroad_styles .action-area {
	margin: 3vw 20px 4vw;
	padding: 1vw;
}

.onepoint_items {
	background:
		url(../../img/hustler/onepoint_bg_grad.png) center bottom / 100% 27% no-repeat,
		url(../../img/hustler/img_onepoint_bg.webp) center top / cover no-repeat;

	padding: 12.5vw 20px 5.3vw;
}


.onepoint_title_img {
	width: 71.742vw;
	margin: 0 auto;
}

.onepoint_title_img h2 {
	width: 39vw;
}

.onepoint_items_wrap {
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 10px;
	width: 71.742vw;
	margin: 4vw auto;
	padding: 67px 88px;
}

.onepoint_head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 19px;
}

.onepoint_head>div:nth-child(1) {
	width: 62%;
}

.onepoint_head>div:nth-child(2) {
	width: 38%;
}

.onepoint_ttl {
	font-style: normal;
	font-weight: 700;
	font-size: 1.8vw;
	line-height: 150%;
	color: #7CAD27;
	margin: 0;
}

.onepoint_item_name {
	font-style: normal;
	font-weight: 700;
	font-size: 1.8vw;
	line-height: 150%;
	color: #333333;
	margin: 9px 0;
}

.grades {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 2px 6px;
}

.grades li {
	padding: 1px 9px;
	background: var(--grade_bgcolor, #7A8892);
	border-radius: 3px;
	font-size: 14px;
	color: var(--grade_txtcolor, #fff);
}

.grades .break {
	flex-basis: 100%;
	height: 0;
	padding: 0;
	margin: 0;
}

.onepoint_body {
	font-style: normal;
	font-weight: 700;
	font-size: 1.025vw;
	line-height: 150%;
	color: #333333;
	margin: 6px 0 0;
}

.onepoint_prs_time {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	color: #333333;
	gap: 9px;
}

.onepoint_tx1 {
	font-style: normal;
	font-weight: 700;
	font-size: 1.171vw;
	line-height: 150%;
	margin: 0;
	color: #333;
}

.onepoint_tx1 span {

	font-style: normal;
	font-weight: 700;
	font-size: 2.343vw;
	line-height: 120%;
color: #333;
}

.onepoint_tx1 span.onepoint_yen {
	font-style: normal;
	font-weight: 700;
	font-size: 1.464vw;
	line-height: 150%;
color: #333;
}

.onepoint_time {
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	padding: 0px 8px;
	background: #FFFFFF;
	border: 1px solid #333333;
	border-radius: 3px;
	font-size: 1.171vw;
	position: relative;
	top: -0.42vw;
}

.onepoint_each_item {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.onepoint_each_item>div>p {
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	text-align: center;
	margin: 0.3vw;
	color: #1E1E1E;
}

.onepoint_each_item>div>img {

	background: linear-gradient(0deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.01));
	border-radius: 8px;

}

.onepoint_caution {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 11px 10px 10px 13px;
	gap: 19px;
	border: 1px solid #1E1E1E;
	margin-top: 3.5vw;
}

.onepoint_caution>p {
	margin: 0.4vw 0;
	font-style: normal;
	font-weight: 400;
	font-size: 0.8vw;
	line-height: 150%;
	color: #1E1E1E;
	width: 70%;
}

.onepoint_caution>img {
	width: 30%;
}

.movie_section {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.movie_section h2 {
	font-style: normal;
	font-weight: 700;
	font-size: 1.752vw;
	line-height: 150%;
	text-align: center;
	color: #1E1E1E;
	position: relative;
	padding-bottom: 1.3rem;
}

.movie_section h2::after {
	content: "";
	position: absolute;
	width: 177px;
	height: 0px;
	border: 3px solid #425259;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}

.movie_section .movie_wrap {
	width: 700px;
	height: 393.75px;
	/* background: #D9D9D9; */
	margin: 23px auto;
}

.three_d_section {
	text-align: center;
	margin-top: 31px;
	margin-bottom: 50px;
}

.three_d_section p {
	font-style: normal;
	font-weight: 700;
	font-size: 1.752vw;
	line-height: 150%;
	text-align: center;
	color: #1E1E1E;
}

.sim_btn {
	text-align: center;
	margin: 13px 20px;
}

.sim_btn a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	width: 100%;
	max-width: 800px;
	height: 100px;
	margin: 0 auto;
	background-color: #333;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 34px;
	border-radius: 4px;
	transition: all 0.3s ease;
}

/* 3Dアイコン（左側） */
.sim_btn a::before {
	content: "";
	display: block;
	width: 108px;
	height: 62px;
	background: url("../../img/hustler/icon_3D.webp") no-repeat center / contain;
	margin: 0 55px 0 49px;
}

/* 矢印アイコン（右側） */
.sim_btn a::after {
	content: "";
	position: absolute;
	right: 21px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 26px;
	background: url("../../img/hustler/icon_arrow_white_r.png") no-repeat center / contain;
	transition: transform 0.3s ease;
}

/* ホバー演出 */
.sim_btn a:hover {
	background-color: #444;
	opacity: 0.9;
}

.sim_btn a:hover::after {
	transform: translateY(-50%) translateX(5px);
	/* 矢印だけ少し動かす */
}

/* スマホ対応 */
@media (max-width: 768px) {
.sim_btn a {
    font-size: 3.5vw;
    height: 11vw;
    padding: 0 1rem;
}
.sim_btn a::after {

    width: 1.6vw;
    height: 3vw;
}
	.sim_btn a::before {
		width: 10.5vw;
		height: 6.2vw;
		margin: 0 6vw 0 1.2vw;
	}
}

@media (max-width: 768px) {
	.tough_styles .kv_area {
			background: url("../../img/hustler/img_tough_bg_sp.webp") no-repeat center top;
			background-size: 100% auto;
		}
	
		.offroad_styles .kv_area {
			background: url("../../img/hustler/img_offroad_bg_sp.webp") no-repeat center top;
			background-size: 100% auto;
		}
	
		.stylish_styles .kv_area {
			background: url("../../img/hustler/img_stylish_bg_sp.webp") no-repeat center top;
			background-size: 100% auto;
		}
	
		.natural_styles .kv_area {
			background: url("../../img/hustler/img_natural_bg_sp.webp") no-repeat center top;
			background-size: 100% auto;
		}
.styles_section {
		overflow: hidden;
		width: 100vw;
		padding-bottom: 14vw;
	}

	.kv_inner {
		max-width: 86vw;
		flex-direction: column;
	}

	.movie_section h2 {
		font-size: 4.25vw;
		padding-bottom: 4vw;
		padding-top: 2vw;
	}

	.movie_section h2::after {
		width: 27.2vw;

	}

	.movie_section .movie_wrap {
    width: 700px;
    height: 393.75px;
    background: #D9D9D9;
    margin: 3vw auto 1vw;
}

	.movie_section .movie_wrap {
		width: 80vw;
		height: 46vw;
	}

	.three_d_section {
		margin-top: 1vw;
		margin-bottom: 9vw;
	}

	.three_d_section p {
		font-size: 4.4vw;
	}

	.sim_btn {
		margin: 3.2vw auto;
		width: 80vw;
	}

	.car_logo {
		width: 66.7vw;
		margin: 2vw auto;
	}

	.car_visual {
		width: 100%;
		line-height: 0;
	}

	.kv_area>div>h2>p:nth-child(2) {
		font-size: 4.2vw;
		margin: 3vw;
	}

	.kv_area>div>h2>p:nth-child(3) {
		margin: 0;
		font-size: 4.2vw;
	}

	.content_area {
		/* margin-top: -42vw; */
	}


.interior_area {
	margin-top: 14vw;
}
.interior_ttl {
	width: 39.641vw;
	margin: 0 auto 10vw;
}
.onepoint_items {
	padding: 12.5vw 10px 5.3vw;
}
.onepoint_title_img {
	width: 92vw;
	margin: 0 auto;
}
.onepoint_title_img h2 {
	width: 50vw;
}
.onepoint_items_wrap {
	width: 100%;
	margin: 4vw auto;
	padding: 6vw 3vw;
}
.onepoint_each_item {
	grid-template-columns: repeat(2, 1fr);
}
.onepoint_ttl {
	font-size: 4vw;
}
.onepoint_item_name {
	font-size: 3.4vw;
}
.grades li {
	font-size: 2.8vw;
}
.onepoint_body {
font-size: 3.4vw;
}
.onepoint_tx1 {
	font-size: 3.4vw;
}
.onepoint_tx1 span {
	font-size: 5.6vw;
}
.onepoint_tx1 span.onepoint_yen {
	font-size: 3.6vw;
}
.onepoint_head>div:nth-child(2) {
	margin-top: auto;
}
.onepoint_caution {

	flex-direction: column-reverse;
}
.onepoint_caution>p {
	font-size: 2.8vw;
	width: 100%;
}
.onepoint_time {
	font-size: 2.48vw;
	position: relative;
	top: -0.95vw;
}
}

.video-itm {
	position: relative;
	display: block;
	line-height: 0;
	overflow: hidden;
	transition: opacity 0.3s ease;
}

/* 中央配置用のコンテナ */
.p-card-modal-video__poster-cover {
	position: absolute;
	inset: 0;
	/* top/left/right/bottomをすべて0に */
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 2;
}

/* 再生ボタン本体 */
.p-card-modal-video__poster-play {
	/* coverの中でflex配置されるので、ここでの absolute/top/left は不要になります */
	width: 60px;
	/* あるいは calc(var(--size-rate) * 84 * 1px) */
	height: auto;
	transition: transform 0.3s cubic-bezier(.26, 1, .48, 1);
}

/* ホバー演出：画像に触れたらボタンを少し大きく */
.video-itm:hover .p-card-modal-video__poster-play {
	transform: scale(1.1);
}

@media (max-width: 768px) {
	.p-card-modal-video__poster-play {
		width: 12vw;
		/* スマホで適切なサイズ */
	}
}

.video-itm:hover {
	opacity: 0.8;
}

.video-itm img {
	width: 100%;
	height: auto;

}