/* =====================================================================
   週1LP（市区ページ）専用 — template-parts/lp/layout.php だけで読み込む（2026-09-24 第1弾 川越市）
   ・pg.css は触らない（ほかのページの見た目に影響させない）。クラスは lpx- で始める
   ・色はサイトと同じ（紺・黄・赤）。動きは図の矢印だけで、動きを減らす設定では止める
   ・日本語の見出しに word-break:keep-all は使わない（Safari で逆効果）
   ===================================================================== */

.lpx-hero,
.lpx-sec { position: relative; }

/* ---------- ヒーロー ---------- */
.lpx-hero {
	overflow: hidden;
	color: #fff;
	padding: 44px 0 36px;
	background:
		radial-gradient(640px 420px at 88% 8%, rgba(255, 224, 0, .20), transparent 60%),
		radial-gradient(560px 460px at 0% 100%, rgba(80, 120, 255, .28), transparent 62%),
		linear-gradient(160deg, #13308a 0%, #0b1f5c 48%, #06123a 100%);
}
.lpx-hero::before { /* 細い方眼 */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 44px 44px,
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 44px 44px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
.lpx-hero__bgword {
	position: absolute;
	left: -.04em;
	bottom: -.2em;
	font-family: var(--pg-font-num);
	font-weight: 800;
	font-size: clamp(88px, 20vw, 260px);
	line-height: 1;
	letter-spacing: .02em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .10);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.lpx-hero__in {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 28px;
	align-items: center;
}
.lpx-hero__copy { min-width: 0; }
.lpx-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 5px 14px 5px 5px;
	border-radius: 999px;
	background: rgba(255, 224, 0, .12);
	border: 1px solid rgba(255, 224, 0, .45);
	color: #ffe000;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .06em;
}
.lpx-hero__eyebrow span {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ffe000;
	color: #0b1f5c;
}
.lpx-hero__eyebrow .pg-ico { width: 15px; height: 15px; }
.lpx-hero__h1 {
	margin: 0 0 16px;
	font-family: var(--pg-font-display);
	font-weight: 900;
	font-size: clamp(30px, 6.4vw, 54px);
	line-height: 1.25;
	letter-spacing: .01em;
	color: #fff;
}
.lpx-hero__h1 em {
	font-style: normal;
	color: #ffe000;
	background: linear-gradient(transparent 72%, rgba(255, 42, 31, .75) 72%, rgba(255, 42, 31, .75) 90%, transparent 90%);
}
.lpx-hero__lead {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.95;
	color: rgba(255, 255, 255, .88);
}
.lpx-hero__lead strong { color: #fff; background: linear-gradient(transparent 62%, rgba(255, 224, 0, .35) 62%); }
.lpx-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lpx-hero__badges li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .22);
	font-size: 13px;
	font-weight: 700;
}
.lpx-hero__badges .pg-ico { width: 15px; height: 15px; color: #ffe000; }
.lpx-hero__cta { position: relative; z-index: 1; margin-top: 26px; }

/* ヒーローの図（イメージ図） */
.lpx-fig { margin: 0; min-width: 0; }
.lpx-fig__stage {
	position: relative;
	padding: 14px 14px 10px;
	border-radius: 18px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 255, 255, .20);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.lpx-fig__svg { display: block; width: 100%; height: auto; }
.lpx-fig__flow { animation: lpxFlow 1.6s linear infinite; }
@keyframes lpxFlow { to { stroke-dashoffset: -38; } }
.lpx-fig__tag {
	position: absolute;
	margin: 0;
	padding: 3px 9px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}
.lpx-fig__tag.is-in { left: 12%; top: 40%; background: rgba(6, 18, 58, .75); border: 1px solid rgba(255, 255, 255, .35); }
.lpx-fig__tag.is-out { right: 4%; top: 57%; background: #ffe000; color: #0b1f5c; }
.lpx-fig__legend {
	display: grid;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.lpx-fig__legend li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}
.lpx-fig__legend i {
	flex: none;
	width: 22px;
	height: 0;
	margin-top: .7em;
	border-top: 4px dashed #ffe000;
}
.lpx-fig__legend li.is-city i { border-top: 4px solid #ffe000; width: 12px; height: 12px; margin-top: .25em; border-radius: 3px; background: #ffe000; }
.lpx-fig figcaption { margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); }

/* ---------- セクション共通 ---------- */
.lpx-sec { padding: 64px 0; }
.lpx-sec:nth-of-type(even) { background: #f5f7fb; }
.lpx-head { margin: 0 0 30px; text-align: center; }
.lpx-head__en {
	margin: 0 0 6px;
	font-family: var(--pg-font-num);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .28em;
	color: #cf0d14;
}
.lpx-head__en::before,
.lpx-head__en::after { content: ""; display: inline-block; width: 22px; height: 2px; margin: 0 10px; vertical-align: middle; background: currentColor; }
.lpx-head__ttl {
	margin: 0;
	font-family: var(--pg-font-display);
	font-weight: 900;
	font-size: clamp(24px, 5vw, 36px);
	line-height: 1.4;
	color: #0b1f5c;
}
.lpx-head__ttl small {
	display: block;
	margin-bottom: 6px;
	font-family: var(--pg-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	color: #4a5270;
}
.lpx-head__ttl em {
	font-style: normal;
	background: linear-gradient(transparent 64%, #ffe000 64%, #ffe000 92%, transparent 92%);
}
.lpx-head__lead { margin: 14px auto 0; max-width: 720px; font-size: 15px; line-height: 1.9; color: #4a5270; }
.lpx-head.is-dark .lpx-head__ttl { color: #fff; }
.lpx-head.is-dark .lpx-head__ttl small,
.lpx-head.is-dark .lpx-head__lead { color: rgba(255, 255, 255, .78); }
.lpx-head.is-dark .lpx-head__ttl em { background: linear-gradient(transparent 64%, rgba(255, 42, 31, .85) 64%, rgba(255, 42, 31, .85) 92%, transparent 92%); }
.lpx-head.is-dark .lpx-head__en { color: #ffe000; }
.lpx-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.7; color: #4a5270; }

/* 読み物 */
.lpx-prose {
	max-width: 820px;
	margin: 0 auto;
	padding: 26px 22px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid rgba(11, 31, 92, .10);
	box-shadow: 0 24px 48px -28px rgba(11, 31, 92, .30);
}
.lpx-prose p { margin: 0 0 1em; font-size: 15.5px; line-height: 2; color: #12151d; }
.lpx-prose p:last-child { margin-bottom: 0; }
.lpx-prose strong { background: linear-gradient(transparent 62%, #fff6b3 62%); }
.lpx-prose small { font-size: 12.5px; color: #4a5270; }
.lpx-role .lpx-prose { border-top: 5px solid #0b1f5c; }

/* ---------- 粗大ごみの決まり（番号カード） ---------- */
.lpx-rules__grid {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.lpx-rule {
	position: relative;
	min-width: 0;
	padding: 20px 18px 18px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid rgba(11, 31, 92, .12);
	box-shadow: 0 16px 34px -24px rgba(11, 31, 92, .35);
	overflow: hidden;
}
.lpx-rule__no {
	position: absolute;
	right: 10px;
	top: -6px;
	font-family: var(--pg-font-num);
	font-weight: 800;
	font-size: 58px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(11, 31, 92, .16);
}
.lpx-rule__k {
	position: relative;
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 10px;
	border-radius: 6px;
	background: #0b1f5c;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.lpx-rule__v { position: relative; margin: 0; font-size: 15px; line-height: 1.8; color: #12151d; }
.lpx-rule.is-key { border: 2px solid #ff2a1f; background: #fff8f7; }
.lpx-rule.is-key .lpx-rule__k { background: #ff2a1f; }
.lpx-rule.is-key .lpx-rule__v strong { color: #cf0d14; }

/* ---------- こんなときは ---------- */
.lpx-scenes__grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.lpx-scene {
	min-width: 0;
	padding: 26px 22px 22px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid rgba(11, 31, 92, .10);
	box-shadow: 0 20px 40px -26px rgba(11, 31, 92, .35);
}
.lpx-scene__ico {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 14px;
	border-radius: 16px;
	background: linear-gradient(145deg, #16328a, #0b1f5c);
	color: #ffe000;
	box-shadow: 0 10px 20px -10px rgba(11, 31, 92, .7);
}
.lpx-scene__ico .pg-ico { width: 28px; height: 28px; }
.lpx-scene h3 { margin: 0 0 8px; font-family: var(--pg-font-display); font-weight: 900; font-size: 19px; line-height: 1.45; color: #0b1f5c; }
.lpx-scene p { margin: 0; font-size: 14.5px; line-height: 1.85; color: #4a5270; }

/* ---------- 市の注意喚起（紺の帯＋引用パネル） ---------- */
.lpx-sec.lpx-caution { background: linear-gradient(160deg, #0f2a78 0%, #0b1f5c 50%, #06123a 100%); color: #fff; }
.lpx-caution__panel {
	max-width: 860px;
	margin: 0 auto;
	padding: 24px 22px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .22);
	border-left: 6px solid #ffe000;
}
.lpx-caution__src {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
	color: #ffe000;
}
.lpx-caution__src .pg-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.lpx-caution__p { margin: 0 0 .9em; font-size: 15px; line-height: 1.95; color: rgba(255, 255, 255, .92); }
.lpx-caution__p:last-child { margin-bottom: 0; }
.lpx-caution__p strong { color: #fff; background: linear-gradient(transparent 60%, rgba(255, 42, 31, .6) 60%); }

/* ---------- 出る物ごとの行き先 ---------- */
.lpx-route__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lpx-lane {
	display: grid;
	gap: 10px;
	min-width: 0;
	padding: 16px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid rgba(11, 31, 92, .12);
	box-shadow: 0 18px 36px -26px rgba(11, 31, 92, .4);
}
.lpx-lane__from { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lpx-lane__from b { font-family: var(--pg-font-display); font-weight: 900; font-size: 18px; line-height: 1.4; color: #0b1f5c; }
.lpx-lane__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: #eef2fa;
	color: #0b1f5c;
}
.lpx-lane__ico .pg-ico { width: 24px; height: 24px; }
.lpx-lane__arrow { display: grid; place-items: center; color: #ff2a1f; transform: rotate(90deg); }
.lpx-lane__arrow .pg-ico { width: 26px; height: 26px; }
.lpx-lane__to { min-width: 0; padding: 14px 16px; border-radius: 14px; background: #f5f7fb; }
.lpx-lane__who {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: #0b1f5c;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.lpx-lane__dest { margin: 0 0 4px; font-weight: 700; font-size: 15.5px; line-height: 1.6; color: #12151d; }
.lpx-lane__note { margin: 0; font-size: 13.5px; line-height: 1.75; color: #4a5270; }
.lpx-lane.is-pick { border: 2px solid #ffe000; background: linear-gradient(160deg, #fffdf0, #fff); }
.lpx-lane.is-pick .lpx-lane__ico { background: #ffe000; }
.lpx-lane.is-pick .lpx-lane__who { background: #ff2a1f; }
.lpx-lane.is-pick .lpx-lane__to { background: #fff6b3; }
.lpx-route__foot {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 18px 0 0;
	padding: 14px 18px;
	border-radius: 14px;
	background: #0b1f5c;
	color: #fff;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.7;
}
.lpx-route__foot .pg-ico { flex: none; width: 22px; height: 22px; color: #ffe000; margin-top: 1px; }

/* ---------- お客様の声 ---------- */
.lpx-voice__card {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: 34px 24px 24px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid rgba(11, 31, 92, .10);
	box-shadow: 0 24px 48px -28px rgba(11, 31, 92, .35);
}
.lpx-voice__mark {
	position: absolute;
	left: 20px;
	top: -22px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #ffe000;
	color: #0b1f5c;
}
.lpx-voice__mark .pg-ico { width: 22px; height: 22px; }
.lpx-voice__card p { margin: 0; font-size: 16.5px; line-height: 2; font-weight: 700; color: #12151d; }
.lpx-voice__card small { display: block; margin-top: 10px; font-weight: 400; font-size: 13px; color: #4a5270; }

/* ---------- 公式ページ ---------- */
.lpx-src__list { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; padding: 0; list-style: none; }
.lpx-src__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(11, 31, 92, .14);
	color: #0b1f5c;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.55;
	text-decoration: none;
	transition: border-color .2s, transform .2s;
}
.lpx-src__list a span { flex: 1; min-width: 0; }
.lpx-src__list a .pg-ico { flex: none; width: 20px; height: 20px; }
.lpx-src__list a:hover { border-color: #0b1f5c; transform: translateY(-2px); }

/* ---------- 画面幅ごと ---------- */
@media (min-width: 768px) {
	.lpx-hero { padding: 64px 0 48px; }
	.lpx-hero__lead { font-size: 16px; }
	.lpx-sec { padding: 84px 0; }
	.lpx-rules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lpx-scenes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lpx-lane { grid-template-columns: minmax(0, .8fr) 40px minmax(0, 1.6fr); align-items: center; padding: 18px 20px; }
	.lpx-lane__arrow { transform: none; }
	.lpx-prose { padding: 34px 38px; }
	.lpx-caution__panel { padding: 30px 34px; }
	.lpx-voice__card { padding: 40px 40px 30px; }
	.lpx-fig__tag { font-size: 13px; }
}
@media (min-width: 1024px) {
	.lpx-hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; }
	.lpx-rules__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.lpx-fig__flow { animation: none; }
	.lpx-src__list a { transition: none; }
}