/* ==========================================================================
   Page: services （lk-theme-dark / 黒背景）
   mock: /02_デザイン課/mockup/services.html
   ========================================================================== */

/* swell-reset の 100vw + calc(50% - 50vw) トリックはスクロールバー幅ぶん
   左にズレるので、services では section/footer を通常の 100% に戻す */
#body_wrap.lk-art.page .post_content > section,
#body_wrap.lk-art.page .post_content > footer {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---------- Hero ---------- */
.svc-hero {
	padding: clamp(120px, 14vw, 200px) 5% clamp(60px, 8vw, 100px);
	text-align: center;
	box-sizing: border-box;
}
.svc-hero__eyebrow {
	font-family: var(--f-en); font-size: 11px; letter-spacing: 0.32em;
	color: var(--paper-dim); text-transform: uppercase; margin-bottom: 28px;
}
/* swell-reset の h1 margin:0 を specificity で上書き */
#body_wrap.lk-art .post_content .svc-hero__title {
	font-family: var(--f-en) !important;
	font-weight: 300 !important;
	font-size: clamp(64px, 13vw, 180px) !important;
	line-height: 1 !important;
	letter-spacing: 0;
	margin: 0 0 40px 0 !important;
	color: var(--paper) !important;
}
/* swell-reset の p margin:0 を specificity で上書き */
#body_wrap.lk-art .post_content .svc-hero__lead {
	font-family: var(--f-jp);
	font-size: 15px;
	line-height: 2;
	color: var(--paper-dim);
	width: min(100%, 540px);
	margin: 0 auto !important;
}
.svc-hero__lead em {
	display: block;
	margin-top: 12px;
	font-family: var(--f-en);
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--paper-dim);
	text-transform: uppercase;
}

/* ---------- Business field (Venn) ---------- */
.svc-field {
	padding: clamp(40px, 5vw, 80px) 5%;
	border-top: 1px solid var(--line);
	text-align: center;
	box-sizing: border-box;
}
.svc-venn {
	position: relative;
	width: min(100%, 720px);
	aspect-ratio: 1.1 / 1;
	margin: 0 auto;
}
.svc-venn__circle {
	position: absolute;
	width: 56%;
	aspect-ratio: 1;
	border: 1px solid var(--line-mid);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: border-color 0.5s, background 0.5s;
}
.svc-venn__circle:hover {
	border-color: var(--navy-soft);
	background: rgba(92, 117, 184, 0.06);
}
.svc-venn__circle--top { top: 0; left: 50%; transform: translateX(-50%); }
.svc-venn__circle--bl  { bottom: 0; left: 2%; }
.svc-venn__circle--br  { bottom: 0; right: 2%; }
.svc-venn__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.svc-venn__circle--top .svc-venn__content { transform: translateY(-26%); }
.svc-venn__circle--bl  .svc-venn__content { transform: translate(-6%, 22%); }
.svc-venn__circle--br  .svc-venn__content { transform: translate(6%, 22%); }
.svc-venn__en {
	font-family: var(--f-en); font-size: 10px; letter-spacing: 0.3em;
	color: var(--navy-soft); text-transform: uppercase;
}
.svc-venn__jp {
	font-family: var(--f-jp); font-size: clamp(16px, 1.8vw, 22px);
	font-weight: 500; letter-spacing: 0.1em; color: var(--paper);
}

/* ---------- Performance ---------- */
.svc-perf {
	padding: clamp(80px, 10vw, 160px) 5%;
	border-top: 1px solid var(--line);
	box-sizing: border-box;
}
.svc-perf__inner {
	width: min(100%, 1180px);
	margin-inline: auto;
}
.svc-perf__eyebrow {
	font-family: var(--f-en); font-size: 11px; letter-spacing: 0.32em;
	color: var(--paper-dim); text-transform: uppercase; margin-bottom: 16px;
	text-align: center;
}
#body_wrap.lk-art .post_content .svc-perf__title {
	font-family: var(--f-en) !important;
	font-weight: 700 !important;
	font-size: clamp(36px, 10vw, 140px) !important;
	line-height: 1 !important;
	letter-spacing: 0;
	-webkit-text-stroke: 1.5px var(--paper);
	color: transparent !important;
	text-transform: uppercase;
	margin: 0 0 16px 0 !important;
	text-align: center;
	white-space: nowrap;
}
.svc-perf__sub {
	font-family: var(--f-jp); font-size: 14px; color: var(--paper-dim);
	letter-spacing: 0.1em; text-align: center;
	margin-bottom: clamp(60px, 8vw, 100px);
}

