/* ============ Page wrapper background decoration ============ */
/* Moved here from main.css: .ss-main only ever appears on front-page.html,
   so (like every other page's own decorations) it belongs in this page's
   own stylesheet rather than the site-wide shared file. The one exception
   left behind in main.css is html's own overflow-x:hidden -- that's shared
   containment used by both this page's triangle bleed and the company
   page's squiggle bleed, not something specific to this page alone. */
.ss-main {
	position: relative;
	/* .ss-main__deco-triangle-green deliberately bleeds past the right
	   edge (left:95.78% + width:6.3% = 102.08%) for a "cut off at the
	   edge" look, same as .ss-company__squiggle on the company page.
	   Containment for that lives on <html> now (see main.css), not
	   here -- overflow-x:hidden on this element would force its own
	   overflow-y to compute as auto per spec (even with overflow-y:
	   visible set explicitly), turning .ss-main into a second, nested
	   vertical scroll container whenever its content is a hair taller
	   than its box (seen near fullscreen widths). */
}

.ss-main__deco-dashed {
	display: none;
	position: absolute;
	height: auto;
	margin: 0;
	pointer-events: none;
	z-index: 5;
}

.ss-main__deco-dashed--right {
	/* top used to be a flat % of .ss-main's own height, but that height
	   doesn't scale linearly with viewport width (section padding/text
	   reflow don't shrink in lockstep), so at in-between widths the curve
	   drifted down into the COMPANY text instead of tracking it. Refit as
	   a straight line (in main-local px) through two independently
	   confirmed-correct points -- 768px wide (264px local) and 1920px
	   wide (661px local, the original 15.75%) -- expressed directly in
	   vw so it tracks the heading at every width in between, then holds
	   at the 1920px value beyond that so ultra-wide screens don't drift. */
	left: 86.25%;
	top: clamp(264px, 34.46vw, 661px);
	width: 13.75%;
}

.ss-main__deco-dashed--left {
	/* Same straight-line-fit approach as --right above, refit through its
	   own confirmed-correct points near the BUSINESS section (787px
	   local at 768px wide, 1622px local -- the original 38.69% -- at
	   1920px wide). */
	left: 0%;
	top: clamp(787px, calc(72.47vw + 230.8px), 1622px);
	width: 17.81%;
}

.ss-main__deco-triangle-green {
	/* Same straight-line-fit approach as the dashed decorations above --
	   refit through confirmed-correct points beside the NEWS section
	   (742px local at 768px wide, 1817px local -- the original 43.34% --
	   at 1920px wide) instead of a flat % of .ss-main's own (non-linearly
	   scaling) height. */
	display: none;
	position: absolute;
	pointer-events: none;
	z-index: 1;
	margin-top: 0;
	left: 95.78%;
	top: clamp(742px, calc(93.35vw + 24.7px), 1817px);
	width: 6.3%;
	aspect-ratio: 120 / 121;
	clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
	background: linear-gradient(135deg, #fff 0%, #8cba98 100%);
}

@media (min-width: 768px) {
	.ss-main__deco-dashed {
		display: block;
	}

	.ss-main__deco-triangle-green {
		display: block;
	}
}

/* ============ Buttons ============ */
/* Moved here from main.css: is-style-ss-outline (「会社案内」「業務内容」
   「新卒採用サイト」等のアウトラインボタン) is only ever used on
   front-page.html -- no other template references this button style --
   so it belongs in this page's own stylesheet, same reasoning as the
   page wrapper decoration above. */
.wp-block-buttons .wp-block-button.is-style-ss-outline {
	width: 245px;
}

.wp-block-button.is-style-ss-outline .wp-block-button__link {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	padding: 0 18.6% 0 0;
	background: none;
	color: #000;
	border: none;
	border-radius: 0;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1em;
	box-sizing: border-box;
}

.wp-block-button.is-style-ss-outline .wp-block-button__link::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 18.6% 0 0;
	background: #fff;
	border: 1px solid #000;
	transition: background-color 0.2s ease;
}

.wp-block-button.is-style-ss-outline .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 65.12%;
	width: 34.88%;
	height: 1px;
	background: #ff0204;
	pointer-events: none;
	transform-origin: left center;
}

.wp-block-button.is-style-ss-outline .wp-block-button__link:hover {
	color: #000;
	font-weight: 700;
}

.wp-block-button.is-style-ss-outline .wp-block-button__link:hover::before {
	background: #eee;
}

.wp-block-button.is-style-ss-outline .wp-block-button__link:hover::after {
	animation: ss-btn-line-redraw 0.5s ease;
}

