/**
 * Sta.R マテリアルパスポート
 *
 * 前提: 現地でQRを読んで、片手のスマホで読む画面。
 *       狭い幅を先に書き、広い幅を @media で足す（mobile-first）。
 *
 * ── Sta.R のデザインに合わせる ──────────────────
 *
 * 本番サイトの CSS（2026-09-21 実測）から型を取っている。
 * 詳しくは docs/design-language.md。自分で決めているのは余白だけ。
 *
 *   見出し h2   左に teal の円 14px（SP 12px）＋ 下に 1px #bbb の罫
 *   見出し h3   左に teal の縦罫 3px
 *   箱          1px #ddd・**角丸なし**・padding 24px（SP 20px）
 *   ボタン      黒 #222・角丸 999px・白文字（teal のボタンは使わない）
 *   本文        16px / line-height 1.8
 *
 * ── テーマが !important で上書きしてくるもの ─────
 *
 *   color:#222!important       h1〜h6・p・li・table
 *   line-height:1.8!important  p・li
 *
 * 薄い灰色にしたい注記（p）は、こちらも !important で返す必要がある。
 * 行間は逆らわず 1.8 に合わせてある。
 */

.starp {
	--starp-ink: #222;
	--starp-muted: #6b6b6b;
	--starp-line: #ddd;
	--starp-line-soft: #ececec;
	--starp-bg-soft: #f7f7f7;
	--starp-accent: #2ea7b5;
	--starp-accent-dark: #1d7f8c;
	--starp-btn: #222;
	--starp-btn-hover: rgba(34, 34, 34, 0.9);
	--starp-danger: #b3261e;

	--starp-sans: "Bricolage Grotesque", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

	--starp-gutter: 20px;
	--starp-pad: 20px;

	box-sizing: border-box;

	/* **テーマの列と同じ形にする。**（2026-09-22 実測）
	   /material/ はこちらのテンプレートが本文ごと描くので、
	   ご利用案内と違って **Divi の .container が外に無い**。
	   max-width:none だけにすると画面の端から端まで広がる
	   （一度そうなった）。.container{width:80%;max-width:1080px} を写す。 */
	width: 100%;
	max-width: none;
	margin: 0;

	/* **幅と上の余白はテンプレート側でテーマの入れ物に任せている**
	   （`#main-content > .container`）。ここで写すと、テーマが変わった
	   ときに必ずずれる。2026-09-22 に自前で 58px と書いて、
	   通常ページ（上 154px）とそろわなかった。 */
	padding: 0 0 64px;
	color: var(--starp-ink);
	font-family: var(--starp-sans);
	font-size: 1rem;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
}

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

/* ── テーマ（Divi）の打ち消し ───────────────────────
 *
 * **必要最小限にする。**（2026-09-22 に一度やりすぎて、こちらの部品の
 * 余白を全部消した。重量・寸法の箱も、あゆみの段も、札が枠に貼り付いた）
 *
 * テーマ側の指定と、その強さを実測した:
 *
 *   .entry-content ul  { list-style-type: disc; padding: 0 0 23px 1em }  (0,1,1)
 *   ol li              { padding-left: 1em; text-indent: -1em }          (0,0,2)
 *   p                  { padding-bottom: 1em }                           (0,0,1)
 *
 * **ul/ol だけが厄介。** (0,1,1) で、しかも Divi の CSS は
 * こちらより**後に**読まれる（実測: passport.css が8番目、Divi が11番目）。
 * 同点では後勝ちなので、ここだけ !important が要る。
 *
 * **li と p には要らない。** (0,0,2)/(0,0,1) なので、こちらの
 * `.starp__step` などの class 指定 (0,1,0) が元から勝っている。
 * ここに !important を付けると、勝っていたものまで潰れる。
 */

/* テーマの `.container` が上に 58px 持っているので、足すのは差分だけ。
 *
 * **通常ページ（154px）にそろえたら、空きすぎだった**（2026-09-22 ご指摘）。
 * あちらは題名が Divi の節の中にあり、節の余白も込みの数字。
 * こちらは題名の上に teal の円ぶん（26px）が乗るので、同じ数字にすると
 * 見た目ではそのぶん余計に空く。**数字を合わせるのではなく、
 * 見た目で合わせる。** 58 + 32 + 円の 26 ＝ 上から約 116px。
 */
