@charset "utf-8";

/* ============================================================
 * ci-design.css — 株式会社キャップインフォ 新デザイン
 * SPEC.md / README.md 準拠
 * 既存style.css と共存（後勝ちで上書き）
 * ============================================================ */

/* Body opt-in：body.ci でページ全体に新デザインを適用 */
body.ci {
	margin: 0;
	padding: 0;
	background: var(--ci-bg);
	color: var(--ci-body);
	font-family: var(--ci-font);
	font-size: 13px;
	line-height: 1.85;
	-webkit-text-size-adjust: 100%;
}
body.ci a { color: inherit; text-decoration: none; }
body.ci img { max-width: 100%; height: auto; display: block; }
body.ci ul { list-style: none; margin: 0; padding: 0; }
body.ci h1, body.ci h2, body.ci h3, body.ci h4, body.ci h5, body.ci p { margin: 0; padding: 0; }

/* Component-scoped reset：body.ci がない既存ページのヘッダー/フッターでも崩れないように */
.ci-header, .ci-header *,
.ci-nav-band, .ci-nav-band *,
.ci-footer, .ci-footer *,
.ci-pagetop, .ci-pagetop * {
	box-sizing: border-box;
	font-family: var(--ci-font);
}
.ci-header a, .ci-nav-band a, .ci-footer a { text-decoration: none; }
.ci-header ul, .ci-nav-band ul, .ci-footer ul { list-style: none; margin: 0; padding: 0; }
.ci-header h1, .ci-header h2, .ci-header h3, .ci-footer h1, .ci-footer h2, .ci-footer h3, .ci-footer h4, .ci-footer p { margin: 0; padding: 0; }
.ci-header img, .ci-footer img { display: block; max-width: 100%; height: auto; }

/* ============================================================
 * CommonHeader（SPEC §2.1）
 * ============================================================ */

.ci-header {
	background: radial-gradient(600px at 20% -100px, #FFFBF8, #F4DEAE);
	border-bottom: 1px solid var(--ci-border);
	padding: 0 56px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ci-header-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}
body.ci .ci-header-logo-img {
	display: block;
	height: 72px;
	width: auto;
	max-width: none;
	object-fit: contain;
}
.ci-header-logo-text {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	color: var(--ci-ink);
	font-family: var(--ci-font);
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	line-height: 1;
}
.ci-header-logo-text-co {
	font-size: 16px;
	font-weight: 500;
}
.ci-header-logo-text-name {
	font-size: 22px;
}

@media (max-width: 768px) {
	.ci-header { padding: 4px 16px; }
	.ci-header-logo-link { gap: 8px; }
	body.ci .ci-header-logo-img { height: 44px; }
	.ci-header-logo-text-co { font-size: 11px; }
	.ci-header-logo-text-name { font-size: 15px; }
}
.ci-header-isms {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	margin-right: 20px;
}
body.ci .ci-header-isms img {
	display: block;
	height: 56px;
	width: auto;
	max-width: none;
}
.ci-header-right {
	text-align: right;
	font-size: 11px;
	color: var(--ci-body-soft);
	line-height: 1.7;
}
@media (max-width: 768px) {
	.ci-header-isms { display: none; }
}

/* ナビ帯（白背景 / スクロール時に上部固定） */
.ci-nav-band {
	background: #fff;
	border-top: 1px solid var(--ci-border);
	border-bottom: 1px solid var(--ci-border);
	padding: 0 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ci-nav-band ul {
	display: flex;
	gap: 40px;
}
.ci-nav-band ul li a {
	position: relative;
	display: block;
	padding: 20px 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--ci-ink);
	transition: color 0.25s ease;
}
.ci-nav-band ul li a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 3px;
	background: var(--ci-orange);
	transform: translateX(-50%);
	transition: width 0.25s ease;
}
.ci-nav-band ul li a:hover { color: var(--ci-orange); }
.ci-nav-band ul li a:hover::after { width: 100%; }
.ci-nav-band ul li a.is-current { color: var(--ci-orange); }
.ci-nav-band ul li a.is-current::after { width: 100%; }

/* ハンバーガー（SP） */
.ci-nav-burger {
	display: none;
	padding: 12px 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.ci-nav-burger span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--ci-ink);
	margin: 4px 0;
}

/* モバイル */
@media (max-width: 768px) {
	.ci-header { padding: 10px 16px; }
	body.ci .ci-header-logo-img { height: 44px; }
	.ci-header-right { display: none; }
	.ci-nav-band { padding: 0 4px; justify-content: center; }
	.ci-nav-band ul {
		display: flex;
		flex-wrap: nowrap;       /* 折り返さず1行に固定 */
		justify-content: center;
		gap: 0;
		width: 100%;
	}
	.ci-nav-band ul li { flex: 1 1 0; min-width: 0; } /* 7項目を均等割りで縮める */
	.ci-nav-band ul li a {
		display: block;
		padding: 12px 2px;
		/* 画面幅に応じて縮小し、iPhone SE(375px)〜小型(320px)でも1行に収める */
		font-size: clamp(10px, 2.8vw, 13px);
		letter-spacing: 0;
		text-align: center;
		white-space: nowrap;
	}
	.ci-nav-band ul li a::after { display: none; }
	.ci-nav-burger { display: none; }
}

/* ============================================================
 * CommonFooter（SPEC §2.2）
 * ============================================================ */

.ci-footer {
	background: var(--ci-ink);
	color: rgba(255,255,255,0.7);
	padding: 56px 56px 28px;
	font-size: 12px;
	border-top: 4px solid var(--ci-orange);
}
.ci-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 56px;
	margin-bottom: 36px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.ci-footer-bottom {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.ci-footer h4 {
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 12px;
}
.ci-footer-brand {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 10px;
}
.ci-footer-addr {
	font-size: 11.5px;
	line-height: 1.85;
	color: rgba(255,255,255,0.6);
}
.ci-footer-isms {
	margin-top: 16px;
	background: #fff;
	display: inline-block;
	padding: 6px 8px;
}
body.ci .ci-footer-isms img {
	display: block;
	height: 48px;
	width: auto;
	max-width: none;
}
.ci-footer ul li {
	font-size: 11.5px;
	color: rgba(255,255,255,0.7);
	margin-bottom: 8px;
}
.ci-footer ul li a:hover { color: #fff; }
.ci-footer-bottom {
	padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,0.15);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 10.5px;
	color: rgba(255,255,255,0.5);
}

@media (max-width: 768px) {
	.ci-footer { padding: 32px 20px 20px; }
	.ci-footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * PageTop（ページトップへ戻るボタン） — 全ページ右下に固定
 * ============================================================ */

.ci-pagetop {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: var(--ci-orange);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(232,115,28,0.35);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
}
.ci-pagetop:hover { background: var(--ci-orange-deep); }
.ci-pagetop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ci-pagetop svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
	.ci-pagetop { bottom: 16px; right: 16px; width: 44px; height: 44px; }
	.ci-pagetop svg { width: 18px; height: 18px; }
}

/* ============================================================
 * トップページ：Hero / Link Cards / Topics（SPEC §3.1）
 * ============================================================ */

.ci-main { background: var(--ci-bg); }

/* --- Banner（横幅いっぱいのトップバナー） --- */
.ci-banner {
	padding: 0;
	margin: 0;
}
body.ci .ci-banner img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: cover;
	object-position: center;
	max-width: none;
}

/* --- Lead（バナー下の説明テキスト） --- */
.ci-lead {
	padding: 72px 56px 40px;
	max-width: 1040px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
/* 説明文の上にあった装飾オレンジ線は削除 */
.ci-lead-headline {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--ci-ink);
	margin: 0 auto 22px;
	max-width: 780px;
}
.ci-lead-headline .ci-em { color: var(--ci-orange); }
.ci-lead-desc + .ci-lead-desc { margin-top: 1.8em; }
.ci-lead-desc:last-of-type { margin-bottom: 0; }
.ci-lead-desc {
	font-size: 16.5px;
	line-height: 1.95;
	color: var(--ci-ink);
	margin: 0 auto;
	max-width: 880px;
	letter-spacing: 0.05em;
	text-align: left;
	font-weight: 500;
	/* 日本語の読みやすさ向上 */
	font-feature-settings: "palt" 1;
	text-spacing-trim: trim-start;
	word-break: auto-phrase;
	line-break: strict;
	text-wrap: pretty;
	hanging-punctuation: allow-end;
}
/* ABOUT US ヘッダーに会社紹介文を含めるリッチ版 */
.ci-section-head--rich {
	padding-bottom: 36px;
}
.ci-section-head--rich h2 {
	margin-bottom: 8px;
}
.ci-section-head-desc {
	max-width: 880px;
	margin: 26px auto 0;
	font-size: 16px;
	line-height: 1.95;
	color: var(--ci-ink);
	letter-spacing: 0.05em;
	text-align: left;
	font-weight: 500;
	word-break: auto-phrase;
	line-break: strict;
	text-wrap: pretty;
}
@media (max-width: 768px) {
	.ci-section-head-desc { font-size: 13.5px; padding: 0 8px; }
}

/* リード全体をカード化（PICKUP CASE と同系の白カード + オレンジ左罫線） */
.ci-lead-card {
	max-width: 1080px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--ci-border);
	border-left: 6px solid var(--ci-orange);
	padding: 48px 56px;
}
.ci-lead-card .ci-lead-desc { max-width: 100%; }
.ci-lead-card .ci-lead-catch { max-width: 100%; }
/* 1段落目（会社紹介）は少し大きめに見せて視線を引き込む */
.ci-lead-desc:first-of-type {
	font-size: 17.5px;
	line-height: 2.0;
	max-width: 880px;
}
@media (max-width: 768px) {
	.ci-lead-card { padding: 28px 22px; }
}
.ci-lead-desc br {
	content: "";
	display: block;
	margin-top: 0.45em;
}
/* 強調：主要キーワード（事業の主軸・求人） */
.ci-lead-desc .ci-em {
	color: var(--ci-orange);
	font-weight: 700;
	letter-spacing: 0.04em;
}
/* 重要だがオレンジを使わない箇所（社名・能力訴求） */
.ci-lead-desc .ci-keep {
	color: var(--ci-ink);
	font-weight: 700;
	letter-spacing: 0.04em;
}
/* 拠点（地名）— 細めに囲み線でロケーション感 */
.ci-lead-desc .ci-loc {
	color: var(--ci-ink);
	font-weight: 600;
	padding: 1px 4px;
	background: rgba(232,115,28,0.08);
	border-bottom: 1px solid rgba(232,115,28,0.35);
}
/* 技術タグ — 下線でキーワード強調 */
.ci-lead-desc .ci-tag {
	color: var(--ci-ink);
	font-weight: 600;
	padding: 0 2px;
	background: linear-gradient(to bottom, transparent 60%, rgba(232,115,28,0.18) 60%);
}
/* 画面幅で出し分ける改行 */
.ci-sp-br { display: none; }
@media (max-width: 768px) {
	.ci-sp-br { display: inline; }
}

/* --- 大見出し＋本文型リード（私たちについて） --- */
.ci-statement {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 80px;
	align-items: start;
	padding: 0 24px;
}
.ci-statement-left {
	position: sticky;
	top: 24px;
	text-align: left;
}
body.ci .ci-statement-eyebrow {
	display: block;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3em;
	color: var(--ci-orange);
	margin-bottom: 24px;
	text-align: left;
}
body.ci .ci-statement-title {
	margin: 0 0 28px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.04em;
	color: var(--ci-ink);
	text-align: left;
}
body.ci .ci-statement-line {
	display: block;
}
body.ci .ci-statement-line--accent {
	color: var(--ci-orange-deep);
	position: relative;
}
.ci-statement-rule {
	display: block;
	width: 60px;
	height: 3px;
	background: var(--ci-orange);
	margin: 0 0 20px;
}
body.ci .ci-statement-meta {
	margin: 0;
	padding: 0;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.9;
	color: var(--ci-mute);
	text-align: left;
}
.ci-statement-right {
	padding-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
body.ci .ci-statement-text {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	color: var(--ci-body);
	font-weight: 500;
	text-align: left;
	word-break: auto-phrase;
	line-break: strict;
	text-wrap: pretty;
}
body.ci .ci-statement-text:first-child {
	font-size: 17px;
	color: var(--ci-ink);
}
.ci-statement-text .ci-keep {
	color: var(--ci-ink);
	font-weight: 700;
}
.ci-statement-text .ci-loc {
	color: var(--ci-ink);
	font-weight: 700;
}
@media (max-width: 1024px) {
	.ci-statement {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 0 20px;
	}
	.ci-statement-left { position: static; }
	body.ci .ci-statement-title { font-size: 30px; }
}
@media (max-width: 768px) {
	body.ci .ci-statement-title { font-size: 26px; line-height: 1.5; margin-bottom: 20px; }
	body.ci .ci-statement-eyebrow { font-size: 11px; margin-bottom: 16px; }
	body.ci .ci-statement-text { font-size: 14px; line-height: 1.95; letter-spacing: 0.03em; }
	body.ci .ci-statement-text:first-child { font-size: 14.5px; }
	.ci-statement-rule { width: 48px; height: 2px; margin-bottom: 16px; }
	body.ci .ci-statement-meta { font-size: 12px; }
}

/* --- ストーリーブロック型リード（私たちについて） --- */
.ci-story-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.ci-story-block {
	position: relative;
	background: #fff;
	border: 1px solid var(--ci-border);
	border-top: 4px solid var(--ci-orange);
	padding: 40px 32px 36px;
	text-align: left;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ci-story-block:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(232,115,28,0.12);
}
.ci-story-block:nth-child(2) {
	border-top-color: var(--ci-orange-soft);
}
.ci-story-block:nth-child(3) {
	border-top-color: var(--ci-orange-deep);
}
.ci-story-icon {
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	color: var(--ci-orange);
	background: rgba(232,115,28,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}
.ci-story-icon svg {
	width: 100%;
	height: 100%;
}
.ci-story-block:nth-child(2) .ci-story-icon { color: var(--ci-orange-soft); }
.ci-story-block:nth-child(3) .ci-story-icon { color: var(--ci-orange-deep); }

body.ci .ci-story-tag {
	display: inline-block;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--ci-orange);
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--ci-orange);
}
.ci-story-block:nth-child(2) .ci-story-tag {
	color: var(--ci-orange-soft);
	border-bottom-color: var(--ci-orange-soft);
}
.ci-story-block:nth-child(3) .ci-story-tag {
	color: var(--ci-orange-deep);
	border-bottom-color: var(--ci-orange-deep);
}
body.ci .ci-story-title {
	margin: 8px 0 18px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ci-ink);
	line-height: 1.5;
	text-align: left;
}
body.ci .ci-story-text {
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.95;
	letter-spacing: 0.04em;
	color: var(--ci-body);
	font-weight: 500;
	text-align: left;
	word-break: auto-phrase;
	line-break: strict;
	text-wrap: pretty;
}
.ci-story-text .ci-keep {
	color: var(--ci-ink);
	font-weight: 700;
}
.ci-story-text .ci-loc {
	color: var(--ci-ink);
	font-weight: 600;
	padding: 1px 4px;
	background: rgba(232,115,28,0.08);
	border-bottom: 1px solid rgba(232,115,28,0.35);
}
@media (max-width: 1024px) {
	.ci-story-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 0 16px;
	}
	body.ci .ci-story-title { font-size: 18px; }
	body.ci .ci-story-text { font-size: 13.5px; line-height: 1.9; }
	.ci-story-block { padding: 28px 24px 24px; }
	.ci-story-icon { width: 48px; height: 48px; padding: 10px; }
}

