/**
 * JS CONSULTING contact page — structural styles.
 * Enqueued only on the "contact" page (see functions.php), mirroring how
 * front-top.css is scoped to is_front_page(). front-top.css / blocks.css /
 * tokens.css are not touched by this file or its selectors.
 *
 * .jsc-section-inner and .jsc-section-head are intentionally redefined here
 * (identical intent to their front-top.css counterparts) because that file
 * only loads on the front page — duplicating the pattern per page-CSS file
 * keeps front-top.css untouched while giving this page the same rhythm.
 * Colors and fonts all come from tokens.css custom properties; no hex values
 * are introduced here.
 */

.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;
}
.jsc-section-lead {
	margin-top: 16px;
	color: var(--jsc-text-muted);
	font-size: 15px;
	line-height: 1.9;
}

/* ---------- Section 01: CONTACT HERO ---------- */
.jsc-page-hero {
	background: var(--jsc-navy-deep);
	padding: 96px 0;
	text-align: center;
}
.jsc-page-hero-inner {
	max-width: 700px;
	margin: 0 auto;
}
.jsc-page-hero .jsc-eyebrow {
	justify-content: center;
	color: var(--jsc-gold-light);
}
.jsc-page-hero .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-page-hero-heading {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 38px;
	line-height: 1.55;
	letter-spacing: .01em;
	color: var(--jsc-white);
	margin: 0 0 22px;
}
.jsc-page-hero-lead {
	font-family: var(--jsc-font-body);
	font-size: 15.5px;
	line-height: 1.95;
	color: rgba(255,255,255,.85);
	margin: 0;
}
/* Mobile-only line break inside the H1 (see contact-page-content.html).
   Hidden by default so it has no effect on the PC line breaks. */
.jsc-mobile-br { display: none; }

/* ---------- Section 02: こんなご相談からでも構いません ---------- */
.jsc-consult-list {
	max-width: 760px;
	margin: 0 auto;
}
.jsc-consult-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 4px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-consult-item:first-child { border-top: none; }
.jsc-consult-marker {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 9px;
	border-radius: 50%;
	background: var(--jsc-gold);
}
.jsc-consult-item p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.85;
	color: var(--jsc-text-body);
}

/* ---------- Section 03: 3つの安心材料 ---------- */
.jsc-reassure-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: var(--jsc-maxw);
	margin: 0 auto;
}
.jsc-reassure-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: 32px 28px;
	text-align: center;
}
.jsc-reassure-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	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-gold);
	margin: 0 auto 18px;
}
.jsc-reassure-card h3 {
	font-family: var(--jsc-font-body);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--jsc-navy);
	margin: 0 0 10px;
}
.jsc-reassure-card p:not(.jsc-reassure-num) {
	font-size: 14px;
	line-height: 1.85;
	color: var(--jsc-text-muted);
	margin: 0;
}

/* ---------- Section 04: お問い合わせフォーム ---------- */
.jsc-contact-form-wrap {
	max-width: 720px;
	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);
	box-shadow: var(--jsc-shadow);
	padding: 56px 40px;
}
/* Contact Form 7 (form ID 52), scoped to .jsc-contact-form throughout so
   none of this reaches other pages or other forms.
   CF7 6.1.7's own WPCF7_HTMLFormatter treats <div> as a "p_parent_element"
   and wraps any bare inline content placed directly inside one (label,
   control-wrap, etc.) in a <p> — confirmed by reading the plugin's own
   includes/html-formatter.php, not guessed. That <p> is unavoidable while
   .jsc-form-field stays a <div> (the Form-tab template already removed
   every newline-driven <br>; this is a separate, structural CF7 behavior).
   Resetting its margin/padding here is a normal, narrowly-scoped
   normalization of a known, understood CF7 output shape — not a fix for a
   layout bug. */
.jsc-contact-form .jsc-form-field > p {
	margin: 0;
	padding: 0;
}

.jsc-form-field {
	margin-bottom: 26px;
}
.jsc-form-field:last-child {
	margin-bottom: 0;
}

.jsc-form-label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--jsc-font-body);
	font-weight: 700;
	font-size: 15.5px;
	color: var(--jsc-navy);
}
/* Plain auxiliary text next to the label, not a badge: no background/
   padding/border and a smaller size than the label itself, so "required"
   reads as a light annotation rather than the loudest thing in the field. */
