/* ==========================================================================
   建設業の採用支援（全国版） /construction-recruitment/
   - .crn 配下のみ。既存の共通CSS・札幌版（.construction-recruit-page）とは独立。
   - コンセプト：図面・工程表・段取り。細い罫線と余白で構成し、装飾は最小限。
   ========================================================================== */

.crn {
	--crn-ink: #132a35;
	--crn-navy: #0f2a36;
	--crn-navy-2: #16394a;
	--crn-text: #26363d;
	--crn-muted: #55656c;
	--crn-line: #cfd8db;
	--crn-line-strong: #9fb0b6;
	--crn-paper: #f6f5f1;
	--crn-white: #fff;
	--crn-blue: #2a6788;
	--crn-accent: #c24d16;
	--crn-accent-dark: #a33f10;
	--crn-accent-soft: #fbeee6;
	--crn-grid: rgba(19, 42, 53, .055);
	--crn-radius: 4px;
	--crn-wrap: 1120px;

	color: var(--crn-text);
	background: var(--crn-white);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .02em;
	font-feature-settings: "palt" 0;
	overflow-x: clip;
}
.crn *,
.crn *::before,
.crn *::after { box-sizing: border-box; }
.crn img { display: block; max-width: 100%; max-height: none; height: auto; image-rendering: auto; }
/* テーマ側でも余白はリセット済み。詳細度0で揃え、各コンポーネントの指定を優先させる */
:where(.crn) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.crn) :where(ul, ol) { list-style: none; }
.crn h1 { text-align: left; }
.crn a { color: var(--crn-blue); text-underline-offset: .22em; }
.crn a:hover { color: var(--crn-navy); }
.crn a:focus-visible,
.crn summary:focus-visible { outline: 3px solid var(--crn-accent); outline-offset: 3px; }
.crn table { border-collapse: collapse; width: 100%; }
.crn article { width: auto; margin: 0; }
.crn :is(h1, h2, h3) { word-break: auto-phrase; text-wrap: balance; }

.crn-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.crn-br-sp { display: none; }

