/**
 * JS CONSULTING "問題解決力強化支援" page ("problem-solving") — structural styles.
 * Enqueued only on is_page('problem-solving') (see functions.php), mirroring how
 * service-page.css / service-5s-page.css / about-page.css are each scoped to
 * their own page. Independent of those files: no class names are shared with
 * them (this page uses the .jsc-ps- prefix exclusively), so editing this
 * file can never affect SERVICE, 5S, PROFILE, CONTACT, TOP, or any other page.
 *
 * Colors/fonts come from tokens.css custom properties (--jsc-navy / --jsc-gold
 * etc.) for the page's general text/accent language, consistent with the
 * rest of the site. The two literal hex values the brief specified for this
 * page (#203864 / #E6AF00) are used only where the brief calls for them —
 * the most important arrows, turning points, the final destination (SOLVE /
 * AFTER), and the CTA button — exactly the same "brighter, more clickable
 * accent distinct from body-level token color" treatment already used for
 * .jsc-svc-area-cta in service-page.css.
 */

.jsc-section-inner {
	max-width: var(--jsc-maxw);
	margin: 0 auto;
	padding: 0 24px;
}
.jsc-section-head {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}
.jsc-section-head .jsc-eyebrow { justify-content: center; }
.jsc-section-head h2 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 1.6;
	color: var(--jsc-navy);
	margin: 0;
}
.jsc-section-lead {
	margin-top: 16px;
	color: var(--jsc-text-muted);
	font-size: 16px;
	line-height: 1.9;
}

/* Mobile-only manual line break. Named for this page only (not reusing
   .jsc-5s-mobile-br etc.) since this page never loads the other pages' CSS
   and so would get no display rule for a shared class name — same
   convention already used across the site. */
.jsc-ps-mobile-br {
	display: none;
}
/* PC-only manual line break: visible by default (desktop), hidden inside the
   760px mobile query below so SP keeps reflowing naturally at each
   element's own responsive width/font-size. */
.jsc-ps-pc-br {
	display: inline;
}

/* ================= 01 HERO ================= */
.jsc-ps-hero {
	background: var(--jsc-cream);
	padding: 76px 0 56px;
}
.jsc-ps-hero-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.jsc-ps-hero .jsc-eyebrow { justify-content: center; }
.jsc-ps-hero-heading {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.5;
	color: var(--jsc-navy);
	margin: 0 0 22px;
}
.jsc-ps-hero-sub {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--jsc-navy-soft);
	margin: 0 0 28px;
}
.jsc-ps-hero-lead p {
	font-size: 16px;
	line-height: 1.95;
	color: var(--jsc-text-body);
	margin: 0 0 14px;
}
.jsc-ps-hero-lead p:last-child { margin-bottom: 0; }
.jsc-ps-hero-keywords {
	display: inline-block;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--jsc-gray-line);
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--jsc-navy);
}

