@charset "utf-8";

/**
 * TOP ページ専用スタイル。
 *
 * 既存の style.css / medium.css / sp.css には手を入れず、このファイルだけで完結させる。
 * header.php のハードコード <link> より後に wp_head() が来るので後勝ちで効く。
 *
 * ■ 寸法の根拠（Figma 実測）
 *   フレーム 1440x7795 に対し、コンテンツ列は W=665（X=387 で中央）。
 *   本文 11px / ブロック見出し 15px / セクション見出し 18px / 見出し帯 H=42・角丸 9。
 *   一方この сайт の既存 .inner は 1000px（style.css:282）。
 *   665 → 1000 は 1.504 倍で、本文 11px×1.5 = 16.5px が既存本文 16px とほぼ一致する。
 *   つまりデザインは約 2/3 スケールで描かれている。よって全体を 1.5 倍して再現する。
 *   （そのまま 665px で作ると、1000px のヘッダー・フッターに対して極端に細くなる）
 *
 * ■ 単位
 *   テーマは html{font-size:100px} を全ブレークポイントで宣言しており 1rem = 100px 固定。
 *   スケール変換が入らないので、ここでは誤読を避けて px で書く。
 */

/*
 * category.css:16 の main{width:875px} は PC 用（min-width:881px）で全ページに読み込まれる。
 * 旧 front-page.php は <main> を使っていなかったので表面化しなかったが、
 * 新 TOP は <main class="kp-front"> なので幅 875px に潰れて右側が大きく空く。
 * category.css 側は他ページの回帰リスクがあるため触らず、ここで打ち消す（D13）。
 */
/*
 * header.php の .nav_wrap（PC）／.sp_nav_wrap（SP）は position:fixed。
 * 旧 TOP は先頭が余白付きの画像だったので目立たなかったが、新 FV は背景画像の
 * 上端がヘッダーに隠れる。ヘッダー実測分だけ本文を下げる（--kp-hdr-h）。
 *   SP(<=660) 固定 50px / medium(661-880) は static のため 0 / PC は幅で 64-84px
 */
main.kp-front {
	width: 100%;
	padding-top: var(--kp-hdr-h, 0px);
}

.kp-front {
	--kp-pink: #f16b6f;
	--kp-pink-dark: #d8545c;
	--kp-pink-soft: #fff4f2;
	--kp-pink-line: #f2e0da;
	--kp-cream: #fff9f4;
	--kp-teal: #2fa3b6;
	--kp-green: #82c294;
	--kp-yellow: #fbc55a;
	--kp-yellow-dark: #f0ad2e;
	--kp-ink: #333333;
	--kp-ink-soft: #6b6360;
	--kp-ink-mute: #9a918d;
	--kp-white: #ffffff;
	--kp-star: #f5a623;
	--kp-star-off: #e6ddd8;

	--kp-radius: 14px;
	--kp-radius-sm: 8px;
	--kp-gap: 24px;
	--kp-inner: 1000px;
	--kp-dot: rgba(241, 107, 111, .09);
	--kp-hdr-h: 50px;

	color: var(--kp-ink);
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	background: var(--kp-white);
}

.kp-front *,
.kp-front *::before,
.kp-front *::after {
	box-sizing: border-box;
}

.kp-front img {
	max-width: 100%;
	height: auto;
}

/*
 * JS の絞り込みは el.hidden で行っている。
 * .kp-chip{display:flex} や a{display:block} など display 指定のある要素は
 * UA の [hidden]{display:none} に勝ってしまい、絞り込みが効かなくなるので打ち消す。
 */
.kp-front [hidden] {
	display: none !important;
}

.kp-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ *
 * セクション共通
 * ------------------------------------------------------------------ */
.kp-sec {
	padding: 40px 0 56px;
	background: var(--kp-pink-soft);
}

.kp-sec--columns,
.kp-sec--cats {
	background: var(--kp-pink-soft);
}

/*
 * デザインではセクション背景がドット地で、その上に白パネルが乗る。
 * 支給された dotted-bg.png に合わせて、直線並びではなく市松（半ピッチずらし）に置く。
 * 画像アセットを増やさず radial-gradient 2 枚で作る。
 */
.kp-sec--area,
.kp-sec--faq {
	background-image:
		radial-gradient(var(--kp-dot) 3px, transparent 3px),
		radial-gradient(var(--kp-dot) 3px, transparent 3px);
	background-position: 0 0, 14px 14px;
	background-size: 28px 28px, 28px 28px;
}

/* エリアセクションは FAQ と同じ「白地＋ドット」（指示）。特集記事はドット無しのベタ塗り。 */
.kp-sec--area {
	background-color: var(--kp-white);
}

/* 見出し帯の下に置く白パネル。見出しはドット地の上に残す。 */
.kp-sec__panel {
	background: var(--kp-white);
	border-radius: var(--kp-radius);
	padding: 24px 20px;
}

