/* ============================================================
   業務実績ページ（page-results.html）専用スタイル
   ============================================================ */

.ss-biz {
	position: relative;
	background: #fff;
}

/* WP core adds margin-block-start:24px to non-first children of a
   constrained-layout container; each section below already carries its
   own padding, so neutralize that to avoid doubled-up gaps. */
.ss-biz.wp-block-group > * {
	margin-block-start: 0;
}

.ss-biz__container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	box-sizing: border-box;
}

a {
	color: inherit;
}

/* ============ タイトル ============ */
/* 業務内容ページ(.ss-service__intro, service.css)と同じデザイン・同じ
   実装方式に揃える(モバイルファースト + clamp()で768〜1920pxをフルード
   にスケール)。固定pxの絶対配置だった旧実装は、SP/PCの境界(767/768px)
   をまたぐ瞬間にサイズが飛ぶ上、幅を連続的に変えている間はまったく
   スケールしない(768pxでも1920pxでも同じ見た目)ため、ウィンドウ幅を
   変えたときに崩れて見える原因になっていた。 */
/* overflow-x:hidden contains .intro-circle's horizontal bleed (see below)
   so it can't force page-wide horizontal scroll on narrow SP widths --
   "BUSINESS" + the circle together run wider than the available column
   there (unlike on PC, where the container is wide enough). Per the CSS
   overflow spec, overflow-x:hidden auto-upgrades overflow-y from its
   default 'visible' to 'auto', which would clip the circle's own
   vertical bleed above the text (it's taller than the text, centered on
   it) if that bleed exceeded this padding-top -- the mobile circle
   (100px) bleeds exactly 30px above the text (40px) on each side, so
   34px of padding-top (below) covers it with a small safety margin;
   PC's own clamp() range (further down) stays safely under its own
   padding-top at every width in between too. */
.ss-biz__intro {
	position: relative;
	overflow-x: hidden;
	padding: 34px 0 30px;
}

.ss-biz__intro-stage {
	position: relative;
	/* .intro-headingのmargin-topは、これが無いと(border/paddingを持たない
	   親の)最初の子要素のtopマージンとして親に食い込み(margin collapse)、
	   .intro-decorationとの間に実際の隙間が生まれない。display:flow-root
	   で新しいBFCを作り、margin-topが内側でちゃんと効くようにする。 */
	display: flow-root;
}

/* 丸(文字より背が高い)がこの行の高さになってしまわないよう、行の高さは
   文字(.intro-bg)だけで決まるようにし(display:inline-block)、丸は文字を
   基準にposition:absolute + top:50%/transformで縦中央、left:100%で
   文字の右端に配置する。 */
.ss-biz__intro-decoration {
	position: relative;
	display: inline-block;
	z-index: 0;
	pointer-events: none;
}

.ss-biz__intro-bg {
	display: block;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #cfecffcc;
	line-height: 1;
	white-space: nowrap;
}

/* margin-left pulls the circle back toward/under "BUSINESS" (overlapping
   its last couple of letters) rather than sitting fully clear of it --
   at mobile sizes, "BUSINESS" + a clear-of-text circle is wider than an
   iPhone SE's 375px viewport, so .ss-biz__intro's overflow-x:hidden
   (above) was clipping the circle's own right edge. The design's own SP
   reference has the circle overlapping the text the same way, so this
   isn't just a hack to fit -- it matches the source design once you
   measure that overlap directly (rather than the source's own
   PC-scaled non-overlapping placement, which is what the clamp()
   override below still uses). */
.ss-biz__intro-circle {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-left: -4px;
	transform: translateY(-50%);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: linear-gradient(135deg, #c7dfec 0%, #bdd9e9 47%, #69a9d3 83%, #036eb8 100%);
}

.ss-biz__intro-heading {
	position: relative;
	z-index: 1;
	margin-top: 50px;
}

.ss-biz__intro-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.25em;
	line-height: 1.4;
}

.ss-biz__intro-text {
	margin: 0;
	font-size: 14px;
	line-height: 2;
}

.ss-biz__intro-text a {
	color: #0b73ba;
	text-decoration: underline;
}

/* PC (>=768px)。768〜1920pxの間はclamp(V*0.4px, (V/19.2)vw, Vpx)で
   フルードにスケールする、company.css/service.cssと同じ規約。 */
@media (min-width: 768px) {
	.ss-biz__intro {
		padding: clamp(24px, 3.13vw, 60px) 0 clamp(16px, 2.08vw, 40px);
	}

	.ss-biz__intro-bg {
		font-size: clamp(48px, 6.25vw, 120px);
		letter-spacing: 0.25em;
	}

	.ss-biz__intro-circle {
		margin-left: clamp(6.4px, 0.83vw, 16px);
		width: clamp(80px, 10.42vw, 200px);
		height: clamp(80px, 10.42vw, 200px);
	}

	.ss-biz__intro-heading {
		margin-top: clamp(32.8px, 4.27vw, 82px);
	}

	.ss-biz__intro-title {
		font-size: clamp(24px, 1.56vw, 30px);
		margin-bottom: clamp(6.4px, 0.83vw, 16px);
	}

	.ss-biz__intro-text {
		font-size: clamp(14.4px, 0.94vw, 18px);
	}
}

/* ============ 検索 ============ */
.ss-biz__search {
	padding: 0 0 60px;
	overflow-x: hidden;
}

/* flex-wrap:wrap is a safety net, not the normal case: .ss-biz__tab below
   is flex-shrink:0 (never compresses), so at any width where both tabs
   still fit on one line they do -- this only kicks in if the viewport is
   ever too narrow for that, dropping the inactive tab to its own line
   intact instead of letting the row overflow.

   position:relative + z-index:1 makes the whole row paint above its
   sibling .ss-biz__tabs-hairline-wrap (below), which is itself positioned
   (position:relative) -- a positioned element always paints above an
   unpositioned sibling's in-flow box regardless of any z-index set on
   elements *inside* that unpositioned box, so without this the active
   tab's own z-index:2 (set on .ss-biz__tab--active, further down) could
   never actually win against the hairline no matter how high it were
   set: that comparison only happens within .ss-biz__tabs' own stacking,
   it doesn't reach up past .ss-biz__tabs' own (previously unpositioned)
   box to compete with a sibling of ITS ancestor. */
.ss-biz__tabs {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	row-gap: 8px;
}