/* ================= 02 ISSUES ================= */
.jsc-ps-issues-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.jsc-ps-issue-card {
	background: var(--jsc-white);
	border-top: 2px solid var(--jsc-gray-line);
	box-shadow: var(--jsc-shadow);
	border-radius: var(--jsc-radius);
	padding: 24px 22px;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.jsc-ps-issue-card:hover {
	box-shadow: var(--jsc-shadow-hover);
	transform: translateY(-2px);
	border-top-color: var(--jsc-gold);
}
.jsc-ps-issue-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--jsc-gray-line);
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	color: var(--jsc-navy);
	margin: 0 0 12px;
}
.jsc-ps-issue-card h3 {
	font-family: var(--jsc-font-body);
	font-size: 18px;
	line-height: 1.55;
	margin: 0 0 9px;
	color: var(--jsc-navy);
}
.jsc-ps-issue-card p:not(.jsc-ps-issue-num) {
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--jsc-text-muted);
	margin: 0;
}
.jsc-ps-issues-final {
	max-width: 700px;
	margin: 48px auto 0;
	text-align: center;
	padding-top: 36px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-ps-issues-final p {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.9;
	color: var(--jsc-navy);
	margin: 0;
}

/* ================= 03 WHY ================= */
.jsc-ps-why-columns { display: none; }
.jsc-ps-why-arrow-pc { display: none; }
.jsc-ps-why-flow {
	max-width: 620px;
	margin: 0 auto;
}
.jsc-ps-why-pair {
	padding: 28px 0;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-ps-why-pair:first-child { border-top: none; padding-top: 0; }
.jsc-ps-why-symptom {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 21px;
	color: var(--jsc-navy);
	margin: 0 0 6px;
}
.jsc-ps-why-arrow {
	display: block;
	color: var(--jsc-gold);
	font-size: 15px;
	line-height: 1;
	margin: 0 0 8px 2px;
}
.jsc-ps-why-cause {
	margin: 0 0 0 20px;
	padding: 4px 0 4px 16px;
	border-left: 2px solid var(--jsc-gray-line);
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--jsc-text-muted);
}
.jsc-ps-why-final {
	max-width: 620px;
	margin: 48px auto 0;
	text-align: center;
	padding-top: 36px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-ps-why-final p {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.8;
	color: var(--jsc-navy);
	margin: 0;
}
@media (min-width: 761px) {
	.jsc-ps-why-columns {
		display: grid;
		grid-template-columns: 1fr 56px 1fr;
		max-width: 780px;
		margin: 0 auto 14px;
	}
	.jsc-ps-why-columns span {
		font-family: var(--jsc-font-label);
		font-size: 14px;
		font-weight: 700;
		letter-spacing: .06em;
		color: var(--jsc-text-muted);
		text-align: center;
		white-space: nowrap;
	}
	.jsc-ps-why-columns .is-symptom { grid-column: 1; }
	.jsc-ps-why-columns .is-cause { grid-column: 3; }
	.jsc-ps-why-flow { max-width: 780px; }
	.jsc-ps-why-pair {
		display: grid;
		grid-template-columns: 1fr 56px 1fr;
		align-items: center;
		gap: 0;
		padding: 11px 0;
	}
	.jsc-ps-why-pair:first-child { padding-top: 11px; }
	.jsc-ps-why-symptom {
		margin: 0;
		padding: 12px 16px;
		min-height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		background: var(--jsc-white);
		border: 1px solid var(--jsc-gray-line);
		border-radius: var(--jsc-radius);
		font-size: 23px;
		box-sizing: border-box;
	}
	.jsc-ps-why-arrow { display: none; }
	.jsc-ps-why-arrow-pc {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--jsc-gold);
		font-size: 22px;
	}
	.jsc-ps-why-cause {
		margin: 0;
		padding: 12px 16px;
		min-height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-left: none;
		background: var(--jsc-gray-bg);
		border-radius: var(--jsc-radius);
		font-size: 16.5px;
		box-sizing: border-box;
	}
}

/* ================= 04 OUR PHILOSOPHY ================= */
.jsc-ps-philosophy-track {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	max-width: 1040px;
	margin: 0 auto;
}
.jsc-ps-philosophy-step {
	flex: 1 1 0;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-top: 3px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	box-shadow: var(--jsc-shadow);
	padding: 26px 22px;
	text-align: center;
}
.jsc-ps-philosophy-step.is-use { border-top-color: var(--jsc-navy-soft); }
.jsc-ps-philosophy-step.is-solve {
	border-top: 3px solid #E6AF00;
	background: var(--jsc-navy);
	box-shadow: var(--jsc-shadow-hover);
	padding-top: 30px;
	padding-bottom: 30px;
}
.jsc-ps-philosophy-label {
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--jsc-gold);
	margin: 0 0 10px;
}
.jsc-ps-philosophy-step.is-solve .jsc-ps-philosophy-label { color: #E6AF00; }
.jsc-ps-philosophy-step h3 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 23px;
	color: var(--jsc-navy);
	margin: 0 0 11px;
}
.jsc-ps-philosophy-step.is-solve h3 { color: var(--jsc-white); }
.jsc-ps-philosophy-step p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--jsc-text-muted);
	margin: 0;
}
.jsc-ps-philosophy-step.is-solve p { color: rgba(255,255,255,.8); }
.jsc-ps-philosophy-connector {
	flex: 0 0 auto;
	width: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jsc-gold);
}
.jsc-ps-philosophy-connector-arrow-v { display: none; }
.jsc-ps-philosophy-connector-arrow-h {
	display: block;
	font-size: 26px;
	line-height: 1;
}
.jsc-ps-philosophy-final {
	max-width: 620px;
	margin: 44px auto 0;
	text-align: center;
	padding-top: 32px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-ps-philosophy-final p {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.8;
	color: var(--jsc-navy);
	margin: 0;
}

/* ================= 05 LEARNING PROCESS ================= */
.jsc-ps-lp-track {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	max-width: 1040px;
	margin: 0 auto;
}
.jsc-ps-lp-step {
	flex: 1 1 0;
	max-width: 320px;
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	box-shadow: var(--jsc-shadow);
	padding: 22px 20px;
}
/* Number + English label on one line (PC and SP alike — this wrapper is
   not media-query-scoped since the request applies to both breakpoints
   identically). Individual margins moved from the two children onto this
   wrapper so there's a single, combined gap before the h3 title instead of
   two stacked ones. */
.jsc-ps-lp-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 10px;
}
.jsc-ps-lp-num {
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	color: var(--jsc-text-muted);
	margin: 0;
}
.jsc-ps-lp-label {
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--jsc-gold);
	margin: 0;
}
.jsc-ps-lp-step h3 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 22px;
	color: var(--jsc-navy);
	margin: 0 0 9px;
}
.jsc-ps-lp-step p {
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--jsc-text-muted);
	margin: 0;
}
.jsc-ps-lp-arrow {
	flex: 0 0 auto;
	width: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jsc-gold);
}
.jsc-ps-lp-arrow-v { display: none; }
.jsc-ps-lp-arrow-h {
	display: block;
	font-size: 24px;
	line-height: 1;
}
.jsc-ps-lp-rail {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: 420px;
	margin: 44px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--jsc-gray-line);
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--jsc-navy);
}
.jsc-ps-lp-rail-arrow { color: var(--jsc-gold); font-size: 14px; }
.jsc-ps-lp-final {
	max-width: 560px;
	margin: 40px auto 0;
	text-align: center;
}
.jsc-ps-lp-final p {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.8;
	color: var(--jsc-navy);
	margin: 0;
}

