blocks (WordPress paragraph blocks) given a small,
equal gap (not zero) so they read as one close-set 3-line passage —
noticeably tighter than a normal paragraph gap, but not fully merged
into single-paragraph spacing. Last line carries no bottom margin of its
own; the gap before the next SECTION comes from this section's own
bottom padding instead. */
.jsc-5s-why-supplement p {
font-size: 15.5px;
line-height: 1.75;
color: var(--jsc-text-muted);
margin: 0 0 3px;
}
.jsc-5s-why-supplement p:last-child {
margin-bottom: 0;
}
/* PC-only: side-by-side "現象 -> 背景原因" layout (1st revision). The base
rules above are left completely untouched — they still govern mobile,
which keeps its original vertical structure exactly as before. This is a
pure additive override, active only at 761px+, that turns each pair into
a 2-column row (symptom box / arrow / cause box) and shows column
headers above the whole flow. .jsc-5s-why-arrow (the "↓" glyph) is
hidden here in favour of a new .jsc-5s-why-arrow-pc ("→"); the original
element is left in the markup for mobile so no HTML has to differ
between breakpoints beyond CSS visibility. */
.jsc-5s-why-columns { display: none; }
.jsc-5s-why-arrow-pc { display: none; }
@media (min-width: 761px) {
.jsc-5s-why-lead { margin-bottom: 40px; }
/* Mirrors .jsc-5s-why-pair's own grid-template-columns (1fr 56px 1fr)
exactly, with the middle (arrow) cell left empty, so each label
centers precisely over its own box column below rather than being
left-aligned within a flex share (the old padding-left offset on
.is-cause was an approximation of this same intent). Bugfix: the
markup only has 2 children for these 3 tracks, so grid
auto-placement was dropping the second span (.is-cause) into track 2
(the 56px arrow column) instead of track 3 — squeezing "背景にある
問題" into a 56px-wide cell and forcing it onto two lines. Explicit
grid-column placement below fixes this without touching the HTML. */
.jsc-5s-why-columns {
display: grid;
grid-template-columns: 1fr 56px 1fr;
max-width: 800px;
margin: 0 auto 14px;
}
.jsc-5s-why-columns span {
font-family: var(--jsc-font-label);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
color: var(--jsc-text-muted);
text-align: center;
white-space: nowrap;
}
.jsc-5s-why-columns .is-symptom { grid-column: 1; }
.jsc-5s-why-columns .is-cause { grid-column: 3; }
.jsc-5s-why-flow { max-width: 800px; }
.jsc-5s-why-pair {
display: grid;
grid-template-columns: 1fr 56px 1fr;
align-items: center;
gap: 0;
padding: 11px 0;
}
.jsc-5s-why-pair:first-child { padding-top: 11px; }
/* 3rd revision: BOX height compressed (padding roughly halved) and text
truly centered both axes via flex, not just horizontally via
text-align — a single-line was previously top/left-reading inside
an oversized box. font-size bumped slightly on both sides, symptom
(現象) kept a step above cause (背景原因) to preserve the existing
left>right emphasis. */
.jsc-5s-why-symptom {
margin: 0;
padding: 13px 18px;
min-height: 56px;
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: 22px;
box-sizing: border-box;
}
.jsc-5s-why-arrow { display: none; }
.jsc-5s-why-arrow-pc {
display: flex;
align-items: center;
justify-content: center;
color: var(--jsc-gold);
font-size: 22px;
}
.jsc-5s-why-cause {
margin: 0;
padding: 13px 18px;
min-height: 56px;
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: 16px;
box-sizing: border-box;
}
/* Scoped to THIS section's own instance of the shared .jsc-5s-why-final
class (#5s-why only — SECTION05/#5s-diagnosis reuses the same class
for its own, longer 2-line message and is untouched). The sentence
("5Sの問題をたどっていくと、組織の問題が見えてきます。") already fits
on one line at this container's 640px max-width and this font-size at
761px+, so nowrap here only guarantees that rather than changing it. */
#5s-why .jsc-5s-why-final p {
white-space: nowrap;
}
/* Bugfix: Lightning's own _g3 block-style CSS ships
`.wp-block-image:where(:not(.alignfull,.alignwide)) { max-width:100%; }`
(the :where() wrapper adds zero specificity, so this selector is tied
at (0,1,0) with our own `.jsc-5s-maturity-image` — the exact same
specificity as our max-width rule below). Lightning's stylesheet loads
after ours in this theme's enqueue order, so on a specificity tie it
was winning the cascade and silently replacing our 620px cap with its
own 100%, which is why changing the 900px value earlier had no visible
effect on the PC screen. !important forces our value to win instead of
depending on load order — scoped inside this existing 761px+ block so
it can never affect the separate mobile override below. */
.jsc-5s-maturity-image { max-width: 620px !important; }
}
/* ================= 04 VALUE ================= */
.jsc-5s-value {
background: var(--jsc-navy-deep);
color: var(--jsc-white);
padding: 112px 0;
}
.jsc-5s-value .jsc-eyebrow { color: var(--jsc-gold-light); }
.jsc-5s-value .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-5s-value .jsc-section-head h2 { color: var(--jsc-white); }
/* Widened for this section only (scoped by #5s-value, not the shared
.jsc-section-head class): SECTION04's intro sentence is longer than most
other sections' and was wrapping too narrowly at the site-wide 640px
cap. Every other section's .jsc-section-head is untouched. */
#5s-value .jsc-section-head { max-width: 780px; }
.jsc-5s-value .jsc-section-lead { color: rgba(255,255,255,.75); }
/* Row track (5th revision — staggered ascent removed): the earlier
"STEP1 lower, STEP2 mid, STEP3 higher" offset (via margin-bottom) left
cards at different actual heights (content-driven) AND misaligned the
two connectors, which were hand-tuned to the old stagger. This revision
makes 現場→組織→経営 read on one straight line instead: align-items:
stretch gives all 3 steps the exact same height regardless of content,
each step is itself a flex column with its tag list pushed to a shared
bottom edge via margin-top:auto (same device already used in SECTION06
OUR SUPPORT), and each connector uses align-self:center so both arrows
and both labels land on the identical baseline — the row's own
vertical center — with no more per-connector offset tuning needed. */
.jsc-5s-value-track {
display: flex;
align-items: stretch;
justify-content: center;
gap: 0;
max-width: 1100px;
margin: 0 auto;
}
.jsc-5s-value-step {
flex: 1 1 0;
max-width: 310px;
display: flex;
flex-direction: column;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.16);
border-top: 2px solid var(--jsc-gold-light);
border-radius: var(--jsc-radius);
padding: 16px 22px;
}
.jsc-5s-value-step-label {
font-family: var(--jsc-font-label);
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
color: rgba(255,255,255,.6);
margin: 0 0 8px;
}
.jsc-5s-value-connector {
flex: 0 0 auto;
width: 84px;
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
color: var(--jsc-gold-light);
}
.jsc-5s-value-connector-arrow-v { display: none; }
.jsc-5s-value-connector-arrow-h {
display: block;
font-size: 28px;
line-height: 1;
}
.jsc-5s-value-connector-label {
margin-top: 6px;
font-family: var(--jsc-font-label);
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
color: rgba(255,255,255,.7);
text-align: center;
white-space: nowrap;
}
.jsc-5s-value-entry-badge {
display: inline-block;
margin-left: 10px;
font-family: var(--jsc-font-label);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
color: var(--jsc-navy-deep);
background: var(--jsc-gold-light);
padding: 3px 10px;
border-radius: 20px;
vertical-align: middle;
}
.jsc-5s-value-step h3 {
font-family: var(--jsc-font-heading);
font-weight: 800;
font-size: 25px;
color: var(--jsc-white);
margin: 0 0 10px;
}
/* margin-top:auto pushes the tag list down to the shared bottom edge of
each now-equal-height step (align-items:stretch on the track above), so
the tags start at the same Y position across all 3 columns regardless
of how much space the STEP label / heading above them takes up.
PC bugfix: flex-wrap was letting STEP1 (5 tags) and STEP2 (4 tags,
including the 4-character "人材育成") wrap onto a 2nd row inside each
box's fixed 310px width. Switched to nowrap with tighter gap/padding/
font-size (not an extreme shrink — 13.5px->12.5px) so even STEP1's 5
tags fit the ~266px content width in one row without overflowing the
card; this also shrinks each step's natural content height, which is
most of why the former 2-line-tag steps carried extra bottom space. */
.jsc-5s-value-items {
display: flex;
flex-wrap: nowrap;
gap: 6px 7px;
margin: auto 0 0;
padding: 0;
list-style: none;
}
.jsc-5s-value-items li {
font-size: 12.5px;
color: rgba(255,255,255,.85);
padding: 4px 9px;
white-space: nowrap;
border: 1px solid rgba(255,255,255,.2);
border-radius: 20px;
}
.jsc-5s-value-emphasis {
max-width: 660px;
margin: 60px auto 0;
text-align: center;
padding-top: 44px;
border-top: 1px solid rgba(255,255,255,.16);
}
.jsc-5s-value-emphasis p {
font-family: var(--jsc-font-heading);
font-weight: 800;
font-size: 24px;
line-height: 1.65;
color: var(--jsc-gold-light);
margin: 0;
}
.jsc-5s-value-final {
max-width: 660px;
margin: 28px auto 0;
text-align: center;
}
.jsc-5s-value-final p {
font-size: 15.5px;
line-height: 2;
color: rgba(255,255,255,.85);
margin: 0 0 10px;
}
.jsc-5s-value-final p:last-child { margin-bottom: 0; }
/* ================= 05 5S DIAGNOSIS ================= */
.jsc-5s-diagnosis-lead {
max-width: 800px;
margin: -20px auto 56px;
text-align: center;
font-size: 16px;
line-height: 1.95;
color: var(--jsc-text-muted);
}
/* PC layout (4th revision — staircase abolished): the "rising" metaphor
(via height in rev.2, via position/margin-bottom in rev.3) is removed
entirely per this round's instruction. All 5 cards now form one plain,
directly-comparable row: align-items:stretch keeps every card exactly
the same height regardless of its own content length, and
justify-content:flex-start (not center) inside each card means the
badge/name/description all start at the same top offset in every
column — a 2-line LEVEL name in one card doesn't shift where that
card's own description starts relative to its neighbors, since the
description's own min-height (below) absorbs that variance instead.
LEVEL5 keeps its gold-filled badge (via the data-level selector inside
.jsc-5s-level-num below) and its gold top border/shadow as the only
remaining visual distinction — no positional or height difference. */
.jsc-5s-level-track {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: stretch;
gap: 20px;
max-width: 1180px;
margin: 0 auto;
padding-bottom: 4px;
border-bottom: 1px solid var(--jsc-gray-line);
}
.jsc-5s-level-item {
background: var(--jsc-white);
border: 1px solid var(--jsc-gray-line);
border-top: 2px solid var(--jsc-gold);
border-radius: var(--jsc-radius);
padding: 22px 18px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
min-height: 220px;
}
.jsc-5s-level-item[data-level="5"] {
border-top-color: var(--jsc-gold-light);
border-top-width: 3px;
box-shadow: var(--jsc-shadow);
}
/* 4th revision fix: "LEVEL 1" etc. was a single line of plain text inside
a 40px circle at 14px — two lines' worth of glyph height in a container
only tall enough for about one, so "LEVEL" overflowed above the circle's
edge. Split into two explicit lines (LEVEL label / number) each sized to
actually fit, inside a very slightly larger circle (40px -> 44px) rather
than shrinking the circle-size solution alone; tight line-height keeps
the two lines close so together they still read as one compact badge. */
.jsc-5s-level-num {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--jsc-gold);
color: var(--jsc-gold);
font-family: var(--jsc-font-label);
font-weight: 700;
line-height: 1;
margin: 0 auto 16px;
}
.jsc-5s-level-num-label {
font-size: 7.5px;
letter-spacing: .03em;
margin-bottom: 2px;
}
.jsc-5s-level-num-value {
font-size: 16px;
}
.jsc-5s-level-item[data-level="5"] .jsc-5s-level-num {
background: var(--jsc-gold);
color: var(--jsc-white);
border-color: var(--jsc-gold);
}
/* 6th revision: name line breaks are now explicit and fixed (LEVEL1 stays
1 line, LEVEL2-5 are always 2 lines via .jsc-5s-pc-br in the HTML — no
longer left to natural wrap). min-height covers exactly 2 lines at this
font-size/line-height (17 * 1.5 * 2 = 51px) with a small safety margin,
so the name area occupies the SAME height on all 5 cards regardless of
whether the actual text is 1 or 2 lines — the description below always
starts at the same Y as a direct result. */
.jsc-5s-level-name {
font-family: var(--jsc-font-heading);
font-weight: 700;
font-size: 17px;
line-height: 1.5;
min-height: 54px;
display: flex;
align-items: center;
justify-content: center;
color: var(--jsc-navy);
margin: 0 0 10px;
}
.jsc-5s-level-desc {
font-size: 14px;
line-height: 1.8;
color: var(--jsc-text-muted);
margin: 0;
}
/* Supplementary flow: intentionally quiet (small text, thin arrows, no
card chrome) so it reads as a footnote under the staircase, not a
competing second diagram. Distanced a bit further from the (now larger)
staircase above so the two are clearly not the same visual tier. */
.jsc-5s-level-flow {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 12px;
max-width: 740px;
margin: 40px auto 0;
}
.jsc-5s-level-flow-step {
font-size: 14px;
font-weight: 500;
color: var(--jsc-text-muted);
}
.jsc-5s-level-flow-arrow {
font-size: 14px;
color: var(--jsc-gold);
}
.jsc-5s-level-note {
max-width: 560px;
margin: 40px auto 0;
text-align: center;
padding-top: 32px;
border-top: 1px solid var(--jsc-gray-line);
}
.jsc-5s-level-note p {
font-family: var(--jsc-font-heading);
font-weight: 700;
font-size: 18px;
line-height: 1.85;
color: var(--jsc-navy);
margin: 0;
}
.jsc-5s-diagnosis-final {
max-width: 600px;
margin: 28px auto 0;
text-align: center;
}
.jsc-5s-diagnosis-final p {
font-size: 15.5px;
line-height: 1.9;
color: var(--jsc-text-muted);
margin: 0;
}
/* Supplementary "whole model at a glance" diagram, placed after the
maturity flow/notes and before the closing diagnosis-purpose message.
No card chrome (no border/background) so it reads as a plain figure, not
another content box; width/height auto keeps the image's own aspect
ratio intact (no cropping) at every viewport. */
.jsc-5s-maturity-image {
max-width: 620px;
margin: 30px auto;
}
.jsc-5s-maturity-image img {
display: block;
width: 100%;
height: auto;
}
/* ================= Mid CTA ================= */
.jsc-5s-midcta {
background: var(--jsc-navy);
color: var(--jsc-white);
padding: 32px 0;
}
/* Always stacked (text row, then button row), both centered — a row+wrap
layout previously sat them side by side on wide PC screens. flex-column
works identically at every width, so no separate mobile override is
needed here. */
.jsc-5s-midcta-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.jsc-5s-midcta-text {
font-family: var(--jsc-font-heading);
font-size: 15.5px;
line-height: 1.7;
color: var(--jsc-white);
margin: 0;
}
.jsc-5s-midcta .wp-block-button.jsc-btn-gold .wp-block-button__link {
padding: 12px 26px;
font-size: 14px;
}
/* ================= 06 OUR SUPPORT ================= */
.jsc-5s-support-lead {
max-width: 780px;
margin: -20px auto 56px;
text-align: center;
font-size: 16px;
line-height: 1.95;
color: var(--jsc-text-muted);
}
/* Widened from 1080px: the body paragraphs' natural wrap at the narrower
column was landing mid-verb ("…つくりま" / "す。"). More column width
(plus the small font-size trim below) reduces wrap pressure; explicit
breaks in the HTML handle the specific verb-ending splits directly. */
.jsc-5s-support-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 1140px;
margin: 0 auto;
position: relative;
}
.jsc-5s-support-track::before {
content: "";
position: absolute;
top: 24px;
left: 12%;
right: 12%;
height: 1px;
background: var(--jsc-gray-line);
}
/* Column alignment: .jsc-5s-support-track is a CSS Grid, whose default
align-items:stretch already makes all 3 items share the SAME rendered
height (the row stretches to the tallest column's natural content). The
remaining piece is getting the *list* to start at the same Y position
despite each column's num/heading/subtitle/body text differing in line
count — turning the item into a flex column and giving the list
margin-top:auto pushes it down to the shared bottom edge in all 3
columns, so it lands at (nearly) the same height everywhere without
padding hacks or shortening any copy. */
.jsc-5s-support-item {
position: relative;
display: flex;
flex-direction: column;
}
.jsc-5s-support-num {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--jsc-white);
border: 1.5px solid var(--jsc-gold);
color: var(--jsc-gold);
font-family: var(--jsc-font-label);
font-weight: 700;
font-size: 15px;
margin: 0 0 20px;
}
.jsc-5s-support-item h3 {
font-family: var(--jsc-font-heading);
font-weight: 700;
font-size: 19px;
color: var(--jsc-navy);
margin: 0 0 4px;
}
.jsc-5s-support-subtitle {
display: block;
font-size: 13px;
color: var(--jsc-gold);
font-weight: 600;
margin-bottom: 14px;
}
.jsc-5s-support-item > p:not(.jsc-5s-support-num):not(.jsc-5s-support-subtitle) {
font-size: 14px;
line-height: 1.85;
color: var(--jsc-text-muted);
margin: 0 0 16px;
}
.jsc-5s-support-list {
margin: auto 0 0;
padding: 14px 0 0;
border-top: 1px solid var(--jsc-gray-line);
list-style: none;
}
.jsc-5s-support-list li {
position: relative;
padding: 5px 0 5px 16px;
font-size: 13.5px;
line-height: 1.8;
color: var(--jsc-text-body);
}
.jsc-5s-support-list li::before {
content: "";
position: absolute;
left: 0;
top: 13px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--jsc-gold);
}
.jsc-5s-support-final {
text-align: center;
max-width: 560px;
margin: 56px auto 0;
padding-top: 36px;
border-top: 1px solid var(--jsc-gray-line);
}
.jsc-5s-support-final p {
font-family: var(--jsc-font-heading);
font-weight: 700;
font-size: 19px;
line-height: 1.8;
color: var(--jsc-navy);
margin: 0;
}
/* ================= 07 SUPPORT PROCESS ================= */
/* 1st revision: a 7th node ("NEXT / 次の改善へ") joins the row after 06,
sharing the same top connector line so 01->...->06->NEXT reads as one
continuous flow (not a closed loop of 6). A separate bracket-shaped
return line underneath (.jsc-5s-process-loop, pure CSS borders — no SVG,
no circular PDCA graphic) arcs from NEXT back toward 01 with a small
upward arrow, so the "this isn't a one-off, it cycles" idea is carried
by the graphic itself, not only by the caption paragraph below it. */
.jsc-5s-process-track {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 14px;
max-width: 1180px;
margin: 0 auto;
position: relative;
}
.jsc-5s-process-track::before {
content: "";
position: absolute;
top: 22px;
left: 5%;
right: 5%;
height: 1px;
background: var(--jsc-gray-line);
}
.jsc-5s-process-item { position: relative; }
.jsc-5s-process-num {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--jsc-white);
border: 1.5px solid var(--jsc-navy);
color: var(--jsc-navy);
font-family: var(--jsc-font-label);
font-weight: 700;
font-size: 14px;
margin: 0 0 16px;
}
.jsc-5s-process-item.is-final .jsc-5s-process-num {
border-color: var(--jsc-gold);
color: var(--jsc-gold);
}
.jsc-5s-process-item h3 {
font-family: var(--jsc-font-body);
font-weight: 700;
font-size: 16px;
color: var(--jsc-navy);
margin: 0 0 6px;
}
.jsc-5s-process-item p {
font-size: 13.5px;
line-height: 1.7;
color: var(--jsc-text-muted);
margin: 0;
}
.jsc-5s-process-item.is-next .jsc-5s-process-num {
background: transparent;
border: 1.5px dashed var(--jsc-gold);
color: var(--jsc-gold);
font-size: 17px;
}
.jsc-5s-process-item.is-next h3 {
color: var(--jsc-gold);
font-size: 15px;
}
/* Return-loop bracket: a thin gold line dropping from beneath NEXT, running
under the row, and rising back up toward 01 — a simple "U" shape made of
borders only. Approximate percentage anchor points (not pixel-exact to
each circle) are intentional: this is a decorative continuity cue, not a
precision diagram, and stays legible even if column widths shift
slightly at in-between viewport sizes. Desktop-only (see 1199px query
below) since it assumes the single-row 7-column layout. */
.jsc-5s-process-loop {
position: relative;
max-width: 1180px;
height: 26px;
margin: 6px auto 0;
}
.jsc-5s-process-loop::before {
content: "";
position: absolute;
left: 7%;
right: 7%;
top: 0;
height: 14px;
border-left: 2px solid var(--jsc-gold);
border-right: 2px solid var(--jsc-gold);
border-bottom: 2px solid var(--jsc-gold);
border-radius: 0 0 10px 10px;
}
.jsc-5s-process-loop::after {
content: "↑";
position: absolute;
left: 7%;
top: 9px;
transform: translateX(-50%);
color: var(--jsc-gold);
font-size: 13px;
font-weight: 700;
line-height: 1;
}
/* Circularity caption: kept as reinforcement, not the sole carrier of the
idea (the loop graphic above now does that visually). */
.jsc-5s-process-cycle {
max-width: 480px;
margin: 20px auto 0;
text-align: center;
padding-top: 20px;
border-top: 1px dashed var(--jsc-gray-line);
}
.jsc-5s-process-cycle p {
font-family: var(--jsc-font-heading);
font-size: 15px;
font-weight: 700;
color: var(--jsc-gold);
margin: 0;
}
/* ================= 08 OUR APPROACH ================= */
.jsc-5s-approach-lead {
max-width: 860px;
margin: -20px auto 56px;
text-align: center;
font-size: 16px;
line-height: 1.95;
color: var(--jsc-text-muted);
}
/* Photo column narrowed to ~85% of its previous share (2fr -> 1.7fr,
text gaining the freed-up 0.3fr) so the representative photo renders
slightly smaller and the text column gets more breathing room — helps
the body copy wrap at cleaner points (see the explicit breaks below). */
.jsc-5s-approach-grid {
display: grid;
grid-template-columns: 3.3fr 1.7fr;
gap: 56px;
align-items: start;
max-width: 1080px;
margin: 0 auto;
}
.jsc-5s-approach-list { display: flex; flex-direction: column; gap: 34px; }
.jsc-5s-approach-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid var(--jsc-gold);
color: var(--jsc-gold);
font-family: var(--jsc-font-label);
font-weight: 700;
font-size: 14px;
margin: 0 0 14px;
}
.jsc-5s-approach-item h3 {
font-family: var(--jsc-font-heading);
font-weight: 700;
font-size: 18px;
color: var(--jsc-navy);
margin: 0 0 4px;
}
.jsc-5s-approach-subtitle {
display: block;
font-size: 13.5px;
color: var(--jsc-gold);
font-weight: 600;
margin-bottom: 10px;
}
.jsc-5s-approach-item p:not(.jsc-5s-approach-num):not(.jsc-5s-approach-subtitle) {
font-size: 15px;
line-height: 1.9;
color: var(--jsc-text-body);
margin: 0;
}
.jsc-5s-approach-photo {
margin: 0;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: var(--jsc-radius);
box-shadow: var(--jsc-shadow);
}
.jsc-5s-approach-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
}
.jsc-5s-approach-link {
display: block;
margin-top: 16px;
text-align: center;
font-size: 13.5px;
font-weight: 700;
color: var(--jsc-navy);
}
/* ================= 09 FAQ & SERVICE AREA ================= */
.jsc-5s-faq-list {
max-width: 760px;
margin: 0 auto;
}
/* Native are three direct sibling
children. flex-wrap keeps the (small, fixed-size) number badge and
heading together on one row and pushes the body paragraph onto its
own full-width row below.
Bugfix (previous round): the body-paragraph rule below was written as
`.jsc-5s-process-item p`, a class+type selector (specificity 0,1,1)
that is MORE specific than `.jsc-5s-process-num` (0,1,0) alone — since
the number badge is itself a , that rule's flex-basis:100% was
silently winning over the badge's own flex:none/width:32px and
stretching the circle into a full-width oval. Scoping it with
:not(.jsc-5s-process-num) excludes the badge so only the body
paragraph gets flex-basis:100%. */
.jsc-5s-process-item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
border-left: 2px solid var(--jsc-gray-line);
padding: 0 0 24px 20px;
margin: 0 0 0 14px;
}
.jsc-5s-process-item.is-final { border-left-color: var(--jsc-gold); }
.jsc-5s-process-num {
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 11px;
margin: 0 0 0 -27px;
background: var(--jsc-white);
}
.jsc-5s-process-item h3 { flex: 1 1 auto; white-space: nowrap; margin: 0; }
.jsc-5s-process-item p:not(.jsc-5s-process-num) { flex: 1 1 100%; margin: 2px 0 0; }
.jsc-5s-process-item.is-next { border-left-style: dashed; }
.jsc-5s-process-item.is-next .jsc-5s-process-num { background: var(--jsc-white); }
.jsc-5s-process-loop { display: none; }
.jsc-5s-process-cycle { margin-top: 4px; padding-top: 20px; }
/* ---------- 08 OUR APPROACH ---------- */
.jsc-5s-approach-lead { margin-bottom: 32px; }
.jsc-5s-approach-list { gap: 26px; }
.jsc-5s-approach-photo { max-width: 220px; }
/* ---------- 09 FAQ & SERVICE AREA ---------- */
.jsc-5s-faq-question { font-size: 14.5px; padding: 18px 36px 18px 2px; }
.jsc-5s-faq-answer { padding: 0 2px 20px; }
.jsc-5s-faq-answer p { font-size: 14px; }
.jsc-5s-area { margin-top: 44px; padding-top: 36px; }
.jsc-5s-area h2 { font-size: 20px; }
/* ---------- 10 CONTACT ---------- */
.jsc-5s-contact { padding: 52px 20px; }
.jsc-5s-contact h2 { font-size: 23px; }
}
accordion — no JS. The marker triangle is
replaced with a custom "+"/"-" glyph via ::after on the summary so the
open/closed state is visually obvious without relying on the browser's
own disclosure triangle (whose style differs across browsers). */
.jsc-5s-faq-item {
border-top: 1px solid var(--jsc-gray-line);
}
.jsc-5s-faq-list .jsc-5s-faq-item:last-child {
border-bottom: 1px solid var(--jsc-gray-line);
}
.jsc-5s-faq-question {
position: relative;
list-style: none;
cursor: pointer;
padding: 22px 40px 22px 4px;
font-family: var(--jsc-font-body);
font-weight: 700;
font-size: 15.5px;
line-height: 1.7;
color: var(--jsc-navy);
}
.jsc-5s-faq-question::-webkit-details-marker { display: none; }
.jsc-5s-faq-question::after {
content: "+";
position: absolute;
right: 4px;
top: 20px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 400;
color: var(--jsc-gold);
border: 1px solid var(--jsc-gray-line);
border-radius: 50%;
transition: transform .2s ease;
}
.jsc-5s-faq-item[open] > .jsc-5s-faq-question::after {
content: "−";
}
.jsc-5s-faq-answer {
padding: 0 4px 24px;
}
.jsc-5s-faq-answer p {
font-size: 15.5px;
line-height: 1.9;
color: var(--jsc-text-body);
margin: 0;
}
.jsc-5s-area {
max-width: 760px;
margin: 64px auto 0;
padding-top: 48px;
border-top: 1px solid var(--jsc-gray-line);
text-align: center;
}
.jsc-5s-area h2 {
font-family: var(--jsc-font-heading);
font-weight: 800;
font-size: 22px;
line-height: 1.6;
color: var(--jsc-navy);
margin: 0 0 18px;
}
.jsc-5s-area p {
font-size: 15.5px;
line-height: 1.9;
color: var(--jsc-text-muted);
margin: 0 0 12px;
}
.jsc-5s-area p:last-child { margin-bottom: 0; }
/* ================= 10 CONTACT ================= */
/* Padding trimmed ~12% (96/112 -> 85/99) and body copy bumped slightly
(15.5 -> 16px): against the full navy block the body text read a touch
small with a touch more top/bottom air than the rest of the page.
Button and copy text are unchanged. */
.jsc-5s-contact {
background: var(--jsc-navy);
color: var(--jsc-white);
text-align: center;
padding: 85px 0 99px;
}
.jsc-5s-contact .jsc-eyebrow { justify-content: center; color: var(--jsc-gold-light); }
.jsc-5s-contact .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-5s-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 20px;
}
.jsc-5s-contact > p:not(.jsc-eyebrow) {
font-size: 16px;
line-height: 1.95;
color: rgba(255,255,255,.82);
max-width: 560px;
margin: 0 auto 36px;
}
/* ---------- Responsive: tablet ---------- */
@media (max-width: 1199px) {
.jsc-5s-level-track { grid-template-columns: repeat(5, 1fr); gap: 10px; }
.jsc-5s-process-track { grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
.jsc-5s-process-track::before { display: none; }
/* The return-loop's percentage anchors assume the single-row 7-column
layout above; once the track wraps to multiple rows the bracket no
longer lines up with anything meaningful, so it's hidden here and the
caption paragraph below carries the circularity idea on its own at
this width, same as it did before this revision. */
.jsc-5s-process-loop { display: none; }
.jsc-5s-process-cycle { margin-top: 32px; padding-top: 24px; }
}
@media (max-width: 980px) {
.jsc-5s-hero-grid { grid-template-columns: 1fr; gap: 32px; }
.jsc-5s-support-track { grid-template-columns: 1fr; gap: 0; }
.jsc-5s-support-track::before { display: none; }
.jsc-5s-approach-grid { grid-template-columns: 1fr; gap: 32px; }
.jsc-5s-approach-photo { max-width: 280px; margin: 0 auto; }
}
/* ---------- Responsive: mobile ---------- */
@media (max-width: 760px) {
.jsc-5s-mobile-br { display: inline; }
.jsc-5s-pc-br { display: none; }
.jsc-section-inner { padding: 0 16px; }
.jsc-section-head { margin-bottom: 28px; }
.jsc-section-head h2 { font-size: 23px; }
/* ---------- 01 HERO ---------- */
.jsc-5s-hero { padding: 40px 0 36px; }
/* Copy first, photo second — DOM already places .jsc-5s-hero-copy
before .jsc-5s-hero-photo, so no order swap is needed; this rule
only removes the placeholder's max-width constraint from the PC
grid so it doesn't look cramped once full-width on mobile. */
.jsc-5s-hero-photo { max-width: 100%; margin-top: 4px; }
.jsc-5s-hero-heading { font-size: 25px; line-height: 1.5; margin-bottom: 18px; }
.jsc-5s-hero-lead p { font-size: 14.5px; line-height: 1.85; }
.jsc-5s-hero-keywords { margin-top: 20px; padding-top: 18px; font-size: 12px; }
/* ---------- 02 ISSUES ---------- */
.jsc-5s-issues-lead { margin-bottom: 28px; }
.jsc-5s-issues-grid { grid-template-columns: 1fr; gap: 14px; }
.jsc-5s-issue-card { padding: 22px 20px; }
.jsc-5s-issues-final { margin-top: 32px; padding-top: 28px; }
.jsc-5s-issues-final p { font-size: 14.5px; white-space: nowrap; }
.jsc-5s-issues-final strong { font-size: 18px; }
/* ---------- 03 WHY ---------- */
.jsc-5s-why-lead { margin-bottom: 32px; }
.jsc-5s-why-symptom { font-size: 18px; }
.jsc-5s-why-cause { margin-left: 12px; }
.jsc-5s-why-final { margin-top: 32px; padding-top: 28px; }
.jsc-5s-why-final p { font-size: 17px; }
/* ---------- 04 VALUE: ascending track -> plain vertical stack ----------
Same markup as PC (STEP1 現場 -> STEP2 組織 -> STEP3 経営), just
reflowed to a column with the arrow glyph swapped to "↓" via the
-v/-h span pair (same device used in SECTION03 WHY). No staircase
offset on mobile per instruction: 現場 -> 組織 -> 経営 top to bottom. */
/* 3rd revision: the PC-only compression pass (smaller step padding,
bigger step-label/h3/tag/connector-label text) is locked back to its
pre-existing mobile values here, since none of those base rules were
themselves wrapped in a min-width query — without this, the PC
change would silently cascade onto mobile too. */
.jsc-5s-value { padding: 56px 0; }
.jsc-5s-value-track { flex-direction: column; align-items: stretch; gap: 0; }
.jsc-5s-value-step { max-width: 100%; margin-bottom: 0 !important; padding: 20px 20px; }
.jsc-5s-value-step-label { font-size: 11.5px; margin-bottom: 6px; }
.jsc-5s-value-step h3 { font-size: 19px; margin: 0 0 8px; }
/* B: force STEP1-3 tags onto a single SP line (was flex-wrap, causing
2-line tag rows and tall cards) — nowrap + tighter padding/gap/size
so even STEP1's 5 tags fit one row on a 320px-wide device without
overflow. C: also drop the auto top-margin (relied on PC's
align-items:stretch equal-height columns, which don't apply once the
track is a single mobile column) so tags sit right under the heading
instead of leaving a gap below. */
.jsc-5s-value-items { flex-wrap: nowrap; gap: 5px; margin: 6px 0 0; }
.jsc-5s-value-items li { font-size: 11px; padding: 4px 8px; white-space: nowrap; }
.jsc-5s-value-connector { flex-direction: row; width: auto; padding: 14px 0 !important; align-self: center; }
.jsc-5s-value-connector-arrow-h { display: none; }
.jsc-5s-value-connector-arrow-v { display: block; font-size: 20px; }
.jsc-5s-value-connector-label { margin-top: 0; margin-left: 8px; font-size: 11.5px; white-space: normal; text-align: left; }
.jsc-5s-value-entry-badge { display: block; margin: 6px 0 0; width: fit-content; }
.jsc-5s-value-emphasis { margin-top: 40px; padding-top: 32px; }
.jsc-5s-value-emphasis p { font-size: 19px; }
/* ---------- 05 5S DIAGNOSIS: staircase -> vertical list ----------
Instruction requires no horizontal scroll and a vertical layout
that still shows the ascending direction, so the PC staircase grid
is fully replaced (not shrunk) with a single-column list where each
level's own left rail + circle stand in for the staircase rise. */
.jsc-5s-diagnosis-lead { margin-bottom: 32px; }
.jsc-5s-level-track {
display: block;
max-width: 480px;
border-bottom: none;
padding-bottom: 0;
}
.jsc-5s-level-item {
text-align: left;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 14px;
border: none;
border-top: none;
border-left: 2px solid var(--jsc-gray-line);
border-radius: 0;
padding: 0 0 26px 20px;
margin: 0 0 0 14px !important;
position: relative;
/* Undo the PC staircase's per-level min-height (data-level selectors
above are more specific than this plain class, so this alone
would not win — the [data-level] rules are desktop-only in
intent but not desktop-scoped in the selector, hence this
explicit reset here rather than relying on cascade order). */
min-height: 0;
}
.jsc-5s-level-item[data-level="1"],
.jsc-5s-level-item[data-level="2"],
.jsc-5s-level-item[data-level="3"],
.jsc-5s-level-item[data-level="4"],
.jsc-5s-level-item[data-level="5"] {
min-height: 0;
}
.jsc-5s-level-item:last-child { padding-bottom: 0; }
.jsc-5s-level-item[data-level="5"] {
border-left-color: var(--jsc-gold-light);
box-shadow: none;
border-top: none;
}
/* SP-only redesign: PC's vertical 2-line circle badge ("LEVEL" over the
number) is switched to a single-line inline pill here so "LEVEL1" etc.
reads as one unit beside the name — badge/name/description structure
on PC (circle above heading above description) is untouched; only
this mobile query changes. gap+flex-wrap on the item (above) puts
badge+name on their own row and lets the description wrap to a full
width row below, the same pattern already used for SECTION07. */
.jsc-5s-level-item {
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
}
.jsc-5s-level-num {
display: inline-flex;
flex-direction: row;
align-items: baseline;
justify-content: center;
flex: none;
width: auto;
height: auto;
border-radius: 10px;
padding: 2px 9px;
margin: 0;
gap: 3px;
white-space: nowrap;
}
.jsc-5s-level-num-label { font-size: 9px; letter-spacing: .02em; margin-bottom: 0; }
.jsc-5s-level-num-value { font-size: 12.5px; }
/* PC's 2-line-name min-height/centering (added this round to keep
description start positions level across 5 columns) doesn't apply to
the mobile timeline layout — reset back to plain left-aligned text,
sized/nowrapped so "LEVEL5 マネジメントが機能している" (the longest
combo) still fits one line beside the pill without shrinking below
readable size or forcing horizontal scroll. */
.jsc-5s-level-name {
min-height: 0;
display: block;
flex: 1 1 auto;
font-size: 15.5px;
line-height: 1.4;
white-space: nowrap;
margin: 0;
}
.jsc-5s-level-desc {
flex: 1 1 100%;
margin: 6px 0 0;
}
.jsc-5s-level-flow { display: none; }
.jsc-5s-level-note { margin-top: 32px; padding-top: 24px; }
.jsc-5s-maturity-image { max-width: 100%; margin: 32px auto; }
.jsc-5s-level-note p { font-size: 15.5px; }
/* ---------- Mid CTA ---------- */
.jsc-5s-midcta { padding: 26px 20px; }
.jsc-5s-midcta-inner { gap: 14px; }
.jsc-5s-midcta-text { font-size: 14.5px; }
/* ---------- 06 OUR SUPPORT ---------- */
.jsc-5s-support-lead { margin-bottom: 32px; }
.jsc-5s-support-track { gap: 0; }
.jsc-5s-support-item {
border-left: 2px solid var(--jsc-gray-line);
padding: 0 0 30px 22px;
margin-left: 12px;
}
/* PC's column-alignment trick (margin-top:auto pushing the list to a
shared bottom edge) relies on the grid stretching all 3 items to
equal height — on mobile the track is single-column, so each card
sizes to its own content and there's no "bottom edge" to push
toward. Reset to a normal small top margin so no large gap opens up
above the list on mobile. */
.jsc-5s-support-list { margin-top: 6px; }
.jsc-5s-support-item:last-child { padding-bottom: 0; }
.jsc-5s-support-num { width: 36px; height: 36px; font-size: 13px; margin: 0 0 0 -30px; background: var(--jsc-white); position: relative; }
.jsc-5s-support-item h3 { margin-top: 14px; }
.jsc-5s-support-final { margin-top: 36px; padding-top: 28px; }
/* ---------- 07 SUPPORT PROCESS: horizontal track -> vertical flow ----------
Instruction: do not shrink the PC circular-track image, replace it
outright with a vertical 01->06->NEXT flow on mobile. */
.jsc-5s-process-track {
display: block;
max-width: 420px;
margin: 0 auto;
}
.jsc-5s-process-track::before { display: none; }
/* .jsc-5s-process-num, the h3, and the body