@charset "UTF-8";
/* ==========================================================================
   訳あり物件買取 比較・診断LP
   配色は旧LP（style_home.css）の設計を踏襲：ティール／朱赤／金＋明朝見出し
   ========================================================================== */

#wh-lp {
	--teal: #0da9a0;
	--teal-d: #0a8a83;
	--red: #d9333f;
	--gold: #c9a227;
	--ink: #2b2b2b;
	--ink-l: #5a5a5a;
	--line: #e3e3e3;
	--bg: #fbfaf7;
	--bg-2: #f2f8f7;
	--mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;

	color: var(--ink);
	font-size: 16px;
	line-height: 1.85;
	background: var(--bg);
	overflow-x: hidden;
}
#wh-lp *, #wh-lp *::before, #wh-lp *::after { box-sizing: border-box; }
#wh-lp img { max-width: 100%; height: auto; }
#wh-lp a { color: var(--teal-d); }

.wh-inner { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.wh-sec { padding: 64px 0; }
.wh-sec__lead { text-align: center; color: var(--ink-l); font-size: .92em; margin: -12px 0 32px; }

/* 見出し */
.wh-h2 {
	font-family: var(--mincho);
	font-size: clamp(22px, 4.4vw, 34px);
	line-height: 1.5;
	text-align: center;
	margin: 0 0 32px;
	padding-bottom: 18px;
	position: relative;
}
.wh-h2::after {
	content: ""; position: absolute; left: 50%; bottom: 0;
	width: 56px; height: 3px; margin-left: -28px; background: var(--teal);
}

/* PR表記（消さない） */
.wh-pr {
	margin: 0; padding: 7px 20px;
	background: #4a4a4a; color: #fff;
	font-size: 11px; line-height: 1.5; text-align: center; letter-spacing: .02em;
}

/* ---------- ボタン ---------- */
.wh-btn {
	display: inline-block; text-decoration: none; font-weight: 700;
	padding: 16px 32px; border-radius: 999px; border: 0; cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	text-align: center; line-height: 1.4;
}
.wh-btn--primary {
	background: linear-gradient(180deg, #ff8a3d 0%, #f26522 100%);
	color: #fff; box-shadow: 0 4px 0 #c94f16;
	font-size: clamp(15px, 2.6vw, 18px);
}
.wh-btn--primary:hover { transform: translateY(2px); box-shadow: 0 2px 0 #c94f16; color: #fff; }
.wh-btn--sm { padding: 9px 16px; font-size: 13px; background: var(--teal); color: #fff; box-shadow: 0 3px 0 var(--teal-d); white-space: nowrap; }
.wh-btn--sm:hover { color: #fff; transform: translateY(1px); box-shadow: 0 2px 0 var(--teal-d); }
.wh-btn--wide { display: block; width: 100%; max-width: 520px; margin: 24px auto 8px; }

/* ---------- 1. FV ---------- */
.wh-fv {
	padding: 48px 0 56px;
	background:
		linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.9)),
		url(../images/bg_section_7_1_pc.jpg) center/cover no-repeat;
	text-align: center;
}
.wh-fv__eyebrow {
	display: inline-block; margin: 0 0 14px; padding: 4px 14px;
	background: var(--teal); color: #fff; font-size: clamp(12px, 2.4vw, 14px);
	font-weight: 700; border-radius: 4px;
}
.wh-fv__title {
	font-family: var(--mincho); font-weight: 700;
	font-size: clamp(24px, 5.4vw, 42px); line-height: 1.45;
	margin: 0 0 20px;
}
.wh-fv__title span { color: var(--red); }
.wh-fv__lead {
	max-width: 720px; margin: 0 auto 28px; text-align: left;
	font-size: clamp(14px, 2.6vw, 16px); color: var(--ink-l);
}
.wh-fv__lead strong { color: var(--ink); border-bottom: 2px solid #ffe066; }

/* ---------- 2. お悩み ---------- */
.wh-worry { background: var(--bg-2); }
.wh-worry__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.wh-worry__list li {
	background: #fff; border: 1px solid var(--line); border-radius: 8px;
	padding: 16px 16px 16px 48px; position: relative; font-size: .95em;
}
.wh-worry__list li::before {
	content: ""; position: absolute; left: 16px; top: 20px;
	width: 20px; height: 20px;
	background: url(../images/icon_check.png) center/contain no-repeat;
}

/* ---------- 3. 解説 ---------- */
.wh-explain__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.wh-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.wh-card h3 { font-size: 1.05em; margin: 0 0 10px; color: var(--teal-d); line-height: 1.5; }
.wh-card p { margin: 0; font-size: .9em; color: var(--ink-l); }

/* ---------- 4. 診断 ---------- */
.wh-shindan {
	background:
		linear-gradient(rgba(13,169,160,.9), rgba(10,138,131,.92)),
		url(../images/bg_section_5_pc.jpg) center/cover no-repeat;
	color: #fff;
}
.wh-shindan .wh-h2 { color: #fff; }
.wh-shindan .wh-h2::after { background: #fff; }
.wh-shindan .wh-sec__lead { color: rgba(255,255,255,.9); }
.wh-shindan__btns { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wh-shindan__btn {
	background: #fff; border: 3px solid transparent; border-radius: 10px;
	padding: 20px 16px; cursor: pointer; text-align: center;
	font-family: inherit; display: block; width: 100%;
	transition: border-color .15s ease, transform .15s ease;
}
.wh-shindan__btn:hover { transform: translateY(-3px); border-color: #ffd54f; }
.wh-shindan__btn[aria-pressed="true"] { border-color: var(--red); }
.wh-shindan__label { display: block; font-size: 1.05em; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.wh-shindan__note { display: block; font-size: .78em; color: var(--ink-l); line-height: 1.6; }
.wh-shindan__result {
	margin: 28px auto 0; max-width: 620px; background: #fff; color: var(--ink);
	border-radius: 12px; padding: 28px 24px; text-align: center;
}
.wh-shindan__resultlead { margin: 0 0 18px; font-size: 1.02em; }
.wh-shindan__resultlead strong { color: var(--red); font-size: 1.15em; }
.wh-shindan__sub { margin: 14px 0 0; font-size: .85em; }

/* ---------- 5. 比較表 ---------- */
.wh-table__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.wh-table { border-collapse: collapse; width: 100%; min-width: 900px; font-size: .86em; }
.wh-table th, .wh-table td { border-bottom: 1px solid var(--line); padding: 14px 12px; text-align: left; vertical-align: middle; }
.wh-table thead th { background: #3f4a4a; color: #fff; font-weight: 700; white-space: nowrap; }
.wh-table tbody tr:nth-child(even) { background: #fafafa; }
.wh-table tbody th[scope="row"] { width: 210px; }
.wh-table__name { display: block; font-weight: 700; font-size: 1.12em; }
.wh-table__co { display: block; font-size: .78em; color: var(--ink-l); font-weight: 400; }
.wh-tag { display: inline-block; background: #fff3e0; color: #d2691e; border: 1px solid #f5c99b; border-radius: 4px; padding: 3px 10px; font-weight: 700; white-space: nowrap; }

/* ---------- 6. 各社詳細 ---------- */
.wh-detail { background: var(--bg-2); }
.wh-detail__item {
	background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--teal);
	border-radius: 10px; padding: 28px 24px; margin-bottom: 28px;
}
.wh-detail__head { border-bottom: 1px dashed var(--line); padding-bottom: 14px; margin-bottom: 16px; }
.wh-detail__tag { display: inline-block; background: var(--teal); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 4px; }
.wh-detail__name { font-family: var(--mincho); font-size: clamp(20px, 3.6vw, 28px); margin: 10px 0 4px; line-height: 1.4; }
.wh-detail__co { margin: 0; font-size: .78em; color: var(--ink-l); }
.wh-detail__catch { font-size: 1.02em; font-weight: 700; color: var(--red); margin: 0 0 16px; }
.wh-check { list-style: none; margin: 0 0 18px; padding: 0; }
.wh-check li { position: relative; padding: 6px 0 6px 30px; font-size: .92em; }
.wh-check li::before {
	content: ""; position: absolute; left: 0; top: 10px; width: 20px; height: 20px;
	background: url(../images/icon_check.png) center/contain no-repeat;
}
.wh-spec { display: grid; grid-template-columns: 120px 1fr; gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); font-size: .86em; }
.wh-spec dt { background: #f5f5f5; padding: 10px 12px; font-weight: 700; margin: 0; }
.wh-spec dd { background: #fff; padding: 10px 12px; margin: 0; }
.wh-detail__src { margin: 0; text-align: center; font-size: 11px; color: #999; }

/* ---------- 7. ポイント ---------- */
.wh-point__list { list-style: none; margin: 0; padding: 0; }
.wh-point__list li {
	display: flex; gap: 20px; align-items: flex-start;
	background: #fff; border: 1px solid var(--line); border-radius: 10px;
	padding: 22px; margin-bottom: 16px;
}
.wh-point__list img { width: 68px; flex: 0 0 68px; }
.wh-point__list h3 { font-size: 1.05em; margin: 0 0 8px; color: var(--gold); }
.wh-point__list p { margin: 0; font-size: .9em; color: var(--ink-l); }

/* ---------- 8. 流れ ---------- */
.wh-flow {
	background:
		linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.95)),
		url(../images/bg_section_6_pc.jpg) center/cover no-repeat;
}
.wh-flow__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.wh-flow__list li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 20px 16px; text-align: center; }
.wh-flow__list img { width: 60px; margin: 0 auto 10px; }
.wh-flow__list h3 { font-size: .98em; margin: 0 0 8px; }
.wh-flow__list p { margin: 0; font-size: .82em; color: var(--ink-l); text-align: left; }

/* ---------- 9. FAQ ---------- */
.wh-faq { background: var(--bg-2); }
.wh-faq__list { margin: 0; max-width: 820px; margin-inline: auto; }
.wh-faq__list dt {
	background: #fff; border: 1px solid var(--line); border-radius: 8px 8px 0 0;
	padding: 16px 16px 16px 46px; font-weight: 700; position: relative; font-size: .96em;
}
.wh-faq__list dt::before {
	content: "Q"; position: absolute; left: 16px; top: 15px;
	color: var(--teal); font-family: var(--mincho); font-size: 1.15em;
}
.wh-faq__list dd {
	background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px;
	margin: 0 0 14px; padding: 14px 16px 16px 46px; position: relative; font-size: .9em; color: var(--ink-l);
}
.wh-faq__list dd::before {
	content: "A"; position: absolute; left: 16px; top: 13px;
	color: var(--red); font-family: var(--mincho); font-size: 1.15em;
}

/* ---------- 10. 運営者情報 ---------- */
.wh-about { padding-bottom: 110px; }
.wh-about p { font-size: .84em; color: var(--ink-l); max-width: 820px; margin: 0 auto 12px; }
.wh-about__meta { border-top: 1px solid var(--line); padding-top: 14px; }

/* ---------- 追従CTA ---------- */
.wh-fixcta { display: none; }

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
	#wh-lp { font-size: 15px; }
	.wh-sec { padding: 44px 0; }
	.wh-fv { background-image: linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.9)), url(../images/bg_section_7_1_sp.jpg); }
	.wh-shindan { background-image: linear-gradient(rgba(13,169,160,.9), rgba(10,138,131,.92)), url(../images/bg_section_5_sp.jpg); }
	.wh-flow { background-image: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.95)), url(../images/bg_section_6_sp.jpg); }
	.wh-point__list li { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
	.wh-point__list p { text-align: left; }
	.wh-spec { grid-template-columns: 96px 1fr; }
	.wh-table__wrap::after { content: "→ 横にスクロールできます"; display: block; padding: 8px; font-size: 11px; color: #999; text-align: right; }

	.wh-fixcta {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
		padding: 10px 14px; background: rgba(255,255,255,.96);
		box-shadow: 0 -2px 10px rgba(0,0,0,.12);
	}
	.wh-fixcta .wh-btn { display: block; width: 100%; padding: 14px; }
}

/* ---------- スクロールアニメーション用の初期状態 ---------- */
.wh-reveal { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wh-reveal { opacity: 1 !important; transform: none !important; } }