/* flex-shrink:0 + white-space:nowrap: without these, a narrowing flex
   container shrinks each tab below its content's natural width, and
   since CJK text can break between any two characters, the button's own
   label wraps into two lines instead -- distorting the pill's height and
   knocking the icon/hairline out of alignment. Keeping the tab at its
   natural size and letting .ss-biz__tabs wrap the row instead (above)
   keeps every tab's own shape intact at any window width. */
.ss-biz__tab {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 8px;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.1em;
	white-space: nowrap;
	padding: 16px 32px;
	border: 1px solid #0b73ba;
	border-bottom: none;
	border-radius: 20px 20px 0 0;
	background: #fff;
	color: #0b73ba;
	cursor: pointer;
	font-family: inherit;
}

.ss-biz__tab--active {
	position: relative;
	z-index: 2;
}

/* Paints over the hairline sliver that sits directly beneath the active
   tab (bottom:-1px reaches down into the hairline's own band, matching
   its 1px weight below) so that segment reads as "no line" rather than a
   visible stroke touching the tab's own bottom edge -- sized/positioned
   from the tab's own real box, so it lines up exactly with the tab's
   actual rendered edges at any width, with no separate measurement to
   keep in sync. */
.ss-biz__tab--active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: #fff;
}

.ss-biz__tab--inactive {
	background: #e1f3ff;
	color: #0b73ba;
	opacity: 0.8;
	border-color: transparent;
	cursor: default;
}

/* Was margin-left on .ss-biz__tab--inactive, which put the gap on
   whichever tab was CURRENTLY inactive -- fine while 検索する stayed
   permanently active (it's always first), but once 年代別に見る became
   clickable too, activating it made 検索する inactive and inherit that
   margin instead, shoving the whole row 16px to the right since it's the
   first flex item. Keying the gap to position (the second tab,
   regardless of which one that is) instead of the active/inactive class
   keeps both tabs' shared left edge fixed no matter which is active. */
.ss-biz__tab + .ss-biz__tab {
	margin-left: 16px;
}

.ss-biz__tab-icon {
	width: 24px;
	height: 24px;
}

/* The design's Line 34 / Line 35: a hairline at the "検索する" tab's own bottom
   edge, running the full page width through the gutters on both sides.
   An earlier version tried to skip the segment directly under the tab
   (two independently calc()-positioned pieces, relying on the tab's
   opaque background + z-index:2 to hide the join), but the two edges
   never quite lined up with the tab's actual rendered edge pixel-for-
   pixel, leaving a faint gap at the tab's own corners at some widths.
   A single unbroken border-top across the whole 100vw-wide wrap can't
   have that kind of gap by construction -- the tabs (z-index:2) simply
   paint over the portion of it beneath them, same as before, just
   without a second independently-positioned edge that can drift out of
   sync with the tab's real one. The two <span> segments in the markup
   are unused now (kept rather than edited out of the template) --
   .ss-biz__tabs-hairline below hides them. The design's own line asset (SP,
   "Line 44") is a bare SVG <line> with no stroke-width
   attribute, i.e. the SVG default of 1px -- not 2px. */
.ss-biz__tabs-hairline-wrap {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-top: 0 !important;
	height: 0;
	border-top: 1px solid #0b73ba;
}

.ss-biz__tabs-hairline {
	display: none;
}

/* The design only borders the small "検索する" tab header (see .ss-biz__tab--active)
   -- the results area below it (input/count-bar/cards) has no wrapping box,
   so this panel is unbordered, not a bordered card like an earlier pass had. */
.ss-biz__panel {
	background: #fff;
	padding: 32px 0 0;
	position: relative;
	z-index: 1;
}

/* The design indents the search controls and results narrower than the full
   1100px column (the count bar below is the only thing that spans the
   full width), so this centers them at a fixed narrower width. */
.ss-biz__panel-controls,
.ss-biz__cards {
	max-width: 966px;
	margin-left: auto;
	margin-right: auto;
}

.ss-biz__panel-controls {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

/* When 条件検索 is open, .ss-biz__filter continues the box directly below
   the toggle button, so the gap between them collapses to 0 here -- .ss-biz__filter
   supplies its own margin-bottom for the space after the box instead. */
.ss-biz__panel-controls:has(.ss-biz__condition[aria-expanded="true"]) {
	margin-bottom: 0;
}

.ss-biz__filter-freeword {
	padding: 20px 0;
}

.ss-biz__freeword-input {
	display: block;
	width: 430px;
	max-width: 100%;
	box-sizing: border-box;
	height: 46px;
	border: none;
	border-radius: 5px;
	background: rgba(225, 243, 255, 0.8);
	padding: 0 16px;
	font-size: 18px;
	line-height: normal;
	font-family: inherit;
}

.ss-biz__freeword-input::placeholder {
	color: rgba(102, 102, 102, 0.5);
}

.ss-biz__condition {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #cfecff;
	border-radius: 10px;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #0b73ba;
	padding: 18px 24px;
	font-family: inherit;
}

/* Open state: the button's bottom edge merges into .ss-biz__filter below it
   into one continuous box, so its own bottom border/radius is dropped --
   border-bottom-color (not `border-bottom: none`) so the box's height
   doesn't shift by the removed border's width. */
.ss-biz__condition[aria-expanded="true"] {
	border-radius: 10px 10px 0 0;
	border-bottom-color: transparent;
}

.ss-biz__condition-icon {
	width: 24px;
	height: 24px;
}

/* The source SVG is drawn pointing up; the design rotates it 180deg for the
   closed/default state, which points it down. Opened, it's left un-rotated
   (pointing back up), matching the 条件検索ステップ1 reference. */
.ss-biz__condition-chevron {
	width: 16px;
	height: 8px;
	margin-left: auto;
	transform: rotate(180deg);
	transition: transform 0.2s;
}

.ss-biz__condition[aria-expanded="true"] .ss-biz__condition-chevron {
	transform: rotate(0deg);
}

/* ============ 条件検索パネル ============ */
.ss-biz__filter {
	max-width: 966px;
	margin: 0 auto 32px;
	padding: 4px 24px 24px;
	box-sizing: border-box;
	border: 1px solid #cfecff;
	border-top: none;
	border-radius: 0 0 10px 10px;
}

.ss-biz__filter-item {
	border-bottom: 1px solid #0b73ba;
}

.ss-biz__filter-row {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 12px 0;
	cursor: pointer;
}

.ss-biz__filter-checkbox {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	border-radius: 5px;
	border: 1px solid #ccc;
	background: #fff;
	cursor: pointer;
	padding: 0;
	position: relative;
}

.ss-biz__filter-checkbox:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #ff0000;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ss-biz__filter-title {
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.1em;
}