.jsc-required,
.jsc-optional {
	margin-left: 6px;
	font-family: var(--jsc-font-label);
	font-size: 11.5px;
	font-weight: 600;
}
.jsc-required { color: var(--jsc-navy); }
.jsc-optional { color: var(--jsc-text-muted); }

.jsc-form-helper {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--jsc-text-muted);
}

/* CF7 wraps every control (input/textarea/checkbox) in its own
   .wpcf7-form-control-wrap <span>; making that block-level is what puts
   the label, helper and control each on their own line without needing
   any <br>. */
.jsc-contact-form .wpcf7-form-control-wrap {
	display: block;
}
.jsc-contact-form .jsc-form-control {
	box-sizing: border-box;
	display: block;
	width: 100%;
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	font-family: var(--jsc-font-body);
	font-size: 15px;
	color: var(--jsc-text-body);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.jsc-contact-form input.jsc-form-control {
	height: 51px;
	padding: 0 16px;
}
.jsc-contact-form textarea.jsc-form-control {
	height: 170px;
	padding: 14px 16px;
	line-height: 1.7;
	resize: vertical;
}
.jsc-contact-form .jsc-form-control::placeholder {
	color: var(--jsc-text-muted);
	opacity: .8;
}
.jsc-contact-form .jsc-form-control:focus {
	outline: none;
	border-color: var(--jsc-navy);
	box-shadow: 0 0 0 3px rgba(30,51,88,.14);
}
.jsc-contact-form .jsc-form-control.wpcf7-not-valid {
	border-color: #C0392B;
}
.jsc-contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #C0392B;
}

/* "ご希望の連絡方法" radio group. Targeted via CF7's own auto-generated
   data-name attribute (same reliable technique already used for other
   fields in this file) rather than adding a new class to the form
   template, so the CF7 shortcode addition above stays minimal.
   CF7 nests each field's actual options one level deeper than the
   .wpcf7-form-control-wrap span: wrap > .wpcf7-form-control.wpcf7-radio >
   .wpcf7-list-item (one per option) — confirmed by reading the live
   rendered markup, not assumed — so the flex layout is applied to that
   inner .wpcf7-form-control, not the outer wrap.
   PC: options flow inline and wrap naturally if the container narrows —
   never forced onto one line. Mobile override below stacks them vertically
   instead of letting them wrap mid-row, for a cleaner, easier-to-tap
   layout. */
.jsc-contact-form .wpcf7-form-control-wrap[data-name="contact-method"] .wpcf7-form-control {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}
.jsc-contact-form .wpcf7-form-control-wrap[data-name="contact-method"] .wpcf7-list-item {
	margin: 0;
}
.jsc-contact-form .wpcf7-form-control-wrap[data-name="contact-method"] .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	color: var(--jsc-text-body);
	cursor: pointer;
}
.jsc-contact-form .wpcf7-form-control-wrap[data-name="contact-method"] input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--jsc-navy);
	cursor: pointer;
}

.jsc-form-consent {
	padding-top: 18px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-form-consent .wpcf7-list-item {
	margin: 0;
}
.jsc-form-consent .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--jsc-text-body);
	cursor: pointer;
}
.jsc-form-consent-input {
	flex: none;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	accent-color: var(--jsc-navy);
}

.jsc-form-submit {
	margin-top: 8px;
	text-align: center;
}
.jsc-contact-form input.wpcf7-submit {
	display: inline-block;
	background: var(--jsc-navy);
	color: var(--jsc-white);
	border: 1px solid var(--jsc-navy);
	border-radius: var(--jsc-radius);
	font-family: var(--jsc-font-body);
	font-size: 15px;
	font-weight: 600;
	height: 52px;
	padding: 0 40px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.jsc-contact-form input.wpcf7-submit:hover {
	background: var(--jsc-navy-soft);
	border-color: var(--jsc-navy-soft);
	transform: translateY(-1px);
}
.jsc-contact-form input.wpcf7-submit:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(30,51,88,.2);
}
.jsc-contact-form .wpcf7-spinner {
	margin-left: 10px;
	vertical-align: middle;
}

.jsc-contact-form-wrap .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	font-size: 14px;
	line-height: 1.7;
	color: var(--jsc-text-body);
}
.jsc-contact-form-wrap .wpcf7-response-output.wpcf7-validation-errors,
.jsc-contact-form-wrap .wpcf7-response-output.wpcf7-mail-sent-ng,
.jsc-contact-form-wrap .wpcf7-response-output.wpcf7-aborted,
.jsc-contact-form-wrap .wpcf7-response-output.wpcf7-spam-blocked {
	border-color: #C0392B;
	color: #C0392B;
}
.jsc-contact-form-wrap .wpcf7-response-output.wpcf7-mail-sent-ok {
	border-color: var(--jsc-navy);
	color: var(--jsc-navy);
}