.starp-page {
	padding-top: 32px;
}

/* **サイドバーの仕切り線を消す。**（2026-09-22 編集長のご指摘）
 *
 * Divi は `#main-content .container:before` で、本文とサイドバーの間に
 * 縦線を1本引いている。こちらはサイドバーを置かないので、
 * **線だけが画面の上から下まで残る**。
 *
 * Divi 自身も全幅のページでは `display:none` にしている。同じことをする。
 * テーマ側の指定が `.et_right_sidebar #main-content .container:before` の
 * 形で強いため、!important を付ける。 */
.starp-container::before {
	display: none !important;
}

.starp ul,
.starp ol {
	list-style: none !important;
	padding: 0 !important;
	margin-left: 0;
	line-height: inherit !important;
}

.starp li {
	list-style: none;
	text-indent: 0;
}

.starp p {
	padding-bottom: 0;
}

.starp a {
	color: var(--starp-accent-dark);
	text-underline-offset: 3px;
}

.starp a:hover {
	color: var(--starp-accent);
}

.starp__links a,
.starp__comp-note,
.starp-card__summary {
	overflow-wrap: anywhere;
}

/* ── 写真 ───────────────────────────────────────── */

.starp__hero {
	margin: 0 calc(var(--starp-gutter) * -1) 22px;
	background: var(--starp-bg-soft);
}

.starp__hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* ── 見出し部 ───────────────────────────────────── */

.starp__head {
	margin-top: 30px;
	margin-bottom: 26px;
}

.starp__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	line-height: 1.4 !important;
}