/* --- タイムライン型リード（旧／未使用） --- */
.ci-timeline {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 900px;
	position: relative;
	text-align: left;
}
/* 縦のガイドライン */
.ci-timeline::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 24px;
	bottom: 24px;
	width: 2px;
	background: linear-gradient(
		to bottom,
		var(--ci-orange) 0%,
		var(--ci-orange-soft) 100%
	);
}
.ci-timeline-item {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 0;
	padding: 0 0 40px;
	align-items: start;
}
.ci-timeline-item:last-child {
	padding-bottom: 0;
}
.ci-timeline-marker {
	position: relative;
	width: 36px;
	height: 36px;
	margin-top: 6px;
}
.ci-timeline-dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	background: var(--ci-orange);
	border: 5px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--ci-orange), 0 2px 8px rgba(232,115,28,0.25);
	z-index: 1;
}
.ci-timeline-item:nth-child(2) .ci-timeline-dot {
	background: var(--ci-orange-soft);
	box-shadow: 0 0 0 2px var(--ci-orange-soft), 0 2px 8px rgba(232,115,28,0.18);
}
.ci-timeline-item:nth-child(3) .ci-timeline-dot {
	background: #fff;
	box-shadow: 0 0 0 2px var(--ci-orange), 0 2px 8px rgba(232,115,28,0.15);
}
.ci-timeline-body {
	padding-left: 12px;
	padding-bottom: 4px;
	text-align: left;
}
body.ci .ci-timeline-num {
	display: inline-block;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--ci-orange);
	margin-bottom: 6px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--ci-orange);
	text-align: left;
}
body.ci .ci-timeline-title {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--ci-ink);
	line-height: 1.4;
	text-align: left;
}
body.ci .ci-timeline-text {
	margin: 0;
	padding: 0;
	font-size: 15.5px;
	line-height: 2.0;
	letter-spacing: 0.04em;
	color: var(--ci-body);
	font-weight: 500;
	text-align: left;
	word-break: auto-phrase;
	line-break: strict;
	text-wrap: pretty;
}
.ci-timeline-text .ci-keep {
	color: var(--ci-ink);
	font-weight: 700;
}
.ci-timeline-text .ci-loc {
	color: var(--ci-ink);
	font-weight: 600;
	padding: 1px 4px;
	background: rgba(232,115,28,0.08);
	border-bottom: 1px solid rgba(232,115,28,0.35);
}
@media (max-width: 768px) {
	.ci-timeline {
		max-width: 100%;
		padding: 0 16px;
	}
	.ci-timeline::before {
		left: 29px;
		top: 18px;
		bottom: 18px;
	}
	.ci-timeline-item {
		grid-template-columns: 44px 1fr;
		padding-bottom: 32px;
	}
	.ci-timeline-marker {
		width: 28px;
		height: 28px;
		margin-top: 4px;
	}
	.ci-timeline-dot {
		left: 0;
		top: 0;
		width: 28px;
		height: 28px;
		border-width: 4px;
	}
	.ci-timeline-body {
		padding-left: 6px;
	}
	body.ci .ci-timeline-num {
		font-size: 11px;
		margin-bottom: 4px;
	}
	body.ci .ci-timeline-title {
		font-size: 17px;
		margin-bottom: 10px;
	}
	body.ci .ci-timeline-text {
		font-size: 13.5px;
		line-height: 1.95;
		letter-spacing: 0.03em;
	}
}

/* キャッチコピー（リード内） */
body.ci .ci-lead-catch {
	margin: 36px auto 0;
	padding: 24px 28px;
	max-width: 880px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--ci-orange-deep);
	background: #fff;
	border-top: 2px solid var(--ci-orange);
	border-bottom: 2px solid var(--ci-orange);
}
body.ci .ci-lead-closing {
	margin-top: 12px;
	line-height: 1.85;
}

@media (max-width: 768px) {
	.ci-lead { padding: 40px 20px 24px; }
	.ci-lead::before { margin-bottom: 20px; }
	.ci-lead-headline { font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
	.ci-lead-desc { font-size: 13px; line-height: 2.0; letter-spacing: 0.03em; }
	body.ci .ci-lead-catch { font-size: 17px; padding: 24px 16px; margin: 28px auto; letter-spacing: 0.04em; line-height: 1.7; }
	body.ci .ci-lead-closing { line-height: 1.85; margin-top: 22px; }
}

/* --- Hero（旧2カラム、現在は未使用） --- */
.ci-hero {
	padding: 48px 56px;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
}
.ci-hero-caption {
	font-size: 11px;
	color: var(--ci-mute);
	letter-spacing: 0.2em;
	margin: 0 0 16px;
}
.ci-hero-title {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: var(--ci-ink);
	margin: 0 0 20px;
}
.ci-hero-title .ci-em { color: var(--ci-orange); }
.ci-hero-line {
	display: block;
	width: 50px;
	height: 3px;
	background: var(--ci-orange);
	margin: 0 0 20px;
}
.ci-hero-desc {
	font-size: 13.5px;
	line-height: 2.0;
	color: var(--ci-body-soft);
	max-width: 480px;
	margin: 0;
}
.ci-hero-right { width: 100%; }
.ci-hero-right img {
	width: 100%;
	height: 320px;
	object-fit: cover;
}

@media (max-width: 768px) {
	.ci-hero { padding: 32px 20px; grid-template-columns: 1fr; gap: 24px; }
	.ci-hero-title { font-size: 24px; }
	.ci-hero-desc { font-size: 12.5px; }
	.ci-hero-right img { height: 200px; }
}

/* --- セクション共通の見出し --- */
.ci-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 56px 56px;
}
/* 偶数セクション（事業内容など）はクリーム背景 */
.ci-business-section {
	background: var(--ci-bg2);
	max-width: none;
	padding: 64px 56px 56px;
}
.ci-business-section > .ci-section-head,
.ci-business-section > .ci-link-cards {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.ci-section-head {
	text-align: center;
	margin-bottom: 36px;
}
.ci-section-head .ci-en-sub {
	display: block;
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--ci-mute);
	margin-bottom: 6px;
}
.ci-section-head h2 {
	font-size: 26px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
	margin: 0;
	display: inline-block;
	position: relative;
}
.ci-section-head h2::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: var(--ci-orange);
	margin: 12px auto 0;
}
.ci-section-head h2 a {
	color: inherit;
	text-decoration: none;
}
.ci-section-head h2 a:hover { color: var(--ci-orange); }
.ci-section-head .ci-section-line { display: none; }
@media (max-width: 768px) {
	.ci-section { padding: 24px 20px 8px; }
	.ci-section-head h2 { font-size: 20px; }
}

/* --- Link Cards --- */
.ci-link-cards {
	padding: 8px 56px 32px;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.ci-link-cards--3 { grid-template-columns: repeat(3, 1fr); }
.ci-business-section .ci-link-cards { padding: 0; }
.ci-link-card {
	background: var(--ci-card);
	color: var(--ci-ink);
	border: 1px solid var(--ci-border);
	padding: 0;
	min-height: 240px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ci-link-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.ci-link-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 22px rgba(232,115,28,0.18);
	border-color: var(--ci-orange);
}
.ci-link-card.is-emphasis {
	background: var(--ci-orange);
	color: #fff;
	border-color: var(--ci-orange);
}
.ci-link-card--no-img .ci-link-card-body {
	padding: 32px 22px;
	justify-content: center;
	min-height: 240px;
}
.ci-link-card-fig {
	margin: 0;
	width: 100%;
	height: 140px;
	overflow: hidden;
	background: var(--ci-bg2);
}
body.ci .ci-link-card-fig img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.ci-link-card:hover .ci-link-card-fig img {
	transform: scale(1.06);
}
.ci-link-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.ci-link-card .ci-en {
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--ci-mute);
	margin-bottom: 4px;
}
.ci-link-card.is-emphasis .ci-en { color: rgba(255,255,255,0.85); }
.ci-link-card h3 {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	color: inherit;
	line-height: 1.4;
}
.ci-link-card.is-emphasis .ci-link-card-body { padding: 28px 22px; justify-content: center; }
.ci-link-card.is-emphasis h3 { font-size: 22px; }
.ci-link-card p {
	font-size: 11.5px;
	line-height: 1.7;
	margin: 0 0 auto;
	color: inherit;
	opacity: 0.92;
}
.ci-link-card .ci-arrow {
	font-size: 12px;
	font-weight: 600;
	color: var(--ci-orange);
	margin-top: 12px;
	display: inline-block;
	transition: transform 0.25s ease;
}
.ci-link-card:hover .ci-arrow { transform: translateX(4px); }
.ci-link-card.is-emphasis .ci-arrow { color: #fff; }

@media (max-width: 768px) {
	.ci-link-cards { padding: 8px 20px 24px; grid-template-columns: 1fr 1fr; gap: 10px; }
	.ci-link-card { min-height: 200px; }
	.ci-link-card-fig { height: 100px; }
	.ci-link-card-body { padding: 14px 14px 16px; }
	.ci-link-card h3 { font-size: 15px; }
	.ci-link-card.is-emphasis h3 { font-size: 18px; }
}

/* --- Topics（キャップインフォの魅力） --- */
.ci-topics-wrap {
	padding: 64px 56px 64px;
	max-width: none;
	margin: 0 auto;
	background: var(--ci-bg);
}
.ci-topics {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 32px 36px;
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 32px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}
.ci-topics-left .ci-en-sub {
	display: block;
	font-size: 10px;
	letter-spacing: 0.25em;
	color: var(--ci-mute);
	margin-bottom: 4px;
}
.ci-topics-left h2 {
	font-size: 15px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
	margin: 0;
}
.ci-topics-right {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 12px;
}
.ci-topic-card {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	min-height: 84px;
}
.ci-topic-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(42,33,24,0.08);
}
.ci-topic-fig {
	margin: 0;
	flex: 0 0 90px;
	height: auto;
	overflow: hidden;
	background: var(--ci-bg2);
}
body.ci .ci-topic-fig img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.ci-topic-text {
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	flex: 1;
}
.ci-topic-card strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--ci-ink);
}
.ci-topic-card span {
	font-size: 10.5px;
	color: var(--ci-body-soft);
}

@media (max-width: 768px) {
	.ci-topics-wrap { padding: 20px 20px 32px; }
	.ci-topics { padding: 18px 18px; grid-template-columns: 1fr; gap: 12px; }
	.ci-topics-right { grid-template-columns: 1fr; gap: 8px; }
	.ci-topic-card { padding: 0; min-height: 72px; }
	.ci-topic-card strong { font-size: 13px; }
	.ci-topic-fig { flex: 0 0 80px; }
}

/* ============================================================
 * 下層ページ：PageTitle / Section / Table
 * ============================================================ */

/* ページタイトル（上部の見出し帯） */
.ci-page-title {
	background: var(--ci-bg2);
	border-bottom: 1px solid var(--ci-border);
	padding: 48px 56px 56px;
	text-align: center;
}
.ci-page-title .ci-en-sub {
	display: block;
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--ci-mute);
	margin-bottom: 8px;
}
.ci-page-title h1 {
	font-size: 30px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.06em;
	margin: 0;
	display: inline-block;
	position: relative;
}
.ci-page-title h1::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: var(--ci-orange);
	margin: 14px auto 0;
}
.ci-page-title .ci-section-line { display: none; }

/* ページ内の各セクション */
.ci-page-section {
	max-width: 1080px;
	margin: 0 auto;
	padding: 64px 56px;
}
.ci-page-section--alt { background: var(--ci-bg2); max-width: none; }
.ci-page-section--alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.ci-page-section-head {
	text-align: center;
	margin-bottom: 36px;
}
.ci-page-section-head .ci-en-sub {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.25em;
	color: var(--ci-mute);
	margin-bottom: 6px;
}
.ci-page-section-head h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.05em;
	margin: 0;
	position: relative;
	display: inline-block;
}
.ci-page-section-head h2::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: var(--ci-orange);
	margin: 12px auto 0;
}

/* テーブル */
.ci-table-wrap {
	background: #fff;
	border: 1px solid var(--ci-border);
	overflow: hidden;
}
.ci-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.85;
}
.ci-table th,
.ci-table td {
	padding: 16px 24px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ci-border);
}
.ci-table tr:last-child th,
.ci-table tr:last-child td {
	border-bottom: 0;
}
.ci-table th {
	width: 200px;
	background: var(--ci-bg2);
	color: var(--ci-ink);
	font-weight: 600;
	letter-spacing: 0.04em;
	border-right: 1px solid var(--ci-border);
}
.ci-table td {
	color: var(--ci-body);
}
/* 沿革テーブル：左セルを少し狭く */
.ci-table--history th { width: 160px; font-weight: 600; }

/* Googleマップ */
.ci-map {
	margin-top: 12px;
}
.ci-map iframe {
	width: 100%;
	max-width: 460px;
	height: 320px;
	border: 1px solid var(--ci-border);
	display: block;
}

/* 図版 */
.ci-figure-wrap {
	text-align: center;
}
.ci-figure-wrap img {
	max-width: 100%;
	height: auto;
	display: inline-block;
	border: 1px solid var(--ci-border);
}

@media (max-width: 768px) {
	.ci-page-title { padding: 32px 20px 36px; }
	.ci-page-title h1 { font-size: 22px; }
	.ci-page-section { padding: 40px 20px; }
	.ci-page-section-head h2 { font-size: 20px; }
	.ci-table { font-size: 13px; }
	.ci-table th, .ci-table td { padding: 12px 14px; }
	.ci-table th { width: 100px; }
	.ci-table--history th { width: 110px; }
	.ci-map iframe { height: 240px; }
}

/* ============================================================
 * フォーム（お問合せ）
 * ============================================================ */