/* ---------- Section 05: お問い合わせ後の流れ ---------- */
.jsc-flow-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: var(--jsc-maxw);
	margin: 0 auto;
}
.jsc-flow-step {
	position: relative;
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	padding: 22px 20px;
}
/* Desktop-only connector between steps: sits in the grid gap, so it never
   affects grid track sizing. Turned off at tablet/mobile (2-col / stacked)
   where a horizontal arrow no longer reads as one continuous flow. */
.jsc-flow-step:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: -20px;
	width: 20px;
	transform: translateY(-50%);
	text-align: center;
	color: var(--jsc-gold);
	font-size: 16px;
	font-weight: 700;
	pointer-events: none;
}
.jsc-flow-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--jsc-navy);
	color: var(--jsc-navy);
	font-family: var(--jsc-font-label);
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 12px;
}
.jsc-flow-step h3 {
	font-family: var(--jsc-font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--jsc-navy);
	margin: 0 0 6px;
}
.jsc-flow-step p {
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--jsc-text-muted);
	margin: 0;
}
/* Closing statement: deliberately its own class (not reused from
   .jsc-flow-step p) so it reads as a conclusion to the whole flow, not a
   continuation of STEP 04's own body copy. No card/background/border, per
   the page's quiet, low-ornament direction — size, weight and spacing do
   the differentiating work instead.
   margin-top uses !important: WordPress's Global Styles inject an
   "is-layout-flow" class onto this element's parent group at render time
   and ship a site-wide ":root :where(.is-layout-flow) > *{margin-block-
   start:24px}" rule that ties in specificity with a plain single-class
   selector (see the same root cause diagnosed for .jsc-reassure-num) —
   !important guarantees this element's own, larger top margin wins
   regardless of stylesheet load order. */