.crn-wrap {
	width: min(100% - 48px, var(--crn-wrap));
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Buttons ---------- */
.crn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 58px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--crn-radius);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	text-align: center;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease;
}
.crn-btn--primary {
	background: var(--crn-accent);
	color: #fff !important;
}
.crn-btn--primary::after {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
	box-shadow: none;
	position: relative;
	flex: 0 0 auto;
	transition: width .2s ease;
}
.crn-btn--primary:hover { background: var(--crn-accent-dark); color: #fff !important; }
.crn-btn--primary:hover::after { width: 26px; }
.crn-btn--block { display: flex; width: 100%; }
.crn-btn--large { min-height: 66px; padding: 16px 40px; font-size: 17px; }
.crn-btn-note { margin-top: 12px; color: var(--crn-muted); font-size: 13px; line-height: 1.6; }

/* ---------- Section base ---------- */
.crn-section { padding: clamp(72px, 9vw, 120px) 0; }
.crn-section--white { background: var(--crn-white); }
.crn-section--paper { background: var(--crn-paper); }

.crn-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.crn-head--wide { max-width: 860px; }
.crn-head--flush { margin-bottom: 28px; }
.crn-head h2 {
	color: var(--crn-ink);
	font-size: clamp(26px, 3.1vw, 38px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .03em;
}
.crn-head__lead { margin-top: 20px; color: var(--crn-muted); }

/* 図面の表題欄を思わせるセクションラベル */
.crn-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	color: var(--crn-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
}
.crn-label::after {
	content: "";
	flex: 1 1 auto;
	max-width: 120px;
	height: 1px;
	background: var(--crn-line-strong);
}
.crn-label__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 26px;
	padding: 0 6px;
	border: 1px solid var(--crn-ink);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}
.crn-label--dark { color: #fff; }
.crn-label--dark .crn-label__no { border-color: rgba(255, 255, 255, .7); }
.crn-label--dark::after { background: rgba(255, 255, 255, .35); }

.crn-note { margin-top: 20px; color: var(--crn-muted); font-size: 13px; line-height: 1.75; }
.crn-inline-link { margin-top: 24px; font-size: 14px; line-height: 1.8; }
.crn-inline-link a { font-weight: 700; }
.crn-inline-link span[aria-hidden] { margin: 0 .6em; color: var(--crn-line-strong); }
.crn-inline-link--center { text-align: center; }

/* ==========================================================================
   01 Hero
   ========================================================================== */
.crn-hero {
	position: relative;
	padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 96px);
	background-color: var(--crn-paper);
	background-image:
		linear-gradient(var(--crn-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--crn-grid) 1px, transparent 1px);
	background-size: 32px 32px;
	border-bottom: 1px solid var(--crn-line);
}
.crn-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
}
.crn-hero__eyebrow {
	display: inline-block;
	margin-bottom: 26px;
	padding: 6px 12px;
	border: 1px solid var(--crn-ink);
	background: var(--crn-white);
	color: var(--crn-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .08em;
}
.crn-hero__eyebrow span { margin: 0 .5em; color: var(--crn-line-strong); }
.crn-hero__title { color: var(--crn-ink); font-weight: 700; }
.crn-hero__titleSub {
	display: block;
	margin-bottom: 10px;
	font-size: clamp(18px, 1.9vw, 22px);
	line-height: 1.5;
	letter-spacing: .1em;
}
.crn-hero__titleMain {
	display: block;
	font-size: clamp(40px, 5.6vw, 68px);
	line-height: 1.22;
	letter-spacing: .04em;
}
.crn-hero__catch {
	margin-top: 30px;
	padding-left: 18px;
	border-left: 3px solid var(--crn-accent);
	color: var(--crn-ink);
	font-size: clamp(17px, 1.7vw, 20px);
	font-weight: 700;
	line-height: 1.75;
}
.crn-hero__lead { max-width: 560px; margin-top: 20px; color: var(--crn-muted); font-size: 15px; }
.crn-hero__action { margin-top: 34px; }

.crn-hero__visual { position: relative; padding: 0 0 56px 0; }
.crn-hero__photo {
	position: relative;
	margin-left: 28px;
}
/* 寸法線風の細い枠 */
.crn-hero__photo::before {
	content: "";
	position: absolute;
	inset: -14px -14px 14px 14px;
	border: 1px solid var(--crn-line-strong);
	pointer-events: none;
}
.crn-hero__photo img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
}
.crn-hero__sheet {
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(300px, 78%);
	padding: 18px 20px 16px;
	border: 1px solid var(--crn-ink);
	background: var(--crn-white);
	color: var(--crn-ink);
	font-size: 13px;
	line-height: 1.5;
}
.crn-hero__sheetTitle {
	display: block;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--crn-line);
	font-weight: 700;
	letter-spacing: .1em;
}
.crn-hero__sheet ol { counter-reset: crn-sheet; }
.crn-hero__sheet li {
	counter-increment: crn-sheet;
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 3px 0;
}
.crn-hero__sheet li::before {
	content: counter(crn-sheet, decimal-leading-zero);
	color: var(--crn-muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}
.crn-hero__sheet li.is-finish {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px dashed var(--crn-line-strong);
	color: var(--crn-accent);
	font-weight: 700;
}
.crn-hero__sheet li.is-finish small {
	margin-left: auto;
	padding: 1px 6px;
	border: 1px solid currentColor;
	font-size: 11px;
	font-weight: 700;
}

/* ---------- 目次 ---------- */
.crn-toc { border-bottom: 1px solid var(--crn-line); background: var(--crn-white); }
.crn-toc .crn-wrap { display: flex; align-items: center; gap: 24px; }
.crn-toc__label {
	flex: 0 0 auto;
	color: var(--crn-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
}
.crn-toc__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	counter-reset: crn-toc;
}
.crn-toc__list a {
	display: block;
	padding: 16px 14px;
	color: var(--crn-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}
.crn-toc__list a:hover { color: var(--crn-accent); }

/* ==========================================================================
   02 Problem
   ========================================================================== */
.crn-checks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--crn-line);
	border-left: 1px solid var(--crn-line);
}
.crn-checks li {
	position: relative;
	padding: 22px 22px 22px 56px;
	border-right: 1px solid var(--crn-line);
	border-bottom: 1px solid var(--crn-line);
	color: var(--crn-ink);
	font-weight: 700;
	line-height: 1.6;
}
.crn-checks li::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 26px;
	width: 16px;
	height: 16px;
	border: 1px solid var(--crn-ink);
	background: var(--crn-white);
}
.crn-checks li::after {
	content: "";
	position: absolute;
	left: 27px;
	top: 27px;
	width: 6px;
	height: 11px;
	border-right: 2px solid var(--crn-accent);
	border-bottom: 2px solid var(--crn-accent);
	transform: rotate(45deg);
}
.crn-problem-note {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 16px 48px;
	margin-top: clamp(40px, 5vw, 56px);
	padding-top: 32px;
	border-top: 2px solid var(--crn-ink);
}
.crn-problem-note__title { color: var(--crn-ink); font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.5; }
.crn-problem-note p:not(.crn-problem-note__title) { color: var(--crn-text); }

/* ==========================================================================
   03 Journey
   ========================================================================== */