.ci-form-lead {
	text-align: center;
	font-size: 13px;
	color: var(--ci-body-soft);
	margin-bottom: 24px;
}
.ci-required {
	color: var(--ci-orange);
	font-size: 11px;
	font-weight: 600;
	display: inline-block;
	margin-top: 2px;
}
.ci-table--form th {
	width: 220px;
	font-size: 13px;
	line-height: 1.6;
}
.ci-table--form td {
	font-size: 13.5px;
}
.ci-table--form td small {
	display: inline-block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--ci-mute);
}
.ci-form input[type="text"],
.ci-form textarea,
.ci-form select {
	border: 1px solid var(--ci-border);
	background: #fff;
	padding: 8px 10px;
	font-size: 13.5px;
	font-family: var(--ci-font);
	color: var(--ci-ink);
	box-sizing: border-box;
}
.ci-form input[type="text"]:focus,
.ci-form textarea:focus,
.ci-form select:focus {
	outline: none;
	border-color: var(--ci-orange);
	box-shadow: 0 0 0 2px rgba(232,115,28,0.15);
}
.ci-form textarea { width: 100%; min-height: 160px; resize: vertical; }
.ci-form select { padding: 8px 28px 8px 10px; }
.ci-form-actions {
	text-align: center;
	margin-top: 32px;
}
.ci-btn-primary {
	background: var(--ci-orange);
	color: #fff;
	border: 0;
	padding: 14px 48px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	cursor: pointer;
	font-family: var(--ci-font);
	transition: background 0.2s ease, transform 0.2s ease;
}
.ci-btn-primary:hover {
	background: var(--ci-orange-deep);
	transform: translateY(-1px);
}

@media (max-width: 768px) {
	/* フォームテーブルをブロック表示にしてラベル＋入力を縦積みに */
	.ci-table--form,
	.ci-table--form tbody,
	.ci-table--form tr {
		display: block;
		width: 100%;
	}
	.ci-table--form th,
	.ci-table--form td {
		display: block;
		width: 100%;
		box-sizing: border-box; /* width:100%+padding でセルが膨張し横溢れする問題を防ぐ */
		padding: 10px 14px;
		border-bottom: 0;
		border-right: 0;
	}
	.ci-table--form th {
		background: var(--ci-bg2);
		font-size: 13px;
	}
	.ci-table--form tr {
		border-bottom: 1px solid var(--ci-border);
	}
	.ci-form input[type="text"],
	.ci-form input[type="email"],
	.ci-form input[type="tel"],
	.ci-form select,
	.ci-form textarea {
		width: 100%;
		max-width: 100%;
	}
	.ci-btn-primary { padding: 12px 32px; font-size: 13px; }
}

/* ============================================================
 * 事業内容ページ：サービス行（画像左・テキスト右）
 * ============================================================ */

.ci-service-list {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.ci-service-row {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 0;
	background: #fff;
	border: 1px solid var(--ci-border);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ci-service-row:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(232,115,28,0.15);
	border-color: var(--ci-orange);
}
.ci-service-fig {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--ci-bg2);
}
body.ci .ci-service-fig img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.ci-service-row:hover .ci-service-fig img { transform: scale(1.05); }
.ci-service-body {
	padding: 32px 36px;
	display: flex;
	flex-direction: column;
}
.ci-service-body .ci-en-sub {
	display: block;
	font-size: 10.5px;
	color: var(--ci-mute);
	letter-spacing: 0.25em;
	margin-bottom: 6px;
}
.ci-service-body h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
	margin: 0 0 16px;
}
.ci-service-body h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
	margin: 18px 0 10px;
}
.ci-service-body p {
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--ci-body-soft);
	margin: 0 0 12px;
	letter-spacing: 0.03em;
}
.ci-service-body .ci-arrow {
	font-size: 13px;
	font-weight: 600;
	color: var(--ci-orange);
	margin-top: 12px;
	transition: transform 0.25s ease;
}
.ci-service-row:hover .ci-arrow { transform: translateX(4px); }

@media (max-width: 768px) {
	.ci-service-row { grid-template-columns: 1fr; }
	.ci-service-fig { height: 200px; }
	.ci-service-body { padding: 24px 22px; }
	.ci-service-body h2 { font-size: 18px; }
}

/* ============================================================
 * 事業内容ページ：対応可能技術 Top8（スキル集計）
 * ============================================================ */

.ci-tech-section {
	/* 既存 .ci-page-section の中央寄せレイアウトを継承 */
}
body.ci .ci-tech-grid {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 1080px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.ci-tech-grid--3col {
	grid-template-columns: repeat(3, 1fr);
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.ci-tech-card {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 28px 12px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.ci-tech-card:hover {
	border-color: var(--ci-orange);
	transform: translateY(-2px);
}
.ci-tech-name {
	font-size: 17px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
	margin-bottom: 14px;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
}
.ci-tech-count {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.ci-tech-count strong {
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 34px;
	font-weight: 700;
	color: var(--ci-orange);
	line-height: 1;
	letter-spacing: 0;
}
.ci-tech-unit {
	font-size: 13px;
	font-weight: 500;
	color: var(--ci-body-soft);
}
body.ci .ci-tech-footnote {
	margin: 28px auto 0;
	max-width: 1080px;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--ci-mute);
	text-align: left;
	letter-spacing: 0.04em;
}

@media (max-width: 768px) {
	.ci-tech-section { margin-top: 48px; }
	.ci-tech-head h2 { font-size: 22px; }
	body.ci .ci-tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* base が body.ci(0,2,0)のため同詳細度で上書き。4列のまま残る窮屈を解消。minmax(0,1fr)で狭幅の溢れも防止 */
	.ci-tech-card { padding: 22px 10px 18px; }
	.ci-tech-name { font-size: 15px; margin-bottom: 10px; }
	.ci-tech-count strong { font-size: 28px; }
}

/* ============================================================
 * ホームページ製作ページ：ヒーロー強化・お悩み・5列ステップ・実績カテゴリ
 * ============================================================ */

/* ヒーロー（リード）強化 */
.ci-lead--hero {
	text-align: center;
	padding: 16px 0 8px;
}
.ci-lead--hero .ci-lead-headline {
	font-size: 36px;
	line-height: 1.55;
	margin: 0 auto 36px;
	max-width: 900px;
}
.ci-lead--hero .ci-lead-desc {
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 2.0;
}
.ci-lead--hero .ci-lead-desc + .ci-lead-desc {
	margin-top: 1.2em;
}
.ci-lead--hero .ci-lead-desc strong {
	color: var(--ci-ink);
	font-weight: 700;
}
.ci-lead-cta {
	display: inline-block;
	margin: 44px 0 24px;
	padding: 20px 48px;
	background: var(--ci-orange);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	box-shadow: 0 8px 18px rgba(232,115,28,0.28);
	transition: background 0.2s ease;
}
.ci-lead-cta:hover { background: var(--ci-orange-deep); }

@media (max-width: 768px) {
	.ci-lead--hero .ci-lead-headline { font-size: 24px; }
	.ci-lead--hero .ci-lead-desc { font-size: 14px; }
}


/* お悩みカード */
.ci-page-section .ci-trouble-grid,
.ci-page-section--alt > .ci-trouble-grid {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 960px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	justify-content: stretch;
}
.ci-trouble-card {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
}
.ci-trouble-q {
	flex-shrink: 0;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--ci-orange);
	line-height: 1;
}
.ci-trouble-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--ci-body);
	letter-spacing: 0.04em;
	text-align: center;
	width: 100%;
}
.ci-page-section .ci-trouble-answer,
.ci-page-section--alt > .ci-trouble-answer {
	max-width: 880px;
	margin: 32px auto 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.95;
	color: var(--ci-body);
	letter-spacing: 0.04em;
}
.ci-trouble-answer strong {
	color: var(--ci-orange-deep);
	font-weight: 700;
}

/* 5列ステップ（制作の流れ） */
.ci-step-grid.ci-step-grid--5col {
	grid-template-columns: repeat(5, 1fr);
	max-width: 1200px;
	gap: 12px;
}

/* 実績カテゴリ */
.ci-works-category + .ci-works-category {
	margin-top: 48px;
}
.ci-works-cat-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.08em;
	margin: 0 0 20px;
	padding-left: 14px;
	border-left: 4px solid var(--ci-orange);
}

@media (max-width: 900px) {
	/* base が .ci-page-section--alt > .ci-trouble-grid(0,2,0)。同詳細度で上書きしないと3列のまま溢れる */
	.ci-page-section--alt > .ci-trouble-grid { grid-template-columns: repeat(2, 1fr); }
	.ci-step-grid.ci-step-grid--5col { grid-template-columns: repeat(2, 1fr); }
}

/* 強み内の小さな注記 */
.ci-mini-note {
	display: inline-block;
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--ci-orange-deep);
	letter-spacing: 0.02em;
}

/* 比較表 */
.ci-compare-wrap {
	max-width: 1080px;
	margin: 0 auto;
	overflow-x: auto;
}
.ci-compare-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--ci-border);
	font-size: 14px;
	line-height: 1.75;
}
.ci-compare-table th,
.ci-compare-table td {
	padding: 12px 20px;
	border: 1px solid var(--ci-border);
	vertical-align: middle;
	text-align: left;
	line-height: 1.65;
}
.ci-compare-table thead th {
	background: var(--ci-bg2);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--ci-ink);
	text-align: center;
	letter-spacing: 0.04em;
}
.ci-compare-table thead .ci-compare-axis { width: 22%; background: #fff; border-top: none; border-left: none; }
.ci-compare-table thead .ci-compare-other { width: 38%; color: var(--ci-body-soft); }
.ci-compare-table thead .ci-compare-ours {
	width: 40%;
	background: var(--ci-orange);
	color: #fff;
	letter-spacing: 0.08em;
}
.ci-compare-table tbody th {
	width: 22%;
	background: var(--ci-bg2);
	font-weight: 700;
	font-size: 14px;
	color: var(--ci-ink);
	text-align: left;
}
.ci-compare-table tbody td:first-of-type {
	color: var(--ci-body-soft);
}
.ci-compare-table tbody td:last-of-type {
	color: var(--ci-ink);
	background: #FFF8EE;
}
.ci-compare-table tbody td:last-of-type strong {
	color: var(--ci-orange-deep);
}

/* 中間CTA */
.ci-mid-cta {
	max-width: 880px;
	margin: 24px auto 0;
	text-align: center;
}
.ci-mid-cta p {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--ci-body);
	letter-spacing: 0.04em;
}
.ci-mid-cta .ci-btn-primary {
	display: inline-block;
	padding: 18px 56px;
	margin: 8px 0 0;
	text-decoration: none;
}

/* FAQ */
.ci-faq-list {
	max-width: 920px;
	margin: 0 auto;
	padding: 0;
}
.ci-faq-item {
	border: 1px solid var(--ci-border);
	border-top: none;
	background: #fff;
}
.ci-faq-item:first-child { border-top: 1px solid var(--ci-border); }
.ci-faq-list .ci-faq-item dt,
.ci-faq-list .ci-faq-item dd {
	margin: 0;
	padding: 18px 24px 18px 60px;
	position: relative;
	line-height: 1.85;
	letter-spacing: 0.03em;
	border: none;
	background: transparent;
}
.ci-faq-list .ci-faq-item dt {
	font-size: 15px;
	font-weight: 700;
	color: var(--ci-ink);
	background: var(--ci-bg2);
	border-bottom: 1px solid var(--ci-border);
}
.ci-faq-list .ci-faq-item dd {
	font-size: 14px;
	color: var(--ci-body);
}
.ci-faq-mark {
	position: absolute;
	left: 22px;
	top: 18px;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--ci-orange);
	line-height: 1.85;
}
.ci-faq-mark--a {
	color: var(--ci-body-soft);
}

/* ===== サイト共通：JS連動アニメーション ===== */

/* スクロール出現アニメーション（全 body.ci ページで有効） */
body.ci [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
body.ci [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}
body.ci [data-reveal][data-delay="1"].is-visible { transition-delay: 0.08s; }
body.ci [data-reveal][data-delay="2"].is-visible { transition-delay: 0.16s; }
body.ci [data-reveal][data-delay="3"].is-visible { transition-delay: 0.24s; }
body.ci [data-reveal][data-delay="4"].is-visible { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	body.ci [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ヒーロー初回ロード時の段階的フェードイン */
body.ci-web-compact .ci-lead--hero .ci-lead-headline,
body.ci-web-compact .ci-lead--hero .ci-lead-desc,
body.ci-web-compact .ci-lead--hero .ci-lead-cta {
	opacity: 0;
	transform: translateY(16px);
	animation: ci-hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.ci-web-compact .ci-lead--hero .ci-lead-headline { animation-delay: 0.1s; }
body.ci-web-compact .ci-lead--hero .ci-lead-desc:nth-of-type(1) { animation-delay: 0.25s; }
body.ci-web-compact .ci-lead--hero .ci-lead-desc:nth-of-type(2) { animation-delay: 0.35s; }
body.ci-web-compact .ci-lead--hero .ci-lead-desc:nth-of-type(3) { animation-delay: 0.45s; }
body.ci-web-compact .ci-lead--hero .ci-lead-cta { animation-delay: 0.6s; }

@keyframes ci-hero-rise {
	to { opacity: 1; transform: translateY(0); }
}

/* カードの統一ホバー演出 */
body.ci-web-compact .ci-trouble-card,
body.ci-web-compact .ci-mini-item,
body.ci-web-compact .ci-step-card {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
body.ci-web-compact .ci-trouble-card:hover,
body.ci-web-compact .ci-mini-item:hover,
body.ci-web-compact .ci-step-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(232, 115, 28, 0.12);
	border-color: var(--ci-orange);
}

/* CTAボタンの押し込み感 */
body.ci-web-compact .ci-btn-primary,
body.ci-web-compact .ci-lead-cta,
body.ci-web-compact .ci-cta-button {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body.ci-web-compact .ci-btn-primary:active,
body.ci-web-compact .ci-lead-cta:active,
body.ci-web-compact .ci-cta-button:active {
	transform: translateY(2px);
	box-shadow: 0 2px 6px rgba(232, 115, 28, 0.3);
}

/* FAQアコーディオン */
body.ci-web-compact .ci-faq-item {
	cursor: pointer;
}
body.ci-web-compact .ci-faq-item dt {
	position: relative;
	padding-right: 56px;
	user-select: none;
	transition: background 0.25s ease;
}
body.ci-web-compact .ci-faq-item dt:hover {
	background: #FFE7C8;
}
body.ci-web-compact .ci-faq-item dt::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 14px;
	height: 14px;
	border-right: 2px solid var(--ci-orange);
	border-bottom: 2px solid var(--ci-orange);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.3s ease;
}
body.ci-web-compact .ci-faq-item.is-open dt::after {
	transform: translateY(-30%) rotate(-135deg);
}
body.ci-web-compact .ci-faq-item dd {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
}
body.ci-web-compact .ci-faq-item.is-open dd {
	max-height: 400px;
	padding-top: 18px;
	padding-bottom: 18px;
}

/* スムーススクロール（全体） */
html { scroll-behavior: smooth; }

/* ===== web.html だけ余白をタイトに ===== */
body.ci-web-compact .ci-page-section {
	padding-top: 44px;
	padding-bottom: 44px;
}
body.ci-web-compact .ci-page-section-head {
	margin-bottom: 28px;
}
body.ci-web-compact .ci-cta-section {
	padding-top: 16px;
	padding-bottom: 40px;
}
/* 中間CTAを含むセクション（比較表）は下を更にタイトに */
body.ci-web-compact .ci-page-section:has(.ci-mid-cta) {
	padding-bottom: 16px;
}

/* CTA 補足リンク */
.ci-cta-sub {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--ci-body-soft);
}
.ci-cta-sub a {
	color: var(--ci-orange-deep);
	font-weight: 700;
	text-decoration: none;
}
.ci-cta-sub a:hover { text-decoration: underline; }

@media (max-width: 768px) {
	.ci-compare-table { font-size: 12.5px; }
	.ci-compare-table th, .ci-compare-table td { padding: 12px 12px; }
	.ci-faq-list .ci-faq-item dt, .ci-faq-list .ci-faq-item dd { padding: 14px 14px 14px 50px; }
	.ci-faq-mark { left: 14px; top: 14px; font-size: 16px; }
}
@media (max-width: 600px) {
	.ci-page-section--alt > .ci-trouble-grid { grid-template-columns: 1fr; }
	.ci-step-grid--5col { grid-template-columns: 1fr; }
	.ci-trouble-answer { font-size: 14px; text-align: left; }
}

/* ============================================================
 * 採用情報ページ：キャッチカード・特徴カード・写真グリッド・ミニリスト
 * ============================================================ */

/* キャッチカード（本番準拠：青系ラジアルグラデーション・フルブリード） */
.ci-catch-card {
	box-sizing: border-box;
	border: none;
	background: #D9F4F0;
	background: radial-gradient(circle 600px at 50% -100px, #097B9C, #D9F4F0);
	padding: 64px 36px;
	text-align: center;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* 親 section の左右/上下パディングと max-width を打ち消す（このカードを含むセクション専用） */
.ci-page-section:has(> .ci-catch-card) {
	padding: 0;
	max-width: none;
	overflow-x: hidden;
}
.ci-catch-card p {
	font-size: 32px;
	font-weight: 700;
	color: #FFFFFF;
	text-shadow: 1px 3px 10px #666666;
	letter-spacing: 0.1em;
	margin: 0 0 12px;
}
.ci-catch-card span {
	display: block;
	font-size: 18px;
	color: #FFFFFF;
	font-weight: 700;
	text-shadow: 1px 1px 5px #666666;
	letter-spacing: 0.05em;
}

/* 特徴カード（画像左・テキスト右） */
.ci-feature-card {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 0;
	background: #fff;
	border: 1px solid var(--ci-border);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ci-feature-card--link:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(232,115,28,0.15);
}
.ci-feature-fig {
	margin: 0;
	width: 100%;
	height: 100%;
	min-height: 240px;
	overflow: hidden;
	background: var(--ci-bg2);
}
body.ci .ci-feature-fig img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.ci-feature-body {
	padding: 32px 36px;
}
.ci-feature-body h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ci-orange);
	letter-spacing: 0.03em;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ci-border);
}
.ci-feature-body h4 {
	font-size: 14px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 18px 0 10px;
}
.ci-feature-body p {
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--ci-body-soft);
	margin: 0 0 10px;
}
.ci-feature-body .ci-arrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ci-orange);
	margin-top: 12px;
	transition: transform 0.25s ease;
}
.ci-feature-card--link:hover .ci-arrow { transform: translateX(4px); }