.jsc-flow-closing {
	max-width: 640px;
	margin: 48px auto 0 !important;
	text-align: center;
	color: var(--jsc-navy);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.7;
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 980px) {
	.jsc-reassure-grid { grid-template-columns: 1fr; gap: 16px; }
	.jsc-flow-grid { grid-template-columns: repeat(2, 1fr); }
	.jsc-flow-step::after { display: none; }
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 760px) {
	/* Widen the usable text column (24px side padding left almost no margin
	   between a full line's rendered width and the available width at the
	   font sizes below, so real-world CJK glyph metrics were enough to push
	   the last 1-2 characters of several lines onto their own line). This
	   benefits every section uniformly instead of shrinking each font size
	   further. */
	.jsc-section-inner { padding: 0 16px; }

	/* ---------- HERO: ~35% shorter than the previous mobile height ---------- */
	.jsc-page-hero { padding: 32px 0 28px; }
	.jsc-page-hero .jsc-eyebrow { margin-bottom: 10px; }
	.jsc-page-hero-heading {
		font-size: 24px;
		line-height: 1.32;
		margin-bottom: 10px;
	}
	.jsc-mobile-br { display: inline; }
	.jsc-page-hero-lead { font-size: 13.5px; line-height: 1.6; }

	/* ---------- Section rhythm shared by all 4 lower sections ---------- */
	.jsc-section-head { margin-bottom: 20px; }
	.jsc-section-lead { margin-top: 8px; }
	#consult, #reassurance, #form, #flow {
		padding-top: 36px !important;
		padding-bottom: 32px !important;
	}

	.jsc-section-head h2 { font-size: 23px; }

	/* ---------- 相談例 ---------- */
	.jsc-consult-item { padding: 14px 2px; gap: 10px; }
	.jsc-consult-item p { font-size: 14px; }

	/* ---------- 3つの安心材料: cards -> compact divided list, same as 相談例 ----------
	   Plain block stack (no grid/flex columns): each of num / heading / body
	   is its own full-width line, so nothing has to share a row or column
	   with anything else. A 2-column grid was tried here first, but
	   ".jsc-reassure-card p" (see the desktop rule above) unintentionally
	   also matches the number's own <p class="jsc-reassure-num"> element and
	   out-specifies its grid placement, which is what put the number inside
	   the body text's cell. A stack has no placement to fight over. */
	.jsc-reassure-grid { grid-template-columns: 1fr; gap: 0; }
	.jsc-reassure-card {
		display: block;
		text-align: left;
		background: transparent;
		border: none;
		border-top: 1px solid var(--jsc-gray-line);
		border-radius: 0;
		padding: 12px 2px;
	}
	.jsc-reassure-card:first-child { border-top: none; }
	/* !important below: WordPress's Global Styles inject an "is-layout-flow"
	   class onto every plain Group block (confirmed by rendering this page's
	   content through the_content filter — the saved HTML has no such class,
	   WordPress adds it at render time) and ship a site-wide rule
	   ":root :where(.is-layout-flow) > *{margin-block-start:24px}". :where()
	   has zero specificity, but combined with :root it still ties (0,1,0)
	   with a single class selector, so which one visually wins depends on
	   stylesheet load order, not on anything in this file. !important is the
	   standard way to make this page's own spacing decisions win regardless. */
	.jsc-reassure-num {
		display: block;
		width: auto;
		height: auto;
		border: none;
		border-radius: 0;
		font-size: 12px;
		/* line-height:1 removes the inherited body leading that was making
		   this line's own box taller than its text, which read as a bigger
		   gap above the heading than the margin value alone suggested. */
		line-height: 1;
		margin: 0 0 8px !important;
	}
	.jsc-reassure-card h3 { font-size: 15px; margin: 0 0 3px !important; }
	.jsc-reassure-card p:not(.jsc-reassure-num) { font-size: 13px; margin: 0 !important; }

	/* ---------- お問い合わせフォーム ----------
	   Priority per the mobile brief: keep tap targets (input/checkbox/
	   submit) at a usable size, and cut everything else — label/helper
	   margins, the field-to-field gap, the space around consent/submit —
	   rather than shrinking the controls themselves.
	   #form-scoped overrides below (id + class) intentionally outrank the
	   #consult/#reassurance/#form/#flow shared heading/lead rules just
	   above, so this extra compression stays scoped to the form intro only
	   and doesn't touch the other three sections' rhythm. */
	#form .jsc-section-head { margin-bottom: 14px; }
	#form .jsc-section-lead { margin-top: 6px; }
	.jsc-contact-form-wrap { padding: 26px 18px; }
	#form .jsc-contact-form-wrap { padding-top: 18px; }
	.jsc-form-field { margin-bottom: 20px; }
	.jsc-form-label { font-size: 15px; margin-bottom: 6px; }
	.jsc-form-helper { font-size: 13px; margin-bottom: 7px; }
	.jsc-contact-form input.jsc-form-control { height: 49px; }
	.jsc-contact-form textarea.jsc-form-control { height: 128px; }
	.jsc-form-consent { padding-top: 14px; }
	.jsc-form-submit { margin-top: 4px; }
	.jsc-contact-form input.wpcf7-submit { width: 100%; height: 50px; }
	/* Stack "ご希望の連絡方法" vertically rather than letting the PC inline
	   layout wrap mid-row — each option gets its own full-width tap target. */
	.jsc-contact-form .wpcf7-form-control-wrap[data-name="contact-method"] .wpcf7-form-control {
		flex-direction: column;
		gap: 12px;
	}

	/* ---------- お問い合わせ後の流れ: 4 cards -> one compact timeline ---------- */
	.jsc-flow-grid { grid-template-columns: 1fr; gap: 0; }
	.jsc-flow-step {
		background: transparent;
		border: none;
		border-radius: 0;
		/* Left gutter trimmed from 30px to give the body text a few more
		   px of width (the number circle and rail are absolutely
		   positioned off the step's own edge, not off this padding, so
		   they don't move — only the text column widens). */
		padding: 0 0 20px 26px;
	}
	.jsc-flow-step:last-child { padding-bottom: 0; }
	.jsc-flow-step::before {
		content: "";
		position: absolute;
		left: 9px;
		top: 22px;
		bottom: -2px;
		width: 1px;
		background: var(--jsc-gray-line);
	}
	.jsc-flow-step:last-child::before { display: none; }
	.jsc-flow-num {
		position: absolute;
		left: 0;
		top: 0;
		width: 20px;
		height: 20px;
		margin: 0;
		font-size: 10px;
	}
	.jsc-flow-step h3 { font-size: 14.5px; margin: 0 0 3px; }
	.jsc-flow-step p { font-size: 12.5px; line-height: 1.6; }
	.jsc-flow-closing { margin-top: 28px !important; font-size: 18px; }
}