.crn-journey {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	counter-reset: none;
}
/* 測量点をつなぐような基準線 */
.crn-journey::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 18px;
	right: calc(100% / 6 - 18px);
	height: 1px;
	background: var(--crn-ink);
}
.crn-journey__step {
	position: relative;
	padding: 0 14px 0 0;
}
.crn-journey__no {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--crn-ink);
	border-radius: 50%;
	background: var(--crn-paper);
	color: var(--crn-ink);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.crn-journey__step--goal .crn-journey__no { background: var(--crn-accent); border-color: var(--crn-accent); color: #fff; }
.crn-journey__step h3 {
	margin-top: 18px;
	color: var(--crn-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
.crn-journey__see {
	margin-top: 6px;
	color: var(--crn-muted);
	font-size: 13px;
	line-height: 1.6;
}
.crn-journey__drop {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px dashed var(--crn-line-strong);
	color: var(--crn-text);
	font-size: 13px;
	line-height: 1.7;
}
.crn-journey__drop span {
	display: block;
	margin-bottom: 4px;
	color: var(--crn-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
}
.crn-split-note {
	max-width: 820px;
	margin-top: clamp(48px, 6vw, 72px);
	padding: 28px 32px;
	border-left: 3px solid var(--crn-ink);
	background: var(--crn-white);
}
.crn-split-note__title { margin-bottom: 10px; color: var(--crn-ink); font-size: 20px; font-weight: 700; line-height: 1.5; }
.crn-split-note .crn-inline-link { margin-top: 14px; }

/* 中間CTA（主張しすぎない帯） */
.crn-cta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-top: clamp(48px, 6vw, 64px);
	padding: 24px 28px;
	border: 1px solid var(--crn-ink);
	background: var(--crn-white);
}
.crn-cta-bar p { color: var(--crn-ink); font-weight: 700; line-height: 1.7; }
.crn-cta-bar .crn-btn { flex: 0 0 auto; }

/* ==========================================================================
   04 段取り（工程表）
   ========================================================================== */
.crn-schedule {
	border-top: 2px solid var(--crn-ink);
	border-bottom: 1px solid var(--crn-ink);
}
.crn-schedule__header {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 1fr);
	border-bottom: 1px solid var(--crn-line);
}
.crn-schedule__header::before {
	content: "工程";
	padding: 12px 0;
	color: var(--crn-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
}
.crn-schedule__phase {
	padding: 12px 4px;
	border-left: 1px solid var(--crn-line);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
	text-align: center;
}
.crn-schedule__phase--prep {
	color: var(--crn-ink);
	background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(19, 42, 53, .05) 6px 7px);
}
.crn-schedule__phase--finish { color: var(--crn-accent); background: var(--crn-accent-soft); }
.crn-schedule__row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
	border-bottom: 1px solid var(--crn-line);
}
.crn-schedule__row:last-child { border-bottom: 0; }
.crn-schedule__text {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 4px 16px;
	padding: 24px 24px 24px 0;
}
.crn-schedule__step {
	grid-row: span 2;
	padding-top: 3px;
	color: var(--crn-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.crn-schedule__text h3 { color: var(--crn-ink); font-size: 18px; font-weight: 700; line-height: 1.5; }
.crn-schedule__text p { color: var(--crn-muted); font-size: 14px; line-height: 1.8; }
.crn-schedule__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: center;
	border-left: 1px solid var(--crn-line);
	background-image: linear-gradient(90deg, var(--crn-line) 1px, transparent 1px);
	background-size: 20% 100%;
	background-position: -1px 0;
}
.crn-schedule__bar {
	grid-column: var(--crn-step) / span 1;
	height: 14px;
	margin: 0 10%;
	background: var(--crn-ink);
}
.crn-schedule__row--finish .crn-schedule__bar { background: var(--crn-accent); }
.crn-schedule__row--finish .crn-schedule__text h3 { color: var(--crn-accent); }
.crn-schedule__note {
	margin-top: 28px;
	color: var(--crn-ink);
	font-weight: 700;
}

/* ==========================================================================
   05 Approach
   ========================================================================== */
.crn-approach__body {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: start;
}
.crn-approach__text > p + p,
.crn-approach__text > ul + p { margin-top: 20px; }
.crn-approach__questions {
	margin-top: 20px;
	padding: 8px 0;
	border-top: 1px solid var(--crn-line-strong);
	border-bottom: 1px solid var(--crn-line-strong);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
}
.crn-approach__questions li {
	padding: 10px 0;
	color: var(--crn-ink);
	font-size: clamp(17px, 1.8vw, 20px);
	font-weight: 700;
	line-height: 1.5;
}
.crn-compare {
	padding: 28px 28px 12px;
	border: 1px solid var(--crn-ink);
	background: var(--crn-white);
}
.crn-compare__title {
	margin-bottom: 8px;
	color: var(--crn-ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
}
.crn-compare__list > div {
	padding: 16px 0;
	border-top: 1px solid var(--crn-line);
}
.crn-compare__list dt {
	color: var(--crn-muted);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}
.crn-compare__list dt::after { content: " との違い"; font-weight: 400; }
.crn-compare__list dd { margin-top: 4px; color: var(--crn-ink); font-weight: 700; line-height: 1.7; }

/* ==========================================================================
   06 支援領域
   ========================================================================== */
.crn-areas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 2px solid var(--crn-ink);
	border-left: 1px solid var(--crn-line);
}
.crn-area {
	position: relative;
	padding: clamp(28px, 3.4vw, 40px);
	border-right: 1px solid var(--crn-line);
	border-bottom: 1px solid var(--crn-line);
}
.crn-area__no {
	display: block;
	margin-bottom: 14px;
	color: var(--crn-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
}
.crn-area h3 { color: var(--crn-ink); font-size: 22px; font-weight: 700; line-height: 1.5; }
.crn-area p { margin-top: 10px; color: var(--crn-muted); font-size: 14px; line-height: 1.8; }
.crn-area ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
.crn-area li {
	padding: 4px 12px;
	border: 1px solid var(--crn-line-strong);
	color: var(--crn-ink);
	font-size: 13px;
	line-height: 1.6;
}

/* ==========================================================================
   07 建設業への理解
   ========================================================================== */
.crn-understand {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: start;
}
.crn-understand__intro > p + p { margin-top: 16px; }
.crn-understand__photo { margin-top: 32px; }
.crn-understand__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.crn-understand__termsTitle {
	padding-bottom: 12px;
	border-bottom: 2px solid var(--crn-ink);
	color: var(--crn-ink);
	font-weight: 700;
}
.crn-terms > div {
	display: grid;
	grid-template-columns: 13em minmax(0, 1fr);
	gap: 4px 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--crn-line);
}
.crn-terms dt { color: var(--crn-ink); font-weight: 700; line-height: 1.6; }
.crn-terms dd { color: var(--crn-muted); font-size: 14px; line-height: 1.8; }

/* ==========================================================================
   08 BEFORE / AFTER
   ========================================================================== */
.crn-ba {
	display: grid;
	grid-template-columns: minmax(0, .8fr) 56px minmax(0, 1.2fr);
	align-items: stretch;
}
.crn-ba__before,
.crn-ba__after { padding: clamp(24px, 3vw, 36px); }
.crn-ba__before {
	border: 1px dashed var(--crn-line-strong);
	background: var(--crn-paper);
}
.crn-ba__after { border: 1px solid var(--crn-ink); background: var(--crn-white); }
.crn-ba__tag {
	display: inline-block;
	margin-bottom: 16px;
	padding: 2px 10px;
	border: 1px solid var(--crn-muted);
	color: var(--crn-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
}
.crn-ba__tag--after { border-color: var(--crn-accent); background: var(--crn-accent); color: #fff; }
.crn-ba__caption { color: var(--crn-muted); font-size: 13px; font-weight: 700; }
.crn-ba__before ul { margin-top: 8px; }
.crn-ba__before li {
	padding: 8px 0;
	border-bottom: 1px solid var(--crn-line);
	color: var(--crn-text);
}
.crn-ba__before li::before { content: "・"; }
.crn-ba__comment { margin-top: 18px; color: var(--crn-muted); font-size: 14px; line-height: 1.8; }
.crn-ba__arrow { position: relative; }
.crn-ba__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 12px;
	right: 14px;
	height: 1px;
	background: var(--crn-ink);
}
.crn-ba__arrow::after {
	content: "";
	position: absolute;
	top: calc(50% - 5px);
	right: 14px;
	width: 10px;
	height: 10px;
	border-top: 1px solid var(--crn-ink);
	border-right: 1px solid var(--crn-ink);
	transform: rotate(45deg);
}
.crn-ba__lead { color: var(--crn-ink); font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.6; }
.crn-ba__map { margin-top: 20px; }
.crn-ba__map th,
.crn-ba__map td {
	padding: 12px 0;
	border-bottom: 1px solid var(--crn-line);
	text-align: left;
	vertical-align: top;
	line-height: 1.7;
}
.crn-ba__map thead th {
	padding-top: 0;
	border-bottom: 1px solid var(--crn-ink);
	color: var(--crn-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
}
.crn-ba__map tbody th {
	width: 8.5em;
	padding-right: 16px;
	color: var(--crn-ink);
	font-weight: 700;
	white-space: nowrap;
}
.crn-ba__map tbody th::after { content: "\00a0→"; color: var(--crn-accent); }
.crn-ba__map td { color: var(--crn-text); font-size: 15px; }

/* ==========================================================================
   09 実績
   ========================================================================== */
.crn-case {
	border: 1px solid var(--crn-ink);
	background: var(--crn-white);
}
.crn-case__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	padding: 24px clamp(20px, 3vw, 36px);
	border-bottom: 1px solid var(--crn-line);
}
.crn-case__meta { flex: 1 0 100%; color: var(--crn-muted); font-size: 13px; font-weight: 700; }
.crn-case__head h3 { color: var(--crn-ink); font-size: 22px; font-weight: 700; line-height: 1.5; }
.crn-case__private { padding: 1px 8px; border: 1px solid var(--crn-line-strong); color: var(--crn-muted); font-size: 12px; }
.crn-case__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.crn-case__grid > div { padding: 24px clamp(20px, 3vw, 36px) 28px; }
.crn-case__grid > div + div { border-left: 1px solid var(--crn-line); }
.crn-case h4 {
	margin-bottom: 10px;
	color: var(--crn-ink);
	font-size: 15px;
	font-weight: 700;
}
.crn-case p,
.crn-case li { color: var(--crn-text); font-size: 14px; line-height: 1.8; }
.crn-case li { position: relative; padding-left: 1em; }
.crn-case li + li { margin-top: 6px; }
.crn-case li::before { content: "・"; position: absolute; left: 0; }

.crn-works { margin-top: clamp(48px, 6vw, 72px); }
.crn-works__title {
	padding-bottom: 12px;
	border-bottom: 2px solid var(--crn-ink);
	color: var(--crn-ink);
	font-size: 18px;
	font-weight: 700;
}
.crn-works__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
}
.crn-works__list li { border-bottom: 1px solid var(--crn-line); }
.crn-works__list a {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 0;
	color: var(--crn-ink);
	text-decoration: none;
}
.crn-works__list a:hover .crn-works__name { color: var(--crn-accent); text-decoration: underline; }
.crn-works__thumb { flex: 0 0 112px; }
.crn-works__thumb img { width: 112px; height: 84px; object-fit: cover; border: 1px solid var(--crn-line); }
.crn-works__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crn-works__industry { color: var(--crn-muted); font-size: 12px; line-height: 1.6; }
.crn-works__name { font-weight: 700; line-height: 1.5; }
.crn-works__region { color: var(--crn-muted); font-size: 12px; }

/* ==========================================================================
   10 Flow
   ========================================================================== */
.crn-flow {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border-top: 2px solid var(--crn-ink);
}
.crn-flow li {
	position: relative;
	padding: 24px 20px 28px 0;
}
.crn-flow li + li { padding-left: 20px; border-left: 1px solid var(--crn-line); }
.crn-flow__no {
	display: block;
	color: var(--crn-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
}
.crn-flow h3 { margin-top: 8px; color: var(--crn-ink); font-size: 17px; font-weight: 700; line-height: 1.5; }
.crn-flow p { margin-top: 8px; color: var(--crn-muted); font-size: 14px; line-height: 1.8; }
.crn-flow__more {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--crn-line);
	color: var(--crn-ink);
	font-weight: 700;
}
.crn-flow__more a { margin-left: .8em; color: var(--crn-accent); }
.crn-flow__more a::after { content: "\00a0→"; }

/* ==========================================================================
   11 For whom
   ========================================================================== */
.crn-forwhom {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: start;
}
.crn-forwhom__easy {
	margin-top: 20px;
	padding: 16px 18px;
	border-left: 3px solid var(--crn-accent);
	background: var(--crn-white);
	color: var(--crn-ink);
	font-weight: 700;
	line-height: 1.8;
}
.crn-checks--single { grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--crn-white); }
.crn-checks--single li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.crn-jobs { margin-top: 24px; color: var(--crn-muted); font-size: 14px; line-height: 1.9; }
.crn-jobs span { color: var(--crn-ink); font-weight: 700; }
.crn-next {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--crn-line);
}
.crn-next__title {
	margin-bottom: 10px;
	color: var(--crn-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}
.crn-next__list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 2px 20px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px dashed var(--crn-line-strong);
}
.crn-next__issue {
	color: var(--crn-muted);
	font-size: 13px;
	line-height: 1.6;
}
.crn-next__list a {
	color: var(--crn-blue);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}