/* 番号付きリスト */
.ci-list-ordered {
	list-style: none;
	margin: 12px 0;
	padding: 0;
	counter-reset: order;
}
.ci-list-ordered li {
	position: relative;
	padding: 6px 0 6px 32px;
	font-size: 13.5px;
	color: var(--ci-body);
	line-height: 1.85;
	counter-increment: order;
}
.ci-list-ordered li::before {
	content: counter(order, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 8px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ci-orange);
	letter-spacing: 0.1em;
}

.ci-note {
	font-size: 11px;
	color: var(--ci-mute);
	margin-top: 6px;
}

/* ※注釈のぶら下げインデント（折り返し行を「※」の後ろに揃える） */
.ci-note-line {
	display: block;
	padding-left: 1.4em;
	text-indent: -1.4em;
}

/* 金額・補足を語句の途中で改行させない（折り返しは「：」区切りで） */
.ci-list-disc li strong,
.ci-list-disc li .ci-amount {
	white-space: nowrap;
}

/* 本文ブロック */
.ci-content-block {
	max-width: 880px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 32px 36px;
}
.ci-content-block p {
	font-size: 14px;
	line-height: 2.0;
	color: var(--ci-body);
	margin: 0 0 18px;
}
.ci-content-block p:last-child { margin-bottom: 0; }

/* 写真グリッド */
.ci-photo-grid {
	display: grid;
	gap: 16px;
	margin: 18px 0;
}
.ci-photo-grid--1 { grid-template-columns: 1fr; }
.ci-photo-grid--2 { grid-template-columns: 1fr 1fr; }
body.ci .ci-photo-grid img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	border: 1px solid var(--ci-border);
}

/* ミニリスト */
.ci-mini-list {
	display: grid;
	gap: 16px;
	max-width: 880px;
	margin: 0 auto;
}
.ci-mini-list--3col {
	max-width: 1080px;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.ci-mini-list--2col {
	max-width: 1080px;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.ci-mini-item {
	background: #fff;
	border: 1px solid var(--ci-border);
	border-left: 3px solid var(--ci-orange);
	padding: 20px 24px;
}
.ci-mini-item h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0 0 8px;
	letter-spacing: 0.03em;
}
.ci-mini-item p {
	font-size: 13px;
	color: var(--ci-body-soft);
	line-height: 1.85;
	margin: 0;
	word-break: auto-phrase;
	line-break: strict;
	text-wrap: pretty;
	hanging-punctuation: allow-end;
}

/* 紹介継続支給の訴求ボックス */
.ci-referral-hope {
	max-width: 1080px;
	margin: 24px auto 0;
	background: var(--ci-card);
	border: 1px solid var(--ci-border);
	border-top: 4px solid var(--ci-orange);
	padding: 30px 32px;
	text-align: center;
}
.ci-referral-hope__eyebrow {
	font-size: 16px;
	font-weight: 700;
	color: var(--ci-orange-deep);
	letter-spacing: 0.04em;
	margin: 0 0 10px;
}
.ci-referral-hope__lead {
	font-size: 13px;
	color: var(--ci-body-soft);
	line-height: 1.85;
	margin: 0 0 20px;
	text-wrap: pretty;
}
.ci-referral-hope__figure {
	font-size: 30px;
	font-weight: 800;
	color: var(--ci-ink);
	letter-spacing: 0.02em;
	line-height: 1.35;
	margin: 0;
}
.ci-referral-hope__clause {
	display: inline-block;
	white-space: nowrap;
}
.ci-referral-hope__figure .num,
.ci-referral-hope__figure .hl {
	color: var(--ci-orange);
	font-size: 40px;
}
.ci-referral-hope__figure .arrow {
	color: var(--ci-mute);
	margin: 0 10px;
	font-weight: 600;
}
.ci-referral-hope__sub {
	font-size: 14px;
	font-weight: 700;
	color: var(--ci-body);
	margin: 14px 0 0;
}
.ci-referral-hope__sub strong {
	color: var(--ci-orange);
	font-size: 17px;
}
@media (max-width: 768px) {
	.ci-referral-hope { padding: 24px 18px; }
	.ci-referral-hope__eyebrow { font-size: 15px; }
	.ci-referral-hope__figure { font-size: 22px; }
	.ci-referral-hope__figure .num,
	.ci-referral-hope__figure .hl { font-size: 30px; }
	.ci-referral-hope__figure .arrow { margin: 0 6px; }
}

/* エントリーカード */
.ci-entry-card {
	display: block;
	max-width: 720px;
	margin: 0 auto;
	background: var(--ci-orange);
	color: #fff;
	padding: 28px 32px;
	text-align: center;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}
.ci-entry-card:hover {
	background: var(--ci-orange-deep);
	transform: translateY(-2px);
}
.ci-entry-card .ci-en-sub {
	display: block;
	font-size: 11px;
	letter-spacing: 0.25em;
	color: rgba(255,255,255,0.85);
	margin-bottom: 8px;
}
.ci-entry-card p {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 12px;
}
.ci-entry-card p strong {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0 6px;
}
.ci-entry-card .ci-arrow {
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

@media (max-width: 768px) {
	.ci-catch-card { padding: 40px 20px; }
	.ci-catch-card p { font-size: 22px; letter-spacing: 0.06em; }
	.ci-catch-card span { font-size: 14px; }
	.ci-feature-card { grid-template-columns: 1fr; }
	.ci-feature-fig { min-height: 180px; }
	.ci-feature-body { padding: 24px 22px; }
	.ci-photo-grid--2 { grid-template-columns: 1fr; }
	.ci-content-block { padding: 22px 20px; }
	.ci-entry-card { padding: 22px 20px; }
	.ci-entry-card p { font-size: 14px; }
	.ci-entry-card p strong { font-size: 18px; }
}

/* ============================================================
 * メインビジュアル + 実績グリッド（system/web ページ）
 * ============================================================ */

.ci-mainvisual {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}
body.ci .ci-mainvisual img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 720px;
	margin: 0 auto;
	border: 1px solid var(--ci-border);
}
.ci-mainvisual p {
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.95;
	color: var(--ci-body);
	letter-spacing: 0.04em;
}

/* 実績カードグリッド（横長カード、3列） */
.ci-work-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.ci-work-card {
	background: #fff;
	border: 1px solid var(--ci-border);
	border-left: 3px solid var(--ci-orange);
	padding: 18px 22px;
}
.ci-work-card h4 {
	font-size: 14px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0 0 10px;
	line-height: 1.5;
}
.ci-work-card p {
	font-size: 12px;
	color: var(--ci-body-soft);
	line-height: 1.8;
	margin: 0;
}

/* 制作実績（画像カード、4列） */
.ci-result-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.ci-result-card {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	display: flex;
	flex-direction: column;
}
.ci-result-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(232,115,28,0.12);
	border-color: var(--ci-orange);
}
.ci-result-card figure {
	margin: 0;
	width: 100%;
	height: 130px;
	overflow: hidden;
	background: var(--ci-bg2);
}
body.ci .ci-result-card figure img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.ci-result-card h4 {
	font-size: 13px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0;
	padding: 12px 14px 4px;
	line-height: 1.5;
}
.ci-result-card p {
	font-size: 11px;
	color: var(--ci-body-soft);
	padding: 0 14px 12px;
	margin: 0;
	word-break: break-all;
}

@media (max-width: 1024px) {
	.ci-result-grid { grid-template-columns: repeat(3, 1fr); }
	.ci-work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.ci-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ci-work-grid { grid-template-columns: 1fr; }
	.ci-mainvisual p { font-size: 13px; }
}

/* ============================================================
 * 採用情報（recruit.html）：選考基準・応募方法ステップ
 * ============================================================ */

.ci-criteria-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	max-width: 880px;
	margin: 0 auto;
}
.ci-criteria-item {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 14px 12px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ci-ink);
}
.ci-criteria-item .ci-num {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	color: var(--ci-orange);
	letter-spacing: 0.15em;
	margin-right: 6px;
}

.ci-step-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: 960px;
	margin: 0 auto;
}
.ci-step-card {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 24px 22px;
}
.ci-step-card .ci-step-num {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--ci-orange);
	letter-spacing: 0.18em;
	margin-bottom: 8px;
}
.ci-step-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
	margin: 0 0 10px;
}
.ci-step-card p {
	font-size: 12.5px;
	line-height: 1.85;
	color: var(--ci-body-soft);
	margin: 0;
}

@media (max-width: 768px) {
	.ci-criteria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ci-step-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * ポリシーページ：本文ブロック
 * ============================================================ */

.ci-policy-block {
	max-width: 880px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 36px 44px;
}
.ci-policy-block p {
	font-size: 14px;
	line-height: 2.0;
	color: var(--ci-body);
	margin: 0 0 14px;
	letter-spacing: 0.04em;
}
.ci-policy-block h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
	margin: 28px 0 12px;
	padding-left: 12px;
	border-left: 3px solid var(--ci-orange);
}
.ci-policy-sign {
	margin-top: 36px !important;
	text-align: right;
	font-size: 13px;
	color: var(--ci-body-soft);
	line-height: 1.85;
}

@media (max-width: 768px) {
	.ci-policy-block { padding: 24px 22px; }
	.ci-policy-block p { font-size: 13px; }
}

/* テーブル中央寄せ（連携例など） */
.ci-table--center th,
.ci-table--center td {
	text-align: center;
	width: auto;
	border-right: 1px solid var(--ci-border);
}
.ci-table--center tr th:last-child,
.ci-table--center tr td:last-child { border-right: 0; }
.ci-table--center thead th { font-size: 14px; }

/* ============================================================
 * DX推進 / 実績詳細LP 用パーツ
 * ============================================================ */

/* 日本語の改行を中黒（・）や句読点優先にして、語の途中で折り返さないように */
.ci-mini-item h3,
.ci-mini-item p,
.ci-step-list h3,
.ci-step-list p,
.ci-case-body h3,
.ci-case-body p,
.ci-case-meta li,
.ci-feature-block h3,
.ci-feature-block p,
.ci-issue-card h3,
.ci-issue-card p,
.ci-approach-item h3,
.ci-approach-item p,
.ci-roadmap-item h3,
.ci-roadmap-item ul li {
	word-break: auto-phrase;
	overflow-wrap: anywhere;
	line-break: strict;
}

/* リード文（中央寄せ・読みやすい横幅） */
.ci-lead-wrap {
	max-width: 880px;
	margin: 0 auto;
	text-align: left;
	color: var(--ci-body);
	line-height: 1.9;
}
.ci-lead-wrap p {
	font-size: 16px;
	margin: 0 0 16px;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
	line-break: strict;
}
.ci-lead-wrap p:last-child { margin-bottom: 0; }
.ci-lead-wrap strong { color: var(--ci-orange-deep); font-weight: 700; white-space: nowrap; }