.kp-sec--faq {
	background-color: var(--kp-white);
}

.kp-sec__inner {
	width: min(var(--kp-inner), calc(100% - 32px));
	margin-inline: auto;
}

/*
 * 見出しは全ブレークポイントで 1 行、かつ帯の幅いっぱいに収める。
 * 文字数（--kp-head-len）は kp_front_section_heading() が出力する。
 * 「使える幅 ÷ 文字数」で文字サイズを決めるので、短い見出しは大きく、
 * 最長の「一括査定サイトと買取プラスの違いとは？」（19 文字）でも折り返さない。
 * 係数 1.08 は全角の実測字幅（letter-spacing 0、記号混在ぶん）に合わせた補正。
 */
.kp-sec__heading {
	--kp-head-pad: clamp(9px, 3vw, 24px);
	--kp-head-icon: clamp(18px, 5vw, 28px);
	--kp-head-gap: clamp(6px, 2vw, 12px);
	--kp-head-avail: calc(min(var(--kp-inner), 100vw - 32px) - 2 * var(--kp-head-pad) - var(--kp-head-icon) - var(--kp-head-gap) - 2px);

	display: flex;
	align-items: center;
	gap: var(--kp-head-gap);
	margin: 0 0 28px;
	padding: 12px var(--kp-head-pad);
	min-height: 52px;
	border-radius: var(--kp-radius);
	background: var(--kp-pink);
	color: var(--kp-white);
	font-size: min(27px, calc(var(--kp-head-avail) / (var(--kp-head-len, 14) * 1.08)));
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	scroll-margin-top: 24px;
}

.kp-sec__heading-text {
	white-space: nowrap;
}

.kp-sec__icon {
	flex: 0 0 auto;
	width: clamp(18px, 5vw, 28px);
	height: clamp(18px, 5vw, 28px);
}

.kp-sec__foot {
	margin: 40px 0 0;
	text-align: center;
}

/* 見出し帯を旧セクション（買取プラスとは？ / 一括査定との違い）にも合わせる */
.kp-legacy .kp-sec__heading {
	width: min(var(--kp-inner), calc(100% - 32px));
	margin-inline: auto;
}

/* ------------------------------------------------------------------ *
 * 汎用パーツ
 * ------------------------------------------------------------------ */
.kp-card {
	background: var(--kp-white);
	border-radius: var(--kp-radius);
	padding: 28px;
}

.kp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 12px 32px;
	border-radius: 999px;
	background: var(--kp-yellow);
	color: #4a3a1d;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.4;
	box-shadow: 0 3px 0 var(--kp-yellow-dark);
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.kp-btn:hover,
.kp-btn:focus-visible {
	background: #ffd275;
	transform: translateY(1px);
	box-shadow: 0 2px 0 var(--kp-yellow-dark);
}

.kp-btn--wide {
	width: min(640px, 100%);
}

.kp-btn__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid currentColor;
	position: relative;
}

.kp-btn__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6px;
	height: 6px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateX(-2px) rotate(45deg);
}

.kp-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* スマホのタップ領域として 44px。PC では下部のメディアクエリで詰める。 */
	min-height: 44px;
	padding: 6px 20px;
	border-radius: 999px;
	border: 1px solid var(--kp-pink-line);
	background: var(--kp-cream);
	color: var(--kp-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.kp-chip:hover,
.kp-chip:focus-visible {
	background: #ffe9e4;
	border-color: #f3c4bc;
}

.kp-chip.is-active,
.kp-chip[aria-pressed="true"] {
	background: var(--kp-pink);
	border-color: var(--kp-pink);
	color: var(--kp-white);
	font-weight: 700;
}

.kp-link {
	color: var(--kp-teal);
	font-size: 16px;
	line-height: 1.8;
	text-decoration: underline;
	white-space: nowrap;
}

.kp-link:hover {
	color: #1f8395;
}

.kp-panel {
	background: var(--kp-white);
	border-radius: var(--kp-radius);
	padding: 20px 24px;
}

.kp-panel__label {
	margin: 0 0 14px;
	color: var(--kp-ink-mute);
	font-size: 15px;
	font-weight: 700;
}

.kp-panel__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.kp-panel__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
}

/*
 * 市区町村リンクは行高 29px しか無くスマホで押しづらいので 44px を確保する。
 * 行間ではなくリンク自体の当たり判定を広げるため inline-flex + min-height。
 */
.kp-panel__links .kp-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.kp-block__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}

.kp-block__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--kp-pink);
	color: var(--kp-white);
	font-size: 13px;
	font-weight: 700;
}

.kp-block__icon--pin::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kp-block__icon--abc {
	background: var(--kp-teal);
	letter-spacing: .02em;
}

.kp-block__desc {
	margin: 0 0 18px;
	color: var(--kp-ink-soft);
	font-size: 16px;
	line-height: 1.7;
}