/* The design's arrow glyph itself is only 14x7px -- much too small a hit target
   to click reliably, so this button pads well past the glyph, and (per the
   JS) a click anywhere on .ss-biz__filter-row toggles the same thing. */
.ss-biz__filter-toggle {
	margin-left: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
}

.ss-biz__filter-toggle img {
	width: 14px;
	height: 7px;
	/* Collapsed = pointing down; expanded (aria-expanded="true", see below)
	   = pointing back up, matching the 条件検索ステップ2 reference.
	   rotate() (not scaleY(-1), used previously) so the transition below
	   visibly spins the arrow around instead of flattening it through a
	   scaleY:0 flip, matching .ss-biz__condition-chevron's own animation
	   (further up) and the reference site's rotating caret. */
	transform: rotate(180deg);
	transition: transform 0.2s;
}

.ss-biz__filter-toggle[aria-expanded="true"] img {
	transform: rotate(0deg);
}

/* Column count per category matches the design exactly: every category is a
   4-column grid except 開発言語, which the design lays out as 5 columns. */
.ss-biz__filter-options {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px 20px;
	padding: 4px 0 20px 39px;
}

/* An explicit `display` on an element defeats the browser's own
   `[hidden] { display: none }` rule (author styles always win over the
   user-agent stylesheet, regardless of selector specificity), so without
   this override, setting the `hidden` attribute via JS had no visual
   effect and every category always rendered expanded. */
.ss-biz__filter-options[hidden] {
	display: none;
}

.ss-biz__filter-options--cols-5 {
	grid-template-columns: repeat(5, 1fr);
}

.ss-biz__filter-option {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.ss-biz__filter-option input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin: 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	position: relative;
}

.ss-biz__filter-option input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #ff0000;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ss-biz__filter-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 80px;
	margin-top: 32px;
}

.ss-biz__filter-submit-group {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ss-biz__filter-count {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: #0b73ba;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.1em;
	margin: 0;
	white-space: nowrap;
}

.ss-biz__filter-count span {
	font-weight: 400;
	font-size: 20px;
}

.ss-biz__filter-submit,
.ss-biz__filter-clear {
	border-radius: 15px;
	padding: 20px 32px;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
	cursor: pointer;
	font-family: inherit;
}

.ss-biz__filter-submit {
	border: none;
	background: #0b73ba;
	color: #fff;
	transition: background 0.2s;
}

.ss-biz__filter-submit:hover {
	background: #000;
}

.ss-biz__filter-clear {
	border: 2px solid #0b73ba;
	background: #fff;
	color: #666;
	transition: box-shadow 0.2s;
}

/* Same inset-box-shadow technique as .ss-biz__more-btn:hover -- simulates
   the spec's 6pt border without a layout-shifting border-width change. */
.ss-biz__filter-clear:hover {
	box-shadow: inset 0 0 0 4px #0b73ba;
}

/* ============ 検索条件フローティングパネル ============ */
/* The design's "途中で出てくる" widget: a compact floating recap of the count +
   submit/clear actions that appears once the panel's own buttons have
   scrolled out of view, so they don't need to scroll back up. */
/* transform-origin:right keeps the panel's own right edge in place as it
   shrinks, instead of scaling from its center and drifting further right
   than intended. */
.ss-biz__float {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%) scale(0.8);
	transform-origin: right center;
	z-index: 20;
	width: 240px;
	background: #fff;
	border: 10px solid #cfecff;
	border-right: none;
	border-radius: 10px 0 0 10px;
	padding: 30px 20px;
}

.ss-biz__float-label {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	gap: 8px;
	color: #0b73ba;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.1em;
	margin: 0 0 20px;
}

.ss-biz__float-label span {
	font-weight: 400;
	font-size: 20px;
}

