/**
 * JS CONSULTING representative-profile page ("profile") — structural styles.
 * Enqueued only on is_page('profile') (see functions.php), mirroring how
 * contact-page.css / privacy-policy-page.css are scoped to their own pages.
 * Independent of those files: no shared class names, so editing this file
 * can never affect Contact or Privacy Policy. Reuses only the site-wide,
 * already-shared classes from blocks.css (.jsc-eyebrow, .wp-block-button.
 * jsc-btn / .jsc-btn-gold) rather than redefining them.
 *
 * Colors/fonts all come from tokens.css custom properties; no hex values
 * are introduced here. Section backgrounds alternate cream / white / navy
 * for rhythm, matching the tone already established on TOP/Contact.
 */

.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.55;
	color: var(--jsc-navy);
	margin: 0;
}
/* Generic "meaning-unit" segment: wraps a phrase that must never break
   mid-word/mid-word-ending, while still allowing the line to wrap at the
   natural break point (a trailing "、" or "。") between this span and
   its neighbor. white-space:nowrap only blocks breaks INSIDE the span;
   the boundary between two adjacent spans still wraps normally, so the
   heading shows as one line wherever the viewport is wide enough, and
   splits exactly at the punctuation boundary otherwise — never mid-word
   (e.g. never "実務の中で経験してきまし/た"). No fixed <br> involved. */
.jsc-pf-nowrap-seg {
	white-space: nowrap;
}
/* Mobile-only manual line break, same convention already used on Contact
   / Privacy Policy (their .jsc-mobile-br / .jsc-legal equivalents):
   hidden by default so it has zero effect on PC, shown only inside the
   760px mobile query below. Used sparingly, only at a real punctuation/
   phrase boundary, to give mobile a deterministic break point instead of
   letting the browser choose one that can strand 1-2 characters. */
.jsc-pf-mobile-br {
	display: none;
}

/* ================= 01 HERO ================= */
.jsc-pf-hero {
	background: var(--jsc-cream);
	padding: 72px 0 64px;
}
.jsc-pf-hero-grid {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 64px;
	align-items: center;
}
.jsc-pf-hero-heading {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 36px;
	line-height: 1.5;
	color: var(--jsc-navy);
	margin: 0 0 24px;
}
/* Each line is its own manual <br>-separated phrase (see profile-page-
   content.html); white-space:nowrap guarantees the browser never
   re-wraps mid-phrase (e.g. "からこ/そ") regardless of exact column
   width — the phrases are short enough (9-10 characters) to always fit
   within the hero copy column at this font-size, down to the 980px
   breakpoint where the layout stacks to full width anyway. */
.jsc-pf-hero-heading-line {
	white-space: nowrap;
}
.jsc-pf-hero-identity {
	padding-top: 18px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-pf-hero-role {
	font-size: 14px;
	color: var(--jsc-text-muted);
	margin: 0 0 4px;
}
.jsc-pf-hero-name {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--jsc-navy);
	margin: 0 0 4px;
}
.jsc-pf-hero-name-en {
	font-family: var(--jsc-font-label);
	font-size: 12.5px;
	letter-spacing: .14em;
	color: var(--jsc-gold);
	margin: 0;
}
.jsc-pf-hero-photo {
	display: flex;
	justify-content: center;
}
.jsc-pf-hero-photo-img {
	margin: 0;
	width: 100%;
	max-width: 360px;
	border-radius: var(--jsc-radius);
	overflow: hidden;
	box-shadow: var(--jsc-shadow);
}
.jsc-pf-hero-photo-img img {
	display: block;
	width: 100%;
	height: auto;
}

