@charset "UTF-8";
/* ============================================
   軽プラザサンライズ スペシャルサイト（けいかわ VS 軽SUV祭り）
   作法: coding-rules/style_guide.md 準拠
   ・色は直値／クラスは最小限（要素セレクタで辿る）
   ・デザインはSP単一（470px）。320〜470pxは比率で追従し、470px超は中央固定・左右白
     → 1079pxの切替は持たない（PC・SPで同じ見た目）
   ・文字は min(◯vw, ◯px)（◯vw＝デザインpx÷470×100）、左右の余白は％で比率を保つ
============================================ */

/* 共通 *******************/
/*リセット*/
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
body {
	background: #fff;
	font-family: "Rounded Mplus 1c", sans-serif;
	font-weight: 500;
	color: #000;
	line-height: 1.7;
	letter-spacing: 0.02em;
}
ul li {
	list-style: none;
}
a {
	color: #000;
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
	border-style: none;
	vertical-align: bottom;
}
/*英数字*/
.eisu {
	font-family: Arial, sans-serif;
}

/*本文列（470pxで中央固定・下に追従ボタンぶんの逃げ）*/
div.container {
	width: 100%;
	max-width: 470px;
	margin: 0 auto;
	padding-bottom: min(36.4vw, 171px);
	overflow-x: hidden;
}
/*画像は幅いっぱい（個別指定が勝つよう要素セレクタのみで書く）*/
section img {
	width: 100%;
	height: auto;
	display: block;
}
div.container section h1,
div.container section h2,
div.container section h3 {
	font-weight: 800;
}

/*画像ボタン（hoverで薄く）*/
div.container a.btn {
	display: block;
	transition: opacity 0.3s ease;
}
div.container a.btn:hover {
	opacity: 0.8;
}




/* top_visual *******************/
section.top_visual h1 {
	line-height: 0;
}




/* lead（全車4WD・目玉車への誘導） *******************/
section.lead {
	padding: 16px 0 24px;
	background: #B30314;
	text-align: center;
}
section.lead p {
	font-size: min(3.83vw, 18px);
	font-weight: 800;
	color: #fff;
	line-height: 1;
	letter-spacing: 0;
}
/*目玉車を見るボタン（380/470）*/
section.lead a.btn {
	width: 81%;
	margin: 11px auto 0;
}




/* reserve（来店予約特典） *******************/
section.reserve div.cv {
	padding: 24px 2.13%;
	background: #01227B;
}
/*注意書き*/
section.reserve div.cv p {
	margin-top: 10px;
	font-size: min(3.4vw, 16px);
	font-weight: 800;
	color: #fff;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: center;
}