@keyframes ss-btn-line-redraw {
	0% {
		transform: scaleX(1);
	}

	40% {
		transform: scaleX(0.02);
	}

	100% {
		transform: scaleX(1);
	}
}

@media (min-width: 768px) {
	.wp-block-buttons .wp-block-button.is-style-ss-outline {
		width: clamp(137.6px, 17.92vw, 344px);
	}

	.wp-block-button.is-style-ss-outline .wp-block-button__link {
		height: clamp(22px, 2.86vw, 55px);
		font-size: clamp(14px, 1.04vw, 20px);
	}
}

/* ============ Shared section styles ============ */
.ss-section {
	/* The SP design's sections sit ~35-70px apart with no internal top/bottom
	   padding of their own; 60px here (contributed by both the
	   preceding and following section) made gaps ~2x too wide. */
	padding: 25px var(--ss-gap) !important;
}

.ss-section__head {
	margin-bottom: 24px;
	position: relative;
}

.ss-section__eyebrow {
	font-size: 16px;
	letter-spacing: 0.25em;
	font-weight: 700;
	color: var(--ss-gray-outline);
	margin: 0;
}

.ss-section__title {
	font-size: 30px;
	letter-spacing: 0.25em;
	font-weight: 700;
	color: var(--ss-gray-outline);
	margin: 0 0 8px;
	line-height: 1.2;
}

.ss-section__title--white {
	color: #fff;
}

.ss-section__title--pink {
	color: var(--ss-pink);
}

.ss-section__eyebrow--pink {
	color: var(--ss-pink);
}