/* ================= 02 MESSAGE ================= */
.jsc-pf-message-section {
	background: var(--jsc-white);
	padding: 72px 0;
}
.jsc-pf-message {
	max-width: 700px;
	margin: 0 auto;
}
.jsc-pf-message h2 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 28px;
	line-height: 1.55;
	color: var(--jsc-navy);
	margin: 0 0 28px;
}
.jsc-pf-message p {
	font-size: 15.5px;
	line-height: 1.9;
	color: var(--jsc-text-body);
	margin: 0 0 18px;
}
.jsc-pf-message-closing {
	margin-top: 32px !important;
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.6;
	color: var(--jsc-navy);
}
.jsc-pf-message-closing-note {
	color: var(--jsc-text-muted) !important;
	font-size: 14.5px;
	margin-top: 8px !important;
}

/* ================= 03 EXPERIENCE ================= */
.jsc-pf-experience-section {
	background: var(--jsc-cream);
	padding: 72px 0;
}
.jsc-pf-exp-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-width: var(--jsc-maxw);
	margin: 0 auto;
}
.jsc-pf-exp-card {
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-top: 2px solid var(--jsc-gold);
	border-radius: var(--jsc-radius);
	padding: 26px 26px;
}
.jsc-pf-exp-num {
	font-family: var(--jsc-font-label);
	font-weight: 700;
	font-size: 20px;
	color: var(--jsc-gold);
	margin: 0 0 10px;
}
.jsc-pf-exp-tag {
	font-family: var(--jsc-font-label);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--jsc-text-muted);
	margin: 0 0 10px;
}
.jsc-pf-exp-card h3 {
	font-family: var(--jsc-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.55;
	color: var(--jsc-navy);
	margin: 0 0 12px;
}
.jsc-pf-exp-card p {
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--jsc-text-body);
	margin: 0;
}

/* ================= 04 EXPERIENCE IN NUMBERS ================= */
.jsc-pf-numbers-section {
	background: var(--jsc-navy-deep);
	padding: 96px 0;
}
.jsc-pf-numbers-section .jsc-section-head h2 { color: var(--jsc-white); }
.jsc-pf-numbers-section .jsc-eyebrow { justify-content: center; color: var(--jsc-gold-light); }
.jsc-pf-numbers-section .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-pf-num-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: var(--jsc-maxw);
	margin: 0 auto;
}
.jsc-pf-num-item {
	text-align: center;
	padding: 0 6px;
}
/* Each figure (e.g. "20年以上", "20％向上") must render as a single,
   unbroken token: white-space:nowrap prevents the browser from wrapping
   between individual CJK characters (e.g. "20年以/上") the way it
   otherwise would at the narrower end of the 4-column grid. font-size
   trimmed slightly from the original pass to keep every figure clear of
   its column width with margin to spare, at every breakpoint. */
.jsc-pf-num-figure {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 34px;
	color: var(--jsc-gold-light);
	margin: 0 0 10px;
	white-space: nowrap;
}
/* Middle tier: the number's own meaning ("20年以上" = what, exactly),
   set clearly larger/bolder than the label below it so "figure + this
   line" reads as one unit at a glance, per the 3-tier figure -> headline
   -> label hierarchy. */
.jsc-pf-num-headline {
	font-family: var(--jsc-font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--jsc-white);
	white-space: nowrap;
	margin: 0 0 6px;
}
.jsc-pf-num-label {
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(255,255,255,.72);
	margin: 0;
}

/* ================= 05 MY APPROACH ================= */
.jsc-pf-approach-section {
	background: var(--jsc-white);
	padding: 72px 0;
}
.jsc-pf-approach-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	max-width: var(--jsc-maxw);
	margin: 0 auto;
}
.jsc-pf-approach-item {
	text-align: center;
}
.jsc-pf-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 18px;
}
.jsc-pf-approach-item h3 {
	font-family: var(--jsc-font-body);
	font-weight: 700;
	font-size: 17px;
	color: var(--jsc-navy);
	margin: 0 0 10px;
}
/* PC-only single-line request for two specific MY APPROACH headings only
   (marked via .jsc-pf-nowrap-pc in profile-page-content.html, not applied
   to the whole .jsc-pf-approach-item h3 selector). Scoped inside a
   min-width query so mobile's existing natural wrap is never touched. */