/* countdown（特典終了まで） *******************/
section.countdown {
	padding: 24px 4.26% 26px;
	background: #AF1B14;
}
/*終了・期間外は隠す（countdown.js が .is-end を付ける）*/
section.countdown.is-end {
	display: none;
}
section.countdown div.cdt {
	display: flex;
	flex-direction: column;
	align-items: center;
}
/*見出し（▼ 11月の特典 終了まで ▼）*/
section.countdown div.cdt_txt span {
	display: block;
	font-size: min(3.83vw, 18px);
	font-weight: 700;
	color: #fff;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
}
/*残り時間の黒枠*/
section.countdown div.cdt_date {
	display: flex;
	align-items: center;
	justify-content: center;
	height: min(11.92vw, 56px);
	margin-top: 10px;
	padding: 0 min(4.26vw, 20px);
	background: #000;
	font-size: min(5.11vw, 24px);
	font-weight: 700;
	color: #FFFF00;
	line-height: 1;
	letter-spacing: 0.05em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
section.countdown div.cdt_date small {
	font-size: 1em;
}




/* medama（目玉車） *******************/
section.medama div.mds {
	background: #DF261B;
}
/*ラインアップ見出しの帯*/
section.medama div.lineup {
	padding: 24px 2.13% 10px;
}
section.medama div.lineup.keikawa {
	background: #F9A3B2;
}
section.medama div.lineup.suv {
	background: #E02A1F;
}
/*在庫情報ボタンの帯（380/470）*/
section.medama div.search {
	padding: 16px 2.13%;
	background: #DF261B;
}
/*来店予約ボタンの帯（白枠の中に400/450）*/
section.medama div.cv {
	padding: 10px 2.13%;
	background: #DF261B;
}
section.medama div.cv > div {
	padding: 16px 0;
	background: #fff;
	border-radius: 12px;
}
section.medama div.cv a.btn {
	width: 89%;
	margin: 0 auto;
}




/* voice（店舗評価・お客様の声） *******************/
section.voice div.rating,
section.voice div.list {
	background: #FF8015;
	text-align: center;
}
section.voice h3 {
	font-size: min(5.11vw, 24px);
	color: #fff;
	line-height: 1;
	letter-spacing: 0.05em;
}
/*店舗評価*/
section.voice div.rating {
	padding: 24px 2% 24px;
}
section.voice div.rating > p {
	margin-top: 12px;
	font-size: min(3.4vw, 16px);
	font-weight: 700;
	color: #fff;
	line-height: 1;
	letter-spacing: 0.05em;
}
section.voice div.rating ul {
	display: flex;
	justify-content: center;
	gap: 1.8%;
	margin-top: 12px;
}
section.voice div.rating li {
	width: 32.2%;
	padding: min(3.4vw, 16px) 0 min(4.47vw, 21px);
	background: #fff;
	border: 6px solid #FBCEA7;
	border-radius: 16px;
	line-height: 1;
}
section.voice div.rating li h4 {
	font-size: min(4.26vw, 20px);
	font-weight: 700;
	letter-spacing: 0.05em;
}
section.voice div.rating li p {
	font-size: min(3.4vw, 16px);
	color: #333;
	letter-spacing: 0.05em;
}
/*評価点*/
section.voice div.rating li p.score {
	margin: min(2.13vw, 10px) 0;
	font-family: "Rounded Mplus 1c", sans-serif;
	font-size: min(8.51vw, 40px);
	font-weight: 800;
	color: #FF0004;
}
/*お客様の声*/
section.voice div.list {
	padding: 24px 2.13% 40px;
}
section.voice div.list ul {
	margin-top: 17px;
	text-align: left;
}
section.voice div.list li {
	padding: 21px 5.6%;
	background: #fff;
	border-radius: 8px;
}
section.voice div.list li + li {
	margin-top: 17px;
}
/*アイコン＋見出し（60/400・間13/400）*/
section.voice div.list li > div {
	display: flex;
	align-items: flex-start;
}
section.voice div.list li > div img {
	width: 15%;
	height: auto;
	flex-shrink: 0;
	margin: 1px 3.25% 0 0;
}
section.voice div.list li h4 {
	flex: 1;
	font-size: min(4.68vw, 22px);
	font-weight: 800;
	color: #FF8015;
	line-height: 1.4;
	letter-spacing: 0.05em;
}
section.voice div.list li > p {
	margin-top: 19px;
	font-size: min(3.83vw, 18px);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.05em;
}




/* faq（よくあるご質問） *******************/
section.faq {
	padding-bottom: 40px;
	background: #fff;
}
section.faq div.list {
	margin-top: 40px;
}
section.faq dl + dl {
	margin-top: 16px;
}
/*質問（Qマーク・開閉アイコンは疑似要素）*/
section.faq dt {
	position: relative;
	padding: 16px 8.6% 16px 8.6%;
	background: #FFE8CE;
	font-size: min(3.83vw, 18px);
	color: #444;
	line-height: 1.34;
	letter-spacing: 0;
	cursor: pointer;
}
section.faq dt::before,
section.faq dt::after {
	content: "";
	width: min(4.26vw, 20px);
	height: min(4.26vw, 20px);
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
section.faq dt::before {
	background-image: url(../img/special_site/faq_q.png);
	left: 2.6%;
}
section.faq dt::after {
	background-image: url(../img/special_site/qa_plus.png);
	right: 2.6%;
}
section.faq dt.is-open::after {
	background-image: url(../img/special_site/qa_minus.png);
}
/*回答（開閉する箱・position は付けない）*/
section.faq dd.answer {
	display: none;
	padding: 12px 1.7% 12px 10%;
	background: #fff;
	border: 10px solid #FFE8CE;
	border-top: none;
}
section.faq dt.is-open + dd.answer {
	display: block;
}
/*A印は本文基準で本文と一緒に動かす*/
section.faq dd.answer p {
	position: relative;
	font-size: min(3.4vw, 16px);
	color: #444;
	line-height: 1.5;
	letter-spacing: 0;
}
section.faq dd.answer p::before {
	content: "";
	width: min(4.47vw, 21px);
	height: min(4.26vw, 20px);
	background-image: url(../img/special_site/faq_a.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: max(-6.17vw, -29px);
}




/* outline（フェア開催概要） *******************/
section.outline {
	padding: 20px 2.98%;
	background: #08137D;
}
section.outline h2 {
	font-size: min(3.83vw, 18px);
	color: #fff;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: center;
}
section.outline h2 span {
	display: block;
	color: #FFE33F;
}
/*概要の白箱（422/442）*/
section.outline > div {
	width: 95.5%;
	margin: 10px auto 0;
	padding: 24px 5.5%;
	background: #fff;
	border-radius: 8px;
}
section.outline dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: min(3.83vw, 18px);
	letter-spacing: 0;
}
section.outline dt {
	width: 21.4%;
	font-weight: 800;
	line-height: 1.4;
}
section.outline dd {
	width: 76.5%;
	color: #444;
	line-height: 1.34;
}
section.outline dt:not(:last-of-type),
section.outline dd:not(:last-of-type) {
	margin-bottom: 16px;
}




/* loan（既存ページから写し・変更なし） *******************/
section.loan {
	padding: 5% 0 3%;
	background: #FFE43C;
}
section.loan img {
	width: 96%;
	height: auto;
	margin: 0 auto;
}




/* car（既存ページから写し・変更なし） *******************/
section.car {
	padding: 1% 0 3%;
	background: #E61100;
	text-align: center;
}
section.car h3 {
	width: 96%;
	margin: auto;
	padding: 3% 0;
}
section.car ul.car_item {
	width: 96%;
	display: flex;
	flex-direction: column;
	margin: 0 auto 3%;
}
section.car ul.car_item li {
	margin: 0 auto 3%;
}
/*2台目以降は既存の Bootstrap「mb-4」（1.5rem＝15px）を再現*/
section.car ul.car_item li + li {
	margin-bottom: 15px;
}
section.car div.car_col {
	width: 90%;
	margin: auto;
}
section.car div.car_col-btn {
	width: 96%;
	margin: 2% auto;
}
section.car div.car_col-txt {
	width: 80%;
	margin: auto;
}




/* about（どんなお店？） *******************/
/*画像のみ*/




/* shop（店舗情報） *******************/
/*上部（既存ページから写し・変更なし）*/
section.shop div.shop_photo {
	position: relative;
}
section.shop div.shop_item {
	width: 98%;
	margin: auto;
	position: absolute;
	bottom: 2%;
	left: 0;
	right: 0;
}
/*開催店舗の白枠（既存の add_note_03 を写し・文言のみ11月に更新）*/
section.shop div.note {
	padding-bottom: 20px;
	background: #FBCEA7;
}
section.shop div.note > div {
	width: 95%;
	margin: 0 auto;
	padding: 16px 16px;
	background: #fff;
	border-radius: 12px;
}
section.shop div.note h2 {
	margin-bottom: 10px;
	font-size: min(4.5vw, 18px);
	font-weight: 900;
	color: #1A3263;
	line-height: 1.4;
	text-align: center;
}
section.shop div.note p {
	font-size: min(4vw, 17px);
	font-weight: 500;
	color: #333;
	line-height: 1.6;
	text-align: center;
}




/* tel（店舗へのお電話） *******************/
section.tel {
	padding-bottom: 47px;
	background: #FF8015;
}
section.tel div.mds {
	background: #fff;
}
/*白パネル（450/470）*/
section.tel div.panel {
	width: 95.75%;
	margin: 1px auto 0;
	padding: 24px 4.05%;
	background: #fff;
	border: 6px solid #FBCEA7;
	border-radius: 24px;
}
section.tel li + li {
	margin-top: 16px;
}
section.tel li a {
	display: block;
	transition: opacity 0.3s ease;
}
section.tel li a:hover {
	opacity: 0.8;
}
/*営業時間*/
section.tel div.panel > p {
	margin-top: 16px;
	font-size: min(3.83vw, 18px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
}




/* okaidoku（売り切れ御免） *******************/
/*上部（既存ページから写し・変更なし）*/
section.okaidoku div.okaidoku_photo {
	position: relative;
	text-align: center;
}
section.okaidoku div.okaidoku_item {
	width: 98%;
	margin: auto;
	position: absolute;
	bottom: 3%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
/*紹介文（既存の textarea を写し・文言のみ11月に更新）*/
section.okaidoku div.textarea {
	width: 90%;
	margin: 24px auto 10%;
	padding: 1%;
	border: 3px solid #FF0000;
}
section.okaidoku div.textarea p {
	margin-bottom: 10px;
	font-size: 16px;
}




/* 追従の来店予約ボタン *******************/
/*画面下に固定（450/470）*/
div.fixed_reserve {
	width: 100%;
	max-width: 470px;
	position: fixed;
	bottom: 0;
	left: 50%;
	z-index: 999;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	opacity: 0.0;
	visibility: hidden;
	transition: 0.4s;
}
div.fixed_reserve.is-active {
	opacity: 1.0;
	visibility: visible;
}
div.fixed_reserve a {
	display: block;
	width: 95.75%;
	margin: 0 auto;
	transition: opacity 0.3s ease;
}
div.fixed_reserve img {
	width: 100%;
	height: auto;
	display: block;
}