/* ================= 06 9 STEPS ================= */
/* Vertical process timeline (2nd revision — the earlier 3x3 zigzag grid is
   removed entirely per feedback: the order was the whole point of this
   section, and a single top-to-bottom line reads unambiguously at a glance
   without needing arrow glyphs to trace a path). Same markup and CSS serve
   PC and SP alike (see the brief's own 推奨イメージ) — the only difference
   at the mobile breakpoint below is a size/gap trim for narrow phones, the
   connecting-line geometry itself is untouched at every width. */
.jsc-ps-steps-timeline {
	max-width: 660px;
	margin: 0 auto;
}
/* PC only: shrink the wrapper to the width its content actually needs
   (longest STEP title + circle + gap) instead of a fixed 660px column.
   The fixed-width version left a lot of dead space to the right of the
   short titles, which visually dragged the whole timeline's center of
   gravity toward the left edge of that wide column even though the
   column itself was centered on the page. Mobile is untouched (the
   660px cap is already wider than any phone viewport there, so this
   rule would have no effect on SP layout either way). */
@media (min-width: 761px) {
	.jsc-ps-steps-timeline {
		width: fit-content;
		margin: 0 auto;
	}
	/* SECTION06 only, PC only: the description paragraph's bottom margin
	   (shared .jsc-section-head class, 48px everywhere else) is trimmed
	   ~13% here so the gap from the intro copy down to STEP 01 doesn't
	   read as oversized next to the now-compact timeline below it. Scoped
	   to this min-width query (rather than left unscoped) specifically so
	   the higher-specificity #id selector can never outrank the general
	   mobile query's own .jsc-section-head{margin-bottom:28px} rule at
	   phone widths — every other section's .jsc-section-head, and this
	   section's own SP spacing, stay exactly as they were. */
	#ps-steps .jsc-section-head { margin-bottom: 42px; }
}
.jsc-ps-timeline-step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 14px 0;
}
/* Connecting rail: a fixed-height segment running from this step's circle
   centre down to the next step's circle centre. Reliable without absolute
   pixel-matching a variable content height because every step shares the
   exact same circle size + padding (44px circle, 14px top/bottom padding =
   72px per step) — titles here are short, one-line labels (see HTML), so
   no step grows taller than its circle. */