.ss-biz__float-actions {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ss-biz__float-submit,
.ss-biz__float-clear {
	border: none;
	border-radius: 15px;
	padding: 26px 20px;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
}

.ss-biz__float-submit {
	background: #0b73ba;
	color: #fff;
	transition: background 0.2s;
}

.ss-biz__float-submit:hover {
	background: #000;
}

.ss-biz__float-clear {
	background: #eee;
	color: #666;
	transition: box-shadow 0.2s;
}

/* No border normally -- an inset box-shadow adds the spec's 2pt #000000
   line on hover without a layout-shifting border being introduced. */
.ss-biz__float-clear:hover {
	box-shadow: inset 0 0 0 2px #000;
}

/* 右どっく式(上の基本スタイル、240px幅)は、カード一覧の右端との間に240px
   以上の余白がある画面幅でないと重なってしまう。カード一覧
   (.ss-biz__panel-controls/.ss-biz__cards)自体がmax-width:966pxで
   画面中央基準にさらに中央寄せされているため(コンテナのmax-width:1100px
   やpaddingだけでは計算を誤る)、カード右端の位置は「画面幅の中心+483px」。
   これが「画面幅-240px」(フロート左端)と一致するのは画面幅1446pxの時
   なので、それ未満ではSPと同じ「画面下部に固定する横長バー」に
   切り替える(以下はSP版と同じ内容)。 */
@media (min-width: 768px) and (max-width: 1445.98px) {
	.ss-biz__float {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		transform: none;
		width: auto;
		background: #eee;
		border: none;
		border-radius: 0;
		padding: 12px 16px;
	}

	/* 背景(.ss-biz__float、画面幅いっぱい)とは別に、中身だけを中央寄せ・
	   最大幅で制限する。 */
	.ss-biz__float-inner {
		max-width: 600px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	/* このdisplay:flexがUA標準の[hidden]{display:none}に(詳細度が同じ
	   セレクタの中で後に書かれているため)勝ってしまい、business.jsの
	   floatPanel.hidden切り替えが見た目に反映されなくなる。SP版と同じ対策。 */
	.ss-biz__float[hidden] {
		display: none;
	}

	.ss-biz__float-label {
		flex-direction: column;
		align-items: center;
		gap: 2px;
		margin: 0;
		flex-shrink: 0;
		font-size: 14px;
	}

	.ss-biz__float-label span {
		font-size: 18px;
	}

	.ss-biz__float-actions {
		flex-direction: row;
		flex: 1;
		max-width: 265px;
		gap: 10px;
	}

	.ss-biz__float-submit,
	.ss-biz__float-clear {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		padding: 0 4px;
		font-size: 14px;
		white-space: nowrap;
		border-radius: 10px;
	}

	.ss-biz__float-clear {
		background: #fff;
	}
}

.ss-biz__count-bar {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
	background: #0b73ba;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.1em;
	padding: 12px 24px;
	border-radius: 5px;
	margin-bottom: 24px;
}

.ss-biz__cards {
	list-style: none;
	margin: 0 auto 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ss-biz__no-results {
	padding: 40px 0;
	text-align: center;
	font-size: 16px;
	color: #666;
}

/* Each row pairs up 2 results side by side. It's a subgrid so that the 6
   fields (期間/タイトル/利用分野/説明文/開発分野/キーワード) line up at
   the same height between the two cards -- whichever card's field is
   taller sets the row's height, and the shorter one stretches to match
   (equivalent to padding the shorter one out with blank space), instead of
   each card's height depending only on its own content. */
.ss-biz__card-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(6, auto);
	column-gap: 20px;
}

.ss-biz__card {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 1 / span 6;
	border-bottom: 10px solid #cfecff;
	border-right: 10px solid #cfecff;
	border-radius: 0 0 20px 0;
	padding: 20px 15px;
	position: relative;
}

.ss-biz__card-tags {
	font-size: 16px;
	color: #000;
	margin: 0;
}

.ss-biz__card-fields {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 8px;
	margin-bottom: 12px;
}

.ss-biz__field {
	display: inline-flex;
	align-items: center;
	border: 1px solid #000;
	border-radius: 5px;
	padding: 6px 10px;
	font-size: 14px;
	line-height: 1;
	background: #fff;
}

.ss-biz__card-categories {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 10px;
	margin-bottom: 16px;
}

.ss-biz__category {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--ss-biz-category-bg, #666);
	color: #fff;
	border-radius: 5px;
	padding: 5px 10px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}

.ss-biz__category img {
	width: 30px;
	height: 27px;
	object-fit: contain;
}

.ss-biz__category--dark-text {
	color: #231815;
}

.ss-biz__card-title {
	font-weight: 700;
	font-size: 24px;
	line-height: 1.25;
	margin: 0 0 16px;
}

.ss-biz__card-desc {
	font-size: 15px;
	line-height: 1.85;
	color: #000;
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #0b73ba;
}

.ss-biz__card-dates {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	align-content: flex-start;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #0b73ba;
}

.ss-biz__card-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 16px;
	line-height: 1;
}

.ss-biz__card-date img {
	width: 20px;
	height: 20px;
}

.ss-biz__card-date--ongoing {
	color: red;
}

.ss-biz__more {
	display: flex;
	justify-content: center;
}

.ss-biz__more-btn {
	border: 2px solid #0b73ba;
	border-radius: 15px;
	background: transparent;
	padding: 20px 80px;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: #666;
	cursor: pointer;
	font-family: inherit;
	transition: box-shadow 0.2s;
}

/* Thickens the border to 6pt on hover (per the マウスオーバー spec) without
   any fill/text-color change -- an inset box-shadow adds the extra 4px
   on top of the existing 2px border without affecting layout (a literal
   border-width change would grow the button and shift surrounding
   content, since these buttons have no fixed width/height to absorb it). */
.ss-biz__more-btn:hover {
	box-shadow: inset 0 0 0 4px #0b73ba;
}

/* ============ 年代別に見る ============ */
/* Same max-width/centering as .ss-biz__filter -- the two tabs' content
   areas share the same 850px column. */
.ss-biz__era-panel {
	max-width: 850px;
	margin: 0 auto 32px;
	padding: 40px 0;
}

/* Measured directly from the design's absolute coordinates (every
   row's text-top-to-text-top spacing and text-top-to-divider spacing),
   not estimated from row/text heights: 35px from one row's own divider
   down to the next row's title, 40px from that title down to its own
   divider -- an asymmetric split, not a simple centered guess.

   The divider lives on .era-row itself (not .era-item, which also wraps
   .era-cards below it) so it stays put right under the title when
   opened, instead of sliding down to trail below the now-expanded
   cards. */
.ss-biz__era-row {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 35px 0 40px;
	border-bottom: 1px solid #0b73ba;
	cursor: pointer;
}

.ss-biz__era-title {
	line-height: 1;
}

/* The design sets the year numbers themselves larger/bolder than
   the connecting 年〜／年～ particles around them -- see
   solidstar_biz_era_title_html() in business-cases.php, which is what
   splits the label into these two spans. */
.ss-biz__era-year {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.ss-biz__era-suffix {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.05em;
}

/* .is-open is toggled by JS alongside aria-expanded/hidden -- the design turns
   an expanded era's own title blue, matching the active-tab blue. Also
   applied on :hover (not in the original design, but requested) so the whole row reads
   as interactive before it's actually opened. */
.ss-biz__era-row.is-open .ss-biz__era-title,
.ss-biz__era-row:hover .ss-biz__era-title {
	color: #0b73ba;
}

/* Matches .ss-biz__era-card's own border width (2px) once open, instead
   of staying at the row's usual 1px hairline. */
.ss-biz__era-row.is-open {
	border-bottom-width: 2px;
}

/* Same hit-target-padding reasoning as .ss-biz__filter-toggle: the arrow
   glyph is small, so the clickable button is padded well past it, and
   (per the JS) a click anywhere on .ss-biz__era-row toggles the same
   thing. */
.ss-biz__era-toggle {
	margin-left: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
}

/* The design's own vector is 14x7 on both PC and SP -- an
   earlier pass misread a Tailwind aspect-ratio utility class name
   (aspect-[28.36/14.18], a RATIO, not a pixel size) as literal
   dimensions and doubled this to 28x14 by mistake.

   A plain <img> can't be recolored via CSS `color` (its own pixel
   content is fixed), so business-cases.php renders this as an empty
   <span> instead and its color comes entirely from background-color
   here, shaped by mask-image using the same SVG as an alpha template --
   wherever the SVG is opaque, the background-color shows through;
   wherever it's transparent, nothing does. */
.ss-biz__era-toggle-icon {
	display: block;
	width: 14px;
	height: 7px;
	background-color: #000;
	-webkit-mask-image: url('../images/business/icon-chevron-small.svg');
	mask-image: url('../images/business/icon-chevron-small.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transform: rotate(180deg);
	transition: transform 0.2s, background-color 0.2s;
}

.ss-biz__era-toggle[aria-expanded="true"] .ss-biz__era-toggle-icon {
	transform: rotate(0deg);
}

.ss-biz__era-row:hover .ss-biz__era-toggle-icon {
	background-color: #0b73ba;
}

/* Smooth open/close (unlike 条件検索's instant hidden-attribute toggle,
   further up): height is animated between 0 and the content's own
   measured scrollHeight (business.js sets that px value directly, then
   swaps to height:auto once the open transition finishes so the box
   still tracks its content correctly afterwards, e.g. if the viewport is
   resized). An earlier version tried a pure-CSS grid-template-rows
   0fr/1fr trick instead (no JS height measurement needed) but it left a
   faint sliver of .ss-biz__era-card's border visible even fully closed,
   in this browser at least -- switched to the more broadly reliable
   explicit-height technique instead. */
.ss-biz__era-cards {
	height: 0;
	overflow: hidden;
	transition: height 0.3s ease;
}

.ss-biz__era-cards-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 0;
}

/* The design's own card shell is a
   plain white box with a 2px #0b73ba border-bottom + border-left and no
   corner radius -- different from .ss-biz__card's own thicker #cfecff
   border-bottom/border-right + rounded corner, so this is its own class
   rather than a modifier on that one (see the comment on
   solidstar_render_biz_era_card in business-cases.php). */
/* Right padding/gap are deliberately tighter than the left side's (30px)
   -- narrows the divider-to-content gap and widens .era-card-right so
   .card-desc wraps a few characters later per line. */
.ss-biz__era-card {
	display: flex;
	gap: 15px;
	background: #fff;
	border-bottom: 2px solid #0b73ba;
	border-left: 2px solid #0b73ba;
	padding: 20px 0 20px 30px;
}

/* No padding-right here (unlike a first pass): .ss-biz__card-dates' own
   border-bottom (below) spans this element's full content width, so
   reserving space before border-right would leave the horizontal and
   vertical dividers not actually touching -- flex-basis absorbs what
   would have been that padding instead, so the content box itself runs
   all the way to the divider. */
.ss-biz__era-card-left {
	flex: 0 0 385px;
	border-right: 1px solid #0b73ba;
}

/* .era-card-left itself has no padding-right (see above -- .card-dates'
   own divider needs the full width to reach the vertical one), but the
   title text running that close was wrapping with barely a character's
   width to spare before it. Scoped to just the title so the date row's
   divider is unaffected. */
/* min-height reserves space for 2 lines (24px font-size * 1.25 line-height
   * 2) regardless of whether this particular title actually wraps to 2
   lines -- so 利用分野 (.card-categories, right after) always starts at
   the same Y across every card in the list, not shifted up for 1-line
   titles. */
.ss-biz__era-card-left .ss-biz__card-title {
	padding-right: 24px;
	min-height: 60px;
}

/* The design's "Line 17": a divider between the date row and the title, which
   .ss-biz__card-dates doesn't otherwise have in the vertical card (there
   the next element's own spacing is enough on its own). Runs flush into
   the vertical divider (.era-card-left's own border-right, same color)
   with no gap, matching the design exactly. */
.ss-biz__era-card-left .ss-biz__card-dates {
	padding-bottom: 10px;
	margin-bottom: 16px;
	border-bottom: 1px solid #0b73ba;
}

/* The design starts the right column (description) 9px lower than the left
   column's own date row (right column content top 26px from the card's
   own top vs. the left column's 17px) -- not vertically flush with it. */
.ss-biz__era-card-right {
	flex: 1;
	min-width: 0;
	padding-top: 9px;
}

/* .ss-biz__card-desc's border-bottom (shared with the vertical card,
   where it's wanted) isn't part of the original era-card design -- description
   flows straight into the 開発分野 tags with no divider between them. */
/* Same reasoning as .era-card-left .card-title's own min-height: reserves
   2 lines (15px font-size * 1.85 line-height * 2) so 開発分野
   (.card-fields, right after) starts at the same Y whether this
   particular description wraps to 1 line or 2. */
.ss-biz__era-card-right .ss-biz__card-desc {
	border-bottom: none;
	padding-bottom: 0;
	min-height: 55.5px;
}

/* ============ 開発事例のピックアップ ============ */
.ss-biz__pickup {
	background: rgba(225, 243, 255, 0.5);
	padding: 60px 0 90px;
}

.ss-biz__pickup-inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 0;
}

/* The eyebrow sits flush with the container's left edge; the accent bar
   starts below it (not from the very top of the row), and the Japanese
   title is indented past the bar -- matching the design, where "Pickup" is
   further left than "開発事例のピックアップ" and the bar begins under
   "Pickup". Anchored to -inner (not -head) and stretched with top+bottom
   instead of a fixed height so it always reaches the true bottom of the
   row's content -- the case text when the banner sits beside it on one
   line, or the banner too when it wraps onto its own line below.
   -inner IS .ss-biz__container (shares the class, padding:0 20px), so as
   the positioned ancestor for this absolutely-positioned pseudo its
   containing block is its own padding box -- left:0 would sit at the
   outer edge of that padding (flush with the container's true/outer edge),
   20px further out than where the padding-respecting content actually
   starts. left:20px compensates so it lines up with .ss-biz__research-top's
   bar, which sits on a normal-flow nested wrapper already inset by the
   container's padding. */
.ss-biz__pickup-inner::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 50px;
	bottom: 0;
	width: 20px;
	background: #0b73ba;
}