.starp__tag {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 12px;
	border: 1px solid var(--starp-accent);
	border-radius: 999px;
	background: #fff;
	color: var(--starp-accent-dark) !important;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

/*
 * 循環のしかた（リユース／リメイク／リサイクル）。
 *
 * 区分（什器・素材・プロダクト）が**枠だけの札**なのに対して、
 * こちらは**塗りの札**にする。2つ並んでも役割の違いが読めるように。
 *
 * 色は3つとも teal の系統から取っていて、新しい色を足していない。
 * **濃さは循環の上流から**——そのまま使う（濃い）→ 形を変える →
 * 素材に戻す（淡い）。手を加えるほど淡くなる。
 */
.starp__way {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 12px;
	background: var(--starp-accent);
	color: #fff !important;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	white-space: nowrap;
}

.starp__way[data-way="reuse"]   { background: #1d7f8c; }
.starp__way[data-way="remake"]  { background: #2ea7b5; }
.starp__way[data-way="recycle"] { background: #6f7f82; }

/* ラベルだけでは意味が伝わらないので、詳細では1行の説明を添える。 */
.starp__way-desc {
	margin: 0 0 8px;
	font-size: 0.875rem;
	color: var(--starp-muted) !important;
}

/* 一覧の先頭に出す凡例。3つの言葉の違いを最初に伝える。 */
/* **下地も枠も付けない。**
 *
 * もとは灰色の箱に入れていたが、題名のすぐ下でいちばん重い塊になり、
 * 本題である一覧より先に目が行っていた（2026-09-24 編集長のご指摘
 * 「デザインがビジー」）。3つの言葉の説明は**読めば済むもの**なので、
 * 囲わずに余白で区切る。ご利用案内で表の下地と枠を外したのと同じ判断。
 */
.starp-legend {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 40px;
	border: 0;
	background: none;
	list-style: none;
}

/* **札と説明を横に並べ、3行に積む。**
 *
 * もとは3列に並べ、札の下に説明を置いていた。列が広くなるぶん
 * **札と札の間が 250px も空き**、3つの塊が横に散って見えた
 * （2026-09-24 編集長のご指摘「ビジー」）。
 *
 * 1行に1つずつ積むと、札の列がそろって**用語集として読める**。
 * 行ごとに幅を使い切れるので、**2026-09-22 に3列でぶつかった
 * 「使っていま／す」の折り返し**も起きない（あのときは列が狭すぎた）。
 */
/* **`.starp ul`（0,1,1）のほうが `.starp-legend`（0,1,0）より強い。**
   テーマの打ち消しで padding を 0 にしているので、ここは強さを上げて戻す。
   !important を足しても、強さが足りなければ勝てない（2026-09-22 に
   20px を入れたのに 0 のままだった）。 */
.starp ul.starp-legend {
	padding: 0 !important;
}

.starp-legend li {
	display: grid;
	/* いちばん広い札「リサイクル」の実測 86px（1.15倍で 97px）に合わせる。
	   広く取ると説明だけが右に離れて、札との対応が読みにくい。 */
	grid-template-columns: 5.75em 1fr;
	align-items: baseline;
	gap: 4px 14px;
	line-height: 1.6 !important;
}

/* 札の列に収まらない幅では積む（狭い画面で説明が1文字ずつ割れるのを防ぐ）。
   360px では説明に 213px 残るので、横並びのままでよい（実測）。 */
@media (max-width: 359px) {
	.starp-legend li {
		grid-template-columns: 1fr;
	}
}

/* 札は自分の幅のまま、列の左に置く（列いっぱいに伸ばすと帯になる）。 */
.starp-legend .starp__way {
	justify-self: start;
}

.starp-legend__desc {
	font-size: 0.8125rem;
	color: var(--starp-muted);

	/* 最後の行に1文字だけ残るのを避ける（「使っていま／す」になっていた）。
	   効かないブラウザでは今までどおり折り返すだけ。 */
	text-wrap: pretty;
}

/* パスポート番号。現物の札と突き合わせるものなので、字間を空けて読み違えを防ぐ。 */
.starp__no {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
	color: var(--starp-muted) !important;
	white-space: nowrap;
}

.starp__title {
	margin: 0 0 12px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5;
}

.starp__summary {
	margin: 0;
	font-size: 1rem;
}

/* ── 重量・寸法・状態 ───────────────────────────── */

/* 1つずつ枠を持たせる。隙間1px＋下地の色で罫を作ると、
   3つのときに**4つ目の空セルが灰色の箱として出る**（実際にそうなった）。 */
.starp__spec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 8px;
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
}

.starp__spec-item {
	padding: 16px 18px;
	border: 1px solid var(--starp-line);
	background: #fff;
	line-height: 1.5;
}

.starp__spec-label {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--starp-muted);
}

.starp__spec-value {
	display: block;
	margin-top: 3px;
	font-size: 1.0625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.starp__spec-note {
	display: block;
	font-size: 0.6875rem;
	color: var(--starp-muted);
}

/* ── 節と見出し（サイトの型に合わせる） ─────────── */

.starp__section {
	margin: 0 0 8px;
}

/* あゆみの最後の箱のすぐ下に本文が始まっていた（実測 8px）。
   本文はあゆみの続きではなく、この1点についての地の文なので離す。 */
.starp__section + .starp__prose {
	margin-top: 30px;
}

/* **文字は本文・表と同じ左端にそろえる。サイトの型からは意図して外している。**
 *
 * **サイトの h2 は文字の左に teal の円を置く**（`padding-left:24px`）。
 * `et-core-unified-1030.min.css` に `.single-post .entry-content h2::before`
 * と `#page-container .recruit-content h2::before` があり、2026-09-23 に
 * 本番から引いて確かめた。**「横に置く型は無い」と書いていたのは私の誤り。**
 *
 * それでも外しているのは、**この画面には見出しが3段あるから**。
 * 円（h2・24px）・帯（h3・15px）・四角（h4・15px）と印の幅が違い、
 * 同じページの中で**文字の左端が3種類**になっていた
 * （2026-09-22 実測: 本文 127px ／ h3・h4 175px ／ h2 155px）。
 * サイトの記事本文は h2 しか飾らないので、この問題が起きない。
 *
 * **戻すならここと `.svc-h2`（star-services）の2か所**。
 * 戻すときは h3・h4 の印も揃えないと、同じずれが戻る。
 */
.starp__h2 {
	margin: 3.4em 0 1.2em;
	padding: 0 0 0.6em;
	border-bottom: 1px solid #bbb;
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.5;
}

/* ── 構成素材 ───────────────────────────────────── */

.starp__bar {
	display: flex;
	width: 100%;
	height: 12px;
	margin-bottom: 16px;
	overflow: hidden;
	background: var(--starp-line-soft);
}

.starp__bar-seg {
	display: block;
	height: 100%;
	min-width: 2px;
}

.starp__bar-seg[data-i="0"], .starp__swatch[data-i="0"] { background: #2ea7b5; }
.starp__bar-seg[data-i="1"], .starp__swatch[data-i="1"] { background: #1d7f8c; }
.starp__bar-seg[data-i="2"], .starp__swatch[data-i="2"] { background: #8dcbd3; }
.starp__bar-seg[data-i="3"], .starp__swatch[data-i="3"] { background: #d8b36a; }
.starp__bar-seg[data-i="4"], .starp__swatch[data-i="4"] { background: #6f7f82; }
.starp__bar-seg[data-i="5"], .starp__swatch[data-i="5"] { background: #c3d3cf; }

.starp__bar-seg.is-unknown {
	background: repeating-linear-gradient(135deg, #dcdcdc 0 5px, #ededed 5px 10px);
}

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

.starp__comp-item {
	display: grid;
	grid-template-columns: 10px 1fr auto;
	align-items: baseline;
	gap: 2px 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--starp-line-soft);
	line-height: 1.6 !important;
}

.starp__swatch {
	width: 10px;
	height: 10px;
	transform: translateY(1px);
}

.starp__comp-name {
	font-size: 1rem;
}

.starp__comp-ratio {
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.starp__comp-note {
	grid-column: 2 / -1;
	font-size: 0.8125rem;
	line-height: 1.75;
	color: var(--starp-muted);
}

.starp__warn {
	margin: 4px 0 20px;
	padding: 11px 14px;
	border-left: 3px solid var(--starp-danger);
	background: #fdf3f2;
	font-size: 0.875rem;
	color: var(--starp-danger) !important;
}

/* ── あゆみ（4段） ──────────────────────────────── */

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

.starp__step {
	position: relative;
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 0 14px;
	padding-bottom: 26px;
}

.starp__step:last-child {
	padding-bottom: 0;
}

/* 段をつなぐ縦線。印の中心（13px）に合わせる。 */
.starp__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 30px;
	bottom: 2px;
	left: 12px;
	width: 1px;
	background: var(--starp-line);
}

/* 印は見出しの teal の円と同じ言葉。数字が入るので少し大きい。 */
.starp__step-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--starp-accent);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.starp__step-title {
	margin: 0 0 10px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
}

.starp__rows {
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--starp-line);
	background: var(--starp-bg-soft);
}

.starp__rows dt {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: var(--starp-muted);
}

.starp__rows dd {
	margin: 0 0 14px;
	font-size: 1rem;
	line-height: 1.8;
}

.starp__rows dd:last-child {
	margin-bottom: 0;
}

/* その段の写真。解体の手順など、順番のあるものが入る。 */

.starp__shots {
	display: grid;
	/* 112px は 320px 幅でも2列入る大きさ。140px にすると 360px で
	   1列に落ち、4枚で高さが 1,100px 増える（実測）。 */
	grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr));
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.starp__shots li {
	margin: 0;
	line-height: 0 !important;
}

.starp__shots a {
	position: relative;
	display: block;
	background: var(--starp-bg-soft);
}

.starp__shots img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* 何枚目かを出す。手順として並ぶとき、順番が読めないと使えない。 */
.starp__shot-n {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	background: rgba(17, 17, 17, 0.78);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

.starp__step-link {
	margin: 10px 0 0;
	font-size: 0.9375rem;
}

.starp__empty {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed #bbb;
	font-size: 0.9375rem;
	color: var(--starp-muted) !important;
	background: #fff;
}

/* ── 本文 ───────────────────────────────────────── */

.starp__prose > :first-child {
	margin-top: 0;
}

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

/* ── 関連リンク ─────────────────────────────────── */

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

.starp__links li {
	border-bottom: 1px solid var(--starp-line-soft);
}

/* 行ごと押せるようにする。文字だけを当たり判定にすると 17px しかない。 */
.starp__links a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 0;
	font-size: 1rem;
}

.starp__links a::before {
	content: "→";
	margin-right: 10px;
	color: var(--starp-accent);
}

/* ── 足まわり ───────────────────────────────────── */

.starp__foot {
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid var(--starp-line);
}

/* **関連リンクのすぐ下では、足まわりの罫を引かない。**
   関連リンクは1行ごとに下の罫を持つので、最後の行の罫と足まわりの罫が
   37px の隙間を挟んで並ぶ（2026-09-22 実測）。区切りは行の罫が果たしている。
   関連リンクは `<section>` に包まれているので、印はその節に持たせる
   （`:has()` を使うと、この1か所のために対応ブラウザの条件が増える）。 */
.starp__section--links + .starp__foot {
	border-top: 0;
}

/* サイトのボタンは黒の丸。teal は印と線にだけ使う。 */
.starp__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 26px;
	border-radius: 999px;
	background: var(--starp-btn);
	color: #fff !important;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.starp__back::before {
	content: "←";
	margin-right: 8px;
}

.starp__back:hover {
	background: var(--starp-btn-hover);
	color: #fff !important;
}

.starp__note {
	margin: 18px 0 0;
	font-size: 0.8125rem;
	line-height: 1.85 !important;
	color: var(--starp-muted) !important;
}

/* ============================================================
 *  一覧
 * ============================================================ */

/* 一覧も1点ごとのページも、同じ列に収める（上の .starp で決めている）。 */
.starp--list {
	max-width: none;
}

/* 見出しだけを入れた箱。.starp の padding-bottom（64px）がそのまま
   効いて、題名と前書きの間に大きな空きができる（実際にそうなった）。 */
/* **強さを上げてある。** 下の @media に .starp{padding-bottom:88px} があり、
   同じ強さだと後ろに書いたほうが勝つ。実測で 88px の空きが残っていた
   （2026-09-22。題名と前書きの間が 150px 空いていた原因）。 */
.starp--list .starp-archive__head,
.starp-archive__head {
	padding-bottom: 0 !important;
}

/* ページの題名は、サイトの `.latest-heading h1` と同じ型にする——
   **文字の上に teal の円を置く**（PC 18px / SP 14px）。
   大きさだけは変えてある。サイトは 40px 固定だが、
   「マテリアルパスポート」は10文字あり、320px では2行を大きく占める。 */
.starp-archive__head .starp__title {
	display: inline-block;
	position: relative;
	margin: 0 0 18px;
	padding-top: 26px;
	font-size: 1.75rem;
	line-height: 1.25;
}

.starp-archive__head .starp__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--starp-accent);
}

.starp-list__intro {
	margin: 0 0 36px;
	font-size: 1rem;
}

/* **一覧を固定ページで出すときの左端。**
 *
 * テーマの題名モジュールは左右に 3%（980px 以下は 5%）の余白を持つ
 * （実測: `.et_pb_section .et_pb_post_title_0_tb_body.et_pb_post_title
 * {margin-left:3%!important}`）。本文の側は 0 なので、**題名だけが右に
 * ずれて見える**（2026-09-24 編集長のご指摘）。
 *
 * ご利用案内は `.svc{margin:0 3%}` で題名に合わせてある。ここも同じにする。
 * ただし**前書きは固定ページの本文**（編集部が書く段落）で `.starp` の外に
 * あるので、一覧だけをずらすと前書きが取り残される。
 * **本文の直下の子を全部ずらす**——何を書き足しても左端がそろう。
 */
body.starp-list-page .entry-content > *,
body.starp-list-page .et_pb_post_content > * {
	margin-left: 3%;
	margin-right: 3%;

	/* **`width` も戻す。** `.starp` は `width: 100%` を持っているので、
	   左右に余白を足しても縮まず、**そのぶん右へはみ出す**
	   （2026-09-24 実測。390px で 20px、360px で 18px あふれていた）。
	   余白で位置を決めるときは、幅を親任せにしないと必ずこうなる。 */
	width: auto;
}

/* **767px で 5% に変わる。** 本番の指定を引いて確かめた値で、推測ではない
   （`@media only screen and (max-width:767px)` の中に 5% の指定がある）。
   980px と思い込んで書いたときは、390px で題名だけ 7px ずれていた。 */
@media (max-width: 767px) {
	body.starp-list-page .entry-content > *,
	body.starp-list-page .et_pb_post_content > * {
		margin-left: 5%;
		margin-right: 5%;
	}
}

/* 本文の段落と一覧の間。前書きは固定ページの本文なので、
   一覧の側（`.starp-list__intro`）の余白が効かない。実測で 0px だった。 */
body.starp-list-page .entry-content > * + *,
body.starp-list-page .et_pb_post_content > * + * {
	margin-top: 32px;
}

.starp-list__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 40px;
}

.starp-list__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 42px;
	padding: 6px 16px;
	border: 1px solid var(--starp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--starp-ink) !important;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
}

.starp-list__chip:hover {
	border-color: var(--starp-accent);
}

.starp-list__chip.is-current {
	border-color: var(--starp-btn);
	background: var(--starp-btn);
	color: #fff !important;
}

.starp-list__count {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

/* min() で包む。素の minmax は画面がその幅より狭いときに縮まない。 */
.starp-list__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 箱は角丸なし・1px #ddd。サイトの speaker-profile と同じ形。 */
.starp-card {
	border: 1px solid var(--starp-line);
	background: #fff;
	transition: border-color 0.15s ease;
}

.starp-card:hover {
	border-color: var(--starp-accent);
}

.starp-card__link {
	display: block;
	color: inherit !important;
	text-decoration: none;
}

.starp-card__thumb {
	display: block;
	background: var(--starp-bg-soft);
}

.starp-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.starp-card__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	color: #c7c7c7;
}

.starp-card__body {
	display: block;
	padding: 16px 18px 18px;
}

.starp-card__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 9px;
	line-height: 1.4;
}