/* ------------------------------------------------------------------ *
 * 1. FV + 検索
 * ------------------------------------------------------------------ */
.kp-fv {
	position: relative;
	padding: 24px 0 48px;
	/* LCP 要素。WebP 対応ブラウザは webp（実測 134KB → 54KB）、非対応は PNG。 */
	background: var(--kp-pink-soft) url("../images/header_bg_sp.png") center top / cover no-repeat;
	background-image: image-set(url("../images/header_bg_sp.webp") type("image/webp"), url("../images/header_bg_sp.png") type("image/png"));
}

.kp-fv__inner {
	width: min(var(--kp-inner), calc(100% - 32px));
	margin-inline: auto;
}

.kp-fv__lead {
	text-align: center;
}

/* h1 はキャッチコピー画像のラッパー。余白はコピー側で持つ。 */
.kp-fv__title {
	margin: 0;
	font-size: inherit;
	line-height: 0;
}

.kp-fv__headline {
	width: min(680px, 100%);
	height: auto;
}

.kp-fv__copy {
	margin: 8px 0 24px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
}

.kp-fv__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 32px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	font-size: 17px;
	font-weight: 700;
}

.kp-fv__stat b {
	color: var(--kp-pink);
	font-size: 22px;
	/* Noto Sans JP の読み込みを 400/700 に絞ったので、900 を要求していたここを 700 で固定する
	   （900 を使う要素はページ全体でこの 2 つだけだった。実測 = 900 の webfont で約 600KB） */
	font-weight: 700;
}

.kp-search {
	background: rgba(255, 255, 255, .78);
	border-radius: 20px;
	padding: 22px 24px 26px;
	backdrop-filter: blur(2px);
}

.kp-search__title {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	color: #5a544e;
	text-align: center;
}

.kp-search__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.kp-search__field {
	margin: 0;
}

.kp-search__label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--kp-ink-soft);
}

.kp-search__select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 52px;
	padding: 10px 42px 10px 16px;
	border: 1px solid #ded5d0;
	border-radius: 10px;
	background: var(--kp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
	color: var(--kp-ink);
	font-size: 16px;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
}

.kp-search__select:disabled {
	background-color: #f3efec;
	color: var(--kp-ink-mute);
	cursor: not-allowed;
}

.kp-search__submit-wrap {
	margin: 4px 0 0;
}

.kp-search__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 58px;
	padding: 12px 24px;
	border: 0;
	border-radius: 12px;
	background: var(--kp-yellow);
	color: #4a3a1d;
	font-family: inherit;
	font-size: 19px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 3px 0 var(--kp-yellow-dark);
	transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}

.kp-search__submit:hover,
.kp-search__submit:focus-visible {
	background: #ffd275;
	transform: translateY(1px);
	box-shadow: 0 2px 0 var(--kp-yellow-dark);
}

.kp-search__submit-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid currentColor;
	position: relative;
}

.kp-search__submit-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6px;
	height: 6px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateX(-2px) rotate(45deg);
}

