/* ==========================================================================
   sections.css … セクションごとのスタイル（template.php の並び順）
   ========================================================================== */

/* ---- ファーストビュー --------------------------------------------------- */
/* FV の文字画像は背景が透明なので、空と街並みの背景画像を敷く */
.hero__visual {
	display: block;
	background: #d7eefb url(../images/hero/bg-sp.png) center bottom / cover no-repeat;
	font-size: 0;
	text-align: center;
}

.hero__visual img {
	width: 100%;
	max-width: 1290px;
}

@media (min-width: 768px) {
	.hero__visual {
		background-image: url(../images/hero/bg-pc.png);
	}
}

.hero__fallback {
	display: block;
	padding: 48px var(--gutter);
	background: var(--c-main);
	color: #fff;
	font-size: 26px;
	font-weight: 900;
	text-align: center;
}

.hero__cta {
	padding: 12px var(--gutter) 20px;
	background: linear-gradient(180deg, var(--c-main-soft), #fff);
}

.hero__badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	max-width: 600px;
	margin: 0 auto 12px !important;
}

.hero__badges li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px 4px;
	border: 2px solid var(--c-main);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--c-main-dark);
	font-size: clamp(12px, 3.5vw, 15px);
	font-weight: 900;
	line-height: 1.3;
	text-align: center;
}

.hero__badges .icon {
	display: grid;
	width: 20px;
	height: 20px;
	padding: 3px;
	border-radius: 50%;
	background: var(--c-main);
	fill: #fff;
}

/* ---- 口コミサイト受賞 --------------------------------------------------- */
/* 画像の背景が透明なので、金メダルが映えるクリーム色の背景を敷く */
.awards {
	padding: 8px var(--gutter) 20px;
	background:
		radial-gradient(ellipse 80% 60% at 50% 70%, rgba(255, 214, 102, .35), transparent 70%),
		linear-gradient(180deg, #fff 0%, #fff8e1 100%);
	text-align: center;
}

.awards img {
	width: 100%;
	max-width: 560px;
}

@media (min-width: 768px) {
	.awards img {
		max-width: 960px;
	}
}

/* ---- 選ばれる理由 ------------------------------------------------------- */
.reasons__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.reasons__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 18px 10px 16px;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
	text-align: center;
}

.reasons__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--c-main);
	color: #fff;
	box-shadow: 0 0 0 4px var(--c-main-soft), 0 0 0 6px var(--c-accent);
}

.reasons__icon .icon {
	font-size: 30px;
}

.reasons__title {
	color: var(--c-main-dark);
	font-size: clamp(15px, 4.2vw, 18px);
	font-weight: 900;
	line-height: 1.4;
}

.reasons__text {
	margin-top: 6px !important;
	color: var(--c-muted);
	font-size: 12px;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.reasons__list {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	.reasons__item {
		padding: 24px 14px 20px;
	}

	.reasons__text {
		font-size: 13px;
	}
}

/* ---- サービス内容 ------------------------------------------------------- */
.services__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.services__item {
	overflow: hidden;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
}

.services__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.services__body {
	padding: 10px 8px 12px;
	text-align: center;
}

.services__title {
	color: var(--c-main-dark);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.4;
}

.services__text {
	margin-top: 4px !important;
	color: var(--c-muted);
	font-size: 12px;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.services__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.services__title {
		font-size: 18px;
	}

	.services__text {
		font-size: 13px;
	}
}

/* ---- ご依頼の流れ ------------------------------------------------------- */
.flow__list {
	display: grid;
	gap: 28px;
	counter-reset: flow;
}

.flow__item {
	position: relative;
	display: grid;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
}

/* ステップ間の矢印 */
.flow__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -22px;
	width: 0;
	height: 0;
	margin-left: -16px;
	border: 16px solid transparent;
	border-top: 12px solid var(--c-main);
	border-bottom: 0;
}

.flow__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius) var(--radius) 0 0;
}

.flow__media img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.flow__step {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 12px;
	border-radius: 0 0 var(--radius-sm) 0;
	background: var(--c-main);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .1em;
}

.flow__step b {
	font-size: 24px;
	letter-spacing: 0;
}

.flow__body {
	padding: 14px 16px 18px;
}

.flow__title {
	color: var(--c-main-dark);
	font-size: 19px;
	font-weight: 900;
}

.flow__text {
	margin-top: 6px !important;
	font-size: 14px;
	line-height: 1.75;
}