.starp-card__title {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
}

.starp-card__summary {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 6px;
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--starp-muted);
}

/* ============================================================
 *  広い画面で足すもの
 * ============================================================ */

@media (min-width: 768px) {

	.starp {
		--starp-pad: 24px;
		padding-bottom: 88px;
	}

	.starp__hero {
		margin-inline: 0;
	}

	.starp__title {
		font-size: 1.875rem;
	}

	.starp__h2 {
		margin: 3.4em 0 1.2em;
		font-size: 1.5rem;
	}

	.starp__step {
		grid-template-columns: 30px 1fr;
		gap: 0 18px;
	}

	.starp__step:not(:last-child)::before {
		top: 34px;
		left: 14px;
	}

	.starp__step-mark {
		width: 30px;
		height: 30px;
		font-size: 0.75rem;
	}

	.starp__rows {
		display: grid;
		grid-template-columns: 8.5em 1fr;
		gap: 4px 18px;
		padding: 20px 24px;
	}

	.starp__rows dt {
		font-size: 0.75rem;
		line-height: 1.9;
	}

	.starp__rows dd {
		margin-bottom: 6px;
	}

	.starp__shots {
		grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
	}

	.starp-archive__head .starp__title {
		margin-bottom: 20px;
		padding-top: 32px;
		font-size: 2.5rem;
		line-height: 1.15;
	}

	.starp-archive__head .starp__title::before {
		width: 18px;
		height: 18px;
	}
}

/* ============================================================
 *  紙に出すとき（現物に添える札として印刷されることがある）
 * ============================================================ */

@media print {

	.starp {
		width: 100%;
		max-width: none;
		padding: 0;
		font-size: 11pt;
	}

	.starp__foot,
	.starp-list__filter {
		display: none;
	}

	.starp__step {
		break-inside: avoid;
	}
}