.crn-next__list a::after {
	content: "\00a0→";
}
@media (max-width: 767px) {
	.crn-next__list li { grid-template-columns: minmax(0, 1fr); }
}
.crn-area-link {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--crn-line);
	color: var(--crn-text);
	font-size: 14px;
	line-height: 1.9;
}
.crn-area-link a { font-weight: 700; }

/* ==========================================================================
   12 資料請求
   ========================================================================== */
.crn-document {
	background-color: var(--crn-navy);
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 32px 32px;
	color: #d7e1e5;
	scroll-margin-top: 80px;
}
.crn-document__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: start;
}
.crn-document h2 {
	margin-bottom: 20px;
	color: #fff;
	font-size: clamp(26px, 3.1vw, 38px);
	font-weight: 700;
	line-height: 1.45;
}
.crn-document__listTitle {
	margin-top: 32px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	font-weight: 700;
}
.crn-document__list li {
	position: relative;
	padding: 11px 0 11px 28px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	line-height: 1.6;
}
.crn-document__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 18px;
	width: 10px;
	height: 6px;
	border-left: 2px solid #f0a57f;
	border-bottom: 2px solid #f0a57f;
	transform: rotate(-45deg);
}
.crn-document__easy { margin-top: 20px; color: #b9c9cf; font-size: 14px; }
.crn-document__form {
	padding: clamp(24px, 3.5vw, 40px);
	border-radius: var(--crn-radius);
	background: var(--crn-white);
	color: var(--crn-text);
}
.crn-document__formTitle { color: var(--crn-ink); font-size: clamp(17px, 2vw, 20px); font-weight: 700; line-height: 1.5; }
.crn-document__formLead { margin: 8px 0 20px; color: var(--crn-muted); font-size: 14px; line-height: 1.8; }
.crn-admin-note { margin-top: 16px; padding: 12px; background: #fff4d6; color: #5c4400; font-size: 13px; line-height: 1.7; }

/* Contact Form 7 の出力（.crn-cf7） */
.crn .crn-cf7 p { margin: 0 0 18px; }
.crn .crn-cf7 label,
.crn .crn-cf7 .crn-form__label {
	display: block;
	color: var(--crn-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}
.crn .crn-cf7 .crn-req,
.crn .crn-cf7 .crn-opt {
	display: inline-block;
	margin-left: 8px;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
	vertical-align: 1px;
}
.crn .crn-cf7 .crn-req { background: var(--crn-accent); color: #fff; }
.crn .crn-cf7 .crn-opt { border: 1px solid var(--crn-line-strong); color: var(--crn-muted); }
.crn .crn-cf7 input[type="text"],
.crn .crn-cf7 input[type="email"],
.crn .crn-cf7 input[type="tel"],
.crn .crn-cf7 select,
.crn .crn-cf7 textarea {
	width: 100%;
	min-height: 50px;
	margin-top: 6px;
	padding: 10px 14px;
	border: 1px solid var(--crn-line-strong);
	border-radius: var(--crn-radius);
	background: #fff;
	background-color: #fff !important; /* テーマ共通の入力欄背景(!important)を上書き */
	height: auto;
	color: var(--crn-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
}
.crn .crn-cf7 ::placeholder { color: #7a878c; opacity: 1; }
.crn .crn-cf7 textarea { min-height: 110px; }
.crn .crn-cf7 input:focus,
.crn .crn-cf7 select:focus,
.crn .crn-cf7 textarea:focus { outline: 2px solid var(--crn-blue); outline-offset: 1px; border-color: var(--crn-blue); }
.crn .crn-cf7 .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.crn .crn-cf7 .wpcf7-list-item { margin: 0; }
.crn .crn-cf7 .wpcf7-checkbox label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--crn-line-strong);
	border-radius: var(--crn-radius);
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
}
.crn .crn-cf7 input[type="checkbox"] { display: inline-block; width: 16px; height: 16px; margin: 0; padding: 0; flex: 0 0 auto; accent-color: var(--crn-accent); }
.crn .crn-cf7 .wpcf7-checkbox label { line-height: 1.5; }
.crn .crn-cf7 .wpcf7-acceptance label { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; font-size: 14px; }
.crn .crn-cf7 input[type="submit"] {
	width: 100%;
	min-height: 60px;
	margin-top: 4px;
	border: 0;
	border-radius: var(--crn-radius);
	background: var(--crn-accent);
	color: #fff;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .04em;
	box-shadow: none;
	cursor: pointer;
}
.crn .crn-cf7 input[type="submit"]:hover { background: var(--crn-accent-dark); }
.crn .crn-cf7 input[type="submit"]:disabled { opacity: .55; cursor: not-allowed; }
.crn .crn-cf7 .wpcf7-not-valid-tip { margin-top: 4px; font-size: 13px; }
.crn .crn-cf7 .wpcf7-response-output { margin: 16px 0 0; padding: 12px 14px; font-size: 14px; line-height: 1.7; }
.crn .crn-cf7 .crn-form__privacy { font-size: 13px; color: var(--crn-muted); }

/* ==========================================================================
   13 FAQ
   ========================================================================== */
.crn-faq__list { max-width: 880px; border-top: 2px solid var(--crn-ink); }
.crn-faq__item { border-bottom: 1px solid var(--crn-line); }
.crn-faq__q {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 48px 22px 0;
	color: var(--crn-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	cursor: pointer;
	list-style: none;
}
.crn-faq__q::-webkit-details-marker { display: none; }
.crn-faq__q::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 30px;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--crn-ink);
	border-bottom: 2px solid var(--crn-ink);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.crn-faq__item[open] > .crn-faq__q::after { top: 34px; transform: rotate(-135deg); }
.crn-faq__mark {
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--crn-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}
.crn-faq__mark--a { border-color: var(--crn-accent); background: var(--crn-accent); color: #fff; }
.crn-faq__a {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 0 0 24px;
}
.crn-faq__a p { color: var(--crn-text); line-height: 1.9; }

/* ---------- 関連コラム ---------- */
.crn-columns__list { max-width: 880px; border-top: 2px solid var(--crn-ink); }
.crn-columns__list li { border-bottom: 1px solid var(--crn-line); }
.crn-columns__list a {
	position: relative;
	display: block;
	padding: 18px 40px 18px 0;
	color: var(--crn-ink);
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
}
.crn-columns__list a::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}
.crn-columns__list a:hover { color: var(--crn-accent); }

/* ==========================================================================
   最終CTA
   ========================================================================== */
.crn-final {
	padding: clamp(80px, 10vw, 128px) 0;
	border-top: 1px solid var(--crn-line);
	background: var(--crn-white);
	text-align: center;
}
.crn-final__inner { max-width: 760px; }
.crn-final h2 {
	color: var(--crn-ink);
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 700;
	line-height: 1.45;
}
.crn-final__inner > p:not(.crn-final__sub) { margin: 20px auto 32px; color: var(--crn-muted); }
.crn-final__sub { margin-top: 20px; color: var(--crn-muted); font-size: 13px; }

/* ---------- 追従CTA ---------- */
.crn-float[hidden] { display: none; }
.crn-float {
	position: fixed;
	z-index: 60;
	right: 20px;
	bottom: 88px;
	transform: translateY(16px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.crn-float.is-visible { transform: none; opacity: 1; visibility: visible; }
.crn-float .crn-btn { min-height: 52px; padding: 12px 22px; font-size: 15px; box-shadow: 0 6px 18px rgba(15, 42, 54, .22); }

/* このページでは共通の「お問い合わせ / LINE」追従ボタンを資料請求に置き換える（ページトップは残す） */
.is-construction-recruitment .fixed-buttons .fixed-btn { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
	.crn-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
	.crn-journey::before { display: none; }
	.crn-journey__step { padding-right: 20px; }
	.crn-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.crn-flow li:nth-child(4) { padding-left: 0; border-left: 0; }
	.crn-flow li:nth-child(n+4) { border-top: 1px solid var(--crn-line); }
	.crn-terms > div { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.crn-hero__grid,
	.crn-approach__body,
	.crn-understand,
	.crn-forwhom,
	.crn-document__grid { grid-template-columns: minmax(0, 1fr); }
	.crn-hero__visual { max-width: 620px; }
	.crn-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.crn-problem-note { grid-template-columns: minmax(0, 1fr); }
	.crn-case__grid { grid-template-columns: minmax(0, 1fr); }
	.crn-case__grid > div + div { border-left: 0; border-top: 1px solid var(--crn-line); }
	.crn-works__list { grid-template-columns: minmax(0, 1fr); }
	.crn-ba { grid-template-columns: minmax(0, 1fr); }
	.crn-ba__arrow { height: 48px; }
	.crn-ba__arrow::before { top: 8px; bottom: 12px; left: 50%; right: auto; width: 1px; height: auto; }
	.crn-ba__arrow::after { top: auto; bottom: 12px; right: auto; left: calc(50% - 5px); transform: rotate(135deg); }
	.crn-toc .crn-wrap { display: block; padding-top: 14px; }
	.crn-toc__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; }
	.crn-toc__list::-webkit-scrollbar { display: none; }
	.crn-toc__list a { white-space: nowrap; padding: 10px 14px 14px; }
}

@media (max-width: 767px) {
	.crn { font-size: 15px; line-height: 1.85; }
	.crn-wrap { width: min(100% - 32px, var(--crn-wrap)); }
	.crn-br-sp { display: inline; }
	.crn-br-pc { display: none; }
	.crn-hero { padding-top: 36px; }
	.crn-hero__eyebrow { font-size: 12px; margin-bottom: 20px; }
	.crn-hero__titleMain { font-size: 40px; }
	.crn-hero__catch { font-size: 16px; margin-top: 22px; padding-left: 14px; }
	.crn-hero__lead { font-size: 14px; }
	.crn-hero__action .crn-btn { display: flex; width: 100%; }
	.crn-hero__visual { padding-bottom: 0; }
	.crn-hero__photo { margin-left: 14px; }
	.crn-hero__photo::before { inset: -10px -10px 10px 10px; }
	.crn-hero__sheet { position: relative; width: auto; margin: -28px 0 0 0; }
	.crn-hero__sheet ol { display: flex; flex-wrap: wrap; gap: 2px 14px; }
	.crn-hero__sheet li { padding: 2px 0; }
	.crn-hero__sheet li.is-finish { flex: 1 0 100%; }

	.crn-checks,
	.crn-checks--single { grid-template-columns: minmax(0, 1fr); }
	.crn-checks li { padding: 16px 16px 16px 50px; }
	.crn-checks li::before { left: 18px; top: 20px; }
	.crn-checks li::after { left: 23px; top: 21px; }

	.crn-journey { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.crn-journey__step {
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr);
		column-gap: 16px;
		padding: 0 0 28px;
	}
	.crn-journey__step::before {
		content: "";
		position: absolute;
		left: 17px;
		top: 36px;
		bottom: 0;
		width: 1px;
		background: var(--crn-ink);
	}
	.crn-journey__step:last-child::before { display: none; }
	.crn-journey__no { grid-row: span 3; }
	.crn-journey__step h3 { margin-top: 5px; }
	.crn-journey__drop { grid-column: 2; }
	.crn-journey__see { grid-column: 2; }
	.crn-split-note { padding: 22px 20px; }

	.crn-cta-bar { flex-direction: column; align-items: stretch; padding: 22px 20px; text-align: center; }
	.crn-cta-bar .crn-btn { width: 100%; }

	.crn-schedule__header { display: none; }
	.crn-schedule__row { grid-template-columns: minmax(0, 1fr); }
	.crn-schedule__text { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
	.crn-schedule__step { grid-row: auto; display: flex; align-items: center; gap: 8px; }
	.crn-schedule__step::after {
		content: "段取り";
		padding: 0 6px;
		border: 1px solid var(--crn-line-strong);
		color: var(--crn-muted);
		font-size: 11px;
		letter-spacing: .04em;
	}
	.crn-schedule__row--finish .crn-schedule__step::after { content: "仕上工事"; border-color: var(--crn-accent); background: var(--crn-accent); color: #fff; }
	.crn-schedule__track { display: none; }
	.crn-schedule__text h3 { font-size: 17px; }

	.crn-approach__questions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
	.crn-approach__questions li { font-size: 16px; }
	.crn-compare { padding: 22px 20px 6px; }

	.crn-areas { grid-template-columns: minmax(0, 1fr); }
	.crn-area h3 { font-size: 20px; }

	.crn-terms > div { padding: 14px 0; }

	.crn-ba__map tbody th { width: 6.5em; padding-right: 10px; }
	.crn-ba__map td { font-size: 14px; }

	.crn-works__thumb { flex-basis: 88px; }
	.crn-works__thumb img { width: 88px; height: 66px; }

	.crn-flow { grid-template-columns: minmax(0, 1fr); }
	.crn-flow li,
	.crn-flow li + li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding: 18px 0; border-left: 0; border-top: 1px solid var(--crn-line); }
	.crn-flow li:first-child { border-top: 0; }
	.crn-flow__no { grid-row: span 2; padding-top: 3px; }
	.crn-flow h3 { margin-top: 0; }
	.crn-flow p { grid-column: 2; margin-top: 2px; }
	.crn-flow__more a { display: inline-block; margin: 6px 0 0; }

	.crn-faq__q { font-size: 15px; gap: 12px; padding-right: 36px; }
	.crn-faq__a { gap: 12px; }

	.crn-final__inner .crn-btn { display: flex; width: 100%; font-size: 16px; padding: 16px 20px; }

	/* 追従CTAはスマホでは画面下の帯にする */
	.crn-float {
		left: 0;
		right: 0;
		bottom: 0;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--crn-line);
		transform: translateY(100%);
	}
	.crn-float .crn-btn { display: flex; width: 100%; box-shadow: none; }
	.crn-btn { padding-left: 16px; padding-right: 16px; letter-spacing: .02em; }
	.crn-cta-bar .crn-btn::after,
	.crn-hero__action .crn-btn::after { display: none; }
	.is-construction-recruitment .fixed-buttons { bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
	.crn *,
	.crn *::before,
	.crn *::after { transition: none !important; scroll-behavior: auto !important; }
}

html:has(.crn) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.crn) { scroll-behavior: auto; } }
.crn [id] { scroll-margin-top: 90px; }