@media (min-width: 761px) {
	.jsc-pf-nowrap-pc {
		white-space: nowrap;
	}
}
.jsc-pf-approach-item p {
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--jsc-text-body);
	margin: 0;
}
.jsc-pf-approach-closing {
	max-width: 620px;
	margin: 40px auto 0 !important;
	text-align: center;
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 21px;
	line-height: 1.7;
	color: var(--jsc-navy);
}

/* ================= 06 PROFILE ================= */
.jsc-pf-profile-section {
	background: var(--jsc-cream);
	padding: 72px 0;
}
.jsc-pf-profile-card {
	max-width: 560px;
	margin: 0 auto;
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-top: 2px solid var(--jsc-navy);
	border-radius: var(--jsc-radius);
	padding: 36px 40px;
	text-align: center;
}
.jsc-pf-profile-name-en {
	font-family: var(--jsc-font-label);
	font-size: 12.5px;
	letter-spacing: .14em;
	color: var(--jsc-gold);
	margin: 0 0 8px;
}
.jsc-pf-profile-name {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 26px;
	color: var(--jsc-navy);
	margin: 0 0 10px;
}
.jsc-pf-profile-title {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--jsc-text-muted);
	margin: 0 0 28px;
}
.jsc-pf-profile-qual {
	padding-top: 24px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-pf-profile-qual-label {
	font-family: var(--jsc-font-label);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jsc-text-muted);
	margin: 0 0 10px;
}
.jsc-pf-profile-qual p {
	font-size: 15px;
	line-height: 1.8;
	color: var(--jsc-text-body);
	margin: 0;
}

/* ================= 07 CAREER ================= */
.jsc-pf-career-section {
	background: var(--jsc-white);
	padding: 72px 0;
}
.jsc-pf-timeline {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding-left: 4px;
}
.jsc-pf-timeline-item {
	position: relative;
	padding: 0 0 28px 44px;
}
.jsc-pf-timeline-item:last-child { padding-bottom: 0; }
.jsc-pf-timeline-item::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 32px;
	bottom: -6px;
	width: 1px;
	background: var(--jsc-gray-line);
}
.jsc-pf-timeline-item:last-child::before { display: none; }
.jsc-pf-timeline-num {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1.5px solid var(--jsc-navy);
	color: var(--jsc-navy);
	background: var(--jsc-white);
	font-family: var(--jsc-font-label);
	font-weight: 700;
	font-size: 13px;
	margin: 0;
}
.jsc-pf-timeline-item h3 {
	font-family: var(--jsc-font-body);
	font-weight: 700;
	font-size: 17px;
	color: var(--jsc-navy);
	margin: 0 0 8px;
}
.jsc-pf-timeline-item p {
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--jsc-text-body);
	margin: 0;
}