.flow__tel {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	color: var(--c-main);
	font-size: 20px;
	font-weight: 900;
	border-bottom: 3px solid var(--c-accent);
}

@media (min-width: 768px) {
	.flow__list {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	.flow__item:not(:last-child)::after {
		left: auto;
		right: -17px;
		top: 30%;
		bottom: auto;
		margin: 0;
		border: 12px solid transparent;
		border-left: 10px solid var(--c-main);
		border-right: 0;
	}

	.flow__text {
		font-size: 13px;
	}

	.flow__tel {
		font-size: 17px;
	}
}

/* ---- 料金パック -------------------------------------------------------- */
.packs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px 10px;
	margin-top: 8px !important;
}

.pack {
	display: flex;
	flex-direction: column;
	border: 3px solid var(--c-main);
	border-radius: var(--radius);
	background: #fff;
	text-align: center;
}

.pack__visual {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 64px;
	margin: -22px 8px 0;
}

.pack__visual img {
	max-height: 64px;
	width: auto;
	max-width: 74%;
	object-fit: contain;
}

.pack__m3 {
	position: absolute;
	right: -10px;
	top: -6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-ink);
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .1);
}

.pack__m3 small {
	font-size: 9px;
}

.pack__m3 b {
	color: var(--c-price);
	font-size: 18px;
	margin-top: 1px;
}

.pack__name {
	margin-top: 4px !important;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.1;
}

.pack__name b {
	margin-right: 2px;
	color: var(--c-price);
	font-size: 36px;
	letter-spacing: .02em;
}

.pack__type {
	padding: 4px 4px;
	background: var(--c-main);
	color: #fff;
	font-size: clamp(12px, 3.4vw, 15px);
	font-weight: 900;
	letter-spacing: .06em;
}

.pack__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 10px 6px 12px;
}

.pack__text {
	font-size: 12px;
	line-height: 1.55;
}

.pack__vehicle {
	margin-top: 6px !important;
	color: var(--c-main);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .12em;
}

.pack__price {
	margin-top: auto !important;
	padding-top: 2px;
	color: var(--c-ink);
	font-size: 13px;
	font-weight: 900;
}

.pack__price b {
	color: var(--c-price);
	font-size: clamp(28px, 8.4vw, 40px);
	letter-spacing: -.01em;
	line-height: 1.1;
}

.pack__price--ask {
	color: var(--c-price);
	font-size: clamp(15px, 4.4vw, 20px);
	white-space: normal;
}

.pack__note {
	color: var(--c-muted);
	font-size: 10px;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.packs {
		grid-template-columns: repeat(3, 1fr);
		gap: 44px 20px;
	}

	.pack__visual {
		height: 84px;
		margin-top: -30px;
	}

	.pack__visual img {
		max-height: 84px;
	}

	.pack__m3 {
		right: -6px;
		width: 62px;
		height: 62px;
	}

	.pack__m3 b {
		font-size: 22px;
	}

	.pack__text {
		font-size: 14px;
	}
}

/* ---- 他社比較 ---------------------------------------------------------- */
.compare__wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 12px 8px 8px;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
}

.compare__table {
	table-layout: fixed;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

.compare__table th,
.compare__table td {
	padding: 10px 4px;
	border-bottom: 1px solid var(--c-border);
}

.compare__table thead th {
	padding: 8px 4px;
	background: #9aa5b1;
	color: #fff;
	font-weight: 700;
}

.compare__table thead th:first-child {
	background: transparent;
}

.compare__table tbody th {
	width: 26%;
	background: #f4f6f8;
	font-weight: 700;
	font-size: 12px;
}

.compare__table td {
	color: var(--c-muted);
}

/* 当社の列を強調 */
.compare__table .is-us {
	width: 28%;
	background: #fffbe0;
	color: var(--c-main-dark);
	font-size: 15px;
	font-weight: 900;
	border-left: 3px solid var(--c-main);
	border-right: 3px solid var(--c-main);
}

.compare__table thead .is-us {
	background: var(--c-main);
	color: #fff;
	font-size: 16px;
	border-radius: 10px 10px 0 0;
}

.compare__table tbody tr:last-child .is-us {
	border-bottom: 3px solid var(--c-main);
}

@media (min-width: 768px) {
	.compare__table {
		font-size: 15px;
	}

	.compare__table tbody th {
		font-size: 14px;
	}

	.compare__table .is-us {
		font-size: 17px;
	}
}

/* ---- 対応エリア -------------------------------------------------------- */
.area__box {
	display: grid;
	gap: 16px;
	max-width: 860px;
	margin: 0 auto;
	padding: 20px 16px;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
}

.area__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-bottom: 12px !important;
	font-size: 18px;
	font-weight: 900;
}

