@charset "UTF-8";

/* ============================================================
 * アップスポットの魅力（/charm/）
 * 読み込み順： reset.css → common.css → charm.css → drawer-nav.css
 * ヘッダー／下層MV／パンくず／フッターは common.css 側で定義済み。
 * このファイルにはページ固有のスタイルのみ書く。
 * ========================================================== */


/* ------------------------------------------------------------
 * リード
 * ---------------------------------------------------------- */
.charm-intro {
	padding: 88px 0 72px;
	background: var(--color-white);
}

/* 2001年の創業以来のキャッチフレーズ。前後を罫線ではさんで標語として見せる */
.charm-intro__motto {
	width: fit-content;
	margin: 40px auto 0;
	padding: 18px 48px;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	color: var(--color-accent);
	font-size: 24px;
	font-weight: 900;
	letter-spacing: .06em;
	line-height: 1.6;
	text-align: center;
}


/* ------------------------------------------------------------
 * 選ばれる理由
 *   画像と本文を左右交互に並べる。2本目以降は --reverse を付ける
 * ---------------------------------------------------------- */
.reason {
	padding: 0 0 96px;
	background: var(--color-white);
}

.reason-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 56px;
}

.reason-row + .reason-row {
	margin-top: 72px;
}

.reason-row--reverse .reason-row__image {
	order: 2;
}

.reason-row__image {
	overflow: hidden;
	border-radius: 10px;
	background: var(--color-bg);
	aspect-ratio: 3 / 2;
	max-width: 100%;
}

.reason-row__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reason-row__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.reason-row__no {
	color: var(--color-accent);
	font-size: 40px;
	line-height: 1;
}

.reason-row__title {
	font-size: 26px;
	font-weight: 900;
	line-height: 1.5;
	text-wrap: balance;
}

.reason-row__text {
	color: var(--color-body);
	font-size: 16px;
	line-height: 2;
}

.reason-row__points {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--color-bg);
}

.reason-row__points li {
	position: relative;
	padding-left: 24px;
	color: var(--color-body);
	font-size: 14px;
	line-height: 1.8;
}

.reason-row__points li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 2px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	transform: rotate(-45deg);
}


/* ------------------------------------------------------------
 * 保証
 * ---------------------------------------------------------- */
.warranty {
	padding: 96px 0;
	background: var(--color-bg);
}

.warranty__table {
	overflow-x: auto;
	margin-top: 40px;
}

.warranty__table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-white);
	border-radius: 10px;
	overflow: hidden;
}

.warranty__table th,
.warranty__table td {
	padding: 20px 24px;
	border-bottom: 1px solid var(--color-line);
	font-size: 16px;
	text-align: left;
	white-space: nowrap;
}

.warranty__table thead th {
	background: var(--color-ink);
	color: var(--color-white);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
}

.warranty__table tbody th {
	font-weight: 700;
}

.warranty__table tbody tr:last-child th,
.warranty__table tbody tr:last-child td {
	border-bottom: none;
}

.warranty__term {
	color: var(--color-accent);
	font-size: 20px;
	font-weight: 900;
}

.warranty__note {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 20px;
}

.warranty__note li {
	position: relative;
	padding-left: 16px;
	color: var(--color-sub);
	font-size: 14px;
	line-height: 1.8;
}

.warranty__note li::before {
	content: "※";
	position: absolute;
	left: 0;
}


/* ------------------------------------------------------------
 * ご成約特典
 * ---------------------------------------------------------- */
.charm-benefit {
	padding: 96px 0;
	background: var(--color-white);
}

.charm-benefit__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 40px;
}

.charm-benefit__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 32px;
	border: 1px solid var(--color-line);
	border-radius: 10px;
}

.charm-benefit__title {
	font-size: 20px;
	font-weight: 900;
	line-height: 1.5;
}

.charm-benefit__text {
	color: var(--color-body);
	font-size: 14px;
	line-height: 1.9;
}

.charm-benefit__note {
	margin-top: auto;
	padding-top: 8px;
	color: var(--color-sub);
	font-size: 12px;
}


/* ------------------------------------------------------------
 * スタッフ紹介
 * ---------------------------------------------------------- */
.charm-staff {
	padding: 96px 0;
	background: var(--color-bg);
}

.charm-staff__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 24px;
	margin-top: 48px;
}

.charm-staff__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.charm-staff__photo {
	display: block;
	overflow: hidden;
	width: 100%;
	max-width: 220px;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	background: var(--color-white);
}

