/*
 * どのページにも出る部品: パンくず（.lp-crumbs）と、フッターの上のコンテンツの案内（.lp-contents）。
 * 図鑑と同じ世界観（生成りの紙・黒い太い枠・ずらした影・オレンジ）。2026-10-15 Claude。
 * パンくずはページごとに別の名前（dz-crumbs・gt-crumbs…）で作られていたので、共通の名前 lp-crumbs を足して、ここで 1 つの形にそろえる
 * （nav.lp-crumbs.lp-crumbs と 2 回重ねて、ページごとの CSS より強くする）。置く場所の余白は、ページごとのまま。
 */

:root {
	--lp-shell-ink: #1d1813;
	--lp-shell-text: #2b2620;
	--lp-shell-muted: #6f6052;
	--lp-shell-paper: #fffaf1;
	--lp-shell-accent: #ff5b00;
	--lp-shell-accent-soft: #ffedca;
	--lp-shell-brand: var(--font-site-brand, "linuxPro-CPL"), "Hiragino Sans", "Noto Sans JP", sans-serif;
	--lp-shell-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ------------------------------------------------------------ パンくず */
nav.lp-crumbs.lp-crumbs {
	display: block;
	max-width: 100%;
	min-width: 0;
	background: none;
	border: 0;
	color: var(--lp-shell-muted);
	font: 700 12.5px/1.4 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}
nav.lp-crumbs.lp-crumbs :is(ol, ul) {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 3px 4px 5px 2px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
nav.lp-crumbs.lp-crumbs :is(ol, ul)::-webkit-scrollbar {
	display: none;
}
nav.lp-crumbs.lp-crumbs.is-overflow :is(ol, ul) {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px);
	mask-image: linear-gradient(90deg, transparent 0, #000 22px);
}
nav.lp-crumbs.lp-crumbs li {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	color: inherit;
	font: inherit;
	background: none;
}
nav.lp-crumbs.lp-crumbs li::before,
nav.lp-crumbs.lp-crumbs li::after {
	content: none;
}
/* 区切りは小さな山形（›） */
nav.lp-crumbs.lp-crumbs li + li::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 8px 0 5px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.5;
}
nav.lp-crumbs.lp-crumbs a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 999px;
	color: var(--lp-shell-text);
	text-decoration: none;
	font: inherit;
	transition: background-color 0.2s, transform 0.12s var(--lp-shell-ease);
	-webkit-tap-highlight-color: transparent;
}
nav.lp-crumbs.lp-crumbs a span {
	font: inherit;
	color: inherit;
}
nav.lp-crumbs.lp-crumbs a:hover {
	background: var(--lp-shell-accent-soft);
	color: var(--lp-shell-ink);
}
nav.lp-crumbs.lp-crumbs a:active {
	transform: scale(0.94);
}
nav.lp-crumbs.lp-crumbs a:focus-visible {
	outline: 3px solid var(--lp-shell-accent);
	outline-offset: 1px;
}
/* ホームは家の絵 */
nav.lp-crumbs.lp-crumbs li:first-child > a::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7M6 9.5V20h12V9.5'/%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' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7M6 9.5V20h12V9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* いまのページ: 太い枠の札（駅の「いまここ」と同じ言葉づかい） */
nav.lp-crumbs.lp-crumbs li:last-child > span,
nav.lp-crumbs.lp-crumbs li[aria-current="page"] > span,
nav.lp-crumbs.lp-crumbs span[aria-current="page"] {
	display: inline-flex;
	align-items: center;
	padding: 3px 11px;
	border: 2px solid var(--lp-shell-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--lp-shell-ink);
	font-weight: 800;
	box-shadow: 2px 2px 0 var(--lp-shell-ink);
	max-width: 22em;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ------------------------------------------------------------ コンテンツの案内（フッターの上） */
.lp-contents .lp-contents__nav {
	margin: 0 auto;
	max-width: 1180px;
	padding: 0 16px;
}
.lp-contents__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lp-contents__grid > li {
	display: flex;
	margin: 0;
	padding: 0;
}
.lp-contents__card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 14px 14px 12px;
	border: 2px solid var(--lp-shell-ink);
	border-radius: 16px;
	background: #fff;
	box-shadow: 4px 4px 0 var(--lp-shell-ink);
	color: var(--lp-shell-ink);
	text-decoration: none;
	transition: transform 0.16s var(--lp-shell-ease), box-shadow 0.16s var(--lp-shell-ease), background-color 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.lp-contents__card:hover {
	transform: translate(-2px, -3px);
	box-shadow: 6px 7px 0 var(--lp-shell-ink);
	background: color-mix(in srgb, var(--c) 6%, #fff);
	color: var(--lp-shell-ink);
}
.lp-contents__card:active {
	transform: translate(3px, 3px);
	box-shadow: 0 0 0 var(--lp-shell-ink);
}
.lp-contents__card:focus-visible {
	outline: 3px solid var(--lp-shell-accent);
	outline-offset: 3px;
}
.lp-contents__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 2px solid var(--lp-shell-ink);
	border-radius: 13px;
	background: var(--c);
	color: #fff;
	transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.lp-contents__icon svg {
	width: 24px;
	height: 24px;
}
.lp-contents__card:hover .lp-contents__icon {
	transform: rotate(-8deg) scale(1.08);
}
.lp-contents__text {
	display: grid;
	gap: 3px;
	min-width: 0;
}
.lp-contents__name {
	font: 800 16px/1.25 var(--lp-shell-brand);
	color: var(--lp-shell-ink);
}
.lp-contents__lead {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--lp-shell-muted);
}
/* 矢印（乗せると右へ） */
.lp-contents__go {
	width: 30px;
	height: 30px;
	border: 2px solid var(--lp-shell-ink);
	border-radius: 50%;
	background: var(--lp-shell-paper);
	position: relative;
	transition: transform 0.2s var(--lp-shell-ease), background-color 0.2s;
}
.lp-contents__go::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -5px 0 0 -3px;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent var(--lp-shell-ink);
}
.lp-contents__card:hover .lp-contents__go {
	transform: translateX(3px);
	background: var(--lp-shell-accent-soft);
}
/* いまいる場所 */
.lp-contents__card.is-here {
	background: var(--lp-shell-paper);
	box-shadow: 4px 4px 0 var(--c);
	border-color: var(--lp-shell-ink);
}
.lp-contents__here {
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--lp-shell-ink);
	color: #fff;
	font: 800 11px/1 var(--lp-shell-brand);
	font-style: normal;
	white-space: nowrap;
}
/* 見えたら順に浮かぶ（site-shell.js が is-in を付ける） */
.lp-contents.is-armed .lp-contents__grid > li {
	opacity: 0;
	transform: translateY(18px);
}
.lp-contents.is-armed.is-in .lp-contents__grid > li {
	opacity: 1;
	transform: none;
	transition: opacity 0.45s var(--lp-shell-ease), transform 0.5s var(--lp-shell-ease);
	transition-delay: calc(var(--i, 0) * 55ms);
}

@media (max-width: 640px) {
	.lp-contents__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.lp-contents__card {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 8px;
		padding: 12px;
		box-shadow: 3px 3px 0 var(--lp-shell-ink);
	}
	.lp-contents__icon {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}
	.lp-contents__name {
		font-size: 14.5px;
	}
	.lp-contents__lead {
		font-size: 11.5px;
	}
	.lp-contents__go {
		display: none;
	}
	.lp-contents__here {
		position: absolute;
		top: 10px;
		right: 10px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lp-contents.is-armed .lp-contents__grid > li {
		opacity: 1;
		transform: none;
	}
	.lp-contents__card,
	.lp-contents__icon,
	.lp-contents__go,
	nav.lp-crumbs.lp-crumbs a {
		transition: none;
	}
}
html.gp-reduce .lp-contents.is-armed .lp-contents__grid > li {
	opacity: 1;
	transform: none;
}

/* linuxpro_crumbs() で足したパンくず（星図・Linux の道・ブラウザで動く Linux・横断検索）は、見出しとのあいだを少し空ける */
nav.lp-crumbs.lp-crumbs--auto {
	margin: 0 0 12px;
}