.jsc-ps-timeline-step:not(.is-last)::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 36px;
	width: 2px;
	height: 72px;
	background: var(--jsc-gray-line);
}
.jsc-ps-timeline-num {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--jsc-white);
	border: 2px solid var(--jsc-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--jsc-font-label);
	font-weight: 800;
	font-size: 16px;
	color: var(--jsc-gold);
}
.jsc-ps-timeline-title {
	position: relative;
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 20px;
	color: var(--jsc-navy);
	margin: 0;
	padding-bottom: 8px;
}
/* Short navy accent under each STEP name — separate from the left-hand
   connecting rail (which stays exactly as-is per the brief). Gives the
   text side of each row a small anchor of its own color/weight so the
   row doesn't read as entirely left-loaded (gold circle + grey rail)
   with nothing but plain text on the right. */
.jsc-ps-timeline-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: var(--jsc-navy);
}
.jsc-ps-steps-lead {
	max-width: 660px;
	margin: 36px auto 0;
	text-align: center;
	font-size: 15.5px;
	line-height: 1.9;
	color: var(--jsc-text-muted);
}
.jsc-ps-qc-box {
	max-width: 600px;
	margin: 32px auto 0;
	padding: 22px 26px;
	background: var(--jsc-gray-bg);
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	text-align: center;
}
.jsc-ps-qc-box h3 {
	font-family: var(--jsc-font-body);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--jsc-navy);
	margin: 0 0 10px;
}
.jsc-ps-qc-box p {
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--jsc-text-muted);
	margin: 0 0 10px;
}
.jsc-ps-qc-emphasis {
	font-weight: 700;
	color: var(--jsc-text-muted) !important;
	margin-bottom: 0 !important;
}

/* ================= 07 PRACTICAL PROGRAM ================= */
.jsc-ps-program-track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.jsc-ps-program-item {
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-top: 2px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	box-shadow: var(--jsc-shadow);
	padding: 20px 18px;
}
.jsc-ps-program-item.is-final {
	border-top: 2px solid #E6AF00;
	box-shadow: var(--jsc-shadow-hover);
}
/* Wrapper around number + title. Plain block on PC (num and h3 stack
   exactly as before — this wrapper changes nothing there); switched to a
   horizontal flex row inside the mobile query below so "01" and the title
   share one line on SP instead of stacking. */
.jsc-ps-program-head {}
.jsc-ps-program-num {
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	color: var(--jsc-navy);
	margin: 0 0 10px;
}
.jsc-ps-program-item.is-final .jsc-ps-program-num { color: #E6AF00; }
.jsc-ps-program-item h3 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 20px;
	color: var(--jsc-navy);
	margin: 0 0 9px;
}
.jsc-ps-program-item p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--jsc-text-muted);
	margin: 0;
}
.jsc-ps-program-final {
	max-width: 560px;
	margin: 44px auto 0;
	text-align: center;
	padding-top: 32px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-ps-program-final p {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--jsc-navy);
	margin: 0;
}