.ss-biz__pickup-head {
	flex: 0 0 100%;
}

.ss-biz__pickup-eyebrow {
	font-size: 30px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.25em;
	color: #0b73ba;
	margin: 0;
}

.ss-biz__pickup-title {
	font-size: 30px;
	line-height: 1;
	font-weight: 700;
	margin: 24px 0 0 56px;
}

.ss-biz__pickup-case {
	flex: 0 1 600px;
	min-width: 0;
	display: block;
	text-decoration: none;
	padding-top: 6px;
	padding-left: 56px;
}

.ss-biz__pickup-case-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 12px;
}

.ss-biz__pickup-case-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	margin-left: 16px;
	background: #0b73ba;
}

.ss-biz__pickup-case-title span {
	color: #0b73ba;
}

.ss-biz__pickup-case-text {
	font-size: 16px;
	line-height: 2;
	margin: 0;
}

.ss-biz__pickup-case-link {
	color: #0b73ba;
	text-decoration: underline;
}

.ss-biz__pickup-banner {
	flex: 0 0 390px;
	display: block;
	margin-left: auto;
}

.ss-biz__pickup-banner img {
	width: 100%;
	height: auto;
	display: block;
}

/* Below the container's 1100px cap there isn't always room for the case
   text and the banner on one line, so the banner wraps onto its own line.
   margin-left:auto (above) then pushes it flush against the right edge,
   which reads oddly for an orphaned row -- line it up with the case text's
   own left edge instead. Above 1100px the container width is constant, so
   that's also the natural width above which they reliably stay on one line
   and the flush-right placement (already confirmed to look right there)
   should stand. */