/* 2列分割（長文リード用 — ひとつの説明を読みやすく並べる） */
.ci-lead-wrap--split {
	max-width: 1080px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.ci-lead-wrap--split p {
	font-size: 15px;
	line-height: 1.95;
	margin: 0;
}
@media (max-width: 768px) {
	.ci-lead-wrap--split {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* 画像プレースホルダー（後で本番画像差し替え） */
.ci-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 220px;
	background: linear-gradient(135deg, #FBF4E5 0%, #F5E7CB 100%);
	color: var(--ci-mute);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	border: 1px dashed var(--ci-border);
}

/* パンくず */
.ci-breadcrumb {
	max-width: 1080px;
	margin: 0 auto;
	padding: 16px 56px 0;
}
.ci-breadcrumb ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	font-size: 13px;
	color: var(--ci-mute);
}
.ci-breadcrumb li + li::before {
	content: "›";
	margin-right: 8px;
	color: var(--ci-mute);
}
.ci-breadcrumb a {
	color: var(--ci-body-soft);
	text-decoration: none;
}
.ci-breadcrumb a:hover { color: var(--ci-orange); }
.ci-breadcrumb [aria-current="page"] {
	color: var(--ci-ink);
	font-weight: 600;
}

/* 実績カードグリッド（dx.html） */
.ci-case-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 480px));
	justify-content: center;
	gap: 28px;
}
.ci-case-card {
	display: grid;
	grid-template-rows: auto 1fr;
	background: #fff;
	border: 1px solid var(--ci-border);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.ci-case-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(232,115,28,0.15);
}
.ci-case-fig { margin: 0; overflow: hidden; }
.ci-case-fig .ci-img-placeholder { min-height: 200px; }
body.ci .ci-case-fig img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}
.ci-case-body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 12px; }
.ci-case-tag {
	display: inline-block;
	padding: 4px 10px;
	background: var(--ci-bg2);
	color: var(--ci-orange-deep);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	align-self: flex-start;
}
.ci-case-body h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0;
	line-height: 1.5;
}
.ci-case-body p {
	font-size: 14px;
	line-height: 1.8;
	color: var(--ci-body);
	margin: 0;
}
.ci-case-meta {
	list-style: none;
	padding: 0;
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--ci-body-soft);
	line-height: 1.8;
}
.ci-case-meta li::before {
	content: "・";
	color: var(--ci-orange);
	margin-right: 4px;
}
.ci-case-more {
	margin-top: auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--ci-orange);
	letter-spacing: 0.04em;
}
.ci-case-card--coming { background: var(--ci-bg2); }
.ci-case-card--coming .ci-img-placeholder {
	background: linear-gradient(135deg, var(--ci-bg2), #F5E7CB);
}
.ci-case-cta {
	display: inline-block;
	margin-top: auto;
	padding: 10px 20px;
	background: var(--ci-orange);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	align-self: flex-start;
}
.ci-case-cta:hover { background: var(--ci-orange-deep); }

/* STEP リスト（dx.html 進め方） */
.ci-step-list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 1080px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: center;
}
.ci-step-list li {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.ci-step-no {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ci-orange);
}
.ci-step-list h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0;
}
.ci-step-list p {
	font-size: 13px;
	line-height: 1.8;
	color: var(--ci-body);
	margin: 0;
	text-align: left;
}

/* お問い合わせ CTA セクション（背景を持たず、ボックスをカード化） */
.ci-cta-section { background: transparent; padding-top: 24px; }
.ci-cta-box {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
	padding: 48px 36px;
	background: var(--ci-bg2);
	border: 1px solid var(--ci-border);
}
.ci-cta-box h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0 0 12px;
}
.ci-cta-box p {
	font-size: 15px;
	color: var(--ci-body);
	line-height: 1.9;
	margin: 0 0 24px;
}
.ci-cta-button {
	display: inline-block;
	padding: 20px 48px;
	margin: 12px 0;
	background: var(--ci-orange);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	box-shadow: 0 8px 18px rgba(232,115,28,0.28);
}
.ci-cta-button:hover { background: var(--ci-orange-deep); }
.ci-cta-link {
	display: inline-block;
	margin-top: 18px;
	font-size: 13px;
	color: var(--ci-body-soft);
	text-decoration: none;
}
.ci-cta-link:hover { color: var(--ci-orange); }

/* 実績詳細LP ヒーロー */
.ci-case-hero {
	display: grid;
	grid-template-columns: 480px 1fr;
	gap: 36px;
	align-items: stretch;
}
.ci-case-hero-fig { margin: 0; overflow: hidden; }
.ci-case-hero-fig .ci-img-placeholder { min-height: 320px; }
body.ci .ci-case-hero-fig img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}
.ci-case-hero-body { display: flex; flex-direction: column; gap: 16px; }
.ci-case-hero-body h2 {
	font-size: 28px;
	font-weight: 700;
	color: var(--ci-ink);
	line-height: 1.5;
	margin: 0;
}
.ci-case-hero-body > p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--ci-body);
	margin: 0;
}
.ci-case-spec {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 24px;
	margin: 8px 0 0;
	padding: 18px 22px;
	background: var(--ci-bg2);
	border-left: 4px solid var(--ci-orange);
}
.ci-case-spec div { display: flex; flex-direction: column; gap: 2px; }
.ci-case-spec dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ci-mute);
}
.ci-case-spec dd {
	font-size: 14px;
	font-weight: 600;
	color: var(--ci-ink);
	margin: 0;
	line-height: 1.6;
}

/* 課題グリッド */
.ci-issue-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.ci-issue-card {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 24px 22px;
	border-top: 4px solid var(--ci-orange);
}
.ci-issue-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0 0 10px;
	line-height: 1.5;
}
.ci-issue-card p {
	font-size: 13px;
	line-height: 1.8;
	color: var(--ci-body);
	margin: 0;
}

/* アプローチ（番号付き） */
.ci-approach-list {
	display: grid;
	gap: 18px;
	max-width: 980px;
	margin: 0 auto;
}
.ci-approach-item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 24px 28px;
}
.ci-approach-no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--ci-orange);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.ci-approach-item h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0 0 8px;
	line-height: 1.5;
}
.ci-approach-item p {
	font-size: 14px;
	line-height: 1.9;
	color: var(--ci-body);
	margin: 0;
}
.ci-approach-item strong { color: var(--ci-orange-deep); font-weight: 700; }

/* 主要機能グリッド */
.ci-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.ci-feature-block {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ci-feature-cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ci-orange);
	align-self: flex-start;
}
.ci-feature-block h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0;
	line-height: 1.5;
}
.ci-feature-block p {
	font-size: 13px;
	line-height: 1.8;
	color: var(--ci-body);
	margin: 0;
}

/* ロードマップ（フェーズカード3枚並び） */
.ci-roadmap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.ci-roadmap-item {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ci-roadmap-phase {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ci-mute);
}
.ci-roadmap-status {
	align-self: flex-start;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ci-mute);
	background: var(--ci-bg2);
}
.ci-roadmap-item h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 4px 0 6px;
}
.ci-roadmap-item ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
	line-height: 1.9;
	color: var(--ci-body);
}
.ci-roadmap-item ul li::before {
	content: "✓";
	color: var(--ci-orange);
	margin-right: 8px;
	font-weight: 700;
}
.ci-roadmap-item.is-done { border-top: 4px solid var(--ci-mute); }
.ci-roadmap-item.is-done .ci-roadmap-status { background: #E8DCC2; color: var(--ci-body-soft); }
.ci-roadmap-item.is-active { border-top: 4px solid var(--ci-orange); box-shadow: 0 6px 16px rgba(232,115,28,0.12); }
.ci-roadmap-item.is-active .ci-roadmap-status { background: var(--ci-orange); color: #fff; }

/* 768px 以下のレスポンシブ */
@media (max-width: 768px) {
	.ci-case-grid { grid-template-columns: 1fr; gap: 20px; }
	.ci-case-fig .ci-img-placeholder { min-height: 160px; }
	.ci-case-body { padding: 22px 20px; }
	.ci-case-body h3 { font-size: 18px; }
	.ci-step-list { grid-template-columns: 1fr; }
	.ci-cta-box { padding: 32px 22px; }
	.ci-cta-box h2 { font-size: 20px; }
	.ci-cta-button { padding: 14px 28px; font-size: 14px; }
	.ci-case-hero { grid-template-columns: 1fr; gap: 24px; }
	.ci-case-hero-fig .ci-img-placeholder { min-height: 200px; }
	.ci-case-hero-body h2 { font-size: 22px; }
	.ci-case-spec { grid-template-columns: 1fr; padding: 16px 18px; }
	.ci-issue-grid { grid-template-columns: 1fr; }
	.ci-approach-item { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
	.ci-approach-no { width: 56px; height: 56px; font-size: 18px; }
	.ci-feature-grid { grid-template-columns: 1fr; }
	.ci-mini-list--3col { grid-template-columns: 1fr; }
	.ci-mini-list--2col { grid-template-columns: 1fr; }
	.ci-roadmap { grid-template-columns: 1fr; }
	.ci-breadcrumb { padding: 12px 20px 0; font-size: 12px; }
	/* モバイルでは <br> による強制改行を無効化（自然折返しに任せる） */
	.ci-lead-wrap br { display: none; }
	/* 本文リード・キャッチ・サービスカードの和文は文節単位で折り返す。
	   keep-all だと句読点のない長い和文が「分割不可の1トークン」になり、
	   overflow-wrap:anywhere が苦し紛れに「開発」「います」等を語中で割ってしまう。
	   auto-phrase（見出しで使用中）に統一して自然な改行位置にする。 */
	.ci-lead-wrap p,
	.ci-lead-wrap strong,
	.ci-catch-card p,
	.ci-catch-card span,
	.ci-service-body p,
	.ci-service-body h3 {
		word-break: auto-phrase;
		overflow-wrap: anywhere;
		line-break: strict;
	}
	/* 長い強調句もモバイルでは折り返しを許可（PC用 nowrap を解除）。
	   nowrap のままだと強調句が1行に収まらず、直後の語が anywhere で分断される。 */
	.ci-lead-wrap strong { white-space: normal; }
}

/* ============================================================
 * v2: インタビュー（voice.html / voice-engineer / company.html 社長メッセージ）
 * ============================================================ */

/* インタビュー一覧グリッド */
.ci-voice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
	max-width: 1080px;
	margin: 0 auto;
}
.ci-voice-card {
	display: grid;
	grid-template-rows: auto 1fr;
	background: #fff;
	border: 1px solid var(--ci-border);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.ci-voice-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(232,115,28,0.15); }
.ci-voice-fig { margin: 0; overflow: hidden; }
.ci-voice-fig .ci-img-placeholder { min-height: 200px; }
body.ci .ci-voice-fig img { display: block; width: 100%; height: 220px; object-fit: cover; }
.ci-voice-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.ci-voice-tag {
	display: inline-block;
	padding: 4px 10px;
	background: var(--ci-bg2);
	color: var(--ci-orange-deep);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	align-self: flex-start;
}
.ci-voice-body h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ci-ink);
	line-height: 1.5;
	margin: 0;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-voice-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ci-orange-deep);
	margin: 0;
}
.ci-voice-body p {
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--ci-body);
	margin: 0;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-voice-more {
	margin-top: auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--ci-orange);
	letter-spacing: 0.04em;
}
.ci-voice-card--coming { background: var(--ci-bg2); }
.ci-voice-card--coming .ci-img-placeholder { background: linear-gradient(135deg, var(--ci-bg2), #F5E7CB); }

/* インタビュー記事 ヒーロー */
.ci-voice-hero {
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 36px;
	align-items: stretch;
	max-width: 1080px;
	margin: 0 auto;
}
.ci-voice-hero-fig { margin: 0; overflow: hidden; }
.ci-voice-hero-fig .ci-img-placeholder { min-height: 320px; }
body.ci .ci-voice-hero-fig img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.ci-voice-hero-body { display: flex; flex-direction: column; gap: 16px; }
.ci-voice-hero-body h2 {
	font-size: 26px;
	font-weight: 700;
	color: var(--ci-ink);
	line-height: 1.5;
	margin: 0;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-voice-profile {
	margin: 8px 0 0;
	padding: 18px 22px;
	background: var(--ci-bg2);
	border-left: 4px solid var(--ci-orange);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 24px;
}
.ci-voice-profile div { display: flex; flex-direction: column; gap: 2px; }
.ci-voice-profile dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ci-mute);
}
.ci-voice-profile dd {
	font-size: 14px;
	font-weight: 600;
	color: var(--ci-ink);
	margin: 0;
	line-height: 1.6;
}

/* 引用 */
.ci-voice-quote {
	max-width: 880px;
	margin: 0 auto;
	padding: 32px 40px;
	background: #fff;
	border-left: 6px solid var(--ci-orange);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--ci-ink);
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-voice-quote p { margin: 0; }

/* Q&A */
.ci-voice-qa {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	gap: 24px;
}
.ci-voice-qa-item {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 26px 32px;
}
.ci-voice-q {
	font-size: 17px;
	font-weight: 700;
	color: var(--ci-orange-deep);
	line-height: 1.6;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ci-border);
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-voice-a { display: flex; flex-direction: column; gap: 8px; }
.ci-voice-a p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--ci-body);
	margin: 0;
}
.ci-voice-hint {
	font-size: 12.5px;
	color: var(--ci-mute);
	background: var(--ci-bg2);
	padding: 10px 14px;
	border-left: 3px solid var(--ci-orange-soft);
	line-height: 1.7;
}

/* タイムライン（1日のスケジュール） */
.ci-voice-timeline {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 720px;
	display: grid;
	gap: 12px;
}
.ci-voice-timeline li {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 16px 20px;
	align-items: flex-start;
}
.ci-voice-time {
	font-size: 16px;
	font-weight: 700;
	color: var(--ci-orange);
	letter-spacing: 0.03em;
}
.ci-voice-timeline strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--ci-ink);
	margin-bottom: 4px;
}
.ci-voice-timeline p {
	font-size: 13px;
	color: var(--ci-body);
	line-height: 1.7;
	margin: 0;
}

/* ============================================================
 * v2: 社内のリアル (inside.html)
 * ============================================================ */

.ci-inside-feature {
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 32px;
	max-width: 1080px;
	margin: 0 auto;
	align-items: stretch;
}
.ci-inside-feature-fig { margin: 0; }
.ci-inside-feature-fig .ci-img-placeholder { min-height: 280px; height: 100%; }
.ci-inside-feature-body { display: flex; flex-direction: column; justify-content: center; }
.ci-inside-spec {
	margin: 0;
	padding: 24px 28px;
	background: var(--ci-bg2);
	border-left: 4px solid var(--ci-orange);
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.ci-inside-spec div { display: flex; flex-direction: column; gap: 4px; }
.ci-inside-spec dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ci-mute);
}
.ci-inside-spec dd {
	font-size: 15px;
	font-weight: 600;
	color: var(--ci-ink);
	margin: 0;
	line-height: 1.6;
}

.ci-inside-promise {
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
	counter-reset: promise;
}
.ci-inside-promise li {
	background: #fff;
	border: 1px solid var(--ci-border);
	border-left: 4px solid var(--ci-orange);
	padding: 20px 24px 20px 64px;
	position: relative;
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--ci-body);
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-inside-promise li::before {
	counter-increment: promise;
	content: counter(promise);
	position: absolute;
	left: 20px;
	top: 18px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ci-orange);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
.ci-inside-promise strong {
	color: var(--ci-orange-deep);
	font-weight: 700;
}

/* モバイル対応 */
@media (max-width: 768px) {
	.ci-voice-grid { grid-template-columns: 1fr; gap: 20px; }
	.ci-voice-fig .ci-img-placeholder { min-height: 160px; }
	body.ci .ci-voice-fig img { height: 180px; }
	.ci-voice-body { padding: 22px 20px; }
	.ci-voice-body h3 { font-size: 16px; }

	.ci-voice-hero { grid-template-columns: 1fr; gap: 24px; }
	.ci-voice-hero-fig .ci-img-placeholder { min-height: 220px; }
	body.ci .ci-voice-hero-fig img { min-height: 220px; }
	.ci-voice-hero-body h2 { font-size: 20px; }
	.ci-voice-profile { grid-template-columns: 1fr; padding: 16px 18px; }

	.ci-voice-quote { padding: 22px 24px; font-size: 17px; line-height: 1.7; }
	.ci-voice-qa-item { padding: 20px 22px; }
	.ci-voice-q { font-size: 15px; }
	.ci-voice-a p { font-size: 14px; }

	.ci-voice-timeline li { grid-template-columns: 64px 1fr; padding: 14px 16px; }
	.ci-voice-time { font-size: 14px; }
	.ci-voice-timeline strong { font-size: 14px; }

	.ci-inside-feature { grid-template-columns: 1fr; gap: 20px; }
	.ci-inside-feature-fig .ci-img-placeholder { min-height: 200px; }
	.ci-inside-spec { padding: 18px 20px; }
	.ci-inside-promise li { padding: 18px 18px 18px 58px; font-size: 13.5px; }
	.ci-inside-promise li::before { left: 14px; width: 28px; height: 28px; font-size: 13px; }
}