/* ---------- Accordion (Performance & FAQ shared base) ---------- */
.svc-acc {
	border-top: 1px solid var(--line-mid);
}
.svc-acc__row {
	border-bottom: 1px solid var(--line-mid);
}
.svc-acc__head {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: clamp(60px, 8%, 100px) 1fr 40px;
	gap: clamp(16px, 3vw, 40px);
	align-items: center;
	padding: clamp(28px, 3.5vw, 48px) clamp(8px, 1.5vw, 16px);
	transition: background 0.3s;
}
.svc-acc__head::-webkit-details-marker { display: none; }
.svc-acc__row:hover .svc-acc__head {
	background: rgba(237, 232, 221, 0.02);
}
.svc-acc__num {
	font-family: var(--f-en); font-weight: 300;
	font-size: clamp(28px, 4vw, 56px);
	line-height: 1;
	color: var(--navy-soft);
	letter-spacing: 0;
}
.svc-acc__titles { min-width: 0; }
.svc-acc__title {
	font-family: var(--f-jp); font-weight: 500;
	font-size: clamp(20px, 2.4vw, 32px);
	letter-spacing: 0.08em;
	color: var(--paper);
	line-height: 1.3;
}
.svc-acc__sub {
	font-family: var(--f-en); font-size: 11px;
	letter-spacing: 0.24em; color: var(--paper-dim);
	margin-top: 8px; text-transform: uppercase;
}
.svc-acc__icon {
	width: 24px; height: 24px;
	position: relative;
	justify-self: end;
	flex-shrink: 0;
}
.svc-acc__icon::before,
.svc-acc__icon::after {
	content: ""; position: absolute; background: var(--paper);
	top: 50%; left: 0; right: 0;
	height: 1px; margin-top: -0.5px;
	transition: transform 0.3s;
}
.svc-acc__icon::after { transform: rotate(90deg); }
details[open] .svc-acc__icon::before { transform: rotate(135deg); }
details[open] .svc-acc__icon::after { transform: rotate(45deg); }

.svc-acc__body {
	padding: 0 clamp(8px, 1.5vw, 16px) clamp(40px, 5vw, 72px);
}
.svc-acc__body-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 860px) {
	.svc-acc__body-inner {
		grid-template-columns: 1fr 1.2fr;
		gap: 64px;
		align-items: start;
	}
}
#body_wrap.lk-art .post_content .svc-acc__fig {
	aspect-ratio: 4/3;
	background: rgba(237,232,221,0.04);
	border: 1px solid var(--line);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--paper-dim);
	font-family: var(--f-en); font-size: 11px; letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0 !important;
}
#body_wrap.lk-art .post_content .svc-acc__desc {
	font-family: var(--f-jp);
	font-size: 15px;
	line-height: 2.1;
	color: var(--paper-dim);
	margin: 0 0 32px 0 !important;
}
.svc-acc__cap { margin-bottom: 24px; }
.svc-acc__cap:last-child { margin-bottom: 0; }
.svc-acc__cap-label {
	font-family: var(--f-en); font-size: 10px; letter-spacing: 0.24em;
	color: var(--paper-dim); text-transform: uppercase; margin-bottom: 10px;
}
.svc-acc__cap-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--f-jp);
	font-size: 14px;
	line-height: 2;
	color: var(--paper);
}
.svc-acc__cap-list li { padding-left: 18px; position: relative; }
.svc-acc__cap-list li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--paper-dim);
}

/* ---------- FAQ ---------- */
.svc-faq {
	padding: clamp(80px, 10vw, 160px) 5%;
	border-top: 1px solid var(--line);
	box-sizing: border-box;
}
.svc-faq__inner {
	width: min(100%, 980px);
	margin-inline: auto;
}
.svc-faq__eyebrow {
	font-family: var(--f-en); font-size: 11px; letter-spacing: 0.32em;
	color: var(--paper-dim); text-transform: uppercase;
	margin-bottom: 16px; text-align: center;
}
#body_wrap.lk-art .post_content .svc-faq__title {
	font-family: var(--f-en) !important;
	font-weight: 700 !important;
	font-size: clamp(60px, 11vw, 160px) !important;
	line-height: 1 !important;
	letter-spacing: 0.01em;
	-webkit-text-stroke: 1.5px var(--paper);
	color: transparent !important;
	text-transform: uppercase;
	margin: 0 0 16px 0 !important;
	text-align: center;
}
.svc-faq__sub {
	font-family: var(--f-jp); font-size: 14px; color: var(--paper-dim);
	letter-spacing: 0.1em; text-align: center;
	margin-bottom: clamp(50px, 7vw, 80px);
}

/* FAQ 用アコーディオン差分 */
.svc-acc--faq .svc-acc__num {
	font-size: clamp(18px, 2vw, 28px);
	color: var(--paper-dim);
	font-weight: 400;
}
.svc-acc--faq .svc-acc__title {
	font-size: clamp(15px, 1.7vw, 20px);
	letter-spacing: 0.04em;
}
.svc-acc--faq .svc-acc__head {
	grid-template-columns: clamp(40px, 5%, 60px) 1fr 32px;
	padding: clamp(20px, 2.4vw, 32px) clamp(8px, 1.5vw, 16px);
}
.svc-acc--faq .svc-acc__body-inner {
	display: block;
	max-width: 780px;
}
#body_wrap.lk-art .post_content .svc-acc--faq .svc-acc__desc {
	font-size: 14px;
	line-height: 2;
	margin: 0 !important;
}

/* ---------- CTA (minimal) ---------- */
.svc-cta {
	padding: clamp(56px, 7vw, 96px) 5%;
	border-top: 1px solid var(--line);
	text-align: center;
	box-sizing: border-box;
}
.svc-cta__link {
	display: inline-flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 20px);
	font-family: var(--f-en); font-weight: 300;
	font-size: clamp(32px, 5vw, 64px);
	line-height: 1; letter-spacing: 0;
	color: var(--paper);
	transition: opacity 0.3s;
}
.svc-cta__link:hover { opacity: 0.65; }
.svc-cta__link:hover .svc-cta__arrow { transform: translateX(8px); }
.svc-cta__arrow {
	display: inline-block;
	font-size: 0.7em;
	transition: transform 0.3s;
}