.kp-search__status {
	margin: 12px 0 0;
	color: var(--kp-pink-dark);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.kp-search__status:empty {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 2. 買取カテゴリーから探す（タブ + 業者カード）
 * ------------------------------------------------------------------ */
.kp-tabs {
	position: relative;
	margin-bottom: 24px;
}

.kp-tabs__scroller {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.kp-tabs__scroller::-webkit-scrollbar {
	display: none;
}

.kp-tabs__list {
	display: flex;
	gap: 8px;
	padding: 4px 0;
	width: max-content;
	min-width: 100%;
}

/*
 * タブの意匠は支給デザイン（header-design.png）準拠。
 *   非選択: 薄グレー地・グレー文字・上角のみ丸め
 *   選択中: 白地・濃い文字・ピンクの外枠＋下辺 3px のピンクバー
 * 下辺バーは border-bottom で作ると 1px の隙間が出るので box-shadow の inset で描く。
 */
.kp-tabs__tab {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid #e6e6e6;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: #f4f4f4;
	color: #8d8d8d;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease;
}

.kp-tabs__tab:hover {
	background: #ececec;
	color: #6b6360;
}

.kp-tabs__tab.is-active {
	background: var(--kp-white);
	color: var(--kp-ink);
	border-color: var(--kp-pink);
	box-shadow: inset 0 -3px 0 0 var(--kp-pink);
}

.kp-tabs__tab.is-active:hover {
	background: var(--kp-white);
	color: var(--kp-ink);
}

/* 支給デザインでは丸ボタンではなく、タブに重なるグレーの太い矢印。 */
.kp-tabs__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 2;
}

.kp-tabs__nav::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 11px;
	height: 11px;
	border-top: 4px solid #9e9e9e;
	border-right: 4px solid #9e9e9e;
}

.kp-tabs__nav--prev {
	left: -6px;
}

.kp-tabs__nav--prev::before {
	transform: translateX(2px) rotate(-135deg);
}

.kp-tabs__nav--next {
	right: -6px;
}

.kp-tabs__nav--next::before {
	transform: translateX(-2px) rotate(45deg);
}

/*
 * デザインではタブと業者カードが 1 枚の白パネルに連続して乗り、
 * その下の「◯◯買取の取り扱い企業一覧を見る」ボタンはパネルの外に出る。
 * タブとリストは別要素（タブは全パネル共通）なので、上下で角丸を分けて繋げる。
 */
.kp-sec--biz .kp-tabs {
	margin-bottom: 0;
	padding: 12px 20px 0;
	background: var(--kp-white);
	border-radius: var(--kp-radius) var(--kp-radius) 0 0;
}

.kp-biz__list {
	list-style: none;
	margin: 0;
	display: grid;
	/* タブ下辺のピンクバーが唯一の区切りになるよう、上の余白は詰める。 */
	padding: 0 20px 20px;
	background: var(--kp-white);
	border-radius: 0 0 var(--kp-radius) var(--kp-radius);
}

/* パネル内はカード単位の余白ではなく区切り線で仕切る。 */
.kp-sec--biz .kp-biz-card {
	background: transparent;
	border-radius: 0;
	padding: 20px 0;
	border-bottom: 1px solid #f2e6e2;
}

.kp-sec--biz .kp-biz-card:last-child {
	border-bottom: 0;
	padding-bottom: 4px;
}

.kp-biz__empty,
.kp-col-block__empty {
	margin: 0;
	padding: 24px;
	background: var(--kp-white);
	border-radius: var(--kp-radius);
	color: var(--kp-ink-mute);
	font-size: 16px;
	text-align: center;
}

.kp-biz__more {
	margin: 28px 0 0;
	text-align: center;
}

.kp-biz-card {
	background: var(--kp-white);
	border-radius: var(--kp-radius);
	padding: 20px;
}

.kp-biz-card__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.kp-biz-card__thumb {
	flex: 0 0 auto;
}

.kp-biz-card__thumb img {
	display: block;
	width: 100%;
	/* 画像が 404 のときや極端な縦長画像でカード全体が伸びてしまうのを防ぐ上限 */
	max-height: 220px;
	border-radius: var(--kp-radius-sm);
	object-fit: cover;
}

.kp-biz-card__thumb-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--kp-radius-sm);
	background: #f3efec;
}

/*
 * スマホは 2 行目以降（バッジ・キャンペーン）もカード左端に揃える。
 * PC だけ shop-introbox.png 通り「社名の左端」に揃えたいので、
 * アイコン幅ぶんの字下げを PC のメディアクエリで足す。
 */
.kp-biz-card__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #fdeced;
	color: var(--kp-pink);
}

.kp-biz-card__badge svg {
	width: 22px;
	height: 22px;
}

/* 社名と星の間はデザイン通りしっかり空ける（アイコンとの間隔は別指定）。 */
.kp-biz-card__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 44px;
	min-height: 36px;
	margin-bottom: 14px;
}

.kp-biz-card__head .kp-biz-card__badge {
	margin-right: -30px;
}

.kp-biz-card__name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}

.kp-biz-card__name a {
	color: inherit;
	text-decoration: none;
}

.kp-biz-card__name a:hover {
	text-decoration: underline;
}

.kp-biz-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/* デザインの星は 1 つ約 23px（5 つで 115px）。 */
.kp-stars {
	display: inline-block;
	width: 115px;
	height: 23px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23e6ddd8' d='M10 1l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.8-5.4 2.8 1-6L1.3 7.4l6-.9z'/%3E%3C/svg%3E") repeat-x left center / 23px 23px;
	position: relative;
	vertical-align: middle;
}

.kp-stars::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--kp-star-fill, 0%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23f5a623' d='M10 1l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.8-5.4 2.8 1-6L1.3 7.4l6-.9z'/%3E%3C/svg%3E") repeat-x left center / 23px 23px;
}

/* デザインでは点数は星色ではなく本文色。 */
.kp-biz-card__score {
	color: var(--kp-ink);
	font-size: 21px;
	font-weight: 700;
}