/* ============================================================
 * v2: FAQ (faq.html)
 * ============================================================ */

/* カテゴリリンク群 */
.ci-faq-nav {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.ci-faq-nav a {
	display: inline-block;
	padding: 10px 18px;
	background: #fff;
	border: 1px solid var(--ci-border);
	color: var(--ci-body);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.ci-faq-nav a:hover { background: var(--ci-orange); color: #fff; border-color: var(--ci-orange); }

/* .ci-faq-list / dt / dd の本体スタイルは上方 L1801〜「FAQ」ブロックに集約。
   ci-faq-item でラップした統一構造（ci-faq-list--accordion）に一本化済み。 */

@media (max-width: 768px) {
	.ci-faq-nav { gap: 8px; padding: 0 8px; }
	.ci-faq-nav a { padding: 8px 12px; font-size: 12px; }
}

/* ヒント表示用（インタビュー骨組み） */
.ci-voice-hint::before { content: "💡 "; }

/* 社長メッセージ専用カード（横長・大きめ） */
.ci-voice-feature {
	display: grid;
	grid-template-columns: 480px 1fr;
	gap: 0;
	max-width: 1080px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--ci-border);
	border-top: 4px solid var(--ci-orange);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ci-voice-feature:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(232,115,28,0.18); }
.ci-voice-feature-fig { margin: 0; overflow: hidden; }
.ci-voice-feature-fig .ci-img-placeholder { min-height: 360px; height: 100%; font-size: 18px; }
body.ci .ci-voice-feature-fig img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.ci-voice-feature-body {
	padding: 40px 44px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
}
.ci-voice-feature-body h3 {
	font-size: 26px;
	font-weight: 700;
	color: var(--ci-ink);
	line-height: 1.5;
	margin: 0;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-voice-feature-body .ci-voice-name {
	font-size: 14px;
	color: var(--ci-orange-deep);
	font-weight: 700;
}
.ci-voice-feature-body p {
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--ci-body);
	margin: 0;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-voice-feature .ci-voice-more {
	margin-top: 8px;
	font-size: 15px;
}

@media (max-width: 768px) {
	.ci-voice-feature { grid-template-columns: 1fr; }
	.ci-voice-feature-fig .ci-img-placeholder { min-height: 240px; height: 240px; }
	body.ci .ci-voice-feature-fig img { min-height: 240px; height: 240px; }
	.ci-voice-feature-body { padding: 26px 22px; }
	.ci-voice-feature-body h3 { font-size: 20px; }
}

/* ============================================================
 * v2: 採用 募集職種カード（recruit.html）
 * ============================================================ */
.ci-recruit-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 1080px;
	margin: 0 auto;
}
.ci-recruit-card {
	background: #fff;
	border: 1px solid var(--ci-border);
	border-top: 4px solid var(--ci-orange);
	padding: 28px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ci-recruit-tag {
	display: inline-block;
	padding: 4px 12px;
	background: var(--ci-bg2);
	color: var(--ci-orange-deep);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	align-self: flex-start;
}
.ci-recruit-card h3 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-recruit-spec {
	margin: 0;
	display: grid;
	gap: 12px;
	padding: 18px 22px;
	background: var(--ci-bg2);
	border-left: 4px solid var(--ci-orange);
}
.ci-recruit-spec div { display: flex; flex-direction: column; gap: 4px; }
.ci-recruit-spec dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ci-mute);
}
.ci-recruit-spec dd {
	font-size: 14px;
	font-weight: 600;
	color: var(--ci-ink);
	margin: 0;
	line-height: 1.7;
}
.ci-recruit-card .ci-cta-button {
	align-self: flex-start;
	margin-top: auto;
	padding: 12px 28px;
	font-size: 14px;
}

@media (max-width: 768px) {
	.ci-recruit-grid { grid-template-columns: 1fr; gap: 18px; }
	.ci-recruit-card { padding: 22px 22px 26px; }
	.ci-recruit-card h3 { font-size: 18px; }
	.ci-recruit-spec { padding: 14px 16px; }
}

/* ============================================================
 * v2: TOPページ「介護業界に強い」訪問看護DX PRブロック
 * ============================================================ */
.ci-kaigo-promo {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 36px;
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 0;
	overflow: hidden;
	align-items: stretch;
}
.ci-kaigo-promo-fig { margin: 0; overflow: hidden; aspect-ratio: 992 / 1072; }
body.ci .ci-kaigo-promo-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ci-kaigo-promo-body { padding: 24px 32px 24px 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ci-kaigo-promo-tag {
	display: inline-block;
	padding: 4px 12px;
	background: var(--ci-orange);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	align-self: flex-start;
}
.ci-kaigo-promo h3 {
	font-size: 24px;
	font-weight: 700;
	color: var(--ci-ink);
	line-height: 1.5;
	margin: 0;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-kaigo-promo p {
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--ci-body);
	margin: 0;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}
.ci-kaigo-promo-actions { margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.ci-kaigo-promo-actions .ci-cta-button { padding: 12px 28px; font-size: 14px; }

@media (max-width: 768px) {
	.ci-kaigo-promo { grid-template-columns: 1fr; gap: 0; }
	/* 縦長フレームのレターボックス余白を解消：画像の実比率で表示 */
	.ci-kaigo-promo-fig { aspect-ratio: auto; }
	body.ci .ci-kaigo-promo-fig img { width: 100%; height: auto; min-height: 0; object-fit: contain; }
	.ci-kaigo-promo-body { padding: 24px 22px; }
	.ci-kaigo-promo h3 { font-size: 18px; }
}

/* ============================================================
 * 代表メッセージ（company.html）— HapInS風 落ち着いた2カラム
 * ============================================================ */
.ci-message-section {
	position: relative;
	padding: 96px 8% 120px;
	background: var(--ci-bg, #FFFBF3);
	overflow: hidden;
}
.ci-message-watermark {
	font-family: "Georgia", "Times New Roman", serif;
	font-size: 96px;
	font-weight: 300;
	letter-spacing: 0.08em;
	color: rgba(42, 33, 24, 0.06);
	line-height: 1;
	margin-bottom: -28px;
	pointer-events: none;
	user-select: none;
}
.ci-message-head {
	position: relative;
	margin-bottom: 56px;
	background: none;
	box-shadow: none;
	padding: 0;
}
.ci-message-head h2 {
	font-size: 22px;
	font-weight: 500;
	color: var(--ci-ink, #2A2118);
	letter-spacing: 0.08em;
	margin: 0 0 14px;
}
.ci-message-line {
	display: block;
	width: 32px;
	height: 1px;
	background: var(--ci-ink, #2A2118);
}
.ci-message-cta {
	text-align: center;
	margin-top: 48px;
	position: relative;
	z-index: 1;
}
body.ci .ci-message-cta .ci-cta-button {
	display: inline-block;
}
.ci-message-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: stretch;
}
.ci-message-body {
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-size: 15px;
	line-height: 2;
	color: var(--ci-body, #3A2F1F);
	letter-spacing: 0.04em;
}
.ci-message-body p { margin: 0; }
.ci-message-signature {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.ci-message-title {
	font-size: 13px;
	color: var(--ci-body-soft, #5A4A35);
	letter-spacing: 0.1em;
}
.ci-message-name {
	font-size: 26px;
	font-weight: 400;
	color: var(--ci-ink, #2A2118);
	letter-spacing: 0.2em;
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
}
.ci-message-figure {
	margin: 0;
	overflow: hidden;
	background: var(--ci-bg2, #FBF4E5);
	align-self: stretch;
	position: relative;
}
.ci-message-figure .ci-img-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	letter-spacing: 0.2em;
	color: rgba(42, 33, 24, 0.35);
}
body.ci .ci-message-figure img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

@media (max-width: 768px) {
	.ci-message-section { padding: 56px 6% 72px; }
	.ci-message-watermark { font-size: 56px; margin-bottom: -16px; }
	.ci-message-head { margin-bottom: 32px; }
	.ci-message-head h2 { font-size: 18px; }
	.ci-message-grid { grid-template-columns: 1fr; gap: 28px; }
	.ci-message-figure { aspect-ratio: 3 / 4; order: -1; }
	.ci-message-body { font-size: 14px; line-height: 1.9; gap: 18px; }
	.ci-message-name { font-size: 22px; }
}

/* ============================================================
 * 数字で見るキャップインフォ（recruit.html）
 * ============================================================ */
.ci-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.ci-stat-card {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 28px 20px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	position: relative;
}
.ci-stat-card::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: 0;
	height: 3px;
	background: var(--ci-orange);
}
.ci-stat-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ci-body-soft, #5A4A35);
	letter-spacing: 0.05em;
}
.ci-stat-value {
	font-size: 44px;
	font-weight: 700;
	color: var(--ci-orange-deep, #C25410);
	line-height: 1.1;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: "Times New Roman", "Yu Mincho", "游明朝", serif;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}
.ci-stat-unit {
	font-size: 16px;
	font-weight: 600;
	color: var(--ci-body, #3A2F1F);
	font-family: var(--ci-font);
	letter-spacing: 0.04em;
}
/* 未確定値のプレースホルダー（◯）を数字のベースラインに合わせて下げる */
.ci-stat-ph {
	display: inline-block;
	transform: translateY(0.12em);
}
.ci-stat-note {
	font-size: 12px;
	color: var(--ci-mute, #A0826B);
	margin-top: 2px;
}
.ci-stats-note {
	max-width: 1080px;
	margin: 16px auto 0;
	font-size: 12px;
	color: var(--ci-mute, #A0826B);
	text-align: right;
}

@media (max-width: 768px) {
	.ci-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ci-stat-card { padding: 22px 12px 20px; }
	.ci-stat-value { font-size: 34px; }
	.ci-stat-unit { font-size: 14px; }
	.ci-stats-note { font-size: 11px; }
}

/* ============================================================
 * ヒーロースライダー（index.html）
 * ============================================================ */
.ci-hero-slider {
	position: relative;
	width: 100%;
	height: 380px;
	overflow: hidden;
	background: var(--ci-bg2, #FBF4E5);
}
.ci-hero-slides {
	position: relative;
	width: 100%;
	height: 100%;
}
.ci-hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8%;
	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.85s ease, visibility 0.85s ease;
	color: #fff;
}
.ci-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}
.ci-hero-slide.is-exit-left {
	opacity: 0;
	visibility: visible;
	transform: translateX(-100%);
}
@media (prefers-reduced-motion: reduce) {
	.ci-hero-slide,
	.ci-hero-slide.is-active,
	.ci-hero-slide.is-exit-left { transition: opacity 0.3s ease, visibility 0.3s ease; transform: none; }
	.ci-hero-slide:not(.is-active) { opacity: 0; visibility: hidden; }
}

/* スライド別背景（後で実画像に差し替え可） */
.ci-hero-slide--ses {
	background:
		radial-gradient(900px 500px at 80% 30%, rgba(255,255,255,0.18), transparent 70%),
		linear-gradient(135deg, #C25410 0%, #E8731C 50%, #F5A663 100%);
}
.ci-hero-slide--dx {
	background:
		radial-gradient(900px 500px at 20% 70%, rgba(255,255,255,0.20), transparent 70%),
		linear-gradient(135deg, #0E3A5F 0%, #1F6B8C 50%, #4FA3C7 100%);
}
.ci-hero-slide--case {
	background:
		radial-gradient(900px 500px at 70% 30%, rgba(255,255,255,0.20), transparent 70%),
		linear-gradient(135deg, #1B5E5E 0%, #2A8A8A 50%, #6DBDBD 100%);
}

/* 魅力スライド（写真背景＋暗色オーバーレイで白文字を可読化） */
.ci-hero-slide--kosodate {
	background:
		linear-gradient(135deg, rgba(20,15,10,0.55) 0%, rgba(20,15,10,0.35) 100%),
		url("../img/index/kosodate.webp") center / cover no-repeat;
}
.ci-hero-slide--itnomi {
	background:
		linear-gradient(135deg, rgba(20,15,10,0.55) 0%, rgba(20,15,10,0.35) 100%),
		url("../img/index/index_itnomikai.webp") center / cover no-repeat;
}
.ci-hero-slide--zadankai {
	background:
		linear-gradient(135deg, rgba(20,15,10,0.55) 0%, rgba(20,15,10,0.35) 100%),
		url("../img/torikumi/torikumi-photo03.webp") center / cover no-repeat;
}

.ci-hero-inner {
	max-width: 1080px;
	width: 100%;
	text-align: center;
	transform: translateY(12px);
	opacity: 0;
	transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
}
.ci-hero-slide.is-active .ci-hero-inner {
	transform: translateY(0);
	opacity: 1;
}
.ci-hero-tag {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.3em;
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	margin-bottom: 18px;
}
body.ci .ci-hero-title {
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	margin: 0 0 18px;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.ci-hero-text {
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.05em;
	margin: 0 0 14px;
	color: rgba(255,255,255,0.95);
	text-shadow: 0 1px 6px rgba(0,0,0,0.2);
	position: relative;
	min-height: 7.6em;
}
.ci-hero-phrase {
	display: block;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	margin-bottom: 0;
	transition: opacity 0.5s ease, max-height 0.5s ease, margin-bottom 0.5s ease;
	pointer-events: none;
	white-space: pre-wrap;
}
.ci-hero-phrase.is-active,
.ci-hero-phrase.is-shown {
	opacity: 1;
	max-height: 10em;
	margin-bottom: 0.3em;
	pointer-events: auto;
}
.ci-hero-phrase.is-active:last-child,
.ci-hero-phrase.is-shown:last-child {
	margin-bottom: 0;
}
/* タイプライターのカーソル（点滅） */
.ci-hero-phrase.is-typing::after {
	content: '';
	display: inline-block;
	width: 2px;
	height: 1em;
	background: currentColor;
	vertical-align: -0.15em;
	margin-left: 3px;
	animation: ci-cursor-blink 0.7s steps(2, end) infinite;
}
@keyframes ci-cursor-blink {
	0%, 50%   { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}
/* ホバー / フォーカス時は全フレーズを即時展開 */
.ci-hero-slider:hover .ci-hero-slide.is-active .ci-hero-phrase,
.ci-hero-slider:focus-within .ci-hero-slide.is-active .ci-hero-phrase {
	opacity: 1;
	max-height: 10em;
	margin-bottom: 0.3em;
	pointer-events: auto;
}
.ci-hero-slider:hover .ci-hero-slide.is-active .ci-hero-phrase:last-child,
.ci-hero-slider:focus-within .ci-hero-slide.is-active .ci-hero-phrase:last-child {
	margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
	.ci-hero-phrase { transition: none; }
}
body.ci .ci-hero-credit {
	position: absolute;
	left: 6px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	width: fit-content;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	z-index: 2;
}
body.ci .ci-hero-credit-logo {
	display: block;
	height: 88px;
	width: auto;
	filter: drop-shadow(0 1px 5px rgba(0,0,0,0.3));
}
body.ci .ci-hero-credit-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 4px;
}
body.ci .ci-hero-credit-note-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.95);
	text-shadow: 0 1px 5px rgba(0,0,0,0.35);
	white-space: nowrap;
}
body.ci .ci-hero-credit-note-name {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	text-shadow: 0 1px 5px rgba(0,0,0,0.35);
}
@media (max-width: 768px) {
	/* モバイルでは左下の絶対配置をやめ、CTAボタンと同じ行（横並び）に置く。
	   絶対配置のままだと短いスライド内でCTAと重なるため。ロゴ＋CTAを
	   .ci-hero-cta-row で中央寄せの横並びにする（重ならず導線の近接も保つ）。 */
	body.ci .ci-hero-credit {
		position: static;
		left: auto; bottom: auto;
		width: auto;
		margin: 0;
		opacity: 1;
	}
	body.ci .ci-hero-credit-logo { height: 34px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35)); }
	body.ci .ci-hero-credit-note { gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
	body.ci .ci-hero-cta-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		flex-wrap: wrap;
	}
	body.ci .ci-hero-credit-note-label { font-size: 11px; }
	body.ci .ci-hero-credit-note-name { font-size: 12.5px; }
}
body.ci .ci-hero-cta {
	display: inline-block;
	margin-top: 2px;
	padding: 12px 32px;
	background: #fff;
	color: var(--ci-ink, #2A2118);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
body.ci .ci-hero-cta:hover {
	background: rgba(255,255,255,0.88);
	color: var(--ci-orange-deep, #C25410);
	transform: translateY(-2px);
}

/* 前後ナビ */
.ci-hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.18);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.35);
	cursor: pointer;
	transition: background 0.2s ease;
}
.ci-hero-nav:hover { background: rgba(255,255,255,0.32); }
.ci-hero-nav svg { width: 22px; height: 22px; }
.ci-hero-nav--prev { left: 16px; }
.ci-hero-nav--next { right: 16px; }

/* ドット */
.ci-hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	display: flex;
	justify-content: center;
	gap: 10px;
	z-index: 2;
}
.ci-hero-dot {
	width: 30px;
	height: 3px;
	background: rgba(255,255,255,0.4);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background 0.25s ease, width 0.25s ease;
}
.ci-hero-dot.is-active {
	background: #fff;
	width: 48px;
}

@media (max-width: 768px) {
	.ci-hero-slider { height: 360px; } /* case スライドのロゴ+クレジット+CTAが収まる高さ。見切れ・重なり防止 */
	/* 左右パディングを矢印(幅34px+端5px=約39px)より広く取り、中央テキストが矢印に被らないようにする */
	.ci-hero-slide { padding: 0 46px; }
	/* base が body.ci .ci-hero-title/-cta(0,2,0) のため body.ci を付けないと
	   モバイル指定が詳細度負けし、見出しが38pxのまま3行に折れて縦を圧迫する */
	body.ci .ci-hero-title { font-size: 22px; letter-spacing: 0.04em; line-height: 1.35; }
	.ci-hero-text { font-size: 13px; line-height: 1.8; }
	.ci-hero-tag { font-size: 10px; letter-spacing: 0.25em; margin-bottom: 12px; }
	body.ci .ci-hero-cta { padding: 10px 22px; font-size: 13px; }
	.ci-hero-nav { width: 34px; height: 34px; }
	.ci-hero-nav svg { width: 18px; height: 18px; }
	.ci-hero-nav--prev { left: 5px; }
	.ci-hero-nav--next { right: 5px; }
	.ci-hero-dot { width: 22px; }
	.ci-hero-dot.is-active { width: 36px; }
}

/* ============================================================
 * 事業内容（トップページ）
 * ============================================================ */
.ci-business-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	max-width: 1320px;
	margin: 0 auto;
}
.ci-business-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ci-border);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ci-business-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(232,115,28,0.15);
	border-color: var(--ci-orange);
}
.ci-business-fig {
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ci-bg2);
}
body.ci .ci-business-fig img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.ci-business-card:hover .ci-business-fig img { transform: scale(1.05); }

.ci-business-body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.ci-business-body .ci-en-sub {
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--ci-mute, #A0826B);
	margin-bottom: 8px;
}
body.ci .ci-business-card h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--ci-ink);
	line-height: 1.4;
	margin: 0 0 10px;
	letter-spacing: 0.03em;
}
body.ci .ci-business-card p {
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--ci-body-soft);
	margin: 0 0 12px;
	flex: 1;
}
.ci-business-card .ci-arrow {
	font-size: 13px;
	font-weight: 600;
	color: var(--ci-orange-deep);
}
.ci-business-more {
	text-align: center;
	margin-top: 36px;
}

@media (max-width: 768px) {
	.ci-business-grid { grid-template-columns: 1fr; gap: 14px; }
	body.ci .ci-business-card h3 { font-size: 16px; }
	.ci-business-body { padding: 18px 20px 20px; }
	.ci-business-more { margin-top: 24px; }
}

/* ===========================================================
 * キャッチカード背景：青グラデーションのゆらぎアニメーション
 * =========================================================== */
body.ci .ci-catch-card {
	background: radial-gradient(circle 600px at 50% -100px, #097B9C, #D9F4F0);
	background-size: 200% 200%;
	animation: ci-catch-drift 14s ease-in-out infinite;
}

@keyframes ci-catch-drift {
	0%   { background-position: 50% 0%; }
	50%  { background-position: 50% 70%; }
	100% { background-position: 50% 0%; }
}

@media (prefers-reduced-motion: reduce) {
	body.ci .ci-catch-card { animation: none; }
}

/* ===========================================================
 * アコーディオンFAQ：クリックで開閉
 * .ci-faq-list--accordion + 各 .ci-faq-item の dt クリックで .is-open
 * =========================================================== */
body.ci .ci-faq-list--accordion .ci-faq-item dt {
	cursor: pointer;
	padding-right: 56px;
	user-select: none;
	transition: background 0.2s ease;
}
body.ci .ci-faq-list--accordion .ci-faq-item dt:hover {
	background: var(--ci-bg);
}
body.ci .ci-faq-list--accordion .ci-faq-item dt::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--ci-orange);
	border-bottom: 2px solid var(--ci-orange);
	transform: translateY(-65%) rotate(45deg);
	transition: transform 0.3s ease;
}
body.ci .ci-faq-list--accordion .ci-faq-item.is-open dt::after {
	transform: translateY(-30%) rotate(-135deg);
}
body.ci .ci-faq-list--accordion .ci-faq-item dd {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.35s ease;
}
body.ci .ci-faq-list--accordion .ci-faq-item dd .ci-faq-mark {
	visibility: hidden;
}
body.ci .ci-faq-list--accordion .ci-faq-item.is-open dd {
	max-height: 600px;
	padding-top: 18px;
	padding-bottom: 18px;
}
body.ci .ci-faq-list--accordion .ci-faq-item.is-open dd .ci-faq-mark {
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	body.ci .ci-faq-list--accordion .ci-faq-item dd,
	body.ci .ci-faq-list--accordion .ci-faq-item dt::after {
		transition: none;
	}
}

/* ============================================================
 * system.html v2: 取得資格 / 対応フェーズ / 役割経験 / 業界実績
 * ============================================================ */

/* --- 取得資格 --- */
.ci-cert-grid {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.ci-cert-grid.ci-cert-grid--2x2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 880px;
}
.ci-cert-group {
	background: var(--ci-card, #fff);
	border: 1px solid var(--ci-border);
	padding: 22px 22px 18px;
}
body.ci .ci-cert-group h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--ci-orange-deep);
	letter-spacing: 0.05em;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--ci-orange);
}
body.ci .ci-cert-group ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
body.ci .ci-cert-group li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--ci-border);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ci-body);
}
.ci-cert-group li:last-child { border-bottom: none; }
.ci-cert-count {
	font-weight: 700;
	color: var(--ci-orange-deep);
	font-size: 14.5px;
	white-space: nowrap;
	flex-shrink: 0;
}
@media (max-width: 768px) {
	.ci-cert-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* --- 対応フェーズ --- */
.ci-phase-flow {
	list-style: none;
	padding: 0;
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
}
.ci-phase-step {
	background: var(--ci-card, #fff);
	border: 1px solid var(--ci-border);
	padding: 18px 14px 22px;
	text-align: center;
	position: relative;
}
.ci-phase-step + .ci-phase-step { border-left: none; }
.ci-phase-step::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -7px;
	width: 12px;
	height: 12px;
	transform: translateY(-50%) rotate(45deg);
	border-top: 2px solid var(--ci-orange);
	border-right: 2px solid var(--ci-orange);
	background: transparent;
	z-index: 2;
}
.ci-phase-step:last-child::after { display: none; }
.ci-phase-no {
	display: block;
	font-size: 11px;
	color: var(--ci-orange-deep);
	font-weight: 700;
	letter-spacing: 0.2em;
	margin-bottom: 6px;
}
body.ci .ci-phase-step h3 {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--ci-ink);
	letter-spacing: 0.05em;
}
body.ci .ci-phase-step p {
	font-size: 12px;
	margin: 0;
	line-height: 1.6;
	color: var(--ci-body-soft);
}
@media (max-width: 768px) {
	.ci-phase-flow { grid-template-columns: repeat(2, 1fr); }
	.ci-phase-step + .ci-phase-step { border-left: 1px solid var(--ci-border); }
	.ci-phase-step::after { display: none; }
}