.charm-staff__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.charm-staff__role {
	margin-top: 4px;
	color: var(--color-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.charm-staff__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

/* 趣味・愛車（★2026-10-30 追加）
   写真の幅に合わせて左揃えにする。ラベル幅は固定して、2行の値の頭を縦にそろえる */
.charm-staff__data {
	width: 100%;
	max-width: 220px;
	margin-top: 4px;
	text-align: left;
}

.charm-staff__data-row {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 8px;
	padding: 4px 0;
	border-top: 1px solid var(--color-line);
}

.charm-staff__data-label {
	color: var(--color-sub);
	font-size: 12px;
	line-height: 1.6;
}

.charm-staff__data-value {
	color: var(--color-body);
	font-size: 12px;
	line-height: 1.6;
}


/* ------------------------------------------------------------
 * 導線
 *   CTA本体は common.css の .srv-cta を使う（全ページ共通）。
 *   ここでは直前のスタッフ紹介がグレーのため上余白だけ詰める。
 * ---------------------------------------------------------- */
.charm-staff + .srv-cta {
	padding-top: 0;
}


/* ------------------------------------------------------------
 * ~1199px
 * ---------------------------------------------------------- */
@media screen and (max-width: 1199px) {
	.reason-row {
		gap: 40px;
	}

	.reason-row__title {
		font-size: 24px;
	}

	.charm-staff__list {
		gap: 32px 16px;
	}
}

/* ------------------------------------------------------------
 * お客様の声
 *   クチコミ本文は未掲載。いまは媒体のレビューページへの誘導のみ
 *   （経緯は charm/index.php のコメントを参照）
 * ---------------------------------------------------------- */
.voice {
	padding: 96px 0;
	background: var(--color-white);
}

.voice__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
}

.voice__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 320px;
	padding: 20px 28px;
	border: 1px solid var(--color-line);
	border-radius: 8px;
	background: var(--color-white);
	color: var(--color-ink);
	text-decoration: none;
}

.voice__link-name {
	font-size: 18px;
	font-weight: 900;
	line-height: 1.4;
}

.voice__link-text {
	margin-right: auto;
	color: var(--color-sub);
	font-size: 14px;
	line-height: 1.6;
}

.voice__link svg {
	flex-shrink: 0;
	color: var(--color-accent);
}

@media (hover: hover) {
	.voice__link:hover {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}

	.voice__link:hover .voice__link-text {
		color: var(--color-accent);
	}
}


/* ------------------------------------------------------------
 * ~959px
 * ---------------------------------------------------------- */
@media screen and (max-width: 959px) {
	.charm-intro {
		padding: 64px 0 48px;
	}

	.charm-intro__motto {
		margin-top: 32px;
		padding: 16px 32px;
		font-size: 20px;
	}

	.voice {
		padding: 72px 0;
	}

	.reason {
		padding: 0 0 72px;
	}

	.reason-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.reason-row--reverse .reason-row__image {
		order: 0;
	}

	.reason-row + .reason-row {
		margin-top: 56px;
	}

	.warranty,
	.charm-benefit,
	.charm-staff {
		padding: 72px 0;
	}

	.charm-benefit__list {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 16px;
	}

	.charm-staff__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 16px;
	}

	.charm-staff__photo,
	.charm-staff__data {
		max-width: 180px;
	}


}

/* ------------------------------------------------------------
 * ~767px
 * ---------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.charm-intro {
		padding: 48px 0 32px;
	}

	.charm-intro__motto {
		width: 100%;
		margin-top: 24px;
		padding: 14px 16px;
		font-size: 18px;
	}

	.voice {
		padding: 56px 0;
	}

	.voice__links {
		flex-direction: column;
		gap: 12px;
	}

	.voice__link {
		min-width: 0;
		padding: 16px 20px;
	}

	.reason {
		padding: 0 0 56px;
	}

	.reason-row + .reason-row {
		margin-top: 48px;
	}

	.reason-row__no {
		font-size: 32px;
	}

	.reason-row__title {
		font-size: 20px;
	}

	.reason-row__text {
		font-size: 14px;
		line-height: 1.9;
	}

	.reason-row__points {
		padding: 16px 20px;
	}

	.warranty,
	.charm-benefit,
	.charm-staff {
		padding: 56px 0;
	}

	/* ★2026-10-30 趣味・愛車を足したため、スマホは3カラムから2カラムに変更 */
	.charm-staff__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px;
	}

	.charm-staff__photo,
	.charm-staff__data {
		max-width: 220px;
	}

	.warranty__table th,
	.warranty__table td {
		padding: 14px 16px;
		font-size: 14px;
	}

	.warranty__term {
		font-size: 16px;
	}

	.charm-benefit__item {
		padding: 24px;
	}

	.charm-benefit__title {
		font-size: 18px;
	}

	.charm-staff__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
		margin-top: 32px;
	}

	.charm-staff__photo {
		max-width: 160px;
	}

	.charm-staff__comment {
		font-size: 12px;
		line-height: 1.7;
	}




}