@media (min-width: 768px) and (max-width: 1099px) {
	.ss-biz__pickup-banner {
		margin-left: 56px;
	}
}

/* ============ 研究開発 ============ */
.ss-biz__research {
	background: #0b73ba;
	color: #fff;
	padding: 60px 0 120px;
}

/* WordPress's default root-level block-gap otherwise leaves a white strip
   between .ss-biz (main) and the footer template-part that follows it. */
.ss-biz + .wp-block-template-part {
	margin-top: 0;
}

.ss-biz__research-head {
	margin-bottom: 32px;
}

/* Wraps everything from the eyebrow down through the two-column row so the
   accent bar (::before, below) can stretch with top+bottom instead of a
   guessed fixed height -- it reaches exactly as far as this wrapper's own
   content (the two-column row, i.e. the bottom of the Autoware box, since
   that column is the taller of the two) regardless of text reflow. */
.ss-biz__research-top {
	position: relative;
}

.ss-biz__research-top::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50px;
	bottom: 0;
	width: 20px;
	background: #cfecff;
}

.ss-biz__research-eyebrow {
	font-size: 30px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.25em;
	color: #cfecff;
	margin: 0;
}

/* Forces "Research" / "and development" onto two lines on SP only (per
   the design); on PC it stays on one line, so the <br> is suppressed there. */
.ss-biz__research-eyebrow-break {
	display: none;
}

.ss-biz__research-title {
	font-size: 30px;
	line-height: 1;
	font-weight: 700;
	color: #fff;
	margin: 24px 0 0 40px;
}

.ss-biz__research-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin-bottom: 32px;
}

.ss-biz__research-main {
	flex: 1 1 560px;
	padding-left: 40px;
}

.ss-biz__research-side {
	flex: 0 0 370px;
}

/* Below the container's 1100px cap, .ss-biz__research-main can't always
   shrink enough to leave room for .ss-biz__research-side (fixed at 370px)
   on the same line, so it wraps onto its own line -- landing at the row's
   left edge, right where .ss-biz__research-top's accent bar runs, so the
   bar visually covers the left edge of the info icon. Same reasoning/range
   as the Pickup banner fix above: stack it full-width and clear the bar
   with the same 40px indent .ss-biz__research-main already uses, matching
   how this looks on SP. Above 1100px the container width is constant, so
   that's also the natural width above which they reliably stay side by
   side. */
@media (min-width: 768px) and (max-width: 1099px) {
	.ss-biz__research-columns {
		display: block;
	}

	.ss-biz__research-side {
		margin-top: 32px;
		padding-left: 40px;
		box-sizing: border-box;
	}
}

.ss-biz__research-heading {
	display: block;
	background: #fff;
	color: #0b73ba;
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	padding: 20px;
	margin: 0 0 24px 40px;
	text-decoration: none;
	box-sizing: border-box;
}

.ss-biz__research-lead {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 24px;
}

.ss-biz__autoware {
	position: relative;
	border: 1px solid #fff;
	border-radius: 10px;
	padding: 24px 24px 12px;
	margin-bottom: 16px;
}

/* The frame's border is solid all the way round except for one short gap at
   the center of each of the 4 sides (per the design) -- not a repeating dashed
   pattern. Drawn by painting small background-colored patches over the
   border line at each edge's midpoint, sized/positioned with percentage
   math so the gaps stay centered regardless of the box's rendered width. */