/* --- 役割経験 --- */
body.ci .ci-role-grid {
	list-style: none;
	padding: 0;
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}
.ci-role-card {
	background: var(--ci-card, #fff);
	border: 1px solid var(--ci-border);
	padding: 22px 16px 20px;
	text-align: center;
}
.ci-role-tag {
	display: inline-block;
	padding: 4px 10px;
	background: var(--ci-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 12px;
}
body.ci .ci-role-card h3 {
	font-size: 14px;
	margin: 0 0 10px;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
}
.ci-role-count {
	font-size: 13px;
	color: var(--ci-body-soft);
	margin: 0 0 12px;
	line-height: 1;
}
.ci-role-count strong {
	font-size: 32px;
	color: var(--ci-orange-deep);
	font-weight: 700;
	margin-right: 2px;
	letter-spacing: 0;
}
body.ci .ci-role-card .ci-role-desc {
	font-size: 12px;
	line-height: 1.7;
	color: var(--ci-body);
	margin: 0;
	text-align: left;
}
@media (max-width: 768px) {
	/* base が body.ci .ci-role-grid(詳細度0,2,0) のため、同等の詳細度で上書きしないと
	   5列のまま残りスマホで大きく横溢れする。body.ci を付けて確実に2列へ。 */
	/* minmax(0,1fr) で列が min-content 以下にも縮めるようにし、カード内の長い文字列
	   （Java／C#／PHP／C/C++／VB.NET 等）で列が広がって横溢れするのを防ぐ */
	body.ci .ci-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 業界別実績 --- */
body.ci .ci-industry-grid {
	list-style: none;
	padding: 0;
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.ci-industry-card {
	background: var(--ci-card, #fff);
	border: 1px solid var(--ci-border);
	border-left: 3px solid var(--ci-orange);
	padding: 18px 22px 20px;
}
body.ci .ci-industry-card h3 {
	font-size: 16px;
	margin: 0 0 12px;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
}
.ci-industry-stats {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.ci-industry-stat {
	font-size: 12px;
	padding: 4px 10px;
	background: var(--ci-bg2, #FBF4E5);
	color: var(--ci-body);
}
.ci-industry-stat strong {
	color: var(--ci-orange-deep);
	font-weight: 700;
}
body.ci .ci-industry-card .ci-industry-count {
	font-size: 13px;
	color: var(--ci-body-soft);
	margin: 0 0 10px;
	line-height: 1.2;
}
body.ci .ci-industry-card .ci-industry-count strong {
	font-size: 28px;
	color: var(--ci-orange-deep);
	font-weight: 700;
	margin: 0 4px;
	letter-spacing: 0;
}
body.ci .ci-industry-card p {
	font-size: 13px;
	line-height: 1.7;
	color: var(--ci-body-soft);
	margin: 0;
}
@media (max-width: 768px) {
	.ci-industry-grid { grid-template-columns: 1fr; }
}

/* --- 代表的なプロジェクト事例 --- */
body.ci .ci-case-grid {
	list-style: none;
	padding: 0;
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.ci-case-card {
	background: var(--ci-card, #fff);
	border: 1px solid var(--ci-border);
	border-left: 3px solid var(--ci-orange);
	padding: 22px 24px 24px;
}
.ci-case-industry {
	display: inline-block;
	padding: 4px 10px;
	background: var(--ci-bg2, #FBF4E5);
	color: var(--ci-orange-deep);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
}
body.ci .ci-case-card h3 {
	font-size: 16px;
	margin: 0 0 16px;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
	line-height: 1.45;
}
body.ci .ci-case-card dl.ci-case-meta {
	margin: 0;
	display: grid;
	grid-template-columns: 56px 1fr;
	row-gap: 8px;
	column-gap: 14px;
}
body.ci .ci-case-meta dt {
	font-size: 12px;
	color: var(--ci-mute);
	margin: 0;
	padding: 0;
	font-weight: 600;
	letter-spacing: 0.05em;
}
body.ci .ci-case-meta dd {
	font-size: 13.5px;
	color: var(--ci-body);
	margin: 0;
	line-height: 1.55;
}
@media (max-width: 768px) {
	body.ci .ci-case-grid { grid-template-columns: 1fr; }
}

/* --- 対応エリア・働き方 --- */
body.ci .ci-area-grid {
	list-style: none;
	padding: 0;
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
body.ci .ci-area-grid--2col {
	max-width: 840px;
	grid-template-columns: repeat(2, 1fr);
}
.ci-area-item {
	background: var(--ci-card, #fff);
	border: 1px solid var(--ci-border);
	padding: 24px 22px;
	text-align: center;
}
body.ci .ci-area-item h3 {
	font-size: 16px;
	margin: 0 0 12px;
	color: var(--ci-orange-deep);
	letter-spacing: 0.05em;
}
body.ci .ci-area-item p {
	font-size: 13px;
	line-height: 1.7;
	color: var(--ci-body);
	margin: 0;
}
@media (max-width: 768px) {
	body.ci .ci-area-grid { grid-template-columns: 1fr; }
}

/* --- 開発スタンス(2x2) --- */
body.ci .ci-stance-grid {
	list-style: none;
	padding: 0;
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.ci-stance-card {
	background: var(--ci-card, #fff);
	border: 1px solid var(--ci-border);
	padding: 28px 30px 26px;
	position: relative;
}
.ci-stance-no {
	display: inline-block;
	font-size: 28px;
	font-weight: 700;
	color: var(--ci-orange);
	letter-spacing: 0.06em;
	margin-bottom: 10px;
	line-height: 1;
	font-family: "Georgia", serif;
}
body.ci .ci-stance-card h3 {
	font-size: 17px;
	margin: 0 0 12px;
	color: var(--ci-ink);
	letter-spacing: 0.04em;
}
body.ci .ci-stance-card p {
	font-size: 14px;
	line-height: 1.85;
	color: var(--ci-body);
	margin: 0;
}
@media (max-width: 768px) {
	body.ci .ci-stance-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * recruit.html v2: 社員インタビュー（アコーディオン式）
 * ============================================================ */

/* 例文の注意書きバナー */
body.ci .ci-voice-disclaimer {
	max-width: 980px;
	margin: 0 auto 28px;
	padding: 16px 22px;
	background: #FFF6E5;
	border-left: 4px solid var(--ci-orange);
	border-radius: 0;
}
body.ci .ci-voice-disclaimer p {
	margin: 0;
	font-size: 13px;
	line-height: 1.75;
	color: var(--ci-body);
}
body.ci .ci-voice-disclaimer strong {
	color: var(--ci-orange-deep);
}

/* ペルソナ別カラー（カード・パネル両方に適用） */
body.ci [data-persona="new"]   { --persona-color: #E8731C; --persona-color-soft: #F5A663; --persona-gradient: linear-gradient(135deg, #C25410 0%, #E8731C 50%, #F5A663 100%); }
body.ci [data-persona="vet"]   { --persona-color: #1F6B8C; --persona-color-soft: #4FA3C7; --persona-gradient: linear-gradient(135deg, #0E3A5F 0%, #1F6B8C 50%, #4FA3C7 100%); }
body.ci [data-persona="sales"] { --persona-color: #1B5E5E; --persona-color-soft: #6DBDBD; --persona-gradient: linear-gradient(135deg, #1B5E5E 0%, #2A8A8A 50%, #6DBDBD 100%); }

/* ===== 横並び3カード（プレビュー） ===== */
body.ci .ci-voice-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1080px;
	margin: 0 auto 36px;
}
body.ci button.ci-voice-card {
	all: unset;
	cursor: pointer;
	background: #fff;
	border: 1px solid var(--ci-border);
	border-top: 4px solid var(--persona-color, var(--ci-orange));
	padding: 32px 24px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	position: relative;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
	box-sizing: border-box;
}
body.ci button.ci-voice-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}
body.ci button.ci-voice-card:focus-visible {
	outline: 2px solid var(--persona-color);
	outline-offset: 2px;
}
body.ci button.ci-voice-card.is-active {
	background: var(--persona-gradient);
	border-color: var(--persona-color);
	box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
body.ci button.ci-voice-card.is-active .ci-voice-avatar {
	background: #fff;
	color: var(--persona-color);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
body.ci button.ci-voice-card.is-active .ci-voice-persona-label,
body.ci button.ci-voice-card.is-active .ci-voice-card-number,
body.ci button.ci-voice-card.is-active .ci-voice-card-title,
body.ci button.ci-voice-card.is-active .ci-voice-card-meta {
	color: #fff;
}
body.ci button.ci-voice-card.is-active .ci-voice-persona-label {
	border-color: rgba(255,255,255,0.6);
}
body.ci button.ci-voice-card.is-active .ci-voice-card-cta {
	background: #fff;
	color: var(--persona-color);
}

.ci-voice-card-number {
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--persona-color);
	font-weight: 700;
	font-family: "Georgia", serif;
	margin-top: 4px;
}
.ci-voice-card-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ci-ink);
	line-height: 1.5;
	letter-spacing: 0.03em;
	min-height: 3em;
	display: flex;
	align-items: center;
	margin: 4px 0;
}
.ci-voice-card-meta {
	font-size: 12px;
	color: var(--ci-body-soft);
	letter-spacing: 0.04em;
	line-height: 1.5;
}
.ci-voice-card-cta {
	display: inline-block;
	margin-top: 14px;
	padding: 8px 20px;
	background: var(--persona-color);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	transition: opacity 0.2s ease;
}
body.ci button.ci-voice-card:hover .ci-voice-card-cta {
	opacity: 0.92;
}

/* ===== 詳細パネル ===== */
body.ci .ci-voice-panels {
	max-width: 1080px;
	margin: 0 auto;
}
body.ci .ci-voice-panel {
	background: #fff;
	border: 1px solid var(--persona-color, var(--ci-border));
	border-top: 4px solid var(--persona-color, var(--ci-orange));
	padding: 36px 40px 32px;
	position: relative;
}
body.ci .ci-voice-panel[hidden] { display: none; }
body.ci .ci-voice-panel.is-active {
	animation: ci-voice-panel-fade 0.4s ease;
}
@keyframes ci-voice-panel-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	body.ci .ci-voice-panel.is-active { animation: none; }
}
@media (max-width: 768px) {
	body.ci .ci-voice-cards { grid-template-columns: 1fr; gap: 14px; }
	body.ci .ci-voice-panel { padding: 24px 20px; }
	.ci-voice-card-title { min-height: 0; }
}

/* ===== 旧 accordion CSS は残置（互換のため） ===== */
/* details/summary アコーディオン */
body.ci details.ci-voice-qa-item {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 0;
	overflow: hidden;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* details/summary アコーディオン */
body.ci details.ci-voice-qa-item {
	background: #fff;
	border: 1px solid var(--ci-border);
	padding: 0;
	overflow: hidden;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
body.ci details.ci-voice-qa-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--persona-gradient, var(--ci-orange));
}
body.ci details.ci-voice-qa-item:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	border-color: var(--persona-color, var(--ci-orange));
}
body.ci details.ci-voice-qa-item[open] {
	border-color: var(--persona-color, var(--ci-orange));
}

body.ci details.ci-voice-qa-item > summary {
	list-style: none;
	cursor: pointer;
	padding: 26px 64px 26px 36px;
	display: flex;
	align-items: center;
	gap: 28px;
	transition: background 0.2s ease;
	position: relative;
}
body.ci details.ci-voice-qa-item > summary::-webkit-details-marker { display: none; }
body.ci details.ci-voice-qa-item > summary::after {
	content: "";
	position: absolute;
	right: 28px;
	top: 50%;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--persona-color, var(--ci-orange));
	border-bottom: 2px solid var(--persona-color, var(--ci-orange));
	transform: translateY(-75%) rotate(45deg);
	transition: transform 0.25s ease;
}
body.ci details.ci-voice-qa-item[open] > summary::after {
	transform: translateY(-25%) rotate(-135deg);
}

/* ペルソナ表示（アバター + ラベル縦並び） */
.ci-voice-persona {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	min-width: 80px;
}
.ci-voice-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--persona-gradient, var(--ci-orange));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
	letter-spacing: 0;
}
.ci-voice-persona-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--persona-color, var(--ci-orange-deep));
	letter-spacing: 0.15em;
	padding: 3px 10px;
	background: rgba(255,255,255,0.0);
	border-top: 1px solid var(--persona-color, var(--ci-orange));
	border-bottom: 1px solid var(--persona-color, var(--ci-orange));
}

/* 例 バッジ：カード左上にコーナー配置 */
body.ci .ci-voice-badge.ci-voice-badge--corner {
	position: absolute;
	top: 0;
	left: 4px;
	z-index: 3;
	padding: 5px 12px 4px;
	background: var(--persona-color, var(--ci-orange));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* サマリーメイン部 */
.ci-voice-summary-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.ci-voice-number {
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--persona-color, var(--ci-mute));
	font-weight: 700;
	font-family: "Georgia", serif;
}
body.ci .ci-voice-summary-main .ci-voice-title {
	font-size: 21px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 0;
	letter-spacing: 0.04em;
	line-height: 1.45;
}
.ci-voice-meta {
	font-size: 12.5px;
	color: var(--ci-body-soft);
	letter-spacing: 0.05em;
	font-weight: 500;
}

/* 旧 ci-voice-summary-text は廃止予定。残骸用にスタイルなし */
.ci-voice-summary-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.ci-voice-number {
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--ci-mute);
	font-weight: 700;
	font-family: "Georgia", serif;
}
.ci-voice-role {
	font-size: 13px;
	color: var(--ci-body-soft, #5A4A35);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.ci-voice-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ci-ink);
	letter-spacing: 0.03em;
	line-height: 1.4;
}

.ci-voice-badge {
	display: inline-block;
	padding: 4px 12px;
	background: var(--persona-color, var(--ci-orange));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	flex-shrink: 0;
}

/* 詳細コンテンツラッパー */
body.ci .ci-voice-detail {
	padding: 0 28px 28px;
	background: linear-gradient(to bottom, var(--ci-bg2, #FBF4E5) 0%, #fff 80px);
}

/* プルクォート */
body.ci .ci-voice-pullquote {
	margin: 0 0 24px;
	padding: 22px 28px 22px 60px;
	position: relative;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--persona-color, var(--ci-orange-deep));
	background: #fff;
	border: 1px solid var(--ci-border);
	border-left: 4px solid var(--persona-color, var(--ci-orange));
	letter-spacing: 0.02em;
}
.ci-voice-quote-mark {
	position: absolute;
	left: 18px;
	top: 6px;
	font-size: 48px;
	font-family: "Georgia", serif;
	color: var(--persona-color-soft, var(--ci-orange-soft));
	line-height: 1;
	opacity: 0.7;
}

/* プロフィール */
body.ci .ci-voice-detail > dl.ci-voice-profile {
	margin: 0 0 20px;
	background: #fff;
	border: 1px solid var(--ci-border);
	border-left: 3px solid var(--persona-color, var(--ci-orange));
}

/* Q&A ペア */
body.ci .ci-voice-qa-pair {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed var(--ci-border);
}
body.ci .ci-voice-qa-pair:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}
body.ci .ci-voice-qa-q {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--persona-color, var(--ci-orange-deep));
	margin: 0 0 10px;
	padding-left: 32px;
	position: relative;
	letter-spacing: 0.02em;
	line-height: 1.6;
}
body.ci .ci-voice-qa-q::before {
	content: "Q";
	position: absolute;
	left: 0;
	top: 1px;
	background: var(--persona-color, var(--ci-orange));
	color: #fff;
	font-size: 12px;
	width: 24px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-family: "Georgia", serif;
}
body.ci .ci-voice-qa-text {
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--ci-body);
	margin: 0;
	padding-left: 32px;
	position: relative;
}
body.ci .ci-voice-qa-text::before {
	content: "A";
	position: absolute;
	left: 0;
	top: 2px;
	color: var(--persona-color, var(--ci-mute));
	font-size: 12px;
	width: 24px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--persona-color, var(--ci-border));
	font-weight: 700;
	font-family: "Georgia", serif;
	background: #fff;
}

@media (max-width: 768px) {
	body.ci details.ci-voice-qa-item > summary {
		padding: 16px 18px 16px 18px;
		flex-wrap: wrap;
		gap: 8px;
	}
	body.ci details.ci-voice-qa-item > summary::after { right: 16px; }
	body.ci details.ci-voice-qa-item > dl.ci-voice-profile,
	body.ci details.ci-voice-qa-item > .ci-voice-qa-pair {
		margin-left: 18px;
		margin-right: 18px;
	}
	.ci-voice-title { width: 100%; font-size: 13px; }
}

/* ============================================================
 * モバイル: 和文の改行位置を文節単位に統一（語中分断の防止）
 *   - keep-all / 無指定(normal) が混在し、「開発」「限度」「います」等が
 *     行をまたいで語中分断される問題を、文節単位の auto-phrase で解消する。
 *   - class 未指定のカード見出し(<h3>等)も body.ci .ci-main 配下で一括捕捉。
 *   - auto-phrase 非対応ブラウザ(iOS Safari 等)では normal にフォールバックし、
 *     自然な和文折返しになるため現状より悪化しない。
 *   - 金額・資格数などの white-space:nowrap は word-break では上書きされず維持。
 * ============================================================ */
@media (max-width: 768px) {
	/* 見出し・FAQの問い: 行長を均し、3〜数文字だけの孤立行を作らない */
	body.ci .ci-main h1,
	body.ci .ci-main h2,
	body.ci .ci-main h3,
	body.ci .ci-main h4,
	body.ci .ci-main dt {
		word-break: auto-phrase;
		line-break: strict;
		text-wrap: balance;
	}
	/* 本文・リスト・回答: 行を端まで詰める標準的な和文折返し。
	   auto-phrase だと文節を丸ごと次行へ送り、text-wrap:pretty は行を均すため
	   「まだ余白があるのに改行」してしまう。normal＋禁則(line-break:strict)で
	   1行を端まで使い切る（見出しは語を割らない方が綺麗なので balance のまま）。 */
	body.ci .ci-main p,
	body.ci .ci-main li,
	body.ci .ci-main dd,
	body.ci .ci-main p strong,
	body.ci .ci-main li strong,
	body.ci .ci-main dd strong {
		word-break: normal;
		line-break: strict;
		/* normal(文字単位)で行を端まで詰めつつ、pretty で最終行に数文字だけ残る
		   オーファンを回避（文字単位なので前行の余白は最小限のまま短い末行を防ぐ）。 */
		text-wrap: pretty;
	}
}

/* ============================================================
 * iOS Safari / Firefox 等（word-break: auto-phrase 非対応）向けの改行固定。
 *   Chrome 系は auto-phrase が文節解析で自然に折り返すが、Safari/Firefox は
 *   normal にフォールバックし語中で改行しうる。そこで「折り返してよい文節境界に
 *   <wbr> を入れ、それ以外では折り返さない（keep-all）」ことで全ブラウザ共通の
 *   改行位置に固定する。対象要素には HTML 側で class="ci-nb" を付与する。
 *   Chrome では @supports で auto-phrase を優先するため <wbr> は無害な保険となる。
 * ============================================================ */
@supports not (word-break: auto-phrase) {
	body.ci .ci-nb,
	body.ci .ci-main .ci-nb {
		word-break: keep-all;     /* <wbr>/空白以外では折り返さない */
		overflow-wrap: anywhere;  /* 1文節が画面幅を超える場合の安全弁 */
	}
}

/* ============================================================
 * モバイル: グリッドのスマホ段組み修正（横溢れ対策）。
 *   base が body.ci 付き(詳細度0,2,0)で定義されたグリッドは、同詳細度かつ
 *   base より後ろ（＝ファイル末尾の本ブロック）で上書きしないと多段組みのまま
 *   残り横スクロールが発生する。ここで確実に1列へ落とす。
 * ============================================================ */
@media (max-width: 768px) {
	/* 業界別実績（base: body.ci .ci-industry-grid = 3列、L4501 がこの位置より後ろにあったため
	   従来の上書きが効かず3列のまま溢れていた） */
	body.ci .ci-industry-grid { grid-template-columns: 1fr; }
}