.kp-biz-card__methods {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.kp-biz-card__methods {
	gap: 10px;
}

/* 買取方法バッジはデザイン指定のダークブラウン。高さ・字送りもデザインに寄せる。 */
.kp-biz-card__method {
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	padding: 4px 18px;
	border-radius: 999px;
	background: #5c4a41;
	color: var(--kp-white);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

/* キャンペーンは薄グリーン地・角丸 10・横幅たっぷり（デザイン準拠）。 */
.kp-biz-card__campaign {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: min(360px, 100%);
	margin: 0;
	padding: 10px 20px;
	min-height: 46px;
	border: 1px solid #a9d8bb;
	border-radius: 10px;
	color: #2f8055;
	font-size: 17px;
	font-weight: 700;
	background: #f5fbf7;
}

.kp-biz-card__campaign-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* デザインでは main と foot の間に区切り線は無い。 */
.kp-biz-card__foot {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 16px;
}

/*
 * 編集部コメント（shop-introbox.png）:
 *   薄クリーム地・左にピンクの縦線・引用記号は淡ピンクの丸の中。
 *   右側の角だけ大きめに丸める。
 */
.kp-biz-card__note {
	position: relative;
	padding: 18px 24px 18px 62px;
	border-left: 3px solid var(--kp-pink);
	background: #fdf4ec;
	border-radius: 0 12px 12px 0;
}

.kp-biz-card__note::before {
	content: "99";
	position: absolute;
	top: 18px;
	left: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fbe3e4;
	color: #e3888c;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -1px;
}

.kp-biz-card__note-label {
	margin: 0 0 6px;
	color: var(--kp-pink);
	font-size: 16px;
	font-weight: 700;
}

.kp-biz-card__note-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.85;
	color: #4a423f;
}

.kp-biz-card__more {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 8px 34px;
	border: 1px solid #ded5d0;
	border-radius: 10px;
	background: var(--kp-white);
	color: var(--kp-ink);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.kp-biz-card__more:hover {
	background: var(--kp-pink-soft);
	border-color: var(--kp-pink);
	color: var(--kp-pink);
}

/* ------------------------------------------------------------------ *
 * 3. エリアから探す
 * ------------------------------------------------------------------ */
.kp-map,
.kp-gojuon {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kp-gap);
}

/*
 * スマホは「見出し → 地図 → 選択結果」の操作順に並べる。
 * PC は下部のメディアクエリで左カラム（見出し＋結果）／右カラム（地図）に戻す。
 */
.kp-map {
	grid-template-areas:
		"head"
		"body"
		"side";
}

.kp-map__head {
	grid-area: head;
}

.kp-map__body {
	grid-area: body;
}

.kp-map__side {
	grid-area: side;
}

/* 地図カードはデザイン指定の薄ピンク（#FFF4F1）。 */
.kp-map {
	background: #fff4f1;
}

.kp-gojuon {
	margin-top: 24px;
	background: var(--kp-pink-soft);
	border: 1px solid var(--kp-pink-line);
}

.kp-map__current {
	margin: 0 0 10px;
	font-size: 16px;
}

.kp-map__current b {
	color: var(--kp-pink);
	font-size: 18px;
}

.kp-map__list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* スマホでセクションが伸びすぎないよう内部スクロール。PC は下で広げる。 */
	max-height: 240px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 1px solid #e8ddd8;
}

.kp-map__list li {
	border-bottom: 1px solid #e8ddd8;
}

.kp-map__list a {
	display: block;
	padding: 12px 4px;
	color: var(--kp-teal);
	font-size: 16px;
	text-decoration: underline;
}

.kp-map__empty {
	padding: 12px 4px;
	color: var(--kp-ink-mute);
	font-size: 15px;
}

.kp-map__regions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.kp-chip--region {
	min-height: 44px;
	padding: 4px 16px;
	font-size: 15px;
	background: var(--kp-white);
}

.kp-map__canvas {
	background: var(--kp-white);
	border-radius: var(--kp-radius);
	padding: 16px;
}

.kp-map__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 528px;
	transition: none;
}

.kp-map__svg .prefecture {
	fill: #fdf8f6;
	stroke: #e8b9ae;
	stroke-width: 1;
	cursor: pointer;
	transition: fill .12s ease;
}

.kp-map__svg .prefecture:hover {
	fill: #fadeda;
}

/*
 * クリック時の黒い矩形フォーカスリングは不要（選択は塗り色で分かる）。
 * ただしキーボード操作では位置が分からなくなるので :focus-visible だけ残す。
 */
.kp-map__svg:focus,
.kp-map__svg .prefecture:focus {
	outline: none;
}

.kp-map__svg .prefecture:focus-visible {
	outline: 2px solid var(--kp-teal);
	outline-offset: 2px;
}

.kp-map__svg .prefecture.is-active {
	fill: var(--kp-pink);
	stroke: #b5424b;
	stroke-width: 1.2;
}

.kp-map__svg .prefecture.is-dimmed {
	fill: #f2f2f2;
	opacity: .55;
}

.kp-map__svg .prefecture.is-empty {
	cursor: default;
}

.kp-gojuon__regions {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kp-check {
	display: flex;
	align-items: center;
	gap: 10px;
	/* チェックボックス行もタップ領域 44px を確保する。 */
	min-height: 44px;
	padding: 8px 0;
	font-size: 16px;
	cursor: pointer;
}

.kp-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--kp-pink);
	cursor: pointer;
}

.kp-gojuon__body {
	display: grid;
	gap: 16px;
}

/*
 * スマホは「地方 8 行 → 都道府県チップ → 市区町村リンク」が縦に積もって
 * 1 セクションが極端に長くなる。各リストを内部スクロールにして、
 * 選ぶたびに大きくページを送らなくて済むようにする（指示）。
 * PC は下部のメディアクエリで解除。
 */