.area__label .icon {
	color: #e60c2a;
	font-size: 24px;
}

.area__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.area__list li {
	padding: 6px 2px;
	border-radius: 6px;
	background: var(--c-main);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
}

.area__list .area__other {
	grid-column: span 4;
	background: var(--c-main-soft);
	color: var(--c-main-dark);
}

.area__map {
	text-align: center;
}

.area__map img {
	max-width: 400px;
	width: 100%;
}

@media (min-width: 768px) {
	.area__box {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		padding: 32px;
	}

	.area__list li {
		font-size: 14px;
	}
}

/* ---- 回収事例 ---------------------------------------------------------- */
.cases__list {
	display: grid;
	gap: 20px;
}

.case {
	position: relative;
	padding: 0 0 16px;
	overflow: hidden;
	border: 2px solid var(--c-main);
	border-radius: var(--radius);
	background: #fff;
}

.case__no {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	padding: 2px 14px;
	border-radius: 0 0 var(--radius-sm) 0;
	background: var(--c-main);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
}

.case__no b {
	font-size: 20px;
}

.case__title {
	padding: 8px 16px 10px;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.4;
}

.case__title small {
	display: block;
	color: var(--c-muted);
	font-size: 13px;
	font-weight: 700;
}

.case__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.case__spec {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 12px 16px 0;
}

.case__spec div {
	padding: 6px;
	border-radius: 6px;
	background: var(--c-main-soft);
	text-align: center;
	line-height: 1.4;
}

.case__spec dt {
	color: var(--c-muted);
	font-size: 11px;
}

.case__spec dd {
	font-size: 16px;
	font-weight: 900;
}

.case__fee {
	margin: 10px 16px 0 !important;
	font-size: 14px;
}

.case__fee div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px dashed var(--c-border);
}

.case__fee dd {
	font-weight: 700;
	white-space: nowrap;
}

.case__buy {
	color: #e60c2a;
}

.case__buy small {
	display: block;
	font-size: 11px;
}

.case__total {
	margin: 10px 16px 0 !important;
	padding: 8px;
	border-radius: var(--radius-sm);
	background: var(--c-accent);
	font-size: 15px;
	font-weight: 900;
	text-align: center;
}

.case__total b {
	margin: 0 2px 0 8px;
	color: #e60c2a;
	font-size: 28px;
	line-height: 1;
}

@media (min-width: 768px) {
	.cases__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---- よくある質問 ------------------------------------------------------ */
.faq__list {
	display: grid;
	gap: 10px;
	max-width: 820px;
	margin: 0 auto;
}

.faq__item {
	border-radius: var(--radius-sm);
	background: #fff;
	box-shadow: var(--shadow);
}

.faq__q {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 44px 14px 14px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	list-style: none;
}

.faq__q::-webkit-details-marker {
	display: none;
}

/* ＋／− */
.faq__q::before,
.faq__q::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 14px;
	height: 2px;
	background: var(--c-main);
	transition: transform .2s ease;
}

.faq__q::after {
	transform: rotate(90deg);
}

.faq__item[open] .faq__q::after {
	transform: rotate(0deg);
}

.faq__mark {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--c-main);
	color: #fff;
	font-size: 15px;
	font-weight: 900;
}

.faq__mark--a {
	background: var(--c-price);
}

.faq__a {
	display: flex;
	gap: 10px;
	padding: 0 14px 16px;
	font-size: 14px;
	line-height: 1.75;
}

.faq__a p {
	padding-top: 3px;
}

/* ---- フッター ---------------------------------------------------------- */
.lp-footer {
	padding: 32px var(--gutter) 24px;
	background: var(--c-dark);
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	text-align: center;
}

.lp-footer__inner {
	max-width: var(--w-content);
	margin: 0 auto;
}

.lp-footer__brand {
	color: #fff;
	font-size: 17px;
	font-weight: 900;
}

.lp-footer__info {
	margin-top: 8px !important;
	line-height: 1.8;
}

.lp-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 16px;
	margin-top: 16px !important;
	font-size: 12px;
}

.lp-footer__links a {
	text-decoration: underline;
}

.lp-footer__copy {
	margin-top: 20px !important;
	color: rgba(255, 255, 255, .55);
	font-size: 11px;
}