/* ================= 08 FROM PEOPLE TO ORGANIZATION ================= */
/* Page's visual peak (per brief: 静 -> 強 -> 静 -> 最大の山 -> CTA). The
   only navy-deep, full-bleed section on the page — every other section
   stays white or cream so this one reads as the climax. */
.jsc-ps-organization {
	background: var(--jsc-navy-deep);
	padding: 96px 0;
}
.jsc-ps-organization .jsc-eyebrow { color: #E6AF00; }
.jsc-ps-organization .jsc-eyebrow::before { background: #E6AF00; }
.jsc-ps-organization .jsc-section-head h2 { color: var(--jsc-white); }
.jsc-ps-transform {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	max-width: 980px;
	margin: 0 auto;
}
.jsc-ps-transform-col {
	border-radius: var(--jsc-radius);
	padding: 24px 28px 22px;
}
.jsc-ps-transform-col.is-before {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.14);
}
.jsc-ps-transform-col.is-after {
	background: rgba(255,255,255,.06);
	border: 1px solid #E6AF00;
}
.jsc-ps-transform-label {
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	margin: 0 0 14px;
	text-align: center;
}
.is-before .jsc-ps-transform-label { color: rgba(255,255,255,.5); }
.is-after .jsc-ps-transform-label { color: #E6AF00; }
.jsc-ps-transform-steps {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.jsc-ps-transform-step {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 10px 14px;
	border-radius: var(--jsc-radius);
	font-size: 16.5px;
	line-height: 1.5;
	margin: 0;
}
.is-before .jsc-ps-transform-step {
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.12);
	color: rgba(255,255,255,.6);
}
.is-after .jsc-ps-transform-step {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.18);
	color: var(--jsc-white);
	font-weight: 500;
}
.jsc-ps-transform-arrow {
	display: block;
	font-size: 14px;
	line-height: 1;
	padding: 6px 0;
}
.is-before .jsc-ps-transform-arrow { color: rgba(255,255,255,.35); }
.is-after .jsc-ps-transform-arrow { color: #E6AF00; }
.jsc-ps-transform-conclusion {
	margin: 16px 0 0;
	padding-top: 15px;
	border-top: 1px solid rgba(255,255,255,.14);
	text-align: center;
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 16px;
}
.is-before .jsc-ps-transform-conclusion { color: rgba(255,255,255,.55); }
.is-after .jsc-ps-transform-conclusion { color: #E6AF00; }
.jsc-ps-organization-message {
	max-width: 720px;
	margin: 56px auto 0;
	text-align: center;
}
.jsc-ps-organization-message p {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 23px;
	line-height: 1.9;
	color: var(--jsc-white);
	margin: 0;
}
/* Final line only: the conclusion of this SECTION's message, called out in
   the brand's brighter CTA-style gold (same literal #E6AF00 used for the
   AFTER column accents above) so it reads as the takeaway. Every line
   before it stays the existing white. */
.jsc-ps-organization-highlight {
	color: #E6AF00;
}

/* ================= 09 WHY JS CONSULTING ================= */
.jsc-ps-whyus-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.jsc-ps-whyus-item {
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	padding: 20px 18px;
}
.jsc-ps-whyus-num {
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	color: var(--jsc-gold);
	margin: 0 0 10px;
}
.jsc-ps-whyus-item h3 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 19px;
	color: var(--jsc-navy);
	margin: 0 0 9px;
}
.jsc-ps-whyus-item p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--jsc-text-muted);
	margin: 0;
}