.kp-gojuon__regions,
.kp-gojuon .kp-panel__chips,
.kp-gojuon .kp-panel__links {
	max-height: 200px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.kp-gojuon .kp-panel__chips,
.kp-gojuon .kp-panel__links {
	/* スクロールできることが分かるように内側に余白を持たせる。 */
	padding-right: 4px;
}

/* ------------------------------------------------------------------ *
 * 4. カテゴリー別の特集記事
 * ------------------------------------------------------------------ */
/*
 * スマホでは折り返して縦に伸びるより横スクロールのほうが操作が短い（指示）。
 * PC は下部のメディアクエリで従来の折り返しに戻す。
 */
.kp-anchors {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin-bottom: 28px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.kp-anchors::-webkit-scrollbar {
	display: none;
}

/* 白パネルの上に乗るのでチップは薄ピンク（#FFF4F1）で面を分ける。 */
.kp-chip--anchor {
	background: #fff4f1;
}

.kp-col-block {
	margin-bottom: 40px;
	scroll-margin-top: 20px;
}

.kp-col-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--kp-pink);
	margin-bottom: 18px;
}

.kp-col-block__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

.kp-col-block__icon {
	width: 32px;
	height: 32px;
}

.kp-col-block__more {
	color: var(--kp-ink-soft);
	font-size: 15px;
	text-decoration: none;
}

.kp-col-block__more-em {
	color: var(--kp-pink);
	text-decoration: underline;
	font-weight: 700;
}

.kp-col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.kp-col-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	background: var(--kp-white);
	border-radius: var(--kp-radius);
	overflow: hidden;
	height: 100%;
	transition: box-shadow .15s ease, transform .15s ease;
}

.kp-col-card__link:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

.kp-col-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: #eee;
	overflow: hidden;
}

.kp-col-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kp-col-card__area {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 12px;
	border-radius: 4px;
	background: var(--kp-green);
	color: var(--kp-white);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
}

.kp-col-card__body {
	display: block;
	padding: 14px 16px 18px;
}

.kp-col-card__title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.55;
	margin-bottom: 8px;
}

.kp-col-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--kp-ink-soft);
	font-size: 14px;
	line-height: 1.75;
	margin-bottom: 12px;
}

.kp-col-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--kp-ink-mute);
	font-size: 13px;
}

.kp-col-card__cat {
	padding: 2px 10px;
	border-radius: 4px;
	background: #f1ece9;
	color: var(--kp-ink-soft);
}

/* ------------------------------------------------------------------ *
 * 5. FAQ
 * ------------------------------------------------------------------ */
.kp-faq {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kp-faq__item {
	border-bottom: 1px solid #eee3de;
}

.kp-faq__q {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.kp-faq__trigger {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 18px 8px;
	border: 0;
	background: transparent;
	color: var(--kp-ink);
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	text-align: left;
	cursor: pointer;
}

.kp-faq__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--kp-white);
	font-size: 14px;
	font-weight: 700;
}

.kp-faq__badge--q {
	background: var(--kp-pink);
}

.kp-faq__badge--a {
	background: var(--kp-teal);
}

.kp-faq__qtext {
	flex: 1 1 auto;
}

.kp-faq__caret {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--kp-ink-mute);
	border-bottom: 2px solid var(--kp-ink-mute);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s ease;
}

.kp-faq__trigger[aria-expanded="true"] .kp-faq__caret {
	transform: rotate(225deg) translate(-2px, -2px);
}

.kp-faq__a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0 8px 20px 8px;
}

.kp-faq__a[hidden] {
	display: none;
}

.kp-faq__atext {
	margin: 0;
	font-size: 16px;
	line-height: 1.9;
	color: var(--kp-ink-soft);
}

/* ------------------------------------------------------------------ *
 * 6. 買取カテゴリー一覧
 * ------------------------------------------------------------------ */
.kp-cat-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.kp-cat-grid__link {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 12px 16px;
	border-radius: var(--kp-radius);
	background: var(--kp-white);
	color: inherit;
	text-decoration: none;
	transition: box-shadow .15s ease;
}

.kp-cat-grid__link:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.kp-cat-grid__thumb {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: var(--kp-cream);
	overflow: hidden;
}