.ss-biz__autoware::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(#0b73ba, #0b73ba),
		linear-gradient(#0b73ba, #0b73ba),
		linear-gradient(#0b73ba, #0b73ba),
		linear-gradient(#0b73ba, #0b73ba);
	background-position:
		top left calc(50% - 7px),
		bottom left calc(50% - 7px),
		left top calc(50% - 7px),
		right top calc(50% - 7px);
	background-size: 14px 2px, 14px 2px, 2px 14px, 2px 14px;
}

.ss-biz__autoware-title {
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 12px;
}

.ss-biz__autoware-list {
	margin: 0;
	padding-left: 1.2em;
	font-size: 16px;
	line-height: 2;
}

.ss-biz__autoware-list li {
	margin-bottom: 8px;
}

.ss-biz__autoware-note {
	font-size: 14px;
	text-align: right;
	margin: 16px 0 0;
}

.ss-biz__autoware-note a {
	color: #fff;
	text-decoration: underline;
}

.ss-biz__research-side-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 16px;
}

.ss-biz__research-side-title img {
	width: 50px;
	height: 50px;
}

.ss-biz__spec {
	margin: 0;
}

.ss-biz__spec-row {
	margin-bottom: 16px;
	margin-left: 44px;
}

.ss-biz__spec-row dt {
	background: rgba(255, 255, 255, 0.2);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 8px 14px;
	margin: 0;
}

.ss-biz__spec-row dd {
	font-size: 16px;
	line-height: 1;
	padding: 8px 14px 0;
	margin: 0;
}

/* Selectors below are scoped under .ss-biz__research (raising specificity
   above WordPress's auto-injected core/video block defaults, e.g.
   ".wp-block-video :where(figcaption){color:#555;text-align:center}") so
   this always wins regardless of stylesheet load order. */
.ss-biz__research .ss-biz__research-photo {
	margin: 0;
}

.ss-biz__research .ss-biz__research-photo video {
	width: 100%;
	max-width: 1096px;
	height: auto;
	display: block;
	border-radius: 4px;
}

.ss-biz__research .ss-biz__research-photo figcaption {
	color: #fff;
	font-size: 16px;
	text-align: left;
	margin: 0 0 12px;
}

/* ============ SP ============
   business.css has no other breakpoints -- everything above this point is
   the desktop layout. Pickup and Research and development get dedicated SP
   layouts here; other sections on this page are unaffected. */
@media (max-width: 767px) {

	/* ===== 検索 ===== */
	.ss-biz__search {
		padding: 0 0 40px;
	}

	.ss-biz__tab {
		font-size: 13px;
		padding: 10px 14px;
		gap: 6px;
		border-radius: 14px 14px 0 0;
	}

	.ss-biz__tab-icon {
		width: 18px;
		height: 18px;
	}

	/* Same fix as the base rule (further up): keyed to position (the
	   second tab), not the active/inactive class, so activating 年代別に
	   見る doesn't shove the row right by shifting this margin onto
	   検索する instead. */
	.ss-biz__tab + .ss-biz__tab {
		margin-left: 8px;
	}

	.ss-biz__panel {
		padding: 20px 0 0;
	}

	.ss-biz__panel-controls {
		max-width: none;
		gap: 12px;
		margin-bottom: 16px;
	}

	.ss-biz__condition {
		font-size: 14px;
		padding: 14px 16px;
	}

	.ss-biz__condition[aria-expanded="true"] {
		border-radius: 8px 8px 0 0;
	}

	.ss-biz__condition-icon {
		width: 18px;
		height: 18px;
	}

	/* ===== 条件検索パネル ===== */
	.ss-biz__filter {
		max-width: none;
		padding: 4px 16px 16px;
		margin: 0 0 20px;
		border-radius: 0 0 8px 8px;
	}

	.ss-biz__filter-row {
		gap: 10px;
		padding: 10px 0;
	}

	.ss-biz__filter-title {
		font-size: 14px;
	}

	.ss-biz__filter-toggle img {
		width: 12px;
		height: 6px;
	}

	/* PC's 4/5-column grid doesn't fit at SP widths -- both category
	   sizes collapse to the same 2-column grid (per the design's 条件検索を
	   全て開いた状態 reference), with a shallower left indent than PC's
	   39px since the checkbox itself sits closer to the row's edge here. */
	.ss-biz__filter-options,
	.ss-biz__filter-options--cols-5 {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px 16px;
		padding: 4px 0 16px 30px;
	}

	.ss-biz__filter-option {
		font-size: 13px;
	}

	.ss-biz__filter-freeword {
		padding: 12px 0;
	}

	.ss-biz__freeword-input {
		width: 100%;
		height: 40px;
		font-size: 14px;
	}

	/* The design's SP buttons stack full-width; the existing PC labels and
	   behavior are kept as-is (per instruction to treat structural/
	   functional details as the current implementation) -- only the
	   layout changes for SP. */
	.ss-biz__filter-actions {
		flex-direction: column;
		gap: 12px;
		margin-top: 20px;
	}

	.ss-biz__filter-submit-group {
		flex-direction: column;
		width: 100%;
		gap: 12px;
	}

	.ss-biz__filter-count {
		justify-content: center;
		width: 100%;
	}

	.ss-biz__filter-submit,
	.ss-biz__filter-clear {
		width: 100%;
		padding: 14px;
		font-size: 16px;
		text-align: center;
	}

	/* ===== 年代別に見る ===== */
	.ss-biz__era-panel {
		max-width: none;
		padding: 24px 0;
	}

	/* Measured the same way as the PC rule above, from the design's absolute
	   coordinates: 20px from one row's divider to the next
	   row's title, 15px from that title down to its own divider. */
	.ss-biz__era-row {
		padding: 20px 0 15px;
	}

	/* The design's SP open-state divider is a 5px stroke -- much
	   thicker than PC's own 2px open-state override (further up). */
	.ss-biz__era-row.is-open {
		border-bottom-width: 5px;
	}

	.ss-biz__era-year {
		font-size: 22px;
	}

	.ss-biz__era-suffix {
		font-size: 14px;
	}

	/* The design's own vector is 14x7 on SP too (same as PC, above) -- no SP
	   override needed. */

	.ss-biz__era-card {
		display: block;
		padding: 16px 14px;
	}

	.ss-biz__era-card-left {
		padding-right: 0;
		border-right: none;
	}

	/* PC reserves 2 lines' worth of height on .card-title/.card-desc so
	   利用分野/開発分野 line up across a row of side-by-side cards -- on SP
	   the cards stack in a single column instead, so there's nothing to
	   keep aligned with; drop back to auto and let each card pack its own
	   content tightly regardless of how many lines its title/description
	   actually take. */
	.ss-biz__era-card-left .ss-biz__card-title {
		padding-right: 0;
		min-height: 0;
	}

	.ss-biz__era-card-right {
		padding-top: 0;
	}

	/* The design's SP card keeps the 開発分野 divider PC drops (further up) --
	   same blue as every other divider on this page. */
	.ss-biz__era-card-right .ss-biz__card-desc {
		border-bottom: 1px solid #0b73ba;
		padding-bottom: 16px;
		min-height: 0;
	}

	/* Full-bleed like the count bar/video elsewhere on SP, escaping
	   .ss-biz__container's 20px side padding. */
	.ss-biz__count-bar {
		margin: 0 -20px 16px;
		width: calc(100% + 40px);
		border-radius: 0;
		padding: 10px 20px;
		font-size: 14px;
	}

	/* .ss-biz__cards' own gap (32px on PC) is BETWEEN <li class="card-row">
	   pairs; .ss-biz__card's margin-bottom (below) is the gap WITHIN a
	   pair, between its 2 stacked cards. On SP each row becomes exactly
	   one card (see display:block below), so keeping both at once made
	   every *other* gap wider -- 20px within a still-2-card row, then an
	   extra 32px on top of it between rows. Zeroing this one leaves
	   .ss-biz__card's margin-bottom as the sole, uniform spacing between
	   every card regardless of which row it used to belong to. */
	.ss-biz__cards {
		max-width: none;
		gap: 0;
	}

	/* Cards stack single-column on SP -- the PC subgrid pairs two cards
	   per row so their fields line up at the same height, which no
	   longer applies with one card per row, so this drops back to plain
	   block flow. */
	.ss-biz__card-row {
		display: block;
	}

	.ss-biz__card {
		display: block;
		border-width: 6px;
		border-radius: 0 0 12px 0;
		padding: 16px 14px;
		margin-bottom: 20px;
	}

	.ss-biz__card-tags {
		font-size: 14px;
	}

	.ss-biz__field {
		font-size: 12px;
		padding: 5px 8px;
	}

	.ss-biz__category {
		font-size: 12px;
		padding: 4px 8px;
	}

	.ss-biz__category img {
		width: 24px;
		height: 22px;
	}

	.ss-biz__card-title {
		font-size: 18px;
		margin-bottom: 12px;
	}

	.ss-biz__card-desc {
		font-size: 14px;
		margin-bottom: 12px;
		padding-bottom: 12px;
	}

	.ss-biz__card-dates {
		gap: 10px;
		margin-bottom: 12px;
		padding-bottom: 12px;
	}

	.ss-biz__card-date {
		font-size: 14px;
	}

	.ss-biz__card-date img {
		width: 16px;
		height: 16px;
	}

	.ss-biz__more-btn {
		width: 100%;
		padding: 14px;
		font-size: 16px;
		text-align: center;
	}

	/* ===== 検索条件フローティングパネル → 画面下部固定バー ===== */
	/* PC's floating recap docks to the right edge mid-scroll; per the design,
	   SP turns the same element into a full-width bar fixed to the
	   bottom of the viewport instead -- same markup/labels, just
	   re-laid-out. */
	.ss-biz__float {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		transform: none;
		width: auto;
		background: #eee;
		border: none;
		border-radius: 0;
		padding: 12px 16px;
	}

	/* 背景(.ss-biz__float、画面幅いっぱい)とは別に、中身だけを中央寄せ・
	   最大幅で制限する。 */
	.ss-biz__float-inner {
		max-width: 600px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	/* An explicit `display` on an element defeats the browser's own
	   `[hidden] { display: none }` rule (author styles always win over the
	   user-agent stylesheet, regardless of specificity) -- the `display:
	   flex` above was doing exactly that, so business.js's `floatPanel.
	   hidden = true/false` toggling had no visual effect on SP and the bar
	   stayed permanently visible regardless of scroll position or whether
	   条件検索 was even open. Same fix as .ss-biz__filter-options[hidden]
	   further up. */
	.ss-biz__float[hidden] {
		display: none;
	}

	.ss-biz__float-label {
		flex-direction: column;
		align-items: center;
		gap: 2px;
		margin: 0;
		flex-shrink: 0;
		font-size: 14px;
	}

	.ss-biz__float-label span {
		font-size: 18px;
	}

	.ss-biz__float-actions {
		flex-direction: row;
		flex: 1;
		max-width: 265px;
		gap: 10px;
	}

	/* The design sizes both buttons equally (125px each, 40px fixed height) with
	   the "検索条件をクリア" label's own text measuring ~112px wide at this
	   size -- 8px of horizontal padding per side left only 109px for it,
	   just short enough to wrap to 2 lines. white-space:nowrap is a safety
	   net on top of the tighter padding, in case of any font-metric
	   differences between the design tool's renderer and the browser. */
	.ss-biz__float-submit,
	.ss-biz__float-clear {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		padding: 0 4px;
		font-size: 14px;
		white-space: nowrap;
		border-radius: 10px;
	}

	/* The design: white against the bar's #eee background (PC's own #eee here
	   is for a different context -- the right-side panel, unaffected by
	   this SP-only override). */
	.ss-biz__float-clear {
		background: #fff;
	}

	/* ===== 開発事例のピックアップ ===== */
	.ss-biz__pickup {
		position: relative;
		padding: 32px 0 50px;
	}

	.ss-biz__pickup::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 10px;
		background: rgba(11, 115, 186, 0.3);
	}

	.ss-biz__pickup-inner {
		display: block;
	}

	.ss-biz__pickup-head {
		margin: 0 0 30px;
	}

	.ss-biz__pickup-inner::before {
		content: none;
	}

	.ss-biz__pickup-eyebrow {
		font-size: 24px;
		color: rgba(11, 115, 186, 0.3);
	}

	.ss-biz__pickup-title {
		font-size: 16px;
		letter-spacing: 0.25em;
		margin: 4px 0 0;
	}

	.ss-biz__pickup-case {
		margin: 0 0 15px;
		padding: 0;
	}

	.ss-biz__pickup-case-title {
		font-size: 14px;
	}

	.ss-biz__pickup-case-title::after {
		margin-left: 6px;
		background: rgba(11, 115, 186, 0.3);
	}

	.ss-biz__pickup-case-text {
		font-size: 14px;
	}

	.ss-biz__pickup-banner {
		width: 100%;
		margin: 0;
	}

	/* ===== 研究開発 ===== */
	.ss-biz__research {
		padding: 28px 0 64px;
	}

	.ss-biz__research-top::before {
		left: -20px;
		top: -28px;
		bottom: -24px;
		width: 10px;
		background: rgba(207, 236, 255, 0.2);
	}

	.ss-biz__research-head {
		margin: 0 0 13px;
	}

	.ss-biz__research-eyebrow {
		font-size: 24px;
	}

	.ss-biz__research-eyebrow-break {
		display: block;
	}

	.ss-biz__research-title {
		font-size: 16px;
		letter-spacing: 0.25em;
		margin: 13px 0 0;
	}

	.ss-biz__research-heading {
		margin: 20px 0 0;
		padding: 0 10px;
		height: 35px;
		font-size: 14px;
		display: flex;
		align-items: center;
	}

	.ss-biz__research-columns {
		display: block;
		margin: 20px 0 0;
	}

	.ss-biz__research-main {
		padding-left: 0;
	}

	.ss-biz__research-lead {
		font-size: 14px;
		padding: 0 10px;
		margin: 0 0 16px;
	}

	.ss-biz__autoware {
		padding: 16px 16px 12px;
	}

	.ss-biz__autoware-title {
		font-size: 14px;
	}

	.ss-biz__autoware-list {
		font-size: 14px;
	}

	.ss-biz__autoware-note {
		font-size: 13px;
		text-align: left;
	}

	.ss-biz__research-side {
		margin-top: 24px;
	}

	.ss-biz__research-side-title {
		font-size: 14px;
	}

	.ss-biz__research-side-title img {
		width: 35px;
		height: 35px;
	}

	.ss-biz__spec-row {
		margin-left: 0;
	}

	.ss-biz__spec-row dt,
	.ss-biz__spec-row dd {
		font-size: 14px;
	}

	/* Video is full-bleed (escapes .ss-biz__container's 20px side padding)
	   and the caption sits below it on SP, not above (per the design) -- opposite
	   of the PC order, achieved with column-reverse rather than reordering
	   the markup so the same HTML serves both breakpoints. */
	.ss-biz__research .ss-biz__research-photo {
		display: flex;
		flex-direction: column-reverse;
		margin: 24px -20px 0;
		width: calc(100% + 40px);
	}

	.ss-biz__research .ss-biz__research-photo video {
		max-width: none;
		border-radius: 0;
	}

	.ss-biz__research .ss-biz__research-photo figcaption {
		margin: 0;
		padding: 4px 20px 0;
		font-size: 14px;
	}
}