.ss-news__head {
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

.ss-news__eyebrow {
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #000;
	font-weight: 400;
}

/* ============ Hero ============ */
.ss-hero {
	padding: 24px var(--ss-gap) 0 !important;
	position: relative;
	overflow: clip;
}

.ss-hero__shapes {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}

.ss-hero__shapes--back {
	z-index: 0;
	overflow: visible;
}

.ss-hero__shapes--front {
	z-index: 2;
	overflow: visible;
}

.ss-hero__shape {
	position: absolute;
	display: block;
}

.ss-hero__shape--dashed {
	width: 100%;
	height: auto;
}

.ss-hero__shape--dashed-pc {
	display: none;
}

.ss-hero__shape--dashed-sp {
	left: -1.46%;
	top: 0;
	width: 100.9%;
}

.ss-hero__shape--triangle-pink-big {
	left: 83.2%;
	top: 2.75%;
	width: 9.6%;
	height: auto;
}

.ss-hero__shape--triangle-pink-small {
	left: 76%;
	bottom: 4%;
	width: 4%;
	height: auto;
}

.ss-hero__shape--rect-gradient {
	display: none;
}

.ss-hero__inner {
	gap: 24px;
	margin: 0;
}

.ss-hero__image {
	position: relative;
	overflow: visible;
}

.ss-hero__image-main {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 320px;
	margin: 0 auto;
}

.ss-hero__shape--circle-orange {
	left: -2.7%;
	top: 0.7%;
	width: 17.3%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(135deg, #fff 0%, #fdf8f4 8%, #f9e8d7 23%, #f2cda8 42%, #e9a867 65%, #e4903d 79%);
}

.ss-hero__shape--circle-purple {
	left: 1.9%;
	top: 70.3%;
	width: 22.1%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(90deg, #fff 0%, #cfa6ff 46%);
}

.ss-hero__shape--triangle-green {
	left: 5.87%;
	top: 37.6%;
	width: 9.6%;
	aspect-ratio: 1;
	clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
	background: linear-gradient(135deg, #fff 0%, #8cba98 100%);
}

.ss-hero__shape--circle-blue {
	left: 62.4%;
	top: 9.1%;
	width: 10.1%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(135deg, #c7dfec 0%, #bdd9e9 47%, #69a9d3 83%, #036eb8 100%);
}

.ss-hero__copy {
	text-align: center;
	width: 100%;
	position: relative;
	z-index: 3;
}

.ss-hero__title {
	font-size: 26px;
	letter-spacing: 0.1em;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 16px;
}

.ss-hero__badges {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ss-hero__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 24px;
	box-sizing: border-box;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
}

.ss-hero__badge--base {
	background: linear-gradient(90deg, #956134 0%, #c9bc9c 100%);
}

.ss-hero__badge--personality {
	background: linear-gradient(90deg, #11bc62 0%, #8cba98 100%);
}

.ss-hero__badge-cross {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	font-size: 0;
}

.ss-hero__badge-cross::before,
.ss-hero__badge-cross::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 140%;
	height: 2px;
	background: #000;
	transform-origin: center;
}

.ss-hero__badge-cross::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.ss-hero__badge-cross::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---- Hero decorative shapes/layout at SP (<768px), measured against
   the 375x418 FV reference frame via pixel-sampled screenshots, since the
   instance/component bounding boxes in the raw design data include
   invisible padding that doesn't match the rendered shapes. ---- */
@media (max-width: 767px) {
	.ss-hero {
		/* .ss-hero__inner's aspect-ratio box doesn't grow to fit the
		   absolutely-positioned copy block once its content (2-line
		   title + badges) runs taller than the box; give the section
		   extra bottom room so overflow:clip doesn't cut the badges. */
		padding-bottom: 40px !important;
	}

	.ss-hero__shapes {
		inset: 24px var(--ss-gap) auto var(--ss-gap);
		aspect-ratio: 375 / 418;
	}

	.ss-hero__shape--triangle-pink-small {
		left: 26.13%;
		top: 66.27%;
		bottom: auto;
		width: 5.33%;
	}

	.ss-hero__shape--rect-gradient {
		display: block;
		left: 86.67%;
		top: 23.2%;
		width: 13.33%;
		aspect-ratio: 50 / 35;
		border-radius: 6px;
		background: linear-gradient(90deg, #ffecc7 0%, #fbd4cc 100%);
	}

	.ss-hero__shape--circle-orange {
		left: 2.4%;
		top: 1.67%;
		width: 7.47%;
	}

	.ss-hero__shape--circle-purple {
		left: 6.67%;
		top: 70.33%;
		width: 13.33%;
	}

	.ss-hero__shape--triangle-green {
		left: 6.4%;
		top: 37.56%;
		width: 9.33%;
	}

	.ss-hero__shape--circle-blue {
		left: 63.47%;
		top: 10.05%;
		width: 8%;
	}

	.ss-hero__inner {
		position: relative;
		aspect-ratio: 375 / 418;
		gap: 0;
	}

	.ss-hero__image {
		position: absolute;
		left: 15.2%;
		top: 8.13%;
		width: 70.93%;
	}

	.ss-hero__image-main {
		max-width: none;
		width: 100%;
		margin: 0;
	}

	.ss-hero__copy {
		position: absolute;
		left: 26.13%;
		top: 67.94%;
		width: 78%;
		text-align: left;
	}

	.ss-hero__title {
		letter-spacing: 0.02em;
	}
}

/* ============ About / Business shared two-col body ============ */
.ss-about__body,
.ss-business__body {
	gap: 24px;
	align-items: center;
}

.ss-about__text,
.ss-business__text {
	width: 100%;
}

.ss-about__text p,
.ss-business__text p {
	font-size: 14px;
	line-height: 2;
	margin: 0;
}

.ss-about .ss-section__head {
	margin-top: 0;
	margin-bottom: 0;
}

.ss-business__image img {
	max-width: 260px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	/* The design positions the illustration top-right, overlapping the
	   paragraph's height while the (wider) buttons below sit clear of
	   it — so the image is taken out of flow instead of stacked. */
	.ss-business {
		position: relative;
	}

	.ss-business__image {
		position: absolute;
		left: 60.53%;
		top: 0;
		width: 37.58%;
	}

	.ss-business__image img {
		max-width: 100%;
		margin: 0;
	}

	.ss-business__text p {
		max-width: 58%;
	}
}

.ss-business__buttons.wp-block-buttons {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.ss-about {
	background: #fff;
	position: relative;
	overflow: hidden;
	margin-block-start: 0 !important;
}

.ss-about__shape {
	position: absolute;
	pointer-events: none;
}

.ss-about__shape--circle-orange {
	display: none;
	left: 69.01%;
	top: 15.76%;
	width: 9.69%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(135deg, #fff 0%, #fdf8f4 8%, #f9e8d7 23%, #f2cda8 42%, #e9a867 65%, #e4903d 79%);
}

.ss-about__shape--triangle-pink {
	display: none;
	left: 7.76%;
	top: 49.9%;
	width: 5.9%;
	height: auto;
}

.ss-about__shape--rect-green {
	/* The design has this rect's bottom edge level with COMPANY heading's bottom
	   edge; top calibrated against the live (non-fixed-height) .ss-about
	   box rather than the raw design % so the bottom stays pinned there. */
	display: none;
	margin-top: 0;
	left: 85.73%;
	top: 2.49%;
	width: 5.1%;
	height: 36.97%;
	background: #ddeae0;
}

.ss-business {
	background: #fff;
}

/* ============ News ============ */
.ss-news {
	background: var(--ss-gray-bg);
	border-radius: 15px;
	margin: 25px var(--ss-gap) !important;
	padding: 24px var(--ss-gap) !important;
}

.ss-news .ss-section__head {
	margin-bottom: 20px;
}

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

.ss-news__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 0;
}

.ss-news__date {
	display: inline-block;
	background: #fff;
	border-radius: 50px;
	padding: 4px 14px;
	font-size: 13px;
	width: fit-content;
}

.ss-news__text {
	font-size: 14px;
	line-height: 1.6;
}

/* ============ Philosophy ============ */
.ss-philosophy {
	background: #fff;
	position: relative;
	overflow: hidden;
}

@media (max-width: 767px) {
	/* The diagonal background shape already reaches this section's own
	   bottom edge; removing the section's own bottom padding, plus the
	   margin-block-start WP core adds to every direct child of the
	   constrained-layout <main> (:where(.is-layout-constrained) > *),
	   lets it sit flush against RECRUITMENT below, per the SP design. */
	.ss-philosophy {
		padding-bottom: 0 !important;
	}

	.ss-recruit {
		margin-block-start: 0 !important;
	}

	/* Give the "03" text its own breathing room again -- this margin (not
	   padding on .ss-philosophy) grows the section from the inside, so the
	   diagonal shape below (positioned by % of the section's own box) and
	   RECRUITMENT right after it move down together and stay flush. */
	.ss-philosophy__columns.wp-block-columns {
		margin-bottom: 24px;
	}

	/* The SP design only shows a single, fairly narrow diagonal band
	   tucked into the bottom-right corner just above RECRUITMENT -- not
	   the wide two-shape "hourglass" pattern from the 1920px PC frame.
	   Reusing the PC percentages here stretched them across this section's
	   much taller/narrower SP box and produced two oversized, wrong-angle
	   bands, so SP gets its own geometry (pixel-measured off the SP
	   reference) instead of inheriting the shared rule above. */
	/* The SP design keeps a small diagonal band tucked behind the
	   "BASIC PHILOSOPHY" title itself (pixel-measured off the SP
	   reference: ~123x209px triangle from the section's top-left corner --
	   a shallow ~0.59px/row taper, not the steep ~1.17px/row one first
	   guessed here) -- a completely different shape/position from the
	   wide two-shape PC pattern, so it gets its own geometry instead of
	   display:none. */
	.ss-philosophy::before {
		left: 0;
		top: 0;
		width: 123px;
		height: 209px;
		clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
		background: linear-gradient(to bottom, #eee 0%, #fff 100%);
	}

	.ss-philosophy::after {
		left: 0;
		top: 76.8%;
		width: 100%;
		height: 23.2%;
		transform: none;
		clip-path: polygon(73% 0%, 100% 0%, 73% 100%, 40% 100%);
		background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
	}
}

.ss-philosophy::before,
.ss-philosophy::after {
	content: "";
	position: absolute;
	z-index: 0;
	clip-path: polygon(0% 100%, 40.56% 0%, 100% 0%, 59.44% 100%);
	background: linear-gradient(to bottom, #eee 0%, #fff 100%);
	pointer-events: none;
}

.ss-philosophy::before {
	left: -2.5%;
	top: 0;
	width: 51%;
	height: 75.3%;
}

.ss-philosophy::after {
	left: 58.2%;
	top: 24.7%;
	width: 51%;
	height: 75.3%;
	transform: rotate(180deg);
}

.ss-philosophy__shape--triangle-pink {
	/* A CSS clip-path triangle, not the deco-triangle-pink.svg <img> used
	   elsewhere: Chrome renders that SVG (preserveAspectRatio="none")
	   as a distorted flat-topped trapezoid specifically when it's
	   absolutely positioned with `right` (as opposed to `left`, which is
	   how the working ABOUT-section triangle is positioned) -- so this
	   one skips the SVG entirely and draws the same shape in CSS. */
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 9%;
	aspect-ratio: 113 / 114;
	clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
	background: #ffbad5;
	pointer-events: none;
}

.ss-philosophy .ss-section__head {
	position: relative;
	z-index: 1;
}

.ss-philosophy__columns.wp-block-columns {
	/* Figma (node 256:1089 "Group 26", width 1094px -- matches this
	   column container's own max-width:1100px content cap) shows ~50px
	   between columns 1-2 and ~42px between 2-3; 46px splits the two. */
	gap: 46px;
	position: relative;
	z-index: 1;
}

.ss-philosophy__item {
	min-width: 0;
}

/* Between WP core's own columns breakpoint (782px, see
   wp-includes/blocks/columns/style.css) and 1100px, 3 columns + the 46px
   gaps between them leave too little room per column (the shared content
   max-width clamp bottoms out at 440px there) -- text wraps constantly.
   Stacking is forced to continue up to 1100px instead of core's 782px:
   .wp-block-columns itself needs flex-wrap:wrap re-forced (core sets
   nowrap!important at min-width:782px, specificity 0,1,0 -- beaten here
   by the extra .ss-philosophy__columns class) and each column needs
   flex-basis:100% (core's own min-width:782px flex-basis:0;flex-grow:1
   rule isn't !important, so the more specific selector below is enough,
   no !important needed to win). */
@media (min-width: 782px) and (max-width: 1099px) {
	.ss-philosophy__columns.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.ss-philosophy__columns.wp-block-columns > .wp-block-column.ss-philosophy__item {
		flex-basis: 100%;
	}
}

/* min-width:1100px, not core's 782px (see the stacking override above) --
   this is where 3 columns actually get enough room again. Without this
   guard, the !important override below also wins against core's
   `@media (max-width:781px) { flex-basis:100% !important }` mobile
   stacking rule, since ours has higher selector specificity than that
   one too, breaking the SP single-column layout. */
@media (min-width: 1100px) {
	/* !important + this exact selector shape (matching WP core's own
	   .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
	   specificity 0,3,0) is required -- a plain .ss-philosophy__item:first-child
	   rule (0,2,0) loses to core's flex-basis:0;flex-grow:1 and is silently
	   ignored, same issue as .ss-footer__sitemap-col--main/--sub above. */
	/* Column widths match the Figma reference (PC_TOP_W1920px, node
	   256:1089 "Group 26"): "1"=370px, "2"=305px, "3"=327px -- not an
	   even 3-way split, and "01" isn't simply "a bit wider than the
	   other two equally" either (03 is also wider than 02). */
	.ss-philosophy__columns.wp-block-columns > .wp-block-column.ss-philosophy__item:nth-child(1) {
		flex: 370 1 0% !important;
	}

	.ss-philosophy__columns.wp-block-columns > .wp-block-column.ss-philosophy__item:nth-child(2) {
		flex: 305 1 0% !important;
	}

	.ss-philosophy__columns.wp-block-columns > .wp-block-column.ss-philosophy__item:nth-child(3) {
		flex: 327 1 0% !important;
	}
}

.ss-philosophy__head {
	display: flex;
	/* The number SVG has no CSS baseline of its own (it's a replaced
	   element), so flex's default align-items:baseline falls back to its
	   bottom margin edge -- which sits well below the numeral's actual
	   glyph baseline and threw the label noticeably low against it. */
	align-items: center;
	gap: 0;
	margin-bottom: 16px;
}

.ss-philosophy__number {
	width: 90px;
	height: auto;
	margin: 0;
	flex-shrink: 0;
	overflow: visible;
}

.ss-philosophy__number text {
	font-family: inherit;
	/* 900 (not 700): Figma's numerals read noticeably bolder than this
	   site's usual bold weight -- loaded as an extra Noto Sans JP weight
	   in functions.php's Google Fonts request. */
	font-weight: 900;
	font-size: 80px;
	fill: none;
	stroke: #ff0204;
	stroke-width: 1px;
	/* Short, evenly-spaced dashes (not the previous long-dash/short-gap
	   pattern that read as near-solid) to match the design reference. */
	stroke-dasharray: 10 2;
}

.ss-philosophy__label {
	font-size: 20px;
	letter-spacing: 0.1em;
	color: var(--ss-gray-text);
	margin: 0;
	/* The number SVG's rendered box (.ss-philosophy__number's own
	   clamp(90px,7.55vw,145px)) is wider than the "01"/"02"/"03" glyph
	   itself -- Figma (node 256:1092/1093) shows the glyph using ~28% of
	   that box at the 1920px reference, leaving blank space baked into
	   the SVG box before the label even starts, versus Figma's actual
	   ~18px gap. A flat px pull only matched that one reference width and
	   under-pulled (too wide a gap) at 1920px while over-pulling (too
	   tight, glyph/label touching) at narrower widths where the SVG box
	   itself is smaller -- track the same box-width formula instead so
	   the pull scales down with it. */
	margin-left: calc(18px - 0.23 * clamp(90px, 7.55vw, 145px));
	/* "技術力向上" (02) wraps to 2 lines well before "組織力向上" (01) does,
	   since column 2 is narrower (see the 370:305:327 Figma-matched flex
	   ratio above) -- keeping each label on one line instead of widening
	   the column to fit it. */
	white-space: nowrap;
}

.ss-philosophy__text {
	font-size: 14px;
	/* Figma (node 256:1091 etc.): leading-[2.4] at font-size 18px. */
	line-height: 2.4;
	margin: 0;
	overflow-wrap: anywhere;
}

/* ============ Recruitment ============ */
.ss-recruit {
	background: var(--ss-cream);
	position: relative;
	/* No overflow:hidden here (on purpose): the design has the blue circle
	   bleed past this section's own cream-colored box into the plain
	   white gap below it, before the footer starts. overflow-x:hidden
	   would also be wrong on its own -- the CSS spec computes overflow-y
	   as auto (still visually clipping) whenever overflow-x is non-visible,
	   which is what silently clipped the BUSINESS/circle decoration on
	   the service page earlier. Shapes here stay within the horizontal
	   bounds already, so no horizontal-overflow risk from dropping it. */
}

.ss-recruit__shape {
	position: absolute;
	pointer-events: none;
	display: none;
}

.ss-recruit__shape--rect-orange {
	right: 19.7%;
	top: 16.8%;
	width: 7%;
	aspect-ratio: 134.29 / 71.86;
	border-radius: 3.5% / 6.5%;
	background: #ffc444;
}

.ss-recruit__shape--triangle-green {
	left: 63.3%;
	top: 40.2%;
	width: 6.3%;
	aspect-ratio: 1;
	clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
	background: linear-gradient(135deg, #fff 0%, #8cba98 100%);
}

.ss-recruit__shape--circle-blue {
	right: 10.8%;
	bottom: 0;
	width: 16%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(135deg, #c7dfec 0%, #bdd9e9 47%, #69a9d3 83%, #036eb8 100%);
	/* The design has this circle hang past the cream section's own bottom
	   edge into the plain white gap below it (not a scroll/hover
	   animation -- get_motion_context returns no keyframes for this
	   node, so the "movement" the design shows isn't something to
	   reproduce; this is just its resting position). Measured: the
	   circle is 307.925px across and its own bottom sits
	   116.565px below the cream section's bottom edge, i.e. 37.86% of
	   its own height hangs below. Anchoring with bottom:0 and pushing
	   down with a %-of-own-height transform reproduces that exact
	   overflow ratio regardless of the section's actual (content-driven,
	   not fixed-height like the design's canvas) height. */
	transform: translateY(37.86%);
}

.ss-recruit__inner {
	position: relative;
	z-index: 1;
}

.ss-recruit__text {
	font-size: 14px;
	line-height: 1.9;
	max-width: 700px;
	margin: 0 0 24px;
}

.ss-recruit__notice {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ss-gray-text);
	margin: 16px 0 0;
}

/* ================================================================
   Desktop (PC) layout — matches the PC reference (1920px wide) from 768px up
   ================================================================ */
@media (min-width: 768px) {
	/* The PC reference frame is 1920px wide; every px value inside this block
	   (and the desktop blocks in main.css) is expressed as
	   clamp(V*0.4px, (V/19.2)vw, Vpx) so the whole desktop layout scales
	   down proportionally as the viewport narrows from 1920px to the
	   768px handoff to the SP layout, instead of holding a flat px size
	   and overflowing/breaking. */
	.ss-section {
		padding: clamp(40px, 5.21vw, 100px) var(--ss-gap) !important;
	}

	.ss-about {
		padding-top: clamp(2.4px, 0.31vw, 6px) !important;
		padding-bottom: clamp(13.2px, 1.72vw, 33px) !important;
	}

	.ss-business {
		/* padding-top was originally near-zero (title sat flush against
		   the section's own top) -- now that the illustration is pulled up
		   via negative margin-top to line up with the title, it needs real
		   breathing room above it too, or it crowds the NEWS section above. */
		padding-top: clamp(24px, 3.13vw, 60px) !important;
		padding-bottom: clamp(24px, 3.13vw, 60px) !important;
	}

	/* RECRUITMENT sits tight against the top of its own cream box in
	   the design, same as ABOUT/BUSINESS above -- the generic .ss-section
	   100px top padding left far more whitespace above the heading than
	   the design has. margin-bottom (not padding-bottom) adds the extra
	   clearance the now-unclipped circle-blue needs before the footer,
	   without stretching the cream background itself further down. */
	.ss-recruit {
		padding-top: clamp(2.4px, 0.31vw, 6px) !important;
		margin-bottom: clamp(46.4px, 6.04vw, 116px) !important;
	}

	.ss-section__eyebrow {
		font-size: clamp(16px, 2.08vw, 40px);
	}

	.ss-section__title {
		font-size: clamp(30px, 4.17vw, 80px);
	}

	.ss-hero {
		padding: clamp(24px, 3.13vw, 60px) var(--ss-gap) 0 !important;
	}

	.ss-hero__inner {
		display: block;
		position: relative;
		aspect-ratio: 1920 / 1002;
	}

	.ss-hero__shapes {
		inset: clamp(24px, 3.13vw, 60px) var(--ss-gap) auto var(--ss-gap);
		aspect-ratio: 1920 / 1002;
	}

	.ss-hero__image {
		position: absolute;
		left: 22.5%;
		top: 12.85%;
		width: 42.3%;
	}

	.ss-hero__image-main {
		max-width: 100%;
	}

	.ss-hero__shape--dashed-pc {
		display: block;
		left: 11.68%;
		top: clamp(-60px, -3.13vw, -24px);
		width: 77.2%;
	}

	.ss-hero__shape--dashed-sp {
		display: none;
	}

	.ss-hero__shape--circle-orange {
		left: 2%;
		top: 18.3%;
		width: 6.7%;
	}

	.ss-hero__shape--circle-purple {
		left: 13.9%;
		top: 63.8%;
		width: 9.9%;
	}

	.ss-hero__shape--triangle-green {
		left: 10.2%;
		top: 36.2%;
		width: 8.4%;
	}

	.ss-hero__shape--circle-blue {
		left: 64.02%;
		top: 42.13%;
		width: 6.7%;
	}

	.ss-hero__shape--triangle-pink-big {
		left: 90.16%;
		top: 4.96%;
		width: 8.3%;
	}

	.ss-hero__shape--triangle-pink-small {
		left: 74.24%;
		top: 47.35%;
		width: 4.7%;
	}

	.ss-hero__shape--rect-gradient {
		display: block;
		left: 71.68%;
		top: 61.31%;
		width: 14%;
		aspect-ratio: 269 / 144;
		border-radius: 6px;
		background: linear-gradient(90deg, #ffecc7 0%, #fbd4cc 100%);
	}

	.ss-hero__copy {
		position: absolute;
		left: 48.26%;
		top: 11.35%;
		width: 33%;
		text-align: right;
		margin-block-start: 0 !important;
	}

	.ss-hero__title {
		font-size: clamp(34px, 3.02vw, 58px);
		letter-spacing: 0.1em;
		/* Below ~1064px, .ss-hero__copy's width (a flat 33%) shrinks faster
		   than .ss-hero__title's font-size can (clamped to a 34px floor for
		   readability), so the box eventually gets too narrow for
		   "大きな進化を生む。" at 34px and it wraps a second time on top of
		   the deliberate <br> split. nowrap keeps each <br>-separated line
		   on one line; the box is right-aligned and unconstrained to its
		   left, so the (rare, narrow-viewport) overflow just extends left
		   over empty space instead of wrapping. */
		white-space: nowrap;
	}

	.ss-hero__badges {
		justify-content: flex-end;
		gap: clamp(7.4px, 0.96vw, 18.5px);
		margin-right: clamp(27.2px, 3.54vw, 68px);
	}

	/* width/height's floor is refit to stay in proportion with the
	   font-size floor below (16px, chosen for readability rather than the
	   generic V*0.4 = 11.2px used elsewhere) -- keeping the same
	   width:font and height:font ratio the design uses at both its
	   mobile (84:13, 24:13) and 1920px desktop (182:28, 51:28) sizes.
	   The old, independently-computed V*0.4 floors (72.8px/20.4px) broke
	   that ratio, so the box got proportionally narrower than its text
	   at in-between widths and the badge label wrapped onto 2 lines. */
	.ss-hero__badge {
		width: clamp(105px, 9.48vw, 182px);
		height: clamp(29px, 2.66vw, 51px);
		font-size: clamp(16px, 1.46vw, 28px);
	}

	.ss-hero__badge-cross {
		width: clamp(16px, 1.46vw, 28px);
		height: clamp(16px, 1.46vw, 28px);
	}

	.ss-about__shape--triangle-pink {
		width: 5.9%;
	}

	.ss-about__body,
	.ss-business__body {
		flex-wrap: nowrap;
	}

	/* .ss-business__body has two flex children (text + the much taller
	   illustration); align-items:center (inherited from the shared rule
	   above, harmless for .ss-about__body which only has one child) was
	   vertically centering the short text block against the tall image,
	   leaving a large gap between the BUSINESS heading and the paragraph. */
	.ss-business__body {
		align-items: flex-start;
	}

	.ss-about__text {
		max-width: 74.5%;
	}

	.ss-about__text p,
	.ss-business__text p {
		font-size: clamp(14px, 0.94vw, 18px);
	}

	.ss-business__image img {
		max-width: 100%;
	}

	/* Pulls the illustration up so its top lines up with the top of the
	   BUSINESS heading instead of starting below it (at .ss-business__body's
	   own top, level with the paragraph) -- stays a normal flex item (same
	   width/horizontal position as before), just shifted up by the exact
	   height of .ss-section__head (title + its 24px margin-bottom) so it
	   scales correctly alongside the title's own clamp()'d font-size.
	   !important (as elsewhere in this file) because core's own
	   .wp-block-image{margin:0 0 1em} inline style is equal specificity --
	   normally later-in-source wins anyway, but this guarantees it. */
	.ss-business__image {
		margin-top: clamp(-120px, calc(-5vw - 24px), -62px) !important;
		/* Without an explicit width, the image (right-aligned in the flex
		   row via justify-content:space-between) doesn't shrink as the
		   window narrows -- once pulled up level with the title, it then
		   reaches far enough left to cover the tail end of "BUSINESS".
		   Scaling its width in vw (same reference-1920px approach as the
		   title's own font-size) keeps it proportionally smaller at
		   narrower widths, so its left edge stays clear of the title. */
		width: clamp(160px, 22vw, 420px);
		flex: 0 0 auto;
	}

	.ss-news {
		max-width: clamp(520px, 67.71vw, 1300px);
		margin-left: auto !important;
		margin-right: auto !important;
		padding: clamp(20px, 2.6vw, 50px) clamp(40px, 5.21vw, 100px) !important;
		border-radius: 30px;
	}

	.ss-news__item {
		flex-direction: row;
		align-items: center;
		gap: clamp(9.6px, 1.25vw, 24px);
	}

	.ss-news__date {
		flex: 0 0 clamp(44px, 5.73vw, 110px);
		text-align: center;
		font-size: clamp(13px, 0.94vw, 18px);
	}

	.ss-news__text {
		font-size: clamp(14px, 0.94vw, 18px);
	}

	.ss-news__eyebrow {
		font-size: clamp(14px, 1.04vw, 20px);
	}

	.ss-philosophy__shape--triangle-pink {
		right: 9.375%;
		top: 3.83%;
		width: 5.885%;
	}

	/* The design leaves ~105px of breathing room below the 3-column text before
	   RECRUITMENT starts (not flush) -- .ss-recruit's own margin-block-start
	   is still zeroed below so this padding isn't doubled up with a gap. */
	.ss-philosophy {
		padding-bottom: clamp(42px, 5.47vw, 105px) !important;
	}

	.ss-recruit {
		margin-block-start: 0 !important;
	}

	.ss-philosophy__number {
		width: clamp(90px, 7.55vw, 145px);
	}

	.ss-philosophy__label {
		font-size: clamp(20px, 1.67vw, 32px);
	}

	.ss-philosophy__text {
		font-size: clamp(14px, 0.94vw, 18px);
	}

	.ss-recruit__text {
		font-size: clamp(14px, 0.94vw, 18px);
	}

	.ss-recruit__notice {
		font-size: clamp(13px, 0.83vw, 16px);
		margin-top: clamp(16px, 2.08vw, 40px);
	}
}

@media (min-width: 768px) {
	/* Previously this content column only centered itself (max-width:1100px)
	   starting at the 1100px breakpoint, so anywhere between 768-1100px it
	   sat flush against the section's edges instead -- visibly
	   left-aligned compared to NEWS, which has always used its own fluid
	   max-width (see .ss-news above) active from 768px up. Matching that
	   same clamp(V*0.4, Vvw, V) approach here means every section centers
	   itself the same way, from the same 768px point, with no sudden jump
	   in behaviour at 1100px. It also happens to solve the decorative
	   shapes overlapping this text at in-between widths (previously
	   patched with several one-off breakpoints below) since there's now
	   real, proportional margin at every width instead of zero margin
	   below 1100px. */
	.ss-section__head,
	.ss-about__body,
	.ss-business__body,
	.ss-philosophy__columns,
	.ss-news__list,
	.ss-recruit__inner {
		max-width: clamp(440px, 57.29vw, 1100px);
		margin-left: auto;
		margin-right: auto;
	}

	.ss-hero__inner {
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Fluid so it scales down with the rest of the RECRUITMENT column
	   above instead of holding a flat 700px cap that (at in-between
	   widths) left the text almost as wide as the column itself,
	   crowding out the decorative shapes to its right. */
	.ss-recruit__text {
		max-width: clamp(280px, 36.46vw, 700px);
	}

	.ss-about__shape--circle-orange,
	.ss-about__shape--triangle-pink,
	.ss-about__shape--rect-green,
	.ss-recruit__shape,
	.ss-philosophy__shape--triangle-pink {
		display: block;
	}
}