.kp-cat-grid__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kp-cat-grid__label {
	font-size: 17px;
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * タブレット以上
 * ------------------------------------------------------------------ */
@media screen and (min-width: 661px) {
	/* この幅では .sp_nav_wrap が static なのでヘッダー分の逃げは不要。 */
	.kp-front {
		--kp-hdr-h: 0px;
	}

	.kp-fv {
		padding: 40px 0 64px;
		background-image: url("../images/header_bg.png");
		background-image: image-set(url("../images/header_bg.webp") type("image/webp"), url("../images/header_bg.png") type("image/png"));
	}

	.kp-fv__copy {
		font-size: 22px;
	}

	.kp-search {
		padding: 26px 32px 30px;
	}

	.kp-search__title {
		font-size: 27px;
	}

	.kp-search__form {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: end;
	}

	.kp-search__submit-wrap {
		grid-column: 1 / -1;
		margin-top: 8px;
	}

	.kp-biz-card {
		padding: 24px;
	}

	.kp-biz-card__main {
		/* デザインのサムネイル幅は約 170px（正方形寄り）。 */
		grid-template-columns: 170px minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	/* PC はデザイン通り、2 行目以降を社名の左端（＝アイコン幅ぶん字下げ）に揃える。 */
	.kp-biz-card__methods,
	.kp-biz-card__campaign {
		margin-left: 50px;
	}

	.kp-biz-card__foot {
		flex-direction: row;
		align-items: center;
		gap: 32px;
		/* 編集部コメントが無い業者でも「詳しく見る」は右端に置く */
		justify-content: flex-end;
	}

	.kp-biz-card__note {
		flex: 1 1 auto;
	}

	.kp-biz-card__more {
		align-self: center;
	}

	.kp-col-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kp-cat-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.kp-map,
	.kp-gojuon {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	/*
	 * 左カラムに見出しと結果、右カラムに地図（デザイン通り）。
	 * 行の高さを auto / 1fr で固定するのが重要。地図（body）は 2 行にまたがるので、
	 * 行を auto auto にすると地図の高さ（地方を切り替えると変わる）が 1 行目にも
	 * 配分され、結果リスト（side）の開始位置が選ぶたびに上下してしまう。
	 */
	.kp-map {
		grid-template-areas:
			"head body"
			"side body";
		grid-template-rows: auto 1fr;
		align-content: start;
		row-gap: 10px;
	}

	/* 結果リストは常に説明文の直下から始める。 */
	.kp-map__side {
		align-self: start;
	}

	.kp-gojuon__body {
		grid-template-columns: minmax(0, 1fr);
	}

	/* PC は画面が広いので内部スクロールも横スクロールも要らない。 */
	.kp-gojuon__regions,
	.kp-gojuon .kp-panel__chips,
	.kp-gojuon .kp-panel__links {
		max-height: none;
		overflow: visible;
	}

	.kp-anchors {
		flex-wrap: wrap;
		overflow: visible;
		padding-bottom: 0;
	}
}

/* ------------------------------------------------------------------ *
 * PC
 * ------------------------------------------------------------------ */
@media screen and (min-width: 881px) {
	/* .nav_wrap は fixed。実測 881px:64 / 1000px:70 / 1100px 以上:84。 */
	.kp-front {
		--kp-hdr-h: 70px;
	}

	.kp-sec {
		padding: 52px 0 72px;
	}

	.kp-fv__copy {
		font-size: 24px;
	}

	.kp-map,
	.kp-gojuon {
		grid-template-columns: 340px minmax(0, 1fr);
		gap: 32px;
	}

	.kp-map {
		row-gap: 10px;
	}

	.kp-map__canvas {
		display: flex;
		justify-content: center;
	}

	.kp-map__svg {
		width: 528px;
		max-width: 100%;
	}

	.kp-map__list {
		max-height: 300px;
	}

	/* マウス操作の PC は 44px のタップ領域が不要なのでデザイン通りの高さに戻す。 */
	.kp-chip {
		min-height: 40px;
	}

	.kp-chip--region {
		min-height: 36px;
	}

	.kp-panel__links .kp-link {
		min-height: 0;
	}
}

@media screen and (min-width: 1100px) {
	.kp-front {
		--kp-hdr-h: 84px;
	}
}

/* ------------------------------------------------------------------ *
 * 旧セクション content05（一括査定との違い）— PC / タブレットの見出し重なり
 *
 * 左ブロックの見出し「一括査定サイト」が、1 枚目のカードの人物画像に
 * 隠れて読めない。画像は .content05 .img_box{position:absolute;bottom:0}
 * でカードの上辺より外に出る作りなので、見出しが画像カラム（127px）の
 * 真上に来ると必ず重なる（この重なりは今回の改修前から発生していた）。
 *
 * 画像側のレイアウトは他ページと共用の style.css / medium.css なので触らず、
 * 見出しだけを画像カラムのぶん右に逃がして、カード本文の開始線に揃える。
 * ------------------------------------------------------------------ */
@media screen and (min-width: 661px) {
	/*
	 * 見出しの高さも揃える。パネルの上余白が左 20px（style.css:895）/
	 * 右 30px（:938）で 10px ずれるので、左を右に合わせる。
	 * 高さは stretch なので、上余白を足しても左右のブロック高は変わらない。
	 */
	.kp-legacy.content05 .site .in {
		padding-top: 30px;
	}

	/*
	 * 左右の見出しを同じ扱いにする。
	 * 661–880px はカードが狭く、中央に置くと人物画像（カード左端の 127px
	 * カラム）と重なるので、画像幅ぶん右へ逃がす。PC は下で中央揃えに戻す。
	 */
	.kp-legacy.content05 .site .in > h3,
	.kp-legacy.content05 .plus .in > h3 {
		position: relative;
		z-index: 2;
		width: 100%;
		margin: 0 0 12px;
		padding-left: 127px;
		text-align: left;
	}
}

/*
 * PC のみ、左右ブロックの高さを揃える（指示）。
 * 実測 1440px: .plus 413px / .site 371px。差の 42px は style.css:889 の
 * .content05 .site{margin-top:42px} で、左が下にずれて始まっていた分。
 * その分を消し、.site を flex にして中の .in を高さいっぱいまで伸ばす
 * （.plus 側は既に display:flex + .in{width:100%} で伸びている）。
 */
@media screen and (min-width: 881px) {
	/* PC はカードが広いので、見出しは中央揃え（右ブロックの元の見た目）で揃える。 */
	.kp-legacy.content05 .site .in > h3,
	.kp-legacy.content05 .plus .in > h3 {
		padding-left: 0;
		text-align: center;
	}

	.kp-legacy.content05 .plus_wrap {
		align-items: stretch;
	}

	.kp-legacy.content05 .site {
		display: flex;
		margin-top: 0;
	}

	.kp-legacy.content05 .site .in {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * 旧セクション（買取プラスとは？ / 一括査定との違い）の スマホ版レイアウト調整
 *
 * マークアップと文言はそのまま。sp.css は他ページにも効くので触らず、
 * TOP だけで読み込むこのファイルから max-width:660px で上書きする。
 * 直した点:
 *   - 「お悩み」ボタンの幅がバラバラで縦のリズムが崩れていた → 全幅で揃える
 *   - 説明文が中央揃え＋強制改行で 6 行に割れていた → 左揃え・自然改行
 *   - 比較ブロックが横並びのまま潰れ、見出しが 2 行に折れてカードも細かった
 *     → 見出しを上に出して全幅の縦積みにする
 * ------------------------------------------------------------------ */
@media screen and (max-width: 660px) {
	/*
	 * スマホはサムネイルがカード幅いっぱい（実測 288px）になるため、
	 * cover + max-height:220px だと正方形バナーの上下が 24% 切れていた。
	 * 元画像の比率を保ったまま出す。極端な縦長でカードが伸びるのは
	 * max-height で止めるが、contain なのでその時も切れない。
	 */
	.kp-biz-card__thumb img {
		height: auto;
		max-height: 340px;
		object-fit: contain;
	}

	.kp-legacy.content04 .img_box {
		margin-bottom: 28px;
		padding: 0 8px;
	}

	.kp-legacy.content04 .merit01 {
		margin-bottom: 18px;
		line-height: 1.8;
	}

	/* ボタン群は幅を揃えて縦のリズムを作る。 */
	.kp-legacy.content04 .merit02 {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		margin-bottom: 26px;
	}

	.kp-legacy.content04 .merit02 .wall {
		width: 100%;
		margin: 0;
		padding: 13px 18px;
		line-height: 1.5;
		/* 2 行になるボタンだけ左寄せに見えていたので揃える。 */
		text-align: center;
	}

	/* 中央揃え＋強制改行だと行頭が揺れて読みにくいので左揃えにする。 */
	.kp-legacy.content04 .merit03 {
		text-align: left;
		padding: 0 4px;
		line-height: 1.9;
	}

	.kp-legacy.content04 .merit03 br {
		display: none;
	}

	/* 比較ブロック: 見出しを上に、カードを全幅の縦積みに。 */
	.kp-legacy.content05 .plus_wrap {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.kp-legacy.content05 .site .in,
	.kp-legacy.content05 .plus .in {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin: 0;
		padding: 16px 14px;
		gap: 10px;
	}

	.kp-legacy.content05 .site .wrap,
	.kp-legacy.content05 .plus .wrap {
		width: 100%;
	}

	.kp-legacy.content05 h3 {
		height: auto;
		width: 100%;
		margin: 0 0 4px;
		text-align: center;
	}

	/* 縦書きラベルは狭い画面で潰れるので横書きの帯にする。 */
	.kp-legacy.content05 .site h4,
	.kp-legacy.content05 .plus h4 {
		writing-mode: horizontal-tb;
		width: 100%;
		height: auto;
		margin: 0 0 6px;
		padding: 7px 14px;
		border-radius: 999px;
		line-height: 1.4;
	}

	.kp-legacy.content05 .content_box {
		gap: 10px;
		padding: 10px 14px;
		line-height: 1.6;
	}

	.kp-legacy.content05 .img_wrap {
		width: 44px;
	}
}

/* ------------------------------------------------------------------ *
 * 動きを減らす設定
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.kp-front * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}