/* ================= 08 CONTACT ================= */
.jsc-pf-contact-section {
	background: var(--jsc-cream);
	padding: 96px 0;
}
.jsc-pf-contact-inner {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}
.jsc-pf-contact-inner .jsc-eyebrow { justify-content: center; }
.jsc-pf-contact-inner h2 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 28px;
	line-height: 1.55;
	color: var(--jsc-navy);
	margin: 0 0 18px;
}
.jsc-pf-contact-inner p {
	font-size: 15px;
	line-height: 1.85;
	color: var(--jsc-text-body);
	margin: 0 0 30px;
}
.jsc-pf-contact-note {
	margin: 18px 0 0 !important;
	font-size: 13.5px !important;
	color: var(--jsc-text-muted) !important;
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 980px) {
	.jsc-pf-hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.jsc-pf-hero-photo { order: -1; max-width: 280px; margin: 0 auto; }
	.jsc-pf-exp-grid { gap: 18px; }
	.jsc-pf-num-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
	.jsc-pf-approach-grid { grid-template-columns: 1fr; gap: 40px; }
}

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

	/* ---------- 01 HERO ---------- */
	.jsc-pf-hero { padding: 40px 0 36px; }
	.jsc-pf-hero-grid { gap: 24px; }
	.jsc-pf-hero-photo {
		order: 0;
		max-width: 200px;
	}
	.jsc-pf-hero-copy { order: -1; }
	.jsc-pf-hero-heading { font-size: 25px; line-height: 1.5; margin-bottom: 20px; }
	.jsc-pf-hero-identity { padding-top: 16px; }
	.jsc-pf-hero-name { font-size: 19px; }

	/* ---------- 02 MESSAGE ---------- */
	.jsc-pf-message-section { padding: 40px 0; }
	.jsc-pf-message h2 { font-size: 22px; margin-bottom: 20px; }
	.jsc-pf-message p { font-size: 14.5px; line-height: 1.8; margin-bottom: 16px; }
	.jsc-pf-message-closing { margin-top: 24px !important; font-size: 20px; }

	/* ---------- 03 EXPERIENCE ---------- */
	.jsc-pf-experience-section { padding: 40px 0; }
	.jsc-pf-exp-grid { grid-template-columns: 1fr; gap: 14px; }
	.jsc-pf-exp-card { padding: 20px 18px; }
	/* Scoped to EXPERIENCE only (not the shared .jsc-section-head h2
	   default, which MESSAGE/NUMBERS/PROFILE/CAREER already rely on and
	   should not be touched): a small extra safety margin so the longer
	   half of the two-segment headline ("工場全体をマネジメントする",
	   the widest of the four card headings) always clears the card's
	   usable width with room to spare, on top of the guaranteed
	   mobile-br break between segments below. */
	#pf-experience .jsc-section-head h2 { font-size: 21px; }
	.jsc-pf-exp-card h3 { font-size: 17px; letter-spacing: -.005em; }

	/* ---------- 04 NUMBERS ---------- */
	.jsc-pf-numbers-section { padding: 44px 0; }
	.jsc-pf-num-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
	.jsc-pf-num-figure { font-size: 26px; margin-bottom: 8px; }
	/* Desktop forces a single line (white-space:nowrap above); mobile
	   drops that constraint so narrower phone widths can wrap naturally
	   instead of overflowing the column. */
	.jsc-pf-num-headline { font-size: 14.5px; margin-bottom: 5px; white-space: normal; }
	.jsc-pf-num-label { font-size: 12px; }

	/* ---------- 05 MY APPROACH ---------- */
	.jsc-pf-approach-section { padding: 40px 0; }
	.jsc-pf-approach-grid { grid-template-columns: 1fr; gap: 24px; }
	.jsc-pf-approach-closing { margin-top: 28px !important; font-size: 18px; }

	/* ---------- 06 PROFILE ---------- */
	.jsc-pf-profile-section { padding: 40px 0; }
	.jsc-pf-profile-card { padding: 28px 22px; }
	.jsc-pf-profile-name { font-size: 22px; }

	/* ---------- 07 CAREER ---------- */
	.jsc-pf-career-section { padding: 40px 0; }
	/* Left gutter trimmed from 38px to 32px to give the body text a few
	   more px of usable width in the narrowest column on the page —
	   combined with the mobile-br insertions below (at each item's own
	   natural comma/phrase boundary), this keeps every item body clear
	   of a 1-2 character orphan line. */
	.jsc-pf-timeline-item { padding: 0 0 22px 32px; }
	.jsc-pf-timeline-num { width: 28px; height: 28px; font-size: 12px; }
	.jsc-pf-timeline-item::before { left: 13px; top: 28px; bottom: -4px; }
	.jsc-pf-timeline-item p { font-size: 14px; letter-spacing: -.01em; }

	/* ---------- 08 CONTACT ---------- */
	.jsc-pf-contact-section { padding: 44px 0; }
	.jsc-pf-contact-inner h2 { font-size: 22px; }
	.wp-block-buttons { width: 100%; }
	.jsc-pf-contact-section .wp-block-button.jsc-btn-gold { width: 100%; }
	.jsc-pf-contact-section .wp-block-button.jsc-btn-gold .wp-block-button__link {
		display: block;
		text-align: center;
	}
}