/* ================= 10 CONTACT ================= */
.jsc-ps-contact {
	background: var(--jsc-navy);
	color: var(--jsc-white);
	text-align: center;
	padding: 76px 0 84px;
}
.jsc-ps-contact .jsc-eyebrow { justify-content: center; color: var(--jsc-gold-light); }
.jsc-ps-contact .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-ps-contact h2 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	color: var(--jsc-white);
	font-size: 30px;
	line-height: 1.6;
	margin: 0 0 22px;
}
.jsc-ps-contact > p:not(.jsc-eyebrow) {
	font-size: 16px;
	line-height: 1.9;
	color: rgba(255,255,255,.82);
	max-width: 720px;
	margin: 0 auto 10px;
}
.jsc-ps-contact-note {
	margin-top: 26px !important;
	font-size: 15.5px !important;
	color: rgba(255,255,255,.55) !important;
}

/* ================================================================
   Responsive: mobile (<=760px)
   ================================================================ */
@media (max-width: 760px) {
	.jsc-ps-mobile-br { display: inline; }
	.jsc-ps-pc-br { display: none; }
	.jsc-section-inner { padding: 0 16px; }
	.jsc-section-head { margin-bottom: 28px; }
	.jsc-section-head h2 { font-size: 23px; }
	.jsc-section-lead { font-size: 14.5px; }

	/* ---------- 01 HERO ---------- */
	.jsc-ps-hero { padding: 52px 0 44px; }
	.jsc-ps-hero-heading { font-size: 25px; line-height: 1.55; margin-bottom: 18px; }
	.jsc-ps-hero-sub { font-size: 15.5px; margin-bottom: 22px; }
	.jsc-ps-hero-lead p { font-size: 14.5px; line-height: 1.85; }
	.jsc-ps-hero-keywords { margin-top: 22px; padding-top: 18px; font-size: 11.5px; }

	/* ---------- 02 ISSUES ---------- */
	.jsc-ps-issues-grid { grid-template-columns: 1fr; gap: 14px; }
	.jsc-ps-issue-card { padding: 22px 20px; }
	.jsc-ps-issues-final { margin-top: 32px; padding-top: 28px; }
	.jsc-ps-issues-final p { font-size: 16px; }

	/* ---------- 03 WHY ---------- */
	.jsc-ps-why-symptom { font-size: 18px; }
	.jsc-ps-why-cause { margin-left: 12px; }
	/* SP only: the "↓" between symptom and cause is removed so each pair
	   reads as one close-set unit (symptom directly above its own cause)
	   instead of two boxes separated by a floating arrow. PC keeps its own
	   "→" (.jsc-ps-why-arrow-pc, a separate element/query) untouched. The
	   symptom/cause spacing itself (margin/padding on the base rules) was
	   already tight, so removing this element's own height is what shortens
	   each set — the border-top divider between sets is left alone so the
	   "between sets" gap stays as it was. */
	.jsc-ps-why-arrow { display: none; }
	.jsc-ps-why-final { margin-top: 32px; padding-top: 28px; }
	.jsc-ps-why-final p { font-size: 17px; }

	/* ---------- 04 OUR PHILOSOPHY: horizontal -> vertical ---------- */
	.jsc-ps-philosophy-track { flex-direction: column; align-items: stretch; gap: 0; }
	.jsc-ps-philosophy-step { max-width: 100%; padding: 22px 20px; }
	.jsc-ps-philosophy-step.is-solve { padding: 24px 20px; }
	.jsc-ps-philosophy-connector { width: auto; padding: 10px 0; align-self: center; }
	.jsc-ps-philosophy-connector-arrow-h { display: none; }
	.jsc-ps-philosophy-connector-arrow-v { display: block; font-size: 20px; }
	.jsc-ps-philosophy-final { margin-top: 32px; padding-top: 26px; }
	.jsc-ps-philosophy-final p { font-size: 16.5px; }

	/* ---------- 05 LEARNING PROCESS: horizontal track -> vertical timeline ---------- */
	.jsc-ps-lp-track { flex-direction: column; align-items: stretch; gap: 0; }
	.jsc-ps-lp-step { max-width: 100%; padding: 22px 20px; }
	.jsc-ps-lp-arrow { width: auto; padding: 10px 0; align-self: center; }
	.jsc-ps-lp-arrow-h { display: none; }
	.jsc-ps-lp-arrow-v { display: block; font-size: 20px; }
	.jsc-ps-lp-rail { margin-top: 32px; padding-top: 20px; gap: 10px; font-size: 12px; }
	.jsc-ps-lp-final { margin-top: 30px; }
	.jsc-ps-lp-final p { font-size: 16.5px; }

	/* ---------- 06 9 STEPS: same vertical timeline at every width ----------
	   Only the gap and font sizes shrink here for narrow phones; the circle
	   stays 44px and the step padding stays 14px top/bottom (unchanged from
	   the base rules above) so the connecting rail's top:36px/height:72px
	   geometry stays correct without needing its own mobile override. */
	.jsc-ps-timeline-step { gap: 16px; }
	.jsc-ps-timeline-title { font-size: 17px; }
	.jsc-ps-steps-lead { margin-top: 28px; }
	.jsc-ps-qc-box { margin-top: 24px; padding: 18px 20px; }

	/* ---------- 07 PRACTICAL PROGRAM: 4 across -> stacked ---------- */
	.jsc-ps-program-track { grid-template-columns: 1fr; gap: 14px; }
	/* SP only: number and title share one line instead of stacking (PC's
	   stacked look — num above h3 — is untouched, since this rule lives only
	   in this mobile query). Both children's own margins are zeroed so the
	   wrapper's single margin-bottom is the only gap before the body text. */
	.jsc-ps-program-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 9px; }
	.jsc-ps-program-head .jsc-ps-program-num { margin: 0; }
	.jsc-ps-program-head h3 { margin: 0; }
	.jsc-ps-program-final { margin-top: 32px; padding-top: 26px; }

	/* ---------- 08 FROM PEOPLE TO ORGANIZATION: side-by-side -> stacked ----------
	   2nd revision: a true 320px-wide 2-column BEFORE/AFTER layout was
	   evaluated and rejected (see the implementation report for the exact
	   reasoning) — the longest process labels (10 characters, e.g.
	   "ベテラン・上司に頼る" / "チームで原因を考える" / "標準化・再発防止する")
	   would need a ~12px font to stay on one line in a ~130px-wide column at
	   320px, well past "極端に小さい". The vertical BEFORE-then-AFTER stack
	   is kept, with every padding/gap around it compacted substantially
	   instead — font-size stays untouched throughout this block. */
	.jsc-ps-organization { padding: 40px 0; }
	.jsc-ps-transform { grid-template-columns: 1fr; gap: 20px; }
	.jsc-ps-transform-col { padding: 16px 16px 14px; }
	.jsc-ps-transform-label { margin: 0 0 10px; }
	.jsc-ps-transform-step { padding: 7px 12px; font-size: 14.5px; line-height: 1.5; }
	.jsc-ps-transform-arrow { padding: 3px 0; }
	.jsc-ps-transform-conclusion { margin: 12px 0 0; padding-top: 10px; }
	.jsc-ps-organization-message { margin-top: 28px; }
	/* Longest of the 4 new semantic lines (see B-2) is 19 characters; sized
	   down from the previous 19px so it stays a single line through 375px+
	   without shrinking to an "極端に小さい" size — see the report for the
	   one narrower (320px) edge case this doesn't fully cover. */
	.jsc-ps-organization-message p { font-size: 17.5px; }

	/* ---------- 09 WHY JS CONSULTING: 4 across -> stacked ---------- */
	.jsc-ps-whyus-grid { grid-template-columns: 1fr; gap: 14px; }

	/* ---------- 10 CONTACT ---------- */
	.jsc-ps-contact { padding: 52px 20px; }
	.jsc-ps-contact h2 { font-size: 23px; }
	/* This round's supplementary-copy enlargement (base rule above) was a
	   PC-only request — reverted back to its pre-existing SP value here. */
	.jsc-ps-contact-note { font-size: 13.5px !important; }
}